diff --git a/build-scripts/gulp/gather-static.js b/build-scripts/gulp/gather-static.js
index c0f36d02af..306ae3158a 100644
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@@ -79,6 +79,11 @@ function copyFonts(staticDir) {
   );
 }
 
+function copyQrScannerWorker(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
+}
+
 function copyMapPanel(staticDir) {
   const staticPath = genStaticPath(staticDir);
   copyFileDir(
@@ -125,6 +130,9 @@ gulp.task("copy-static-app", async () => {
 
   // Panel assets
   copyMapPanel(staticDir);
+
+  // Qr Scanner assets
+  copyQrScannerWorker(staticDir);
 });
 
 gulp.task("copy-static-demo", async () => {
diff --git a/build-scripts/removedIcons.json b/build-scripts/removedIcons.json
index 3949b1f13e..fe51488c70 100644
--- a/build-scripts/removedIcons.json
+++ b/build-scripts/removedIcons.json
@@ -1,102 +1 @@
-[
-  {
-    "path": "M21.8 14.5C21.3 13.7 20.1 13.4 18.1 13.4C17.4 13.4 16.7 13.4 16 13.5C15.5 13.2 15 12.9 14.6 12.6C13.6 11.8 12.7 10.3 12 8.5C12 8.5 12 8.4 12.1 8.3C12.6 6.2 13.1 3.6 12.1 2.5C11.8 2.2 11.5 2.1 11.1 2.1H10.7C10.1 2.1 9.6 2.7 9.4 3.3C8.8 5.4 9.2 6.6 9.8 8.5C9.4 10 8.9 11.6 8 13.3C7.5 14.4 6.9 15.4 6.5 16.2C5.9 16.5 5.4 16.8 5.1 17C3.2 18.2 2.2 19.6 2.1 20.4C2 20.7 2 21 2.1 21.2V21.3L2.9 21.8C3.1 21.9 3.4 22 3.6 22C4.9 22 6.4 20.5 8.4 17C8.5 17 8.6 16.9 8.7 16.9C10.4 16.4 12.4 16 15.2 15.7C16.8 16.5 18.8 16.9 20 16.9C20.7 16.9 21.2 16.7 21.5 16.4C21.8 16.1 21.9 15.7 22 15.3C22 15 22 14.7 21.8 14.5M3.4 20.9C3.5 20.3 4.2 19.2 5.4 18.2C5.6 18.1 5.8 17.9 6.2 17.7C5 19.6 4.1 20.6 3.4 20.9M10.8 3.2C10.9 3.1 10.9 3 11 3L11.2 3.1C11.5 3.5 11.5 4 11.3 4.9V5.2C11.2 5.6 11.2 6 11 6.5C10.6 5 10.6 3.9 10.8 3.2M8.8 15.8L8.6 15.9C8.7 15.4 9.1 14.8 9.4 14.2C10.1 12.8 10.7 11.5 11 10.3C11.7 11.8 12.5 12.9 13.5 13.8C13.7 14 13.9 14.2 14.2 14.3C12.8 14.5 10.9 15 8.8 15.8M20.9 15.7H20.5C19.8 15.7 18.6 15.4 17.4 14.9C17.5 14.7 17.7 14.7 17.8 14.7C20.1 14.7 20.7 15.1 20.9 15.3C21 15.4 21 15.4 21 15.5C21 15.6 21 15.6 20.9 15.7Z",
-    "name": "adobe-acrobat"
-  },
-  {
-    "path": "M14.58,3H22V19.67L14.58,3M9.42,3H2V19.67L9.42,3M12,9.17L16.67,19.67H13.5L12.17,16.33H8.75L12,9.17Z",
-    "name": "adobe"
-  },
-  {
-    "path": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10.43,21.87V19.91C10.43,19.22 10,18.57 9.35,18.3C6.91,17.26 5.17,14.83 5.17,12C5.17,8.26 8.22,5.17 12,5.17C15.78,5.17 18.83,8.26 18.83,12C18.83,16.43 15.39,20.61 10.43,21.87Z",
-    "name": "amazon-alexa"
-  },
-  {
-    "path": "M15.93,17.09C15.75,17.25 15.5,17.26 15.3,17.15C14.41,16.41 14.25,16.07 13.76,15.36C12.29,16.86 11.25,17.31 9.34,17.31C7.09,17.31 5.33,15.92 5.33,13.14C5.33,10.96 6.5,9.5 8.19,8.76C9.65,8.12 11.68,8 13.23,7.83V7.5C13.23,6.84 13.28,6.09 12.9,5.54C12.58,5.05 11.95,4.84 11.4,4.84C10.38,4.84 9.47,5.37 9.25,6.45C9.2,6.69 9,6.93 8.78,6.94L6.18,6.66C5.96,6.61 5.72,6.44 5.78,6.1C6.38,2.95 9.23,2 11.78,2C13.08,2 14.78,2.35 15.81,3.33C17.11,4.55 17,6.18 17,7.95V12.12C17,13.37 17.5,13.93 18,14.6C18.17,14.85 18.21,15.14 18,15.31L15.94,17.09H15.93M13.23,10.56V10C11.29,10 9.24,10.39 9.24,12.67C9.24,13.83 9.85,14.62 10.87,14.62C11.63,14.62 12.3,14.15 12.73,13.4C13.25,12.47 13.23,11.6 13.23,10.56M20.16,19.54C18,21.14 14.82,22 12.1,22C8.29,22 4.85,20.59 2.25,18.24C2.05,18.06 2.23,17.81 2.5,17.95C5.28,19.58 8.75,20.56 12.33,20.56C14.74,20.56 17.4,20.06 19.84,19.03C20.21,18.87 20.5,19.27 20.16,19.54M21.07,18.5C20.79,18.14 19.22,18.33 18.5,18.42C18.31,18.44 18.28,18.26 18.47,18.12C19.71,17.24 21.76,17.5 22,17.79C22.24,18.09 21.93,20.14 20.76,21.11C20.58,21.27 20.41,21.18 20.5,21C20.76,20.33 21.35,18.86 21.07,18.5Z",
-    "name": "amazon"
-  },
-  {
-    "path": "M22.78,17.91C22.94,18.16 23,18.42 23,18.7C23,19.08 22.87,19.39 22.57,19.64C22.27,19.89 21.94,20 21.56,20H19.08L12.42,8H11.58L4.92,20H2.39C1.92,20 1.53,19.8 1.22,19.38C0.91,18.96 0.89,18.5 1.17,18L10.78,1.69C11.09,1.22 11.5,1 12,1C12.53,1 12.92,1.22 13.17,1.69L22.78,17.91M4.78,22.31L12,9.38L19.22,22.31L18.5,23L12,20.34L5.44,23L4.78,22.31Z",
-    "name": "android-auto"
-  },
-  {
-    "path": "M15,9A1,1 0 0,1 14,8A1,1 0 0,1 15,7A1,1 0 0,1 16,8A1,1 0 0,1 15,9M9,9A1,1 0 0,1 8,8A1,1 0 0,1 9,7A1,1 0 0,1 10,8A1,1 0 0,1 9,9M16.12,4.37L18.22,2.27L17.4,1.44L15.09,3.75C14.16,3.28 13.11,3 12,3C10.88,3 9.84,3.28 8.91,3.75L6.6,1.44L5.78,2.27L7.88,4.37C6.14,5.64 5,7.68 5,10V11H19V10C19,7.68 17.86,5.64 16.12,4.37M5,16C5,19.86 8.13,23 12,23A7,7 0 0,0 19,16V12H5V16Z",
-    "name": "android-debug-bridge"
-  },
-  {
-    "path": "M22,6L15.5,18H2L8.5,6H22Z",
-    "name": "bandcamp"
-  },
-  {
-    "path": "M19.92,10.76C19.92,10.76 22.5,12.24 22.5,13.89C22.5,15.5 19.5,16.06 16.18,15.9C16.18,15.9 14.77,17.87 13.42,18.7C14.88,21.44 16,22.5 15.97,22.5C15.97,22.5 15.23,22.69 13,19.04C11.66,19.89 10.17,20.23 9.56,19.7C8.94,19.17 9.42,18.28 9.68,17.85C9.41,18 8,18.83 6.75,18.83C5.26,18.83 5.05,17.72 5.05,17.15C5.05,15 7.12,12 7.12,12C7.12,12 6.16,9.88 6.05,8.22C4.17,8.06 2,8.39 1.53,8.54C1.4,8.54 1.84,8.22 2,8.18C2.15,8.13 3.91,7.67 6,7.67C6,5.93 6.35,4.33 7.41,4.33C8.13,4.33 8.71,5.45 8.71,5.45C8.71,5.45 8.7,1.5 10.74,1.5C12.8,1.5 15,6.11 15,6.11C15,6.11 17.22,6.32 18.85,7.09C19.5,5.73 20.09,5.11 20.81,3C21,3.7 20.2,5.5 19.35,7.3V7.3H19.35C19.35,7.3 21.65,8.5 21.65,9.83C21.65,10.84 19.92,10.76 19.92,10.76M10.68,18.58C11.36,18.69 12.41,18.1 12.4,18.1L11.58,16.57L10.4,17.4C10.39,17.41 9.64,18.38 10.68,18.58M20.15,9.76C20.15,9.1 18.95,8.35 18.81,8.27L17.89,9.75L19.17,10.37C19.59,10.34 20.15,10.35 20.15,9.76M8,5.63C7.7,5.63 7.09,6.07 7.09,7.64L8.83,7.7L8.72,6.3C8.6,6 8.3,5.63 8,5.63M10.18,15.78C8.92,15.13 8.16,14.06 7.54,12.9C7.54,12.9 5.96,15.55 6.97,16.22C8,16.89 9.64,16.16 10.18,15.78M12.97,17.76C14.11,16.89 17.19,14.73 17.45,11.08C14.57,9.44 10.62,8.71 10.62,8.71C10.62,8.71 10.61,8.21 10.7,7.86C11.64,7.97 14.59,8.47 17.03,9.43C16.35,8.28 15.84,7.85 15.37,7.5C16.53,7.76 17.36,9.26 17.36,9.26L18.28,7.96C18.28,7.96 13.91,5.61 10.19,7.42C10.11,10.3 11.59,14.56 11.59,14.56L10.82,14.89C10.3,13.84 9.63,12.09 9,8.67C8.7,9.08 8.17,9.55 8.16,11.09C7.7,9.8 8.66,8.43 8.67,8.42L7.07,8.26C7.17,9.92 8.05,14.2 10.68,15.53C13,14.21 15.5,11.54 16.13,10.77L16.82,11.28L12.35,15.97C13.59,16 14.32,15.72 14.82,15.5C14.1,16.25 12.86,16.32 12.27,16.32C12.28,16.34 12.57,17.07 12.97,17.76M14.03,6.05C14,5.97 12.66,3.69 11.47,3.86C10.69,4.11 10.24,5.43 10.23,6.87C10.76,6.56 12,6 14.03,6.05M16.71,15.07C16.71,15.07 20,15 19.9,13.76C19.9,12.56 17.92,11.33 17.92,11.35C17.93,13.47 16.71,15.07 16.71,15.07Z",
-    "name": "battlenet"
-  },
-  {
-    "path": "M12.5 10H10C9.45 10 9 9.55 9 9C9 8.45 9.45 8 10 8H12.5C13.05 8 13.5 8.45 13.5 9C13.5 9.55 13.05 10 12.5 10M15 14C15 13.45 14.55 13 14 13H10C9.45 13 9 13.45 9 14C9 14.55 9.45 15 10 15H14C14.55 15 15 14.55 15 14M22 4V20C22 21.11 21.11 22 20 22H4C2.89 22 2 21.11 2 20V4C2 2.89 2.89 2 4 2H20C21.11 2 22 2.89 22 4M18 12C18 12 18 11 17 11C16.05 11.03 16 10 16 10L16 8C16 6.34 14.66 5 13 5H9C7.34 5 6 6.34 6 8V15C6 16.66 7.34 18 9 18H15C16.66 18 18 16.66 18 15L18 12Z",
-    "name": "blogger"
-  },
-  {
-    "path": "M12.6,2.86C15.27,4.1 18,5.39 20.66,6.63C20.81,6.7 21,6.75 21,6.95C21,7.15 20.81,7.19 20.66,7.26C18,8.5 15.3,9.77 12.62,11C12.21,11.21 11.79,11.21 11.38,11C8.69,9.76 6,8.5 3.32,7.25C3.18,7.19 3,7.14 3,6.94C3,6.76 3.18,6.71 3.31,6.65C6,5.39 8.74,4.1 11.44,2.85C11.73,2.72 12.3,2.73 12.6,2.86M12,21.15C11.8,21.15 11.66,21.07 11.38,20.97C8.69,19.73 6,18.47 3.33,17.22C3.19,17.15 3,17.11 3,16.9C3,16.7 3.19,16.66 3.34,16.59C3.78,16.38 4.23,16.17 4.67,15.96C5.12,15.76 5.56,15.76 6,15.97C7.79,16.8 9.57,17.63 11.35,18.46C11.79,18.67 12.23,18.66 12.67,18.46C14.45,17.62 16.23,16.79 18,15.96C18.44,15.76 18.87,15.75 19.29,15.95C19.77,16.16 20.24,16.39 20.71,16.61C20.78,16.64 20.85,16.68 20.91,16.73C21.04,16.83 21.04,17 20.91,17.08C20.83,17.14 20.74,17.19 20.65,17.23C18,18.5 15.33,19.72 12.66,20.95C12.46,21.05 12.19,21.15 12,21.15M12,16.17C11.9,16.17 11.55,16.07 11.36,16C8.68,14.74 6,13.5 3.34,12.24C3.2,12.18 3,12.13 3,11.93C3,11.72 3.2,11.68 3.35,11.61C3.8,11.39 4.25,11.18 4.7,10.97C5.13,10.78 5.56,10.78 6,11C7.78,11.82 9.58,12.66 11.38,13.5C11.79,13.69 12.21,13.69 12.63,13.5C14.43,12.65 16.23,11.81 18.04,10.97C18.45,10.78 18.87,10.78 19.29,10.97C19.76,11.19 20.24,11.41 20.71,11.63C20.77,11.66 20.84,11.69 20.9,11.74C21.04,11.85 21.04,12 20.89,12.12C20.84,12.16 20.77,12.19 20.71,12.22C18,13.5 15.31,14.75 12.61,16C12.42,16.09 12.08,16.17 12,16.17Z",
-    "name": "buffer"
-  },
-  {
-    "path": "M20,18H4V6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4M11,17H13V16H14A1,1 0 0,0 15,15V12A1,1 0 0,0 14,11H11V10H15V8H13V7H11V8H10A1,1 0 0,0 9,9V12A1,1 0 0,0 10,13H13V14H9V16H11V17Z",
-    "name": "cash-usd-outline"
-  },
-  {
-    "path": "M20 4H4C2.89 4 2 4.89 2 6V18C2 19.11 2.9 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.1 4 20 4M15 10H11V11H14C14.55 11 15 11.45 15 12V15C15 15.55 14.55 16 14 16H13V17H11V16H9V14H13V13H10C9.45 13 9 12.55 9 12V9C9 8.45 9.45 8 10 8H11V7H13V8H15V10Z",
-    "name": "cash-usd"
-  },
-  {
-    "path": "M10.94 12.09A1.06 1.06 0 1 0 11.91 10.95A1.06 1.06 0 0 0 10.94 12.09M13.54 13.21A2.62 2.62 0 0 1 12.58 13.88L12.57 13.89A11.17 11.17 0 0 0 13.87 16.92A4.83 4.83 0 0 1 12.92 17.3A4.9 4.9 0 0 1 12.24 17.44L12.16 17.45L12.06 17.46L11.87 17.47C11.75 17.47 11.64 17.5 11.5 17.47A5 5 0 0 1 10.79 17.4A5.13 5.13 0 0 1 10.09 17.23A4.78 4.78 0 0 1 9.46 17A5 5 0 0 1 8.93 16.68A4.45 4.45 0 0 1 8.5 16.38C8.38 16.29 8.28 16.19 8.2 16.12L7.95 15.87C7.95 15.87 8 15.97 8.16 16.15C8.24 16.23 8.32 16.34 8.44 16.45A4.93 4.93 0 0 0 8.82 16.82A5.21 5.21 0 0 0 9.33 17.2A5.08 5.08 0 0 0 9.96 17.56A5.43 5.43 0 0 0 10.68 17.85A5.5 5.5 0 0 0 11.46 18.03C11.6 18.06 11.74 18.07 11.88 18.08L12.07 18.1H12.27A5.5 5.5 0 0 0 13.07 18.05A5.61 5.61 0 0 0 14.39 17.7Q14.63 18.03 14.9 18.34L14.87 18.36L14.66 18.5H14.62C14.59 18.53 14.67 18.5 14.66 18.5H14.64L14.58 18.54L14.44 18.61L14.37 18.64L14.33 18.66L14.32 18.67H14.31C14.3 18.68 14.36 18.66 14.33 18.67H14.32L14.17 18.74Q14.09 18.77 14 18.81V18.82L13.93 18.84L13.84 18.87A6.5 6.5 0 0 1 12.25 19.26A6.4 6.4 0 0 1 11.31 19.3H11.19L11.07 19.29L10.81 19.27C10.65 19.24 10.5 19.23 10.33 19.2A6.59 6.59 0 0 1 8.5 18.57C8.35 18.5 8.21 18.43 8.08 18.35C7.95 18.27 7.83 18.19 7.71 18.11A6.64 6.64 0 0 1 7.07 17.6A6.35 6.35 0 0 1 6.57 17.11C6.43 16.96 6.32 16.82 6.22 16.7C6.13 16.58 6.06 16.5 6 16.42L5.94 16.32L6 16.43C6.04 16.5 6.1 16.6 6.18 16.73C6.26 16.86 6.36 17 6.5 17.18A6.5 6.5 0 0 0 6.94 17.73A6.86 6.86 0 0 0 7.55 18.31C7.67 18.41 7.78 18.5 7.91 18.6C8.04 18.7 8.17 18.79 8.31 18.88A7.12 7.12 0 0 0 9.21 19.37A7.2 7.2 0 0 0 10.2 19.74C10.37 19.8 10.55 19.83 10.73 19.87L11 19.92L11.11 19.94L11.25 19.96A7.27 7.27 0 0 0 12.29 20.03A7.38 7.38 0 0 0 14.14 19.77L14.23 19.74L14.28 19.73L14.34 19.71C14.4 19.69 14.46 19.68 14.5 19.66L14.68 19.6L14.85 19.54L15 19.5L15.06 19.45H15.08L15.13 19.43L15.14 19.42L15.17 19.41L15.39 19.3L15.67 19.16C15.86 19.34 16.06 19.5 16.26 19.69C16.26 19.69 17.23 20.69 17.76 20.28C18.26 19.89 17.68 18.68 17.68 18.68A11.2 11.2 0 0 0 13.54 13.21M10.16 11.57L10.15 11.56A11.18 11.18 0 0 0 6.91 11.11A4.72 4.72 0 0 1 7.34 9.39L7.38 9.31L7.42 9.23L7.5 9.06C7.57 8.96 7.62 8.85 7.69 8.75A4.97 4.97 0 0 1 8.14 8.17A5.05 5.05 0 0 1 8.66 7.67A4.77 4.77 0 0 1 9.2 7.27A5.06 5.06 0 0 1 9.74 7A4.88 4.88 0 0 1 10.22 6.78C10.37 6.72 10.5 6.69 10.61 6.66C10.82 6.6 10.95 6.58 10.95 6.58S10.82 6.59 10.6 6.61C10.5 6.63 10.35 6.64 10.19 6.68A4.94 4.94 0 0 0 9.67 6.82A5.34 5.34 0 0 0 9.08 7.05A5.08 5.08 0 0 0 8.45 7.39A5.47 5.47 0 0 0 7.82 7.84A5.55 5.55 0 0 0 7.25 8.41C7.16 8.5 7.08 8.63 7 8.74L6.88 8.89L6.82 8.97L6.76 9.06A5.5 5.5 0 0 0 6.38 9.77A5.61 5.61 0 0 0 5.97 11.14L5.96 11.16C5.7 11.18 5.43 11.21 5.16 11.26V11.12L5.17 10.87V10.82C5.17 10.78 5.16 10.88 5.16 10.87V10.84L5.17 10.77L5.18 10.62L5.19 10.54V10.5H5.2V10.47C5.2 10.46 5.19 10.5 5.19 10.5L5.22 10.32L5.24 10.14L5.25 10.12V10.11L5.24 10.13L5.25 10.12V10.11L5.26 10.07L5.27 9.97A6.5 6.5 0 0 1 6.26 7.59L6.32 7.5L6.39 7.4L6.55 7.19C6.65 7.07 6.74 6.94 6.86 6.82A6.61 6.61 0 0 1 8.37 5.59C8.5 5.5 8.64 5.43 8.77 5.37C8.9 5.29 9.04 5.24 9.17 5.18A6.76 6.76 0 0 1 9.94 4.9A6.5 6.5 0 0 1 10.62 4.74C10.82 4.69 11 4.68 11.15 4.66C11.3 4.64 11.42 4.64 11.5 4.63L11.62 4.62H11.5C11.42 4.62 11.3 4.61 11.15 4.61C11 4.61 10.82 4.61 10.61 4.63A6.41 6.41 0 0 0 9.9 4.73A7.03 7.03 0 0 0 9.08 4.93C8.94 5 8.79 5.03 8.65 5.09C8.5 5.14 8.35 5.21 8.2 5.28A7.26 7.26 0 0 0 7.31 5.78A7.33 7.33 0 0 0 6.47 6.42C6.33 6.54 6.2 6.68 6.07 6.8L5.9 7L5.82 7.09L5.72 7.19A7.25 7.25 0 0 0 5.12 8.04A7.38 7.38 0 0 0 4.36 9.75L4.33 9.84L4.32 9.89L4.3 9.95L4.25 10.13L4.21 10.29L4.18 10.5L4.15 10.63C4.14 10.65 4.14 10.67 4.14 10.7L4.13 10.72V10.78L4.12 10.81L4.09 11.06L4.05 11.5C3.79 11.57 3.53 11.65 3.28 11.74C3.28 11.74 1.93 12.05 2 12.72C2.08 13.35 3.41 13.5 3.41 13.5A11.21 11.21 0 0 0 10.24 12.74A2.62 2.62 0 0 1 10.16 11.57M19.7 10.84A7.19 7.19 0 0 0 19.53 9.79C19.5 9.62 19.43 9.45 19.38 9.27L19.3 9.03L19.26 8.91L19.21 8.77A7.23 7.23 0 0 0 18.75 7.83A7.35 7.35 0 0 0 17.62 6.35L17.55 6.28L17.5 6.25L17.47 6.2L17.33 6.08L17.21 5.97L17.06 5.85L16.94 5.75L16.89 5.7L16.88 5.69H16.87L16.83 5.66L16.8 5.64L16.59 5.5L16.32 5.31Q16.42 4.88 16.5 4.45S16.88 3.11 16.25 2.85C15.67 2.61 14.91 3.72 14.91 3.72A11.21 11.21 0 0 0 12.25 10.05A2.63 2.63 0 0 1 13.32 10.55A11.2 11.2 0 0 0 15.25 8A4.73 4.73 0 0 1 16.08 8.66A4.81 4.81 0 0 1 16.53 9.19L16.58 9.25L16.63 9.33L16.74 9.5C16.8 9.59 16.86 9.69 16.92 9.8A4.89 4.89 0 0 1 17.4 11.16A4.78 4.78 0 0 1 17.5 11.83A4.88 4.88 0 0 1 17.5 12.44A4.76 4.76 0 0 1 17.44 12.96C17.42 13.11 17.39 13.25 17.36 13.36C17.31 13.57 17.27 13.7 17.27 13.7L17.41 13.37C17.45 13.26 17.5 13.14 17.54 13A5.06 5.06 0 0 0 17.67 12.46A5.34 5.34 0 0 0 17.75 11.83A5.04 5.04 0 0 0 17.76 11.11A5.38 5.38 0 0 0 17.43 9.57C17.38 9.44 17.32 9.31 17.27 9.19L17.18 9L17.14 8.93L17.09 8.83A5.53 5.53 0 0 0 15.67 7.16C15.79 6.9 15.89 6.65 16 6.38L16.03 6.41L16.25 6.53L16.28 6.54V6.55H16.29C16.32 6.57 16.24 6.5 16.25 6.53H16.26L16.27 6.54L16.33 6.58L16.45 6.66L16.5 6.71L16.56 6.73L16.57 6.74H16.58L16.56 6.73H16.57L16.71 6.84L16.85 6.94L16.87 6.96L16.86 6.95L16.87 6.96L16.91 7L17 7.05A6.46 6.46 0 0 1 18.6 9.05L18.65 9.15L18.71 9.27L18.82 9.5C18.87 9.65 18.94 9.79 19 9.95A6.69 6.69 0 0 1 19.24 10.9A6.78 6.78 0 0 1 19.35 11.86C19.36 12 19.36 12.17 19.35 12.32C19.35 12.5 19.34 12.62 19.33 12.77A6.79 6.79 0 0 1 19.2 13.58A6.4 6.4 0 0 1 19 14.25C18.96 14.45 18.89 14.62 18.84 14.76C18.78 14.9 18.73 15 18.7 15.07L18.64 15.19L18.71 15.08C18.75 15 18.81 14.91 18.88 14.78C18.95 14.64 19.04 14.5 19.12 14.29A6.5 6.5 0 0 0 19.37 13.62A6.93 6.93 0 0 0 19.59 12.81C19.61 12.66 19.64 12.5 19.66 12.35C19.68 12.19 19.7 12.03 19.7 11.87A7.1 7.1 0 0 0 19.69 10.84",
-    "name": "concourse-ci"
-  },
-  {
-    "path": "M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2M15 10H11V11H14A1 1 0 0 1 15 12V15A1 1 0 0 1 14 16H13V17H11V16H9V14H13V13H10A1 1 0 0 1 9 12V9A1 1 0 0 1 10 8H11V7H13V8H15Z",
-    "name": "currency-usd-circle"
-  },
-  {
-    "path": "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,17V16H9V14H13V13H10A1,1 0 0,1 9,12V9A1,1 0 0,1 10,8H11V7H13V8H15V10H11V11H14A1,1 0 0,1 15,12V15A1,1 0 0,1 14,16H13V17H11Z",
-    "name": "currency-usd-circle-outline"
-  },
-  {
-    "path": "M20,6H4V4H20V6M20,18V20H4V18H7.33L6.26,14H5V8H19V14H17.74L16.67,18H20M7,12H17V10H7V12M9.4,18H14.6L15.67,14H8.33L9.4,18Z",
-    "name": "douban"
-  },
-  {
-    "path": "M10,13C10.55,13 11,13.18 11.41,13.57C11.8,13.96 12,14.44 12,15V22C12,22.17 11.91,22.27 11.72,22.27C11.66,22.27 11.58,22.22 11.5,22.13L7,17.67V13H10M12.5,1.88L17,6.33V11H14C13.45,11 13,10.82 12.59,10.43C12.2,10.04 12,9.56 12,9V2C12,1.83 12.09,1.73 12.28,1.73C12.34,1.73 12.42,1.78 12.5,1.88M22,12C22.17,12 22.27,12.09 22.27,12.28C22.27,12.34 22.22,12.42 22.13,12.5L17.67,17H13V14C13,13.45 13.18,13 13.57,12.59C13.96,12.2 14.44,12 15,12H22M6.33,7H11V10C11,10.55 10.82,11 10.43,11.41C10.04,11.8 9.56,12 9,12H2C1.83,12 1.73,11.91 1.73,11.72C1.73,11.66 1.78,11.58 1.88,11.5L6.33,7Z",
-    "name": "google-photos"
-  },
-  {
-    "path": "M12,3L22,12H19V20H5V12H2L12,3M9.22,8.93C8.75,9.4 8.5,10.03 8.5,10.75C8.5,12.43 10.54,13.07 11.76,13.46C13.26,13.93 13.47,14.21 13.5,14.25C13.5,15 12.15,15 12,15V15C11.37,15 11.03,14.88 10.86,14.78C10.67,14.67 10.5,14.5 10.5,14H8.5C8.5,15.43 9.24,16.16 9.85,16.5C10.18,16.7 10.57,16.84 11,16.92V18H13V16.91C14.53,16.61 15.5,15.62 15.5,14.25C15.5,12.67 13.88,12.03 12.36,11.55C10.8,11.06 10.53,10.77 10.5,10.75C10.5,10.5 10.57,10.41 10.64,10.34C10.85,10.13 11.36,10 12,10V10C12.68,10 13.5,10.13 13.5,10.75H15.5C15.5,9.34 14.56,8.37 13,8.09V7H11V8.08C10.26,8.21 9.65,8.5 9.22,8.93Z",
-    "name": "home-currency-usd"
-  },
-  {
-    "path": "M 2.73675,10.8077C 3.8293,-1.36109 22.5157,-1.36109 21.1971,13.5579L 8.61392,13.5579C 8.61392,17.8527 14.4157,19.209 19.5394,16.3081L 19.5394,20.5276C 13.2478,23.8806 4.9972,21.4318 4.9972,14.0853C 4.9972,8.58476 9.97019,6.8142 9.97019,6.8142C 9.97019,6.8142 8.57624,8.58489 8.53857,10.0542L 15.6967,10.0542C 15.6967,2.93376 5.90137,5.57095 2.73675,10.8077 Z",
-    "name": "microsoft-edge-legacy"
-  },
-  {
-    "path": "M22 12Q22 12.43 21.97 12.94 21.95 13.45 21.89 13.97 21.84 14.5 21.76 15 21.68 15.5 21.56 15.89 21.5 16.07 21.38 16.19 21.24 16.3 21.04 16.3 20.95 16.3 20.66 16.23 20.37 16.16 20.03 16.07L19.39 15.88Q19.09 15.79 18.96 15.76 18.75 16.54 18.41 17.38 18.08 18.21 17.65 19 17.22 19.8 16.7 20.5 16.18 21.25 15.61 21.82L15.43 21.95Q15.33 22 15.21 22 15 22 14.84 21.84L10.1 17.11H2.85Q2.5 17.11 2.25 16.86 2 16.61 2 16.26V7.74Q2 7.39 2.25 7.14 2.5 6.89 2.85 6.89H10.1L14.83 2.16Q15 2 15.21 2 15.33 2 15.42 2.05 15.5 2.09 15.59 2.18 15.85 2.44 16.08 2.71 16.3 3 16.5 3.28 18.23 5.55 18.96 8.28 19.14 8.23 19.44 8.14 19.74 8.05 20.06 7.96 20.37 7.87 20.65 7.8 20.92 7.74 21.04 7.74 21.24 7.74 21.38 7.85 21.5 7.97 21.56 8.15 21.68 8.56 21.77 9.05 21.85 9.55 21.91 10.06 21.96 10.57 22 11.08V12M9.82 9.37Q9.82 9.06 9.62 8.85 9.4 8.64 9.1 8.64 8.9 8.64 8.72 8.74 8.55 8.85 8.45 9.03L7.15 11.47L5.89 9.03Q5.77 8.8 5.57 8.72 5.37 8.64 5.13 8.64 4.82 8.64 4.61 8.85 4.4 9.06 4.4 9.36 4.4 9.57 4.5 9.73L6.25 12.87Q6.27 12.91 6.29 12.97 6.3 13.03 6.3 13.08V14.63Q6.3 15 6.56 15.19 6.81 15.36 7.15 15.36 7.39 15.36 7.54 15.27 7.68 15.18 7.76 15.03 7.84 14.88 7.87 14.69 7.9 14.5 7.9 14.28 7.9 14 7.88 13.76 7.86 13.5 7.86 13.28 7.86 13.14 7.87 13.03 7.88 12.93 7.93 12.85L9.73 9.73Q9.83 9.55 9.83 9.37M15.17 3.63L11.8 7Q12 7.12 12.1 7.31 12.22 7.5 12.22 7.74V10.07L17.72 8.61Q17.34 7.19 16.71 6 16.08 4.77 15.17 3.63M17.73 15.42L12.22 13.95V16.26Q12.22 16.5 12.1 16.69 12 16.88 11.8 17L15.18 20.37Q16.07 19.29 16.72 18.04 17.37 16.79 17.73 15.43V15.42M20.47 14.84Q20.6 14.14 20.66 13.43 20.72 12.73 20.72 12 20.72 11.29 20.66 10.59 20.6 9.89 20.47 9.19 18.4 9.74 16.35 10.29 14.3 10.83 12.22 11.39 12.21 11.55 12.21 11.7V12.32L12.22 12.63Q14.3 13.19 16.35 13.73 18.4 14.27 20.47 14.84Z",
-    "name": "microsoft-yammer"
-  },
-  {
-    "path": "M9.78,18.65L10.06,14.42L17.74,7.5C18.08,7.19 17.67,7.04 17.22,7.31L7.74,13.3L3.64,12C2.76,11.75 2.75,11.14 3.84,10.7L19.81,4.54C20.54,4.21 21.24,4.72 20.96,5.84L18.24,18.65C18.05,19.56 17.5,19.78 16.74,19.36L12.6,16.3L10.61,18.23C10.38,18.46 10.19,18.65 9.78,18.65Z",
-    "name": "telegram"
-  },
-  {
-    "path": "M14.41,4C14.41,4 14.94,4.39 14.97,4.71C14.97,4.81 14.73,4.85 14.68,4.93C14.62,5 14.7,5.15 14.65,5.21C14.59,5.26 14.5,5.26 14.41,5.41C14.33,5.56 12.07,10.09 11.73,10.63C11.59,11.03 11.47,12.46 11.37,12.66C11.26,12.85 6.34,19.84 6.16,20.05C5.67,20.63 4.31,20.3 3.28,19.56C2.3,18.86 1.74,17.7 2.11,17.16C2.27,16.93 7.15,9.92 7.29,9.75C7.44,9.58 8.75,9 9.07,8.71C9.47,8.22 12.96,4.54 13.07,4.42C13.18,4.3 13.15,4.2 13.18,4.13C13.22,4.06 13.38,4.08 13.43,4C13.5,3.93 13.39,3.71 13.5,3.68C13.59,3.64 13.96,3.67 14.41,4M10.85,4.44L11.74,5.37L10.26,6.94L9.46,5.37C9.38,5.22 9.28,5.22 9.22,5.17C9.17,5.11 9.24,4.97 9.19,4.89C9.13,4.81 8.9,4.83 8.9,4.73C8.9,4.62 9.05,4.28 9.5,3.96C9.5,3.96 10.06,3.6 10.37,3.68C10.47,3.71 10.43,3.95 10.5,4C10.54,4.1 10.7,4.08 10.73,4.15C10.77,4.21 10.73,4.32 10.85,4.44M21.92,17.15C22.29,17.81 21.53,19 20.5,19.7C19.5,20.39 18.21,20.54 17.83,20C17.66,19.78 12.67,12.82 12.56,12.62C12.45,12.43 12.32,11 12.18,10.59L12.15,10.55C12.45,10 13.07,8.77 13.73,7.47C14.3,8.06 14.75,8.56 14.88,8.72C15.21,9 16.53,9.58 16.68,9.75C16.82,9.92 21.78,16.91 21.92,17.15Z",
-    "name": "untappd"
-  },
-  {
-    "path": "M15.07 2H8.93C3.33 2 2 3.33 2 8.93V15.07C2 20.67 3.33 22 8.93 22H15.07C20.67 22 22 20.67 22 15.07V8.93C22 3.33 20.67 2 15.07 2M18.15 16.27H16.69C16.14 16.27 15.97 15.82 15 14.83C14.12 14 13.74 13.88 13.53 13.88C13.24 13.88 13.15 13.96 13.15 14.38V15.69C13.15 16.04 13.04 16.26 12.11 16.26C10.57 16.26 8.86 15.32 7.66 13.59C5.85 11.05 5.36 9.13 5.36 8.75C5.36 8.54 5.43 8.34 5.85 8.34H7.32C7.69 8.34 7.83 8.5 7.97 8.9C8.69 11 9.89 12.8 10.38 12.8C10.57 12.8 10.65 12.71 10.65 12.25V10.1C10.6 9.12 10.07 9.03 10.07 8.68C10.07 8.5 10.21 8.34 10.44 8.34H12.73C13.04 8.34 13.15 8.5 13.15 8.88V11.77C13.15 12.08 13.28 12.19 13.38 12.19C13.56 12.19 13.72 12.08 14.05 11.74C15.1 10.57 15.85 8.76 15.85 8.76C15.95 8.55 16.11 8.35 16.5 8.35H17.93C18.37 8.35 18.47 8.58 18.37 8.89C18.19 9.74 16.41 12.25 16.43 12.25C16.27 12.5 16.21 12.61 16.43 12.9C16.58 13.11 17.09 13.55 17.43 13.94C18.05 14.65 18.53 15.24 18.66 15.65C18.77 16.06 18.57 16.27 18.15 16.27Z",
-    "name": "vk"
-  },
-  {
-    "path": "M4.8,3C3.8,3 3,3.8 3,4.8V19.2C3,20.2 3.8,21 4.8,21H19.2C20.2,21 21,20.2 21,19.2V4.8C21,3.8 20.2,3 19.2,3M16.07,5H18.11C18.23,5 18.33,5.04 18.37,5.13C18.43,5.22 18.43,5.33 18.37,5.44L13.9,13.36L16.75,18.56C16.81,18.67 16.81,18.78 16.75,18.87C16.7,18.95 16.61,19 16.5,19H14.47C14.16,19 14,18.79 13.91,18.61L11.04,13.35C11.18,13.1 15.53,5.39 15.53,5.39C15.64,5.19 15.77,5 16.07,5M7.09,7.76H9.1C9.41,7.76 9.57,7.96 9.67,8.15L11.06,10.57C10.97,10.71 8.88,14.42 8.88,14.42C8.77,14.61 8.63,14.81 8.32,14.81H6.3C6.18,14.81 6.09,14.76 6.04,14.67C6,14.59 6,14.47 6.04,14.36L8.18,10.57L6.82,8.2C6.77,8.09 6.75,8 6.81,7.89C6.86,7.81 6.96,7.76 7.09,7.76Z",
-    "name": "xing"
-  },
-  {
-    "path": "M2,2H22V22H2V2M11.25,17.5H12.75V13.06L16,7H14.5L12,11.66L9.5,7H8L11.25,13.06V17.5Z",
-    "name": "y-combinator"
-  }
-]
+[]
diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts
index 89ec9ef2e4..122ce510fd 100644
--- a/cast/src/receiver/layout/hc-lovelace.ts
+++ b/cast/src/receiver/layout/hc-lovelace.ts
@@ -15,7 +15,7 @@ class HcLovelace extends LitElement {
 
   @property() public viewPath?: string | number;
 
-  public urlPath?: string | null;
+  @property() public urlPath: string | null = null;
 
   protected render(): TemplateResult {
     const index = this._viewIndex;
@@ -31,7 +31,7 @@ class HcLovelace extends LitElement {
       config: this.lovelaceConfig,
       rawConfig: this.lovelaceConfig,
       editMode: false,
-      urlPath: this.urlPath!,
+      urlPath: this.urlPath,
       enableFullEditMode: () => undefined,
       mode: "storage",
       locale: this.hass.locale,
diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts
index 207d46bb4a..935456a98f 100644
--- a/cast/src/receiver/layout/hc-main.ts
+++ b/cast/src/receiver/layout/hc-main.ts
@@ -13,7 +13,11 @@ import {
   ShowDemoMessage,
   ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
+import {
+  ReceiverErrorCode,
+  ReceiverErrorMessage,
+  ReceiverStatusMessage,
+} from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
@@ -40,9 +44,9 @@ export class HcMain extends HassElement {
 
   @state() private _error?: string;
 
-  private _unsubLovelace?: UnsubscribeFunc;
+  @state() private _urlPath?: string | null;
 
-  private _urlPath?: string | null;
+  private _unsubLovelace?: UnsubscribeFunc;
 
   public processIncomingMessage(msg: HassMessage) {
     if (msg.type === "connect") {
@@ -68,8 +72,10 @@ export class HcMain extends HassElement {
       !this._lovelaceConfig ||
       this._lovelacePath === null ||
       // Guard against part of HA not being loaded yet.
-      (this.hass &&
-        (!this.hass.states || !this.hass.config || !this.hass.services))
+      !this.hass ||
+      !this.hass.states ||
+      !this.hass.config ||
+      !this.hass.services
     ) {
       return html`
         <hc-launch-screen
@@ -119,7 +125,7 @@ export class HcMain extends HassElement {
 
     if (this.hass) {
       status.hassUrl = this.hass.auth.data.hassUrl;
-      status.lovelacePath = this._lovelacePath!;
+      status.lovelacePath = this._lovelacePath;
       status.urlPath = this._urlPath;
     }
 
@@ -132,6 +138,26 @@ export class HcMain extends HassElement {
     }
   }
 
+  private _sendError(
+    error_code: number,
+    error_message: string,
+    senderId?: string
+  ) {
+    const error: ReceiverErrorMessage = {
+      type: "receiver_error",
+      error_code,
+      error_message,
+    };
+
+    if (senderId) {
+      this.sendMessage(senderId, error);
+    } else {
+      for (const sender of castContext.getSenders()) {
+        this.sendMessage(sender.id, error);
+      }
+    }
+  }
+
   private _dialogClosed = () => {
     document.body.setAttribute("style", "overflow-y: auto !important");
   };
@@ -154,14 +180,18 @@ export class HcMain extends HassElement {
         }),
       });
     } catch (err: any) {
-      this._error = this._getErrorMessage(err);
+      const errorMessage = this._getErrorMessage(err);
+      this._error = errorMessage;
+      this._sendError(err, errorMessage);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
     } catch (err: any) {
-      this._error = this._getErrorMessage(err);
+      const errorMessage = this._getErrorMessage(err);
+      this._error = errorMessage;
+      this._sendError(err, errorMessage);
       return;
     }
     if (this.hass) {
@@ -173,24 +203,29 @@ export class HcMain extends HassElement {
   }
 
   private async _handleShowLovelaceMessage(msg: ShowLovelaceViewMessage) {
+    this._showDemo = false;
     // We should not get this command before we are connected.
     // Means a client got out of sync. Let's send status to them.
     if (!this.hass) {
       this._sendStatus(msg.senderId!);
       this._error = "Cannot show Lovelace because we're not connected.";
+      this._sendError(ReceiverErrorCode.NOT_CONNECTED, this._error);
       return;
     }
+    this._error = undefined;
     if (msg.urlPath === "lovelace") {
       msg.urlPath = null;
     }
+    this._lovelacePath = msg.viewPath;
     if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
       this._urlPath = msg.urlPath;
+      this._lovelaceConfig = undefined;
       if (this._unsubLovelace) {
         this._unsubLovelace();
       }
       const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass!.connection);
+        ? getLovelaceCollection(this.hass.connection, msg.urlPath)
+        : getLegacyLovelaceCollection(this.hass.connection);
       // We first do a single refresh because we need to check if there is LL
       // configuration.
       try {
@@ -199,8 +234,16 @@ export class HcMain extends HassElement {
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
       } catch (err: any) {
-        // eslint-disable-next-line
-        console.log("Error fetching Lovelace configuration", err, msg);
+        if (
+          atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
+          err.code !== "config_not_found"
+        ) {
+          // eslint-disable-next-line
+          console.log("Error fetching Lovelace configuration", err, msg);
+          this._error = `Error fetching Lovelace configuration: ${err.message}`;
+          this._sendError(ReceiverErrorCode.FETCH_CONFIG_FAILED, this._error);
+          return;
+        }
         // Generate a Lovelace config.
         this._unsubLovelace = () => undefined;
         await this._generateLovelaceConfig();
@@ -215,8 +258,6 @@ export class HcMain extends HassElement {
         loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
       }
     }
-    this._showDemo = false;
-    this._lovelacePath = msg.viewPath;
 
     this._sendStatus();
   }
@@ -237,7 +278,7 @@ export class HcMain extends HassElement {
   }
 
   private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
-    castContext.setApplicationState(lovelaceConfig.title!);
+    castContext.setApplicationState(lovelaceConfig.title || "");
     this._lovelaceConfig = lovelaceConfig;
   }
 
diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index 05cabfe6e6..67c8a0bca9 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -63,6 +63,16 @@
     />
     <title>Home Assistant Demo</title>
     <style>
+      html {
+        background-color: var(--primary-background-color, #fafafa);
+        color: var(--primary-text-color, #212121);
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: var(--primary-background-color, #111111);
+          color: var(--primary-text-color, #e1e1e1);
+        }
+      }
       body {
         font-family: Roboto, Noto, sans-serif;
         -moz-osx-font-smoothing: grayscale;
@@ -72,17 +82,34 @@
         margin: 0;
         padding: 0;
       }
-      #ha-init-skeleton::before {
-        display: block;
-        content: "";
-        height: 64px;
-        background-color: #03a9f4;
+      #ha-launch-screen {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      #ha-launch-screen svg {
+        width: 170px;
+        flex-shrink: 0;
+      }
+      #ha-launch-screen .ha-launch-screen-spacer {
+        flex: 1;
       }
     </style>
   </head>
   <body>
-    <div id="ha-init-skeleton"></div>
+    <div id="ha-launch-screen">
+      <div class="ha-launch-screen-spacer"></div>
+      <svg version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="#41bdf5" width="200" height="200" ry="16.4"/>
+        <path fill="#fff" d="m38.416 165.29v-53.456h-13.901a3.7332 3.7332 0 0 1-2.662-6.3504l74.804-76.084c1.8068-1.8376 4.7612-1.8628 6.5992-0.056l0.048 0.048 39.04 39.518v-7.3188a3.1112 3.1112 0 0 1 3.1112-3.1112h12.964a3.1112 3.1112 0 0 1 3.1116 3.1112v26.855l16.627 17.047a3.7332 3.7332 0 0 1-2.6728 6.34h-13.954v53.456a3.1112 3.1112 0 0 1-3.1112 3.1112h-116.89a3.1112 3.1112 0 0 1-3.1112-3.1112zm82.556-65.304a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0176 5.996 6.0176c0.9256 0 1.802-0.2108 2.5848-0.5868l8.6072 8.6384v8.3672l-10.792 10.831v-7.936a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v11.947l-9.9932 10.029v-58.912l8.2076-8.2368a5.9544 5.9544 0 0 0 2.5848 0.5864c3.3116 0 5.996-2.694 5.996-6.0176 0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 0.9292 0.2096 1.8088 0.584 2.5944l-7.3792 7.406-7.3796-7.406a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 3.3236 2.6844 6.0176 5.996 6.0176 0.9256 0 1.802-0.2108 2.5848-0.5864l8.2072 8.2368v42.064l-14.39-14.442v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-11.192-11.232v-11.145a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v12.807l12.363 12.407h-7.108c-0.8232-2.3372-3.044-4.0116-5.6548-4.0116-3.3112 0-5.996 2.694-5.996 6.0172 0 3.3236 2.6848 6.0176 5.996 6.0176 2.6108 0 4.832-1.6744 5.6548-4.012h11.105l17.216 17.278v30.03l-9.1932-9.2264v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.996 2.694-5.996 6.0172 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-13.376-13.423a6.0116 6.0116 0 0 0 0.5844-2.5944c0-3.3232-2.684-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0172 5.996 6.0172c0.9256 0 1.8024-0.2104 2.5848-0.5864l13.376 13.424h-7.108c-0.8232-2.3372-3.044-4.012-5.6548-4.012-3.3112 0-5.996 2.6944-5.996 6.0176s2.6848 6.0172 5.996 6.0172c2.6108 0 4.8316-1.6744 5.6548-4.0116h11.105l11.192 11.232h5.6528l11.592-11.633h10.705c0.8232 2.3368 3.044 4.0112 5.6548 4.0112 3.3112 0 5.996-2.694 5.996-6.0172s-2.6848-6.0172-5.996-6.0172c-2.6108 0-4.8316 1.6744-5.6548 4.0116h-12.361l-10.764 10.802v-13.18l12.82-12.866h20.698c0.8232 2.3372 3.044 4.0116 5.6544 4.0116 3.3116 0 5.996-2.694 5.996-6.0172 0-3.3236-2.6844-6.0176-5.996-6.0176-2.6104 0-4.8312 1.6744-5.6544 4.012h-16.702l11.963-12.006v-10.029l8.6068-8.6384a5.9544 5.9544 0 0 0 2.5852 0.5868c3.3112 0 5.996-2.6944 5.996-6.0176s-2.6848-6.0172-5.996-6.0172-5.996 2.694-5.996 6.0172c0 0.9292 0.21 1.8088 0.5844 2.5944l-5.7804 5.8016v-18.367a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v18.366l-5.7808-5.8016zm-51.78 57.58c-1.3244 0-2.3984-1.0776-2.3984-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm17.588-18.052c-1.3248 0-2.3988-1.0776-2.3988-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm-20.786-2.808c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm-1.9988-20.058c-1.3244 0-2.398-1.0776-2.398-2.4072 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm49.964 2.808c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm27.181 18.453c-1.324 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-10.392 19.255c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm11.192-57.364c-1.3244 0-2.3984-1.078-2.3984-2.4072s1.074-2.4068 2.3984-2.4068 2.3984 1.0776 2.3984 2.4068-1.074 2.4072-2.3984 2.4072zm-13.191-15.645c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-15.989-9.628c-1.3244 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-25.582 0c-1.324 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-20.785 9.2268c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072s2.3984 1.0776 2.3984 2.4072c0 1.3292-1.074 2.4068-2.3984 2.4068zm15.189 14.843c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm33.976 1.2036c-1.324 0-2.398-1.078-2.398-2.4072s1.0736-2.4068 2.398-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4072-2.3984 2.4072z"/>
+      </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') %>
 
diff --git a/demo/src/stubs/energy.ts b/demo/src/stubs/energy.ts
index 42e3fd5a20..a43eac5c78 100644
--- a/demo/src/stubs/energy.ts
+++ b/demo/src/stubs/energy.ts
@@ -82,6 +82,9 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
     ],
   }));
   hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
+  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
+    start: period === "month" ? 500 : period === "day" ? 20 : 5,
+  }));
   const todayString = format(startOfToday(), "yyyy-MM-dd");
   const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
   hass.mockWS(
diff --git a/demo/src/stubs/history.ts b/demo/src/stubs/history.ts
index adb456a584..911f2c248c 100644
--- a/demo/src/stubs/history.ts
+++ b/demo/src/stubs/history.ts
@@ -1,4 +1,10 @@
-import { addHours, differenceInHours, endOfDay } from "date-fns";
+import {
+  addDays,
+  addHours,
+  addMonths,
+  differenceInHours,
+  endOfDay,
+} from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -70,6 +76,7 @@ const generateMeanStatistics = (
   id: string,
   start: Date,
   end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
 ) => {
@@ -84,6 +91,7 @@ const generateMeanStatistics = (
     statistics.push({
       statistic_id: id,
       start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
       mean,
       min: mean - Math.random() * maxDiff,
       max: mean + Math.random() * maxDiff,
@@ -92,7 +100,12 @@ const generateMeanStatistics = (
       sum: null,
     });
     lastVal = mean;
-    currentDate = addHours(currentDate, 1);
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -101,6 +114,7 @@ const generateSumStatistics = (
   id: string,
   start: Date,
   end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
 ) => {
@@ -115,6 +129,7 @@ const generateSumStatistics = (
     statistics.push({
       statistic_id: id,
       start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
       mean: null,
       min: null,
       max: null,
@@ -122,7 +137,12 @@ const generateSumStatistics = (
       state: initValue + sum,
       sum,
     });
-    currentDate = addHours(currentDate, 1);
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -131,6 +151,7 @@ const generateCurvedStatistics = (
   id: string,
   start: Date,
   end: Date,
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,
   metered: boolean
@@ -149,6 +170,7 @@ const generateCurvedStatistics = (
     statistics.push({
       statistic_id: id,
       start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
       mean: null,
       min: null,
       max: null,
@@ -167,11 +189,38 @@ const generateCurvedStatistics = (
 
 const statisticsFunctions: Record<
   string,
-  (id: string, start: Date, end: Date) => StatisticValue[]
+  (
+    id: string,
+    start: Date,
+    end: Date,
+    period: "5minute" | "hour" | "day" | "month"
+  ) => StatisticValue[]
 > = {
-  "sensor.energy_consumption_tarif_1": (id: string, start: Date, end: Date) => {
+  "sensor.energy_consumption_tarif_1": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
     const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(id, start, morningEnd, 0, 0.7);
+    const morningLow = generateSumStatistics(
+      id,
+      start,
+      morningEnd,
+      period,
+      0,
+      0.7
+    );
     const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
     const morningFinalVal = morningLow.length
       ? morningLow[morningLow.length - 1].sum!
@@ -180,6 +229,7 @@ const statisticsFunctions: Record<
       id,
       morningEnd,
       eveningStart,
+      period,
       morningFinalVal,
       0
     );
@@ -187,39 +237,71 @@ const statisticsFunctions: Record<
       id,
       eveningStart,
       end,
+      period,
       morningFinalVal,
       0.7
     );
     return [...morningLow, ...empty, ...eveningLow];
   },
-  "sensor.energy_consumption_tarif_2": (id: string, start: Date, end: Date) => {
+  "sensor.energy_consumption_tarif_2": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
     const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
     const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
     const highTarif = generateSumStatistics(
       id,
       morningEnd,
       eveningStart,
+      period,
       0,
       0.3
     );
     const highTarifFinalVal = highTarif.length
       ? highTarif[highTarif.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, 0, 0);
+    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
     const evening = generateSumStatistics(
       id,
       eveningStart,
       end,
+      period,
       highTarifFinalVal,
       0
     );
     return [...morning, ...highTarif, ...evening];
   },
-  "sensor.energy_production_tarif_1": (id, start, end) =>
-    generateSumStatistics(id, start, end, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (id, start, end) =>
-    generateSumStatistics(id, start, end, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end) => {
+  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
+    generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (
+    id,
+    start,
+    end,
+    period = "hour"
+  ) => generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
     const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
     const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
@@ -227,6 +309,7 @@ const statisticsFunctions: Record<
       id,
       productionStart,
       productionEnd,
+      period,
       0,
       0.15,
       true
@@ -234,18 +317,43 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
     const evening = generateSumStatistics(
       id,
       productionEnd,
       dayEnd,
+      period,
       productionFinalVal,
       0
     );
-    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 1);
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      1
+    );
     return [...morning, ...production, ...evening, ...rest];
   },
-  "sensor.solar_production": (id, start, end) => {
+  "sensor.solar_production": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
     const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
     const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
     const dayEnd = new Date(endOfDay(productionEnd));
@@ -253,6 +361,7 @@ const statisticsFunctions: Record<
       id,
       productionStart,
       productionEnd,
+      period,
       0,
       0.3,
       true
@@ -260,19 +369,32 @@ const statisticsFunctions: Record<
     const productionFinalVal = production.length
       ? production[production.length - 1].sum!
       : 0;
-    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
     const evening = generateSumStatistics(
       id,
       productionEnd,
       dayEnd,
+      period,
       productionFinalVal,
       0
     );
-    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 2);
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      2
+    );
     return [...morning, ...production, ...evening, ...rest];
   },
-  "sensor.grid_fossil_fuel_percentage": (id, start, end) =>
-    generateMeanStatistics(id, start, end, 35, 1.3),
 };
 
 export const mockHistory = (mockHass: MockHomeAssistant) => {
@@ -347,7 +469,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
   mockHass.mockWS("history/list_statistic_ids", () => []);
   mockHass.mockWS(
     "history/statistics_during_period",
-    ({ statistic_ids, start_time, end_time }, hass) => {
+    ({ statistic_ids, start_time, end_time, period }, hass) => {
       const start = new Date(start_time);
       const end = end_time ? new Date(end_time) : new Date();
 
@@ -355,7 +477,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
 
       statistic_ids.forEach((id: string) => {
         if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end);
+          statistics[id] = statisticsFunctions[id](id, start, end, period);
         } else {
           const entityState = hass.states[id];
           const state = entityState ? Number(entityState.state) : 1;
@@ -365,6 +487,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
                   id,
                   start,
                   end,
+                  period,
                   state,
                   state * (state > 80 ? 0.01 : 0.05)
                 )
@@ -372,6 +495,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
                   id,
                   start,
                   end,
+                  period,
                   state,
                   state * (state > 80 ? 0.05 : 0.1)
                 );
diff --git a/gallery/public/images/office.jpg b/gallery/public/images/office.jpg
new file mode 100644
index 0000000000..128a77368e
Binary files /dev/null and b/gallery/public/images/office.jpg differ
diff --git a/gallery/src/components/demo-black-white-row.ts b/gallery/src/components/demo-black-white-row.ts
index a3b1233ffb..92a4beeffe 100644
--- a/gallery/src/components/demo-black-white-row.ts
+++ b/gallery/src/components/demo-black-white-row.ts
@@ -52,17 +52,13 @@ class DemoBlackWhiteRow extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: false,
-      },
-      "default",
-      { dark: true }
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
   }
 
   handleSubmit(ev) {
diff --git a/gallery/src/demos/demo-ha-alert.ts b/gallery/src/demos/demo-ha-alert.ts
index 677c772127..3a62c4a1d2 100644
--- a/gallery/src/demos/demo-ha-alert.ts
+++ b/gallery/src/demos/demo-ha-alert.ts
@@ -1,15 +1,19 @@
-import { html, css, LitElement, TemplateResult } from "lit";
+import "@material/mwc-button/mwc-button";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-logo-svg";
 
 const alerts: {
   title?: string;
   description: string | TemplateResult;
   type: "info" | "warning" | "error" | "success";
   dismissable?: boolean;
-  action?: string;
   rtl?: boolean;
+  iconSlot?: TemplateResult;
+  actionSlot?: TemplateResult;
 }[] = [
   {
     title: "Test info alert",
@@ -73,13 +77,35 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    action: "restart",
+    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    action: "save",
+    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
+  },
+  {
+    title: "Slotted icon",
+    description: "Alert with slotted icon",
+    type: "warning",
+    iconSlot: html`<span slot="icon" class="image">
+      <ha-logo-svg></ha-logo-svg>
+    </span>`,
+  },
+  {
+    title: "Slotted image",
+    description: "Alert with slotted image",
+    type: "warning",
+    iconSlot: html`<span slot="icon" class="image"
+      ><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
+    /></span>`,
+  },
+  {
+    title: "Slotted action",
+    description: "Alert with slotted action",
+    type: "info",
+    actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
   },
   {
     description: "Dismissable information (RTL)",
@@ -91,7 +117,7 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action (RTL)",
     type: "error",
-    action: "restart",
+    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
     rtl: true,
   },
   {
@@ -106,30 +132,56 @@ const alerts: {
 export class DemoHaAlert extends LitElement {
   protected render(): TemplateResult {
     return html`
-      <ha-card header="ha-alert demo">
-        <div class="card-content">
-          ${alerts.map(
-            (alert) => html`
-              <ha-alert
-                .title=${alert.title || ""}
-                .alertType=${alert.type}
-                .dismissable=${alert.dismissable || false}
-                .actionText=${alert.action || ""}
-                .rtl=${alert.rtl || false}
-              >
-                ${alert.description}
-              </ha-alert>
-            `
-          )}
-        </div>
-      </ha-card>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-alert ${mode} demo">
+              <div class="card-content">
+                ${alerts.map(
+                  (alert) => html`
+                    <ha-alert
+                      .title=${alert.title || ""}
+                      .alertType=${alert.type}
+                      .dismissable=${alert.dismissable || false}
+                      .rtl=${alert.rtl || false}
+                    >
+                      ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
+                    </ha-alert>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
     `;
   }
 
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
+  }
+
   static get styles() {
     return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
       ha-card {
-        max-width: 600px;
         margin: 24px auto;
       }
       ha-alert {
@@ -142,8 +194,17 @@ export class DemoHaAlert extends LitElement {
         align-items: center;
         justify-content: space-between;
       }
-      span {
-        margin-right: 16px;
+      .image {
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+      }
+      img {
+        max-height: 24px;
+        width: 24px;
+      }
+      mwc-button {
+        --mdc-theme-primary: var(--primary-text-color);
       }
     `;
   }
diff --git a/gallery/src/demos/demo-ha-chip.ts b/gallery/src/demos/demo-ha-chips.ts
similarity index 59%
rename from gallery/src/demos/demo-ha-chip.ts
rename to gallery/src/demos/demo-ha-chips.ts
index 8344d4eb64..d1dcc2ae7d 100644
--- a/gallery/src/demos/demo-ha-chip.ts
+++ b/gallery/src/demos/demo-ha-chips.ts
@@ -3,6 +3,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-chip";
+import "../../../src/components/ha-chip-set";
 import "../../../src/components/ha-svg-icon";
 
 const chips: {
@@ -22,8 +23,8 @@ const chips: {
   },
 ];
 
-@customElement("demo-ha-chip")
-export class DemoHaChip extends LitElement {
+@customElement("demo-ha-chips")
+export class DemoHaChips extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card header="ha-chip demo">
@@ -41,6 +42,23 @@ export class DemoHaChip extends LitElement {
           )}
         </div>
       </ha-card>
+      <ha-card header="ha-chip-set demo">
+        <div class="card-content">
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-chip .hasIcon=${chip.icon !== undefined}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : ""}
+                  ${chip.content}
+                </ha-chip>
+              `
+            )}
+          </ha-chip-set>
+        </div>
+      </ha-card>
     `;
   }
 
@@ -50,12 +68,19 @@ export class DemoHaChip extends LitElement {
         max-width: 600px;
         margin: 24px auto;
       }
+      ha-chip {
+        margin-bottom: 4px;
+      }
+      .card-content {
+        display: flex;
+        flex-direction: column;
+      }
     `;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-ha-chip": DemoHaChip;
+    "demo-ha-chips": DemoHaChips;
   }
 }
diff --git a/gallery/src/demos/demo-ha-faded.ts b/gallery/src/demos/demo-ha-faded.ts
new file mode 100644
index 0000000000..65dcb4315d
--- /dev/null
+++ b/gallery/src/demos/demo-ha-faded.ts
@@ -0,0 +1,88 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-faded";
+import "../../../src/components/ha-markdown";
+
+const LONG_TEXT = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
+
+Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
+
+Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
+
+In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
+
+Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
+`;
+
+const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+
+@customElement("demo-ha-faded")
+export class DemoHaFaded extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-faded demo">
+        <div class="card-content">
+          <h3>Long text directly as slotted content</h3>
+          <ha-faded>${LONG_TEXT}</ha-faded>
+          <h3>Long text with slotted element</h3>
+          <ha-faded><span>${LONG_TEXT}</span></ha-faded>
+          <h3>No text</h3>
+          <ha-faded><span></span></ha-faded>
+          <h3>Smal text</h3>
+          <ha-faded><span>${SMALL_TEXT}</span></ha-faded>
+          <h3>Long text in markdown</h3>
+          <ha-faded>
+            <ha-markdown .content=${LONG_TEXT}> </ha-markdown>
+          </ha-faded>
+          <h3>Missing 1px from hiding</h3>
+          <ha-faded faded-height="87">
+            <span>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+              laoreet velit ut elit volutpat, eget ultrices odio lacinia. In
+              imperdiet malesuada est, nec sagittis metus ultricies quis. Sed
+              nisl ex, convallis porttitor ante quis, hendrerit tristique justo.
+              Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque
+              sed consequat risus. Suspendisse facilisis ligula a odio
+              consectetur condimentum. Curabitur vehicula elit nec augue mollis,
+              et volutpat massa dictum. Nam pellentesque auctor rutrum.
+              Suspendisse elit est, sodales vel diam nec, porttitor faucibus
+              massa. Ut pretium ac orci eu pharetra.
+            </span>
+          </ha-faded>
+          <h3>1px over hiding point</h3>
+          <ha-faded faded-height="85">
+            <span>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+              laoreet velit ut elit volutpat, eget ultrices odio lacinia. In
+              imperdiet malesuada est, nec sagittis metus ultricies quis. Sed
+              nisl ex, convallis porttitor ante quis, hendrerit tristique justo.
+              Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque
+              sed consequat risus. Suspendisse facilisis ligula a odio
+              consectetur condimentum. Curabitur vehicula elit nec augue mollis,
+              et volutpat massa dictum. Nam pellentesque auctor rutrum.
+              Suspendisse elit est, sodales vel diam nec, porttitor faucibus
+              massa. Ut pretium ac orci eu pharetra.
+            </span>
+          </ha-faded>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-faded": DemoHaFaded;
+  }
+}
diff --git a/gallery/src/demos/demo-hui-area-card.ts b/gallery/src/demos/demo-hui-area-card.ts
new file mode 100644
index 0000000000..bbb6dedfd2
--- /dev/null
+++ b/gallery/src/demos/demo-hui-area-card.ts
@@ -0,0 +1,156 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
+import { getEntity } from "../../../src/fake_data/entity";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+
+const ENTITIES = [
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
+  getEntity("switch", "bed_ac", "on", {
+    friendly_name: "Ecobee",
+  }),
+  getEntity("sensor", "bed_temp", "72", {
+    friendly_name: "Bedroom Temp",
+    device_class: "temperature",
+    unit_of_measurement: "°F",
+  }),
+  getEntity("light", "living_room_light", "off", {
+    friendly_name: "Living Room Light",
+  }),
+  getEntity("fan", "living_room", "on", {
+    friendly_name: "Living Room Fan",
+  }),
+  getEntity("sensor", "office_humidity", "73", {
+    friendly_name: "Office Humidity",
+    device_class: "humidity",
+    unit_of_measurement: "%",
+  }),
+  getEntity("light", "office", "on", {
+    friendly_name: "Office Light",
+  }),
+  getEntity("fan", "kitchen", "on", {
+    friendly_name: "Second Office Fan",
+  }),
+  getEntity("binary_sensor", "kitchen_door", "on", {
+    friendly_name: "Office Door",
+    device_class: "door",
+  }),
+];
+
+// TODO: Update image here
+const CONFIGS = [
+  {
+    heading: "Bedroom",
+    config: `
+- type: area
+  area: bedroom
+  image: "/images/bed.png"
+    `,
+  },
+  {
+    heading: "Living Room",
+    config: `
+- type: area
+  area: living_room
+  image: "/images/living_room.png"
+    `,
+  },
+  {
+    heading: "Office",
+    config: `
+- type: area
+  area: office
+  image: "/images/office.jpg"
+    `,
+  },
+  {
+    heading: "Kitchen",
+    config: `
+- type: area
+  area: kitchen
+  image: "/images/kitchen.png"
+    `,
+  },
+];
+
+@customElement("demo-hui-area-card")
+class DemoArea extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(ENTITIES);
+    hass.mockWS("config/area_registry/list", () => [
+      {
+        name: "Bedroom",
+        area_id: "bedroom",
+      },
+      {
+        name: "Living Room",
+        area_id: "living_room",
+      },
+      {
+        name: "Office",
+        area_id: "office",
+      },
+      {
+        name: "Second Office",
+        area_id: "kitchen",
+      },
+    ]);
+    hass.mockWS("config/device_registry/list", () => []);
+    hass.mockWS("config/entity_registry/list", () => [
+      {
+        area_id: "bedroom",
+        entity_id: "light.bed_light",
+      },
+      {
+        area_id: "bedroom",
+        entity_id: "switch.bed_ac",
+      },
+      {
+        area_id: "bedroom",
+        entity_id: "sensor.bed_temp",
+      },
+      {
+        area_id: "living_room",
+        entity_id: "light.living_room_light",
+      },
+      {
+        area_id: "living_room",
+        entity_id: "fan.living_room",
+      },
+      {
+        area_id: "office",
+        entity_id: "light.office",
+      },
+      {
+        area_id: "office",
+        entity_id: "sensor.office_humidity",
+      },
+      {
+        area_id: "kitchen",
+        entity_id: "fan.kitchen",
+      },
+      {
+        area_id: "kitchen",
+        entity_id: "binary_sensor.kitchen_door",
+      },
+    ]);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-area-card": DemoArea;
+  }
+}
diff --git a/gallery/src/demos/demo-more-info-cover.ts b/gallery/src/demos/demo-more-info-cover.ts
new file mode 100644
index 0000000000..f715d5fc9c
--- /dev/null
+++ b/gallery/src/demos/demo-more-info-cover.ts
@@ -0,0 +1,164 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../src/components/ha-card";
+import {
+  SUPPORT_OPEN,
+  SUPPORT_STOP,
+  SUPPORT_CLOSE,
+  SUPPORT_SET_POSITION,
+  SUPPORT_OPEN_TILT,
+  SUPPORT_STOP_TILT,
+  SUPPORT_CLOSE_TILT,
+  SUPPORT_SET_TILT_POSITION,
+} from "../../../src/data/cover";
+import "../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../src/fake_data/provide_hass";
+import "../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("cover", "position_buttons", "on", {
+    friendly_name: "Position Buttons",
+    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
+  }),
+  getEntity("cover", "position_slider_half", "on", {
+    friendly_name: "Position Half-Open",
+    supported_features:
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+    current_position: 50,
+  }),
+  getEntity("cover", "position_slider_open", "on", {
+    friendly_name: "Position Open",
+    supported_features:
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+    current_position: 100,
+  }),
+  getEntity("cover", "position_slider_closed", "on", {
+    friendly_name: "Position Closed",
+    supported_features:
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+    current_position: 0,
+  }),
+  getEntity("cover", "tilt_buttons", "on", {
+    friendly_name: "Tilt Buttons",
+    supported_features:
+      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
+  }),
+  getEntity("cover", "tilt_slider_half", "on", {
+    friendly_name: "Tilt Half-Open",
+    supported_features:
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 50,
+  }),
+  getEntity("cover", "tilt_slider_open", "on", {
+    friendly_name: "Tilt Open",
+    supported_features:
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 100,
+  }),
+  getEntity("cover", "tilt_slider_closed", "on", {
+    friendly_name: "Tilt Closed",
+    supported_features:
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 0,
+  }),
+  getEntity("cover", "position_slider_tilt_slider", "on", {
+    friendly_name: "Both Sliders",
+    supported_features:
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_position: 30,
+    current_tilt_position: 70,
+  }),
+  getEntity("cover", "position_tilt_slider", "on", {
+    friendly_name: "Position & Tilt Slider",
+    supported_features:
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 70,
+  }),
+  getEntity("cover", "position_slider_tilt", "on", {
+    friendly_name: "Position Slider & Tilt",
+    supported_features:
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT,
+    current_position: 30,
+  }),
+  getEntity("cover", "position_slider_only_tilt_slider", "on", {
+    friendly_name: "Position Slider Only & Tilt Buttons",
+    supported_features:
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT,
+    current_position: 30,
+  }),
+  getEntity("cover", "position_slider_only_tilt", "on", {
+    friendly_name: "Position Slider Only & Tilt",
+    supported_features:
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_position: 30,
+    current_tilt_position: 70,
+  }),
+];
+
+@customElement("demo-more-info-cover")
+class DemoMoreInfoCover extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-cover": DemoMoreInfoCover;
+  }
+}
diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js
index 7f53dd717a..671cbe9077 100644
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -176,11 +176,6 @@ class HaGallery extends PolymerElement {
     this.addEventListener("alert-dismissed-clicked", () =>
       this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
     );
-
-    this.addEventListener("alert-action-clicked", () =>
-      this.$.notifications.showDialog({ message: "Alert action clicked" })
-    );
-
     this.addEventListener("hass-more-info", (ev) => {
       if (ev.detail.entityId) {
         this.$.notifications.showDialog({
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index 4cc55898a1..16548cd40c 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -25,11 +25,10 @@ import {
 } from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
-import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
@@ -76,16 +75,12 @@ class HassioAddonStore extends LitElement {
     }
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
-        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${supervisorTabs}
-        main-page
-        supervisor
+        .header=${this.supervisor.localize("panel.store")}
       >
-        <span slot="header"> ${this.supervisor.localize("panel.store")} </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -133,7 +128,7 @@ class HassioAddonStore extends LitElement {
               </div>
             `
           : ""}
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts
index 5de3ac1c5a..4455982ecc 100644
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -108,7 +108,6 @@ class HassioAddonDashboard extends LitElement {
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
-        .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
         .route=${route}
         .tabs=${addonTabs}
         supervisor
diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
index 6b31e546b7..eee42577a9 100644
--- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
@@ -4,7 +4,7 @@ import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
-import { HomeAssistant } from "../../../../src/types";
+import { HomeAssistant, Route } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
 import "./hassio-addon-info";
 
@@ -12,6 +12,8 @@ import "./hassio-addon-info";
 class HassioAddonInfoDashboard extends LitElement {
   @property({ type: Boolean }) public narrow!: boolean;
 
+  @property({ attribute: false }) public route!: Route;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
@@ -27,6 +29,7 @@ class HassioAddonInfoDashboard extends LitElement {
       <div class="content">
         <hassio-addon-info
           .narrow=${this.narrow}
+          .route=${this.route}
           .hass=${this.hass}
           .supervisor=${this.supervisor}
           .addon=${this.addon}
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 48cd99b8ec..e887991ec0 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import {
-  mdiArrowUpBoldCircle,
   mdiCheckCircle,
   mdiChip,
   mdiCircle,
@@ -49,7 +48,6 @@ import {
   startHassioAddon,
   stopHassioAddon,
   uninstallHassioAddon,
-  updateHassioAddon,
   validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import {
@@ -64,14 +62,14 @@ import {
   showConfirmationDialog,
 } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
-import { HomeAssistant } from "../../../../src/types";
+import { HomeAssistant, Route } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
-import { showDialogSupervisorUpdate } from "../../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../../resources/hassio-style";
-import { addonArchIsSupported } from "../../util/addon";
+import "../../update-available/update-available-card";
+import { addonArchIsSupported, extractChangelog } from "../../util/addon";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -92,6 +90,8 @@ const RATING_ICON = {
 class HassioAddonInfo extends LitElement {
   @property({ type: Boolean }) public narrow!: boolean;
 
+  @property({ attribute: false }) public route!: Route;
+
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -128,69 +128,12 @@ class HassioAddonInfo extends LitElement {
     return html`
       ${this.addon.update_available
         ? html`
-            <ha-card
-              .header="${this.supervisor.localize(
-                "common.update_available",
-                "count",
-                1
-              )}🎉"
-            >
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${this.supervisor.localize(
-                    "addon.dashboard.new_update_available",
-                    "name",
-                    this.addon.name,
-                    "version",
-                    this.addon.version_latest
-                  )}
-                  .description=${this.supervisor.localize(
-                    "common.running_version",
-                    "version",
-                    this.addon.version
-                  )}
-                  icon=${mdiArrowUpBoldCircle}
-                  iconClass="update"
-                ></hassio-card-content>
-                ${!this.addon.available && addonStoreInfo
-                  ? !addonArchIsSupported(
-                      this.supervisor.info.supported_arch,
-                      this.addon.arch
-                    )
-                    ? html`
-                        <ha-alert alert-type="warning">
-                          ${this.supervisor.localize(
-                            "addon.dashboard.not_available_arch"
-                          )}
-                        </ha-alert>
-                      `
-                    : html`
-                        <ha-alert alert-type="warning">
-                          ${this.supervisor.localize(
-                            "addon.dashboard.not_available_arch",
-                            "core_version_installed",
-                            this.supervisor.core.version,
-                            "core_version_needed",
-                            addonStoreInfo.homeassistant
-                          )}
-                        </ha-alert>
-                      `
-                  : ""}
-              </div>
-              <div class="card-actions">
-                ${this.addon.changelog
-                  ? html`
-                      <mwc-button @click=${this._openChangelog}>
-                        ${this.supervisor.localize("addon.dashboard.changelog")}
-                      </mwc-button>
-                    `
-                  : html`<span></span>`}
-                <mwc-button @click=${this._updateClicked}>
-                  ${this.supervisor.localize("common.update")}
-                </mwc-button>
-              </div>
-            </ha-card>
+            <update-available-card
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+              .supervisor=${this.supervisor}
+              .addonSlug=${this.addon.slug}
+            ></update-available-card>
           `
         : ""}
       ${!this.addon.protected
@@ -200,14 +143,18 @@ class HassioAddonInfo extends LitElement {
               .title=${this.supervisor.localize(
                 "addon.dashboard.protection_mode.title"
               )}
-              .actionText=${this.supervisor.localize(
-                "addon.dashboard.protection_mode.enable"
-              )}
-              @alert-action-clicked=${this._protectionToggled}
             >
               ${this.supervisor.localize(
                 "addon.dashboard.protection_mode.content"
               )}
+              <mwc-button
+                slot="action"
+                .label=${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
+                )}
+                @click=${this._protectionToggled}
+              >
+              </mwc-button>
             </ha-alert>
           `
         : ""}
@@ -899,22 +846,14 @@ class HassioAddonInfo extends LitElement {
 
   private async _openChangelog(): Promise<void> {
     try {
-      let content = await fetchHassioAddonChangelog(this.hass, this.addon.slug);
-      if (
-        content.includes(`# ${this.addon.version}`) &&
-        content.includes(`# ${this.addon.version_latest}`)
-      ) {
-        const newcontent = content.split(`# ${this.addon.version}`)[0];
-        if (newcontent.includes(`# ${this.addon.version_latest}`)) {
-          // Only change the content if the new version still exist
-          // if the changelog does not have the newests version on top
-          // this will not be true, and we don't modify the content
-          content = newcontent;
-        }
-      }
+      const content = await fetchHassioAddonChangelog(
+        this.hass,
+        this.addon.slug
+      );
+
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("addon.dashboard.changelog"),
-        content,
+        content: extractChangelog(this.addon, content),
       });
     } catch (err: any) {
       showAlertDialog(this, {
@@ -989,33 +928,6 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
-  private async _updateClicked(): Promise<void> {
-    showDialogSupervisorUpdate(this, {
-      supervisor: this.supervisor,
-      name: this.addon.name,
-      version: this.addon.version_latest,
-      backupParams: {
-        name: `addon_${this.addon.slug}_${this.addon.version}`,
-        addons: [this.addon.slug],
-        homeassistant: false,
-      },
-      updateHandler: async () => this._updateAddon(),
-    });
-  }
-
-  private async _updateAddon(): Promise<void> {
-    await updateHassioAddon(this.hass, this.addon.slug);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "addon",
-    });
-    const eventdata = {
-      success: true,
-      response: undefined,
-      path: "update",
-    };
-    fireEvent(this, "hass-api-called", eventdata);
-  }
-
   private async _startClicked(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
     button.progress = true;
@@ -1244,6 +1156,17 @@ class HassioAddonInfo extends LitElement {
           align-self: end;
         }
 
+        ha-alert mwc-button {
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+        a {
+          text-decoration: none;
+        }
+
+        update-available-card {
+          padding-bottom: 16px;
+        }
+
         @media (max-width: 720px) {
           ha-chip {
             line-height: 36px;
diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts
index e75dc96d2a..2901549ae8 100644
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -158,7 +158,7 @@ export class HassioBackups extends LitElement {
     }
     return html`
       <hass-tabs-subpage-data-table
-        .tabs=${supervisorTabs}
+        .tabs=${supervisorTabs(this.hass)}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .searchLabel=${this.supervisor.localize("search")}
@@ -173,7 +173,8 @@ export class HassioBackups extends LitElement {
         clickable
         selectable
         hasFab
-        main-page
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
         supervisor
       >
         <ha-button-menu
diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts
index 358bb3788c..06741a9aa3 100644
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/hassio/src/dashboard/hassio-addons.ts
@@ -20,7 +20,9 @@ class HassioAddons extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="content">
-        <h1>${this.supervisor.localize("dashboard.addons")}</h1>
+        ${!atLeastVersion(this.hass.config.version, 2021, 12)
+          ? html` <h1>${this.supervisor.localize("dashboard.addons")}</h1> `
+          : ""}
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index 6b98c759ce..917ff856a1 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -1,5 +1,8 @@
+import { mdiStorePlus } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
+import "../../../src/components/ha-fab";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -25,23 +28,41 @@ class HassioDashboard extends LitElement {
         .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${supervisorTabs}
-        main-page
+        .tabs=${supervisorTabs(this.hass)}
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
         supervisor
+        hasFab
       >
         <span slot="header">
-          ${this.supervisor.localize("panel.dashboard")}
+          ${this.supervisor.localize(
+            atLeastVersion(this.hass.config.version, 2021, 12)
+              ? "panel.addons"
+              : "panel.dashboard"
+          )}
         </span>
         <div class="content">
-          <hassio-update
-            .hass=${this.hass}
-            .supervisor=${this.supervisor}
-          ></hassio-update>
+          ${!atLeastVersion(this.hass.config.version, 2021, 12)
+            ? html`
+                <hassio-update
+                  .hass=${this.hass}
+                  .supervisor=${this.supervisor}
+                ></hassio-update>
+              `
+            : ""}
           <hassio-addons
             .hass=${this.hass}
             .supervisor=${this.supervisor}
           ></hassio-addons>
         </div>
+
+        <a href="/hassio/store" slot="fab">
+          <ha-fab .label=${this.supervisor.localize("panel.store")} extended>
+            <ha-svg-icon
+              slot="icon"
+              .path=${mdiStorePlus}
+            ></ha-svg-icon> </ha-fab
+        ></a>
       </hass-tabs-subpage>
     `;
   }
diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts
index d46c505eb2..2f8321344d 100644
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -3,34 +3,18 @@ import { mdiHomeAssistant } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
-import {
-  extractApiErrorMessage,
-  HassioResponse,
-  ignoreSupervisorError,
-} from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-import { updateCore } from "../../../src/data/supervisor/core";
-import {
-  Supervisor,
-  supervisorApiWsRequest,
-} from "../../../src/data/supervisor/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 const computeVersion = (key: string, version: string): string =>
@@ -73,26 +57,18 @@ export class HassioUpdate extends LitElement {
           ${this._renderUpdateCard(
             "Home Assistant Core",
             "core",
-            this.supervisor.core,
-            "hassio/homeassistant/update",
-            `https://${
-              this.supervisor.core.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`
+            this.supervisor.core
           )}
           ${this._renderUpdateCard(
             "Supervisor",
             "supervisor",
-            this.supervisor.supervisor,
-            "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
+            this.supervisor.supervisor
           )}
           ${this.supervisor.host.features.includes("haos")
             ? this._renderUpdateCard(
                 "Operating System",
                 "os",
-                this.supervisor.os,
-                "hassio/os/update",
-                `https://github.com//home-assistant/hassos/releases/tag/${this.supervisor.os.version_latest}`
+                this.supervisor.os
               )
             : ""}
         </div>
@@ -103,9 +79,7 @@ export class HassioUpdate extends LitElement {
   private _renderUpdateCard(
     name: string,
     key: string,
-    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
-    apiPath: string,
-    releaseNotesUrl: string
+    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo
   ): TemplateResult {
     if (!object.update_available) {
       return html``;
@@ -136,96 +110,15 @@ export class HassioUpdate extends LitElement {
           </ha-settings-row>
         </div>
         <div class="card-actions">
-          <a href=${releaseNotesUrl} target="_blank" rel="noreferrer">
-            <mwc-button>
-              ${this.supervisor.localize("common.release_notes")}
+          <a href="/hassio/update-available/${key}">
+            <mwc-button .label=${this.supervisor.localize("common.show")}>
             </mwc-button>
           </a>
-          <ha-progress-button
-            .apiPath=${apiPath}
-            .name=${name}
-            .key=${key}
-            .version=${object.version_latest}
-            @click=${this._confirmUpdate}
-          >
-            ${this.supervisor.localize("common.update")}
-          </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  private async _confirmUpdate(ev): Promise<void> {
-    const item = ev.currentTarget;
-    if (item.key === "core") {
-      showDialogSupervisorUpdate(this, {
-        supervisor: this.supervisor,
-        name: "Home Assistant Core",
-        version: this.supervisor.core.version_latest,
-        backupParams: {
-          name: `core_${this.supervisor.core.version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        },
-        updateHandler: async () => this._updateCore(),
-      });
-      return;
-    }
-    item.progress = true;
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        item.name
-      ),
-      text: this.supervisor.localize(
-        "confirm.update.text",
-        "name",
-        item.name,
-        "version",
-        computeVersion(item.key, item.version)
-      ),
-      confirmText: this.supervisor.localize("common.update"),
-      dismissText: this.supervisor.localize("common.cancel"),
-    });
-
-    if (!confirmed) {
-      item.progress = false;
-      return;
-    }
-    try {
-      if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-        await supervisorApiWsRequest(this.hass.connection, {
-          method: "post",
-          endpoint: item.apiPath.replace("hassio", ""),
-          timeout: null,
-        });
-      } else {
-        await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
-      }
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: item.key,
-      });
-    } catch (err: any) {
-      // Only show an error if the status code was not expected (user behind proxy)
-      // or no status at all(connection terminated)
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        showAlertDialog(this, {
-          title: this.supervisor.localize("common.error.update_failed"),
-          text: extractApiErrorMessage(err),
-        });
-      }
-    }
-    item.progress = false;
-  }
-
-  private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "core",
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
diff --git a/hassio/src/dialogs/update/dialog-supervisor-update.ts b/hassio/src/dialogs/update/dialog-supervisor-update.ts
deleted file mode 100644
index cc4f80bb09..0000000000
--- a/hassio/src/dialogs/update/dialog-supervisor-update.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-switch";
-import {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
-import { createHassioPartialBackup } from "../../../../src/data/hassio/backup";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
-
-@customElement("dialog-supervisor-update")
-class DialogSupervisorUpdate extends LitElement {
-  public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  @state() private _createBackup = true;
-
-  @state() private _action: "backup" | "update" | null = null;
-
-  @state() private _error?: string;
-
-  @state()
-  private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
-
-  public async showDialog(
-    params: SupervisorDialogSupervisorUpdateParams
-  ): Promise<void> {
-    this._opened = true;
-    this._dialogParams = params;
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._action = null;
-    this._createBackup = true;
-    this._error = undefined;
-    this._dialogParams = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
-    );
-  }
-
-  protected render(): TemplateResult {
-    if (!this._dialogParams) {
-      return html``;
-    }
-    return html`
-      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
-        ${this._action === null
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  ${this._dialogParams.supervisor.localize(
-                    "confirm.update.title",
-                    "name",
-                    this._dialogParams.name
-                  )}
-                </h2>
-              </slot>
-              <div>
-                ${this._dialogParams.supervisor.localize(
-                  "confirm.update.text",
-                  "name",
-                  this._dialogParams.name,
-                  "version",
-                  this._dialogParams.version
-                )}
-              </div>
-
-              <ha-settings-row>
-                <span slot="heading">
-                  ${this._dialogParams.supervisor.localize(
-                    "dialog.update.backup"
-                  )}
-                </span>
-                <span slot="description">
-                  ${this._dialogParams.supervisor.localize(
-                    "dialog.update.create_backup",
-                    "name",
-                    this._dialogParams.name
-                  )}
-                </span>
-                <ha-switch
-                  .checked=${this._createBackup}
-                  haptic
-                  @click=${this._toggleBackup}
-                >
-                </ha-switch>
-              </ha-settings-row>
-              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                ${this._dialogParams.supervisor.localize("common.cancel")}
-              </mwc-button>
-              <mwc-button
-                .disabled=${this._error !== undefined}
-                @click=${this._update}
-                slot="primaryAction"
-              >
-                ${this._dialogParams.supervisor.localize("common.update")}
-              </mwc-button>`
-          : html`<ha-circular-progress alt="Updating" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this._action === "update"
-                  ? this._dialogParams.supervisor.localize(
-                      "dialog.update.updating",
-                      "name",
-                      this._dialogParams.name,
-                      "version",
-                      this._dialogParams.version
-                    )
-                  : this._dialogParams.supervisor.localize(
-                      "dialog.update.creating_backup",
-                      "name",
-                      this._dialogParams.name
-                    )}
-              </p>`}
-        ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : ""}
-      </ha-dialog>
-    `;
-  }
-
-  private _toggleBackup() {
-    this._createBackup = !this._createBackup;
-  }
-
-  private async _update() {
-    if (this._createBackup) {
-      this._action = "backup";
-      try {
-        await createHassioPartialBackup(
-          this.hass,
-          this._dialogParams!.backupParams
-        );
-      } catch (err: any) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
-    try {
-      await this._dialogParams!.updateHandler!();
-    } catch (err: any) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-      }
-      return;
-    }
-
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .form {
-          color: var(--primary-text-color);
-        }
-
-        ha-settings-row {
-          margin-top: 32px;
-          padding: 0;
-        }
-
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-supervisor-update": DialogSupervisorUpdate;
-  }
-}
diff --git a/hassio/src/dialogs/update/show-dialog-update.ts b/hassio/src/dialogs/update/show-dialog-update.ts
deleted file mode 100644
index 6c3d15cc05..0000000000
--- a/hassio/src/dialogs/update/show-dialog-update.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface SupervisorDialogSupervisorUpdateParams {
-  supervisor: Supervisor;
-  name: string;
-  version: string;
-  backupParams: any;
-  updateHandler: () => Promise<void>;
-}
-
-export const showDialogSupervisorUpdate = (
-  element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorUpdateParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-supervisor-update",
-    dialogImport: () => import("./dialog-supervisor-update"),
-    dialogParams,
-  });
-};
diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts
index 8ded32bbf0..b64e505d37 100644
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -10,7 +10,7 @@ import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import "../../src/layouts/hass-loading-screen";
-import { HomeAssistant, Route } from "../../src/types";
+import { HomeAssistant } from "../../src/types";
 import "./hassio-router";
 import { SupervisorBaseElement } from "./supervisor-base-element";
 
@@ -24,8 +24,6 @@ export class HassioMain extends SupervisorBaseElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @property({ attribute: false }) public route?: Route;
-
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
diff --git a/hassio/src/hassio-my-redirect.ts b/hassio/src/hassio-my-redirect.ts
index e2bc3d85ac..777672870a 100644
--- a/hassio/src/hassio-my-redirect.ts
+++ b/hassio/src/hassio-my-redirect.ts
@@ -34,6 +34,9 @@ const REDIRECTS: Redirects = {
   supervisor_store: {
     redirect: "/hassio/store",
   },
+  supervisor_addons: {
+    redirect: "/hassio/dashboard",
+  },
   supervisor_addon: {
     redirect: "/hassio/addon",
     params: {
diff --git a/hassio/src/hassio-router.ts b/hassio/src/hassio-router.ts
index 3768d26e92..b40c075524 100644
--- a/hassio/src/hassio-router.ts
+++ b/hassio/src/hassio-router.ts
@@ -35,6 +35,10 @@ class HassioRouter extends HassRouterPage {
       backups: "dashboard",
       store: "dashboard",
       system: "dashboard",
+      "update-available": {
+        tag: "update-available-dashboard",
+        load: () => import("./update-available/update-available-dashboard"),
+      },
       addon: {
         tag: "hassio-addon-dashboard",
         load: () => import("./addon-view/hassio-addon-dashboard"),
diff --git a/hassio/src/hassio-tabs.ts b/hassio/src/hassio-tabs.ts
index 5131b56f0d..c4c9ae0f0c 100644
--- a/hassio/src/hassio-tabs.ts
+++ b/hassio/src/hassio-tabs.ts
@@ -1,16 +1,22 @@
-import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
+import {
+  mdiBackupRestore,
+  mdiCogs,
+  mdiPuzzle,
+  mdiViewDashboard,
+} from "@mdi/js";
+import { atLeastVersion } from "../../src/common/config/version";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant } from "../../src/types";
 
-export const supervisorTabs: PageNavigation[] = [
+export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] => [
   {
-    translationKey: "panel.dashboard",
+    translationKey: atLeastVersion(hass.config.version, 2021, 12)
+      ? "panel.addons"
+      : "panel.dashboard",
     path: `/hassio/dashboard`,
-    iconPath: mdiViewDashboard,
-  },
-  {
-    translationKey: "panel.store",
-    path: `/hassio/store`,
-    iconPath: mdiStore,
+    iconPath: atLeastVersion(hass.config.version, 2021, 12)
+      ? mdiPuzzle
+      : mdiViewDashboard,
   },
   {
     translationKey: "panel.backups",
diff --git a/hassio/src/supervisor-base-element.ts b/hassio/src/supervisor-base-element.ts
index 7bd0fbb8ca..a5d3fbb7f6 100644
--- a/hassio/src/supervisor-base-element.ts
+++ b/hassio/src/supervisor-base-element.ts
@@ -25,7 +25,7 @@ import {
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
-import { HomeAssistant } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";
 
 declare global {
@@ -38,6 +38,8 @@ declare global {
 export class SupervisorBaseElement extends urlSyncMixin(
   ProvideHassLitMixin(LitElement)
 ) {
+  @property({ attribute: false }) public route?: Route;
+
   @property({ attribute: false }) public supervisor: Partial<Supervisor> = {
     localize: () => "",
   };
@@ -108,7 +110,9 @@ export class SupervisorBaseElement extends urlSyncMixin(
       this._language = this.hass.language;
     }
     this._initializeLocalize();
-    this._initSupervisor();
+    if (this.route?.prefix === "/hassio") {
+      this._initSupervisor();
+    }
   }
 
   private async _initializeLocalize() {
diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts
index 351b4b53e5..dc3589246e 100644
--- a/hassio/src/system/hassio-core-info.ts
+++ b/hassio/src/system/hassio-core-info.ts
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../src/common/dom/fire_event";
+import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
@@ -12,7 +12,7 @@ import {
   fetchHassioStats,
   HassioStats,
 } from "../../../src/data/hassio/common";
-import { restartCore, updateCore } from "../../../src/data/supervisor/core";
+import { restartCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -22,7 +22,6 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
 import "../components/supervisor-metric";
-import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-core-info")
@@ -67,14 +66,15 @@ class HassioCoreInfo extends LitElement {
               <span slot="description">
                 core-${this.supervisor.core.version_latest}
               </span>
-              ${this.supervisor.core.update_available
+              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
+              this.supervisor.core.update_available
                 ? html`
-                    <ha-progress-button
-                      .title=${this.supervisor.localize("common.update")}
-                      @click=${this._coreUpdate}
-                    >
-                      ${this.supervisor.localize("common.update")}
-                    </ha-progress-button>
+                    <a href="/hassio/update-available/core">
+                      <mwc-button
+                        .label=${this.supervisor.localize("common.show")}
+                      >
+                      </mwc-button>
+                    </a>
                   `
                 : ""}
             </ha-settings-row>
@@ -160,27 +160,6 @@ class HassioCoreInfo extends LitElement {
     }
   }
 
-  private async _coreUpdate(): Promise<void> {
-    showDialogSupervisorUpdate(this, {
-      supervisor: this.supervisor,
-      name: "Home Assistant Core",
-      version: this.supervisor.core.version_latest,
-      backupParams: {
-        name: `core_${this.supervisor.core.version}`,
-        folders: ["homeassistant"],
-        homeassistant: true,
-      },
-      updateHandler: async () => this._updateCore(),
-    });
-  }
-
-  private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "core",
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -239,6 +218,9 @@ class HassioCoreInfo extends LitElement {
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }
+        a {
+          text-decoration: none;
+        }
       `,
     ];
   }
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index 64b7f90e8f..bb108fb516 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -21,7 +21,6 @@ import {
   configSyncOS,
   rebootHost,
   shutdownHost,
-  updateOS,
 } from "../../../src/data/hassio/host";
 import {
   fetchNetworkInfo,
@@ -106,11 +105,15 @@ class HassioHostInfo extends LitElement {
               <span slot="description">
                 ${this.supervisor.host.operating_system}
               </span>
-              ${this.supervisor.os.update_available
+              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
+              this.supervisor.os.update_available
                 ? html`
-                    <ha-progress-button @click=${this._osUpdate}>
-                      ${this.supervisor.localize("commmon.update")}
-                    </ha-progress-button>
+                    <a href="/hassio/update-available/os">
+                      <mwc-button
+                        .label=${this.supervisor.localize("common.show")}
+                      >
+                      </mwc-button>
+                    </a>
                   `
                 : ""}
             </ha-settings-row>
@@ -333,50 +336,6 @@ class HassioHostInfo extends LitElement {
     button.progress = false;
   }
 
-  private async _osUpdate(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        "Home Assistant Operating System"
-      ),
-      text: this.supervisor.localize(
-        "confirm.update.text",
-        "name",
-        "Home Assistant Operating System",
-        "version",
-        this.supervisor.os.version_latest
-      ),
-      confirmText: this.supervisor.localize("common.update"),
-      dismissText: "no",
-    });
-
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    try {
-      await updateOS(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
-    } catch (err: any) {
-      if (this.hass.connection.connected) {
-        showAlertDialog(this, {
-          title: this.supervisor.localize(
-            "common.failed_to_update_name",
-            "name",
-            "Home Assistant Operating System"
-          ),
-          text: extractApiErrorMessage(err),
-        });
-      }
-    }
-    button.progress = false;
-  }
-
   private async _changeNetworkClicked(): Promise<void> {
     showNetworkDialog(this, {
       supervisor: this.supervisor,
@@ -494,6 +453,9 @@ class HassioHostInfo extends LitElement {
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }
+        a {
+          text-decoration: none;
+        }
       `,
     ];
   }
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index 2a2ef93de9..ed2e0de246 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -17,7 +17,6 @@ import {
   restartSupervisor,
   setSupervisorOption,
   SupervisorOptions,
-  updateSupervisor,
 } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
@@ -77,16 +76,15 @@ class HassioSupervisorInfo extends LitElement {
               <span slot="description">
                 supervisor-${this.supervisor.supervisor.version_latest}
               </span>
-              ${this.supervisor.supervisor.update_available
+              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
+              this.supervisor.supervisor.update_available
                 ? html`
-                    <ha-progress-button
-                      .title=${this.supervisor.localize(
-                        "system.supervisor.update_supervisor"
-                      )}
-                      @click=${this._supervisorUpdate}
-                    >
-                      ${this.supervisor.localize("common.update")}
-                    </ha-progress-button>
+                    <a href="/hassio/update-available/supervisor">
+                      <mwc-button
+                        .label=${this.supervisor.localize("common.show")}
+                      >
+                      </mwc-button>
+                    </a>
                   `
                 : ""}
             </ha-settings-row>
@@ -153,24 +151,28 @@ class HassioSupervisorInfo extends LitElement {
                     ></ha-switch>
                   </ha-settings-row>`
                 : ""
-              : html`<ha-alert
-                  alert-type="warning"
-                  .actionText=${this.supervisor.localize("common.learn_more")}
-                  @alert-action-clicked=${this._unsupportedDialog}
-                >
+              : html`<ha-alert alert-type="warning">
                   ${this.supervisor.localize(
                     "system.supervisor.unsupported_title"
                   )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.supervisor.localize("common.learn_more")}
+                    @click=${this._unsupportedDialog}
+                  >
+                  </mwc-button>
                 </ha-alert>`}
             ${!this.supervisor.supervisor.healthy
-              ? html`<ha-alert
-                  alert-type="error"
-                  .actionText=${this.supervisor.localize("common.learn_more")}
-                  @alert-action-clicked=${this._unhealthyDialog}
-                >
+              ? html`<ha-alert alert-type="error">
                   ${this.supervisor.localize(
                     "system.supervisor.unhealthy_title"
                   )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.supervisor.localize("common.learn_more")}
+                    @click=${this._unhealthyDialog}
+                  >
+                  </mwc-button>
                 </ha-alert>`
               : ""}
           </div>
@@ -337,51 +339,6 @@ class HassioSupervisorInfo extends LitElement {
     }
   }
 
-  private async _supervisorUpdate(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        "Supervisor"
-      ),
-      text: this.supervisor.localize(
-        "confirm.update.text",
-        "name",
-        "Supervisor",
-        "version",
-        this.supervisor.supervisor.version_latest
-      ),
-      confirmText: this.supervisor.localize("common.update"),
-      dismissText: this.supervisor.localize("common.cancel"),
-    });
-
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    try {
-      await updateSupervisor(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "supervisor",
-      });
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.supervisor.localize(
-          "common.failed_to_update_name",
-          "name",
-          "Supervisor"
-        ),
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      button.progress = false;
-    }
-  }
-
   private async _diagnosticsInformationDialog(): Promise<void> {
     await showAlertDialog(this, {
       title: this.supervisor.localize(
@@ -513,6 +470,12 @@ class HassioSupervisorInfo extends LitElement {
           white-space: normal;
           color: var(--secondary-text-color);
         }
+        ha-alert mwc-button {
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+        a {
+          text-decoration: none;
+        }
       `,
     ];
   }
diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts
index 22704fcc4a..bbf3d72758 100644
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -28,8 +29,9 @@ class HassioSystem extends LitElement {
         .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${supervisorTabs}
-        main-page
+        .tabs=${supervisorTabs(this.hass)}
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
         supervisor
       >
         <span slot="header"> ${this.supervisor.localize("panel.system")} </span>
diff --git a/hassio/src/update-available/update-available-card.ts b/hassio/src/update-available/update-available-card.ts
new file mode 100644
index 0000000000..e45d10588e
--- /dev/null
+++ b/hassio/src/update-available/update-available-card.ts
@@ -0,0 +1,402 @@
+import "@material/mwc-list/mwc-list-item";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/common/search/search-input";
+import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-checkbox";
+import "../../../src/components/ha-faded";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-markdown";
+import "../../../src/components/ha-settings-row";
+import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-switch";
+import {
+  fetchHassioAddonChangelog,
+  fetchHassioAddonInfo,
+  HassioAddonDetails,
+  updateHassioAddon,
+} from "../../../src/data/hassio/addon";
+import {
+  createHassioPartialBackup,
+  HassioPartialBackupCreateParams,
+} from "../../../src/data/hassio/backup";
+import {
+  extractApiErrorMessage,
+  ignoreSupervisorError,
+} from "../../../src/data/hassio/common";
+import { updateOS } from "../../../src/data/hassio/host";
+import { updateSupervisor } from "../../../src/data/hassio/supervisor";
+import { updateCore } from "../../../src/data/supervisor/core";
+import { StoreAddon } from "../../../src/data/supervisor/store";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import "../../../src/layouts/hass-loading-screen";
+import "../../../src/layouts/hass-subpage";
+import "../../../src/layouts/hass-tabs-subpage";
+import { SUPERVISOR_UPDATE_NAMES } from "../../../src/panels/config/dashboard/ha-config-updates";
+import { HomeAssistant, Route } from "../../../src/types";
+import { documentationUrl } from "../../../src/util/documentation-url";
+import { addonArchIsSupported, extractChangelog } from "../util/addon";
+
+declare global {
+  interface HASSDomEvents {
+    "update-complete": undefined;
+  }
+}
+
+type updateType = "os" | "supervisor" | "core" | "addon";
+
+const changelogUrl = (
+  hass: HomeAssistant,
+  entry: updateType,
+  version: string
+): string | undefined => {
+  if (entry === "addon") {
+    return undefined;
+  }
+  if (entry === "core") {
+    return version?.includes("dev")
+      ? "https://github.com/home-assistant/core/commits/dev"
+      : documentationUrl(hass, "/latest-release-notes/");
+  }
+  if (entry === "os") {
+    return version?.includes("dev")
+      ? "https://github.com/home-assistant/operating-system/commits/dev"
+      : `https://github.com/home-assistant/operating-system/releases/tag/${version}`;
+  }
+  if (entry === "supervisor") {
+    return version?.includes("dev")
+      ? "https://github.com/home-assistant/supervisor/commits/main"
+      : `https://github.com/home-assistant/supervisor/releases/tag/${version}`;
+  }
+  return undefined;
+};
+
+@customElement("update-available-card")
+class UpdateAvailableCard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public addonSlug?: string;
+
+  @state() private _updateType?: updateType;
+
+  @state() private _changelogContent?: string;
+
+  @state() private _addonInfo?: HassioAddonDetails;
+
+  @state() private _action: "backup" | "update" | null = null;
+
+  @state() private _error?: string;
+
+  private _addonStoreInfo = memoizeOne(
+    (slug: string, storeAddons: StoreAddon[]) =>
+      storeAddons.find((addon) => addon.slug === slug)
+  );
+
+  protected render(): TemplateResult {
+    if (
+      !this._updateType ||
+      (this._updateType === "addon" && !this._addonInfo)
+    ) {
+      return html``;
+    }
+
+    const changelog = changelogUrl(this.hass, this._updateType, this._version);
+
+    return html`
+      <ha-card
+        .header=${this.supervisor.localize("update_available.update_name", {
+          name: this._name,
+        })}
+      >
+        <div class="card-content">
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
+          ${this._action === null
+            ? html`
+                ${this._changelogContent
+                  ? html`
+                      <ha-faded>
+                        <ha-markdown .content=${this._changelogContent}>
+                        </ha-markdown>
+                      </ha-faded>
+                    `
+                  : ""}
+                <div class="versions">
+                  <p>
+                    ${this.supervisor.localize("update_available.description", {
+                      name: this._name,
+                      version: this._version,
+                      newest_version: this._version_latest,
+                    })}
+                  </p>
+                </div>
+                ${["core", "addon"].includes(this._updateType)
+                  ? html`
+                      <ha-formfield
+                        .label=${this.supervisor.localize(
+                          "update_available.create_backup"
+                        )}
+                      >
+                        <ha-checkbox checked></ha-checkbox>
+                      </ha-formfield>
+                    `
+                  : ""}
+              `
+            : html`<ha-circular-progress alt="Updating" size="large" active>
+                </ha-circular-progress>
+                <p class="progress-text">
+                  ${this._action === "update"
+                    ? this.supervisor.localize("update_available.updating", {
+                        name: this._name,
+                        version: this._version_latest,
+                      })
+                    : this.supervisor.localize(
+                        "update_available.creating_backup",
+                        { name: this._name }
+                      )}
+                </p>`}
+        </div>
+        ${this._action === null
+          ? html`
+              <div class="card-actions">
+                ${changelog
+                  ? html`<a .href=${changelog} target="_blank" rel="noreferrer">
+                      <mwc-button
+                        .label=${this.supervisor.localize(
+                          "update_available.open_release_notes"
+                        )}
+                      >
+                      </mwc-button>
+                    </a>`
+                  : ""}
+                <span></span>
+                <ha-progress-button
+                  .disabled=${!this._version ||
+                  (this._shouldCreateBackup &&
+                    this.supervisor.info?.state !== "running")}
+                  @click=${this._update}
+                  raised
+                >
+                  ${this.supervisor.localize("common.update")}
+                </ha-progress-button>
+              </div>
+            `
+          : ""}
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    const pathPart = this.route?.path.substring(1, this.route.path.length);
+    const updateType = ["core", "os", "supervisor"].includes(pathPart)
+      ? pathPart
+      : "addon";
+    this._updateType = updateType as updateType;
+
+    if (updateType === "addon") {
+      if (!this.addonSlug) {
+        this.addonSlug = pathPart;
+      }
+      this._loadAddonData();
+    }
+  }
+
+  get _shouldCreateBackup(): boolean {
+    const checkbox = this.shadowRoot?.querySelector("ha-checkbox");
+    if (checkbox) {
+      return checkbox.checked;
+    }
+    return true;
+  }
+
+  get _version(): string {
+    return this._updateType
+      ? this._updateType === "addon"
+        ? this._addonInfo!.version
+        : this.supervisor[this._updateType]?.version || ""
+      : "";
+  }
+
+  get _version_latest(): string {
+    return this._updateType
+      ? this._updateType === "addon"
+        ? this._addonInfo!.version_latest
+        : this.supervisor[this._updateType]?.version_latest || ""
+      : "";
+  }
+
+  get _name(): string {
+    return this._updateType
+      ? this._updateType === "addon"
+        ? this._addonInfo!.name
+        : SUPERVISOR_UPDATE_NAMES[this._updateType]
+      : "";
+  }
+
+  private async _loadAddonData() {
+    try {
+      this._addonInfo = await fetchHassioAddonInfo(this.hass, this.addonSlug!);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+      return;
+    }
+    const addonStoreInfo =
+      !this._addonInfo.detached && !this._addonInfo.available
+        ? this._addonStoreInfo(
+            this._addonInfo.slug,
+            this.supervisor.store.addons
+          )
+        : undefined;
+
+    if (this._addonInfo.changelog) {
+      try {
+        const content = await fetchHassioAddonChangelog(
+          this.hass,
+          this.addonSlug!
+        );
+        this._changelogContent = extractChangelog(this._addonInfo, content);
+      } catch (err) {
+        this._error = extractApiErrorMessage(err);
+        return;
+      }
+    }
+
+    if (!this._addonInfo.available && addonStoreInfo) {
+      if (
+        !addonArchIsSupported(
+          this.supervisor.info.supported_arch,
+          this._addonInfo.arch
+        )
+      ) {
+        this._error = this.supervisor.localize(
+          "addon.dashboard.not_available_arch"
+        );
+      } else {
+        this._error = this.supervisor.localize(
+          "addon.dashboard.not_available_version",
+          {
+            core_version_installed: this.supervisor.core.version,
+            core_version_needed: addonStoreInfo.homeassistant,
+          }
+        );
+      }
+    }
+  }
+
+  private async _update() {
+    this._error = undefined;
+    if (this._shouldCreateBackup) {
+      let backupArgs: HassioPartialBackupCreateParams;
+      if (this._updateType === "addon") {
+        backupArgs = {
+          name: `addon_${this.addonSlug}_${this._version}`,
+          addons: [this.addonSlug!],
+          homeassistant: false,
+        };
+      } else {
+        backupArgs = {
+          name: `${this._updateType}_${this._version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        };
+      }
+      this._action = "backup";
+      try {
+        await createHassioPartialBackup(this.hass, backupArgs);
+      } catch (err: any) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+
+    this._action = "update";
+    try {
+      if (this._updateType === "addon") {
+        await updateHassioAddon(this.hass, this.addonSlug!);
+      } else if (this._updateType === "core") {
+        await updateCore(this.hass);
+      } else if (this._updateType === "os") {
+        await updateOS(this.hass);
+      } else if (this._updateType === "supervisor") {
+        await updateSupervisor(this.hass);
+      }
+    } catch (err: any) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+    fireEvent(this, "update-complete");
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: block;
+      }
+      ha-card {
+        margin: auto;
+      }
+      a {
+        text-decoration: none;
+        color: var(--primary-text-color);
+      }
+      ha-settings-row {
+        padding: 0;
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+        border-top: none;
+        padding: 0 8px 8px;
+      }
+
+      ha-circular-progress {
+        display: block;
+        margin: 32px;
+        text-align: center;
+      }
+
+      .progress-text {
+        text-align: center;
+      }
+
+      ha-markdown {
+        padding-bottom: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "update-available-card": UpdateAvailableCard;
+  }
+}
diff --git a/hassio/src/update-available/update-available-dashboard.ts b/hassio/src/update-available/update-available-dashboard.ts
new file mode 100644
index 0000000000..481808a126
--- /dev/null
+++ b/hassio/src/update-available/update-available-dashboard.ts
@@ -0,0 +1,59 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import "../../../src/layouts/hass-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
+import "./update-available-card";
+
+@customElement("update-available-dashboard")
+class UpdateAvailableDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+      >
+        <update-available-card
+          .hass=${this.hass}
+          .supervisor=${this.supervisor}
+          .route=${this.route}
+          .narrow=${this.narrow}
+          @update-complete=${this._updateComplete}
+        ></update-available-card>
+      </hass-subpage>
+    `;
+  }
+
+  private _updateComplete() {
+    history.back();
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      hass-subpage {
+        --app-header-background-color: var(--primary-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+      }
+      update-available-card {
+        margin: auto;
+        margin-top: 16px;
+        max-width: 600px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "update-available-dashboard": UpdateAvailableDashboard;
+  }
+}
diff --git a/hassio/src/util/addon.ts b/hassio/src/util/addon.ts
index 49fed477cc..ec15a50c49 100644
--- a/hassio/src/util/addon.ts
+++ b/hassio/src/util/addon.ts
@@ -1,7 +1,30 @@
 import memoizeOne from "memoize-one";
+import { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import { SupervisorArch } from "../../../src/data/supervisor/supervisor";
 
 export const addonArchIsSupported = memoizeOne(
   (supported_archs: SupervisorArch[], addon_archs: SupervisorArch[]) =>
     addon_archs.some((arch) => supported_archs.includes(arch))
 );
+
+export const extractChangelog = (
+  addon: HassioAddonDetails,
+  content: string
+): string => {
+  if (content.startsWith("# Changelog")) {
+    content = content.substr(12, content.length);
+  }
+  if (
+    content.includes(`# ${addon.version}`) &&
+    content.includes(`# ${addon.version_latest}`)
+  ) {
+    const newcontent = content.split(`# ${addon.version}`)[0];
+    if (newcontent.includes(`# ${addon.version_latest}`)) {
+      // Only change the content if the new version still exist
+      // if the changelog does not have the newests version on top
+      // this will not be true, and we don't modify the content
+      content = newcontent;
+    }
+  }
+  return content;
+};
diff --git a/package.json b/package.json
index de5f22d346..5b05a0ddcd 100644
--- a/package.json
+++ b/package.json
@@ -67,8 +67,8 @@
     "@material/mwc-tab-bar": "0.25.3",
     "@material/mwc-textfield": "0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
-    "@mdi/js": "6.4.95",
-    "@mdi/svg": "6.4.95",
+    "@mdi/js": "6.5.95",
+    "@mdi/svg": "6.5.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
@@ -102,7 +102,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.0.11",
-    "home-assistant-js-websocket": "^5.11.1",
+    "home-assistant-js-websocket": "^5.11.3",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
@@ -115,6 +115,7 @@
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
     "punycode": "^2.1.1",
+    "qr-scanner": "^1.3.0",
     "qrcode": "^1.4.4",
     "regenerator-runtime": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
diff --git a/setup.py b/setup.py
index c4511c73a4..3f9a1d8f35 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20211109.0",
+    version="20211203.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index acd98952c9..8f91bfe8bf 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -101,17 +101,13 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
 
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(
-        document.documentElement,
-        {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
+      applyThemesOnElement(document.documentElement, {
+        default_theme: "default",
+        default_dark_theme: null,
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      });
     }
 
     if (!this.redirectUri) {
diff --git a/src/cast/const.ts b/src/cast/const.ts
index fe578e8ad1..3d98f7de17 100644
--- a/src/cast/const.ts
+++ b/src/cast/const.ts
@@ -3,5 +3,5 @@ import { CAST_DEV_APP_ID } from "./dev_const";
 // Guard dev mode with `__dev__` so it can only ever be enabled in dev mode.
 export const CAST_DEV = __DEV__ && true;
 
-export const CAST_APP_ID = CAST_DEV ? CAST_DEV_APP_ID : "B12CE3CA";
+export const CAST_APP_ID = CAST_DEV ? CAST_DEV_APP_ID : "A078F6B0";
 export const CAST_NS = "urn:x-cast:com.nabucasa.hast";
diff --git a/src/cast/sender_messages.ts b/src/cast/sender_messages.ts
index e9a7f074a0..1a6eda58f0 100644
--- a/src/cast/sender_messages.ts
+++ b/src/cast/sender_messages.ts
@@ -11,4 +11,20 @@ export interface ReceiverStatusMessage extends BaseCastMessage {
   urlPath?: string | null;
 }
 
+export interface ReceiverErrorMessage extends BaseCastMessage {
+  type: "receiver_error";
+  error_code: ReceiverErrorCode;
+  error_message: string;
+}
+
+export const enum ReceiverErrorCode {
+  CONNECTION_FAILED = 1,
+  AUTHENTICATION_FAILED = 2,
+  CONNECTION_LOST = 3,
+  HASS_URL_MISSING = 4,
+  NO_HTTPS = 5,
+  NOT_CONNECTED = 21,
+  FETCH_CONFIG_FAILED = 22,
+}
+
 export type SenderMessage = ReceiverStatusMessage;
diff --git a/src/common/color/colors.ts b/src/common/color/colors.ts
index fd9de4d3df..3f276c8ac9 100644
--- a/src/common/color/colors.ts
+++ b/src/common/color/colors.ts
@@ -61,3 +61,14 @@ export const COLORS = [
 export function getColorByIndex(index: number) {
   return COLORS[index % COLORS.length];
 }
+
+export function getGraphColorByIndex(
+  index: number,
+  style: CSSStyleDeclaration
+) {
+  // The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
+  return (
+    style.getPropertyValue(`--graph-color-${index + 1}`) ||
+    getColorByIndex(index)
+  );
+}
diff --git a/src/common/config/can_show_page.ts b/src/common/config/can_show_page.ts
index 62628f4d79..6cf9999340 100644
--- a/src/common/config/can_show_page.ts
+++ b/src/common/config/can_show_page.ts
@@ -7,7 +7,13 @@ export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   !hideAdvancedPage(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  !page.component || isComponentLoaded(hass, page.component);
+  page.component
+    ? isComponentLoaded(hass, page.component)
+    : page.components
+    ? page.components.some((integration) =>
+        isComponentLoaded(hass, integration)
+      )
+    : true;
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;
diff --git a/src/common/const.ts b/src/common/const.ts
index d75aa3f3dc..0aedba0806 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -119,6 +119,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   current: mdiCurrentAc,
   date: mdiCalendar,
   energy: mdiLightningBolt,
+  frequency: mdiSineWave,
   gas: mdiGasCylinder,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
@@ -187,8 +188,9 @@ export const DOMAINS_WITH_MORE_INFO = [
   "weather",
 ];
 
-/** Domains that show no more info dialog. */
-export const DOMAINS_HIDE_MORE_INFO = [
+/** Domains that do not show the default more info dialog content (e.g. the attribute section)
+ *  and do not have a separate more info (so not in DOMAINS_WITH_MORE_INFO). */
+export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
   "input_number",
   "input_select",
   "input_text",
@@ -197,6 +199,30 @@ export const DOMAINS_HIDE_MORE_INFO = [
   "select",
 ];
 
+/** Domains that render an input element instead of a text value when rendered in a row.
+ *  Those rows should then not show a cursor pointer when hovered (which would normally
+ *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
+ *  should not act as a click target to open the more info dialog (the row name and state icon
+ *  still do of course) as the click might instead e.g. activate the input field that this row shows.
+ */
+export const DOMAINS_INPUT_ROW = [
+  "cover",
+  "fan",
+  "humidifier",
+  "input_boolean",
+  "input_datetime",
+  "input_number",
+  "input_select",
+  "input_text",
+  "light",
+  "lock",
+  "media_player",
+  "number",
+  "scene",
+  "script",
+  "select",
+];
+
 /** Domains that should have the history hidden in the more info dialog. */
 export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];
 
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
index fca6e2262a..dd5aebc423 100644
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -23,9 +23,9 @@ let PROCESSED_THEMES: Record<string, ProcessedTheme> = {};
  * Apply a theme to an element by setting the CSS variables on it.
  *
  * element: Element to apply theme on.
- * themes: HASS theme information.
- * selectedTheme: Selected theme.
- * themeSettings: Settings such as selected dark mode and colors.
+ * themes: HASS theme information (e.g. active dark mode and globally active theme name).
+ * selectedTheme: Selected theme (used to override the globally active theme for this element).
+ * themeSettings: Additional settings such as selected colors.
  */
 export const applyThemesOnElement = (
   element,
@@ -33,31 +33,33 @@ export const applyThemesOnElement = (
   selectedTheme?: string,
   themeSettings?: Partial<HomeAssistant["selectedTheme"]>
 ) => {
-  let cacheKey = selectedTheme;
-  let themeRules: Partial<ThemeVars> = {};
+  // If there is no explicitly desired theme provided, we automatically
+  // use the active one from `themes`.
+  const themeToApply = selectedTheme || themes.theme;
 
   // If there is no explicitly desired dark mode provided, we automatically
-  // use the active one from hass.themes.
-  if (!themeSettings || themeSettings?.dark === undefined) {
-    themeSettings = {
-      ...themeSettings,
-      dark: themes.darkMode,
-    };
-  }
+  // use the active one from `themes`.
+  const darkMode =
+    themeSettings && themeSettings?.dark !== undefined
+      ? themeSettings?.dark
+      : themes.darkMode;
 
-  if (themeSettings.dark) {
+  let cacheKey = themeToApply;
+  let themeRules: Partial<ThemeVars> = {};
+
+  if (darkMode) {
     cacheKey = `${cacheKey}__dark`;
     themeRules = { ...darkStyles };
   }
 
-  if (selectedTheme === "default") {
+  if (themeToApply === "default") {
     // Determine the primary and accent colors from the current settings.
     // Fallbacks are implicitly the HA default blue and orange or the
     // derived "darkStyles" values, depending on the light vs dark mode.
-    const primaryColor = themeSettings.primaryColor;
-    const accentColor = themeSettings.accentColor;
+    const primaryColor = themeSettings?.primaryColor;
+    const accentColor = themeSettings?.accentColor;
 
-    if (themeSettings.dark && primaryColor) {
+    if (darkMode && primaryColor) {
       themeRules["app-header-background-color"] = hexBlend(
         primaryColor,
         "#121212",
@@ -98,17 +100,17 @@ export const applyThemesOnElement = (
   // Custom theme logic (not relevant for default theme, since it would override
   // the derived calculations from above)
   if (
-    selectedTheme &&
-    selectedTheme !== "default" &&
-    themes.themes[selectedTheme]
+    themeToApply &&
+    themeToApply !== "default" &&
+    themes.themes[themeToApply]
   ) {
     // Apply theme vars that are relevant for all modes (but extract the "modes" section first)
-    const { modes, ...baseThemeRules } = themes.themes[selectedTheme];
+    const { modes, ...baseThemeRules } = themes.themes[themeToApply];
     themeRules = { ...themeRules, ...baseThemeRules };
 
     // Apply theme vars for the specific mode if available
     if (modes) {
-      if (themeSettings?.dark) {
+      if (darkMode) {
         themeRules = { ...themeRules, ...modes.dark };
       } else {
         themeRules = { ...themeRules, ...modes.light };
diff --git a/src/common/entity/domain_icon.ts b/src/common/entity/domain_icon.ts
index 2a0c3031b3..bab18abb71 100644
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -1,30 +1,33 @@
 import {
   mdiAccount,
   mdiAccountArrowRight,
-  mdiAirHumidifierOff,
   mdiAirHumidifier,
-  mdiFlash,
+  mdiAirHumidifierOff,
   mdiBluetooth,
   mdiBluetoothConnect,
+  mdiCalendar,
+  mdiCast,
+  mdiCastConnected,
+  mdiClock,
+  mdiEmoticonDead,
+  mdiFlash,
+  mdiGestureTapButton,
   mdiLanConnect,
   mdiLanDisconnect,
-  mdiLockOpen,
+  mdiLock,
   mdiLockAlert,
   mdiLockClock,
-  mdiLock,
-  mdiCastConnected,
-  mdiCast,
-  mdiEmoticonDead,
+  mdiLockOpen,
+  mdiPackageUp,
   mdiPowerPlug,
   mdiPowerPlugOff,
+  mdiRestart,
   mdiSleep,
   mdiTimerSand,
   mdiToggleSwitch,
   mdiToggleSwitchOff,
-  mdiZWave,
-  mdiClock,
-  mdiCalendar,
   mdiWeatherNight,
+  mdiZWave,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 /**
@@ -52,6 +55,16 @@ export const domainIcon = (
     case "binary_sensor":
       return binarySensorIcon(compareState, stateObj);
 
+    case "button":
+      switch (stateObj?.attributes.device_class) {
+        case "restart":
+          return mdiRestart;
+        case "update":
+          return mdiPackageUp;
+        default:
+          return mdiGestureTapButton;
+      }
+
     case "cover":
       return coverIcon(compareState, stateObj);
 
diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index ca49c02522..afc048e5aa 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -95,7 +95,7 @@ export default class HaChartBase extends LitElement {
                       borderColor: dataset.borderColor as string,
                     })}
                   ></div>
-                  ${dataset.label}
+                  <div class="label">${dataset.label}</div>
                 </li>`
               )}
             </ul>
@@ -278,11 +278,9 @@ export default class HaChartBase extends LitElement {
       }
       .chartLegend li {
         cursor: pointer;
-        display: inline-flex;
+        display: inline-grid;
+        grid-auto-flow: column;
         padding: 0 8px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
         box-sizing: border-box;
         align-items: center;
         color: var(--secondary-text-color);
@@ -290,6 +288,11 @@ export default class HaChartBase extends LitElement {
       .chartLegend .hidden {
         text-decoration: line-through;
       }
+      .chartLegend .label {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
       .chartLegend .bullet,
       .chartTooltip .bullet {
         border-width: 1px;
diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts
index e19b6586a5..100f9dd7af 100644
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -1,7 +1,7 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
-import { getColorByIndex } from "../../common/color/colors";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -164,7 +164,7 @@ class StateHistoryChartLine extends LitElement {
       const pushData = (timestamp: Date, datavalues: any[] | null) => {
         if (!datavalues) return;
         if (timestamp > endTime) {
-          // Drop datapoints that are after the requested endTime. This could happen if
+          // Drop data points that are after the requested endTime. This could happen if
           // endTime is "now" and client time is not in sync with server time.
           return;
         }
@@ -190,7 +190,7 @@ class StateHistoryChartLine extends LitElement {
         color?: string
       ) => {
         if (!color) {
-          color = getColorByIndex(colorIndex);
+          color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
         }
         data.push({
diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts
index 802baf85f4..413ee0a831 100644
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -2,7 +2,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { getColorByIndex } from "../../common/color/colors";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { numberFormatToLocale } from "../../common/number/format_number";
@@ -71,7 +71,7 @@ const getColor = (
     stateColorMap.set(stateString, color);
     return color;
   }
-  const color = getColorByIndex(colorIndex);
+  const color = getGraphColorByIndex(colorIndex, computedStyles);
   colorIndex++;
   stateColorMap.set(stateString, color);
   return color;
diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index 1c2615ea07..944b467a41 100644
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -13,7 +13,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { getColorByIndex } from "../../common/color/colors";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import {
@@ -59,6 +59,8 @@ class StatisticsChart extends LitElement {
 
   @state() private _chartOptions?: ChartOptions;
 
+  private _computedStyle?: CSSStyleDeclaration;
+
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     return changedProps.size > 1 || !changedProps.has("hass");
   }
@@ -72,6 +74,10 @@ class StatisticsChart extends LitElement {
     }
   }
 
+  public firstUpdated() {
+    this._computedStyle = getComputedStyle(this);
+  }
+
   protected render(): TemplateResult {
     if (!isComponentLoaded(this.hass, "history")) {
       return html`<div class="info">
@@ -261,7 +267,7 @@ class StatisticsChart extends LitElement {
       ) => {
         if (!dataValues) return;
         if (timestamp > endTime) {
-          // Drop datapoints that are after the requested endTime. This could happen if
+          // Drop data points that are after the requested endTime. This could happen if
           // endTime is "now" and client time is not in sync with server time.
           return;
         }
@@ -280,7 +286,7 @@ class StatisticsChart extends LitElement {
         prevValues = dataValues;
       };
 
-      const color = getColorByIndex(colorIndex);
+      const color = getGraphColorByIndex(colorIndex, this._computedStyle!);
       colorIndex++;
 
       const statTypes: this["statTypes"] = [];
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 11e0a50a30..a9c3f300b5 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -678,7 +678,7 @@ export class HaDataTable extends LitElement {
           padding-left: 16px;
           /* @noflip */
           padding-right: 0;
-          width: 56px;
+          width: 60px;
         }
         :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
         :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
diff --git a/src/components/ha-alert.ts b/src/components/ha-alert.ts
index 25c3975ac6..b6f2f52a46 100644
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import {
   mdiAlertCircleOutline,
   mdiAlertOutline,
@@ -23,7 +22,6 @@ const ALERT_ICONS = {
 declare global {
   interface HASSDomEvents {
     "alert-dismissed-clicked": undefined;
-    "alert-action-clicked": undefined;
   }
 }
 
@@ -37,8 +35,6 @@ class HaAlert extends LitElement {
     | "error"
     | "success" = "info";
 
-  @property({ attribute: "action-text" }) public actionText = "";
-
   @property({ type: Boolean }) public dismissable = false;
 
   @property({ type: Boolean }) public rtl = false;
@@ -52,7 +48,9 @@ class HaAlert extends LitElement {
         })}"
       >
         <div class="icon ${this.title ? "" : "no-title"}">
-          <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
+          <slot name="icon">
+            <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
+          </slot>
         </div>
         <div class="content">
           <div class="main-content">
@@ -60,18 +58,15 @@ class HaAlert extends LitElement {
             <slot></slot>
           </div>
           <div class="action">
-            ${this.actionText
-              ? html`<mwc-button
-                  @click=${this._action_clicked}
-                  .label=${this.actionText}
-                ></mwc-button>`
-              : this.dismissable
-              ? html`<ha-icon-button
-                  @click=${this._dismiss_clicked}
-                  label="Dismiss alert"
-                  .path=${mdiClose}
-                ></ha-icon-button>`
-              : ""}
+            <slot name="action">
+              ${this.dismissable
+                ? html`<ha-icon-button
+                    @click=${this._dismiss_clicked}
+                    label="Dismiss alert"
+                    .path=${mdiClose}
+                  ></ha-icon-button>`
+                : ""}
+            </slot>
           </div>
         </div>
       </div>
@@ -82,10 +77,6 @@ class HaAlert extends LitElement {
     fireEvent(this, "alert-dismissed-clicked");
   }
 
-  private _action_clicked() {
-    fireEvent(this, "alert-action-clicked");
-  }
-
   static styles = css`
     .issue-type {
       position: relative;
@@ -96,7 +87,7 @@ class HaAlert extends LitElement {
     .issue-type.rtl {
       flex-direction: row-reverse;
     }
-    .issue-type::before {
+    .issue-type::after {
       position: absolute;
       top: 0;
       right: 0;
@@ -108,17 +99,11 @@ class HaAlert extends LitElement {
       border-radius: 4px;
     }
     .icon {
-      margin-right: 8px;
-      width: 24px;
+      z-index: 1;
     }
     .icon.no-title {
       align-self: center;
     }
-    .issue-type.rtl > .icon {
-      margin-right: 0px;
-      margin-left: 8px;
-      width: 24px;
-    }
     .issue-type.rtl > .content {
       flex-direction: row-reverse;
       text-align: right;
@@ -129,44 +114,55 @@ class HaAlert extends LitElement {
       align-items: center;
       width: 100%;
     }
+    .action {
+      z-index: 1;
+      width: min-content;
+      --mdc-theme-primary: var(--primary-text-color);
+    }
     .main-content {
       overflow-wrap: anywhere;
+      word-break: break-word;
+      margin-left: 8px;
+      margin-right: 0;
+    }
+    .issue-type.rtl > .content > .main-content {
+      margin-left: 0;
+      margin-right: 8px;
     }
     .title {
       margin-top: 2px;
       font-weight: bold;
     }
-    mwc-button {
+    .action mwc-button,
+    .action ha-icon-button {
       --mdc-theme-primary: var(--primary-text-color);
-    }
-    ha-icon-button {
       --mdc-icon-button-size: 36px;
     }
     .issue-type.info > .icon {
       color: var(--info-color);
     }
-    .issue-type.info::before {
+    .issue-type.info::after {
       background-color: var(--info-color);
     }
 
     .issue-type.warning > .icon {
       color: var(--warning-color);
     }
-    .issue-type.warning::before {
+    .issue-type.warning::after {
       background-color: var(--warning-color);
     }
 
     .issue-type.error > .icon {
       color: var(--error-color);
     }
-    .issue-type.error::before {
+    .issue-type.error::after {
       background-color: var(--error-color);
     }
 
     .issue-type.success > .icon {
       color: var(--success-color);
     }
-    .issue-type.success::before {
+    .issue-type.success::after {
       background-color: var(--success-color);
     }
   `;
diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts
index b79abb66a4..ed658188df 100644
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -172,6 +172,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           {
             area_id: "",
             name: this.hass.localize("ui.components.area-picker.no_areas"),
+            picture: null,
           },
         ];
       }
@@ -295,6 +296,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
           {
             area_id: "",
             name: this.hass.localize("ui.components.area-picker.no_match"),
+            picture: null,
           },
         ];
       }
@@ -306,6 +308,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
             {
               area_id: "add_new",
               name: this.hass.localize("ui.components.area-picker.add_new"),
+              picture: null,
             },
           ];
     }
@@ -340,7 +343,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         item-value-path="area_id"
         item-id-path="area_id"
         item-label-path="name"
-        .value=${this._value}
+        .value=${this.value}
         .disabled=${this.disabled}
         ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
@@ -431,12 +434,24 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
             name,
           });
           this._areas = [...this._areas!, area];
+          (this.comboBox as any).items = this._getAreas(
+            this._areas!,
+            this._devices!,
+            this._entities!,
+            this.includeDomains,
+            this.excludeDomains,
+            this.includeDeviceClasses,
+            this.deviceFilter,
+            this.entityFilter,
+            this.noAdd
+          );
           this._setValue(area.area_id);
         } catch (err: any) {
           showAlertDialog(this, {
-            text: this.hass.localize(
+            title: this.hass.localize(
               "ui.components.area-picker.add_dialog.failed_create_area"
             ),
+            text: err.message,
           });
         }
       },
diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts
index 73df1d44a2..ba17709a76 100644
--- a/src/components/ha-blueprint-picker.ts
+++ b/src/components/ha-blueprint-picker.ts
@@ -23,6 +23,10 @@ class HaBluePrintPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  public open() {
+    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
+  }
+
   private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
     if (!blueprints) {
       return [];
diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts
index 2b2bb6a9e9..2e659c8353 100644
--- a/src/components/ha-chip-set.ts
+++ b/src/components/ha-chip-set.ts
@@ -8,52 +8,31 @@ import {
   TemplateResult,
   unsafeCSS,
 } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import "./ha-chip";
-
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
-}
+import { customElement } from "lit/decorators";
 
 @customElement("ha-chip-set")
 export class HaChipSet extends LitElement {
-  @property() public items = [];
-
   protected render(): TemplateResult {
-    if (this.items.length === 0) {
-      return html``;
-    }
     return html`
       <div class="mdc-chip-set">
-        ${this.items.map(
-          (item, idx) =>
-            html`
-              <ha-chip .index=${idx} @click=${this._handleClick}>
-                ${item}
-              </ha-chip>
-            `
-        )}
+        <slot></slot>
       </div>
     `;
   }
 
-  private _handleClick(ev): void {
-    fireEvent(this, "chip-clicked", {
-      index: ev.currentTarget.index,
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
 
-      ha-chip {
+      slot::slotted(ha-chip) {
         margin: 4px;
       }
+      slot::slotted(ha-chip:first-of-type) {
+        margin-left: -4px;
+      }
+      slot::slotted(ha-chip:last-of-type) {
+        margin-right: -4px;
+      }
     `;
   }
 }
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index bbb934b981..ce6363e512 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -10,24 +10,21 @@ import {
 } from "lit";
 import { customElement, property } from "lit/decorators";
 
-declare global {
-  // for fire event
-  interface HASSDomEvents {
-    "chip-clicked": { index: string };
-  }
-}
-
 @customElement("ha-chip")
 export class HaChip extends LitElement {
-  @property() public index = 0;
-
   @property({ type: Boolean }) public hasIcon = false;
 
+  @property({ type: Boolean }) public noText = false;
+
   protected render(): TemplateResult {
     return html`
-      <div class="mdc-chip" .index=${this.index}>
+      <div class="mdc-chip">
         ${this.hasIcon
-          ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
+          ? html`<div
+              class="mdc-chip__icon mdc-chip__icon--leading ${this.noText
+                ? "no-text"
+                : ""}"
+            >
               <slot name="icon"></slot>
             </div>`
           : null}
@@ -60,6 +57,10 @@ export class HaChip extends LitElement {
         --mdc-icon-size: 20px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
+      .mdc-chip
+        .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden).no-text {
+        margin-right: -4px;
+      }
     `;
   }
 }
diff --git a/src/components/ha-cover-controls.ts b/src/components/ha-cover-controls.ts
index 85be8bf786..9f28b010d9 100644
--- a/src/components/ha-cover-controls.ts
+++ b/src/components/ha-cover-controls.ts
@@ -1,39 +1,30 @@
 import { mdiStop } from "@mdi/js";
-import type { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
+import {
+  CoverEntity,
+  isClosing,
+  isFullyClosed,
+  isFullyOpen,
+  isOpening,
+  supportsClose,
+  supportsOpen,
+  supportsStop,
+} from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
-import CoverEntity from "../util/cover-model";
 import "./ha-icon-button";
 
 @customElement("ha-cover-controls")
 class HaCoverControls extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public stateObj!: HassEntity;
-
-  @state() private _entityObj?: CoverEntity;
-
-  public willUpdate(changedProperties: PropertyValues): void {
-    super.willUpdate(changedProperties);
-
-    if (changedProperties.has("stateObj")) {
-      this._entityObj = new CoverEntity(this.hass, this.stateObj);
-    }
-  }
+  @property({ attribute: false }) public stateObj!: CoverEntity;
 
   protected render(): TemplateResult {
-    if (!this._entityObj) {
+    if (!this.stateObj) {
       return html``;
     }
 
@@ -41,7 +32,7 @@ class HaCoverControls extends LitElement {
       <div class="state">
         <ha-icon-button
           class=${classMap({
-            hidden: !this._entityObj.supportsOpen,
+            hidden: !supportsOpen(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.open_cover"
@@ -53,7 +44,7 @@ class HaCoverControls extends LitElement {
         </ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !this._entityObj.supportsStop,
+            hidden: !supportsStop(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.stop_cover"
@@ -64,7 +55,7 @@ class HaCoverControls extends LitElement {
         ></ha-icon-button>
         <ha-icon-button
           class=${classMap({
-            hidden: !this._entityObj.supportsClose,
+            hidden: !supportsClose(this.stateObj),
           })}
           .label=${this.hass.localize(
             "ui.dialogs.more_info_control.close_cover"
@@ -84,8 +75,7 @@ class HaCoverControls extends LitElement {
     }
     const assumedState = this.stateObj.attributes.assumed_state === true;
     return (
-      (this._entityObj.isFullyOpen || this._entityObj.isOpening) &&
-      !assumedState
+      (isFullyOpen(this.stateObj) || isOpening(this.stateObj)) && !assumedState
     );
   }
 
@@ -95,24 +85,30 @@ class HaCoverControls extends LitElement {
     }
     const assumedState = this.stateObj.attributes.assumed_state === true;
     return (
-      (this._entityObj.isFullyClosed || this._entityObj.isClosing) &&
+      (isFullyClosed(this.stateObj) || isClosing(this.stateObj)) &&
       !assumedState
     );
   }
 
   private _onOpenTap(ev): void {
     ev.stopPropagation();
-    this._entityObj.openCover();
+    this.hass.callService("cover", "open_cover", {
+      entity_id: this.stateObj.entity_id,
+    });
   }
 
   private _onCloseTap(ev): void {
     ev.stopPropagation();
-    this._entityObj.closeCover();
+    this.hass.callService("cover", "close_cover", {
+      entity_id: this.stateObj.entity_id,
+    });
   }
 
   private _onStopTap(ev): void {
     ev.stopPropagation();
-    this._entityObj.stopCover();
+    this.hass.callService("cover", "stop_cover", {
+      entity_id: this.stateObj.entity_id,
+    });
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts
index e4b10debf6..dac778f0ad 100644
--- a/src/components/ha-cover-tilt-controls.ts
+++ b/src/components/ha-cover-tilt-controls.ts
@@ -1,44 +1,33 @@
 import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
-import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import {
+  CoverEntity,
+  isFullyClosedTilt,
+  isFullyOpenTilt,
+  supportsCloseTilt,
+  supportsOpenTilt,
+  supportsStopTilt,
+} from "../data/cover";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
-import CoverEntity from "../util/cover-model";
 import "./ha-icon-button";
 
 @customElement("ha-cover-tilt-controls")
 class HaCoverTiltControls extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) stateObj!: HassEntity;
-
-  @state() private _entityObj?: CoverEntity;
-
-  public willUpdate(changedProperties: PropertyValues): void {
-    super.willUpdate(changedProperties);
-
-    if (changedProperties.has("stateObj")) {
-      this._entityObj = new CoverEntity(this.hass, this.stateObj);
-    }
-  }
+  @property({ attribute: false }) stateObj!: CoverEntity;
 
   protected render(): TemplateResult {
-    if (!this._entityObj) {
+    if (!this.stateObj) {
       return html``;
     }
 
     return html` <ha-icon-button
         class=${classMap({
-          invisible: !this._entityObj.supportsOpenTilt,
+          invisible: !supportsOpenTilt(this.stateObj),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.open_tilt_cover"
@@ -49,7 +38,7 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !this._entityObj.supportsStopTilt,
+          invisible: !supportsStopTilt(this.stateObj),
         })}
         .label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")}
         .path=${mdiStop}
@@ -58,7 +47,7 @@ class HaCoverTiltControls extends LitElement {
       ></ha-icon-button>
       <ha-icon-button
         class=${classMap({
-          invisible: !this._entityObj.supportsCloseTilt,
+          invisible: !supportsCloseTilt(this.stateObj),
         })}
         .label=${this.hass.localize(
           "ui.dialogs.more_info_control.close_tilt_cover"
@@ -74,7 +63,7 @@ class HaCoverTiltControls extends LitElement {
       return true;
     }
     const assumedState = this.stateObj.attributes.assumed_state === true;
-    return this._entityObj.isFullyOpenTilt && !assumedState;
+    return isFullyOpenTilt(this.stateObj) && !assumedState;
   }
 
   private _computeClosedDisabled(): boolean {
@@ -82,22 +71,28 @@ class HaCoverTiltControls extends LitElement {
       return true;
     }
     const assumedState = this.stateObj.attributes.assumed_state === true;
-    return this._entityObj.isFullyClosedTilt && !assumedState;
+    return isFullyClosedTilt(this.stateObj) && !assumedState;
   }
 
   private _onOpenTiltTap(ev): void {
     ev.stopPropagation();
-    this._entityObj.openCoverTilt();
+    this.hass.callService("cover", "open_cover_tilt", {
+      entity_id: this.stateObj.entity_id,
+    });
   }
 
   private _onCloseTiltTap(ev): void {
     ev.stopPropagation();
-    this._entityObj.closeCoverTilt();
+    this.hass.callService("cover", "close_cover_tilt", {
+      entity_id: this.stateObj.entity_id,
+    });
   }
 
   private _onStopTiltTap(ev): void {
     ev.stopPropagation();
-    this._entityObj.stopCoverTilt();
+    this.hass.callService("cover", "stop_cover_tilt", {
+      entity_id: this.stateObj.entity_id,
+    });
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/components/ha-faded.ts b/src/components/ha-faded.ts
new file mode 100644
index 0000000000..8f53e1cb6c
--- /dev/null
+++ b/src/components/ha-faded.ts
@@ -0,0 +1,82 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+
+@customElement("ha-faded")
+class HaFaded extends LitElement {
+  @property({ type: Number, attribute: "faded-height" })
+  public fadedHeight = 102;
+
+  @state() _contentShown = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div
+        class="container ${classMap({ faded: !this._contentShown })}"
+        style=${!this._contentShown ? `max-height: ${this.fadedHeight}px` : ""}
+        @click=${this._showContent}
+      >
+        <slot
+          @iron-resize=${
+            // ha-markdown-element fire this when render is complete
+            this._setShowContent
+          }
+        ></slot>
+      </div>
+    `;
+  }
+
+  get _slottedHeight(): number {
+    return (
+      (
+        this.shadowRoot!.querySelector(".container")
+          ?.firstElementChild as HTMLSlotElement
+      )
+        .assignedElements()
+        .reduce(
+          (partial, element) => partial + (element as HTMLElement).offsetHeight,
+          0
+        ) || 0
+    );
+  }
+
+  private _setShowContent() {
+    const height = this._slottedHeight;
+    this._contentShown = height !== 0 && height <= this.fadedHeight + 50;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._setShowContent();
+  }
+
+  private _showContent(): void {
+    this._contentShown = true;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .container {
+        display: block;
+        height: auto;
+        cursor: default;
+      }
+      .faded {
+        cursor: pointer;
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          black 25%,
+          transparent 100%
+        );
+        mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
+        overflow-y: hidden;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-faded": HaFaded;
+  }
+}
diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
index e0452e0db7..8a1e60e480 100644
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -5,6 +5,22 @@ import { customElement } from "lit/decorators";
 @customElement("ha-formfield")
 // @ts-expect-error
 export class HaFormfield extends Formfield {
+  protected _labelClick() {
+    const input = this.input;
+    if (input) {
+      input.focus();
+      switch (input.tagName) {
+        case "HA-CHECKBOX":
+        case "HA-RADIO":
+          (input as any).checked = !(input as any).checked;
+          break;
+        default:
+          input.click();
+          break;
+      }
+    }
+  }
+
   protected static get styles(): CSSResultGroup {
     return [
       Formfield.styles,
diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index ac05a64317..dbabf84b20 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -7,10 +7,11 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
+import "./ha-alert";
 
 type HlsLite = Omit<
   HlsType,
@@ -41,6 +42,8 @@ class HaHLSPlayer extends LitElement {
   // don't cache this, as we remove it on disconnects
   @query("video") private _videoEl!: HTMLVideoElement;
 
+  @state() private _error?: string;
+
   private _hlsPolyfillInstance?: HlsLite;
 
   private _exoPlayer = false;
@@ -58,6 +61,9 @@ class HaHLSPlayer extends LitElement {
   }
 
   protected render(): TemplateResult {
+    if (this._error) {
+      return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
+    }
     return html`
       <video
         ?autoplay=${this.autoPlay}
@@ -90,6 +96,8 @@ class HaHLSPlayer extends LitElement {
   }
 
   private async _startHls(): Promise<void> {
+    this._error = undefined;
+
     const videoEl = this._videoEl;
     const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
@@ -109,7 +117,7 @@ class HaHLSPlayer extends LitElement {
     }
 
     if (!hlsSupported) {
-      videoEl.innerHTML = this.hass.localize(
+      this._error = this.hass.localize(
         "ui.components.media-browser.video_not_supported"
       );
       return;
@@ -196,6 +204,44 @@ class HaHLSPlayer extends LitElement {
     hls.on(Hls.Events.MEDIA_ATTACHED, () => {
       hls.loadSource(url);
     });
+    hls.on(Hls.Events.ERROR, (_, data: any) => {
+      if (!data.fatal) {
+        return;
+      }
+      if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
+        switch (data.details) {
+          case Hls.ErrorDetails.MANIFEST_LOAD_ERROR: {
+            let error = "Error starting stream, see logs for details";
+            if (
+              data.response !== undefined &&
+              data.response.code !== undefined
+            ) {
+              if (data.response.code >= 500) {
+                error += " (Server failure)";
+              } else if (data.response.code >= 400) {
+                error += " (Stream never started)";
+              } else {
+                error += " (" + data.response.code + ")";
+              }
+            }
+            this._error = error;
+            return;
+          }
+          case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
+            this._error = "Timeout while starting stream";
+            return;
+          default:
+            this._error = "Unknown stream network error (" + data.details + ")";
+            return;
+        }
+        this._error = "Error with media stream contents (" + data.details + ")";
+      } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+        this._error = "Error with media stream contents (" + data.details + ")";
+      } else {
+        this._error =
+          "Unknown error with stream (" + data.type + ", " + data.details + ")";
+      }
+    });
   }
 
   private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
@@ -231,6 +277,11 @@ class HaHLSPlayer extends LitElement {
         width: 100%;
         max-height: var(--video-max-height, calc(100vh - 97px));
       }
+
+      ha-alert {
+        display: block;
+        padding: 100px 16px;
+      }
     `;
   }
 }
diff --git a/src/components/ha-icon-overflow-menu.ts b/src/components/ha-icon-overflow-menu.ts
index c9cb642386..664dd55c5a 100644
--- a/src/components/ha-icon-overflow-menu.ts
+++ b/src/components/ha-icon-overflow-menu.ts
@@ -1,12 +1,12 @@
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
+import "@polymer/paper-tooltip/paper-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "./ha-button-menu";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-icon-button";
-import "./ha-svg-icon";
-import { mdiDotsVertical } from "@mdi/js";
 import { HomeAssistant } from "../types";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "./ha-button-menu";
+import "./ha-icon-button";
+import "./ha-svg-icon";
 
 export interface IconOverflowMenuItem {
   [key: string]: any;
@@ -37,13 +37,11 @@ export class HaIconOverflowMenu extends LitElement {
               corner="BOTTOM_START"
               absolute
             >
-              <mwc-icon-button
-                .title=${this.hass.localize("ui.common.menu")}
+              <ha-icon-button
                 .label=${this.hass.localize("ui.common.overflow_menu")}
+                .path=${mdiDotsVertical}
                 slot="trigger"
-              >
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-              </mwc-icon-button>
+              ></ha-icon-button>
 
               ${this.items.map(
                 (item) => html`
diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts
index b6279d6ac0..a35808ba92 100644
--- a/src/components/ha-icon.ts
+++ b/src/components/ha-icon.ts
@@ -29,315 +29,7 @@ interface DeprecatedIcon {
   };
 }
 
-const mdiDeprecatedIcons: DeprecatedIcon = {
-  "adobe-acrobat": {
-    removeIn: "2021.12",
-  },
-  adobe: {
-    removeIn: "2021.12",
-  },
-  "amazon-alexa": {
-    removeIn: "2021.12",
-  },
-  amazon: {
-    removeIn: "2021.12",
-  },
-  "android-auto": {
-    removeIn: "2021.12",
-  },
-  "android-debug-bridge": {
-    removeIn: "2021.12",
-  },
-  "apple-airplay": {
-    newName: "cast-variant",
-    removeIn: "2021.12",
-  },
-  bandcamp: {
-    removeIn: "2021.12",
-  },
-  battlenet: {
-    removeIn: "2021.12",
-  },
-  blogger: {
-    removeIn: "2021.12",
-  },
-  "bolnisi-cross": {
-    newName: "cross-bolnisi",
-    removeIn: "2021.12",
-  },
-  "boom-gate-down": {
-    newName: "boom-gate-arrow-down",
-    removeIn: "2021.12",
-  },
-  "boom-gate-down-outline": {
-    newName: "boom-gate-arrow-down-outline",
-    removeIn: "2021.12",
-  },
-  buddhism: {
-    newName: "dharmachakra",
-    removeIn: "2021.12",
-  },
-  buffer: {
-    removeIn: "2021.12",
-  },
-  "cash-usd-outline": {
-    removeIn: "2021.12",
-  },
-  "cash-usd": {
-    removeIn: "2021.12",
-  },
-  "cellphone-android": {
-    newName: "cellphone",
-    removeIn: "2021.12",
-  },
-  "cellphone-erase": {
-    newName: "cellphone-remove",
-    removeIn: "2021.12",
-  },
-  "cellphone-iphone": {
-    newName: "cellphone",
-    removeIn: "2021.12",
-  },
-  "celtic-cross": {
-    newName: "cross-celtic",
-    removeIn: "2021.12",
-  },
-  christianity: {
-    newName: "cross",
-    removeIn: "2021.12",
-  },
-  "christianity-outline": {
-    newName: "cross-outline",
-    removeIn: "2021.12",
-  },
-  "concourse-ci": {
-    removeIn: "2021.12",
-  },
-  "currency-usd-circle": {
-    removeIn: "2021.12",
-  },
-  "currency-usd-circle-outline": {
-    removeIn: "2021.12",
-  },
-  "do-not-disturb-off": {
-    newName: "minus-circle-off",
-    removeIn: "2021.12",
-  },
-  "do-not-disturb": {
-    newName: "minus-circle",
-    removeIn: "2021.12",
-  },
-  douban: {
-    removeIn: "2021.12",
-  },
-  face: {
-    newName: "face-man",
-    removeIn: "2021.12",
-  },
-  "face-outline": {
-    newName: "face-man-outline",
-    removeIn: "2021.12",
-  },
-  "face-profile-woman": {
-    newName: "face-woman-profile",
-    removeIn: "2021.12",
-  },
-  "face-shimmer": {
-    newName: "face-man-shimmer",
-    removeIn: "2021.12",
-  },
-  "face-shimmer-outline": {
-    newName: "face-man-shimmer-outline",
-    removeIn: "2021.12",
-  },
-  "file-pdf": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  "file-pdf-outline": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  "file-pdf-box-outline": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  "flash-circle": {
-    newName: "lightning-bolt-circle",
-    removeIn: "2021.12",
-  },
-  "floor-lamp-variant": {
-    newName: "floor-lamp-torchiere-variant",
-    removeIn: "2021.12",
-  },
-  gif: {
-    newName: "file-gif-box",
-    removeIn: "2021.12",
-  },
-  "google-photos": {
-    removeIn: "2021.12",
-  },
-  gradient: {
-    newName: "gradient-vertical",
-    removeIn: "2021.12",
-  },
-  hand: {
-    newName: "hand-front-right",
-    removeIn: "2021.12",
-  },
-  "hand-left": {
-    newName: "hand-back-left",
-    removeIn: "2021.12",
-  },
-  "hand-right": {
-    newName: "hand-back-right",
-    removeIn: "2021.12",
-  },
-  hinduism: {
-    newName: "om",
-    removeIn: "2021.12",
-  },
-  "home-currency-usd": {
-    removeIn: "2021.12",
-  },
-  iframe: {
-    newName: "application-brackets",
-    removeIn: "2021.12",
-  },
-  "iframe-outline": {
-    newName: "application-brackets-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-array": {
-    newName: "application-array",
-    removeIn: "2021.12",
-  },
-  "iframe-array-outline": {
-    newName: "application-array-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-braces": {
-    newName: "application-braces",
-    removeIn: "2021.12",
-  },
-  "iframe-braces-outline": {
-    newName: "application-braces-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-parentheses": {
-    newName: "application-parentheses",
-    removeIn: "2021.12",
-  },
-  "iframe-parentheses-outline": {
-    newName: "application-parentheses-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-variable": {
-    newName: "application-variable",
-    removeIn: "2021.12",
-  },
-  "iframe-variable-outline": {
-    newName: "application-variable-outline",
-    removeIn: "2021.12",
-  },
-  islam: {
-    newName: "star-crescent",
-    removeIn: "2021.12",
-  },
-  judaism: {
-    newName: "star-david",
-    removeIn: "2021.12",
-  },
-  "laptop-chromebook": {
-    newName: "laptop",
-    removeIn: "2021.12",
-  },
-  "laptop-mac": {
-    newName: "laptop",
-    removeIn: "2021.12",
-  },
-  "laptop-windows": {
-    newName: "laptop",
-    removeIn: "2021.12",
-  },
-  "microsoft-edge-legacy": {
-    removeIn: "2021.12",
-  },
-  "microsoft-yammer": {
-    removeIn: "2021.12",
-  },
-  "monitor-clean": {
-    newName: "monitor-shimmer",
-    removeIn: "2021.12",
-  },
-  "pdf-box": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  pharmacy: {
-    newName: "mortar-pestle-plus",
-    removeIn: "2021.12",
-  },
-  "plus-one": {
-    newName: "numeric-positive-1",
-    removeIn: "2021.12",
-  },
-  "poll-box": {
-    newName: "chart-box",
-    removeIn: "2021.12",
-  },
-  "poll-box-outline": {
-    newName: "chart-box-outline",
-    removeIn: "2021.12",
-  },
-  sparkles: {
-    newName: "shimmer",
-    removeIn: "2021.12",
-  },
-  "tablet-ipad": {
-    newName: "tablet",
-    removeIn: "2021.12",
-  },
-  teach: {
-    newName: "human-male-board",
-    removeIn: "2021.12",
-  },
-  telegram: {
-    removeIn: "2021.12",
-  },
-  "television-clean": {
-    newName: "television-shimmer",
-    removeIn: "2021.12",
-  },
-  "text-subject": {
-    newName: "text-long",
-    removeIn: "2021.12",
-  },
-  "twitter-retweet": {
-    newName: "repeat-variant",
-    removeIn: "2021.12",
-  },
-  untappd: {
-    removeIn: "2021.12",
-  },
-  vk: {
-    removeIn: "2021.12",
-  },
-  "voice-off": {
-    newName: "account-voice-off",
-    removeIn: "2021.12",
-  },
-  "xamarian-outline": {
-    newName: "xamarian",
-    removeIn: "2021.12",
-  },
-  xing: {
-    removeIn: "2021.12",
-  },
-  "y-combinator": {
-    removeIn: "2021.12",
-  },
-};
+const mdiDeprecatedIcons: DeprecatedIcon = {};
 
 const chunks: Chunks = {};
 
diff --git a/src/components/ha-logo-svg.ts b/src/components/ha-logo-svg.ts
new file mode 100644
index 0000000000..644f35e93e
--- /dev/null
+++ b/src/components/ha-logo-svg.ts
@@ -0,0 +1,39 @@
+import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-logo-svg")
+export class HaLogoSvg extends LitElement {
+  protected render(): SVGTemplateResult {
+    return svg`
+      <svg version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="#41bdf5" width="200" height="200" ry="16.4"/>
+        <path fill="#fff" d="m38.416 165.29v-53.456h-13.901a3.7332 3.7332 0 0 1-2.662-6.3504l74.804-76.084c1.8068-1.8376 4.7612-1.8628 6.5992-0.056l0.048 0.048 39.04 39.518v-7.3188a3.1112 3.1112 0 0 1 3.1112-3.1112h12.964a3.1112 3.1112 0 0 1 3.1116 3.1112v26.855l16.627 17.047a3.7332 3.7332 0 0 1-2.6728 6.34h-13.954v53.456a3.1112 3.1112 0 0 1-3.1112 3.1112h-116.89a3.1112 3.1112 0 0 1-3.1112-3.1112zm82.556-65.304a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0176 5.996 6.0176c0.9256 0 1.802-0.2108 2.5848-0.5868l8.6072 8.6384v8.3672l-10.792 10.831v-7.936a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v11.947l-9.9932 10.029v-58.912l8.2076-8.2368a5.9544 5.9544 0 0 0 2.5848 0.5864c3.3116 0 5.996-2.694 5.996-6.0176 0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 0.9292 0.2096 1.8088 0.584 2.5944l-7.3792 7.406-7.3796-7.406a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 3.3236 2.6844 6.0176 5.996 6.0176 0.9256 0 1.802-0.2108 2.5848-0.5864l8.2072 8.2368v42.064l-14.39-14.442v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-11.192-11.232v-11.145a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v12.807l12.363 12.407h-7.108c-0.8232-2.3372-3.044-4.0116-5.6548-4.0116-3.3112 0-5.996 2.694-5.996 6.0172 0 3.3236 2.6848 6.0176 5.996 6.0176 2.6108 0 4.832-1.6744 5.6548-4.012h11.105l17.216 17.278v30.03l-9.1932-9.2264v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.996 2.694-5.996 6.0172 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-13.376-13.423a6.0116 6.0116 0 0 0 0.5844-2.5944c0-3.3232-2.684-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0172 5.996 6.0172c0.9256 0 1.8024-0.2104 2.5848-0.5864l13.376 13.424h-7.108c-0.8232-2.3372-3.044-4.012-5.6548-4.012-3.3112 0-5.996 2.6944-5.996 6.0176s2.6848 6.0172 5.996 6.0172c2.6108 0 4.8316-1.6744 5.6548-4.0116h11.105l11.192 11.232h5.6528l11.592-11.633h10.705c0.8232 2.3368 3.044 4.0112 5.6548 4.0112 3.3112 0 5.996-2.694 5.996-6.0172s-2.6848-6.0172-5.996-6.0172c-2.6108 0-4.8316 1.6744-5.6548 4.0116h-12.361l-10.764 10.802v-13.18l12.82-12.866h20.698c0.8232 2.3372 3.044 4.0116 5.6544 4.0116 3.3116 0 5.996-2.694 5.996-6.0172 0-3.3236-2.6844-6.0176-5.996-6.0176-2.6104 0-4.8312 1.6744-5.6544 4.012h-16.702l11.963-12.006v-10.029l8.6068-8.6384a5.9544 5.9544 0 0 0 2.5852 0.5868c3.3112 0 5.996-2.6944 5.996-6.0176s-2.6848-6.0172-5.996-6.0172-5.996 2.694-5.996 6.0172c0 0.9292 0.21 1.8088 0.5844 2.5944l-5.7804 5.8016v-18.367a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v18.366l-5.7808-5.8016zm-51.78 57.58c-1.3244 0-2.3984-1.0776-2.3984-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm17.588-18.052c-1.3248 0-2.3988-1.0776-2.3988-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm-20.786-2.808c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm-1.9988-20.058c-1.3244 0-2.398-1.0776-2.398-2.4072 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm49.964 2.808c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm27.181 18.453c-1.324 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-10.392 19.255c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm11.192-57.364c-1.3244 0-2.3984-1.078-2.3984-2.4072s1.074-2.4068 2.3984-2.4068 2.3984 1.0776 2.3984 2.4068-1.074 2.4072-2.3984 2.4072zm-13.191-15.645c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-15.989-9.628c-1.3244 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-25.582 0c-1.324 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-20.785 9.2268c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072s2.3984 1.0776 2.3984 2.4072c0 1.3292-1.074 2.4068-2.3984 2.4068zm15.189 14.843c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm33.976 1.2036c-1.324 0-2.398-1.078-2.398-2.4072s1.0736-2.4068 2.398-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4072-2.3984 2.4072z"/>
+      </svg>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: var(--ha-icon-display, inline-flex);
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        vertical-align: middle;
+        fill: currentcolor;
+        width: var(--mdc-icon-size, 24px);
+        height: var(--mdc-icon-size, 24px);
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        display: block;
+      }
+    `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-logo-svg": HaLogoSvg;
+  }
+}
diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index f063d62169..09b29a6ecc 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -24,7 +24,7 @@ class HaMarkdownElement extends ReactiveElement {
 
   private async _render() {
     this.innerHTML = await renderMarkdown(
-      this.content,
+      String(this.content),
       {
         breaks: this.breaks,
         gfm: true,
diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts
new file mode 100644
index 0000000000..0872c2556d
--- /dev/null
+++ b/src/components/ha-qr-scanner.ts
@@ -0,0 +1,162 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
+import type { Select } from "@material/mwc-select/mwc-select";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import type QrScanner from "qr-scanner";
+import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
+import { LocalizeFunc } from "../common/translations/localize";
+import "./ha-alert";
+
+@customElement("ha-qr-scanner")
+class HaQrScanner extends LitElement {
+  @property() localize!: LocalizeFunc;
+
+  @state() private _cameras?: QrScanner.Camera[];
+
+  @state() private _error?: string;
+
+  private _qrScanner?: QrScanner;
+
+  private _qrNotFoundCount = 0;
+
+  @query("video", true) private _video!: HTMLVideoElement;
+
+  @query("#canvas-container", true) private _canvasContainer!: HTMLDivElement;
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._qrNotFoundCount = 0;
+    if (this._qrScanner) {
+      this._qrScanner.stop();
+      this._qrScanner.destroy();
+      this._qrScanner = undefined;
+    }
+    while (this._canvasContainer.lastChild) {
+      this._canvasContainer.removeChild(this._canvasContainer.lastChild);
+    }
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hasUpdated && navigator.mediaDevices) {
+      this._loadQrScanner();
+    }
+  }
+
+  protected firstUpdated() {
+    if (navigator.mediaDevices) {
+      this._loadQrScanner();
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("_error") && this._error) {
+      fireEvent(this, "qr-code-error", { message: this._error });
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`${this._cameras && this._cameras.length > 1
+      ? html`<mwc-select
+          .label=${this.localize(
+            "ui.panel.config.zwave_js.add_node.select_camera"
+          )}
+          fixedMenuPosition
+          naturalMenuWidth
+          @closed=${stopPropagation}
+          @selected=${this._cameraChanged}
+        >
+          ${this._cameras!.map(
+            (camera) => html`
+              <mwc-list-item .value=${camera.id}>${camera.label}</mwc-list-item>
+            `
+          )}
+        </mwc-select>`
+      : ""}
+    ${this._error
+      ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+      : ""}
+    ${navigator.mediaDevices
+      ? html`<video></video>
+          <div id="canvas-container"></div>`
+      : html`<ha-alert alert-type="warning"
+          >${!window.isSecureContext
+            ? "You can only use your camera to scan a QR core when using HTTPS."
+            : "Your browser doesn't support QR scanning."}</ha-alert
+        >`}`;
+  }
+
+  private async _loadQrScanner() {
+    const QrScanner = (await import("qr-scanner")).default;
+    if (!(await QrScanner.hasCamera())) {
+      this._error = "No camera found";
+      return;
+    }
+    QrScanner.WORKER_PATH = "/static/js/qr-scanner-worker.min.js";
+    this._listCameras(QrScanner);
+    this._qrScanner = new QrScanner(
+      this._video,
+      this._qrCodeScanned,
+      this._qrCodeError
+    );
+    // @ts-ignore
+    const canvas = this._qrScanner.$canvas;
+    this._canvasContainer.appendChild(canvas);
+    canvas.style.display = "block";
+    try {
+      await this._qrScanner.start();
+    } catch (err: any) {
+      this._error = err;
+    }
+  }
+
+  private async _listCameras(qrScanner: typeof QrScanner): Promise<void> {
+    this._cameras = await qrScanner.listCameras(true);
+  }
+
+  private _qrCodeError = (err: any) => {
+    if (err === "No QR code found") {
+      this._qrNotFoundCount++;
+      if (this._qrNotFoundCount === 250) {
+        this._error = err;
+      }
+      return;
+    }
+    this._error = err.message || err;
+    // eslint-disable-next-line no-console
+    console.log(err);
+  };
+
+  private _qrCodeScanned = async (qrCodeString: string): Promise<void> => {
+    this._qrNotFoundCount = 0;
+    fireEvent(this, "qr-code-scanned", { value: qrCodeString });
+  };
+
+  private _cameraChanged(ev: CustomEvent): void {
+    this._qrScanner?.setCamera((ev.target as Select).value);
+  }
+
+  static styles = css`
+    canvas {
+      width: 100%;
+    }
+    mwc-select {
+      width: 100%;
+      margin-bottom: 16px;
+    }
+  `;
+}
+
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "qr-code-scanned": { value: string };
+    "qr-code-error": { message: string };
+  }
+
+  interface HTMLElementTagNameMap {
+    "ha-qr-scanner": HaQrScanner;
+  }
+}
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 502c0e7fe7..f864e8a874 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -3,13 +3,11 @@ import {
   mdiBell,
   mdiCalendar,
   mdiCart,
-  mdiCellphoneCog,
   mdiChartBox,
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
   mdiHammer,
-  mdiHomeAssistant,
   mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
@@ -45,20 +43,16 @@ import {
   PersistentNotification,
   subscribeNotifications,
 } from "../data/persistent_notification";
-import {
-  ExternalConfig,
-  getExternalConfig,
-} from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant, PanelInfo } from "../types";
+import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config", "developer-tools", "hassio"];
+const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
@@ -68,7 +62,6 @@ const SORT_VALUE_URL_PATHS = {
   logbook: 3,
   history: 4,
   "developer-tools": 9,
-  hassio: 10,
   config: 11,
 };
 
@@ -77,7 +70,6 @@ const PANEL_ICONS = {
   config: mdiCog,
   "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
-  hassio: mdiHomeAssistant,
   history: mdiChartBox,
   logbook: mdiFormatListBulletedType,
   lovelace: mdiViewDashboard,
@@ -189,12 +181,12 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
+  @property() public route!: Route;
+
   @property({ type: Boolean }) public alwaysExpand = false;
 
   @property({ type: Boolean }) public editMode = false;
 
-  @state() private _externalConfig?: ExternalConfig;
-
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _renderEmptySortable = false;
@@ -241,7 +233,6 @@ class HaSidebar extends LitElement {
       changedProps.has("expanded") ||
       changedProps.has("narrow") ||
       changedProps.has("alwaysExpand") ||
-      changedProps.has("_externalConfig") ||
       changedProps.has("_notifications") ||
       changedProps.has("editMode") ||
       changedProps.has("_renderEmptySortable") ||
@@ -272,11 +263,6 @@ class HaSidebar extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    if (this.hass && this.hass.auth.external) {
-      getExternalConfig(this.hass.auth.external).then((conf) => {
-        this._externalConfig = conf;
-      });
-    }
     subscribeNotifications(this.hass.connection, (notifications) => {
       this._notifications = notifications;
     });
@@ -351,12 +337,17 @@ class HaSidebar extends LitElement {
       this._hiddenPanels
     );
 
+    // Show the supervisor as beeing part of configuration
+    const selectedPanel = this.route.path?.startsWith("/hassio/")
+      ? "config"
+      : this.hass.panelUrl;
+
     // prettier-ignore
     return html`
       <paper-listbox
         attr-for-selected="data-panel"
         class="ha-scrollbar"
-        .selected=${this.hass.panelUrl}
+        .selected=${selectedPanel}
         @focusin=${this._listboxFocusIn}
         @focusout=${this._listboxFocusOut}
         @scroll=${this._listboxScroll}
@@ -367,7 +358,6 @@ class HaSidebar extends LitElement {
           : this._renderPanels(beforeSpacer)}
         ${this._renderSpacer()}
         ${this._renderPanels(afterSpacer)}
-        ${this._renderExternalConfiguration()}
       </paper-listbox>
     `;
   }
@@ -552,34 +542,6 @@ class HaSidebar extends LitElement {
     </a>`;
   }
 
-  private _renderExternalConfiguration() {
-    return html`${this._externalConfig && this._externalConfig.hasSettingsScreen
-      ? html`
-          <a
-            aria-role="option"
-            aria-label=${this.hass.localize(
-              "ui.sidebar.external_app_configuration"
-            )}
-            href="#external-app-configuration"
-            tabindex="-1"
-            @click=${this._handleExternalAppConfiguration}
-            @mouseenter=${this._itemMouseEnter}
-            @mouseleave=${this._itemMouseLeave}
-          >
-            <paper-icon-item>
-              <ha-svg-icon
-                slot="item-icon"
-                .path=${mdiCellphoneCog}
-              ></ha-svg-icon>
-              <span class="item-text">
-                ${this.hass.localize("ui.sidebar.external_app_configuration")}
-              </span>
-            </paper-icon-item>
-          </a>
-        `
-      : ""}`;
-  }
-
   private get _tooltip() {
     return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
   }
@@ -751,13 +713,6 @@ class HaSidebar extends LitElement {
     fireEvent(this, "hass-show-notifications");
   }
 
-  private _handleExternalAppConfiguration(ev: Event) {
-    ev.preventDefault();
-    this.hass.auth.external!.fireMessage({
-      type: "config_screen/show",
-    });
-  }
-
   private _toggleSidebar(ev: CustomEvent) {
     if (ev.detail.action !== "tap") {
       return;
diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index c4ca542801..1b14f40579 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -27,7 +27,7 @@ export class HaTimeInput extends LitElement {
     const parts = this.value?.split(":") || [];
     let hours = parts[0];
     const numberHours = Number(parts[0]);
-    if (numberHours && useAMPM && numberHours > 12) {
+    if (numberHours && useAMPM && numberHours > 12 && numberHours < 24) {
       hours = String(numberHours - 12).padStart(2, "0");
     }
     if (useAMPM && numberHours === 0) {
diff --git a/src/components/ha-web-rtc-player.ts b/src/components/ha-web-rtc-player.ts
index 665e5ab456..b2f64a0645 100644
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -80,6 +80,9 @@ class HaWebRtcPlayer extends LitElement {
     // Some cameras (such as nest) require a data channel to establish a stream
     // however, not used by any integrations.
     peerConnection.createDataChannel("dataSendChannel");
+    peerConnection.addTransceiver("audio", { direction: "recvonly" });
+    peerConnection.addTransceiver("video", { direction: "recvonly" });
+
     const offerOptions: RTCOfferOptions = {
       offerToReceiveAudio: true,
       offerToReceiveVideo: true,
diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts
index 946c9597c7..3524c52a21 100644
--- a/src/components/map/ha-entity-marker.ts
+++ b/src/components/map/ha-entity-marker.ts
@@ -2,11 +2,8 @@ import { LitElement, html, css } from "lit";
 import { property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
 
 class HaEntityMarker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: "entity-id" }) public entityId?: string;
 
   @property({ attribute: "entity-name" }) public entityName?: string;
@@ -67,3 +64,9 @@ class HaEntityMarker extends LitElement {
 }
 
 customElements.define("ha-entity-marker", HaEntityMarker);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entity-marker": HaEntityMarker;
+  }
+}
diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 930e8efd3b..d21a7185ac 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -26,6 +26,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "location-updated": { id: string; location: [number, number] };
+    "markers-updated": undefined;
     "radius-updated": { id: string; radius: number };
     "marker-clicked": { id: string };
   }
@@ -281,6 +282,7 @@ export class HaLocationsEditor extends LitElement {
     });
     this._circles = circles;
     this._locationMarkers = locationMarkers;
+    fireEvent(this, "markers-updated");
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index 2835ebb2fc..9e56fa7379 100644
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -412,7 +412,9 @@ export class HaMap extends ReactiveElement {
               <ha-entity-marker
                 entity-id="${getEntityId(entity)}"
                 entity-name="${entityName}"
-                entity-picture="${entityPicture || ""}"
+                entity-picture="${
+                  entityPicture ? this.hass.hassUrl(entityPicture) : ""
+                }"
                 ${
                   typeof entity !== "string"
                     ? `entity-color="${entity.color}"`
diff --git a/src/data/area_registry.ts b/src/data/area_registry.ts
index bb820261a9..ffb3d4c153 100644
--- a/src/data/area_registry.ts
+++ b/src/data/area_registry.ts
@@ -7,10 +7,12 @@ import { HomeAssistant } from "../types";
 export interface AreaRegistryEntry {
   area_id: string;
   name: string;
+  picture: string | null;
 }
 
 export interface AreaRegistryEntryMutableParams {
   name: string;
+  picture?: string | null;
 }
 
 export const createAreaRegistryEntry = (
diff --git a/src/data/automation.ts b/src/data/automation.ts
index eedb752483..f85a387210 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -179,7 +179,7 @@ export interface StateCondition extends BaseCondition {
   condition: "state";
   entity_id: string;
   attribute?: string;
-  state: string | number;
+  state: string | number | string[];
   for?: string | number | ForDict;
 }
 
diff --git a/src/data/cover.ts b/src/data/cover.ts
new file mode 100644
index 0000000000..3ca55b6bf8
--- /dev/null
+++ b/src/data/cover.ts
@@ -0,0 +1,95 @@
+import {
+  HassEntityAttributeBase,
+  HassEntityBase,
+} from "home-assistant-js-websocket";
+import { supportsFeature } from "../common/entity/supports-feature";
+
+export const SUPPORT_OPEN = 1;
+export const SUPPORT_CLOSE = 2;
+export const SUPPORT_SET_POSITION = 4;
+export const SUPPORT_STOP = 8;
+export const SUPPORT_OPEN_TILT = 16;
+export const SUPPORT_CLOSE_TILT = 32;
+export const SUPPORT_STOP_TILT = 64;
+export const SUPPORT_SET_TILT_POSITION = 128;
+
+export const FEATURE_CLASS_NAMES = {
+  4: "has-set_position",
+  16: "has-open_tilt",
+  32: "has-close_tilt",
+  64: "has-stop_tilt",
+  128: "has-set_tilt_position",
+};
+
+export const supportsOpen = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_OPEN);
+
+export const supportsClose = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_CLOSE);
+
+export const supportsSetPosition = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_SET_POSITION);
+
+export const supportsStop = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_STOP);
+
+export const supportsOpenTilt = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_OPEN_TILT);
+
+export const supportsCloseTilt = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_CLOSE_TILT);
+
+export const supportsStopTilt = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_STOP_TILT);
+
+export const supportsSetTiltPosition = (stateObj) =>
+  supportsFeature(stateObj, SUPPORT_SET_TILT_POSITION);
+
+export function isFullyOpen(stateObj: CoverEntity) {
+  if (stateObj.attributes.current_position !== undefined) {
+    return stateObj.attributes.current_position === 100;
+  }
+  return stateObj.state === "open";
+}
+
+export function isFullyClosed(stateObj: CoverEntity) {
+  if (stateObj.attributes.current_position !== undefined) {
+    return stateObj.attributes.current_position === 0;
+  }
+  return stateObj.state === "closed";
+}
+
+export function isFullyOpenTilt(stateObj: CoverEntity) {
+  return stateObj.attributes.current_tilt_position === 100;
+}
+
+export function isFullyClosedTilt(stateObj: CoverEntity) {
+  return stateObj.attributes.current_tilt_position === 0;
+}
+
+export function isOpening(stateObj: CoverEntity) {
+  return stateObj.state === "opening";
+}
+
+export function isClosing(stateObj: CoverEntity) {
+  return stateObj.state === "closing";
+}
+
+export function isTiltOnly(stateObj: CoverEntity) {
+  const supportsCover =
+    supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
+  const supportsTilt =
+    supportsOpenTilt(stateObj) ||
+    supportsCloseTilt(stateObj) ||
+    supportsStopTilt(stateObj);
+  return supportsTilt && !supportsCover;
+}
+
+interface CoverEntityAttributes extends HassEntityAttributeBase {
+  current_position: number;
+  current_tilt_position: number;
+}
+
+export interface CoverEntity extends HassEntityBase {
+  attributes: CoverEntityAttributes;
+}
diff --git a/src/data/energy.ts b/src/data/energy.ts
index 8d203861b6..d86419e9b2 100644
--- a/src/data/energy.ts
+++ b/src/data/energy.ts
@@ -1,5 +1,6 @@
 import {
   addHours,
+  differenceInDays,
   endOfToday,
   endOfYesterday,
   startOfToday,
@@ -191,6 +192,27 @@ export const saveEnergyPreferences = async (
   return newPrefs;
 };
 
+export interface FossilEnergyConsumption {
+  [date: string]: number;
+}
+
+export const getFossilEnergyConsumption = async (
+  hass: HomeAssistant,
+  startTime: Date,
+  energy_statistic_ids: string[],
+  co2_statistic_id: string,
+  endTime?: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour"
+) =>
+  hass.callWS<FossilEnergyConsumption>({
+    type: "energy/fossil_energy_consumption",
+    start_time: startTime.toISOString(),
+    end_time: endTime?.toISOString(),
+    energy_statistic_ids,
+    co2_statistic_id,
+    period,
+  });
+
 interface EnergySourceByType {
   grid?: GridSourceTypeEnergyPreference[];
   solar?: SolarSourceTypeEnergyPreference[];
@@ -209,6 +231,7 @@ export interface EnergyData {
   stats: Statistics;
   co2SignalConfigEntry?: ConfigEntry;
   co2SignalEntity?: string;
+  fossilEnergyConsumption?: FossilEnergyConsumption;
 }
 
 const getEnergyData = async (
@@ -246,12 +269,9 @@ const getEnergyData = async (
     }
   }
 
+  const consumptionStatIDs: string[] = [];
   const statIDs: string[] = [];
 
-  if (co2SignalEntity !== undefined) {
-    statIDs.push(co2SignalEntity);
-  }
-
   for (const source of prefs.energy_sources) {
     if (source.type === "solar") {
       statIDs.push(source.stat_energy_from);
@@ -278,6 +298,7 @@ const getEnergyData = async (
 
     // grid source
     for (const flowFrom of source.flow_from) {
+      consumptionStatIDs.push(flowFrom.stat_energy_from);
       statIDs.push(flowFrom.stat_energy_from);
       if (flowFrom.stat_cost) {
         statIDs.push(flowFrom.stat_cost);
@@ -299,7 +320,44 @@ const getEnergyData = async (
     }
   }
 
-  const stats = await fetchStatistics(hass!, addHours(start, -1), end, statIDs); // Subtract 1 hour from start to get starting point data
+  const dayDifference = differenceInDays(end || new Date(), start);
+
+  // Subtract 1 hour from start to get starting point data
+  const startMinHour = addHours(start, -1);
+
+  const stats = await fetchStatistics(
+    hass!,
+    startMinHour,
+    end,
+    statIDs,
+    dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
+  );
+
+  let fossilEnergyConsumption: FossilEnergyConsumption | undefined;
+
+  if (co2SignalEntity !== undefined) {
+    fossilEnergyConsumption = await getFossilEnergyConsumption(
+      hass!,
+      start,
+      consumptionStatIDs,
+      co2SignalEntity,
+      end,
+      dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
+    );
+  }
+
+  Object.values(stats).forEach((stat) => {
+    // if the start of the first value is after the requested period, we have the first data point, and should add a zero point
+    if (stat.length && new Date(stat[0].start) > startMinHour) {
+      stat.unshift({
+        ...stat[0],
+        start: startMinHour.toISOString(),
+        end: startMinHour.toISOString(),
+        sum: 0,
+        state: 0,
+      });
+    }
+  });
 
   const data = {
     start,
@@ -309,6 +367,7 @@ const getEnergyData = async (
     stats,
     co2SignalConfigEntry,
     co2SignalEntity,
+    fossilEnergyConsumption,
   };
 
   return data;
diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts
index 7072c44227..84fdbccec5 100644
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -21,6 +21,8 @@ export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
   capabilities: Record<string, unknown>;
   original_name?: string;
   original_icon?: string;
+  device_class?: string;
+  original_device_class?: string;
 }
 
 export interface UpdateEntityRegistryEntryResult {
@@ -32,6 +34,7 @@ export interface UpdateEntityRegistryEntryResult {
 export interface EntityRegistryEntryUpdateParams {
   name?: string | null;
   icon?: string | null;
+  device_class?: string | null;
   area_id?: string | null;
   disabled_by?: string | null;
   new_entity_id?: string;
@@ -66,7 +69,7 @@ export const computeEntityRegistryName = (
     return entry.name;
   }
   const state = hass.states[entry.entity_id];
-  return state ? computeStateName(state) : null;
+  return state ? computeStateName(state) : entry.entity_id;
 };
 
 export const getExtendedEntityRegistryEntry = (
diff --git a/src/data/history.ts b/src/data/history.ts
index 843da23c62..368dbcd3dc 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -1,4 +1,3 @@
-import { addDays, addMonths, startOfDay, startOfMonth } from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
@@ -63,6 +62,7 @@ export interface Statistics {
 export interface StatisticValue {
   statistic_id: string;
   start: string;
+  end: string;
   last_reset: string | null;
   max: number | null;
   mean: number | null;
@@ -350,7 +350,7 @@ export const fetchStatistics = (
   startTime: Date,
   endTime?: Date,
   statistic_ids?: string[],
-  period: "hour" | "5minute" = "hour"
+  period: "5minute" | "hour" | "day" | "month" = "hour"
 ) =>
   hass.callWS<Statistics>({
     type: "history/statistics_during_period",
@@ -428,151 +428,3 @@ export const statisticsHaveType = (
   stats: StatisticValue[],
   type: StatisticType
 ) => stats.some((stat) => stat[type] !== null);
-
-// Merge the growth of multiple sum statistics into one
-const mergeSumGrowthStatistics = (stats: StatisticValue[][]) => {
-  const result = {};
-
-  stats.forEach((stat) => {
-    if (stat.length === 0) {
-      return;
-    }
-    let prevSum: number | null = null;
-    stat.forEach((statVal) => {
-      if (statVal.sum === null) {
-        return;
-      }
-      if (prevSum === null) {
-        prevSum = statVal.sum;
-        return;
-      }
-      const growth = statVal.sum - prevSum;
-      if (statVal.start in result) {
-        result[statVal.start] += growth;
-      } else {
-        result[statVal.start] = growth;
-      }
-      prevSum = statVal.sum;
-    });
-  });
-
-  return result;
-};
-
-/**
- * Get the growth of a statistic over the given period while applying a
- * per-period percentage.
- */
-export const calculateStatisticsSumGrowthWithPercentage = (
-  percentageStat: StatisticValue[],
-  sumStats: StatisticValue[][]
-): number | null => {
-  let sum: number | null = null;
-
-  if (sumStats.length === 0 || percentageStat.length === 0) {
-    return null;
-  }
-
-  const sumGrowthToProcess = mergeSumGrowthStatistics(sumStats);
-
-  percentageStat.forEach((percentageStatValue) => {
-    const sumGrowth = sumGrowthToProcess[percentageStatValue.start];
-    if (sumGrowth === undefined) {
-      return;
-    }
-    if (sum === null) {
-      sum = sumGrowth * (percentageStatValue.mean! / 100);
-    } else {
-      sum += sumGrowth * (percentageStatValue.mean! / 100);
-    }
-  });
-
-  return sum;
-};
-
-export const reduceSumStatisticsByDay = (
-  values: StatisticValue[]
-): StatisticValue[] => {
-  if (!values?.length) {
-    return [];
-  }
-  const result: StatisticValue[] = [];
-  if (
-    values.length > 1 &&
-    new Date(values[0].start).getDate() === new Date(values[1].start).getDate()
-  ) {
-    // add init value if the first value isn't end of previous period
-    result.push({
-      ...values[0]!,
-      start: startOfDay(addDays(new Date(values[0].start), -1)).toISOString(),
-    });
-  }
-  let lastValue: StatisticValue;
-  let prevDate: number | undefined;
-  for (const value of values) {
-    const date = new Date(value.start).getDate();
-    if (prevDate === undefined) {
-      prevDate = date;
-    }
-    if (prevDate !== date) {
-      // Last value of the day
-      result.push({
-        ...lastValue!,
-        start: startOfDay(new Date(lastValue!.start)).toISOString(),
-      });
-      prevDate = date;
-    }
-    lastValue = value;
-  }
-  // Add final value
-  result.push({
-    ...lastValue!,
-    start: startOfDay(new Date(lastValue!.start)).toISOString(),
-  });
-  return result;
-};
-
-export const reduceSumStatisticsByMonth = (
-  values: StatisticValue[]
-): StatisticValue[] => {
-  if (!values?.length) {
-    return [];
-  }
-  const result: StatisticValue[] = [];
-  if (
-    values.length > 1 &&
-    new Date(values[0].start).getMonth() ===
-      new Date(values[1].start).getMonth()
-  ) {
-    // add init value if the first value isn't end of previous period
-    result.push({
-      ...values[0]!,
-      start: startOfMonth(
-        addMonths(new Date(values[0].start), -1)
-      ).toISOString(),
-    });
-  }
-  let lastValue: StatisticValue;
-  let prevMonth: number | undefined;
-  for (const value of values) {
-    const month = new Date(value.start).getMonth();
-    if (prevMonth === undefined) {
-      prevMonth = month;
-    }
-    if (prevMonth !== month) {
-      // Last value of the month
-      result.push({
-        ...lastValue!,
-        start: startOfMonth(new Date(lastValue!.start)).toISOString(),
-      });
-      prevMonth = month;
-    }
-    lastValue = value;
-  }
-  // Add final value
-  result.push({
-    ...lastValue!,
-    start: startOfMonth(new Date(lastValue!.start)).toISOString(),
-  });
-  return result;
-};
diff --git a/src/data/scene.ts b/src/data/scene.ts
index 5851c48584..568db76998 100644
--- a/src/data/scene.ts
+++ b/src/data/scene.ts
@@ -18,10 +18,15 @@ export const SCENE_IGNORED_DOMAINS = [
   "zone",
 ];
 
-let inititialSceneEditorData: Partial<SceneConfig> | undefined;
+let inititialSceneEditorData:
+  | { config?: Partial<SceneConfig>; areaId?: string }
+  | undefined;
 
-export const showSceneEditor = (data?: Partial<SceneConfig>) => {
-  inititialSceneEditorData = data;
+export const showSceneEditor = (
+  config?: Partial<SceneConfig>,
+  areaId?: string
+) => {
+  inititialSceneEditorData = { config, areaId };
   navigate("/config/scene/edit/new");
 };
 
diff --git a/src/data/supervisor/supervisor.ts b/src/data/supervisor/supervisor.ts
index 1a38c4cbe2..20926b50ce 100644
--- a/src/data/supervisor/supervisor.ts
+++ b/src/data/supervisor/supervisor.ts
@@ -70,6 +70,42 @@ export interface Supervisor {
   localize: LocalizeFunc;
 }
 
+interface SupervisorBaseAvailableUpdates {
+  panel_path?: string;
+  update_type?: string;
+  version_latest?: string;
+}
+
+interface SupervisorAddonAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "addon";
+  icon?: string;
+  name?: string;
+}
+
+interface SupervisorCoreAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "core";
+}
+
+interface SupervisorOsAvailableUpdates extends SupervisorBaseAvailableUpdates {
+  update_type?: "os";
+}
+
+interface SupervisorSupervisorAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "supervisor";
+}
+
+export type SupervisorAvailableUpdates =
+  | SupervisorAddonAvailableUpdates
+  | SupervisorCoreAvailableUpdates
+  | SupervisorOsAvailableUpdates
+  | SupervisorSupervisorAvailableUpdates;
+
+export interface SupervisorAvailableUpdatesResponse {
+  available_updates: SupervisorAvailableUpdates[];
+}
 export const supervisorApiWsRequest = <T>(
   conn: Connection,
   request: supervisorApiRequest
@@ -139,3 +175,14 @@ export const subscribeSupervisorEvents = (
   getSupervisorEventCollection(hass.connection, key, endpoint).subscribe(
     onChange
   );
+
+export const fetchSupervisorAvailableUpdates = async (
+  hass: HomeAssistant
+): Promise<SupervisorAvailableUpdates[]> =>
+  (
+    await hass.callWS<SupervisorAvailableUpdatesResponse>({
+      type: "supervisor/api",
+      endpoint: "/supervisor/available_updates",
+      method: "get",
+    })
+  ).available_updates;
diff --git a/src/data/user.ts b/src/data/user.ts
index 7b108b3e7c..c4afd4aa68 100644
--- a/src/data/user.ts
+++ b/src/data/user.ts
@@ -13,6 +13,7 @@ export interface User {
   name: string;
   is_owner: boolean;
   is_active: boolean;
+  local_only: boolean;
   system_generated: boolean;
   group_ids: string[];
   credentials: Credential[];
@@ -22,6 +23,7 @@ export interface UpdateUserParams {
   name?: User["name"];
   is_active?: User["is_active"];
   group_ids?: User["group_ids"];
+  local_only?: boolean;
 }
 
 export const fetchUsers = async (hass: HomeAssistant) =>
@@ -33,12 +35,14 @@ export const createUser = async (
   hass: HomeAssistant,
   name: string,
   // eslint-disable-next-line: variable-name
-  group_ids?: User["group_ids"]
+  group_ids?: User["group_ids"],
+  local_only?: boolean
 ) =>
   hass.callWS<{ user: User }>({
     type: "config/auth/create",
     name,
     group_ids,
+    local_only,
   });
 
 export const updateUser = async (
diff --git a/src/data/weather.ts b/src/data/weather.ts
index 17e91ccf6c..be668288d1 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -152,17 +152,11 @@ export const getWeatherUnit = (
   hass: HomeAssistant,
   measure: string
 ): string => {
-  const lengthUnit = hass.config.unit_system.length || "";
   switch (measure) {
-    case "pressure":
-      return lengthUnit === "km" ? "hPa" : "inHg";
-    case "wind_speed":
-      return `${lengthUnit}/h`;
     case "visibility":
-    case "length":
-      return lengthUnit;
+      return hass.config.unit_system.length || "";
     case "precipitation":
-      return lengthUnit === "km" ? "mm" : "in";
+      return hass.config.unit_system.accumulated_precipitation || "";
     case "humidity":
     case "precipitation_probability":
       return "%";
diff --git a/src/data/ws-themes.ts b/src/data/ws-themes.ts
index 99a44064f9..619066e8a9 100644
--- a/src/data/ws-themes.ts
+++ b/src/data/ws-themes.ts
@@ -23,6 +23,8 @@ export interface Themes {
   // in theme picker, this property will still contain either true or false based on
   // what has been determined via system preferences and support from the selected theme.
   darkMode: boolean;
+  // Currently globally active theme name
+  theme: string;
 }
 
 const fetchThemes = (conn) =>
diff --git a/src/data/zha.ts b/src/data/zha.ts
index b8c99e0e24..d1b6f2ab97 100644
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@@ -34,7 +34,7 @@ export interface ZHADevice {
 export interface Neighbor {
   ieee: string;
   nwk: string;
-  lqi: number;
+  lqi: string;
 }
 
 export interface ZHADeviceEndpoint {
diff --git a/src/data/zwave_js.ts b/src/data/zwave_js.ts
index fbd9113d5c..9296ca8990 100644
--- a/src/data/zwave_js.ts
+++ b/src/data/zwave_js.ts
@@ -57,6 +57,45 @@ export enum SecurityClass {
   S0_Legacy = 7,
 }
 
+/** A named list of Z-Wave features */
+export enum ZWaveFeature {
+  // Available starting with Z-Wave SDK 6.81
+  SmartStart,
+}
+
+enum QRCodeVersion {
+  S2 = 0,
+  SmartStart = 1,
+}
+
+enum Protocols {
+  ZWave = 0,
+  ZWaveLongRange = 1,
+}
+export interface QRProvisioningInformation {
+  version: QRCodeVersion;
+  securityClasses: SecurityClass[];
+  dsk: string;
+  genericDeviceClass: number;
+  specificDeviceClass: number;
+  installerIconType: number;
+  manufacturerId: number;
+  productType: number;
+  productId: number;
+  applicationVersion: string;
+  maxInclusionRequestInterval?: number | undefined;
+  uuid?: string | undefined;
+  supportedProtocols?: Protocols[] | undefined;
+}
+
+export interface PlannedProvisioningEntry {
+  /** The device specific key (DSK) in the form aaaaa-bbbbb-ccccc-ddddd-eeeee-fffff-11111-22222 */
+  dsk: string;
+  security_classes: SecurityClass[];
+}
+
+export const MINIMUM_QR_STRING_LENGTH = 52;
+
 export interface ZWaveJSNodeIdentifiers {
   home_id: string;
   node_id: number;
@@ -166,6 +205,16 @@ export const enum NodeStatus {
   Alive,
 }
 
+export interface ZwaveJSProvisioningEntry {
+  /** The device specific key (DSK) in the form aaaaa-bbbbb-ccccc-ddddd-eeeee-fffff-11111-22222 */
+  dsk: string;
+  securityClasses: SecurityClass[];
+  /**
+   * Additional properties to be stored in this provisioning entry, e.g. the device ID from a scanned QR code
+   */
+  [prop: string]: any;
+}
+
 export interface RequestedGrant {
   /**
    * An array of security classes that are requested or to be granted.
@@ -197,7 +246,7 @@ export const migrateZwave = (
     dry_run,
   });
 
-export const fetchNetworkStatus = (
+export const fetchZwaveNetworkStatus = (
   hass: HomeAssistant,
   entry_id: string
 ): Promise<ZWaveJSNetwork> =>
@@ -206,7 +255,7 @@ export const fetchNetworkStatus = (
     entry_id,
   });
 
-export const fetchDataCollectionStatus = (
+export const fetchZwaveDataCollectionStatus = (
   hass: HomeAssistant,
   entry_id: string
 ): Promise<ZWaveJSDataCollectionStatus> =>
@@ -215,7 +264,7 @@ export const fetchDataCollectionStatus = (
     entry_id,
   });
 
-export const setDataCollectionPreference = (
+export const setZwaveDataCollectionPreference = (
   hass: HomeAssistant,
   entry_id: string,
   opted_in: boolean
@@ -226,25 +275,40 @@ export const setDataCollectionPreference = (
     opted_in,
   });
 
-export const subscribeAddNode = (
+export const fetchZwaveProvisioningEntries = (
+  hass: HomeAssistant,
+  entry_id: string
+): Promise<any> =>
+  hass.callWS({
+    type: "zwave_js/get_provisioning_entries",
+    entry_id,
+  });
+
+export const subscribeAddZwaveNode = (
   hass: HomeAssistant,
   entry_id: string,
   callbackFunction: (message: any) => void,
-  inclusion_strategy: InclusionStrategy = InclusionStrategy.Default
+  inclusion_strategy: InclusionStrategy = InclusionStrategy.Default,
+  qr_provisioning_information?: QRProvisioningInformation,
+  qr_code_string?: string,
+  planned_provisioning_entry?: PlannedProvisioningEntry
 ): Promise<UnsubscribeFunc> =>
   hass.connection.subscribeMessage((message) => callbackFunction(message), {
     type: "zwave_js/add_node",
     entry_id: entry_id,
     inclusion_strategy,
+    qr_code_string,
+    qr_provisioning_information,
+    planned_provisioning_entry,
   });
 
-export const stopInclusion = (hass: HomeAssistant, entry_id: string) =>
+export const stopZwaveInclusion = (hass: HomeAssistant, entry_id: string) =>
   hass.callWS({
     type: "zwave_js/stop_inclusion",
     entry_id,
   });
 
-export const grantSecurityClasses = (
+export const zwaveGrantSecurityClasses = (
   hass: HomeAssistant,
   entry_id: string,
   security_classes: SecurityClass[],
@@ -257,7 +321,7 @@ export const grantSecurityClasses = (
     client_side_auth,
   });
 
-export const validateDskAndEnterPin = (
+export const zwaveValidateDskAndEnterPin = (
   hass: HomeAssistant,
   entry_id: string,
   pin: string
@@ -268,7 +332,57 @@ export const validateDskAndEnterPin = (
     pin,
   });
 
-export const fetchNodeStatus = (
+export const zwaveSupportsFeature = (
+  hass: HomeAssistant,
+  entry_id: string,
+  feature: ZWaveFeature
+): Promise<{ supported: boolean }> =>
+  hass.callWS({
+    type: "zwave_js/supports_feature",
+    entry_id,
+    feature,
+  });
+
+export const zwaveParseQrCode = (
+  hass: HomeAssistant,
+  entry_id: string,
+  qr_code_string: string
+): Promise<QRProvisioningInformation> =>
+  hass.callWS({
+    type: "zwave_js/parse_qr_code_string",
+    entry_id,
+    qr_code_string,
+  });
+
+export const provisionZwaveSmartStartNode = (
+  hass: HomeAssistant,
+  entry_id: string,
+  qr_provisioning_information?: QRProvisioningInformation,
+  qr_code_string?: string,
+  planned_provisioning_entry?: PlannedProvisioningEntry
+): Promise<QRProvisioningInformation> =>
+  hass.callWS({
+    type: "zwave_js/provision_smart_start_node",
+    entry_id,
+    qr_code_string,
+    qr_provisioning_information,
+    planned_provisioning_entry,
+  });
+
+export const unprovisionZwaveSmartStartNode = (
+  hass: HomeAssistant,
+  entry_id: string,
+  dsk?: string,
+  node_id?: number
+): Promise<QRProvisioningInformation> =>
+  hass.callWS({
+    type: "zwave_js/unprovision_smart_start_node",
+    entry_id,
+    dsk,
+    node_id,
+  });
+
+export const fetchZwaveNodeStatus = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number
@@ -279,7 +393,7 @@ export const fetchNodeStatus = (
     node_id,
   });
 
-export const fetchNodeMetadata = (
+export const fetchZwaveNodeMetadata = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number
@@ -290,7 +404,7 @@ export const fetchNodeMetadata = (
     node_id,
   });
 
-export const fetchNodeConfigParameters = (
+export const fetchZwaveNodeConfigParameters = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number
@@ -301,7 +415,7 @@ export const fetchNodeConfigParameters = (
     node_id,
   });
 
-export const setNodeConfigParameter = (
+export const setZwaveNodeConfigParameter = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number,
@@ -320,7 +434,7 @@ export const setNodeConfigParameter = (
   return hass.callWS(data);
 };
 
-export const reinterviewNode = (
+export const reinterviewZwaveNode = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number,
@@ -335,7 +449,7 @@ export const reinterviewNode = (
     }
   );
 
-export const healNode = (
+export const healZwaveNode = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number
@@ -346,7 +460,7 @@ export const healNode = (
     node_id,
   });
 
-export const removeFailedNode = (
+export const removeFailedZwaveNode = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number,
@@ -361,7 +475,7 @@ export const removeFailedNode = (
     }
   );
 
-export const healNetwork = (
+export const healZwaveNetwork = (
   hass: HomeAssistant,
   entry_id: string
 ): Promise<UnsubscribeFunc> =>
@@ -370,7 +484,7 @@ export const healNetwork = (
     entry_id,
   });
 
-export const stopHealNetwork = (
+export const stopHealZwaveNetwork = (
   hass: HomeAssistant,
   entry_id: string
 ): Promise<UnsubscribeFunc> =>
@@ -379,7 +493,7 @@ export const stopHealNetwork = (
     entry_id,
   });
 
-export const subscribeNodeReady = (
+export const subscribeZwaveNodeReady = (
   hass: HomeAssistant,
   entry_id: string,
   node_id: number,
@@ -394,7 +508,7 @@ export const subscribeNodeReady = (
     }
   );
 
-export const subscribeHealNetworkProgress = (
+export const subscribeHealZwaveNetworkProgress = (
   hass: HomeAssistant,
   entry_id: string,
   callbackFunction: (message: ZWaveJSHealNetworkStatusMessage) => void
@@ -407,7 +521,7 @@ export const subscribeHealNetworkProgress = (
     }
   );
 
-export const getIdentifiersFromDevice = (
+export const getZwaveJsIdentifiersFromDevice = (
   device: DeviceRegistryEntry
 ): ZWaveJSNodeIdentifiers | undefined => {
   if (!device) {
diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
index f8709344e3..74e3711235 100644
--- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
@@ -39,6 +39,7 @@ export class HaImagecropperDialog extends LitElement {
     this._open = false;
     this._params = undefined;
     this._cropper?.destroy();
+    this._cropper = undefined;
   }
 
   protected updated(changedProperties: PropertyValues) {
diff --git a/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
index 6ce2090070..4f7ff03d14 100644
--- a/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
@@ -4,7 +4,7 @@ export interface CropOptions {
   round: boolean;
   type?: "image/jpeg" | "image/png";
   quality?: number;
-  aspectRatio: number;
+  aspectRatio?: number;
 }
 
 export interface HaImageCropperDialogParams {
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index a98d669cf0..dbae025e7e 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -192,7 +192,7 @@ class MoreInfoClimate extends LitElement {
           </div>
         </div>
 
-        ${supportPresetMode
+        ${supportPresetMode && stateObj.attributes.preset_modes
           ? html`
               <div class="container-preset_modes">
                 <ha-paper-dropdown-menu
@@ -220,7 +220,7 @@ class MoreInfoClimate extends LitElement {
               </div>
             `
           : ""}
-        ${supportFanMode
+        ${supportFanMode && stateObj.attributes.fan_modes
           ? html`
               <div class="container-fan_list">
                 <ha-paper-dropdown-menu
@@ -248,7 +248,7 @@ class MoreInfoClimate extends LitElement {
               </div>
             `
           : ""}
-        ${supportSwingMode
+        ${supportSwingMode && stateObj.attributes.swing_modes
           ? html`
               <div class="container-swing_list">
                 <ha-paper-dropdown-menu
diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js
deleted file mode 100644
index 6431959047..0000000000
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { attributeClassNames } from "../../../common/entity/attribute_class_names";
-import { featureClassNames } from "../../../common/entity/feature_class_names";
-import "../../../components/ha-cover-tilt-controls";
-import "../../../components/ha-labeled-slider";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import CoverEntity from "../../../util/cover-model";
-
-const FEATURE_CLASS_NAMES = {
-  4: "has-set_position",
-  128: "has-set_tilt_position",
-};
-class MoreInfoCover extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex"></style>
-      <style>
-        .current_position,
-        .tilt {
-          max-height: 0px;
-          overflow: hidden;
-        }
-
-        .has-set_position .current_position,
-        .has-current_position .current_position,
-        .has-set_tilt_position .tilt,
-        .has-current_tilt_position .tilt {
-          max-height: 208px;
-        }
-
-        [invisible] {
-          visibility: hidden !important;
-        }
-      </style>
-      <div class$="[[computeClassNames(stateObj)]]">
-        <div class="current_position">
-          <ha-labeled-slider
-            caption="[[localize('ui.card.cover.position')]]"
-            pin=""
-            value="{{coverPositionSliderValue}}"
-            disabled="[[!entityObj.supportsSetPosition]]"
-            on-change="coverPositionSliderChanged"
-          ></ha-labeled-slider>
-        </div>
-
-        <div class="tilt">
-          <ha-labeled-slider
-            caption="[[localize('ui.card.cover.tilt_position')]]"
-            pin=""
-            extra=""
-            value="{{coverTiltPositionSliderValue}}"
-            disabled="[[!entityObj.supportsSetTiltPosition]]"
-            on-change="coverTiltPositionSliderChanged"
-          >
-            <ha-cover-tilt-controls
-              slot="extra"
-              hidden$="[[entityObj.isTiltOnly]]"
-              hass="[[hass]]"
-              state-obj="[[stateObj]]"
-            ></ha-cover-tilt-controls>
-          </ha-labeled-slider>
-        </div>
-      </div>
-      <ha-attributes
-        hass="[[hass]]"
-        state-obj="[[stateObj]]"
-        extra-filters="current_position,current_tilt_position"
-      ></ha-attributes>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: {
-        type: Object,
-        observer: "stateObjChanged",
-      },
-      entityObj: {
-        type: Object,
-        computed: "computeEntityObj(hass, stateObj)",
-      },
-      coverPositionSliderValue: Number,
-      coverTiltPositionSliderValue: Number,
-    };
-  }
-
-  computeEntityObj(hass, stateObj) {
-    return new CoverEntity(hass, stateObj);
-  }
-
-  stateObjChanged(newVal) {
-    if (newVal) {
-      this.setProperties({
-        coverPositionSliderValue: newVal.attributes.current_position,
-        coverTiltPositionSliderValue: newVal.attributes.current_tilt_position,
-      });
-    }
-  }
-
-  computeClassNames(stateObj) {
-    const classes = [
-      attributeClassNames(stateObj, [
-        "current_position",
-        "current_tilt_position",
-      ]),
-      featureClassNames(stateObj, FEATURE_CLASS_NAMES),
-    ];
-    return classes.join(" ");
-  }
-
-  coverPositionSliderChanged(ev) {
-    this.entityObj.setCoverPosition(ev.target.value);
-  }
-
-  coverTiltPositionSliderChanged(ev) {
-    this.entityObj.setCoverTiltPosition(ev.target.value);
-  }
-}
-
-customElements.define("more-info-cover", MoreInfoCover);
diff --git a/src/dialogs/more-info/controls/more-info-cover.ts b/src/dialogs/more-info/controls/more-info-cover.ts
new file mode 100644
index 0000000000..61faf09af2
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-cover.ts
@@ -0,0 +1,140 @@
+import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { attributeClassNames } from "../../../common/entity/attribute_class_names";
+import { featureClassNames } from "../../../common/entity/feature_class_names";
+import "../../../components/ha-attributes";
+import "../../../components/ha-cover-tilt-controls";
+import "../../../components/ha-labeled-slider";
+import {
+  CoverEntity,
+  FEATURE_CLASS_NAMES,
+  isTiltOnly,
+  supportsSetPosition,
+  supportsSetTiltPosition,
+} from "../../../data/cover";
+import { HomeAssistant } from "../../../types";
+
+@customElement("more-info-cover")
+class MoreInfoCover extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: CoverEntity;
+
+  protected render(): TemplateResult {
+    if (!this.stateObj) {
+      return html``;
+    }
+
+    const _isTiltOnly = isTiltOnly(this.stateObj);
+
+    return html`
+      <div class=${this._computeClassNames(this.stateObj)}>
+        <div class="current_position">
+          <ha-labeled-slider
+            .caption=${this.hass.localize("ui.card.cover.position")}
+            pin=""
+            .value=${this.stateObj.attributes.current_position}
+            .disabled=${!supportsSetPosition(this.stateObj)}
+            @change=${this._coverPositionSliderChanged}
+          ></ha-labeled-slider>
+        </div>
+
+        <div class="tilt">
+          ${supportsSetTiltPosition(this.stateObj)
+            ? // Either render the labeled slider and put the tilt buttons into its slot
+              // or (if tilt position is not supported and therefore no slider is shown)
+              // render a title <div> (same style as for a labeled slider) and directly put
+              // the tilt controls on the more-info.
+              html` <ha-labeled-slider
+                .caption=${this.hass.localize("ui.card.cover.tilt_position")}
+                pin=""
+                extra=""
+                .value=${this.stateObj.attributes.current_tilt_position}
+                @change=${this._coverTiltPositionSliderChanged}
+              >
+                ${!_isTiltOnly
+                  ? html`<ha-cover-tilt-controls
+                      .hass=${this.hass}
+                      slot="extra"
+                      .stateObj=${this.stateObj}
+                    ></ha-cover-tilt-controls> `
+                  : html``}
+              </ha-labeled-slider>`
+            : !_isTiltOnly
+            ? html`
+                <div class="title">
+                  ${this.hass.localize("ui.card.cover.tilt_position")}
+                </div>
+                <ha-cover-tilt-controls
+                  .hass=${this.hass}
+                  .stateObj=${this.stateObj}
+                ></ha-cover-tilt-controls>
+              `
+            : html``}
+        </div>
+      </div>
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+        extra-filters="current_position,current_tilt_position"
+      ></ha-attributes>
+    `;
+  }
+
+  private _computeClassNames(stateObj) {
+    const classes = [
+      attributeClassNames(stateObj, [
+        "current_position",
+        "current_tilt_position",
+      ]),
+      featureClassNames(stateObj, FEATURE_CLASS_NAMES),
+    ];
+    return classes.join(" ");
+  }
+
+  private _coverPositionSliderChanged(ev) {
+    this.hass.callService("cover", "set_cover_position", {
+      entity_id: this.stateObj.entity_id,
+      position: ev.target.value,
+    });
+  }
+
+  private _coverTiltPositionSliderChanged(ev) {
+    this.hass.callService("cover", "set_cover_tilt_position", {
+      entity_id: this.stateObj.entity_id,
+      tilt_position: ev.target.value,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .current_position,
+      .tilt {
+        max-height: 0px;
+        overflow: hidden;
+      }
+
+      .has-set_position .current_position,
+      .has-current_position .current_position,
+      .has-open_tilt .tilt,
+      .has-close_tilt .tilt,
+      .has-stop_tilt .tilt,
+      .has-set_tilt_position .tilt,
+      .has-current_tilt_position .tilt {
+        max-height: 208px;
+      }
+
+      /* from ha-labeled-slider for consistent look */
+      .title {
+        margin: 5px 0 8px;
+        color: var(--primary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-cover": MoreInfoCover;
+  }
+}
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index b00a4ba695..9cbab7e1ca 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -1,3 +1,4 @@
+import { startOfYesterday } from "date-fns";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -22,6 +23,8 @@ export class MoreInfoHistory extends LitElement {
 
   @state() private _stateHistory?: HistoryResult;
 
+  private _showMoreHref = "";
+
   private _throttleGetStateHistory = throttle(() => {
     this._getStateHistory();
   }, 10000);
@@ -31,14 +34,12 @@ export class MoreInfoHistory extends LitElement {
       return html``;
     }
 
-    const href = "/history?entity_id=" + this.entityId;
-
     return html`${isComponentLoaded(this.hass, "history")
       ? html` <div class="header">
             <div class="title">
               ${this.hass.localize("ui.dialogs.more_info_control.history")}
             </div>
-            <a href=${href} @click=${this._close}
+            <a href=${this._showMoreHref} @click=${this._close}
               >${this.hass.localize(
                 "ui.dialogs.more_info_control.show_more"
               )}</a
@@ -63,6 +64,10 @@ export class MoreInfoHistory extends LitElement {
         return;
       }
 
+      this._showMoreHref = `/history?entity_id=${
+        this.entityId
+      }&start_date=${startOfYesterday().toISOString()}`;
+
       this._throttleGetStateHistory();
       return;
     }
diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts
index 5932f1502d..05bc1bfe0f 100644
--- a/src/dialogs/more-info/ha-more-info-logbook.ts
+++ b/src/dialogs/more-info/ha-more-info-logbook.ts
@@ -1,3 +1,4 @@
+import { startOfYesterday } from "date-fns";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
@@ -30,6 +31,8 @@ export class MoreInfoLogbook extends LitElement {
 
   private _error?: string;
 
+  private _showMoreHref = "";
+
   private _throttleGetLogbookEntries = throttle(() => {
     this._getLogBookData();
   }, 10000);
@@ -44,8 +47,6 @@ export class MoreInfoLogbook extends LitElement {
       return html``;
     }
 
-    const href = "/logbook?entity_id=" + this.entityId;
-
     return html`
       ${isComponentLoaded(this.hass, "logbook")
         ? this._error
@@ -67,7 +68,7 @@ export class MoreInfoLogbook extends LitElement {
                 <div class="title">
                   ${this.hass.localize("ui.dialogs.more_info_control.logbook")}
                 </div>
-                <a href=${href} @click=${this._close}
+                <a href=${this._showMoreHref} @click=${this._close}
                   >${this.hass.localize(
                     "ui.dialogs.more_info_control.show_more"
                   )}</a
@@ -106,6 +107,10 @@ export class MoreInfoLogbook extends LitElement {
         return;
       }
 
+      this._showMoreHref = `/logbook?entity_id=${
+        this.entityId
+      }&start_date=${startOfYesterday().toISOString()}`;
+
       this._throttleGetLogbookEntries();
       return;
     }
diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts
index 4efdca33ae..02abe5e731 100644
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/src/dialogs/more-info/state_more_info_control.ts
@@ -1,6 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
-  DOMAINS_HIDE_MORE_INFO,
+  DOMAINS_HIDE_DEFAULT_MORE_INFO,
   DOMAINS_WITH_MORE_INFO,
 } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -40,7 +40,7 @@ export const domainMoreInfoType = (domain: string): string => {
   if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
     return domain;
   }
-  if (DOMAINS_HIDE_MORE_INFO.includes(domain)) {
+  if (DOMAINS_HIDE_DEFAULT_MORE_INFO.includes(domain)) {
     return "hidden";
   }
   return "default";
diff --git a/src/fake_data/demo_config.ts b/src/fake_data/demo_config.ts
index b1a4d9837f..ae5a528ff3 100644
--- a/src/fake_data/demo_config.ts
+++ b/src/fake_data/demo_config.ts
@@ -10,6 +10,9 @@ export const demoConfig: HassConfig = {
     mass: "kg",
     temperature: "°C",
     volume: "L",
+    pressure: "Pa",
+    wind_speed: "m/s",
+    accumulated_precipitation: "mm",
   },
   components: [
     "notify.html5",
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index 1be324de95..0f764be982 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -201,6 +201,7 @@ export const provideHass = (
       default_dark_theme: null,
       themes: {},
       darkMode: false,
+      theme: "default",
     },
     panels: demoPanels,
     services: demoServices,
diff --git a/src/html/index.html.template b/src/html/index.html.template
index f758aa5e33..3568135740 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -39,29 +39,52 @@
     <meta name="theme-color" content="#THEMEC" />
     <meta name="color-scheme" content="dark light" />
     <style>
-      #ha-init-skeleton::before {
-        display: block;
-        content: "";
-        height: 56px;
-        background-color: #THEMEC;
-      }
       html {
-        background-color: var(--primary-background-color);
+        background-color: var(--primary-background-color, #fafafa);
+        color: var(--primary-text-color, #212121);
       }
       @media (prefers-color-scheme: dark) {
         html {
-          background-color: #111111;
-          color: #e1e1e1;
-        }
-        #ha-init-skeleton::before {
-          background-color: #1c1c1c;
+          background-color: var(--primary-background-color, #111111);
+          color: var(--primary-text-color, #e1e1e1);
         }
       }
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-weight: 400;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+      #ha-launch-screen {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      #ha-launch-screen svg {
+        width: 170px;
+        flex-shrink: 0;
+      }
+      #ha-launch-screen .ha-launch-screen-spacer {
+        flex: 1;
+      }
     </style>
   </head>
   <body>
-    <div id="ha-init-skeleton"></div>
-    <home-assistant> </home-assistant>
+    <div id="ha-launch-screen">
+      <div class="ha-launch-screen-spacer"></div>
+      <svg version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+        <rect fill="#41bdf5" width="200" height="200" ry="16.4"/>
+        <path fill="#fff" d="m38.416 165.29v-53.456h-13.901a3.7332 3.7332 0 0 1-2.662-6.3504l74.804-76.084c1.8068-1.8376 4.7612-1.8628 6.5992-0.056l0.048 0.048 39.04 39.518v-7.3188a3.1112 3.1112 0 0 1 3.1112-3.1112h12.964a3.1112 3.1112 0 0 1 3.1116 3.1112v26.855l16.627 17.047a3.7332 3.7332 0 0 1-2.6728 6.34h-13.954v53.456a3.1112 3.1112 0 0 1-3.1112 3.1112h-116.89a3.1112 3.1112 0 0 1-3.1112-3.1112zm82.556-65.304a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0176 5.996 6.0176c0.9256 0 1.802-0.2108 2.5848-0.5868l8.6072 8.6384v8.3672l-10.792 10.831v-7.936a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v11.947l-9.9932 10.029v-58.912l8.2076-8.2368a5.9544 5.9544 0 0 0 2.5848 0.5864c3.3116 0 5.996-2.694 5.996-6.0176 0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 0.9292 0.2096 1.8088 0.584 2.5944l-7.3792 7.406-7.3796-7.406a6.0116 6.0116 0 0 0 0.584-2.5944c0-3.3232-2.684-6.0172-5.9956-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172 0 3.3236 2.6844 6.0176 5.996 6.0176 0.9256 0 1.802-0.2108 2.5848-0.5864l8.2072 8.2368v42.064l-14.39-14.442v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-11.192-11.232v-11.145a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.6944-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v12.807l12.363 12.407h-7.108c-0.8232-2.3372-3.044-4.0116-5.6548-4.0116-3.3112 0-5.996 2.694-5.996 6.0172 0 3.3236 2.6848 6.0176 5.996 6.0176 2.6108 0 4.832-1.6744 5.6548-4.012h11.105l17.216 17.278v30.03l-9.1932-9.2264v-11.546a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3232-2.6844-6.0172-5.996-6.0172-3.3112 0-5.996 2.694-5.996 6.0172 0 2.62 1.6688 4.8488 3.9976 5.6748v7.5348l-13.376-13.423a6.0116 6.0116 0 0 0 0.5844-2.5944c0-3.3232-2.684-6.0172-5.996-6.0172-3.3112 0-5.9956 2.694-5.9956 6.0172s2.6844 6.0172 5.996 6.0172c0.9256 0 1.8024-0.2104 2.5848-0.5864l13.376 13.424h-7.108c-0.8232-2.3372-3.044-4.012-5.6548-4.012-3.3112 0-5.996 2.6944-5.996 6.0176s2.6848 6.0172 5.996 6.0172c2.6108 0 4.8316-1.6744 5.6548-4.0116h11.105l11.192 11.232h5.6528l11.592-11.633h10.705c0.8232 2.3368 3.044 4.0112 5.6548 4.0112 3.3112 0 5.996-2.694 5.996-6.0172s-2.6848-6.0172-5.996-6.0172c-2.6108 0-4.8316 1.6744-5.6548 4.0116h-12.361l-10.764 10.802v-13.18l12.82-12.866h20.698c0.8232 2.3372 3.044 4.0116 5.6544 4.0116 3.3116 0 5.996-2.694 5.996-6.0172 0-3.3236-2.6844-6.0176-5.996-6.0176-2.6104 0-4.8312 1.6744-5.6544 4.012h-16.702l11.963-12.006v-10.029l8.6068-8.6384a5.9544 5.9544 0 0 0 2.5852 0.5868c3.3112 0 5.996-2.6944 5.996-6.0176s-2.6848-6.0172-5.996-6.0172-5.996 2.694-5.996 6.0172c0 0.9292 0.21 1.8088 0.5844 2.5944l-5.7804 5.8016v-18.367a6.0184 6.0184 0 0 0 3.9972-5.6748c0-3.3236-2.6844-6.0176-5.996-6.0176-3.3112 0-5.996 2.694-5.996 6.0176 0 2.62 1.6688 4.8488 3.9976 5.6748v18.366l-5.7808-5.8016zm-51.78 57.58c-1.3244 0-2.3984-1.0776-2.3984-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm17.588-18.052c-1.3248 0-2.3988-1.0776-2.3988-2.4068s1.074-2.4068 2.3984-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4068-2.3984 2.4068zm-20.786-2.808c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm-1.9988-20.058c-1.3244 0-2.398-1.0776-2.398-2.4072 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm49.964 2.808c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm27.181 18.453c-1.324 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-10.392 19.255c-1.3248 0-2.3984-1.0776-2.3984-2.4068s1.0736-2.4068 2.3984-2.4068c1.3244 0 2.3984 1.0776 2.3984 2.4068s-1.074 2.4068-2.3984 2.4068zm11.192-57.364c-1.3244 0-2.3984-1.078-2.3984-2.4072s1.074-2.4068 2.3984-2.4068 2.3984 1.0776 2.3984 2.4068-1.074 2.4072-2.3984 2.4072zm-13.191-15.645c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm-15.989-9.628c-1.3244 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-25.582 0c-1.324 0-2.398-1.0772-2.398-2.4068 0-1.3292 1.0736-2.4068 2.398-2.4068 1.3248 0 2.3984 1.0776 2.3984 2.4068 0 1.3296-1.0736 2.4072-2.3984 2.4072zm-20.785 9.2268c-1.3244 0-2.3984-1.0776-2.3984-2.4068 0-1.3296 1.074-2.4072 2.3984-2.4072s2.3984 1.0776 2.3984 2.4072c0 1.3292-1.074 2.4068-2.3984 2.4068zm15.189 14.843c-1.3244 0-2.398-1.0776-2.398-2.4068 0-1.3296 1.0736-2.4072 2.398-2.4072 1.3248 0 2.3984 1.0776 2.3984 2.4072 0 1.3292-1.0736 2.4068-2.3984 2.4068zm33.976 1.2036c-1.324 0-2.398-1.078-2.398-2.4072s1.0736-2.4068 2.398-2.4068c1.3248 0 2.3984 1.0776 2.3984 2.4068s-1.0736 2.4072-2.3984 2.4072z"/>
+      </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') %>
diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts
index 0a4e730fde..305bc18c84 100644
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,43 +1,52 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { property } from "lit/decorators";
-import "../components/ha-circular-progress";
-import { removeInitSkeleton } from "../util/init-skeleton";
+import { property, state } from "lit/decorators";
 
 class HaInitPage extends LitElement {
   @property({ type: Boolean }) public error = false;
 
+  @state() showProgressIndicator = false;
+
+  private _showProgressIndicatorTimeout;
+
   protected render() {
-    return html`
-      <div>
-        <img src="/static/icons/favicon-192x192.png" height="192" />
-        ${this.error
-          ? html`
-              <p>Unable to connect to Home Assistant.</p>
-              <mwc-button @click=${this._retry}>Retry</mwc-button>
-              ${location.host.includes("ui.nabu.casa")
-                ? html`
-                    <p>
-                      It is possible that you are seeing this screen because
-                      your Home Assistant is not currently connected. You can
-                      ask it to come online from your
-                      <a href="https://account.nabucasa.com/"
-                        >Naba Casa account page</a
-                      >.
-                    </p>
-                  `
-                : ""}
-            `
-          : html`
-              <ha-circular-progress active></ha-circular-progress>
-              <p>Loading data</p>
-            `}
-      </div>
-    `;
+    return this.error
+      ? html`
+          <p>Unable to connect to Home Assistant.</p>
+          <mwc-button @click=${this._retry}>Retry</mwc-button>
+          ${location.host.includes("ui.nabu.casa")
+            ? html`
+                <p>
+                  It is possible that you are seeing this screen because your
+                  Home Assistant is not currently connected. You can ask it to
+                  come online from your
+                  <a href="https://account.nabucasa.com/"
+                    >Nabu Casa account page</a
+                  >.
+                </p>
+              `
+            : ""}
+        `
+      : html`
+          <div id="progress-indicator-wrapper">
+            ${this.showProgressIndicator
+              ? html`<ha-circular-progress active></ha-circular-progress>`
+              : ""}
+          </div>
+          <div id="loading-text">Loading data</div>
+        `;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._showProgressIndicatorTimeout);
   }
 
   protected firstUpdated() {
-    removeInitSkeleton();
+    this._showProgressIndicatorTimeout = setTimeout(async () => {
+      await import("../components/ha-circular-progress");
+      this.showProgressIndicator = true;
+    }, 5000);
   }
 
   private _retry() {
@@ -46,20 +55,23 @@ class HaInitPage extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      div {
-        height: 100%;
+      :host {
+        flex: 0;
         display: flex;
         flex-direction: column;
-        justify-content: center;
         align-items: center;
       }
-      ha-circular-progress {
-        margin-top: 9px;
+      #progress-indicator-wrapper {
+        display: flex;
+        align-items: center;
+        margin: 25px 0;
+        height: 50px;
       }
       a {
         color: var(--primary-color);
       }
-      p {
+      p,
+      #loading-text {
         max-width: 350px;
         color: var(--primary-text-color);
       }
@@ -68,3 +80,9 @@ class HaInitPage extends LitElement {
 }
 
 customElements.define("ha-init-page", HaInitPage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-init-page": HaInitPage;
+  }
+}
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 58c4c376aa..ca25c6669b 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -13,6 +13,8 @@ class HassSubpage extends LitElement {
 
   @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
 
+  @property({ type: String, attribute: "back-path" }) public backPath?: string;
+
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
   @property({ type: Boolean }) public supervisor = false;
@@ -31,6 +33,14 @@ class HassSubpage extends LitElement {
                 .narrow=${this.narrow}
               ></ha-menu-button>
             `
+          : this.backPath
+          ? html`
+              <a href=${this.backPath}>
+                <ha-icon-button-arrow-prev
+                  .hass=${this.hass}
+                ></ha-icon-button-arrow-prev>
+              </a>
+            `
           : html`
               <ha-icon-button-arrow-prev
                 .hass=${this.hass}
@@ -80,6 +90,10 @@ class HassSubpage extends LitElement {
         border-bottom: var(--app-header-border-bottom, none);
         box-sizing: border-box;
       }
+      .toolbar a {
+        color: var(--sidebar-text-color);
+        text-decoration: none;
+      }
 
       ha-menu-button,
       ha-icon-button-arrow-prev,
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 9b009aefc9..0054e2dbbf 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -24,10 +24,13 @@ export interface PageNavigation {
   path: string;
   translationKey?: string;
   component?: string;
+  components?: string[];
   name?: string;
   core?: boolean;
   advancedOnly?: boolean;
   iconPath?: string;
+  description?: string;
+  iconColor?: string;
   info?: any;
 }
 
@@ -85,7 +88,7 @@ class HassTabsSubpage extends LitElement {
             <a href=${page.path}>
               <ha-tab
                 .hass=${this.hass}
-                .active=${page === activeTab}
+                .active=${page.path === activeTab?.path}
                 .narrow=${this.narrow}
                 .name=${page.translationKey
                   ? localizeFunc(page.translationKey)
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 42a43d4acd..39339c4486 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -88,6 +88,7 @@ class HomeAssistantMain extends LitElement {
           <ha-sidebar
             .hass=${hass}
             .narrow=${sidebarNarrow}
+            .route=${this.route}
             .editMode=${this._sidebarEditMode}
             .alwaysExpand=${sidebarNarrow ||
             this.hass.dockedSidebar === "docked"}
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index 4c31f66f72..bb452d1781 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -8,6 +8,10 @@ import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
 import { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
+import {
+  renderLaunchScreenInfoBox,
+  removeLaunchScreen,
+} from "../util/launch-screen";
 import {
   registerServiceWorker,
   supportsServiceWorker,
@@ -40,6 +44,8 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
 
   private _visiblePromiseResolve?: () => void;
 
+  private _visibleLaunchScreen = true;
+
   constructor() {
     super();
     const path = curPath();
@@ -55,16 +61,26 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
   }
 
   protected render() {
-    const hass = this.hass;
+    if (this._isHassComplete() && this.hass) {
+      return html`
+        <home-assistant-main
+          .hass=${this.hass}
+          .route=${this._route}
+        ></home-assistant-main>
+      `;
+    }
 
-    return hass && hass.states && hass.config && hass.services
-      ? html`
-          <home-assistant-main
-            .hass=${this.hass}
-            .route=${this._route}
-          ></home-assistant-main>
-        `
-      : html`<ha-init-page .error=${this._error}></ha-init-page>`;
+    return "";
+  }
+
+  update(changedProps) {
+    super.update(changedProps);
+
+    // Remove launch screen if main gui is loaded
+    if (this._isHassComplete() && this._visibleLaunchScreen) {
+      this._visibleLaunchScreen = false;
+      removeLaunchScreen();
+    }
   }
 
   protected firstUpdated(changedProps) {
@@ -109,6 +125,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
         navigate(href);
       }
     });
+
+    // Render launch screen info box (loading data / error message)
+    if (!this._isHassComplete() && this._visibleLaunchScreen) {
+      renderLaunchScreenInfoBox(
+        html`<ha-init-page .error=${this._error}></ha-init-page>`
+      );
+    }
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -229,6 +252,14 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       this._visiblePromiseResolve = undefined;
     }
   }
+
+  private _isHassComplete(): boolean {
+    if (this.hass?.states && this.hass.config && this.hass.services) {
+      return true;
+    }
+
+    return false;
+  }
 }
 
 declare global {
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index b3d1a72b6a..48b44a0b28 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -11,7 +11,7 @@ import { deepEqual } from "../common/util/deep-equal";
 import { getDefaultPanel } from "../data/panel";
 import { CustomPanelInfo } from "../data/panel_custom";
 import { HomeAssistant, Panels } from "../types";
-import { removeInitSkeleton } from "../util/init-skeleton";
+import { removeLaunchScreen } from "../util/launch-screen";
 import {
   HassRouterPage,
   RouteOptions,
@@ -226,7 +226,7 @@ class PartialPanelResolver extends HassRouterPage {
     ) {
       await this.rebuild();
       await this.pageRendered;
-      removeInitSkeleton();
+      removeLaunchScreen();
     }
   }
 }
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index cc73fcffb9..eb01f05877 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -13,12 +13,11 @@ import { extractSearchParamsObject } from "../common/url/search-params";
 import { subscribeOne } from "../common/util/subscribe-one";
 import { AuthUrlSearchParams, hassUrl } from "../data/auth";
 import {
-  InstallationType,
+  fetchInstallationType,
   fetchOnboardingOverview,
   OnboardingResponses,
   OnboardingStep,
   onboardIntegrationStep,
-  fetchInstallationType,
 } from "../data/onboarding";
 import { subscribeUser } from "../data/ws-user";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
@@ -69,8 +68,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
 
   @state() private _steps?: OnboardingStep[];
 
-  @state() private _installation_type?: InstallationType;
-
   protected render(): TemplateResult {
     const step = this._curStep()!;
 
@@ -90,7 +87,6 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
           ? html`<onboarding-restore-backup
               .localize=${this.localize}
               .restoring=${this._restoring}
-              .installtionType=${this._installation_type}
               @restoring=${this._restoringBackup}
             >
             </onboarding-restore-backup>`
@@ -137,17 +133,13 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
       import("./particles");
     }
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(
-        document.documentElement,
-        {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
+      applyThemesOnElement(document.documentElement, {
+        default_theme: "default",
+        default_dark_theme: null,
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      });
     }
   }
 
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index d0f61cfbbc..b18f14653f 100644
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -2,13 +2,16 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+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 { createCurrencyListEl } from "../components/currency-datalist";
 import "../components/map/ha-locations-editor";
-import type { MarkerLocation } from "../components/map/ha-locations-editor";
+import type {
+  HaLocationsEditor,
+  MarkerLocation,
+} from "../components/map/ha-locations-editor";
 import { createTimezoneListEl } from "../components/timezone-datalist";
 import {
   ConfigUpdateValues,
@@ -25,6 +28,7 @@ import type { HaRadio } from "../components/ha-radio";
 
 const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");
+const locationMarkerId = "location";
 
 @customElement("onboarding-core-config")
 class OnboardingCoreConfig extends LitElement {
@@ -46,6 +50,8 @@ class OnboardingCoreConfig extends LitElement {
 
   @state() private _timeZone?: string;
 
+  @query("ha-locations-editor", true) private map!: HaLocationsEditor;
+
   protected render(): TemplateResult {
     return html`
       <p>
@@ -268,7 +274,7 @@ class OnboardingCoreConfig extends LitElement {
   private _markerLocation = memoizeOne(
     (location: [number, number]): MarkerLocation[] => [
       {
-        id: "location",
+        id: locationMarkerId,
         latitude: location[0],
         longitude: location[1],
         location_editable: true,
@@ -304,6 +310,15 @@ class OnboardingCoreConfig extends LitElement {
       const values = await detectCoreConfig(this.hass);
 
       if (values.latitude && values.longitude) {
+        this.map.addEventListener(
+          "markers-updated",
+          () => {
+            this.map.fitMarker(locationMarkerId);
+          },
+          {
+            once: true,
+          }
+        );
         this._location = [Number(values.latitude), Number(values.longitude)];
       }
       if (values.elevation) {
diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts
index d9f1eca9fe..bec0c77479 100644
--- a/src/onboarding/onboarding-create-user.ts
+++ b/src/onboarding/onboarding-create-user.ts
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { genClientId } from "home-assistant-js-websocket";
 import {
   css,
@@ -9,168 +8,116 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
+import "../components/ha-form/ha-form";
+import type { HaForm } from "../components/ha-form/ha-form";
+import { HaFormDataContainer, HaFormSchema } from "../components/ha-form/types";
 import { onboardUserStep } from "../data/onboarding";
 import { PolymerChangedEvent } from "../polymer-types";
 
+const CREATE_USER_SCHEMA: HaFormSchema[] = [
+  { type: "string", name: "name", required: true },
+  { type: "string", name: "username", required: true },
+  { type: "string", name: "password", required: true },
+  { type: "string", name: "password_confirm", required: true },
+];
+
 @customElement("onboarding-create-user")
 class OnboardingCreateUser extends LitElement {
   @property() public localize!: LocalizeFunc;
 
   @property() public language!: string;
 
-  @state() private _name = "";
-
-  @state() private _username = "";
-
-  @state() private _password = "";
-
-  @state() private _passwordConfirm = "";
-
   @state() private _loading = false;
 
-  @state() private _errorMsg?: string = undefined;
+  @state() private _errorMsg?: string;
+
+  @state() private _formError: Record<string, string> = {};
+
+  @state() private _newUser: HaFormDataContainer = {};
+
+  @query("ha-form", true) private _form?: HaForm;
 
   protected render(): TemplateResult {
     return html`
-    <p>
-      ${this.localize("ui.panel.page-onboarding.intro")}
-    </p>
+      <p>${this.localize("ui.panel.page-onboarding.intro")}</p>
+      <p>${this.localize("ui.panel.page-onboarding.user.intro")}</p>
 
-    <p>
-      ${this.localize("ui.panel.page-onboarding.user.intro")}
-    </p>
+      ${this._errorMsg
+        ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
+        : ""}
 
-    ${
-      this._errorMsg
-        ? html`
-            <p class="error">
-              ${this.localize(
-                `ui.panel.page-onboarding.user.error.${this._errorMsg}`
-              ) || this._errorMsg}
-            </p>
-          `
-        : ""
-    }
-
-    <form>
-      <paper-input
-        name="name"
-        label=${this.localize("ui.panel.page-onboarding.user.data.name")}
-        .value=${this._name}
+      <ha-form
+        .computeLabel=${this._computeLabel(this.localize)}
+        .data=${this._newUser}
+        .disabled=${this._loading}
+        .error=${this._formError}
+        .schema=${CREATE_USER_SCHEMA}
         @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='on'
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-        @blur=${this._maybePopulateUsername}
-      ></paper-input>
+      ></ha-form>
 
-      <paper-input
-        name="username"
-        label=${this.localize("ui.panel.page-onboarding.user.data.username")}
-        value=${this._username}
-        @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='none'
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-      ></paper-input>
-
-      <paper-input
-        name="password"
-        label=${this.localize("ui.panel.page-onboarding.user.data.password")}
-        value=${this._password}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        auto-validate
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-      ></paper-input>
-
-      <paper-input
-        name="passwordConfirm"
-        label=${this.localize(
-          "ui.panel.page-onboarding.user.data.password_confirm"
-        )}
-        value=${this._passwordConfirm}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        .invalid=${
-          this._password !== "" &&
-          this._passwordConfirm !== "" &&
-          this._passwordConfirm !== this._password
-        }
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.error.password_not_match"
-        )}
-      ></paper-input>
-
-      <p class="action">
-        <mwc-button
-          raised
-          @click=${this._submitForm}
-          .disabled=${this._loading}
-        >
-          ${this.localize("ui.panel.page-onboarding.user.create_account")}
-        </mwc-button>
-      </p>
-    </div>
-  </form>
-`;
+      <mwc-button
+        raised
+        @click=${this._submitForm}
+        .disabled=${this._loading ||
+        !this._newUser.name ||
+        !this._newUser.username ||
+        !this._newUser.password}
+      >
+        ${this.localize("ui.panel.page-onboarding.user.create_account")}
+      </mwc-button>
+    `;
   }
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    setTimeout(
-      () => this.shadowRoot!.querySelector("paper-input")!.focus(),
-      100
-    );
+    setTimeout(() => this._form?.focus(), 100);
     this.addEventListener("keypress", (ev) => {
-      if (ev.keyCode === 13) {
+      if (
+        ev.keyCode === 13 &&
+        this._newUser.name &&
+        this._newUser.username &&
+        this._newUser.password &&
+        this._newUser.password_confirm
+      ) {
         this._submitForm(ev);
       }
     });
   }
 
-  private _handleValueChanged(ev: PolymerChangedEvent<string>): void {
-    const name = (ev.target as any).name;
-    this[`_${name}`] = ev.detail.value;
+  private _computeLabel(localize) {
+    return (schema: HaFormSchema) =>
+      localize(`ui.panel.page-onboarding.user.data.${schema.name}`);
+  }
+
+  private _handleValueChanged(
+    ev: PolymerChangedEvent<HaFormDataContainer>
+  ): void {
+    this._newUser = ev.detail.value;
+    this._maybePopulateUsername();
+    this._formError.password_confirm =
+      this._newUser.password !== this._newUser.password_confirm
+        ? this.localize(
+            "ui.panel.page-onboarding.user.error.password_not_match"
+          )
+        : "";
   }
 
   private _maybePopulateUsername(): void {
-    if (this._username) {
+    if (!this._newUser.name || this._newUser.name === this._newUser.username) {
       return;
     }
 
-    const parts = this._name.split(" ");
-
+    const parts = String(this._newUser.name).split(" ");
     if (parts.length) {
-      this._username = parts[0].toLowerCase();
+      this._newUser.username = parts[0].toLowerCase();
     }
   }
 
   private async _submitForm(ev): Promise<void> {
     ev.preventDefault();
-    if (!this._name || !this._username || !this._password) {
-      this._errorMsg = "required_fields";
-      return;
-    }
-
-    if (this._password !== this._passwordConfirm) {
-      this._errorMsg = "password_not_match";
-      return;
-    }
-
     this._loading = true;
     this._errorMsg = "";
 
@@ -179,9 +126,9 @@ class OnboardingCreateUser extends LitElement {
 
       const result = await onboardUserStep({
         client_id: clientId,
-        name: this._name,
-        username: this._username,
-        password: this._password,
+        name: String(this._newUser.name),
+        username: String(this._newUser.username),
+        password: String(this._newUser.password),
         language: this.language,
       });
 
@@ -199,13 +146,11 @@ class OnboardingCreateUser extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      .error {
-        color: red;
-      }
-
-      .action {
-        margin: 32px 0 16px;
+      mwc-button {
+        margin: 32px 0 0;
         text-align: center;
+        display: block;
+        text-align: right;
       }
     `;
   }
diff --git a/src/onboarding/onboarding-restore-backup.ts b/src/onboarding/onboarding-restore-backup.ts
index fdd6cd9286..658593f5c9 100644
--- a/src/onboarding/onboarding-restore-backup.ts
+++ b/src/onboarding/onboarding-restore-backup.ts
@@ -2,15 +2,15 @@ import "@material/mwc-button/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../hassio/src/components/hassio-ansi-to-html";
-import { showHassioBackupDialog } from "../../hassio/src/dialogs/backup/show-dialog-hassio-backup";
 import { showBackupUploadDialog } from "../../hassio/src/dialogs/backup/show-dialog-backup-upload";
+import { showHassioBackupDialog } from "../../hassio/src/dialogs/backup/show-dialog-hassio-backup";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
+import { fetchInstallationType } from "../data/onboarding";
 import { makeDialogManager } from "../dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin";
 import { haStyle } from "../resources/styles";
 import "./onboarding-loading";
-import { fetchInstallationType, InstallationType } from "../data/onboarding";
 
 declare global {
   interface HASSDomEvents {
@@ -26,9 +26,6 @@ class OnboardingRestoreBackup extends ProvideHassLitMixin(LitElement) {
 
   @property({ type: Boolean }) public restoring = false;
 
-  @property({ attribute: false })
-  public installationType?: InstallationType;
-
   protected render(): TemplateResult {
     return this.restoring
       ? html`<ha-card
diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts
index f2fc039470..9bbb35de18 100644
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@@ -3,19 +3,31 @@ import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
 import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-alert";
+import "../../../components/ha-picture-upload";
+import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
+import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
 
+const cropOptions: CropOptions = {
+  round: false,
+  type: "image/jpeg",
+  quality: 0.75,
+  aspectRatio: 1.78,
+};
+
 class DialogAreaDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _name!: string;
 
+  @state() private _picture!: string | null;
+
   @state() private _error?: string;
 
   @state() private _params?: AreaRegistryDetailDialogParams;
@@ -28,6 +40,7 @@ class DialogAreaDetail extends LitElement {
     this._params = params;
     this._error = undefined;
     this._name = this._params.entry ? this._params.entry.name : "";
+    this._picture = this._params.entry?.picture || null;
     await this.updateComplete;
   }
 
@@ -55,7 +68,9 @@ class DialogAreaDetail extends LitElement {
         )}
       >
         <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._error
+            ? html` <ha-alert alert-type="error">${this._error}</ha-alert> `
+            : ""}
           <div class="form">
             ${entry
               ? html`
@@ -78,6 +93,13 @@ class DialogAreaDetail extends LitElement {
               )}
               .invalid=${nameInvalid}
             ></paper-input>
+            <ha-picture-upload
+              .hass=${this.hass}
+              .value=${this._picture}
+              crop
+              .cropOptions=${cropOptions}
+              @change=${this._pictureChanged}
+            ></ha-picture-upload>
           </div>
         </div>
         ${entry
@@ -120,18 +142,24 @@ class DialogAreaDetail extends LitElement {
     this._name = ev.detail.value;
   }
 
+  private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
+    this._error = undefined;
+    this._picture = (ev.target as HaPictureUpload).value;
+  }
+
   private async _updateEntry() {
     this._submitting = true;
     try {
       const values: AreaRegistryEntryMutableParams = {
         name: this._name.trim(),
+        picture: this._picture,
       };
       if (this._params!.entry) {
         await this._params!.updateEntry!(values);
       } else {
         await this._params!.createEntry!(values);
       }
-      this._params = undefined;
+      this.closeDialog();
     } catch (err: any) {
       this._error =
         err.message ||
@@ -145,13 +173,11 @@ class DialogAreaDetail extends LitElement {
     this._submitting = true;
     try {
       if (await this._params!.removeEntry!()) {
-        this._params = undefined;
+        this.closeDialog();
       }
     } finally {
       this._submitting = false;
     }
-
-    navigate("/config/areas/dashboard");
   }
 
   static get styles(): CSSResultGroup {
@@ -161,9 +187,6 @@ class DialogAreaDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        .error {
-          color: var(--error-color);
-        }
       `,
     ];
   }
diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts
index ece1334bce..be0db42577 100644
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -1,13 +1,17 @@
 import "@material/mwc-button";
-import { mdiCog } from "@mdi/js";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-next";
 import {
   AreaRegistryEntry,
   deleteAreaRegistryEntry,
@@ -31,6 +35,11 @@ import {
   loadAreaRegistryDetailDialog,
   showAreaRegistryDetailDialog,
 } from "./show-dialog-area-registry-detail";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { SceneEntity } from "../../../data/scene";
+import { ScriptEntity } from "../../../data/script";
+import { AutomationEntity } from "../../../data/automation";
+import { groupBy } from "../../../common/util/group-by";
 
 @customElement("ha-config-area-page")
 class HaConfigAreaPage extends LitElement {
@@ -127,32 +136,70 @@ class HaConfigAreaPage extends LitElement {
       this.entities
     );
 
+    const grouped = groupBy(entities, (entity) =>
+      computeDomain(entity.entity_id)
+    );
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
       >
-        ${this.narrow ? html` <span slot="header"> ${area.name} </span> ` : ""}
-
-        <ha-icon-button
-          slot="toolbar-icon"
-          .path=${mdiCog}
-          .entry=${area}
-          @click=${this._showSettings}
-          .label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
-        ></ha-icon-button>
+        ${this.narrow
+          ? html`<span slot="header"> ${area.name} </span>
+              <ha-icon-button
+                .path=${mdiPencil}
+                .entry=${area}
+                @click=${this._showSettings}
+                slot="toolbar-icon"
+                .label=${this.hass.localize(
+                  "ui.panel.config.areas.edit_settings"
+                )}
+              ></ha-icon-button>`
+          : ""}
 
         <div class="container">
           ${!this.narrow
             ? html`
                 <div class="fullwidth">
-                  <h1>${area.name}</h1>
+                  <h1>
+                    ${area.name}
+                    <ha-icon-button
+                      .path=${mdiPencil}
+                      .entry=${area}
+                      @click=${this._showSettings}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.areas.edit_settings"
+                      )}
+                    ></ha-icon-button>
+                  </h1>
                 </div>
               `
             : ""}
           <div class="column">
+            ${area.picture
+              ? html`<div class="img-container">
+                  <img src=${area.picture} /><ha-icon-button
+                    .path=${mdiPencil}
+                    .entry=${area}
+                    @click=${this._showSettings}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.areas.edit_settings"
+                    )}
+                    class="img-edit-btn"
+                  ></ha-icon-button>
+                </div>`
+              : html`<mwc-button
+                  .entry=${area}
+                  @click=${this._showSettings}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.areas.add_picture"
+                  )}
+                >
+                  <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
+                </mwc-button>`}
             <ha-card
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
@@ -181,20 +228,24 @@ class HaConfigAreaPage extends LitElement {
               .header=${this.hass.localize(
                 "ui.panel.config.areas.editor.linked_entities_caption"
               )}
-              >${entities.length
-                ? entities.map(
-                    (entity) =>
-                      html`
-                        <paper-item
-                          @click=${this._openEntity}
-                          .entity=${entity}
-                        >
-                          <paper-item-body>
-                            ${computeEntityRegistryName(this.hass, entity)}
-                          </paper-item-body>
-                          <ha-icon-next></ha-icon-next>
-                        </paper-item>
-                      `
+            >
+              ${entities.length
+                ? entities.map((entity) =>
+                    ["scene", "script", "automation"].includes(
+                      computeDomain(entity.entity_id)
+                    )
+                      ? ""
+                      : html`
+                          <paper-item
+                            @click=${this._openEntity}
+                            .entity=${entity}
+                          >
+                            <paper-item-body>
+                              ${computeEntityRegistryName(this.hass, entity)}
+                            </paper-item-body>
+                            <ha-icon-next></ha-icon-next>
+                          </paper-item>
+                        `
                   )
                 : html`
                     <paper-item class="no-link"
@@ -212,48 +263,44 @@ class HaConfigAreaPage extends LitElement {
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.automation.automations"
                     )}
-                    >${this._related?.automation?.length
-                      ? this._related.automation.map((automation) => {
-                          const entityState = this.hass.states[automation];
-                          return entityState
-                            ? html`
-                                <div>
-                                  <a
-                                    href=${ifDefined(
-                                      entityState.attributes.id
-                                        ? `/config/automation/edit/${entityState.attributes.id}`
-                                        : undefined
-                                    )}
-                                  >
-                                    <paper-item
-                                      .disabled=${!entityState.attributes.id}
-                                    >
-                                      <paper-item-body>
-                                        ${computeStateName(entityState)}
-                                      </paper-item-body>
-                                      <ha-icon-next></ha-icon-next>
-                                    </paper-item>
-                                  </a>
-                                  ${!entityState.attributes.id
-                                    ? html`
-                                        <paper-tooltip animation-delay="0">
-                                          ${this.hass.localize(
-                                            "ui.panel.config.devices.cant_edit"
-                                          )}
-                                        </paper-tooltip>
-                                      `
-                                    : ""}
-                                </div>
-                              `
-                            : "";
-                        })
-                      : html`
+                  >
+                    ${grouped.automation?.length
+                      ? html`<h3>Assigned to this area:</h3>
+                          ${grouped.automation.map((entity) => {
+                            const entityState = this.hass.states[
+                              entity.entity_id
+                            ] as AutomationEntity | undefined;
+                            return entityState
+                              ? this._renderAutomation(entityState)
+                              : "";
+                          })}`
+                      : ""}
+                    ${this._related?.automation?.filter(
+                      (entityId) =>
+                        !grouped.automation?.find(
+                          (entity) => entity.entity_id === entityId
+                        )
+                    ).length
+                      ? html`<h3>Targeting this area:</h3>
+                          ${this._related.automation.map((scene) => {
+                            const entityState = this.hass.states[scene] as
+                              | AutomationEntity
+                              | undefined;
+                            return entityState
+                              ? this._renderAutomation(entityState)
+                              : "";
+                          })}`
+                      : ""}
+                    ${!grouped.automation?.length &&
+                    !this._related?.automation?.length
+                      ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
                               "ui.panel.config.devices.automation.no_automations"
                             )}</paper-item
                           >
-                        `}
+                        `
+                      : ""}
                   </ha-card>
                 `
               : ""}
@@ -265,48 +312,40 @@ class HaConfigAreaPage extends LitElement {
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.scene.scenes"
                     )}
-                    >${this._related?.scene?.length
-                      ? this._related.scene.map((scene) => {
-                          const entityState = this.hass.states[scene];
-                          return entityState
-                            ? html`
-                                <div>
-                                  <a
-                                    href=${ifDefined(
-                                      entityState.attributes.id
-                                        ? `/config/scene/edit/${entityState.attributes.id}`
-                                        : undefined
-                                    )}
-                                  >
-                                    <paper-item
-                                      .disabled=${!entityState.attributes.id}
-                                    >
-                                      <paper-item-body>
-                                        ${computeStateName(entityState)}
-                                      </paper-item-body>
-                                      <ha-icon-next></ha-icon-next>
-                                    </paper-item>
-                                  </a>
-                                  ${!entityState.attributes.id
-                                    ? html`
-                                        <paper-tooltip animation-delay="0">
-                                          ${this.hass.localize(
-                                            "ui.panel.config.devices.cant_edit"
-                                          )}
-                                        </paper-tooltip>
-                                      `
-                                    : ""}
-                                </div>
-                              `
-                            : "";
-                        })
-                      : html`
+                  >
+                    ${grouped.scene?.length
+                      ? html`<h3>Assigned to this area:</h3>
+                          ${grouped.scene.map((entity) => {
+                            const entityState =
+                              this.hass.states[entity.entity_id];
+                            return entityState
+                              ? this._renderScene(entityState)
+                              : "";
+                          })}`
+                      : ""}
+                    ${this._related?.scene?.filter(
+                      (entityId) =>
+                        !grouped.scene?.find(
+                          (entity) => entity.entity_id === entityId
+                        )
+                    ).length
+                      ? html`<h3>Targeting this area:</h3>
+                          ${this._related.scene.map((scene) => {
+                            const entityState = this.hass.states[scene];
+                            return entityState
+                              ? this._renderScene(entityState)
+                              : "";
+                          })}`
+                      : ""}
+                    ${!grouped.scene?.length && !this._related?.scene?.length
+                      ? html`
                           <paper-item class="no-link"
                             >${this.hass.localize(
                               "ui.panel.config.devices.scene.no_scenes"
                             )}</paper-item
                           >
-                        `}
+                        `
+                      : ""}
                   </ha-card>
                 `
               : ""}
@@ -316,31 +355,43 @@ class HaConfigAreaPage extends LitElement {
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.script.scripts"
                     )}
-                    >${this._related?.script?.length
-                      ? this._related.script.map((script) => {
-                          const entityState = this.hass.states[script];
-                          return entityState
-                            ? html`
-                                <a
-                                  href=${`/config/script/edit/${entityState.entity_id}`}
-                                >
-                                  <paper-item>
-                                    <paper-item-body>
-                                      ${computeStateName(entityState)}
-                                    </paper-item-body>
-                                    <ha-icon-next></ha-icon-next>
-                                  </paper-item>
-                                </a>
-                              `
-                            : "";
-                        })
-                      : html`
-                          <paper-item class="no-link">
-                            ${this.hass.localize(
+                  >
+                    ${grouped.script?.length
+                      ? html`<h3>Assigned to this area:</h3>
+                          ${grouped.script.map((entity) => {
+                            const entityState = this.hass.states[
+                              entity.entity_id
+                            ] as ScriptEntity | undefined;
+                            return entityState
+                              ? this._renderScript(entityState)
+                              : "";
+                          })}`
+                      : ""}
+                    ${this._related?.script?.filter(
+                      (entityId) =>
+                        !grouped.script?.find(
+                          (entity) => entity.entity_id === entityId
+                        )
+                    ).length
+                      ? html`<h3>Targeting this area:</h3>
+                          ${this._related.script.map((scene) => {
+                            const entityState = this.hass.states[scene] as
+                              | ScriptEntity
+                              | undefined;
+                            return entityState
+                              ? this._renderScript(entityState)
+                              : "";
+                          })}`
+                      : ""}
+                    ${!grouped.script?.length && !this._related?.script?.length
+                      ? html`
+                          <paper-item class="no-link"
+                            >${this.hass.localize(
                               "ui.panel.config.devices.script.no_scripts"
                             )}</paper-item
                           >
-                        `}
+                        `
+                      : ""}
                   </ha-card>
                 `
               : ""}
@@ -350,6 +401,63 @@ class HaConfigAreaPage extends LitElement {
     `;
   }
 
+  private _renderScene(entityState: SceneEntity) {
+    return html`<div>
+      <a
+        href=${ifDefined(
+          entityState.attributes.id
+            ? `/config/scene/edit/${entityState.attributes.id}`
+            : undefined
+        )}
+      >
+        <paper-item .disabled=${!entityState.attributes.id}>
+          <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
+          <ha-icon-next></ha-icon-next>
+        </paper-item>
+      </a>
+      ${!entityState.attributes.id
+        ? html`
+            <paper-tooltip animation-delay="0">
+              ${this.hass.localize("ui.panel.config.devices.cant_edit")}
+            </paper-tooltip>
+          `
+        : ""}
+    </div>`;
+  }
+
+  private _renderAutomation(entityState: AutomationEntity) {
+    return html`<div>
+      <a
+        href=${ifDefined(
+          entityState.attributes.id
+            ? `/config/automation/edit/${entityState.attributes.id}`
+            : undefined
+        )}
+      >
+        <paper-item .disabled=${!entityState.attributes.id}>
+          <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
+          <ha-icon-next></ha-icon-next>
+        </paper-item>
+      </a>
+      ${!entityState.attributes.id
+        ? html`
+            <paper-tooltip animation-delay="0">
+              ${this.hass.localize("ui.panel.config.devices.cant_edit")}
+            </paper-tooltip>
+          `
+        : ""}
+    </div>`;
+  }
+
+  private _renderScript(entityState: ScriptEntity) {
+    return html`<a href=${`/config/script/edit/${entityState.entity_id}`}>
+      <paper-item>
+        <paper-item-body> ${computeStateName(entityState)} </paper-item-body>
+        <ha-icon-next></ha-icon-next>
+      </paper-item>
+    </a>`;
+  }
+
   private async _findRelated() {
     this._related = await findRelated(this.hass, "area", this.areaId);
   }
@@ -390,6 +498,7 @@ class HaConfigAreaPage extends LitElement {
 
         try {
           await deleteAreaRegistryEntry(this.hass!, entry!.area_id);
+          afterNextRender(() => history.back());
           return true;
         } catch (err: any) {
           return false;
@@ -403,7 +512,7 @@ class HaConfigAreaPage extends LitElement {
       haStyle,
       css`
         h1 {
-          margin-top: 0;
+          margin: 0;
           font-family: var(--paper-font-headline_-_font-family);
           -webkit-font-smoothing: var(
             --paper-font-headline_-_-webkit-font-smoothing
@@ -413,6 +522,20 @@ class HaConfigAreaPage extends LitElement {
           letter-spacing: var(--paper-font-headline_-_letter-spacing);
           line-height: var(--paper-font-headline_-_line-height);
           opacity: var(--dark-primary-opacity);
+          display: flex;
+          align-items: center;
+        }
+
+        h3 {
+          margin: 0;
+          padding: 0 16px;
+          font-weight: 500;
+          color: var(--secondary-text-color);
+        }
+
+        img {
+          border-radius: var(--ha-card-border-radius, 4px);
+          width: 100%;
         }
 
         .container {
@@ -458,6 +581,34 @@ class HaConfigAreaPage extends LitElement {
         paper-item.no-link {
           cursor: default;
         }
+
+        ha-card > a:first-child {
+          display: block;
+        }
+        ha-card > *:first-child {
+          margin-top: -16px;
+        }
+        .img-container {
+          position: relative;
+        }
+        .img-edit-btn {
+          position: absolute;
+          top: 4px;
+          right: 4px;
+          display: none;
+        }
+        .img-container:hover .img-edit-btn {
+          display: block;
+        }
+        .img-edit-btn::before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-color: var(--card-background-color);
+          opacity: 0.5;
+          border-radius: 50%;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index a2d27e63b7..404639a6a6 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -1,15 +1,8 @@
 import { mdiHelpCircle, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
-import { HASSDomEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
-import {
-  DataTableColumnContainer,
-  RowClickedEvent,
-} from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
@@ -21,7 +14,7 @@ import type { DeviceRegistryEntry } from "../../../data/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-loading-screen";
-import "../../../layouts/hass-tabs-subpage-data-table";
+import "../../../layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
@@ -53,97 +46,44 @@ export class HaConfigAreasDashboard extends LitElement {
       entities: EntityRegistryEntry[]
     ) =>
       areas.map((area) => {
-        const devicesInArea = new Set();
+        let noDevicesInArea = 0;
+        let noServicesInArea = 0;
+        let noEntitiesInArea = 0;
 
         for (const device of devices) {
           if (device.area_id === area.area_id) {
-            devicesInArea.add(device.id);
+            if (device.entry_type === "service") {
+              noServicesInArea++;
+            } else {
+              noDevicesInArea++;
+            }
           }
         }
 
-        let entitiesInArea = 0;
-
         for (const entity of entities) {
-          if (
-            entity.area_id
-              ? entity.area_id === area.area_id
-              : devicesInArea.has(entity.device_id)
-          ) {
-            entitiesInArea++;
+          if (entity.area_id === area.area_id) {
+            noEntitiesInArea++;
           }
         }
 
         return {
           ...area,
-          devices: devicesInArea.size,
-          entities: entitiesInArea,
+          devices: noDevicesInArea,
+          services: noServicesInArea,
+          entities: noEntitiesInArea,
         };
       })
   );
 
-  private _columns = memoizeOne(
-    (narrow: boolean): DataTableColumnContainer =>
-      narrow
-        ? {
-            name: {
-              title: this.hass.localize(
-                "ui.panel.config.areas.data_table.area"
-              ),
-              sortable: true,
-              filterable: true,
-              grows: true,
-              direction: "asc",
-            },
-          }
-        : {
-            name: {
-              title: this.hass.localize(
-                "ui.panel.config.areas.data_table.area"
-              ),
-              sortable: true,
-              filterable: true,
-              grows: true,
-              direction: "asc",
-            },
-            devices: {
-              title: this.hass.localize(
-                "ui.panel.config.areas.data_table.devices"
-              ),
-              sortable: true,
-              type: "numeric",
-              width: "20%",
-              direction: "asc",
-            },
-            entities: {
-              title: this.hass.localize(
-                "ui.panel.config.areas.data_table.entities"
-              ),
-              sortable: true,
-              type: "numeric",
-              width: "20%",
-              direction: "asc",
-            },
-          }
-  );
-
   protected render(): TemplateResult {
     return html`
-      <hass-tabs-subpage-data-table
+      <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .isWide=${this.isWide}
         back-path="/config"
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
-        .columns=${this._columns(this.narrow)}
-        .data=${this._areas(this.areas, this.devices, this.entities)}
-        @row-click=${this._handleRowClicked}
-        .noDataText=${this.hass.localize(
-          "ui.panel.config.areas.picker.no_areas"
-        )}
-        id="area_id"
-        hasFab
-        clickable
       >
         <ha-icon-button
           slot="toolbar-icon"
@@ -151,6 +91,58 @@ export class HaConfigAreasDashboard extends LitElement {
           .path=${mdiHelpCircle}
           @click=${this._showHelp}
         ></ha-icon-button>
+        <div class="container">
+          ${this._areas(this.areas, this.devices, this.entities).map(
+            (area) =>
+              html`<a href=${`/config/areas/area/${area.area_id}`}
+                ><ha-card outlined>
+                  <div
+                    style=${styleMap({
+                      backgroundImage: area.picture
+                        ? `url(${area.picture})`
+                        : undefined,
+                    })}
+                    class="picture ${!area.picture ? "placeholder" : ""}"
+                  ></div>
+                  <h1 class="card-header">${area.name}</h1>
+                  <div class="card-content">
+                    <div>
+                      ${area.devices
+                        ? html`
+                            ${this.hass.localize(
+                              "ui.panel.config.integrations.config_entry.devices",
+                              "count",
+                              area.devices
+                            )}${area.services ? "," : ""}
+                          `
+                        : ""}
+                      ${area.services
+                        ? html`
+                            ${this.hass.localize(
+                              "ui.panel.config.integrations.config_entry.services",
+                              "count",
+                              area.services
+                            )}
+                          `
+                        : ""}
+                      ${(area.devices || area.services) && area.entities
+                        ? this.hass.localize("ui.common.and")
+                        : ""}
+                      ${area.entities
+                        ? html`
+                            ${this.hass.localize(
+                              "ui.panel.config.integrations.config_entry.entities",
+                              "count",
+                              area.entities
+                            )}
+                          `
+                        : ""}
+                    </div>
+                  </div>
+                </ha-card></a
+              >`
+          )}
+        </div>
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(
@@ -161,7 +153,7 @@ export class HaConfigAreasDashboard extends LitElement {
         >
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
-      </hass-tabs-subpage-data-table>
+      </hass-tabs-subpage>
     `;
   }
 
@@ -191,11 +183,6 @@ export class HaConfigAreasDashboard extends LitElement {
     });
   }
 
-  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
-    const areaId = ev.detail.id;
-    navigate(`/config/areas/area/${areaId}`);
-  }
-
   private _openDialog(entry?: AreaRegistryEntry) {
     showAreaRegistryDetailDialog(this, {
       entry,
@@ -210,6 +197,51 @@ export class HaConfigAreasDashboard extends LitElement {
         --app-header-background-color: var(--sidebar-background-color);
         --app-header-text-color: var(--sidebar-text-color);
       }
+      .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-gap: 16px 16px;
+        padding: 8px 16px 16px;
+        margin: 0 auto 64px auto;
+        max-width: 1000px;
+      }
+      .container > * {
+        max-width: 500px;
+      }
+      ha-card {
+        overflow: hidden;
+      }
+      a {
+        text-decoration: none;
+      }
+      h1 {
+        padding-bottom: 0;
+      }
+      .picture {
+        height: 150px;
+        width: 100%;
+        background-size: cover;
+        background-position: center;
+        position: relative;
+      }
+      .picture.placeholder::before {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 100%;
+        background-color: var(--sidebar-selected-icon-color);
+        opacity: 0.12;
+      }
+      .card-content {
+        min-height: 16px;
+        color: var(--secondary-text-color);
+      }
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-areas-dashboard": HaConfigAreasDashboard;
+  }
+}
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 325949c3b5..d83c454488 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -5,6 +5,7 @@ import "@polymer/paper-item/paper-item";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
@@ -51,6 +52,8 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @state() private _yamlMode = false;
 
+  @state() private _warnings?: string[];
+
   protected render() {
     if (!this.condition) {
       return html``;
@@ -87,7 +90,25 @@ export default class HaAutomationConditionRow extends LitElement {
               </mwc-list-item>
             </ha-button-menu>
           </div>
+          ${this._warnings
+            ? html`<ha-alert
+                alert-type="warning"
+                .title=${this.hass.localize(
+                  "ui.errors.config.editor_not_supported"
+                )}
+              >
+                ${this._warnings!.length > 0 && this._warnings![0] !== undefined
+                  ? html` <ul>
+                      ${this._warnings!.map(
+                        (warning) => html`<li>${warning}</li>`
+                      )}
+                    </ul>`
+                  : ""}
+                ${this.hass.localize("ui.errors.config.edit_in_yaml_supported")}
+              </ha-alert>`
+            : ""}
           <ha-automation-condition-editor
+            @ui-mode-not-available=${this._handleUiModeNotAvailable}
             .yamlMode=${this._yamlMode}
             .hass=${this.hass}
             .condition=${this.condition}
@@ -97,6 +118,15 @@ export default class HaAutomationConditionRow extends LitElement {
     `;
   }
 
+  private _handleUiModeNotAvailable(ev: CustomEvent) {
+    // Prevent possible parent action-row from switching to yamlMode
+    ev.stopPropagation();
+    this._warnings = handleStructError(this.hass, ev.detail).warnings;
+    if (!this._yamlMode) {
+      this._yamlMode = true;
+    }
+  }
+
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -125,6 +155,7 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _switchYamlMode() {
+    this._warnings = undefined;
     this._yamlMode = !this._yamlMode;
   }
 
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
index 22103067f8..03c9ce25c0 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
@@ -1,5 +1,5 @@
 import "@polymer/paper-input/paper-input";
-import { html, LitElement } from "lit";
+import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import "../../../../../components/entity/ha-entity-attribute-picker";
@@ -11,6 +11,7 @@ import {
   handleChangeEvent,
 } from "../ha-automation-condition-row";
 import "../../../../../components/ha-duration-input";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 
 @customElement("ha-automation-condition-state")
 export class HaStateCondition extends LitElement implements ConditionElement {
@@ -22,6 +23,23 @@ export class HaStateCondition extends LitElement implements ConditionElement {
     return { entity_id: "", state: "" };
   }
 
+  public willUpdate(changedProperties: PropertyValues): boolean {
+    if (
+      changedProperties.has("condition") &&
+      Array.isArray(this.condition?.state)
+    ) {
+      fireEvent(
+        this,
+        "ui-mode-not-available",
+        Error(this.hass.localize("ui.errors.config.no_state_array_support"))
+      );
+      // We have to stop the update if state is an array.
+      // Otherwise the state will be changed to a comma-separated string by the input element.
+      return false;
+    }
+    return true;
+  }
+
   protected render() {
     const { entity_id, attribute, state } = this.condition;
     const forTime = createDurationData(this.condition.for);
diff --git a/src/panels/config/automation/dialog-new-automation.ts b/src/panels/config/automation/dialog-new-automation.ts
index a86d06bc19..3f00995b05 100644
--- a/src/panels/config/automation/dialog-new-automation.ts
+++ b/src/panels/config/automation/dialog-new-automation.ts
@@ -1,24 +1,19 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } 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 { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
-import {
-  AutomationConfig,
-  showAutomationEditor,
-} from "../../../data/automation";
-import {
-  HassDialog,
-  replaceDialog,
-} from "../../../dialogs/make-dialog-manager";
+import { showAutomationEditor } from "../../../data/automation";
+import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { showThingtalkDialog } from "./thingtalk/show-dialog-thingtalk";
+import "@material/mwc-list/mwc-list-item";
+import "../../../components/ha-icon-next";
+import "@material/mwc-list/mwc-list";
 
 @customElement("ha-dialog-new-automation")
 class DialogNewAutomation extends LitElement implements HassDialog {
@@ -42,84 +37,52 @@ class DialogNewAutomation extends LitElement implements HassDialog {
     return html`
       <ha-dialog
         open
+        hideActions
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
-          this.hass.localize("ui.panel.config.automation.dialog_new.header")
+          this.hass.localize("ui.panel.config.automation.dialog_new.how")
         )}
       >
-        <div>
-          ${this.hass.localize("ui.panel.config.automation.dialog_new.how")}
-          <div class="container">
-            ${isComponentLoaded(this.hass, "cloud")
-              ? html`<ha-card outlined>
-                  <div>
-                    <h3>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.dialog_new.thingtalk.header"
-                      )}
-                    </h3>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.dialog_new.thingtalk.intro"
-                    )}
-                    <div class="side-by-side">
-                      <paper-input
-                        id="input"
-                        .label=${this.hass.localize(
-                          "ui.panel.config.automation.dialog_new.thingtalk.input_label"
-                        )}
-                      ></paper-input>
-                      <mwc-button @click=${this._thingTalk}
-                        >${this.hass.localize(
-                          "ui.panel.config.automation.dialog_new.thingtalk.create"
-                        )}</mwc-button
-                      >
-                    </div>
-                  </div>
-                </ha-card>`
-              : html``}
-            ${isComponentLoaded(this.hass, "blueprint")
-              ? html`<ha-card outlined>
-                  <div>
-                    <h3>
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.dialog_new.blueprint.use_blueprint"
-                      )}
-                    </h3>
-                    <ha-blueprint-picker
-                      @value-changed=${this._blueprintPicked}
-                      .hass=${this.hass}
-                    ></ha-blueprint-picker>
-                  </div>
-                </ha-card>`
-              : html``}
-          </div>
-        </div>
-        <mwc-button slot="primaryAction" @click=${this._blank}>
-          ${this.hass.localize(
-            "ui.panel.config.automation.dialog_new.start_empty"
-          )}
-        </mwc-button>
+        <mwc-list>
+          <mwc-list-item twoline class="blueprint" @click=${this._blueprint}>
+            ${this.hass.localize(
+              "ui.panel.config.automation.dialog_new.blueprint.use_blueprint"
+            )}
+            <span slot="secondary">
+              <ha-blueprint-picker
+                @value-changed=${this._blueprintPicked}
+                .hass=${this.hass}
+              ></ha-blueprint-picker>
+            </span>
+          </mwc-list-item>
+          <li divider role="separator"></li>
+          <mwc-list-item hasmeta twoline @click=${this._blank}>
+            ${this.hass.localize(
+              "ui.panel.config.automation.dialog_new.start_empty"
+            )}
+            <span slot="secondary">
+              ${this.hass.localize(
+                "ui.panel.config.automation.dialog_new.start_empty_description"
+              )}
+            </span>
+            <ha-icon-next slot="meta"></ha-icon-next
+          ></mwc-list-item>
+        </mwc-list>
       </ha-dialog>
     `;
   }
 
-  private _thingTalk() {
-    replaceDialog();
-    showThingtalkDialog(this, {
-      callback: (config: Partial<AutomationConfig> | undefined) =>
-        showAutomationEditor(config),
-      input: this.shadowRoot!.querySelector("paper-input")!.value as string,
-    });
-    this.closeDialog();
-  }
-
   private async _blueprintPicked(ev: CustomEvent) {
     this.closeDialog();
     await nextRender();
     showAutomationEditor({ use_blueprint: { path: ev.detail.value } });
   }
 
+  private async _blueprint() {
+    this.shadowRoot!.querySelector("ha-blueprint-picker")!.open();
+  }
+
   private async _blank() {
     this.closeDialog();
     await nextRender();
@@ -131,38 +94,14 @@ class DialogNewAutomation extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        .container {
-          display: flex;
-        }
-        ha-card {
-          width: calc(50% - 8px);
-          margin: 4px;
-        }
-        ha-card div {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-        }
-        ha-card {
-          box-sizing: border-box;
-          padding: 8px;
+        mwc-list-item.blueprint {
+          height: 92px;
         }
         ha-blueprint-picker {
-          width: 100%;
+          margin-top: -16px;
         }
-        .side-by-side {
-          display: flex;
-          flex-direction: row;
-          align-items: flex-end;
-        }
-        @media all and (max-width: 500px) {
-          .container {
-            flex-direction: column;
-          }
-          ha-card {
-            width: 100%;
-          }
+        ha-dialog {
+          --dialog-content-padding: 0;
         }
       `,
     ];
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 85b0643e86..97f7cc3999 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -114,7 +114,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 22a7a152cd..cf06bc92ea 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -225,7 +225,7 @@ class HaAutomationPicker extends LitElement {
         back-path="/config"
         id="entity_id"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .activeFilters=${this._activeFilters}
         .columns=${this._columns(this.narrow, this.hass.locale)}
         .data=${this._automations(this.automations, this._filteredAutomations)}
@@ -315,10 +315,7 @@ class HaAutomationPicker extends LitElement {
   };
 
   private _createNew() {
-    if (
-      isComponentLoaded(this.hass, "cloud") ||
-      isComponentLoaded(this.hass, "blueprint")
-    ) {
+    if (isComponentLoaded(this.hass, "blueprint")) {
       showNewAutomationDialog(this);
     } else {
       navigate("/config/automation/edit/new");
diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts
index 63b37c0efd..1f5f4569b8 100644
--- a/src/panels/config/automation/ha-automation-trace.ts
+++ b/src/panels/config/automation/ha-automation-trace.ts
@@ -112,7 +112,7 @@ export class HaAutomationTrace extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         ${this.narrow
           ? html`<span slot="header">${title}</span>
diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
index a19ccbed10..46cc842c5a 100644
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@@ -63,6 +63,13 @@ class DialogThingtalk extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  public closeInitDialog() {
+    if (this._placeholders) {
+      return;
+    }
+    this.closeDialog();
+  }
+
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
@@ -82,7 +89,7 @@ class DialogThingtalk extends LitElement {
     return html`
       <ha-dialog
         open
-        @closed=${this.closeDialog}
+        @closed=${this.closeInitDialog}
         .heading=${this.hass.localize(
           `ui.panel.config.automation.thingtalk.task_selection.header`
         )}
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index 35123dceb0..0e65094222 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -224,7 +224,7 @@ class HaBlueprintOverview extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._processedBlueprints(this.blueprints)}
         id="entity_id"
diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
index 0616c0edd9..da05e069d8 100644
--- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { haStyle } from "../../../../resources/styles";
+import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
 
@@ -68,7 +68,7 @@ class DialogCloudCertificate extends LitElement {
 
   static get styles(): CSSResultGroup {
     return [
-      haStyle,
+      haStyleDialog,
       css`
         ha-dialog {
           --mdc-dialog-max-width: 535px;
diff --git a/src/panels/config/cloud/login/cloud-login.ts b/src/panels/config/cloud/login/cloud-login.ts
index c058985a60..12f8e3d024 100644
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -50,7 +50,7 @@ export class CloudLogin extends LitElement {
         header="Home Assistant Cloud"
       >
         <div class="content">
-          <ha-config-section isWide=${this.isWide}>
+          <ha-config-section .isWide=${this.isWide}>
             <span slot="header">Home Assistant Cloud</span>
             <div slot="introduction">
               <p>
diff --git a/src/panels/config/customize/ha-config-customize.ts b/src/panels/config/customize/ha-config-customize.ts
deleted file mode 100644
index 03fd6f17e9..0000000000
--- a/src/panels/config/customize/ha-config-customize.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { property } from "lit/decorators";
-import "../../../components/ha-card";
-import "../../../layouts/hass-loading-screen";
-import "../../../layouts/hass-tabs-subpage";
-import { haStyle } from "../../../resources/styles";
-import { HomeAssistant, Route } from "../../../types";
-import { documentationUrl } from "../../../util/documentation-url";
-import "../ha-config-section";
-import "../ha-entity-config";
-import { configSections } from "../ha-panel-config";
-import "./ha-form-customize";
-
-class HaConfigCustomize extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public isWide?: boolean;
-
-  @property() public narrow?: boolean;
-
-  @property() public route!: Route;
-
-  @property() private _selectedEntityId = "";
-
-  protected render(): TemplateResult {
-    return html`
-      <hass-tabs-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        back-path="/config"
-        .tabs=${configSections.advanced}
-      >
-        <ha-config-section .isWide=${this.isWide}>
-            <span slot="header">
-            ${this.hass.localize("ui.panel.config.customize.picker.header")}
-            </span>
-            <span slot="introduction">
-            ${this.hass.localize(
-              "ui.panel.config.customize.picker.introduction"
-            )}
-              <br />
-              <a
-              href=${documentationUrl(
-                this.hass,
-                "/docs/configuration/customizing-devices/#customization-using-the-ui"
-              )}
-                target="_blank"
-                rel="noreferrer"
-              >
-              ${this.hass.localize(
-                "ui.panel.config.customize.picker.documentation"
-              )}
-              </a>
-            </span>
-            <ha-entity-config
-              .hass=${this.hass}
-              .selectedEntityId=${this._selectedEntityId}
-            >
-            </ha-entity-config>
-          </ha-config-section>
-        </div>
-      </hass-tabs-subpage>
-    `;
-  }
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-
-    if (!this.route.path.includes("/edit/")) {
-      return;
-    }
-    const routeSegments = this.route.path.split("/edit/");
-    this._selectedEntityId = routeSegments.length > 1 ? routeSegments[1] : "";
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        a {
-          color: var(--primary-color);
-        }
-      `,
-    ];
-  }
-}
-customElements.define("ha-config-customize", HaConfigCustomize);
diff --git a/src/panels/config/customize/ha-customize-attribute.js b/src/panels/config/customize/ha-customize-attribute.js
deleted file mode 100644
index 6d53b06686..0000000000
--- a/src/panels/config/customize/ha-customize-attribute.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-icon";
-import "../../../components/ha-icon-button";
-import hassAttributeUtil from "../../../util/hass-attributes-util";
-import "../ha-form-style";
-import "./types/ha-customize-array";
-import "./types/ha-customize-boolean";
-import "./types/ha-customize-icon";
-import "./types/ha-customize-key-value";
-import "./types/ha-customize-string";
-
-class HaCustomizeAttribute extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="ha-form-style">
-        :host {
-          display: block;
-          position: relative;
-          padding-right: 40px;
-        }
-
-        .button {
-          position: absolute;
-          margin-top: -20px;
-          top: 50%;
-          right: 0;
-        }
-      </style>
-      <div id="wrapper" class="form-group"></div>
-      <ha-icon-button class="button" on-click="tapButton">
-        <ha-icon icon="[[getIcon(item.secondary)]]"></ha-icon>
-      </ha-icon-button>
-    `;
-  }
-
-  static get properties() {
-    return {
-      item: {
-        type: Object,
-        notify: true,
-        observer: "itemObserver",
-      },
-    };
-  }
-
-  tapButton() {
-    if (this.item.secondary) {
-      this.item = { ...this.item, secondary: false };
-    } else {
-      this.item = { ...this.item, closed: true };
-    }
-  }
-
-  getIcon(secondary) {
-    return secondary ? "hass:pencil" : "hass:close";
-  }
-
-  itemObserver(item) {
-    const wrapper = this.$.wrapper;
-    const tag = hassAttributeUtil.TYPE_TO_TAG[item.type].toUpperCase();
-    let child;
-    if (wrapper.lastChild && wrapper.lastChild.tagName === tag) {
-      child = wrapper.lastChild;
-    } else {
-      if (wrapper.lastChild) {
-        wrapper.removeChild(wrapper.lastChild);
-      }
-      // Creating an element with upper case works fine in Chrome, but in FF it doesn't immediately
-      // become a defined Custom Element. Polymer does that in some later pass.
-      this.$.child = child = document.createElement(tag.toLowerCase());
-      child.className = "form-control";
-      child.addEventListener("item-changed", () => {
-        this.item = { ...child.item };
-      });
-    }
-    child.setProperties({ item: this.item });
-    if (child.parentNode === null) {
-      wrapper.appendChild(child);
-    }
-  }
-}
-customElements.define("ha-customize-attribute", HaCustomizeAttribute);
diff --git a/src/panels/config/customize/ha-form-customize-attributes.js b/src/panels/config/customize/ha-form-customize-attributes.js
deleted file mode 100644
index 2c0def4524..0000000000
--- a/src/panels/config/customize/ha-form-customize-attributes.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { MutableData } from "@polymer/polymer/lib/mixins/mutable-data";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "./ha-customize-attribute";
-
-class HaFormCustomizeAttributes extends MutableData(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        [hidden] {
-          display: none;
-        }
-      </style>
-      <template is="dom-repeat" items="{{attributes}}" mutable-data="">
-        <ha-customize-attribute item="{{item}}" hidden$="[[item.closed]]">
-        </ha-customize-attribute>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      attributes: {
-        type: Array,
-        notify: true,
-      },
-    };
-  }
-}
-customElements.define(
-  "ha-form-customize-attributes",
-  HaFormCustomizeAttributes
-);
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
deleted file mode 100644
index cd3278abeb..0000000000
--- a/src/panels/config/customize/ha-form-customize.js
+++ /dev/null
@@ -1,362 +0,0 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-import "../../../styles/polymer-ha-style";
-import { documentationUrl } from "../../../util/documentation-url";
-import hassAttributeUtil from "../../../util/hass-attributes-util";
-import "../ha-form-style";
-import "./ha-form-customize-attributes";
-
-export class HaFormCustomize extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex ha-style ha-form-style">
-        .warning {
-          color: red;
-        }
-
-        .attributes-text {
-          padding-left: 20px;
-        }
-      </style>
-      <template
-        is="dom-if"
-        if="[[computeShowWarning(localConfig, globalConfig)]]"
-      >
-        <div class="warning">
-          [[localize('ui.panel.config.customize.warning.include_sentence')]]
-          <a
-            href="[[_computeDocumentationUrl(hass)]]"
-            target="_blank"
-            rel="noreferrer"
-            >[[localize('ui.panel.config.customize.warning.include_link')]]</a
-          >.<br />
-          [[localize('ui.panel.config.customize.warning.not_applied')]]
-        </div>
-      </template>
-      <template is="dom-if" if="[[hasLocalAttributes]]">
-        <p class="attributes-text">
-          [[localize('ui.panel.config.customize.attributes_customize')]]<br />
-        </p>
-        <ha-form-customize-attributes
-          attributes="{{localAttributes}}"
-        ></ha-form-customize-attributes>
-      </template>
-      <template is="dom-if" if="[[hasGlobalAttributes]]">
-        <p class="attributes-text">
-          [[localize('ui.panel.config.customize.attributes_outside')]]<br />
-          [[localize('ui.panel.config.customize.different_include')]]
-        </p>
-        <ha-form-customize-attributes
-          attributes="{{globalAttributes}}"
-        ></ha-form-customize-attributes>
-      </template>
-      <template is="dom-if" if="[[hasExistingAttributes]]">
-        <p class="attributes-text">
-          [[localize('ui.panel.config.customize.attributes_set')]]<br />
-          [[localize('ui.panel.config.customize.attributes_override')]]
-        </p>
-        <ha-form-customize-attributes
-          attributes="{{existingAttributes}}"
-        ></ha-form-customize-attributes>
-      </template>
-      <template is="dom-if" if="[[hasNewAttributes]]">
-        <p class="attributes-text">
-          [[localize('ui.panel.config.customize.attributes_not_set')]]
-        </p>
-        <ha-form-customize-attributes
-          attributes="{{newAttributes}}"
-        ></ha-form-customize-attributes>
-      </template>
-      <template is="dom-if" if="[[entity]]">
-        <div class="form-group">
-          <paper-dropdown-menu
-            label="[[localize('ui.panel.config.customize.pick_attribute')]]"
-            class="flex"
-            dynamic-align=""
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              selected="{{selectedNewAttribute}}"
-            >
-              <template
-                is="dom-repeat"
-                items="[[newAttributesOptions]]"
-                as="option"
-              >
-                <paper-item>[[option]]</paper-item>
-              </template>
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      entity: Object,
-
-      localAttributes: {
-        type: Array,
-        computed: "computeLocalAttributes(localConfig)",
-      },
-      hasLocalAttributes: Boolean,
-
-      globalAttributes: {
-        type: Array,
-        computed: "computeGlobalAttributes(localConfig, globalConfig)",
-      },
-      hasGlobalAttributes: Boolean,
-
-      existingAttributes: {
-        type: Array,
-        computed:
-          "computeExistingAttributes(localConfig, globalConfig, entity)",
-      },
-      hasExistingAttributes: Boolean,
-
-      newAttributes: {
-        type: Array,
-        value: [],
-      },
-      hasNewAttributes: Boolean,
-
-      newAttributesOptions: Array,
-      selectedNewAttribute: {
-        type: Number,
-        value: -1,
-        observer: "selectedNewAttributeObserver",
-      },
-
-      localConfig: Object,
-      globalConfig: Object,
-    };
-  }
-
-  static get observers() {
-    return [
-      "attributesObserver(localAttributes.*, globalAttributes.*, existingAttributes.*, newAttributes.*)",
-    ];
-  }
-
-  _initOpenObject(key, value, secondary, config) {
-    return {
-      attribute: key,
-      value: value,
-      closed: false,
-      domain: computeStateDomain(this.entity),
-      secondary: secondary,
-      description: key,
-      ...config,
-    };
-  }
-
-  loadEntity(entity) {
-    this.entity = entity;
-    return this.hass
-      .callApi("GET", "config/customize/config/" + entity.entity_id)
-      .then((data) => {
-        this.localConfig = data.local;
-        this.globalConfig = data.global;
-        this.newAttributes = [];
-      });
-  }
-
-  saveEntity() {
-    const data = {};
-    const attrs = this.localAttributes.concat(
-      this.globalAttributes,
-      this.existingAttributes,
-      this.newAttributes
-    );
-    attrs.forEach((attr) => {
-      if (
-        attr.closed ||
-        attr.secondary ||
-        !attr.attribute ||
-        attr.value === null ||
-        attr.value === undefined
-      )
-        return;
-      const value = attr.type === "json" ? JSON.parse(attr.value) : attr.value;
-      if (value === null || value === undefined) return;
-      data[attr.attribute] = value;
-    });
-
-    const objectId = this.entity.entity_id;
-    return this.hass.callApi(
-      "POST",
-      "config/customize/config/" + objectId,
-      data
-    );
-  }
-
-  _computeSingleAttribute(key, value, secondary) {
-    const config = hassAttributeUtil.LOGIC_STATE_ATTRIBUTES[key] || {
-      type: hassAttributeUtil.UNKNOWN_TYPE,
-    };
-    return this._initOpenObject(
-      key,
-      config.type === "json" ? JSON.stringify(value) : value,
-      secondary,
-      config
-    );
-  }
-
-  _computeAttributes(config, keys, secondary) {
-    return keys.map((key) =>
-      this._computeSingleAttribute(key, config[key], secondary)
-    );
-  }
-
-  _computeDocumentationUrl(hass) {
-    return documentationUrl(
-      hass,
-      "/docs/configuration/customizing-devices/#customization-using-the-ui"
-    );
-  }
-
-  computeLocalAttributes(localConfig) {
-    if (!localConfig) return [];
-    const localKeys = Object.keys(localConfig);
-    const result = this._computeAttributes(localConfig, localKeys, false);
-    return result;
-  }
-
-  computeGlobalAttributes(localConfig, globalConfig) {
-    if (!localConfig || !globalConfig) return [];
-    const localKeys = Object.keys(localConfig);
-    const globalKeys = Object.keys(globalConfig).filter(
-      (key) => !localKeys.includes(key)
-    );
-    return this._computeAttributes(globalConfig, globalKeys, true);
-  }
-
-  computeExistingAttributes(localConfig, globalConfig, entity) {
-    if (!localConfig || !globalConfig || !entity) return [];
-    const localKeys = Object.keys(localConfig);
-    const globalKeys = Object.keys(globalConfig);
-    const entityKeys = Object.keys(entity.attributes).filter(
-      (key) => !localKeys.includes(key) && !globalKeys.includes(key)
-    );
-    return this._computeAttributes(entity.attributes, entityKeys, true);
-  }
-
-  computeShowWarning(localConfig, globalConfig) {
-    if (!localConfig || !globalConfig) return false;
-    return Object.keys(localConfig).some(
-      (key) =>
-        JSON.stringify(globalConfig[key]) !== JSON.stringify(localConfig[key])
-    );
-  }
-
-  filterFromAttributes(attributes) {
-    return (key) =>
-      !attributes ||
-      attributes.every((attr) => attr.attribute !== key || attr.closed);
-  }
-
-  getNewAttributesOptions(
-    localAttributes,
-    globalAttributes,
-    existingAttributes,
-    newAttributes
-  ) {
-    const knownKeys = Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES)
-      .filter((key) => {
-        const conf = hassAttributeUtil.LOGIC_STATE_ATTRIBUTES[key];
-        return (
-          conf &&
-          (!conf.domains ||
-            !this.entity ||
-            conf.domains.includes(computeStateDomain(this.entity)))
-        );
-      })
-      .filter(this.filterFromAttributes(localAttributes))
-      .filter(this.filterFromAttributes(globalAttributes))
-      .filter(this.filterFromAttributes(existingAttributes))
-      .filter(this.filterFromAttributes(newAttributes));
-    return knownKeys.sort().concat("Other");
-  }
-
-  selectedNewAttributeObserver(selected) {
-    if (selected < 0) return;
-    const option = this.newAttributesOptions[selected];
-    if (selected === this.newAttributesOptions.length - 1) {
-      // The "Other" option.
-      const attr = this._initOpenObject("", "", false /* secondary */, {
-        type: hassAttributeUtil.ADD_TYPE,
-      });
-      this.push("newAttributes", attr);
-      this.selectedNewAttribute = -1;
-      return;
-    }
-    let result = this.localAttributes.findIndex(
-      (attr) => attr.attribute === option
-    );
-    if (result >= 0) {
-      this.set("localAttributes." + result + ".closed", false);
-      this.selectedNewAttribute = -1;
-      return;
-    }
-    result = this.globalAttributes.findIndex(
-      (attr) => attr.attribute === option
-    );
-    if (result >= 0) {
-      this.set("globalAttributes." + result + ".closed", false);
-      this.selectedNewAttribute = -1;
-      return;
-    }
-    result = this.existingAttributes.findIndex(
-      (attr) => attr.attribute === option
-    );
-    if (result >= 0) {
-      this.set("existingAttributes." + result + ".closed", false);
-      this.selectedNewAttribute = -1;
-      return;
-    }
-    result = this.newAttributes.findIndex((attr) => attr.attribute === option);
-    if (result >= 0) {
-      this.set("newAttributes." + result + ".closed", false);
-      this.selectedNewAttribute = -1;
-      return;
-    }
-    const attr = this._computeSingleAttribute(
-      option,
-      "",
-      false /* secondary */
-    );
-    this.push("newAttributes", attr);
-    this.selectedNewAttribute = -1;
-  }
-
-  attributesObserver() {
-    this.hasLocalAttributes =
-      this.localAttributes && this.localAttributes.some((attr) => !attr.closed);
-    this.hasGlobalAttributes =
-      this.globalAttributes &&
-      this.globalAttributes.some((attr) => !attr.closed);
-    this.hasExistingAttributes =
-      this.existingAttributes &&
-      this.existingAttributes.some((attr) => !attr.closed);
-    this.hasNewAttributes =
-      this.newAttributes && this.newAttributes.some((attr) => !attr.closed);
-    this.newAttributesOptions = this.getNewAttributesOptions(
-      this.localAttributes,
-      this.globalAttributes,
-      this.existingAttributes,
-      this.newAttributes
-    );
-  }
-}
-customElements.define("ha-form-customize", HaFormCustomize);
diff --git a/src/panels/config/customize/types/ha-customize-array.js b/src/panels/config/customize/types/ha-customize-array.js
deleted file mode 100644
index fe7147d0e9..0000000000
--- a/src/panels/config/customize/types/ha-customize-array.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaCustomizeArray extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        paper-dropdown-menu {
-          margin: -9px 0;
-        }
-      </style>
-      <paper-dropdown-menu
-        label="[[item.description]]"
-        disabled="[[item.secondary]]"
-        selected-item-label="{{item.value}}"
-        dynamic-align=""
-      >
-        <paper-listbox
-          slot="dropdown-content"
-          selected="[[computeSelected(item)]]"
-        >
-          <template is="dom-repeat" items="[[getOptions(item)]]" as="option">
-            <paper-item>[[option]]</paper-item>
-          </template>
-        </paper-listbox>
-      </paper-dropdown-menu>
-    `;
-  }
-
-  static get properties() {
-    return {
-      item: {
-        type: Object,
-        notifies: true,
-      },
-    };
-  }
-
-  getOptions(item) {
-    const domain = item.domain || "*";
-    const options = item.options[domain] || item.options["*"];
-    if (!options) {
-      this.item.type = "string";
-      this.fire("item-changed");
-      return [];
-    }
-    return options.sort();
-  }
-
-  computeSelected(item) {
-    const options = this.getOptions(item);
-    return options.indexOf(item.value);
-  }
-}
-customElements.define("ha-customize-array", HaCustomizeArray);
diff --git a/src/panels/config/customize/types/ha-customize-boolean.js b/src/panels/config/customize/types/ha-customize-boolean.js
deleted file mode 100644
index 803e6d8d21..0000000000
--- a/src/panels/config/customize/types/ha-customize-boolean.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../components/ha-checkbox";
-import "../../../../components/ha-formfield";
-
-class HaCustomizeBoolean extends PolymerElement {
-  static get template() {
-    return html`
-      <ha-formfield label="[[item.description]]">
-        <ha-checkbox
-          disabled="[[item.secondary]]"
-          checked="[[item.value]]"
-          on-change="checkedChanged"
-        >
-        </ha-checkbox
-      ></ha-formfield>
-    `;
-  }
-
-  static get properties() {
-    return {
-      item: {
-        type: Object,
-        notifies: true,
-      },
-    };
-  }
-
-  checkedChanged(ev) {
-    this.item.value = ev.target.checked;
-  }
-}
-customElements.define("ha-customize-boolean", HaCustomizeBoolean);
diff --git a/src/panels/config/customize/types/ha-customize-icon.js b/src/panels/config/customize/types/ha-customize-icon.js
deleted file mode 100644
index 86b32ed5bb..0000000000
--- a/src/panels/config/customize/types/ha-customize-icon.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../../components/ha-icon";
-
-class HaCustomizeIcon extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          @apply --layout-horizontal;
-        }
-        .icon-image {
-          border: 1px solid grey;
-          padding: 8px;
-          margin-right: 20px;
-          margin-top: 10px;
-        }
-      </style>
-      <ha-icon class="icon-image" icon="[[item.value]]"></ha-icon>
-      <paper-input
-        disabled="[[item.secondary]]"
-        label="Icon"
-        value="{{item.value}}"
-      >
-      </paper-input>
-    `;
-  }
-
-  static get properties() {
-    return {
-      item: {
-        type: Object,
-        notifies: true,
-      },
-    };
-  }
-}
-customElements.define("ha-customize-icon", HaCustomizeIcon);
diff --git a/src/panels/config/customize/types/ha-customize-key-value.js b/src/panels/config/customize/types/ha-customize-key-value.js
deleted file mode 100644
index 528ee13694..0000000000
--- a/src/panels/config/customize/types/ha-customize-key-value.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HaCustomizeKeyValue extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          @apply --layout-horizontal;
-        }
-        paper-input {
-          @apply --layout-flex;
-        }
-        .key {
-          padding-right: 20px;
-        }
-      </style>
-      <paper-input
-        disabled="[[item.secondary]]"
-        class="key"
-        label="Attribute name"
-        value="{{item.attribute}}"
-      >
-      </paper-input>
-      <paper-input
-        disabled="[[item.secondary]]"
-        label="Attribute value"
-        value="{{item.value}}"
-      >
-      </paper-input>
-    `;
-  }
-
-  static get properties() {
-    return {
-      item: {
-        type: Object,
-        notifies: true,
-      },
-    };
-  }
-}
-customElements.define("ha-customize-key-value", HaCustomizeKeyValue);
diff --git a/src/panels/config/customize/types/ha-customize-string.js b/src/panels/config/customize/types/ha-customize-string.js
deleted file mode 100644
index 72fb4a685c..0000000000
--- a/src/panels/config/customize/types/ha-customize-string.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { formatAttributeName } from "../../../../util/hass-attributes-util";
-
-class HaCustomizeString extends PolymerElement {
-  static get template() {
-    return html`
-      <paper-input
-        disabled="[[item.secondary]]"
-        label="[[getLabel(item)]]"
-        value="{{item.value}}"
-      >
-      </paper-input>
-    `;
-  }
-
-  static get properties() {
-    return {
-      item: {
-        type: Object,
-        notifies: true,
-      },
-    };
-  }
-
-  getLabel(item) {
-    return (
-      formatAttributeName(item.description) +
-      (item.type === "json" ? " (JSON formatted)" : "")
-    );
-  }
-}
-customElements.define("ha-customize-string", HaCustomizeString);
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index b7428354e4..3d7dc017f8 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -1,19 +1,32 @@
-import { mdiCloudLock } from "@mdi/js";
+import { mdiCellphoneCog, mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-menu-button";
 import { CloudStatus } from "../../../data/cloud";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
+import {
+  ExternalConfig,
+  getExternalConfig,
+} from "../../../external_app/external_config";
 import "../../../layouts/ha-app-layout";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
+import "./ha-config-updates";
 
 @customElement("ha-config-dashboard")
 class HaConfigDashboard extends LitElement {
@@ -26,67 +39,23 @@ class HaConfigDashboard extends LitElement {
 
   @property() public cloudStatus?: CloudStatus;
 
+  @property() public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
+
   @property() public showAdvanced!: boolean;
 
-  protected render(): TemplateResult {
-    const content = html` <ha-config-section
-      .narrow=${this.narrow}
-      .isWide=${this.isWide}
-    >
-      <div slot="header">${this.hass.localize("ui.panel.config.header")}</div>
+  @state() private _externalConfig?: ExternalConfig;
 
-      <div slot="introduction">
-        ${this.hass.localize("ui.panel.config.introduction")}
-      </div>
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
 
-      ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
-        ? html`
-            <ha-card>
-              <ha-config-navigation
-                .hass=${this.hass}
-                .showAdvanced=${this.showAdvanced}
-                .pages=${[
-                  {
-                    component: "cloud",
-                    path: "/config/cloud",
-                    name: "Home Assistant Cloud",
-                    info: this.cloudStatus,
-                    iconPath: mdiCloudLock,
-                  },
-                ]}
-              ></ha-config-navigation>
-            </ha-card>
-          `
-        : ""}
-      ${Object.values(configSections).map(
-        (section) => html`
-          <ha-card>
-            <ha-config-navigation
-              .hass=${this.hass}
-              .showAdvanced=${this.showAdvanced}
-              .pages=${section}
-            ></ha-config-navigation>
-          </ha-card>
-        `
-      )}
-      ${!this.showAdvanced
-        ? html`
-            <div class="promo-advanced">
-              ${this.hass.localize("ui.panel.config.advanced_mode.hint_enable")}
-              <a href="/profile"
-                >${this.hass.localize(
-                  "ui.panel.config.advanced_mode.link_profile_page"
-                )}</a
-              >.
-            </div>
-          `
-        : ""}
-    </ha-config-section>`;
-
-    if (!this.narrow && this.hass.dockedSidebar !== "always_hidden") {
-      return content;
+    if (this.hass && this.hass.auth.external) {
+      getExternalConfig(this.hass.auth.external).then((conf) => {
+        this._externalConfig = conf;
+      });
     }
+  }
 
+  protected render(): TemplateResult {
     return html`
       <ha-app-layout>
         <app-header fixed slot="header">
@@ -95,29 +64,106 @@ class HaConfigDashboard extends LitElement {
               .hass=${this.hass}
               .narrow=${this.narrow}
             ></ha-menu-button>
+            <div main-title>${this.hass.localize("panel.config")}</div>
           </app-toolbar>
         </app-header>
 
-        ${content}
+        <ha-config-section
+          .narrow=${this.narrow}
+          .isWide=${this.isWide}
+          full-width
+        >
+          ${isComponentLoaded(this.hass, "hassio") &&
+          this.supervisorUpdates === undefined
+            ? html``
+            : html`${this.supervisorUpdates?.length
+                  ? html`<ha-card>
+                      <ha-config-updates
+                        .hass=${this.hass}
+                        .narrow=${this.narrow}
+                        .supervisorUpdates=${this.supervisorUpdates}
+                      ></ha-config-updates>
+                    </ha-card>`
+                  : ""}
+                <ha-card>
+                  ${this.narrow && this.supervisorUpdates?.length
+                    ? html`<div class="title">
+                        ${this.hass.localize("panel.config")}
+                      </div>`
+                    : ""}
+                  ${this.cloudStatus && isComponentLoaded(this.hass, "cloud")
+                    ? html`
+                        <ha-config-navigation
+                          .hass=${this.hass}
+                          .narrow=${this.narrow}
+                          .showAdvanced=${this.showAdvanced}
+                          .pages=${[
+                            {
+                              component: "cloud",
+                              path: "/config/cloud",
+                              name: "Home Assistant Cloud",
+                              info: this.cloudStatus,
+                              iconPath: mdiCloudLock,
+                              iconColor: "#3B808E",
+                            },
+                          ]}
+                        ></ha-config-navigation>
+                      `
+                    : ""}
+                  ${this._externalConfig?.hasSettingsScreen
+                    ? html`
+                        <ha-config-navigation
+                          .hass=${this.hass}
+                          .narrow=${this.narrow}
+                          .showAdvanced=${this.showAdvanced}
+                          .pages=${[
+                            {
+                              path: "#external-app-configuration",
+                              name: "Companion App",
+                              description: "Location and notifications",
+                              iconPath: mdiCellphoneCog,
+                              iconColor: "#37474F",
+                              core: true,
+                            },
+                          ]}
+                          @click=${this._handleExternalAppConfiguration}
+                        ></ha-config-navigation>
+                      `
+                    : ""}
+                  <ha-config-navigation
+                    .hass=${this.hass}
+                    .narrow=${this.narrow}
+                    .showAdvanced=${this.showAdvanced}
+                    .pages=${configSections.dashboard}
+                  ></ha-config-navigation>
+                </ha-card>`}
+        </ha-config-section>
       </ha-app-layout>
     `;
   }
 
+  private _handleExternalAppConfiguration(ev: Event) {
+    ev.preventDefault();
+    this.hass.auth.external!.fireMessage({
+      type: "config_screen/show",
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
         app-header {
-          --app-header-background-color: var(--primary-background-color);
+          border-bottom: var(--app-header-border-bottom);
+          --header-height: 55px;
         }
         ha-card:last-child {
           margin-bottom: 24px;
         }
         ha-config-section {
-          margin-top: -12px;
-        }
-        :host([narrow]) ha-config-section {
-          margin-top: -20px;
+          margin: auto;
+          margin-top: -32px;
+          max-width: 600px;
         }
         ha-card {
           overflow: hidden;
@@ -126,13 +172,18 @@ class HaConfigDashboard extends LitElement {
           text-decoration: none;
           color: var(--primary-text-color);
         }
-        .promo-advanced {
-          text-align: center;
-          color: var(--secondary-text-color);
-          margin-bottom: 24px;
+        .title {
+          font-size: 16px;
+          padding: 16px;
+          padding-bottom: 0;
         }
-        .promo-advanced a {
-          color: var(--secondary-text-color);
+        :host([narrow]) ha-card {
+          background-color: var(--primary-background-color);
+          box-shadow: unset;
+        }
+
+        :host([narrow]) ha-config-section {
+          margin-top: -42px;
         }
       `,
     ];
diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts
index ee08290b06..b577fe1abe 100644
--- a/src/panels/config/dashboard/ha-config-navigation.ts
+++ b/src/panels/config/dashboard/ha-config-navigation.ts
@@ -13,6 +13,8 @@ import { HomeAssistant } from "../../../types";
 class HaConfigNavigation extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   @property() public showAdvanced!: boolean;
 
   @property() public pages!: PageNavigation[];
@@ -23,11 +25,14 @@ class HaConfigNavigation extends LitElement {
         canShowPage(this.hass, page)
           ? html`
               <a href=${page.path} aria-role="option" tabindex="-1">
-                <paper-icon-item>
-                  <ha-svg-icon
-                    .path=${page.iconPath}
+                <paper-icon-item @click=${this._entryClicked}>
+                  <div
+                    class=${page.iconColor ? "icon-background" : ""}
                     slot="item-icon"
-                  ></ha-svg-icon>
+                    .style="background-color: ${page.iconColor || "undefined"}"
+                  >
+                    <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
+                  </div>
                   <paper-item-body two-line>
                     ${page.name ||
                     this.hass.localize(
@@ -54,13 +59,14 @@ class HaConfigNavigation extends LitElement {
                           `
                       : html`
                           <div secondary>
-                            ${this.hass.localize(
+                            ${page.description ||
+                            this.hass.localize(
                               `ui.panel.config.${page.component}.description`
                             )}
                           </div>
                         `}
                   </paper-item-body>
-                  <ha-icon-next></ha-icon-next>
+                  ${!this.narrow ? html`<ha-icon-next></ha-icon-next>` : ""}
                 </paper-icon-item>
               </a>
             `
@@ -69,6 +75,10 @@ class HaConfigNavigation extends LitElement {
     `;
   }
 
+  private _entryClicked(ev) {
+    ev.currentTarget.blur();
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       a {
@@ -81,6 +91,11 @@ class HaConfigNavigation extends LitElement {
       ha-svg-icon,
       ha-icon-next {
         color: var(--secondary-text-color);
+        height: 24px;
+        width: 24px;
+      }
+      ha-svg-icon {
+        padding: 8px;
       }
       .iron-selected paper-item::before,
       a:not(.iron-selected):focus::before {
@@ -102,6 +117,12 @@ class HaConfigNavigation extends LitElement {
       .iron-selected:focus paper-item::before {
         opacity: 0.2;
       }
+      .icon-background {
+        border-radius: 50%;
+      }
+      .icon-background ha-svg-icon {
+        color: #fff;
+      }
     `;
   }
 }
diff --git a/src/panels/config/dashboard/ha-config-updates.ts b/src/panels/config/dashboard/ha-config-updates.ts
new file mode 100644
index 0000000000..264bd253c6
--- /dev/null
+++ b/src/panels/config/dashboard/ha-config-updates.ts
@@ -0,0 +1,137 @@
+import "@material/mwc-button/mwc-button";
+import { mdiPackageVariant } from "@mdi/js";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-alert";
+import "../../../components/ha-logo-svg";
+import "../../../components/ha-svg-icon";
+import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor";
+import { buttonLinkStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+
+export const SUPERVISOR_UPDATE_NAMES = {
+  core: "Home Assistant Core",
+  os: "Home Assistant Operating System",
+  supervisor: "Home Assistant Supervisor",
+};
+
+@customElement("ha-config-updates")
+class HaConfigUpdates extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false })
+  public supervisorUpdates?: SupervisorAvailableUpdates[] | null;
+
+  @state() private _showAll = false;
+
+  protected render(): TemplateResult {
+    if (!this.supervisorUpdates?.length) {
+      return html``;
+    }
+
+    const updates =
+      this._showAll || this.supervisorUpdates.length <= 3
+        ? this.supervisorUpdates
+        : this.supervisorUpdates.slice(0, 2);
+
+    return html`
+      <div class="title">
+        ${this.hass.localize("ui.panel.config.updates.title", {
+          count: this.supervisorUpdates.length,
+        })}
+      </div>
+      ${updates.map(
+        (update) => html`
+          <paper-icon-item>
+            <span slot="item-icon" class="icon">
+              ${update.update_type === "addon"
+                ? update.icon
+                  ? html`<img src="/api/hassio${update.icon}" />`
+                  : html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>`
+                : html`<ha-logo-svg></ha-logo-svg>`}
+            </span>
+            <paper-item-body two-line>
+              ${update.update_type === "addon"
+                ? update.name
+                : SUPERVISOR_UPDATE_NAMES[update.update_type!]}
+              <div secondary>
+                ${this.hass.localize(
+                  "ui.panel.config.updates.version_available",
+                  {
+                    version_available: update.version_latest,
+                  }
+                )}
+              </div>
+            </paper-item-body>
+            <a href="/hassio${update.panel_path}">
+              <mwc-button
+                .label=${this.hass.localize("ui.panel.config.updates.show")}
+              >
+              </mwc-button>
+            </a>
+          </paper-icon-item>
+        `
+      )}
+      ${!this._showAll && this.supervisorUpdates.length >= 4
+        ? html`
+            <button class="link show-all" @click=${this._showAllClicked}>
+              ${this.hass.localize("ui.panel.config.updates.more_updates", {
+                count: this.supervisorUpdates!.length - updates.length,
+              })}
+            </button>
+          `
+        : ""}
+    `;
+  }
+
+  private _showAllClicked() {
+    this._showAll = true;
+  }
+
+  static get styles(): CSSResultGroup[] {
+    return [
+      buttonLinkStyle,
+      css`
+        .title {
+          font-size: 16px;
+          padding: 16px;
+          padding-bottom: 0;
+        }
+        a {
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        .icon {
+          display: inline-flex;
+          height: 100%;
+          align-items: center;
+        }
+        img,
+        ha-svg-icon,
+        ha-logo-svg {
+          --mdc-icon-size: 32px;
+          max-height: 32px;
+          width: 32px;
+        }
+        ha-logo-svg {
+          color: var(--secondary-text-color);
+        }
+        button.show-all {
+          color: var(--primary-color);
+          text-decoration: none;
+          margin: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-updates": HaConfigUpdates;
+  }
+}
diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
index 741c426f3d..47577805c3 100644
--- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
@@ -1,6 +1,8 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
+import "../../../../components/ha-chip";
 import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";
 import {
@@ -10,6 +12,12 @@ import {
 import { showScriptEditor } from "../../../../data/script";
 import { HomeAssistant } from "../../../../types";
 
+declare global {
+  interface HASSDomEvents {
+    "entry-selected": undefined;
+  }
+}
+
 export abstract class HaDeviceAutomationCard<
   T extends DeviceAutomation
 > extends LitElement {
@@ -55,29 +63,34 @@ export abstract class HaDeviceAutomationCard<
     return html`
       <h3>${this.hass.localize(this.headerKey)}</h3>
       <div class="content">
-        <ha-chip-set
-          @chip-clicked=${this._handleAutomationClicked}
-          .items=${this.automations.map((automation) =>
-            this._localizeDeviceAutomation(this.hass, automation)
+        <ha-chip-set>
+          ${this.automations.map(
+            (automation, idx) =>
+              html`
+                <ha-chip .index=${idx} @click=${this._handleAutomationClicked}>
+                  ${this._localizeDeviceAutomation(this.hass, automation)}
+                </ha-chip>
+              `
           )}
-        >
         </ha-chip-set>
       </div>
     `;
   }
 
   private _handleAutomationClicked(ev: CustomEvent) {
-    const automation = this.automations[ev.detail.index];
+    const automation = this.automations[(ev.currentTarget as any).index];
     if (!automation) {
       return;
     }
     if (this.script) {
       showScriptEditor({ sequence: [automation as DeviceAction] });
+      fireEvent(this, "entry-selected");
       return;
     }
     const data = {};
     data[this.type] = [automation];
     showAutomationEditor(data);
+    fireEvent(this, "entry-selected");
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts
index eb18201a25..b42d2f069b 100644
--- a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts
@@ -91,7 +91,7 @@ export class DialogDeviceAutomation extends LitElement {
           }.create`
         )}
       >
-        <div @chip-clicked=${this.closeDialog}>
+        <div @entry-selected=${this.closeDialog}>
           ${this._triggers.length ||
           this._conditions.length ||
           this._actions.length
diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index 1ab80ff08c..73364c3969 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -9,7 +9,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/entity/state-badge";
@@ -25,6 +25,10 @@ import { showEntityEditorDialog } from "../../entities/show-dialog-entity-editor
 import { EntityRegistryStateEntry } from "../ha-config-device-page";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefix_from_entity_name";
+import {
+  ExtEntityRegistryEntry,
+  getExtendedEntityRegistryEntry,
+} from "../../../../data/entity_registry";
 
 @customElement("ha-device-entities-card")
 export class HaDeviceEntitiesCard extends LitElement {
@@ -38,6 +42,11 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   @property() public showDisabled = false;
 
+  @state() private _extDisabledEntityEntries?: Record<
+    string,
+    ExtEntityRegistryEntry
+  >;
+
   private _entityRows: Array<LovelaceRow | HuiErrorCard> = [];
 
   protected shouldUpdate(changedProps: PropertyValues) {
@@ -60,7 +69,13 @@ export class HaDeviceEntitiesCard extends LitElement {
               <div id="entities" @hass-more-info=${this._overrideMoreInfo}>
                 ${this.entities.map((entry: EntityRegistryStateEntry) => {
                   if (entry.disabled_by) {
-                    disabledEntities.push(entry);
+                    if (this._extDisabledEntityEntries) {
+                      disabledEntities.push(
+                        this._extDisabledEntityEntries[entry.entity_id] || entry
+                      );
+                    } else {
+                      disabledEntities.push(entry);
+                    }
                     return "";
                   }
                   return this.hass.states[entry.entity_id]
@@ -115,6 +130,28 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   private _toggleShowDisabled() {
     this.showDisabled = !this.showDisabled;
+    if (!this.showDisabled || this._extDisabledEntityEntries !== undefined) {
+      return;
+    }
+    this._extDisabledEntityEntries = {};
+    const toFetch = this.entities.filter((entry) => entry.disabled_by);
+
+    const worker = async () => {
+      if (toFetch.length === 0) {
+        return;
+      }
+
+      const entityId = toFetch.pop()!.entity_id;
+      const entry = await getExtendedEntityRegistryEntry(this.hass, entityId);
+      this._extDisabledEntityEntries![entityId] = entry;
+      this.requestUpdate("_extDisabledEntityEntries");
+      worker();
+    };
+
+    // Fetch 3 in parallel
+    worker();
+    worker();
+    worker();
   }
 
   private _renderEntity(entry: EntityRegistryStateEntry): TemplateResult {
@@ -125,9 +162,9 @@ export class HaDeviceEntitiesCard extends LitElement {
     const element = createRowElement(config);
     if (this.hass) {
       element.hass = this.hass;
-      const state = this.hass.states[entry.entity_id];
+      const stateObj = this.hass.states[entry.entity_id];
       const name = stripPrefixFromEntityName(
-        computeStateName(state),
+        computeStateName(stateObj),
         `${this.deviceName} `.toLowerCase()
       );
       if (name) {
@@ -141,6 +178,11 @@ export class HaDeviceEntitiesCard extends LitElement {
   }
 
   private _renderEntry(entry: EntityRegistryStateEntry): TemplateResult {
+    const name =
+      entry.stateName ||
+      entry.name ||
+      (entry as ExtEntityRegistryEntry).original_name;
+
     return html`
       <paper-icon-item
         class="disabled-entry"
@@ -153,9 +195,9 @@ export class HaDeviceEntitiesCard extends LitElement {
         ></ha-svg-icon>
         <paper-item-body>
           <div class="name">
-            ${entry.stateName
+            ${name
               ? stripPrefixFromEntityName(
-                  entry.stateName,
+                  name,
                   `${this.deviceName} `.toLowerCase()
                 )
               : entry.entity_id}
diff --git a/src/panels/config/devices/device-detail/ha-device-info-card.ts b/src/panels/config/devices/device-detail/ha-device-info-card.ts
index f442246d0f..3e8b56810b 100644
--- a/src/panels/config/devices/device-detail/ha-device-info-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-info-card.ts
@@ -82,9 +82,9 @@ export class HaDeviceCard extends LitElement {
     const device = devices.find((dev) => dev.id === deviceId);
     return device
       ? computeDeviceName(device, this.hass)
-      : `(${this.hass.localize(
-          "ui.panel.config.integrations.config_entry.device_unavailable"
-        )})`;
+      : `<${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.unknown_via_device"
+        )}>`;
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts
index cd6b6e5f7d..2cd06cbea6 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts
@@ -10,7 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
-  getIdentifiersFromDevice,
+  getZwaveJsIdentifiersFromDevice,
   ZWaveJSNodeIdentifiers,
 } from "../../../../../../data/zwave_js";
 import { haStyle } from "../../../../../../resources/styles";
@@ -34,7 +34,7 @@ export class HaDeviceActionsZWaveJS extends LitElement {
       this._entryId = this.device.config_entries[0];
 
       const identifiers: ZWaveJSNodeIdentifiers | undefined =
-        getIdentifiersFromDevice(this.device);
+        getZwaveJsIdentifiersFromDevice(this.device);
       if (!identifiers) {
         return;
       }
diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
index b69484180e..dc24356fff 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
@@ -13,8 +13,8 @@ import {
   getConfigEntries,
 } from "../../../../../../data/config_entries";
 import {
-  fetchNodeStatus,
-  getIdentifiersFromDevice,
+  fetchZwaveNodeStatus,
+  getZwaveJsIdentifiersFromDevice,
   nodeStatus,
   ZWaveJSNodeStatus,
   ZWaveJSNodeIdentifiers,
@@ -42,7 +42,7 @@ export class HaDeviceInfoZWaveJS extends LitElement {
   protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
       const identifiers: ZWaveJSNodeIdentifiers | undefined =
-        getIdentifiersFromDevice(this.device);
+        getZwaveJsIdentifiersFromDevice(this.device);
       if (!identifiers) {
         return;
       }
@@ -76,7 +76,11 @@ export class HaDeviceInfoZWaveJS extends LitElement {
       zwaveJsConfEntries++;
     }
 
-    this._node = await fetchNodeStatus(this.hass, this._entryId, this._nodeId);
+    this._node = await fetchZwaveNodeStatus(
+      this.hass,
+      this._entryId,
+      this._nodeId
+    );
   }
 
   protected render(): TemplateResult {
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 9b4de45b9b..5bc90abded 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -218,7 +218,7 @@ export class HaConfigDevicePage extends LitElement {
       <hass-tabs-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
       >
         ${
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index c8f12b685f..7b22784eb1 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -17,6 +17,7 @@ import {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import { ConfigEntry } from "../../../data/config_entries";
@@ -35,6 +36,7 @@ import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
+import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 
 interface DeviceRowData extends DeviceRegistryEntry {
   device?: DeviceRowData;
@@ -170,7 +172,7 @@ export class HaConfigDeviceDashboard extends LitElement {
         areaLookup[area.area_id] = area;
       }
 
-      const filterDomains: string[] = [];
+      let filterConfigEntry: ConfigEntry | undefined;
 
       filters.forEach((value, key) => {
         if (key === "config_entry") {
@@ -178,10 +180,7 @@ export class HaConfigDeviceDashboard extends LitElement {
             device.config_entries.includes(value)
           );
           startLength = outputDevices.length;
-          const configEntry = entries.find((entry) => entry.entry_id === value);
-          if (configEntry) {
-            filterDomains.push(configEntry.domain);
-          }
+          filterConfigEntry = entries.find((entry) => entry.entry_id === value);
         }
       });
 
@@ -220,7 +219,10 @@ export class HaConfigDeviceDashboard extends LitElement {
       }));
 
       this._numHiddenDevices = startLength - outputDevices.length;
-      return { devicesOutput: outputDevices, filteredDomains: filterDomains };
+      return {
+        devicesOutput: outputDevices,
+        filteredConfigEntry: filterConfigEntry,
+      };
     }
   );
 
@@ -352,16 +354,16 @@ export class HaConfigDeviceDashboard extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const { devicesOutput, filteredDomains } = this._devicesAndFilterDomains(
-      this.devices,
-      this.entries,
-      this.entities,
-      this.areas,
-      this._searchParms,
-      this._showDisabled,
-      this.hass.localize
-    );
-    const includeZHAFab = filteredDomains.includes("zha");
+    const { devicesOutput, filteredConfigEntry } =
+      this._devicesAndFilterDomains(
+        this.devices,
+        this.entries,
+        this.entities,
+        this.areas,
+        this._searchParms,
+        this._showDisabled,
+        this.hass.localize
+      );
     const activeFilters = this._activeFilters(
       this.entries,
       this._searchParms,
@@ -375,7 +377,7 @@ export class HaConfigDeviceDashboard extends LitElement {
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
           : "/config"}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .route=${this.route}
         .activeFilters=${activeFilters}
         .numHidden=${this._numHiddenDevices}
@@ -394,9 +396,25 @@ export class HaConfigDeviceDashboard extends LitElement {
         @search-changed=${this._handleSearchChange}
         @row-click=${this._handleRowClicked}
         clickable
-        .hasFab=${includeZHAFab}
+        .hasFab=${filteredConfigEntry &&
+        (filteredConfigEntry.domain === "zha" ||
+          filteredConfigEntry.domain === "zwave_js")}
       >
-        ${includeZHAFab
+        ${!filteredConfigEntry
+          ? ""
+          : filteredConfigEntry.domain === "zwave_js"
+          ? html`
+              <ha-fab
+                slot="fab"
+                .label=${this.hass.localize("ui.panel.config.zha.add_device")}
+                extended
+                ?rtl=${computeRTL(this.hass)}
+                @click=${this._showZJSAddDeviceDialog}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+              </ha-fab>
+            `
+          : filteredConfigEntry.domain === "zha"
           ? html`<a href="/config/zha/add" slot="fab">
               <ha-fab
                 .label=${this.hass.localize("ui.panel.config.zha.add_device")}
@@ -481,6 +499,22 @@ export class HaConfigDeviceDashboard extends LitElement {
     this._showDisabled = true;
   }
 
+  private _showZJSAddDeviceDialog() {
+    const { filteredConfigEntry } = this._devicesAndFilterDomains(
+      this.devices,
+      this.entries,
+      this.entities,
+      this.areas,
+      this._searchParms,
+      this._showDisabled,
+      this.hass.localize
+    );
+
+    showZWaveJSAddNodeDialog(this, {
+      entry_id: filteredConfigEntry!.entry_id,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       css`
diff --git a/src/panels/config/energy/ha-config-energy.ts b/src/panels/config/energy/ha-config-energy.ts
index b93c93c749..970573cbe3 100644
--- a/src/panels/config/energy/ha-config-energy.ts
+++ b/src/panels/config/energy/ha-config-energy.ts
@@ -1,3 +1,4 @@
+import "../../../layouts/hass-error-screen";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
@@ -9,11 +10,10 @@ import {
   getEnergyPreferences,
 } from "../../../data/energy";
 import "../../../layouts/hass-loading-screen";
-import "../../../layouts/hass-tabs-subpage";
+import "../../../layouts/hass-subpage";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "../../../components/ha-alert";
-import { configSections } from "../ha-panel-config";
 import "./components/ha-energy-device-settings";
 import "./components/ha-energy-grid-settings";
 import "./components/ha-energy-solar-settings";
@@ -68,14 +68,13 @@ class HaConfigEnergy extends LitElement {
     }
 
     return html`
-      <hass-tabs-subpage
+      <hass-subpage
         .hass=${this.hass}
         .narrow=${this.narrow}
         .backPath=${this._searchParms.has("historyBack")
           ? undefined
           : "/config"}
-        .route=${this.route}
-        .tabs=${configSections.experiences}
+        .header=${this.hass.localize("ui.panel.config.energy.caption")}
       >
         <ha-alert>
           ${this.hass.localize("ui.panel.config.energy.new_device_info")}
@@ -113,7 +112,7 @@ class HaConfigEnergy extends LitElement {
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
         </div>
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 
diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts
index 74bae4b7cb..afe29c75cd 100644
--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/src/panels/config/entities/dialog-entity-editor.ts
@@ -165,21 +165,6 @@ export class DialogEntityEditor extends LitElement {
                 >${this.hass.localize("ui.dialogs.entity_registry.faq")}</a
               >`
             )}
-            ${this.hass.userData?.showAdvanced
-              ? html`<br /><br />
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.info_customize",
-                    "customize_link",
-                    html`<a
-                      href=${"/config/customize/edit/" +
-                      this._params!.entity_id}
-                      rel="noreferrer"
-                      >${this.hass.localize(
-                        "ui.dialogs.entity_registry.customize_link"
-                      )}</a
-                    >`
-                  )}`
-              : ""}
           </div>
         `;
       case "tab-related":
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index 96fab20b01..798d9e1412 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
+import type { PaperItemElement } from "@polymer/paper-item/paper-item";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -16,6 +17,7 @@ import { domainIcon } from "../../../common/entity/domain_icon";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-picker";
+import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
 import {
@@ -39,6 +41,11 @@ 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: ["window", "door", "garage"],
+  binary_sensor: ["window", "door", "garage_door", "opening"],
+};
+
 @customElement("entity-registry-settings")
 export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -51,6 +58,8 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
   @state() private _entityId!: string;
 
+  @state() private _deviceClass?: string;
+
   @state() private _areaId?: string | null;
 
   @state() private _disabledBy!: string | null;
@@ -85,6 +94,8 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       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;
@@ -102,9 +113,11 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     }
     const stateObj: HassEntity | undefined =
       this.hass.states[this.entry.entity_id];
-    const invalidDomainUpdate =
-      computeDomain(this._entityId.trim()) !==
-      computeDomain(this.entry.entity_id);
+
+    const domain = computeDomain(this.entry.entity_id);
+
+    const invalidDomainUpdate = computeDomain(this._entityId.trim()) !== domain;
+
     return html`
       ${!stateObj
         ? html`
@@ -143,6 +156,31 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
             : undefined}
           .disabled=${this._submitting}
         ></ha-icon-picker>
+        ${OVERRIDE_DEVICE_CLASSES[domain]?.includes(this._deviceClass) ||
+        (domain === "cover" && this.entry.original_device_class === null)
+          ? html`<ha-paper-dropdown-menu
+              .label=${this.hass.localize(
+                "ui.dialogs.entity_registry.editor.device_class"
+              )}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                attr-for-selected="item-value"
+                .selected=${this._deviceClass}
+                @selected-item-changed=${this._deviceClassChanged}
+              >
+                ${OVERRIDE_DEVICE_CLASSES[domain].map(
+                  (deviceClass: string) => html`
+                    <paper-item .itemValue=${deviceClass}>
+                      ${this.hass.localize(
+                        `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
+                      )}
+                    </paper-item>
+                  `
+                )}
+              </paper-listbox>
+            </ha-paper-dropdown-menu>`
+          : ""}
         <paper-input
           .value=${this._entityId}
           @value-changed=${this._entityIdChanged}
@@ -264,6 +302,14 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     this._entityId = ev.detail.value;
   }
 
+  private _deviceClassChanged(ev: PolymerChangedEvent<PaperItemElement>): void {
+    this._error = undefined;
+    if (ev.detail.value === null) {
+      return;
+    }
+    this._deviceClass = (ev.detail.value as any).itemValue;
+  }
+
   private _areaPicked(ev: CustomEvent) {
     this._error = undefined;
     this._areaId = ev.detail.value;
@@ -289,6 +335,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       name: this._name.trim() || null,
       icon: this._icon.trim() || null,
       area_id: this._areaId || null,
+      device_class: this._deviceClass || null,
       new_entity_id: this._entityId.trim(),
     };
     if (
@@ -378,6 +425,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           padding-bottom: max(env(safe-area-inset-bottom), 8px);
           background-color: var(--mdc-theme-surface, #fff);
         }
+        ha-paper-dropdown-menu {
+          width: 100%;
+        }
         ha-switch {
           margin-right: 16px;
         }
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 055b770147..e74c44036d 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -320,8 +320,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         }
       }
 
-      entities.forEach((entity) => entity);
-
       let filteredEntities = showReadOnly
         ? entities.concat(stateEntities)
         : entities;
@@ -376,9 +374,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         result.push({
           ...entry,
           entity,
-          name:
-            computeEntityRegistryName(this.hass!, entry) ||
-            this.hass.localize("state.default.unavailable"),
+          name: computeEntityRegistryName(this.hass!, entry),
           unavailable,
           restored,
           area: area ? area.name : undefined,
@@ -480,7 +476,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           ? undefined
           : "/config"}
         .route=${this.route}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
         .columns=${this._columns(
           this.narrow,
           this.hass.language,
diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts
index 01211a9b7a..16dc7bc389 100644
--- a/src/panels/config/ha-config-section.ts
+++ b/src/panels/config/ha-config-section.ts
@@ -8,11 +8,15 @@ export class HaConfigSection extends LitElement {
 
   @property({ type: Boolean }) public vertical = false;
 
+  @property({ type: Boolean, attribute: "full-width" })
+  public fullWidth = false;
+
   protected render() {
     return html`
       <div
         class="content ${classMap({
           narrow: !this.isWide,
+          "full-width": this.fullWidth,
         })}"
       >
         <div class="header"><slot name="header"></slot></div>
@@ -111,6 +115,14 @@ export class HaConfigSection extends LitElement {
         margin-right: 0;
         max-width: 500px;
       }
+
+      .full-width {
+        padding: 0;
+      }
+
+      .full-width .layout {
+        flex-direction: column;
+      }
     `;
   }
 }
diff --git a/src/panels/config/ha-entity-config.ts b/src/panels/config/ha-entity-config.ts
deleted file mode 100644
index 87a3fa0687..0000000000
--- a/src/panels/config/ha-entity-config.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import "@material/mwc-button";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "../../components/buttons/ha-progress-button";
-import "../../components/entity/ha-entity-picker";
-import "../../components/ha-card";
-import "../../components/ha-circular-progress";
-import { haStyle } from "../../resources/styles";
-import "../../styles/polymer-ha-style";
-import type { HomeAssistant } from "../../types";
-import { HaFormCustomize } from "./customize/ha-form-customize";
-
-@customElement("ha-entity-config")
-export class HaEntityConfig extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public selectedEntityId!: string;
-
-  // False if no entity is selected or currently saving or loading
-  @property() private _formEditState = false;
-
-  @query("#form") private _form!: HaFormCustomize;
-
-  protected render(): TemplateResult {
-    return html`
-      <ha-card>
-        <div class="card-content">
-          <ha-entity-picker
-            .hass=${this.hass}
-            .value=${this.selectedEntityId}
-            .configValue=${"entity"}
-            @change=${this._selectedEntityChanged}
-            allow-custom-entity
-            hideClearIcon
-          >
-          </ha-entity-picker>
-
-          <div class="form-container">
-            <ha-form-customize .hass=${this.hass} .id=${"form"}>
-            </ha-form-customize>
-          </div>
-        </div>
-        <div class="card-actions">
-          <ha-progress-button
-            @click=${this._saveEntity}
-            .disabled=${!this._formEditState}
-          >
-            ${this.hass.localize("ui.common.save")}
-          </ha-progress-button>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    if (
-      changedProps.has("selectedEntityId") &&
-      changedProps.get("selectedEntityId") !== this.selectedEntityId
-    ) {
-      this._selectEntity(this.selectedEntityId);
-      this.requestUpdate();
-    }
-  }
-
-  private _selectedEntityChanged(ev) {
-    this._selectEntity(ev.target.value);
-  }
-
-  private async _selectEntity(entityId?: string) {
-    if (!this._form || !entityId) return;
-    const entity = this.hass.states[entityId];
-    if (!entity) return;
-
-    this._formEditState = false;
-    await this._form.loadEntity(entity);
-    this._formEditState = true;
-  }
-
-  private async _saveEntity(ev) {
-    if (!this._formEditState) return;
-    this._formEditState = false;
-    const button = ev.target;
-    button.progress = true;
-
-    try {
-      await this._form.saveEntity();
-      this._formEditState = true;
-      button.actionSuccess();
-    } catch {
-      button.actionError();
-    } finally {
-      button.progress = false;
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        ha-card {
-          direction: ltr;
-        }
-
-        .form-placeholder {
-          height: 96px;
-        }
-
-        .hidden {
-          display: none;
-        }
-      `,
-    ];
-  }
-}
diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts
index a6a6b46126..4c23f77086 100644
--- a/src/panels/config/ha-panel-config.ts
+++ b/src/panels/config/ha-panel-config.ts
@@ -1,6 +1,7 @@
 import {
   mdiAccount,
   mdiBadgeAccountHorizontal,
+  mdiCog,
   mdiDevices,
   mdiHomeAssistant,
   mdiInformation,
@@ -10,7 +11,6 @@ import {
   mdiNfcVariant,
   mdiPalette,
   mdiPaletteSwatch,
-  mdiPencil,
   mdiPuzzle,
   mdiRobot,
   mdiScriptText,
@@ -28,6 +28,10 @@ import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
+import {
+  fetchSupervisorAvailableUpdates,
+  SupervisorAvailableUpdates,
+} from "../../data/supervisor/supervisor";
 import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -41,12 +45,88 @@ declare global {
 }
 
 export const configSections: { [name: string]: PageNavigation[] } = {
-  integrations: [
+  dashboard: [
+    {
+      path: "/config/integrations",
+      name: "Devices & Services",
+      description: "Integrations, devices, entities and areas",
+      iconPath: mdiDevices,
+      iconColor: "#0D47A1",
+      core: true,
+    },
+    {
+      path: "/config/automation",
+      name: "Automations & Scenes",
+      description: "Automations, blueprints, scenes and scripts",
+      iconPath: mdiRobot,
+      iconColor: "#518C43",
+      components: ["automation", "blueprint", "scene", "script"],
+    },
+    {
+      path: "/config/helpers",
+      name: "Automation Helpers",
+      description: "Elements that help build automations",
+      iconPath: mdiTools,
+      iconColor: "#4D2EA4",
+      core: true,
+    },
+    {
+      path: "/hassio",
+      name: "Add-ons & Backups (Supervisor)",
+      description: "Create backups, check logs or reboot your system",
+      iconPath: mdiHomeAssistant,
+      iconColor: "#4084CD",
+      component: "hassio",
+    },
+    {
+      path: "/config/lovelace/dashboards",
+      name: "Dashboards",
+      description: "Create customized sets of cards to control your home",
+      iconPath: mdiViewDashboard,
+      iconColor: "#B1345C",
+      component: "lovelace",
+    },
+    {
+      path: "/config/energy",
+      name: "Energy",
+      description: "Monitor your energy production and consumption",
+      iconPath: mdiLightningBolt,
+      iconColor: "#F1C447",
+      component: "energy",
+    },
+    {
+      path: "/config/tags",
+      name: "Tags",
+      description:
+        "Trigger automations when a NFC tag, QR code, etc. is scanned",
+      iconPath: mdiNfcVariant,
+      iconColor: "#616161",
+      component: "tag",
+    },
+    {
+      path: "/config/person",
+      name: "People & Zones",
+      description: "Manage the people and zones that Home Assistant tracks",
+      iconPath: mdiAccount,
+      iconColor: "#E48629",
+      components: ["person", "zone", "users"],
+    },
+    {
+      path: "/config/core",
+      name: "Settings",
+      description: "Basic settings, server controls, logs and info",
+      iconPath: mdiCog,
+      iconColor: "#4A5963",
+      core: true,
+    },
+  ],
+  devices: [
     {
       component: "integrations",
       path: "/config/integrations",
       translationKey: "ui.panel.config.integrations.caption",
       iconPath: mdiPuzzle,
+      iconColor: "#2D338F",
       core: true,
     },
     {
@@ -54,6 +134,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/devices",
       translationKey: "ui.panel.config.devices.caption",
       iconPath: mdiDevices,
+      iconColor: "#2D338F",
       core: true,
     },
     {
@@ -61,6 +142,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/entities",
       translationKey: "ui.panel.config.entities.caption",
       iconPath: mdiShape,
+      iconColor: "#2D338F",
       core: true,
     },
     {
@@ -68,33 +150,38 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/areas",
       translationKey: "ui.panel.config.areas.caption",
       iconPath: mdiSofa,
+      iconColor: "#2D338F",
       core: true,
     },
   ],
-  automation: [
+  automations: [
     {
       component: "blueprint",
       path: "/config/blueprint",
       translationKey: "ui.panel.config.blueprint.caption",
       iconPath: mdiPaletteSwatch,
+      iconColor: "#518C43",
     },
     {
       component: "automation",
       path: "/config/automation",
       translationKey: "ui.panel.config.automation.caption",
       iconPath: mdiRobot,
+      iconColor: "#518C43",
     },
     {
       component: "scene",
       path: "/config/scene",
       translationKey: "ui.panel.config.scene.caption",
       iconPath: mdiPalette,
+      iconColor: "#518C43",
     },
     {
       component: "script",
       path: "/config/script",
       translationKey: "ui.panel.config.script.caption",
       iconPath: mdiScriptText,
+      iconColor: "#518C43",
     },
   ],
   helpers: [
@@ -103,21 +190,26 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/helpers",
       translationKey: "ui.panel.config.helpers.caption",
       iconPath: mdiTools,
+      iconColor: "#4D2EA4",
       core: true,
     },
   ],
-  experiences: [
+  tags: [
     {
       component: "tag",
       path: "/config/tags",
       translationKey: "ui.panel.config.tag.caption",
       iconPath: mdiNfcVariant,
+      iconColor: "#616161",
     },
+  ],
+  energy: [
     {
       component: "energy",
       path: "/config/energy",
       translationKey: "ui.panel.config.energy.caption",
       iconPath: mdiLightningBolt,
+      iconColor: "#F1C447",
     },
   ],
   lovelace: [
@@ -126,6 +218,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/lovelace/dashboards",
       translationKey: "ui.panel.config.lovelace.caption",
       iconPath: mdiViewDashboard,
+      iconColor: "#B1345C",
     },
   ],
   persons: [
@@ -134,18 +227,21 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/person",
       translationKey: "ui.panel.config.person.caption",
       iconPath: mdiAccount,
+      iconColor: "#E48629",
     },
     {
       component: "zone",
       path: "/config/zone",
       translationKey: "ui.panel.config.zone.caption",
       iconPath: mdiMapMarkerRadius,
+      iconColor: "#E48629",
     },
     {
       component: "users",
       path: "/config/users",
       translationKey: "ui.panel.config.users.caption",
       iconPath: mdiBadgeAccountHorizontal,
+      iconColor: "#E48629",
       core: true,
       advancedOnly: true,
     },
@@ -156,6 +252,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/core",
       translationKey: "ui.panel.config.core.caption",
       iconPath: mdiHomeAssistant,
+      iconColor: "#4A5963",
       core: true,
     },
     {
@@ -163,6 +260,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/server_control",
       translationKey: "ui.panel.config.server_control.caption",
       iconPath: mdiServer,
+      iconColor: "#4A5963",
       core: true,
     },
     {
@@ -170,6 +268,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/logs",
       translationKey: "ui.panel.config.logs.caption",
       iconPath: mdiMathLog,
+      iconColor: "#4A5963",
       core: true,
     },
     {
@@ -177,19 +276,10 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/info",
       translationKey: "ui.panel.config.info.caption",
       iconPath: mdiInformation,
+      iconColor: "#4A5963",
       core: true,
     },
   ],
-  advanced: [
-    {
-      component: "customize",
-      path: "/config/customize",
-      translationKey: "ui.panel.config.customize.caption",
-      iconPath: mdiPencil,
-      core: true,
-      advancedOnly: true,
-    },
-  ],
 };
 
 @customElement("ha-panel-config")
@@ -243,10 +333,8 @@ class HaPanelConfig extends HassRouterPage {
         tag: "ha-config-info",
         load: () => import("./info/ha-config-info"),
       },
-      customize: {
-        tag: "ha-config-customize",
-        load: () => import("./customize/ha-config-customize"),
-      },
+      // customize was removed in 2021.12, fallback to dashboard
+      customize: "dashboard",
       dashboard: {
         tag: "ha-config-dashboard",
         load: () => import("./dashboard/ha-config-dashboard"),
@@ -329,6 +417,8 @@ class HaPanelConfig extends HassRouterPage {
 
   @state() private _cloudStatus?: CloudStatus;
 
+  @state() private _supervisorUpdates?: SupervisorAvailableUpdates[] | null;
+
   private _listeners: Array<() => void> = [];
 
   public connectedCallback() {
@@ -358,6 +448,11 @@ class HaPanelConfig extends HassRouterPage {
     if (isComponentLoaded(this.hass, "cloud")) {
       this._updateCloudStatus();
     }
+    if (isComponentLoaded(this.hass, "hassio")) {
+      this._loadSupervisorUpdates();
+    } else {
+      this._supervisorUpdates = null;
+    }
     this.addEventListener("ha-refresh-cloud-status", () =>
       this._updateCloudStatus()
     );
@@ -388,6 +483,7 @@ class HaPanelConfig extends HassRouterPage {
         isWide,
         narrow: this.narrow,
         cloudStatus: this._cloudStatus,
+        supervisorUpdates: this._supervisorUpdates,
       });
     } else {
       el.route = this.routeTail;
@@ -396,6 +492,7 @@ class HaPanelConfig extends HassRouterPage {
       el.isWide = isWide;
       el.narrow = this.narrow;
       el.cloudStatus = this._cloudStatus;
+      el.supervisorUpdates = this._supervisorUpdates;
     }
   }
 
@@ -413,6 +510,16 @@ class HaPanelConfig extends HassRouterPage {
       setTimeout(() => this._updateCloudStatus(), 5000);
     }
   }
+
+  private async _loadSupervisorUpdates(): Promise<void> {
+    try {
+      this._supervisorUpdates = await fetchSupervisorAvailableUpdates(
+        this.hass
+      );
+    } catch (err) {
+      this._supervisorUpdates = null;
+    }
+  }
 }
 
 declare global {
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index a3dbdff879..a4d43cd7f4 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -319,7 +319,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.integrations}
+        .tabs=${configSections.devices}
       >
         ${this.narrow
           ? html`
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts
index 032ee83778..91bd86246c 100644
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts
@@ -43,7 +43,7 @@ class DialogZHADeviceChildren extends LitElement {
             outputDevices.push({
               name: zhaDevice.user_given_name || zhaDevice.name,
               id: zhaDevice.device_reg_id,
-              lqi: child.lqi,
+              lqi: parseInt(child.lqi),
             });
           }
         });
@@ -64,7 +64,7 @@ class DialogZHADeviceChildren extends LitElement {
       title: "LQI",
       sortable: true,
       filterable: true,
-      direction: "asc",
+      type: "numeric",
       width: "75px",
     },
   };
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
index 8403cac13b..f635d6232a 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@@ -233,11 +233,11 @@ export class ZHANetworkVisualizationPage extends LitElement {
               from: device.ieee,
               to: neighbor.ieee,
               label: neighbor.lqi + "",
-              color: this._getLQI(neighbor.lqi),
+              color: this._getLQI(parseInt(neighbor.lqi)),
             });
           } else {
             edges[idx].color = this._getLQI(
-              (parseInt(edges[idx].label!) + neighbor.lqi) / 2
+              (parseInt(edges[idx].label!) + parseInt(neighbor.lqi)) / 2
             );
             edges[idx].label += "/" + neighbor.lqi;
           }
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
index 99cf52fb36..ee19b1aae6 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
@@ -21,10 +21,10 @@ import {
 import {
   migrateZwave,
   ZWaveJsMigrationData,
-  fetchNetworkStatus as fetchZwaveJsNetworkStatus,
-  fetchNodeStatus,
-  getIdentifiersFromDevice,
-  subscribeNodeReady,
+  fetchZwaveNetworkStatus as fetchZwaveJsNetworkStatus,
+  fetchZwaveNodeStatus,
+  getZwaveJsIdentifiersFromDevice,
+  subscribeZwaveNodeReady,
 } from "../../../../../data/zwave_js";
 import {
   fetchMigrationConfig,
@@ -425,7 +425,7 @@ export class ZwaveMigration extends LitElement {
       this._zwaveJsEntryId!
     );
     const nodeStatePromisses = networkStatus.controller.nodes.map((nodeId) =>
-      fetchNodeStatus(this.hass, this._zwaveJsEntryId!, nodeId)
+      fetchZwaveNodeStatus(this.hass, this._zwaveJsEntryId!, nodeId)
     );
     const nodesNotReady = (await Promise.all(nodeStatePromisses)).filter(
       (node) => !node.ready
@@ -436,13 +436,18 @@ export class ZwaveMigration extends LitElement {
       return;
     }
     this._nodeReadySubscriptions = nodesNotReady.map((node) =>
-      subscribeNodeReady(this.hass, this._zwaveJsEntryId!, node.node_id, () => {
-        this._getZwaveJSNodesStatus();
-      })
+      subscribeZwaveNodeReady(
+        this.hass,
+        this._zwaveJsEntryId!,
+        node.node_id,
+        () => {
+          this._getZwaveJSNodesStatus();
+        }
+      )
     );
     const deviceReg = await fetchDeviceRegistry(this.hass);
     this._waitingOnDevices = deviceReg
-      .map((device) => getIdentifiersFromDevice(device))
+      .map((device) => getZwaveJsIdentifiersFromDevice(device))
       .filter(Boolean);
   }
 
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index b33c340cc5..b9f846fa09 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -1,30 +1,40 @@
 import "@material/mwc-button/mwc-button";
-import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
+import "@material/mwc-textfield/mwc-textfield";
+import { mdiAlertCircle, mdiCheckCircle, mdiQrcodeScan } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-alert";
+import { HaCheckbox } from "../../../../../components/ha-checkbox";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-formfield";
+import "../../../../../components/ha-radio";
 import "../../../../../components/ha-switch";
 import {
-  grantSecurityClasses,
+  zwaveGrantSecurityClasses,
   InclusionStrategy,
+  MINIMUM_QR_STRING_LENGTH,
+  zwaveParseQrCode,
+  provisionZwaveSmartStartNode,
+  QRProvisioningInformation,
   RequestedGrant,
   SecurityClass,
-  stopInclusion,
-  subscribeAddNode,
-  validateDskAndEnterPin,
+  stopZwaveInclusion,
+  subscribeAddZwaveNode,
+  zwaveSupportsFeature,
+  zwaveValidateDskAndEnterPin,
+  ZWaveFeature,
+  PlannedProvisioningEntry,
 } from "../../../../../data/zwave_js";
 import { haStyle, haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ZWaveJSAddNodeDialogParams } from "./show-dialog-zwave_js-add-node";
-import "../../../../../components/ha-radio";
-import { HaCheckbox } from "../../../../../components/ha-checkbox";
-import "../../../../../components/ha-alert";
+import "../../../../../components/ha-qr-scanner";
 
 export interface ZWaveJSAddNodeDevice {
   id: string;
@@ -40,11 +50,14 @@ class DialogZWaveJSAddNode extends LitElement {
   @state() private _status?:
     | "loading"
     | "started"
+    | "started_specific"
     | "choose_strategy"
+    | "qr_scan"
     | "interviewing"
     | "failed"
     | "timed_out"
     | "finished"
+    | "provisioned"
     | "validate_dsk_enter_pin"
     | "grant_security_classes";
 
@@ -64,10 +77,14 @@ class DialogZWaveJSAddNode extends LitElement {
 
   @state() private _lowSecurity = false;
 
+  @state() private _supportsSmartStart?: boolean;
+
   private _addNodeTimeoutHandle?: number;
 
   private _subscribed?: Promise<UnsubscribeFunc>;
 
+  private _qrProcessing = false;
+
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     this._unsubscribe();
@@ -76,6 +93,7 @@ class DialogZWaveJSAddNode extends LitElement {
   public async showDialog(params: ZWaveJSAddNodeDialogParams): Promise<void> {
     this._entryId = params.entry_id;
     this._status = "loading";
+    this._checkSmartStartSupport();
     this._startInclusion();
   }
 
@@ -157,6 +175,22 @@ class DialogZWaveJSAddNode extends LitElement {
               >
                 Search device
               </mwc-button>`
+          : this._status === "qr_scan"
+          ? html`<ha-qr-scanner
+                .localize=${this.hass.localize}
+                @qr-code-scanned=${this._qrCodeScanned}
+              ></ha-qr-scanner>
+              <p>
+                If scanning doesn't work, you can enter the QR code value
+                manually:
+              </p>
+              <mwc-textfield
+                .label=${this.hass.localize(
+                  "ui.panel.config.zwave_js.add_node.enter_qr_code"
+                )}
+                .disabled=${this._qrProcessing}
+                @keydown=${this._qrKeyDown}
+              ></mwc-textfield>`
           : this._status === "validate_dsk_enter_pin"
           ? html`
                 <p>
@@ -241,18 +275,28 @@ class DialogZWaveJSAddNode extends LitElement {
                 Retry
               </mwc-button>
             `
+          : this._status === "started_specific"
+          ? html`<h3>
+                ${this.hass.localize(
+                  "ui.panel.config.zwave_js.add_node.searching_device"
+                )}
+              </h3>
+              <ha-circular-progress active></ha-circular-progress>
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.zwave_js.add_node.follow_device_instructions"
+                )}
+              </p>`
           : this._status === "started"
           ? html`
-              <div class="flex-container">
-                <ha-circular-progress active></ha-circular-progress>
-                <div class="status">
-                  <p>
-                    <b
-                      >${this.hass.localize(
-                        "ui.panel.config.zwave_js.add_node.controller_in_inclusion_mode"
-                      )}</b
-                    >
-                  </p>
+              <div class="select-inclusion">
+                <div class="outline">
+                  <h2>
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.add_node.searching_device"
+                    )}
+                  </h2>
+                  <ha-circular-progress active></ha-circular-progress>
                   <p>
                     ${this.hass.localize(
                       "ui.panel.config.zwave_js.add_node.follow_device_instructions"
@@ -263,15 +307,37 @@ class DialogZWaveJSAddNode extends LitElement {
                       class="link"
                       @click=${this._chooseInclusionStrategy}
                     >
-                      Advanced inclusion
+                      ${this.hass.localize(
+                        "ui.panel.config.zwave_js.add_node.choose_inclusion_strategy"
+                      )}
                     </button>
                   </p>
                 </div>
+                ${this._supportsSmartStart
+                  ? html` <div class="outline">
+                      <h2>
+                        ${this.hass.localize(
+                          "ui.panel.config.zwave_js.add_node.qr_code"
+                        )}
+                      </h2>
+                      <ha-svg-icon .path=${mdiQrcodeScan}></ha-svg-icon>
+                      <p>
+                        ${this.hass.localize(
+                          "ui.panel.config.zwave_js.add_node.qr_code_paragraph"
+                        )}
+                      </p>
+                      <p>
+                        <mwc-button @click=${this._scanQRCode}>
+                          ${this.hass.localize(
+                            "ui.panel.config.zwave_js.add_node.scan_qr_code"
+                          )}
+                        </mwc-button>
+                      </p>
+                    </div>`
+                  : ""}
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
-                ${this.hass.localize(
-                  "ui.panel.config.zwave_js.add_node.cancel_inclusion"
-                )}
+                ${this.hass.localize("ui.common.cancel")}
               </mwc-button>
             `
           : this._status === "interviewing"
@@ -310,16 +376,18 @@ class DialogZWaveJSAddNode extends LitElement {
           : this._status === "failed"
           ? html`
               <div class="flex-container">
-                <ha-svg-icon
-                  .path=${mdiCloseCircle}
-                  class="failed"
-                ></ha-svg-icon>
                 <div class="status">
-                  <p>
-                    ${this.hass.localize(
+                  <ha-alert
+                    alert-type="error"
+                    .title=${this.hass.localize(
                       "ui.panel.config.zwave_js.add_node.inclusion_failed"
                     )}
-                  </p>
+                  >
+                    ${this._error ||
+                    this.hass.localize(
+                      "ui.panel.config.zwave_js.add_node.check_logs"
+                    )}
+                  </ha-alert>
                   ${this._stages
                     ? html` <div class="stages">
                         ${this._stages.map(
@@ -391,6 +459,23 @@ class DialogZWaveJSAddNode extends LitElement {
                 ${this.hass.localize("ui.panel.config.zwave_js.common.close")}
               </mwc-button>
             `
+          : this._status === "provisioned"
+          ? html` <div class="flex-container">
+                <ha-svg-icon
+                  .path=${mdiCheckCircle}
+                  class="success"
+                ></ha-svg-icon>
+                <div class="status">
+                  <p>
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.add_node.provisioning_finished"
+                    )}
+                  </p>
+                </div>
+              </div>
+              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.panel.config.zwave_js.common.close")}
+              </mwc-button>`
           : ""}
       </ha-dialog>
     `;
@@ -417,6 +502,83 @@ class DialogZWaveJSAddNode extends LitElement {
     }
   }
 
+  private async _scanQRCode(): Promise<void> {
+    this._unsubscribe();
+    this._status = "qr_scan";
+  }
+
+  private _qrKeyDown(ev: KeyboardEvent) {
+    if (this._qrProcessing) {
+      return;
+    }
+    if (ev.key === "Enter") {
+      this._handleQrCodeScanned((ev.target as TextField).value);
+    }
+  }
+
+  private _qrCodeScanned(ev: CustomEvent): void {
+    if (this._qrProcessing) {
+      return;
+    }
+    this._handleQrCodeScanned(ev.detail.value);
+  }
+
+  private async _handleQrCodeScanned(qrCodeString: string): Promise<void> {
+    this._error = undefined;
+    if (this._status !== "qr_scan" || this._qrProcessing) {
+      return;
+    }
+    this._qrProcessing = true;
+    if (
+      qrCodeString.length < MINIMUM_QR_STRING_LENGTH ||
+      !qrCodeString.startsWith("90")
+    ) {
+      this._qrProcessing = false;
+      this._error = `Invalid QR code (${qrCodeString})`;
+      return;
+    }
+    let provisioningInfo: QRProvisioningInformation;
+    try {
+      provisioningInfo = await zwaveParseQrCode(
+        this.hass,
+        this._entryId!,
+        qrCodeString
+      );
+    } catch (err: any) {
+      this._qrProcessing = false;
+      this._error = err.message;
+      return;
+    }
+    this._status = "loading";
+    // wait for QR scanner to be removed before resetting qr processing
+    this.updateComplete.then(() => {
+      this._qrProcessing = false;
+    });
+    if (provisioningInfo.version === 1) {
+      try {
+        await provisionZwaveSmartStartNode(
+          this.hass,
+          this._entryId!,
+          provisioningInfo
+        );
+        this._status = "provisioned";
+      } catch (err: any) {
+        this._error = err.message;
+        this._status = "failed";
+      }
+    } else if (provisioningInfo.version === 0) {
+      this._inclusionStrategy = InclusionStrategy.Security_S2;
+      // this._startInclusion(provisioningInfo);
+      this._startInclusion(undefined, undefined, {
+        dsk: "34673-15546-46480-39591-32400-22155-07715-45994",
+        security_classes: [0, 1, 7],
+      });
+    } else {
+      this._error = "This QR code is not supported";
+      this._status = "failed";
+    }
+  }
+
   private _handlePinKeyUp(ev: KeyboardEvent) {
     if (ev.key === "Enter") {
       this._validateDskAndEnterPin();
@@ -427,7 +589,7 @@ class DialogZWaveJSAddNode extends LitElement {
     this._status = "loading";
     this._error = undefined;
     try {
-      await validateDskAndEnterPin(
+      await zwaveValidateDskAndEnterPin(
         this.hass,
         this._entryId!,
         this._pinInput!.value as string
@@ -442,7 +604,7 @@ class DialogZWaveJSAddNode extends LitElement {
     this._status = "loading";
     this._error = undefined;
     try {
-      await grantSecurityClasses(
+      await zwaveGrantSecurityClasses(
         this.hass,
         this._entryId!,
         this._securityClasses
@@ -460,17 +622,33 @@ class DialogZWaveJSAddNode extends LitElement {
     this._startInclusion();
   }
 
-  private _startInclusion(): void {
+  private async _checkSmartStartSupport() {
+    this._supportsSmartStart = (
+      await zwaveSupportsFeature(
+        this.hass,
+        this._entryId!,
+        ZWaveFeature.SmartStart
+      )
+    ).supported;
+  }
+
+  private _startInclusion(
+    qrProvisioningInformation?: QRProvisioningInformation,
+    qrCodeString?: string,
+    plannedProvisioningEntry?: PlannedProvisioningEntry
+  ): void {
     if (!this.hass) {
       return;
     }
     this._lowSecurity = false;
-    this._subscribed = subscribeAddNode(
+    const specificDevice =
+      qrProvisioningInformation || qrCodeString || plannedProvisioningEntry;
+    this._subscribed = subscribeAddZwaveNode(
       this.hass,
       this._entryId!,
       (message) => {
         if (message.event === "inclusion started") {
-          this._status = "started";
+          this._status = specificDevice ? "started_specific" : "started";
         }
         if (message.event === "inclusion failed") {
           this._unsubscribe();
@@ -491,7 +669,7 @@ class DialogZWaveJSAddNode extends LitElement {
 
         if (message.event === "grant security classes") {
           if (this._inclusionStrategy === undefined) {
-            grantSecurityClasses(
+            zwaveGrantSecurityClasses(
               this.hass,
               this._entryId!,
               message.requested_grant.securityClasses,
@@ -525,7 +703,10 @@ class DialogZWaveJSAddNode extends LitElement {
           }
         }
       },
-      this._inclusionStrategy
+      this._inclusionStrategy,
+      qrProvisioningInformation,
+      qrCodeString,
+      plannedProvisioningEntry
     );
     this._addNodeTimeoutHandle = window.setTimeout(() => {
       this._unsubscribe();
@@ -539,7 +720,7 @@ class DialogZWaveJSAddNode extends LitElement {
       this._subscribed = undefined;
     }
     if (this._entryId) {
-      stopInclusion(this.hass, this._entryId);
+      stopZwaveInclusion(this.hass, this._entryId);
     }
     this._requestedGrant = undefined;
     this._dsk = undefined;
@@ -558,6 +739,7 @@ class DialogZWaveJSAddNode extends LitElement {
     this._status = undefined;
     this._device = undefined;
     this._stages = undefined;
+    this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -578,10 +760,6 @@ class DialogZWaveJSAddNode extends LitElement {
           color: var(--warning-color);
         }
 
-        .failed {
-          color: var(--error-color);
-        }
-
         .stages {
           margin-top: 16px;
           display: grid;
@@ -610,6 +788,39 @@ class DialogZWaveJSAddNode extends LitElement {
           padding: 8px 0;
         }
 
+        .select-inclusion {
+          display: flex;
+          align-items: center;
+        }
+
+        .select-inclusion .outline:nth-child(2) {
+          margin-left: 16px;
+        }
+
+        .select-inclusion .outline {
+          border: 1px solid var(--divider-color);
+          border-radius: 4px;
+          padding: 16px;
+          min-height: 250px;
+          text-align: center;
+          flex: 1;
+        }
+
+        @media all and (max-width: 500px) {
+          .select-inclusion {
+            flex-direction: column;
+          }
+
+          .select-inclusion .outline:nth-child(2) {
+            margin-left: 0;
+            margin-top: 16px;
+          }
+        }
+
+        mwc-textfield {
+          width: 100%;
+        }
+
         ha-svg-icon {
           width: 68px;
           height: 48px;
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-network.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-network.ts
index 33b60fe685..f99b073869 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-network.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-network.ts
@@ -7,10 +7,10 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import {
-  fetchNetworkStatus,
-  healNetwork,
-  stopHealNetwork,
-  subscribeHealNetworkProgress,
+  fetchZwaveNetworkStatus,
+  healZwaveNetwork,
+  stopHealZwaveNetwork,
+  subscribeHealZwaveNetworkProgress,
   ZWaveJSHealNetworkStatusMessage,
   ZWaveJSNetwork,
 } from "../../../../../data/zwave_js";
@@ -202,13 +202,13 @@ class DialogZWaveJSHealNetwork extends LitElement {
     if (!this.hass) {
       return;
     }
-    const network: ZWaveJSNetwork = await fetchNetworkStatus(
+    const network: ZWaveJSNetwork = await fetchZwaveNetworkStatus(
       this.hass!,
       this.entry_id!
     );
     if (network.controller.is_heal_network_active) {
       this._status = "started";
-      this._subscribed = subscribeHealNetworkProgress(
+      this._subscribed = subscribeHealZwaveNetworkProgress(
         this.hass,
         this.entry_id!,
         this._handleMessage.bind(this)
@@ -220,9 +220,9 @@ class DialogZWaveJSHealNetwork extends LitElement {
     if (!this.hass) {
       return;
     }
-    healNetwork(this.hass, this.entry_id!);
+    healZwaveNetwork(this.hass, this.entry_id!);
     this._status = "started";
-    this._subscribed = subscribeHealNetworkProgress(
+    this._subscribed = subscribeHealZwaveNetworkProgress(
       this.hass,
       this.entry_id!,
       this._handleMessage.bind(this)
@@ -233,7 +233,7 @@ class DialogZWaveJSHealNetwork extends LitElement {
     if (!this.hass) {
       return;
     }
-    stopHealNetwork(this.hass, this.entry_id!);
+    stopHealZwaveNetwork(this.hass, this.entry_id!);
     this._unsubscribe();
     this._status = "cancelled";
   }
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts
index 632c19286b..6db1483fb7 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-heal-node.ts
@@ -10,8 +10,8 @@ import {
   computeDeviceName,
 } from "../../../../../data/device_registry";
 import {
-  fetchNetworkStatus,
-  healNode,
+  fetchZwaveNetworkStatus,
+  healZwaveNode,
   ZWaveJSNetwork,
 } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -206,7 +206,7 @@ class DialogZWaveJSHealNode extends LitElement {
     if (!this.hass) {
       return;
     }
-    const network: ZWaveJSNetwork = await fetchNetworkStatus(
+    const network: ZWaveJSNetwork = await fetchZwaveNetworkStatus(
       this.hass!,
       this.entry_id!
     );
@@ -221,7 +221,11 @@ class DialogZWaveJSHealNode extends LitElement {
     }
     this._status = "started";
     try {
-      this._status = (await healNode(this.hass, this.entry_id!, this.node_id!))
+      this._status = (await healZwaveNode(
+        this.hass,
+        this.entry_id!,
+        this.node_id!
+      ))
         ? "finished"
         : "failed";
     } catch (err: any) {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
index a56f2ed050..fb4e12785c 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
@@ -6,7 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
-import { reinterviewNode } from "../../../../../data/zwave_js";
+import { reinterviewZwaveNode } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ZWaveJSReinterviewNodeDialogParams } from "./show-dialog-zwave_js-reinterview-node";
@@ -157,7 +157,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
     if (!this.hass) {
       return;
     }
-    this._subscribed = reinterviewNode(
+    this._subscribed = reinterviewZwaveNode(
       this.hass,
       this.entry_id!,
       this.node_id!,
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
index aa8a264649..32faabced2 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-failed-node.ts
@@ -7,7 +7,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import {
-  removeFailedNode,
+  removeFailedZwaveNode,
   ZWaveJSRemovedNode,
 } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -164,7 +164,7 @@ class DialogZWaveJSRemoveFailedNode extends LitElement {
       return;
     }
     this._status = "started";
-    this._subscribed = removeFailedNode(
+    this._subscribed = removeFailedZwaveNode(
       this.hass,
       this.entry_id!,
       this.node_id!,
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
index dbd163508f..413e6bd099 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@@ -1,21 +1,30 @@
 import "@material/mwc-button/mwc-button";
-import { mdiAlertCircle, mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js";
+import {
+  mdiAlertCircle,
+  mdiCheckCircle,
+  mdiCircle,
+  mdiPlus,
+  mdiRefresh,
+} 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 "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-fab";
 import "../../../../../components/ha-icon-next";
 import "../../../../../components/ha-svg-icon";
 import { getSignedPath } from "../../../../../data/auth";
 import {
-  fetchDataCollectionStatus,
-  fetchNetworkStatus,
-  fetchNodeStatus,
+  fetchZwaveDataCollectionStatus,
+  fetchZwaveNetworkStatus,
+  fetchZwaveNodeStatus,
+  fetchZwaveProvisioningEntries,
   NodeStatus,
-  setDataCollectionPreference,
+  setZwaveDataCollectionPreference,
   ZWaveJSNetwork,
   ZWaveJSNodeStatus,
+  ZwaveJSProvisioningEntry,
 } from "../../../../../data/zwave_js";
 import {
   ConfigEntry,
@@ -36,6 +45,7 @@ import { showZWaveJSHealNetworkDialog } from "./show-dialog-zwave_js-heal-networ
 import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node";
 import { configTabs } from "./zwave_js-config-router";
 import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
+import { computeRTL } from "../../../../../common/util/compute_rtl";
 
 @customElement("zwave_js-config-dashboard")
 class ZWaveJSConfigDashboard extends LitElement {
@@ -55,6 +65,8 @@ class ZWaveJSConfigDashboard extends LitElement {
 
   @state() private _nodes?: ZWaveJSNodeStatus[];
 
+  @state() private _provisioningEntries?: ZwaveJSProvisioningEntry[];
+
   @state() private _status = "unknown";
 
   @state() private _icon = mdiCircle;
@@ -76,6 +88,9 @@ class ZWaveJSConfigDashboard extends LitElement {
       return this._renderErrorScreen();
     }
 
+    const notReadyDevices =
+      this._nodes?.filter((node) => !node.ready).length ?? 0;
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -128,32 +143,25 @@ class ZWaveJSConfigDashboard extends LitElement {
                               ${this.hass.localize(
                                 `ui.panel.config.zwave_js.network_status.${this._status}`
                               )}<br />
-                              <small
-                                >${this._network.client.ws_server_url}</small
-                              >
+                              <small>
+                                ${this.hass.localize(
+                                  `ui.panel.config.zwave_js.dashboard.devices`,
+                                  {
+                                    count:
+                                      this._network.controller.nodes.length,
+                                  }
+                                )}
+                                ${notReadyDevices > 0
+                                  ? html`(${this.hass.localize(
+                                      `ui.panel.config.zwave_js.dashboard.not_ready`,
+                                      { count: notReadyDevices }
+                                    )})`
+                                  : ""}
+                              </small>
                             </div>
                           `
                         : ``}
                     </div>
-                    <div class="secondary">
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.driver_version"
-                      )}:
-                      ${this._network.client.driver_version}<br />
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.server_version"
-                      )}:
-                      ${this._network.client.server_version}<br />
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.home_id"
-                      )}:
-                      ${this._network.controller.home_id}<br />
-                      ${this.hass.localize(
-                        "ui.panel.config.zwave_js.dashboard.nodes_ready"
-                      )}:
-                      ${this._nodes?.filter((node) => node.ready).length ?? 0} /
-                      ${this._network.controller.nodes.length}
-                    </div>
                   </div>
                   <div class="card-actions">
                     <a
@@ -172,22 +180,66 @@ class ZWaveJSConfigDashboard extends LitElement {
                         )}
                       </mwc-button>
                     </a>
-                    <mwc-button @click=${this._addNodeClicked}>
+                    ${this._provisioningEntries?.length
+                      ? html`<a
+                          href=${`provisioned?config_entry=${this.configEntryId}`}
+                          ><mwc-button>
+                            ${this.hass.localize(
+                              "ui.panel.config.zwave_js.dashboard.provisioned_devices"
+                            )}
+                          </mwc-button></a
+                        >`
+                      : ""}
+                  </div>
+                </ha-card>
+                <ha-card header="Diagnostics">
+                  <div class="card-content">
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.dashboard.driver_version"
+                    )}:
+                    ${this._network.client.driver_version}<br />
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.dashboard.server_version"
+                    )}:
+                    ${this._network.client.server_version}<br />
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.dashboard.home_id"
+                    )}:
+                    ${this._network.controller.home_id}<br />
+                    ${this.hass.localize(
+                      "ui.panel.config.zwave_js.dashboard.server_url"
+                    )}:
+                    ${this._network.client.ws_server_url}<br />
+                  </div>
+                  <div class="card-actions">
+                    <mwc-button
+                      @click=${this._dumpDebugClicked}
+                      .disabled=${this._status === "connecting"}
+                    >
                       ${this.hass.localize(
-                        "ui.panel.config.zwave_js.common.add_node"
+                        "ui.panel.config.zwave_js.dashboard.dump_debug"
                       )}
                     </mwc-button>
-                    <mwc-button @click=${this._removeNodeClicked}>
+                    <mwc-button
+                      @click=${this._removeNodeClicked}
+                      .disabled=${this._status === "connecting"}
+                    >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.remove_node"
                       )}
                     </mwc-button>
-                    <mwc-button @click=${this._healNetworkClicked}>
+                    <mwc-button
+                      @click=${this._healNetworkClicked}
+                      .disabled=${this._status === "connecting"}
+                    >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.heal_network"
                       )}
                     </mwc-button>
-                    <mwc-button @click=${this._openOptionFlow}>
+                    <mwc-button
+                      @click=${this._openOptionFlow}
+                      .disabled=${this._status === "connecting"}
+                    >
                       ${this.hass.localize(
                         "ui.panel.config.zwave_js.common.reconfigure_server"
                       )}
@@ -229,12 +281,19 @@ class ZWaveJSConfigDashboard extends LitElement {
                 </ha-card>
               `
             : ``}
-          <button class="link dump" @click=${this._dumpDebugClicked}>
-            ${this.hass.localize(
-              "ui.panel.config.zwave_js.dashboard.dump_debug"
-            )}
-          </button>
         </ha-config-section>
+        <ha-fab
+          slot="fab"
+          .label=${this.hass.localize(
+            "ui.panel.config.zwave_js.common.add_node"
+          )}
+          .disabled=${this._status === "connecting"}
+          extended
+          ?rtl=${computeRTL(this.hass)}
+          @click=${this._addNodeClicked}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-fab>
       </hass-tabs-subpage>
     `;
   }
@@ -316,10 +375,14 @@ class ZWaveJSConfigDashboard extends LitElement {
       return;
     }
 
-    const [network, dataCollectionStatus] = await Promise.all([
-      fetchNetworkStatus(this.hass!, this.configEntryId),
-      fetchDataCollectionStatus(this.hass!, this.configEntryId),
-    ]);
+    const [network, dataCollectionStatus, provisioningEntries] =
+      await Promise.all([
+        fetchZwaveNetworkStatus(this.hass!, this.configEntryId),
+        fetchZwaveDataCollectionStatus(this.hass!, this.configEntryId),
+        fetchZwaveProvisioningEntries(this.hass!, this.configEntryId),
+      ]);
+
+    this._provisioningEntries = provisioningEntries;
 
     this._network = network;
 
@@ -340,7 +403,7 @@ class ZWaveJSConfigDashboard extends LitElement {
       return;
     }
     const nodeStatePromisses = this._network.controller.nodes.map((nodeId) =>
-      fetchNodeStatus(this.hass, this.configEntryId!, nodeId)
+      fetchZwaveNodeStatus(this.hass, this.configEntryId!, nodeId)
     );
     this._nodes = await Promise.all(nodeStatePromisses);
   }
@@ -364,7 +427,7 @@ class ZWaveJSConfigDashboard extends LitElement {
   }
 
   private _dataCollectionToggled(ev) {
-    setDataCollectionPreference(
+    setZwaveDataCollectionPreference(
       this.hass!,
       this.configEntryId!,
       ev.target.checked
@@ -486,7 +549,6 @@ class ZWaveJSConfigDashboard extends LitElement {
         .network-status div.heading {
           display: flex;
           align-items: center;
-          margin-bottom: 16px;
         }
 
         .network-status div.heading .icon {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
index 685259c549..6f9f165aaf 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
@@ -49,6 +49,10 @@ class ZWaveJSConfigRouter extends HassRouterPage {
         tag: "zwave_js-logs",
         load: () => import("./zwave_js-logs"),
       },
+      provisioned: {
+        tag: "zwave_js-provisioned",
+        load: () => import("./zwave_js-provisioned"),
+      },
     },
   };
 
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
index 9b2e0a4bdf..19b7d24dd8 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@@ -32,9 +32,9 @@ import {
   subscribeDeviceRegistry,
 } from "../../../../../data/device_registry";
 import {
-  fetchNodeConfigParameters,
-  fetchNodeMetadata,
-  setNodeConfigParameter,
+  fetchZwaveNodeConfigParameters,
+  fetchZwaveNodeMetadata,
+  setZwaveNodeConfigParameter,
   ZWaveJSNodeConfigParams,
   ZwaveJSNodeMetadata,
   ZWaveJSSetConfigParamResult,
@@ -377,7 +377,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   private async _updateConfigParameter(target, value) {
     const nodeId = getNodeId(this._device!);
     try {
-      const result = await setNodeConfigParameter(
+      const result = await setZwaveNodeConfigParameter(
         this.hass,
         this.configEntryId!,
         nodeId!,
@@ -429,8 +429,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
     }
 
     [this._nodeMetadata, this._config] = await Promise.all([
-      fetchNodeMetadata(this.hass, this.configEntryId, nodeId!),
-      fetchNodeConfigParameters(this.hass, this.configEntryId, nodeId!),
+      fetchZwaveNodeMetadata(this.hass, this.configEntryId, nodeId!),
+      fetchZwaveNodeConfigParameters(this.hass, this.configEntryId, nodeId!),
     ]);
   }
 
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-provisioned.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-provisioned.ts
new file mode 100644
index 0000000000..cad49415cf
--- /dev/null
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-provisioned.ts
@@ -0,0 +1,128 @@
+import { mdiDelete } from "@mdi/js";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { DataTableColumnContainer } from "../../../../../components/data-table/ha-data-table";
+import {
+  ZwaveJSProvisioningEntry,
+  fetchZwaveProvisioningEntries,
+  SecurityClass,
+  unprovisionZwaveSmartStartNode,
+} from "../../../../../data/zwave_js";
+import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import "../../../../../layouts/hass-tabs-subpage-data-table";
+import { HomeAssistant, Route } from "../../../../../types";
+import { configTabs } from "./zwave_js-config-router";
+
+@customElement("zwave_js-provisioned")
+class ZWaveJSProvisioned extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Object }) public route!: Route;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property() public configEntryId!: string;
+
+  @state() private _provisioningEntries: ZwaveJSProvisioningEntry[] = [];
+
+  protected render() {
+    return html`
+      <hass-tabs-subpage-data-table
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        .tabs=${configTabs}
+        .columns=${this._columns(this.narrow)}
+        .data=${this._provisioningEntries}
+      >
+      </hass-tabs-subpage-data-table>
+    `;
+  }
+
+  private _columns = memoizeOne(
+    (narrow: boolean): DataTableColumnContainer => ({
+      dsk: {
+        title: this.hass.localize("ui.panel.config.zwave_js.provisioned.dsk"),
+        sortable: true,
+        filterable: true,
+        grows: true,
+      },
+      securityClasses: {
+        title: this.hass.localize(
+          "ui.panel.config.zwave_js.provisioned.security_classes"
+        ),
+        width: "15%",
+        hidden: narrow,
+        filterable: true,
+        sortable: true,
+        template: (securityClasses: SecurityClass[]) =>
+          securityClasses
+            .map((secClass) =>
+              this.hass.localize(
+                `ui.panel.config.zwave_js.security_classes.${SecurityClass[secClass]}`
+              )
+            )
+            .join(", "),
+      },
+      unprovision: {
+        title: this.hass.localize(
+          "ui.panel.config.zwave_js.provisioned.unprovison"
+        ),
+        type: "icon-button",
+        template: (_info, provisioningEntry: any) => html`
+          <ha-icon-button
+            .label=${this.hass.localize(
+              "ui.panel.config.zwave_js.provisioned.unprovison"
+            )}
+            .path=${mdiDelete}
+            .provisioningEntry=${provisioningEntry}
+            @click=${this._unprovision}
+          ></ha-icon-button>
+        `,
+      },
+    })
+  );
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._fetchData();
+  }
+
+  private async _fetchData() {
+    this._provisioningEntries = await fetchZwaveProvisioningEntries(
+      this.hass!,
+      this.configEntryId
+    );
+  }
+
+  private _unprovision = async (ev) => {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.zwave_js.provisioned.confirm_unprovision_title"
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.zwave_js.provisioned.confirm_unprovision_text"
+      ),
+      confirmText: this.hass.localize(
+        "ui.panel.config.zwave_js.provisioned.unprovison"
+      ),
+    });
+
+    if (!confirm) {
+      return;
+    }
+
+    await unprovisionZwaveSmartStartNode(
+      this.hass,
+      this.configEntryId,
+      ev.currentTarget.provisioningEntry.dsk
+    );
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "zwave_js-provisioned": ZWaveJSProvisioned;
+  }
+}
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index bd9c7f9e7d..d5a4c2c156 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -20,7 +20,7 @@ class ErrorLogCard extends LitElement {
                 <ha-icon-button
                   .path=${mdiRefresh}
                   @click=${this._refreshErrorLog}
-                  .label=${this.hass!.localize("ui.common.refresh")}
+                  .label=${this.hass.localize("ui.common.refresh")}
                 ></ha-icon-button>
                 <div class="card-content error-log">${this._errorHTML}</div>
               </ha-card>
@@ -38,6 +38,7 @@ class ErrorLogCard extends LitElement {
     super.firstUpdated(changedProps);
 
     if (this.hass?.config.safe_mode) {
+      this.hass.loadFragmentTranslation("config");
       this._refreshErrorLog();
     }
   }
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 06f1f05841..2724d8ef2e 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -51,6 +51,8 @@ class DialogPersonDetail extends LitElement {
 
   @state() private _isAdmin?: boolean;
 
+  @state() private _localOnly?: boolean;
+
   @state() private _deviceTrackers!: string[];
 
   @state() private _picture!: string | null;
@@ -83,12 +85,14 @@ class DialogPersonDetail extends LitElement {
         ? this._params.users.find((user) => user.id === this._userId)
         : undefined;
       this._isAdmin = this._user?.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
+      this._localOnly = this._user?.local_only;
     } else {
       this._personExists = false;
       this._name = "";
       this._userId = undefined;
       this._user = undefined;
       this._isAdmin = undefined;
+      this._localOnly = undefined;
       this._deviceTrackers = [];
       this._picture = null;
     }
@@ -152,19 +156,31 @@ class DialogPersonDetail extends LitElement {
 
             ${this._user
               ? html`<ha-formfield
-                  .label=${this.hass.localize(
-                    "ui.panel.config.person.detail.admin"
-                  )}
-                  .dir=${computeRTLDirection(this.hass)}
-                >
-                  <ha-switch
-                    .disabled=${this._user.system_generated ||
-                    this._user.is_owner}
-                    .checked=${this._isAdmin}
-                    @change=${this._adminChanged}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.person.detail.local_only"
+                    )}
+                    .dir=${computeRTLDirection(this.hass)}
                   >
-                  </ha-switch>
-                </ha-formfield>`
+                    <ha-switch
+                      .checked=${this._localOnly}
+                      @change=${this._localOnlyChanged}
+                    >
+                    </ha-switch>
+                  </ha-formfield>
+                  <ha-formfield
+                    .label=${this.hass.localize(
+                      "ui.panel.config.person.detail.admin"
+                    )}
+                    .dir=${computeRTLDirection(this.hass)}
+                  >
+                    <ha-switch
+                      .disabled=${this._user.system_generated ||
+                      this._user.is_owner}
+                      .checked=${this._isAdmin}
+                      @change=${this._adminChanged}
+                    >
+                    </ha-switch>
+                  </ha-formfield>`
               : ""}
             ${this._deviceTrackersAvailable(this.hass)
               ? html`
@@ -266,10 +282,14 @@ class DialogPersonDetail extends LitElement {
     this._name = ev.detail.value;
   }
 
-  private async _adminChanged(ev): Promise<void> {
+  private _adminChanged(ev): void {
     this._isAdmin = ev.target.checked;
   }
 
+  private _localOnlyChanged(ev): void {
+    this._localOnly = ev.target.checked;
+  }
+
   private async _allowLoginChanged(ev): Promise<void> {
     const target = ev.target;
     if (target.checked) {
@@ -281,6 +301,7 @@ class DialogPersonDetail extends LitElement {
             this._user = user;
             this._userId = user.id;
             this._isAdmin = user.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
+            this._localOnly = user.local_only;
             this._params?.refreshUsers();
           }
         },
@@ -373,13 +394,16 @@ class DialogPersonDetail extends LitElement {
     try {
       if (
         (this._userId && this._name !== this._params!.entry?.name) ||
-        this._isAdmin !== this._user?.group_ids.includes(SYSTEM_GROUP_ID_ADMIN)
+        this._isAdmin !==
+          this._user?.group_ids.includes(SYSTEM_GROUP_ID_ADMIN) ||
+        this._localOnly !== this._user?.local_only
       ) {
         await updateUser(this.hass!, this._userId!, {
           name: this._name.trim(),
           group_ids: [
             this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER,
           ],
+          local_only: this._localOnly,
         });
         this._params?.refreshUsers();
       }
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index 039611f15a..53310c5e8c 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -147,7 +147,7 @@ class HaSceneDashboard extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .columns=${this._columns(this.hass.language)}
         id="entity_id"
         .data=${this._scenes(this.scenes, this._filteredScenes)}
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 308db8a732..a59ecbd6b4 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -32,6 +32,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-picker";
+import "../../../components/ha-area-picker";
 import "../../../components/ha-svg-icon";
 import {
   computeDeviceName,
@@ -41,6 +42,7 @@ import {
 import {
   EntityRegistryEntry,
   subscribeEntityRegistry,
+  updateEntityRegistryEntry,
 } from "../../../data/entity_registry";
 import {
   activateScene,
@@ -121,6 +123,22 @@ export class HaSceneEditor extends SubscribeMixin(
 
   private _activateContextId?: string;
 
+  @state() private _saving = false;
+
+  // undefined means not set in this session
+  // null means picked nothing.
+  @state() private _updatedAreaId?: string | null;
+
+  // Callback to be called when scene is set.
+  private _scenesSet?: () => void;
+
+  private _getRegistryAreaId = memoizeOne(
+    (entries: EntityRegistryEntry[], entity_id: string) => {
+      const entry = entries.find((ent) => ent.entity_id === entity_id);
+      return entry ? entry.area_id : null;
+    }
+  );
+
   private _getEntitiesDevices = memoizeOne(
     (
       entities: string[],
@@ -202,7 +220,7 @@ export class HaSceneEditor extends SubscribeMixin(
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"
@@ -287,6 +305,16 @@ export class HaSceneEditor extends SubscribeMixin(
                         @value-changed=${this._valueChanged}
                       >
                       </ha-icon-picker>
+                      <ha-area-picker
+                        .hass=${this.hass}
+                        .label=${this.hass.localize(
+                          "ui.panel.config.scene.editor.area"
+                        )}
+                        .name=${"area"}
+                        .value=${this._sceneAreaIdWithUpdates || ""}
+                        @value-changed=${this._areaChanged}
+                      >
+                      </ha-area-picker>
                     </div>
                   </ha-card>
                 </ha-config-section>
@@ -444,8 +472,9 @@ export class HaSceneEditor extends SubscribeMixin(
           slot="fab"
           .label=${this.hass.localize("ui.panel.config.scene.editor.save")}
           extended
+          .disabled=${this._saving}
           @click=${this._saveScene}
-          class=${classMap({ dirty: this._dirty })}
+          class=${classMap({ dirty: this._dirty, saving: this._saving })}
         >
           <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
         </ha-fab>
@@ -474,12 +503,15 @@ export class HaSceneEditor extends SubscribeMixin(
       this._config = {
         name: this.hass.localize("ui.panel.config.scene.editor.default_name"),
         entities: {},
-        ...initData,
+        ...initData?.config,
       };
       this._initEntities(this._config);
-      if (initData) {
-        this._dirty = true;
+      if (initData?.areaId) {
+        this._updatedAreaId = initData.areaId;
       }
+      this._dirty =
+        initData !== undefined &&
+        (initData.areaId !== undefined || initData.config !== undefined);
     }
 
     if (changedProps.has("_entityRegistryEntries")) {
@@ -514,6 +546,9 @@ export class HaSceneEditor extends SubscribeMixin(
     ) {
       this._setScene();
     }
+    if (this._scenesSet && changedProps.has("scenes")) {
+      this._scenesSet();
+    }
   }
 
   private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
@@ -689,6 +724,21 @@ export class HaSceneEditor extends SubscribeMixin(
     this._dirty = true;
   }
 
+  private _areaChanged(ev: CustomEvent) {
+    const newValue = ev.detail.value === "" ? null : ev.detail.value;
+
+    if (newValue === (this._sceneAreaIdWithUpdates || "")) {
+      return;
+    }
+
+    if (newValue === this._sceneAreaIdCurrent) {
+      this._updatedAreaId = undefined;
+    } else {
+      this._updatedAreaId = newValue;
+      this._dirty = true;
+    }
+  }
+
   private _stateChanged(event: HassEvent) {
     if (
       event.context.id !== this._activateContextId &&
@@ -749,13 +799,16 @@ export class HaSceneEditor extends SubscribeMixin(
       // Wait for dialog to complete closing
       await new Promise((resolve) => setTimeout(resolve, 0));
     }
-    showSceneEditor({
-      ...this._config,
-      id: undefined,
-      name: `${this._config?.name} (${this.hass.localize(
-        "ui.panel.config.scene.picker.duplicate"
-      )})`,
-    });
+    showSceneEditor(
+      {
+        ...this._config,
+        id: undefined,
+        name: `${this._config?.name} (${this.hass.localize(
+          "ui.panel.config.scene.picker.duplicate"
+        )})`,
+      },
+      this._sceneAreaIdCurrent || undefined
+    );
   }
 
   private _calculateStates(): SceneEntities {
@@ -792,7 +845,41 @@ export class HaSceneEditor extends SubscribeMixin(
     const id = !this.sceneId ? "" + Date.now() : this.sceneId!;
     this._config = { ...this._config!, entities: this._calculateStates() };
     try {
+      this._saving = true;
       await saveScene(this.hass, id, this._config);
+
+      if (this._updatedAreaId !== undefined) {
+        let scene =
+          this._scene ||
+          this.scenes.find(
+            (entity: SceneEntity) => entity.attributes.id === id
+          );
+
+        if (!scene) {
+          try {
+            await new Promise<void>((resolve, reject) => {
+              setTimeout(reject, 3000);
+              this._scenesSet = resolve;
+            });
+            scene = this.scenes.find(
+              (entity: SceneEntity) => entity.attributes.id === id
+            );
+          } catch (err) {
+            // We do nothing.
+          } finally {
+            this._scenesSet = undefined;
+          }
+        }
+
+        if (scene) {
+          await updateEntityRegistryEntry(this.hass, scene.entity_id, {
+            area_id: this._updatedAreaId,
+          });
+        }
+
+        this._updatedAreaId = undefined;
+      }
+
       this._dirty = false;
 
       if (!this.sceneId) {
@@ -804,6 +891,8 @@ export class HaSceneEditor extends SubscribeMixin(
         message: err.body.message || err.message,
       });
       throw err;
+    } finally {
+      this._saving = false;
     }
   }
 
@@ -811,6 +900,21 @@ export class HaSceneEditor extends SubscribeMixin(
     this._saveScene();
   }
 
+  private get _sceneAreaIdWithUpdates(): string | undefined | null {
+    return this._updatedAreaId !== undefined
+      ? this._updatedAreaId
+      : this._sceneAreaIdCurrent;
+  }
+
+  private get _sceneAreaIdCurrent(): string | undefined | null {
+    return this._scene
+      ? this._getRegistryAreaId(
+          this._entityRegistryEntries,
+          this._scene.entity_id
+        )
+      : undefined;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -877,6 +981,9 @@ export class HaSceneEditor extends SubscribeMixin(
         ha-fab.dirty {
           bottom: 0;
         }
+        ha-fab.saving {
+          opacity: var(--light-disabled-opacity);
+        }
       `,
     ];
   }
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index 2a7eb0b167..1f0219c0c0 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -90,7 +90,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         .narrow=${this.narrow}
         .route=${this.route}
         .backCallback=${this._backTapped}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         <ha-button-menu
           corner="BOTTOM_START"
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index f2d68cca59..e96b5edfb2 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -174,7 +174,7 @@ class HaScriptPicker extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
         .columns=${this._columns(this.narrow, this.hass.locale)}
         .data=${this._scripts(this.scripts, this._filteredScripts)}
         .activeFilters=${this._activeFilters}
diff --git a/src/panels/config/script/ha-script-trace.ts b/src/panels/config/script/ha-script-trace.ts
index ce606b0ffa..e726838c8f 100644
--- a/src/panels/config/script/ha-script-trace.ts
+++ b/src/panels/config/script/ha-script-trace.ts
@@ -108,7 +108,7 @@ export class HaScriptTrace extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${configSections.automation}
+        .tabs=${configSections.automations}
       >
         ${this.narrow
           ? html`<span slot="header"> ${title} </span>
diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index d0c6b780c0..a8c138ae23 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -180,7 +180,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.experiences}
+        .tabs=${configSections.tags}
         .columns=${this._columns(
           this.narrow,
           this._canWriteTags,
diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts
index 462dd46fde..65d11ac262 100644
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -48,6 +48,8 @@ export class DialogAddUser extends LitElement {
 
   @state() private _isAdmin?: boolean;
 
+  @state() private _localOnly?: boolean;
+
   @state() private _allowChangeName = true;
 
   public showDialog(params: AddUserDialogParams) {
@@ -57,6 +59,7 @@ export class DialogAddUser extends LitElement {
     this._password = "";
     this._passwordConfirm = "";
     this._isAdmin = false;
+    this._localOnly = false;
     this._error = undefined;
     this._loading = false;
 
@@ -153,14 +156,32 @@ export class DialogAddUser extends LitElement {
               "ui.panel.config.users.add_user.password_not_match"
             )}
           ></paper-input>
-
-          <ha-formfield
-            .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-switch .checked=${this._isAdmin} @change=${this._adminChanged}>
-            </ha-switch>
-          </ha-formfield>
+          <div class="row">
+            <ha-formfield
+              .label=${this.hass.localize(
+                "ui.panel.config.users.editor.local_only"
+              )}
+              .dir=${computeRTLDirection(this.hass)}
+            >
+              <ha-switch
+                .checked=${this._localOnly}
+                @change=${this._localOnlyChanged}
+              >
+              </ha-switch>
+            </ha-formfield>
+          </div>
+          <div class="row">
+            <ha-formfield
+              .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
+              .dir=${computeRTLDirection(this.hass)}
+            >
+              <ha-switch
+                .checked=${this._isAdmin}
+                @change=${this._adminChanged}
+              >
+              </ha-switch>
+            </ha-formfield>
+          </div>
           ${!this._isAdmin
             ? html`
                 <br />
@@ -218,6 +239,10 @@ export class DialogAddUser extends LitElement {
     this._isAdmin = ev.target.checked;
   }
 
+  private _localOnlyChanged(ev): void {
+    this._localOnly = ev.target.checked;
+  }
+
   private async _createUser(ev) {
     ev.preventDefault();
     if (!this._name || !this._username || !this._password) {
@@ -229,9 +254,12 @@ export class DialogAddUser extends LitElement {
 
     let user: User;
     try {
-      const userResponse = await createUser(this.hass, this._name, [
-        this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER,
-      ]);
+      const userResponse = await createUser(
+        this.hass,
+        this._name,
+        [this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER],
+        this._localOnly
+      );
       user = userResponse.user;
     } catch (err: any) {
       this._loading = false;
@@ -266,8 +294,9 @@ export class DialogAddUser extends LitElement {
           --mdc-dialog-max-width: 500px;
           --dialog-z-index: 10;
         }
-        ha-switch {
-          margin-top: 8px;
+        .row {
+          display: flex;
+          padding: 8px 0;
         }
       `,
     ];
diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
index f90f9c979d..3809131a65 100644
--- a/src/panels/config/users/dialog-user-detail.ts
+++ b/src/panels/config/users/dialog-user-detail.ts
@@ -30,6 +30,8 @@ class DialogUserDetail extends LitElement {
 
   @state() private _isAdmin?: boolean;
 
+  @state() private _localOnly?: boolean;
+
   @state() private _isActive?: boolean;
 
   @state() private _error?: string;
@@ -43,6 +45,7 @@ class DialogUserDetail extends LitElement {
     this._error = undefined;
     this._name = params.entry.name || "";
     this._isAdmin = params.entry.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
+    this._localOnly = params.entry.local_only;
     this._isActive = params.entry.is_active;
     await this.updateComplete;
   }
@@ -95,6 +98,20 @@ class DialogUserDetail extends LitElement {
               @value-changed=${this._nameChanged}
               label=${this.hass!.localize("ui.panel.config.users.editor.name")}
             ></paper-input>
+            <div class="row">
+              <ha-formfield
+                .label=${this.hass.localize(
+                  "ui.panel.config.users.editor.local_only"
+                )}
+                .dir=${computeRTLDirection(this.hass)}
+              >
+                <ha-switch
+                  .checked=${this._localOnly}
+                  @change=${this._localOnlyChanged}
+                >
+                </ha-switch>
+              </ha-formfield>
+            </div>
             <div class="row">
               <ha-formfield
                 .label=${this.hass.localize(
@@ -198,11 +215,15 @@ class DialogUserDetail extends LitElement {
     this._name = ev.detail.value;
   }
 
-  private async _adminChanged(ev): Promise<void> {
+  private _adminChanged(ev): void {
     this._isAdmin = ev.target.checked;
   }
 
-  private async _activeChanged(ev): Promise<void> {
+  private _localOnlyChanged(ev): void {
+    this._localOnly = ev.target.checked;
+  }
+
+  private _activeChanged(ev): void {
     this._isActive = ev.target.checked;
   }
 
@@ -215,6 +236,7 @@ class DialogUserDetail extends LitElement {
         group_ids: [
           this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER,
         ],
+        local_only: this._localOnly,
       });
       this._close();
     } catch (err: any) {
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 84b0ca9f11..dfff21062c 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -90,7 +90,7 @@ export class HaConfigUsers extends LitElement {
           width: "80px",
           template: (is_active) =>
             is_active
-              ? html`<ha-svg-icon .path=${mdiCheck}> </ha-svg-icon>`
+              ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
               : "",
         },
         system_generated: {
@@ -103,9 +103,20 @@ export class HaConfigUsers extends LitElement {
           width: "160px",
           template: (generated) =>
             generated
-              ? html`<ha-svg-icon .path=${mdiCheck}> </ha-svg-icon>`
+              ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
               : "",
         },
+        local_only: {
+          title: this.hass.localize(
+            "ui.panel.config.users.picker.headers.local"
+          ),
+          type: "icon",
+          sortable: true,
+          filterable: true,
+          width: "160px",
+          template: (local) =>
+            local ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>` : "",
+        },
       };
 
       return columns;
diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
index 9c056b0fa5..4b48ebb116 100644
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import { HassEntity } from "home-assistant-js-websocket";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -7,6 +7,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import {
   clearStatistics,
   getStatisticIds,
@@ -18,6 +19,7 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../dialogs/generic/show-dialog-box";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { showFixStatisticsUnitsChangedDialog } from "./show-dialog-statistics-fix-units-changed";
@@ -33,7 +35,7 @@ const FIX_ISSUES_ORDER = {
   unsupported_unit_metadata: 5,
 };
 @customElement("developer-tools-statistics")
-class HaPanelDevStatistics extends LitElement {
+class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ type: Boolean }) public narrow!: boolean;
@@ -43,6 +45,8 @@ class HaPanelDevStatistics extends LitElement {
     state?: HassEntity;
   })[] = [] as StatisticsMetaData[];
 
+  private _disabledEntities = new Set<string>();
+
   protected firstUpdated() {
     this._validateStatistics();
   }
@@ -130,6 +134,25 @@ class HaPanelDevStatistics extends LitElement {
     }
   }
 
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        const disabledEntities = new Set<string>();
+        for (const confEnt of entities) {
+          if (!confEnt.disabled_by) {
+            continue;
+          }
+          disabledEntities.add(confEnt.entity_id);
+        }
+        // If the disabled entities changed, re-validate the statistics
+        if (disabledEntities !== this._disabledEntities) {
+          this._disabledEntities = disabledEntities;
+          this._validateStatistics();
+        }
+      }),
+    ];
+  }
+
   private async _validateStatistics() {
     const [statisticIds, issues] = await Promise.all([
       getStatisticIds(this.hass),
@@ -138,17 +161,24 @@ class HaPanelDevStatistics extends LitElement {
 
     const statsIds = new Set();
 
-    this._data = statisticIds.map((statistic) => {
-      statsIds.add(statistic.statistic_id);
-      return {
-        ...statistic,
-        state: this.hass.states[statistic.statistic_id],
-        issues: issues[statistic.statistic_id],
-      };
-    });
+    this._data = statisticIds
+      .filter(
+        (statistic) => !this._disabledEntities.has(statistic.statistic_id)
+      )
+      .map((statistic) => {
+        statsIds.add(statistic.statistic_id);
+        return {
+          ...statistic,
+          state: this.hass.states[statistic.statistic_id],
+          issues: issues[statistic.statistic_id],
+        };
+      });
 
     Object.keys(issues).forEach((statisticId) => {
-      if (!statsIds.has(statisticId)) {
+      if (
+        !statsIds.has(statisticId) &&
+        !this._disabledEntities.has(statisticId)
+      ) {
         this._data.push({
           statistic_id: statisticId,
           unit_of_measurement: "",
@@ -176,6 +206,7 @@ class HaPanelDevStatistics extends LitElement {
             it from your database.<br /><br />Do you want to permanently remove
             the long term statistics of ${issue.data.statistic_id} from your
             database?`,
+          confirmText: this.hass.localize("ui.common.remove"),
           confirm: async () => {
             await clearStatistics(this.hass, [issue.data.statistic_id]);
             this._validateStatistics();
diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts
index 1e37f7a7f7..d47cfe9cb8 100644
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -139,6 +139,11 @@ class HaPanelHistory extends LitElement {
     };
 
     this._entityId = extractSearchParam("entity_id") ?? "";
+
+    const startDate = extractSearchParam("start_date");
+    if (startDate) {
+      this._startDate = new Date(startDate);
+    }
   }
 
   protected updated(changedProps: PropertyValues) {
diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts
index ed9fb3e690..b7177dfaa9 100644
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -161,6 +161,11 @@ export class HaPanelLogbook extends LitElement {
     };
 
     this._entityId = extractSearchParam("entity_id") ?? "";
+
+    const startDate = extractSearchParam("start_date");
+    if (startDate) {
+      this._startDate = new Date(startDate);
+    }
   }
 
   protected updated(changedProps: PropertyValues<this>) {
diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
index ee15dc7b3f..b172f912de 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts
@@ -13,10 +13,7 @@ import {
   energySourcesByType,
   getEnergyDataCollection,
 } from "../../../../data/energy";
-import {
-  calculateStatisticsSumGrowth,
-  calculateStatisticsSumGrowthWithPercentage,
-} from "../../../../data/history";
+import { calculateStatisticsSumGrowth } from "../../../../data/history";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
 import { createEntityNotFoundWarning } from "../../components/hui-warning";
@@ -90,19 +87,13 @@ class HuiEnergyCarbonGaugeCard
       value = 100;
     }
 
-    if (
-      this._data.co2SignalEntity in this._data.stats &&
-      totalGridConsumption
-    ) {
-      const highCarbonEnergy =
-        calculateStatisticsSumGrowthWithPercentage(
-          this._data.stats[this._data.co2SignalEntity],
-          types
-            .grid![0].flow_from.map(
-              (flow) => this._data!.stats![flow.stat_energy_from]
-            )
-            .filter(Boolean)
-        ) || 0;
+    if (this._data.fossilEnergyConsumption && totalGridConsumption) {
+      const highCarbonEnergy = this._data.fossilEnergyConsumption
+        ? Object.values(this._data.fossilEnergyConsumption).reduce(
+            (sum, a) => sum + a,
+            0
+          )
+        : 0;
 
       const totalSolarProduction = types.solar
         ? calculateStatisticsSumGrowth(
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 5006808340..f59a52e941 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
@@ -6,7 +6,7 @@ import {
   ScatterDataPoint,
 } from "chart.js";
 import { getRelativePosition } from "chart.js/helpers";
-import { addHours } from "date-fns";
+import { addHours, differenceInDays } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -155,13 +155,19 @@ export class HuiEnergyDevicesGraphCard
   );
 
   private async _getStatistics(energyData: EnergyData): Promise<void> {
+    const dayDifference = differenceInDays(
+      energyData.end || new Date(),
+      energyData.start
+    );
+
     this._data = await fetchStatistics(
       this.hass,
       addHours(energyData.start, -1),
       energyData.end,
       energyData.prefs.device_consumption.map(
         (device) => device.stat_consumption
-      )
+      ),
+      dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
     );
 
     const data: Array<ChartDataset<"bar", ParsedDataType<"bar">>["data"]> = [];
diff --git a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
index 7c2cf2c2d2..20692e5ec2 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts
@@ -24,10 +24,7 @@ import {
   getEnergyDataCollection,
   getEnergyGasUnit,
 } from "../../../../data/energy";
-import {
-  calculateStatisticsSumGrowth,
-  calculateStatisticsSumGrowthWithPercentage,
-} from "../../../../data/history";
+import { calculateStatisticsSumGrowth } from "../../../../data/history";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCard } from "../../types";
@@ -209,19 +206,11 @@ class HuiEnergyDistrubutionCard
     // This fallback is used in the demo
     let electricityMapUrl = "https://www.electricitymap.org";
 
-    if (
-      this._data.co2SignalEntity &&
-      this._data.co2SignalEntity in this._data.stats
-    ) {
+    if (this._data.co2SignalEntity && this._data.fossilEnergyConsumption) {
       // Calculate high carbon consumption
-      const highCarbonEnergy = calculateStatisticsSumGrowthWithPercentage(
-        this._data.stats[this._data.co2SignalEntity],
-        types
-          .grid![0].flow_from.map(
-            (flow) => this._data!.stats[flow.stat_energy_from]
-          )
-          .filter(Boolean)
-      );
+      const highCarbonEnergy = Object.values(
+        this._data.fossilEnergyConsumption
+      ).reduce((sum, a) => sum + a, 0);
 
       const co2State = this.hass.states[this._data.co2SignalEntity];
 
diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
index 8f31da9fc1..5e19672487 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
@@ -41,10 +41,6 @@ import {
 } from "../../../../common/number/format_number";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { FrontendLocaleData } from "../../../../data/translation";
-import {
-  reduceSumStatisticsByMonth,
-  reduceSumStatisticsByDay,
-} from "../../../../data/history";
 import { formatTime } from "../../../../common/datetime/format_time";
 
 @customElement("hui-energy-gas-graph-card")
@@ -247,11 +243,6 @@ export class HuiEnergyGasGraphCard
       .getPropertyValue("--energy-gas-color")
       .trim();
 
-    const dayDifference = differenceInDays(
-      energyData.end || new Date(),
-      energyData.start
-    );
-
     gasSources.forEach((source, idx) => {
       const data: ChartDataset<"bar" | "line">[] = [];
       const entity = this.hass.states[source.stat_energy_from];
@@ -268,16 +259,7 @@ export class HuiEnergyGasGraphCard
 
       // Process gas consumption data.
       if (source.stat_energy_from in energyData.stats) {
-        const stats =
-          dayDifference > 35
-            ? reduceSumStatisticsByMonth(
-                energyData.stats[source.stat_energy_from]
-              )
-            : dayDifference > 2
-            ? reduceSumStatisticsByDay(
-                energyData.stats[source.stat_energy_from]
-              )
-            : energyData.stats[source.stat_energy_from];
+        const stats = energyData.stats[source.stat_energy_from];
 
         for (const point of stats) {
           if (point.sum === null) {
diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
index de57958829..98305f7c2a 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
@@ -42,10 +42,6 @@ import {
 } from "../../../../common/number/format_number";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { FrontendLocaleData } from "../../../../data/translation";
-import {
-  reduceSumStatisticsByMonth,
-  reduceSumStatisticsByDay,
-} from "../../../../data/history";
 import { formatTime } from "../../../../common/datetime/format_time";
 
 @customElement("hui-energy-solar-graph-card")
@@ -274,16 +270,7 @@ export class HuiEnergySolarGraphCard
 
       // Process solar production data.
       if (source.stat_energy_from in energyData.stats) {
-        const stats =
-          dayDifference > 35
-            ? reduceSumStatisticsByMonth(
-                energyData.stats[source.stat_energy_from]
-              )
-            : dayDifference > 2
-            ? reduceSumStatisticsByDay(
-                energyData.stats[source.stat_energy_from]
-              )
-            : energyData.stats[source.stat_energy_from];
+        const stats = energyData.stats[source.stat_energy_from];
 
         for (const point of stats) {
           if (point.sum === null) {
diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
index cbfb66296d..89bc339383 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts
@@ -27,10 +27,6 @@ import {
 import "../../../../components/chart/ha-chart-base";
 import "../../../../components/ha-card";
 import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
-import {
-  reduceSumStatisticsByDay,
-  reduceSumStatisticsByMonth,
-} from "../../../../data/history";
 import { FrontendLocaleData } from "../../../../data/translation";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
@@ -298,11 +294,6 @@ export class HuiEnergyUsageGraphCard
       }
     }
 
-    const dayDifference = differenceInDays(
-      energyData.end || new Date(),
-      energyData.start
-    );
-
     this._start = energyData.start;
     this._end = energyData.end || endOfToday();
 
@@ -368,12 +359,7 @@ export class HuiEnergyUsageGraphCard
       const totalStats: { [start: string]: number } = {};
       const sets: { [statId: string]: { [start: string]: number } } = {};
       statIds!.forEach((id) => {
-        const stats =
-          dayDifference > 35
-            ? reduceSumStatisticsByMonth(energyData.stats[id])
-            : dayDifference > 2
-            ? reduceSumStatisticsByDay(energyData.stats[id])
-            : energyData.stats[id];
+        const stats = energyData.stats[id];
         if (!stats) {
           return;
         }
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 370add6330..ba67d54d79 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -274,7 +274,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
       ha-chip {
         --ha-chip-background-color: var(--alarm-state-color);
-        --ha-chip-text-color: var(--text-primary-color);
+        --primary-text-color: var(--text-primary-color);
         line-height: initial;
       }
 
diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts
new file mode 100644
index 0000000000..617f6336fc
--- /dev/null
+++ b/src/panels/lovelace/cards/hui-area-card.ts
@@ -0,0 +1,567 @@
+import "@material/mwc-ripple";
+import {
+  mdiLightbulbMultiple,
+  mdiLightbulbMultipleOff,
+  mdiRun,
+  mdiToggleSwitch,
+  mdiToggleSwitchOff,
+  mdiWaterPercent,
+} from "@mdi/js";
+import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
+import { STATES_OFF } from "../../../common/const";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { domainIcon } from "../../../common/entity/domain_icon";
+import { navigate } from "../../../common/navigate";
+import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/entity/state-badge";
+import "../../../components/ha-card";
+import "../../../components/ha-icon-button";
+import "../../../components/ha-state-icon";
+import "../../../components/ha-svg-icon";
+import {
+  AreaRegistryEntry,
+  subscribeAreaRegistry,
+} from "../../../data/area_registry";
+import {
+  DeviceRegistryEntry,
+  subscribeDeviceRegistry,
+} from "../../../data/device_registry";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../../data/entity_registry";
+import { forwardHaptic } from "../../../data/haptics";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../../types";
+import "../components/hui-warning";
+import { LovelaceCard, LovelaceCardEditor } from "../types";
+import { AreaCardConfig } from "./types";
+
+const SENSOR_DOMAINS = ["sensor"];
+
+const ALERT_DOMAINS = ["binary_sensor"];
+
+const TOGGLE_DOMAINS = ["light", "switch", "fan"];
+
+const OTHER_DOMAINS = ["camera"];
+
+const DEVICE_CLASSES = {
+  sensor: ["temperature"],
+  binary_sensor: ["motion"],
+};
+
+const DOMAIN_ICONS = {
+  light: { on: mdiLightbulbMultiple, off: mdiLightbulbMultipleOff },
+  switch: { on: mdiToggleSwitch, off: mdiToggleSwitchOff },
+  fan: { on: domainIcon("fan"), off: domainIcon("fan") },
+  sensor: { humidity: mdiWaterPercent },
+  binary_sensor: {
+    motion: mdiRun,
+  },
+};
+
+@customElement("hui-area-card")
+export class HuiAreaCard
+  extends SubscribeMixin(LitElement)
+  implements LovelaceCard
+{
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import("../editor/config-elements/hui-area-card-editor");
+    return document.createElement("hui-area-card-editor");
+  }
+
+  public static getStubConfig(): AreaCardConfig {
+    return { type: "area", area: "" };
+  }
+
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _config?: AreaCardConfig;
+
+  @state() private _entities?: EntityRegistryEntry[];
+
+  @state() private _devices?: DeviceRegistryEntry[];
+
+  @state() private _areas?: AreaRegistryEntry[];
+
+  private _entitiesByDomain = memoizeOne(
+    (
+      areaId: string,
+      devicesInArea: Set<string>,
+      registryEntities: EntityRegistryEntry[],
+      states: HomeAssistant["states"]
+    ) => {
+      const entitiesInArea = registryEntities
+        .filter(
+          (entry) =>
+            !entry.entity_category &&
+            (entry.area_id
+              ? entry.area_id === areaId
+              : entry.device_id && devicesInArea.has(entry.device_id))
+        )
+        .map((entry) => entry.entity_id);
+
+      const entitiesByDomain: { [domain: string]: HassEntity[] } = {};
+
+      for (const entity of entitiesInArea) {
+        const domain = computeDomain(entity);
+        if (
+          !TOGGLE_DOMAINS.includes(domain) &&
+          !SENSOR_DOMAINS.includes(domain) &&
+          !ALERT_DOMAINS.includes(domain) &&
+          !OTHER_DOMAINS.includes(domain)
+        ) {
+          continue;
+        }
+        const stateObj: HassEntity | undefined = states[entity];
+
+        if (!stateObj) {
+          continue;
+        }
+
+        if (
+          (SENSOR_DOMAINS.includes(domain) || ALERT_DOMAINS.includes(domain)) &&
+          !DEVICE_CLASSES[domain].includes(
+            stateObj.attributes.device_class || ""
+          )
+        ) {
+          continue;
+        }
+
+        if (!(domain in entitiesByDomain)) {
+          entitiesByDomain[domain] = [];
+        }
+        entitiesByDomain[domain].push(stateObj);
+      }
+
+      return entitiesByDomain;
+    }
+  );
+
+  private _isOn(domain: string, deviceClass?: string): boolean | undefined {
+    const entities = this._entitiesByDomain(
+      this._config!.area,
+      this._devicesInArea(this._config!.area, this._devices!),
+      this._entities!,
+      this.hass.states
+    )[domain];
+    if (!entities) {
+      return undefined;
+    }
+    return (
+      deviceClass
+        ? entities.filter(
+            (entity) => entity.attributes.device_class === deviceClass
+          )
+        : entities
+    ).some(
+      (entity) =>
+        !UNAVAILABLE_STATES.includes(entity.state) &&
+        !STATES_OFF.includes(entity.state)
+    );
+  }
+
+  private _average(domain: string, deviceClass?: string): string | undefined {
+    const entities = this._entitiesByDomain(
+      this._config!.area,
+      this._devicesInArea(this._config!.area, this._devices!),
+      this._entities!,
+      this.hass.states
+    )[domain].filter((entity) =>
+      deviceClass ? entity.attributes.device_class === deviceClass : true
+    );
+    if (!entities) {
+      return undefined;
+    }
+    let uom;
+    const values = entities.filter((entity) => {
+      if (
+        !entity.attributes.unit_of_measurement ||
+        isNaN(Number(entity.state))
+      ) {
+        return false;
+      }
+      if (!uom) {
+        uom = entity.attributes.unit_of_measurement;
+        return true;
+      }
+      return entity.attributes.unit_of_measurement === uom;
+    });
+    if (!values.length) {
+      return undefined;
+    }
+    const sum = values.reduce(
+      (total, entity) => total + Number(entity.state),
+      0
+    );
+    return `${formatNumber(sum / values.length, this.hass!.locale, {
+      maximumFractionDigits: 1,
+    })} ${uom}`;
+  }
+
+  private _area = memoizeOne(
+    (areaId: string | undefined, areas: AreaRegistryEntry[]) =>
+      areas.find((area) => area.area_id === areaId) || null
+  );
+
+  private _devicesInArea = memoizeOne(
+    (areaId: string | undefined, devices: DeviceRegistryEntry[]) =>
+      new Set(
+        areaId
+          ? devices
+              .filter((device) => device.area_id === areaId)
+              .map((device) => device.id)
+          : []
+      )
+  );
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeAreaRegistry(this.hass!.connection, (areas) => {
+        this._areas = areas;
+      }),
+      subscribeDeviceRegistry(this.hass!.connection, (devices) => {
+        this._devices = devices;
+      }),
+      subscribeEntityRegistry(this.hass!.connection, (entries) => {
+        this._entities = entries;
+      }),
+    ];
+  }
+
+  public getCardSize(): number {
+    return 3;
+  }
+
+  public setConfig(config: AreaCardConfig): void {
+    if (!config.area) {
+      throw new Error("Area Required");
+    }
+
+    this._config = config;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.has("_config") || !this._config) {
+      return true;
+    }
+
+    if (
+      changedProps.has("_devicesInArea") ||
+      changedProps.has("_area") ||
+      changedProps.has("_entities")
+    ) {
+      return true;
+    }
+
+    if (!changedProps.has("hass")) {
+      return false;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (
+      !oldHass ||
+      oldHass.themes !== this.hass!.themes ||
+      oldHass.locale !== this.hass!.locale
+    ) {
+      return true;
+    }
+
+    if (
+      !this._devices ||
+      !this._devicesInArea(this._config.area, this._devices) ||
+      !this._entities
+    ) {
+      return false;
+    }
+
+    const entities = this._entitiesByDomain(
+      this._config.area,
+      this._devicesInArea(this._config.area, this._devices),
+      this._entities,
+      this.hass.states
+    );
+
+    for (const domainEntities of Object.values(entities)) {
+      for (const stateObj of domainEntities) {
+        if (oldHass!.states[stateObj.entity_id] !== stateObj) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+
+  protected render(): TemplateResult {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this._areas ||
+      !this._devices ||
+      !this._entities
+    ) {
+      return html``;
+    }
+
+    const entitiesByDomain = this._entitiesByDomain(
+      this._config.area,
+      this._devicesInArea(this._config.area, this._devices),
+      this._entities,
+      this.hass.states
+    );
+    const area = this._area(this._config.area, this._areas);
+
+    if (area === null) {
+      return html`
+        <hui-warning>
+          ${this.hass.localize("ui.card.area.area_not_found")}
+        </hui-warning>
+      `;
+    }
+
+    const sensors: TemplateResult[] = [];
+    SENSOR_DOMAINS.forEach((domain) => {
+      if (!(domain in entitiesByDomain)) {
+        return;
+      }
+      DEVICE_CLASSES[domain].forEach((deviceClass) => {
+        if (
+          entitiesByDomain[domain].some(
+            (entity) => entity.attributes.device_class === deviceClass
+          )
+        ) {
+          sensors.push(html`
+            ${DOMAIN_ICONS[domain][deviceClass]
+              ? html`<ha-svg-icon
+                  .path=${DOMAIN_ICONS[domain][deviceClass]}
+                ></ha-svg-icon>`
+              : ""}
+            ${this._average(domain, deviceClass)}
+          `);
+        }
+      });
+    });
+
+    let cameraEntityId: string | undefined;
+    if ("camera" in entitiesByDomain) {
+      cameraEntityId = entitiesByDomain.camera[0].entity_id;
+    }
+
+    return html`
+      <ha-card class=${area.picture ? "image" : ""}>
+        ${area.picture || cameraEntityId
+          ? html`<hui-image
+              .config=${this._config}
+              .hass=${this.hass}
+              .image=${area.picture
+                ? this.hass.hassUrl(area.picture)
+                : undefined}
+              .cameraImage=${cameraEntityId}
+              aspectRatio="16:9"
+            ></hui-image>`
+          : ""}
+
+        <div
+          class="container ${classMap({
+            navigate: this._config.navigation_path !== undefined,
+          })}"
+          @click=${this._handleNavigation}
+        >
+          <div class="alerts">
+            ${ALERT_DOMAINS.map((domain) => {
+              if (!(domain in entitiesByDomain)) {
+                return "";
+              }
+              return DEVICE_CLASSES[domain].map((deviceClass) =>
+                this._isOn(domain, deviceClass)
+                  ? html`
+                      ${DOMAIN_ICONS[domain][deviceClass]
+                        ? html`<ha-svg-icon
+                            .path=${DOMAIN_ICONS[domain][deviceClass]}
+                          ></ha-svg-icon>`
+                        : ""}
+                    `
+                  : ""
+              );
+            })}
+          </div>
+          <div class="bottom">
+            <div>
+              <div class="name">${area.name}</div>
+              ${sensors.length
+                ? html`<div class="sensors">${sensors}</div>`
+                : ""}
+            </div>
+            <div class="buttons">
+              ${TOGGLE_DOMAINS.map((domain) => {
+                if (!(domain in entitiesByDomain)) {
+                  return "";
+                }
+
+                const on = this._isOn(domain)!;
+                return TOGGLE_DOMAINS.includes(domain)
+                  ? html`
+                      <ha-icon-button
+                        class=${on ? "on" : "off"}
+                        .path=${DOMAIN_ICONS[domain][on ? "on" : "off"]}
+                        .domain=${domain}
+                        @click=${this._toggle}
+                      >
+                      </ha-icon-button>
+                    `
+                  : "";
+              })}
+            </div>
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    const oldConfig = changedProps.get("_config") as AreaCardConfig | undefined;
+
+    if (
+      (changedProps.has("hass") &&
+        (!oldHass || oldHass.themes !== this.hass.themes)) ||
+      (changedProps.has("_config") &&
+        (!oldConfig || oldConfig.theme !== this._config.theme))
+    ) {
+      applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
+  private _handleNavigation() {
+    if (this._config!.navigation_path) {
+      navigate(this._config!.navigation_path);
+    }
+  }
+
+  private _toggle(ev: Event) {
+    ev.stopPropagation();
+    const domain = (ev.currentTarget as any).domain as string;
+    if (TOGGLE_DOMAINS.includes(domain)) {
+      this.hass.callService(
+        domain,
+        this._isOn(domain) ? "turn_off" : "turn_on",
+        undefined,
+        {
+          area_id: this._config!.area,
+        }
+      );
+    }
+    forwardHaptic("light");
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-card {
+        overflow: hidden;
+        position: relative;
+        padding-bottom: 56.25%;
+        background-size: cover;
+      }
+
+      ha-card.image {
+        padding-bottom: 0;
+      }
+
+      .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: linear-gradient(
+          0,
+          rgba(33, 33, 33, 0.9) 0%,
+          rgba(33, 33, 33, 0) 45%
+        );
+      }
+
+      ha-card:not(.image) .container::before {
+        position: absolute;
+        content: "";
+        width: 100%;
+        height: 100%;
+        background-color: var(--sidebar-selected-icon-color);
+        opacity: 0.12;
+      }
+
+      .sensors {
+        color: #e3e3e3;
+        font-size: 16px;
+        --mdc-icon-size: 24px;
+        opacity: 0.6;
+        margin-top: 8px;
+      }
+
+      .alerts {
+        padding: 16px;
+      }
+
+      .alerts ha-svg-icon {
+        background: var(--accent-color);
+        color: var(--text-accent-color, var(--text-primary-color));
+        padding: 8px;
+        border-radius: 50%;
+      }
+
+      .name {
+        color: white;
+        font-size: 24px;
+      }
+
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px;
+      }
+
+      .navigate {
+        cursor: pointer;
+      }
+
+      ha-icon-button {
+        color: white;
+        background-color: var(--area-button-color, #727272b2);
+        border-radius: 50%;
+        margin-left: 8px;
+        --mdc-icon-button-size: 44px;
+      }
+      .on {
+        color: var(--paper-item-icon-active-color, #fdd835);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-area-card": HuiAreaCard;
+  }
+}
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index f733c678a3..2e9cca12a4 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -134,7 +134,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
 
     if (this._config.header) {
-      this._headerElement = createHeaderFooterElement(this._config.header);
+      this._headerElement = createHeaderFooterElement(
+        this._config.header
+      ) as LovelaceHeaderFooter;
+      this._headerElement.type = "header";
       if (this._hass) {
         this._headerElement.hass = this._hass;
       }
@@ -143,7 +146,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     }
 
     if (this._config.footer) {
-      this._footerElement = createHeaderFooterElement(this._config.footer);
+      this._footerElement = createHeaderFooterElement(
+        this._config.footer
+      ) as LovelaceHeaderFooter;
+      this._footerElement.type = "footer";
       if (this._hass) {
         this._footerElement.hass = this._hass;
       }
@@ -289,7 +295,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   private renderEntity(entityConf: LovelaceRowConfig): TemplateResult {
     const element = createRowElement(
-      !("type" in entityConf) && this._config!.state_color
+      (!("type" in entityConf) || entityConf.type === "conditional") &&
+        this._config!.state_color
         ? ({
             state_color: true,
             ...(entityConf as EntityConfig),
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 445bd5ff7a..b640284bfd 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -9,7 +9,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
-import { relativeTime } from "../../../common/datetime/relative_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -17,6 +16,7 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
+import "../../../components/ha-relative-time";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import {
   ActionHandlerEvent,
@@ -325,10 +325,13 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                       ></hui-timestamp-display>
                     `
                   : entityConf.show_last_changed
-                  ? relativeTime(
-                      new Date(stateObj.last_changed),
-                      this.hass!.locale
-                    )
+                  ? html`
+                      <ha-relative-time
+                        .hass=${this.hass}
+                        .datetime=${stateObj.last_changed}
+                        capitalize
+                      ></ha-relative-time>
+                    `
                   : computeStateDisplay(
                       this.hass!.localize,
                       stateObj,
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 9efb669f41..79a96c9861 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -17,7 +17,6 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import { fetchRecent } from "../../../data/history";
 import { HomeAssistant } from "../../../types";
-import "../../../components/map/ha-entity-marker";
 import { findEntities } from "../common/find-entities";
 import { processConfigEntities } from "../common/process-config-entities";
 import { EntityConfig } from "../entity-rows/types";
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index 28f279019d..f579172e9a 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -544,7 +544,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     }
 
     try {
-      const { foreground, background } = await extractColors(this._image);
+      const { foreground, background } = await extractColors(
+        this.hass.hassUrl(this._image)
+      );
       this._backgroundColor = background.hex;
       this._foregroundColor = foreground.hex;
     } catch (err: any) {
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 80a70b4378..cf5ecb5198 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -76,6 +76,11 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
   state_color?: boolean;
 }
 
+export interface AreaCardConfig extends LovelaceCardConfig {
+  area: string;
+  navigation_path?: string;
+}
+
 export interface ButtonCardConfig extends LovelaceCardConfig {
   entity?: string;
   name?: string;
diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts
index 0561b1c9db..cc608f06e8 100644
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -25,6 +25,7 @@ import {
   ThermostatCardConfig,
 } from "../cards/types";
 import { LovelaceRowConfig } from "../entity-rows/types";
+import { ButtonsHeaderFooterConfig } from "../header-footer/types";
 
 const HIDE_DOMAIN = new Set([
   "automation",
@@ -86,7 +87,8 @@ const splitByAreas = (
 
 export const computeCards = (
   states: Array<[string, HassEntity?]>,
-  entityCardOptions: Partial<EntitiesCardConfig>
+  entityCardOptions: Partial<EntitiesCardConfig>,
+  renderFooterEntities = true
 ): LovelaceCardConfig[] => {
   const cards: LovelaceCardConfig[] = [];
 
@@ -97,6 +99,8 @@ export const computeCards = (
     ? `${entityCardOptions.title} `.toLowerCase()
     : undefined;
 
+  const footerEntities: ButtonsHeaderFooterConfig["entities"] = [];
+
   for (const [entityId, stateObj] of states) {
     const domain = computeDomain(entityId);
 
@@ -143,6 +147,28 @@ export const computeCards = (
         show_forecast: false,
       };
       cards.push(cardConfig);
+    } else if (
+      renderFooterEntities &&
+      (domain === "scene" || domain === "script")
+    ) {
+      const conf: typeof footerEntities[0] = {
+        entity: entityId,
+        show_icon: true,
+        show_name: true,
+      };
+      let name: string | undefined;
+      if (
+        titlePrefix &&
+        stateObj &&
+        // eslint-disable-next-line no-cond-assign
+        (name = stripPrefixFromEntityName(
+          computeStateName(stateObj),
+          titlePrefix
+        ))
+      ) {
+        conf.name = name;
+      }
+      footerEntities.push(conf);
     } else if (
       domain === "sensor" &&
       stateObj?.attributes.device_class === SENSOR_DEVICE_CLASS_BATTERY
@@ -168,15 +194,39 @@ export const computeCards = (
     }
   }
 
-  if (entities.length > 0) {
-    cards.unshift({
+  // If we ended up with footer entities but no normal entities,
+  // render the footer entities as normal entities.
+  if (entities.length === 0 && footerEntities.length > 0) {
+    return computeCards(states, entityCardOptions, false);
+  }
+
+  if (entities.length > 0 || footerEntities.length > 0) {
+    const card: EntitiesCardConfig = {
       type: "entities",
       entities,
       ...entityCardOptions,
-    });
+    };
+    if (footerEntities.length > 0) {
+      card.footer = {
+        type: "buttons",
+        entities: footerEntities,
+      } as ButtonsHeaderFooterConfig;
+    }
+    cards.unshift(card);
   }
 
-  return cards;
+  if (cards.length < 2) {
+    return cards;
+  }
+
+  return [
+    {
+      type: "grid",
+      square: false,
+      columns: 1,
+      cards,
+    },
+  ];
 };
 
 const computeDefaultViewStates = (
@@ -398,7 +448,9 @@ export const generateDefaultViewConfig = (
 
     if (grid && grid.flow_from.length > 0) {
       areaCards.push({
-        title: "Energy distribution today",
+        title: localize(
+          "ui.panel.lovelace.cards.energy.energy_distribution.title_today"
+        ),
         type: "energy-distribution",
         link_dashboard: true,
       });
diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts
index 4c7692adef..7c5a0c60d4 100644
--- a/src/panels/lovelace/components/hui-buttons-base.ts
+++ b/src/panels/lovelace/components/hui-buttons-base.ts
@@ -9,6 +9,8 @@ import { computeTooltip } from "../common/compute-tooltip";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { handleAction } from "../common/handle-action";
 import { hasAction } from "../common/has-action";
+import "../../../components/ha-chip";
+import { haStyleScrollbar } from "../../../resources/styles";
 
 @customElement("hui-buttons-base")
 export class HuiButtonsBase extends LitElement {
@@ -18,40 +20,46 @@ export class HuiButtonsBase extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${(this.configEntities || []).map((entityConf) => {
-        const stateObj = this.hass.states[entityConf.entity];
+      <div class="ha-scrollbar">
+        ${(this.configEntities || []).map((entityConf) => {
+          const stateObj = this.hass.states[entityConf.entity];
 
-        return html`
-          <div
-            @action=${this._handleAction}
-            .actionHandler=${actionHandler({
-              hasHold: hasAction(entityConf.hold_action),
-              hasDoubleClick: hasAction(entityConf.double_tap_action),
-            })}
-            .config=${entityConf}
-            tabindex="0"
-          >
-            ${entityConf.show_icon !== false
-              ? html`
-                  <state-badge
-                    title=${computeTooltip(this.hass, entityConf)}
-                    .hass=${this.hass}
-                    .stateObj=${stateObj}
-                    .overrideIcon=${entityConf.icon}
-                    .overrideImage=${entityConf.image}
-                    stateColor
-                  ></state-badge>
-                `
-              : ""}
-            <span>
-              ${(entityConf.show_name && stateObj) ||
-              (entityConf.name && entityConf.show_name !== false)
-                ? entityConf.name || computeStateName(stateObj)
+          const name =
+            (entityConf.show_name && stateObj) ||
+            (entityConf.name && entityConf.show_name !== false)
+              ? entityConf.name || computeStateName(stateObj)
+              : "";
+
+          return html`
+            <ha-chip
+              @action=${this._handleAction}
+              .actionHandler=${actionHandler({
+                hasHold: hasAction(entityConf.hold_action),
+                hasDoubleClick: hasAction(entityConf.double_tap_action),
+              })}
+              .config=${entityConf}
+              tabindex="0"
+              .hasIcon=${entityConf.show_icon !== false}
+              .noText=${!name}
+            >
+              ${entityConf.show_icon !== false
+                ? html`
+                    <state-badge
+                      title=${computeTooltip(this.hass, entityConf)}
+                      .hass=${this.hass}
+                      .stateObj=${stateObj}
+                      .overrideIcon=${entityConf.icon}
+                      .overrideImage=${entityConf.image}
+                      stateColor
+                      slot="icon"
+                    ></state-badge>
+                  `
                 : ""}
-            </span>
-          </div>
-        `;
-      })}
+              ${name}
+            </ha-chip>
+          `;
+        })}
+      </div>
     `;
   }
 
@@ -61,18 +69,36 @@ export class HuiButtonsBase extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: flex;
-        justify-content: space-evenly;
-      }
-      div {
-        cursor: pointer;
-        align-items: center;
-        display: inline-flex;
-        outline: none;
-      }
-    `;
+    return [
+      haStyleScrollbar,
+      css`
+        .ha-scrollbar {
+          padding: 8px;
+          padding-top: var(--padding-top, 8px);
+          padding-bottom: var(--padding-bottom, 8px);
+          width: 100%;
+          overflow-x: auto;
+          overflow-y: hidden;
+          white-space: nowrap;
+          box-sizing: border-box;
+          display: flex;
+          flex-wrap: wrap;
+        }
+        state-badge {
+          line-height: inherit;
+          text-align: start;
+          color: var(--secondary-text-color);
+        }
+        ha-chip {
+          padding: 4px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          .ha-scrollbar {
+            flex-wrap: nowrap;
+          }
+        }
+      `,
+    ];
   }
 }
 
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 88094f7dd9..5f185bf46e 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -9,7 +9,7 @@ import {
 import { property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
+import { DOMAINS_INPUT_ROW } from "../../../common/const";
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -31,6 +31,8 @@ class HuiGenericEntityRow extends LitElement {
 
   @property() public secondaryText?: string;
 
+  @property({ type: Boolean }) public hideName = false;
+
   protected render(): TemplateResult {
     if (!this.hass || !this.config) {
       return html``;
@@ -47,10 +49,10 @@ class HuiGenericEntityRow extends LitElement {
       `;
     }
 
-    const pointer =
-      (this.config.tap_action && this.config.tap_action.action !== "none") ||
-      (this.config.entity &&
-        !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this.config.entity)));
+    const domain = computeDomain(this.config.entity);
+    const pointer = !(
+      this.config.tap_action && this.config.tap_action.action !== "none"
+    );
 
     const hasSecondary = this.secondaryText || this.config.secondary_info;
     const name = this.config.name ?? computeStateName(stateObj);
@@ -72,75 +74,90 @@ class HuiGenericEntityRow extends LitElement {
         })}
         tabindex=${ifDefined(pointer ? "0" : undefined)}
       ></state-badge>
-      <div
-        class="info ${classMap({
-          pointer,
-          "text-content": !hasSecondary,
-        })}"
-        @action=${this._handleAction}
-        .actionHandler=${actionHandler({
-          hasHold: hasAction(this.config!.hold_action),
-          hasDoubleClick: hasAction(this.config!.double_tap_action),
-        })}
-        .title=${name}
-      >
-        ${name}
-        ${hasSecondary
-          ? html`
-              <div class="secondary">
-                ${this.secondaryText ||
-                (this.config.secondary_info === "entity-id"
-                  ? stateObj.entity_id
-                  : this.config.secondary_info === "last-changed"
-                  ? html`
-                      <ha-relative-time
-                        .hass=${this.hass}
-                        .datetime=${stateObj.last_changed}
-                        capitalize
-                      ></ha-relative-time>
-                    `
-                  : this.config.secondary_info === "last-updated"
-                  ? html`
-                      <ha-relative-time
-                        .hass=${this.hass}
-                        .datetime=${stateObj.last_updated}
-                        capitalize
-                      ></ha-relative-time>
-                    `
-                  : this.config.secondary_info === "last-triggered"
-                  ? stateObj.attributes.last_triggered
-                    ? html`
-                        <ha-relative-time
-                          .hass=${this.hass}
-                          .datetime=${stateObj.attributes.last_triggered}
-                          capitalize
-                        ></ha-relative-time>
-                      `
-                    : this.hass.localize(
-                        "ui.panel.lovelace.cards.entities.never_triggered"
-                      )
-                  : this.config.secondary_info === "position" &&
-                    stateObj.attributes.current_position !== undefined
-                  ? `${this.hass.localize("ui.card.cover.position")}: ${
-                      stateObj.attributes.current_position
-                    }`
-                  : this.config.secondary_info === "tilt-position" &&
-                    stateObj.attributes.current_tilt_position !== undefined
-                  ? `${this.hass.localize("ui.card.cover.tilt_position")}: ${
-                      stateObj.attributes.current_tilt_position
-                    }`
-                  : this.config.secondary_info === "brightness" &&
-                    stateObj.attributes.brightness
-                  ? html`${Math.round(
-                      (stateObj.attributes.brightness / 255) * 100
-                    )}
-                    %`
-                  : "")}
-              </div>
-            `
-          : ""}
-      </div>
-      <slot></slot>
+      ${!this.hideName
+        ? html` <div
+            class="info ${classMap({
+              pointer,
+              "text-content": !hasSecondary,
+            })}"
+            @action=${this._handleAction}
+            .actionHandler=${actionHandler({
+              hasHold: hasAction(this.config!.hold_action),
+              hasDoubleClick: hasAction(this.config!.double_tap_action),
+            })}
+            .title=${name}
+          >
+            ${this.config.name || computeStateName(stateObj)}
+            ${hasSecondary
+              ? html`
+                  <div class="secondary">
+                    ${this.secondaryText ||
+                    (this.config.secondary_info === "entity-id"
+                      ? stateObj.entity_id
+                      : this.config.secondary_info === "last-changed"
+                      ? html`
+                          <ha-relative-time
+                            .hass=${this.hass}
+                            .datetime=${stateObj.last_changed}
+                            capitalize
+                          ></ha-relative-time>
+                        `
+                      : this.config.secondary_info === "last-updated"
+                      ? html`
+                          <ha-relative-time
+                            .hass=${this.hass}
+                            .datetime=${stateObj.last_updated}
+                            capitalize
+                          ></ha-relative-time>
+                        `
+                      : this.config.secondary_info === "last-triggered"
+                      ? stateObj.attributes.last_triggered
+                        ? html`
+                            <ha-relative-time
+                              .hass=${this.hass}
+                              .datetime=${stateObj.attributes.last_triggered}
+                              capitalize
+                            ></ha-relative-time>
+                          `
+                        : this.hass.localize(
+                            "ui.panel.lovelace.cards.entities.never_triggered"
+                          )
+                      : this.config.secondary_info === "position" &&
+                        stateObj.attributes.current_position !== undefined
+                      ? `${this.hass.localize("ui.card.cover.position")}: ${
+                          stateObj.attributes.current_position
+                        }`
+                      : this.config.secondary_info === "tilt-position" &&
+                        stateObj.attributes.current_tilt_position !== undefined
+                      ? `${this.hass.localize(
+                          "ui.card.cover.tilt_position"
+                        )}: ${stateObj.attributes.current_tilt_position}`
+                      : this.config.secondary_info === "brightness" &&
+                        stateObj.attributes.brightness
+                      ? html`${Math.round(
+                          (stateObj.attributes.brightness / 255) * 100
+                        )}
+                        %`
+                      : "")}
+                  </div>
+                `
+              : ""}
+          </div>`
+        : html``}
+      ${!DOMAINS_INPUT_ROW.includes(domain)
+        ? html` <div
+            class="text-content ${classMap({
+              pointer,
+            })}"
+            @action=${this._handleAction}
+            .actionHandler=${actionHandler({
+              hasHold: hasAction(this.config!.hold_action),
+              hasDoubleClick: hasAction(this.config!.double_tap_action),
+            })}
+          >
+            <slot></slot>
+          </div>`
+        : html`<slot></slot>`}
     `;
   }
 
diff --git a/src/panels/lovelace/create-element/create-card-element.ts b/src/panels/lovelace/create-element/create-card-element.ts
index 6c8c470e35..df2eb3b45d 100644
--- a/src/panels/lovelace/create-element/create-card-element.ts
+++ b/src/panels/lovelace/create-element/create-card-element.ts
@@ -5,11 +5,10 @@ import "../cards/hui-entities-card";
 import "../cards/hui-entity-button-card";
 import "../cards/hui-entity-card";
 import "../cards/hui-glance-card";
-import "../cards/hui-horizontal-stack-card";
+import "../cards/hui-grid-card";
 import "../cards/hui-light-card";
 import "../cards/hui-sensor-card";
 import "../cards/hui-thermostat-card";
-import "../cards/hui-vertical-stack-card";
 import "../cards/hui-weather-forecast-card";
 import {
   createLovelaceElement,
@@ -23,58 +22,59 @@ const ALWAYS_LOADED_TYPES = new Set([
   "button",
   "entity-button",
   "glance",
-  "horizontal-stack",
+  "grid",
   "light",
   "sensor",
   "thermostat",
-  "vertical-stack",
   "weather-forecast",
 ]);
 
 const LAZY_LOAD_TYPES = {
   "alarm-panel": () => import("../cards/hui-alarm-panel-card"),
-  error: () => import("../cards/hui-error-card"),
+  area: () => import("../cards/hui-area-card"),
+  calendar: () => import("../cards/hui-calendar-card"),
+  conditional: () => import("../cards/hui-conditional-card"),
   "empty-state": () => import("../cards/hui-empty-state-card"),
-  "energy-usage-graph": () =>
-    import("../cards/energy/hui-energy-usage-graph-card"),
-  "energy-solar-graph": () =>
-    import("../cards/energy/hui-energy-solar-graph-card"),
-  "energy-gas-graph": () => import("../cards/energy/hui-energy-gas-graph-card"),
-  "energy-devices-graph": () =>
-    import("../cards/energy/hui-energy-devices-graph-card"),
-  "energy-sources-table": () =>
-    import("../cards/energy/hui-energy-sources-table-card"),
-  "energy-distribution": () =>
-    import("../cards/energy/hui-energy-distribution-card"),
-  "energy-solar-consumed-gauge": () =>
-    import("../cards/energy/hui-energy-solar-consumed-gauge-card"),
-  "energy-grid-neutrality-gauge": () =>
-    import("../cards/energy/hui-energy-grid-neutrality-gauge-card"),
   "energy-carbon-consumed-gauge": () =>
     import("../cards/energy/hui-energy-carbon-consumed-gauge-card"),
   "energy-date-selection": () =>
     import("../cards/energy/hui-energy-date-selection-card"),
-  grid: () => import("../cards/hui-grid-card"),
-  starting: () => import("../cards/hui-starting-card"),
+  "energy-devices-graph": () =>
+    import("../cards/energy/hui-energy-devices-graph-card"),
+  "energy-distribution": () =>
+    import("../cards/energy/hui-energy-distribution-card"),
+  "energy-gas-graph": () => import("../cards/energy/hui-energy-gas-graph-card"),
+  "energy-grid-neutrality-gauge": () =>
+    import("../cards/energy/hui-energy-grid-neutrality-gauge-card"),
+  "energy-solar-consumed-gauge": () =>
+    import("../cards/energy/hui-energy-solar-consumed-gauge-card"),
+  "energy-solar-graph": () =>
+    import("../cards/energy/hui-energy-solar-graph-card"),
+  "energy-sources-table": () =>
+    import("../cards/energy/hui-energy-sources-table-card"),
+  "energy-usage-graph": () =>
+    import("../cards/energy/hui-energy-usage-graph-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),
+  error: () => import("../cards/hui-error-card"),
+  gauge: () => import("../cards/hui-gauge-card"),
+  "history-graph": () => import("../cards/hui-history-graph-card"),
+  "horizontal-stack": () => import("../cards/hui-horizontal-stack-card"),
   humidifier: () => import("../cards/hui-humidifier-card"),
+  iframe: () => import("../cards/hui-iframe-card"),
+  logbook: () => import("../cards/hui-logbook-card"),
+  map: () => import("../cards/hui-map-card"),
+  markdown: () => import("../cards/hui-markdown-card"),
   "media-control": () => import("../cards/hui-media-control-card"),
   "picture-elements": () => import("../cards/hui-picture-elements-card"),
   "picture-entity": () => import("../cards/hui-picture-entity-card"),
   "picture-glance": () => import("../cards/hui-picture-glance-card"),
+  picture: () => import("../cards/hui-picture-card"),
   "plant-status": () => import("../cards/hui-plant-status-card"),
   "safe-mode": () => import("../cards/hui-safe-mode-card"),
   "shopping-list": () => import("../cards/hui-shopping-list-card"),
-  conditional: () => import("../cards/hui-conditional-card"),
-  gauge: () => import("../cards/hui-gauge-card"),
-  "history-graph": () => import("../cards/hui-history-graph-card"),
+  starting: () => import("../cards/hui-starting-card"),
   "statistics-graph": () => import("../cards/hui-statistics-graph-card"),
-  iframe: () => import("../cards/hui-iframe-card"),
-  map: () => import("../cards/hui-map-card"),
-  markdown: () => import("../cards/hui-markdown-card"),
-  picture: () => import("../cards/hui-picture-card"),
-  calendar: () => import("../cards/hui-calendar-card"),
-  logbook: () => import("../cards/hui-logbook-card"),
+  "vertical-stack": () => import("../cards/hui-vertical-stack-card"),
 };
 
 // This will not return an error card but will throw the error
diff --git a/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts
new file mode 100644
index 0000000000..e23c463746
--- /dev/null
+++ b/src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts
@@ -0,0 +1,119 @@
+import "@polymer/paper-input/paper-input";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { assert, assign, object, optional, string } from "superstruct";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-area-picker";
+import { HomeAssistant } from "../../../../types";
+import { AreaCardConfig } from "../../cards/types";
+import "../../components/hui-theme-select-editor";
+import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
+import { EditorTarget } from "../types";
+import { configElementStyle } from "./config-elements-style";
+
+const cardConfigStruct = assign(
+  baseLovelaceCardConfig,
+  object({
+    area: optional(string()),
+    navigation_path: optional(string()),
+    theme: optional(string()),
+  })
+);
+
+@customElement("hui-area-card-editor")
+export class HuiAreaCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: AreaCardConfig;
+
+  public setConfig(config: AreaCardConfig): void {
+    assert(config, cardConfigStruct);
+    this._config = config;
+  }
+
+  get _area(): string {
+    return this._config!.area || "";
+  }
+
+  get _navigation_path(): string {
+    return this._config!.navigation_path || "";
+  }
+
+  get _theme(): string {
+    return this._config!.theme || "";
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    return html`
+      <div class="card-config">
+        <ha-area-picker
+          .hass=${this.hass}
+          .value=${this._area}
+          .placeholder=${this._area}
+          .configValue=${"area"}
+          .label=${this.hass.localize("ui.dialogs.entity_registry.editor.area")}
+          @value-changed=${this._valueChanged}
+        ></ha-area-picker>
+        <paper-input
+          .label=${this.hass!.localize(
+            "ui.panel.lovelace.editor.action-editor.navigation_path"
+          )}
+          .value=${this._navigation_path}
+          .configValue=${"navigation_path"}
+          @value-changed=${this._valueChanged}
+        >
+        </paper-input>
+        <hui-theme-select-editor
+          .hass=${this.hass}
+          .value=${this._theme}
+          .configValue=${"theme"}
+          @value-changed=${this._valueChanged}
+        ></hui-theme-select-editor>
+      </div>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    if (!this._config || !this.hass) {
+      return;
+    }
+    const target = ev.target! as EditorTarget;
+    const value = ev.detail.value;
+
+    if (this[`_${target.configValue}`] === value) {
+      return;
+    }
+
+    let newConfig;
+    if (target.configValue) {
+      if (!value) {
+        newConfig = { ...this._config };
+        delete newConfig[target.configValue!];
+      } else {
+        newConfig = {
+          ...this._config,
+          [target.configValue!]: value,
+        };
+      }
+    }
+    fireEvent(this, "config-changed", { config: newConfig });
+  }
+
+  static get styles(): CSSResultGroup {
+    return configElementStyle;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-area-card-editor": HuiAreaCardEditor;
+  }
+}
diff --git a/src/panels/lovelace/editor/lovelace-cards.ts b/src/panels/lovelace/editor/lovelace-cards.ts
index 2a9beb0371..424cf8a4eb 100644
--- a/src/panels/lovelace/editor/lovelace-cards.ts
+++ b/src/panels/lovelace/editor/lovelace-cards.ts
@@ -89,6 +89,9 @@ export const coreCards: Card[] = [
     type: "weather-forecast",
     showElement: true,
   },
+  {
+    type: "area",
+  },
   {
     type: "conditional",
   },
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
index 1ad1a78098..0e16f0b160 100644
--- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
@@ -49,10 +49,8 @@ class HuiClimateEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <ha-climate-state
-          .hass=${this.hass}
-          .stateObj=${stateObj}
-        ></ha-climate-state>
+        <ha-climate-state .hass=${this.hass} .stateObj=${stateObj}>
+        </ha-climate-state>
       </hui-generic-entity-row>
     `;
   }
diff --git a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
index 5503eac028..b42d0dc64d 100644
--- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
@@ -9,8 +9,8 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-cover-controls";
 import "../../../components/ha-cover-tilt-controls";
+import { CoverEntity, isTiltOnly } from "../../../data/cover";
 import { HomeAssistant } from "../../../types";
-import { isTiltOnly } from "../../../util/cover-model";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
@@ -38,7 +38,7 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow {
       return html``;
     }
 
-    const stateObj = this.hass.states[this._config.entity];
+    const stateObj = this.hass.states[this._config.entity] as CoverEntity;
 
     if (!stateObj) {
       return html`
diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
index 3285fc15eb..40163bce0b 100644
--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
@@ -132,7 +132,6 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
     return css`
       :host {
         display: block;
-        cursor: pointer;
       }
       .flex {
         display: flex;
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index 6e562f415c..55f384a6c9 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -9,11 +9,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-paper-dropdown-menu";
@@ -23,13 +19,10 @@ import {
   InputSelectEntity,
   setInputSelectOption,
 } from "../../../data/input_select";
-import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
-import { actionHandler } from "../common/directives/action-handler-directive";
-import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceRow } from "./types";
 
@@ -68,42 +61,28 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const pointer =
-      (this._config.tap_action && this._config.tap_action.action !== "none") ||
-      (this._config.entity &&
-        !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
-
     return html`
-      <state-badge
-        .stateObj=${stateObj}
-        .stateColor=${this._config.state_color}
-        .overrideIcon=${this._config.icon}
-        .overrideImage=${this._config.image}
-        class=${classMap({
-          pointer,
-        })}
-        @action=${this._handleAction}
-        .actionHandler=${actionHandler({
-          hasHold: hasAction(this._config!.hold_action),
-          hasDoubleClick: hasAction(this._config!.double_tap_action),
-        })}
-        tabindex=${ifDefined(pointer ? "0" : undefined)}
-      ></state-badge>
-      <ha-paper-dropdown-menu
-        .label=${this._config.name || computeStateName(stateObj)}
-        .value=${stateObj.state}
-        .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-        @iron-select=${this._selectedChanged}
-        @click=${stopPropagation}
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+        hideName
       >
-        <paper-listbox slot="dropdown-content">
-          ${stateObj.attributes.options
-            ? stateObj.attributes.options.map(
-                (option) => html` <paper-item>${option}</paper-item> `
-              )
-            : ""}
-        </paper-listbox>
-      </ha-paper-dropdown-menu>
+        <ha-paper-dropdown-menu
+          .label=${this._config.name || computeStateName(stateObj)}
+          .value=${stateObj.state}
+          .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
+          @iron-select=${this._selectedChanged}
+          @click=${stopPropagation}
+        >
+          <paper-listbox slot="dropdown-content">
+            ${stateObj.attributes.options
+              ? stateObj.attributes.options.map(
+                  (option) => html` <paper-item>${option}</paper-item> `
+                )
+              : ""}
+          </paper-listbox>
+        </ha-paper-dropdown-menu>
+      </hui-generic-entity-row>
     `;
   }
 
@@ -129,13 +108,9 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
     }
   }
 
-  private _handleAction(ev: ActionHandlerEvent) {
-    handleAction(this, this.hass!, this._config!, ev.detail.action!);
-  }
-
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      hui-generic-entity-row {
         display: flex;
         align-items: center;
       }
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
index 65c3ee84aa..40e33d7fe9 100644
--- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
@@ -1,12 +1,5 @@
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { UNAVAILABLE } from "../../../data/entity";
 import { setValue } from "../../../data/input_text";
@@ -80,14 +73,6 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
 
     ev.target.blur();
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        cursor: pointer;
-      }
-    `;
-  }
 }
 
 declare global {
diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
index a5867a4ca9..5aa6f103fd 100644
--- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts
@@ -9,24 +9,17 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { ifDefined } from "lit/directives/if-defined";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/state-badge";
 import "../../../components/ha-paper-dropdown-menu";
 import { UNAVAILABLE } from "../../../data/entity";
 import { forwardHaptic } from "../../../data/haptics";
 import { SelectEntity, setSelectOption } from "../../../data/select";
-import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
-import { actionHandler } from "../common/directives/action-handler-directive";
-import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
+import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceRow } from "./types";
 
@@ -65,52 +58,39 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const pointer =
-      (this._config.tap_action && this._config.tap_action.action !== "none") ||
-      (this._config.entity &&
-        !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
-
     return html`
-      <state-badge
-        .stateObj=${stateObj}
-        .overrideIcon=${this._config.icon}
-        .overrideImage=${this._config.image}
-        class=${classMap({
-          pointer,
-        })}
-        @action=${this._handleAction}
-        .actionHandler=${actionHandler({
-          hasHold: hasAction(this._config!.hold_action),
-          hasDoubleClick: hasAction(this._config!.double_tap_action),
-        })}
-        tabindex=${ifDefined(pointer ? "0" : undefined)}
-      ></state-badge>
-      <ha-paper-dropdown-menu
-        .label=${this._config.name || computeStateName(stateObj)}
-        .disabled=${stateObj.state === UNAVAILABLE}
-        @iron-select=${this._selectedChanged}
-        @click=${stopPropagation}
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+        hideName
       >
-        <paper-listbox slot="dropdown-content">
-          ${stateObj.attributes.options
-            ? stateObj.attributes.options.map(
-                (option) =>
-                  html`
-                    <paper-item .option=${option}
-                      >${(stateObj.attributes.device_class &&
+        <ha-paper-dropdown-menu
+          .label=${this._config.name || computeStateName(stateObj)}
+          .disabled=${stateObj.state === UNAVAILABLE}
+          @iron-select=${this._selectedChanged}
+          @click=${stopPropagation}
+        >
+          <paper-listbox slot="dropdown-content">
+            ${stateObj.attributes.options
+              ? stateObj.attributes.options.map(
+                  (option) =>
+                    html`
+                      <paper-item .option=${option}
+                        >${(stateObj.attributes.device_class &&
+                          this.hass!.localize(
+                            `component.select.state.${stateObj.attributes.device_class}.${option}`
+                          )) ||
                         this.hass!.localize(
-                          `component.select.state.${stateObj.attributes.device_class}.${option}`
-                        )) ||
-                      this.hass!.localize(
-                        `component.select.state._.${option}`
-                      ) ||
-                      option}</paper-item
-                    >
-                  `
-              )
-            : ""}
-        </paper-listbox>
-      </ha-paper-dropdown-menu>
+                          `component.select.state._.${option}`
+                        ) ||
+                        option}</paper-item
+                      >
+                    `
+                )
+              : ""}
+          </paper-listbox>
+        </ha-paper-dropdown-menu>
+      </hui-generic-entity-row>
     `;
   }
 
@@ -136,13 +116,9 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
     }
   }
 
-  private _handleAction(ev: ActionHandlerEvent) {
-    handleAction(this, this.hass!, this._config!, ev.detail.action!);
-  }
-
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      hui-generic-entity-row {
         display: flex;
         align-items: center;
       }
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
index 6117579ab3..0c82d55e56 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
@@ -7,16 +7,9 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
-import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
-import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/types";
-import { actionHandler } from "../common/directives/action-handler-directive";
-import { handleAction } from "../common/handle-action";
-import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
@@ -54,37 +47,13 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const pointer =
-      (this._config.tap_action && this._config.tap_action.action !== "none") ||
-      (this._config.entity &&
-        !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
-
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div
-          class="text-content ${classMap({
-            pointer,
-          })}"
-          @action=${this._handleAction}
-          .actionHandler=${actionHandler({
-            hasHold: hasAction(this._config.hold_action),
-            hasDoubleClick: hasAction(this._config.double_tap_action),
-          })}
-        >
-          ${computeStateDisplay(
-            this.hass!.localize,
-            stateObj,
-            this.hass.locale
-          )}
-        </div>
+        ${computeStateDisplay(this.hass!.localize, stateObj, this.hass.locale)}
       </hui-generic-entity-row>
     `;
   }
 
-  private _handleAction(ev: ActionHandlerEvent) {
-    handleAction(this, this.hass!, this._config!, ev.detail.action);
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       div {
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
index 8d06737195..e2e0971399 100644
--- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -9,8 +9,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
-import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { formatNumber } from "../../../common/number/format_number";
@@ -67,10 +65,9 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const pointer =
-      (this._config.tap_action && this._config.tap_action.action !== "none") ||
-      (this._config.entity &&
-        !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
+    const pointer = !(
+      this._config.tap_action && this._config.tap_action.action !== "none"
+    );
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
 
@@ -106,7 +103,16 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
       >
         ${this._config.name || computeStateName(stateObj)}
       </div>
-      <div class="attributes">
+      <div
+        class="attributes ${classMap({
+          pointer,
+        })}"
+        @action=${this._handleAction}
+        .actionHandler=${actionHandler({
+          hasHold: hasAction(this._config!.hold_action),
+          hasDoubleClick: hasAction(this._config!.double_tap_action),
+        })}
+      >
         <div>
           ${UNAVAILABLE_STATES.includes(stateObj.state)
             ? computeStateDisplay(
diff --git a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts
index c26da98184..2a8816347f 100644
--- a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts
@@ -1,5 +1,7 @@
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { classMap } from "lit/directives/class-map";
 import { customElement, property, state } from "lit/decorators";
+import { computeDomain } from "../../../common/entity/compute_domain";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "../common/process-config-entities";
 import "../components/hui-buttons-base";
@@ -18,6 +20,8 @@ export class HuiButtonsHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public type!: "header" | "footer";
+
   @state() private _configEntities?: EntityConfig[];
 
   public getCardSize(): number {
@@ -26,22 +30,63 @@ export class HuiButtonsHeaderFooter
 
   public setConfig(config: ButtonsHeaderFooterConfig): void {
     this._configEntities = processConfigEntities(config.entities).map(
-      (entityConfig) => ({
-        tap_action: { action: "toggle" },
-        hold_action: { action: "more-info" },
-        ...entityConfig,
-      })
+      (entityConfig) => {
+        const conf = {
+          tap_action: { action: "toggle" },
+          hold_action: { action: "more-info" },
+          ...entityConfig,
+        };
+        if (computeDomain(entityConfig.entity) === "scene") {
+          conf.tap_action = {
+            action: "call-service",
+            service: "scene.turn_on",
+            target: { entity_id: conf.entity },
+          };
+        }
+        return conf;
+      }
     );
   }
 
   protected render(): TemplateResult | void {
     return html`
+      ${this.type === "footer"
+        ? html`<li class="divider footer" role="separator"></li>`
+        : ""}
       <hui-buttons-base
         .hass=${this.hass}
         .configEntities=${this._configEntities}
+        class=${classMap({
+          footer: this.type === "footer",
+          header: this.type === "header",
+        })}
       ></hui-buttons-base>
+      ${this.type === "header"
+        ? html`<li class="divider header" role="separator"></li>`
+        : ""}
     `;
   }
+
+  static styles = css`
+    .divider {
+      height: 0;
+      margin: 16px 0;
+      list-style-type: none;
+      border: none;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+      border-bottom-color: var(--divider-color);
+    }
+    .divider.header {
+      margin-top: 0;
+    }
+    hui-buttons-base.footer {
+      --padding-bottom: 16px;
+    }
+    hui-buttons-base.header {
+      --padding-top: 16px;
+    }
+  `;
 }
 
 declare global {
diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
index 79b2f1b8ca..e3aa2ced83 100644
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
@@ -60,6 +60,8 @@ export class HuiGraphHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public type!: "header" | "footer";
+
   @property() protected _config?: GraphHeaderFooterConfig;
 
   @state() private _coordinates?: number[][];
@@ -193,21 +195,13 @@ export class HuiGraphHeaderFooter
       this._stateHistory!.push(...stateHistory[0]);
     }
 
-    const limits =
-      this._config!.limits === undefined &&
-      this._stateHistory?.some(
-        (entity) => entity.attributes?.unit_of_measurement === "%"
-      )
-        ? { min: 0, max: 100 }
-        : this._config!.limits;
-
     this._coordinates =
       coordinates(
         this._stateHistory,
         this._config!.hours_to_show!,
         500,
         this._config!.detail!,
-        limits
+        this._config!.limits
       ) || [];
 
     this._date = endTime;
diff --git a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
index 22e5d904f8..200744f85c 100644
--- a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
@@ -34,6 +34,8 @@ export class HuiPictureHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property() public type!: "header" | "footer";
+
   @property() protected _config?: PictureHeaderFooterConfig;
 
   public getCardSize(): number {
diff --git a/src/panels/lovelace/header-footer/types.ts b/src/panels/lovelace/header-footer/types.ts
index ddbe7c79c8..a13cfc2401 100644
--- a/src/panels/lovelace/header-footer/types.ts
+++ b/src/panels/lovelace/header-footer/types.ts
@@ -1,15 +1,17 @@
 import { ActionConfig } from "../../../data/lovelace";
-import { EntityConfig } from "../entity-rows/types";
+import { EntitiesCardEntityConfig } from "../cards/types";
 
 export interface LovelaceHeaderFooterConfig {
   type: string;
 }
 
 export interface ButtonsHeaderFooterConfig extends LovelaceHeaderFooterConfig {
-  entities: Array<string | EntityConfig>;
+  type: "buttons";
+  entities: Array<string | EntitiesCardEntityConfig>;
 }
 
 export interface GraphHeaderFooterConfig extends LovelaceHeaderFooterConfig {
+  type: "graph";
   entity: string;
   detail?: number;
   hours_to_show?: number;
@@ -20,6 +22,7 @@ export interface GraphHeaderFooterConfig extends LovelaceHeaderFooterConfig {
 }
 
 export interface PictureHeaderFooterConfig extends LovelaceHeaderFooterConfig {
+  type: "picture";
   image: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;
diff --git a/src/panels/lovelace/special-rows/hui-attribute-row.ts b/src/panels/lovelace/special-rows/hui-attribute-row.ts
index 99e4a57907..f50c8d4e41 100644
--- a/src/panels/lovelace/special-rows/hui-attribute-row.ts
+++ b/src/panels/lovelace/special-rows/hui-attribute-row.ts
@@ -63,22 +63,20 @@ class HuiAttributeRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div>
-          ${this._config.prefix}
-          ${this._config.format && checkValidDate(date)
-            ? html` <hui-timestamp-display
-                .hass=${this.hass}
-                .ts=${date}
-                .format=${this._config.format}
-                capitalize
-              ></hui-timestamp-display>`
-            : typeof attribute === "number"
-            ? formatNumber(attribute, this.hass.locale)
-            : attribute !== undefined
-            ? formatAttributeValue(this.hass, attribute)
-            : "-"}
-          ${this._config.suffix}
-        </div>
+        ${this._config.prefix}
+        ${this._config.format && checkValidDate(date)
+          ? html` <hui-timestamp-display
+              .hass=${this.hass}
+              .ts=${date}
+              .format=${this._config.format}
+              capitalize
+            ></hui-timestamp-display>`
+          : typeof attribute === "number"
+          ? formatNumber(attribute, this.hass.locale)
+          : attribute !== undefined
+          ? formatAttributeValue(this.hass, attribute)
+          : "-"}
+        ${this._config.suffix}
       </hui-generic-entity-row>
     `;
   }
diff --git a/src/panels/lovelace/special-rows/hui-conditional-row.ts b/src/panels/lovelace/special-rows/hui-conditional-row.ts
index 9251a72bd7..e17b07901c 100644
--- a/src/panels/lovelace/special-rows/hui-conditional-row.ts
+++ b/src/panels/lovelace/special-rows/hui-conditional-row.ts
@@ -1,7 +1,12 @@
 import { customElement } from "lit/decorators";
+import { EntityCardConfig } from "../cards/types";
 import { HuiConditionalBase } from "../components/hui-conditional-base";
 import { createRowElement } from "../create-element/create-row-element";
-import { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
+import {
+  ConditionalRowConfig,
+  EntityConfig,
+  LovelaceRow,
+} from "../entity-rows/types";
 
 @customElement("hui-conditional-row")
 class HuiConditionalRow extends HuiConditionalBase implements LovelaceRow {
@@ -12,7 +17,14 @@ class HuiConditionalRow extends HuiConditionalBase implements LovelaceRow {
       throw new Error("No row configured");
     }
 
-    this._element = createRowElement(config.row) as LovelaceRow;
+    this._element = createRowElement(
+      (config as EntityCardConfig).state_color
+        ? ({
+            state_color: true,
+            ...(config.row as EntityConfig),
+          } as EntityConfig)
+        : config.row
+    ) as LovelaceRow;
   }
 }
 
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index 070c5ef761..b2db755a67 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -68,6 +68,7 @@ export interface LovelaceRowConstructor extends Constructor<LovelaceRow> {
 
 export interface LovelaceHeaderFooter extends HTMLElement {
   hass?: HomeAssistant;
+  type: "header" | "footer";
   getCardSize(): number | Promise<number>;
   setConfig(config: LovelaceHeaderFooterConfig): void;
 }
diff --git a/src/panels/my/ha-panel-my.ts b/src/panels/my/ha-panel-my.ts
index 07addd5bb5..d7be560e7b 100644
--- a/src/panels/my/ha-panel-my.ts
+++ b/src/panels/my/ha-panel-my.ts
@@ -141,7 +141,8 @@ const REDIRECTS: Redirects = {
     redirect: "/config/info",
   },
   customize: {
-    redirect: "/config/customize",
+    // customize was removed in 2021.12, fallback to dashboard
+    redirect: "/config/dashboard",
   },
   profile: {
     redirect: "/profile/dashboard",
diff --git a/src/state-summary/state-card-cover.js b/src/state-summary/state-card-cover.js
deleted file mode 100644
index e2e6b54277..0000000000
--- a/src/state-summary/state-card-cover.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../components/entity/state-info";
-import "../components/ha-cover-controls";
-import "../components/ha-cover-tilt-controls";
-import CoverEntity from "../util/cover-model";
-
-class StateCardCover extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-flex-alignment"></style>
-      <style>
-        :host {
-          line-height: 1.5;
-        }
-      </style>
-
-      <div class="horizontal justified layout">
-        ${this.stateInfoTemplate}
-        <div class="horizontal layout">
-          <ha-cover-controls
-            hidden$="[[entityObj.isTiltOnly]]"
-            hass="[[hass]]"
-            state-obj="[[stateObj]]"
-          ></ha-cover-controls>
-          <ha-cover-tilt-controls
-            hidden$="[[!entityObj.isTiltOnly]]"
-            hass="[[hass]]"
-            state-obj="[[stateObj]]"
-          ></ha-cover-tilt-controls>
-        </div>
-      </div>
-    `;
-  }
-
-  static get stateInfoTemplate() {
-    return html`
-      <state-info
-        hass="[[hass]]"
-        state-obj="[[stateObj]]"
-        in-dialog="[[inDialog]]"
-      ></state-info>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-      inDialog: {
-        type: Boolean,
-        value: false,
-      },
-      entityObj: {
-        type: Object,
-        computed: "computeEntityObj(hass, stateObj)",
-      },
-    };
-  }
-
-  computeEntityObj(hass, stateObj) {
-    const entity = new CoverEntity(hass, stateObj);
-    return entity;
-  }
-}
-customElements.define("state-card-cover", StateCardCover);
diff --git a/src/state-summary/state-card-cover.ts b/src/state-summary/state-card-cover.ts
new file mode 100644
index 0000000000..9134ff9257
--- /dev/null
+++ b/src/state-summary/state-card-cover.ts
@@ -0,0 +1,56 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../components/entity/state-info";
+import "../components/ha-cover-controls";
+import "../components/ha-cover-tilt-controls";
+import { CoverEntity, isTiltOnly } from "../data/cover";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+
+@customElement("state-card-cover")
+class StateCardCover extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: CoverEntity;
+
+  @property({ type: Boolean }) public inDialog = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="horizontal justified layout">
+        <state-info
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+          .inDialog=${this.inDialog}
+        ></state-info>
+        <ha-cover-controls
+          .hass=${this.hass}
+          .hidden=${isTiltOnly(this.stateObj)}
+          .stateObj=${this.stateObj}
+        ></ha-cover-controls>
+        <ha-cover-tilt-controls
+          .hass=${this.hass}
+          .hidden=${!isTiltOnly(this.stateObj)}
+          .stateObj=${this.stateObj}
+        ></ha-cover-tilt-controls>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          line-height: 1.5;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "state-card-cover": StateCardCover;
+  }
+}
diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts
index 9aa5a0ac2c..bb5c443a62 100644
--- a/src/state/themes-mixin.ts
+++ b/src/state/themes-mixin.ts
@@ -38,17 +38,13 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       });
       mql.addListener((ev) => this._applyTheme(ev.matches));
       if (!this._themeApplied && mql.matches) {
-        applyThemesOnElement(
-          document.documentElement,
-          {
-            default_theme: "default",
-            default_dark_theme: null,
-            themes: {},
-            darkMode: false,
-          },
-          "default",
-          { dark: true }
-        );
+        applyThemesOnElement(document.documentElement, {
+          default_theme: "default",
+          default_dark_theme: null,
+          themes: {},
+          darkMode: true,
+          theme: "default",
+        });
       }
     }
 
@@ -89,6 +85,9 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       }
 
       themeSettings = { ...this.hass.selectedTheme, dark: darkMode };
+      this._updateHass({
+        themes: { ...this.hass.themes!, theme: themeName },
+      });
 
       applyThemesOnElement(
         document.documentElement,
diff --git a/src/translations/en.json b/src/translations/en.json
index c5df32dc8a..72931282ad 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -116,6 +116,9 @@
         "arm_vacation": "Arm vacation",
         "arm_custom_bypass": "Custom bypass"
       },
+      "area": {
+        "area_not_found": "Area not found."
+      },
       "automation": {
         "last_triggered": "Last triggered",
         "trigger": "Run Actions"
@@ -303,11 +306,11 @@
     },
     "components": {
       "logbook": {
-        "entries_not_found": "No logbook entries found.",
+        "entries_not_found": "No logbook events found.",
         "by": "by",
         "by_service": "by service",
         "show_trace": "[%key:ui::panel::config::automation::editor::show_trace%]",
-        "retrieval_error": "Error during logbook entry retrieval",
+        "retrieval_error": "Could not load logbook",
         "messages": {
           "was_away": "was detected away",
           "was_at_state": "was detected at {state}",
@@ -353,15 +356,15 @@
       },
       "target-picker": {
         "expand": "Expand",
-        "expand_area_id": "Expand this area into the separate devices and entities that it contains. After expanding, it will not update the devices and entities when the area changes.",
-        "expand_device_id": "Expand this device into the separate entities that it contains. After expanding, it will not update the entities when the device changes.",
+        "expand_area_id": "Split this area into separate devices and entities.",
+        "expand_device_id": "Split this device into separate entities.",
         "remove": "Remove",
         "remove_area_id": "Remove area",
         "remove_device_id": "Remove device",
         "remove_entity_id": "Remove entity",
-        "add_area_id": "Pick area",
-        "add_device_id": "Pick device",
-        "add_entity_id": "Pick entity"
+        "add_area_id": "Choose area",
+        "add_device_id": "Choose device",
+        "add_entity_id": "Choose entity"
       },
       "user-picker": {
         "no_user": "No user",
@@ -409,11 +412,11 @@
         "error": {
           "no_supervisor": {
             "title": "No Supervisor",
-            "description": "No Supervisor found, so add-ons could not be loaded."
+            "description": "Add-ons are not supported."
           },
           "fetch_addons": {
-            "title": "Error fetching add-ons",
-            "description": "Fetching add-ons returned an error."
+            "title": "Error loading add-ons",
+            "description": "There was an error loading add-ons."
           }
         }
       },
@@ -601,7 +604,6 @@
             "zone": "[%key:ui::panel::config::zone::caption%]",
             "users": "[%key:ui::panel::config::users::caption%]",
             "info": "[%key:ui::panel::config::info::caption%]",
-            "customize": "[%key:ui::panel::config::customize::caption%]",
             "blueprint": "[%key:ui::panel::config::blueprint::caption%]",
             "server_control": "[%key:ui::panel::config::server_control::caption%]"
           }
@@ -687,14 +689,26 @@
         "dismiss": "Dismiss",
         "no_unique_id": "This entity (''{entity_id}'') does not have a unique ID, therefore its settings cannot be managed from the UI. See the {faq_link} for more detail.",
         "faq": "documentation",
-        "info_customize": "You can overwrite some attributes in the {customize_link} section.",
-        "customize_link": "entity customizations",
         "editor": {
           "name": "Name",
           "icon": "Icon",
           "icon_error": "Icons should be in the format 'prefix:iconname', e.g. 'mdi:home'",
           "entity_id": "Entity ID",
-          "unavailable": "This entity is not currently available.",
+          "device_class": "Show as",
+          "device_classes": {
+            "binary_sensor": {
+              "door": "Door",
+              "garage_door": "Garage door",
+              "window": "Window",
+              "opening": "Other"
+            },
+            "cover": {
+              "door": "Door",
+              "garage": "Garage door",
+              "window": "Window"
+            }
+          },
+          "unavailable": "This entity is unavailable.",
           "enabled_label": "Enable entity",
           "enabled_cause": "Disabled by {cause}.",
           "device_disabled": "The device of this entity is disabled.",
@@ -703,7 +717,7 @@
           "enabled_delay_confirm": "The enabled entities will be added to Home Assistant in {delay} seconds",
           "enabled_restart_confirm": "Restart Home Assistant to finish enabling the entities",
           "delete": "Delete",
-          "confirm_delete": "Are you sure you want to delete this entry?",
+          "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",
@@ -864,7 +878,8 @@
         "key_missing": "Required key ''{key}'' is missing.",
         "key_not_expected": "Key ''{key}'' is not expected or not supported by the visual editor.",
         "key_wrong_type": "The provided value for ''{key}'' is not supported by the visual editor. We support ({type_correct}) but received ({type_wrong}).",
-        "no_template_editor_support": "Templates not supported in visual editor"
+        "no_template_editor_support": "Templates not supported in visual editor",
+        "no_state_array_support": "Multiple state values not supported in visual editor"
       },
       "supervisor": {
         "title": "Could not load the Supervisor panel!",
@@ -898,7 +913,6 @@
       "dismiss": "Dismiss"
     },
     "sidebar": {
-      "external_app_configuration": "App Configuration",
       "sidebar_toggle": "Sidebar Toggle",
       "done": "Done",
       "hide_panel": "Hide panel",
@@ -915,7 +929,6 @@
       },
       "config": {
         "header": "Configure Home Assistant",
-        "introduction": "In this view it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.",
         "advanced_mode": {
           "hint_enable": "Missing config options? Enable advanced mode on",
           "link_profile_page": "your profile page"
@@ -926,10 +939,18 @@
           },
           "learn_more": "Learn more"
         },
+        "updates": {
+          "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
+          "unable_to_fetch": "Unable to load updates",
+          "version_available": "Version {version_available} is available",
+          "more_updates": "+ {count} Updates",
+          "show": "show"
+        },
         "areas": {
           "caption": "Areas",
           "description": "Group devices and entities into areas",
           "edit_settings": "Area settings",
+          "add_picture": "Add a picture",
           "data_table": {
             "area": "Area",
             "devices": "Devices",
@@ -1188,11 +1209,11 @@
         },
         "core": {
           "caption": "General",
-          "description": "Unit system, location, time zone & other general parameters",
+          "description": "Location, network and analytics",
           "section": {
             "core": {
               "header": "General Configuration",
-              "introduction": "Changing your configuration can be a tiresome process. We know. This section will try to make your life a little bit easier.",
+              "introduction": "Manage your location, network and analytics.",
               "core_config": {
                 "edit_requires_storage": "Editor disabled because config stored in configuration.yaml.",
                 "location_name": "Name of your Home Assistant installation",
@@ -1390,7 +1411,7 @@
             },
             "server_management": {
               "heading": "Server management",
-              "introduction": "Control your Home Assistant server… from Home Assistant.",
+              "introduction": "Control your Home Assistant.",
               "restart": "Restart",
               "confirm_restart": "Are you sure you want to restart Home Assistant?",
               "stop": "Stop",
@@ -1398,27 +1419,6 @@
             }
           }
         },
-        "customize": {
-          "caption": "Customizations",
-          "description": "Customize your entities",
-          "picker": {
-            "header": "Customizations",
-            "introduction": "Tweak per-entity attributes. Added/edited customizations will take effect immediately. Removed customizations will take effect when the entity is updated.",
-            "documentation": "Customization documentation"
-          },
-          "warning": {
-            "include_sentence": "It seems that your configuration.yaml doesn't properly",
-            "include_link": "include customize.yaml",
-            "not_applied": "Changes made here are written in it, but will not be applied after a configuration reload unless the include is in place."
-          },
-          "attributes_customize": "The following attributes are already set in customize.yaml",
-          "attributes_outside": "The following attributes are customized from outside of customize.yaml",
-          "different_include": "Possibly via a domain, a glob or a different include.",
-          "attributes_set": "The following attributes of the entity are set programmatically.",
-          "attributes_override": "You can override them if you like.",
-          "attributes_not_set": "The following attributes weren't set. Set them if you like.",
-          "pick_attribute": "Pick an attribute to override"
-        },
         "automation": {
           "caption": "Automations",
           "description": "Create custom behavior rules for your home",
@@ -1454,7 +1454,8 @@
               "input_label": "What should this automation do?",
               "create": "Create"
             },
-            "start_empty": "Start with an empty automation"
+            "start_empty": "Start with an empty automation",
+            "start_empty_description": "Create a new automation from scratch"
           },
           "editor": {
             "enable_disable": "Enable/Disable automation",
@@ -1914,6 +1915,7 @@
             "unsaved_confirm": "You have unsaved changes. Are you sure you want to leave?",
             "name": "Name",
             "icon": "Icon",
+            "area": "Area",
             "devices": {
               "header": "Devices",
               "introduction": "Add the devices that you want to be included in your scene. Set all the devices to the state you want for this scene.",
@@ -2295,6 +2297,7 @@
             "update": "Update",
             "confirm_delete_user": "Are you sure you want to delete the user account for {name}? You can still track the user, but the person will no longer be able to login.",
             "admin": "[%key:ui::panel::config::users::editor::admin%]",
+            "local_only": "[%key:ui::panel::config::users::editor::local_only%]",
             "allow_login": "Allow person to login"
           }
         },
@@ -2385,11 +2388,10 @@
             "enable_restart_confirm": "Restart Home Assistant to finish enabling this integration",
             "disable_error": "Enabling or disabling of the integration failed",
             "manuf": "by {manufacturer}",
-            "hub": "Connected via",
+            "via": "Connected via",
             "firmware": "Firmware: {version}",
             "unnamed_entry": "Unnamed entry",
-            "device_unavailable": "Device unavailable",
-            "entity_unavailable": "Entity unavailable",
+            "unknown_via_device": "Unknown device",
             "area": "In {area}",
             "no_area": "No Area",
             "not_loaded": "Not loaded",
@@ -2455,7 +2457,8 @@
               "group": "Group",
               "system": "System generated",
               "is_active": "Active",
-              "is_owner": "Owner"
+              "is_owner": "Owner",
+              "local": "Local only"
             },
             "add_user": "Add user"
           },
@@ -2475,6 +2478,7 @@
             "admin": "Administrator",
             "group": "Group",
             "active": "Active",
+            "local_only": "Can only login from the local network",
             "system_generated": "System generated",
             "system_generated_users_not_removable": "Unable to remove system generated users.",
             "system_generated_users_not_editable": "Unable to update system generated users.",
@@ -2487,6 +2491,7 @@
             "password": "Password",
             "password_confirm": "Confirm Password",
             "password_not_match": "Passwords don't match",
+            "local_only": "Local only",
             "create": "Create"
           }
         },
@@ -2821,8 +2826,11 @@
             "driver_version": "Driver Version",
             "server_version": "Server Version",
             "home_id": "Home ID",
-            "nodes_ready": "Devices ready",
-            "dump_debug": "Download a dump of your network to help diagnose issues",
+            "server_url": "Server URL",
+            "devices": "{count} {count, plural,\n  one {device}\n  other {devices}\n}",
+            "provisioned_devices": "Provisioned devices",
+            "not_ready": "{count} not ready",
+            "dump_debug": "Download data",
             "dump_dead_nodes_title": "Some of your devices are dead",
             "dump_dead_nodes_text": "Some of your devices didn't respond and are assumed dead. These will not be fully exported.",
             "dump_not_ready_title": "Not all devices are ready yet",
@@ -2869,15 +2877,29 @@
           },
           "add_node": {
             "title": "Add a Z-Wave Device",
-            "cancel_inclusion": "Cancel Inclusion",
-            "controller_in_inclusion_mode": "Your Z-Wave controller is now in inclusion mode.",
+            "searching_device": "Searching for device",
             "follow_device_instructions": "Follow the directions that came with your device to trigger pairing on the device.",
-            "inclusion_failed": "The device could not be added. Please check the logs for more information.",
+            "choose_inclusion_strategy": "How do you want to add your device",
+            "qr_code": "QR Code",
+            "qr_code_paragraph": "If your device supports SmartStart you can scan the QR code for easy pairing.",
+            "scan_qr_code": "Scan QR code",
+            "enter_qr_code": "Enter QR code value",
+            "select_camera": "Select camera",
+            "inclusion_failed": "The device could not be added.",
+            "check_logs": "Please check the logs for more information.",
             "inclusion_finished": "The device has been added.",
+            "provisioning_finished": "The device has been added. Once you power it on, it will become available.",
             "view_device": "View Device",
             "interview_started": "The device is being interviewed. This may take some time.",
             "interview_failed": "The device interview failed. Additional information may be available in the logs."
           },
+          "provisioned": {
+            "dsk": "DSK",
+            "security_classes": "Security classes",
+            "unprovison": "Unprovison",
+            "confirm_unprovision_title": "Are you sure you want to unprovision the device?",
+            "confirm_unprovision_text": "If you unprovision the device it will not be added to Home Assistant when it is powered on. If it is already added to Home Assistant, removing the provisioned device will not remove it from Home Assistant."
+          },
           "security_classes": {
             "None": {
               "title": "None"
@@ -3045,6 +3067,7 @@
               "grid_neutrality_not_calculated": "Grid neutrality could not be calculated"
             },
             "energy_distribution": {
+              "title_today": "Energy distribution today",
               "grid": "Grid",
               "gas": "Gas",
               "solar": "Solar",
@@ -3230,6 +3253,10 @@
               "available_states": "Available States",
               "description": "The Alarm Panel card allows you to Arm and Disarm your alarm control panel integrations."
             },
+            "area": {
+              "name": "Area",
+              "description": "The Area card automatically displays entities of a specific area."
+            },
             "calendar": {
               "name": "Calendar",
               "description": "The Calendar card displays a calendar including day, week and list views",
@@ -3923,7 +3950,6 @@
           },
           "create_account": "Create Account",
           "error": {
-            "required_fields": "Fill in all required fields",
             "password_not_match": "Passwords don't match"
           }
         },
@@ -4178,6 +4204,7 @@
       "save": "[%key:ui::common::save%]",
       "close": "[%key:ui::common::close%]",
       "menu": "[%key:ui::common::menu%]",
+      "show": "[%key:ui::panel::config::updates::show%]",
       "show_more": "Show more information about this",
       "update_available": "{count, plural,\n  one {Update}\n  other {{count} updates}\n} pending",
       "update": "Update",
@@ -4187,11 +4214,15 @@
         "update_failed": "Update failed"
       }
     },
+    "update_available": {
+      "update_name": "Update {name}",
+      "open_release_notes": "Open release notes",
+      "create_backup": "Create backup before updating",
+      "description": "You have {version} installed. Click update to update to version {newest_version}",
+      "updating": "Updating {name} to version {version}",
+      "creating_backup": "Creating backup of {name}"
+    },
     "confirm": {
-      "update": {
-        "title": "Update {name}",
-        "text": "Are you sure you want to update {name} to version {version}?"
-      },
       "restart": {
         "title": "[%key:supervisor::common::restart_name%]",
         "text": "Are you sure you want to restart {name}?"
@@ -4215,6 +4246,7 @@
       "repositories": "Repositories"
     },
     "panel": {
+      "addons": "Add-ons",
       "dashboard": "Dashboard",
       "backups": "Backups",
       "store": "Add-on Store",
@@ -4382,12 +4414,6 @@
         "confirm_text": "Restart add-on",
         "text": "Do you want to restart the add-on with your changes?"
       },
-      "update": {
-        "backup": "Backup",
-        "create_backup": "Create a backup of {name} before updating",
-        "updating": "Updating {name} to version {version}",
-        "creating_backup": "Creating backup of {name}"
-      },
       "hardware": {
         "title": "Hardware",
         "search": "Search hardware",
diff --git a/src/types.ts b/src/types.ts
index 539dcb610d..b6bab9a982 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -84,9 +84,12 @@ export interface CurrentUser {
 }
 
 // Currently selected theme and its settings. These are the values stored in local storage.
+// Note: These values are not meant to be used at runtime to check whether dark mode is active
+// or which theme name to use, as this interface represents the config data for the theme picker.
+// The actually active dark mode and theme name can be read from hass.themes.
 export interface ThemeSettings {
   theme: string;
-  // Radio box selection for theme picker. Do not use in cards as
+  // Radio box selection for theme picker. Do not use in Lovelace rendering as
   // it can be undefined == auto.
   // Property hass.themes.darkMode carries effective current mode.
   dark?: boolean;
diff --git a/src/util/cover-model.js b/src/util/cover-model.js
deleted file mode 100644
index eae1007cf8..0000000000
--- a/src/util/cover-model.js
+++ /dev/null
@@ -1,149 +0,0 @@
-import { supportsFeature } from "../common/entity/supports-feature";
-
-/* eslint-enable no-bitwise */
-export default class CoverEntity {
-  constructor(hass, stateObj) {
-    this.hass = hass;
-    this.stateObj = stateObj;
-    this._attr = stateObj.attributes;
-    this._feat = this._attr.supported_features;
-  }
-
-  get isFullyOpen() {
-    if (this._attr.current_position !== undefined) {
-      return this._attr.current_position === 100;
-    }
-    return this.stateObj.state === "open";
-  }
-
-  get isFullyClosed() {
-    if (this._attr.current_position !== undefined) {
-      return this._attr.current_position === 0;
-    }
-    return this.stateObj.state === "closed";
-  }
-
-  get isFullyOpenTilt() {
-    return this._attr.current_tilt_position === 100;
-  }
-
-  get isFullyClosedTilt() {
-    return this._attr.current_tilt_position === 0;
-  }
-
-  get isOpening() {
-    return this.stateObj.state === "opening";
-  }
-
-  get isClosing() {
-    return this.stateObj.state === "closing";
-  }
-
-  get supportsOpen() {
-    return supportsFeature(this.stateObj, 1);
-  }
-
-  get supportsClose() {
-    return supportsFeature(this.stateObj, 2);
-  }
-
-  get supportsSetPosition() {
-    return supportsFeature(this.stateObj, 4);
-  }
-
-  get supportsStop() {
-    return supportsFeature(this.stateObj, 8);
-  }
-
-  get supportsOpenTilt() {
-    return supportsFeature(this.stateObj, 16);
-  }
-
-  get supportsCloseTilt() {
-    return supportsFeature(this.stateObj, 32);
-  }
-
-  get supportsStopTilt() {
-    return supportsFeature(this.stateObj, 64);
-  }
-
-  get supportsSetTiltPosition() {
-    return supportsFeature(this.stateObj, 128);
-  }
-
-  get isTiltOnly() {
-    const supportsCover =
-      this.supportsOpen || this.supportsClose || this.supportsStop;
-    const supportsTilt =
-      this.supportsOpenTilt || this.supportsCloseTilt || this.supportsStopTilt;
-    return supportsTilt && !supportsCover;
-  }
-
-  openCover() {
-    this.callService("open_cover");
-  }
-
-  closeCover() {
-    this.callService("close_cover");
-  }
-
-  stopCover() {
-    this.callService("stop_cover");
-  }
-
-  openCoverTilt() {
-    this.callService("open_cover_tilt");
-  }
-
-  closeCoverTilt() {
-    this.callService("close_cover_tilt");
-  }
-
-  stopCoverTilt() {
-    this.callService("stop_cover_tilt");
-  }
-
-  setCoverPosition(position) {
-    this.callService("set_cover_position", { position });
-  }
-
-  setCoverTiltPosition(tiltPosition) {
-    this.callService("set_cover_tilt_position", {
-      tilt_position: tiltPosition,
-    });
-  }
-
-  // helper method
-
-  callService(service, data = {}) {
-    data.entity_id = this.stateObj.entity_id;
-    this.hass.callService("cover", service, data);
-  }
-}
-
-export const supportsOpen = (stateObj) => supportsFeature(stateObj, 1);
-
-export const supportsClose = (stateObj) => supportsFeature(stateObj, 2);
-
-export const supportsSetPosition = (stateObj) => supportsFeature(stateObj, 4);
-
-export const supportsStop = (stateObj) => supportsFeature(stateObj, 8);
-
-export const supportsOpenTilt = (stateObj) => supportsFeature(stateObj, 16);
-
-export const supportsCloseTilt = (stateObj) => supportsFeature(stateObj, 32);
-
-export const supportsStopTilt = (stateObj) => supportsFeature(stateObj, 64);
-
-export const supportsSetTiltPosition = (stateObj) =>
-  supportsFeature(stateObj, 128);
-
-export function isTiltOnly(stateObj) {
-  const supportsCover =
-    supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
-  const supportsTilt =
-    supportsOpenTilt(stateObj) ||
-    supportsCloseTilt(stateObj) ||
-    supportsStopTilt(stateObj);
-  return supportsTilt && !supportsCover;
-}
diff --git a/src/util/hass-attributes-util.ts b/src/util/hass-attributes-util.ts
index 807bf40215..a87c8b02aa 100644
--- a/src/util/hass-attributes-util.ts
+++ b/src/util/hass-attributes-util.ts
@@ -39,6 +39,7 @@ const hassAttributeUtil = {
       "vibration",
       "window",
     ],
+    button: ["restart", "update"],
     cover: [
       "awning",
       "blind",
diff --git a/src/util/init-skeleton.ts b/src/util/init-skeleton.ts
deleted file mode 100644
index f5912e70a0..0000000000
--- a/src/util/init-skeleton.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const removeInitSkeleton = () => {
-  const initEl = document.getElementById("ha-init-skeleton");
-  if (initEl) {
-    initEl.parentElement!.removeChild(initEl);
-  }
-};
diff --git a/src/util/launch-screen.ts b/src/util/launch-screen.ts
new file mode 100644
index 0000000000..eb873a65db
--- /dev/null
+++ b/src/util/launch-screen.ts
@@ -0,0 +1,15 @@
+import { render, TemplateResult } from "lit";
+
+export const removeLaunchScreen = () => {
+  const launchScreenElement = document.getElementById("ha-launch-screen");
+  if (launchScreenElement) {
+    launchScreenElement.parentElement!.removeChild(launchScreenElement);
+  }
+};
+
+export const renderLaunchScreenInfoBox = (element: TemplateResult) => {
+  const infoBoxElement = document.getElementById("ha-launch-screen-info-box");
+  if (infoBoxElement) {
+    render(element, infoBoxElement);
+  }
+};
diff --git a/test/data/history.spec.ts b/test/data/history.spec.ts
deleted file mode 100644
index 6106040d7c..0000000000
--- a/test/data/history.spec.ts
+++ /dev/null
@@ -1,576 +0,0 @@
-import { assert } from "chai";
-
-import { calculateStatisticsSumGrowthWithPercentage } from "../../src/data/history";
-
-describe("calculateStatisticsSumGrowthWithPercentage", () => {
-  it("Returns null if not enough values", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage([], []),
-      null
-    );
-  });
-
-  it("Returns null if not enough sum stat values", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage(
-        [
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T05:00:00Z",
-            last_reset: null,
-            max: 75,
-            mean: 50,
-            min: 25,
-            sum: null,
-            state: null,
-          },
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T07:00:00Z",
-            last_reset: null,
-            max: 100,
-            mean: 75,
-            min: 50,
-            sum: null,
-            state: null,
-          },
-        ],
-        []
-      ),
-      null
-    );
-  });
-
-  it("Returns null if not enough percentage stat values", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage(
-        [],
-        [
-          [
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T04:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 50,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T05:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 100,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T07:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 200,
-              state: null,
-            },
-          ],
-        ]
-      ),
-      null
-    );
-  });
-
-  it("Returns a percentage of the growth", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage(
-        [
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T05:00:00Z",
-            last_reset: null,
-            max: 75,
-            mean: 50,
-            min: 25,
-            sum: null,
-            state: null,
-          },
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T07:00:00Z",
-            last_reset: null,
-            max: 100,
-            mean: 75,
-            min: 50,
-            sum: null,
-            state: null,
-          },
-        ],
-        [
-          [
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T04:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 50,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T05:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 100,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T07:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 200,
-              state: null,
-            },
-          ],
-          [
-            {
-              statistic_id: "sensor.off_peak_consumption",
-              start: "2021-07-28T04:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 50,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.off_peak_consumption",
-              start: "2021-07-28T05:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 100,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.off_peak_consumption",
-              start: "2021-07-28T07:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 200,
-              state: null,
-            },
-          ],
-        ]
-      ),
-      200
-    );
-  });
-
-  it("It ignores sum data that doesnt match start", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage(
-        [
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T05:00:00Z",
-            last_reset: null,
-            max: 75,
-            mean: 50,
-            min: 25,
-            sum: null,
-            state: null,
-          },
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T07:00:00Z",
-            last_reset: null,
-            max: 100,
-            mean: 75,
-            min: 50,
-            sum: null,
-            state: null,
-          },
-        ],
-        [
-          [
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T04:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 50,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T04:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 50,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T05:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 100,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T07:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 200,
-              state: null,
-            },
-          ],
-        ]
-      ),
-      100
-    );
-  });
-
-  it("It ignores percentage data that doesnt match start", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage(
-        [
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T04:00:00Z",
-            last_reset: null,
-            max: 25,
-            mean: 25,
-            min: 25,
-            sum: null,
-            state: null,
-          },
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T05:00:00Z",
-            last_reset: null,
-            max: 75,
-            mean: 50,
-            min: 25,
-            sum: null,
-            state: null,
-          },
-          {
-            statistic_id: "sensor.carbon_intensity",
-            start: "2021-07-28T07:00:00Z",
-            last_reset: null,
-            max: 100,
-            mean: 75,
-            min: 50,
-            sum: null,
-            state: null,
-          },
-        ],
-        [
-          [
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T04:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 50,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T05:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 100,
-              state: null,
-            },
-            {
-              statistic_id: "sensor.peak_consumption",
-              start: "2021-07-28T07:00:00Z",
-              last_reset: null,
-              max: null,
-              mean: null,
-              min: null,
-              sum: 200,
-              state: null,
-            },
-          ],
-        ]
-      ),
-      100
-    );
-  });
-
-  it("Returns a percentage of the growth", async () => {
-    assert.strictEqual(
-      calculateStatisticsSumGrowthWithPercentage(
-        [
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T06:00:00.000Z",
-            mean: 10,
-            min: 10,
-            max: 10,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 10,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T07:00:00.000Z",
-            mean: 20,
-            min: 20,
-            max: 20,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 20,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T08:00:00.000Z",
-            mean: 30,
-            min: 30,
-            max: 30,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 30,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T09:00:00.000Z",
-            mean: 40,
-            min: 40,
-            max: 40,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 40,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T10:00:00.000Z",
-            mean: 50,
-            min: 50,
-            max: 50,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 50,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T11:00:00.000Z",
-            mean: 60,
-            min: 60,
-            max: 60,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 60,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T12:00:00.000Z",
-            mean: 70,
-            min: 70,
-            max: 70,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 70,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T13:00:00.000Z",
-            mean: 80,
-            min: 80,
-            max: 80,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 80,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T14:00:00.000Z",
-            mean: 90,
-            min: 90,
-            max: 90,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 90,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T15:00:00.000Z",
-            mean: 100,
-            min: 100,
-            max: 100,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 100,
-            sum: null,
-          },
-          {
-            statistic_id: "sensor.grid_fossil_fuel_percentage",
-            start: "2021-08-03T16:00:00.000Z",
-            mean: 110,
-            min: 110,
-            max: 110,
-            last_reset: "1970-01-01T00:00:00+00:00",
-            state: 120,
-            sum: null,
-          },
-        ],
-        [
-          [
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T06:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 10,
-              sum: 10,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T07:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 20,
-              sum: 20,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T08:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 30,
-              sum: 30,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T09:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 40,
-              sum: 40,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T10:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 50,
-              sum: 50,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T11:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 60,
-              sum: 60,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T12:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 70,
-              sum: 70,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T13:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 80,
-              sum: 80,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T14:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 90,
-              sum: 90,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_1",
-              start: "2021-08-03T15:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 100,
-              sum: 100,
-            },
-          ],
-          [
-            {
-              statistic_id: "sensor.energy_consumption_tarif_2",
-              start: "2021-08-03T15:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 10,
-              sum: 10,
-            },
-            {
-              statistic_id: "sensor.energy_consumption_tarif_2",
-              start: "2021-08-03T16:00:00.000Z",
-              mean: null,
-              min: null,
-              max: null,
-              last_reset: "1970-01-01T00:00:00+00:00",
-              state: 20,
-              sum: 20,
-            },
-          ],
-        ]
-      ),
-      65
-    );
-  });
-});
diff --git a/yarn.lock b/yarn.lock
index 6f27e25906..e40476833a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2909,17 +2909,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdi/js@npm:6.4.95":
-  version: 6.4.95
-  resolution: "@mdi/js@npm:6.4.95"
-  checksum: 76055821b0b611090f1fadff3cb93b0d2c05f7c52778a0e8966abe1c85d3aae8312c497e91882bb8cb02bf9235edda901da944099553afb2dbacafb11ed40b18
+"@mdi/js@npm:6.5.95":
+  version: 6.5.95
+  resolution: "@mdi/js@npm:6.5.95"
+  checksum: b1db7713d216c119f584bf973514a2f9d8f2e671e91bf19ce8e56cfa7a9843c0a060328e794507ac31f2bded1032123294f39ff8e987ea5acb2719ab522ef146
   languageName: node
   linkType: hard
 
-"@mdi/svg@npm:6.4.95":
-  version: 6.4.95
-  resolution: "@mdi/svg@npm:6.4.95"
-  checksum: 118945d58484dfa686b3127fabbbbf8e20c20ce1989d158cd270e3da53e22fd30d3c285e3f5d0472f602a9842f2adb8321d853f85ff397ccf8bfefa846bd729e
+"@mdi/svg@npm:6.5.95":
+  version: 6.5.95
+  resolution: "@mdi/svg@npm:6.5.95"
+  checksum: 2d45221d042d52d54c85eaf672a5f3697ed5201607fa38a6e235ee2e60d1c3c25d456a284f19ce47b5f06418cacfee29e8fecf6580b8c28538fd26044becaf1a
   languageName: node
   linkType: hard
 
@@ -9037,8 +9037,8 @@ fsevents@^1.2.7:
     "@material/mwc-tab-bar": 0.25.3
     "@material/mwc-textfield": 0.25.3
     "@material/top-app-bar": 14.0.0-canary.261f2db59.0
-    "@mdi/js": 6.4.95
-    "@mdi/svg": 6.4.95
+    "@mdi/js": 6.5.95
+    "@mdi/svg": 6.5.95
     "@open-wc/dev-server-hmr": ^0.0.2
     "@polymer/app-layout": ^3.1.0
     "@polymer/iron-flex-layout": ^3.0.1
@@ -9113,7 +9113,7 @@ fsevents@^1.2.7:
     gulp-rename: ^2.0.0
     gulp-zopfli-green: ^3.0.1
     hls.js: ^1.0.11
-    home-assistant-js-websocket: ^5.11.1
+    home-assistant-js-websocket: ^5.11.3
     html-minifier: ^4.0.0
     husky: ^1.3.1
     idb-keyval: ^5.1.3
@@ -9139,6 +9139,7 @@ fsevents@^1.2.7:
     prettier: ^2.4.1
     proxy-polyfill: ^0.3.2
     punycode: ^2.1.1
+    qr-scanner: ^1.3.0
     qrcode: ^1.4.4
     regenerator-runtime: ^0.13.8
     require-dir: ^1.2.0
@@ -9183,10 +9184,10 @@ fsevents@^1.2.7:
   languageName: unknown
   linkType: soft
 
-"home-assistant-js-websocket@npm:^5.11.1":
-  version: 5.11.1
-  resolution: "home-assistant-js-websocket@npm:5.11.1"
-  checksum: 4b3f4310ea15f758a47082ddde06ed46eeddcae490a59a16dbcec4fb798507a5cc4761b9e880261aed9f83335475abea8356d5239c081774caa335e5e76fba50
+"home-assistant-js-websocket@npm:^5.11.3":
+  version: 5.11.3
+  resolution: "home-assistant-js-websocket@npm:5.11.3"
+  checksum: 3ab90e5105c5f379d77fb23ab53eaec2789be7bf1fd507a7520d9cf329d36942b8e978a591b822cff96100630d43bd036a4e25e2f49c40d0c56a111808fb90a5
   languageName: node
   linkType: hard
 
@@ -13007,6 +13008,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"qr-scanner@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "qr-scanner@npm:1.3.0"
+  checksum: 421ff00626252d0f9e50550fb550a463166e4d0438baffb469c9450079f1f802f6df22784509bb571ef50ece81aecaadc00f91d442959f37655ad29710c81c8b
+  languageName: node
+  linkType: hard
+
 "qrcode@npm:^1.4.4":
   version: 1.4.4
   resolution: "qrcode@npm:1.4.4"