diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000000..88ed1c7316
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,21 @@
+[modern]
+# Support for dynamic import is the main litmus test for serving modern builds.
+# Although officially a ES2020 feature, browsers implemented it early, so this
+# enables all of ES2017 and some features in ES2018.
+supports es6-module-dynamic-import
+
+# Exclude Safari 11-12 because of a bug in tagged template literals
+# https://bugs.webkit.org/show_bug.cgi?id=190756
+# Note: Dropping version 11 also enables several more ES2018 features
+not Safari < 13
+not iOS < 13
+
+# Exclude unsupported browsers
+not dead
+
+[legacy]
+# Legacy builds are transpiled to ES5 (strict mode) but also must support some features that cannot be polyfilled:
+# - web sockets to communicate with backend
+# - inline SVG used widely in buttons, widgets, etc.
+# - custom events used for most user interactions
+supports use-strict and supports websockets and supports svg-html5 and supports customevent
diff --git a/.github/workflows/cast_deployment.yaml b/.github/workflows/cast_deployment.yaml
index e9e41b8b4d..1d46f47cb9 100644
--- a/.github/workflows/cast_deployment.yaml
+++ b/.github/workflows/cast_deployment.yaml
@@ -22,7 +22,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
         with:
           ref: dev
 
@@ -58,7 +58,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
         with:
           ref: master
 
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index c2b8d29baa..fe16a8df7d 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -25,7 +25,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
@@ -48,7 +48,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
@@ -66,7 +66,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
@@ -84,7 +84,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
         with:
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 94b8ee085d..b71752c7f7 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -23,7 +23,7 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v3.5.0
+      uses: actions/checkout@v3.5.2
       with:
         # We must fetch at least the immediate parents so that if this is
         # a pull request then we can checkout the head.
diff --git a/.github/workflows/demo_deployment.yaml b/.github/workflows/demo_deployment.yaml
index 025c461ab2..07eb7c900d 100644
--- a/.github/workflows/demo_deployment.yaml
+++ b/.github/workflows/demo_deployment.yaml
@@ -23,7 +23,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
         with:
           ref: dev
 
@@ -59,7 +59,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
         with:
           ref: master
 
diff --git a/.github/workflows/design_deployment.yaml b/.github/workflows/design_deployment.yaml
index 22f8673603..821b6ae9a7 100644
--- a/.github/workflows/design_deployment.yaml
+++ b/.github/workflows/design_deployment.yaml
@@ -17,7 +17,7 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
diff --git a/.github/workflows/design_preview.yaml b/.github/workflows/design_preview.yaml
index 335cbca79b..e8d39053c1 100644
--- a/.github/workflows/design_preview.yaml
+++ b/.github/workflows/design_preview.yaml
@@ -22,7 +22,7 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v3.6.0
diff --git a/.github/workflows/nightly.yaml b/.github/workflows/nightly.yaml
index 224b1b49e0..455d418443 100644
--- a/.github/workflows/nightly.yaml
+++ b/.github/workflows/nightly.yaml
@@ -21,7 +21,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 686ca2ab02..4675b383ff 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -24,7 +24,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -75,7 +75,7 @@ jobs:
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       - name: Build wheels
-        uses: home-assistant/wheels@2022.10.1
+        uses: home-assistant/wheels@2023.04.0
         with:
           abi: cp310
           tag: musllinux_1_2
diff --git a/.github/workflows/translations.yaml b/.github/workflows/translations.yaml
index a0eee41524..e7e7f789ca 100644
--- a/.github/workflows/translations.yaml
+++ b/.github/workflows/translations.yaml
@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3.5.0
+        uses: actions/checkout@v3.5.2
 
       - name: Upload Translations
         run: |
diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs
index a5077badad..1a8735eb03 100644
--- a/build-scripts/bundle.cjs
+++ b/build-scripts/bundle.cjs
@@ -84,17 +84,23 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
 module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   babelrc: false,
   compact: false,
+  assumptions: {
+    privateFieldsAsProperties: true,
+    setPublicClassFields: true,
+    setSpreadProperties: true,
+  },
+  browserslistEnv: latestBuild ? "modern" : "legacy",
   presets: [
-    !latestBuild && [
+    [
       "@babel/preset-env",
       {
-        useBuiltIns: "entry",
-        corejs: { version: "3.30", proposals: true },
+        useBuiltIns: latestBuild ? false : "entry",
+        corejs: latestBuild ? false : { version: "3.30", proposals: true },
         bugfixes: true,
       },
     ],
     "@babel/preset-typescript",
-  ].filter(Boolean),
+  ],
   plugins: [
     [
       path.resolve(
@@ -106,22 +112,8 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
         ignoreModuleNotFound: true,
       },
     ],
-    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
-      "@babel/plugin-proposal-object-rest-spread",
-      { loose: true, useBuiltIns: true },
-    ],
-    // Only support the syntax, Webpack will handle it.
-    "@babel/plugin-syntax-import-meta",
-    "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-syntax-top-level-await",
-    // Support  various proposals
-    "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-nullish-coalescing-operator",
+    // Support  some proposals still in TC39 process
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
-    ["@babel/plugin-proposal-private-methods", { loose: true }],
-    ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
-    ["@babel/plugin-proposal-class-properties", { loose: true }],
     // Minify template literals for production
     isProdBuild && [
       "template-html-minifier",
diff --git a/build-scripts/gulp/app.cjs b/build-scripts/gulp/app.cjs
index 0b6c49354c..4e77e26326 100644
--- a/build-scripts/gulp/app.cjs
+++ b/build-scripts/gulp/app.cjs
@@ -24,8 +24,7 @@ gulp.task(
     gulp.parallel(
       "gen-service-worker-app-dev",
       "gen-icons-json",
-      "gen-pages-dev",
-      "gen-index-app-dev",
+      "gen-pages-app-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -50,10 +49,6 @@ gulp.task(
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests
     ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel(
-      "gen-pages-prod",
-      "gen-index-app-prod",
-      "gen-service-worker-app-prod"
-    )
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
   )
 );
diff --git a/build-scripts/gulp/cast.cjs b/build-scripts/gulp/cast.cjs
index 4dbc9b1eff..ae1a961139 100644
--- a/build-scripts/gulp/cast.cjs
+++ b/build-scripts/gulp/cast.cjs
@@ -19,7 +19,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "gen-index-cast-dev",
+    "gen-pages-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
   )
 );
@@ -35,6 +35,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
-    "gen-index-cast-prod"
+    "gen-pages-cast-prod"
   )
 );
diff --git a/build-scripts/gulp/demo.cjs b/build-scripts/gulp/demo.cjs
index 65d8035c66..657dd35634 100644
--- a/build-scripts/gulp/demo.cjs
+++ b/build-scripts/gulp/demo.cjs
@@ -21,7 +21,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel(
       "gen-icons-json",
-      "gen-index-demo-dev",
+      "gen-pages-demo-dev",
       "build-translations",
       "build-locale-data"
     ),
@@ -42,6 +42,6 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
-    "gen-index-demo-prod"
+    "gen-pages-demo-prod"
   )
 );
diff --git a/build-scripts/gulp/entry-html.cjs b/build-scripts/gulp/entry-html.cjs
index ffb569f7ed..53d7b24f1f 100644
--- a/build-scripts/gulp/entry-html.cjs
+++ b/build-scripts/gulp/entry-html.cjs
@@ -8,344 +8,223 @@ const paths = require("../paths.cjs");
 const env = require("../env.cjs");
 const { htmlMinifierOptions, terserOptions } = require("../bundle.cjs");
 
-const templatePath = (tpl) =>
-  path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
-
-const readFile = (pth) => fs.readFileSync(pth).toString();
-
-const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
-  const compiled = template(readFile(pathFunc(pth)));
+const renderTemplate = (templateFile, data = {}) => {
+  const compiled = template(
+    fs.readFileSync(templateFile, { encoding: "utf-8" })
+  );
   return compiled({
     ...data,
     useRollup: env.useRollup(),
     useWDS: env.useWDS(),
-    renderTemplate,
+    // Resolve any child/nested templates relative to the parent and pass the same data
+    renderTemplate: (childTemplate) =>
+      renderTemplate(
+        path.resolve(path.dirname(templateFile), childTemplate),
+        data
+      ),
   });
 };
 
-const renderDemoTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.demo_dir, "src/html/", `${tpl}.html.template`)
-  );
+const WRAP_TAGS = { ".js": "script", ".css": "style" };
 
-const renderCastTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.cast_dir, "src/html/", `${tpl}.html.template`)
-  );
-
-const renderGalleryTemplate = (pth, data = {}) =>
-  renderTemplate(pth, data, (tpl) =>
-    path.resolve(paths.gallery_dir, "src/html/", `${tpl}.html.template`)
-  );
-
-const minifyHtml = (content) =>
-  minify(content, {
+const minifyHtml = (content, ext) => {
+  const wrapTag = WRAP_TAGS[ext] || "";
+  const begTag = wrapTag && `<${wrapTag}>`;
+  const endTag = wrapTag && `</${wrapTag}>`;
+  return minify(begTag + content + endTag, {
     ...htmlMinifierOptions,
     conservativeCollapse: false,
     minifyJS: terserOptions({
       latestBuild: false, // Shared scripts should be ES5
       isTestBuild: true, // Don't need source maps
     }),
-  });
+  }).then((wrapped) =>
+    wrapTag ? wrapped.slice(begTag.length, -endTag.length) : wrapped
+  );
+};
 
-const PAGES = ["onboarding", "authorize"];
+// Function to generate a dev task for each project's configuration
+// Note Currently WDS paths are hard-coded to only work for app
+const genPagesDevTask =
+  (
+    pageEntries,
+    inputRoot,
+    outputRoot,
+    useWDS = false,
+    inputSub = "src/html",
+    publicRoot = ""
+  ) =>
+  async () => {
+    for (const [page, entries] of Object.entries(pageEntries)) {
+      const content = renderTemplate(
+        path.resolve(inputRoot, inputSub, `${page}.template`),
+        {
+          latestEntryJS: entries.map((entry) =>
+            useWDS
+              ? `http://localhost:8000/src/entrypoints/${entry}.ts`
+              : `${publicRoot}/frontend_latest/${entry}.js`
+          ),
+          es5EntryJS: entries.map(
+            (entry) => `${publicRoot}/frontend_es5/${entry}.js`
+          ),
+          latestCustomPanelJS: useWDS
+            ? "http://localhost:8000/src/entrypoints/custom-panel.ts"
+            : `${publicRoot}/frontend_latest/custom-panel.js`,
+          es5CustomPanelJS: `${publicRoot}/frontend_es5/custom-panel.js`,
+        }
+      );
+      fs.outputFileSync(path.resolve(outputRoot, page), content);
+    }
+  };
 
-gulp.task("gen-pages-dev", (done) => {
-  for (const page of PAGES) {
-    const content = renderTemplate(page, {
-      latestPageJS: `/frontend_latest/${page}.js`,
-
-      es5PageJS: `/frontend_es5/${page}.js`,
-    });
-
-    fs.outputFileSync(
-      path.resolve(paths.app_output_root, `${page}.html`),
-      content
-    );
-  }
-  done();
-});
-
-gulp.task("gen-pages-prod", async () => {
-  const latestManifest = require(path.resolve(
-    paths.app_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
-
-  const minifiedHTML = [];
-  for (const page of PAGES) {
-    const content = renderTemplate(page, {
-      latestPageJS: latestManifest[`${page}.js`],
-      es5PageJS: es5Manifest[`${page}.js`],
-    });
-
-    minifiedHTML.push(
-      minifyHtml(content).then((minified) =>
-        fs.outputFileSync(
-          path.resolve(paths.app_output_root, `${page}.html`),
-          minified
+// Same as previous but for production builds
+// (includes minification and hashed file names from manifest)
+const genPagesProdTask =
+  (
+    pageEntries,
+    inputRoot,
+    outputRoot,
+    outputLatest,
+    outputES5,
+    inputSub = "src/html"
+  ) =>
+  async () => {
+    const latestManifest = require(path.resolve(outputLatest, "manifest.json"));
+    const es5Manifest = outputES5
+      ? require(path.resolve(outputES5, "manifest.json"))
+      : {};
+    const minifiedHTML = [];
+    for (const [page, entries] of Object.entries(pageEntries)) {
+      const content = renderTemplate(
+        path.resolve(inputRoot, inputSub, `${page}.template`),
+        {
+          latestEntryJS: entries.map((entry) => latestManifest[`${entry}.js`]),
+          es5EntryJS: entries.map((entry) => es5Manifest[`${entry}.js`]),
+          latestCustomPanelJS: latestManifest["custom-panel.js"],
+          es5CustomPanelJS: es5Manifest["custom-panel.js"],
+        }
+      );
+      minifiedHTML.push(
+        minifyHtml(content, path.extname(page)).then((minified) =>
+          fs.outputFileSync(path.resolve(outputRoot, page), minified)
         )
-      )
-    );
-  }
-  await Promise.all(minifiedHTML);
-});
+      );
+    }
+    await Promise.all(minifiedHTML);
+  };
 
-gulp.task("gen-index-app-dev", (done) => {
-  let latestAppJS;
-  let latestCoreJS;
-  let latestCustomPanelJS;
+// Map HTML pages to their required entrypoints
+const APP_PAGE_ENTRIES = {
+  "authorize.html": ["authorize"],
+  "onboarding.html": ["onboarding"],
+  "index.html": ["core", "app"],
+};
 
-  if (env.useWDS()) {
-    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
-    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
-    latestCustomPanelJS =
-      "http://localhost:8000/src/entrypoints/custom-panel.ts";
-  } else {
-    latestAppJS = "/frontend_latest/app.js";
-    latestCoreJS = "/frontend_latest/core.js";
-    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
-  }
+gulp.task(
+  "gen-pages-app-dev",
+  genPagesDevTask(
+    APP_PAGE_ENTRIES,
+    paths.polymer_dir,
+    paths.app_output_root,
+    env.useWDS()
+  )
+);
 
-  const content = renderTemplate("index", {
-    latestAppJS,
-    latestCoreJS,
-    latestCustomPanelJS,
-
-    es5AppJS: "/frontend_es5/app.js",
-    es5CoreJS: "/frontend_es5/core.js",
-    es5CustomPanelJS: "/frontend_es5/custom-panel.js",
-  }).replace(/#THEMEC/g, "{{ theme_color }}");
-
-  fs.outputFileSync(path.resolve(paths.app_output_root, "index.html"), content);
-  done();
-});
-
-gulp.task("gen-index-app-prod", async () => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-app-prod",
+  genPagesProdTask(
+    APP_PAGE_ENTRIES,
+    paths.polymer_dir,
+    paths.app_output_root,
     paths.app_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.app_output_es5,
-    "manifest.json"
-  ));
-  const content = renderTemplate("index", {
-    latestAppJS: latestManifest["app.js"],
-    latestCoreJS: latestManifest["core.js"],
-    latestCustomPanelJS: latestManifest["custom-panel.js"],
+    paths.app_output_es5
+  )
+);
 
-    es5AppJS: es5Manifest["app.js"],
-    es5CoreJS: es5Manifest["core.js"],
-    es5CustomPanelJS: es5Manifest["custom-panel.js"],
-  });
-  const minified = (await minifyHtml(content)).replace(
-    /#THEMEC/g,
-    "{{ theme_color }}"
-  );
+const CAST_PAGE_ENTRIES = {
+  "faq.html": ["launcher"],
+  "index.html": ["launcher"],
+  "media.html": ["media"],
+  "receiver.html": ["receiver"],
+};
 
-  fs.outputFileSync(
-    path.resolve(paths.app_output_root, "index.html"),
-    minified
-  );
-});
+gulp.task(
+  "gen-pages-cast-dev",
+  genPagesDevTask(CAST_PAGE_ENTRIES, paths.cast_dir, paths.cast_output_root)
+);
 
-gulp.task("gen-index-cast-dev", (done) => {
-  const contentReceiver = renderCastTemplate("receiver", {
-    latestReceiverJS: "/frontend_latest/receiver.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "receiver.html"),
-    contentReceiver
-  );
-
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: "/frontend_latest/media.js",
-    es5MediaJS: "/frontend_es5/media.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
-
-  const contentFAQ = renderCastTemplate("launcher-faq", {
-    latestLauncherJS: "/frontend_latest/launcher.js",
-    es5LauncherJS: "/frontend_es5/launcher.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "faq.html"),
-    contentFAQ
-  );
-
-  const contentLauncher = renderCastTemplate("launcher", {
-    latestLauncherJS: "/frontend_latest/launcher.js",
-    es5LauncherJS: "/frontend_es5/launcher.js",
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "index.html"),
-    contentLauncher
-  );
-  done();
-});
-
-gulp.task("gen-index-cast-prod", (done) => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-cast-prod",
+  genPagesProdTask(
+    CAST_PAGE_ENTRIES,
+    paths.cast_dir,
+    paths.cast_output_root,
     paths.cast_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.cast_output_es5,
-    "manifest.json"
-  ));
+    paths.cast_output_es5
+  )
+);
 
-  const contentReceiver = renderCastTemplate("receiver", {
-    latestReceiverJS: latestManifest["receiver.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "receiver.html"),
-    contentReceiver
-  );
+const DEMO_PAGE_ENTRIES = { "index.html": ["main"] };
 
-  const contentMedia = renderCastTemplate("media", {
-    latestMediaJS: latestManifest["media.js"],
-    es5MediaJS: es5Manifest["media.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "media.html"),
-    contentMedia
-  );
+gulp.task(
+  "gen-pages-demo-dev",
+  genPagesDevTask(DEMO_PAGE_ENTRIES, paths.demo_dir, paths.demo_output_root)
+);
 
-  const contentFAQ = renderCastTemplate("launcher-faq", {
-    latestLauncherJS: latestManifest["launcher.js"],
-    es5LauncherJS: es5Manifest["launcher.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "faq.html"),
-    contentFAQ
-  );
-
-  const contentLauncher = renderCastTemplate("launcher", {
-    latestLauncherJS: latestManifest["launcher.js"],
-    es5LauncherJS: es5Manifest["launcher.js"],
-  });
-  fs.outputFileSync(
-    path.resolve(paths.cast_output_root, "index.html"),
-    contentLauncher
-  );
-  done();
-});
-
-gulp.task("gen-index-demo-dev", (done) => {
-  const content = renderDemoTemplate("index", {
-    latestDemoJS: "/frontend_latest/main.js",
-
-    es5DemoJS: "/frontend_es5/main.js",
-  });
-
-  fs.outputFileSync(
-    path.resolve(paths.demo_output_root, "index.html"),
-    content
-  );
-  done();
-});
-
-gulp.task("gen-index-demo-prod", async () => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-demo-prod",
+  genPagesProdTask(
+    DEMO_PAGE_ENTRIES,
+    paths.demo_dir,
+    paths.demo_output_root,
     paths.demo_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
-    paths.demo_output_es5,
-    "manifest.json"
-  ));
-  const content = renderDemoTemplate("index", {
-    latestDemoJS: latestManifest["main.js"],
+    paths.demo_output_es5
+  )
+);
 
-    es5DemoJS: es5Manifest["main.js"],
-  });
-  const minified = await minifyHtml(content);
+const GALLERY_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
-  fs.outputFileSync(
-    path.resolve(paths.demo_output_root, "index.html"),
-    minified
-  );
-});
+gulp.task(
+  "gen-pages-gallery-dev",
+  genPagesDevTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root
+  )
+);
 
-gulp.task("gen-index-gallery-dev", (done) => {
-  const content = renderGalleryTemplate("index", {
-    latestGalleryJS: "./frontend_latest/entrypoint.js",
-  });
+gulp.task(
+  "gen-pages-gallery-prod",
+  genPagesProdTask(
+    GALLERY_PAGE_ENTRIES,
+    paths.gallery_dir,
+    paths.gallery_output_root,
+    paths.gallery_output_latest
+  )
+);
 
-  fs.outputFileSync(
-    path.resolve(paths.gallery_output_root, "index.html"),
-    content
-  );
-  done();
-});
+const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
 
-gulp.task("gen-index-gallery-prod", async () => {
-  const latestManifest = require(path.resolve(
-    paths.gallery_output_latest,
-    "manifest.json"
-  ));
-  const content = renderGalleryTemplate("index", {
-    latestGalleryJS: latestManifest["entrypoint.js"],
-  });
-  const minified = await minifyHtml(content);
+gulp.task(
+  "gen-pages-hassio-dev",
+  genPagesDevTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    undefined,
+    "src",
+    paths.hassio_publicPath
+  )
+);
 
-  fs.outputFileSync(
-    path.resolve(paths.gallery_output_root, "index.html"),
-    minified
-  );
-});
-
-gulp.task("gen-index-hassio-dev", async () => {
-  writeHassioEntrypoint(
-    `${paths.hassio_publicPath}/frontend_latest/entrypoint.js`,
-    `${paths.hassio_publicPath}/frontend_es5/entrypoint.js`
-  );
-});
-
-gulp.task("gen-index-hassio-prod", async () => {
-  const latestManifest = require(path.resolve(
+gulp.task(
+  "gen-pages-hassio-prod",
+  genPagesProdTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
     paths.hassio_output_latest,
-    "manifest.json"
-  ));
-  const es5Manifest = require(path.resolve(
     paths.hassio_output_es5,
-    "manifest.json"
-  ));
-  writeHassioEntrypoint(
-    latestManifest["entrypoint.js"],
-    es5Manifest["entrypoint.js"]
-  );
-});
-
-function writeHassioEntrypoint(latestEntrypoint, es5Entrypoint) {
-  fs.mkdirSync(paths.hassio_output_root, { recursive: true });
-  // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
-  fs.writeFileSync(
-    path.resolve(paths.hassio_output_root, "entrypoint.js"),
-    `
-function loadES5() {
-  var el = document.createElement('script');
-  el.src = '${es5Entrypoint}';
-  document.body.appendChild(el);
-}
-if (/.*Version\\/(?:11|12)(?:\\.\\d+)*.*Safari\\//.test(navigator.userAgent)) {
-    loadES5();
-} else {
-  try {
-    new Function("import('${latestEntrypoint}')")();
-  } catch (err) {
-    loadES5();
-  }
-}
-  `,
-    { encoding: "utf-8" }
-  );
-}
+    "src"
+  )
+);
diff --git a/build-scripts/gulp/gallery.cjs b/build-scripts/gulp/gallery.cjs
index 25b53332ce..3670eb18e3 100644
--- a/build-scripts/gulp/gallery.cjs
+++ b/build-scripts/gulp/gallery.cjs
@@ -3,7 +3,7 @@ const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
 const { marked } = require("marked");
-const glob = require("glob");
+const { glob } = require("glob");
 const yaml = require("js-yaml");
 
 const env = require("../env.cjs");
@@ -159,7 +159,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "gen-index-gallery-dev",
+    "gen-pages-gallery-dev",
     gulp.parallel(
       env.useRollup()
         ? "rollup-dev-server-gallery"
@@ -193,6 +193,6 @@ gulp.task(
     ),
     "copy-static-gallery",
     env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
-    "gen-index-gallery-prod"
+    "gen-pages-gallery-prod"
   )
 );
diff --git a/build-scripts/gulp/hassio.cjs b/build-scripts/gulp/hassio.cjs
index 562ed3b646..a958cb0365 100644
--- a/build-scripts/gulp/hassio.cjs
+++ b/build-scripts/gulp/hassio.cjs
@@ -17,7 +17,7 @@ gulp.task(
     },
     "clean-hassio",
     "gen-dummy-icons-json",
-    "gen-index-hassio-dev",
+    "gen-pages-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
     "build-locale-data",
@@ -39,7 +39,7 @@ gulp.task(
     "build-locale-data",
     "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
-    "gen-index-hassio-prod",
+    "gen-pages-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])
   )
diff --git a/build-scripts/gulp/locale-data.cjs b/build-scripts/gulp/locale-data.cjs
index 00bf705f43..4dee68abe2 100755
--- a/build-scripts/gulp/locale-data.cjs
+++ b/build-scripts/gulp/locale-data.cjs
@@ -19,6 +19,7 @@ const modules = {
   "intl-relativetimeformat": "RelativeTimeFormat",
   "intl-datetimeformat": "DateTimeFormat",
   "intl-numberformat": "NumberFormat",
+  "intl-displaynames": "DisplayNames",
 };
 
 gulp.task("create-locale-data", (done) => {
diff --git a/build-scripts/list-preset-env-plugins.js b/build-scripts/list-preset-env-plugins.js
new file mode 100755
index 0000000000..5e869a4ef1
--- /dev/null
+++ b/build-scripts/list-preset-env-plugins.js
@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+// Script to print Babel plugins that will be used by browserslist environments
+
+import { version as babelVersion } from "@babel/core";
+import presetEnv from "@babel/preset-env";
+import { babelOptions } from "./bundle.cjs";
+
+const dummyAPI = {
+  version: babelVersion,
+  assertVersion: () => {},
+  caller: (callback) =>
+    callback({
+      name: "Dummy Bundler",
+      supportsStaticESM: true,
+      supportsDynamicImport: true,
+      supportsTopLevelAwait: true,
+      supportsExportNamespaceFrom: true,
+    }),
+  targets: () => ({}),
+};
+
+for (const browserslistEnv of ["modern", "legacy"]) {
+  console.log("\nBrowsersList Environment = %s\n", browserslistEnv);
+  presetEnv.default(dummyAPI, {
+    ...babelOptions({ latestBuild: browserslistEnv === "modern" })
+      .presets[0][1],
+    browserslistEnv,
+    debug: true,
+  });
+}
diff --git a/cast/src/html/_social_meta.html.template b/cast/src/html/_social_meta.html.template
new file mode 100644
index 0000000000..d3ee681ed3
--- /dev/null
+++ b/cast/src/html/_social_meta.html.template
@@ -0,0 +1,24 @@
+<meta property="fb:app_id" content="338291289691179" />
+<meta property="og:title" content="Home Assistant Cast" />
+<meta property="og:site_name" content="Home Assistant Cast" />
+<meta property="og:url" content="https://cast.home-assistant.io/" />
+<meta property="og:type" content="website" />
+<meta
+  property="og:description"
+  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+/>
+<meta
+  property="og:image"
+  content="https://cast.home-assistant.io/images/google-nest-hub.png"
+/>
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@home_assistant" />
+<meta name="twitter:title" content="Home Assistant Cast" />
+<meta
+  name="twitter:description"
+  content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen."
+/>
+<meta
+  name="twitter:image"
+  content="https://cast.home-assistant.io/images/google-nest-hub.png"
+/>
diff --git a/cast/src/html/launcher-faq.html.template b/cast/src/html/faq.html.template
similarity index 95%
rename from cast/src/html/launcher-faq.html.template
rename to cast/src/html/faq.html.template
index 7ba706c16c..c67a5b477a 100644
--- a/cast/src/html/launcher-faq.html.template
+++ b/cast/src/html/faq.html.template
@@ -3,7 +3,7 @@
   <head>
     <title>Home Assistant Cast - FAQ</title>
     <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate('_style_base') %>
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
     <style>
       body {
         background-color: #e5e5e5;
@@ -35,25 +35,14 @@
     />
   </head>
   <body>
-    <%= renderTemplate('_js_base') %>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <script>
-      import("<%= latestLauncherJS %>");
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
       window.latestJS = true;
     </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
-    </script>
-
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
     <hc-layout subtitle="FAQ">
       <style>
         a {
diff --git a/cast/src/html/index.html.template b/cast/src/html/index.html.template
new file mode 100644
index 0000000000..852a32bd7f
--- /dev/null
+++ b/cast/src/html/index.html.template
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Home Assistant Cast</title>
+    <link rel="manifest" href="/manifest.json" />
+    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
+    <%= renderTemplate("../../../src/html/_style_base.html.template") %>
+    <style>
+      body {
+        background-color: #e5e5e5;
+      }
+    </style>
+    <%= renderTemplate("_social_meta.html.template") %>
+  </head>
+  <body>
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <hc-connect></hc-connect>
+    <script>
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
+      window.latestJS = true;
+    </script>
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
+    <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-57927901-9', 'auto');
+    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
+    </script>
+  </body>
+</html>
diff --git a/cast/src/html/launcher.html.template b/cast/src/html/launcher.html.template
deleted file mode 100644
index d6108c96b8..0000000000
--- a/cast/src/html/launcher.html.template
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Home Assistant Cast</title>
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" href="/images/ha-cast-icon.png" type="image/png" />
-    <%= renderTemplate('_style_base') %>
-    <style>
-      body {
-        background-color: #e5e5e5;
-      }
-    </style>
-    <meta property="fb:app_id" content="338291289691179">
-    <meta property="og:title" content="Home Assistant Cast">
-    <meta property="og:site_name" content="Home Assistant Cast">
-    <meta property="og:url" content="https://cast.home-assistant.io/">
-    <meta property="og:type" content="website">
-    <meta property="og:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
-    <meta property="og:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@home_assistant">
-    <meta name="twitter:title" content="Home Assistant Cast">
-    <meta name="twitter:description" content="Show Home Assistant on your Chromecast or Google Assistant devices with a screen.">
-    <meta name="twitter:image" content="https://cast.home-assistant.io/images/google-nest-hub.png">
-  </head>
-  <body>
-    <%= renderTemplate('_js_base') %>
-
-    <hc-connect></hc-connect>
-
-    <script>
-      import("<%= latestLauncherJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5LauncherJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5LauncherJS %>");
-        <% } %>
-      }
-    </script>
-    <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-57927901-9', 'auto');
-    ga('send', 'pageview', location.pathname.includes("auth_callback") === -1 ? location.pathname : "/");
-    </script>
-  </body>
-</html>
diff --git a/cast/src/html/media.html.template b/cast/src/html/media.html.template
index 5da7267646..e91fbb881c 100644
--- a/cast/src/html/media.html.template
+++ b/cast/src/html/media.html.template
@@ -22,25 +22,14 @@
     </script>
   </head>
   <body>
-    <%= renderTemplate('_js_base') %>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <cast-media-player></cast-media-player>
-
     <script>
-      import("<%= latestMediaJS %>");
+      <% for (const entry of latestEntryJS) { %>
+        import("<%= entry %>");
+      <% } %>
       window.latestJS = true;
     </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5MediaJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5MediaJS %>");
-        <% } %>
-      }
-    </script>
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
   </body>
 </html>
diff --git a/cast/src/html/receiver.html.template b/cast/src/html/receiver.html.template
index 3e1da1fa12..582e9ca865 100644
--- a/cast/src/html/receiver.html.template
+++ b/cast/src/html/receiver.html.template
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
   <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
-  <script type="module" src="<%= latestReceiverJS %>"></script>
-  <%= renderTemplate('_style_base') %>
+  <% for (const entry of latestEntryJS) { %>
+    <script type="module" src="<%= entry %>"></script>
+  <% } %>
+  <%= renderTemplate("../../../src/html/_style_base.html.template") %>
   <style>
     body {
       background-color: white;
diff --git a/demo/src/html/_social_meta.html.template b/demo/src/html/_social_meta.html.template
new file mode 100644
index 0000000000..07b778098e
--- /dev/null
+++ b/demo/src/html/_social_meta.html.template
@@ -0,0 +1,26 @@
+<meta property="fb:app_id" content="338291289691179" />
+<meta property="og:title" content="Home Assistant Demo" />
+<meta property="og:site_name" content="Home Assistant" />
+<meta property="og:url" content="https://demo.home-assistant.io/" />
+<meta property="og:type" content="website" />
+<meta
+  property="og:description"
+  content="Open source home automation that puts local control and privacy first."
+/>
+<meta
+  property="og:image"
+  content="https://www.home-assistant.io/images/default-social.png"
+/>
+
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@home_assistant" />
+
+<meta name="twitter:title" content="Home Assistant" />
+<meta
+  name="twitter:description"
+  content="Open source home automation that puts local control and privacy first."
+/>
+<meta
+  name="twitter:image"
+  content="https://www.home-assistant.io/images/default-social.png"
+/>
diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index 67c8a0bca9..021a9dc55f 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -1,9 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8" />
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-    <link rel="icon" href="/static/icons/favicon.ico" />
+    <title>Home Assistant Demo</title>
+    <%= renderTemplate("../../../src/html/_header.html.template") %>
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
@@ -35,33 +34,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#03a9f4" />
-    <meta property="fb:app_id" content="338291289691179" />
-    <meta property="og:title" content="Home Assistant Demo" />
-    <meta property="og:site_name" content="Home Assistant" />
-    <meta property="og:url" content="https://demo.home-assistant.io/" />
-    <meta property="og:type" content="website" />
-    <meta
-      property="og:description"
-      content="Open source home automation that puts local control and privacy first."
-    />
-    <meta
-      property="og:image"
-      content="https://www.home-assistant.io/images/default-social.png"
-    />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="@home_assistant" />
-
-    <meta name="twitter:title" content="Home Assistant" />
-    <meta
-      name="twitter:description"
-      content="Open source home automation that puts local control and privacy first."
-    />
-    <meta
-      name="twitter:image"
-      content="https://www.home-assistant.io/images/default-social.png"
-    />
-    <title>Home Assistant Demo</title>
+    <%= renderTemplate("_social_meta.html.template") %>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
@@ -107,29 +80,22 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
-
     <ha-demo></ha-demo>
-
-    <%= renderTemplate('_js_base') %>
-    <%= renderTemplate('_preload_roboto') %>
-
+    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
+    <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
     <script>
-      import("<%= latestDemoJS %>");
-      window.latestJS = true;
-    </script>
-
-    <script>
-      if (!window.latestJS) {
-        <% if (useRollup) { %>
-          _ls("/static/js/s.min.js").onload = function() {
-            System.import("<%= es5DemoJS %>");
-          };
-        <% } else { %>
-          _ls("<%= es5DemoJS %>");
+      if (!window.globalThis) {
+        window.globalThis = window;
+      }
+      // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
+      if (!isS11_12) {
+        <% for (const entry of latestEntryJS) { %>
+          import("<%= entry %>");
         <% } %>
+        window.latestJS = true;
       }
     </script>
-
+    <%= renderTemplate("../../../src/html/_script_load_es5.html.template") %>
     <script>
       var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
       (function (d, t) {
diff --git a/gallery/src/html/index.html.template b/gallery/src/html/index.html.template
index 05d6a4bb36..ef3091d6f2 100644
--- a/gallery/src/html/index.html.template
+++ b/gallery/src/html/index.html.template
@@ -8,8 +8,9 @@
     />
     <meta name="theme-color" content="#2157BC" />
     <title>Home Assistant Design</title>
-
-    <script type="module" src="<%= latestGalleryJS %>"></script>
+    <% for (const entry of latestEntryJS) { %>
+      <script type="module" src="<%= entry %>"></script>
+    <% } %>
     <style>
       body {
         font-family: Roboto, Noto, sans-serif;
diff --git a/gallery/src/pages/components/ha-form.ts b/gallery/src/pages/components/ha-form.ts
index 0bc1ff458d..05591dcee3 100644
--- a/gallery/src/pages/components/ha-form.ts
+++ b/gallery/src/pages/components/ha-form.ts
@@ -336,7 +336,7 @@ const SCHEMAS: {
           ["and", "another_one"],
           ["option", "1000"],
         ],
-        name: "select many otions",
+        name: "select many options",
         default: "default",
       },
     ],
@@ -364,7 +364,7 @@ const SCHEMAS: {
           and: "another_one",
           option: "1000",
         },
-        name: "multi many otions",
+        name: "multi many options",
         default: ["default"],
       },
     ],
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index ab434eb8ca..f6fdb1d6cb 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -216,7 +216,7 @@ export class HassioAddonStore extends LitElement {
     });
   }
 
-  private async _filterChanged(e) {
+  private _filterChanged(e) {
     this._filter = e.detail.value;
   }
 
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index a6e8c99217..356eb64c2b 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -29,7 +29,6 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { navigate } from "../../../../src/common/navigate";
-import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
@@ -47,6 +46,7 @@ import {
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
   installHassioAddon,
+  rebuildLocalAddon,
   restartHassioAddon,
   setHassioAddonOption,
   setHassioAddonSecurity,
@@ -640,13 +640,12 @@ class HassioAddonInfo extends LitElement {
                   </ha-progress-button>
                   ${this.addon.build
                     ? html`
-                        <ha-call-api-button
+                        <ha-progress-button
                           class="warning"
-                          .hass=${this.hass}
-                          .path="hassio/addons/${this.addon.slug}/rebuild"
+                          @click=${this._rebuildClicked}
                         >
                           ${this.supervisor.localize("addon.dashboard.rebuild")}
-                        </ha-call-api-button>
+                        </ha-progress-button>
                       `
                     : ""}`
               : ""}
@@ -966,6 +965,21 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
+  private async _rebuildClicked(ev: CustomEvent): Promise<void> {
+    const button = ev.currentTarget as any;
+    button.progress = true;
+
+    try {
+      await rebuildLocalAddon(this.hass, this.addon.slug);
+    } catch (err: any) {
+      showAlertDialog(this, {
+        title: this.supervisor.localize("addon.dashboard.action_error.rebuild"),
+        text: extractApiErrorMessage(err),
+      });
+    }
+    button.progress = false;
+  }
+
   private async _startClicked(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
     button.progress = true;
@@ -1124,10 +1138,6 @@ class HassioAddonInfo extends LitElement {
         ha-svg-icon.stopped {
           color: var(--error-color);
         }
-        ha-call-api-button {
-          font-weight: 500;
-          color: var(--primary-color);
-        }
         protection-enable mwc-button {
           --mdc-theme-primary: white;
         }
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index 027b8b53ab..943e92972c 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -316,7 +316,7 @@ export class DialogHassioNetwork
       >
         <div class="radio-row">
           <ha-formfield
-            .label=${this.supervisor.localize("dialog.network.dhcp")}
+            .label=${this.supervisor.localize("dialog.network.auto")}
           >
             <ha-radio
               @change=${this._handleRadioValueChanged}
diff --git a/hassio/src/entrypoint.js.template b/hassio/src/entrypoint.js.template
new file mode 100644
index 0000000000..c1c4e5831c
--- /dev/null
+++ b/hassio/src/entrypoint.js.template
@@ -0,0 +1,22 @@
+(function () {
+  function loadES5(src) {
+    var el = document.createElement("script");
+    el.src = src;
+    document.body.appendChild(el);
+  }
+  if (/.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent)) {
+    <% for (const entry of es5EntryJS) { %>
+      loadES5("<%= entry %>");
+    <% } %>
+  } else {
+    try {
+        <% for (const entry of latestEntryJS) { %>
+          new Function("import('<%= entry %>')")();
+        <% } %>
+    } catch (err) {
+      <% for (const entry of es5EntryJS) { %>
+        loadES5("<%= entry %>");
+      <% } %>
+  }
+  }
+})();
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index 5d52f618da..495d5d3e2e 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -44,10 +44,6 @@ export const hassioStyle = css`
       grid-template-columns: repeat(auto-fit, minmax(300px, 0.25fr));
     }
   }
-  ha-call-api-button {
-    font-weight: 500;
-    color: var(--primary-color);
-  }
   .error {
     color: var(--error-color);
     margin-top: 16px;
diff --git a/package.json b/package.json
index 2b0687469a..2e41f4e4dd 100644
--- a/package.json
+++ b/package.json
@@ -26,20 +26,21 @@
   "type": "module",
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
-    "@codemirror/autocomplete": "6.4.2",
-    "@codemirror/commands": "6.2.2",
+    "@codemirror/autocomplete": "6.5.1",
+    "@codemirror/commands": "6.2.3",
     "@codemirror/language": "6.6.0",
     "@codemirror/legacy-modes": "6.3.2",
     "@codemirror/search": "6.3.0",
     "@codemirror/state": "6.2.0",
-    "@codemirror/view": "6.9.3",
+    "@codemirror/view": "6.9.5",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.5.1",
+    "@formatjs/intl-datetimeformat": "6.7.0",
+    "@formatjs/intl-displaynames": "6.3.1",
     "@formatjs/intl-getcanonicallocales": "2.1.0",
-    "@formatjs/intl-locale": "3.1.1",
-    "@formatjs/intl-numberformat": "8.3.5",
-    "@formatjs/intl-pluralrules": "5.1.10",
-    "@formatjs/intl-relativetimeformat": "11.1.10",
+    "@formatjs/intl-locale": "3.2.1",
+    "@formatjs/intl-numberformat": "8.4.1",
+    "@formatjs/intl-pluralrules": "5.2.1",
+    "@formatjs/intl-relativetimeformat": "11.2.1",
     "@fullcalendar/core": "6.1.5",
     "@fullcalendar/daygrid": "6.1.5",
     "@fullcalendar/interaction": "6.1.5",
@@ -90,8 +91,8 @@
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "23.3.10",
-    "@vaadin/vaadin-themable-mixin": "23.3.10",
+    "@vaadin/combo-box": "23.3.11",
+    "@vaadin/vaadin-themable-mixin": "23.3.11",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -101,18 +102,18 @@
     "app-datepicker": "5.1.1",
     "chart.js": "3.3.2",
     "comlink": "4.4.1",
-    "core-js": "3.30.0",
+    "core-js": "3.30.1",
     "cropperjs": "1.5.13",
     "date-fns": "2.29.3",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "fuse.js": "6.6.2",
-    "google-timezones-json": "1.0.2",
+    "google-timezones-json": "1.1.0",
     "hls.js": "1.3.5",
     "home-assistant-js-websocket": "8.0.1",
     "idb-keyval": "6.2.0",
-    "intl-messageformat": "10.3.3",
+    "intl-messageformat": "10.3.4",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.3",
     "leaflet-draw": "1.0.4",
@@ -149,15 +150,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.21.4",
-    "@babel/plugin-external-helpers": "7.18.6",
-    "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-decorators": "7.21.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
-    "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-syntax-top-level-await": "7.14.5",
     "@babel/preset-env": "7.21.4",
     "@babel/preset-typescript": "7.21.4",
     "@koa/cors": "4.0.0",
@@ -166,7 +159,7 @@
     "@octokit/rest": "19.0.7",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "24.0.1",
+    "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-json": "6.0.0",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@rollup/plugin-replace": "5.0.2",
@@ -185,8 +178,8 @@
     "@types/sortablejs": "1.15.1",
     "@types/tar": "6.1.4",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.57.1",
+    "@typescript-eslint/eslint-plugin": "5.59.0",
+    "@typescript-eslint/parser": "5.59.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.2",
@@ -200,23 +193,23 @@
     "eslint-import-resolver-webpack": "0.13.2",
     "eslint-plugin-disable": "2.0.3",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-lit": "1.8.2",
+    "eslint-plugin-lit": "1.8.3",
     "eslint-plugin-lit-a11y": "2.4.1",
     "eslint-plugin-unused-imports": "2.0.0",
     "eslint-plugin-wc": "1.4.0",
     "esprima": "4.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.1.1",
-    "glob": "9.3.4",
+    "glob": "10.2.1",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
     "gulp-json-transform": "0.4.8",
     "gulp-merge-json": "2.1.2",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
-    "html-minifier-terser": "7.1.0",
+    "html-minifier-terser": "7.2.0",
     "husky": "8.0.3",
-    "instant-mocha": "1.5.0",
+    "instant-mocha": "1.5.1",
     "jszip": "3.10.1",
     "lint-staged": "13.2.1",
     "lit-analyzer": "1.2.1",
@@ -234,7 +227,7 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.9.0",
     "serve-handler": "6.1.5",
-    "sinon": "15.0.3",
+    "sinon": "15.0.4",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.1",
     "tar": "6.1.13",
@@ -245,7 +238,7 @@
     "vinyl-source-stream": "2.0.0",
     "webpack": "=5.72.1",
     "webpack-cli": "5.0.1",
-    "webpack-dev-server": "4.13.2",
+    "webpack-dev-server": "4.13.3",
     "webpack-manifest-plugin": "5.0.0",
     "webpackbar": "5.0.2",
     "workbox-build": "6.5.4"
diff --git a/pyproject.toml b/pyproject.toml
index 955da413bc..9b9d6431ab 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20230411.1"
+version      = "20230426.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 0577a0af7c..b5070dee73 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -9,6 +9,7 @@ import {
   PropertyValues,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
 import "../components/ha-checkbox";
 import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
@@ -20,13 +21,12 @@ import {
   DataEntryFlowStep,
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import "./ha-password-manager-polyfill";
 
 type State = "loading" | "error" | "step";
 
 @customElement("ha-auth-flow")
-export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
+export class HaAuthFlow extends LitElement {
   @property({ attribute: false }) public authProvider?: AuthProvider;
 
   @property() public clientId?: string;
@@ -35,6 +35,8 @@ export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
+  @property() public localize!: LocalizeFunc;
+
   @state() private _state: State = "loading";
 
   @state() private _stepData?: Record<string, any>;
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index 9f780facc2..deadcf765e 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -82,12 +82,13 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         .redirectUri=${this.redirectUri}
         .oauth2State=${this.oauth2State}
         .authProvider=${this._authProvider}
+        .localize=${this.localize}
       ></ha-auth-flow>
 
       ${inactiveProviders.length > 0
         ? html`
             <ha-pick-auth-provider
-              .resources=${this.resources}
+              .localize=${this.localize}
               .clientId=${this.clientId}
               .authProviders=${inactiveProviders}
               @pick-auth-provider=${this._handleAuthProviderPick}
diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts
index c1b53f83c0..963874393a 100644
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@@ -2,10 +2,10 @@ import "@material/mwc-list";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-next";
 import "../components/ha-list-item";
 import { AuthProvider } from "../data/auth";
-import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 
 declare global {
   interface HASSDomEvents {
@@ -14,9 +14,11 @@ declare global {
 }
 
 @customElement("ha-pick-auth-provider")
-export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
+export class HaPickAuthProvider extends LitElement {
   @property() public authProviders: AuthProvider[] = [];
 
+  @property() public localize!: LocalizeFunc;
+
   protected render() {
     return html`
       <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
diff --git a/src/common/const.ts b/src/common/const.ts
index 6e9d669bc5..c7b2ac917f 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -50,6 +50,7 @@ import {
   mdiRobotVacuum,
   mdiScriptText,
   mdiSineWave,
+  mdiSpeakerMessage,
   mdiSpeedometer,
   mdiSunWireless,
   mdiThermometer,
@@ -75,8 +76,8 @@ export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
-  alert: mdiAlert,
   air_quality: mdiAirFilter,
+  alert: mdiAlert,
   calendar: mdiCalendar,
   climate: mdiThermostat,
   configurator: mdiCog,
@@ -106,10 +107,12 @@ export const FIXED_DOMAIN_ICONS = {
   script: mdiScriptText,
   select: mdiFormatListBulleted,
   sensor: mdiEye,
-  siren: mdiBullhorn,
   simple_alarm: mdiBell,
+  siren: mdiBullhorn,
+  stt: mdiMicrophoneMessage,
   text: mdiFormTextbox,
   timer: mdiTimerOutline,
+  tts: mdiSpeakerMessage,
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   zone: mdiMapMarkerRadius,
diff --git a/src/common/dom/speech-recognition.ts b/src/common/dom/speech-recognition.ts
deleted file mode 100644
index 6efec5b8a2..0000000000
--- a/src/common/dom/speech-recognition.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const SpeechRecognition =
-  window.SpeechRecognition || window.webkitSpeechRecognition;
-export const SpeechGrammarList =
-  window.SpeechGrammarList || window.webkitSpeechGrammarList;
-export const SpeechRecognitionEvent =
-  // @ts-expect-error
-  window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 53b194090b..e07f19fc20 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -193,11 +193,9 @@ export const computeStateDisplayFromEntityAttributes = (
     );
   }
 
-  // state of button is a timestamp
+  // state is a timestamp
   if (
-    domain === "button" ||
-    domain === "input_button" ||
-    domain === "scene" ||
+    ["button", "input_button", "scene", "stt", "tts"].includes(domain) ||
     (domain === "sensor" && attributes.device_class === "timestamp")
   ) {
     try {
diff --git a/src/common/language/format_language.ts b/src/common/language/format_language.ts
new file mode 100644
index 0000000000..76180912a9
--- /dev/null
+++ b/src/common/language/format_language.ts
@@ -0,0 +1,22 @@
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
+
+export const formatLanguageCode = (
+  languageCode: string,
+  locale: FrontendLocaleData
+) => {
+  try {
+    return formatLanguageCodeMem(locale)?.of(languageCode) ?? languageCode;
+  } catch {
+    return languageCode;
+  }
+};
+
+const formatLanguageCodeMem = memoizeOne((locale: FrontendLocaleData) =>
+  Intl && "DisplayNames" in Intl
+    ? new Intl.DisplayNames(locale.language, {
+        type: "language",
+        fallback: "code",
+      })
+    : undefined
+);
diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts
index c79f50b4bf..65c00f3b6c 100644
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -2,6 +2,7 @@ import { shouldPolyfill as shouldPolyfillLocale } from "@formatjs/intl-locale/li
 import { shouldPolyfill as shouldPolyfillPluralRules } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import { shouldPolyfill as shouldPolyfillRelativeTime } from "@formatjs/intl-relativetimeformat/lib/should-polyfill";
 import { shouldPolyfill as shouldPolyfillDateTime } from "@formatjs/intl-datetimeformat/lib/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDisplayName } from "@formatjs/intl-displaynames/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources, TranslationDict } from "../../types";
 import { getLocalLanguage } from "../../util/common-translation";
@@ -83,6 +84,10 @@ if (__BUILD__ === "latest") {
     polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
     polyfills.push(import("@formatjs/intl-datetimeformat/add-all-tz"));
   }
+  if (shouldPolyfillDisplayName(locale)) {
+    polyfills.push(import("@formatjs/intl-displaynames/polyfill"));
+    polyfills.push(import("@formatjs/intl-displaynames/locale-data/en"));
+  }
 }
 
 export const polyfillsLoaded =
@@ -216,6 +221,17 @@ export const loadPolyfillLocales = async (language: string) => {
       // @ts-ignore
       Intl.DateTimeFormat.__addLocaleData(await result.json());
     }
+    if (
+      Intl.DisplayNames &&
+      // @ts-ignore
+      typeof Intl.DisplayNames.__addLocaleData === "function"
+    ) {
+      const result = await fetch(
+        `/static/locale-data/intl-displaynames/${language}.json`
+      );
+      // @ts-ignore
+      Intl.DisplayNames.__addLocaleData(await result.json());
+    }
   } catch (e) {
     // Ignore
   }
diff --git a/src/components/buttons/ha-call-api-button.ts b/src/components/buttons/ha-call-api-button.ts
deleted file mode 100644
index 05fc1f878d..0000000000
--- a/src/components/buttons/ha-call-api-button.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import "./ha-progress-button";
-
-@customElement("ha-call-api-button")
-class HaCallApiButton extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public method: "POST" | "GET" | "PUT" | "DELETE" = "POST";
-
-  @property() public data = {};
-
-  @property({ type: Boolean, reflect: true }) public disabled = false;
-
-  @property({ type: Boolean }) public progress = false;
-
-  @property() public path?: string;
-
-  @query("ha-progress-button", true) private _progressButton;
-
-  render() {
-    return html`
-      <ha-progress-button
-        .progress=${this.progress}
-        @click=${this._buttonTapped}
-        ?disabled=${this.disabled}
-        ><slot></slot
-      ></ha-progress-button>
-    `;
-  }
-
-  async _buttonTapped() {
-    this.progress = true;
-    const eventData: {
-      method: string;
-      path: string;
-      data: any;
-      success?: boolean;
-      response?: any;
-    } = {
-      method: this.method,
-      path: this.path!,
-      data: this.data,
-    };
-
-    try {
-      const resp = await this.hass.callApi(this.method, this.path!, this.data);
-      this.progress = false;
-      this._progressButton.actionSuccess();
-      eventData.success = true;
-      eventData.response = resp;
-    } catch (err: any) {
-      this.progress = false;
-      this._progressButton.actionError();
-      eventData.success = false;
-      eventData.response = err;
-    }
-
-    fireEvent(this, "hass-api-called", eventData as any);
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host([disabled]) {
-        pointer-events: none;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-call-api-button": HaCallApiButton;
-  }
-}
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index f83244a3e4..518e554e4a 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -73,7 +73,7 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   main?: boolean;
   title: TemplateResult | string;
   label?: TemplateResult | string;
-  type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
+  type?: "numeric" | "icon" | "icon-button" | "overflow-menu" | "flex";
   template?: (data: any, row: T) => TemplateResult | string | typeof nothing;
   width?: string;
   maxWidth?: string;
@@ -359,10 +359,10 @@ export class HaDataTable extends LitElement {
       return nothing;
     }
     if (row.append) {
-      return html` <div class="mdc-data-table__row">${row.content}</div> `;
+      return html`<div class="mdc-data-table__row">${row.content}</div>`;
     }
     if (row.empty) {
-      return html` <div class="mdc-data-table__row"></div> `;
+      return html`<div class="mdc-data-table__row"></div>`;
     }
     return html`
       <div
@@ -406,6 +406,7 @@ export class HaDataTable extends LitElement {
             <div
               role=${column.main ? "rowheader" : "cell"}
               class="mdc-data-table__cell ${classMap({
+                "mdc-data-table__cell--flex": column.type === "flex",
                 "mdc-data-table__cell--numeric": column.type === "numeric",
                 "mdc-data-table__cell--icon": column.type === "icon",
                 "mdc-data-table__cell--icon-button":
@@ -663,6 +664,10 @@ export class HaDataTable extends LitElement {
           box-sizing: border-box;
         }
 
+        .mdc-data-table__cell.mdc-data-table__cell--flex {
+          display: flex;
+        }
+
         .mdc-data-table__cell.mdc-data-table__cell--icon {
           overflow: initial;
         }
diff --git a/src/components/ha-aliases-editor.ts b/src/components/ha-aliases-editor.ts
new file mode 100644
index 0000000000..ec79e59968
--- /dev/null
+++ b/src/components/ha-aliases-editor.ts
@@ -0,0 +1,129 @@
+import "@material/mwc-button/mwc-button";
+import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-area-picker";
+import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
+import { fireEvent } from "../common/dom/fire_event";
+
+@customElement("ha-aliases-editor")
+class AliasesEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public aliases!: string[];
+
+  protected render() {
+    if (!this.aliases) {
+      return nothing;
+    }
+
+    return html`
+      ${this.aliases.map(
+        (alias, index) => html`
+          <div class="layout horizontal center-center row">
+            <ha-textfield
+              dialogInitialFocus=${index}
+              .index=${index}
+              class="flex-auto"
+              .label=${this.hass!.localize("ui.dialogs.aliases.input_label", {
+                number: index + 1,
+              })}
+              .value=${alias}
+              ?data-last=${index === this.aliases.length - 1}
+              @input=${this._editAlias}
+              @keydown=${this._keyDownAlias}
+            ></ha-textfield>
+            <ha-icon-button
+              .index=${index}
+              slot="navigationIcon"
+              label=${this.hass!.localize("ui.dialogs.aliases.remove_alias", {
+                number: index + 1,
+              })}
+              @click=${this._removeAlias}
+              .path=${mdiDeleteOutline}
+            ></ha-icon-button>
+          </div>
+        `
+      )}
+      <div class="layout horizontal center-center">
+        <mwc-button @click=${this._addAlias}>
+          ${this.hass!.localize("ui.dialogs.aliases.add_alias")}
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </mwc-button>
+      </div>
+    `;
+  }
+
+  private async _addAlias() {
+    this.aliases = [...this.aliases, ""];
+    this._fireChanged(this.aliases);
+    await this.updateComplete;
+    const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
+      | HaTextField
+      | undefined;
+    field?.focus();
+  }
+
+  private async _editAlias(ev: Event) {
+    const index = (ev.target as any).index;
+    const aliases = [...this.aliases];
+    aliases[index] = (ev.target as any).value;
+    this._fireChanged(aliases);
+  }
+
+  private async _keyDownAlias(ev: KeyboardEvent) {
+    if (ev.key === "Enter") {
+      ev.stopPropagation();
+      this._addAlias();
+    }
+  }
+
+  private async _removeAlias(ev: Event) {
+    const index = (ev.target as any).index;
+    const aliases = [...this.aliases];
+    aliases.splice(index, 1);
+    this._fireChanged(aliases);
+  }
+
+  private _fireChanged(value) {
+    fireEvent(this, "value-changed", { value });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .row {
+          margin-bottom: 8px;
+        }
+        ha-textfield {
+          display: block;
+        }
+        ha-icon-button {
+          display: block;
+        }
+        mwc-button {
+          margin-left: 8px;
+        }
+        #alias_input {
+          margin-top: 8px;
+        }
+        .alias {
+          border: 1px solid var(--divider-color);
+          border-radius: 4px;
+          margin-top: 4px;
+          --mdc-icon-button-size: 24px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-aliases-editor": AliasesEditor;
+  }
+}
diff --git a/src/components/ha-assist-pipeline-picker.ts b/src/components/ha-assist-pipeline-picker.ts
new file mode 100644
index 0000000000..0d51bc1444
--- /dev/null
+++ b/src/components/ha-assist-pipeline-picker.ts
@@ -0,0 +1,109 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValueMap,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { formatLanguageCode } from "../common/language/format_language";
+import { AssistPipeline, listAssistPipelines } from "../data/assist_pipeline";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const PREFERRED = "__PREFERRED_PIPELINE_OPTION__";
+
+@customElement("ha-assist-pipeline-picker")
+export class HaAssistPipelinePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _pipelines?: AssistPipeline[];
+
+  @state() _preferredPipeline: string | null = null;
+
+  protected render() {
+    if (!this._pipelines) {
+      return nothing;
+    }
+    const value = this.value ?? PREFERRED;
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.pipeline-picker.pipeline")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        <ha-list-item .value=${PREFERRED}>
+          ${this.hass!.localize("ui.components.pipeline-picker.preferred", {
+            preferred: this._pipelines.find(
+              (pipeline) => pipeline.id === this._preferredPipeline
+            )?.name,
+          })}
+        </ha-list-item>
+        ${this._pipelines.map(
+          (pipeline) =>
+            html`<ha-list-item .value=${pipeline.id}>
+              ${pipeline.name}
+              (${formatLanguageCode(pipeline.language, this.hass.locale)})
+            </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected firstUpdated(
+    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(changedProperties);
+    listAssistPipelines(this.hass).then((pipelines) => {
+      this._pipelines = pipelines.pipelines;
+      this._preferredPipeline = pipelines.preferred_pipeline;
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === PREFERRED)
+    ) {
+      return;
+    }
+    this.value = target.value === PREFERRED ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-assist-pipeline-picker": HaAssistPipelinePicker;
+  }
+}
diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts
index 318fe8c483..959f679431 100644
--- a/src/components/ha-button.ts
+++ b/src/components/ha-button.ts
@@ -13,6 +13,9 @@ export class HaButton extends Button {
         margin-inline-end: 8px;
         direction: var(--direction);
       }
+      .mdc-button {
+        height: var(--button-height, 36px);
+      }
     `,
   ];
 }
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index 061a241e07..bc0153d885 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -14,8 +14,9 @@ import { customElement, property, query } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
-import "./ha-list-item";
 import "./ha-icon-button";
+import "./ha-list-item";
+import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 registerStyles(
diff --git a/src/components/ha-conversation-agent-picker.ts b/src/components/ha-conversation-agent-picker.ts
new file mode 100644
index 0000000000..2208b1555e
--- /dev/null
+++ b/src/components/ha-conversation-agent-picker.ts
@@ -0,0 +1,159 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { debounce } from "../common/util/debounce";
+import { Agent, listAgents } from "../data/conversation";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+@customElement("ha-conversation-agent-picker")
+export class HaConversationAgentPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public language?: string;
+
+  @property() public label?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _agents?: Agent[];
+
+  protected render() {
+    if (!this._agents) {
+      return nothing;
+    }
+    const value =
+      this.value ??
+      (this.required &&
+      (!this.language ||
+        this._agents
+          .find((agent) => agent.id === "homeassistant")
+          ?.supported_languages.includes(this.language))
+        ? "homeassistant"
+        : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize(
+          "ui.components.coversation-agent-picker.conversation_agent"
+        )}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize(
+                "ui.components.coversation-agent-picker.none"
+              )}
+            </ha-list-item>`
+          : nothing}
+        ${this._agents.map(
+          (agent) =>
+            html`<ha-list-item
+              .value=${agent.id}
+              .disabled=${agent.supported_languages !== "*" &&
+              agent.supported_languages.length === 0}
+            >
+              ${agent.name}
+            </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateAgents();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateAgents();
+    }
+  }
+
+  private _debouncedUpdateAgents = debounce(() => this._updateAgents(), 500);
+
+  private async _updateAgents() {
+    const { agents } = await listAgents(
+      this.hass,
+      this.language,
+      this.hass.config.country || undefined
+    );
+
+    this._agents = agents;
+
+    if (!this.value) {
+      return;
+    }
+
+    const selectedAgent = agents.find((agent) => agent.id === this.value);
+
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedAgent?.supported_languages,
+    });
+
+    if (
+      !selectedAgent ||
+      (selectedAgent.supported_languages !== "*" &&
+        selectedAgent.supported_languages.length === 0)
+    ) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._agents!.find((agent) => agent.id === this.value)
+        ?.supported_languages,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-conversation-agent-picker": HaConversationAgentPicker;
+  }
+  interface HASSDomEvents {
+    "supported-languages-changed": { value: "*" | string[] | undefined };
+  }
+}
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index d0c0ae8596..3175d393ba 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -7,7 +7,7 @@ import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
-const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button"];
+const SUPPRESS_DEFAULT_PRESS_SELECTOR = ["button", "ha-list-item"];
 
 export const createCloseHeading = (
   hass: HomeAssistant,
@@ -92,7 +92,7 @@ export class HaDialog extends DialogBase {
         padding: 24px 24px 0 24px;
       }
       .mdc-dialog__actions {
-        padding: 0 24px 24px 24px;
+        padding: 12px 24px 12px 24px;
       }
       .mdc-dialog__title::before {
         display: block;
diff --git a/src/components/ha-drawer.ts b/src/components/ha-drawer.ts
index 5fcfd031c6..37461fb1df 100644
--- a/src/components/ha-drawer.ts
+++ b/src/components/ha-drawer.ts
@@ -1,9 +1,3 @@
-import {
-  DIRECTION_LEFT,
-  DIRECTION_RIGHT,
-  Manager,
-  Swipe,
-} from "@egjs/hammerjs";
 import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
 import { styles } from "@material/mwc-drawer/mwc-drawer.css";
 import { css, PropertyValues } from "lit";
@@ -40,35 +34,51 @@ export class HaDrawer extends DrawerBase {
       this.mdcRoot.dir = this.direction;
     }
     if (changedProps.has("open") && this.open && this.type === "modal") {
-      this._mc = new Manager(document, {
-        touchAction: "pan-y",
-      });
-      this._mc.add(
-        new Swipe({
-          direction:
-            this.direction === "rtl" ? DIRECTION_RIGHT : DIRECTION_LEFT,
-        })
-      );
-      this._mc.on("swipeleft swiperight", () => {
-        fireEvent(this, "hass-toggle-menu", { open: false });
-      });
+      this._setupSwipe();
     } else if (this._mc) {
       this._mc.destroy();
       this._mc = undefined;
     }
   }
 
+  private async _setupSwipe() {
+    const hammer = await import("../resources/hammer");
+    this._mc = new hammer.Manager(document, {
+      touchAction: "pan-y",
+    });
+    this._mc.add(
+      new hammer.Swipe({
+        direction:
+          this.direction === "rtl"
+            ? hammer.DIRECTION_RIGHT
+            : hammer.DIRECTION_LEFT,
+      })
+    );
+    this._mc.on("swipeleft swiperight", () => {
+      fireEvent(this, "hass-toggle-menu", { open: false });
+    });
+  }
+
   static override styles = [
     styles,
     css`
       .mdc-drawer {
+        position: fixed;
         top: 0;
+        border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
       }
       .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
         z-index: 200;
       }
       .mdc-drawer-app-content {
-        transform: translateZ(0);
+        overflow: unset;
+        flex: none;
+        padding-left: var(--mdc-drawer-width);
+        padding-inline-start: var(--mdc-drawer-width);
+        padding-inline-end: initial;
+        direction: var(--direction);
+        width: 100%;
+        box-sizing: border-box;
       }
     `,
   ];
diff --git a/src/components/ha-form/ha-form-expandable.ts b/src/components/ha-form/ha-form-expandable.ts
index 86c108caac..2c4892efdd 100644
--- a/src/components/ha-form/ha-form-expandable.ts
+++ b/src/components/ha-form/ha-form-expandable.ts
@@ -71,6 +71,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
         display: block;
         --expansion-panel-content-padding: 0;
         border-radius: 6px;
+        --ha-card-border-radius: 6px;
       }
       ha-svg-icon,
       ha-icon {
diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts
index 2ccb082c8a..f74377c12a 100644
--- a/src/components/ha-form/ha-form-grid.ts
+++ b/src/components/ha-form/ha-form-grid.ts
@@ -33,6 +33,11 @@ export class HaFormGrid extends LitElement implements HaFormElement {
 
   @property() public computeHelper?: (schema: HaFormSchema) => string;
 
+  public async focus() {
+    await this.updateComplete;
+    this.renderRoot.querySelector("ha-form")?.focus();
+  }
+
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("schema")) {
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index 12b1fa9cd4..3062c2317d 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -4,6 +4,7 @@ import {
   html,
   LitElement,
   PropertyValues,
+  ReactiveElement,
   TemplateResult,
 } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -56,13 +57,18 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public localizeValue?: (key: string) => string;
 
-  public focus() {
-    const root = this.shadowRoot?.querySelector(".root");
+  public async focus() {
+    await this.updateComplete;
+    const root = this.renderRoot.querySelector(".root");
     if (!root) {
       return;
     }
     for (const child of root.children) {
       if (child.tagName !== "HA-ALERT") {
+        if (child instanceof ReactiveElement) {
+          // eslint-disable-next-line no-await-in-loop
+          await child.updateComplete;
+        }
         (child as HTMLElement).focus();
         break;
       }
diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts
index 9519ec85df..1895e419db 100644
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@@ -211,6 +211,7 @@ export class Gauge extends LitElement {
         font-size: 50px;
         fill: var(--primary-text-color);
         text-anchor: middle;
+        direction: ltr;
       }
     `;
   }
diff --git a/src/components/ha-language-picker.ts b/src/components/ha-language-picker.ts
new file mode 100644
index 0000000000..ac8a11579d
--- /dev/null
+++ b/src/components/ha-language-picker.ts
@@ -0,0 +1,162 @@
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { formatLanguageCode } from "../common/language/format_language";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+import { FrontendLocaleData } from "../data/translation";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+@customElement("ha-language-picker")
+export class HaLanguagePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public languages?: string[];
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property({ type: Boolean }) public nativeName = false;
+
+  @property({ type: Boolean }) public noSort = false;
+
+  @state() _defaultLanguages: string[] = [];
+
+  @query("ha-select") private _select!: HaSelect;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._computeDefaultLanguageOptions();
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("languages") || changedProperties.has("value")) {
+      this._select.layoutOptions();
+      if (this._select.value !== this.value) {
+        fireEvent(this, "value-changed", { value: this._select.value });
+      }
+      if (!this.value) {
+        return;
+      }
+      const languageOptions = this._getLanguagesOptions(
+        this.languages ?? this._defaultLanguages,
+        this.hass.locale,
+        this.nativeName
+      );
+      const selectedItem = languageOptions.find(
+        (option) => option.value === this.value
+      );
+      if (!selectedItem) {
+        this.value = undefined;
+      }
+    }
+  }
+
+  private _getLanguagesOptions = memoizeOne(
+    (languages: string[], locale: FrontendLocaleData, nativeName: boolean) => {
+      let options: { label: string; value: string }[] = [];
+
+      if (nativeName) {
+        const translations = this.hass.translationMetadata.translations;
+        options = languages.map((lang) => ({
+          value: lang,
+          label: translations[lang]?.nativeName ?? lang,
+        }));
+      } else {
+        options = languages.map((lang) => ({
+          value: lang,
+          label: formatLanguageCode(lang, locale),
+        }));
+      }
+
+      if (!this.noSort) {
+        options.sort((a, b) =>
+          caseInsensitiveStringCompare(a.label, b.label, locale.language)
+        );
+      }
+      return options;
+    }
+  );
+
+  private _computeDefaultLanguageOptions() {
+    if (!this.hass.translationMetadata?.translations) {
+      return;
+    }
+
+    this._defaultLanguages = Object.keys(
+      this.hass.translationMetadata.translations
+    );
+  }
+
+  protected render() {
+    const languageOptions = this._getLanguagesOptions(
+      this.languages ?? this._defaultLanguages,
+      this.hass.locale,
+      this.nativeName
+    );
+
+    const value =
+      this.value ?? (this.required ? languageOptions[0]?.value : this.value);
+
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass.localize("ui.components.language-picker.language")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${languageOptions.length === 0
+          ? html`<ha-list-item value=""
+              >${this.hass.localize(
+                "ui.components.language-picker.no_languages"
+              )}</ha-list-item
+            >`
+          : languageOptions.map(
+              (option) => html`
+                <ha-list-item .value=${option.value}
+                  >${option.label}</ha-list-item
+                >
+              `
+            )}
+      </ha-select>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (!this.hass || target.value === "" || target.value === this.value) {
+      return;
+    }
+    this.value = target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-language-picker": HaLanguagePicker;
+  }
+}
diff --git a/src/components/ha-list-item.ts b/src/components/ha-list-item.ts
index 0331381a0c..252e80954a 100644
--- a/src/components/ha-list-item.ts
+++ b/src/components/ha-list-item.ts
@@ -30,6 +30,9 @@ export class HaListItem extends ListItemBase {
           margin-inline-end: 0px !important;
           direction: var(--direction);
         }
+        .mdc-deprecated-list-item__meta {
+          display: var(--mdc-list-item-meta-display);
+        }
         :host([multiline-secondary]) {
           height: auto;
         }
@@ -54,6 +57,9 @@ export class HaListItem extends ListItemBase {
           .mdc-deprecated-list-item__primary-text::before {
           display: none;
         }
+        :host([disabled]) {
+          color: var(--disabled-text-color);
+        }
       `,
     ];
   }
diff --git a/src/components/ha-selector/ha-selector-assist-pipeline.ts b/src/components/ha-selector/ha-selector-assist-pipeline.ts
new file mode 100644
index 0000000000..74a143b819
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-assist-pipeline.ts
@@ -0,0 +1,45 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { AssistPipelineSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-assist-pipeline-picker";
+
+@customElement("ha-selector-assist_pipeline")
+export class HaAssistPipelineSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: AssistPipelineSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`<ha-assist-pipeline-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-assist-pipeline-picker>`;
+  }
+
+  static styles = css`
+    ha-conversation-agent-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-assist_pipeline": HaAssistPipelineSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-conversation-agent.ts b/src/components/ha-selector/ha-selector-conversation-agent.ts
new file mode 100644
index 0000000000..14b85bfad0
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-conversation-agent.ts
@@ -0,0 +1,51 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ConversationAgentSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-conversation-agent-picker";
+
+@customElement("ha-selector-conversation_agent")
+export class HaConversationAgentSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: ConversationAgentSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property({ attribute: false }) public context?: {
+    language?: string;
+  };
+
+  protected render() {
+    return html`<ha-conversation-agent-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .language=${this.selector.conversation_agent?.language ||
+      this.context?.language}
+      .label=${this.label}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-conversation-agent-picker>`;
+  }
+
+  static styles = css`
+    ha-conversation-agent-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-conversation_agent": HaConversationAgentSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-language.ts b/src/components/ha-selector/ha-selector-language.ts
new file mode 100644
index 0000000000..79b6dc69f2
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-language.ts
@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { LanguageSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-language-picker";
+
+@customElement("ha-selector-language")
+export class HaLanguageSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: LanguageSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-language-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .languages=${this.selector.language?.languages}
+        .nativeName=${Boolean(this.selector?.language?.native_name)}
+        .noSort=${Boolean(this.selector?.language?.no_sort)}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-language-picker>
+    `;
+  }
+
+  static styles = css`
+    ha-language-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-language": HaLanguageSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 0d9222a266..f4b07b55aa 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -135,7 +135,7 @@ export class HaSelectSelector extends LitElement {
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
-          .value=${this._filter}
+          .value=${""}
           .items=${optionItems}
           .allowCustomValue=${this.selector.select.custom_value ?? false}
           @filter-changed=${this._filterChanged}
@@ -213,7 +213,7 @@ export class HaSelectSelector extends LitElement {
   private _valueChanged(ev) {
     ev.stopPropagation();
     const value = ev.detail?.value || ev.target.value;
-    if (this.disabled || value === undefined) {
+    if (this.disabled || value === undefined || value === this.value) {
       return;
     }
     fireEvent(this, "value-changed", {
diff --git a/src/components/ha-selector/ha-selector-stt.ts b/src/components/ha-selector/ha-selector-stt.ts
new file mode 100644
index 0000000000..75549077fd
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-stt.ts
@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { STTSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-stt-picker";
+
+@customElement("ha-selector-stt")
+export class HaSTTSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: STTSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property({ attribute: false }) public context?: {
+    language?: string;
+  };
+
+  protected render() {
+    return html`<ha-stt-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.stt?.language || this.context?.language}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-stt-picker>`;
+  }
+
+  static styles = css`
+    ha-stt-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-stt": HaSTTSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index afaa3a1c0e..fb8033790a 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -30,6 +30,13 @@ export class HaTextSelector extends LitElement {
 
   @state() private _unmaskedPassword = false;
 
+  public async focus() {
+    await this.updateComplete;
+    (
+      this.renderRoot.querySelector("ha-textarea, ha-textfield") as HTMLElement
+    )?.focus();
+  }
+
   protected render() {
     if (this.selector.text?.multiline) {
       return html`<ha-textarea
diff --git a/src/components/ha-selector/ha-selector-tts-voice.ts b/src/components/ha-selector/ha-selector-tts-voice.ts
new file mode 100644
index 0000000000..dc6b0c0fdc
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-tts-voice.ts
@@ -0,0 +1,52 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { TTSVoiceSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-tts-voice-picker";
+
+@customElement("ha-selector-tts_voice")
+export class HaTTSVoiceSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TTSVoiceSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property({ attribute: false }) public context?: {
+    language?: string;
+    engineId?: string;
+  };
+
+  protected render() {
+    return html`<ha-tts-voice-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.tts_voice?.language || this.context?.language}
+      .engineId=${this.selector.tts_voice?.engineId || this.context?.engineId}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-tts-voice-picker>`;
+  }
+
+  static styles = css`
+    ha-tts-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-tts-voice": HaTTSVoiceSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-tts.ts b/src/components/ha-selector/ha-selector-tts.ts
new file mode 100644
index 0000000000..fbf83fb167
--- /dev/null
+++ b/src/components/ha-selector/ha-selector-tts.ts
@@ -0,0 +1,50 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { TTSSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-tts-picker";
+
+@customElement("ha-selector-tts")
+export class HaTTSSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TTSSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property({ attribute: false }) public context?: {
+    language?: string;
+  };
+
+  protected render() {
+    return html`<ha-tts-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .language=${this.selector.tts?.language || this.context?.language}
+      .disabled=${this.disabled}
+      .required=${this.required}
+    ></ha-tts-picker>`;
+  }
+
+  static styles = css`
+    ha-tts-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-tts": HaTTSSelector;
+  }
+}
diff --git a/src/components/ha-selector/ha-selector-ui-action.ts b/src/components/ha-selector/ha-selector-ui-action.ts
index b2adde969d..a221021225 100644
--- a/src/components/ha-selector/ha-selector-ui-action.ts
+++ b/src/components/ha-selector/ha-selector-ui-action.ts
@@ -6,7 +6,7 @@ import { HomeAssistant } from "../../types";
 import "../../panels/lovelace/components/hui-action-editor";
 import { ActionConfig } from "../../data/lovelace";
 
-@customElement("ha-selector-ui-action")
+@customElement("ha-selector-ui_action")
 export class HaSelectorUiAction extends LitElement {
   @property() public hass!: HomeAssistant;
 
@@ -24,7 +24,7 @@ export class HaSelectorUiAction extends LitElement {
         .label=${this.label}
         .hass=${this.hass}
         .config=${this.value}
-        .actions=${this.selector["ui-action"]?.actions}
+        .actions=${this.selector.ui_action?.actions}
         .tooltipText=${this.helper}
         @value-changed=${this._valueChanged}
       ></hui-action-editor>
diff --git a/src/components/ha-selector/ha-selector-ui-color.ts b/src/components/ha-selector/ha-selector-ui-color.ts
index 98dbf3c1fb..149ad61550 100644
--- a/src/components/ha-selector/ha-selector-ui-color.ts
+++ b/src/components/ha-selector/ha-selector-ui-color.ts
@@ -6,7 +6,7 @@ import { UiColorSelector } from "../../data/selector";
 import "../../panels/lovelace/components/hui-color-picker";
 import { HomeAssistant } from "../../types";
 
-@customElement("ha-selector-ui-color")
+@customElement("ha-selector-ui_color")
 export class HaSelectorUiColor extends LitElement {
   @property() public hass!: HomeAssistant;
 
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index f387867025..3f732c212d 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -14,9 +14,11 @@ const LOAD_ELEMENTS = {
   addon: () => import("./ha-selector-addon"),
   area: () => import("./ha-selector-area"),
   attribute: () => import("./ha-selector-attribute"),
+  assist_pipeline: () => import("./ha-selector-assist-pipeline"),
   boolean: () => import("./ha-selector-boolean"),
   color_rgb: () => import("./ha-selector-color-rgb"),
   config_entry: () => import("./ha-selector-config-entry"),
+  conversation_agent: () => import("./ha-selector-conversation-agent"),
   constant: () => import("./ha-selector-constant"),
   date: () => import("./ha-selector-date"),
   datetime: () => import("./ha-selector-datetime"),
@@ -25,11 +27,13 @@ const LOAD_ELEMENTS = {
   entity: () => import("./ha-selector-entity"),
   statistic: () => import("./ha-selector-statistic"),
   file: () => import("./ha-selector-file"),
+  language: () => import("./ha-selector-language"),
   navigation: () => import("./ha-selector-navigation"),
   number: () => import("./ha-selector-number"),
   object: () => import("./ha-selector-object"),
   select: () => import("./ha-selector-select"),
   state: () => import("./ha-selector-state"),
+  stt: () => import("./ha-selector-stt"),
   target: () => import("./ha-selector-target"),
   template: () => import("./ha-selector-template"),
   text: () => import("./ha-selector-text"),
@@ -37,12 +41,16 @@ const LOAD_ELEMENTS = {
   icon: () => import("./ha-selector-icon"),
   media: () => import("./ha-selector-media"),
   theme: () => import("./ha-selector-theme"),
+  tts: () => import("./ha-selector-tts"),
+  tts_voice: () => import("./ha-selector-tts-voice"),
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
-  "ui-action": () => import("./ha-selector-ui-action"),
-  "ui-color": () => import("./ha-selector-ui-color"),
+  ui_action: () => import("./ha-selector-ui-action"),
+  ui_color: () => import("./ha-selector-ui-color"),
 };
 
+const LEGACY_UI_SELECTORS = new Set(["ui-action", "ui-color"]);
+
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -67,12 +75,17 @@ export class HaSelector extends LitElement {
 
   @property() public context?: Record<string, any>;
 
-  public focus() {
-    this.shadowRoot?.getElementById("selector")?.focus();
+  public async focus() {
+    await this.updateComplete;
+    (this.renderRoot.querySelector("#selector") as HTMLElement)?.focus();
   }
 
   private get _type() {
-    return Object.keys(this.selector)[0];
+    const type = Object.keys(this.selector)[0];
+    if (LEGACY_UI_SELECTORS.has(type)) {
+      return type.replace("-", "_");
+    }
+    return type;
   }
 
   protected willUpdate(changedProps: PropertyValues) {
@@ -88,6 +101,10 @@ export class HaSelector extends LitElement {
     if ("device" in selector) {
       return handleLegacyDeviceSelector(selector);
     }
+    const type = Object.keys(this.selector)[0];
+    if (LEGACY_UI_SELECTORS.has(type)) {
+      return { [type.replace("-", "_")]: selector[type] };
+    }
     return selector;
   });
 
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index fc822203e0..5d97d39b95 100644
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -52,18 +52,17 @@ export class HaSettingsRow extends LitElement {
         white-space: nowrap;
       }
       .body > .secondary {
-        font-family: var(--paper-font-body1_-_font-family);
-        -webkit-font-smoothing: var(
-          --paper-font-body1_-_-webkit-font-smoothing
-        );
-        font-size: var(--paper-font-body1_-_font-size);
-        font-weight: var(--paper-font-body1_-_font-weight);
-        line-height: var(--paper-font-body1_-_line-height);
-
-        color: var(
-          --paper-item-body-secondary-color,
-          var(--secondary-text-color)
+        display: block;
+        padding-top: 4px;
+        font-family: var(
+          --mdc-typography-body2-font-family,
+          var(--mdc-typography-font-family, Roboto, sans-serif)
         );
+        -webkit-font-smoothing: antialiased;
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        font-weight: var(--mdc-typography-body2-font-weight, 400);
+        line-height: normal;
+        color: var(--secondary-text-color);
       }
       .body[two-line] {
         min-height: calc(
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 7036ab6d71..f443ca9eee 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -810,6 +810,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     }
     tooltip.innerHTML = item.querySelector(".item-text")!.innerHTML;
     tooltip.style.display = "block";
+    tooltip.style.position = "fixed";
     tooltip.style.top = `${top}px`;
     tooltip.style.left = `${item.offsetLeft + item.clientWidth + 4}px`;
   }
@@ -840,6 +841,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
       haStyleScrollbar,
       css`
         :host {
+          overflow: visible;
           height: 100%;
           display: block;
           overflow: hidden;
diff --git a/src/components/ha-stt-picker.ts b/src/components/ha-stt-picker.ts
new file mode 100644
index 0000000000..f425e41a47
--- /dev/null
+++ b/src/components/ha-stt-picker.ts
@@ -0,0 +1,156 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { debounce } from "../common/util/debounce";
+import { listSTTEngines, STTEngine } from "../data/stt";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+const NAME_MAP = { cloud: "Home Assistant Cloud" };
+
+@customElement("ha-stt-picker")
+export class HaSTTPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _engines?: STTEngine[];
+
+  protected render() {
+    if (!this._engines) {
+      return nothing;
+    }
+    const value =
+      this.value ??
+      (this.required
+        ? this._engines.find(
+            (engine) => engine.supported_languages?.length !== 0
+          )
+        : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.stt-picker.stt")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.stt-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._engines.map((engine) => {
+          let label = engine.engine_id;
+          if (engine.engine_id.includes(".")) {
+            const stateObj = this.hass!.states[engine.engine_id];
+            label = stateObj ? computeStateName(stateObj) : engine.engine_id;
+          } else if (engine.engine_id in NAME_MAP) {
+            label = NAME_MAP[engine.engine_id];
+          }
+          return html`<ha-list-item
+            .value=${engine.engine_id}
+            .disabled=${engine.supported_languages?.length === 0}
+          >
+            ${label}
+          </ha-list-item>`;
+        })}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateEngines();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateEngines();
+    }
+  }
+
+  private _debouncedUpdateEngines = debounce(() => this._updateEngines(), 500);
+
+  private async _updateEngines() {
+    this._engines = (
+      await listSTTEngines(
+        this.hass,
+        this.language,
+        this.hass.config.country || undefined
+      )
+    ).providers;
+
+    if (!this.value) {
+      return;
+    }
+
+    const selectedEngine = this._engines.find(
+      (engine) => engine.engine_id === this.value
+    );
+
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedEngine?.supported_languages,
+    });
+
+    if (!selectedEngine || selectedEngine.supported_languages?.length === 0) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._engines!.find((engine) => engine.engine_id === this.value)
+        ?.supported_languages,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-stt-picker": HaSTTPicker;
+  }
+}
diff --git a/src/components/ha-theme-picker.ts b/src/components/ha-theme-picker.ts
index 95c568f592..47aadd7e62 100644
--- a/src/components/ha-theme-picker.ts
+++ b/src/components/ha-theme-picker.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
index d75c74f651..49501ac01b 100644
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -1,43 +1,19 @@
 import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
-import { customElement, property } from "lit/decorators";
-
-let drawerContent: HTMLElement | undefined;
+import { customElement } from "lit/decorators";
 
 @customElement("ha-top-app-bar-fixed")
 export class HaTopAppBarFixed extends TopAppBarFixedBase {
-  private get _drawerContent() {
-    if (!drawerContent) {
-      drawerContent = document
-        .querySelector("home-assistant")!
-        .renderRoot.querySelector("home-assistant-main")!
-        .renderRoot.querySelector("ha-drawer")!
-        .renderRoot.querySelector(".mdc-drawer-app-content") as HTMLElement;
-    }
-    return drawerContent;
-  }
-
-  @property({ type: Object })
-  get scrollTarget() {
-    return this._scrollTarget || this._drawerContent || window;
-  }
-
-  protected updateRootPosition() {}
-
   static override styles = [
     styles,
     css`
-      .mdc-top-app-bar {
-        position: sticky;
-        top: 0;
-      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: 0;
+        padding-top: var(--header-height);
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: 400;
diff --git a/src/components/ha-tts-picker.ts b/src/components/ha-tts-picker.ts
new file mode 100644
index 0000000000..d9dfed597b
--- /dev/null
+++ b/src/components/ha-tts-picker.ts
@@ -0,0 +1,156 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { debounce } from "../common/util/debounce";
+import { listTTSEngines, TTSEngine } from "../data/tts";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+const NAME_MAP = { cloud: "Home Assistant Cloud" };
+
+@customElement("ha-tts-picker")
+export class HaTTSPicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _engines?: TTSEngine[];
+
+  protected render() {
+    if (!this._engines) {
+      return nothing;
+    }
+    const value =
+      this.value ??
+      (this.required
+        ? this._engines.find(
+            (engine) => engine.supported_languages?.length !== 0
+          )
+        : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.tts-picker.tts")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.tts-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._engines.map((engine) => {
+          let label = engine.engine_id;
+          if (engine.engine_id.includes(".")) {
+            const stateObj = this.hass!.states[engine.engine_id];
+            label = stateObj ? computeStateName(stateObj) : engine.engine_id;
+          } else if (engine.engine_id in NAME_MAP) {
+            label = NAME_MAP[engine.engine_id];
+          }
+          return html`<ha-list-item
+            .value=${engine.engine_id}
+            .disabled=${engine.supported_languages?.length === 0}
+          >
+            ${label}
+          </ha-list-item>`;
+        })}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateEngines();
+    } else if (changedProperties.has("language")) {
+      this._debouncedUpdateEngines();
+    }
+  }
+
+  private _debouncedUpdateEngines = debounce(() => this._updateEngines(), 500);
+
+  private async _updateEngines() {
+    this._engines = (
+      await listTTSEngines(
+        this.hass,
+        this.language,
+        this.hass.config.country || undefined
+      )
+    ).providers;
+
+    if (!this.value) {
+      return;
+    }
+
+    const selectedEngine = this._engines.find(
+      (engine) => engine.engine_id === this.value
+    );
+
+    fireEvent(this, "supported-languages-changed", {
+      value: selectedEngine?.supported_languages,
+    });
+
+    if (!selectedEngine || selectedEngine.supported_languages?.length === 0) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+    fireEvent(this, "supported-languages-changed", {
+      value: this._engines!.find((engine) => engine.engine_id === this.value)
+        ?.supported_languages,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tts-picker": HaTTSPicker;
+  }
+}
diff --git a/src/components/ha-tts-voice-picker.ts b/src/components/ha-tts-voice-picker.ts
new file mode 100644
index 0000000000..8cbe24dffd
--- /dev/null
+++ b/src/components/ha-tts-voice-picker.ts
@@ -0,0 +1,147 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { debounce } from "../common/util/debounce";
+import { listTTSVoices, TTSVoice } from "../data/tts";
+import { HomeAssistant } from "../types";
+import "./ha-list-item";
+import "./ha-select";
+import type { HaSelect } from "./ha-select";
+
+const NONE = "__NONE_OPTION__";
+
+@customElement("ha-tts-voice-picker")
+export class HaTTSVoicePicker extends LitElement {
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public engineId?: string;
+
+  @property() public language?: string;
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @state() _voices?: TTSVoice[] | null;
+
+  @query("ha-select") private _select?: HaSelect;
+
+  protected render() {
+    if (!this._voices) {
+      return nothing;
+    }
+    const value =
+      this.value ?? (this.required ? this._voices[0]?.voice_id : NONE);
+    return html`
+      <ha-select
+        .label=${this.label ||
+        this.hass!.localize("ui.components.tts-voice-picker.voice")}
+        .value=${value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${!this.required
+          ? html`<ha-list-item .value=${NONE}>
+              ${this.hass!.localize("ui.components.tts-voice-picker.none")}
+            </ha-list-item>`
+          : nothing}
+        ${this._voices.map(
+          (voice) => html`<ha-list-item .value=${voice.voice_id}>
+            ${voice.name}
+          </ha-list-item>`
+        )}
+      </ha-select>
+    `;
+  }
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (!this.hasUpdated) {
+      this._updateVoices();
+    } else if (
+      changedProperties.has("language") ||
+      changedProperties.has("engineId")
+    ) {
+      this._debouncedUpdateVoices();
+    }
+  }
+
+  private _debouncedUpdateVoices = debounce(() => this._updateVoices(), 500);
+
+  private async _updateVoices() {
+    if (!this.engineId || !this.language) {
+      this._voices = undefined;
+      return;
+    }
+    this._voices = (
+      await listTTSVoices(this.hass, this.engineId, this.language)
+    ).voices;
+
+    if (!this.value) {
+      return;
+    }
+
+    if (
+      !this._voices ||
+      !this._voices.find((voice) => voice.voice_id === this.value)
+    ) {
+      this.value = undefined;
+      fireEvent(this, "value-changed", { value: this.value });
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("_voices") &&
+      this._select?.value !== this.value
+    ) {
+      this._select?.layoutOptions();
+      fireEvent(this, "value-changed", { value: this._select?.value });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-select {
+        width: 100%;
+      }
+    `;
+  }
+
+  private _changed(ev): void {
+    const target = ev.target as HaSelect;
+    if (
+      !this.hass ||
+      target.value === "" ||
+      target.value === this.value ||
+      (this.value === undefined && target.value === NONE)
+    ) {
+      return;
+    }
+    this.value = target.value === NONE ? undefined : target.value;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tts-voice-picker": HaTTSVoicePicker;
+  }
+}
diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index f3cac3b1ea..97d06ec2ae 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -1,5 +1,5 @@
 import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
@@ -31,6 +31,8 @@ export class HaYamlEditor extends LitElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public autoUpdate = false;
+
   @property({ type: Boolean }) public readOnly = false;
 
   @property({ type: Boolean }) public required = false;
@@ -41,7 +43,11 @@ export class HaYamlEditor extends LitElement {
     try {
       this._yaml =
         value && !isEmpty(value)
-          ? dump(value, { schema: this.yamlSchema, quotingType: '"' })
+          ? dump(value, {
+              schema: this.yamlSchema,
+              quotingType: '"',
+              noRefs: true,
+            })
           : "";
     } catch (err: any) {
       // eslint-disable-next-line no-console
@@ -56,6 +62,13 @@ export class HaYamlEditor extends LitElement {
     }
   }
 
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties);
+    if (this.autoUpdate && changedProperties.has("value")) {
+      this.setValue(this.value);
+    }
+  }
+
   protected render() {
     if (this._yaml === undefined) {
       return nothing;
diff --git a/src/data/assist_pipeline.ts b/src/data/assist_pipeline.ts
new file mode 100644
index 0000000000..3d1745d323
--- /dev/null
+++ b/src/data/assist_pipeline.ts
@@ -0,0 +1,328 @@
+import type { HomeAssistant } from "../types";
+import type { ConversationResult } from "./conversation";
+import type { ResolvedMediaSource } from "./media_source";
+import type { SpeechMetadata } from "./stt";
+
+export interface AssistPipeline {
+  id: string;
+  name: string;
+  language: string;
+  conversation_engine: string;
+  conversation_language: string | null;
+  stt_engine: string | null;
+  stt_language: string | null;
+  tts_engine: string | null;
+  tts_language: string | null;
+  tts_voice: string | null;
+}
+
+export interface AssistPipelineMutableParams {
+  name: string;
+  language: string;
+  conversation_engine: string;
+  conversation_language: string | null;
+  stt_engine: string | null;
+  stt_language: string | null;
+  tts_engine: string | null;
+  tts_language: string | null;
+  tts_voice: string | null;
+}
+
+export interface assistRunListing {
+  pipeline_run_id: string;
+  timestamp: string;
+}
+
+interface PipelineEventBase {
+  timestamp: string;
+}
+
+interface PipelineRunStartEvent extends PipelineEventBase {
+  type: "run-start";
+  data: {
+    pipeline: string;
+    language: string;
+    runner_data: {
+      stt_binary_handler_id: number | null;
+      timeout: number;
+    };
+  };
+}
+interface PipelineRunEndEvent extends PipelineEventBase {
+  type: "run-end";
+  data: Record<string, never>;
+}
+
+interface PipelineErrorEvent extends PipelineEventBase {
+  type: "error";
+  data: {
+    code: string;
+    message: string;
+  };
+}
+
+interface PipelineSTTStartEvent extends PipelineEventBase {
+  type: "stt-start";
+  data: {
+    engine: string;
+    metadata: SpeechMetadata;
+  };
+}
+interface PipelineSTTEndEvent extends PipelineEventBase {
+  type: "stt-end";
+  data: {
+    stt_output: { text: string };
+  };
+}
+
+interface PipelineIntentStartEvent extends PipelineEventBase {
+  type: "intent-start";
+  data: {
+    engine: string;
+    language: string;
+    intent_input: string;
+  };
+}
+interface PipelineIntentEndEvent extends PipelineEventBase {
+  type: "intent-end";
+  data: {
+    intent_output: ConversationResult;
+  };
+}
+
+interface PipelineTTSStartEvent extends PipelineEventBase {
+  type: "tts-start";
+  data: {
+    engine: string;
+    language: string;
+    voice: string;
+    tts_input: string;
+  };
+}
+interface PipelineTTSEndEvent extends PipelineEventBase {
+  type: "tts-end";
+  data: {
+    tts_output: ResolvedMediaSource;
+  };
+}
+
+export type PipelineRunEvent =
+  | PipelineRunStartEvent
+  | PipelineRunEndEvent
+  | PipelineErrorEvent
+  | PipelineSTTStartEvent
+  | PipelineSTTEndEvent
+  | PipelineIntentStartEvent
+  | PipelineIntentEndEvent
+  | PipelineTTSStartEvent
+  | PipelineTTSEndEvent;
+
+export type PipelineRunOptions = (
+  | {
+      start_stage: "intent" | "tts";
+      input: { text: string };
+    }
+  | {
+      start_stage: "stt";
+      input: { sample_rate: number };
+    }
+) & {
+  end_stage: "stt" | "intent" | "tts";
+  pipeline?: string;
+  conversation_id?: string | null;
+};
+
+export interface PipelineRun {
+  init_options?: PipelineRunOptions;
+  events: PipelineRunEvent[];
+  stage: "ready" | "stt" | "intent" | "tts" | "done" | "error";
+  run: PipelineRunStartEvent["data"];
+  error?: PipelineErrorEvent["data"];
+  stt?: PipelineSTTStartEvent["data"] &
+    Partial<PipelineSTTEndEvent["data"]> & { done: boolean };
+  intent?: PipelineIntentStartEvent["data"] &
+    Partial<PipelineIntentEndEvent["data"]> & { done: boolean };
+  tts?: PipelineTTSStartEvent["data"] &
+    Partial<PipelineTTSEndEvent["data"]> & { done: boolean };
+}
+
+export const processEvent = (
+  run: PipelineRun | undefined,
+  event: PipelineRunEvent,
+  options?: PipelineRunOptions
+): PipelineRun | undefined => {
+  if (event.type === "run-start") {
+    run = {
+      init_options: options,
+      stage: "ready",
+      run: event.data,
+      events: [event],
+    };
+    return run;
+  }
+
+  if (!run) {
+    // eslint-disable-next-line no-console
+    console.warn("Received unexpected event before receiving session", event);
+    return undefined;
+  }
+
+  if (event.type === "stt-start") {
+    run = {
+      ...run,
+      stage: "stt",
+      stt: { ...event.data, done: false },
+    };
+  } else if (event.type === "stt-end") {
+    run = {
+      ...run,
+      stt: { ...run.stt!, ...event.data, done: true },
+    };
+  } else if (event.type === "intent-start") {
+    run = {
+      ...run,
+      stage: "intent",
+      intent: { ...event.data, done: false },
+    };
+  } else if (event.type === "intent-end") {
+    run = {
+      ...run,
+      intent: { ...run.intent!, ...event.data, done: true },
+    };
+  } else if (event.type === "tts-start") {
+    run = {
+      ...run,
+      stage: "tts",
+      tts: { ...event.data, done: false },
+    };
+  } else if (event.type === "tts-end") {
+    run = {
+      ...run,
+      tts: { ...run.tts!, ...event.data, done: true },
+    };
+  } else if (event.type === "run-end") {
+    run = { ...run, stage: "done" };
+  } else if (event.type === "error") {
+    run = { ...run, stage: "error", error: event.data };
+  } else {
+    run = { ...run };
+  }
+
+  run.events = [...run.events, event];
+
+  return run;
+};
+
+export const runDebugAssistPipeline = (
+  hass: HomeAssistant,
+  callback: (run: PipelineRun) => void,
+  options: PipelineRunOptions
+) => {
+  let run: PipelineRun | undefined;
+
+  const unsubProm = runAssistPipeline(
+    hass,
+    (updateEvent) => {
+      run = processEvent(run, updateEvent, options);
+
+      if (updateEvent.type === "run-end" || updateEvent.type === "error") {
+        unsubProm.then((unsub) => unsub());
+      }
+
+      if (run) {
+        callback(run);
+      }
+    },
+    options
+  );
+
+  return unsubProm;
+};
+
+export const runAssistPipeline = (
+  hass: HomeAssistant,
+  callback: (event: PipelineRunEvent) => void,
+  options: PipelineRunOptions
+) =>
+  hass.connection.subscribeMessage<PipelineRunEvent>(callback, {
+    ...options,
+    type: "assist_pipeline/run",
+  });
+
+export const listAssistPipelineRuns = (
+  hass: HomeAssistant,
+  pipeline_id: string
+) =>
+  hass.callWS<{
+    pipeline_runs: assistRunListing[];
+  }>({
+    type: "assist_pipeline/pipeline_debug/list",
+    pipeline_id,
+  });
+
+export const getAssistPipelineRun = (
+  hass: HomeAssistant,
+  pipeline_id: string,
+  pipeline_run_id: string
+) =>
+  hass.callWS<{
+    events: PipelineRunEvent[];
+  }>({
+    type: "assist_pipeline/pipeline_debug/get",
+    pipeline_id,
+    pipeline_run_id,
+  });
+
+export const listAssistPipelines = (hass: HomeAssistant) =>
+  hass.callWS<{
+    pipelines: AssistPipeline[];
+    preferred_pipeline: string | null;
+  }>({
+    type: "assist_pipeline/pipeline/list",
+  });
+
+export const getAssistPipeline = (hass: HomeAssistant, pipeline_id?: string) =>
+  hass.callWS<AssistPipeline>({
+    type: "assist_pipeline/pipeline/get",
+    pipeline_id,
+  });
+
+export const createAssistPipeline = (
+  hass: HomeAssistant,
+  pipeline: AssistPipelineMutableParams
+) =>
+  hass.callWS<AssistPipeline>({
+    type: "assist_pipeline/pipeline/create",
+    ...pipeline,
+  });
+
+export const updateAssistPipeline = (
+  hass: HomeAssistant,
+  pipeline_id: string,
+  pipeline: AssistPipelineMutableParams
+) =>
+  hass.callWS<AssistPipeline>({
+    type: "assist_pipeline/pipeline/update",
+    pipeline_id,
+    ...pipeline,
+  });
+
+export const setAssistPipelinePreferred = (
+  hass: HomeAssistant,
+  pipeline_id: string
+) =>
+  hass.callWS({
+    type: "assist_pipeline/pipeline/set_preferred",
+    pipeline_id,
+  });
+
+export const deleteAssistPipeline = (hass: HomeAssistant, pipelineId: string) =>
+  hass.callWS<void>({
+    type: "assist_pipeline/pipeline/delete",
+    pipeline_id: pipelineId,
+  });
+
+export const fetchAssistPipelineLanguages = (hass: HomeAssistant) =>
+  hass.callWS<{ languages: string[] }>({
+    type: "assist_pipeline/language/list",
+  });
diff --git a/src/data/automation.ts b/src/data/automation.ts
index 653b24e289..ca288a8fa6 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -123,6 +123,8 @@ export interface TimePatternTrigger extends BaseTrigger {
 export interface WebhookTrigger extends BaseTrigger {
   platform: "webhook";
   webhook_id: string;
+  allowed_methods?: string[];
+  local_only?: boolean;
 }
 
 export interface ZoneTrigger extends BaseTrigger {
diff --git a/src/data/cloud.ts b/src/data/cloud.ts
index 58a747ffd0..694d468790 100644
--- a/src/data/cloud.ts
+++ b/src/data/cloud.ts
@@ -9,15 +9,6 @@ interface CloudStatusNotLoggedIn {
   http_use_ssl: boolean;
 }
 
-export interface GoogleEntityConfig {
-  should_expose?: boolean | null;
-  disable_2fa?: boolean;
-}
-
-export interface AlexaEntityConfig {
-  should_expose?: boolean | null;
-}
-
 export interface CertificateInformation {
   common_name: string;
   expire_date: string;
@@ -30,14 +21,6 @@ export interface CloudPreferences {
   remote_enabled: boolean;
   google_secure_devices_pin: string | undefined;
   cloudhooks: { [webhookId: string]: CloudWebhook };
-  google_default_expose: string[] | null;
-  google_entity_configs: {
-    [entityId: string]: GoogleEntityConfig;
-  };
-  alexa_default_expose: string[] | null;
-  alexa_entity_configs: {
-    [entityId: string]: AlexaEntityConfig;
-  };
   alexa_report_state: boolean;
   google_report_state: boolean;
   tts_default_voice: [string, string];
@@ -57,6 +40,13 @@ export interface CloudStatusLoggedIn {
   remote_domain: string | undefined;
   remote_connected: boolean;
   remote_certificate: undefined | CertificateInformation;
+  remote_certificate_status:
+    | null
+    | "error"
+    | "generating"
+    | "loaded"
+    | "loading"
+    | "ready";
   http_use_ssl: boolean;
   active_subscription: boolean;
 }
@@ -86,10 +76,14 @@ export const cloudLogin = (
   email: string,
   password: string
 ) =>
-  hass.callApi("POST", "cloud/login", {
-    email,
-    password,
-  });
+  hass.callApi<{ success: boolean; cloud_pipeline?: string }>(
+    "POST",
+    "cloud/login",
+    {
+      email,
+      password,
+    }
+  );
 
 export const cloudLogout = (hass: HomeAssistant) =>
   hass.callApi("POST", "cloud/logout");
@@ -150,10 +144,8 @@ export const updateCloudPref = (
   prefs: {
     google_enabled?: CloudPreferences["google_enabled"];
     alexa_enabled?: CloudPreferences["alexa_enabled"];
-    alexa_default_expose?: CloudPreferences["alexa_default_expose"];
     alexa_report_state?: CloudPreferences["alexa_report_state"];
     google_report_state?: CloudPreferences["google_report_state"];
-    google_default_expose?: CloudPreferences["google_default_expose"];
     google_secure_devices_pin?: CloudPreferences["google_secure_devices_pin"];
     tts_default_voice?: CloudPreferences["tts_default_voice"];
   }
@@ -165,25 +157,14 @@ export const updateCloudPref = (
 
 export const updateCloudGoogleEntityConfig = (
   hass: HomeAssistant,
-  entityId: string,
-  values: GoogleEntityConfig
+  entity_id: string,
+  disable_2fa: boolean
 ) =>
-  hass.callWS<GoogleEntityConfig>({
+  hass.callWS({
     type: "cloud/google_assistant/entities/update",
-    entity_id: entityId,
-    ...values,
+    entity_id,
+    disable_2fa,
   });
 
 export const cloudSyncGoogleAssistant = (hass: HomeAssistant) =>
   hass.callApi("POST", "cloud/google_actions/sync");
-
-export const updateCloudAlexaEntityConfig = (
-  hass: HomeAssistant,
-  entityId: string,
-  values: AlexaEntityConfig
-) =>
-  hass.callWS<AlexaEntityConfig>({
-    type: "cloud/alexa/entities/update",
-    entity_id: entityId,
-    ...values,
-  });
diff --git a/src/data/conversation.ts b/src/data/conversation.ts
index 3745271c8b..a51006a562 100644
--- a/src/data/conversation.ts
+++ b/src/data/conversation.ts
@@ -56,6 +56,12 @@ export interface AgentInfo {
   attribution?: { name: string; url: string };
 }
 
+export interface Agent {
+  id: string;
+  name: string;
+  supported_languages: "*" | string[];
+}
+
 export const processConversationInput = (
   hass: HomeAssistant,
   text: string,
@@ -70,9 +76,24 @@ export const processConversationInput = (
     language,
   });
 
-export const getAgentInfo = (hass: HomeAssistant): Promise<AgentInfo> =>
+export const listAgents = (
+  hass: HomeAssistant,
+  language?: string,
+  country?: string
+): Promise<{ agents: Agent[] }> =>
+  hass.callWS({
+    type: "conversation/agent/list",
+    language,
+    country,
+  });
+
+export const getAgentInfo = (
+  hass: HomeAssistant,
+  agent_id?: string
+): Promise<AgentInfo> =>
   hass.callWS({
     type: "conversation/agent/info",
+    agent_id,
   });
 
 export const prepareConversation = (
diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts
index d0e2afb2cd..b9f145c6e8 100644
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -90,6 +90,9 @@ export interface EntityRegistryOptions {
   number?: NumberEntityOptions;
   sensor?: SensorEntityOptions;
   weather?: WeatherEntityOptions;
+  conversation?: Record<string, unknown>;
+  "cloud.alexa"?: Record<string, unknown>;
+  "cloud.google_assistant"?: Record<string, unknown>;
 }
 
 export interface EntityRegistryEntryUpdateParams {
diff --git a/src/data/google_assistant.ts b/src/data/google_assistant.ts
index 2665be90b3..1381e697ed 100644
--- a/src/data/google_assistant.ts
+++ b/src/data/google_assistant.ts
@@ -9,5 +9,14 @@ export interface GoogleEntity {
 export const fetchCloudGoogleEntities = (hass: HomeAssistant) =>
   hass.callWS<GoogleEntity[]>({ type: "cloud/google_assistant/entities" });
 
+export const fetchCloudGoogleEntity = (
+  hass: HomeAssistant,
+  entity_id: string
+) =>
+  hass.callWS<GoogleEntity>({
+    type: "cloud/google_assistant/entities/get",
+    entity_id,
+  });
+
 export const syncCloudGoogleEntities = (hass: HomeAssistant) =>
   hass.callApi("POST", "cloud/google_actions/sync");
diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts
index a1a0828dd9..9b8aa7c2c6 100644
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -381,3 +381,23 @@ export const fetchAddonInfo = (
       ? `/store/addons/${addonSlug}` // Use /store/addons when add-on is not installed
       : `/addons/${addonSlug}/info` // Use /addons when add-on is installed
   );
+
+export const rebuildLocalAddon = async (
+  hass: HomeAssistant,
+  slug: string
+): Promise<void> => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    return hass.callWS<void>({
+      type: "supervisor/api",
+      endpoint: `/addons/${slug}/rebuild`,
+      method: "post",
+      timeout: null,
+    });
+  }
+  return (
+    await hass.callApi<HassioResponse<void>>(
+      "POST",
+      `hassio/addons/${slug}rebuild`
+    )
+  ).data;
+};
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 3ee0d020b7..fcfa1ac983 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -14,6 +14,7 @@ export type Selector =
   | BooleanSelector
   | ColorRGBSelector
   | ColorTempSelector
+  | ConversationAgentSelector
   | ConfigEntrySelector
   | ConstantSelector
   | DateSelector
@@ -25,19 +26,24 @@ export type Selector =
   | LegacyEntitySelector
   | FileSelector
   | IconSelector
+  | LanguageSelector
   | LocationSelector
   | MediaSelector
   | NavigationSelector
   | NumberSelector
   | ObjectSelector
+  | AssistPipelineSelector
   | SelectSelector
   | StateSelector
   | StatisticSelector
   | StringSelector
+  | STTSelector
   | TargetSelector
   | TemplateSelector
   | ThemeSelector
   | TimeSelector
+  | TTSSelector
+  | TTSVoiceSelector
   | UiActionSelector
   | UiColorSelector;
 
@@ -85,6 +91,10 @@ export interface ColorTempSelector {
   } | null;
 }
 
+export interface ConversationAgentSelector {
+  conversation_agent: { language?: string } | null;
+}
+
 export interface ConfigEntrySelector {
   config_entry: {
     integration?: string;
@@ -201,6 +211,14 @@ export interface IconSelector {
   } | null;
 }
 
+export interface LanguageSelector {
+  language: {
+    languages?: string[];
+    native_name?: boolean;
+    no_sort?: boolean;
+  } | null;
+}
+
 export interface LocationSelector {
   location: { radius?: boolean; icon?: string } | null;
 }
@@ -249,6 +267,11 @@ export interface ObjectSelector {
   object: {} | null;
 }
 
+export interface AssistPipelineSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  assist_pipeline: {} | null;
+}
+
 export interface SelectOption {
   value: any;
   label: string;
@@ -294,6 +317,10 @@ export interface StringSelector {
   } | null;
 }
 
+export interface STTSelector {
+  stt: { language?: string } | null;
+}
+
 export interface TargetSelector {
   target: {
     entity?: EntitySelectorFilter | readonly EntitySelectorFilter[];
@@ -315,15 +342,23 @@ export interface TimeSelector {
   time: {} | null;
 }
 
+export interface TTSSelector {
+  tts: { language?: string } | null;
+}
+
+export interface TTSVoiceSelector {
+  tts_voice: { engineId?: string; language?: string } | null;
+}
+
 export interface UiActionSelector {
-  "ui-action": {
+  ui_action: {
     actions?: UiAction[];
   } | null;
 }
 
 export interface UiColorSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  "ui-color": {} | null;
+  ui_color: {} | null;
 }
 
 export const filterSelectorDevices = (
diff --git a/src/data/stt.ts b/src/data/stt.ts
index c855e77757..ac1d9006ad 100644
--- a/src/data/stt.ts
+++ b/src/data/stt.ts
@@ -1,3 +1,5 @@
+import { HomeAssistant } from "../types";
+
 export interface SpeechMetadata {
   language: string;
   format: "wav" | "ogg";
@@ -15,3 +17,19 @@ export interface SpeechMetadata {
     | 48000;
   channel: 1 | 2;
 }
+
+export interface STTEngine {
+  engine_id: string;
+  supported_languages?: string[];
+}
+
+export const listSTTEngines = (
+  hass: HomeAssistant,
+  language?: string,
+  country?: string
+): Promise<{ providers: STTEngine[] }> =>
+  hass.callWS({
+    type: "stt/engine/list",
+    language,
+    country,
+  });
diff --git a/src/data/tts.ts b/src/data/tts.ts
index f4d0d1346b..cf70d0eda7 100644
--- a/src/data/tts.ts
+++ b/src/data/tts.ts
@@ -1,5 +1,15 @@
 import { HomeAssistant } from "../types";
 
+export interface TTSEngine {
+  engine_id: string;
+  supported_languages?: string[];
+}
+
+export interface TTSVoice {
+  voice_id: string;
+  name: string;
+}
+
 export const convertTextToSpeech = (
   hass: HomeAssistant,
   data: {
@@ -18,3 +28,25 @@ export const isTTSMediaSource = (mediaContentId: string) =>
 
 export const getProviderFromTTSMediaSource = (mediaContentId: string) =>
   mediaContentId.substring(TTS_MEDIA_SOURCE_PREFIX.length);
+
+export const listTTSEngines = (
+  hass: HomeAssistant,
+  language?: string,
+  country?: string
+): Promise<{ providers: TTSEngine[] }> =>
+  hass.callWS({
+    type: "tts/engine/list",
+    language,
+    country,
+  });
+
+export const listTTSVoices = (
+  hass: HomeAssistant,
+  engine_id: string,
+  language: string
+): Promise<{ voices: TTSVoice[] | null }> =>
+  hass.callWS({
+    type: "tts/engine/voices",
+    engine_id,
+    language,
+  });
diff --git a/src/data/voice.ts b/src/data/voice.ts
new file mode 100644
index 0000000000..c2bef3982b
--- /dev/null
+++ b/src/data/voice.ts
@@ -0,0 +1,43 @@
+import { HomeAssistant } from "../types";
+
+export const voiceAssistants = {
+  conversation: { domain: "assist_pipeline", name: "Assist" },
+  "cloud.alexa": {
+    domain: "alexa",
+    name: "Amazon Alexa",
+  },
+  "cloud.google_assistant": {
+    domain: "google_assistant",
+    name: "Google Assistant",
+  },
+} as const;
+
+export const setExposeNewEntities = (
+  hass: HomeAssistant,
+  assistant: string,
+  expose_new: boolean
+) =>
+  hass.callWS({
+    type: "homeassistant/expose_new_entities/set",
+    assistant,
+    expose_new,
+  });
+
+export const getExposeNewEntities = (hass: HomeAssistant, assistant: string) =>
+  hass.callWS<{ expose_new: boolean }>({
+    type: "homeassistant/expose_new_entities/get",
+    assistant,
+  });
+
+export const exposeEntities = (
+  hass: HomeAssistant,
+  assistants: string[],
+  entity_ids: string[],
+  should_expose: boolean
+) =>
+  hass.callWS({
+    type: "homeassistant/expose_entity",
+    assistants,
+    entity_ids,
+    should_expose,
+  });
diff --git a/src/data/voice_assistant.ts b/src/data/voice_assistant.ts
deleted file mode 100644
index 9b5ae8f65d..0000000000
--- a/src/data/voice_assistant.ts
+++ /dev/null
@@ -1,197 +0,0 @@
-import type { HomeAssistant } from "../types";
-import type { ConversationResult } from "./conversation";
-import type { ResolvedMediaSource } from "./media_source";
-import type { SpeechMetadata } from "./stt";
-
-interface PipelineEventBase {
-  timestamp: string;
-}
-
-interface PipelineRunStartEvent extends PipelineEventBase {
-  type: "run-start";
-  data: {
-    pipeline: string;
-    language: string;
-    runner_data: {
-      stt_binary_handler_id: number | null;
-      timeout: number;
-    };
-  };
-}
-interface PipelineRunEndEvent extends PipelineEventBase {
-  type: "run-end";
-  data: Record<string, never>;
-}
-
-interface PipelineErrorEvent extends PipelineEventBase {
-  type: "error";
-  data: {
-    code: string;
-    message: string;
-  };
-}
-
-interface PipelineSTTStartEvent extends PipelineEventBase {
-  type: "stt-start";
-  data: {
-    engine: string;
-    metadata: SpeechMetadata;
-  };
-}
-interface PipelineSTTEndEvent extends PipelineEventBase {
-  type: "stt-end";
-  data: {
-    stt_output: { text: string };
-  };
-}
-
-interface PipelineIntentStartEvent extends PipelineEventBase {
-  type: "intent-start";
-  data: {
-    engine: string;
-    intent_input: string;
-  };
-}
-interface PipelineIntentEndEvent extends PipelineEventBase {
-  type: "intent-end";
-  data: {
-    intent_output: ConversationResult;
-  };
-}
-
-interface PipelineTTSStartEvent extends PipelineEventBase {
-  type: "tts-start";
-  data: {
-    engine: string;
-    tts_input: string;
-  };
-}
-interface PipelineTTSEndEvent extends PipelineEventBase {
-  type: "tts-end";
-  data: {
-    tts_output: ResolvedMediaSource;
-  };
-}
-
-type PipelineRunEvent =
-  | PipelineRunStartEvent
-  | PipelineRunEndEvent
-  | PipelineErrorEvent
-  | PipelineSTTStartEvent
-  | PipelineSTTEndEvent
-  | PipelineIntentStartEvent
-  | PipelineIntentEndEvent
-  | PipelineTTSStartEvent
-  | PipelineTTSEndEvent;
-
-export interface PipelineRunOptions {
-  start_stage: "stt" | "intent" | "tts";
-  end_stage: "stt" | "intent" | "tts";
-  language?: string;
-  pipeline?: string;
-  input?: { text: string };
-  conversation_id?: string | null;
-}
-
-export interface PipelineRun {
-  init_options: PipelineRunOptions;
-  events: PipelineRunEvent[];
-  stage: "ready" | "stt" | "intent" | "tts" | "done" | "error";
-  run: PipelineRunStartEvent["data"];
-  error?: PipelineErrorEvent["data"];
-  stt?: PipelineSTTStartEvent["data"] &
-    Partial<PipelineSTTEndEvent["data"]> & { done: boolean };
-  intent?: PipelineIntentStartEvent["data"] &
-    Partial<PipelineIntentEndEvent["data"]> & { done: boolean };
-  tts?: PipelineTTSStartEvent["data"] &
-    Partial<PipelineTTSEndEvent["data"]> & { done: boolean };
-}
-
-export const runVoiceAssistantPipeline = (
-  hass: HomeAssistant,
-  callback: (event: PipelineRun) => void,
-  options: PipelineRunOptions
-) => {
-  let run: PipelineRun | undefined;
-
-  const unsubProm = hass.connection.subscribeMessage<PipelineRunEvent>(
-    (updateEvent) => {
-      if (updateEvent.type === "run-start") {
-        run = {
-          init_options: options,
-          stage: "ready",
-          run: updateEvent.data,
-          error: undefined,
-          stt: undefined,
-          intent: undefined,
-          tts: undefined,
-          events: [updateEvent],
-        };
-        callback(run);
-        return;
-      }
-
-      if (!run) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          "Received unexpected event before receiving session",
-          updateEvent
-        );
-        return;
-      }
-
-      if (updateEvent.type === "stt-start") {
-        run = {
-          ...run,
-          stage: "stt",
-          stt: { ...updateEvent.data, done: false },
-        };
-      } else if (updateEvent.type === "stt-end") {
-        run = {
-          ...run,
-          stt: { ...run.stt!, ...updateEvent.data, done: true },
-        };
-      } else if (updateEvent.type === "intent-start") {
-        run = {
-          ...run,
-          stage: "intent",
-          intent: { ...updateEvent.data, done: false },
-        };
-      } else if (updateEvent.type === "intent-end") {
-        run = {
-          ...run,
-          intent: { ...run.intent!, ...updateEvent.data, done: true },
-        };
-      } else if (updateEvent.type === "tts-start") {
-        run = {
-          ...run,
-          stage: "tts",
-          tts: { ...updateEvent.data, done: false },
-        };
-      } else if (updateEvent.type === "tts-end") {
-        run = {
-          ...run,
-          tts: { ...run.tts!, ...updateEvent.data, done: true },
-        };
-      } else if (updateEvent.type === "run-end") {
-        run = { ...run, stage: "done" };
-        unsubProm.then((unsub) => unsub());
-      } else if (updateEvent.type === "error") {
-        run = { ...run, stage: "error", error: updateEvent.data };
-        unsubProm.then((unsub) => unsub());
-      } else {
-        run = { ...run };
-      }
-
-      run.events = [...run.events, updateEvent];
-
-      callback(run);
-    },
-    {
-      ...options,
-      type: "voice_assistant/run",
-    }
-  );
-
-  return unsubProm;
-};
diff --git a/src/dialogs/aliases/dialog-aliases.ts b/src/dialogs/aliases/dialog-aliases.ts
index 27e94660ec..e2fe281b5e 100644
--- a/src/dialogs/aliases/dialog-aliases.ts
+++ b/src/dialogs/aliases/dialog-aliases.ts
@@ -1,16 +1,13 @@
 import "@material/mwc-button/mwc-button";
-import { mdiDeleteOutline, mdiPlus } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-alert";
-import "../../components/ha-area-picker";
 import "../../components/ha-dialog";
-import "../../components/ha-textfield";
-import type { HaTextField } from "../../components/ha-textfield";
 import { haStyle, haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { AliasesDialogParams } from "./show-dialog-aliases";
+import "../../components/ha-aliases-editor";
 
 @customElement("dialog-aliases")
 class DialogAliases extends LitElement {
@@ -57,43 +54,11 @@ class DialogAliases extends LitElement {
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
-          <div class="form">
-            ${this._aliases.map(
-              (alias, index) => html`
-                <div class="layout horizontal center-center row">
-                  <ha-textfield
-                    dialogInitialFocus=${index}
-                    .index=${index}
-                    class="flex-auto"
-                    .label=${this.hass!.localize(
-                      "ui.dialogs.aliases.input_label",
-                      { number: index + 1 }
-                    )}
-                    .value=${alias}
-                    ?data-last=${index === this._aliases.length - 1}
-                    @input=${this._editAlias}
-                    @keydown=${this._keyDownAlias}
-                  ></ha-textfield>
-                  <ha-icon-button
-                    .index=${index}
-                    slot="navigationIcon"
-                    label=${this.hass!.localize(
-                      "ui.dialogs.aliases.remove_alias",
-                      { number: index + 1 }
-                    )}
-                    @click=${this._removeAlias}
-                    .path=${mdiDeleteOutline}
-                  ></ha-icon-button>
-                </div>
-              `
-            )}
-            <div class="layout horizontal center-center">
-              <mwc-button @click=${this._addAlias}>
-                ${this.hass!.localize("ui.dialogs.aliases.add_alias")}
-                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-              </mwc-button>
-            </div>
-          </div>
+          <ha-aliases-editor
+            .hass=${this.hass}
+            .aliases=${this._aliases}
+            @value-changed=${this._aliasesChanged}
+          ></ha-aliases-editor>
         </div>
         <mwc-button
           slot="secondaryAction"
@@ -113,32 +78,8 @@ class DialogAliases extends LitElement {
     `;
   }
 
-  private async _addAlias() {
-    this._aliases = [...this._aliases, ""];
-    await this.updateComplete;
-    const field = this.shadowRoot?.querySelector(`ha-textfield[data-last]`) as
-      | HaTextField
-      | undefined;
-    field?.focus();
-  }
-
-  private async _editAlias(ev: Event) {
-    const index = (ev.target as any).index;
-    this._aliases[index] = (ev.target as any).value;
-  }
-
-  private async _keyDownAlias(ev: KeyboardEvent) {
-    if (ev.key === "Enter") {
-      ev.stopPropagation();
-      this._addAlias();
-    }
-  }
-
-  private async _removeAlias(ev: Event) {
-    const index = (ev.target as any).index;
-    const aliases = [...this._aliases];
-    aliases.splice(index, 1);
-    this._aliases = aliases;
+  private _aliasesChanged(ev: CustomEvent): void {
+    this._aliases = ev.detail.value;
   }
 
   private async _updateAliases(): Promise<void> {
diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
deleted file mode 100644
index 3b168d4002..0000000000
--- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { createCloseHeading } from "../../components/ha-dialog";
-import "../../components/ha-formfield";
-import "../../components/ha-switch";
-import { domainToName } from "../../data/integration";
-import { haStyleDialog } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
-import { HassDialog } from "../make-dialog-manager";
-import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler";
-
-@customElement("dialog-domain-toggler")
-class DomainTogglerDialog
-  extends LitElement
-  implements HassDialog<HaDomainTogglerDialogParams>
-{
-  public hass!: HomeAssistant;
-
-  @state() private _params?: HaDomainTogglerDialogParams;
-
-  public showDialog(params: HaDomainTogglerDialogParams): void {
-    this._params = params;
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    const domains = this._params.domains
-      .map((domain) => [domainToName(this.hass.localize, domain), domain])
-      .sort();
-
-    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        .heading=${createCloseHeading(
-          this.hass,
-          this._params.title ||
-            this.hass.localize("ui.dialogs.domain_toggler.title")
-        )}
-      >
-        ${this._params.description
-          ? html`<div class="description">${this._params.description}</div>`
-          : ""}
-        <div class="domains">
-          ${domains.map(
-            (domain) =>
-              html`
-                <ha-formfield .label=${domain[0]}>
-                  <ha-switch
-                    .domain=${domain[1]}
-                    .checked=${!this._params!.exposedDomains ||
-                    this._params!.exposedDomains.includes(domain[1])}
-                    @change=${this._handleSwitch}
-                  >
-                  </ha-switch>
-                </ha-formfield>
-                <mwc-button .domain=${domain[1]} @click=${this._handleReset}>
-                  ${this.hass.localize(
-                    "ui.dialogs.domain_toggler.reset_entities"
-                  )}
-                </mwc-button>
-              `
-          )}
-        </div>
-      </ha-dialog>
-    `;
-  }
-
-  private _handleSwitch(ev) {
-    this._params!.toggleDomain(ev.currentTarget.domain, ev.target.checked);
-    ev.currentTarget.blur();
-  }
-
-  private _handleReset(ev) {
-    this._params!.resetDomain(ev.currentTarget.domain);
-    ev.currentTarget.blur();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-        }
-        .description {
-          margin-bottom: 8px;
-        }
-        .domains {
-          display: grid;
-          grid-template-columns: auto auto;
-          grid-row-gap: 8px;
-          align-items: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-domain-toggler": DomainTogglerDialog;
-  }
-}
diff --git a/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts b/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts
deleted file mode 100644
index 18426ba68e..0000000000
--- a/src/dialogs/domain-toggler/show-dialog-domain-toggler.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface HaDomainTogglerDialogParams {
-  title?: string;
-  description?: string;
-  domains: string[];
-  exposedDomains: string[] | null;
-  toggleDomain: (domain: string, turnOn: boolean) => void;
-  resetDomain: (domain: string) => void;
-}
-
-export const loadDomainTogglerDialog = () => import("./dialog-domain-toggler");
-
-export const showDomainTogglerDialog = (
-  element: HTMLElement,
-  dialogParams: HaDomainTogglerDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-domain-toggler",
-    dialogImport: loadDomainTogglerDialog,
-    dialogParams,
-  });
-};
diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts
index c94cff91e9..5036664946 100644
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -161,8 +161,6 @@ class DialogBox extends LitElement {
         --mdc-theme-primary: var(--error-color);
       }
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }
diff --git a/src/dialogs/more-info/components/alarm_control_panel/dialog-enter-code.ts b/src/dialogs/more-info/components/alarm_control_panel/dialog-enter-code.ts
index 62a1b6cb32..0fcd0d6dc3 100644
--- a/src/dialogs/more-info/components/alarm_control_panel/dialog-enter-code.ts
+++ b/src/dialogs/more-info/components/alarm_control_panel/dialog-enter-code.ts
@@ -176,8 +176,6 @@ export class DialogEnterCode
   static get styles(): CSSResultGroup {
     return css`
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }
diff --git a/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts b/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
index 1defa77c48..2fac5f0bdb 100644
--- a/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts
@@ -569,6 +569,7 @@ class MoreInfoViewLightColorPicker extends LitElement {
           line-height: 24px;
           letter-spacing: 0.1px;
           margin: 0;
+          direction: ltr;
         }
 
         .color-temp {
diff --git a/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts b/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts
new file mode 100644
index 0000000000..f43b7fc14e
--- /dev/null
+++ b/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts
@@ -0,0 +1,49 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ExtEntityRegistryEntry } from "../../../../data/entity_registry";
+import "../../../../panels/config/voice-assistants/entity-voice-settings";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("ha-more-info-view-voice-assistants")
+class MoreInfoViewVoiceAssistants extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entry!: ExtEntityRegistryEntry;
+
+  @property() public params?;
+
+  protected render() {
+    if (!this.params) {
+      return nothing;
+    }
+    return html`<entity-voice-settings
+      .hass=${this.hass}
+      .entry=${this.entry}
+    ></entity-voice-settings>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        :host {
+          display: flex;
+          flex-direction: column;
+        }
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+          flex: 1;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-view-voice-assistants": MoreInfoViewVoiceAssistants;
+  }
+}
diff --git a/src/dialogs/more-info/components/voice/show-view-voice-assistants.ts b/src/dialogs/more-info/components/voice/show-view-voice-assistants.ts
new file mode 100644
index 0000000000..010bf20088
--- /dev/null
+++ b/src/dialogs/more-info/components/voice/show-view-voice-assistants.ts
@@ -0,0 +1,16 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+export const loadVoiceAssistantsView = () =>
+  import("./ha-more-info-view-voice-assistants");
+
+export const showVoiceAssistantsView = (
+  element: HTMLElement,
+  title: string
+): void => {
+  fireEvent(element, "show-child-view", {
+    viewTag: "ha-more-info-view-voice-assistants",
+    viewImport: loadVoiceAssistantsView,
+    viewTitle: title,
+    viewParams: {},
+  });
+};
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 3bcc18b883..984136adb5 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -181,10 +181,10 @@ export class MoreInfoDialog extends LitElement {
     this.setView("settings");
   }
 
-  private async _showChildView(ev: CustomEvent): Promise<void> {
+  private _showChildView(ev: CustomEvent): void {
     const view = ev.detail as ChildView;
     if (view.viewImport) {
-      await view.viewImport();
+      view.viewImport();
     }
     this._childView = view;
   }
@@ -369,12 +369,14 @@ export class MoreInfoDialog extends LitElement {
           tabindex="-1"
           dialogInitialFocus
           @show-child-view=${this._showChildView}
+          @entity-entry-updated=${this._entryUpdated}
         >
           ${this._childView
             ? html`
                 <div class="child-view">
                   ${dynamicElement(this._childView.viewTag, {
                     hass: this.hass,
+                    entry: this._entry,
                     params: this._childView.viewParams,
                   })}
                 </div>
@@ -401,7 +403,6 @@ export class MoreInfoDialog extends LitElement {
                         .hass=${this.hass}
                         .entityId=${this._entityId}
                         .entry=${this._entry}
-                        @entity-entry-updated=${this._entryUpdated}
                       ></ha-more-info-settings>
                     `
                   : this._currView === "related"
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index f9e14f6338..464d0a0e09 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -27,7 +27,7 @@ declare global {
   }
 }
 
-const statTypes: StatisticsTypes = ["state", "min", "mean", "max"];
+const statTypes: StatisticsTypes = ["min", "mean", "max"];
 
 @customElement("ha-more-info-history")
 export class MoreInfoHistory extends LitElement {
diff --git a/src/dialogs/restart/dialog-restart.ts b/src/dialogs/restart/dialog-restart.ts
index 880c909619..9b8491e68f 100644
--- a/src/dialogs/restart/dialog-restart.ts
+++ b/src/dialogs/restart/dialog-restart.ts
@@ -108,7 +108,6 @@ class DialogRestart extends LitElement {
                         graphic="avatar"
                         twoline
                         multiline-secondary
-                        hasMeta
                         @request-selected=${this._reload}
                       >
                         <div slot="graphic" class="icon-background reload">
@@ -131,7 +130,6 @@ class DialogRestart extends LitElement {
                   graphic="avatar"
                   twoline
                   multiline-secondary
-                  hasMeta
                   @request-selected=${this._restart}
                 >
                   <div slot="graphic" class="icon-background restart">
diff --git a/src/dialogs/tts-try/dialog-tts-try.ts b/src/dialogs/tts-try/dialog-tts-try.ts
new file mode 100644
index 0000000000..113b5345ca
--- /dev/null
+++ b/src/dialogs/tts-try/dialog-tts-try.ts
@@ -0,0 +1,187 @@
+import { mdiPlayCircleOutline } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { LocalStorage } from "../../common/decorators/local-storage";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-button";
+import { createCloseHeading } from "../../components/ha-dialog";
+import "../../components/ha-textarea";
+import type { HaTextArea } from "../../components/ha-textarea";
+import { convertTextToSpeech } from "../../data/tts";
+import { HomeAssistant } from "../../types";
+import { showAlertDialog } from "../generic/show-dialog-box";
+import { TTSTryDialogParams } from "./show-dialog-tts-try";
+import "../../components/ha-circular-progress";
+
+@customElement("dialog-tts-try")
+export class TTSTryDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _loadingExample = false;
+
+  @state() private _params?: TTSTryDialogParams;
+
+  @state() private _valid = false;
+
+  @query("#message") private _messageInput?: HaTextArea;
+
+  @LocalStorage("ttsTryMessages", false, false) private _messages?: Record<
+    string,
+    string
+  >;
+
+  public showDialog(params: TTSTryDialogParams) {
+    this._params = params;
+    this._valid = Boolean(this._defaultMessage);
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private get _defaultMessage() {
+    const language = this._params!.language?.substring(0, 2);
+    const userLanguage = this.hass.locale.language.substring(0, 2);
+    // Load previous message in the right language
+    if (language && this._messages?.[language]) {
+      return this._messages[language];
+    }
+    // Only display example message if it's interface language
+    if (language === userLanguage) {
+      return this.hass.localize("ui.dialogs.tts-try.message_example");
+    }
+    return "";
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.dialogs.tts-try.header")
+        )}
+      >
+        <ha-textarea
+          autogrow
+          id="message"
+          .label=${this.hass.localize("ui.dialogs.tts-try.message")}
+          .placeholder=${this.hass.localize(
+            "ui.dialogs.tts-try.message_placeholder"
+          )}
+          .value=${this._defaultMessage}
+          @input=${this._inputChanged}
+          ?dialogInitialFocus=${!this._defaultMessage}
+        >
+        </ha-textarea>
+        ${this._loadingExample
+          ? html`
+              <ha-circular-progress
+                size="small"
+                active
+                alt=""
+                slot="primaryAction"
+                class="loading"
+              ></ha-circular-progress>
+            `
+          : html`
+              <ha-button
+                ?dialogInitialFocus=${Boolean(this._defaultMessage)}
+                slot="primaryAction"
+                .label=${this.hass.localize("ui.dialogs.tts-try.play")}
+                @click=${this._playExample}
+                .disabled=${!this._valid}
+              >
+                <ha-svg-icon
+                  slot="icon"
+                  .path=${mdiPlayCircleOutline}
+                ></ha-svg-icon>
+              </ha-button>
+            `}
+      </ha-dialog>
+    `;
+  }
+
+  private async _inputChanged() {
+    this._valid = Boolean(this._messageInput?.value);
+  }
+
+  private async _playExample() {
+    const message = this._messageInput?.value;
+    if (!message) {
+      return;
+    }
+
+    const platform = this._params!.engine;
+    const language = this._params!.language;
+    const voice = this._params!.voice;
+
+    if (language) {
+      this._messages = {
+        ...this._messages,
+        [language.substring(0, 2)]: message,
+      };
+    }
+
+    this._loadingExample = true;
+
+    const audio = new Audio();
+    audio.play();
+
+    let url;
+    try {
+      const result = await convertTextToSpeech(this.hass, {
+        platform,
+        message,
+        language,
+        options: { voice },
+      });
+      url = result.path;
+    } catch (err: any) {
+      this._loadingExample = false;
+      showAlertDialog(this, {
+        text: `Unable to load example. ${err.error || err.body || err}`,
+        warning: true,
+      });
+      return;
+    }
+    audio.src = url;
+    audio.addEventListener("canplaythrough", () => audio.play());
+    audio.addEventListener("playing", () => {
+      this._loadingExample = false;
+    });
+    audio.addEventListener("error", () => {
+      showAlertDialog(this, { title: "Error playing audio." });
+      this._loadingExample = false;
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-dialog {
+        --mdc-dialog-max-width: 500px;
+      }
+      ha-textarea,
+      ha-select {
+        width: 100%;
+      }
+      ha-select {
+        margin-top: 8px;
+      }
+      .loading {
+        height: 36px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-tts-try": TTSTryDialog;
+  }
+}
diff --git a/src/dialogs/tts-try/show-dialog-tts-try.ts b/src/dialogs/tts-try/show-dialog-tts-try.ts
new file mode 100644
index 0000000000..d69311f748
--- /dev/null
+++ b/src/dialogs/tts-try/show-dialog-tts-try.ts
@@ -0,0 +1,21 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface TTSTryDialogParams {
+  engine: string;
+  language?: string;
+  voice?: string;
+}
+
+export const loadTTSTryDialog = () => import("./dialog-tts-try");
+
+export const showTTSTryDialog = (
+  element: HTMLElement,
+  dialogParams: TTSTryDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    addHistory: false,
+    dialogTag: "dialog-tts-try",
+    dialogImport: loadTTSTryDialog,
+    dialogParams,
+  });
+};
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index b32d0d40e5..ae97087550 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -1,38 +1,44 @@
-/* eslint-disable lit/prefer-static-styles */
 import "@material/mwc-button/mwc-button";
 import {
+  mdiChevronDown,
   mdiClose,
   mdiHelpCircleOutline,
   mdiMicrophone,
   mdiSend,
+  mdiStar,
 } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
   html,
   LitElement,
-  PropertyValues,
   nothing,
+  PropertyValues,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
+import { LocalStorage } from "../../common/decorators/local-storage";
 import { fireEvent } from "../../common/dom/fire_event";
-import { SpeechRecognition } from "../../common/dom/speech-recognition";
+import { stopPropagation } from "../../common/dom/stop_propagation";
+import "../../components/ha-button";
+import "../../components/ha-button-menu";
 import "../../components/ha-dialog";
-import type { HaDialog } from "../../components/ha-dialog";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
+import "../../components/ha-list-item";
 import "../../components/ha-textfield";
 import type { HaTextField } from "../../components/ha-textfield";
 import {
-  AgentInfo,
-  getAgentInfo,
-  prepareConversation,
-  processConversationInput,
-} from "../../data/conversation";
+  AssistPipeline,
+  getAssistPipeline,
+  listAssistPipelines,
+  runAssistPipeline,
+} from "../../data/assist_pipeline";
+import { AgentInfo, getAgentInfo } from "../../data/conversation";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { AudioRecorder } from "../../util/audio-recorder";
 import { documentationUrl } from "../../util/documentation-url";
+import { showAlertDialog } from "../generic/show-dialog-box";
 
 interface Message {
   who: string;
@@ -40,49 +46,62 @@ interface Message {
   error?: boolean;
 }
 
-interface Results {
-  transcript: string;
-  final: boolean;
-}
-
 @customElement("ha-voice-command-dialog")
 export class HaVoiceCommandDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public results: Results | null = null;
-
-  @state() private _conversation: Message[] = [
-    {
-      who: "hass",
-      text: "",
-    },
-  ];
+  @state() private _conversation?: Message[];
 
   @state() private _opened = false;
 
+  @LocalStorage("AssistPipelineId", true, false) private _pipelineId?: string;
+
+  @state() private _pipeline?: AssistPipeline;
+
   @state() private _agentInfo?: AgentInfo;
 
   @state() private _showSendButton = false;
 
-  @query("#scroll-container") private _scrollContainer!: HaDialog;
+  @state() private _pipelines?: AssistPipeline[];
+
+  @state() private _preferredPipeline?: string;
+
+  @query("#scroll-container") private _scrollContainer!: HTMLDivElement;
 
   @query("#message-input") private _messageInput!: HaTextField;
 
-  private recognition!: SpeechRecognition;
-
   private _conversationId: string | null = null;
 
+  private _audioRecorder?: AudioRecorder;
+
+  private _audioBuffer?: Int16Array[];
+
+  private _audio?: HTMLAudioElement;
+
+  private _stt_binary_handler_id?: number | null;
+
   public async showDialog(): Promise<void> {
+    this._conversation = [
+      {
+        who: "hass",
+        text: this.hass.localize("ui.dialogs.voice_command.how_can_i_help"),
+      },
+    ];
     this._opened = true;
-    this._agentInfo = await getAgentInfo(this.hass);
+    await this.updateComplete;
     this._scrollMessagesBottom();
   }
 
   public async closeDialog(): Promise<void> {
     this._opened = false;
-    if (this.recognition) {
-      this.recognition.abort();
-    }
+    this._pipeline = undefined;
+    this._pipelines = undefined;
+    this._agentInfo = undefined;
+    this._conversation = undefined;
+    this._conversationId = null;
+    this._audioRecorder?.close();
+    this._audioRecorder = undefined;
+    this._audio?.pause();
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -90,6 +109,7 @@ export class HaVoiceCommandDialog extends LitElement {
     if (!this._opened) {
       return nothing;
     }
+    const supportsSTT = this._pipeline?.stt_engine && AudioRecorder.isSupported;
     return html`
       <ha-dialog
         open
@@ -99,15 +119,56 @@ export class HaVoiceCommandDialog extends LitElement {
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title">
-              ${this.hass.localize("ui.dialogs.voice_command.title")}
-            </span>
             <ha-icon-button
               slot="navigationIcon"
               dialogAction="cancel"
               .label=${this.hass.localize("ui.common.close")}
               .path=${mdiClose}
             ></ha-icon-button>
+            <div slot="title">
+              ${this.hass.localize("ui.dialogs.voice_command.title")}
+              <ha-button-menu
+                @opened=${this._loadPipelines}
+                @closed=${stopPropagation}
+                activatable
+                fixed
+              >
+                <ha-button slot="trigger">
+                  ${this._pipeline?.name}
+                  <ha-svg-icon
+                    slot="trailingIcon"
+                    .path=${mdiChevronDown}
+                  ></ha-svg-icon>
+                </ha-button>
+                ${this._pipelines?.map(
+                  (pipeline) => html`<ha-list-item
+                    ?selected=${pipeline.id === this._pipelineId ||
+                    (!this._pipelineId &&
+                      pipeline.id === this._preferredPipeline)}
+                    .pipeline=${pipeline.id}
+                    @click=${this._selectPipeline}
+                    .hasMeta=${pipeline.id === this._preferredPipeline}
+                  >
+                    ${pipeline.name}${pipeline.id === this._preferredPipeline
+                      ? html`<ha-svg-icon
+                          slot="meta"
+                          .path=${mdiStar}
+                        ></ha-svg-icon>`
+                      : nothing}
+                  </ha-list-item>`
+                )}
+                ${this.hass.user?.is_admin
+                  ? html`<li divider role="separator"></li>
+                      <a href="/config/voice-assistants/assistants"
+                        ><ha-list-item @click=${this.closeDialog}
+                          >${this.hass.localize(
+                            "ui.dialogs.voice_command.manage_assistants"
+                          )}</ha-list-item
+                        ></a
+                      >`
+                  : nothing}
+              </ha-button-menu>
+            </div>
             <a
               href=${documentationUrl(this.hass, "/docs/assist/")}
               slot="actionItems"
@@ -123,25 +184,13 @@ export class HaVoiceCommandDialog extends LitElement {
         </div>
         <div class="messages">
           <div class="messages-container" id="scroll-container">
-            ${this._conversation.map(
+            ${this._conversation!.map(
               (message) => html`
                 <div class=${this._computeMessageClasses(message)}>
                   ${message.text}
                 </div>
               `
             )}
-            ${this.results
-              ? html`
-                  <div class="message user">
-                    <span
-                      class=${classMap({
-                        interimTranscript: !this.results.final,
-                      })}
-                      >${this.results.transcript}</span
-                    >${!this.results.final ? "…" : ""}
-                  </div>
-                `
-              : ""}
           </div>
         </div>
         <div class="input" slot="primaryAction">
@@ -166,9 +215,9 @@ export class HaVoiceCommandDialog extends LitElement {
                     >
                     </ha-icon-button>
                   `
-                : SpeechRecognition
+                : supportsSTT
                 ? html`
-                    ${this.results
+                    ${this._audioRecorder?.active
                       ? html`
                           <div class="bouncer">
                             <div class="double-bounce1"></div>
@@ -205,15 +254,51 @@ export class HaVoiceCommandDialog extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.updated(changedProps);
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("_pipelineId") ||
+      (changedProperties.has("_opened") && this._opened === true)
+    ) {
+      this._getPipeline();
+    }
+  }
+
+  private async _getPipeline() {
+    try {
+      this._pipeline = await getAssistPipeline(this.hass, this._pipelineId);
+    } catch (e: any) {
+      if (e.code === "not_found") {
+        this._pipelineId = undefined;
+      }
+      return;
+    }
+    this._agentInfo = await getAgentInfo(
+      this.hass,
+      this._pipeline.conversation_engine
+    );
+  }
+
+  private async _loadPipelines() {
+    if (this._pipelines) {
+      return;
+    }
+    const { pipelines, preferred_pipeline } = await listAssistPipelines(
+      this.hass
+    );
+    this._pipelines = pipelines;
+    this._preferredPipeline = preferred_pipeline || undefined;
+  }
+
+  private async _selectPipeline(ev: CustomEvent) {
+    this._pipelineId = (ev.currentTarget as any).pipeline;
     this._conversation = [
       {
         who: "hass",
         text: this.hass.localize("ui.dialogs.voice_command.how_can_i_help"),
       },
     ];
-    prepareConversation(this.hass, this.hass.language);
+    await this.updateComplete;
+    this._scrollMessagesBottom();
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -224,7 +309,7 @@ export class HaVoiceCommandDialog extends LitElement {
   }
 
   private _addMessage(message: Message) {
-    this._conversation = [...this._conversation, message];
+    this._conversation = [...this._conversation!, message];
   }
 
   private _handleKeyUp(ev: KeyboardEvent) {
@@ -253,75 +338,8 @@ export class HaVoiceCommandDialog extends LitElement {
     }
   }
 
-  private _initRecognition() {
-    this.recognition = new SpeechRecognition();
-    this.recognition.interimResults = true;
-    this.recognition.lang = this.hass.language;
-    this.recognition.continuous = false;
-
-    this.recognition.addEventListener("start", () => {
-      this.results = {
-        final: false,
-        transcript: "",
-      };
-    });
-    this.recognition.addEventListener("nomatch", () => {
-      this._addMessage({
-        who: "user",
-        text: `<${this.hass.localize(
-          "ui.dialogs.voice_command.did_not_understand"
-        )}>`,
-        error: true,
-      });
-    });
-    this.recognition.addEventListener("error", (event) => {
-      // eslint-disable-next-line
-      console.error("Error recognizing text", event);
-      this.recognition!.abort();
-      // @ts-ignore
-      if (event.error !== "aborted" && event.error !== "no-speech") {
-        const text =
-          this.results && this.results.transcript
-            ? this.results.transcript
-            : `<${this.hass.localize(
-                "ui.dialogs.voice_command.did_not_hear"
-              )}>`;
-        this._addMessage({ who: "user", text, error: true });
-      }
-      this.results = null;
-    });
-    this.recognition.addEventListener("end", () => {
-      // Already handled by onerror
-      if (this.results == null) {
-        return;
-      }
-      const text = this.results.transcript;
-      this.results = null;
-      if (text) {
-        this._processText(text);
-      } else {
-        this._addMessage({
-          who: "user",
-          text: `<${this.hass.localize(
-            "ui.dialogs.voice_command.did_not_hear"
-          )}>`,
-          error: true,
-        });
-      }
-    });
-    this.recognition.addEventListener("result", (event) => {
-      const result = event.results[0];
-      this.results = {
-        transcript: result[0].transcript,
-        final: result.isFinal,
-      };
-    });
-  }
-
   private async _processText(text: string) {
-    if (this.recognition) {
-      this.recognition.abort();
-    }
+    this._audio?.pause();
     this._addMessage({ who: "user", text });
     const message: Message = {
       who: "hass",
@@ -330,21 +348,33 @@ export class HaVoiceCommandDialog extends LitElement {
     // To make sure the answer is placed at the right user text, we add it before we process it
     this._addMessage(message);
     try {
-      const response = await processConversationInput(
+      const unsub = await runAssistPipeline(
         this.hass,
-        text,
-        this._conversationId,
-        this.hass.language
+        (event) => {
+          if (event.type === "intent-end") {
+            this._conversationId = event.data.intent_output.conversation_id;
+            const plain = event.data.intent_output.response.speech?.plain;
+            if (plain) {
+              message.text = plain.speech;
+            }
+            this.requestUpdate("_conversation");
+            unsub();
+          }
+          if (event.type === "error") {
+            message.text = event.data.message;
+            message.error = true;
+            this.requestUpdate("_conversation");
+            unsub();
+          }
+        },
+        {
+          start_stage: "intent",
+          input: { text },
+          end_stage: "intent",
+          pipeline: this._pipelineId,
+          conversation_id: this._conversationId,
+        }
       );
-      this._conversationId = response.conversation_id;
-      const plain = response.response.speech?.plain;
-      if (plain) {
-        message.text = plain.speech;
-      } else {
-        message.text = "<silence>";
-      }
-
-      this.requestUpdate("_conversation");
     } catch {
       message.text = this.hass.localize("ui.dialogs.voice_command.error");
       message.error = true;
@@ -353,37 +383,171 @@ export class HaVoiceCommandDialog extends LitElement {
   }
 
   private _toggleListening() {
-    if (!this.results) {
+    if (!this._audioRecorder?.active) {
       this._startListening();
     } else {
       this._stopListening();
     }
   }
 
-  private _stopListening() {
-    if (this.recognition) {
-      this.recognition.stop();
+  private async _startListening() {
+    this._audio?.pause();
+    if (!this._audioRecorder) {
+      this._audioRecorder = new AudioRecorder((audio) => {
+        if (this._audioBuffer) {
+          this._audioBuffer.push(audio);
+        } else {
+          this._sendAudioChunk(audio);
+        }
+      });
+    }
+    this._audioBuffer = [];
+    const userMessage: Message = {
+      who: "user",
+      text: "…",
+    };
+    this._audioRecorder.start().then(() => {
+      this._addMessage(userMessage);
+      this.requestUpdate("_audioRecorder");
+    });
+    const hassMessage: Message = {
+      who: "hass",
+      text: "…",
+    };
+    // To make sure the answer is placed at the right user text, we add it before we process it
+    try {
+      const unsub = await runAssistPipeline(
+        this.hass,
+        (event) => {
+          if (event.type === "run-start") {
+            this._stt_binary_handler_id =
+              event.data.runner_data.stt_binary_handler_id;
+          }
+
+          // When we start STT stage, the WS has a binary handler
+          if (event.type === "stt-start" && this._audioBuffer) {
+            // Send the buffer over the WS to the STT engine.
+            for (const buffer of this._audioBuffer) {
+              this._sendAudioChunk(buffer);
+            }
+            this._audioBuffer = undefined;
+          }
+
+          // Stop recording if the server is done with STT stage
+          if (event.type === "stt-end") {
+            this._stt_binary_handler_id = undefined;
+            this._stopListening();
+            userMessage.text = event.data.stt_output.text;
+            this.requestUpdate("_conversation");
+            // To make sure the answer is placed at the right user text, we add it before we process it
+            this._addMessage(hassMessage);
+          }
+
+          if (event.type === "intent-end") {
+            this._conversationId = event.data.intent_output.conversation_id;
+            const plain = event.data.intent_output.response.speech?.plain;
+            if (plain) {
+              hassMessage.text = plain.speech;
+            }
+            this.requestUpdate("_conversation");
+          }
+
+          if (event.type === "tts-end") {
+            const url = event.data.tts_output.url;
+            this._audio = new Audio(url);
+            this._audio.play();
+            this._audio.addEventListener("ended", this._unloadAudio);
+            this._audio.addEventListener("pause", this._unloadAudio);
+            this._audio.addEventListener("canplaythrough", this._playAudio);
+            this._audio.addEventListener("error", this._audioError);
+          }
+
+          if (event.type === "run-end") {
+            unsub();
+          }
+
+          if (event.type === "error") {
+            this._stt_binary_handler_id = undefined;
+            if (userMessage.text === "…") {
+              userMessage.text = event.data.message;
+              userMessage.error = true;
+            } else {
+              hassMessage.text = event.data.message;
+              hassMessage.error = true;
+            }
+            this._stopListening();
+            this.requestUpdate("_conversation");
+            unsub();
+          }
+        },
+        {
+          start_stage: "stt",
+          end_stage: this._pipeline?.tts_engine ? "tts" : "intent",
+          input: { sample_rate: this._audioRecorder.sampleRate! },
+          pipeline: this._pipelineId,
+          conversation_id: this._conversationId,
+        }
+      );
+    } catch (err: any) {
+      await showAlertDialog(this, {
+        title: "Error starting pipeline",
+        text: err.message || err,
+      });
+      this._stopListening();
     }
   }
 
-  private _startListening() {
-    if (!this.recognition) {
-      this._initRecognition();
+  private _stopListening() {
+    this._audioRecorder?.stop();
+    this.requestUpdate("_audioRecorder");
+    // We're currently STTing, so finish audio
+    if (this._stt_binary_handler_id) {
+      if (this._audioBuffer) {
+        for (const chunk of this._audioBuffer) {
+          this._sendAudioChunk(chunk);
+        }
+      }
+      // Send empty message to indicate we're done streaming.
+      this._sendAudioChunk(new Int16Array());
     }
+    this._audioBuffer = undefined;
+  }
 
-    if (this.results) {
+  private _sendAudioChunk(chunk: Int16Array) {
+    this.hass.connection.socket!.binaryType = "arraybuffer";
+
+    // eslint-disable-next-line eqeqeq
+    if (this._stt_binary_handler_id == undefined) {
       return;
     }
+    // Turn into 8 bit so we can prefix our handler ID.
+    const data = new Uint8Array(1 + chunk.length * 2);
+    data[0] = this._stt_binary_handler_id;
+    data.set(new Uint8Array(chunk.buffer), 1);
 
-    this.results = {
-      transcript: "",
-      final: false,
-    };
-    this.recognition!.start();
+    this.hass.connection.socket!.send(data);
   }
 
+  private _playAudio = () => {
+    this._audio?.play();
+  };
+
+  private _audioError = () => {
+    showAlertDialog(this, { title: "Error playing audio." });
+    this._audio?.removeAttribute("src");
+  };
+
+  private _unloadAudio = () => {
+    this._audio?.removeAttribute("src");
+    this._audio = undefined;
+  };
+
   private _scrollMessagesBottom() {
-    this._scrollContainer.scrollTo(0, 99999);
+    const scrollContainer = this._scrollContainer;
+    if (!scrollContainer) {
+      return;
+    }
+    scrollContainer.scrollTo(0, 99999);
   }
 
   private _computeMessageClasses(message: Message) {
@@ -409,18 +573,50 @@ export class HaVoiceCommandDialog extends LitElement {
         ha-dialog {
           --primary-action-button-flex: 1;
           --secondary-action-button-flex: 0;
-          --mdc-dialog-max-width: 450px;
+          --mdc-dialog-max-width: 500px;
           --mdc-dialog-max-height: 500px;
           --dialog-content-padding: 0;
         }
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);
+          --header-height: 64px;
         }
         ha-header-bar a {
           color: var(--primary-text-color);
         }
-
+        div[slot="title"] {
+          display: flex;
+          flex-direction: column;
+          margin-top: 8px;
+        }
+        ha-button-menu {
+          --mdc-theme-on-primary: var(--text-primary-color);
+          --mdc-theme-primary: var(--primary-color);
+          margin: -8px 0 0 -8px;
+        }
+        ha-button-menu ha-button {
+          --mdc-theme-primary: var(--secondary-text-color);
+          --mdc-typography-button-text-transform: none;
+          --mdc-typography-button-font-size: unset;
+          --mdc-typography-button-font-weight: 400;
+          --mdc-typography-button-letter-spacing: var(
+            --mdc-typography-headline6-letter-spacing,
+            0.0125em
+          );
+          --mdc-typography-button-line-height: var(
+            --mdc-typography-headline6-line-height,
+            2rem
+          );
+          --button-height: auto;
+        }
+        ha-button-menu ha-button ha-svg-icon {
+          height: 28px;
+          margin-left: 4px;
+        }
+        ha-button-menu a {
+          text-decoration: none;
+        }
         ha-textfield {
           display: block;
           overflow: hidden;
@@ -440,14 +636,20 @@ export class HaVoiceCommandDialog extends LitElement {
           padding: 4px;
         }
         .attribution {
+          display: block;
           color: var(--secondary-text-color);
+          padding-top: 4px;
+          margin-bottom: -8px;
         }
         .messages {
           display: block;
-          height: 300px;
+          height: 400px;
           box-sizing: border-box;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 100%;
+          }
           .messages {
             height: 100%;
           }
@@ -512,10 +714,6 @@ export class HaVoiceCommandDialog extends LitElement {
           margin-right: 0;
         }
 
-        .interimTranscript {
-          color: var(--secondary-text-color);
-        }
-
         .bouncer {
           width: 48px;
           height: 48px;
diff --git a/src/entrypoints/app.ts b/src/entrypoints/app.ts
index f7f607720b..458fc850c2 100644
--- a/src/entrypoints/app.ts
+++ b/src/entrypoints/app.ts
@@ -6,7 +6,6 @@ import "@webcomponents/scoped-custom-element-registry/scoped-custom-element-regi
 import "../layouts/home-assistant";
 import "../resources/ha-style";
 import "../resources/roboto";
-import "../util/legacy-support";
 
 setPassiveTouchGestures(true);
 setCancelSyntheticClickEvents(false);
diff --git a/src/html/_header.html.template b/src/html/_header.html.template
index 95e1dc9c6b..9ba28a1421 100644
--- a/src/html/_header.html.template
+++ b/src/html/_header.html.template
@@ -1,4 +1,8 @@
-<meta charset="utf-8">
-<link rel='manifest' href='/manifest.json' crossorigin="use-credentials">
-<link rel='icon' href='/static/icons/favicon.ico'>
-<%= renderTemplate('_style_base') %>
+<meta charset="utf-8" />
+<link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+<link rel="icon" href="/static/icons/favicon.ico" />
+<% if (!useWDS) { %>
+  <% for (const entry of latestEntryJS) { %>
+    <link rel="modulepreload" href="<%= entry %>" crossorigin="use-credentials" />
+  <% } %>
+<% } %>
diff --git a/src/html/_script_load_es5.html.template b/src/html/_script_load_es5.html.template
new file mode 100644
index 0000000000..68458ce9b4
--- /dev/null
+++ b/src/html/_script_load_es5.html.template
@@ -0,0 +1,17 @@
+<script>
+  (function() {
+    if (!window.latestJS) {
+      <% if (useRollup) { %>
+        _ls("/static/js/s.min.js").onload = function() {
+          <% for (const entry of es5EntryJS) { %>
+            System.import("<%= entry %>");
+          <% } %>
+        }
+      <% } else { %>
+        <% for (const entry of es5EntryJS) { %>
+          _ls("<%= entry %>");
+        <% } %>
+      <% } %>
+    }
+  })();
+</script>
diff --git a/src/html/authorize.html.template b/src/html/authorize.html.template
index 66e0b1db17..5f9c58f244 100644
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -2,8 +2,8 @@
 <html>
   <head>
     <title>Home Assistant</title>
-    <link rel="modulepreload" href="<%= latestPageJS %>" crossorigin="use-credentials" />
-    <%= renderTemplate('_header') %>
+    <%= renderTemplate("_header.html.template") %>
+    <%= renderTemplate("_style_base.html.template") %>
     <style>
       .content {
         padding: 20px 16px;
@@ -38,36 +38,23 @@
       </div>
       <ha-authorize><p>Initializing</p></ha-authorize>
     </div>
-
-    <%= renderTemplate('_js_base') %>
-    <%= renderTemplate('_preload_roboto') %>
-
+    <%= renderTemplate("_js_base.html.template") %>
+    <%= renderTemplate("_preload_roboto.html.template") %>
     <script crossorigin="use-credentials">
       if (!window.globalThis) {
         window.globalThis = window;
       }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
-        import("<%= latestPageJS %>");
+        <% for (const entry of latestEntryJS) { %>
+          import("<%= entry %>");
+        <% } %>
         window.latestJS = true;
         window.providersPromise = fetch("/auth/providers", {
           credentials: "same-origin",
         });
       }
     </script>
-
-    <script>
-      (function() {
-        if (!window.latestJS) {
-          <% if (useRollup) { %>
-            _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5PageJS %>");
-            }
-          <% } else { %>
-            _ls("<%= es5PageJS %>");
-          <% } %>
-        }
-      })();
-    </script>
+    <%= renderTemplate("_script_load_es5.html.template") %>
   </body>
 </html>
diff --git a/src/html/index.html.template b/src/html/index.html.template
index d69742908f..c8aae499b6 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -1,12 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <% if (!useWDS) { %>
-    <link rel="modulepreload" href="<%= latestCoreJS %>" crossorigin="use-credentials" />
-    <link rel="modulepreload" href="<%= latestAppJS %>" crossorigin="use-credentials" />
-    <% } %>
-    <%= renderTemplate('_header') %>
     <title>Home Assistant</title>
+    <%= renderTemplate("_header.html.template") %>
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
     <link
       rel="apple-touch-icon"
@@ -36,8 +32,9 @@
     <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" />
+    <meta name="theme-color" content="{{ theme_color }}" />
     <meta name="color-scheme" content="dark light" />
+    <%= renderTemplate("_style_base.html.template") %>
     <style>
       html {
         background-color: var(--primary-background-color, #fafafa);
@@ -83,20 +80,18 @@
       </svg>
       <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
     </div>
-
     <home-assistant></home-assistant>
-
-    <%= renderTemplate('_js_base') %>
-    <%= renderTemplate('_preload_roboto') %>
-
+    <%= renderTemplate("_js_base.html.template") %>
+    <%= renderTemplate("_preload_roboto.html.template") %>
     <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
       if (!window.globalThis) {
         window.globalThis = window;
       }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
-        import("<%= latestCoreJS %>");
-        import("<%= latestAppJS %>");
+        <% for (const entry of latestEntryJS) { %>
+          import("<%= entry %>");
+        <% } %>
         window.customPanelJS = "<%= latestCustomPanelJS %>";
         window.latestJS = true;
       }
@@ -106,7 +101,6 @@
     import("{{ extra_module }}");
     {%- endfor -%}
     </script>
-
     <script>
         if (!window.latestJS) {
           window.customPanelJS = "<%= es5CustomPanelJS %>";
@@ -115,13 +109,14 @@
             _ls("/static/js/s.min.js").onload = function() {
               // Although core and app can load in any order, we need to
               // force loading core first because it contains polyfills
-              return System.import("<%= es5CoreJS %>").then(function() {
-                System.import("<%= es5AppJS %>");
+              return System.import("<%= es5EntryJS[0] %>").then(function() {
+                System.import("<%= es5EntryJS[1] %>");
               });
             }
           <% } else { %>
-            _ls("<%= es5CoreJS %>");
-            _ls("<%= es5AppJS %>");
+            <% for (const entry of es5EntryJS) { %>
+              _ls("<%= entry %>");
+            <% } %>
           <% } %>
         }
     </script>
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 2b81e1a84f..7e6f828972 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -2,12 +2,8 @@
 <html>
   <head>
     <title>Home Assistant</title>
-    <link
-      rel="modulepreload"
-      href="<%= latestPageJS %>"
-      crossorigin="use-credentials"
-    />
-    <%= renderTemplate('_header') %>
+    <%= renderTemplate("_header.html.template") %>
+    <%= renderTemplate("_style_base.html.template") %>
     <style>
       html {
         color: var(--primary-text-color, #212121);
@@ -70,39 +66,25 @@
         <img src="/static/icons/favicon-192x192.png" height="52" width="52" alt="" />
         Home Assistant
       </div>
-
       <ha-onboarding></ha-onboarding>
     </div>
-
-    <%= renderTemplate('_js_base') %>
-    <%= renderTemplate('_preload_roboto') %>
-
+    <%= renderTemplate("_js_base.html.template") %>
+    <%= renderTemplate("_preload_roboto.html.template") %>
     <script crossorigin="use-credentials">
       if (!window.globalThis) {
         window.globalThis = window;
       }
       // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
       if (!isS11_12) {
-        import("<%= latestPageJS %>");
+        <% for (const entry of latestEntryJS) { %>
+          import("<%= entry %>");
+        <% } %>
         window.latestJS = true;
         window.stepsPromise = fetch("/api/onboarding", {
           credentials: "same-origin",
         });
       }
     </script>
-
-    <script>
-      (function() {
-        if (!window.latestJS) {
-          <% if (useRollup) { %>
-            _ls("/static/js/s.min.js").onload = function() {
-              System.import("<%= es5PageJS %>");
-            }
-          <% } else { %>
-            _ls("<%= es5PageJS %>");
-          <% } %>
-        }
-      })();
-    </script>
+    <%= renderTemplate("_script_load_es5.html.template") %>
   </body>
 </html>
diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts
index 42df3b8d69..4d815bcfdd 100644
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,12 +1,9 @@
-import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
 
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
 
-  @state() private _showProgressIndicator = false;
-
   @state() private _retryInSeconds = 60;
 
   private _showProgressIndicatorTimeout?: NodeJS.Timeout;
@@ -36,9 +33,7 @@ class HaInitPage extends LitElement {
         `
       : html`
           <div id="progress-indicator-wrapper">
-            ${this._showProgressIndicator
-              ? html`<ha-circular-progress active></ha-circular-progress>`
-              : ""}
+            <ha-circular-progress active></ha-circular-progress>
           </div>
           <div id="loading-text">Loading data</div>
         `;
@@ -54,10 +49,15 @@ class HaInitPage extends LitElement {
     }
   }
 
+  protected willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has("error") && this.error) {
+      import("@material/mwc-button");
+    }
+  }
+
   protected firstUpdated() {
-    this._showProgressIndicatorTimeout = setTimeout(async () => {
-      await import("../components/ha-circular-progress");
-      this._showProgressIndicator = true;
+    this._showProgressIndicatorTimeout = setTimeout(() => {
+      import("../components/ha-circular-progress");
     }, 5000);
 
     this._retryInterval = setInterval(() => {
diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts
index 6fb01e521f..cf3aca4f78 100644
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@@ -3,8 +3,6 @@ import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { Route } from "../types";
-import "./hass-error-screen";
-import "./hass-loading-screen";
 
 const extractPage = (path: string, defaultPage: string) => {
   if (path === "") {
@@ -256,10 +254,12 @@ export class HassRouterPage extends ReactiveElement {
   }
 
   protected createLoadingScreen() {
+    import("./hass-loading-screen");
     return document.createElement("hass-loading-screen");
   }
 
   protected createErrorScreen(error: string) {
+    import("./hass-error-screen");
     const errorEl = document.createElement("hass-error-screen");
     errorEl.error = error;
     return errorEl;
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index afd153947b..dcaa2b460f 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -176,6 +176,7 @@ export class HomeAssistantMain extends LitElement {
         /* remove the grey tap highlights in iOS on the fullscreen touch targets */
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         --mdc-drawer-width: 56px;
+        --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
       }
       :host([expanded]) {
         --mdc-drawer-width: calc(256px + env(safe-area-inset-left));
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index bcd99b762d..0e72bbd868 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -65,7 +65,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     `;
   }
 
-  update(changedProps) {
+  update(changedProps: PropertyValues<this>) {
     if (this.hass?.states && this.hass.config && this.hass.services) {
       this.render = this.renderHass;
       this.update = super.update;
@@ -74,7 +74,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     super.update(changedProps);
   }
 
-  protected firstUpdated(changedProps) {
+  protected firstUpdated(changedProps: PropertyValues<this>) {
     super.firstUpdated(changedProps);
     this._initializeHass();
     setTimeout(() => registerServiceWorker(this), 1000);
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index 3aa5b91549..7c0869d2a4 100644
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -1,10 +1,25 @@
 import "@material/mwc-button/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { createCountryListEl } from "../components/country-datalist";
 import { createCurrencyListEl } from "../components/currency-datalist";
+import "../components/ha-alert";
+import "../components/ha-formfield";
+import "../components/ha-radio";
+import type { HaRadio } from "../components/ha-radio";
+import "../components/ha-textfield";
+import type { HaTextField } from "../components/ha-textfield";
+import { createLanguageListEl } from "../components/language-datalist";
 import "../components/map/ha-locations-editor";
 import type {
   HaLocationsEditor,
@@ -20,14 +35,7 @@ import { SYMBOL_TO_ISO } from "../data/currency";
 import { onboardCoreConfigStep } from "../data/onboarding";
 import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant } from "../types";
-import "../components/ha-radio";
-import "../components/ha-formfield";
-import type { HaRadio } from "../components/ha-radio";
-import type { HaTextField } from "../components/ha-textfield";
-import "../components/ha-textfield";
 import { getLocalLanguage } from "../util/common-translation";
-import { createCountryListEl } from "../components/country-datalist";
-import { createLanguageListEl } from "../components/language-datalist";
 
 const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");
@@ -57,10 +65,18 @@ class OnboardingCoreConfig extends LitElement {
 
   @state() private _country?: ConfigUpdateValues["country"];
 
+  @state() private _error?: string;
+
   @query("ha-locations-editor", true) private map!: HaLocationsEditor;
 
   protected render(): TemplateResult {
     return html`
+      ${
+        this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : nothing
+      }
+
       <p>
         ${this.onboardingLocalize(
           "ui.panel.page-onboarding.core-config.intro",
@@ -114,21 +130,26 @@ class OnboardingCoreConfig extends LitElement {
       <div class="row">
         <ha-textfield
           class="flex"
-          .label=${this.hass.localize(
-            "ui.panel.config.core.section.core.core_config.country"
-          )}
+          .label=${
+            this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.country"
+            ) || "Country"
+          }
           name="country"
+          required
           .disabled=${this._working}
           .value=${this._countryValue}
           @change=${this._handleChange}
         ></ha-textfield>
-
         <ha-textfield
           class="flex"
-          .label=${this.hass.localize(
-            "ui.panel.config.core.section.core.core_config.language"
-          )}
+          .label=${
+            this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.language"
+            ) || "Language"
+          }
           name="language"
+          required
           .disabled=${this._working}
           .value=${this._languageValue}
           @change=${this._handleChange}
@@ -251,7 +272,7 @@ class OnboardingCoreConfig extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     setTimeout(
-      () => this.shadowRoot!.querySelector("ha-textfield")!.focus(),
+      () => this.renderRoot.querySelector("ha-textfield")!.focus(),
       100
     );
     this.addEventListener("keypress", (ev) => {
@@ -259,39 +280,43 @@ class OnboardingCoreConfig extends LitElement {
         this._save(ev);
       }
     });
-    const tzInput = this.shadowRoot!.querySelector(
+    const tzInput = this.renderRoot.querySelector(
       "[name=timeZone]"
     ) as HaTextField;
     tzInput.updateComplete.then(() => {
-      tzInput.shadowRoot!.appendChild(createTimezoneListEl());
+      tzInput.renderRoot.appendChild(createTimezoneListEl());
       tzInput.formElement.setAttribute("list", "timezones");
     });
 
-    const curInput = this.shadowRoot!.querySelector(
+    const curInput = this.renderRoot.querySelector(
       "[name=currency]"
     ) as HaTextField;
     curInput.updateComplete.then(() => {
-      curInput.shadowRoot!.appendChild(
+      curInput.renderRoot.appendChild(
         createCurrencyListEl(this.hass.locale.language)
       );
       curInput.formElement.setAttribute("list", "currencies");
     });
 
-    const countryInput = this.shadowRoot!.querySelector(
+    const countryInput = this.renderRoot.querySelector(
       "[name=country]"
     ) as HaTextField;
     countryInput.updateComplete.then(() => {
-      countryInput.shadowRoot!.appendChild(
+      countryInput.renderRoot.appendChild(
         createCountryListEl(this.hass.locale.language)
       );
+
       countryInput.formElement.setAttribute("list", "countries");
     });
 
-    const langInput = this.shadowRoot!.querySelector(
+    const langInput = this.renderRoot.querySelector(
       "[name=language]"
     ) as HaTextField;
     langInput.updateComplete.then(() => {
-      langInput.shadowRoot!.appendChild(createLanguageListEl(this.hass));
+      langInput.renderRoot.appendChild(createLanguageListEl(this.hass));
+      langInput.renderRoot
+        .querySelector("#label")
+        ?.classList.add("mdc-floating-label--required");
       langInput.formElement.setAttribute("list", "languages");
     });
   }
@@ -401,7 +426,7 @@ class OnboardingCoreConfig extends LitElement {
       }
       this._language = getLocalLanguage();
     } catch (err: any) {
-      alert(`Failed to detect location information: ${err.message}`);
+      this._error = `Failed to detect location information: ${err.message}`;
     } finally {
       this._working = false;
     }
@@ -430,7 +455,7 @@ class OnboardingCoreConfig extends LitElement {
       });
     } catch (err: any) {
       this._working = false;
-      alert(`Failed to save: ${err.message}`);
+      this._error = err.message;
     }
   }
 
diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts
index 519499721c..f972609dfb 100644
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@@ -1,20 +1,21 @@
 import "@material/mwc-button/mwc-button";
 import { mdiCheck, mdiDotsHorizontal } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
   html,
   LitElement,
+  nothing,
   PropertyValues,
   TemplateResult,
-  nothing,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import { LocalizeFunc } from "../common/translations/localize";
-import { ConfigEntry, getConfigEntries } from "../data/config_entries";
+import { ConfigEntry, subscribeConfigEntries } from "../data/config_entries";
 import {
   getConfigFlowInProgressCollection,
   localizeConfigFlowTitle,
@@ -27,6 +28,8 @@ import {
   loadConfigFlowDialog,
   showConfigFlowDialog,
 } from "../dialogs/config-flow/show-dialog-config-flow";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { showAddIntegrationDialog } from "../panels/config/integrations/show-add-integration-dialog";
 import { HomeAssistant } from "../types";
 import "./action-badge";
 import "./integration-badge";
@@ -40,7 +43,7 @@ const HIDDEN_DOMAINS = new Set([
 ]);
 
 @customElement("onboarding-integrations")
-class OnboardingIntegrations extends LitElement {
+class OnboardingIntegrations extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public onboardingLocalize!: LocalizeFunc;
@@ -49,30 +52,56 @@ class OnboardingIntegrations extends LitElement {
 
   @state() private _discovered?: DataEntryFlowProgress[];
 
-  private _unsubEvents?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this.hass.loadBackendTranslation("title", undefined, true);
-    this._unsubEvents = subscribeConfigFlowInProgress(this.hass, (flows) => {
-      this._discovered = flows;
-      const integrations: Set<string> = new Set();
-      for (const flow of flows) {
-        // To render title placeholders
-        if (flow.context.title_placeholders) {
-          integrations.add(flow.handler);
+  public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
+    return [
+      subscribeConfigFlowInProgress(this.hass, (flows) => {
+        this._discovered = flows;
+        const integrations: Set<string> = new Set();
+        for (const flow of flows) {
+          // To render title placeholders
+          if (flow.context.title_placeholders) {
+            integrations.add(flow.handler);
+          }
         }
-      }
-      this.hass.loadBackendTranslation("config", Array.from(integrations));
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._unsubEvents) {
-      this._unsubEvents();
-      this._unsubEvents = undefined;
-    }
+        this.hass.loadBackendTranslation("config", Array.from(integrations));
+      }),
+      subscribeConfigEntries(
+        this.hass,
+        (messages) => {
+          let fullUpdate = false;
+          const newEntries: ConfigEntry[] = [];
+          messages.forEach((message) => {
+            if (message.type === null || message.type === "added") {
+              if (HIDDEN_DOMAINS.has(message.entry.domain)) {
+                return;
+              }
+              newEntries.push(message.entry);
+              if (message.type === null) {
+                fullUpdate = true;
+              }
+            } else if (message.type === "removed") {
+              this._entries = this._entries!.filter(
+                (entry) => entry.entry_id !== message.entry.entry_id
+              );
+            } else if (message.type === "updated") {
+              if (HIDDEN_DOMAINS.has(message.entry.domain)) {
+                return;
+              }
+              const newEntry = message.entry;
+              this._entries = this._entries!.map((entry) =>
+                entry.entry_id === newEntry.entry_id ? newEntry : entry
+              );
+            }
+          });
+          if (!newEntries.length && !fullUpdate) {
+            return;
+          }
+          const existingEntries = fullUpdate ? [] : this._entries;
+          this._entries = [...existingEntries!, ...newEntries];
+        },
+        { type: ["device", "hub", "service"] }
+      ),
+    ];
   }
 
   protected render() {
@@ -149,25 +178,19 @@ class OnboardingIntegrations extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+    this.hass.loadBackendTranslation("title", undefined, true);
     this._scanUSBDevices();
     loadConfigFlowDialog();
-    this._loadConfigEntries();
   }
 
   private _createFlow() {
-    showConfigFlowDialog(this, {
-      dialogClosedCallback: () => {
-        this._loadConfigEntries();
-        getConfigFlowInProgressCollection(this.hass!.connection).refresh();
-      },
-    });
+    showAddIntegrationDialog(this);
   }
 
   private _continueFlow(ev) {
     showConfigFlowDialog(this, {
       continueFlowId: ev.currentTarget.flowId,
       dialogClosedCallback: () => {
-        this._loadConfigEntries();
         getConfigFlowInProgressCollection(this.hass!.connection).refresh();
       },
     });
@@ -180,18 +203,6 @@ class OnboardingIntegrations extends LitElement {
     await scanUSBDevices(this.hass);
   }
 
-  private async _loadConfigEntries() {
-    const entries = await getConfigEntries(this.hass!, {
-      type: ["device", "hub", "service"],
-    });
-    // We filter out the config entries that are automatically created during onboarding.
-    // It is one that we create automatically and it will confuse the user
-    // if it starts showing up during onboarding.
-    this._entries = entries.filter(
-      (entry) => !HIDDEN_DOMAINS.has(entry.domain)
-    );
-  }
-
   private async _finish() {
     fireEvent(this, "onboarding-step", {
       type: "integration",
diff --git a/src/panels/calendar/confirm-event-dialog-box.ts b/src/panels/calendar/confirm-event-dialog-box.ts
index 389c753d73..94adc80954 100644
--- a/src/panels/calendar/confirm-event-dialog-box.ts
+++ b/src/panels/calendar/confirm-event-dialog-box.ts
@@ -125,8 +125,6 @@ class ConfirmEventDialogBox extends LitElement {
         --mdc-theme-primary: var(--error-color);
       }
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }
diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts
index f158786187..bfebbadb0b 100644
--- a/src/panels/config/automation/ha-automation-trace.ts
+++ b/src/panels/config/automation/ha-automation-trace.ts
@@ -520,7 +520,7 @@ export class HaAutomationTrace extends LitElement {
         }
 
         .main {
-          height: calc(100% - var(--header-height));
+          min-height: calc(100% - var(--header-height));
           display: flex;
           background-color: var(--card-background-color);
           direction: ltr;
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
index d546293fe4..300b7215c8 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
@@ -1,21 +1,26 @@
-import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-textfield";
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
+import { mdiCog, mdiContentCopy } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { mdiContentCopy } from "@mdi/js";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { slugify } from "../../../../../common/string/slugify";
 import { copyToClipboard } from "../../../../../common/util/copy-clipboard";
+import "../../../../../components/ha-button-menu";
+import "../../../../../components/ha-check-list-item";
+import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-textfield";
 import type { HaTextField } from "../../../../../components/ha-textfield";
-import { showToast } from "../../../../../util/toast";
 import {
-  WebhookTrigger,
   AutomationConfig,
+  WebhookTrigger,
 } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
+import { showToast } from "../../../../../util/toast";
 import { handleChangeEvent } from "../ha-automation-trigger-row";
 
+const SUPPORTED_METHODS = ["GET", "HEAD", "POST", "PUT"];
+const DEFAULT_METHODS = ["POST", "PUT"];
 const DEFAULT_WEBHOOK_ID = "";
 
 @customElement("ha-automation-trigger-webhook")
@@ -32,6 +37,8 @@ export class HaWebhookTrigger extends LitElement {
 
   public static get defaultConfig() {
     return {
+      allowed_methods: [...DEFAULT_METHODS],
+      local_only: true,
       webhook_id: DEFAULT_WEBHOOK_ID,
     };
   }
@@ -72,6 +79,12 @@ export class HaWebhookTrigger extends LitElement {
   public willUpdate(changedProperties: PropertyValues) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("trigger")) {
+      if (this.trigger.allowed_methods === undefined) {
+        this.trigger.allowed_methods = [...DEFAULT_METHODS];
+      }
+      if (this.trigger.local_only === undefined) {
+        this.trigger.local_only = true;
+      }
       if (this.trigger.webhook_id === DEFAULT_WEBHOOK_ID) {
         this.trigger.webhook_id = this._generateWebhookId();
       }
@@ -79,31 +92,68 @@ export class HaWebhookTrigger extends LitElement {
   }
 
   protected render() {
-    const { webhook_id: webhookId } = this.trigger;
+    const {
+      allowed_methods: allowedMethods,
+      local_only: localOnly,
+      webhook_id: webhookId,
+    } = this.trigger;
 
     return html`
-      <ha-textfield
-        name="webhook_id"
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id"
-        )}
-        .helper=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper"
-        )}
-        .disabled=${this.disabled}
-        iconTrailing
-        .value=${webhookId || ""}
-        @input=${this._valueChanged}
-      >
-        <ha-icon-button
-          @click=${this._copyUrl}
-          slot="trailingIcon"
+      <div class="flex">
+        <ha-textfield
+          name="webhook_id"
           .label=${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.type.webhook.copy_url"
+            "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id"
           )}
-          .path=${mdiContentCopy}
-        ></ha-icon-button>
-      </ha-textfield>
+          .helper=${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.type.webhook.webhook_id_helper"
+          )}
+          .disabled=${this.disabled}
+          iconTrailing
+          .value=${webhookId || ""}
+          @input=${this._valueChanged}
+        >
+          <ha-icon-button
+            @click=${this._copyUrl}
+            slot="trailingIcon"
+            .label=${this.hass.localize(
+              "ui.panel.config.automation.editor.triggers.type.webhook.copy_url"
+            )}
+            .path=${mdiContentCopy}
+          ></ha-icon-button>
+        </ha-textfield>
+        <ha-button-menu multi>
+          <ha-icon-button
+            slot="trigger"
+            .label=${this.hass!.localize(
+              "ui.panel.config.automation.editor.triggers.type.webhook.webhook_settings"
+            )}
+            .path=${mdiCog}
+          ></ha-icon-button>
+          ${SUPPORTED_METHODS.map(
+            (method) => html`
+              <ha-check-list-item
+                left
+                .value=${method}
+                @request-selected=${this._allowedMethodsChanged}
+                .selected=${allowedMethods!.includes(method)}
+              >
+                ${method}
+              </ha-check-list-item>
+            `
+          )}
+          <li divider role="separator"></li>
+          <ha-check-list-item
+            left
+            @request-selected=${this._localOnlyChanged}
+            .selected=${localOnly!}
+          >
+            ${this.hass!.localize(
+              "ui.panel.config.automation.editor.triggers.type.webhook.local_only"
+            )}
+          </ha-check-list-item>
+        </ha-button-menu>
+      </div>
     `;
   }
 
@@ -111,6 +161,39 @@ export class HaWebhookTrigger extends LitElement {
     handleChangeEvent(this, ev);
   }
 
+  private _localOnlyChanged(ev: CustomEvent<RequestSelectedDetail>): void {
+    ev.stopPropagation();
+    if (this.trigger.local_only === ev.detail.selected) {
+      return;
+    }
+    const newTrigger = {
+      ...this.trigger,
+      local_only: ev.detail.selected,
+    };
+    fireEvent(this, "value-changed", { value: newTrigger });
+  }
+
+  private _allowedMethodsChanged(ev: CustomEvent<RequestSelectedDetail>): void {
+    ev.stopPropagation();
+    const method = (ev.target as any).value;
+    const selected = ev.detail.selected;
+
+    if (selected === this.trigger.allowed_methods?.includes(method)) {
+      return;
+    }
+
+    const methods = this.trigger.allowed_methods ?? [];
+    const newMethods = [...methods];
+
+    if (selected) {
+      newMethods.push(method);
+    } else {
+      newMethods.splice(newMethods.indexOf(method), 1);
+    }
+    const newTrigger = { ...this.trigger, allowed_methods: newMethods };
+    fireEvent(this, "value-changed", { value: newTrigger });
+  }
+
   private async _copyUrl(ev): Promise<void> {
     const inputElement = ev.target.parentElement as HaTextField;
     const url = this.hass.hassUrl(`/api/webhook/${inputElement.value}`);
@@ -122,14 +205,22 @@ export class HaWebhookTrigger extends LitElement {
   }
 
   static styles = css`
+    .flex {
+      display: flex;
+    }
+
     ha-textfield {
-      display: block;
+      flex: 1;
     }
 
     ha-textfield > ha-icon-button {
       --mdc-icon-button-size: 24px;
       --mdc-icon-size: 18px;
     }
+
+    ha-button-menu {
+      padding-top: 4px;
+    }
   `;
 }
 
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index 885a06a343..2436d5b039 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -196,7 +196,7 @@ class HaBlueprintOverview extends LitElement {
         template: (_, blueprint: any) =>
           blueprint.error
             ? ""
-            : html` <ha-icon-button
+            : html`<ha-icon-button
                 .blueprint=${blueprint}
                 .label=${this.hass.localize(
                   "ui.panel.config.blueprint.overview.delete_blueprint"
diff --git a/src/panels/config/cloud/account/cloud-account.ts b/src/panels/config/cloud/account/cloud-account.ts
index fdd3e20689..2be0ccffbd 100644
--- a/src/panels/config/cloud/account/cloud-account.ts
+++ b/src/panels/config/cloud/account/cloud-account.ts
@@ -7,9 +7,9 @@ import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import { debounce } from "../../../../common/util/debounce";
-import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-card";
+import "../../../../components/ha-tip";
 import {
   cloudLogout,
   CloudStatusLoggedIn,
@@ -22,8 +22,6 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
-import "./cloud-alexa-pref";
-import "./cloud-google-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
@@ -185,17 +183,13 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
               dir=${this._rtlDirection}
             ></cloud-tts-pref>
 
-            <cloud-alexa-pref
-              .hass=${this.hass}
-              .cloudStatus=${this.cloudStatus}
-              dir=${this._rtlDirection}
-            ></cloud-alexa-pref>
-
-            <cloud-google-pref
-              .hass=${this.hass}
-              .cloudStatus=${this.cloudStatus}
-              dir=${this._rtlDirection}
-            ></cloud-google-pref>
+            <ha-tip .hass=${this.hass}>
+              <a href="/config/voice-assistants">
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.account.tip_moved_voice_assistants"
+                )}
+              </a>
+            </ha-tip>
 
             <cloud-webhooks
               .hass=${this.hass}
diff --git a/src/panels/config/cloud/account/cloud-alexa-pref.ts b/src/panels/config/cloud/account/cloud-alexa-pref.ts
deleted file mode 100644
index bd26a20c78..0000000000
--- a/src/panels/config/cloud/account/cloud-alexa-pref.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import "@material/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-card";
-import "../../../../components/ha-settings-row";
-import "../../../../components/ha-switch";
-import type { HaSwitch } from "../../../../components/ha-switch";
-import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
-import type { HomeAssistant } from "../../../../types";
-
-export class CloudAlexaPref extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public cloudStatus?: CloudStatusLoggedIn;
-
-  protected render() {
-    if (!this.cloudStatus) {
-      return nothing;
-    }
-
-    const alexa_registered = this.cloudStatus.alexa_registered;
-    const { alexa_enabled, alexa_report_state } = this.cloudStatus!.prefs;
-
-    return html`
-      <ha-card
-        outlined
-        header=${this.hass!.localize(
-          "ui.panel.config.cloud.account.alexa.title"
-        )}
-      >
-        <div class="header-actions">
-          <a
-            href="https://www.nabucasa.com/config/amazon_alexa/"
-            target="_blank"
-            rel="noreferrer"
-            class="icon-link"
-          >
-            <ha-icon-button
-              .label=${this.hass.localize(
-                "ui.panel.config.cloud.account.alexa.link_learn_how_it_works"
-              )}
-              .path=${mdiHelpCircle}
-            ></ha-icon-button>
-          </a>
-          <ha-switch
-            .checked=${alexa_enabled}
-            @change=${this._enabledToggleChanged}
-          ></ha-switch>
-        </div>
-        <div class="card-content">
-          <p>
-            ${this.hass!.localize("ui.panel.config.cloud.account.alexa.info")}
-          </p>
-          ${!alexa_enabled
-            ? ""
-            : !alexa_registered
-            ? html`
-                <ha-alert
-                  .title=${this.hass.localize(
-                    "ui.panel.config.cloud.account.alexa.not_configured_title"
-                  )}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.alexa.not_configured_text"
-                  )}
-
-                  <ul>
-                    <li>
-                      <a
-                        href="https://skills-store.amazon.com/deeplink/dp/B0772J1QKB?deviceType=app"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        ${this.hass!.localize(
-                          "ui.panel.config.cloud.account.alexa.enable_ha_skill"
-                        )}
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://www.nabucasa.com/config/amazon_alexa/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        ${this.hass!.localize(
-                          "ui.panel.config.cloud.account.alexa.config_documentation"
-                        )}
-                      </a>
-                    </li>
-                  </ul>
-                </ha-alert>
-              `
-            : html`
-                <ha-settings-row>
-                  <span slot="heading">
-                    ${this.hass!.localize(
-                      "ui.panel.config.cloud.account.alexa.enable_state_reporting"
-                    )}
-                  </span>
-                  <span slot="description">
-                    ${this.hass!.localize(
-                      "ui.panel.config.cloud.account.alexa.info_state_reporting"
-                    )}
-                  </span>
-                  <ha-switch
-                    .checked=${alexa_report_state}
-                    @change=${this._reportToggleChanged}
-                  ></ha-switch>
-                </ha-settings-row>
-              `}
-        </div>
-        <div class="card-actions">
-          <a href="/config/cloud/alexa">
-            <mwc-button
-              >${this.hass!.localize(
-                "ui.panel.config.cloud.account.alexa.manage_entities"
-              )}</mwc-button
-            >
-          </a>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private async _enabledToggleChanged(ev) {
-    const toggle = ev.target as HaSwitch;
-    try {
-      await updateCloudPref(this.hass!, { alexa_enabled: toggle.checked! });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err: any) {
-      toggle.checked = !toggle.checked;
-    }
-  }
-
-  private async _reportToggleChanged(ev) {
-    const toggle = ev.target as HaSwitch;
-    try {
-      await updateCloudPref(this.hass!, {
-        alexa_report_state: toggle.checked!,
-      });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err: any) {
-      alert(
-        `${this.hass!.localize(
-          "ui.panel.config.cloud.account.alexa.state_reporting_error",
-          "enable_disable",
-          this.hass!.localize(
-            toggle.checked
-              ? "ui.panel.config.cloud.account.alexa.enable"
-              : "ui.panel.config.cloud.account.alexa.disable"
-          )
-        )} ${err.message}`
-      );
-      toggle.checked = !toggle.checked;
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      a {
-        color: var(--primary-color);
-      }
-      ha-settings-row {
-        padding: 0;
-      }
-      .header-actions {
-        position: absolute;
-        right: 24px;
-        top: 24px;
-        display: flex;
-        flex-direction: row;
-      }
-      :host([dir="rtl"]) .header-actions {
-        right: auto;
-        left: 24px;
-      }
-      .header-actions .icon-link {
-        margin-top: -16px;
-        margin-inline-end: 8px;
-        margin-right: 8px;
-        direction: var(--direction);
-        color: var(--secondary-text-color);
-      }
-      .card-actions {
-        display: flex;
-      }
-      .card-actions a {
-        text-decoration: none;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "cloud-alexa-pref": CloudAlexaPref;
-  }
-}
-
-customElements.define("cloud-alexa-pref", CloudAlexaPref);
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
deleted file mode 100644
index 675e432eb8..0000000000
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-import "@material/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { property } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-card";
-import "../../../../components/ha-settings-row";
-import type { HaSwitch } from "../../../../components/ha-switch";
-import "../../../../components/ha-textfield";
-import type { HaTextField } from "../../../../components/ha-textfield";
-import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
-import type { HomeAssistant } from "../../../../types";
-import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
-
-export class CloudGooglePref extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
-
-  protected render() {
-    if (!this.cloudStatus) {
-      return nothing;
-    }
-
-    const google_registered = this.cloudStatus.google_registered;
-    const { google_enabled, google_report_state, google_secure_devices_pin } =
-      this.cloudStatus.prefs;
-
-    return html`
-      <ha-card
-        outlined
-        header=${this.hass.localize(
-          "ui.panel.config.cloud.account.google.title"
-        )}
-      >
-        <div class="header-actions">
-          <a
-            href="https://www.nabucasa.com/config/google_assistant/"
-            target="_blank"
-            rel="noreferrer"
-            class="icon-link"
-          >
-            <ha-icon-button
-              .label=${this.hass.localize(
-                "ui.panel.config.cloud.account.google.link_learn_how_it_works"
-              )}
-              .path=${mdiHelpCircle}
-            ></ha-icon-button>
-          </a>
-          <ha-switch
-            .checked=${google_enabled}
-            @change=${this._enabledToggleChanged}
-          ></ha-switch>
-        </div>
-        <div class="card-content">
-          <p>
-            ${this.hass.localize("ui.panel.config.cloud.account.google.info")}
-          </p>
-          ${!google_enabled
-            ? ""
-            : !google_registered
-            ? html`
-                <ha-alert
-                  .title=${this.hass.localize(
-                    "ui.panel.config.cloud.account.google.not_configured_title"
-                  )}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.cloud.account.google.not_configured_text"
-                  )}
-
-                  <ul>
-                    <li>
-                      <a
-                        href="https://assistant.google.com/services/a/uid/00000091fd5fb875?hl=en-US"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        ${this.hass.localize(
-                          "ui.panel.config.cloud.account.google.enable_ha_skill"
-                        )}
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://www.nabucasa.com/config/google_assistant/"
-                        target="_blank"
-                        rel="noreferrer"
-                      >
-                        ${this.hass.localize(
-                          "ui.panel.config.cloud.account.google.config_documentation"
-                        )}
-                      </a>
-                    </li>
-                  </ul>
-                </ha-alert>
-              `
-            : html`
-                ${this.cloudStatus.http_use_ssl
-                  ? html`
-                      <ha-alert
-                        alert-type="warning"
-                        .title=${this.hass.localize(
-                          "ui.panel.config.cloud.account.google.http_use_ssl_warning_title"
-                        )}
-                      >
-                        ${this.hass.localize(
-                          "ui.panel.config.cloud.account.google.http_use_ssl_warning_text"
-                        )}
-                        <a
-                          href="https://www.nabucasa.com/config/google_assistant/#local-communication"
-                          target="_blank"
-                          rel="noreferrer"
-                          >${this.hass.localize(
-                            "ui.panel.config.common.learn_more"
-                          )}</a
-                        >
-                      </ha-alert>
-                    `
-                  : ""}
-
-                <ha-settings-row>
-                  <span slot="heading">
-                    ${this.hass!.localize(
-                      "ui.panel.config.cloud.account.google.enable_state_reporting"
-                    )}
-                  </span>
-                  <span slot="description">
-                    ${this.hass!.localize(
-                      "ui.panel.config.cloud.account.google.info_state_reporting"
-                    )}
-                  </span>
-                  <ha-switch
-                    .checked=${google_report_state}
-                    @change=${this._reportToggleChanged}
-                  ></ha-switch>
-                </ha-settings-row>
-
-                <ha-settings-row>
-                  <span slot="heading">
-                    ${this.hass.localize(
-                      "ui.panel.config.cloud.account.google.security_devices"
-                    )}
-                  </span>
-                  <span slot="description">
-                    ${this.hass.localize(
-                      "ui.panel.config.cloud.account.google.enter_pin_info"
-                    )}
-                  </span>
-                </ha-settings-row>
-
-                <ha-textfield
-                  id="google_secure_devices_pin"
-                  .label=${this.hass.localize(
-                    "ui.panel.config.cloud.account.google.devices_pin"
-                  )}
-                  .placeholder=${this.hass.localize(
-                    "ui.panel.config.cloud.account.google.enter_pin_hint"
-                  )}
-                  .value=${google_secure_devices_pin || ""}
-                  @change=${this._pinChanged}
-                ></ha-textfield>
-              `}
-        </div>
-        <div class="card-actions">
-          <a href="/config/cloud/google-assistant">
-            <mwc-button>
-              ${this.hass.localize(
-                "ui.panel.config.cloud.account.google.manage_entities"
-              )}
-            </mwc-button>
-          </a>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  private async _enabledToggleChanged(ev) {
-    const toggle = ev.target as HaSwitch;
-    try {
-      await updateCloudPref(this.hass, { google_enabled: toggle.checked! });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err: any) {
-      toggle.checked = !toggle.checked;
-    }
-  }
-
-  private async _reportToggleChanged(ev) {
-    const toggle = ev.target as HaSwitch;
-    try {
-      await updateCloudPref(this.hass, {
-        google_report_state: toggle.checked!,
-      });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err: any) {
-      alert(
-        `Unable to ${toggle.checked ? "enable" : "disable"} report state. ${
-          err.message
-        }`
-      );
-      toggle.checked = !toggle.checked;
-    }
-  }
-
-  private async _pinChanged(ev) {
-    const input = ev.target as HaTextField;
-    try {
-      await updateCloudPref(this.hass, {
-        [input.id]: input.value || null,
-      });
-      showSaveSuccessToast(this, this.hass);
-      fireEvent(this, "ha-refresh-cloud-status");
-    } catch (err: any) {
-      alert(
-        `${this.hass.localize(
-          "ui.panel.config.cloud.account.google.enter_pin_error"
-        )} ${err.message}`
-      );
-      input.value = this.cloudStatus!.prefs.google_secure_devices_pin || "";
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      a {
-        color: var(--primary-color);
-      }
-      .header-actions {
-        position: absolute;
-        right: 24px;
-        top: 24px;
-        display: flex;
-        flex-direction: row;
-      }
-      :host([dir="rtl"]) .header-actions {
-        right: auto;
-        left: 24px;
-      }
-      .header-actions .icon-link {
-        margin-top: -16px;
-        margin-inline-end: 8px;
-        margin-right: 8px;
-        direction: var(--direction);
-        color: var(--secondary-text-color);
-      }
-      ha-settings-row {
-        padding: 0;
-      }
-      ha-textfield {
-        width: 250px;
-        display: block;
-        margin-top: 8px;
-      }
-      .card-actions {
-        display: flex;
-      }
-      .card-actions a {
-        text-decoration: none;
-      }
-      .warning {
-        color: var(--error-color);
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "cloud-google-pref": CloudGooglePref;
-  }
-}
-
-customElements.define("cloud-google-pref", CloudGooglePref);
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index 114bc0cbdf..d9ac6bd89c 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -31,10 +31,14 @@ export class CloudRemotePref extends LitElement {
 
     const { remote_enabled } = this.cloudStatus.prefs;
 
-    const { remote_connected, remote_domain, remote_certificate } =
-      this.cloudStatus;
+    const {
+      remote_connected,
+      remote_domain,
+      remote_certificate,
+      remote_certificate_status,
+    } = this.cloudStatus;
 
-    if (!remote_certificate) {
+    if (!remote_certificate || remote_certificate_status !== "ready") {
       return html`
         <ha-card
           outlined
@@ -43,9 +47,21 @@ export class CloudRemotePref extends LitElement {
           )}
         >
           <div class="preparing">
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.access_is_being_prepared"
-            )}
+            ${remote_certificate_status === "error"
+              ? this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.cerificate_error"
+                )
+              : remote_certificate_status === "loading"
+              ? this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.cerificate_loading"
+                )
+              : remote_certificate_status === "loaded"
+              ? this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.cerificate_loaded"
+                )
+              : this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.access_is_being_prepared"
+                )}
           </div>
         </ha-card>
       `;
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
deleted file mode 100644
index 6c8dbda913..0000000000
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ /dev/null
@@ -1,569 +0,0 @@
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
-import {
-  mdiCheckboxMarked,
-  mdiCheckboxMultipleMarked,
-  mdiCloseBox,
-  mdiCloseBoxMultiple,
-  mdiDotsVertical,
-  mdiFormatListChecks,
-  mdiSync,
-} from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import {
-  EntityFilter,
-  generateFilter,
-  isEmptyFilter,
-} from "../../../../common/entity/entity_filter";
-import { stringCompare } from "../../../../common/string/compare";
-import "../../../../components/entity/state-info";
-import "../../../../components/ha-button-menu";
-import "../../../../components/ha-card";
-import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-switch";
-import {
-  AlexaEntity,
-  fetchCloudAlexaEntities,
-  syncCloudAlexaEntities,
-} from "../../../../data/alexa";
-import {
-  AlexaEntityConfig,
-  CloudPreferences,
-  CloudStatusLoggedIn,
-  updateCloudAlexaEntityConfig,
-  updateCloudPref,
-} from "../../../../data/cloud";
-import { EntityRegistryEntry } from "../../../../data/entity_registry";
-import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
-import "../../../../layouts/hass-loading-screen";
-import "../../../../layouts/hass-subpage";
-import { haStyle } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-
-const DEFAULT_CONFIG_EXPOSE = true;
-
-@customElement("cloud-alexa")
-class CloudAlexa extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property()
-  public cloudStatus!: CloudStatusLoggedIn;
-
-  @property({ type: Boolean }) public narrow!: boolean;
-
-  @state() private _entities?: AlexaEntity[];
-
-  @state() private _syncing = false;
-
-  @state()
-  private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {};
-
-  @state()
-  private _entityCategories?: Record<
-    string,
-    EntityRegistryEntry["entity_category"]
-  >;
-
-  private _popstateSyncAttached = false;
-
-  private _popstateReloadStatusAttached = false;
-
-  private _isInitialExposed?: Set<string>;
-
-  private _getEntityFilterFunc = memoizeOne((filter: EntityFilter) =>
-    generateFilter(
-      filter.include_domains,
-      filter.include_entities,
-      filter.exclude_domains,
-      filter.exclude_entities
-    )
-  );
-
-  protected render(): TemplateResult {
-    if (this._entities === undefined || this._entityCategories === undefined) {
-      return html` <hass-loading-screen></hass-loading-screen> `;
-    }
-    const emptyFilter = isEmptyFilter(this.cloudStatus.alexa_entities);
-    const filterFunc = this._getEntityFilterFunc(
-      this.cloudStatus.alexa_entities
-    );
-
-    // We will only generate `isInitialExposed` during first render.
-    // On each subsequent render we will use the same set so that cards
-    // will not jump around when we change the exposed setting.
-    const showInExposed = this._isInitialExposed || new Set();
-    const trackExposed = this._isInitialExposed === undefined;
-
-    let selected = 0;
-
-    // On first render we decide which cards show in which category.
-    // That way cards won't jump around when changing values.
-    const exposedCards: TemplateResult[] = [];
-    const notExposedCards: TemplateResult[] = [];
-
-    this._entities.forEach((entity) => {
-      const stateObj = this.hass.states[entity.entity_id];
-      const config = this._entityConfigs[entity.entity_id] || {
-        should_expose: null,
-      };
-      const isExposed = emptyFilter
-        ? this._configIsExposed(
-            entity.entity_id,
-            config,
-            this._entityCategories![entity.entity_id]
-          )
-        : filterFunc(entity.entity_id);
-      const isDomainExposed = emptyFilter
-        ? this._configIsDomainExposed(
-            entity.entity_id,
-            this._entityCategories![entity.entity_id]
-          )
-        : filterFunc(entity.entity_id);
-      if (isExposed) {
-        selected++;
-
-        if (trackExposed) {
-          showInExposed.add(entity.entity_id);
-        }
-      }
-
-      const target = showInExposed.has(entity.entity_id)
-        ? exposedCards
-        : notExposedCards;
-
-      const iconButton = html`<ha-icon-button
-        slot="trigger"
-        class=${classMap({
-          exposed: isExposed!,
-          "not-exposed": !isExposed,
-        })}
-        .disabled=${!emptyFilter}
-        .label=${this.hass!.localize("ui.panel.config.cloud.alexa.expose")}
-        .path=${config.should_expose !== null
-          ? isExposed
-            ? mdiCheckboxMarked
-            : mdiCloseBox
-          : isDomainExposed
-          ? mdiCheckboxMultipleMarked
-          : mdiCloseBoxMultiple}
-      ></ha-icon-button>`;
-
-      target.push(html`
-        <ha-card outlined>
-          <div class="card-content">
-            <div class="top-line">
-              <state-info
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                @click=${this._showMoreInfo}
-              >
-              </state-info>
-              ${!emptyFilter
-                ? html`${iconButton}`
-                : html`<ha-button-menu
-                    .entityId=${stateObj.entity_id}
-                    @action=${this._exposeChanged}
-                  >
-                    ${iconButton}
-                    <mwc-list-item hasMeta>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.alexa.expose_entity"
-                      )}
-                      <ha-svg-icon
-                        class="exposed"
-                        slot="meta"
-                        .path=${mdiCheckboxMarked}
-                      ></ha-svg-icon>
-                    </mwc-list-item>
-                    <mwc-list-item hasMeta>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.alexa.dont_expose_entity"
-                      )}
-                      <ha-svg-icon
-                        class="not-exposed"
-                        slot="meta"
-                        .path=${mdiCloseBox}
-                      ></ha-svg-icon>
-                    </mwc-list-item>
-                    <mwc-list-item hasMeta>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.alexa.follow_domain"
-                      )}
-                      <ha-svg-icon
-                        class=${classMap({
-                          exposed: isDomainExposed,
-                          "not-exposed": !isDomainExposed,
-                        })}
-                        slot="meta"
-                        .path=${isDomainExposed
-                          ? mdiCheckboxMultipleMarked
-                          : mdiCloseBoxMultiple}
-                      ></ha-svg-icon>
-                    </mwc-list-item>
-                  </ha-button-menu>`}
-            </div>
-          </div>
-        </ha-card>
-      `);
-    });
-
-    if (trackExposed) {
-      this._isInitialExposed = showInExposed;
-    }
-
-    return html`
-      <hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .header=${this.hass!.localize("ui.panel.config.cloud.alexa.title")}
-      >
-        <ha-button-menu slot="toolbar-icon">
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${!emptyFilter}
-            @click=${this._openDomainToggler}
-          >
-            ${this.hass.localize("ui.panel.config.cloud.alexa.manage_defaults")}
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mdiFormatListChecks}
-            ></ha-svg-icon>
-          </mwc-list-item>
-
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${this._syncing}
-            @click=${this._handleSync}
-          >
-            ${this.hass.localize("ui.panel.config.cloud.alexa.sync_entities")}
-            <ha-svg-icon slot="graphic" .path=${mdiSync}></ha-svg-icon>
-          </mwc-list-item>
-        </ha-button-menu>
-        ${!emptyFilter
-          ? html`
-              <div class="banner">
-                ${this.hass!.localize("ui.panel.config.cloud.alexa.banner")}
-              </div>
-            `
-          : ""}
-        ${exposedCards.length > 0
-          ? html`
-              <div class="header">
-                <h3>
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.alexa.exposed_entities"
-                  )}
-                </h3>
-                ${!this.narrow
-                  ? this.hass!.localize(
-                      "ui.panel.config.cloud.alexa.exposed",
-                      "selected",
-                      selected
-                    )
-                  : selected}
-              </div>
-              <div class="content">${exposedCards}</div>
-            `
-          : ""}
-        ${notExposedCards.length > 0
-          ? html`
-              <div class="header second">
-                <h3>
-                  ${this.hass!.localize(
-                    "ui.panel.config.cloud.alexa.not_exposed_entities"
-                  )}
-                </h3>
-                ${!this.narrow
-                  ? this.hass!.localize(
-                      "ui.panel.config.cloud.alexa.not_exposed",
-                      "selected",
-                      this._entities.length - selected
-                    )
-                  : this._entities.length - selected}
-              </div>
-              <div class="content">${notExposedCards}</div>
-            `
-          : ""}
-      </hass-subpage>
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this._fetchData();
-  }
-
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("cloudStatus")) {
-      this._entityConfigs = this.cloudStatus.prefs.alexa_entity_configs;
-    }
-    if (
-      changedProps.has("hass") &&
-      changedProps.get("hass")?.entities !== this.hass.entities
-    ) {
-      const categories = {};
-
-      for (const entry of Object.values(this.hass.entities)) {
-        categories[entry.entity_id] = entry.entity_category;
-      }
-
-      this._entityCategories = categories;
-    }
-  }
-
-  private async _fetchData() {
-    const entities = await fetchCloudAlexaEntities(this.hass);
-    entities.sort((a, b) => {
-      const stateA = this.hass.states[a.entity_id];
-      const stateB = this.hass.states[b.entity_id];
-      return stringCompare(
-        stateA ? computeStateName(stateA) : a.entity_id,
-        stateB ? computeStateName(stateB) : b.entity_id,
-        this.hass.locale.language
-      );
-    });
-    this._entities = entities;
-  }
-
-  private _showMoreInfo(ev) {
-    const entityId = ev.currentTarget.stateObj.entity_id;
-    fireEvent(this, "hass-more-info", { entityId });
-  }
-
-  private _configIsDomainExposed(
-    entityId: string,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
-    const domain = computeDomain(entityId);
-    return this.cloudStatus.prefs.alexa_default_expose
-      ? !entityCategory &&
-          this.cloudStatus.prefs.alexa_default_expose.includes(domain)
-      : DEFAULT_CONFIG_EXPOSE;
-  }
-
-  private _configIsExposed(
-    entityId: string,
-    config: AlexaEntityConfig,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
-    return (
-      config.should_expose ??
-      this._configIsDomainExposed(entityId, entityCategory)
-    );
-  }
-
-  private async _exposeChanged(ev: CustomEvent<ActionDetail>) {
-    const entityId = (ev.currentTarget as any).entityId;
-    let newVal: boolean | null = null;
-    switch (ev.detail.index) {
-      case 0:
-        newVal = true;
-        break;
-      case 1:
-        newVal = false;
-        break;
-      case 2:
-        newVal = null;
-        break;
-    }
-    await this._updateExposed(entityId, newVal);
-  }
-
-  private async _updateExposed(entityId: string, newExposed: boolean | null) {
-    await this._updateConfig(entityId, {
-      should_expose: newExposed,
-    });
-    this._ensureEntitySync();
-  }
-
-  private async _updateConfig(entityId: string, values: AlexaEntityConfig) {
-    const updatedConfig = await updateCloudAlexaEntityConfig(
-      this.hass,
-      entityId,
-      values
-    );
-    this._entityConfigs = {
-      ...this._entityConfigs,
-      [entityId]: updatedConfig,
-    };
-    this._ensureStatusReload();
-  }
-
-  private _openDomainToggler() {
-    showDomainTogglerDialog(this, {
-      title: this.hass!.localize("ui.panel.config.cloud.alexa.manage_defaults"),
-      description: this.hass!.localize(
-        "ui.panel.config.cloud.alexa.manage_defaults_dialog_description"
-      ),
-      domains: this._entities!.map((entity) =>
-        computeDomain(entity.entity_id)
-      ).filter((value, idx, self) => self.indexOf(value) === idx),
-      exposedDomains: this.cloudStatus.prefs.alexa_default_expose,
-      toggleDomain: (domain, expose) => {
-        this._updateDomainExposed(domain, expose);
-      },
-      resetDomain: (domain) => {
-        this._entities!.forEach((entity) => {
-          if (computeDomain(entity.entity_id) === domain) {
-            this._updateExposed(entity.entity_id, null);
-          }
-        });
-      },
-    });
-  }
-
-  private async _handleSync() {
-    this._syncing = true;
-    try {
-      await syncCloudAlexaEntities(this.hass!);
-    } catch (err: any) {
-      alert(
-        `${this.hass!.localize(
-          "ui.panel.config.cloud.alexa.sync_entities_error"
-        )} ${err.body.message}`
-      );
-    } finally {
-      this._syncing = false;
-    }
-  }
-
-  private async _updateDomainExposed(domain: string, expose: boolean) {
-    const defaultExpose =
-      this.cloudStatus.prefs.alexa_default_expose ||
-      this._entities!.map((entity) => computeDomain(entity.entity_id)).filter(
-        (value, idx, self) => self.indexOf(value) === idx
-      );
-
-    if (
-      (expose && defaultExpose.includes(domain)) ||
-      (!expose && !defaultExpose.includes(domain))
-    ) {
-      return;
-    }
-
-    if (expose) {
-      defaultExpose.push(domain);
-    } else {
-      defaultExpose.splice(defaultExpose.indexOf(domain), 1);
-    }
-
-    await updateCloudPref(this.hass!, {
-      alexa_default_expose: defaultExpose,
-    });
-    fireEvent(this, "ha-refresh-cloud-status");
-  }
-
-  private _ensureStatusReload() {
-    if (this._popstateReloadStatusAttached) {
-      return;
-    }
-    this._popstateReloadStatusAttached = true;
-    // Cache parent because by the time popstate happens,
-    // this element is detached
-    const parent = this.parentElement!;
-    window.addEventListener(
-      "popstate",
-      () => fireEvent(parent, "ha-refresh-cloud-status"),
-      { once: true }
-    );
-  }
-
-  private _ensureEntitySync() {
-    if (this._popstateSyncAttached) {
-      return;
-    }
-    this._popstateSyncAttached = true;
-    // Cache parent because by the time popstate happens,
-    // this element is detached
-    window.addEventListener(
-      "popstate",
-      () => {
-        // We don't have anything yet.
-      },
-      { once: true }
-    );
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        mwc-list-item > [slot="meta"] {
-          margin-left: 4px;
-        }
-        .banner {
-          color: var(--primary-text-color);
-          background-color: var(
-            --ha-card-background,
-            var(--card-background-color, white)
-          );
-          padding: 16px 8px;
-          text-align: center;
-        }
-        .content {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-          grid-gap: 8px 8px;
-          padding: 8px;
-        }
-        .card-content {
-          padding-bottom: 12px;
-        }
-        state-info {
-          cursor: pointer;
-          height: 40px;
-        }
-        ha-switch {
-          padding: 8px 0;
-        }
-        .top-line {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-        .header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 16px;
-          border-bottom: 1px solid var(--divider-color);
-          background: var(--app-header-background-color);
-        }
-        .header.second {
-          border-top: 1px solid var(--divider-color);
-        }
-        .exposed {
-          color: var(--success-color);
-        }
-        .not-exposed {
-          color: var(--error-color);
-        }
-        @media all and (max-width: 450px) {
-          ha-card {
-            max-width: 100%;
-          }
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "cloud-alexa": CloudAlexa;
-  }
-}
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
deleted file mode 100644
index a2b4dada34..0000000000
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ /dev/null
@@ -1,727 +0,0 @@
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
-import {
-  mdiCheckboxMarked,
-  mdiCheckboxMultipleMarked,
-  mdiCloseBox,
-  mdiCloseBoxMultiple,
-  mdiDotsVertical,
-  mdiFormatListChecks,
-  mdiSync,
-} from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeDomain } from "../../../../common/entity/compute_domain";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
-import {
-  EntityFilter,
-  generateFilter,
-  isEmptyFilter,
-} from "../../../../common/entity/entity_filter";
-import { stringCompare } from "../../../../common/string/compare";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
-import "../../../../components/entity/state-info";
-import "../../../../components/ha-button-menu";
-import "../../../../components/ha-card";
-import "../../../../components/ha-formfield";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-switch";
-import type { HaSwitch } from "../../../../components/ha-switch";
-import {
-  CloudPreferences,
-  CloudStatusLoggedIn,
-  cloudSyncGoogleAssistant,
-  GoogleEntityConfig,
-  updateCloudGoogleEntityConfig,
-  updateCloudPref,
-} from "../../../../data/cloud";
-import {
-  EntityRegistryEntry,
-  ExtEntityRegistryEntry,
-  getExtendedEntityRegistryEntries,
-  updateEntityRegistryEntry,
-} from "../../../../data/entity_registry";
-import {
-  fetchCloudGoogleEntities,
-  GoogleEntity,
-} from "../../../../data/google_assistant";
-import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
-import "../../../../layouts/hass-loading-screen";
-import "../../../../layouts/hass-subpage";
-import { buttonLinkStyle, haStyle } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import { showToast } from "../../../../util/toast";
-import { showAliasesDialog } from "../../../../dialogs/aliases/show-dialog-aliases";
-
-const DEFAULT_CONFIG_EXPOSE = true;
-
-@customElement("cloud-google-assistant")
-class CloudGoogleAssistant extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public cloudStatus!: CloudStatusLoggedIn;
-
-  @property() public narrow!: boolean;
-
-  @state() private _entities?: GoogleEntity[];
-
-  @state() private _entries?: { [id: string]: ExtEntityRegistryEntry };
-
-  @state() private _syncing = false;
-
-  @state()
-  private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
-
-  @state()
-  private _entityCategories?: Record<
-    string,
-    EntityRegistryEntry["entity_category"]
-  >;
-
-  private _popstateSyncAttached = false;
-
-  private _popstateReloadStatusAttached = false;
-
-  private _isInitialExposed?: Set<string>;
-
-  private _getEntityFilterFunc = memoizeOne((filter: EntityFilter) =>
-    generateFilter(
-      filter.include_domains,
-      filter.include_entities,
-      filter.exclude_domains,
-      filter.exclude_entities
-    )
-  );
-
-  protected render(): TemplateResult {
-    if (this._entities === undefined || this._entityCategories === undefined) {
-      return html` <hass-loading-screen></hass-loading-screen> `;
-    }
-    const emptyFilter = isEmptyFilter(this.cloudStatus.google_entities);
-    const filterFunc = this._getEntityFilterFunc(
-      this.cloudStatus.google_entities
-    );
-    const dir = computeRTLDirection(this.hass!);
-
-    // We will only generate `isInitialExposed` during first render.
-    // On each subsequent render we will use the same set so that cards
-    // will not jump around when we change the exposed setting.
-    const showInExposed = this._isInitialExposed || new Set();
-    const trackExposed = this._isInitialExposed === undefined;
-
-    let selected = 0;
-
-    // On first render we decide which cards show in which category.
-    // That way cards won't jump around when changing values.
-    const exposedCards: TemplateResult[] = [];
-    const notExposedCards: TemplateResult[] = [];
-
-    this._entities.forEach((entity) => {
-      const stateObj = this.hass.states[entity.entity_id];
-      const config = this._entityConfigs[entity.entity_id] || {
-        should_expose: null,
-      };
-      const isExposed = emptyFilter
-        ? this._configIsExposed(
-            entity.entity_id,
-            config,
-            this._entityCategories![entity.entity_id]
-          )
-        : filterFunc(entity.entity_id);
-      const isDomainExposed = emptyFilter
-        ? this._configIsDomainExposed(
-            entity.entity_id,
-            this._entityCategories![entity.entity_id]
-          )
-        : filterFunc(entity.entity_id);
-      if (isExposed) {
-        selected++;
-
-        if (trackExposed) {
-          showInExposed.add(entity.entity_id);
-        }
-      }
-
-      const target = showInExposed.has(entity.entity_id)
-        ? exposedCards
-        : notExposedCards;
-
-      const iconButton = html`<ha-icon-button
-        slot="trigger"
-        class=${classMap({
-          exposed: isExposed!,
-          "not-exposed": !isExposed,
-        })}
-        .disabled=${!emptyFilter}
-        .label=${this.hass!.localize("ui.panel.config.cloud.google.expose")}
-        .path=${config.should_expose !== null
-          ? isExposed
-            ? mdiCheckboxMarked
-            : mdiCloseBox
-          : isDomainExposed
-          ? mdiCheckboxMultipleMarked
-          : mdiCloseBoxMultiple}
-      ></ha-icon-button>`;
-
-      const aliases = this._entries?.[entity.entity_id]?.aliases;
-
-      target.push(html`
-        <ha-card outlined>
-          <div class="card-content">
-            <div class="top-line">
-              <state-info
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-                secondary-line
-                @click=${this._showMoreInfo}
-              >
-                ${aliases
-                  ? html`
-                      <span>
-                        ${aliases.length > 0
-                          ? [...aliases]
-                              .sort((a, b) =>
-                                stringCompare(a, b, this.hass.locale.language)
-                              )
-                              .join(", ")
-                          : this.hass.localize(
-                              "ui.panel.config.cloud.google.no_aliases"
-                            )}
-                      </span>
-                      <br />
-                      <button
-                        class="link"
-                        .entityId=${entity.entity_id}
-                        @click=${this._openAliasesSettings}
-                      >
-                        ${this.hass.localize(
-                          `ui.panel.config.cloud.google.${
-                            aliases.length > 0
-                              ? "manage_aliases"
-                              : "add_aliases"
-                          }`
-                        )}
-                      </button>
-                    `
-                  : html`
-                      <span>
-                        ${this.hass.localize(
-                          "ui.panel.config.cloud.google.aliases_not_available"
-                        )}
-                      </span>
-                      <br />
-                      <button
-                        class="link"
-                        .stateObj=${stateObj}
-                        @click=${this._showMoreInfoSettings}
-                      >
-                        ${this.hass.localize(
-                          "ui.panel.config.cloud.google.aliases_not_available_learn_more"
-                        )}
-                      </button>
-                    `}
-              </state-info>
-              ${!emptyFilter
-                ? html`${iconButton}`
-                : html`<ha-button-menu
-                    .entityId=${entity.entity_id}
-                    @action=${this._exposeChanged}
-                  >
-                    ${iconButton}
-                    <mwc-list-item hasMeta>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.google.expose_entity"
-                      )}
-                      <ha-svg-icon
-                        class="exposed"
-                        slot="meta"
-                        .path=${mdiCheckboxMarked}
-                      ></ha-svg-icon>
-                    </mwc-list-item>
-                    <mwc-list-item hasMeta>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.google.dont_expose_entity"
-                      )}
-                      <ha-svg-icon
-                        class="not-exposed"
-                        slot="meta"
-                        .path=${mdiCloseBox}
-                      ></ha-svg-icon>
-                    </mwc-list-item>
-                    <mwc-list-item hasMeta>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.google.follow_domain"
-                      )}
-                      <ha-svg-icon
-                        class=${classMap({
-                          exposed: isDomainExposed,
-                          "not-exposed": !isDomainExposed,
-                        })}
-                        slot="meta"
-                        .path=${isDomainExposed
-                          ? mdiCheckboxMultipleMarked
-                          : mdiCloseBoxMultiple}
-                      ></ha-svg-icon>
-                    </mwc-list-item>
-                  </ha-button-menu>`}
-            </div>
-            ${entity.might_2fa
-              ? html`
-                  <div>
-                    <ha-formfield
-                      .label=${this.hass!.localize(
-                        "ui.panel.config.cloud.google.disable_2FA"
-                      )}
-                      .dir=${dir}
-                    >
-                      <ha-switch
-                        .entityId=${entity.entity_id}
-                        .checked=${Boolean(config.disable_2fa)}
-                        @change=${this._disable2FAChanged}
-                      ></ha-switch>
-                    </ha-formfield>
-                  </div>
-                `
-              : ""}
-          </div>
-        </ha-card>
-      `);
-    });
-
-    if (trackExposed) {
-      this._isInitialExposed = showInExposed;
-    }
-
-    return html`
-      <hass-subpage
-        .hass=${this.hass}
-        .header=${this.hass!.localize("ui.panel.config.cloud.google.title")}
-        .narrow=${this.narrow}>
-        <ha-button-menu  slot="toolbar-icon">
-          <ha-icon-button
-            slot="trigger"
-            .label=${this.hass.localize("ui.common.menu")}
-            .path=${mdiDotsVertical}
-          ></ha-icon-button>
-
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${!emptyFilter}
-            @click=${this._openDomainToggler}
-          >
-            ${this.hass.localize(
-              "ui.panel.config.cloud.google.manage_defaults"
-            )}
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mdiFormatListChecks}
-            ></ha-svg-icon>
-          </mwc-list-item>
-
-          <mwc-list-item
-            graphic="icon"
-            .disabled=${this._syncing}
-            @click=${this._handleSync}
-          >
-          ${this.hass.localize("ui.panel.config.cloud.google.sync_entities")}
-            <ha-svg-icon
-              slot="graphic"
-              .path=${mdiSync}
-            ></ha-svg-icon>
-          </mwc-list-item>
-        </ha-button-menu>
-        ${
-          !emptyFilter
-            ? html`
-                <div class="banner">
-                  ${this.hass!.localize("ui.panel.config.cloud.google.banner")}
-                </div>
-              `
-            : ""
-        }
-          ${
-            exposedCards.length > 0
-              ? html`
-                  <div class="header">
-                    <h3>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.google.exposed_entities"
-                      )}
-                    </h3>
-                    ${!this.narrow
-                      ? this.hass!.localize(
-                          "ui.panel.config.cloud.google.exposed",
-                          "selected",
-                          selected
-                        )
-                      : selected}
-                  </div>
-                  <div class="content">${exposedCards}</div>
-                `
-              : ""
-          }
-          ${
-            notExposedCards.length > 0
-              ? html`
-                  <div class="header second">
-                    <h3>
-                      ${this.hass!.localize(
-                        "ui.panel.config.cloud.google.not_exposed_entities"
-                      )}
-                    </h3>
-                    ${!this.narrow
-                      ? this.hass!.localize(
-                          "ui.panel.config.cloud.google.not_exposed",
-                          "selected",
-                          this._entities.length - selected
-                        )
-                      : this._entities.length - selected}
-                  </div>
-                  <div class="content">${notExposedCards}</div>
-                `
-              : ""
-          }
-        </div>
-      </hass-subpage>
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this._fetchData();
-  }
-
-  protected updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("cloudStatus")) {
-      this._entityConfigs = this.cloudStatus.prefs.google_entity_configs;
-    }
-    if (
-      changedProps.has("hass") &&
-      changedProps.get("hass")?.entities !== this.hass.entities
-    ) {
-      const categories = {};
-
-      for (const entry of Object.values(this.hass.entities)) {
-        categories[entry.entity_id] = entry.entity_category;
-      }
-
-      this._entityCategories = categories;
-    }
-  }
-
-  private async _openAliasesSettings(ev) {
-    ev.stopPropagation();
-    const entityId = ev.target.entityId;
-    const entry = this._entries![entityId];
-    if (!entry) {
-      return;
-    }
-    const stateObj = this.hass.states[entityId];
-    const name = (stateObj && computeStateName(stateObj)) || entityId;
-
-    showAliasesDialog(this, {
-      name,
-      aliases: entry.aliases,
-      updateAliases: async (aliases: string[]) => {
-        const result = await updateEntityRegistryEntry(this.hass, entityId, {
-          aliases,
-        });
-        this._entries![entityId] = result.entity_entry;
-      },
-    });
-  }
-
-  private _configIsDomainExposed(
-    entityId: string,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
-    const domain = computeDomain(entityId);
-    return this.cloudStatus.prefs.google_default_expose
-      ? !entityCategory &&
-          this.cloudStatus.prefs.google_default_expose.includes(domain)
-      : DEFAULT_CONFIG_EXPOSE;
-  }
-
-  private _configIsExposed(
-    entityId: string,
-    config: GoogleEntityConfig,
-    entityCategory: EntityRegistryEntry["entity_category"] | undefined
-  ) {
-    return (
-      config.should_expose ??
-      this._configIsDomainExposed(entityId, entityCategory)
-    );
-  }
-
-  private async _fetchData() {
-    const entities = await fetchCloudGoogleEntities(this.hass);
-    this._entries = await getExtendedEntityRegistryEntries(
-      this.hass,
-      entities
-        .filter((ent) => this.hass.entities[ent.entity_id])
-        .map((e) => e.entity_id)
-    );
-
-    entities.sort((a, b) => {
-      const stateA = this.hass.states[a.entity_id];
-      const stateB = this.hass.states[b.entity_id];
-      return stringCompare(
-        stateA ? computeStateName(stateA) : a.entity_id,
-        stateB ? computeStateName(stateB) : b.entity_id,
-        this.hass.locale.language
-      );
-    });
-    this._entities = entities;
-  }
-
-  private _showMoreInfo(ev) {
-    const entityId = ev.currentTarget.stateObj.entity_id;
-    fireEvent(this, "hass-more-info", { entityId });
-  }
-
-  private _showMoreInfoSettings(ev) {
-    ev.stopPropagation();
-    const entityId = ev.currentTarget.stateObj.entity_id;
-    fireEvent(this, "hass-more-info", { entityId, view: "settings" });
-  }
-
-  private async _exposeChanged(ev: CustomEvent<ActionDetail>) {
-    const entityId = (ev.currentTarget as any).entityId;
-    let newVal: boolean | null = null;
-    switch (ev.detail.index) {
-      case 0:
-        newVal = true;
-        break;
-      case 1:
-        newVal = false;
-        break;
-      case 2:
-        newVal = null;
-        break;
-    }
-    await this._updateExposed(entityId, newVal);
-  }
-
-  private async _updateExposed(entityId: string, newExposed: boolean | null) {
-    await this._updateConfig(entityId, {
-      should_expose: newExposed,
-    });
-    if (this.cloudStatus.google_registered) {
-      this._ensureEntitySync();
-    }
-  }
-
-  private async _disable2FAChanged(ev: Event) {
-    const entityId = (ev.currentTarget as any).entityId;
-    const newDisable2FA = (ev.target as HaSwitch).checked;
-    const curDisable2FA = Boolean(
-      (this._entityConfigs[entityId] || {}).disable_2fa
-    );
-    if (newDisable2FA === curDisable2FA) {
-      return;
-    }
-    await this._updateConfig(entityId, {
-      disable_2fa: newDisable2FA,
-    });
-  }
-
-  private async _updateConfig(entityId: string, values: GoogleEntityConfig) {
-    const updatedConfig = await updateCloudGoogleEntityConfig(
-      this.hass,
-      entityId,
-      values
-    );
-    this._entityConfigs = {
-      ...this._entityConfigs,
-      [entityId]: updatedConfig,
-    };
-    this._ensureStatusReload();
-  }
-
-  private _openDomainToggler() {
-    showDomainTogglerDialog(this, {
-      title: this.hass!.localize(
-        "ui.panel.config.cloud.google.manage_defaults"
-      ),
-      description: this.hass!.localize(
-        "ui.panel.config.cloud.google.manage_defaults_dialog_description"
-      ),
-      domains: this._entities!.map((entity) =>
-        computeDomain(entity.entity_id)
-      ).filter((value, idx, self) => self.indexOf(value) === idx),
-      exposedDomains: this.cloudStatus.prefs.google_default_expose,
-      toggleDomain: (domain, expose) => {
-        this._updateDomainExposed(domain, expose);
-      },
-      resetDomain: (domain) => {
-        this._entities!.forEach((entity) => {
-          if (computeDomain(entity.entity_id) === domain) {
-            this._updateExposed(entity.entity_id, null);
-          }
-        });
-      },
-    });
-  }
-
-  private async _updateDomainExposed(domain: string, expose: boolean) {
-    const defaultExpose =
-      this.cloudStatus.prefs.google_default_expose ||
-      this._entities!.map((entity) => computeDomain(entity.entity_id)).filter(
-        (value, idx, self) => self.indexOf(value) === idx
-      );
-
-    if (
-      (expose && defaultExpose.includes(domain)) ||
-      (!expose && !defaultExpose.includes(domain))
-    ) {
-      return;
-    }
-
-    if (expose) {
-      defaultExpose.push(domain);
-    } else {
-      defaultExpose.splice(defaultExpose.indexOf(domain), 1);
-    }
-
-    await updateCloudPref(this.hass!, {
-      google_default_expose: defaultExpose,
-    });
-    fireEvent(this, "ha-refresh-cloud-status");
-  }
-
-  private _ensureStatusReload() {
-    if (this._popstateReloadStatusAttached) {
-      return;
-    }
-    this._popstateReloadStatusAttached = true;
-    // Cache parent because by the time popstate happens,
-    // this element is detached
-    const parent = this.parentElement!;
-    window.addEventListener(
-      "popstate",
-      () => fireEvent(parent, "ha-refresh-cloud-status"),
-      { once: true }
-    );
-  }
-
-  private async _handleSync() {
-    this._syncing = true;
-    try {
-      await cloudSyncGoogleAssistant(this.hass!);
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.hass.localize(
-          `ui.panel.config.cloud.google.${
-            err.status_code === 404
-              ? "not_configured_title"
-              : "sync_failed_title"
-          }`
-        ),
-        text: this.hass.localize(
-          `ui.panel.config.cloud.google.${
-            err.status_code === 404 ? "not_configured_text" : "sync_failed_text"
-          }`
-        ),
-      });
-      fireEvent(this, "ha-refresh-cloud-status");
-    } finally {
-      this._syncing = false;
-    }
-  }
-
-  private _ensureEntitySync() {
-    if (this._popstateSyncAttached) {
-      return;
-    }
-    this._popstateSyncAttached = true;
-    // Cache parent because by the time popstate happens,
-    // this element is detached
-    const parent = this.parentElement!;
-    window.addEventListener(
-      "popstate",
-      () => {
-        showToast(parent, {
-          message: this.hass!.localize(
-            "ui.panel.config.cloud.google.sync_to_google"
-          ),
-        });
-        cloudSyncGoogleAssistant(this.hass);
-      },
-      { once: true }
-    );
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      buttonLinkStyle,
-      css`
-        mwc-list-item > [slot="meta"] {
-          margin-left: 4px;
-        }
-        .banner {
-          color: var(--primary-text-color);
-          background-color: var(
-            --ha-card-background,
-            var(--card-background-color, white)
-          );
-          padding: 16px 8px;
-          text-align: center;
-        }
-        .content {
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-          grid-gap: 8px 8px;
-          padding: 8px;
-        }
-        .card-content {
-          padding-bottom: 12px;
-        }
-        state-info {
-          cursor: pointer;
-        }
-        ha-switch {
-          padding: 8px 0;
-        }
-        .top-line {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-        .header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0 16px;
-          border-bottom: 1px solid var(--divider-color);
-          background: var(--app-header-background-color);
-        }
-        .header.second {
-          border-top: 1px solid var(--divider-color);
-        }
-        .exposed {
-          color: var(--success-color);
-        }
-        .not-exposed {
-          color: var(--error-color);
-        }
-        @media all and (max-width: 450px) {
-          ha-card {
-            max-width: 100%;
-          }
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "cloud-google-assistant": CloudGoogleAssistant;
-  }
-}
diff --git a/src/panels/config/cloud/ha-config-cloud.ts b/src/panels/config/cloud/ha-config-cloud.ts
index 8fe5c0a085..e5ccd56148 100644
--- a/src/panels/config/cloud/ha-config-cloud.ts
+++ b/src/panels/config/cloud/ha-config-cloud.ts
@@ -56,14 +56,6 @@ class HaConfigCloud extends HassRouterPage {
       account: {
         tag: "cloud-account",
       },
-      "google-assistant": {
-        tag: "cloud-google-assistant",
-        load: () => import("./google-assistant/cloud-google-assistant"),
-      },
-      alexa: {
-        tag: "cloud-alexa",
-        load: () => import("./alexa/cloud-alexa"),
-      },
     },
   };
 
diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
index 36dcf84d39..cb26af168f 100644
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -12,12 +12,16 @@ import "../../../../components/ha-icon-next";
 import type { HaTextField } from "../../../../components/ha-textfield";
 import "../../../../components/ha-textfield";
 import { cloudLogin } from "../../../../data/cloud";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../resources/styles";
 import "../../../../styles/polymer-ha-style";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
+import { setAssistPipelinePreferred } from "../../../../data/assist_pipeline";
 
 @customElement("cloud-login")
 export class CloudLogin extends LitElement {
@@ -210,10 +214,24 @@ export class CloudLogin extends LitElement {
     this._requestInProgress = true;
 
     try {
-      await cloudLogin(this.hass, email, password);
+      const result = await cloudLogin(this.hass, email, password);
       fireEvent(this, "ha-refresh-cloud-status");
       this.email = "";
       this._password = "";
+      if (result.cloud_pipeline) {
+        if (
+          await showConfirmationDialog(this, {
+            title: this.hass.localize(
+              "ui.panel.config.cloud.login.cloud_pipeline_title"
+            ),
+            text: this.hass.localize(
+              "ui.panel.config.cloud.login.cloud_pipeline_text"
+            ),
+          })
+        ) {
+          setAssistPipelinePreferred(this.hass, result.cloud_pipeline);
+        }
+      }
     } catch (err: any) {
       const errCode = err && err.body && err.body.code;
       if (errCode === "PasswordChangeRequired") {
diff --git a/src/panels/config/core/ha-config-section-general.ts b/src/panels/config/core/ha-config-section-general.ts
index 31abfd8346..0d6e95dbc7 100644
--- a/src/panels/config/core/ha-config-section-general.ts
+++ b/src/panels/config/core/ha-config-section-general.ts
@@ -6,13 +6,16 @@ import memoizeOne from "memoize-one";
 import { UNIT_C } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { navigate } from "../../../common/navigate";
-import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import "../../../components/buttons/ha-progress-button";
 import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
 import { getCountryOptions } from "../../../components/country-datalist";
 import { getCurrencyOptions } from "../../../components/currency-datalist";
+import "../../../components/ha-alert";
 import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
+import type { HaCheckbox } from "../../../components/ha-checkbox";
 import "../../../components/ha-formfield";
+import "../../../components/ha-language-picker";
 import "../../../components/ha-radio";
 import type { HaRadio } from "../../../components/ha-radio";
 import "../../../components/ha-select";
@@ -22,13 +25,10 @@ import "../../../components/map/ha-locations-editor";
 import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import { SYMBOL_TO_ISO } from "../../../data/currency";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-alert";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
-import type { HaCheckbox } from "../../../components/ha-checkbox";
-import "../../../components/ha-checkbox";
 
 @customElement("ha-config-section-general")
 class HaConfigSectionGeneral extends LitElement {
@@ -54,8 +54,6 @@ class HaConfigSectionGeneral extends LitElement {
 
   @state() private _location?: [number, number];
 
-  @state() private _languages?: { value: string; label: string }[];
-
   @state() private _error?: string;
 
   @state() private _updateUnits?: boolean;
@@ -255,25 +253,19 @@ class HaConfigSectionGeneral extends LitElement {
                     </mwc-list-item>`
                 )}</ha-select
               >
-              <ha-select
+              <ha-language-picker
+                .hass=${this.hass}
+                nativeName
                 .label=${this.hass.localize(
                   "ui.panel.config.core.section.core.core_config.language"
                 )}
                 name="language"
-                fixedMenuPosition
-                naturalMenuWidth
-                .disabled=${disabled}
                 .value=${this._language}
+                .disabled=${disabled}
                 @closed=${stopPropagation}
-                @change=${this._handleChange}
-              >
-                ${this._languages?.map(
-                  ({ value, label }) =>
-                    html`<mwc-list-item .value=${value}
-                      >${label}</mwc-list-item
-                    >`
-                )}</ha-select
+                @value-changed=${this._handleLanguageChange}
               >
+              </ha-language-picker>
             </div>
             ${this.narrow
               ? html`
@@ -330,25 +322,10 @@ class HaConfigSectionGeneral extends LitElement {
     this._timeZone = this.hass.config.time_zone || "Etc/GMT";
     this._name = this.hass.config.location_name;
     this._updateUnits = true;
-    this._computeLanguages();
   }
 
-  private _computeLanguages() {
-    if (!this.hass.translationMetadata?.translations) {
-      return;
-    }
-    this._languages = Object.entries(this.hass.translationMetadata.translations)
-      .sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a[1].nativeName,
-          b[1].nativeName,
-          this.hass.locale.language
-        )
-      )
-      .map(([value, metaData]) => ({
-        value,
-        label: metaData.nativeName,
-      }));
+  private _handleLanguageChange(ev) {
+    this._language = ev.detail.value;
   }
 
   private _handleChange(ev) {
diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts
index 54a22a9988..9225670215 100644
--- a/src/panels/config/core/ha-config-system-navigation.ts
+++ b/src/panels/config/core/ha-config-system-navigation.ts
@@ -8,7 +8,6 @@ import { blankBeforePercent } from "../../../common/translations/blank_before_pe
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-navigation-list";
-import "../../../components/ha-tip";
 import { BackupContent, fetchBackupInfo } from "../../../data/backup";
 import { CloudStatus, fetchCloudStatus } from "../../../data/cloud";
 import { BOARD_NAMES, HardwareInfo } from "../../../data/hardware";
@@ -270,9 +269,6 @@ class HaConfigSystemNavigation extends LitElement {
         ha-navigation-list {
           --navigation-list-item-title-font-size: 16px;
         }
-        ha-tip {
-          margin-bottom: max(env(safe-area-inset-bottom), 8px);
-        }
       `,
     ];
   }
diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
index 7953416b7d..95659ca947 100644
--- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
+++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
@@ -3,8 +3,8 @@ import {
   CSSResultGroup,
   html,
   LitElement,
-  PropertyValues,
   nothing,
+  PropertyValues,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
@@ -28,8 +28,9 @@ import "../../../helpers/forms/ha-input_select-form";
 import "../../../helpers/forms/ha-input_text-form";
 import "../../../helpers/forms/ha-schedule-form";
 import "../../../helpers/forms/ha-timer-form";
-import "../../entity-registry-basic-editor";
-import type { HaEntityRegistryBasicEditor } from "../../entity-registry-basic-editor";
+import "../../../voice-assistants/entity-voice-settings";
+import "../../entity-registry-settings-editor";
+import type { EntityRegistrySettingsEditor } from "../../entity-registry-settings-editor";
 
 @customElement("entity-settings-helper-tab")
 export class EntityRegistrySettingsHelper extends LitElement {
@@ -45,8 +46,8 @@ export class EntityRegistrySettingsHelper extends LitElement {
 
   @state() private _componentLoaded?: boolean;
 
-  @query("ha-registry-basic-editor")
-  private _registryEditor?: HaEntityRegistryBasicEditor;
+  @query("entity-registry-settings-editor")
+  private _registryEditor?: EntityRegistrySettingsEditor;
 
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
@@ -75,7 +76,9 @@ export class EntityRegistrySettingsHelper extends LitElement {
     const stateObj = this.hass.states[this.entry.entity_id];
     return html`
       <div class="form">
-        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+        ${this._error
+          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+          : ""}
         ${!this._componentLoaded
           ? this.hass.localize(
               "ui.dialogs.helper_settings.platform_not_loaded",
@@ -93,10 +96,14 @@ export class EntityRegistrySettingsHelper extends LitElement {
                 })}
               </span>
             `}
-        <ha-registry-basic-editor
+        <entity-registry-settings-editor
           .hass=${this.hass}
           .entry=${this.entry}
-        ></ha-registry-basic-editor>
+          .disabled=${this._submitting}
+          @change=${this._entityRegistryChanged}
+          hideName
+          hideIcon
+        ></entity-registry-settings-editor>
       </div>
       <div class="buttons">
         <mwc-button
@@ -117,6 +124,10 @@ export class EntityRegistrySettingsHelper extends LitElement {
     `;
   }
 
+  private _entityRegistryChanged() {
+    this._error = undefined;
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     this._error = undefined;
     this._item = ev.detail.value;
@@ -137,7 +148,7 @@ export class EntityRegistrySettingsHelper extends LitElement {
           this._item
         );
       }
-      await this._registryEditor?.updateEntry();
+      await this._registryEditor!.updateEntry();
       fireEvent(this, "close-dialog");
     } catch (err: any) {
       this._error = err.message || "Unknown error";
diff --git a/src/panels/config/entities/entity-registry-basic-editor.ts b/src/panels/config/entities/entity-registry-basic-editor.ts
deleted file mode 100644
index e54798349f..0000000000
--- a/src/panels/config/entities/entity-registry-basic-editor.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-import "@material/mwc-formfield/mwc-formfield";
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import { mdiPencil } from "@mdi/js";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { css, html, LitElement, PropertyValues, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateName } from "../../../common/entity/compute_state_name";
-import { stringCompare } from "../../../common/string/compare";
-import "../../../components/ha-area-picker";
-import "../../../components/ha-expansion-panel";
-import "../../../components/ha-radio";
-import "../../../components/ha-switch";
-import "../../../components/ha-textfield";
-import {
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  EntityRegistryEntryUpdateParams,
-  ExtEntityRegistryEntry,
-  updateEntityRegistryEntry,
-} from "../../../data/entity_registry";
-import { showAliasesDialog } from "../../../dialogs/aliases/show-dialog-aliases";
-import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import type { HomeAssistant } from "../../../types";
-
-@customElement("ha-registry-basic-editor")
-export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public entry!: ExtEntityRegistryEntry;
-
-  @state() private _origEntityId!: string;
-
-  @state() private _entityId!: string;
-
-  @state() private _areaId?: string | null;
-
-  @state() private _disabledBy!: EntityRegistryEntry["disabled_by"];
-
-  @state() private _hiddenBy!: string | null;
-
-  private _deviceLookup?: Record<string, DeviceRegistryEntry>;
-
-  @state() private _device?: DeviceRegistryEntry;
-
-  @state() private _submitting = false;
-
-  private _handleAliasesClicked(ev: CustomEvent) {
-    if (ev.detail.index !== 0) return;
-    const stateObj = this.hass.states[this.entry.entity_id];
-    const name =
-      (stateObj && computeStateName(stateObj)) || this.entry.entity_id;
-
-    showAliasesDialog(this, {
-      name,
-      aliases: this.entry!.aliases,
-      updateAliases: async (aliases: string[]) => {
-        const result = await updateEntityRegistryEntry(
-          this.hass,
-          this.entry.entity_id,
-          { aliases }
-        );
-        fireEvent(this, "entity-entry-updated", result.entity_entry);
-      },
-    });
-  }
-
-  public async updateEntry(): Promise<void> {
-    this._submitting = true;
-    const params: Partial<EntityRegistryEntryUpdateParams> = {
-      new_entity_id: this._entityId.trim(),
-      area_id: this._areaId || null,
-    };
-    if (
-      this.entry.disabled_by !== this._disabledBy &&
-      (this._disabledBy === null || this._disabledBy === "user")
-    ) {
-      params.disabled_by = this._disabledBy;
-    }
-    if (
-      this.entry.hidden_by !== this._hiddenBy &&
-      (this._hiddenBy === null || this._hiddenBy === "user")
-    ) {
-      params.hidden_by = this._hiddenBy;
-    }
-    try {
-      const result = await updateEntityRegistryEntry(
-        this.hass!,
-        this._origEntityId,
-        params
-      );
-      if (result.require_restart) {
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
-          ),
-        });
-      }
-      if (result.reload_delay) {
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
-            "delay",
-            result.reload_delay
-          ),
-        });
-      }
-    } finally {
-      this._submitting = false;
-    }
-  }
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._deviceLookup = {};
-        for (const device of devices) {
-          this._deviceLookup[device.id] = device;
-        }
-        if (!this._device && this.entry.device_id) {
-          this._device = this._deviceLookup[this.entry.device_id];
-        }
-      }),
-    ];
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
-    if (!changedProperties.has("entry")) {
-      return;
-    }
-    if (this.entry) {
-      this._origEntityId = this.entry.entity_id;
-      this._entityId = this.entry.entity_id;
-      this._disabledBy = this.entry.disabled_by;
-      this._hiddenBy = this.entry.hidden_by;
-      this._areaId = this.entry.area_id;
-      this._device =
-        this.entry.device_id && this._deviceLookup
-          ? this._deviceLookup[this.entry.device_id]
-          : undefined;
-    }
-  }
-
-  protected render() {
-    if (
-      !this.hass ||
-      !this.entry ||
-      this.entry.entity_id !== this._origEntityId
-    ) {
-      return nothing;
-    }
-    const invalidDomainUpdate =
-      computeDomain(this._entityId.trim()) !==
-      computeDomain(this.entry.entity_id);
-
-    return html`
-      <ha-textfield
-        error-message="Domain needs to stay the same"
-        .value=${this._entityId}
-        .label=${this.hass.localize(
-          "ui.dialogs.entity_registry.editor.entity_id"
-        )}
-        .invalid=${invalidDomainUpdate}
-        .disabled=${this._submitting}
-        @input=${this._entityIdChanged}
-      ></ha-textfield>
-      <ha-area-picker
-        .hass=${this.hass}
-        .value=${this._areaId || undefined}
-        .placeholder=${this._device?.area_id || undefined}
-        @value-changed=${this._areaPicked}
-      ></ha-area-picker>
-
-      <ha-expansion-panel
-        .header=${this.hass.localize(
-          "ui.dialogs.entity_registry.editor.advanced"
-        )}
-        outlined
-      >
-        <div class="label">
-          ${this.hass.localize(
-            "ui.dialogs.entity_registry.editor.entity_status"
-          )}:
-        </div>
-        <div class="secondary">
-          ${this._disabledBy && this._disabledBy !== "user"
-            ? this.hass.localize(
-                "ui.dialogs.entity_registry.editor.enabled_cause",
-                "cause",
-                this.hass.localize(
-                  `config_entry.disabled_by.${this._disabledBy}`
-                )
-              )
-            : ""}
-        </div>
-        <div class="row">
-          <mwc-formfield
-            .label=${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.enabled_label"
-            )}
-          >
-            <ha-radio
-              name="hiddendisabled"
-              value="enabled"
-              .checked=${!this._hiddenBy && !this._disabledBy}
-              .disabled=${!!this._device?.disabled_by ||
-              (this._disabledBy !== null &&
-                !(
-                  this._disabledBy === "user" ||
-                  this._disabledBy === "integration"
-                ))}
-              @change=${this._viewStatusChanged}
-            ></ha-radio>
-          </mwc-formfield>
-          <mwc-formfield
-            .label=${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.hidden_label"
-            )}
-          >
-            <ha-radio
-              name="hiddendisabled"
-              value="hidden"
-              .checked=${this._hiddenBy !== null}
-              .disabled=${!!this._device?.disabled_by ||
-              (this._disabledBy !== null &&
-                !(
-                  this._disabledBy === "user" ||
-                  this._disabledBy === "integration"
-                ))}
-              @change=${this._viewStatusChanged}
-            ></ha-radio>
-          </mwc-formfield>
-          <mwc-formfield
-            .label=${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.disabled_label"
-            )}
-          >
-            <ha-radio
-              name="hiddendisabled"
-              value="disabled"
-              .checked=${this._disabledBy !== null}
-              .disabled=${!!this._device?.disabled_by ||
-              (this._disabledBy !== null &&
-                !(
-                  this._disabledBy === "user" ||
-                  this._disabledBy === "integration"
-                ))}
-              @change=${this._viewStatusChanged}
-            ></ha-radio>
-          </mwc-formfield>
-        </div>
-
-        ${this._disabledBy !== null
-          ? html`
-              <div class="secondary">
-                ${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.enabled_description"
-                )}
-              </div>
-            `
-          : this._hiddenBy !== null
-          ? html`
-              <div class="secondary">
-                ${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.hidden_description"
-                )}
-              </div>
-            `
-          : ""}
-
-        <div class="label">
-          ${this.hass.localize(
-            "ui.dialogs.entity_registry.editor.aliases_section"
-          )}
-        </div>
-        <mwc-list class="aliases" @action=${this._handleAliasesClicked}>
-          <mwc-list-item .twoline=${this.entry.aliases.length > 0} hasMeta>
-            <span>
-              ${this.entry.aliases.length > 0
-                ? this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.configured_aliases",
-                    { count: this.entry.aliases.length }
-                  )
-                : this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.no_aliases"
-                  )}
-            </span>
-            <span slot="secondary">
-              ${[...this.entry.aliases]
-                .sort((a, b) => stringCompare(a, b, this.hass.locale.language))
-                .join(", ")}
-            </span>
-            <ha-svg-icon slot="meta" .path=${mdiPencil}></ha-svg-icon>
-          </mwc-list-item>
-        </mwc-list>
-        <div class="secondary">
-          ${this.hass.localize(
-            "ui.dialogs.entity_registry.editor.aliases_description"
-          )}
-        </div>
-      </ha-expansion-panel>
-    `;
-  }
-
-  private _areaPicked(ev: CustomEvent) {
-    this._areaId = ev.detail.value;
-  }
-
-  private _entityIdChanged(ev): void {
-    this._entityId = ev.target.value;
-  }
-
-  private _viewStatusChanged(ev: CustomEvent): void {
-    switch ((ev.target as any).value) {
-      case "enabled":
-        this._disabledBy = null;
-        this._hiddenBy = null;
-        break;
-      case "disabled":
-        this._disabledBy = "user";
-        this._hiddenBy = null;
-        break;
-      case "hidden":
-        this._hiddenBy = "user";
-        this._disabledBy = null;
-        break;
-    }
-  }
-
-  static get styles() {
-    return css`
-      ha-switch {
-        margin-right: 16px;
-      }
-      .row {
-        margin-top: 8px;
-        color: var(--primary-text-color);
-        display: flex;
-        align-items: center;
-      }
-      .secondary {
-        color: var(--secondary-text-color);
-      }
-      ha-textfield {
-        display: block;
-        margin-bottom: 8px;
-      }
-      ha-expansion-panel {
-        margin-top: 8px;
-      }
-      .label {
-        margin-top: 16px;
-      }
-      .aliases {
-        border-radius: 4px;
-        margin-top: 4px;
-        margin-bottom: 4px;
-        --mdc-icon-button-size: 24px;
-        overflow: hidden;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-registry-basic-editor": HaEntityRegistryBasicEditor;
-  }
-}
diff --git a/src/panels/config/entities/entity-registry-settings-editor.ts b/src/panels/config/entities/entity-registry-settings-editor.ts
new file mode 100644
index 0000000000..c590ebcda4
--- /dev/null
+++ b/src/panels/config/entities/entity-registry-settings-editor.ts
@@ -0,0 +1,1193 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-formfield/mwc-formfield";
+import { HassEntity } from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { domainIcon } from "../../../common/entity/domain_icon";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import { formatNumber } from "../../../common/number/format_number";
+import { stringCompare } from "../../../common/string/compare";
+import {
+  LocalizeFunc,
+  LocalizeKeys,
+} from "../../../common/translations/localize";
+import "../../../components/ha-alert";
+import "../../../components/ha-area-picker";
+import "../../../components/ha-icon";
+import "../../../components/ha-icon-button-next";
+import "../../../components/ha-icon-picker";
+import "../../../components/ha-list-item";
+import "../../../components/ha-radio";
+import "../../../components/ha-select";
+import "../../../components/ha-settings-row";
+import "../../../components/ha-switch";
+import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/ha-textfield";
+import {
+  CameraPreferences,
+  CAMERA_ORIENTATIONS,
+  CAMERA_SUPPORT_STREAM,
+  fetchCameraPrefs,
+  STREAM_TYPE_HLS,
+  updateCameraPrefs,
+} from "../../../data/camera";
+import { ConfigEntry } from "../../../data/config_entries";
+import {
+  createConfigFlow,
+  handleConfigFlowStep,
+} from "../../../data/config_flow";
+import { DataEntryFlowStepCreateEntry } from "../../../data/data_entry_flow";
+import {
+  DeviceRegistryEntry,
+  updateDeviceRegistryEntry,
+} from "../../../data/device_registry";
+import {
+  EntityRegistryEntry,
+  EntityRegistryEntryUpdateParams,
+  ExtEntityRegistryEntry,
+  fetchEntityRegistry,
+  SensorEntityOptions,
+  updateEntityRegistryEntry,
+} from "../../../data/entity_registry";
+import { domainToName } from "../../../data/integration";
+import { getNumberDeviceClassConvertibleUnits } from "../../../data/number";
+import { getSensorDeviceClassConvertibleUnits } from "../../../data/sensor";
+import {
+  getWeatherConvertibleUnits,
+  WeatherUnits,
+} from "../../../data/weather";
+import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
+import { showVoiceAssistantsView } from "../../../dialogs/more-info/components/voice/show-view-voice-assistants";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
+
+const OVERRIDE_DEVICE_CLASSES = {
+  cover: [
+    [
+      "awning",
+      "blind",
+      "curtain",
+      "damper",
+      "door",
+      "garage",
+      "gate",
+      "shade",
+      "shutter",
+      "window",
+    ],
+  ],
+  binary_sensor: [
+    ["lock"], // Lock
+    ["window", "door", "garage_door", "opening"], // Door
+    ["battery", "battery_charging"], // Battery
+    ["cold", "gas", "heat"], // Climate
+    ["running", "motion", "moving", "occupancy", "presence", "vibration"], // Presence
+    ["power", "plug", "light"], // Power
+    [
+      "smoke",
+      "safety",
+      "sound",
+      "problem",
+      "tamper",
+      "carbon_monoxide",
+      "moisture",
+    ], // Alarm
+  ],
+};
+
+const SWITCH_AS_DOMAINS = ["cover", "fan", "light", "lock", "siren"];
+
+const PRECISIONS = [0, 1, 2, 3, 4, 5, 6];
+
+@customElement("entity-registry-settings-editor")
+export class EntityRegistrySettingsEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Object }) public entry!: ExtEntityRegistryEntry;
+
+  @property({ type: Boolean }) public hideName = false;
+
+  @property({ type: Boolean }) public hideIcon = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public helperConfigEntry?: ConfigEntry;
+
+  @state() private _name!: string;
+
+  @state() private _icon!: string;
+
+  @state() private _entityId!: string;
+
+  @state() private _deviceClass?: string;
+
+  @state() private _switchAs = "switch";
+
+  @state() private _areaId?: string | null;
+
+  @state() private _disabledBy!: EntityRegistryEntry["disabled_by"];
+
+  @state() private _hiddenBy!: EntityRegistryEntry["hidden_by"];
+
+  @state() private _device?: DeviceRegistryEntry;
+
+  @state() private _unit_of_measurement?: string | null;
+
+  @state() private _precision?: number | null;
+
+  @state() private _precipitation_unit?: string | null;
+
+  @state() private _pressure_unit?: string | null;
+
+  @state() private _temperature_unit?: string | null;
+
+  @state() private _visibility_unit?: string | null;
+
+  @state() private _wind_speed_unit?: string | null;
+
+  @state() private _cameraPrefs?: CameraPreferences;
+
+  @state() private _numberDeviceClassConvertibleUnits?: string[];
+
+  @state() private _sensorDeviceClassConvertibleUnits?: string[];
+
+  @state() private _weatherConvertibleUnits?: WeatherUnits;
+
+  @state() private _noDeviceArea?: boolean;
+
+  private _origEntityId!: string;
+
+  private _deviceClassOptions?: string[][];
+
+  protected willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
+    if (!changedProperties.has("entry")) {
+      return;
+    }
+
+    this._name = this.entry.name || "";
+    this._icon = this.entry.icon || "";
+    this._deviceClass =
+      this.entry.device_class || this.entry.original_device_class;
+    this._origEntityId = this.entry.entity_id;
+    this._areaId = this.entry.area_id;
+    this._entityId = this.entry.entity_id;
+    this._disabledBy = this.entry.disabled_by;
+    this._hiddenBy = this.entry.hidden_by;
+    this._device = this.entry.device_id
+      ? this.hass.devices[this.entry.device_id]
+      : undefined;
+
+    const domain = computeDomain(this.entry.entity_id);
+
+    if (domain === "camera" && isComponentLoaded(this.hass, "stream")) {
+      const stateObj: HassEntity | undefined =
+        this.hass.states[this.entry.entity_id];
+      if (
+        stateObj &&
+        supportsFeature(stateObj, CAMERA_SUPPORT_STREAM) &&
+        // The stream component for HLS streams supports a server-side pre-load
+        // option that client initiated WebRTC streams do not
+        stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS
+      ) {
+        this._fetchCameraPrefs();
+      }
+    }
+
+    if (domain === "number" || domain === "sensor") {
+      const stateObj: HassEntity | undefined =
+        this.hass.states[this.entry.entity_id];
+      this._unit_of_measurement = stateObj?.attributes?.unit_of_measurement;
+    }
+
+    if (domain === "sensor") {
+      this._precision = this.entry.options?.sensor?.display_precision;
+    }
+
+    if (domain === "weather") {
+      const stateObj: HassEntity | undefined =
+        this.hass.states[this.entry.entity_id];
+      this._precipitation_unit = stateObj?.attributes?.precipitation_unit;
+      this._pressure_unit = stateObj?.attributes?.pressure_unit;
+      this._temperature_unit = stateObj?.attributes?.temperature_unit;
+      this._visibility_unit = stateObj?.attributes?.visibility_unit;
+      this._wind_speed_unit = stateObj?.attributes?.wind_speed_unit;
+    }
+
+    const deviceClasses: string[][] = OVERRIDE_DEVICE_CLASSES[domain];
+
+    if (!deviceClasses) {
+      return;
+    }
+
+    this._deviceClassOptions = [[], []];
+    for (const deviceClass of deviceClasses) {
+      if (deviceClass.includes(this.entry.original_device_class!)) {
+        this._deviceClassOptions[0] = deviceClass;
+      } else {
+        this._deviceClassOptions[1].push(...deviceClass);
+      }
+    }
+  }
+
+  private precisionLabel(precision?: number, stateValue?: string) {
+    const stateValueNumber = Number(stateValue);
+    const value = !isNaN(stateValueNumber) ? stateValueNumber : 0;
+    return formatNumber(value, this.hass.locale, {
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    });
+  }
+
+  protected async updated(changedProps: PropertyValues): Promise<void> {
+    if (changedProps.has("_deviceClass")) {
+      const domain = computeDomain(this.entry.entity_id);
+
+      if (domain === "number" && this._deviceClass) {
+        const { units } = await getNumberDeviceClassConvertibleUnits(
+          this.hass,
+          this._deviceClass
+        );
+        this._numberDeviceClassConvertibleUnits = units;
+      } else {
+        this._numberDeviceClassConvertibleUnits = [];
+      }
+      if (domain === "sensor" && this._deviceClass) {
+        const { units } = await getSensorDeviceClassConvertibleUnits(
+          this.hass,
+          this._deviceClass
+        );
+        this._sensorDeviceClassConvertibleUnits = units;
+      } else {
+        this._sensorDeviceClassConvertibleUnits = [];
+      }
+    }
+    if (changedProps.has("_entityId")) {
+      const domain = computeDomain(this.entry.entity_id);
+
+      if (domain === "weather") {
+        const { units } = await getWeatherConvertibleUnits(this.hass);
+        this._weatherConvertibleUnits = units;
+      } else {
+        this._weatherConvertibleUnits = undefined;
+      }
+    }
+  }
+
+  protected render() {
+    if (this.entry.entity_id !== this._origEntityId) {
+      return nothing;
+    }
+    const stateObj: HassEntity | undefined =
+      this.hass.states[this.entry.entity_id];
+
+    const domain = computeDomain(this.entry.entity_id);
+
+    const invalidDomainUpdate = computeDomain(this._entityId.trim()) !== domain;
+
+    const defaultPrecision =
+      this.entry.options?.sensor?.suggested_display_precision ?? undefined;
+
+    return html`
+      ${this.hideName
+        ? nothing
+        : html`<ha-textfield
+            .value=${this._name}
+            .label=${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.name"
+            )}
+            .disabled=${this.disabled}
+            .placeholder=${this.entry.original_name}
+            @input=${this._nameChanged}
+          ></ha-textfield>`}
+      ${this.hideIcon
+        ? nothing
+        : html`<ha-icon-picker
+            .hass=${this.hass}
+            .value=${this._icon}
+            @value-changed=${this._iconChanged}
+            .label=${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.icon"
+            )}
+            .placeholder=${this.entry.original_icon ||
+            stateObj?.attributes.icon}
+            .fallbackPath=${!this._icon &&
+            !stateObj?.attributes.icon &&
+            stateObj
+              ? domainIcon(computeDomain(stateObj.entity_id), {
+                  ...stateObj,
+                  attributes: {
+                    ...stateObj.attributes,
+                    device_class: this._deviceClass,
+                  },
+                })
+              : undefined}
+            .disabled=${this.disabled}
+          ></ha-icon-picker>`}
+      ${this._deviceClassOptions
+        ? html`
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.device_class"
+              )}
+              .value=${this._deviceClass}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._deviceClassChanged}
+              @closed=${stopPropagation}
+            >
+              <ha-list-item></ha-list-item>
+              ${this._deviceClassesSorted(
+                domain,
+                this._deviceClassOptions[0],
+                this.hass.localize
+              ).map(
+                (entry) => html`
+                  <ha-list-item .value=${entry.deviceClass}>
+                    ${entry.label}
+                  </ha-list-item>
+                `
+              )}
+              ${this._deviceClassOptions[0].length &&
+              this._deviceClassOptions[1].length
+                ? html`<li divider role="separator"></li>`
+                : ""}
+              ${this._deviceClassesSorted(
+                domain,
+                this._deviceClassOptions[1],
+                this.hass.localize
+              ).map(
+                (entry) => html`
+                  <ha-list-item .value=${entry.deviceClass}>
+                    ${entry.label}
+                  </ha-list-item>
+                `
+              )}
+            </ha-select>
+          `
+        : ""}
+      ${domain === "number" &&
+      this._deviceClass &&
+      stateObj?.attributes.unit_of_measurement &&
+      this._numberDeviceClassConvertibleUnits?.includes(
+        stateObj?.attributes.unit_of_measurement
+      )
+        ? html`
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.unit_of_measurement"
+              )}
+              .value=${stateObj.attributes.unit_of_measurement}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._unitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._numberDeviceClassConvertibleUnits.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+          `
+        : ""}
+      ${domain === "sensor" &&
+      this._deviceClass &&
+      stateObj?.attributes.unit_of_measurement &&
+      this._sensorDeviceClassConvertibleUnits?.includes(
+        stateObj?.attributes.unit_of_measurement
+      )
+        ? html`
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.unit_of_measurement"
+              )}
+              .value=${stateObj.attributes.unit_of_measurement}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._unitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._sensorDeviceClassConvertibleUnits.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+          `
+        : ""}
+      ${domain === "sensor" &&
+      // Allow customizing the precision for a sensor with numerical device class,
+      // a unit of measurement or state class
+      ((this._deviceClass &&
+        !["date", "enum", "timestamp"].includes(this._deviceClass)) ||
+        stateObj?.attributes.unit_of_measurement ||
+        stateObj?.attributes.state_class)
+        ? html`
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.precision"
+              )}
+              .value=${this._precision == null
+                ? "default"
+                : this._precision.toString()}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._precisionChanged}
+              @closed=${stopPropagation}
+            >
+              <ha-list-item value="default"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.precision_default",
+                  {
+                    value: this.precisionLabel(
+                      defaultPrecision,
+                      stateObj?.state
+                    ),
+                  }
+                )}</ha-list-item
+              >
+              ${PRECISIONS.map(
+                (precision) => html`
+                  <ha-list-item .value=${precision.toString()}>
+                    ${this.precisionLabel(precision, stateObj?.state)}
+                  </ha-list-item>
+                `
+              )}
+            </ha-select>
+          `
+        : ""}
+      ${domain === "weather"
+        ? html`
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.precipitation_unit"
+              )}
+              .value=${this._precipitation_unit}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._precipitationUnitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._weatherConvertibleUnits?.precipitation_unit.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.pressure_unit"
+              )}
+              .value=${this._pressure_unit}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._pressureUnitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._weatherConvertibleUnits?.pressure_unit.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.temperature_unit"
+              )}
+              .value=${this._temperature_unit}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._temperatureUnitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._weatherConvertibleUnits?.temperature_unit.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.visibility_unit"
+              )}
+              .value=${this._visibility_unit}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._visibilityUnitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._weatherConvertibleUnits?.visibility_unit.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+            <ha-select
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.wind_speed_unit"
+              )}
+              .value=${this._wind_speed_unit}
+              naturalMenuWidth
+              fixedMenuPosition
+              @selected=${this._windSpeedUnitChanged}
+              @closed=${stopPropagation}
+            >
+              ${this._weatherConvertibleUnits?.wind_speed_unit.map(
+                (unit: string) => html`
+                  <ha-list-item .value=${unit}>${unit}</ha-list-item>
+                `
+              )}
+            </ha-select>
+          `
+        : ""}
+      ${domain === "switch"
+        ? html`<ha-select
+            .label=${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.device_class"
+            )}
+            naturalMenuWidth
+            fixedMenuPosition
+            @selected=${this._switchAsChanged}
+            @closed=${stopPropagation}
+          >
+            <ha-list-item
+              value="switch"
+              .selected=${!this._deviceClass || this._deviceClass === "switch"}
+            >
+              ${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.device_classes.switch.switch"
+              )}
+            </ha-list-item>
+            <ha-list-item
+              value="outlet"
+              .selected=${this._deviceClass === "outlet"}
+            >
+              ${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.device_classes.switch.outlet"
+              )}
+            </ha-list-item>
+            <li divider role="separator"></li>
+            ${this._switchAsDomainsSorted(
+              SWITCH_AS_DOMAINS,
+              this.hass.localize
+            ).map(
+              (entry) => html`
+                <ha-list-item .value=${entry.domain}>
+                  ${entry.label}
+                </ha-list-item>
+              `
+            )}
+          </ha-select>`
+        : ""}
+      <ha-textfield
+        error-message="Domain needs to stay the same"
+        .value=${this._entityId}
+        .label=${this.hass.localize(
+          "ui.dialogs.entity_registry.editor.entity_id"
+        )}
+        .invalid=${invalidDomainUpdate}
+        .disabled=${this.disabled}
+        @input=${this._entityIdChanged}
+      ></ha-textfield>
+      ${!this.entry.device_id
+        ? html`<ha-area-picker
+            .hass=${this.hass}
+            .value=${this._areaId}
+            .disabled=${this.disabled}
+            @value-changed=${this._areaPicked}
+          ></ha-area-picker>`
+        : ""}
+      ${this._cameraPrefs
+        ? html`
+            <ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.stream.preload_stream"
+                )}</span
+              >
+              <span slot="description"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.stream.preload_stream_description"
+                )}</span
+              >
+              <ha-switch
+                .checked=${this._cameraPrefs.preload_stream}
+                .disabled=${this.disabled}
+                @change=${this._handleCameraPrefsChanged}
+              >
+              </ha-switch>
+            </ha-settings-row>
+            <ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.stream.stream_orientation"
+                )}</span
+              >
+              <span slot="description"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.stream.stream_orientation_description"
+                )}</span
+              >
+              <ha-select
+                .label=${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.stream.stream_orientation"
+                )}
+                naturalMenuWidth
+                fixedMenuPosition
+                .disabled=${this.disabled}
+                @selected=${this._handleCameraOrientationChanged}
+                @closed=${stopPropagation}
+              >
+                ${CAMERA_ORIENTATIONS.map((num) => {
+                  const localizeStr =
+                    "ui.dialogs.entity_registry.editor.stream.stream_orientation_" +
+                    num.toString();
+                  return html`
+                    <ha-list-item value=${num}>
+                      ${this.hass.localize(localizeStr as LocalizeKeys)}
+                    </ha-list-item>
+                  `;
+                })}
+              </ha-select>
+            </ha-settings-row>
+          `
+        : ""}
+      ${this.helperConfigEntry && this.helperConfigEntry.supports_options
+        ? html`
+            <ha-list-item
+              class="menu-item"
+              twoline
+              hasMeta
+              .disabled=${this.disabled}
+              @click=${this._showOptionsFlow}
+            >
+              <span
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.configure_state",
+                  "integration",
+                  domainToName(
+                    this.hass.localize,
+                    this.helperConfigEntry.domain
+                  )
+                )}</span
+              >
+              <span slot="secondary"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.configure_state_secondary",
+                  "integration",
+                  domainToName(
+                    this.hass.localize,
+                    this.helperConfigEntry.domain
+                  )
+                )}</span
+              >
+              <ha-icon-next slot="meta"></ha-icon-next>
+            </ha-list-item>
+          `
+        : ""}
+
+      <ha-list-item
+        class="menu-item"
+        twoline
+        hasMeta
+        .disabled=${this.disabled}
+        @click=${this._handleVoiceAssistantsClicked}
+      >
+        <span>Voice assistants</span>
+        <span slot="secondary">
+          ${this.entry.aliases.length
+            ? [...this.entry.aliases]
+                .sort((a, b) => stringCompare(a, b, this.hass.locale.language))
+                .join(", ")
+            : this.hass.localize(
+                "ui.dialogs.entity_registry.editor.no_aliases"
+              )}
+        </span>
+        <ha-icon-next slot="meta"></ha-icon-next>
+      </ha-list-item>
+
+      ${this._disabledBy &&
+      this._disabledBy !== "user" &&
+      this._disabledBy !== "integration"
+        ? html`<ha-alert alert-type="warning"
+            >${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.enabled_cause",
+              "cause",
+              this.hass.localize(
+                `config_entry.disabled_by.${this._disabledBy!}`
+              )
+            )}</ha-alert
+          >`
+        : ""}
+
+      <ha-settings-row>
+        <span slot="heading"
+          >${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.enabled_label"
+          )}</span
+        >
+        <span slot="description"
+          >${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.enabled_description"
+          )}</span
+        >
+        <ha-switch
+          .checked=${!this._disabledBy}
+          .disabled=${this.disabled ||
+          this._device?.disabled_by ||
+          (this._disabledBy &&
+            this._disabledBy !== "user" &&
+            this._disabledBy !== "integration")}
+          @change=${this._enabledChanged}
+        ></ha-switch>
+      </ha-settings-row>
+
+      ${this._hiddenBy && this._hiddenBy !== "user"
+        ? html`<ha-alert alert-type="warning"
+            >${this.hass.localize(
+              "ui.dialogs.entity_registry.editor.hidden_cause",
+              "cause",
+              this.hass.localize(`config_entry.hidden_by.${this._hiddenBy!}`)
+            )}</ha-alert
+          >`
+        : ""}
+
+      <ha-settings-row>
+        <span slot="heading"
+          >${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.visible_label"
+          )}</span
+        >
+        <span slot="description"
+          >${this.hass.localize(
+            "ui.dialogs.entity_registry.editor.hidden_description"
+          )}</span
+        >
+        <ha-switch
+          .checked=${!this._disabledBy && !this._hiddenBy}
+          .disabled=${this.disabled ||
+          this._disabledBy ||
+          (this._hiddenBy && this._hiddenBy !== "user")}
+          @change=${this._hiddenChanged}
+        ></ha-switch>
+      </ha-settings-row>
+
+      ${this.entry.device_id
+        ? html`<ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.use_device_area"
+                )}
+                ${this.hass.devices[this.entry.device_id].area_id
+                  ? `(${
+                      this.hass.areas[
+                        this.hass.devices[this.entry.device_id].area_id!
+                      ]?.name
+                    })`
+                  : ""}</span
+              >
+              <span slot="description"
+                >${this.hass.localize(
+                  "ui.dialogs.entity_registry.editor.change_device_settings",
+                  {
+                    link: html`<button
+                      class="link"
+                      @click=${this._openDeviceSettings}
+                    >
+                      ${this.hass.localize(
+                        "ui.dialogs.entity_registry.editor.change_device_area_link"
+                      )}
+                    </button>`,
+                  }
+                )}</span
+              >
+              <ha-switch
+                .checked=${!this._areaId || this._noDeviceArea}
+                .disabled=${this.disabled}
+                @change=${this._useDeviceAreaChanged}
+              >
+              </ha-switch
+            ></ha-settings-row>
+            ${this._areaId || this._noDeviceArea
+              ? html`<ha-area-picker
+                  .hass=${this.hass}
+                  .value=${this._areaId}
+                  .placeholder=${this._device?.area_id}
+                  .disabled=${this.disabled}
+                  @value-changed=${this._areaPicked}
+                ></ha-area-picker>`
+              : ""} `
+        : ""}
+    `;
+  }
+
+  public async updateEntry(): Promise<ExtEntityRegistryEntry> {
+    const parent = (this.getRootNode() as ShadowRoot).host as HTMLElement;
+
+    const params: Partial<EntityRegistryEntryUpdateParams> = {
+      name: this._name.trim() || null,
+      icon: this._icon.trim() || null,
+      area_id: this._areaId || null,
+      new_entity_id: this._entityId.trim(),
+    };
+
+    // Only update device class if changed by user
+    if (
+      this._deviceClass !==
+      (this.entry.device_class || this.entry.original_device_class)
+    ) {
+      params.device_class = this._deviceClass;
+    }
+
+    const stateObj: HassEntity | undefined =
+      this.hass.states[this.entry.entity_id];
+    const domain = computeDomain(this.entry.entity_id);
+
+    if (
+      this.entry.disabled_by !== this._disabledBy &&
+      (this._disabledBy === null || this._disabledBy === "user")
+    ) {
+      params.disabled_by = this._disabledBy;
+    }
+    if (
+      this.entry.hidden_by !== this._hiddenBy &&
+      (this._hiddenBy === null || this._hiddenBy === "user")
+    ) {
+      params.hidden_by = this._hiddenBy;
+    }
+    if (
+      (domain === "number" || domain === "sensor") &&
+      stateObj?.attributes?.unit_of_measurement !== this._unit_of_measurement
+    ) {
+      params.options_domain = domain;
+      params.options = this.entry.options?.[domain] || {};
+      params.options.unit_of_measurement = this._unit_of_measurement;
+    }
+    if (
+      domain === "sensor" &&
+      this.entry.options?.[domain]?.display_precision !== this._precision
+    ) {
+      params.options_domain = domain;
+      params.options = params.options || this.entry.options?.[domain] || {};
+      (params.options as SensorEntityOptions).display_precision =
+        this._precision;
+    }
+    if (
+      domain === "weather" &&
+      (stateObj?.attributes?.precipitation_unit !== this._precipitation_unit ||
+        stateObj?.attributes?.pressure_unit !== this._pressure_unit ||
+        stateObj?.attributes?.temperature_unit !== this._temperature_unit ||
+        stateObj?.attributes?.visbility_unit !== this._visibility_unit ||
+        stateObj?.attributes?.wind_speed_unit !== this._wind_speed_unit)
+    ) {
+      params.options_domain = "weather";
+      params.options = {
+        precipitation_unit: this._precipitation_unit,
+        pressure_unit: this._pressure_unit,
+        temperature_unit: this._temperature_unit,
+        visibility_unit: this._visibility_unit,
+        wind_speed_unit: this._wind_speed_unit,
+      };
+    }
+
+    const result = await updateEntityRegistryEntry(
+      this.hass!,
+      this.entry.entity_id,
+      params
+    );
+    if (result.require_restart) {
+      showAlertDialog(this, {
+        text: this.hass.localize(
+          "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
+        ),
+      });
+    }
+    if (result.reload_delay) {
+      showAlertDialog(this, {
+        text: this.hass.localize(
+          "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
+          "delay",
+          result.reload_delay
+        ),
+      });
+    }
+
+    if (this._switchAs !== "switch") {
+      if (
+        await showConfirmationDialog(this, {
+          text: this.hass!.localize(
+            "ui.dialogs.entity_registry.editor.switch_as_x_confirm",
+            "domain",
+            this._switchAs
+          ),
+        })
+      ) {
+        const configFlow = await createConfigFlow(this.hass, "switch_as_x");
+        const configFlowResult = (await handleConfigFlowStep(
+          this.hass,
+          configFlow.flow_id,
+          {
+            entity_id: this._entityId.trim(),
+            target_domain: this._switchAs,
+          }
+        )) as DataEntryFlowStepCreateEntry;
+        if (configFlowResult.result?.entry_id) {
+          const unsub = await this.hass.connection.subscribeEvents(() => {
+            unsub();
+            fetchEntityRegistry(this.hass.connection).then((entityRegistry) => {
+              const entity = entityRegistry.find(
+                (reg) =>
+                  reg.config_entry_id === configFlowResult.result!.entry_id
+              );
+              if (!entity) {
+                return;
+              }
+              showMoreInfoDialog(parent, { entityId: entity.entity_id });
+            });
+          }, "entity_registry_updated");
+        }
+      }
+    }
+
+    return result.entity_entry;
+  }
+
+  private _nameChanged(ev): void {
+    fireEvent(this, "change");
+    this._name = ev.target.value;
+  }
+
+  private _iconChanged(ev: CustomEvent): void {
+    fireEvent(this, "change");
+    this._icon = ev.detail.value;
+  }
+
+  private _entityIdChanged(ev): void {
+    fireEvent(this, "change");
+    this._entityId = ev.target.value;
+  }
+
+  private _deviceClassChanged(ev): void {
+    fireEvent(this, "change");
+    this._deviceClass = ev.target.value;
+  }
+
+  private _unitChanged(ev): void {
+    fireEvent(this, "change");
+    this._unit_of_measurement = ev.target.value;
+  }
+
+  private _precipitationUnitChanged(ev): void {
+    fireEvent(this, "change");
+    this._precipitation_unit = ev.target.value;
+  }
+
+  private _precisionChanged(ev): void {
+    fireEvent(this, "change");
+    this._precision =
+      ev.target.value === "default" ? null : Number(ev.target.value);
+  }
+
+  private _pressureUnitChanged(ev): void {
+    fireEvent(this, "change");
+    this._pressure_unit = ev.target.value;
+  }
+
+  private _temperatureUnitChanged(ev): void {
+    fireEvent(this, "change");
+    this._temperature_unit = ev.target.value;
+  }
+
+  private _visibilityUnitChanged(ev): void {
+    fireEvent(this, "change");
+    this._visibility_unit = ev.target.value;
+  }
+
+  private _windSpeedUnitChanged(ev): void {
+    fireEvent(this, "change");
+    this._wind_speed_unit = ev.target.value;
+  }
+
+  private _switchAsChanged(ev): void {
+    if (ev.target.value === "") {
+      return;
+    }
+
+    // If value is "outlet" that means the user kept the "switch" domain, but actually changed
+    // the device_class of the switch to "outlet".
+    const switchAs = ev.target.value === "outlet" ? "switch" : ev.target.value;
+    this._switchAs = switchAs;
+
+    if (ev.target.value === "outlet" || ev.target.value === "switch") {
+      this._deviceClass = ev.target.value;
+    }
+  }
+
+  private _useDeviceAreaChanged(ev): void {
+    this._noDeviceArea = !ev.target.checked;
+    if (!this._noDeviceArea) {
+      this._areaId = undefined;
+    }
+  }
+
+  private _areaPicked(ev: CustomEvent) {
+    fireEvent(this, "change");
+    this._areaId = ev.detail.value;
+  }
+
+  private async _fetchCameraPrefs() {
+    this._cameraPrefs = await fetchCameraPrefs(this.hass, this.entry.entity_id);
+  }
+
+  private async _handleCameraPrefsChanged(ev) {
+    const checkbox = ev.currentTarget as HaSwitch;
+    try {
+      this._cameraPrefs = await updateCameraPrefs(
+        this.hass,
+        this.entry.entity_id,
+        {
+          preload_stream: checkbox.checked!,
+        }
+      );
+    } catch (err: any) {
+      showAlertDialog(this, { text: err.message });
+      checkbox.checked = !checkbox.checked;
+    }
+  }
+
+  private async _handleCameraOrientationChanged(ev) {
+    try {
+      this._cameraPrefs = await updateCameraPrefs(
+        this.hass,
+        this.entry.entity_id,
+        {
+          orientation: ev.currentTarget.value,
+        }
+      );
+    } catch (err: any) {
+      showAlertDialog(this, { text: err.message });
+    }
+  }
+
+  private _enabledChanged(ev: CustomEvent): void {
+    if ((ev.target as any).checked) {
+      this._disabledBy = null;
+    } else {
+      this._disabledBy = "user";
+    }
+  }
+
+  private _hiddenChanged(ev: CustomEvent): void {
+    if ((ev.target as any).checked) {
+      this._hiddenBy = null;
+    } else {
+      this._hiddenBy = "user";
+    }
+  }
+
+  private _openDeviceSettings() {
+    showDeviceRegistryDetailDialog(this, {
+      device: this._device!,
+      updateEntry: async (updates) => {
+        await updateDeviceRegistryEntry(this.hass, this._device!.id, updates);
+      },
+    });
+  }
+
+  private _handleVoiceAssistantsClicked() {
+    showVoiceAssistantsView(this, "Voice assistants");
+  }
+
+  private async _showOptionsFlow() {
+    showOptionsFlowDialog(this, this.helperConfigEntry!, null);
+  }
+
+  private _switchAsDomainsSorted = memoizeOne(
+    (domains: string[], localize: LocalizeFunc) =>
+      domains
+        .map((entry) => ({
+          domain: entry,
+          label: domainToName(localize, entry),
+        }))
+        .sort((a, b) =>
+          stringCompare(a.label, b.label, this.hass.locale.language)
+        )
+  );
+
+  private _deviceClassesSorted = memoizeOne(
+    (domain: string, deviceClasses: string[], localize: LocalizeFunc) =>
+      deviceClasses
+        .map((entry) => ({
+          deviceClass: entry,
+          label: localize(
+            `ui.dialogs.entity_registry.editor.device_classes.${domain}.${entry}`
+          ),
+        }))
+        .sort((a, b) =>
+          stringCompare(a.label, b.label, this.hass.locale.language)
+        )
+  );
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-switch {
+          margin-right: 16px;
+        }
+        ha-settings-row ha-switch {
+          margin-right: 0;
+        }
+        ha-textfield,
+        ha-icon-picker,
+        ha-select,
+        ha-area-picker {
+          display: block;
+          margin: 8px 0;
+          width: 100%;
+        }
+        li[divider] {
+          border-bottom-color: var(--divider-color);
+        }
+        ha-alert mwc-button {
+          width: max-content;
+        }
+        .menu-item {
+          border-radius: 4px;
+          margin-top: 3px;
+          margin-bottom: 3px;
+          overflow: hidden;
+          --mdc-list-side-padding: 13px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "entity-registry-settings-editor": EntityRegistrySettingsEditor;
+  }
+}
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index 817819b7b5..1671dd5225 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -1,130 +1,34 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-formfield/mwc-formfield";
 import "@material/mwc-list/mwc-list-item";
-import { mdiPencil } from "@mdi/js";
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  nothing,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { computeStateName } from "../../../common/entity/compute_state_name";
-import { domainIcon } from "../../../common/entity/domain_icon";
-import { supportsFeature } from "../../../common/entity/supports-feature";
-import { formatNumber } from "../../../common/number/format_number";
-import { stringCompare } from "../../../common/string/compare";
-import {
-  LocalizeFunc,
-  LocalizeKeys,
-} from "../../../common/translations/localize";
 import "../../../components/ha-alert";
-import "../../../components/ha-area-picker";
-import "../../../components/ha-expansion-panel";
-import "../../../components/ha-icon";
-import "../../../components/ha-icon-picker";
-import "../../../components/ha-radio";
-import "../../../components/ha-select";
-import "../../../components/ha-settings-row";
-import "../../../components/ha-switch";
-import type { HaSwitch } from "../../../components/ha-switch";
-import "../../../components/ha-textfield";
-import {
-  CameraPreferences,
-  CAMERA_ORIENTATIONS,
-  CAMERA_SUPPORT_STREAM,
-  fetchCameraPrefs,
-  STREAM_TYPE_HLS,
-  updateCameraPrefs,
-} from "../../../data/camera";
 import {
   ConfigEntry,
   deleteConfigEntry,
   getConfigEntries,
 } from "../../../data/config_entries";
+import { updateDeviceRegistryEntry } from "../../../data/device_registry";
 import {
-  createConfigFlow,
-  handleConfigFlowStep,
-} from "../../../data/config_flow";
-import { DataEntryFlowStepCreateEntry } from "../../../data/data_entry_flow";
-import {
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-  updateDeviceRegistryEntry,
-} from "../../../data/device_registry";
-import {
-  EntityRegistryEntry,
-  EntityRegistryEntryUpdateParams,
   ExtEntityRegistryEntry,
-  fetchEntityRegistry,
   removeEntityRegistryEntry,
-  SensorEntityOptions,
   updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
-import { domainToName } from "../../../data/integration";
-import { getNumberDeviceClassConvertibleUnits } from "../../../data/number";
-import { getSensorDeviceClassConvertibleUnits } from "../../../data/sensor";
-import {
-  WeatherUnits,
-  getWeatherConvertibleUnits,
-} from "../../../data/weather";
-import { showAliasesDialog } from "../../../dialogs/aliases/show-dialog-aliases";
-import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
-import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
+import "./entity-registry-settings-editor";
+import type { EntityRegistrySettingsEditor } from "./entity-registry-settings-editor";
 
-const OVERRIDE_DEVICE_CLASSES = {
-  cover: [
-    [
-      "awning",
-      "blind",
-      "curtain",
-      "damper",
-      "door",
-      "garage",
-      "gate",
-      "shade",
-      "shutter",
-      "window",
-    ],
-  ],
-  binary_sensor: [
-    ["lock"], // Lock
-    ["window", "door", "garage_door", "opening"], // Door
-    ["battery", "battery_charging"], // Battery
-    ["cold", "gas", "heat"], // Climate
-    ["running", "motion", "moving", "occupancy", "presence", "vibration"], // Presence
-    ["power", "plug", "light"], // Power
-    [
-      "smoke",
-      "safety",
-      "sound",
-      "problem",
-      "tamper",
-      "carbon_monoxide",
-      "moisture",
-    ], // Alarm
-  ],
-};
-
-const SWITCH_AS_DOMAINS = ["cover", "fan", "light", "lock", "siren"];
-
-const PRECISIONS = [0, 1, 2, 3, 4, 5, 6];
+const invalidDomainUpdate = false;
 
 @customElement("entity-registry-settings")
 export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
@@ -132,71 +36,14 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
   @property({ type: Object }) public entry!: ExtEntityRegistryEntry;
 
-  @state() private _name!: string;
-
-  @state() private _icon!: string;
-
-  @state() private _entityId!: string;
-
-  @state() private _deviceClass?: string;
-
-  @state() private _switchAs = "switch";
-
-  @state() private _areaId?: string | null;
-
-  @state() private _disabledBy!: EntityRegistryEntry["disabled_by"];
-
-  @state() private _hiddenBy!: EntityRegistryEntry["hidden_by"];
-
-  @state() private _device?: DeviceRegistryEntry;
-
   @state() private _helperConfigEntry?: ConfigEntry;
 
-  @state() private _unit_of_measurement?: string | null;
-
-  @state() private _precision?: number | null;
-
-  @state() private _precipitation_unit?: string | null;
-
-  @state() private _pressure_unit?: string | null;
-
-  @state() private _temperature_unit?: string | null;
-
-  @state() private _visibility_unit?: string | null;
-
-  @state() private _wind_speed_unit?: string | null;
-
   @state() private _error?: string;
 
   @state() private _submitting?: boolean;
 
-  @state() private _cameraPrefs?: CameraPreferences;
-
-  @state() private _numberDeviceClassConvertibleUnits?: string[];
-
-  @state() private _sensorDeviceClassConvertibleUnits?: string[];
-
-  @state() private _weatherConvertibleUnits?: WeatherUnits;
-
-  private _origEntityId!: string;
-
-  private _deviceLookup?: Record<string, DeviceRegistryEntry>;
-
-  private _deviceClassOptions?: string[][];
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        this._deviceLookup = {};
-        for (const device of devices) {
-          this._deviceLookup[device.id] = device;
-        }
-        if (this.entry.device_id) {
-          this._device = this._deviceLookup[this.entry.device_id];
-        }
-      }),
-    ];
-  }
+  @query("entity-registry-settings-editor")
+  private _registryEditor?: EntityRegistrySettingsEditor;
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
@@ -212,142 +59,19 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     }
   }
 
-  protected willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-    if (!changedProperties.has("entry")) {
-      return;
-    }
-
-    this._error = undefined;
-    this._name = this.entry.name || "";
-    this._icon = this.entry.icon || "";
-    this._deviceClass =
-      this.entry.device_class || this.entry.original_device_class;
-    this._origEntityId = this.entry.entity_id;
-    this._areaId = this.entry.area_id;
-    this._entityId = this.entry.entity_id;
-    this._disabledBy = this.entry.disabled_by;
-    this._hiddenBy = this.entry.hidden_by;
-    this._device =
-      this.entry.device_id && this._deviceLookup
-        ? this._deviceLookup[this.entry.device_id]
-        : undefined;
-
-    const domain = computeDomain(this.entry.entity_id);
-
-    if (domain === "camera" && isComponentLoaded(this.hass, "stream")) {
-      const stateObj: HassEntity | undefined =
-        this.hass.states[this.entry.entity_id];
-      if (
-        stateObj &&
-        supportsFeature(stateObj, CAMERA_SUPPORT_STREAM) &&
-        // The stream component for HLS streams supports a server-side pre-load
-        // option that client initiated WebRTC streams do not
-        stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS
-      ) {
-        this._fetchCameraPrefs();
-      }
-    }
-
-    if (domain === "number" || domain === "sensor") {
-      const stateObj: HassEntity | undefined =
-        this.hass.states[this.entry.entity_id];
-      this._unit_of_measurement = stateObj?.attributes?.unit_of_measurement;
-    }
-
-    if (domain === "sensor") {
-      this._precision = this.entry.options?.sensor?.display_precision;
-    }
-
-    if (domain === "weather") {
-      const stateObj: HassEntity | undefined =
-        this.hass.states[this.entry.entity_id];
-      this._precipitation_unit = stateObj?.attributes?.precipitation_unit;
-      this._pressure_unit = stateObj?.attributes?.pressure_unit;
-      this._temperature_unit = stateObj?.attributes?.temperature_unit;
-      this._visibility_unit = stateObj?.attributes?.visibility_unit;
-      this._wind_speed_unit = stateObj?.attributes?.wind_speed_unit;
-    }
-
-    const deviceClasses: string[][] = OVERRIDE_DEVICE_CLASSES[domain];
-
-    if (!deviceClasses) {
-      return;
-    }
-
-    this._deviceClassOptions = [[], []];
-    for (const deviceClass of deviceClasses) {
-      if (deviceClass.includes(this.entry.original_device_class!)) {
-        this._deviceClassOptions[0] = deviceClass;
-      } else {
-        this._deviceClassOptions[1].push(...deviceClass);
-      }
-    }
-  }
-
-  private precisionLabel(precision?: number, stateValue?: string) {
-    const stateValueNumber = Number(stateValue);
-    const value = !isNaN(stateValueNumber) ? stateValueNumber : 0;
-    return formatNumber(value, this.hass.locale, {
-      minimumFractionDigits: precision,
-      maximumFractionDigits: precision,
-    });
-  }
-
-  protected async updated(changedProps: PropertyValues): Promise<void> {
-    if (changedProps.has("_deviceClass")) {
-      const domain = computeDomain(this.entry.entity_id);
-
-      if (domain === "number" && this._deviceClass) {
-        const { units } = await getNumberDeviceClassConvertibleUnits(
-          this.hass,
-          this._deviceClass
-        );
-        this._numberDeviceClassConvertibleUnits = units;
-      } else {
-        this._numberDeviceClassConvertibleUnits = [];
-      }
-      if (domain === "sensor" && this._deviceClass) {
-        const { units } = await getSensorDeviceClassConvertibleUnits(
-          this.hass,
-          this._deviceClass
-        );
-        this._sensorDeviceClassConvertibleUnits = units;
-      } else {
-        this._sensorDeviceClassConvertibleUnits = [];
-      }
-    }
-    if (changedProps.has("_entityId")) {
-      const domain = computeDomain(this.entry.entity_id);
-
-      if (domain === "weather") {
-        const { units } = await getWeatherConvertibleUnits(this.hass);
-        this._weatherConvertibleUnits = units;
-      } else {
-        this._weatherConvertibleUnits = undefined;
-      }
-    }
-  }
-
   protected render() {
-    if (this.entry.entity_id !== this._origEntityId) {
-      return nothing;
-    }
     const stateObj: HassEntity | undefined =
       this.hass.states[this.entry.entity_id];
 
-    const domain = computeDomain(this.entry.entity_id);
-
-    const invalidDomainUpdate = computeDomain(this._entityId.trim()) !== domain;
-
-    const defaultPrecision =
-      this.entry.options?.sensor?.suggested_display_precision ?? undefined;
+    const device = this.entry.device_id
+      ? this.hass.devices[this.entry.device_id]
+      : undefined;
 
     return html`
       ${!stateObj
         ? html`
             <ha-alert alert-type="warning">
-              ${this._device?.disabled_by
+              ${device?.disabled_by
                 ? html`${this.hass!.localize(
                       "ui.dialogs.entity_registry.editor.device_disabled"
                     )}<mwc-button
@@ -361,7 +85,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                 : this.entry.disabled_by
                 ? html`${this.hass!.localize(
                     "ui.dialogs.entity_registry.editor.entity_disabled"
-                  )}${["user", "integration"].includes(this._disabledBy!)
+                  )}${["user", "integration"].includes(this.entry.disabled_by!)
                     ? html`<mwc-button
                         slot="action"
                         @click=${this._enableEntry}
@@ -381,539 +105,13 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
         : ""}
       <div class="form container">
-        <ha-textfield
-          .value=${this._name}
-          .label=${this.hass.localize("ui.dialogs.entity_registry.editor.name")}
-          .invalid=${invalidDomainUpdate}
-          .disabled=${this._submitting}
-          .placeholder=${this.entry.original_name}
-          @input=${this._nameChanged}
-        ></ha-textfield>
-        <ha-icon-picker
+        <entity-registry-settings-editor
           .hass=${this.hass}
-          .value=${this._icon}
-          @value-changed=${this._iconChanged}
-          .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
-          .placeholder=${this.entry.original_icon || stateObj?.attributes.icon}
-          .fallbackPath=${!this._icon && !stateObj?.attributes.icon && stateObj
-            ? domainIcon(computeDomain(stateObj.entity_id), {
-                ...stateObj,
-                attributes: {
-                  ...stateObj.attributes,
-                  device_class: this._deviceClass,
-                },
-              })
-            : undefined}
+          .entry=${this.entry}
+          .helperConfigEntry=${this._helperConfigEntry}
           .disabled=${this._submitting}
-        ></ha-icon-picker>
-        ${this._deviceClassOptions
-          ? html`
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.device_class"
-                )}
-                .value=${this._deviceClass}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._deviceClassChanged}
-                @closed=${stopPropagation}
-              >
-                <mwc-list-item></mwc-list-item>
-                ${this._deviceClassesSorted(
-                  domain,
-                  this._deviceClassOptions[0],
-                  this.hass.localize
-                ).map(
-                  (entry) => html`
-                    <mwc-list-item .value=${entry.deviceClass}>
-                      ${entry.label}
-                    </mwc-list-item>
-                  `
-                )}
-                ${this._deviceClassOptions[0].length &&
-                this._deviceClassOptions[1].length
-                  ? html`<li divider role="separator"></li>`
-                  : ""}
-                ${this._deviceClassesSorted(
-                  domain,
-                  this._deviceClassOptions[1],
-                  this.hass.localize
-                ).map(
-                  (entry) => html`
-                    <mwc-list-item .value=${entry.deviceClass}>
-                      ${entry.label}
-                    </mwc-list-item>
-                  `
-                )}
-              </ha-select>
-            `
-          : ""}
-        ${domain === "number" &&
-        this._deviceClass &&
-        stateObj?.attributes.unit_of_measurement &&
-        this._numberDeviceClassConvertibleUnits?.includes(
-          stateObj?.attributes.unit_of_measurement
-        )
-          ? html`
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.unit_of_measurement"
-                )}
-                .value=${stateObj.attributes.unit_of_measurement}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._unitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._numberDeviceClassConvertibleUnits.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-            `
-          : ""}
-        ${domain === "sensor" &&
-        this._deviceClass &&
-        stateObj?.attributes.unit_of_measurement &&
-        this._sensorDeviceClassConvertibleUnits?.includes(
-          stateObj?.attributes.unit_of_measurement
-        )
-          ? html`
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.unit_of_measurement"
-                )}
-                .value=${stateObj.attributes.unit_of_measurement}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._unitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._sensorDeviceClassConvertibleUnits.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-            `
-          : ""}
-        ${domain === "sensor" &&
-        // Allow customizing the precision for a sensor with numerical device class,
-        // a unit of measurement or state class
-        ((this._deviceClass &&
-          !["date", "enum", "timestamp"].includes(this._deviceClass)) ||
-          stateObj?.attributes.unit_of_measurement ||
-          stateObj?.attributes.state_class)
-          ? html`
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.precision"
-                )}
-                .value=${this._precision == null
-                  ? "default"
-                  : this._precision.toString()}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._precisionChanged}
-                @closed=${stopPropagation}
-              >
-                <mwc-list-item value="default"
-                  >${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.precision_default",
-                    {
-                      value: this.precisionLabel(
-                        defaultPrecision,
-                        stateObj?.state
-                      ),
-                    }
-                  )}</mwc-list-item
-                >
-                ${PRECISIONS.map(
-                  (precision) => html`
-                    <mwc-list-item .value=${precision.toString()}>
-                      ${this.precisionLabel(precision, stateObj?.state)}
-                    </mwc-list-item>
-                  `
-                )}
-              </ha-select>
-            `
-          : ""}
-        ${domain === "weather"
-          ? html`
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.precipitation_unit"
-                )}
-                .value=${this._precipitation_unit}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._precipitationUnitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._weatherConvertibleUnits?.precipitation_unit.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.pressure_unit"
-                )}
-                .value=${this._pressure_unit}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._pressureUnitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._weatherConvertibleUnits?.pressure_unit.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.temperature_unit"
-                )}
-                .value=${this._temperature_unit}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._temperatureUnitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._weatherConvertibleUnits?.temperature_unit.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.visibility_unit"
-                )}
-                .value=${this._visibility_unit}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._visibilityUnitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._weatherConvertibleUnits?.visibility_unit.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-              <ha-select
-                .label=${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.wind_speed_unit"
-                )}
-                .value=${this._wind_speed_unit}
-                naturalMenuWidth
-                fixedMenuPosition
-                @selected=${this._windSpeedUnitChanged}
-                @closed=${stopPropagation}
-              >
-                ${this._weatherConvertibleUnits?.wind_speed_unit.map(
-                  (unit: string) => html`
-                    <mwc-list-item .value=${unit}>${unit}</mwc-list-item>
-                  `
-                )}
-              </ha-select>
-            `
-          : ""}
-        ${domain === "switch"
-          ? html`<ha-select
-              .label=${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.device_class"
-              )}
-              naturalMenuWidth
-              fixedMenuPosition
-              @selected=${this._switchAsChanged}
-              @closed=${stopPropagation}
-            >
-              <mwc-list-item
-                value="switch"
-                .selected=${!this._deviceClass ||
-                this._deviceClass === "switch"}
-              >
-                ${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.device_classes.switch.switch"
-                )}
-              </mwc-list-item>
-              <mwc-list-item
-                value="outlet"
-                .selected=${this._deviceClass === "outlet"}
-              >
-                ${this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.device_classes.switch.outlet"
-                )}
-              </mwc-list-item>
-              <li divider role="separator"></li>
-              ${this._switchAsDomainsSorted(
-                SWITCH_AS_DOMAINS,
-                this.hass.localize
-              ).map(
-                (entry) => html`
-                  <mwc-list-item .value=${entry.domain}>
-                    ${entry.label}
-                  </mwc-list-item>
-                `
-              )}
-            </ha-select>`
-          : ""}
-        ${this._helperConfigEntry && this._helperConfigEntry.supports_options
-          ? html`
-              <div class="row">
-                <mwc-button
-                  @click=${this._showOptionsFlow}
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.configure_state",
-                    "integration",
-                    domainToName(
-                      this.hass.localize,
-                      this._helperConfigEntry.domain
-                    )
-                  )}
-                </mwc-button>
-              </div>
-            `
-          : ""}
-        <ha-textfield
-          error-message="Domain needs to stay the same"
-          .value=${this._entityId}
-          .label=${this.hass.localize(
-            "ui.dialogs.entity_registry.editor.entity_id"
-          )}
-          .invalid=${invalidDomainUpdate}
-          .disabled=${this._submitting}
-          @input=${this._entityIdChanged}
-        ></ha-textfield>
-        ${!this.entry.device_id
-          ? html`<ha-area-picker
-              .hass=${this.hass}
-              .value=${this._areaId}
-              @value-changed=${this._areaPicked}
-            ></ha-area-picker>`
-          : ""}
-        ${this._cameraPrefs
-          ? html`
-              <ha-settings-row>
-                <span slot="heading"
-                  >${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.stream.preload_stream"
-                  )}</span
-                >
-                <span slot="description"
-                  >${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.stream.preload_stream_description"
-                  )}</span
-                >
-                <ha-switch
-                  .checked=${this._cameraPrefs.preload_stream}
-                  @change=${this._handleCameraPrefsChanged}
-                >
-                </ha-switch>
-              </ha-settings-row>
-              <ha-settings-row>
-                <span slot="heading"
-                  >${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.stream.stream_orientation"
-                  )}</span
-                >
-                <span slot="description"
-                  >${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.stream.stream_orientation_description"
-                  )}</span
-                >
-                <ha-select
-                  .label=${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.stream.stream_orientation"
-                  )}
-                  naturalMenuWidth
-                  fixedMenuPosition
-                  @selected=${this._handleCameraOrientationChanged}
-                  @closed=${stopPropagation}
-                >
-                  ${CAMERA_ORIENTATIONS.map((num) => {
-                    const localizeStr =
-                      "ui.dialogs.entity_registry.editor.stream.stream_orientation_" +
-                      num.toString();
-                    return html`
-                      <mwc-list-item value=${num}>
-                        ${this.hass.localize(localizeStr as LocalizeKeys)}
-                      </mwc-list-item>
-                    `;
-                  })}
-                </ha-select>
-              </ha-settings-row>
-            `
-          : ""}
-        <ha-expansion-panel
-          .header=${this.hass.localize(
-            "ui.dialogs.entity_registry.editor.advanced"
-          )}
-          outlined
-        >
-          <div class="label">
-            ${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.entity_status"
-            )}
-          </div>
-          <div class="secondary">
-            ${this._disabledBy &&
-            this._disabledBy !== "user" &&
-            this._disabledBy !== "integration"
-              ? this.hass.localize(
-                  "ui.dialogs.entity_registry.editor.enabled_cause",
-                  "cause",
-                  this.hass.localize(
-                    `config_entry.disabled_by.${this._disabledBy}`
-                  )
-                )
-              : ""}
-          </div>
-          <div class="row">
-            <mwc-formfield
-              .label=${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.enabled_label"
-              )}
-            >
-              <ha-radio
-                name="hiddendisabled"
-                value="enabled"
-                .checked=${!this._hiddenBy && !this._disabledBy}
-                .disabled=${(this._hiddenBy !== null &&
-                  this._hiddenBy !== "user") ||
-                !!this._device?.disabled_by ||
-                (this._disabledBy !== null &&
-                  this._disabledBy !== "user" &&
-                  this._disabledBy !== "integration")}
-                @change=${this._viewStatusChanged}
-              ></ha-radio>
-            </mwc-formfield>
-            <mwc-formfield
-              .label=${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.hidden_label"
-              )}
-            >
-              <ha-radio
-                name="hiddendisabled"
-                value="hidden"
-                .checked=${this._hiddenBy !== null}
-                .disabled=${(this._hiddenBy && this._hiddenBy !== "user") ||
-                Boolean(this._device?.disabled_by) ||
-                (this._disabledBy &&
-                  this._disabledBy !== "user" &&
-                  this._disabledBy !== "integration")}
-                @change=${this._viewStatusChanged}
-              ></ha-radio>
-            </mwc-formfield>
-            <mwc-formfield
-              .label=${this.hass.localize(
-                "ui.dialogs.entity_registry.editor.disabled_label"
-              )}
-            >
-              <ha-radio
-                name="hiddendisabled"
-                value="disabled"
-                .checked=${this._disabledBy !== null}
-                .disabled=${(this._hiddenBy && this._hiddenBy !== "user") ||
-                Boolean(this._device?.disabled_by) ||
-                (this._disabledBy &&
-                  this._disabledBy !== "user" &&
-                  this._disabledBy !== "integration")}
-                @change=${this._viewStatusChanged}
-              ></ha-radio>
-            </mwc-formfield>
-          </div>
-
-          ${this._disabledBy !== null
-            ? html`
-                <div class="secondary">
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.enabled_description"
-                  )}
-                </div>
-              `
-            : this._hiddenBy !== null
-            ? html`
-                <div class="secondary">
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.hidden_description"
-                  )}
-                </div>
-              `
-            : ""}
-
-          <div class="label">
-            ${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.aliases_section"
-            )}
-          </div>
-          <mwc-list class="aliases" @action=${this._handleAliasesClicked}>
-            <mwc-list-item .twoline=${this.entry.aliases.length > 0} hasMeta>
-              <span>
-                ${this.entry.aliases.length > 0
-                  ? this.hass.localize(
-                      "ui.dialogs.entity_registry.editor.configured_aliases",
-                      { count: this.entry.aliases.length }
-                    )
-                  : this.hass.localize(
-                      "ui.dialogs.entity_registry.editor.no_aliases"
-                    )}
-              </span>
-              <span slot="secondary">
-                ${[...this.entry.aliases]
-                  .sort((a, b) =>
-                    stringCompare(a, b, this.hass.locale.language)
-                  )
-                  .join(", ")}
-              </span>
-              <ha-svg-icon slot="meta" .path=${mdiPencil}></ha-svg-icon>
-            </mwc-list-item>
-          </mwc-list>
-          <div class="secondary">
-            ${this.hass.localize(
-              "ui.dialogs.entity_registry.editor.aliases_description"
-            )}
-          </div>
-          ${this.entry.device_id
-            ? html`
-                <div class="label">
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.change_area"
-                  )}
-                </div>
-                <ha-area-picker
-                  .hass=${this.hass}
-                  .value=${this._areaId}
-                  .placeholder=${this._device?.area_id}
-                  .label=${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.area"
-                  )}
-                  @value-changed=${this._areaPicked}
-                ></ha-area-picker>
-                <div class="secondary">
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.area_note"
-                  )}
-                  ${this._device
-                    ? html`
-                        <button class="link" @click=${this._openDeviceSettings}>
-                          ${this.hass.localize(
-                            "ui.dialogs.entity_registry.editor.change_device_area"
-                          )}
-                        </button>
-                      `
-                    : ""}
-                </div>
-              `
-            : ""}
-        </ha-expansion-panel>
+          @change=${this._entityRegistryChanged}
+        ></entity-registry-settings-editor>
       </div>
       <div class="buttons">
         <mwc-button
@@ -934,159 +132,17 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _nameChanged(ev): void {
+  private _entityRegistryChanged() {
     this._error = undefined;
-    this._name = ev.target.value;
-  }
-
-  private _iconChanged(ev: CustomEvent): void {
-    this._error = undefined;
-    this._icon = ev.detail.value;
-  }
-
-  private _entityIdChanged(ev): void {
-    this._error = undefined;
-    this._entityId = ev.target.value;
-  }
-
-  private _deviceClassChanged(ev): void {
-    this._error = undefined;
-    this._deviceClass = ev.target.value;
-  }
-
-  private _unitChanged(ev): void {
-    this._error = undefined;
-    this._unit_of_measurement = ev.target.value;
-  }
-
-  private _precipitationUnitChanged(ev): void {
-    this._error = undefined;
-    this._precipitation_unit = ev.target.value;
-  }
-
-  private _precisionChanged(ev): void {
-    this._error = undefined;
-    this._precision =
-      ev.target.value === "default" ? null : Number(ev.target.value);
-  }
-
-  private _pressureUnitChanged(ev): void {
-    this._error = undefined;
-    this._pressure_unit = ev.target.value;
-  }
-
-  private _temperatureUnitChanged(ev): void {
-    this._error = undefined;
-    this._temperature_unit = ev.target.value;
-  }
-
-  private _visibilityUnitChanged(ev): void {
-    this._error = undefined;
-    this._visibility_unit = ev.target.value;
-  }
-
-  private _windSpeedUnitChanged(ev): void {
-    this._error = undefined;
-    this._wind_speed_unit = ev.target.value;
-  }
-
-  private _switchAsChanged(ev): void {
-    if (ev.target.value === "") {
-      return;
-    }
-
-    // If value is "outlet" that means the user kept the "switch" domain, but actually changed
-    // the device_class of the switch to "outlet".
-    const switchAs = ev.target.value === "outlet" ? "switch" : ev.target.value;
-    this._switchAs = switchAs;
-
-    if (ev.target.value === "outlet" || ev.target.value === "switch") {
-      this._deviceClass = ev.target.value;
-    }
-  }
-
-  private _areaPicked(ev: CustomEvent) {
-    this._error = undefined;
-    this._areaId = ev.detail.value;
-  }
-
-  private async _fetchCameraPrefs() {
-    this._cameraPrefs = await fetchCameraPrefs(this.hass, this.entry.entity_id);
-  }
-
-  private async _handleCameraPrefsChanged(ev) {
-    const checkbox = ev.currentTarget as HaSwitch;
-    try {
-      this._cameraPrefs = await updateCameraPrefs(
-        this.hass,
-        this.entry.entity_id,
-        {
-          preload_stream: checkbox.checked!,
-        }
-      );
-    } catch (err: any) {
-      showAlertDialog(this, { text: err.message });
-      checkbox.checked = !checkbox.checked;
-    }
-  }
-
-  private async _handleCameraOrientationChanged(ev) {
-    try {
-      this._cameraPrefs = await updateCameraPrefs(
-        this.hass,
-        this.entry.entity_id,
-        {
-          orientation: ev.currentTarget.value,
-        }
-      );
-    } catch (err: any) {
-      showAlertDialog(this, { text: err.message });
-    }
-  }
-
-  private _viewStatusChanged(ev: CustomEvent): void {
-    switch ((ev.target as any).value) {
-      case "enabled":
-        this._disabledBy = null;
-        this._hiddenBy = null;
-        break;
-      case "disabled":
-        this._disabledBy = "user";
-        this._hiddenBy = null;
-        break;
-      case "hidden":
-        this._hiddenBy = "user";
-        this._disabledBy = null;
-        break;
-    }
   }
 
   private _openDeviceSettings() {
+    const device = this.hass.devices[this.entry.device_id!];
+
     showDeviceRegistryDetailDialog(this, {
-      device: this._device!,
+      device: device,
       updateEntry: async (updates) => {
-        await updateDeviceRegistryEntry(this.hass, this._device!.id, updates);
-      },
-    });
-  }
-
-  private _handleAliasesClicked(ev: CustomEvent) {
-    if (ev.detail.index !== 0) return;
-
-    const stateObj = this.hass.states[this.entry.entity_id];
-    const name =
-      (stateObj && computeStateName(stateObj)) || this.entry.entity_id;
-
-    showAliasesDialog(this, {
-      name,
-      aliases: this.entry!.aliases,
-      updateAliases: async (aliases: string[]) => {
-        const result = await updateEntityRegistryEntry(
-          this.hass,
-          this.entry.entity_id,
-          { aliases }
-        );
-        fireEvent(this, "entity-entry-updated", result.entity_entry);
+        await updateDeviceRegistryEntry(this.hass, device.id, updates);
       },
     });
   }
@@ -1097,7 +153,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     try {
       const result = await updateEntityRegistryEntry(
         this.hass!,
-        this._origEntityId,
+        this.entry.entity_id,
         { disabled_by: null }
       );
       fireEvent(this, "entity-entry-updated", result.entity_entry);
@@ -1126,140 +182,14 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
   private async _updateEntry(): Promise<void> {
     this._submitting = true;
-
-    const parent = (this.getRootNode() as ShadowRoot).host as HTMLElement;
-
-    const params: Partial<EntityRegistryEntryUpdateParams> = {
-      name: this._name.trim() || null,
-      icon: this._icon.trim() || null,
-      area_id: this._areaId || null,
-      new_entity_id: this._entityId.trim(),
-    };
-
-    // Only update device class if changed by user
-    if (
-      this._deviceClass !==
-      (this.entry.device_class || this.entry.original_device_class)
-    ) {
-      params.device_class = this._deviceClass;
-    }
-
-    const stateObj: HassEntity | undefined =
-      this.hass.states[this.entry.entity_id];
-    const domain = computeDomain(this.entry.entity_id);
-
-    if (
-      this.entry.disabled_by !== this._disabledBy &&
-      (this._disabledBy === null || this._disabledBy === "user")
-    ) {
-      params.disabled_by = this._disabledBy;
-    }
-    if (
-      this.entry.hidden_by !== this._hiddenBy &&
-      (this._hiddenBy === null || this._hiddenBy === "user")
-    ) {
-      params.hidden_by = this._hiddenBy;
-    }
-    if (
-      (domain === "number" || domain === "sensor") &&
-      stateObj?.attributes?.unit_of_measurement !== this._unit_of_measurement
-    ) {
-      params.options_domain = domain;
-      params.options = this.entry.options?.[domain] || {};
-      params.options.unit_of_measurement = this._unit_of_measurement;
-    }
-    if (
-      domain === "sensor" &&
-      this.entry.options?.[domain]?.display_precision !== this._precision
-    ) {
-      params.options_domain = domain;
-      params.options = params.options || this.entry.options?.[domain] || {};
-      (params.options as SensorEntityOptions).display_precision =
-        this._precision;
-    }
-    if (
-      domain === "weather" &&
-      (stateObj?.attributes?.precipitation_unit !== this._precipitation_unit ||
-        stateObj?.attributes?.pressure_unit !== this._pressure_unit ||
-        stateObj?.attributes?.temperature_unit !== this._temperature_unit ||
-        stateObj?.attributes?.visbility_unit !== this._visibility_unit ||
-        stateObj?.attributes?.wind_speed_unit !== this._wind_speed_unit)
-    ) {
-      params.options_domain = "weather";
-      params.options = {
-        precipitation_unit: this._precipitation_unit,
-        pressure_unit: this._pressure_unit,
-        temperature_unit: this._temperature_unit,
-        visibility_unit: this._visibility_unit,
-        wind_speed_unit: this._wind_speed_unit,
-      };
-    }
     try {
-      const result = await updateEntityRegistryEntry(
-        this.hass!,
-        this._origEntityId,
-        params
-      );
-      if (result.require_restart) {
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
-          ),
-        });
-      }
-      if (result.reload_delay) {
-        showAlertDialog(this, {
-          text: this.hass.localize(
-            "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
-            "delay",
-            result.reload_delay
-          ),
-        });
-      }
-      fireEvent(this as HTMLElement, "close-dialog");
+      await this._registryEditor!.updateEntry();
+      fireEvent(this, "close-dialog");
     } catch (err: any) {
       this._error = err.message || "Unknown error";
     } finally {
       this._submitting = false;
     }
-
-    if (this._switchAs !== "switch") {
-      if (
-        !(await showConfirmationDialog(this, {
-          text: this.hass!.localize(
-            "ui.dialogs.entity_registry.editor.switch_as_x_confirm",
-            "domain",
-            this._switchAs
-          ),
-        }))
-      ) {
-        return;
-      }
-      const configFlow = await createConfigFlow(this.hass, "switch_as_x");
-      const result = (await handleConfigFlowStep(
-        this.hass,
-        configFlow.flow_id,
-        {
-          entity_id: this._entityId.trim(),
-          target_domain: this._switchAs,
-        }
-      )) as DataEntryFlowStepCreateEntry;
-      if (!result.result?.entry_id) {
-        return;
-      }
-      const unsub = await this.hass.connection.subscribeEvents(() => {
-        unsub();
-        fetchEntityRegistry(this.hass.connection).then((entityRegistry) => {
-          const entity = entityRegistry.find(
-            (reg) => reg.config_entry_id === result.result!.entry_id
-          );
-          if (!entity) {
-            return;
-          }
-          showMoreInfoDialog(parent, { entityId: entity.entity_id });
-        });
-      }, "entity_registry_updated");
-    }
   }
 
   private async _confirmDeleteEntry(): Promise<void> {
@@ -1279,7 +209,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       if (this._helperConfigEntry) {
         await deleteConfigEntry(this.hass, this._helperConfigEntry.entry_id);
       } else {
-        await removeEntityRegistryEntry(this.hass!, this._origEntityId);
+        await removeEntityRegistryEntry(this.hass!, this.entry.entity_id);
       }
       fireEvent(this, "close-dialog");
     } finally {
@@ -1287,36 +217,6 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     }
   }
 
-  private async _showOptionsFlow() {
-    showOptionsFlowDialog(this, this._helperConfigEntry!, null);
-  }
-
-  private _switchAsDomainsSorted = memoizeOne(
-    (domains: string[], localize: LocalizeFunc) =>
-      domains
-        .map((entry) => ({
-          domain: entry,
-          label: domainToName(localize, entry),
-        }))
-        .sort((a, b) =>
-          stringCompare(a.label, b.label, this.hass.locale.language)
-        )
-  );
-
-  private _deviceClassesSorted = memoizeOne(
-    (domain: string, deviceClasses: string[], localize: LocalizeFunc) =>
-      deviceClasses
-        .map((entry) => ({
-          deviceClass: entry,
-          label: localize(
-            `ui.dialogs.entity_registry.editor.device_classes.${domain}.${entry}`
-          ),
-        }))
-        .sort((a, b) =>
-          stringCompare(a.label, b.label, this.hass.locale.language)
-        )
-  );
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1330,61 +230,17 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         .buttons {
           box-sizing: border-box;
           display: flex;
-          padding: 24px;
-          padding-top: 16px;
+          padding: 8px 16px 8px 24px;
           justify-content: space-between;
-          padding-bottom: max(env(safe-area-inset-bottom), 24px);
+          padding-bottom: max(env(safe-area-inset-bottom), 8px);
           background-color: var(--mdc-theme-surface, #fff);
           border-top: 1px solid var(--divider-color);
           position: sticky;
           bottom: 0px;
         }
-        ha-select {
-          width: 100%;
-          margin: 8px 0;
-        }
-        ha-switch {
-          margin-right: 16px;
-        }
-        ha-settings-row {
-          padding: 0;
-        }
-        ha-settings-row ha-switch {
-          margin-right: 0;
-        }
-        ha-textfield {
-          display: block;
-          margin: 8px 0;
-        }
-        ha-area-picker {
-          margin: 8px 0;
-          display: block;
-        }
-        .row {
-          margin: 8px 0;
-          color: var(--primary-text-color);
-          display: flex;
-          align-items: center;
-        }
-        .label {
-          margin-top: 16px;
-        }
-        .secondary {
-          margin: 8px 0;
-        }
-        li[divider] {
-          border-bottom-color: var(--divider-color);
-        }
         ha-alert mwc-button {
           width: max-content;
         }
-        .aliases {
-          border-radius: 4px;
-          margin-top: 4px;
-          margin-bottom: 4px;
-          --mdc-icon-button-size: 24px;
-          overflow: hidden;
-        }
       `,
     ];
   }
diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts
index c00faf3711..57011cf0e4 100644
--- a/src/panels/config/ha-panel-config.ts
+++ b/src/panels/config/ha-panel-config.ts
@@ -12,6 +12,7 @@ import {
   mdiMapMarkerRadius,
   mdiMathLog,
   mdiMemory,
+  mdiMicrophone,
   mdiNetwork,
   mdiNfcVariant,
   mdiPalette,
@@ -82,6 +83,12 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#B1345C",
       component: "lovelace",
     },
+    {
+      path: "/config/voice-assistants",
+      translationKey: "voice_assistants",
+      iconPath: mdiMicrophone,
+      iconColor: "#3263C3",
+    },
     {
       path: "/config/tags",
       translationKey: "tags",
@@ -199,6 +206,14 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconColor: "#616161",
     },
   ],
+  voice_assistants: [
+    {
+      path: "/config/voice-assistants",
+      translationKey: "ui.panel.config.dashboard.voice_assistants.main",
+      iconPath: mdiMicrophone,
+      iconColor: "#3263C3",
+    },
+  ],
   // Not used as a tab, but this way it will stay in the quick bar
   energy: [
     {
diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts
index 2fe114e1bf..2b39555adb 100644
--- a/src/panels/config/integrations/dialog-add-integration.ts
+++ b/src/panels/config/integrations/dialog-add-integration.ts
@@ -92,14 +92,24 @@ class AddIntegrationDialog extends LitElement {
 
   private _height?: number;
 
-  public showDialog(params?: AddIntegrationDialogParams): void {
-    this._load();
+  public async showDialog(params?: AddIntegrationDialogParams): Promise<void> {
+    const loadPromise = this._load();
     this._open = true;
     this._pickedBrand = params?.brand;
     this._initialFilter = params?.initialFilter;
     this._narrow = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
     ).matches;
+    if (params?.domain) {
+      this._createFlow(params.domain);
+    }
+    if (params?.brand) {
+      await loadPromise;
+      const brand = this._integrations?.[params.brand];
+      if (brand && "integrations" in brand && brand.integrations) {
+        this._fetchFlowsInProgress(Object.keys(brand.integrations));
+      }
+    }
   }
 
   public closeDialog() {
@@ -543,7 +553,7 @@ class AddIntegrationDialog extends LitElement {
     }
 
     if (integration.config_flow) {
-      this._createFlow(integration);
+      this._createFlow(integration.domain);
       return;
     }
 
@@ -563,25 +573,20 @@ class AddIntegrationDialog extends LitElement {
     showYamlIntegrationDialog(this, { manifest });
   }
 
-  private async _createFlow(integration: IntegrationListItem) {
-    const flowsInProgress = await this._fetchFlowsInProgress([
-      integration.domain,
-    ]);
+  private async _createFlow(domain: string) {
+    const flowsInProgress = await this._fetchFlowsInProgress([domain]);
 
     if (flowsInProgress?.length) {
-      this._pickedBrand = integration.domain;
+      this._pickedBrand = domain;
       return;
     }
 
-    const manifest = await fetchIntegrationManifest(
-      this.hass,
-      integration.domain
-    );
+    const manifest = await fetchIntegrationManifest(this.hass, domain);
 
     this.closeDialog();
 
     showConfigFlowDialog(this, {
-      startFlowHandler: integration.domain,
+      startFlowHandler: domain,
       showAdvanced: this.hass.userData?.showAdvanced,
       manifest,
     });
diff --git a/src/panels/config/integrations/dialog-yaml-integration.ts b/src/panels/config/integrations/dialog-yaml-integration.ts
index 6e155d1472..4e3a6ad152 100644
--- a/src/panels/config/integrations/dialog-yaml-integration.ts
+++ b/src/panels/config/integrations/dialog-yaml-integration.ts
@@ -75,8 +75,6 @@ export class DialogYamlIntegration extends LitElement {
         text-decoration: none;
       }
       ha-dialog {
-        --mdc-dialog-heading-ink-color: var(--primary-text-color);
-        --mdc-dialog-content-ink-color: var(--primary-text-color);
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index ddb989f79e..d02d4b0b83 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -40,10 +40,6 @@ import {
   subscribeConfigFlowInProgress,
 } from "../../../data/config_flow";
 import type { DataEntryFlowProgress } from "../../../data/data_entry_flow";
-import {
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../../../data/device_registry";
 import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
 import {
   EntityRegistryEntry,
@@ -53,13 +49,13 @@ import {
   domainToName,
   fetchIntegrationManifest,
   fetchIntegrationManifests,
-  IntegrationManifest,
   IntegrationLogInfo,
+  IntegrationManifest,
   subscribeLogInfo,
 } from "../../../data/integration";
 import {
-  getIntegrationDescriptions,
   findIntegration,
+  getIntegrationDescriptions,
 } from "../../../data/integrations";
 import { scanUSBDevices } from "../../../data/usb";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
@@ -139,9 +135,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
   @state()
   private _entityRegistryEntries: EntityRegistryEntry[] = [];
 
-  @state()
-  private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
-
   @state()
   private _manifests: Record<string, IntegrationManifest> = {};
 
@@ -168,9 +161,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       subscribeEntityRegistry(this.hass.connection, (entries) => {
         this._entityRegistryEntries = entries;
       }),
-      subscribeDeviceRegistry(this.hass.connection, (entries) => {
-        this._deviceRegistryEntries = entries;
-      }),
       subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => {
         const integrations: Set<string> = new Set();
         const manifests: Set<string> = new Set();
@@ -513,7 +503,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     .items=${items}
                     .manifest=${this._manifests[domain]}
                     .entityRegistryEntries=${this._entityRegistryEntries}
-                    .deviceRegistryEntries=${this._deviceRegistryEntries}
                   ></ha-integration-card> `
               )
             : ""}
@@ -527,7 +516,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     .items=${items}
                     .manifest=${this._manifests[domain]}
                     .entityRegistryEntries=${this._entityRegistryEntries}
-                    .deviceRegistryEntries=${this._deviceRegistryEntries}
                     .supportsDiagnostics=${this._diagnosticHandlers
                       ? this._diagnosticHandlers[domain]
                       : false}
@@ -731,13 +719,8 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           }),
         })
       ) {
-        showConfigFlowDialog(this, {
-          dialogClosedCallback: () => {
-            this._handleFlowUpdated();
-          },
-          startFlowHandler: domain,
-          manifest: await fetchIntegrationManifest(this.hass, domain),
-          showAdvanced: this.hass.userData?.showAdvanced,
+        showAddIntegrationDialog(this, {
+          domain,
         });
       }
       return;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 01007b14c2..f9c56194a1 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-list";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import {
   mdiAlertCircle,
@@ -20,8 +20,6 @@ import {
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -30,6 +28,7 @@ import memoizeOne from "memoize-one";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
+import "../../../components/ha-list-item";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-svg-icon";
@@ -96,9 +95,6 @@ export class HaIntegrationCard extends LitElement {
   @property({ attribute: false })
   public entityRegistryEntries!: EntityRegistryEntry[];
 
-  @property({ attribute: false })
-  public deviceRegistryEntries!: DeviceRegistryEntry[];
-
   @property() public selectedConfigEntryId?: string;
 
   @property({ type: Boolean }) public entryDisabled = false;
@@ -174,20 +170,19 @@ export class HaIntegrationCard extends LitElement {
 
   private _renderGroupedIntegration(): TemplateResult {
     return html`
-      <paper-listbox class="ha-scrollbar">
+      <mwc-list class="ha-scrollbar">
         ${this.items.map(
           (item) =>
-            html`<paper-item
+            html`<ha-list-item
+              hasMeta
               .entryId=${item.entry_id}
               @click=${this._selectConfigEntry}
-              ><paper-item-body
-                >${item.title ||
-                this.hass.localize(
-                  "ui.panel.config.integrations.config_entry.unnamed_entry"
-                )}</paper-item-body
-              >
+              >${item.title ||
+              this.hass.localize(
+                "ui.panel.config.integrations.config_entry.unnamed_entry"
+              )}
               ${item.state === "setup_in_progress"
-                ? html`<span>
+                ? html`<span slot="meta">
                     <ha-svg-icon
                       class="info"
                       .path=${mdiProgressHelper}
@@ -198,9 +193,8 @@ export class HaIntegrationCard extends LitElement {
                       )}
                     </simple-tooltip>
                   </span>`
-                : ""}
-              ${ERROR_STATES.includes(item.state)
-                ? html`<span>
+                : ERROR_STATES.includes(item.state)
+                ? html`<span slot="meta">
                     <ha-svg-icon
                       class="error"
                       .path=${item.state === "setup_retry"
@@ -213,17 +207,16 @@ export class HaIntegrationCard extends LitElement {
                       )}
                     </simple-tooltip>
                   </span>`
-                : ""}
-              <ha-icon-next></ha-icon-next>
-            </paper-item>`
+                : html`<ha-icon-next slot="meta"></ha-icon-next>`}
+            </ha-list-item>`
         )}
-      </paper-listbox>
+      </mwc-list>
     `;
   }
 
   private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult {
-    const devices = this._getDevices(item, this.deviceRegistryEntries);
-    const services = this._getServices(item, this.deviceRegistryEntries);
+    const devices = this._getDevices(item, this.hass.devices);
+    const services = this._getServices(item, this.hass.devices);
     const entities = this._getEntities(item, this.entityRegistryEntries);
 
     let stateText: Parameters<typeof this.hass.localize> | undefined;
@@ -380,7 +373,7 @@ export class HaIntegrationCard extends LitElement {
           RECOVERABLE_STATES.includes(item.state) &&
           item.supports_unload &&
           item.source !== "system"
-            ? html`<mwc-list-item
+            ? html`<ha-list-item
                 @request-selected=${this._handleReload}
                 graphic="icon"
               >
@@ -388,22 +381,22 @@ export class HaIntegrationCard extends LitElement {
                   "ui.panel.config.integrations.config_entry.reload"
                 )}
                 <ha-svg-icon slot="graphic" .path=${mdiReload}></ha-svg-icon>
-              </mwc-list-item>`
+              </ha-list-item>`
             : ""}
 
-          <mwc-list-item @request-selected=${this._handleRename} graphic="icon">
+          <ha-list-item @request-selected=${this._handleRename} graphic="icon">
             ${this.hass.localize(
               "ui.panel.config.integrations.config_entry.rename"
             )}
             <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
-          </mwc-list-item>
+          </ha-list-item>
           ${this.supportsDiagnostics && item.state === "loaded"
             ? html`<a
                 href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
                 target="_blank"
                 @click=${this._signUrl}
               >
-                <mwc-list-item graphic="icon">
+                <ha-list-item graphic="icon">
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.download_diagnostics"
                   )}
@@ -411,11 +404,11 @@ export class HaIntegrationCard extends LitElement {
                     slot="graphic"
                     .path=${mdiDownload}
                   ></ha-svg-icon>
-                </mwc-list-item>
+                </ha-list-item>
               </a>`
             : ""}
           ${this.logInfo
-            ? html`<mwc-list-item
+            ? html`<ha-list-item
                 @request-selected=${this.logInfo.level === LogSeverity.DEBUG
                   ? this._handleDisableDebugLogging
                   : this._handleEnableDebugLogging}
@@ -434,7 +427,7 @@ export class HaIntegrationCard extends LitElement {
                     ? mdiBugStop
                     : mdiBugPlay}
                 ></ha-svg-icon>
-              </mwc-list-item>`
+              </ha-list-item>`
             : ""}
           ${this.manifest &&
           (this.manifest.is_built_in ||
@@ -453,7 +446,7 @@ export class HaIntegrationCard extends LitElement {
                 rel="noreferrer"
                 target="_blank"
               >
-                <mwc-list-item graphic="icon" hasMeta>
+                <ha-list-item graphic="icon" hasMeta>
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.documentation"
                   )}
@@ -462,7 +455,7 @@ export class HaIntegrationCard extends LitElement {
                     .path=${mdiBookshelf}
                   ></ha-svg-icon>
                   <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-                </mwc-list-item>
+                </ha-list-item>
               </a>`
             : ""}
           ${this.manifest &&
@@ -472,19 +465,19 @@ export class HaIntegrationCard extends LitElement {
                 rel="noreferrer"
                 target="_blank"
               >
-                <mwc-list-item graphic="icon" hasMeta>
+                <ha-list-item graphic="icon" hasMeta>
                   ${this.hass.localize(
                     "ui.panel.config.integrations.config_entry.known_issues"
                   )}
                   <ha-svg-icon slot="graphic" .path=${mdiBug}></ha-svg-icon>
                   <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
-                </mwc-list-item>
+                </ha-list-item>
               </a>`
             : ""}
 
           <li divider role="separator"></li>
 
-          <mwc-list-item
+          <ha-list-item
             @request-selected=${this._handleSystemOptions}
             graphic="icon"
           >
@@ -492,9 +485,9 @@ export class HaIntegrationCard extends LitElement {
               "ui.panel.config.integrations.config_entry.system_options"
             )}
             <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
-          </mwc-list-item>
+          </ha-list-item>
           ${item.disabled_by === "user"
-            ? html`<mwc-list-item
+            ? html`<ha-list-item
                 @request-selected=${this._handleEnable}
                 graphic="icon"
               >
@@ -503,9 +496,9 @@ export class HaIntegrationCard extends LitElement {
                   slot="graphic"
                   .path=${mdiPlayCircleOutline}
                 ></ha-svg-icon>
-              </mwc-list-item>`
+              </ha-list-item>`
             : item.source !== "system"
-            ? html`<mwc-list-item
+            ? html`<ha-list-item
                 class="warning"
                 @request-selected=${this._handleDisable}
                 graphic="icon"
@@ -516,10 +509,10 @@ export class HaIntegrationCard extends LitElement {
                   class="warning"
                   .path=${mdiStopCircleOutline}
                 ></ha-svg-icon>
-              </mwc-list-item>`
+              </ha-list-item>`
             : ""}
           ${item.source !== "system"
-            ? html`<mwc-list-item
+            ? html`<ha-list-item
                 class="warning"
                 @request-selected=${this._handleDelete}
                 graphic="icon"
@@ -532,7 +525,7 @@ export class HaIntegrationCard extends LitElement {
                   class="warning"
                   .path=${mdiDelete}
                 ></ha-svg-icon>
-              </mwc-list-item>`
+              </ha-list-item>`
             : ""}
         </ha-button-menu>
       </div>
@@ -606,12 +599,12 @@ export class HaIntegrationCard extends LitElement {
   private _getDevices = memoizeOne(
     (
       configEntry: ConfigEntry,
-      deviceRegistryEntries: DeviceRegistryEntry[]
+      deviceRegistryEntries: HomeAssistant["devices"]
     ): DeviceRegistryEntry[] => {
       if (!deviceRegistryEntries) {
         return [];
       }
-      return deviceRegistryEntries.filter(
+      return Object.values(deviceRegistryEntries).filter(
         (device) =>
           device.config_entries.includes(configEntry.entry_id) &&
           device.entry_type !== "service"
@@ -622,12 +615,12 @@ export class HaIntegrationCard extends LitElement {
   private _getServices = memoizeOne(
     (
       configEntry: ConfigEntry,
-      deviceRegistryEntries: DeviceRegistryEntry[]
+      deviceRegistryEntries: HomeAssistant["devices"]
     ): DeviceRegistryEntry[] => {
       if (!deviceRegistryEntries) {
         return [];
       }
-      return deviceRegistryEntries.filter(
+      return Object.values(deviceRegistryEntries).filter(
         (device) =>
           device.config_entries.includes(configEntry.entry_id) &&
           device.entry_type === "service"
@@ -1001,16 +994,16 @@ export class HaIntegrationCard extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        paper-listbox {
+        mwc-list {
           border-radius: 0 0 var(--ha-card-border-radius, 16px)
             var(--ha-card-border-radius, 16px);
         }
         @media (min-width: 563px) {
           ha-card.group {
             position: relative;
-            min-height: 164px;
+            min-height: 195px;
           }
-          paper-listbox {
+          mwc-list {
             position: absolute;
             top: 64px;
             left: 0;
@@ -1018,25 +1011,24 @@ export class HaIntegrationCard extends LitElement {
             bottom: 0;
             overflow: auto;
           }
-          .disabled paper-listbox {
+          .disabled mwc-list {
             top: 88px;
           }
         }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
-        paper-item-body {
+        ha-list-item {
           word-wrap: break-word;
-          display: -webkit-box;
+          display: -webkit-flex;
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           overflow: hidden;
           text-overflow: ellipsis;
         }
-        mwc-list-item ha-svg-icon {
+        ha-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }
+        ha-icon-next {
+          width: 24px;
+        }
         ha-svg-icon[slot="meta"] {
           width: 18px;
           height: 18px;
diff --git a/src/panels/config/integrations/show-add-integration-dialog.ts b/src/panels/config/integrations/show-add-integration-dialog.ts
index 0bfbf0cb76..6fdd6243ac 100644
--- a/src/panels/config/integrations/show-add-integration-dialog.ts
+++ b/src/panels/config/integrations/show-add-integration-dialog.ts
@@ -3,6 +3,7 @@ import { IntegrationManifest } from "../../../data/integration";
 
 export interface AddIntegrationDialogParams {
   brand?: string;
+  domain?: string;
   initialFilter?: string;
 }
 
diff --git a/src/panels/config/lovelace/ha-config-lovelace.ts b/src/panels/config/lovelace/ha-config-lovelace.ts
index 280a951b38..727438f3b6 100644
--- a/src/panels/config/lovelace/ha-config-lovelace.ts
+++ b/src/panels/config/lovelace/ha-config-lovelace.ts
@@ -1,3 +1,4 @@
+import { mdiViewDashboard } from "@mdi/js";
 import { customElement, property } from "lit/decorators";
 import {
   HassRouterPage,
@@ -10,7 +11,7 @@ export const lovelaceTabs = [
     component: "lovelace",
     path: "/config/lovelace/dashboards",
     translationKey: "ui.panel.config.lovelace.dashboards.caption",
-    icon: "hass:view-dashboard",
+    iconPath: mdiViewDashboard,
   },
 ];
 
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts
index 5bb82e7973..ec254712fb 100644
--- a/src/panels/config/network/supervisor-network.ts
+++ b/src/panels/config/network/supervisor-network.ts
@@ -301,7 +301,7 @@ export class HassioNetwork extends LitElement {
         <div class="radio-row">
           <ha-formfield
             .label=${this.hass.localize(
-              "ui.panel.config.network.supervisor.dhcp"
+              "ui.panel.config.network.supervisor.auto"
             )}
           >
             <ha-radio
diff --git a/src/panels/config/script/blueprint-script-editor.ts b/src/panels/config/script/blueprint-script-editor.ts
index 20746fcdbb..d6057373af 100644
--- a/src/panels/config/script/blueprint-script-editor.ts
+++ b/src/panels/config/script/blueprint-script-editor.ts
@@ -102,7 +102,12 @@ export class HaBlueprintScriptEditor extends LitElement {
                     ([key, value]) =>
                       html`<ha-settings-row .narrow=${this.narrow}>
                         <span slot="heading">${value?.name || key}</span>
-                        <span slot="description">${value?.description}</span>
+                        <ha-markdown
+                          slot="description"
+                          class="card-content"
+                          breaks
+                          .content=${value?.description}
+                        ></ha-markdown>
                         ${value?.selector
                           ? html`<ha-selector
                               .hass=${this.hass}
diff --git a/src/panels/config/script/ha-script-trace.ts b/src/panels/config/script/ha-script-trace.ts
index 880ee8da1f..54bb1542d2 100644
--- a/src/panels/config/script/ha-script-trace.ts
+++ b/src/panels/config/script/ha-script-trace.ts
@@ -508,7 +508,7 @@ export class HaScriptTrace extends LitElement {
         }
 
         .main {
-          height: calc(100% - var(--header-height));
+          min-height: calc(100% - var(--header-height));
           display: flex;
           background-color: var(--card-background-color);
         }
diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts
new file mode 100644
index 0000000000..19d78a6527
--- /dev/null
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts
@@ -0,0 +1,114 @@
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { SchemaUnion } from "../../../../components/ha-form/types";
+import { AssistPipeline } from "../../../../data/assist_pipeline";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("assist-pipeline-detail-config")
+export class AssistPipelineDetailConfig extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public data?: Partial<AssistPipeline>;
+
+  @property() public supportedLanguages?: string[];
+
+  public async focus() {
+    await this.updateComplete;
+    const input = this.renderRoot?.querySelector("ha-form");
+    input?.focus();
+  }
+
+  private _schema = memoizeOne(
+    (supportedLanguages?: string[]) =>
+      [
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "name",
+              required: true,
+              selector: {
+                text: {},
+              },
+            },
+            {
+              name: "language",
+              required: true,
+              selector: {
+                language: {
+                  languages: supportedLanguages ?? [],
+                },
+              },
+            },
+          ] as const,
+        },
+      ] as const
+  );
+
+  private _computeLabel = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
+    this.hass.localize(
+      `ui.panel.config.voice_assistants.assistants.pipeline.detail.form.${schema.name}`
+    );
+
+  protected render() {
+    return html`
+      <div class="section">
+        <div class="intro">
+          <h3>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.config.title`
+            )}
+          </h3>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.config.description`
+            )}
+          </p>
+        </div>
+        <ha-form
+          .schema=${this._schema(this.supportedLanguages)}
+          .data=${this.data}
+          .hass=${this.hass}
+          .computeLabel=${this._computeLabel}
+        ></ha-form>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .section {
+        border: 1px solid var(--divider-color);
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 16px;
+      }
+      .intro {
+        margin-bottom: 16px;
+      }
+      h3 {
+        font-weight: normal;
+        font-size: 22px;
+        line-height: 28px;
+        margin-top: 0;
+        margin-bottom: 4px;
+      }
+      p {
+        color: var(--secondary-text-color);
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-pipeline-detail-config": AssistPipelineDetailConfig;
+  }
+}
diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts
new file mode 100644
index 0000000000..c4f40ad904
--- /dev/null
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts
@@ -0,0 +1,125 @@
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { LocalizeKeys } from "../../../../common/translations/localize";
+import { AssistPipeline } from "../../../../data/assist_pipeline";
+import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-form/ha-form";
+import { fireEvent } from "../../../../common/dom/fire_event";
+
+@customElement("assist-pipeline-detail-conversation")
+export class AssistPipelineDetailConversation extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public data?: Partial<AssistPipeline>;
+
+  @state() private _supportedLanguages?: "*" | string[];
+
+  private _schema = memoizeOne(
+    (language?: string, supportedLanguages?: "*" | string[]) =>
+      [
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "conversation_engine",
+              required: true,
+              selector: {
+                conversation_agent: {
+                  language,
+                },
+              },
+            },
+            supportedLanguages !== "*" && supportedLanguages?.length
+              ? {
+                  name: "conversation_language",
+                  required: true,
+                  selector: {
+                    language: { languages: supportedLanguages, no_sort: true },
+                  },
+                }
+              : { name: "", type: "constant" },
+          ] as const,
+        },
+      ] as const
+  );
+
+  private _computeLabel = (schema): string =>
+    schema.name
+      ? this.hass.localize(
+          `ui.panel.config.voice_assistants.assistants.pipeline.detail.form.${schema.name}` as LocalizeKeys
+        )
+      : "";
+
+  protected render() {
+    return html`
+      <div class="section">
+        <div class="intro">
+          <h3>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.conversation.title`
+            )}
+          </h3>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.conversation.description`
+            )}
+          </p>
+        </div>
+        <ha-form
+          .schema=${this._schema(this.data?.language, this._supportedLanguages)}
+          .data=${this.data}
+          .hass=${this.hass}
+          .computeLabel=${this._computeLabel}
+          @supported-languages-changed=${this._supportedLanguagesChanged}
+        ></ha-form>
+      </div>
+    `;
+  }
+
+  private _supportedLanguagesChanged(ev) {
+    if (ev.detail.value === "*") {
+      // wait for update of conversation_engine
+      setTimeout(() => {
+        const value = { ...this.data };
+        value.conversation_language = "*";
+        fireEvent(this, "value-changed", { value });
+      }, 0);
+    }
+    this._supportedLanguages = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .section {
+        border: 1px solid var(--divider-color);
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 16px;
+      }
+      .intro {
+        margin-bottom: 16px;
+      }
+      h3 {
+        font-weight: normal;
+        font-size: 22px;
+        line-height: 28px;
+        margin-top: 0;
+        margin-bottom: 4px;
+      }
+      p {
+        color: var(--secondary-text-color);
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-pipeline-detail-conversation": AssistPipelineDetailConversation;
+  }
+}
diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts
new file mode 100644
index 0000000000..37cbe01d03
--- /dev/null
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts
@@ -0,0 +1,115 @@
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { LocalizeKeys } from "../../../../common/translations/localize";
+import { AssistPipeline } from "../../../../data/assist_pipeline";
+import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-form/ha-form";
+
+@customElement("assist-pipeline-detail-stt")
+export class AssistPipelineDetailSTT extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public data?: Partial<AssistPipeline>;
+
+  @state() private _supportedLanguages?: string[];
+
+  private _schema = memoizeOne(
+    (language?: string, supportedLanguages?: string[]) =>
+      [
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "stt_engine",
+              selector: {
+                stt: {
+                  language,
+                },
+              },
+            },
+            supportedLanguages?.length
+              ? {
+                  name: "stt_language",
+                  required: true,
+                  selector: {
+                    language: { languages: supportedLanguages, no_sort: true },
+                  },
+                }
+              : { name: "", type: "constant" },
+          ] as const,
+        },
+      ] as const
+  );
+
+  private _computeLabel = (schema): string =>
+    schema.name
+      ? this.hass.localize(
+          `ui.panel.config.voice_assistants.assistants.pipeline.detail.form.${schema.name}` as LocalizeKeys
+        )
+      : "";
+
+  protected render() {
+    return html`
+      <div class="section">
+        <div class="intro">
+          <h3>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.stt.title`
+            )}
+          </h3>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.stt.description`
+            )}
+          </p>
+        </div>
+        <ha-form
+          .schema=${this._schema(this.data?.language, this._supportedLanguages)}
+          .data=${this.data}
+          .hass=${this.hass}
+          .computeLabel=${this._computeLabel}
+          @supported-languages-changed=${this._supportedLanguagesChanged}
+        ></ha-form>
+      </div>
+    `;
+  }
+
+  private _supportedLanguagesChanged(ev) {
+    this._supportedLanguages = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .section {
+        border: 1px solid var(--divider-color);
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 16px;
+      }
+      .intro {
+        margin-bottom: 16px;
+      }
+      h3 {
+        font-weight: normal;
+        font-size: 22px;
+        line-height: 28px;
+        margin-top: 0;
+        margin-bottom: 4px;
+      }
+      p {
+        color: var(--secondary-text-color);
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-pipeline-detail-stt": AssistPipelineDetailSTT;
+  }
+}
diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts
new file mode 100644
index 0000000000..4850a70caf
--- /dev/null
+++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts
@@ -0,0 +1,166 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { LocalizeKeys } from "../../../../common/translations/localize";
+import "../../../../components/ha-button";
+import "../../../../components/ha-form/ha-form";
+import { AssistPipeline } from "../../../../data/assist_pipeline";
+import { showTTSTryDialog } from "../../../../dialogs/tts-try/show-dialog-tts-try";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("assist-pipeline-detail-tts")
+export class AssistPipelineDetailTTS extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public data?: Partial<AssistPipeline>;
+
+  @state() private _supportedLanguages?: string[];
+
+  private _schema = memoizeOne(
+    (language?: string, supportedLanguages?: string[]) =>
+      [
+        {
+          name: "",
+          type: "grid",
+          schema: [
+            {
+              name: "tts_engine",
+              selector: {
+                tts: {
+                  language,
+                },
+              },
+            },
+            supportedLanguages?.length
+              ? {
+                  name: "tts_language",
+                  required: true,
+                  selector: {
+                    language: { languages: supportedLanguages, no_sort: true },
+                  },
+                }
+              : { name: "", type: "constant" },
+            {
+              name: "tts_voice",
+              selector: {
+                tts_voice: {},
+              },
+              context: { language: "tts_language", engineId: "tts_engine" },
+              required: true,
+            },
+          ] as const,
+        },
+      ] as const
+  );
+
+  private _computeLabel = (schema): string =>
+    schema.name
+      ? this.hass.localize(
+          `ui.panel.config.voice_assistants.assistants.pipeline.detail.form.${schema.name}` as LocalizeKeys
+        )
+      : "";
+
+  protected render() {
+    return html`
+      <div class="section">
+        <div class="content">
+          <div class="intro">
+          <h3>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.tts.title`
+            )}
+          </h3>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.voice_assistants.assistants.pipeline.detail.steps.tts.description`
+            )}
+          </p>
+          </div>
+          <ha-form
+            .schema=${this._schema(
+              this.data?.language,
+              this._supportedLanguages
+            )}
+            .data=${this.data}
+            .hass=${this.hass}
+            .computeLabel=${this._computeLabel}
+            @supported-languages-changed=${this._supportedLanguagesChanged}
+          ></ha-form>
+        </div>
+
+       ${
+         this.data?.tts_engine
+           ? html`<div class="footer">
+               <ha-button
+                 .label=${this.hass.localize(
+                   "ui.panel.config.voice_assistants.assistants.pipeline.detail.try_tts"
+                 )}
+                 @click=${this._preview}
+               >
+               </ha-button>
+             </div>`
+           : nothing
+       }
+        </div>
+      </div>
+    `;
+  }
+
+  private async _preview() {
+    if (!this.data) return;
+
+    const engine = this.data.tts_engine;
+    const language = this.data.tts_language || undefined;
+    const voice = this.data.tts_voice || undefined;
+
+    if (!engine) return;
+
+    showTTSTryDialog(this, {
+      engine,
+      language,
+      voice,
+    });
+  }
+
+  private _supportedLanguagesChanged(ev) {
+    this._supportedLanguages = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .section {
+        border: 1px solid var(--divider-color);
+        border-radius: 8px;
+      }
+      .content {
+        padding: 16px;
+      }
+      .intro {
+        margin-bottom: 16px;
+      }
+      h3 {
+        font-weight: normal;
+        font-size: 22px;
+        line-height: 28px;
+        margin-top: 0;
+        margin-bottom: 4px;
+      }
+      p {
+        color: var(--secondary-text-color);
+        font-size: var(--mdc-typography-body2-font-size, 0.875rem);
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+      .footer {
+        border-top: 1px solid var(--divider-color);
+        padding: 8px 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-pipeline-detail-tts": AssistPipelineDetailTTS;
+  }
+}
diff --git a/src/panels/config/voice-assistants/assist-pref.ts b/src/panels/config/voice-assistants/assist-pref.ts
new file mode 100644
index 0000000000..80034e3bd1
--- /dev/null
+++ b/src/panels/config/voice-assistants/assist-pref.ts
@@ -0,0 +1,249 @@
+import "@material/mwc-list/mwc-list";
+import { mdiHelpCircle, mdiPlus, mdiStar } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { formatLanguageCode } from "../../../common/language/format_language";
+import "../../../components/ha-alert";
+import "../../../components/ha-button";
+import "../../../components/ha-card";
+import "../../../components/ha-icon-next";
+import "../../../components/ha-list-item";
+import "../../../components/ha-svg-icon";
+import "../../../components/ha-switch";
+import {
+  AssistPipeline,
+  createAssistPipeline,
+  deleteAssistPipeline,
+  listAssistPipelines,
+  setAssistPipelinePreferred,
+  updateAssistPipeline,
+} from "../../../data/assist_pipeline";
+import { CloudStatus } from "../../../data/cloud";
+import { ExtEntityRegistryEntry } from "../../../data/entity_registry";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import { showVoiceAssistantPipelineDetailDialog } from "./show-dialog-voice-assistant-pipeline-detail";
+
+export class AssistPref extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() private extEntities?: Record<string, ExtEntityRegistryEntry>;
+
+  @state() private _pipelines: AssistPipeline[] = [];
+
+  @state() private _preferred: string | null = null;
+
+  @property() public cloudStatus?: CloudStatus;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+
+    listAssistPipelines(this.hass).then((pipelines) => {
+      this._pipelines = pipelines.pipelines;
+      this._preferred = pipelines.preferred_pipeline;
+    });
+  }
+
+  private _exposedEntities = memoizeOne(
+    (extEntities: Record<string, ExtEntityRegistryEntry>) =>
+      Object.values(extEntities).filter(
+        (entity) => entity.options?.conversation?.should_expose
+      ).length
+  );
+
+  protected render() {
+    return html`
+      <ha-card outlined>
+        <h1 class="card-header">
+          <img
+            alt=""
+            src=${brandsUrl({
+              domain: "assist_pipeline",
+              type: "icon",
+              darkOptimized: this.hass.themes?.darkMode,
+            })}
+            referrerpolicy="no-referrer"
+          />Assist
+        </h1>
+        <div class="header-actions">
+          <a
+            href="https://www.home-assistant.io/docs/assist/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              label="Learn how it works"
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
+        </div>
+        <mwc-list>
+          ${this._pipelines.map(
+            (pipeline) => html`
+              <ha-list-item
+                twoline
+                hasMeta
+                role="button"
+                @click=${this._editPipeline}
+                .id=${pipeline.id}
+              >
+                ${pipeline.name}
+                <span slot="secondary">
+                  ${formatLanguageCode(pipeline.language, this.hass.locale)}
+                </span>
+                ${this._preferred === pipeline.id
+                  ? html`<ha-svg-icon
+                      slot="meta"
+                      .path=${mdiStar}
+                    ></ha-svg-icon>`
+                  : ""}
+                <ha-icon-next slot="meta"></ha-icon-next>
+              </ha-list-item>
+            `
+          )}
+        </mwc-list>
+        <ha-button @click=${this._addPipeline} class="add" outlined>
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.assistants.pipeline.add_assistant"
+          )}
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-button>
+        <div class="card-actions">
+          <a
+            href="/config/voice-assistants/expose?assistants=conversation&historyBack"
+          >
+            <ha-button>
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.pipeline.exposed_entities",
+                {
+                  number: this.extEntities
+                    ? this._exposedEntities(this.extEntities)
+                    : 0,
+                }
+              )}
+            </ha-button>
+          </a>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _editPipeline(ev) {
+    const id = ev.currentTarget.id as string;
+
+    const pipeline = this._pipelines.find((res) => res.id === id);
+    this._openDialog(pipeline);
+  }
+
+  private _addPipeline() {
+    this._openDialog();
+  }
+
+  private async _openDialog(pipeline?: AssistPipeline): Promise<void> {
+    showVoiceAssistantPipelineDetailDialog(this, {
+      cloudActiveSubscription:
+        this.cloudStatus?.logged_in && this.cloudStatus.active_subscription,
+      pipeline,
+      preferred: pipeline?.id === this._preferred,
+      createPipeline: async (values) => {
+        const created = await createAssistPipeline(this.hass!, values);
+        this._pipelines = this._pipelines!.concat(created);
+      },
+      updatePipeline: async (values) => {
+        const updated = await updateAssistPipeline(
+          this.hass!,
+          pipeline!.id,
+          values
+        );
+        this._pipelines = this._pipelines!.map((res) =>
+          res === pipeline ? updated : res
+        );
+      },
+      setPipelinePreferred: async () => {
+        await setAssistPipelinePreferred(this.hass!, pipeline!.id);
+        this._preferred = pipeline!.id;
+      },
+      deletePipeline: async () => {
+        if (
+          !(await showConfirmationDialog(this, {
+            title: this.hass!.localize(
+              "ui.panel.config.voice_assistants.assistants.pipeline.delete.confirm_title",
+              { name: pipeline!.name }
+            ),
+            text: this.hass!.localize(
+              "ui.panel.config.voice_assistants.assistants.pipeline.delete.confirm_text",
+              { name: pipeline!.name }
+            ),
+            confirmText: this.hass!.localize("ui.common.delete"),
+            destructive: true,
+          }))
+        ) {
+          return false;
+        }
+
+        await deleteAssistPipeline(this.hass!, pipeline!.id);
+        this._pipelines = this._pipelines!.filter((res) => res !== pipeline);
+        return true;
+      },
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      a {
+        color: var(--primary-color);
+      }
+      .header-actions {
+        position: absolute;
+        right: 0px;
+        top: 24px;
+        display: flex;
+        flex-direction: row;
+      }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-inline-end: 8px;
+        margin-right: 8px;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
+      ha-list-item {
+        --mdc-list-item-meta-size: auto;
+        --mdc-list-item-meta-display: flex;
+      }
+      ha-svg-icon,
+      ha-icon-next {
+        width: 24px;
+      }
+      .add {
+        margin: 0 16px 16px;
+      }
+      .card-actions {
+        display: flex;
+      }
+      .card-actions a {
+        text-decoration: none;
+      }
+      .card-header {
+        display: flex;
+        align-items: center;
+        padding-bottom: 0;
+      }
+      img {
+        height: 28px;
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-pref": AssistPref;
+  }
+}
+
+customElements.define("assist-pref", AssistPref);
diff --git a/src/panels/config/voice-assistants/cloud-alexa-pref.ts b/src/panels/config/voice-assistants/cloud-alexa-pref.ts
new file mode 100644
index 0000000000..b4106304bf
--- /dev/null
+++ b/src/panels/config/voice-assistants/cloud-alexa-pref.ts
@@ -0,0 +1,294 @@
+import "@material/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { isEmptyFilter } from "../../../common/entity/entity_filter";
+import "../../../components/ha-alert";
+import "../../../components/ha-card";
+import "../../../components/ha-settings-row";
+import "../../../components/ha-switch";
+import type { HaSwitch } from "../../../components/ha-switch";
+import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
+import { ExtEntityRegistryEntry } from "../../../data/entity_registry";
+import {
+  getExposeNewEntities,
+  setExposeNewEntities,
+} from "../../../data/voice";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+
+export class CloudAlexaPref extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() private extEntities?: Record<string, ExtEntityRegistryEntry>;
+
+  @property() public cloudStatus?: CloudStatusLoggedIn;
+
+  @state() private _exposeNew?: boolean;
+
+  private _exposedEntities = memoizeOne(
+    (extEntities: Record<string, ExtEntityRegistryEntry>) =>
+      Object.values(extEntities).filter(
+        (entity) => entity.options?.["cloud.alexa"]?.should_expose
+      ).length
+  );
+
+  protected willUpdate() {
+    if (!this.hasUpdated) {
+      getExposeNewEntities(this.hass, "cloud.alexa").then((value) => {
+        this._exposeNew = value.expose_new;
+      });
+    }
+  }
+
+  protected render() {
+    if (!this.cloudStatus) {
+      return nothing;
+    }
+
+    const alexa_registered = this.cloudStatus.alexa_registered;
+    const { alexa_enabled, alexa_report_state } = this.cloudStatus!.prefs;
+
+    const manualConfig = !isEmptyFilter(this.cloudStatus.alexa_entities);
+
+    return html`
+      <ha-card outlined>
+        <h1 class="card-header">
+          <img
+            alt=""
+            src=${brandsUrl({
+              domain: "alexa",
+              type: "icon",
+              darkOptimized: this.hass.themes?.darkMode,
+            })}
+            referrerpolicy="no-referrer"
+          />${this.hass.localize("ui.panel.config.cloud.account.alexa.title")}
+        </h1>
+        <div class="header-actions">
+          <a
+            href="https://www.nabucasa.com/config/amazon_alexa/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.alexa.link_learn_how_it_works"
+              )}
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
+          <ha-switch
+            .checked=${alexa_enabled}
+            @change=${this._enabledToggleChanged}
+          ></ha-switch>
+        </div>
+        <div class="card-content">
+          <p>
+            ${this.hass!.localize("ui.panel.config.cloud.account.alexa.info")}
+          </p>
+          ${manualConfig
+            ? html`<ha-alert alert-type="warning">
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.account.alexa.manual_config"
+                )}
+              </ha-alert>`
+            : ""}
+          ${!alexa_enabled
+            ? ""
+            : html`${!alexa_registered
+                  ? html`<ha-alert
+                      .title=${this.hass.localize(
+                        "ui.panel.config.cloud.account.alexa.not_configured_title"
+                      )}
+                    >
+                      ${this.hass.localize(
+                        "ui.panel.config.cloud.account.alexa.not_configured_text"
+                      )}
+
+                      <ul>
+                        <li>
+                          <a
+                            href="https://skills-store.amazon.com/deeplink/dp/B0772J1QKB?deviceType=app"
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            ${this.hass!.localize(
+                              "ui.panel.config.cloud.account.alexa.enable_ha_skill"
+                            )}
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            href="https://www.nabucasa.com/config/amazon_alexa/"
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            ${this.hass!.localize(
+                              "ui.panel.config.cloud.account.alexa.config_documentation"
+                            )}
+                          </a>
+                        </li>
+                      </ul>
+                    </ha-alert>`
+                  : ""}<ha-settings-row>
+                  <span slot="heading">
+                    ${this.hass!.localize(
+                      "ui.panel.config.cloud.account.alexa.expose_new_entities"
+                    )}
+                  </span>
+                  <span slot="description">
+                    ${this.hass!.localize(
+                      "ui.panel.config.cloud.account.alexa.expose_new_entities_info"
+                    )}
+                  </span>
+                  <ha-switch
+                    .checked=${this._exposeNew}
+                    .disabled=${this._exposeNew === undefined}
+                    @change=${this._exposeNewToggleChanged}
+                  ></ha-switch> </ha-settings-row
+                >${alexa_registered
+                  ? html`
+                      <ha-settings-row>
+                        <span slot="heading">
+                          ${this.hass!.localize(
+                            "ui.panel.config.cloud.account.alexa.enable_state_reporting"
+                          )}
+                        </span>
+                        <span slot="description">
+                          ${this.hass!.localize(
+                            "ui.panel.config.cloud.account.alexa.info_state_reporting"
+                          )}
+                        </span>
+                        <ha-switch
+                          .checked=${alexa_report_state}
+                          @change=${this._reportToggleChanged}
+                        ></ha-switch>
+                      </ha-settings-row>
+                    `
+                  : ""}`}
+        </div>
+        ${alexa_enabled
+          ? html`<div class="card-actions">
+              <a
+                href="/config/voice-assistants/expose?assistants=cloud.alexa&historyBack"
+              >
+                <mwc-button>
+                  ${manualConfig
+                    ? this.hass!.localize(
+                        "ui.panel.config.cloud.account.alexa.show_entities"
+                      )
+                    : this.hass.localize(
+                        "ui.panel.config.cloud.account.alexa.exposed_entities",
+                        {
+                          number: this.extEntities
+                            ? this._exposedEntities(this.extEntities)
+                            : 0,
+                        }
+                      )}
+                </mwc-button>
+              </a>
+            </div>`
+          : nothing}
+      </ha-card>
+    `;
+  }
+
+  private async _exposeNewToggleChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+    if (this._exposeNew === undefined || this._exposeNew === toggle.checked) {
+      return;
+    }
+    try {
+      await setExposeNewEntities(this.hass, "cloud.alexa", toggle.checked);
+    } catch (err: any) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private async _enabledToggleChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+    try {
+      await updateCloudPref(this.hass!, { alexa_enabled: toggle.checked! });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private async _reportToggleChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+    try {
+      await updateCloudPref(this.hass!, {
+        alexa_report_state: toggle.checked!,
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      alert(
+        `${this.hass!.localize(
+          "ui.panel.config.cloud.account.alexa.state_reporting_error",
+          "enable_disable",
+          this.hass!.localize(
+            toggle.checked
+              ? "ui.panel.config.cloud.account.alexa.enable"
+              : "ui.panel.config.cloud.account.alexa.disable"
+          )
+        )} ${err.message}`
+      );
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      a {
+        color: var(--primary-color);
+      }
+      ha-settings-row {
+        padding: 0;
+      }
+      .header-actions {
+        position: absolute;
+        right: 24px;
+        top: 24px;
+        display: flex;
+        flex-direction: row;
+      }
+      :host([dir="rtl"]) .header-actions {
+        right: auto;
+        left: 24px;
+      }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-inline-end: 8px;
+        margin-right: 8px;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
+      .card-actions {
+        display: flex;
+      }
+      .card-actions a {
+        text-decoration: none;
+      }
+      .card-header {
+        display: flex;
+        align-items: center;
+      }
+      img {
+        height: 28px;
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-alexa-pref": CloudAlexaPref;
+  }
+}
+
+customElements.define("cloud-alexa-pref", CloudAlexaPref);
diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts
new file mode 100644
index 0000000000..f762251d78
--- /dev/null
+++ b/src/panels/config/voice-assistants/cloud-discover.ts
@@ -0,0 +1,206 @@
+import { mdiMicrophoneMessage, mdiOpenInNew } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-card";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import "../../../components/ha-svg-icon";
+import "../../../components/ha-button";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+
+@customElement("cloud-discover")
+export class CloudDiscover extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected render() {
+    return html`
+      <ha-card outlined>
+        <div class="card-content">
+          <h1 class="header">
+            ${this.hass.localize(
+              "ui.panel.config.voice_assistants.assistants.cloud.header"
+            )}
+          </h1>
+          <div class="features">
+            <div class="feature">
+              <div class="logos">
+                <img
+                  alt="Google Assistant"
+                  src=${brandsUrl({
+                    domain: "google_assistant",
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                />
+                <img
+                  alt="Amazon Alexa"
+                  src=${brandsUrl({
+                    domain: "alexa",
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                />
+              </div>
+              <h2>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.assistants.title"
+                )}
+              </h2>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.assistants.text"
+                )}
+              </p>
+            </div>
+            <div class="feature">
+              <div class="logos">
+                <div class="round-icon">
+                  <ha-svg-icon .path=${mdiMicrophoneMessage}></ha-svg-icon>
+                </div>
+              </div>
+              <h2>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.speech.title"
+                )}
+              </h2>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.voice_assistants.assistants.cloud.features.speech.text"
+                )}
+              </p>
+            </div>
+          </div>
+          <div class="more">
+            <a href="https://www.nabucasa.com" target="_blank" rel="noreferrer">
+              ${this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.cloud.and_more"
+              )}
+              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+            </a>
+          </div>
+        </div>
+        ${isComponentLoaded(this.hass, "cloud")
+          ? html`
+              <div class="card-actions">
+                <a href="/config/cloud/register">
+                  <ha-button unelevated>
+                    ${this.hass.localize(
+                      "ui.panel.config.voice_assistants.assistants.cloud.try_one_month"
+                    )}
+                  </ha-button>
+                </a>
+                <a href="/config/cloud/login">
+                  <ha-button>
+                    ${this.hass.localize(
+                      "ui.panel.config.voice_assistants.assistants.cloud.sign_in"
+                    )}
+                  </ha-button>
+                </a>
+              </div>
+            `
+          : nothing}
+      </ha-card>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-card {
+        display: flex;
+        flex-direction: column;
+      }
+      .card-content {
+        padding: 24px 16px;
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+      }
+      .header {
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 36px;
+        text-align: center;
+        max-width: 600px;
+        margin: 0 auto 8px auto;
+      }
+      @media (min-width: 800px) {
+        .header {
+          font-size: 32px;
+          line-height: 40px;
+          margin-bottom: 16px;
+        }
+      }
+      .features {
+        display: grid;
+        grid-template-columns: auto;
+        grid-gap: 16px;
+        padding: 16px;
+      }
+      @media (min-width: 600px) {
+        .features {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+      .feature {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        margin-bottom: 16px;
+      }
+      .feature .logos {
+        margin-bottom: 16px;
+      }
+      .feature .logos > * {
+        width: 40px;
+        height: 40px;
+        margin: 0 4px;
+      }
+      .round-icon {
+        border-radius: 50%;
+        color: #6e41ab;
+        background-color: #e8dcf7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+      }
+      .feature h2 {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        margin-top: 0;
+        margin-bottom: 8px;
+      }
+      .feature p {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        margin: 0;
+      }
+      .more {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .more a {
+        text-decoration: none;
+        color: var(--primary-color);
+        font-weight: 500;
+        font-size: 14px;
+      }
+      .more a ha-svg-icon {
+        --mdc-icon-size: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-discover": CloudDiscover;
+  }
+}
diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts
new file mode 100644
index 0000000000..3c28d1b636
--- /dev/null
+++ b/src/panels/config/voice-assistants/cloud-google-pref.ts
@@ -0,0 +1,374 @@
+import "@material/mwc-button";
+import { mdiHelpCircle } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-alert";
+import "../../../components/ha-card";
+import "../../../components/ha-settings-row";
+import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
+import { CloudStatusLoggedIn, updateCloudPref } from "../../../data/cloud";
+import { showSaveSuccessToast } from "../../../util/toast-saved-success";
+import { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import { isEmptyFilter } from "../../../common/entity/entity_filter";
+import {
+  getExposeNewEntities,
+  setExposeNewEntities,
+} from "../../../data/voice";
+import { ExtEntityRegistryEntry } from "../../../data/entity_registry";
+
+export class CloudGooglePref extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() private extEntities?: Record<string, ExtEntityRegistryEntry>;
+
+  @property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
+
+  @state() private _exposeNew?: boolean;
+
+  protected willUpdate() {
+    if (!this.hasUpdated) {
+      getExposeNewEntities(this.hass, "cloud.google_assistant").then(
+        (value) => {
+          this._exposeNew = value.expose_new;
+        }
+      );
+    }
+  }
+
+  private _exposedEntities = memoizeOne(
+    (extEntities: Record<string, ExtEntityRegistryEntry>) =>
+      Object.values(extEntities).filter(
+        (entity) => entity.options?.["cloud.google_assistant"]?.should_expose
+      ).length
+  );
+
+  protected render() {
+    if (!this.cloudStatus) {
+      return nothing;
+    }
+
+    const google_registered = this.cloudStatus.google_registered;
+    const { google_enabled, google_report_state, google_secure_devices_pin } =
+      this.cloudStatus.prefs;
+
+    const manualConfig = !isEmptyFilter(this.cloudStatus.google_entities);
+
+    return html`
+      <ha-card outlined>
+        <h1 class="card-header">
+          <img
+            alt=""
+            src=${brandsUrl({
+              domain: "google_assistant",
+              type: "icon",
+              darkOptimized: this.hass.themes?.darkMode,
+            })}
+            referrerpolicy="no-referrer"
+          />${this.hass.localize("ui.panel.config.cloud.account.google.title")}
+        </h1>
+        <div class="header-actions">
+          <a
+            href="https://www.nabucasa.com/config/google_assistant/"
+            target="_blank"
+            rel="noreferrer"
+            class="icon-link"
+          >
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.panel.config.cloud.account.google.link_learn_how_it_works"
+              )}
+              .path=${mdiHelpCircle}
+            ></ha-icon-button>
+          </a>
+          <ha-switch
+            .checked=${google_enabled}
+            @change=${this._enabledToggleChanged}
+          ></ha-switch>
+        </div>
+        <div class="card-content">
+          <p>
+            ${this.hass.localize("ui.panel.config.cloud.account.google.info")}
+          </p>
+          ${manualConfig
+            ? html`<ha-alert alert-type="warning">
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.account.google.manual_config"
+                )}
+              </ha-alert>`
+            : ""}
+          ${!google_enabled
+            ? ""
+            : html`${!google_registered
+                  ? html`
+                      <ha-alert
+                        .title=${this.hass.localize(
+                          "ui.panel.config.cloud.account.google.not_configured_title"
+                        )}
+                      >
+                        ${this.hass.localize(
+                          "ui.panel.config.cloud.account.google.not_configured_text"
+                        )}
+
+                        <ul>
+                          <li>
+                            <a
+                              href="https://assistant.google.com/services/a/uid/00000091fd5fb875?hl=en-US"
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              ${this.hass.localize(
+                                "ui.panel.config.cloud.account.google.enable_ha_skill"
+                              )}
+                            </a>
+                          </li>
+                          <li>
+                            <a
+                              href="https://www.nabucasa.com/config/google_assistant/"
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              ${this.hass.localize(
+                                "ui.panel.config.cloud.account.google.config_documentation"
+                              )}
+                            </a>
+                          </li>
+                        </ul>
+                      </ha-alert>
+                    `
+                  : ""}
+                <ha-settings-row>
+                  <span slot="heading">
+                    ${this.hass!.localize(
+                      "ui.panel.config.cloud.account.google.expose_new_entities"
+                    )}
+                  </span>
+                  <span slot="description">
+                    ${this.hass!.localize(
+                      "ui.panel.config.cloud.account.google.expose_new_entities_info"
+                    )}
+                  </span>
+                  <ha-switch
+                    .checked=${this._exposeNew}
+                    .disabled=${this._exposeNew === undefined}
+                    @change=${this._exposeNewToggleChanged}
+                  ></ha-switch> </ha-settings-row
+                >${google_registered
+                  ? html`
+                      ${this.cloudStatus.http_use_ssl
+                        ? html`
+                            <ha-alert
+                              alert-type="warning"
+                              .title=${this.hass.localize(
+                                "ui.panel.config.cloud.account.google.http_use_ssl_warning_title"
+                              )}
+                            >
+                              ${this.hass.localize(
+                                "ui.panel.config.cloud.account.google.http_use_ssl_warning_text"
+                              )}
+                              <a
+                                href="https://www.nabucasa.com/config/google_assistant/#local-communication"
+                                target="_blank"
+                                rel="noreferrer"
+                                >${this.hass.localize(
+                                  "ui.panel.config.common.learn_more"
+                                )}</a
+                              >
+                            </ha-alert>
+                          `
+                        : ""}
+
+                      <ha-settings-row>
+                        <span slot="heading">
+                          ${this.hass!.localize(
+                            "ui.panel.config.cloud.account.google.enable_state_reporting"
+                          )}
+                        </span>
+                        <span slot="description">
+                          ${this.hass!.localize(
+                            "ui.panel.config.cloud.account.google.info_state_reporting"
+                          )}
+                        </span>
+                        <ha-switch
+                          .checked=${google_report_state}
+                          @change=${this._reportToggleChanged}
+                        ></ha-switch>
+                      </ha-settings-row>
+
+                      <ha-settings-row>
+                        <span slot="heading">
+                          ${this.hass.localize(
+                            "ui.panel.config.cloud.account.google.security_devices"
+                          )}
+                        </span>
+                        <span slot="description">
+                          ${this.hass.localize(
+                            "ui.panel.config.cloud.account.google.enter_pin_info"
+                          )}
+                        </span>
+                      </ha-settings-row>
+
+                      <ha-textfield
+                        id="google_secure_devices_pin"
+                        .label=${this.hass.localize(
+                          "ui.panel.config.cloud.account.google.devices_pin"
+                        )}
+                        .placeholder=${this.hass.localize(
+                          "ui.panel.config.cloud.account.google.enter_pin_hint"
+                        )}
+                        .value=${google_secure_devices_pin || ""}
+                        @change=${this._pinChanged}
+                      ></ha-textfield>
+                    `
+                  : ""}`}
+        </div>
+        ${google_enabled
+          ? html`<div class="card-actions">
+              <a
+                href="/config/voice-assistants/expose?assistants=cloud.google_assistant&historyBack"
+              >
+                <mwc-button>
+                  ${manualConfig
+                    ? this.hass!.localize(
+                        "ui.panel.config.cloud.account.google.show_entities"
+                      )
+                    : this.hass.localize(
+                        "ui.panel.config.cloud.account.google.exposed_entities",
+                        {
+                          number: this.extEntities
+                            ? this._exposedEntities(this.extEntities)
+                            : 0,
+                        }
+                      )}
+                </mwc-button>
+              </a>
+            </div>`
+          : nothing}
+      </ha-card>
+    `;
+  }
+
+  private async _exposeNewToggleChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+    if (this._exposeNew === undefined || this._exposeNew === toggle.checked) {
+      return;
+    }
+    try {
+      await setExposeNewEntities(
+        this.hass,
+        "cloud.google_assistant",
+        toggle.checked
+      );
+    } catch (err: any) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private async _enabledToggleChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+    try {
+      await updateCloudPref(this.hass, { google_enabled: toggle.checked! });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private async _reportToggleChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+    try {
+      await updateCloudPref(this.hass, {
+        google_report_state: toggle.checked!,
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      alert(
+        `Unable to ${toggle.checked ? "enable" : "disable"} report state. ${
+          err.message
+        }`
+      );
+      toggle.checked = !toggle.checked;
+    }
+  }
+
+  private async _pinChanged(ev) {
+    const input = ev.target as HaTextField;
+    try {
+      await updateCloudPref(this.hass, {
+        [input.id]: input.value || null,
+      });
+      showSaveSuccessToast(this, this.hass);
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      alert(
+        `${this.hass.localize(
+          "ui.panel.config.cloud.account.google.enter_pin_error"
+        )} ${err.message}`
+      );
+      input.value = this.cloudStatus!.prefs.google_secure_devices_pin || "";
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      a {
+        color: var(--primary-color);
+      }
+      .header-actions {
+        position: absolute;
+        right: 24px;
+        top: 24px;
+        display: flex;
+        flex-direction: row;
+      }
+      :host([dir="rtl"]) .header-actions {
+        right: auto;
+        left: 24px;
+      }
+      .header-actions .icon-link {
+        margin-top: -16px;
+        margin-inline-end: 8px;
+        margin-right: 8px;
+        direction: var(--direction);
+        color: var(--secondary-text-color);
+      }
+      ha-settings-row {
+        padding: 0;
+      }
+      ha-textfield {
+        width: 250px;
+        display: block;
+        margin-top: 8px;
+      }
+      .card-actions {
+        display: flex;
+      }
+      .card-actions a {
+        text-decoration: none;
+      }
+      .warning {
+        color: var(--error-color);
+      }
+      .card-header {
+        display: flex;
+        align-items: center;
+      }
+      img {
+        height: 28px;
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cloud-google-pref": CloudGooglePref;
+  }
+}
+
+customElements.define("cloud-google-pref", CloudGooglePref);
diff --git a/src/panels/config/voice-assistants/debug/assist-debug.ts b/src/panels/config/voice-assistants/debug/assist-debug.ts
new file mode 100644
index 0000000000..623401231e
--- /dev/null
+++ b/src/panels/config/voice-assistants/debug/assist-debug.ts
@@ -0,0 +1,35 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant, Route } from "../../../../types";
+import "./assist-pipeline-debug";
+import "./assist-pipeline-run-debug";
+
+@customElement("assist-debug")
+export class AssistDebug extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  protected render() {
+    const pipelineId = this.route.path.substring(1);
+    if (pipelineId) {
+      return html`<assist-pipeline-debug
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .pipelineId=${pipelineId}
+      ></assist-pipeline-debug>`;
+    }
+    return html`<assist-pipeline-run-debug
+      .hass=${this.hass}
+      .narrow=${this.narrow}
+    ></assist-pipeline-run-debug>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-debug": AssistDebug;
+  }
+}
diff --git a/src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts b/src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts
new file mode 100644
index 0000000000..638fad5c3c
--- /dev/null
+++ b/src/panels/config/voice-assistants/debug/assist-pipeline-debug.ts
@@ -0,0 +1,200 @@
+import {
+  mdiMicrophoneMessage,
+  mdiRayEndArrow,
+  mdiRayStartArrow,
+} from "@mdi/js";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
+import {
+  listAssistPipelineRuns,
+  getAssistPipelineRun,
+  PipelineRunEvent,
+  assistRunListing,
+} from "../../../../data/assist_pipeline";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant, Route } from "../../../../types";
+import "./assist-render-pipeline-events";
+
+@customElement("assist-pipeline-debug")
+export class AssistPipelineDebug extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property() public pipelineId!: string;
+
+  @state() private _runId?: string;
+
+  @state() private _runs?: assistRunListing[];
+
+  @state() private _events?: PipelineRunEvent[];
+
+  protected render() {
+    return html`<hass-subpage
+      .narrow=${this.narrow}
+      .hass=${this.hass}
+      header="Debug Assistant"
+    >
+      <a
+        href="/config/voice-assistants/debug?pipeline=${this.pipelineId}"
+        slot="toolbar-icon"
+        ><ha-icon-button .path=${mdiMicrophoneMessage}></ha-icon-button
+      ></a>
+      <div class="toolbar">
+        ${this._runs?.length
+          ? html`
+              <ha-icon-button
+                .disabled=${this._runs[this._runs.length - 1]
+                  .pipeline_run_id === this._runId}
+                label="Older run"
+                @click=${this._pickOlderRun}
+                .path=${mdiRayEndArrow}
+              ></ha-icon-button>
+              <select .value=${this._runId} @change=${this._pickRun}>
+                ${repeat(
+                  this._runs,
+                  (run) => run.pipeline_run_id,
+                  (run) =>
+                    html`<option value=${run.pipeline_run_id}>
+                      ${formatDateTimeWithSeconds(
+                        new Date(run.timestamp),
+                        this.hass.locale
+                      )}
+                    </option>`
+                )}
+              </select>
+              <ha-icon-button
+                .disabled=${this._runs[0].pipeline_run_id === this._runId}
+                label="Newer run"
+                @click=${this._pickNewerRun}
+                .path=${mdiRayStartArrow}
+              ></ha-icon-button>
+            `
+          : ""}
+      </div>
+      ${this._runs?.length === 0
+        ? html`<div class="container">No runs found</div>`
+        : ""}
+      <div class="content">
+        ${this._events
+          ? html`<assist-render-pipeline-events
+              .hass=${this.hass}
+              .events=${this._events}
+            ></assist-render-pipeline-events>`
+          : ""}
+      </div>
+    </hass-subpage>`;
+  }
+
+  protected willUpdate(changedProperties) {
+    if (changedProperties.has("pipelineId")) {
+      this._fetchRuns();
+    }
+    if (changedProperties.has("_runId")) {
+      this._fetchEvents();
+    }
+  }
+
+  private async _fetchRuns() {
+    if (!this.pipelineId) {
+      this._runs = undefined;
+      return;
+    }
+    try {
+      this._runs = (
+        await listAssistPipelineRuns(this.hass, this.pipelineId)
+      ).pipeline_runs.reverse();
+    } catch (e: any) {
+      showAlertDialog(this, {
+        title: "Failed to fetch pipeline runs",
+        text: e.message,
+      });
+      return;
+    }
+    if (!this._runs.length) {
+      return;
+    }
+    if (
+      !this._runId ||
+      !this._runs.find((run) => run.pipeline_run_id === this._runId)
+    ) {
+      this._runId = this._runs[0].pipeline_run_id;
+      this._fetchEvents();
+    }
+  }
+
+  private async _fetchEvents() {
+    if (!this._runId) {
+      this._events = undefined;
+      return;
+    }
+    try {
+      this._events = (
+        await getAssistPipelineRun(this.hass, this.pipelineId, this._runId)
+      ).events;
+    } catch (e: any) {
+      showAlertDialog(this, {
+        title: "Failed to fetch events",
+        text: e.message,
+      });
+    }
+  }
+
+  private _pickOlderRun() {
+    const curIndex = this._runs!.findIndex(
+      (run) => run.pipeline_run_id === this._runId
+    );
+    this._runId = this._runs![curIndex + 1].pipeline_run_id;
+  }
+
+  private _pickNewerRun() {
+    const curIndex = this._runs!.findIndex(
+      (run) => run.pipeline_run_id === this._runId
+    );
+    this._runId = this._runs![curIndex - 1].pipeline_run_id;
+  }
+
+  private _pickRun(ev) {
+    this._runId = ev.target.value;
+  }
+
+  static styles = [
+    haStyle,
+    css`
+      .toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--header-height);
+        background-color: var(--primary-background-color);
+        color: var(--app-header-text-color, white);
+        border-bottom: var(--app-header-border-bottom, none);
+        box-sizing: border-box;
+      }
+      .content {
+        padding: 24px 0 32px;
+        max-width: 600px;
+        margin: 0 auto;
+        direction: ltr;
+      }
+      .container {
+        padding: 16px;
+      }
+      assist-render-pipeline-run {
+        padding-top: 16px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-pipeline-debug": AssistPipelineDebug;
+  }
+}
diff --git a/src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-pipeline-debug.ts b/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
similarity index 76%
rename from src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-pipeline-debug.ts
rename to src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
index 49906ad2a9..d9a496abae 100644
--- a/src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-pipeline-debug.ts
+++ b/src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts
@@ -1,28 +1,31 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import "../../../../../../components/ha-button";
+import { extractSearchParam } from "../../../../common/url/search-params";
+import "../../../../components/ha-assist-pipeline-picker";
+import "../../../../components/ha-button";
+import "../../../../components/ha-checkbox";
+import type { HaCheckbox } from "../../../../components/ha-checkbox";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-textfield";
+import type { HaTextField } from "../../../../components/ha-textfield";
 import {
   PipelineRun,
   PipelineRunOptions,
-  runVoiceAssistantPipeline,
-} from "../../../../../../data/voice_assistant";
-import "../../../../../../layouts/hass-subpage";
-import "../../../../../../components/ha-formfield";
-import "../../../../../../components/ha-checkbox";
-import { haStyle } from "../../../../../../resources/styles";
-import type { HomeAssistant } from "../../../../../../types";
+  runDebugAssistPipeline,
+} from "../../../../data/assist_pipeline";
 import {
   showAlertDialog,
   showPromptDialog,
-} from "../../../../../../dialogs/generic/show-dialog-box";
+} from "../../../../dialogs/generic/show-dialog-box";
+import "../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { AudioRecorder } from "../../../../util/audio-recorder";
+import { fileDownload } from "../../../../util/file_download";
 import "./assist-render-pipeline-run";
-import type { HaCheckbox } from "../../../../../../components/ha-checkbox";
-import type { HaTextField } from "../../../../../../components/ha-textfield";
-import "../../../../../../components/ha-textfield";
-import { fileDownload } from "../../../../../../util/file_download";
 
-@customElement("assist-pipeline-debug")
-export class AssistPipelineDebug extends LitElement {
+@customElement("assist-pipeline-run-debug")
+export class AssistPipelineRunDebug extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow!: boolean;
@@ -39,7 +42,8 @@ export class AssistPipelineDebug extends LitElement {
 
   @state() private _finished = false;
 
-  @state() private _languageOverride?: string;
+  @state() private _pipelineId?: string =
+    extractSearchParam("pipeline") || undefined;
 
   protected render(): TemplateResult {
     return html`
@@ -64,24 +68,31 @@ export class AssistPipelineDebug extends LitElement {
                 Download
               </ha-button>
             `
-          : html`
-              <ha-button slot="toolbar-icon" @click=${this._setLanguage}>
-                Set Language
-              </ha-button>
-            `}
+          : ""}
 
         <div class="content">
           <div class="start-row">
             ${this._pipelineRuns.length === 0
               ? html`
+                  <ha-assist-pipeline-picker
+                    .hass=${this.hass}
+                    .value=${this._pipelineId}
+                    @value-changed=${this._pipelinePicked}
+                  ></ha-assist-pipeline-picker>
                   <ha-button raised @click=${this._runTextPipeline}>
                     Run Text Pipeline
                   </ha-button>
-                  <ha-button raised @click=${this._runAudioPipeline}>
+                  <ha-button
+                    raised
+                    @click=${this._runAudioPipeline}
+                    .disabled=${!window.isSecureContext ||
+                    // @ts-ignore-next-line
+                    !(window.AudioContext || window.webkitAudioContext)}
+                  >
                     Run Audio Pipeline
                   </ha-button>
                 `
-              : this._pipelineRuns[0].init_options.start_stage === "intent"
+              : this._pipelineRuns[0].init_options!.start_stage === "intent"
               ? html`
                   <ha-textfield
                     id="continue-conversation-text"
@@ -169,28 +180,22 @@ export class AssistPipelineDebug extends LitElement {
   }
 
   private async _runAudioPipeline() {
-    // @ts-ignore-next-line
-    const context = new (window.AudioContext || window.webkitAudioContext)();
-    let stream: MediaStream;
-    try {
-      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    } catch (err) {
-      return;
-    }
+    const audioRecorder = new AudioRecorder((data) => {
+      if (this._audioBuffer) {
+        this._audioBuffer.push(data);
+      } else {
+        this._sendAudioChunk(data);
+      }
+    });
 
-    await context.audioWorklet.addModule(
-      new URL("./recorder.worklet.js", import.meta.url)
-    );
-
-    const source = context.createMediaStreamSource(stream);
-    const recorder = new AudioWorkletNode(context, "recorder.worklet");
-
-    this.hass.connection.socket!.binaryType = "arraybuffer";
+    this._audioBuffer = [];
+    await audioRecorder.start();
 
     let run: PipelineRun | undefined;
 
     let stopRecording: (() => void) | undefined = () => {
       stopRecording = undefined;
+      audioRecorder.close();
       // We're currently STTing, so finish audio
       if (run?.stage === "stt" && run.stt!.done === false) {
         if (this._audioBuffer) {
@@ -202,20 +207,6 @@ export class AssistPipelineDebug extends LitElement {
         this._sendAudioChunk(new Int16Array());
       }
       this._audioBuffer = undefined;
-      stream.getTracks()[0].stop();
-      context.close();
-    };
-    this._audioBuffer = [];
-    source.connect(recorder).connect(context.destination);
-    recorder.port.onmessage = (e) => {
-      if (!stopRecording) {
-        return;
-      }
-      if (this._audioBuffer) {
-        this._audioBuffer.push(e.data);
-      } else {
-        this._sendAudioChunk(e.data);
-      }
     };
 
     await this._doRunPipeline(
@@ -255,6 +246,9 @@ export class AssistPipelineDebug extends LitElement {
       {
         start_stage: "stt",
         end_stage: "tts",
+        input: {
+          sample_rate: audioRecorder.sampleRate!,
+        },
       }
     );
   }
@@ -266,7 +260,7 @@ export class AssistPipelineDebug extends LitElement {
     this._finished = false;
     let added = false;
     try {
-      await runVoiceAssistantPipeline(
+      await runDebugAssistPipeline(
         this.hass,
         (updatedRun) => {
           if (added) {
@@ -279,7 +273,7 @@ export class AssistPipelineDebug extends LitElement {
         },
         {
           ...options,
-          language: this._languageOverride,
+          pipeline: this._pipelineId,
           conversation_id: this.conversationId,
         }
       );
@@ -292,6 +286,7 @@ export class AssistPipelineDebug extends LitElement {
   }
 
   private _sendAudioChunk(chunk: Int16Array) {
+    this.hass.connection.socket!.binaryType = "arraybuffer";
     // Turn into 8 bit so we can prefix our handler ID.
     const data = new Uint8Array(1 + chunk.length * 2);
     data[0] = this._pipelineRuns[0].run.runner_data.stt_binary_handler_id!;
@@ -319,16 +314,8 @@ export class AssistPipelineDebug extends LitElement {
     );
   }
 
-  private async _setLanguage() {
-    const language = await showPromptDialog(this, {
-      title: "Language override",
-      inputLabel: "Language",
-      inputType: "text",
-      confirmText: "Set",
-    });
-    if (language) {
-      this._languageOverride = language;
-    }
+  private _pipelinePicked(ev) {
+    this._pipelineId = ev.detail.value;
   }
 
   static styles = [
@@ -344,8 +331,14 @@ export class AssistPipelineDebug extends LitElement {
         display: flex;
         justify-content: space-around;
         align-items: center;
+        flex-wrap: wrap;
         margin: 0 16px 16px;
       }
+      ha-assist-pipeline-picker {
+        display: block;
+        width: 100%;
+        margin-bottom: 16px;
+      }
       .start-row ha-textfield {
         flex: 1;
       }
@@ -353,7 +346,7 @@ export class AssistPipelineDebug extends LitElement {
         padding-top: 16px;
       }
       assist-render-pipeline-run + assist-render-pipeline-run {
-        border-top: 3px solid black;
+        border-top: 1px solid var(--divider-color);
       }
     `,
   ];
@@ -361,6 +354,6 @@ export class AssistPipelineDebug extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "assist-pipeline-debug": AssistPipelineDebug;
+    "assist-pipeline-run-debug": AssistPipelineRunDebug;
   }
 }
diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-events.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-events.ts
new file mode 100644
index 0000000000..0d9cc6d79c
--- /dev/null
+++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-events.ts
@@ -0,0 +1,57 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import {
+  PipelineRun,
+  PipelineRunEvent,
+  processEvent,
+} from "../../../../data/assist_pipeline";
+import type { HomeAssistant } from "../../../../types";
+import "./assist-render-pipeline-run";
+
+@customElement("assist-render-pipeline-events")
+export class AssistPipelineEvents extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public events!: PipelineRunEvent[];
+
+  private _processEvents = memoizeOne(
+    (events: PipelineRunEvent[]): PipelineRun | undefined => {
+      let run: PipelineRun | undefined;
+      events.forEach((event) => {
+        run = processEvent(run, event);
+      });
+      return run;
+    }
+  );
+
+  protected render(): TemplateResult {
+    const run = this._processEvents(this.events);
+    if (!run) {
+      if (this.events.length) {
+        return html`<ha-alert alert-type="error">Error showing run</ha-alert>
+          <ha-card>
+            <ha-expansion-panel>
+              <span slot="header">Raw</span>
+              <pre>${JSON.stringify(this.events, null, 2)}</pre>
+            </ha-expansion-panel>
+          </ha-card>`;
+      }
+      return html`<ha-alert alert-type="warning"
+        >There where no events in this run.</ha-alert
+      >`;
+    }
+    return html`
+      <assist-render-pipeline-run
+        .hass=${this.hass}
+        .pipelineRun=${run}
+      ></assist-render-pipeline-run>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "assist-render-pipeline-events": AssistPipelineEvents;
+  }
+}
diff --git a/src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
similarity index 69%
rename from src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-render-pipeline-run.ts
rename to src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
index 596b7f7560..739a829d75 100644
--- a/src/panels/config/integrations/integration-panels/voice_assistant/assist/assist-render-pipeline-run.ts
+++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts
@@ -1,13 +1,15 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../../../../components/ha-card";
-import "../../../../../../components/ha-alert";
-import "../../../../../../components/ha-button";
-import "../../../../../../components/ha-circular-progress";
-import "../../../../../../components/ha-expansion-panel";
-import type { PipelineRun } from "../../../../../../data/voice_assistant";
-import type { HomeAssistant } from "../../../../../../types";
-import { formatNumber } from "../../../../../../common/number/format_number";
+import "../../../../components/ha-card";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
+import "../../../../components/ha-circular-progress";
+import "../../../../components/ha-expansion-panel";
+import type { PipelineRun } from "../../../../data/assist_pipeline";
+import type { HomeAssistant } from "../../../../types";
+import { formatNumber } from "../../../../common/number/format_number";
+import "../../../../components/ha-yaml-editor";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 const RUN_DATA = {
   pipeline: "Pipeline",
@@ -20,11 +22,14 @@ const STT_DATA = {
 
 const INTENT_DATA = {
   engine: "Engine",
+  language: "Language",
   intent_input: "Input",
 };
 
 const TTS_DATA = {
   engine: "Engine",
+  language: "Language",
+  voice: "Voice",
   tts_input: "Input",
 };
 
@@ -38,8 +43,10 @@ const STAGES: Record<PipelineRun["stage"], number> = {
 };
 
 const hasStage = (run: PipelineRun, stage: PipelineRun["stage"]) =>
-  STAGES[run.init_options.start_stage] <= STAGES[stage] &&
-  STAGES[stage] <= STAGES[run.init_options.end_stage];
+  run.init_options
+    ? STAGES[run.init_options.start_stage] <= STAGES[stage] &&
+      STAGES[stage] <= STAGES[run.init_options.end_stage]
+    : stage in run;
 
 const maybeRenderError = (
   run: PipelineRun,
@@ -116,27 +123,35 @@ const dataMinusKeysRender = (
     render = true;
     result[key] = data[key];
   }
-  return render ? html`<pre>${JSON.stringify(result, null, 2)}</pre>` : "";
+  return render
+    ? html`<ha-expansion-panel>
+        <span slot="header">Raw</span>
+        <ha-yaml-editor readOnly autoUpdate .value=${result}></ha-yaml-editor>
+      </ha-expansion-panel>`
+    : "";
 };
 
 @customElement("assist-render-pipeline-run")
 export class AssistPipelineDebug extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() private pipelineRun!: PipelineRun;
+  @property() public pipelineRun!: PipelineRun;
 
   protected render(): TemplateResult {
     const lastRunStage: string = this.pipelineRun
-      ? ["tts", "intent", "stt"].find(
-          (stage) => this.pipelineRun![stage] !== undefined
-        ) || "ready"
+      ? ["tts", "intent", "stt"].find((stage) => stage in this.pipelineRun) ||
+        "ready"
       : "ready";
 
     const messages: Array<{ from: string; text: string }> = [];
 
     const userMessage =
-      this.pipelineRun.init_options.input?.text ||
-      this.pipelineRun?.stt?.stt_output?.text;
+      (this.pipelineRun.init_options &&
+      "text" in this.pipelineRun.init_options.input
+        ? this.pipelineRun.init_options.input.text
+        : undefined) ||
+      this.pipelineRun?.stt?.stt_output?.text ||
+      this.pipelineRun?.intent?.intent_input;
 
     if (userMessage) {
       messages.push({
@@ -192,6 +207,16 @@ export class AssistPipelineDebug extends LitElement {
                   ? html`
                       <div class="card-content">
                         ${renderData(this.pipelineRun.stt, STT_DATA)}
+                        <div class="row">
+                          <div>Language</div>
+                          <div>${this.pipelineRun.stt.metadata.language}</div>
+                        </div>
+                        ${this.pipelineRun.stt.stt_output
+                          ? html`<div class="row">
+                              <div>Output</div>
+                              <div>${this.pipelineRun.stt.stt_output.text}</div>
+                            </div>`
+                          : ""}
                         ${dataMinusKeysRender(this.pipelineRun.stt, STT_DATA)}
                       </div>
                     `
@@ -213,6 +238,25 @@ export class AssistPipelineDebug extends LitElement {
                   ? html`
                       <div class="card-content">
                         ${renderData(this.pipelineRun.intent, INTENT_DATA)}
+                        ${this.pipelineRun.intent.intent_output
+                          ? html`<div class="row">
+                                <div>Response type</div>
+                                <div>
+                                  ${this.pipelineRun.intent.intent_output
+                                    .response.response_type}
+                                </div>
+                              </div>
+                              ${this.pipelineRun.intent.intent_output.response
+                                .response_type === "error"
+                                ? html`<div class="row">
+                                    <div>Error code</div>
+                                    <div>
+                                      ${this.pipelineRun.intent.intent_output
+                                        .response.data.code}
+                                    </div>
+                                  </div>`
+                                : ""}`
+                          : ""}
                         ${dataMinusKeysRender(
                           this.pipelineRun.intent,
                           INTENT_DATA
@@ -237,6 +281,7 @@ export class AssistPipelineDebug extends LitElement {
                   ? html`
                       <div class="card-content">
                         ${renderData(this.pipelineRun.tts, TTS_DATA)}
+                        ${dataMinusKeysRender(this.pipelineRun.tts, TTS_DATA)}
                       </div>
                     `
                   : ""}
@@ -257,7 +302,11 @@ export class AssistPipelineDebug extends LitElement {
       <ha-card>
         <ha-expansion-panel>
           <span slot="header">Raw</span>
-          <pre>${JSON.stringify(this.pipelineRun, null, 2)}</pre>
+          <ha-yaml-editor
+            readOnly
+            autoUpdate
+            .value=${this.pipelineRun}
+          ></ha-yaml-editor>
         </ha-expansion-panel>
       </ha-card>
     `;
@@ -266,7 +315,12 @@ export class AssistPipelineDebug extends LitElement {
   private _playTTS(): void {
     const url = this.pipelineRun!.tts!.tts_output!.url;
     const audio = new Audio(url);
-    audio.play();
+    audio.addEventListener("error", () => {
+      showAlertDialog(this, { title: "Error", text: "Error playing audio" });
+    });
+    audio.addEventListener("canplaythrough", () => {
+      audio.play();
+    });
   }
 
   static styles = css`
@@ -282,12 +336,14 @@ export class AssistPipelineDebug extends LitElement {
       display: flex;
       justify-content: space-between;
     }
-    pre {
-      margin: 0;
-    }
     ha-expansion-panel {
       padding-left: 8px;
     }
+    .card-content ha-expansion-panel {
+      padding-left: 0px;
+      --expansion-panel-summary-padding: 0px;
+      --expansion-panel-content-padding: 0px;
+    }
     .heading {
       font-weight: 500;
       margin-bottom: 16px;
diff --git a/src/panels/config/voice-assistants/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts
new file mode 100644
index 0000000000..3acf0d1c65
--- /dev/null
+++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts
@@ -0,0 +1,243 @@
+import "@material/mwc-button";
+import "@material/mwc-list";
+import { mdiClose } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-check-list-item";
+import "../../../components/search-input";
+import {
+  computeEntityRegistryName,
+  ExtEntityRegistryEntry,
+} from "../../../data/entity_registry";
+import { voiceAssistants } from "../../../data/voice";
+import { haStyle, haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import "./entity-voice-settings";
+import { ExposeEntityDialogParams } from "./show-dialog-expose-entity";
+
+@customElement("dialog-expose-entity")
+class DialogExposeEntity extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: ExposeEntityDialogParams;
+
+  @state() private _filter?: string;
+
+  @state() private _selected: string[] = [];
+
+  public async showDialog(params: ExposeEntityDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    this._selected = [];
+    this._filter = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    const header = this.hass.localize(
+      "ui.panel.config.voice_assistants.expose.expose_dialog.header"
+    );
+
+    return html`
+      <ha-dialog open @closed=${this.closeDialog} .heading=${header}>
+        <div slot="heading">
+          <h2 class="header">
+            ${header}<span class="subtitle"
+              >${this.hass.localize(
+                "ui.panel.config.voice_assistants.expose.expose_dialog.expose_to",
+                {
+                  assistants: this._params.filterAssistants
+                    .map((ass) => voiceAssistants[ass].name)
+                    .join(", "),
+                }
+              )}</span
+            >
+          </h2>
+          <ha-icon-button
+            .label=${this.hass.localize("ui.dialogs.generic.close")}
+            .path=${mdiClose}
+            dialogAction="close"
+            class="header_button"
+          ></ha-icon-button>
+          <search-input
+            .hass=${this.hass}
+            .filter=${this._filter}
+            @value-changed=${this._filterChanged}
+          ></search-input>
+        </div>
+        <mwc-list multi>
+          ${this._filterEntities(
+            this._params.extendedEntities,
+            this._filter
+          ).map((entity) => this._renderItem(entity))}
+        </mwc-list>
+        <mwc-button
+          slot="primaryAction"
+          @click=${this._expose}
+          .disabled=${this._selected.length === 0}
+        >
+          ${this.hass.localize(
+            "ui.panel.config.voice_assistants.expose.expose_dialog.expose_entities",
+            { count: this._selected.length }
+          )}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _handleSelected(ev) {
+    if (ev.detail.source !== "property") {
+      return;
+    }
+    const entityId = ev.target.value;
+    if (ev.detail.selected) {
+      if (this._selected.includes(entityId)) {
+        return;
+      }
+      this._selected = [...this._selected, entityId];
+    } else {
+      this._selected = this._selected.filter((item) => item !== entityId);
+    }
+  }
+
+  private _filterChanged(e) {
+    this._filter = e.detail.value;
+  }
+
+  private _filterEntities = memoizeOne(
+    (RegEntries: Record<string, ExtEntityRegistryEntry>, filter?: string) => {
+      const lowerFilter = filter?.toLowerCase();
+      return Object.values(RegEntries).filter(
+        (entity) =>
+          this._params!.filterAssistants.some(
+            (ass) => !entity.options?.[ass]?.should_expose
+          ) &&
+          (!lowerFilter ||
+            entity.entity_id.toLowerCase().includes(lowerFilter) ||
+            computeEntityRegistryName(this.hass!, entity)
+              ?.toLowerCase()
+              .includes(lowerFilter))
+      );
+    }
+  );
+
+  private _renderItem = (entity: ExtEntityRegistryEntry) => {
+    const entityState = this.hass.states[entity.entity_id];
+    return html`<ha-check-list-item
+      graphic="icon"
+      twoLine
+      .value=${entity.entity_id}
+      .selected=${this._selected.includes(entity.entity_id)}
+      @request-selected=${this._handleSelected}
+    >
+      <ha-state-icon
+        title=${ifDefined(entityState?.state)}
+        slot="graphic"
+        .state=${entityState}
+      ></ha-state-icon>
+      ${computeEntityRegistryName(this.hass!, entity)}
+      <span slot="secondary">${entity.entity_id}</span>
+    </ha-check-list-item>`;
+  };
+
+  private _expose() {
+    this._params!.exposeEntities(this._selected);
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: 0;
+        }
+        @media all and (min-width: 600px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 600px;
+            --mdc-dialog-max-height: 80%;
+          }
+        }
+        search-input {
+          width: 100%;
+          display: block;
+          padding: 24px 16px 0;
+          box-sizing: border-box;
+        }
+        .header {
+          pointer-events: auto;
+          -webkit-font-smoothing: antialiased;
+          font-family: var(
+            --mdc-typography-headline6-font-family,
+            var(--mdc-typography-font-family, Roboto, sans-serif)
+          );
+          font-size: var(--mdc-typography-headline6-font-size, 1.25rem);
+          line-height: var(--mdc-typography-headline6-line-height, 2rem);
+          font-weight: var(--mdc-typography-headline6-font-weight, 500);
+          letter-spacing: var(
+            --mdc-typography-headline6-letter-spacing,
+            0.0125em
+          );
+          text-decoration: var(
+            --mdc-typography-headline6-text-decoration,
+            inherit
+          );
+          text-transform: var(
+            --mdc-typography-headline6-text-transform,
+            inherit
+          );
+          display: block;
+          position: relative;
+          flex-shrink: 0;
+          box-sizing: border-box;
+          margin: 0 0 1px;
+          padding: 24px 24px 0 24px;
+          padding-bottom: 15px;
+          color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
+          border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+          margin-bottom: 0;
+          border-color: var(
+            --mdc-dialog-scroll-divider-color,
+            rgba(0, 0, 0, 0.12)
+          );
+          display: flex;
+          flex-direction: column;
+        }
+        .subtitle {
+          color: var(--secondary-text-color);
+          font-size: 1rem;
+          line-height: normal;
+        }
+        .header_button {
+          position: absolute;
+          right: 16px;
+          top: 14px;
+          text-decoration: none;
+          color: inherit;
+        }
+        .header_button {
+          inset-inline-start: initial;
+          inset-inline-end: 16px;
+          direction: var(--direction);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-expose-entity": DialogExposeEntity;
+  }
+}
diff --git a/src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts b/src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts
new file mode 100644
index 0000000000..62c35bdc2b
--- /dev/null
+++ b/src/panels/config/voice-assistants/dialog-voice-assistant-pipeline-detail.ts
@@ -0,0 +1,279 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-button";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-form/ha-form";
+import {
+  AssistPipeline,
+  AssistPipelineMutableParams,
+  fetchAssistPipelineLanguages,
+} from "../../../data/assist_pipeline";
+import { haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import "./assist-pipeline-detail/assist-pipeline-detail-conversation";
+import "./assist-pipeline-detail/assist-pipeline-detail-config";
+import "./assist-pipeline-detail/assist-pipeline-detail-stt";
+import "./assist-pipeline-detail/assist-pipeline-detail-tts";
+import "./debug/assist-render-pipeline-events";
+import { VoiceAssistantPipelineDetailsDialogParams } from "./show-dialog-voice-assistant-pipeline-detail";
+
+@customElement("dialog-voice-assistant-pipeline-detail")
+export class DialogVoiceAssistantPipelineDetail extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: VoiceAssistantPipelineDetailsDialogParams;
+
+  @state() private _data?: Partial<AssistPipeline>;
+
+  @state() private _preferred?: boolean;
+
+  @state() private _cloudActive?: boolean;
+
+  @state() private _error?: Record<string, string>;
+
+  @state() private _submitting = false;
+
+  @state() private _supportedLanguages: string[] = [];
+
+  public showDialog(params: VoiceAssistantPipelineDetailsDialogParams): void {
+    this._params = params;
+    this._error = undefined;
+    if (this._params.pipeline) {
+      this._data = this._params.pipeline;
+      this._preferred = this._params.preferred;
+      this._cloudActive = this._params.cloudActiveSubscription;
+    } else {
+      this._data = {
+        language: (
+          this.hass.config.language || this.hass.locale.language
+        ).substring(0, 2),
+        stt_engine: this._cloudActive ? "cloud" : undefined,
+        tts_engine: this._cloudActive ? "cloud" : undefined,
+      };
+    }
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    this._data = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected firstUpdated() {
+    this._getSupportedLanguages();
+  }
+
+  private async _getSupportedLanguages() {
+    const { languages } = await fetchAssistPipelineLanguages(this.hass);
+    this._supportedLanguages = languages;
+  }
+
+  protected render() {
+    if (!this._params || !this._data) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this._params.pipeline?.id
+            ? this._params.pipeline.name
+            : this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.pipeline.detail.add_assistant_title"
+              )
+        )}
+      >
+        <div class="content">
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : nothing}
+          <assist-pipeline-detail-config
+            .hass=${this.hass}
+            .data=${this._data}
+            .supportedLanguages=${this._supportedLanguages}
+            keys="name,language"
+            @value-changed=${this._valueChanged}
+            dialogInitialFocus
+          ></assist-pipeline-detail-config>
+          <assist-pipeline-detail-conversation
+            .hass=${this.hass}
+            .data=${this._data}
+            keys="conversation_engine,conversation_language"
+            @value-changed=${this._valueChanged}
+          ></assist-pipeline-detail-conversation>
+          ${!this._cloudActive &&
+          (this._data.tts_engine === "cloud" ||
+            this._data.stt_engine === "cloud")
+            ? html`
+                <ha-alert alert-type="warning"
+                  >${this.hass.localize(
+                    "ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_message"
+                  )}
+                  <a
+                    href="/config/cloud"
+                    slot="action"
+                    @click=${this.closeDialog}
+                  >
+                    <ha-button>
+                      ${this.hass.localize(
+                        "ui.panel.config.voice_assistants.assistants.pipeline.detail.no_cloud_action"
+                      )}
+                    </ha-button>
+                  </a>
+                </ha-alert>
+              `
+            : nothing}
+          <assist-pipeline-detail-stt
+            .hass=${this.hass}
+            .data=${this._data}
+            keys="stt_engine,stt_language"
+            @value-changed=${this._valueChanged}
+          ></assist-pipeline-detail-stt>
+          <assist-pipeline-detail-tts
+            .hass=${this.hass}
+            .data=${this._data}
+            keys="tts_engine,tts_language,tts_voice"
+            @value-changed=${this._valueChanged}
+          ></assist-pipeline-detail-tts>
+        </div>
+        ${this._params.pipeline?.id
+          ? html`
+              <ha-button
+                slot="secondaryAction"
+                class="warning"
+                .disabled=${this._preferred || this._submitting}
+                @click=${this._deletePipeline}
+              >
+                ${this.hass.localize("ui.common.delete")}
+              </ha-button>
+              <ha-button
+                .disabled=${this._preferred}
+                slot="secondaryAction"
+                @click=${this._setPreferred}
+                >Set as preferred</ha-button
+              >
+              <a
+                href="/config/voice-assistants/debug/${this._params.pipeline
+                  .id}"
+                slot="secondaryAction"
+                @click=${this.closeDialog}
+                ><ha-button>Debug</ha-button>
+              </a>
+            `
+          : nothing}
+        <ha-button
+          slot="primaryAction"
+          @click=${this._updatePipeline}
+          .disabled=${this._submitting}
+          dialogInitialFocus
+        >
+          ${this._params.pipeline?.id
+            ? this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.pipeline.detail.update_assistant_action"
+              )
+            : this.hass.localize(
+                "ui.panel.config.voice_assistants.assistants.pipeline.detail.add_assistant_action"
+              )}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    this._error = undefined;
+    const value = {};
+    (ev.currentTarget as any)
+      .getAttribute("keys")
+      .split(",")
+      .forEach((key) => {
+        value[key] = ev.detail.value[key];
+      });
+    this._data = { ...this._data, ...value };
+  }
+
+  private async _updatePipeline() {
+    this._submitting = true;
+    try {
+      const data = this._data!;
+      const values: AssistPipelineMutableParams = {
+        name: data.name!,
+        language: data.language!,
+        conversation_engine: data.conversation_engine!,
+        conversation_language: data.conversation_language ?? null,
+        stt_engine: data.stt_engine ?? null,
+        stt_language: data.stt_language ?? null,
+        tts_engine: data.tts_engine ?? null,
+        tts_language: data.tts_language ?? null,
+        tts_voice: data.tts_voice ?? null,
+      };
+      if (this._params!.pipeline?.id) {
+        await this._params!.updatePipeline(values);
+      } else {
+        await this._params!.createPipeline(values);
+      }
+      this.closeDialog();
+    } catch (err: any) {
+      this._error = err?.message || "Unknown error";
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  private async _setPreferred() {
+    this._submitting = true;
+    try {
+      await this._params!.setPipelinePreferred();
+      this._preferred = true;
+    } catch (err: any) {
+      this._error = err?.message || "Unknown error";
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  private async _deletePipeline() {
+    this._submitting = true;
+    try {
+      if (await this._params!.deletePipeline()) {
+        this.closeDialog();
+      }
+    } catch (err: any) {
+      this._error = err?.message || "Unknown error";
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        assist-pipeline-detail-config,
+        assist-pipeline-detail-conversation,
+        assist-pipeline-detail-stt {
+          margin-bottom: 16px;
+          display: block;
+        }
+        ha-alert {
+          margin-bottom: 16px;
+          display: block;
+        }
+        a {
+          text-decoration: none;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-voice-assistant-pipeline-detail": DialogVoiceAssistantPipelineDetail;
+  }
+}
diff --git a/src/panels/config/voice-assistants/dialog-voice-settings.ts b/src/panels/config/voice-assistants/dialog-voice-settings.ts
new file mode 100644
index 0000000000..74ae26d75b
--- /dev/null
+++ b/src/panels/config/voice-assistants/dialog-voice-settings.ts
@@ -0,0 +1,82 @@
+import "@material/mwc-button/mwc-button";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import {
+  ExtEntityRegistryEntry,
+  computeEntityRegistryName,
+  getExtendedEntityRegistryEntry,
+} from "../../../data/entity_registry";
+import { haStyle, haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { VoiceSettingsDialogParams } from "./show-dialog-voice-settings";
+import "./entity-voice-settings";
+import { createCloseHeading } from "../../../components/ha-dialog";
+
+@customElement("dialog-voice-settings")
+class DialogVoiceSettings extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _extEntityReg?: ExtEntityRegistryEntry;
+
+  public async showDialog(params: VoiceSettingsDialogParams): Promise<void> {
+    this._extEntityReg = await getExtendedEntityRegistryEntry(
+      this.hass,
+      params.entityId
+    );
+  }
+
+  public closeDialog(): void {
+    this._extEntityReg = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._extEntityReg) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        hideActions
+        .heading=${createCloseHeading(
+          this.hass,
+          computeEntityRegistryName(this.hass, this._extEntityReg) ||
+            this.hass.localize("ui.panel.config.entities.picker.unnamed_entity")
+        )}
+      >
+        <div>
+          <entity-voice-settings
+            .hass=${this.hass}
+            .entry=${this._extEntityReg}
+            @entity-entry-updated=${this._entityEntryUpdated}
+          ></entity-voice-settings>
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  private _entityEntryUpdated(ev: CustomEvent) {
+    this._extEntityReg = ev.detail;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-voice-settings": DialogVoiceSettings;
+  }
+}
diff --git a/src/panels/config/voice-assistants/entity-voice-settings.ts b/src/panels/config/voice-assistants/entity-voice-settings.ts
new file mode 100644
index 0000000000..eb0a71935f
--- /dev/null
+++ b/src/panels/config/voice-assistants/entity-voice-settings.ts
@@ -0,0 +1,359 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { fireEvent } from "../../../common/dom/fire_event";
+import {
+  EntityFilter,
+  FilterFunc,
+  generateFilter,
+  isEmptyFilter,
+} from "../../../common/entity/entity_filter";
+import "../../../components/ha-aliases-editor";
+import "../../../components/ha-settings-row";
+import "../../../components/ha-switch";
+import {
+  CloudStatus,
+  CloudStatusLoggedIn,
+  fetchCloudStatus,
+  updateCloudGoogleEntityConfig,
+} from "../../../data/cloud";
+import {
+  ExtEntityRegistryEntry,
+  getExtendedEntityRegistryEntry,
+  updateEntityRegistryEntry,
+} from "../../../data/entity_registry";
+import {
+  GoogleEntity,
+  fetchCloudGoogleEntity,
+} from "../../../data/google_assistant";
+import { exposeEntities, voiceAssistants } from "../../../data/voice";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import { EntityRegistrySettings } from "../entities/entity-registry-settings";
+
+@customElement("entity-voice-settings")
+export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Object }) public entry!: ExtEntityRegistryEntry;
+
+  @state() private _cloudStatus?: CloudStatus;
+
+  @state() private _aliases?: string[];
+
+  @state() private _googleEntity?: GoogleEntity;
+
+  protected willUpdate(changedProps: PropertyValues<this>) {
+    if (!isComponentLoaded(this.hass, "cloud")) {
+      return;
+    }
+    if (changedProps.has("entry") && this.entry) {
+      fetchCloudGoogleEntity(this.hass, this.entry.entity_id).then(
+        (googleEntity) => {
+          this._googleEntity = googleEntity;
+        }
+      );
+    }
+    if (!this.hasUpdated) {
+      fetchCloudStatus(this.hass).then((status) => {
+        this._cloudStatus = status;
+      });
+    }
+  }
+
+  private _getEntityFilterFuncs = memoizeOne(
+    (googleFilter: EntityFilter, alexaFilter: EntityFilter) => ({
+      google: generateFilter(
+        googleFilter.include_domains,
+        googleFilter.include_entities,
+        googleFilter.exclude_domains,
+        googleFilter.exclude_entities
+      ),
+      alexa: generateFilter(
+        alexaFilter.include_domains,
+        alexaFilter.include_entities,
+        alexaFilter.exclude_domains,
+        alexaFilter.exclude_entities
+      ),
+    })
+  );
+
+  protected render() {
+    const googleEnabled =
+      this._cloudStatus?.logged_in === true &&
+      this._cloudStatus.prefs.google_enabled === true;
+
+    const alexaEnabled =
+      this._cloudStatus?.logged_in === true &&
+      this._cloudStatus.prefs.alexa_enabled === true;
+
+    const showAssistants = [...Object.keys(voiceAssistants)];
+    const uiAssistants = [...showAssistants];
+
+    const alexaManual =
+      alexaEnabled &&
+      !isEmptyFilter((this._cloudStatus as CloudStatusLoggedIn).alexa_entities);
+    const googleManual =
+      googleEnabled &&
+      !isEmptyFilter(
+        (this._cloudStatus as CloudStatusLoggedIn).google_entities
+      );
+
+    if (!googleEnabled) {
+      showAssistants.splice(
+        showAssistants.indexOf("cloud.google_assistant"),
+        1
+      );
+      uiAssistants.splice(showAssistants.indexOf("cloud.google_assistant"), 1);
+    } else if (googleManual) {
+      uiAssistants.splice(uiAssistants.indexOf("cloud.google_assistant"), 1);
+    }
+
+    if (!alexaEnabled) {
+      showAssistants.splice(showAssistants.indexOf("cloud.alexa"), 1);
+      uiAssistants.splice(uiAssistants.indexOf("cloud.alexa"), 1);
+    } else if (alexaManual) {
+      uiAssistants.splice(uiAssistants.indexOf("cloud.alexa"), 1);
+    }
+
+    const uiExposed = uiAssistants.some(
+      (key) => this.entry.options?.[key]?.should_expose
+    );
+
+    let manFilterFuncs:
+      | {
+          google: FilterFunc;
+          alexa: FilterFunc;
+        }
+      | undefined;
+
+    if (alexaManual || googleManual) {
+      manFilterFuncs = this._getEntityFilterFuncs(
+        (this._cloudStatus as CloudStatusLoggedIn).google_entities,
+        (this._cloudStatus as CloudStatusLoggedIn).alexa_entities
+      );
+    }
+
+    const manExposedAlexa =
+      alexaManual && manFilterFuncs!.alexa(this.entry.entity_id);
+    const manExposedGoogle =
+      googleManual && manFilterFuncs!.google(this.entry.entity_id);
+
+    const anyExposed = uiExposed || manExposedAlexa || manExposedGoogle;
+
+    return html`
+      <ha-settings-row>
+        <h3 slot="heading">
+          ${this.hass.localize("ui.dialogs.voice-settings.expose_header")}
+        </h3>
+        <ha-switch
+          @change=${this._toggleAll}
+          .assistants=${uiAssistants}
+          .checked=${anyExposed}
+        ></ha-switch>
+      </ha-settings-row>
+      ${anyExposed
+        ? showAssistants.map(
+            (key) => html`
+              <ha-settings-row>
+                <img
+                  alt=""
+                  src=${brandsUrl({
+                    domain: voiceAssistants[key].domain,
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                  referrerpolicy="no-referrer"
+                  slot="prefix"
+                />
+                <span slot="heading">${voiceAssistants[key].name}</span>
+                ${key === "cloud.google_assistant" &&
+                !googleManual &&
+                this._googleEntity?.might_2fa
+                  ? html`
+                      <ha-formfield
+                        slot="description"
+                        .label=${this.hass.localize(
+                          "ui.dialogs.voice-settings.ask_pin"
+                        )}
+                      >
+                        <ha-checkbox
+                          .checked=${!this.entry.options?.[key]?.disable_2fa}
+                          @change=${this._2faChanged}
+                        ></ha-checkbox>
+                      </ha-formfield>
+                    `
+                  : (alexaManual && key === "cloud.alexa") ||
+                    (googleManual && key === "cloud.google_assistant")
+                  ? html`
+                      <span slot="description">
+                        ${this.hass.localize(
+                          "ui.dialogs.voice-settings.manual_config"
+                        )}
+                      </span>
+                    `
+                  : nothing}
+                <ha-switch
+                  .assistant=${key}
+                  @change=${this._toggleAssistant}
+                  .disabled=${(alexaManual && key === "cloud.alexa") ||
+                  (googleManual && key === "cloud.google_assistant")}
+                  .checked=${alexaManual && key === "cloud.alexa"
+                    ? manExposedAlexa
+                    : googleManual && key === "cloud.google_assistant"
+                    ? manExposedGoogle
+                    : this.entry.options?.[key]?.should_expose}
+                ></ha-switch>
+              </ha-settings-row>
+            `
+          )
+        : nothing}
+
+      <h3 class="header">
+        ${this.hass.localize("ui.dialogs.voice-settings.aliases_header")}
+      </h3>
+
+      <p class="description">
+        ${this.hass.localize("ui.dialogs.voice-settings.aliases_description")}
+      </p>
+
+      <ha-aliases-editor
+        .hass=${this.hass}
+        .aliases=${this._aliases ?? this.entry.aliases}
+        @value-changed=${this._aliasesChanged}
+        @blur=${this._saveAliases}
+      ></ha-aliases-editor>
+    `;
+  }
+
+  private _aliasesChanged(ev) {
+    this._aliases = ev.detail.value;
+  }
+
+  private async _2faChanged(ev) {
+    try {
+      await updateCloudGoogleEntityConfig(
+        this.hass,
+        this.entry.entity_id,
+        !ev.target.checked
+      );
+    } catch (_err) {
+      ev.target.checked = !ev.target.checked;
+    }
+  }
+
+  private async _saveAliases() {
+    if (!this._aliases) {
+      return;
+    }
+    const result = await updateEntityRegistryEntry(
+      this.hass,
+      this.entry.entity_id,
+      {
+        aliases: this._aliases
+          .map((alias) => alias.trim())
+          .filter((alias) => alias),
+      }
+    );
+    fireEvent(this, "entity-entry-updated", result.entity_entry);
+  }
+
+  private async _toggleAssistant(ev) {
+    exposeEntities(
+      this.hass,
+      [ev.target.assistant],
+      [this.entry.entity_id],
+      ev.target.checked
+    );
+    const entry = await getExtendedEntityRegistryEntry(
+      this.hass,
+      this.entry.entity_id
+    );
+    fireEvent(this, "entity-entry-updated", entry);
+  }
+
+  private async _toggleAll(ev) {
+    exposeEntities(
+      this.hass,
+      ev.target.assistants,
+      [this.entry.entity_id],
+      ev.target.checked
+    );
+    const entry = await getExtendedEntityRegistryEntry(
+      this.hass,
+      this.entry.entity_id
+    );
+    fireEvent(this, "entity-entry-updated", entry);
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+          margin: 32px;
+          margin-top: 0;
+          --settings-row-prefix-display: contents;
+        }
+        ha-settings-row {
+          padding: 0;
+        }
+        img {
+          height: 32px;
+          width: 32px;
+          margin-right: 16px;
+        }
+        ha-aliases-editor {
+          display: block;
+        }
+        ha-alert {
+          display: block;
+          margin-top: 16px;
+        }
+        ha-formfield {
+          margin-left: -8px;
+        }
+        ha-checkbox {
+          --mdc-checkbox-state-layer-size: 40px;
+        }
+        .header {
+          margin-top: 8px;
+          margin-bottom: 4px;
+        }
+        .description {
+          color: var(--secondary-text-color);
+          font-size: 14px;
+          line-height: 20px;
+          margin-top: 0;
+          margin-bottom: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "entity-registry-settings": EntityRegistrySettings;
+  }
+  interface HASSDomEvents {
+    "entity-entry-updated": ExtEntityRegistryEntry;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "entity-voice-settings": EntityVoiceSettings;
+  }
+}
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
new file mode 100644
index 0000000000..137f57a76a
--- /dev/null
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
@@ -0,0 +1,114 @@
+import { consume } from "@lit-labs/context";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import { CloudStatus } from "../../../data/cloud";
+import { entitiesContext } from "../../../data/context";
+import {
+  ExtEntityRegistryEntry,
+  getExtendedEntityRegistryEntries,
+} from "../../../data/entity_registry";
+import "../../../layouts/hass-tabs-subpage";
+import { HomeAssistant, Route } from "../../../types";
+import "./assist-pref";
+import "./cloud-alexa-pref";
+import "./cloud-discover";
+import "./cloud-google-pref";
+import { voiceAssistantTabs } from "./ha-config-voice-assistants";
+
+@customElement("ha-config-voice-assistants-assistants")
+export class HaConfigVoiceAssistantsAssistants extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public cloudStatus?: CloudStatus;
+
+  @property() public isWide!: boolean;
+
+  @property() public narrow!: boolean;
+
+  @property() public route!: Route;
+
+  @state()
+  @consume({ context: entitiesContext, subscribe: true })
+  _entities!: HomeAssistant["entities"];
+
+  @state() private _extEntities?: Record<string, ExtEntityRegistryEntry>;
+
+  protected render() {
+    if (!this.hass) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .route=${this.route}
+        .tabs=${voiceAssistantTabs}
+      >
+        <div class="content">
+          ${isComponentLoaded(this.hass, "assist_pipeline")
+            ? html`
+                <assist-pref
+                  .hass=${this.hass}
+                  .cloudStatus=${this.cloudStatus}
+                  .extEntities=${this._extEntities}
+                ></assist-pref>
+              `
+            : nothing}
+          ${this.cloudStatus?.logged_in
+            ? html`
+                <cloud-alexa-pref
+                  .hass=${this.hass}
+                  .extEntities=${this._extEntities}
+                  .cloudStatus=${this.cloudStatus}
+                  dir=${computeRTLDirection(this.hass)}
+                ></cloud-alexa-pref>
+                <cloud-google-pref
+                  .hass=${this.hass}
+                  .extEntities=${this._extEntities}
+                  .cloudStatus=${this.cloudStatus}
+                  dir=${computeRTLDirection(this.hass)}
+                ></cloud-google-pref>
+              `
+            : html`<cloud-discover .hass=${this.hass}></cloud-discover>`}
+        </div>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  public willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("_entities")) {
+      this._fetchExtendedEntities();
+    }
+  }
+
+  private async _fetchExtendedEntities() {
+    this._extEntities = await getExtendedEntityRegistryEntries(
+      this.hass,
+      Object.keys(this._entities)
+    );
+  }
+
+  static styles = css`
+    .content {
+      padding: 28px 20px 0;
+      max-width: 1040px;
+      margin: 0 auto;
+    }
+    .content > * {
+      display: block;
+      margin: auto;
+      max-width: 800px;
+      margin-bottom: 24px;
+    }
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+  `;
+}
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
new file mode 100644
index 0000000000..c26159d756
--- /dev/null
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts
@@ -0,0 +1,740 @@
+import { consume } from "@lit-labs/context";
+import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
+import {
+  mdiCloseBoxMultiple,
+  mdiCloseCircleOutline,
+  mdiPlus,
+  mdiPlusBoxMultiple,
+} from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
+import memoize from "memoize-one";
+import { HASSDomEvent } from "../../../common/dom/fire_event";
+import {
+  EntityFilter,
+  generateFilter,
+  isEmptyFilter,
+} from "../../../common/entity/entity_filter";
+import { navigate } from "../../../common/navigate";
+import { computeRTL } from "../../../common/util/compute_rtl";
+import {
+  DataTableColumnContainer,
+  DataTableRowData,
+  RowClickedEvent,
+  SelectionChangedEvent,
+} from "../../../components/data-table/ha-data-table";
+import "../../../components/ha-fab";
+import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
+import { entitiesContext } from "../../../data/context";
+import {
+  computeEntityRegistryName,
+  EntityRegistryEntry,
+  ExtEntityRegistryEntry,
+  getExtendedEntityRegistryEntries,
+} from "../../../data/entity_registry";
+import { exposeEntities, voiceAssistants } from "../../../data/voice";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import "../../../layouts/hass-loading-screen";
+import "../../../layouts/hass-tabs-subpage-data-table";
+import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant, Route } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
+import { voiceAssistantTabs } from "./ha-config-voice-assistants";
+import { showExposeEntityDialog } from "./show-dialog-expose-entity";
+import { showVoiceSettingsDialog } from "./show-dialog-voice-settings";
+
+@customElement("ha-config-voice-assistants-expose")
+export class VoiceAssistantsExpose extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public cloudStatus?: CloudStatus;
+
+  @property({ type: Boolean }) public isWide!: boolean;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @state()
+  @consume({ context: entitiesContext, subscribe: true })
+  _entities!: HomeAssistant["entities"];
+
+  @state() private _extEntities?: Record<string, ExtEntityRegistryEntry>;
+
+  @state() private _filter: string = history.state?.filter || "";
+
+  @state() private _numHiddenEntities = 0;
+
+  @state() private _searchParms = new URLSearchParams(window.location.search);
+
+  @state() private _selectedEntities: string[] = [];
+
+  @query("hass-tabs-subpage-data-table", true)
+  private _dataTable!: HaTabsSubpageDataTable;
+
+  private _activeFilters = memoize(
+    (filters: URLSearchParams): string[] | undefined => {
+      const filterTexts: string[] = [];
+      filters.forEach((value, key) => {
+        switch (key) {
+          case "assistants": {
+            const assistants = value.split(",");
+            assistants.forEach((assistant) => {
+              filterTexts.push(voiceAssistants[assistant]?.name || assistant);
+            });
+          }
+        }
+      });
+      return filterTexts.length ? filterTexts : undefined;
+    }
+  );
+
+  private _columns = memoize(
+    (narrow, availableAssistants, _language): DataTableColumnContainer => ({
+      icon: {
+        title: "",
+        type: "icon",
+        hidden: narrow,
+        template: (_, entry) => html`
+          <ha-state-icon
+            title=${ifDefined(entry.entity?.state)}
+            .state=${entry.entity}
+          ></ha-state-icon>
+        `,
+      },
+      name: {
+        main: true,
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.expose.headers.name"
+        ),
+        sortable: true,
+        filterable: true,
+        direction: "asc",
+        grows: true,
+        template: (name, entry) =>
+          html`
+            ${name}<br />
+            <div class="secondary">${entry.entity_id}</div>
+          `,
+      },
+      area: {
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.expose.headers.area"
+        ),
+        sortable: true,
+        hidden: narrow,
+        filterable: true,
+        width: "15%",
+      },
+      assistants: {
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.expose.headers.assistants"
+        ),
+        sortable: true,
+        filterable: true,
+        width: "160px",
+        type: "flex",
+        template: (assistants, entry) =>
+          html`${availableAssistants.map((key) =>
+            assistants.includes(key)
+              ? html`<div>
+                  <img
+                    style="height: 24px; margin-right: 16px;${styleMap({
+                      filter: entry.manAssistants?.includes(key)
+                        ? "grayscale(100%)"
+                        : "",
+                    })}"
+                    alt=""
+                    src=${brandsUrl({
+                      domain: voiceAssistants[key].domain,
+                      type: "icon",
+                      darkOptimized: this.hass.themes?.darkMode,
+                    })}
+                    referrerpolicy="no-referrer"
+                    slot="prefix"
+                  />${entry.manAssistants?.includes(key)
+                    ? html`<simple-tooltip
+                        animation-delay="0"
+                        position="bottom"
+                        offset="1"
+                      >
+                        Configured in YAML, not editable in UI
+                      </simple-tooltip>`
+                    : ""}
+                </div>`
+              : html`<div style="width: 40px;"></div>`
+          )}`,
+      },
+      aliases: {
+        title: this.hass.localize(
+          "ui.panel.config.voice_assistants.expose.headers.aliases"
+        ),
+        sortable: true,
+        filterable: true,
+        hidden: narrow,
+        width: "15%",
+        template: (aliases) =>
+          aliases.length === 0
+            ? "-"
+            : aliases.length === 1
+            ? aliases[0]
+            : this.hass.localize(
+                "ui.panel.config.voice_assistants.expose.aliases",
+                { count: aliases.length }
+              ),
+      },
+      remove: {
+        title: "",
+        type: "icon-button",
+        hidden: narrow,
+        template: () =>
+          html`<ha-icon-button
+            @click=${this._removeEntity}
+            .path=${mdiCloseCircleOutline}
+          ></ha-icon-button>`,
+      },
+    })
+  );
+
+  private _getEntityFilterFuncs = memoize(
+    (googleFilter: EntityFilter, alexaFilter: EntityFilter) => ({
+      google: generateFilter(
+        googleFilter.include_domains,
+        googleFilter.include_entities,
+        googleFilter.exclude_domains,
+        googleFilter.exclude_entities
+      ),
+      amazon: generateFilter(
+        alexaFilter.include_domains,
+        alexaFilter.include_entities,
+        alexaFilter.exclude_domains,
+        alexaFilter.exclude_entities
+      ),
+    })
+  );
+
+  private _availableAssistants = memoize(
+    (cloudStatus: CloudStatus | undefined) => {
+      const googleEnabled =
+        cloudStatus?.logged_in === true &&
+        cloudStatus.prefs.google_enabled === true;
+      const alexaEnabled =
+        cloudStatus?.logged_in === true &&
+        cloudStatus.prefs.alexa_enabled === true;
+
+      const showAssistants = [...Object.keys(voiceAssistants)];
+
+      if (!googleEnabled) {
+        showAssistants.splice(
+          showAssistants.indexOf("cloud.google_assistant"),
+          1
+        );
+      }
+
+      if (!alexaEnabled) {
+        showAssistants.splice(showAssistants.indexOf("cloud.alexa"), 1);
+      }
+
+      return showAssistants;
+    }
+  );
+
+  private _filteredEntities = memoize(
+    (
+      entities: HomeAssistant["entities"],
+      extEntities: Record<string, ExtEntityRegistryEntry> | undefined,
+      devices: HomeAssistant["devices"],
+      areas: HomeAssistant["areas"],
+      cloudStatus: CloudStatus | undefined,
+      filters: URLSearchParams
+    ) => {
+      const googleEnabled =
+        cloudStatus?.logged_in === true &&
+        cloudStatus.prefs.google_enabled === true;
+      const alexaEnabled =
+        cloudStatus?.logged_in === true &&
+        cloudStatus.prefs.alexa_enabled === true;
+
+      const showAssistants = [...this._availableAssistants(cloudStatus)];
+
+      const alexaManual =
+        alexaEnabled &&
+        !isEmptyFilter(
+          (this.cloudStatus as CloudStatusLoggedIn).alexa_entities
+        );
+      const googleManual =
+        googleEnabled &&
+        !isEmptyFilter(
+          (this.cloudStatus as CloudStatusLoggedIn).google_entities
+        );
+
+      if (googleManual) {
+        showAssistants.splice(
+          showAssistants.indexOf("cloud.google_assistant"),
+          1
+        );
+      }
+
+      if (alexaManual) {
+        showAssistants.splice(showAssistants.indexOf("cloud.alexa"), 1);
+      }
+
+      const result: Record<string, DataTableRowData> = {};
+
+      let filteredEntities = Object.values(entities);
+
+      filteredEntities = filteredEntities.filter((entity) =>
+        showAssistants.some(
+          (assis) =>
+            extEntities?.[entity.entity_id].options?.[assis]?.should_expose
+        )
+      );
+
+      // If nothing gets filtered, this is our correct count of entities
+      const startLength = filteredEntities.length;
+
+      let filteredAssistants: string[];
+
+      filters.forEach((value, key) => {
+        if (key === "assistants") {
+          filteredAssistants = value.split(",");
+          filteredEntities = filteredEntities.filter((entity) =>
+            filteredAssistants.some(
+              (assis) =>
+                !(assis === "cloud.alexa" && alexaManual) &&
+                extEntities?.[entity.entity_id].options?.[assis]?.should_expose
+            )
+          );
+        }
+      });
+
+      for (const entry of filteredEntities) {
+        const entity = this.hass.states[entry.entity_id];
+        const areaId = entry.area_id ?? devices[entry.device_id!]?.area_id;
+        const area = areaId ? areas[areaId] : undefined;
+
+        result[entry.entity_id] = {
+          entity_id: entry.entity_id,
+          entity,
+          name:
+            computeEntityRegistryName(
+              this.hass!,
+              entry as EntityRegistryEntry
+            ) ||
+            this.hass.localize(
+              "ui.panel.config.entities.picker.unnamed_entity"
+            ),
+          area: area ? area.name : "—",
+          assistants: Object.keys(
+            extEntities![entry.entity_id].options!
+          ).filter(
+            (key) =>
+              showAssistants.includes(key) &&
+              extEntities![entry.entity_id].options![key]?.should_expose
+          ),
+          aliases: extEntities?.[entry.entity_id].aliases,
+        };
+      }
+
+      this._numHiddenEntities = startLength - Object.values(result).length;
+
+      if (alexaManual || googleManual) {
+        const manFilterFuncs = this._getEntityFilterFuncs(
+          (this.cloudStatus as CloudStatusLoggedIn).google_entities,
+          (this.cloudStatus as CloudStatusLoggedIn).alexa_entities
+        );
+        Object.keys(entities).forEach((entityId) => {
+          const assistants: string[] = [];
+          if (
+            alexaManual &&
+            (!filteredAssistants ||
+              filteredAssistants.includes("cloud.alexa")) &&
+            manFilterFuncs.amazon(entityId)
+          ) {
+            assistants.push("cloud.alexa");
+          }
+          if (
+            googleManual &&
+            (!filteredAssistants ||
+              filteredAssistants.includes("cloud.google_assistant")) &&
+            manFilterFuncs.google(entityId)
+          ) {
+            assistants.push("cloud.google_assistant");
+          }
+          if (!assistants.length) {
+            return;
+          }
+          if (entityId in result) {
+            result[entityId].assistants.push(...assistants);
+            result[entityId].manAssistants = assistants;
+          } else {
+            const entry = entities[entityId];
+            const areaId = entry.area_id ?? devices[entry.device_id!]?.area_id;
+            const area = areaId ? areas[areaId] : undefined;
+            result[entityId] = {
+              entity_id: entry.entity_id,
+              entity: this.hass.states[entityId],
+              name: computeEntityRegistryName(
+                this.hass!,
+                entry as EntityRegistryEntry
+              ),
+              area: area ? area.name : "—",
+              assistants: [
+                ...(extEntities
+                  ? Object.keys(extEntities[entry.entity_id].options!).filter(
+                      (key) =>
+                        showAssistants.includes(key) &&
+                        extEntities[entry.entity_id].options![key]
+                          ?.should_expose
+                    )
+                  : []),
+                ...assistants,
+              ],
+              manAssistants: assistants,
+              aliases: extEntities?.[entityId].aliases,
+            };
+          }
+        });
+      }
+
+      return Object.values(result);
+    }
+  );
+
+  public constructor() {
+    super();
+    window.addEventListener("location-changed", () => {
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
+    });
+    window.addEventListener("popstate", () => {
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
+    });
+  }
+
+  private async _fetchExtendedEntities() {
+    this._extEntities = await getExtendedEntityRegistryEntries(
+      this.hass,
+      Object.keys(this._entities)
+    );
+  }
+
+  public willUpdate(changedProperties: PropertyValues): void {
+    if (changedProperties.has("_entities")) {
+      this._fetchExtendedEntities();
+    }
+  }
+
+  protected render() {
+    if (!this.hass || this.hass.entities === undefined) {
+      return html`<hass-loading-screen></hass-loading-screen>`;
+    }
+    const activeFilters = this._activeFilters(this._searchParms);
+
+    const filteredEntities = this._filteredEntities(
+      this._entities,
+      this._extEntities,
+      this.hass.devices,
+      this.hass.areas,
+      this.cloudStatus,
+      this._searchParms
+    );
+
+    return html`
+      <hass-tabs-subpage-data-table
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
+        .route=${this.route}
+        .tabs=${voiceAssistantTabs}
+        .columns=${this._columns(
+          this.narrow,
+          this._availableAssistants(this.cloudStatus),
+          this.hass.language
+        )}
+        .data=${filteredEntities}
+        .activeFilters=${activeFilters}
+        .numHidden=${this._numHiddenEntities}
+        .hideFilterMenu=${this._selectedEntities.length > 0}
+        .searchLabel=${this.hass.localize(
+          "ui.panel.config.entities.picker.search"
+        )}
+        .hiddenLabel=${this.hass.localize(
+          "ui.panel.config.entities.picker.filter.hidden_entities",
+          "number",
+          this._numHiddenEntities
+        )}
+        .filter=${this._filter}
+        selectable
+        clickable
+        @selection-changed=${this._handleSelectionChanged}
+        @clear-filter=${this._clearFilter}
+        @search-changed=${this._handleSearchChange}
+        @row-click=${this._openEditEntry}
+        id="entity_id"
+        hasFab
+      >
+        ${this._selectedEntities.length
+          ? html`
+              <div
+                class=${classMap({
+                  "header-toolbar": this.narrow,
+                  "table-header": !this.narrow,
+                })}
+                slot="header"
+              >
+                <p class="selected-txt">
+                  ${this.hass.localize(
+                    "ui.panel.config.entities.picker.selected",
+                    "number",
+                    this._selectedEntities.length
+                  )}
+                </p>
+                <div class="header-btns">
+                  ${!this.narrow
+                    ? html`
+                        <mwc-button @click=${this._exposeSelected}
+                          >${this.hass.localize(
+                            "ui.panel.config.voice_assistants.expose.expose"
+                          )}</mwc-button
+                        >
+                        <mwc-button @click=${this._unexposeSelected}
+                          >${this.hass.localize(
+                            "ui.panel.config.voice_assistants.expose.unexpose"
+                          )}</mwc-button
+                        >
+                      `
+                    : html`
+                        <ha-icon-button
+                          id="enable-btn"
+                          @click=${this._exposeSelected}
+                          .path=${mdiPlusBoxMultiple}
+                          .label=${this.hass.localize(
+                            "ui.panel.config.voice_assistants.expose.expose"
+                          )}
+                        ></ha-icon-button>
+                        <simple-tooltip animation-delay="0" for="enable-btn">
+                          ${this.hass.localize(
+                            "ui.panel.config.voice_assistants.expose.expose"
+                          )}
+                        </simple-tooltip>
+                        <ha-icon-button
+                          id="disable-btn"
+                          @click=${this._unexposeSelected}
+                          .path=${mdiCloseBoxMultiple}
+                          .label=${this.hass.localize(
+                            "ui.panel.config.voice_assistants.expose.unexpose"
+                          )}
+                        ></ha-icon-button>
+                        <simple-tooltip animation-delay="0" for="disable-btn">
+                          ${this.hass.localize(
+                            "ui.panel.config.voice_assistants.expose.unexpose"
+                          )}
+                        </simple-tooltip>
+                      `}
+                </div>
+              </div>
+            `
+          : ""}
+        <ha-fab
+          slot="fab"
+          .label=${this.hass.localize(
+            "ui.panel.config.voice_assistants.expose.add"
+          )}
+          extended
+          ?rtl=${computeRTL(this.hass)}
+          @click=${this._addEntry}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-fab>
+      </hass-tabs-subpage-data-table>
+    `;
+  }
+
+  private _addEntry() {
+    const assistants = this._searchParms.has("assistants")
+      ? this._searchParms.get("assistants")!.split(",")
+      : this._availableAssistants(this.cloudStatus);
+    showExposeEntityDialog(this, {
+      filterAssistants: assistants,
+      extendedEntities: this._extEntities!,
+      exposeEntities: (entities) => {
+        exposeEntities(this.hass, assistants, entities, true);
+      },
+    });
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+    history.replaceState({ filter: this._filter }, "");
+  }
+
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selectedEntities = ev.detail.value;
+  }
+
+  private _removeEntity = (ev) => {
+    ev.stopPropagation();
+    const entityId = ev.currentTarget.closest(".mdc-data-table__row").rowId;
+    const assistants = this._searchParms.has("assistants")
+      ? this._searchParms.get("assistants")!.split(",")
+      : this._availableAssistants(this.cloudStatus);
+    exposeEntities(this.hass, assistants, [entityId], false);
+  };
+
+  private _unexposeSelected() {
+    const assistants = this._searchParms.has("assistants")
+      ? this._searchParms.get("assistants")!.split(",")
+      : this._availableAssistants(this.cloudStatus);
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.voice_assistants.expose.unexpose_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.voice_assistants.expose.unexpose_confirm_text",
+        {
+          assistants: assistants
+            .map((ass) => voiceAssistants[ass].name)
+            .join(", "),
+          entities: this._selectedEntities.length,
+        }
+      ),
+      confirmText: this.hass.localize(
+        "ui.panel.config.voice_assistants.expose.unexpose"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirm: () => {
+        exposeEntities(this.hass, assistants, this._selectedEntities, false);
+        this._clearSelection();
+      },
+    });
+  }
+
+  private _exposeSelected() {
+    const assistants = this._searchParms.has("assistants")
+      ? this._searchParms.get("assistants")!.split(",")
+      : this._availableAssistants(this.cloudStatus);
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.voice_assistants.expose.expose_confirm_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.voice_assistants.expose.expose_confirm_text",
+        {
+          assistants: assistants
+            .map((ass) => voiceAssistants[ass].name)
+            .join(", "),
+          entities: this._selectedEntities.length,
+        }
+      ),
+      confirmText: this.hass.localize(
+        "ui.panel.config.voice_assistants.expose.expose"
+      ),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirm: () => {
+        exposeEntities(this.hass, assistants, this._selectedEntities, true);
+        this._clearSelection();
+      },
+    });
+  }
+
+  private _clearSelection() {
+    this._dataTable.clearSelection();
+  }
+
+  private _openEditEntry(ev: CustomEvent): void {
+    const entityId = (ev.detail as RowClickedEvent).id;
+    showVoiceSettingsDialog(this, { entityId });
+  }
+
+  private _clearFilter() {
+    if (this._activeFilters(this._searchParms)) {
+      navigate(window.location.pathname, { replace: true });
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        hass-loading-screen {
+          --app-header-background-color: var(--sidebar-background-color);
+          --app-header-text-color: var(--sidebar-text-color);
+        }
+        .table-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 56px;
+          background-color: var(--mdc-text-field-fill-color, whitesmoke);
+          border-bottom: 1px solid
+            var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
+          box-sizing: border-box;
+        }
+        .header-toolbar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: var(--secondary-text-color);
+          position: relative;
+          top: -4px;
+        }
+        .selected-txt {
+          font-weight: bold;
+          padding-left: 16px;
+          padding-inline-start: 16px;
+          direction: var(--direction);
+        }
+        .table-header .selected-txt {
+          margin-top: 20px;
+        }
+        .header-toolbar .selected-txt {
+          font-size: 16px;
+        }
+        .header-toolbar .header-btns {
+          margin-right: -12px;
+          margin-inline-end: -12px;
+          direction: var(--direction);
+        }
+        .header-btns {
+          display: flex;
+        }
+        .header-btns > mwc-button,
+        .header-btns > ha-icon-button {
+          margin: 8px;
+        }
+        ha-button-menu {
+          margin-left: 8px;
+        }
+        .clear {
+          color: var(--primary-color);
+          padding-left: 8px;
+          padding-inline-start: 8px;
+          text-transform: uppercase;
+          direction: var(--direction);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-voice-assistants-expose": VoiceAssistantsExpose;
+  }
+}
diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants.ts
index 9ebea3faad..fe35b6dd78 100644
--- a/src/panels/config/voice-assistants/ha-config-voice-assistants.ts
+++ b/src/panels/config/voice-assistants/ha-config-voice-assistants.ts
@@ -1,33 +1,57 @@
+import { mdiDevices, mdiMicrophone } from "@mdi/js";
 import { customElement, property } from "lit/decorators";
 import {
   HassRouterPage,
   RouterOptions,
 } from "../../../layouts/hass-router-page";
 import { HomeAssistant } from "../../../types";
+import { CloudStatus } from "../../../data/cloud";
+
+export const voiceAssistantTabs = [
+  {
+    path: "/config/voice-assistants/assistants",
+    translationKey: "ui.panel.config.voice_assistants.assistants.caption",
+    iconPath: mdiMicrophone,
+  },
+  {
+    path: "/config/voice-assistants/expose",
+    translationKey: "ui.panel.config.voice_assistants.expose.caption",
+    iconPath: mdiDevices,
+  },
+];
 
 @customElement("ha-config-voice-assistants")
 class HaConfigVoiceAssistants extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public cloudStatus!: CloudStatus;
+
   @property() public narrow!: boolean;
 
   @property() public isWide!: boolean;
 
   protected routerOptions: RouterOptions = {
-    defaultPage: "debug",
+    defaultPage: "assistants",
     routes: {
+      assistants: {
+        tag: "ha-config-voice-assistants-assistants",
+        load: () => import("./ha-config-voice-assistants-assistants"),
+        cache: true,
+      },
+      expose: {
+        tag: "ha-config-voice-assistants-expose",
+        load: () => import("./ha-config-voice-assistants-expose"),
+      },
       debug: {
-        tag: "assist-pipeline-debug",
-        load: () =>
-          import(
-            "../integrations/integration-panels/voice_assistant/assist/assist-pipeline-debug"
-          ),
+        tag: "assist-debug",
+        load: () => import("./debug/assist-debug"),
       },
     },
   };
 
   protected updatePageEl(pageEl) {
     pageEl.hass = this.hass;
+    pageEl.cloudStatus = this.cloudStatus;
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
     pageEl.route = this.routeTail;
diff --git a/src/panels/config/voice-assistants/show-dialog-expose-entity.ts b/src/panels/config/voice-assistants/show-dialog-expose-entity.ts
new file mode 100644
index 0000000000..acb406e711
--- /dev/null
+++ b/src/panels/config/voice-assistants/show-dialog-expose-entity.ts
@@ -0,0 +1,21 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import { ExtEntityRegistryEntry } from "../../../data/entity_registry";
+
+export interface ExposeEntityDialogParams {
+  filterAssistants: string[];
+  extendedEntities: Record<string, ExtEntityRegistryEntry>;
+  exposeEntities: (entities: string[]) => void;
+}
+
+export const loadExposeEntityDialog = () => import("./dialog-expose-entity");
+
+export const showExposeEntityDialog = (
+  element: HTMLElement,
+  dialogParams: ExposeEntityDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-expose-entity",
+    dialogImport: loadExposeEntityDialog,
+    dialogParams,
+  });
+};
diff --git a/src/panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail.ts b/src/panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail.ts
new file mode 100644
index 0000000000..09b57b6c0c
--- /dev/null
+++ b/src/panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail.ts
@@ -0,0 +1,29 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import {
+  AssistPipeline,
+  AssistPipelineMutableParams,
+} from "../../../data/assist_pipeline";
+
+export interface VoiceAssistantPipelineDetailsDialogParams {
+  cloudActiveSubscription?: boolean;
+  pipeline?: AssistPipeline;
+  preferred?: boolean;
+  createPipeline: (values: AssistPipelineMutableParams) => Promise<unknown>;
+  updatePipeline: (updates: AssistPipelineMutableParams) => Promise<unknown>;
+  setPipelinePreferred: () => Promise<unknown>;
+  deletePipeline: () => Promise<boolean>;
+}
+
+export const loadVoiceAssistantPipelineDetailDialog = () =>
+  import("./dialog-voice-assistant-pipeline-detail");
+
+export const showVoiceAssistantPipelineDetailDialog = (
+  element: HTMLElement,
+  dialogParams: VoiceAssistantPipelineDetailsDialogParams
+) => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-voice-assistant-pipeline-detail",
+    dialogImport: loadVoiceAssistantPipelineDetailDialog,
+    dialogParams,
+  });
+};
diff --git a/src/panels/config/voice-assistants/show-dialog-voice-settings.ts b/src/panels/config/voice-assistants/show-dialog-voice-settings.ts
new file mode 100644
index 0000000000..1acc94bb10
--- /dev/null
+++ b/src/panels/config/voice-assistants/show-dialog-voice-settings.ts
@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+
+export interface VoiceSettingsDialogParams {
+  entityId: string;
+}
+
+export const loadVoiceSettingsDialog = () => import("./dialog-voice-settings");
+
+export const showVoiceSettingsDialog = (
+  element: HTMLElement,
+  aliasesParams: VoiceSettingsDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-voice-settings",
+    dialogImport: loadVoiceSettingsDialog,
+    dialogParams: aliasesParams,
+  });
+};
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 2dac2c0389..54c5666e9f 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -39,7 +39,7 @@ class PanelDeveloperTools extends LitElement {
           scrollable
           attr-for-selected="page-name"
           .selected=${page}
-          @iron-activate=${this.handlePageSelected}
+          @selected-changed=${this.handlePageSelected}
         >
           <paper-tab page-name="yaml">
             ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
@@ -76,11 +76,11 @@ class PanelDeveloperTools extends LitElement {
   }
 
   private handlePageSelected(ev) {
-    const newPage = ev.detail.item.getAttribute("page-name");
+    const newPage = ev.detail.value;
     if (newPage !== this._page) {
       navigate(`/developer-tools/${newPage}`);
     } else {
-      scrollTo(0, 0);
+      scrollTo({ behavior: "smooth", top: 0 });
     }
   }
 
@@ -93,13 +93,18 @@ class PanelDeveloperTools extends LitElement {
       haStyle,
       css`
         :host {
-          display: block;
-          height: 100%;
           color: var(--primary-text-color);
           --paper-card-header-color: var(--primary-text-color);
+          display: flex;
+          min-height: 100vh;
         }
         .header {
+          position: fixed;
+          top: 0;
+          z-index: 4;
           background-color: var(--app-header-background-color);
+          width: var(--mdc-top-app-bar-width, 100%);
+          padding-top: env(safe-area-inset-top);
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
         }
@@ -124,9 +129,12 @@ class PanelDeveloperTools extends LitElement {
         }
         developer-tools-router {
           display: block;
-          height: calc(100% - var(--header-height) - 48px);
-          overflow: auto;
-          overscroll-behavior: contain;
+          padding-top: calc(
+            var(--header-height) + 48px + env(safe-area-inset-top)
+          );
+          padding-bottom: calc(env(safe-area-inset-bottom));
+          flex: 1 1 100%;
+          max-width: 100%;
         }
         paper-tabs {
           margin-left: max(env(safe-area-inset-left), 24px);
diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
index 5f4b012869..2e302e01b6 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
@@ -195,7 +195,8 @@ export class HuiEnergyDevicesGraphCard
       energyData.end,
       devices,
       period,
-      units
+      units,
+      ["sum"]
     );
 
     Object.values(data).forEach((stat) => {
@@ -221,7 +222,8 @@ export class HuiEnergyDevicesGraphCard
         energyData.endCompare,
         devices,
         period,
-        units
+        units,
+        ["sum"]
       );
 
       Object.values(compareData).forEach((stat) => {
diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts
index e24a3f2c15..71b7282ce6 100644
--- a/src/panels/lovelace/cards/hui-sensor-card.ts
+++ b/src/panels/lovelace/cards/hui-sensor-card.ts
@@ -1,3 +1,4 @@
+import { css, CSSResultGroup } from "lit";
 import { HassEntity } from "home-assistant-js-websocket/dist/types";
 import { customElement } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -70,6 +71,18 @@ class HuiSensorCard extends HuiEntityCard {
 
     super.setConfig(entityCardConfig);
   }
+
+  static get styles(): CSSResultGroup {
+    return [
+      HuiEntityCard.styles,
+      css`
+        .info {
+          direction: ltr;
+          text-align: var(--float-start);
+        }
+      `,
+    ];
+  }
 }
 
 declare global {
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index 7466a4cdcd..5f06792c46 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -65,11 +65,11 @@ const SCHEMA = [
   },
   {
     name: "tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
index 7f9e657765..b32aa485d0 100644
--- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
@@ -48,11 +48,11 @@ const SCHEMA = [
   { name: "theme", selector: { theme: {} } },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "double_tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index 6ead63f55c..8150d99968 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -61,11 +61,11 @@ const SCHEMA = [
   { name: "theme", selector: { theme: {} } },
   {
     name: "tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
index a1c988fb26..76c0634698 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
@@ -51,11 +51,11 @@ const SCHEMA = [
   { name: "theme", selector: { theme: {} } },
   {
     name: "tap_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
   {
     name: "hold_action",
-    selector: { "ui-action": {} },
+    selector: { ui_action: {} },
   },
 ] as const;
 
diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
index 0241615be7..b3ccc5a692 100644
--- a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
@@ -87,7 +87,7 @@ export class HuiTileCardEditor
                 {
                   name: "color",
                   selector: {
-                    "ui-color": {},
+                    ui_color: {},
                   },
                 },
                 {
@@ -115,13 +115,13 @@ export class HuiTileCardEditor
             {
               name: "tap_action",
               selector: {
-                "ui-action": {},
+                ui_action: {},
               },
             },
             {
               name: "icon_tap_action",
               selector: {
-                "ui-action": {},
+                ui_action: {},
               },
             },
           ] as const,
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index a5fb2ded57..6fda17d966 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -26,13 +26,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import {
-  customElement,
-  eventOptions,
-  property,
-  query,
-  state,
-} from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
@@ -93,8 +87,6 @@ class HUIRoot extends LitElement {
 
   @state() private _curView?: number | "hass-unused-entities";
 
-  @query("#view", true) _view!: HTMLDivElement;
-
   private _viewCache?: { [viewId: string]: HUIView };
 
   private _debouncedConfigChanged: () => void;
@@ -550,19 +542,14 @@ class HUIRoot extends LitElement {
               `
             : ""}
         </div>
-        <div
-          id="view"
-          @ll-rebuild=${this._debouncedConfigChanged}
-          @scroll=${this._viewScrolled}
-        ></div>
+        <div id="view" @ll-rebuild=${this._debouncedConfigChanged}></div>
       </div>
     `;
   }
 
-  @eventOptions({ passive: true })
-  private _viewScrolled(ev) {
-    this.toggleAttribute("scrolled", ev.currentTarget.scrollTop !== 0);
-  }
+  private _handleWindowScroll = () => {
+    this.toggleAttribute("scrolled", window.scrollY !== 0);
+  };
 
   private _isVisible = (view: LovelaceViewConfig) =>
     Boolean(
@@ -573,7 +560,8 @@ class HUIRoot extends LitElement {
           view.visible.some((show) => show.user === this.hass!.user?.id))
     );
 
-  protected firstUpdated() {
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
     // Check for requested edit mode
     const searchParams = extractSearchParamsObject();
     if (searchParams.edit === "1") {
@@ -586,6 +574,14 @@ class HUIRoot extends LitElement {
         constructUrlCurrentPath(removeSearchParam("conversation"))
       );
     }
+    window.addEventListener("scroll", this._handleWindowScroll, {
+      passive: true,
+    });
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("scroll", this._handleWindowScroll);
   }
 
   protected updated(changedProperties: PropertyValues): void {
@@ -628,6 +624,9 @@ class HUIRoot extends LitElement {
         }
         newSelectView = index;
       }
+
+      // Will allow to override history scroll restoration when using back button
+      setTimeout(() => scrollTo({ behavior: "auto", top: 0 }), 1);
     }
 
     if (changedProperties.has("lovelace")) {
@@ -743,12 +742,14 @@ class HUIRoot extends LitElement {
     const curViewConfig =
       typeof this._curView === "number" ? views[this._curView] : undefined;
 
-    if (curViewConfig?.back_path) {
-      navigate(curViewConfig.back_path);
+    if (curViewConfig?.back_path != null) {
+      navigate(curViewConfig.back_path, { replace: true });
     } else if (history.length > 1) {
       history.back();
+    } else if (!views[0].subview) {
+      navigate(this.route!.prefix, { replace: true });
     } else {
-      navigate(this.route!.prefix);
+      navigate("/");
     }
   }
 
@@ -817,13 +818,14 @@ class HUIRoot extends LitElement {
   }
 
   private _navigateToView(path: string | number, replace?: boolean) {
-    if (!this.lovelace!.editMode) {
-      navigate(`${this.route!.prefix}/${path}${location.search}`, { replace });
-      return;
+    const url = this.lovelace!.editMode
+      ? `${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`
+      : `${this.route!.prefix}/${path}${location.search}`;
+
+    const currentUrl = `${location.pathname}${location.search}`;
+    if (currentUrl !== url) {
+      navigate(url, { replace });
     }
-    navigate(`${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`, {
-      replace,
-    });
   }
 
   private _editView() {
@@ -870,12 +872,12 @@ class HUIRoot extends LitElement {
   private _handleViewSelected(ev) {
     ev.preventDefault();
     const viewIndex = ev.detail.selected as number;
-
     if (viewIndex !== this._curView) {
       const path = this.config.views[viewIndex].path || viewIndex;
       this._navigateToView(path);
+    } else if (!this._editMode) {
+      scrollTo({ behavior: "smooth", top: 0 });
     }
-    this._view.scrollTo(0, 0);
   }
 
   private _selectView(viewIndex: HUIRoot["_curView"], force: boolean): void {
@@ -1048,34 +1050,31 @@ class HUIRoot extends LitElement {
           color: var(--error-color);
         }
         #view {
-          margin-top: calc(var(--header-height) + env(safe-area-inset-top));
-          height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
+          position: relative;
+          display: flex;
+          background: var(
+            --lovelace-background,
+            var(--primary-background-color)
+          );
+          padding-top: calc(var(--header-height) + env(safe-area-inset-top));
+          min-height: 100vh;
+          box-sizing: border-box;
+          padding-left: env(safe-area-inset-left);
+          padding-right: env(safe-area-inset-right);
+          padding-bottom: env(safe-area-inset-bottom);
+        }
+        hui-view {
+          flex: 1 1 100%;
+          max-width: 100%;
         }
         /**
          * In edit mode we have the tab bar on a new line *
          */
         .edit-mode #view {
-          height: calc(
-            100vh - var(--header-height) - 48px - env(safe-area-inset-top)
-          );
-          margin-top: calc(
+          padding-top: calc(
             var(--header-height) + 48px + env(safe-area-inset-top)
           );
         }
-        hui-view {
-          padding-left: env(safe-area-inset-left);
-          padding-right: env(safe-area-inset-right);
-          background: var(
-            --lovelace-background,
-            var(--primary-background-color)
-          );
-          overflow: auto;
-          overscroll-behavior: contain;
-          width: 100%;
-          height: 100%;
-          transform: translateZ(0);
-          display: block;
-        }
         .hide-tab {
           display: none;
         }
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index 0ee9db908c..937f924b24 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -298,7 +298,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         padding-top: 4px;
-        padding-bottom: env(safe-area-inset-bottom);
       }
 
       .badges {
@@ -327,7 +326,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
       }
 
       ha-fab {
-        position: absolute;
+        position: fixed;
         right: calc(16px + env(safe-area-inset-right));
         bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 1;
diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts
index 7b21e2a533..33ae765228 100644
--- a/src/panels/lovelace/views/hui-panel-view.ts
+++ b/src/panels/lovelace/views/hui-panel-view.ts
@@ -134,8 +134,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
       }
 
       ha-fab {
-        position: sticky;
-        float: right;
+        position: fixed;
         right: calc(16px + env(safe-area-inset-right));
         bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 1;
diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts
index 1233c00c94..6ed7cce4b4 100644
--- a/src/panels/lovelace/views/hui-sidebar-view.ts
+++ b/src/panels/lovelace/views/hui-sidebar-view.ts
@@ -196,7 +196,6 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
       :host {
         display: block;
         padding-top: 4px;
-        padding-bottom: env(safe-area-inset-bottom);
       }
 
       .container {
@@ -235,7 +234,7 @@ export class SideBarView extends LitElement implements LovelaceViewElement {
       }
 
       ha-fab {
-        position: absolute;
+        position: fixed;
         right: calc(16px + env(safe-area-inset-right));
         bottom: calc(16px + env(safe-area-inset-bottom));
         z-index: 1;
diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts
index cab9c9826d..3bd5da6fc9 100644
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/src/panels/media-browser/ha-panel-media-browser.ts
@@ -286,10 +286,8 @@ class PanelMediaBrowser extends LitElement {
         }
 
         ha-bar-media-player {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
+          position: fixed;
+          width: var(--mdc-top-app-bar-width, 100%);
         }
       `,
     ];
diff --git a/src/panels/my/ha-panel-my.ts b/src/panels/my/ha-panel-my.ts
index 2cfc2d7e50..70ad0f9693 100644
--- a/src/panels/my/ha-panel-my.ts
+++ b/src/panels/my/ha-panel-my.ts
@@ -141,6 +141,9 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
     component: "tag",
     redirect: "/config/tags",
   },
+  voice_assistants: {
+    redirect: "/config/voice-assistants",
+  },
   lovelace_dashboards: {
     component: "lovelace",
     redirect: "/config/lovelace/dashboards",
diff --git a/src/panels/profile/ha-pick-language-row.ts b/src/panels/profile/ha-pick-language-row.ts
index 7bab38abdc..1ee3074b09 100644
--- a/src/panels/profile/ha-pick-language-row.ts
+++ b/src/panels/profile/ha-pick-language-row.ts
@@ -1,10 +1,9 @@
-import "@material/mwc-list/mwc-list-item";
-import { css, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-select";
+import "../../components/ha-language-picker";
 import "../../components/ha-settings-row";
-import { HomeAssistant, Translation } from "../../types";
+import { HomeAssistant } from "../../types";
 
 @customElement("ha-pick-language-row")
 export class HaPickLanguageRow extends LitElement {
@@ -12,13 +11,6 @@ export class HaPickLanguageRow extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @state() private _languages: (Translation & { key: string })[] = [];
-
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this._computeLanguages();
-  }
-
   protected render() {
     return html`
       <ha-settings-row .narrow=${this.narrow}>
@@ -33,44 +25,26 @@ export class HaPickLanguageRow extends LitElement {
             >${this.hass.localize("ui.panel.profile.language.link_promo")}</a
           >
         </span>
-        <ha-select
+        <ha-language-picker
+          .hass=${this.hass}
+          nativeName
           .label=${this.hass.localize(
             "ui.panel.profile.language.dropdown_label"
           )}
           .value=${this.hass.locale.language}
-          @selected=${this._languageSelectionChanged}
+          @value-changed=${this._languageSelectionChanged}
           naturalMenuWidth
         >
-          ${this._languages.map(
-            (language) => html`<mwc-list-item
-              .value=${language.key}
-              rtl=${language.isRTL}
-            >
-              ${language.nativeName}
-            </mwc-list-item>`
-          )}
-        </ha-select>
+        </ha-language-picker>
       </ha-settings-row>
     `;
   }
 
-  private _computeLanguages() {
-    if (!this.hass.translationMetadata?.translations) {
-      return;
-    }
-    this._languages = Object.keys(
-      this.hass.translationMetadata.translations
-    ).map((key) => ({
-      key,
-      ...this.hass.translationMetadata.translations[key],
-    }));
-  }
-
   private _languageSelectionChanged(ev) {
     // Only fire event if language was changed. This prevents select updates when
     // responding to hass changes.
-    if (ev.target.value !== this.hass.language) {
-      fireEvent(this, "hass-language-select", ev.target.value);
+    if (ev.detail.value !== this.hass.language) {
+      fireEvent(this, "hass-language-select", ev.detail.value);
     }
   }
 
diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts
index 5e89e2f11a..e9c678c9fc 100644
--- a/src/resources/compatibility.ts
+++ b/src/resources/compatibility.ts
@@ -15,6 +15,8 @@ import "@formatjs/intl-relativetimeformat/locale-data/en";
 import "@formatjs/intl-datetimeformat/polyfill";
 import "@formatjs/intl-datetimeformat/locale-data/en";
 import "@formatjs/intl-datetimeformat/add-all-tz";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-displaynames/locale-data/en";
 
 // To use comlink under ES5
 import "proxy-polyfill";
diff --git a/src/resources/hammer.ts b/src/resources/hammer.ts
new file mode 100644
index 0000000000..b7165f3361
--- /dev/null
+++ b/src/resources/hammer.ts
@@ -0,0 +1,6 @@
+export {
+  DIRECTION_LEFT,
+  DIRECTION_RIGHT,
+  Manager,
+  Swipe,
+} from "@egjs/hammerjs";
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index e94aedc60c..7c03bf6b76 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -112,6 +112,8 @@ export const derivedStyles = {
   "mdc-button-disabled-ink-color": "var(--disabled-text-color)",
   "mdc-button-outline-color": "var(--divider-color)",
   "mdc-dialog-scroll-divider-color": "var(--divider-color)",
+  "mdc-dialog-heading-ink-color": "var(--primary-text-color)",
+  "mdc-dialog-content-ink-color": "var(--primary-text-color)",
 
   "mdc-text-field-idle-line-color": "var(--input-idle-line-color)",
   "mdc-text-field-hover-line-color": "var(--input-hover-line-color)",
@@ -296,8 +298,6 @@ export const haStyleDialog = css`
   ha-dialog {
     --mdc-dialog-min-width: 400px;
     --mdc-dialog-max-width: 600px;
-    --mdc-dialog-heading-ink-color: var(--primary-text-color);
-    --mdc-dialog-content-ink-color: var(--primary-text-color);
     --justify-action-buttons: space-between;
   }
 
diff --git a/src/translations/en.json b/src/translations/en.json
index 33394b18ab..429e122a68 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -401,10 +401,30 @@
       "config-entry-picker": {
         "config_entry": "Integration"
       },
+      "coversation-agent-picker": {
+        "conversation_agent": "Conversation agent",
+        "none": "None"
+      },
+      "pipeline-picker": {
+        "pipeline": "Assistant",
+        "preferred": "Preferred assistant ({preferred})"
+      },
       "theme-picker": {
         "theme": "Theme",
         "no_theme": "No theme"
       },
+      "language-picker": {
+        "language": "Language",
+        "no_languages": "No languages available"
+      },
+      "tts-picker": {
+        "tts": "Text-to-speech",
+        "none": "None"
+      },
+      "tts-voice-picker": {
+        "voice": "Voice",
+        "none": "None"
+      },
       "user-picker": {
         "no_user": "No user",
         "add_user": "Add user",
@@ -458,6 +478,7 @@
           }
         }
       },
+      "stt-picker": { "stt": "Speech-to-text", "none": "None" },
       "related-filter-menu": {
         "filter": "Filter",
         "filter_by_entity": "Filter by entity",
@@ -816,7 +837,8 @@
         "how_can_i_help": "How can I assist?",
         "input_label": "Enter a request",
         "send_text": "Send text",
-        "start_listening": "Start listening"
+        "start_listening": "Start listening",
+        "manage_assistants": "Manage assistants"
       },
       "generic": {
         "cancel": "Cancel",
@@ -1019,7 +1041,7 @@
           "enabled_label": "Enabled",
           "disabled_label": "Disabled",
           "enabled_cause": "Cannot change status. Disabled by {cause}.",
-          "hidden_label": "Hidden",
+          "visible_label": "Visible",
           "hidden_cause": "Hidden by {cause}.",
           "device_disabled": "The device of this entity is disabled.",
           "entity_disabled": "This entity is disabled.",
@@ -1034,12 +1056,11 @@
           "confirm_delete": "Are you sure you want to delete this entity?",
           "update": "Update",
           "note": "Note: This might not work yet with all integrations.",
-          "advanced": "Advanced settings",
-          "area": "Set entity area only",
-          "area_note": "By default the entities of a device are in the same area as the device. If you change the area of this entity, it will no longer follow the area of the device.",
-          "follow_device_area": "Follow device area",
-          "change_device_area": "Change device area",
+          "use_device_area": "Use device area",
+          "change_device_settings": "You can {link} in the device settings",
+          "change_device_area_link": "change the device area",
           "configure_state": "{integration} options",
+          "configure_state_secondary": "Specific options for {integration}",
           "stream": {
             "preload_stream": "Preload camera stream",
             "preload_stream_description": "This keeps the camera stream open in the background so it shows quicker. Warning! This is device intensive.",
@@ -1054,12 +1075,16 @@
             "stream_orientation_7": "Rotate right and flip",
             "stream_orientation_8": "Rotate right"
           },
-          "aliases_section": "Aliases",
-          "no_aliases": "No configured aliases",
-          "configured_aliases": "{count} configured {count, plural,\n  one {alias}\n  other {aliases}\n}",
-          "aliases_description": "Aliases are alternative names used in voice assistants to refer to this entity."
+          "no_aliases": "Configure aliases and expose settings for voice assistants"
         }
       },
+      "voice-settings": {
+        "expose_header": "Expose",
+        "aliases_header": "Aliases",
+        "aliases_description": "Aliases are supported by Assist and Google Assistant.",
+        "ask_pin": "Ask for PIN",
+        "manual_config": "Managed with filters in configuration.yaml"
+      },
       "restart": {
         "heading": "Restart Home Assistant",
         "advanced_options": "Advanced options",
@@ -1246,10 +1271,6 @@
           "device_name_placeholder": "Change device name"
         }
       },
-      "domain_toggler": {
-        "title": "Toggle Domains",
-        "reset_entities": "Reset Entity overrides"
-      },
       "mqtt_device_debug_info": {
         "title": "{device} debug info",
         "deserialize": "Attempt to parse MQTT messages as JSON",
@@ -1305,6 +1326,13 @@
       "enter_code": {
         "title": "Enter code",
         "input_label": "Code"
+      },
+      "tts-try": {
+        "header": "Try text-to-speech",
+        "message": "Message",
+        "message_example": "Hello. How can I assist?",
+        "message_placeholder": "Enter a sentence to speak.",
+        "play": "Play"
       }
     },
     "duration": {
@@ -1406,6 +1434,10 @@
             "main": "Dashboards",
             "secondary": "Organize how you interact with your home"
           },
+          "voice_assistants": {
+            "main": "Voice assistants",
+            "secondary": "Manage your voice assistants"
+          },
           "energy": {
             "main": "Energy",
             "secondary": "Monitor your energy production and consumption"
@@ -1992,6 +2024,94 @@
             }
           }
         },
+        "voice_assistants": {
+          "assistants": {
+            "caption": "Assistants",
+            "pipeline": {
+              "add_assistant": "Add assistant",
+              "exposed_entities": "[%key:ui::panel::config::cloud::account::google::exposed_entities%]",
+              "delete": {
+                "confirm_title": "Delete {name}?",
+                "confirm_text": "{name} will be permanently deleted."
+              },
+              "detail": {
+                "update_assistant_action": "Update",
+                "add_assistant_title": "Add assistant",
+                "add_assistant_action": "Create",
+                "try_tts": "Try voice",
+                "form": {
+                  "name": "Name",
+                  "conversation_engine": "Conversation agent",
+                  "conversation_language": "[%key:ui::panel::config::voice_assistants::assistants::pipeline::detail::form::language%]",
+                  "language": "Language",
+                  "stt_engine": "Speech-to-text",
+                  "stt_language": "[%key:ui::panel::config::voice_assistants::assistants::pipeline::detail::form::language%]",
+                  "tts_engine": "Text-to-speech",
+                  "tts_language": "[%key:ui::panel::config::voice_assistants::assistants::pipeline::detail::form::language%]",
+                  "tts_voice": "Voice"
+                },
+                "steps": {
+                  "config": {
+                    "title": "Configuration",
+                    "description": "Give your assistant a name and select your language. Depending on this language, you may be able to choose region specific variants below."
+                  },
+                  "conversation": {
+                    "title": "Conversation agent",
+                    "description": "The conversation agent is the brains of your assistant and will process the incoming text commands."
+                  },
+                  "stt": {
+                    "title": "Speech-to-text",
+                    "description": "When you are controlling your assistant with voice, the speech-to-text engine turns your voice command into text."
+                  },
+                  "tts": {
+                    "title": "Text-to-speech",
+                    "description": "When you are controlling your assistant with voice, the text-to-speech engine turns the conversation text responses into audio."
+                  }
+                },
+                "no_cloud_message": "You should have an active cloud subscription to use cloud speech services.",
+                "no_cloud_action": "Subscribe"
+              }
+            },
+            "cloud": {
+              "header": "Get the best assistant with Home Assistant Cloud",
+              "features": {
+                "assistants": {
+                  "title": "Google Assistant and Amazon Alexa",
+                  "text": "Control all your Home Assistant devices via any Google Assistant-enabled or Alexa-enabled device."
+                },
+                "speech": {
+                  "title": "Better speech options",
+                  "text": "Bring personality to your home by having it speak to you using our neural-network powered speech-to-text and text-to-speech services."
+                }
+              },
+              "and_more": "And more",
+              "try_one_month": "Try 1 month for free",
+              "sign_in": "Sign in"
+            }
+          },
+          "expose": {
+            "caption": "Expose",
+            "headers": {
+              "name": "Name",
+              "area": "Area",
+              "assistants": "Assistants",
+              "aliases": "Aliases"
+            },
+            "aliases": "{count} aliases",
+            "expose": "Expose",
+            "unexpose": "Unexpose",
+            "add": "Expose entities",
+            "expose_confirm_title": "Expose selected entities?",
+            "expose_confirm_text": "Do you want to expose {entities} entities to {assistants}?",
+            "unexpose_confirm_title": "Stop exposing selected entities?",
+            "unexpose_confirm_text": "Do you want to stop exposing {entities} entities to {assistants}?",
+            "expose_dialog": {
+              "header": "Expose entities",
+              "expose_to": "to {assistants}",
+              "expose_entities": "Expose {count} {count, plural,\n  one {entity}\n  other {entities}\n}"
+            }
+          }
+        },
         "automation": {
           "caption": "Automations",
           "description": "Create custom behavior rules for your home",
@@ -2206,8 +2326,10 @@
                 "webhook": {
                   "copy_url": "Copy URL to Clipboard",
                   "label": "Webhook",
+                  "local_only": "Only accessible from the local network",
                   "webhook_id": "Webhook ID",
-                  "webhook_id_helper": "Treat this ID like a password: keep it secret, and make it hard to guess."
+                  "webhook_id_helper": "Treat this ID like a password: keep it secret, and make it hard to guess.",
+                  "webhook_settings": "Webhook Settings"
                 },
                 "zone": {
                   "label": "Zone",
@@ -2632,7 +2754,9 @@
             "start_trial": "Start your free 1 month trial",
             "trial_info": "No payment information necessary",
             "alert_password_change_required": "You need to change your password before logging in.",
-            "alert_email_confirm_necessary": "You need to confirm your email before logging in."
+            "alert_email_confirm_necessary": "You need to confirm your email before logging in.",
+            "cloud_pipeline_title": "Want to use Home Assistant Cloud for your voice assistant?",
+            "cloud_pipeline_text": "We created a new assistant for you, using the great text-to-speech and speech-to-text engines from Home Assistant Cloud. Would you like to set this assistant as the preferred assistant?"
           },
           "forgot_password": {
             "title": "Forgot password",
@@ -2677,18 +2801,19 @@
             "integrations_introduction": "Integrations for Home Assistant Cloud allow you to connect with services in the cloud without having to expose your Home Assistant instance publicly on the internet.",
             "integrations_introduction2": "Check the website for ",
             "integrations_link_all_features": " all available features",
+            "tip_moved_voice_assistants": "Looking for Google Assistant and Amazon Alexa settings? They are moved to the new voice assistants page.",
             "connected": "Connected",
             "connecting": "Connecting…",
             "not_connected": "Not Connected",
             "fetching_subscription": "Fetching subscription…",
             "tts": {
-              "title": "Text to Speech",
+              "title": "Text-to-speech",
               "info": "Bring personality to your home by having it speak to you by using our Text-to-Speech services. You can use this in automations and scripts by using the {service} service.",
               "default_language": "Default language to use",
               "default_gender": "Default gender to use",
               "try": "Try",
               "dialog": {
-                "header": "Try Text to Speech",
+                "header": "Try text-to-speech",
                 "example_message": "Hello {name}, you can play any text on any supported media player!",
                 "target": "Target",
                 "target_browser": "Browser",
@@ -2702,6 +2827,9 @@
               "not_connected": "Not Connected",
               "reconnecting": "Not connected. Trying to reconnect.",
               "access_is_being_prepared": "Remote control is being prepared. We will notify you when it's ready.",
+              "cerificate_loading": "Your certificate is loading.",
+              "cerificate_loaded": "Your certificate is loaded, waiting for validation.",
+              "cerificate_error": "There was an error generating the certficate, check your logs.",
               "info": "Home Assistant Cloud provides a secure remote connection to your instance while away from home.",
               "instance_is_available": "Your instance is available at your",
               "instance_will_be_available": "Your instance will be available at your",
@@ -2717,12 +2845,16 @@
               "enable_state_reporting": "Enable State Reporting",
               "info_state_reporting": "If you enable state reporting, Home Assistant will send all state changes of exposed entities to Amazon. This allows you to always see the latest states in the Alexa app and use the state changes to create routines.",
               "state_reporting_error": "Unable to {enable_disable} report state.",
-              "manage_entities": "[%key:ui::panel::config::cloud::account::google::manage_entities%]",
+              "show_entities": "[%key:ui::panel::config::cloud::account::google::show_entities%]",
+              "exposed_entities": "[%key:ui::panel::config::cloud::account::google::exposed_entities%]",
+              "manual_config": "[%key:ui::panel::config::cloud::account::google::manual_config%]",
               "enable": "enable",
               "disable": "disable",
-              "not_configured_title": "Alexa is not activated",
+              "not_configured_title": "Continue setting up Alexa",
               "not_configured_text": "Before you can use Alexa, you need to activate the Home Assistant skill for Alexa in the Alexa app.",
-              "link_learn_how_it_works": "[%key:ui::panel::config::cloud::account::remote::link_learn_how_it_works%]"
+              "link_learn_how_it_works": "[%key:ui::panel::config::cloud::account::remote::link_learn_how_it_works%]",
+              "expose_new_entities": "[%key:ui::panel::config::cloud::account::google::expose_new_entities%]",
+              "expose_new_entities_info": "Should new entities, that are supported and have no security risks be exposed to Alexa automatically?"
             },
             "google": {
               "title": "Google Assistant",
@@ -2737,11 +2869,15 @@
               "enter_pin_info": "Please enter a PIN to interact with security devices. Security devices are doors, garage doors and locks. You will be asked to say/enter this PIN when interacting with such devices via Google Assistant.",
               "devices_pin": "Security Devices PIN",
               "enter_pin_hint": "Enter a PIN to use security devices",
-              "manage_entities": "Manage Entities",
+              "show_entities": "Show Entities",
+              "exposed_entities": "{number} {number, plural,\n  one {entity}\n  other {entities}\n} exposed",
+              "manual_config": "Editing which entities are exposed via the UI is disabled because you have configured entity filters in configuration.yaml.",
               "enter_pin_error": "Unable to store PIN:",
-              "not_configured_title": "Google Assistant is not activated",
+              "not_configured_title": "Continue setting up Google Assistant",
               "not_configured_text": "Before you can use Google Assistant, you need to activate the Home Assistant Cloud skill for Google Assistant in the Google Home app.",
-              "link_learn_how_it_works": "[%key:ui::panel::config::cloud::account::remote::link_learn_how_it_works%]"
+              "link_learn_how_it_works": "[%key:ui::panel::config::cloud::account::remote::link_learn_how_it_works%]",
+              "expose_new_entities": "Expose new entities",
+              "expose_new_entities_info": "Should new entities, that are supported and have no security risks be exposed to Google Assistant automatically?"
             },
             "webhooks": {
               "title": "Webhooks",
@@ -2756,23 +2892,6 @@
               "disable_hook_error_msg": "Failed to disable webhook:"
             }
           },
-          "alexa": {
-            "title": "Alexa",
-            "banner": "[%key:ui::panel::config::cloud::google::banner%]",
-            "exposed_entities": "[%key:ui::panel::config::cloud::google::exposed_entities%]",
-            "not_exposed_entities": "[%key:ui::panel::config::cloud::google::not_exposed_entities%]",
-            "manage_defaults": "[%key:ui::panel::config::cloud::google::manage_defaults%]",
-            "manage_defaults_dialog_description": "[%key:ui::panel::config::cloud::google::manage_defaults_dialog_description%]",
-            "expose_entity": "[%key:ui::panel::config::cloud::google::expose_entity%]",
-            "dont_expose_entity": "[%key:ui::panel::config::cloud::google::dont_expose_entity%]",
-            "follow_domain": "[%key:ui::panel::config::cloud::google::follow_domain%]",
-            "exposed": "[%key:ui::panel::config::cloud::google::exposed%]",
-            "not_exposed": "[%key:ui::panel::config::cloud::google::not_exposed%]",
-            "manage_aliases": "[%key:ui::panel::config::cloud::google::manage_aliases%]",
-            "expose": "Expose to Alexa",
-            "sync_entities": "Synchronize entities",
-            "sync_entities_error": "Failed to sync entities:"
-          },
           "dialog_certificate": {
             "certificate_information": "Certificate Information",
             "certificate_expiration_date": "Certificate expiration date:",
@@ -2780,33 +2899,6 @@
             "fingerprint": "Certificate fingerprint:",
             "close": "Close"
           },
-          "google": {
-            "title": "Google Assistant",
-            "expose": "Expose to Google Assistant",
-            "disable_2FA": "Disable two factor authentication",
-            "banner": "Editing which entities are exposed via this UI is disabled because you have configured entity filters in configuration.yaml.",
-            "exposed_entities": "Exposed entities",
-            "not_exposed_entities": "Not exposed entities",
-            "manage_defaults": "Manage defaults",
-            "manage_defaults_dialog_description": "Entities can be exposed by default based on their type.",
-            "expose_entity": "Expose entity",
-            "dont_expose_entity": "Don't expose entity",
-            "follow_domain": "Follow domain",
-            "exposed": "{selected} exposed",
-            "not_exposed": "{selected} not exposed",
-            "manage_aliases": "Manage aliases",
-            "add_aliases": "Add aliases",
-            "no_aliases": "No aliases",
-            "aliases_not_available": "Aliases not available",
-            "aliases_not_available_learn_more": "Learn more",
-            "sync_to_google": "Synchronizing changes to Google.",
-            "sync_entities": "Synchronize entities",
-            "sync_entities_error": "Failed to sync entities:",
-            "not_configured_title": "[%key:ui::panel::config::cloud::account::google::not_configured_title%]",
-            "not_configured_text": "[%key:ui::panel::config::cloud::account::google::not_configured_text%]",
-            "sync_failed_title": "Syncing failed",
-            "sync_failed_text": "Syncing your entities failed, try again or check the logs."
-          },
           "dialog_cloudhook": {
             "webhook_for": "Webhook for {name}",
             "managed_by_integration": "This webhook is managed by an integration and cannot be disabled.",
@@ -2943,6 +3035,7 @@
             "introduction": "Home Assistant keeps a registry of every entity it has ever seen that can be uniquely identified. Each of these entities will have an entity ID assigned which will be reserved for just this entity.",
             "introduction2": "Use the entity registry to override the name, change the entity ID or remove the entry from Home Assistant.",
             "search": "Search entities",
+            "unnamed_entity": "Unnamed entity",
             "filter": {
               "filter": "Filter",
               "show_hidden": "Show hidden entities",
@@ -3839,7 +3932,7 @@
             "wifi_password": "Wi-Fi password",
             "warning": "If you are changing the Wi-Fi, IP or gateway addresses, you might lose the connection!",
             "static": "Static",
-            "dhcp": "DHCP",
+            "auto": "Automatic",
             "disabled": "Disabled",
             "ip_netmask": "IP address/Netmask",
             "gateway": "Gateway address",
@@ -3859,17 +3952,17 @@
           "used_space": "Used Space",
           "emmc_lifetime_used": "eMMC Lifetime Used",
           "datadisk": {
-            "title": "Move datadisk",
-            "description": "You are currently using ''{current_path}'' as datadisk. Moving data disks will reboot your device and it's estimated to take {time} minutes. Your Home Assistant installation will not be accessible during this period. Do not disconnect the power during the move!",
+            "title": "Move data disk",
+            "description": "You are currently using ''{current_path}'' as data disk. Moving the data disk will reboot your device and it's estimated to take {time} minutes. Your Home Assistant installation will not be accessible during this period. Do not disconnect the power during the move!",
             "extra_information": "Size: {size}, S/N: {serial}",
-            "select_device": "Select new datadisk",
+            "select_device": "Select new data disk",
             "no_devices_title": "No suitable storage found",
             "no_devices_text": "There is no suitable external device found. The storage capacity of the external data disk must be larger than the storage capacity of the existing disk",
-            "moving_desc": "Rebooting and moving datadisk. Please have patience",
-            "moving": "Moving datadisk",
+            "moving_desc": "Rebooting and moving data disk. Please have patience",
+            "moving": "Moving data disk",
             "loading_devices": "Loading devices",
             "cancel": "[%key:ui::common::cancel%]",
-            "failed_to_move": "Failed to move datadisk",
+            "failed_to_move": "Failed to move data disk",
             "move": "Move"
           }
         },
@@ -5354,6 +5447,7 @@
           "uninstall": "Failed to uninstall add-on",
           "install": "Failed to install add-on",
           "stop": "Failed to stop add-on",
+          "rebuild": "Failed to rebuild add-on",
           "restart": "Failed to restart add-on",
           "start": "Failed to start add-on",
           "go_to_config": "Edit Config",
@@ -5511,7 +5605,7 @@
         "failed_to_shutdown": "Failed to shutdown the host",
         "failed_to_set_hostname": "Setting hostname failed",
         "failed_to_import_from_usb": "Failed to import from USB",
-        "failed_to_move": "Failed to move datadisk",
+        "failed_to_move": "Failed to move data disk",
         "used_space": "Used space",
         "hostname": "Hostname",
         "change_hostname": "Change Hostname",
@@ -5528,7 +5622,7 @@
         "shutdown_host": "Shutdown host",
         "hardware": "Hardware",
         "import_from_usb": "Import from USB",
-        "move_datadisk": "Move datadisk"
+        "move_datadisk": "Move data disk"
       },
       "core": {
         "cpu_usage": "Core CPU Usage",
@@ -5579,7 +5673,7 @@
         "wifi_password": "[%key:ui::panel::config::network::supervisor::wifi_password%]",
         "warning": "If you are changing the Wi-Fi, IP or gateway addresses, you might lose the connection!",
         "static": "Static",
-        "dhcp": "DHCP",
+        "auto": "Automatic",
         "disabled": "Disabled",
         "ip_netmask": "IP address/Netmask",
         "gateway": "Gateway address",
@@ -5626,11 +5720,11 @@
       },
       "datadisk_move": {
         "title": "[%key:supervisor::system::host::move_datadisk%]",
-        "description": "You are currently using ''{current_path}'' as datadisk. Moving data disks will reboot your device and it's estimated to take {time} minutes. Your Home Assistant installation will not be accessible during this period. Do not disconnect the power during the move!",
-        "select_device": "Select new datadisk",
+        "description": "You are currently using ''{current_path}'' as data disk. Moving data disks will reboot your device and it's estimated to take {time} minutes. Your Home Assistant installation will not be accessible during this period. Do not disconnect the power during the move!",
+        "select_device": "Select new data disk",
         "no_devices": "No suitable attached devices found",
-        "moving_desc": "Rebooting and moving datadisk. Please have patience",
-        "moving": "Moving datadisk",
+        "moving_desc": "Rebooting and moving data disk. Please have patience",
+        "moving": "Moving data disk",
         "loading_devices": "Loading devices",
         "cancel": "[%key:ui::common::cancel%]",
         "move": "Move"
diff --git a/src/util/audio-recorder.ts b/src/util/audio-recorder.ts
new file mode 100644
index 0000000000..b26f0f4922
--- /dev/null
+++ b/src/util/audio-recorder.ts
@@ -0,0 +1,93 @@
+export class AudioRecorder {
+  private _active = false;
+
+  private _callback: (data: Int16Array) => void;
+
+  private _context: AudioContext | undefined;
+
+  private _stream: MediaStream | undefined;
+
+  private _source: MediaStreamAudioSourceNode | undefined;
+
+  private _recorder: AudioWorkletNode | undefined;
+
+  constructor(callback: (data: Int16Array) => void) {
+    this._callback = callback;
+  }
+
+  public get active() {
+    return this._active;
+  }
+
+  public get sampleRate() {
+    return this._context?.sampleRate;
+  }
+
+  public static get isSupported() {
+    return (
+      window.isSecureContext &&
+      // @ts-ignore-next-line
+      (window.AudioContext || window.webkitAudioContext)
+    );
+  }
+
+  public async start() {
+    if (!this._context || !this._stream || !this._source || !this._recorder) {
+      try {
+        await this._createContext();
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.error(err);
+        this._active = false;
+      }
+    } else {
+      this._stream.getTracks()[0].enabled = true;
+      await this._context.resume();
+      this._active = true;
+    }
+  }
+
+  public async stop() {
+    this._active = false;
+    if (this._stream) {
+      this._stream.getTracks()[0].enabled = false;
+    }
+    await this._context?.suspend();
+  }
+
+  public close() {
+    this._active = false;
+    this._stream?.getTracks()[0].stop();
+    if (this._recorder) {
+      this._recorder.port.onmessage = null;
+    }
+    this._source?.disconnect();
+    this._context?.close();
+    this._stream = undefined;
+    this._source = undefined;
+    this._recorder = undefined;
+    this._context = undefined;
+  }
+
+  private async _createContext() {
+    // @ts-ignore-next-line
+    this._context = new (window.AudioContext || window.webkitAudioContext)();
+    this._stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+    await this._context.audioWorklet.addModule(
+      new URL("./recorder.worklet.js", import.meta.url)
+    );
+
+    this._source = this._context.createMediaStreamSource(this._stream);
+    this._recorder = new AudioWorkletNode(this._context, "recorder.worklet");
+
+    this._recorder.port.onmessage = (e) => {
+      if (!this._active) {
+        return;
+      }
+      this._callback(e.data);
+    };
+    this._active = true;
+    this._source.connect(this._recorder);
+  }
+}
diff --git a/src/util/legacy-support.js b/src/util/legacy-support.js
deleted file mode 100644
index 869ecbb4f7..0000000000
--- a/src/util/legacy-support.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Provide legacy support to HTML imports by exposing Polymer and
- * Polymer.Element on the window object.
- */
-/* eslint-plugin-disable lit */
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { Polymer } from "@polymer/polymer/polymer-legacy";
-
-const message =
-  "WARNING: Polymer will be removed from window in Home Assistant 2023.5. More info: https://developers.home-assistant.io/blog/2023/04/04/deprecating_polymer";
-
-const handler = {
-  get(target, prop, receiver) {
-    // eslint-disable-next-line no-console
-    console.warn(message);
-    document
-      .querySelector("home-assistant")
-      .dispatchEvent(
-        new CustomEvent("write_log", { detail: { message, level: "warning" } })
-      );
-    return Reflect.get(target, prop, receiver);
-  },
-  apply: function (target, thisArg, argumentsList) {
-    // eslint-disable-next-line no-console
-    console.warn(message);
-    document
-      .querySelector("home-assistant")
-      .dispatchEvent(
-        new CustomEvent("write_log", { detail: { message, level: "warning" } })
-      );
-    return Reflect.apply(target, thisArg, argumentsList);
-  },
-};
-
-Polymer.Element = PolymerElement;
-Polymer.html = html;
-
-window.Polymer = new Proxy(Polymer, handler);
diff --git a/src/panels/config/integrations/integration-panels/voice_assistant/assist/recorder.worklet.js b/src/util/recorder.worklet.js
similarity index 100%
rename from src/panels/config/integrations/integration-panels/voice_assistant/assist/recorder.worklet.js
rename to src/util/recorder.worklet.js
diff --git a/yarn.lock b/yarn.lock
index 7e677ef499..e924891a48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,12 +16,12 @@ __metadata:
   linkType: hard
 
 "@ampproject/remapping@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "@ampproject/remapping@npm:2.2.0"
+  version: 2.2.1
+  resolution: "@ampproject/remapping@npm:2.2.1"
   dependencies:
-    "@jridgewell/gen-mapping": ^0.1.0
+    "@jridgewell/gen-mapping": ^0.3.0
     "@jridgewell/trace-mapping": ^0.3.9
-  checksum: d74d170d06468913921d72430259424b7e4c826b5a7d39ff839a29d547efb97dc577caa8ba3fb5cf023624e9af9d09651afc3d4112a45e2050328abc9b3a2292
+  checksum: 03c04fd526acc64a1f4df22651186f3e5ef0a9d6d6530ce4482ec9841269cf7a11dbb8af79237c282d721c5312024ff17529cd72cc4768c11e999b58e2302079
   languageName: node
   linkType: hard
 
@@ -124,8 +124,8 @@ __metadata:
   linkType: hard
 
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0":
-  version: 7.21.0
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.21.0"
+  version: 7.21.4
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.21.4"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.18.6
     "@babel/helper-environment-visitor": ^7.18.9
@@ -137,19 +137,19 @@ __metadata:
     "@babel/helper-split-export-declaration": ^7.18.6
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 3e781d91d1056ea9b3a0395f3017492594a8b86899119b4a1645227c31727b8bec9bc8f6b72e86b1c5cf2dd6690893d2e8c5baff4974c429e616ead089552a21
+  checksum: 9123ca80a4894aafdb1f0bc08e44f6be7b12ed1fbbe99c501b484f9b1a17ff296b6c90c18c222047d53c276f07f17b4de857946fa9d0aa207023b03e4cc716f2
   languageName: node
   linkType: hard
 
 "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.20.5":
-  version: 7.21.0
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.21.0"
+  version: 7.21.4
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.21.4"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.18.6
     regexpu-core: ^5.3.1
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 63a6396a4e9444edc7e97617845583ea5cf059573d0b4cc566869f38576d543e37fde0edfcc21d6dfb7962ed241e909561714dc41c5213198bac04e0983b04f2
+  checksum: 78334865db2cd1d64d103bd0d96dee2818b0387d10aa973c084e245e829df32652bca530803e397b7158af4c02b9b21d5a9601c29bdfbb8d54a3d4ad894e067b
   languageName: node
   linkType: hard
 
@@ -214,11 +214,11 @@ __metadata:
   linkType: hard
 
 "@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/helper-module-imports@npm:7.18.6"
+  version: 7.21.4
+  resolution: "@babel/helper-module-imports@npm:7.21.4"
   dependencies:
-    "@babel/types": ^7.18.6
-  checksum: f393f8a3b3304b1b7a288a38c10989de754f01d29caf62ce7c4e5835daf0a27b81f3ac687d9d2780d39685aae7b55267324b512150e7b2be967b0c493b6a1def
+    "@babel/types": ^7.21.4
+  checksum: bd330a2edaafeb281fbcd9357652f8d2666502567c0aad71db926e8499c773c9ea9c10dfaae30122452940326d90c8caff5c649ed8e1bf15b23f858758d3abc6
   languageName: node
   linkType: hard
 
@@ -397,17 +397,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-external-helpers@npm:7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-external-helpers@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: aaf681b6339d7ab3c82c157f3e9c7e9404a5e2120dca35b1ceff5a8bb1a9a3d5646af9a53ed4440ba376e2a25db5bfae2b65d0f458ada9ae8ed11450a5329c6a
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-proposal-async-generator-functions@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-async-generator-functions@npm:7.20.7"
@@ -422,7 +411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-class-properties@npm:7.18.6, @babel/plugin-proposal-class-properties@npm:^7.18.6":
+"@babel/plugin-proposal-class-properties@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
   dependencies:
@@ -510,7 +499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6, @babel/plugin-proposal-nullish-coalescing-operator@npm:^7.18.6":
+"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6"
   dependencies:
@@ -534,7 +523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-object-rest-spread@npm:7.20.7, @babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
+"@babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
   version: 7.20.7
   resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7"
   dependencies:
@@ -561,7 +550,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-proposal-optional-chaining@npm:7.21.0, @babel/plugin-proposal-optional-chaining@npm:^7.20.7, @babel/plugin-proposal-optional-chaining@npm:^7.21.0":
+"@babel/plugin-proposal-optional-chaining@npm:^7.20.7, @babel/plugin-proposal-optional-chaining@npm:^7.21.0":
   version: 7.21.0
   resolution: "@babel/plugin-proposal-optional-chaining@npm:7.21.0"
   dependencies:
@@ -656,7 +645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-dynamic-import@npm:7.8.3, @babel/plugin-syntax-dynamic-import@npm:^7.8.3":
+"@babel/plugin-syntax-dynamic-import@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-dynamic-import@npm:7.8.3"
   dependencies:
@@ -689,17 +678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-meta@npm:7.10.4":
-  version: 7.10.4
-  resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.10.4
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 166ac1125d10b9c0c430e4156249a13858c0366d38844883d75d27389621ebe651115cb2ceb6dc011534d5055719fa1727b59f39e1ab3ca97820eef3dcab5b9b
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-json-strings@npm:^7.8.3":
   version: 7.8.3
   resolution: "@babel/plugin-syntax-json-strings@npm:7.8.3"
@@ -799,7 +777,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-top-level-await@npm:7.14.5, @babel/plugin-syntax-top-level-await@npm:^7.12.1, @babel/plugin-syntax-top-level-await@npm:^7.14.5":
+"@babel/plugin-syntax-top-level-await@npm:^7.12.1, @babel/plugin-syntax-top-level-await@npm:^7.14.5":
   version: 7.14.5
   resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5"
   dependencies:
@@ -811,13 +789,13 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-syntax-typescript@npm:^7.20.0":
-  version: 7.20.0
-  resolution: "@babel/plugin-syntax-typescript@npm:7.20.0"
+  version: 7.21.4
+  resolution: "@babel/plugin-syntax-typescript@npm:7.21.4"
   dependencies:
-    "@babel/helper-plugin-utils": ^7.19.0
+    "@babel/helper-plugin-utils": ^7.20.2
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 6189c0b5c32ba3c9a80a42338bd50719d783b20ef29b853d4f03929e971913d3cefd80184e924ae98ad6db09080be8fe6f1ffde9a6db8972523234f0274d36f7
+  checksum: a59ce2477b7ae8c8945dc37dda292fef9ce46a6507b3d76b03ce7f3a6c9451a6567438b20a78ebcb3955d04095fd1ccd767075a863f79fcc30aa34dcfa441fe0
   languageName: node
   linkType: hard
 
@@ -1392,9 +1370,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/autocomplete@npm:6.4.2":
-  version: 6.4.2
-  resolution: "@codemirror/autocomplete@npm:6.4.2"
+"@codemirror/autocomplete@npm:6.5.1":
+  version: 6.5.1
+  resolution: "@codemirror/autocomplete@npm:6.5.1"
   dependencies:
     "@codemirror/language": ^6.0.0
     "@codemirror/state": ^6.0.0
@@ -1405,19 +1383,19 @@ __metadata:
     "@codemirror/state": ^6.0.0
     "@codemirror/view": ^6.0.0
     "@lezer/common": ^1.0.0
-  checksum: c6cc4edb1c412153e6f6f27926674d7f1d386d1f30d6d4f60c5b52bfa0105870b0c70449b69891937bcf082340d8b0fa6d1f9f28f5eb60adc2974ed4c73aadc1
+  checksum: c7026af557f5e467050bea22b3e9b060adca065fc84c22f024fd59730107ea711006dd353050300acce5862cfb82643fb3edbdef80c8b275214398147395e6da
   languageName: node
   linkType: hard
 
-"@codemirror/commands@npm:6.2.2":
-  version: 6.2.2
-  resolution: "@codemirror/commands@npm:6.2.2"
+"@codemirror/commands@npm:6.2.3":
+  version: 6.2.3
+  resolution: "@codemirror/commands@npm:6.2.3"
   dependencies:
     "@codemirror/language": ^6.0.0
     "@codemirror/state": ^6.2.0
     "@codemirror/view": ^6.0.0
     "@lezer/common": ^1.0.0
-  checksum: d3aa1ca8cbd7b9434eedba6b6d783411670796bf6ab61990afc4fd0c04645189fe4dd55bb95e23b943e9089f9739bc7e92aa4b2ac3eac09cfa2b91a45f608d3e
+  checksum: e6b7d07818d6df4372a272539b84a256e651cfa3416a33f9e1859f2ced0f6e3c944e0c40c2c407dcd5b13ffab2931d4e5ea5952db439837071de336e7a31c722
   languageName: node
   linkType: hard
 
@@ -1462,14 +1440,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@codemirror/view@npm:6.9.3, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.6.0":
-  version: 6.9.3
-  resolution: "@codemirror/view@npm:6.9.3"
+"@codemirror/view@npm:6.9.5, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.6.0":
+  version: 6.9.5
+  resolution: "@codemirror/view@npm:6.9.5"
   dependencies:
     "@codemirror/state": ^6.1.4
     style-mod: ^4.0.0
     w3c-keyname: ^2.2.4
-  checksum: 718ecbb021ca75eb89003f73c846a07d36a708dcfec8345f0f0dbcfc0d0df5ea6f114918694b2730a6d49e5e50502bcce79ce7ff94ce55748e068e5a35073755
+  checksum: 38039ae5d1cf4ec54c5d0252790a942b5788b9e8670dcf58e63c1f2befe11e852581c88f4e044ca664a7b11c634b1c152099da1a4ac9f454939b20d7c649b808
   languageName: node
   linkType: hard
 
@@ -1490,20 +1468,20 @@ __metadata:
   linkType: hard
 
 "@eslint-community/eslint-utils@npm:^4.2.0":
-  version: 4.3.0
-  resolution: "@eslint-community/eslint-utils@npm:4.3.0"
+  version: 4.4.0
+  resolution: "@eslint-community/eslint-utils@npm:4.4.0"
   dependencies:
     eslint-visitor-keys: ^3.3.0
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-  checksum: f487760a692f0f1fef76e248ad72976919576ba57edc2b1b1dc1d182553bae6b5bf7b078e654da85d04f0af8a485d20bd26280002768f4fbcd2e330078340cb0
+  checksum: cdfe3ae42b4f572cbfb46d20edafe6f36fc5fb52bf2d90875c58aefe226892b9677fef60820e2832caf864a326fe4fc225714c46e8389ccca04d5f9288aabd22
   languageName: node
   linkType: hard
 
 "@eslint-community/regexpp@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "@eslint-community/regexpp@npm:4.4.0"
-  checksum: 2d127af0c752b80e8a782eacfe996a86925d21de92da3ffc6f9e615e701145e44a62e26bdd88bfac2cd76779c39ba8d9875a91046ec5e7e5f23cb647c247ea6a
+  version: 4.5.0
+  resolution: "@eslint-community/regexpp@npm:4.5.0"
+  checksum: 99c01335947dbd7f2129e954413067e217ccaa4e219fe0917b7d2bd96135789384b8fedbfb8eb09584d5130b27a7b876a7150ab7376f51b3a0c377d5ce026a10
   languageName: node
   linkType: hard
 
@@ -1550,14 +1528,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/icu-messageformat-parser@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@formatjs/icu-messageformat-parser@npm:2.3.0"
+"@formatjs/icu-messageformat-parser@npm:2.3.1":
+  version: 2.3.1
+  resolution: "@formatjs/icu-messageformat-parser@npm:2.3.1"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/icu-skeleton-parser": 1.3.18
     tslib: ^2.4.0
-  checksum: e8aca733bed81c94ec16fa9f1a88dbaf93a644a8c5796a6ab1e795112dd1f6c1e92528a123483d3034ac5e6b2b454481ef61f7e56e6e77f1467f9524be7fe331
+  checksum: e4651530a045488ac92c91111abe744cda4012b368651888f6324360375afceba4e69b297dd44bfe2974b0b4c9c18f911fa292edf92a0e6fa75daa04503aa8db
   languageName: node
   linkType: hard
 
@@ -1571,14 +1549,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-datetimeformat@npm:6.5.1":
-  version: 6.5.1
-  resolution: "@formatjs/intl-datetimeformat@npm:6.5.1"
+"@formatjs/intl-datetimeformat@npm:6.7.0":
+  version: 6.7.0
+  resolution: "@formatjs/intl-datetimeformat@npm:6.7.0"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/intl-localematcher": 0.2.32
     tslib: ^2.4.0
-  checksum: 5e11ee237819e593f45753e43da94d002d78e0e7160cf14daf5e40e173cb9063996ea2e6e554cff7db9e4f6aa5366d2a463bccdcd92a4620ca1bfbea55fc4658
+  checksum: 9eebb8cda1c7ada91b891bb1a9d25bc6c36737da1ec87b2256e44cdaa60968ca644316f023e4a0bb6599fbaf57f520e4f600700a8f61a403941418c4ff68e024
+  languageName: node
+  linkType: hard
+
+"@formatjs/intl-displaynames@npm:6.3.1":
+  version: 6.3.1
+  resolution: "@formatjs/intl-displaynames@npm:6.3.1"
+  dependencies:
+    "@formatjs/ecma402-abstract": 1.14.3
+    "@formatjs/intl-localematcher": 0.2.32
+    tslib: ^2.4.0
+  checksum: a8f43cda125adf8ac34d890f6b2c8b77525d5dd1452fecc5053b16dc40142d5b00b4f0dfc26c73fdf03b38e84ed2936fe4eb453414f611f79e260374f8afb642
   languageName: node
   linkType: hard
 
@@ -1600,15 +1589,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-locale@npm:3.1.1":
-  version: 3.1.1
-  resolution: "@formatjs/intl-locale@npm:3.1.1"
+"@formatjs/intl-locale@npm:3.2.1":
+  version: 3.2.1
+  resolution: "@formatjs/intl-locale@npm:3.2.1"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/intl-enumerator": 1.2.1
     "@formatjs/intl-getcanonicallocales": 2.1.0
     tslib: ^2.4.0
-  checksum: 4e7272199581526f1226e6daef3c2434429f8ec6ceb3b3ce3362209f9e7dd5b34c57a2933f8a63b04be9e44af89548f5e457f2e1d4e9ded96c23c6555aad7f94
+  checksum: bac67ac88301e63178f66cf7115ffd3bedfd3284c8e7dbacc4912e32eeeda50099cc2718b4dda0e3de5e37b56f26b17cc21d0a32b36d255d5c090680cbcaadcf
   languageName: node
   linkType: hard
 
@@ -1621,36 +1610,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@formatjs/intl-numberformat@npm:8.3.5":
-  version: 8.3.5
-  resolution: "@formatjs/intl-numberformat@npm:8.3.5"
+"@formatjs/intl-numberformat@npm:8.4.1":
+  version: 8.4.1
+  resolution: "@formatjs/intl-numberformat@npm:8.4.1"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/intl-localematcher": 0.2.32
     tslib: ^2.4.0
-  checksum: 6eb305b20ae5a639e5e721ed425387bfd58b427e17ba9c15e23e56e45e65fa4c6065f5237577c3b763c000aad2f6d3f1140fd89ab89ce21ac0fc25f84e68032e
+  checksum: ed7ebd448586121d31b2a8e31d815f8461be169cd2639ead358f71353e596f68b9b9181142e1aa4d5977ac51c96f8c6015a78c229d9ceda270a794e241dfefb5
   languageName: node
   linkType: hard
 
-"@formatjs/intl-pluralrules@npm:5.1.10":
-  version: 5.1.10
-  resolution: "@formatjs/intl-pluralrules@npm:5.1.10"
+"@formatjs/intl-pluralrules@npm:5.2.1":
+  version: 5.2.1
+  resolution: "@formatjs/intl-pluralrules@npm:5.2.1"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/intl-localematcher": 0.2.32
     tslib: ^2.4.0
-  checksum: c93e6ac888d20421bbdc203e0258fddfd91bd47933dacc3bb1b9329096a0b8cc8dc030a951665449a5feeb51a0cc439b7bacd75cd2f2b990dff5020905251db5
+  checksum: 22ee7c48539b047e817c5bb0116a4ac46cd571b22df3e841eeaa0d7c6dc59f95f8e96c325875c50a0fdb6e7aae8c1befe6c79b71f436685853821eb9785a6cbd
   languageName: node
   linkType: hard
 
-"@formatjs/intl-relativetimeformat@npm:11.1.10":
-  version: 11.1.10
-  resolution: "@formatjs/intl-relativetimeformat@npm:11.1.10"
+"@formatjs/intl-relativetimeformat@npm:11.2.1":
+  version: 11.2.1
+  resolution: "@formatjs/intl-relativetimeformat@npm:11.2.1"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/intl-localematcher": 0.2.32
     tslib: ^2.4.0
-  checksum: e0a2994a35cdce02272bf4eff0806e940ee9f63cbe6988b83da9a8aea06365ac4ac037c39f700d4b84a29af13452503642b042f7d32ec7fdd823f76de00ad919
+  checksum: d2d20fbfcae541d9de098821491d2f53e53160cd3e06c8003d84167e0fbb0b85dcf2a82bfc3c70304f4966782cbb435ee46e5e815acfcca91c5974d312a12987
   languageName: node
   linkType: hard
 
@@ -1875,24 +1864,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.1.0":
-  version: 0.1.1
-  resolution: "@jridgewell/gen-mapping@npm:0.1.1"
-  dependencies:
-    "@jridgewell/set-array": ^1.0.0
-    "@jridgewell/sourcemap-codec": ^1.4.10
-  checksum: 3bcc21fe786de6ffbf35c399a174faab05eb23ce6a03e8769569de28abbf4facc2db36a9ddb0150545ae23a8d35a7cf7237b2aa9e9356a7c626fb4698287d5cc
-  languageName: node
-  linkType: hard
-
 "@jridgewell/gen-mapping@npm:^0.3.0, @jridgewell/gen-mapping@npm:^0.3.2":
-  version: 0.3.2
-  resolution: "@jridgewell/gen-mapping@npm:0.3.2"
+  version: 0.3.3
+  resolution: "@jridgewell/gen-mapping@npm:0.3.3"
   dependencies:
     "@jridgewell/set-array": ^1.0.1
     "@jridgewell/sourcemap-codec": ^1.4.10
     "@jridgewell/trace-mapping": ^0.3.9
-  checksum: 1832707a1c476afebe4d0fbbd4b9434fdb51a4c3e009ab1e9938648e21b7a97049fa6009393bdf05cab7504108413441df26d8a3c12193996e65493a4efb6882
+  checksum: 4a74944bd31f22354fc01c3da32e83c19e519e3bbadafa114f6da4522ea77dd0c2842607e923a591d60a76699d819a2fbb6f3552e277efdb9b58b081390b60ab
   languageName: node
   linkType: hard
 
@@ -1903,7 +1882,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/set-array@npm:^1.0.0, @jridgewell/set-array@npm:^1.0.1":
+"@jridgewell/set-array@npm:^1.0.1":
   version: 1.1.2
   resolution: "@jridgewell/set-array@npm:1.1.2"
   checksum: 69a84d5980385f396ff60a175f7177af0b8da4ddb81824cb7016a9ef914eee9806c72b6b65942003c63f7983d4f39a5c6c27185bbca88eb4690b62075602e28e
@@ -1911,29 +1890,36 @@ __metadata:
   linkType: hard
 
 "@jridgewell/source-map@npm:^0.3.2":
-  version: 0.3.2
-  resolution: "@jridgewell/source-map@npm:0.3.2"
+  version: 0.3.3
+  resolution: "@jridgewell/source-map@npm:0.3.3"
   dependencies:
     "@jridgewell/gen-mapping": ^0.3.0
     "@jridgewell/trace-mapping": ^0.3.9
-  checksum: 1b83f0eb944e77b70559a394d5d3b3f98a81fcc186946aceb3ef42d036762b52ef71493c6c0a3b7c1d2f08785f53ba2df1277fe629a06e6109588ff4cdcf7482
+  checksum: ae1302146339667da5cd6541260ecbef46ae06819a60f88da8f58b3e64682f787c09359933d050dea5d2173ea7fa40f40dd4d4e7a8d325c5892cccd99aaf8959
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13":
+"@jridgewell/sourcemap-codec@npm:1.4.14":
   version: 1.4.14
   resolution: "@jridgewell/sourcemap-codec@npm:1.4.14"
   checksum: 61100637b6d173d3ba786a5dff019e1a74b1f394f323c1fee337ff390239f053b87266c7a948777f4b1ee68c01a8ad0ab61e5ff4abb5a012a0b091bec391ab97
   languageName: node
   linkType: hard
 
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13":
+  version: 1.4.15
+  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
+  checksum: b881c7e503db3fc7f3c1f35a1dd2655a188cc51a3612d76efc8a6eb74728bef5606e6758ee77423e564092b4a518aba569bbb21c9bac5ab7a35b0c6ae7e344c8
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.17
-  resolution: "@jridgewell/trace-mapping@npm:0.3.17"
+  version: 0.3.18
+  resolution: "@jridgewell/trace-mapping@npm:0.3.18"
   dependencies:
     "@jridgewell/resolve-uri": 3.1.0
     "@jridgewell/sourcemap-codec": 1.4.14
-  checksum: 9d703b859cff5cd83b7308fd457a431387db5db96bd781a63bf48e183418dd9d3d44e76b9e4ae13237f6abeeb25d739ec9215c1d5bfdd08f66f750a50074a339
+  checksum: 0572669f855260808c16fe8f78f5f1b4356463b11d3f2c7c0b5580c8ba1cbf4ae53efe9f627595830856e57dbac2325ac17eb0c3dd0ec42102e6f227cc289c02
   languageName: node
   linkType: hard
 
@@ -3224,10 +3210,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@octokit/openapi-types@npm:^16.0.0":
-  version: 16.0.0
-  resolution: "@octokit/openapi-types@npm:16.0.0"
-  checksum: 844f30a545da380d63c712e0eb733366bc567d1aab34529c79fdfbec3d73810e81d83f06fdab13058a5cbc7dae786db1a9b90b5b61b1e606854ee45d5ec5f194
+"@octokit/openapi-types@npm:^16.1.0":
+  version: 16.1.0
+  resolution: "@octokit/openapi-types@npm:16.1.0"
+  checksum: 071458deee4fbd357a664ead9f1bf9a44cfc5c4fb0ef92e63fdbce2777c81d45a1d00d929093e5524c0aaa69d26d88cf412f5972ce3a61e1296b86808a188797
   languageName: node
   linkType: hard
 
@@ -3313,11 +3299,11 @@ __metadata:
   linkType: hard
 
 "@octokit/types@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@octokit/types@npm:9.0.0"
+  version: 9.1.0
+  resolution: "@octokit/types@npm:9.1.0"
   dependencies:
-    "@octokit/openapi-types": ^16.0.0
-  checksum: 5c7f5cca8f00f7c4daa0d00f4fe991c1598ec47cd6ced50b1c5fbe9721bb9dee0adc2acdee265a3a715bb984e53ef3dc7f1cfb7326f712c6d809d59fc5c6648d
+    "@octokit/openapi-types": ^16.1.0
+  checksum: 6d9de8efb5a1ec8d5da9076407ddaaeabdcac5d21f0a5c7c43c0485515321187b520235e4d90e322b37c6c32167a419e33a44015347a65c2ef9f8d739525f417
   languageName: node
   linkType: hard
 
@@ -3343,6 +3329,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 6ad6a00fc4f2f2cfc6bff76fb1d88b8ee20bc0601e18ebb01b6d4be583733a860239a521a7fbca73b612e66705078809483549d2b18f370eb346c5155c8e4a0f
+  languageName: node
+  linkType: hard
+
 "@polymer/app-layout@npm:3.1.0":
   version: 3.1.0
   resolution: "@polymer/app-layout@npm:3.1.0"
@@ -3765,9 +3758,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/plugin-commonjs@npm:24.0.1":
-  version: 24.0.1
-  resolution: "@rollup/plugin-commonjs@npm:24.0.1"
+"@rollup/plugin-commonjs@npm:24.1.0":
+  version: 24.1.0
+  resolution: "@rollup/plugin-commonjs@npm:24.1.0"
   dependencies:
     "@rollup/pluginutils": ^5.0.1
     commondir: ^1.0.1
@@ -3780,7 +3773,7 @@ __metadata:
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: ff5b09f5c350640fe6836fcc97bf5c5612bf78b26eaaad01bf1aee955f0b136135d1a8950a02f680779aec1f16f2c6b6cf89d6080e84ed09be62737abb6b3a5f
+  checksum: 42faafc9bc8e04d75c86bb50d693ebb9c5eee19bf9ab3c09780b872547d12ff5ea85cfec7da75f5176d0aa4b5233101f667f44b85b331450a7bb14c95180852e
   languageName: node
   linkType: hard
 
@@ -4015,12 +4008,12 @@ __metadata:
   linkType: hard
 
 "@types/chrome@npm:*":
-  version: 0.0.224
-  resolution: "@types/chrome@npm:0.0.224"
+  version: 0.0.233
+  resolution: "@types/chrome@npm:0.0.233"
   dependencies:
     "@types/filesystem": "*"
     "@types/har-format": "*"
-  checksum: 2dd2291a81a351d3639bb241647f89ece6d27d13206db73e8eac813bd7bfc7e101deaf16c34203f7db32554412f8a776da5b8bfdf8857619d96b0cc68effc196
+  checksum: c4eede5c0f27ccda12a0c22588027a19e0e2f18931f8df7bb62928ec1de586bb0f42d660cc5217bd3a587dc5eb2dfa8d83c92bb646b3e3104d6fbc086d1cb9b4
   languageName: node
   linkType: hard
 
@@ -4096,12 +4089,12 @@ __metadata:
   linkType: hard
 
 "@types/eslint@npm:*":
-  version: 8.21.3
-  resolution: "@types/eslint@npm:8.21.3"
+  version: 8.37.0
+  resolution: "@types/eslint@npm:8.37.0"
   dependencies:
     "@types/estree": "*"
     "@types/json-schema": "*"
-  checksum: 80e0b5ca9ffb77bff19d01df08b93a99a6b44cad4c40e6450733ead6f1bc44b5514e7d28c3b0ad6304aeb01d690ee7ca89250729a9373551b7e587c6dbb41d7f
+  checksum: 06d3b3fba12004294591b5c7a52e3cec439472195da54e096076b1f2ddfbb8a445973b9681046dd530a6ac31eca502f635abc1e3ce37d03513089358e6f822ee
   languageName: node
   linkType: hard
 
@@ -4115,9 +4108,9 @@ __metadata:
   linkType: hard
 
 "@types/estree@npm:*, @types/estree@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@types/estree@npm:1.0.0"
-  checksum: 910d97fb7092c6738d30a7430ae4786a38542023c6302b95d46f49420b797f21619cdde11fa92b338366268795884111c2eb10356e4bd2c8ad5b92941e9e6443
+  version: 1.0.1
+  resolution: "@types/estree@npm:1.0.1"
+  checksum: e9aa175eacb797216fafce4d41e8202c7a75555bc55232dee0f9903d7171f8f19f0ae7d5191bb1a88cb90e65468be508c0df850a9fb81b4433b293a5a749899d
   languageName: node
   linkType: hard
 
@@ -4273,8 +4266,8 @@ __metadata:
   linkType: hard
 
 "@types/koa@npm:*, @types/koa@npm:^2.11.6":
-  version: 2.13.5
-  resolution: "@types/koa@npm:2.13.5"
+  version: 2.13.6
+  resolution: "@types/koa@npm:2.13.6"
   dependencies:
     "@types/accepts": "*"
     "@types/content-disposition": "*"
@@ -4284,7 +4277,7 @@ __metadata:
     "@types/keygrip": "*"
     "@types/koa-compose": "*"
     "@types/node": "*"
-  checksum: e3b634d934b79ce8f394bf4130511596081f9c073dbfb4309aa32e4c421c47049a002b65111f8d9687eabec55d5a27b1b9ae0699afa83894cb7032c3536bfa17
+  checksum: a4061c2e29cd4ccb65a704fe3ef6868eac82558856c7c00a5bcc0f9fdf18c595e0156c52508eb8ba926a9108d9cf5c9a1a1b73cccf50e29b37ea1154323d0b26
   languageName: node
   linkType: hard
 
@@ -4316,9 +4309,9 @@ __metadata:
   linkType: hard
 
 "@types/lodash@npm:*":
-  version: 4.14.191
-  resolution: "@types/lodash@npm:4.14.191"
-  checksum: ba0d5434e10690869f32d5ea49095250157cae502f10d57de0a723fd72229ce6c6a4979576f0f13e0aa9fbe3ce2457bfb9fa7d4ec3d6daba56730a51906d1491
+  version: 4.14.194
+  resolution: "@types/lodash@npm:4.14.194"
+  checksum: 113f34831c461469d91feca2dde737f88487732898b4d25e9eb23b087bb193985f864d1e1e0f3b777edc5022e460443588b6000a3b2348c966f72d17eedc35ea
   languageName: node
   linkType: hard
 
@@ -4351,9 +4344,9 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*":
-  version: 18.15.5
-  resolution: "@types/node@npm:18.15.5"
-  checksum: 5fbf3453bd5ce1402bb2964e55d928fc8a8a7de5451b1b0fe66587fecb8a3eb86854ca9cefa5076a5971e2cff00e1773ceeb5d872a54f6c6ddfbbc1064b4e91a
+  version: 18.15.12
+  resolution: "@types/node@npm:18.15.12"
+  checksum: dff7596db8d0a18bcd8da542dc62ed4377cba39546ff53baaa06d106f1482bc3e4e5e03644f5d1e3cef0904ffbe8ebbc244b2b0851f8025ab2a3959ee0ace58f
   languageName: node
   linkType: hard
 
@@ -4540,14 +4533,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/eslint-plugin@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.57.1"
+"@typescript-eslint/eslint-plugin@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.59.0"
   dependencies:
     "@eslint-community/regexpp": ^4.4.0
-    "@typescript-eslint/scope-manager": 5.57.1
-    "@typescript-eslint/type-utils": 5.57.1
-    "@typescript-eslint/utils": 5.57.1
+    "@typescript-eslint/scope-manager": 5.59.0
+    "@typescript-eslint/type-utils": 5.59.0
+    "@typescript-eslint/utils": 5.59.0
     debug: ^4.3.4
     grapheme-splitter: ^1.0.4
     ignore: ^5.2.0
@@ -4560,43 +4553,43 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 3ea842ef9615e298e28c6687c4dc285577ea0995944410553b3ca514ce9d437534b6e89114e9398c1a370324afe7a4a251c8c49540bb3bf13dcadde9ada3ecc2
+  checksum: 3b2582fe7baa9bf7733be79c6e35a390806f91c8d5ba5b604f71cb3635fb36abc975b926195c3ef5c6a4018bb94f66e009d727e3af2ce8b92c96aa3ee9ed194a
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/parser@npm:5.57.1"
+"@typescript-eslint/parser@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/parser@npm:5.59.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.57.1
-    "@typescript-eslint/types": 5.57.1
-    "@typescript-eslint/typescript-estree": 5.57.1
+    "@typescript-eslint/scope-manager": 5.59.0
+    "@typescript-eslint/types": 5.59.0
+    "@typescript-eslint/typescript-estree": 5.59.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: db61a12a67bc45d814297e7f089768c0849f18162b330279aa15121223ec3b18d80df4c327f4ca0a40a7bddb9150ba1a9379fce00bc0e4a10cc189d04e36f0e3
+  checksum: 1a442d6b776fc1dca4fe104bac77eae0a59b807ba11cef00dec8f5dbbc0fb4e5fc10519eac03dd94d52e4dd6d814800d0e5c0a3bd43eefce80d829c65ba47ad0
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/scope-manager@npm:5.57.1"
+"@typescript-eslint/scope-manager@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.59.0"
   dependencies:
-    "@typescript-eslint/types": 5.57.1
-    "@typescript-eslint/visitor-keys": 5.57.1
-  checksum: 4f03d54372f0591fbc5f6e0267a6f1b73e3012e8a319c1893829e0b8e71f882e17a696995dc8b11e700162daf74444fd2d8f55dba314e1a95221a9d3eabcfb2b
+    "@typescript-eslint/types": 5.59.0
+    "@typescript-eslint/visitor-keys": 5.59.0
+  checksum: dd89cd34291f7674edcbe9628748faa61dbf7199f9776586167e81fd91b93ba3a7f0ddd493c559c0dbb805b58629858fae648d56550e8ac5330b2ed1802b0178
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/type-utils@npm:5.57.1"
+"@typescript-eslint/type-utils@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/type-utils@npm:5.59.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.57.1
-    "@typescript-eslint/utils": 5.57.1
+    "@typescript-eslint/typescript-estree": 5.59.0
+    "@typescript-eslint/utils": 5.59.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -4604,23 +4597,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 06fab95315fc1ffdaaa011e6ec1ae538826ef3d9b422e2c926dbe9b83e55d9e8bdaa07c43317a4c0a59b40a24c5c48a7c8284e6a18780475a65894b1b949fc23
+  checksum: 811981ea117808315fe37ce8489ae6e20979f588cf0fdef2bd969d58c505ececff0bccf7957f3b178933028433ce28764ebc9fea32a35a4c2da81b5b1e98b454
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/types@npm:5.57.1"
-  checksum: 21789eb697904bbb44a18df961d5918e7c5bd90c79df3a8b8b835da81d0c0f42c7eeb2d05f77cafe49a7367ae7f549a0c8281656ea44b6dc56ae1bf19a3a1eae
+"@typescript-eslint/types@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/types@npm:5.59.0"
+  checksum: 5dc608a867b07b4262a236a264a65e894f841388b3aba461c4c1a30d76a2c3aed0c6a1e3d1ea2f64cce55e783091bafb826bf01a0ef83258820af63da860addf
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/typescript-estree@npm:5.57.1"
+"@typescript-eslint/typescript-estree@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.59.0"
   dependencies:
-    "@typescript-eslint/types": 5.57.1
-    "@typescript-eslint/visitor-keys": 5.57.1
+    "@typescript-eslint/types": 5.59.0
+    "@typescript-eslint/visitor-keys": 5.59.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -4629,142 +4622,142 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: bf96520f6de562838a40c3f009fc61fbee5369621071cd0d1dba4470b2b2f746cf79afe4ffa3fbccb8913295a2fbb3d89681d5178529e8da4987c46ed4e5cbed
+  checksum: d80f2766e2830dc830b9f4f1b9e744e1e7a285ebe72babdf0970f75bfe26cb832c6623bb836a53c48f1e707069d1e407ac1ea095bd583807007f713ba6e2e0e1
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/utils@npm:5.57.1"
+"@typescript-eslint/utils@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/utils@npm:5.59.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.57.1
-    "@typescript-eslint/types": 5.57.1
-    "@typescript-eslint/typescript-estree": 5.57.1
+    "@typescript-eslint/scope-manager": 5.59.0
+    "@typescript-eslint/types": 5.59.0
+    "@typescript-eslint/typescript-estree": 5.59.0
     eslint-scope: ^5.1.1
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 12e55144c8087f4e8f0f22e5693f3901b81bb7899dec42c7bfe540ac672a802028b688884bb43bd67bcf3cd3546a7205d207afcd948c731c19f551ea61267205
+  checksum: 228318df02f2381f859af184cafa5de4146a2e1518a5062444bf9bd7d468e058f9bd93a3e46cc4683d9bd02159648f416e5c7c539901ca16142456cae3c1af5f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.57.1":
-  version: 5.57.1
-  resolution: "@typescript-eslint/visitor-keys@npm:5.57.1"
+"@typescript-eslint/visitor-keys@npm:5.59.0":
+  version: 5.59.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.59.0"
   dependencies:
-    "@typescript-eslint/types": 5.57.1
+    "@typescript-eslint/types": 5.59.0
     eslint-visitor-keys: ^3.3.0
-  checksum: d187dfac044b7c0f24264a9ba5eebcf6651412d840b4aaba8eacabff7e771babcd67c738525b1f7c9eb8c94b7edfe7658f6de99f5fdc9745e409c538c1374674
+  checksum: e21656de02e221a27a5fe9f7fd34a1ca28530e47675134425f84fd0d1f276695fe39e35120837a491b02255d49aa2fd871e2c858ecccc66c687db972d057bd1c
   languageName: node
   linkType: hard
 
-"@vaadin/combo-box@npm:23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/combo-box@npm:23.3.10"
+"@vaadin/combo-box@npm:23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/combo-box@npm:23.3.11"
   dependencies:
     "@open-wc/dedupe-mixin": ^1.3.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/component-base": ~23.3.10
-    "@vaadin/field-base": ~23.3.10
-    "@vaadin/input-container": ~23.3.10
-    "@vaadin/item": ~23.3.10
-    "@vaadin/lit-renderer": ~23.3.10
-    "@vaadin/overlay": ~23.3.10
-    "@vaadin/vaadin-lumo-styles": ~23.3.10
-    "@vaadin/vaadin-material-styles": ~23.3.10
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
-  checksum: b39c69cd34f4f65c19ed6d7cd6401a83dde90cf3866f5c7550373cb3f243e07399a2bb94c807ec400a236b30812fb8572dcb2b68bef95b066d683e00208bf6d2
+    "@vaadin/component-base": ~23.3.11
+    "@vaadin/field-base": ~23.3.11
+    "@vaadin/input-container": ~23.3.11
+    "@vaadin/item": ~23.3.11
+    "@vaadin/lit-renderer": ~23.3.11
+    "@vaadin/overlay": ~23.3.11
+    "@vaadin/vaadin-lumo-styles": ~23.3.11
+    "@vaadin/vaadin-material-styles": ~23.3.11
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
+  checksum: b8015fd59b2f90f859e63b7190340c01d7cf8b8bd2f3516fde7ca9eeadc6742c467db5a2d5b52705c3d0177d8deee8ad994b8f8f8761be7390fa648c567a9fb5
   languageName: node
   linkType: hard
 
-"@vaadin/component-base@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/component-base@npm:23.3.10"
+"@vaadin/component-base@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/component-base@npm:23.3.11"
   dependencies:
     "@open-wc/dedupe-mixin": ^1.3.0
     "@polymer/polymer": ^3.0.0
     "@vaadin/vaadin-development-mode-detector": ^2.0.0
     "@vaadin/vaadin-usage-statistics": ^2.1.0
     lit: ^2.0.0
-  checksum: 53d04040429382d367ed37910a609cd5682edfac6a5b763835d5b48dba7009cb4564b82e758892579ff682d293127126a46c05d238a4a9ea0c9c75f5d4c1da4c
+  checksum: 80a73d31f9e802e0d55fd8832a1270b0dbc7b22bb0291386fcf9e45db6c5227cc8925079f3d87d11d3d78d786f5fadb41a117a2ca8630e987ee8c790ba5cfded
   languageName: node
   linkType: hard
 
-"@vaadin/field-base@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/field-base@npm:23.3.10"
+"@vaadin/field-base@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/field-base@npm:23.3.11"
   dependencies:
     "@open-wc/dedupe-mixin": ^1.3.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/component-base": ~23.3.10
+    "@vaadin/component-base": ~23.3.11
     lit: ^2.0.0
-  checksum: de536d25b00dfa195e5b8f364d82255ed67446b7d0826a4d0dbe37362824750a9e83221ce4e2698c034fbefec140317f753bbf82ba87a115ffb3ea4bfcb50791
+  checksum: f3c581b7c57121a269bd971a2eec17f61a01cdb7627d8133623957277b43a0c7af0dcd4cb71acea1b562f635b5c26b3c5fff1355d6a5c6b4f70fe998cd57863e
   languageName: node
   linkType: hard
 
-"@vaadin/icon@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/icon@npm:23.3.10"
+"@vaadin/icon@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/icon@npm:23.3.11"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/component-base": ~23.3.10
-    "@vaadin/vaadin-lumo-styles": ~23.3.10
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
+    "@vaadin/component-base": ~23.3.11
+    "@vaadin/vaadin-lumo-styles": ~23.3.11
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
     lit: ^2.0.0
-  checksum: b46efc6d0456fee28ab2d2407d64f820823fecc626fad63ff991dba570322ee7d563516615532bc12ad8b8d1c7f1ae8ade1c209e6a3f289184d66237bd29a186
+  checksum: c23f0408eb34354954f9086cc727fff4aa418babba99a55a8834aa87531cecd8c4511bec83068fbdb8aa74d5a5082ad10822ebe563ffbfeee2f66ffa06eff388
   languageName: node
   linkType: hard
 
-"@vaadin/input-container@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/input-container@npm:23.3.10"
+"@vaadin/input-container@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/input-container@npm:23.3.11"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/component-base": ~23.3.10
-    "@vaadin/vaadin-lumo-styles": ~23.3.10
-    "@vaadin/vaadin-material-styles": ~23.3.10
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
-  checksum: 813f91d251417ee1937a137ac99a151f4536cb3166bae520128a7b08f7a2acc1fc1c5fa1e511f6c94c2e915aaec788f178a4be79ac6850c89160ea57b90bcf34
+    "@vaadin/component-base": ~23.3.11
+    "@vaadin/vaadin-lumo-styles": ~23.3.11
+    "@vaadin/vaadin-material-styles": ~23.3.11
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
+  checksum: 58bd50e351450b01721a1802b6bc80da5166d00abecb80827a59d0b574b0c4f071daf9c18746d742be5a106c9d54726fcc2259ff2c563161f92ecb5192e2d993
   languageName: node
   linkType: hard
 
-"@vaadin/item@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/item@npm:23.3.10"
+"@vaadin/item@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/item@npm:23.3.11"
   dependencies:
     "@open-wc/dedupe-mixin": ^1.3.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/component-base": ~23.3.10
-    "@vaadin/vaadin-lumo-styles": ~23.3.10
-    "@vaadin/vaadin-material-styles": ~23.3.10
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
-  checksum: f4bdcac2e14b0678c35f4046a052abac24bddbb89cb2da27a61cc4d38a63d97330c6dd03ac2ad07d7f3cb8174ee21e73121b69fc685d07d48ef0953f8720544b
+    "@vaadin/component-base": ~23.3.11
+    "@vaadin/vaadin-lumo-styles": ~23.3.11
+    "@vaadin/vaadin-material-styles": ~23.3.11
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
+  checksum: 205807a74313b3d3ccadf22e7f0933f601f9d83d80612addbf750dcf0573c172b9bd98672c4ce75902decf343a40288e590d09170891282b6e48a3ca5dbaee39
   languageName: node
   linkType: hard
 
-"@vaadin/lit-renderer@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/lit-renderer@npm:23.3.10"
+"@vaadin/lit-renderer@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/lit-renderer@npm:23.3.11"
   dependencies:
     lit: ^2.0.0
-  checksum: 294a917f2f8178f2b0b4c21a751e5196634cce5d26a9b5de6d189a44d15cbb115507bd94c1db2f251a68231025c7a08d30a69cfe5337634b96be5233f377afae
+  checksum: 2ae43ad2db7e54e5e2e91eb4d46c3ae217971bb72fa0c84781e9b9b84e03f1e846bdf4ce0b16a16322ddc245141e0e814c81b747b389279e44997e79c18612f7
   languageName: node
   linkType: hard
 
-"@vaadin/overlay@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/overlay@npm:23.3.10"
+"@vaadin/overlay@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/overlay@npm:23.3.11"
   dependencies:
     "@open-wc/dedupe-mixin": ^1.3.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/component-base": ~23.3.10
-    "@vaadin/vaadin-lumo-styles": ~23.3.10
-    "@vaadin/vaadin-material-styles": ~23.3.10
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
-  checksum: f7179828d5b32248891687729d7af5010d3746b39b2c5e86f2b37a0cbae061c7207f954889912fe187fee996d7b6f358180280f1f0d52230aa2324055ea0ccc6
+    "@vaadin/component-base": ~23.3.11
+    "@vaadin/vaadin-lumo-styles": ~23.3.11
+    "@vaadin/vaadin-material-styles": ~23.3.11
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
+  checksum: e5cee05f580d9e6e3f4bb2826abff49bc76215a013ce6ee2dae197e3aa8449a5fb2266909231cdb48d6f86f1b38731263237396dd623cef4a7610ca2535faec9
   languageName: node
   linkType: hard
 
@@ -4775,36 +4768,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-lumo-styles@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/vaadin-lumo-styles@npm:23.3.10"
+"@vaadin/vaadin-lumo-styles@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/vaadin-lumo-styles@npm:23.3.11"
   dependencies:
     "@polymer/iron-icon": ^3.0.0
     "@polymer/iron-iconset-svg": ^3.0.0
     "@polymer/polymer": ^3.0.0
-    "@vaadin/icon": ~23.3.10
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
-  checksum: f18d437a5571784575a8443e275d157b380d0caa2c14c26fa4b251198bb0d24af4b90250763482f7ca12f55964f053587cafb1d48ab6ca0a5fb58ac266650216
+    "@vaadin/icon": ~23.3.11
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
+  checksum: 63219d280f8fd264b4ca5237e4f8d47600d0a224823f4fc108d824e509f72c0ec9e47301cfb4a7e59e842228d893615a43884449a7be092fcf381305843ae962
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-material-styles@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/vaadin-material-styles@npm:23.3.10"
+"@vaadin/vaadin-material-styles@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/vaadin-material-styles@npm:23.3.11"
   dependencies:
     "@polymer/polymer": ^3.0.0
-    "@vaadin/vaadin-themable-mixin": ~23.3.10
-  checksum: 311b0eeae338a08437799d71b85892a59d3a520729beb125bbfc88fc8d4d0021eb5a279fd36597a0477dda2522db7a3e3338be9057df44c69e31fcb5188e60c4
+    "@vaadin/vaadin-themable-mixin": ~23.3.11
+  checksum: 5e64507ac1f65f92cd76ef4530064fd0f4d794cfac806121f554ecc7d3b4bc48d65c8190a6b012541d1972f47e86072a0de87eac58160c0315b26858331bb616
   languageName: node
   linkType: hard
 
-"@vaadin/vaadin-themable-mixin@npm:23.3.10, @vaadin/vaadin-themable-mixin@npm:~23.3.10":
-  version: 23.3.10
-  resolution: "@vaadin/vaadin-themable-mixin@npm:23.3.10"
+"@vaadin/vaadin-themable-mixin@npm:23.3.11, @vaadin/vaadin-themable-mixin@npm:~23.3.11":
+  version: 23.3.11
+  resolution: "@vaadin/vaadin-themable-mixin@npm:23.3.11"
   dependencies:
     "@open-wc/dedupe-mixin": ^1.3.0
     lit: ^2.0.0
-  checksum: db9d15b966a5829c2fc3baa6bffc8caf2286e3bbed9eca9688a706ae348b5d53b3b98bf79288492f8c1cab359be43ba5232edc57e218de959c4e5d8847ae31ae
+  checksum: e4b874a9afd90f570ac6691b9acc917bff54afeb466cc3ca19847826a93e812946b4f4f3f1292c8493fcb4c3e937fc31e666cc318d71e4a825d598aef8a9873c
   languageName: node
   linkType: hard
 
@@ -4981,11 +4974,11 @@ __metadata:
   linkType: hard
 
 "@web/dev-server-hmr@npm:^0.1.11":
-  version: 0.1.11
-  resolution: "@web/dev-server-hmr@npm:0.1.11"
+  version: 0.1.12
+  resolution: "@web/dev-server-hmr@npm:0.1.12"
   dependencies:
-    "@web/dev-server-core": ^0.4.0
-  checksum: a0c156c7c46f3463607a7ed87a6d149d372a2b1abd8ef2ce5a4d7ce3d7b0cd7e1375d93e28e87735e25617c322dd5c3d74c354a971712eb001e69adc6406698b
+    "@web/dev-server-core": ^0.4.1
+  checksum: 67255fd4a7ee4d44f6feeeb798e67c4dbb9d2e351ef404a33424fcfce7d28bea2ed165d9ff28506b44a4ac2e6ca2e3bb812c70954d04fbfdb08b8df4d47efefa
   languageName: node
   linkType: hard
 
@@ -5197,9 +5190,9 @@ __metadata:
   linkType: hard
 
 "@webcomponents/shadycss@npm:^1.9.1":
-  version: 1.11.1
-  resolution: "@webcomponents/shadycss@npm:1.11.1"
-  checksum: e57b186190e5c4f871adef7dfd31110efca9e04cde686fd0f7651868a9420da7ec418bf060fa5aa664964b149cd69cccf2c2367cb5d06d1656eda0022834c155
+  version: 1.11.2
+  resolution: "@webcomponents/shadycss@npm:1.11.2"
+  checksum: 8349d837a7d7520b3c9fa42fc00401c0dae9c9e5dff12489fc284d773b8fad32283ea123a3073b937ef5992082ec31e84cf45f9bf0cb28dfd010a0c945bf2a94
   languageName: node
   linkType: hard
 
@@ -5364,7 +5357,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-keywords@npm:^5.0.0":
+"ajv-keywords@npm:^5.1.0":
   version: 5.1.0
   resolution: "ajv-keywords@npm:5.1.0"
   dependencies:
@@ -5387,7 +5380,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.6.0, ajv@npm:^8.8.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.6.0, ajv@npm:^8.9.0":
   version: 8.12.0
   resolution: "ajv@npm:8.12.0"
   dependencies:
@@ -5907,9 +5900,9 @@ __metadata:
   linkType: hard
 
 "axe-core@npm:^4.3.3":
-  version: 4.6.3
-  resolution: "axe-core@npm:4.6.3"
-  checksum: d0c46be92b9707c48b88a53cd5f471b155a2bfc8bf6beffb514ecd14e30b4863e340b5fc4f496d82a3c562048088c1f3ff5b93b9b3b026cb9c3bfacfd535da10
+  version: 4.7.0
+  resolution: "axe-core@npm:4.7.0"
+  checksum: f086bcab42be1761ba2b0b127dec350087f4c3a853bba8dd58f69d898cefaac31a1561da23146f6f3c07954c76171d1f2ce460e555e052d2b02cd79af628fa4a
   languageName: node
   linkType: hard
 
@@ -6361,9 +6354,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001449":
-  version: 1.0.30001469
-  resolution: "caniuse-lite@npm:1.0.30001469"
-  checksum: 8e496509d7e9ff189c72205675b5db0c5f1b6a09917027441e835efae0848a468a8c4e7d2b409ffc202438fcd23ae53e017f976a03c22c04d12d3c0e1e33e5de
+  version: 1.0.30001480
+  resolution: "caniuse-lite@npm:1.0.30001480"
+  checksum: c0b40f02f45ee99c73f732a3118028b2ab1544962d473d84f2afcb898a5e3099bd4c45f316ebc466fb1dbda904e86b72695578ca531a0bfa9d6337e7aad1ee2a
   languageName: node
   linkType: hard
 
@@ -6501,15 +6494,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clean-css@npm:5.2.0":
-  version: 5.2.0
-  resolution: "clean-css@npm:5.2.0"
-  dependencies:
-    source-map: ~0.6.0
-  checksum: ccb63b244b200abf53a005429b50132845a49b994fb6a2889a7eb775d53fbde7cb0d0b13655e435b0c3a6788d5d0fbcd2f56ccf32da852ef21ae933198dcad24
-  languageName: node
-  linkType: hard
-
 "clean-css@npm:^4.2.1, clean-css@npm:^4.2.3":
   version: 4.2.4
   resolution: "clean-css@npm:4.2.4"
@@ -6519,6 +6503,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clean-css@npm:~5.3.2":
+  version: 5.3.2
+  resolution: "clean-css@npm:5.3.2"
+  dependencies:
+    source-map: ~0.6.0
+  checksum: 8787b281acc9878f309b5f835d410085deedfd4e126472666773040a6a8a72f472a1d24185947d23b87b1c419bf2c5ed429395d5c5ff8279c98b05d8011e9758
+  languageName: node
+  linkType: hard
+
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -6586,7 +6579,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cliui@npm:^7.0.2":
+"cliui@npm:^7.0.2, cliui@npm:^7.0.4":
   version: 7.0.4
   resolution: "cliui@npm:7.0.4"
   dependencies:
@@ -6735,9 +6728,9 @@ __metadata:
   linkType: hard
 
 "colorette@npm:^2.0.10, colorette@npm:^2.0.14, colorette@npm:^2.0.19":
-  version: 2.0.19
-  resolution: "colorette@npm:2.0.19"
-  checksum: 888cf5493f781e5fcf54ce4d49e9d7d698f96ea2b2ef67906834bb319a392c667f9ec69f4a10e268d2946d13a9503d2d19b3abaaaf174e3451bfe91fb9d82427
+  version: 2.0.20
+  resolution: "colorette@npm:2.0.20"
+  checksum: 0c016fea2b91b733eb9f4bcdb580018f52c0bc0979443dad930e5037a968237ac53d9beb98e218d2e9235834f8eebce7f8e080422d6194e957454255bde71d3d
   languageName: node
   linkType: hard
 
@@ -6773,9 +6766,9 @@ __metadata:
   linkType: hard
 
 "commander@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "commander@npm:10.0.0"
-  checksum: 9f6495651f878213005ac744dd87a85fa3d9f2b8b90d1c19d0866d666bda7f735adfd7c2f10dfff345782e2f80ea258f98bb4efcef58e4e502f25f883940acfd
+  version: 10.0.1
+  resolution: "commander@npm:10.0.1"
+  checksum: 436901d64a818295803c1996cd856621a74f30b9f9e28a588e726b2b1670665bccd7c1a77007ebf328729f0139838a88a19265858a0fa7a8728c4656796db948
   languageName: node
   linkType: hard
 
@@ -6964,18 +6957,18 @@ __metadata:
   linkType: hard
 
 "core-js-compat@npm:^3.25.1":
-  version: 3.29.1
-  resolution: "core-js-compat@npm:3.29.1"
+  version: 3.30.1
+  resolution: "core-js-compat@npm:3.30.1"
   dependencies:
     browserslist: ^4.21.5
-  checksum: 7260f6bbaa98836cda09a3b61aa721149d3ae95040302fb3b27eb153ae9bbddc8dee5249e72004cdc9552532029de4d50a5b2b066c37414421d2929d6091b18f
+  checksum: e450a9771fc927ce982333929e1c4b32f180f641e4cfff9de6ed44b5930de19be7707cf74f45d1746ca69b8e8ac0698a555cb7244fbfbed6c38ca93844207bf7
   languageName: node
   linkType: hard
 
-"core-js@npm:3.30.0":
-  version: 3.30.0
-  resolution: "core-js@npm:3.30.0"
-  checksum: 276d4444a1261739ea4c350ef3f6aeab4c7ae7f36ac197f02d197a4566b42867c3a9b12c2fcda8a736aeca888d2c4131c8cb58ad17ed02294a10c9c97606df71
+"core-js@npm:3.30.1":
+  version: 3.30.1
+  resolution: "core-js@npm:3.30.1"
+  checksum: 6d4a00b488694d4c715c424e15dfef31433ac7aa395c39c518a0cfacec918ada1c716fed74682033197e0164e23bbf38bfd598ee9a239c4aaa590ab1ba862ac8
   languageName: node
   linkType: hard
 
@@ -7000,7 +6993,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
   version: 7.0.3
   resolution: "cross-spawn@npm:7.0.3"
   dependencies:
@@ -7026,9 +7019,9 @@ __metadata:
   linkType: hard
 
 "csstype@npm:^3.1.0":
-  version: 3.1.1
-  resolution: "csstype@npm:3.1.1"
-  checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d
+  version: 3.1.2
+  resolution: "csstype@npm:3.1.2"
+  checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5
   languageName: node
   linkType: hard
 
@@ -7226,7 +7219,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4":
+"define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0":
   version: 1.2.0
   resolution: "define-properties@npm:1.2.0"
   dependencies:
@@ -7355,9 +7348,9 @@ __metadata:
   linkType: hard
 
 "dijkstrajs@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "dijkstrajs@npm:1.0.2"
-  checksum: 8cd822441a26f190da24d69bfab7b433d080b09e069e41e046ac84e152f182a1ed9478d531b34126e000adaa7b73114a0f85fcac117a7d25b3edf302d57c0d09
+  version: 1.0.3
+  resolution: "dijkstrajs@npm:1.0.3"
+  checksum: 82ff2c6633f235dd5e6bed04ec62cdfb1f327b4d7534557bd52f18991313f864ee50654543072fff4384a92b643ada4d5452f006b7098dbdfad6c8744a8c9e08
   languageName: node
   linkType: hard
 
@@ -7378,11 +7371,11 @@ __metadata:
   linkType: hard
 
 "dns-packet@npm:^5.2.2":
-  version: 5.4.0
-  resolution: "dns-packet@npm:5.4.0"
+  version: 5.6.0
+  resolution: "dns-packet@npm:5.6.0"
   dependencies:
     "@leichtgewicht/ip-codec": ^2.0.1
-  checksum: a169963848e8539dfd8a19058562f9e1c15c0f82cbf76fa98942f11c46f3c74e7e7c82e3a8a5182d4c9e6ff19e21be738dbd098a876dde755d3aedd2cc730880
+  checksum: 1b643814e5947a87620f8a906287079347492282964ce1c236d52c414e3e3941126b96581376b180ba6e66899e70b86b587bc1aa23e3acd9957765be952d83fc
   languageName: node
   linkType: hard
 
@@ -7480,9 +7473,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.284":
-  version: 1.4.335
-  resolution: "electron-to-chromium@npm:1.4.335"
-  checksum: a3c9ee2412427ed0853f065f1dde64db1b567abf53d5e50e8cfba1544af4bda970f59a4f4df3dad81078c948b3277dffb42042e6a859288246d68b58db81a555
+  version: 1.4.368
+  resolution: "electron-to-chromium@npm:1.4.368"
+  checksum: b8ec4128a81c86c287cb2d677504c64d50f30c3c1d6dd9700a93797c6311f9f94b1c49a3e5112f5cfb3987a9bbade0133f9ec9898dae592db981059d5c2abdbb
   languageName: node
   linkType: hard
 
@@ -7551,19 +7544,19 @@ __metadata:
   linkType: hard
 
 "enhanced-resolve@npm:^5.9.3":
-  version: 5.12.0
-  resolution: "enhanced-resolve@npm:5.12.0"
+  version: 5.13.0
+  resolution: "enhanced-resolve@npm:5.13.0"
   dependencies:
     graceful-fs: ^4.2.4
     tapable: ^2.2.0
-  checksum: bf3f787facaf4ce3439bef59d148646344e372bef5557f0d37ea8aa02c51f50a925cd1f07b8d338f18992c29f544ec235a8c64bcdb56030196c48832a5494174
+  checksum: 76d6844c4393d76beed5b3ce6cf5a98dee3ad5c84a9887f49ccde1224e3b7af201dfbd5a57ebf2b49f623b74883df262d50ff480d3cc02fc2881fc58b84e1bbe
   languageName: node
   linkType: hard
 
 "entities@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "entities@npm:4.4.0"
-  checksum: 84d250329f4b56b40fa93ed067b194db21e8815e4eb9b59f43a086f0ecd342814f6bc483de8a77da5d64e0f626033192b1b4f1792232a7ea6b970ebe0f3187c2
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 853f8ebd5b425d350bffa97dd6958143179a5938352ccae092c62d1267c4e392a039be1bae7d51b6e4ffad25f51f9617531fedf5237f15df302ccfb452cbf2d7
   languageName: node
   linkType: hard
 
@@ -7666,9 +7659,9 @@ __metadata:
   linkType: hard
 
 "es-module-lexer@npm:^1.0.0":
-  version: 1.2.0
-  resolution: "es-module-lexer@npm:1.2.0"
-  checksum: a0b865641ae52093fa3dffc41f3c440ac97b9932156896daa7784e66f01bef40f15b5578540f91cb4a43c38adda4a8ab8afca395b3b25480007d741ff0642de3
+  version: 1.2.1
+  resolution: "es-module-lexer@npm:1.2.1"
+  checksum: c4145b853e1491eaa5d591e4580926d242978c38071ad3d09165c3b6d50314cc0ae3bf6e1dec81a9e53768b9299df2063d2e4a67d7742a5029ddeae6c4fc26f0
   languageName: node
   linkType: hard
 
@@ -7856,14 +7849,14 @@ __metadata:
   linkType: hard
 
 "eslint-module-utils@npm:^2.7.4":
-  version: 2.7.4
-  resolution: "eslint-module-utils@npm:2.7.4"
+  version: 2.8.0
+  resolution: "eslint-module-utils@npm:2.8.0"
   dependencies:
     debug: ^3.2.7
   peerDependenciesMeta:
     eslint:
       optional: true
-  checksum: 5da13645daff145a5c922896b258f8bba560722c3767254e458d894ff5fbb505d6dfd945bffa932a5b0ae06714da2379bd41011c4c20d2d59cc83e23895360f7
+  checksum: 74c6dfea7641ebcfe174be61168541a11a14aa8d72e515f5f09af55cd0d0862686104b0524aa4b8e0ce66418a44aa38a94d2588743db5fd07a6b49ffd16921d2
   languageName: node
   linkType: hard
 
@@ -7924,16 +7917,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-lit@npm:1.8.2, eslint-plugin-lit@npm:^1.6.0":
-  version: 1.8.2
-  resolution: "eslint-plugin-lit@npm:1.8.2"
+"eslint-plugin-lit@npm:1.8.3, eslint-plugin-lit@npm:^1.6.0":
+  version: 1.8.3
+  resolution: "eslint-plugin-lit@npm:1.8.3"
   dependencies:
     parse5: ^6.0.1
     parse5-htmlparser2-tree-adapter: ^6.0.1
     requireindex: ^1.2.0
   peerDependencies:
     eslint: ">= 5"
-  checksum: 30c4d60d26734e6974da3b6f4998f9c10a797f63ad123368bb9d1064efcb99ccd255ba9e4efec41f7029a0eaf8196445c3d8cf424cd4ef918faee2b388d474ae
+  checksum: 67f78b92b06224b3b83f2c914f508e94072aea106f3ea5aea42de55d3e83c73c91369b07f359a6ddeda5412c46f4f300c37d80715177cbb88834a5b497d262a0
   languageName: node
   linkType: hard
 
@@ -7989,12 +7982,12 @@ __metadata:
   linkType: hard
 
 "eslint-scope@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "eslint-scope@npm:7.1.1"
+  version: 7.2.0
+  resolution: "eslint-scope@npm:7.2.0"
   dependencies:
     esrecurse: ^4.3.0
     estraverse: ^5.2.0
-  checksum: 9f6e974ab2db641ca8ab13508c405b7b859e72afe9f254e8131ff154d2f40c99ad4545ce326fd9fde3212ff29707102562a4834f1c48617b35d98c71a97fbf3e
+  checksum: 64591a2d8b244ade9c690b59ef238a11d5c721a98bcee9e9f445454f442d03d3e04eda88e95a4daec558220a99fa384309d9faae3d459bd40e7a81b4063980ae
   languageName: node
   linkType: hard
 
@@ -8682,6 +8675,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"foreground-child@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "foreground-child@npm:3.1.1"
+  dependencies:
+    cross-spawn: ^7.0.0
+    signal-exit: ^4.0.1
+  checksum: 139d270bc82dc9e6f8bc045fe2aae4001dc2472157044fdfad376d0a3457f77857fa883c1c8b21b491c6caade9a926a4bed3d3d2e8d3c9202b151a4cbbd0bcd5
+  languageName: node
+  linkType: hard
+
 "forwarded@npm:0.2.0":
   version: 0.2.0
   resolution: "forwarded@npm:0.2.0"
@@ -8754,7 +8757,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-require@npm:^1.4.0":
+"fs-require@npm:^1.6.0":
   version: 1.6.0
   resolution: "fs-require@npm:1.6.0"
   checksum: 085145a3021e142ae8d591d955f7e1d9cab17191666294e0ad394df5cb9ee379817b89c50de63bd861138dcb6adec589289d347c23de9bfe1ac82aeba6b1a128
@@ -8827,7 +8830,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"functions-have-names@npm:^1.2.2":
+"functions-have-names@npm:^1.2.2, functions-have-names@npm:^1.2.3":
   version: 1.2.3
   resolution: "functions-have-names@npm:1.2.3"
   checksum: c3f1f5ba20f4e962efb71344ce0a40722163e85bee2101ce25f88214e78182d2d2476aa85ef37950c579eb6cf6ee811c17b3101bb84004bb75655f3e33f3fdb5
@@ -9012,6 +9015,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob@npm:10.2.1":
+  version: 10.2.1
+  resolution: "glob@npm:10.2.1"
+  dependencies:
+    foreground-child: ^3.1.0
+    fs.realpath: ^1.0.0
+    jackspeak: ^2.0.3
+    minimatch: ^9.0.0
+    minipass: ^5.0.0
+    path-scurry: ^1.7.0
+  bin:
+    glob: dist/cjs/src/bin.js
+  checksum: 760a624138e7bbc49179859ba314a8547b114de2324cf571d43dc4ce3379be297034099b36857f966ec5445b30cbd558d0be90c9992ef186671aca53b1bde7a0
+  languageName: node
+  linkType: hard
+
 "glob@npm:7.2.0":
   version: 7.2.0
   resolution: "glob@npm:7.2.0"
@@ -9026,18 +9045,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:9.3.4":
-  version: 9.3.4
-  resolution: "glob@npm:9.3.4"
-  dependencies:
-    fs.realpath: ^1.0.0
-    minimatch: ^8.0.2
-    minipass: ^4.2.4
-    path-scurry: ^1.6.1
-  checksum: bcf49eaf475dc4ce8d4e98f896408a9f6507a2cb7d24a207c012cb318b969e04a02bcde2ff2920eadd5055ccae444a007b769e418147a56268fab2cda8694cde
-  languageName: node
-  linkType: hard
-
 "glob@npm:^7.1.1, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
@@ -9139,15 +9146,15 @@ __metadata:
   linkType: hard
 
 "globby@npm:^13.1.2":
-  version: 13.1.3
-  resolution: "globby@npm:13.1.3"
+  version: 13.1.4
+  resolution: "globby@npm:13.1.4"
   dependencies:
     dir-glob: ^3.0.1
     fast-glob: ^3.2.11
     ignore: ^5.2.0
     merge2: ^1.4.1
     slash: ^4.0.0
-  checksum: 93f06e02002cdf368f7e3d55bd59e7b00784c7cc8fe92c7ee5082cc7171ff6109fda45e1c97a80bb48bc811dedaf7843c7c9186f5f84bde4883ab630e13c43df
+  checksum: e8bc13879972082d590cd1b0e27080d90d2e12fff7eeb2cee9329c29115ace14cc5b9f899e3d6beb136ba826307a727016658919a6f383e1511d698acee81741
   languageName: node
   linkType: hard
 
@@ -9160,10 +9167,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"google-timezones-json@npm:1.0.2":
-  version: 1.0.2
-  resolution: "google-timezones-json@npm:1.0.2"
-  checksum: 7abe3abce1ef6f54c2dda8b1ec742bc99f7e52b9871ce7391d092aa819de2946e3a39a18eb63a5263c96b853192afbea22da74b890c649debd46f0011d01ff4c
+"google-timezones-json@npm:1.1.0":
+  version: 1.1.0
+  resolution: "google-timezones-json@npm:1.1.0"
+  checksum: 4abbf1b50a9c199fec4dbf7113803dbcb7c87794a4e52189dc0187e4c8a26a7dffd133bc4e2674e1f30f357e5f2060153effe267a013613c362cc098176dc8a0
   languageName: node
   linkType: hard
 
@@ -9436,32 +9443,25 @@ __metadata:
   resolution: "home-assistant-frontend@workspace:."
   dependencies:
     "@babel/core": 7.21.4
-    "@babel/plugin-external-helpers": 7.18.6
-    "@babel/plugin-proposal-class-properties": 7.18.6
     "@babel/plugin-proposal-decorators": 7.21.0
-    "@babel/plugin-proposal-nullish-coalescing-operator": 7.18.6
-    "@babel/plugin-proposal-object-rest-spread": 7.20.7
-    "@babel/plugin-proposal-optional-chaining": 7.21.0
-    "@babel/plugin-syntax-dynamic-import": 7.8.3
-    "@babel/plugin-syntax-import-meta": 7.10.4
-    "@babel/plugin-syntax-top-level-await": 7.14.5
     "@babel/preset-env": 7.21.4
     "@babel/preset-typescript": 7.21.4
     "@braintree/sanitize-url": 6.0.2
-    "@codemirror/autocomplete": 6.4.2
-    "@codemirror/commands": 6.2.2
+    "@codemirror/autocomplete": 6.5.1
+    "@codemirror/commands": 6.2.3
     "@codemirror/language": 6.6.0
     "@codemirror/legacy-modes": 6.3.2
     "@codemirror/search": 6.3.0
     "@codemirror/state": 6.2.0
-    "@codemirror/view": 6.9.3
+    "@codemirror/view": 6.9.5
     "@egjs/hammerjs": 2.0.17
-    "@formatjs/intl-datetimeformat": 6.5.1
+    "@formatjs/intl-datetimeformat": 6.7.0
+    "@formatjs/intl-displaynames": 6.3.1
     "@formatjs/intl-getcanonicallocales": 2.1.0
-    "@formatjs/intl-locale": 3.1.1
-    "@formatjs/intl-numberformat": 8.3.5
-    "@formatjs/intl-pluralrules": 5.1.10
-    "@formatjs/intl-relativetimeformat": 11.1.10
+    "@formatjs/intl-locale": 3.2.1
+    "@formatjs/intl-numberformat": 8.4.1
+    "@formatjs/intl-pluralrules": 5.2.1
+    "@formatjs/intl-relativetimeformat": 11.2.1
     "@fullcalendar/core": 6.1.5
     "@fullcalendar/daygrid": 6.1.5
     "@fullcalendar/interaction": 6.1.5
@@ -9517,7 +9517,7 @@ __metadata:
     "@polymer/paper-toast": 3.0.1
     "@polymer/polymer": 3.5.1
     "@rollup/plugin-babel": 6.0.3
-    "@rollup/plugin-commonjs": 24.0.1
+    "@rollup/plugin-commonjs": 24.1.0
     "@rollup/plugin-json": 6.0.0
     "@rollup/plugin-node-resolve": 15.0.2
     "@rollup/plugin-replace": 5.0.2
@@ -9537,10 +9537,10 @@ __metadata:
     "@types/sortablejs": 1.15.1
     "@types/tar": 6.1.4
     "@types/webspeechapi": 0.0.29
-    "@typescript-eslint/eslint-plugin": 5.57.1
-    "@typescript-eslint/parser": 5.57.1
-    "@vaadin/combo-box": 23.3.10
-    "@vaadin/vaadin-themable-mixin": 23.3.10
+    "@typescript-eslint/eslint-plugin": 5.59.0
+    "@typescript-eslint/parser": 5.59.0
+    "@vaadin/combo-box": 23.3.11
+    "@vaadin/vaadin-themable-mixin": 23.3.11
     "@vibrant/color": 3.2.1-alpha.1
     "@vibrant/core": 3.2.1-alpha.1
     "@vibrant/quantizer-mmcq": 3.2.1-alpha.1
@@ -9555,7 +9555,7 @@ __metadata:
     chai: 4.3.7
     chart.js: 3.3.2
     comlink: 4.4.1
-    core-js: 3.30.0
+    core-js: 3.30.1
     cropperjs: 1.5.13
     date-fns: 2.29.3
     date-fns-tz: 2.0.0
@@ -9569,7 +9569,7 @@ __metadata:
     eslint-import-resolver-webpack: 0.13.2
     eslint-plugin-disable: 2.0.3
     eslint-plugin-import: 2.27.5
-    eslint-plugin-lit: 1.8.2
+    eslint-plugin-lit: 1.8.3
     eslint-plugin-lit-a11y: 2.4.1
     eslint-plugin-unused-imports: 2.0.0
     eslint-plugin-wc: 1.4.0
@@ -9577,8 +9577,8 @@ __metadata:
     fancy-log: 2.0.0
     fs-extra: 11.1.1
     fuse.js: 6.6.2
-    glob: 9.3.4
-    google-timezones-json: 1.0.2
+    glob: 10.2.1
+    google-timezones-json: 1.1.0
     gulp: 4.0.2
     gulp-flatmap: 1.0.2
     gulp-json-transform: 0.4.8
@@ -9587,11 +9587,11 @@ __metadata:
     gulp-zopfli-green: 6.0.1
     hls.js: 1.3.5
     home-assistant-js-websocket: 8.0.1
-    html-minifier-terser: 7.1.0
+    html-minifier-terser: 7.2.0
     husky: 8.0.3
     idb-keyval: 6.2.0
-    instant-mocha: 1.5.0
-    intl-messageformat: 10.3.3
+    instant-mocha: 1.5.1
+    intl-messageformat: 10.3.4
     js-yaml: 4.1.0
     jszip: 3.10.1
     leaflet: 1.9.3
@@ -9624,7 +9624,7 @@ __metadata:
     rollup-plugin-visualizer: 5.9.0
     rrule: 2.7.2
     serve-handler: 6.1.5
-    sinon: 15.0.3
+    sinon: 15.0.4
     sortablejs: 1.15.0
     source-map-url: 0.4.1
     superstruct: 1.0.3
@@ -9645,7 +9645,7 @@ __metadata:
     vue2-daterange-picker: 0.6.8
     webpack: =5.72.1
     webpack-cli: 5.0.1
-    webpack-dev-server: 4.13.2
+    webpack-dev-server: 4.13.3
     webpack-manifest-plugin: 5.0.0
     webpackbar: 5.0.2
     weekstart: 2.0.0
@@ -9702,20 +9702,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-minifier-terser@npm:7.1.0":
-  version: 7.1.0
-  resolution: "html-minifier-terser@npm:7.1.0"
+"html-minifier-terser@npm:7.2.0":
+  version: 7.2.0
+  resolution: "html-minifier-terser@npm:7.2.0"
   dependencies:
     camel-case: ^4.1.2
-    clean-css: 5.2.0
-    commander: ^9.4.1
+    clean-css: ~5.3.2
+    commander: ^10.0.0
     entities: ^4.4.0
     param-case: ^3.0.4
     relateurl: ^0.2.7
     terser: ^5.15.1
   bin:
     html-minifier-terser: cli.js
-  checksum: 351de28d85f142314a6a9b5222bdcaf068cef6bf2f521952ef55d99a6acdcecd0b4dbc42578da2d438d579c6e868b899ca19eac901ee6f9f0c69c223b5942099
+  checksum: 39feed354b5a8aafc8e910977d68cfd961d6db330a8e1a5b16a528c86b8ee7745d8945134822cf00acf7bf0d0135bf1abad650bf308bee4ea73adb003f5b8656
   languageName: node
   linkType: hard
 
@@ -10032,12 +10032,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"instant-mocha@npm:1.5.0":
-  version: 1.5.0
-  resolution: "instant-mocha@npm:1.5.0"
+"instant-mocha@npm:1.5.1":
+  version: 1.5.1
+  resolution: "instant-mocha@npm:1.5.1"
   dependencies:
-    fs-require: ^1.4.0
-    memfs: ^3.4.12
+    fs-require: ^1.6.0
+    memfs: ^3.5.0
     source-map-support: ^0.5.21
     yargs: ^16.2.0
   peerDependencies:
@@ -10045,7 +10045,7 @@ __metadata:
     webpack: 4 || 5
   bin:
     instant-mocha: dist/cli.js
-  checksum: 77741864a0b6602e7599dc93e3bd3dfc3451c58e84881c7163b8fc9494c095528ba3cc2c8b74be41e885a659711d81777ff7fd761523c34d4eabcd9fb555156d
+  checksum: c098a792ba3bddc1d421da7067c21818ccc64e45d98ccce735ab35c29132f01cf624a2106b1ecd5f1e5d9c9d9bbb8f947d92db8bcfa7ddae01425f7fd291ee6e
   languageName: node
   linkType: hard
 
@@ -10074,15 +10074,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"intl-messageformat@npm:10.3.3":
-  version: 10.3.3
-  resolution: "intl-messageformat@npm:10.3.3"
+"intl-messageformat@npm:10.3.4":
+  version: 10.3.4
+  resolution: "intl-messageformat@npm:10.3.4"
   dependencies:
     "@formatjs/ecma402-abstract": 1.14.3
     "@formatjs/fast-memoize": 2.0.1
-    "@formatjs/icu-messageformat-parser": 2.3.0
+    "@formatjs/icu-messageformat-parser": 2.3.1
     tslib: ^2.4.0
-  checksum: 05baee05d31b911dc4bb1774ddf0799dc136723203461f73fecb185e2e2d18b148311db7ef14294d664a6212311c5d9116c3e850cf609dd6348e347f3d07e660
+  checksum: 2b70bf8477fcd57152a77af81c25820f9c184cc5457dd9b9322fc22674ebbe03a0906e1b1cc816037086e501d697b4c060619f784b4f315c95ad671f2bcde967
   languageName: node
   linkType: hard
 
@@ -10237,12 +10237,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.11.0, is-core-module@npm:^2.7.0, is-core-module@npm:^2.9.0":
-  version: 2.11.0
-  resolution: "is-core-module@npm:2.11.0"
+"is-core-module@npm:^2.11.0, is-core-module@npm:^2.12.0, is-core-module@npm:^2.7.0":
+  version: 2.12.0
+  resolution: "is-core-module@npm:2.12.0"
   dependencies:
     has: ^1.0.3
-  checksum: f96fd490c6b48eb4f6d10ba815c6ef13f410b0ba6f7eb8577af51697de523e5f2cd9de1c441b51d27251bf0e4aebc936545e33a5d26d5d51f28d25698d4a8bab
+  checksum: f7f7eb2ab71fd769ee9fb2385c095d503aa4b5ce0028c04557de03f1e67a87c85e5bac1f215945fc3c955867a139a415a3ec4c4234a0bffdf715232660f440a6
   languageName: node
   linkType: hard
 
@@ -10744,6 +10744,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jackspeak@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "jackspeak@npm:2.0.3"
+  dependencies:
+    "@pkgjs/parseargs": ^0.11.0
+    cliui: ^7.0.4
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: f58c7e1a0a57d04c4280057d32edef00da4e1f1f1798b8fbe7eb8fd2c0f885449d8165dd495c9883742ab0f43347fb64fe692f4845d6d3daf0c352aefcdeea42
+  languageName: node
+  linkType: hard
+
 "jake@npm:^10.8.5":
   version: 10.8.5
   resolution: "jake@npm:10.8.5"
@@ -11034,8 +11047,8 @@ __metadata:
   linkType: hard
 
 "koa@npm:^2.13.0":
-  version: 2.14.1
-  resolution: "koa@npm:2.14.1"
+  version: 2.14.2
+  resolution: "koa@npm:2.14.2"
   dependencies:
     accepts: ^1.3.5
     cache-content-type: ^1.0.0
@@ -11060,7 +11073,7 @@ __metadata:
     statuses: ^1.5.0
     type-is: ^1.6.16
     vary: ^1.1.2
-  checksum: 84cfce48d72cf434831bd9f4f06beb3815da030325a7e89b13ee684f5afd158221e16c2d450ca637b221aa0c4a0ab235edd129e4efea656dc5d8384801d3e90f
+  checksum: 17fe3b8f5e0b4759004a942cc6ba2a9507299943a697dff9766b85f41f45caed4077ca2645ac9ad254d3359fffedfc4c9ebdd7a70493e5df8cdfac159a8ee835
   languageName: node
   linkType: hard
 
@@ -11253,22 +11266,22 @@ __metadata:
   linkType: hard
 
 "lit-element@npm:^3.3.0":
-  version: 3.3.0
-  resolution: "lit-element@npm:3.3.0"
+  version: 3.3.1
+  resolution: "lit-element@npm:3.3.1"
   dependencies:
     "@lit-labs/ssr-dom-shim": ^1.1.0
     "@lit/reactive-element": ^1.3.0
     lit-html: ^2.7.0
-  checksum: 5a483c34dd55412599978e02858d841a932199dedca0b86ec54639096bc36c301f57915c0ee0463d8a57ac265d57f3468c8378224816c732c73df641a2549d62
+  checksum: c5731de5126d59ca9b2e6ae6fa61042101f7c63aaa5918fc84668f193debddb930dd217fba0f5be4bba1f90d84d40155ccb25bac56d4cb42cf2e9e41096227df
   languageName: node
   linkType: hard
 
 "lit-html@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "lit-html@npm:2.7.0"
+  version: 2.7.2
+  resolution: "lit-html@npm:2.7.2"
   dependencies:
     "@types/trusted-types": ^2.0.2
-  checksum: 8a0f83c0f6110f8d02484803c2b309c6d21011bd03681cb790c5303e4a6e4f94956cb2dcb05e67f6c4066f382193a7e5c8987ab0ca244f2fe6e85b99e2feecdd
+  checksum: 885309bd72a9b6eb6c488ae901595c44b270023e02cafebca774b3ad14c1ec34dbe35a69d7ad22362e4ba3e7c2600662c003145db412cd9d61ecea91a93227ac
   languageName: node
   linkType: hard
 
@@ -11495,13 +11508,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^7.14.1, lru-cache@npm:^7.7.1":
+"lru-cache@npm:^7.7.1":
   version: 7.18.3
   resolution: "lru-cache@npm:7.18.3"
   checksum: e550d772384709deea3f141af34b6d4fa392e2e418c1498c078de0ee63670f1f46f5eee746e8ef7e69e1c895af0d4224e62ee33e66a543a14763b0f2e74c1356
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "lru-cache@npm:9.1.0"
+  checksum: 97b46faa2e8195b75b1c48a5515f8e458b8f6a0d0933c0484a4e45b6aa67406dcc5f6c8774fef206fd918dce6a4b4a6f627541fbdf74f8e6b3c71f688f43041e
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:0.30.0":
   version: 0.30.0
   resolution: "magic-string@npm:0.30.0"
@@ -11622,12 +11642,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs@npm:^3.4.12, memfs@npm:^3.4.3":
-  version: 3.4.13
-  resolution: "memfs@npm:3.4.13"
+"memfs@npm:^3.4.3, memfs@npm:^3.5.0":
+  version: 3.5.0
+  resolution: "memfs@npm:3.5.0"
   dependencies:
     fs-monkey: ^1.0.3
-  checksum: 3f9717d6f060919d53f211acb6096a0ea2f566a8cbcc4ef7e1f2561e31e33dc456053fdf951c90a49c8ec55402de7f01b006b81683ab7bd4bdbbd8c9b9cdae5f
+  checksum: 8427db6c3644eeb9119b7a74b232d9a6178d018878acce6f05bd89d95e28b1073c9eeb00127131b0613b07a003e2e7b15b482f9004e548fe06a0aba7aa02515c
   languageName: node
   linkType: hard
 
@@ -11802,12 +11822,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:^8.0.2":
-  version: 8.0.3
-  resolution: "minimatch@npm:8.0.3"
+"minimatch@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "minimatch@npm:9.0.0"
   dependencies:
     brace-expansion: ^2.0.1
-  checksum: 8957d8105be6729bf1d3af9c410b2a38ffcf3cd17d4ffaf715b2aa4841490aaa82f1ebff785e71b5b97747199ccc61027db597495941cf46243d9a64382e1560
+  checksum: 7bd57899edd1d1b0560f50b5b2d1ea4ad2a366c5a2c8e0a943372cf2f200b64c256bae45a87a80915adbce27fa36526264296ace0da57b600481fe5ea3e372e5
   languageName: node
   linkType: hard
 
@@ -11878,10 +11898,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^4.0.0, minipass@npm:^4.0.2, minipass@npm:^4.2.4":
-  version: 4.2.5
-  resolution: "minipass@npm:4.2.5"
-  checksum: 4f9c19af23a5d4a9e7156feefc9110634b178a8cff8f8271af16ec5ebf7e221725a97429952c856f5b17b30c2065ebd24c81722d90c93d2122611d75b952b48f
+"minipass@npm:^4.0.0":
+  version: 4.2.8
+  resolution: "minipass@npm:4.2.8"
+  checksum: 7f4914d5295a9a30807cae5227a37a926e6d910c03f315930fde52332cf0575dfbc20295318f91f0baf0e6bb11a6f668e30cde8027dea7a11b9d159867a3c830
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "minipass@npm:5.0.0"
+  checksum: 425dab288738853fded43da3314a0b5c035844d6f3097a8e3b5b29b328da8f3c1af6fc70618b32c29ff906284cf6406b6841376f21caaadd0793c1d5a6a620ea
   languageName: node
   linkType: hard
 
@@ -12022,12 +12049,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.4":
-  version: 3.3.4
-  resolution: "nanoid@npm:3.3.4"
+"nanoid@npm:^3.3.6":
+  version: 3.3.6
+  resolution: "nanoid@npm:3.3.6"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 2fddd6dee994b7676f008d3ffa4ab16035a754f4bb586c61df5a22cf8c8c94017aadd360368f47d653829e0569a92b129979152ff97af23a558331e47e37cd9c
+  checksum: 7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
   languageName: node
   linkType: hard
 
@@ -12811,13 +12838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.6.1":
-  version: 1.6.2
-  resolution: "path-scurry@npm:1.6.2"
+"path-scurry@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "path-scurry@npm:1.7.0"
   dependencies:
-    lru-cache: ^7.14.1
-    minipass: ^4.0.2
-  checksum: daf863a0e5135be0741a461d36fe1cf67c3dda441d6dd9b038c94c601738e389de9a2f80ae92a5aed7c424186cce46770e785feef30939d364033247436ee5ee
+    lru-cache: ^9.0.0
+    minipass: ^5.0.0
+  checksum: 4e86df0fa6848cef1ba672d4a332b8dbd0297c42d5123bcc419d714c34b25ee6775b0d2e66dd5e698a38e9bcd808f8fc47333e3a3357307cada98e16bfae8b98
   languageName: node
   linkType: hard
 
@@ -13016,13 +13043,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.4.14":
-  version: 8.4.21
-  resolution: "postcss@npm:8.4.21"
+  version: 8.4.23
+  resolution: "postcss@npm:8.4.23"
   dependencies:
-    nanoid: ^3.3.4
+    nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: e39ac60ccd1542d4f9d93d894048aac0d686b3bb38e927d8386005718e6793dbbb46930f0a523fe382f1bbd843c6d980aaea791252bf5e176180e5a4336d9679
+  checksum: 8bb9d1b2ea6e694f8987d4f18c94617971b2b8d141602725fedcc2222fdc413b776a6e1b969a25d627d7b2681ca5aabb56f59e727ef94072e1b6ac8412105a2f
   languageName: node
   linkType: hard
 
@@ -13387,13 +13414,13 @@ __metadata:
   linkType: hard
 
 "regexp.prototype.flags@npm:^1.4.3":
-  version: 1.4.3
-  resolution: "regexp.prototype.flags@npm:1.4.3"
+  version: 1.5.0
+  resolution: "regexp.prototype.flags@npm:1.5.0"
   dependencies:
     call-bind: ^1.0.2
-    define-properties: ^1.1.3
-    functions-have-names: ^1.2.2
-  checksum: 51228bae732592adb3ededd5e15426be25f289e9c4ef15212f4da73f4ec3919b6140806374b8894036a86020d054a8d2657d3fee6bb9b4d35d8939c20030b7a6
+    define-properties: ^1.2.0
+    functions-have-names: ^1.2.3
+  checksum: c541687cdbdfff1b9a07f6e44879f82c66bbf07665f9a7544c5fd16acdb3ec8d1436caab01662d2fbcad403f3499d49ab0b77fbc7ef29ef961d98cc4bc9755b4
   languageName: node
   linkType: hard
 
@@ -13598,28 +13625,28 @@ __metadata:
   linkType: hard
 
 "resolve@npm:^1.1.6, resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.14.2, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.4.0":
-  version: 1.22.1
-  resolution: "resolve@npm:1.22.1"
+  version: 1.22.3
+  resolution: "resolve@npm:1.22.3"
   dependencies:
-    is-core-module: ^2.9.0
+    is-core-module: ^2.12.0
     path-parse: ^1.0.7
     supports-preserve-symlinks-flag: ^1.0.0
   bin:
     resolve: bin/resolve
-  checksum: 07af5fc1e81aa1d866cbc9e9460fbb67318a10fa3c4deadc35c3ad8a898ee9a71a86a65e4755ac3195e0ea0cfbe201eb323ebe655ce90526fd61917313a34e4e
+  checksum: fb834b81348428cb545ff1b828a72ea28feb5a97c026a1cf40aa1008352c72811ff4d4e71f2035273dc536dcfcae20c13604ba6283c612d70fa0b6e44519c374
   languageName: node
   linkType: hard
 
 "resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.4.0#~builtin<compat/resolve>":
-  version: 1.22.1
-  resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=c3c19d"
+  version: 1.22.3
+  resolution: "resolve@patch:resolve@npm%3A1.22.3#~builtin<compat/resolve>::version=1.22.3&hash=c3c19d"
   dependencies:
-    is-core-module: ^2.9.0
+    is-core-module: ^2.12.0
     path-parse: ^1.0.7
     supports-preserve-symlinks-flag: ^1.0.0
   bin:
     resolve: bin/resolve
-  checksum: 5656f4d0bedcf8eb52685c1abdf8fbe73a1603bb1160a24d716e27a57f6cecbe2432ff9c89c2bd57542c3a7b9d14b1882b73bfe2e9d7849c9a4c0b8b39f02b8b
+  checksum: ad59734723b596d0891321c951592ed9015a77ce84907f89c9d9307dd0c06e11a67906a3e628c4cae143d3e44898603478af0ddeb2bba3f229a9373efe342665
   languageName: node
   linkType: hard
 
@@ -13834,25 +13861,25 @@ __metadata:
   linkType: hard
 
 "schema-utils@npm:^3.1.0, schema-utils@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "schema-utils@npm:3.1.1"
+  version: 3.1.2
+  resolution: "schema-utils@npm:3.1.2"
   dependencies:
     "@types/json-schema": ^7.0.8
     ajv: ^6.12.5
     ajv-keywords: ^3.5.2
-  checksum: fb73f3d759d43ba033c877628fe9751620a26879f6301d3dbeeb48cf2a65baec5cdf99da65d1bf3b4ff5444b2e59cbe4f81c2456b5e0d2ba7d7fd4aed5da29ce
+  checksum: 39683edfe3beff018cdb1ae4fa296fc55cea13a080aa2b4d9351895cd64b22ba4d87e2e548c2a2ac1bc76e60980670adb0f413a58104479f1a0c12e5663cb8ca
   languageName: node
   linkType: hard
 
 "schema-utils@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "schema-utils@npm:4.0.0"
+  version: 4.0.1
+  resolution: "schema-utils@npm:4.0.1"
   dependencies:
     "@types/json-schema": ^7.0.9
-    ajv: ^8.8.0
+    ajv: ^8.9.0
     ajv-formats: ^2.1.1
-    ajv-keywords: ^5.0.0
-  checksum: c843e92fdd1a5c145dbb6ffdae33e501867f9703afac67bdf35a685e49f85b1dcc10ea250033175a64bd9d31f0555bc6785b8359da0c90bcea30cf6dfbb55a8f
+    ajv-keywords: ^5.1.0
+  checksum: 745e7293c6b6c84940de16753c207311da821aa9911b9e2d158cfd9ffc5bf1f880147abbbe775b96cb8cd3c7f48890950fe0164f54eed9a8aabb948ebf8a3fdd
   languageName: node
   linkType: hard
 
@@ -13900,13 +13927,13 @@ __metadata:
   linkType: hard
 
 "semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7":
-  version: 7.3.8
-  resolution: "semver@npm:7.3.8"
+  version: 7.5.0
+  resolution: "semver@npm:7.5.0"
   dependencies:
     lru-cache: ^6.0.0
   bin:
     semver: bin/semver.js
-  checksum: ba9c7cbbf2b7884696523450a61fee1a09930d888b7a8d7579025ad93d459b2d1949ee5bbfeb188b2be5f4ac163544c5e98491ad6152df34154feebc2cc337c1
+  checksum: 2d266937756689a76f124ffb4c1ea3e1bbb2b263219f90ada8a11aebebe1280b13bb76cca2ca96bdee3dbc554cbc0b24752eb895b2a51577aa644427e9229f2b
   languageName: node
   linkType: hard
 
@@ -14067,9 +14094,9 @@ __metadata:
   linkType: hard
 
 "shell-quote@npm:^1.7.3":
-  version: 1.8.0
-  resolution: "shell-quote@npm:1.8.0"
-  checksum: 6ef7c5e308b9c77eedded882653a132214fa98b4a1512bb507588cf6cd2fc78bfee73e945d0c3211af028a1eabe09c6a19b96edd8977dc149810797e93809749
+  version: 1.8.1
+  resolution: "shell-quote@npm:1.8.1"
+  checksum: 5f01201f4ef504d4c6a9d0d283fa17075f6770bfbe4c5850b074974c68062f37929ca61700d95ad2ac8822e14e8c4b990ca0e6e9272e64befd74ce5e19f0736b
   languageName: node
   linkType: hard
 
@@ -14091,9 +14118,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sinon@npm:15.0.3":
-  version: 15.0.3
-  resolution: "sinon@npm:15.0.3"
+"signal-exit@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "signal-exit@npm:4.0.1"
+  checksum: 832043367dca23e61ab6033e8b41c595fc805119bfe4fee63dea201cdc809a8b086bc54597bbbc1b2cde1a63c7dd554d1295ed2cca92db598233834a0b59b281
+  languageName: node
+  linkType: hard
+
+"sinon@npm:15.0.4":
+  version: 15.0.4
+  resolution: "sinon@npm:15.0.4"
   dependencies:
     "@sinonjs/commons": ^3.0.0
     "@sinonjs/fake-timers": ^10.0.2
@@ -14101,7 +14135,7 @@ __metadata:
     diff: ^5.1.0
     nise: ^5.1.4
     supports-color: ^7.2.0
-  checksum: fb9401e44215c7a7904d2df3032c56369cb4f2fd9c708460e1b980c6032de8e13bd8c4d90039074f9383e5219702a5e0755b7bea94bd4c090b8c1e583f137c3d
+  checksum: a5e262c59a891daea405e4c432c5d703f888a7f738c42cb353c08867c920da85c528742025dd3b5cf17897101c7d7f77c287dcc1590103c351be98704e8a51eb
   languageName: node
   linkType: hard
 
@@ -14677,9 +14711,9 @@ __metadata:
   linkType: hard
 
 "style-mod@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "style-mod@npm:4.0.2"
-  checksum: 4bac8877e039c61481fc729981378791979c3ebb2f827a54240e95ccca5bca92a6d660566cacb87a8d7cc1ffb26bcd5eafa10c697e131adb5ca9541f3a9cbff6
+  version: 4.0.3
+  resolution: "style-mod@npm:4.0.3"
+  checksum: 934556e720bd29026ff8fef43a1a35b58957813025b91f996d886e9405acf934ddb1934def4400b174bd7784c9263eb9c71f07ae83925af9271b7d921d546854
   languageName: node
   linkType: hard
 
@@ -14841,8 +14875,8 @@ __metadata:
   linkType: hard
 
 "terser@npm:^5.0.0, terser@npm:^5.15.1, terser@npm:^5.16.5":
-  version: 5.16.6
-  resolution: "terser@npm:5.16.6"
+  version: 5.17.1
+  resolution: "terser@npm:5.17.1"
   dependencies:
     "@jridgewell/source-map": ^0.3.2
     acorn: ^8.5.0
@@ -14850,7 +14884,7 @@ __metadata:
     source-map-support: ~0.5.20
   bin:
     terser: bin/terser
-  checksum: f763a7bcc7b98cb2bfc41434f7b92bfe8a701a12c92ea6049377736c8e6de328240d654a20dfe15ce170fd783491b9873fad9f4cd8fee4f6c6fb8ca407859dee
+  checksum: 69b0e80e3c4084db2819de4d6ae8a2ba79f2fcd7ed6df40fe4b602ec7bfd8e889cc63c7d5268f30990ffecbf6eeda18f857adad9386fe2c2331b398d58ed855c
   languageName: node
   linkType: hard
 
@@ -15499,16 +15533,16 @@ __metadata:
   linkType: hard
 
 "update-browserslist-db@npm:^1.0.10":
-  version: 1.0.10
-  resolution: "update-browserslist-db@npm:1.0.10"
+  version: 1.0.11
+  resolution: "update-browserslist-db@npm:1.0.11"
   dependencies:
     escalade: ^3.1.1
     picocolors: ^1.0.0
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
-    browserslist-lint: cli.js
-  checksum: 12db73b4f63029ac407b153732e7cd69a1ea8206c9100b482b7d12859cd3cd0bc59c602d7ae31e652706189f1acb90d42c53ab24a5ba563ed13aebdddc5561a0
+    update-browserslist-db: cli.js
+  checksum: b98327518f9a345c7cad5437afae4d2ae7d865f9779554baf2a200fdf4bac4969076b679b1115434bd6557376bdd37ca7583d0f9b8f8e302d7d4cc1e91b5f231
   languageName: node
   linkType: hard
 
@@ -15734,9 +15768,9 @@ __metadata:
   linkType: hard
 
 "vscode-languageserver-textdocument@npm:^1.0.1":
-  version: 1.0.9
-  resolution: "vscode-languageserver-textdocument@npm:1.0.9"
-  checksum: 36b76f725098d3e0d97885c05c51fca47388d9b62e936f6c8824c44a4fac7a96e1406538538a0f46ef1fdb9f1053ddc1cacb5e7b168cecb36d3c018942ec6f52
+  version: 1.0.10
+  resolution: "vscode-languageserver-textdocument@npm:1.0.10"
+  checksum: 605ff0662535088567a145b48d28f0c41844d28269fa0b3fca3a1e179dd14baf7181150b274bf3840ef2a043ed8474a9227aaf169a6fae574516349a1b371a18
   languageName: node
   linkType: hard
 
@@ -15807,8 +15841,8 @@ __metadata:
   linkType: hard
 
 "web-component-analyzer@npm:~1.1.1":
-  version: 1.1.6
-  resolution: "web-component-analyzer@npm:1.1.6"
+  version: 1.1.7
+  resolution: "web-component-analyzer@npm:1.1.7"
   dependencies:
     fast-glob: ^3.2.2
     ts-simple-type: ~1.0.5
@@ -15817,7 +15851,7 @@ __metadata:
   bin:
     wca: cli.js
     web-component-analyzer: cli.js
-  checksum: 8071b348ffc8e40ff024fc63490e9c7a0d9b929aa88b44548ccb559110ba926cf2063cefe864a7060c73d515a35496f6d8990bed9a743a819e6b4b26e93a9042
+  checksum: 6c36521b7b79d5547ffdbc359029651ad1d929df6e09f8adfbafb2a34c23199712b7080f08f941f056b6a989718c11eb9221171d97ad397ed8a20cf08dd78e4b
   languageName: node
   linkType: hard
 
@@ -15889,9 +15923,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-server@npm:4.13.2":
-  version: 4.13.2
-  resolution: "webpack-dev-server@npm:4.13.2"
+"webpack-dev-server@npm:4.13.3":
+  version: 4.13.3
+  resolution: "webpack-dev-server@npm:4.13.3"
   dependencies:
     "@types/bonjour": ^3.5.9
     "@types/connect-history-api-fallback": ^1.3.5
@@ -15932,7 +15966,7 @@ __metadata:
       optional: true
   bin:
     webpack-dev-server: bin/webpack-dev-server.js
-  checksum: 9bf573abf05b0e0f1e8219820f6264e25a0f8ee6aebed3c0d0449c24a37f88b575972e0a2bec426112ee37d48c8f5090e7754aa1873206d3c9b6344a54718232
+  checksum: d019844d3bc384676921afadfbd0a95fd06e475f2d43604789a4a8f42f79a8fb37e745f15f47f352630046dd6c6c9694051a7552b34a056c59d3a601e74d6320
   languageName: node
   linkType: hard