diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts
index d11f3ba97a..03a0b23fec 100644
--- a/src/resources/compatibility.ts
+++ b/src/resources/compatibility.ts
@@ -13,6 +13,7 @@ import "@formatjs/intl-relativetimeformat/polyfill";
 import "@formatjs/intl-relativetimeformat/locale-data/en";
 import "@formatjs/intl-datetimeformat/polyfill";
 import "@formatjs/intl-datetimeformat/locale-data/en";
+import "@formatjs/intl-datetimeformat/add-all-tz";
 
 // To use comlink under ES5
 import "proxy-polyfill";
diff --git a/src/state/connection-mixin.ts b/src/state/connection-mixin.ts
index 10dba5a617..5c5f0b1468 100644
--- a/src/state/connection-mixin.ts
+++ b/src/state/connection-mixin.ts
@@ -179,7 +179,16 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
       });
 
       subscribeEntities(conn, (states) => this._updateHass({ states }));
-      subscribeConfig(conn, (config) => this._updateHass({ config }));
+      subscribeConfig(conn, (config) => {
+        if (
+          this.hass?.config?.time_zone !== config.time_zone &&
+          "__setDefaultTimeZone" in Intl.DateTimeFormat
+        ) {
+          // @ts-ignore
+          Intl.DateTimeFormat.__setDefaultTimeZone(config.time_zone);
+        }
+        this._updateHass({ config });
+      });
       subscribeServices(conn, (services) => this._updateHass({ services }));
       subscribePanels(conn, (panels) => this._updateHass({ panels }));
       subscribeFrontendUserData(conn, "core", (userData) =>