diff --git a/src/dialogs/more-info/const.ts b/src/dialogs/more-info/const.ts
index e75fd38516d8..6dcad0610812 100644
--- a/src/dialogs/more-info/const.ts
+++ b/src/dialogs/more-info/const.ts
@@ -31,6 +31,7 @@ export const DOMAINS_WITH_NEW_MORE_INFO = [
   "switch",
   "valve",
   "water_heater",
+  "weather",
 ];
 /** Domains with full height more info dialog */
 export const DOMAINS_FULL_HEIGHT_MORE_INFO = ["update"];
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index 6dfaeb3ed4df..b0ae0b1136f1 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -1,18 +1,13 @@
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
-import {
-  mdiEye,
-  mdiGauge,
-  mdiThermometer,
-  mdiWaterPercent,
-  mdiWeatherWindy,
-} from "@mdi/js";
+import { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { formatDateWeekdayDay } from "../../../common/datetime/format_date";
-import { formatTimeWeekday } from "../../../common/datetime/format_time";
+import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
+import { formatTime } from "../../../common/datetime/format_time";
+import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-svg-icon";
 import type {
   ForecastEvent,
@@ -23,11 +18,17 @@ import {
   getDefaultForecastType,
   getForecast,
   getSupportedForecastTypes,
+  getSecondaryWeatherAttribute,
+  getWeatherStateIcon,
+  getWeatherUnit,
   getWind,
   subscribeForecast,
-  weatherIcons,
+  weatherSVGStyles,
 } from "../../../data/weather";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-relative-time";
+import "../../../components/ha-state-icon";
+import "../../../components/ha-badge";
 
 @customElement("more-info-weather")
 class MoreInfoWeather extends LitElement {
@@ -133,66 +134,134 @@ class MoreInfoWeather extends LitElement {
       this.stateObj.attributes,
       this._forecastEvent
     );
-    const forecast = forecastData?.forecast;
+    const forecast = forecastData?.forecast.slice(0, 6);
     const hourly = forecastData?.type === "hourly";
     const dayNight = forecastData?.type === "twice_daily";
 
+    const weatherStateIcon = getWeatherStateIcon(this.stateObj.state, this);
+
     return html`
-      ${this._showValue(this.stateObj.attributes.temperature)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.temperature")}
-              </div>
-              <div>
-                ${this.hass.formatEntityAttributeValue(
-                  this.stateObj,
-                  "temperature"
-                )}
-              </div>
+      <div class="content">
+        <div class="icon-image">
+          ${weatherStateIcon ||
+          html`
+            <ha-state-icon
+              class="weather-icon"
+              .stateObj=${this.stateObj}
+              .hass=${this.hass}
+            ></ha-state-icon>
+          `}
+        </div>
+        <div class="info">
+          <div class="name-state">
+            <div class="state">
+              ${this.hass.formatEntityState(this.stateObj)}
             </div>
-          `
-        : ""}
-      ${this._showValue(this.stateObj.attributes.pressure)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiGauge}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.air_pressure")}
-              </div>
+            <div class="time-ago">
+              <ha-relative-time
+                id="last_changed"
+                .hass=${this.hass}
+                .datetime=${this.stateObj.last_changed}
+                capitalize
+              ></ha-relative-time>
+              <simple-tooltip animation-delay="0" for="last_changed">
+                <div>
+                  <div class="row">
+                    <span class="column-name">
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_changed"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_changed}
+                      capitalize
+                    ></ha-relative-time>
+                  </div>
+                  <div class="row">
+                    <span>
+                      ${this.hass.localize(
+                        "ui.dialogs.more_info_control.last_updated"
+                      )}:
+                    </span>
+                    <ha-relative-time
+                      .hass=${this.hass}
+                      .datetime=${this.stateObj.last_updated}
+                      capitalize
+                    ></ha-relative-time>
+                  </div>
+                </div>
+              </simple-tooltip>
+            </div>
+          </div>
+          <div class="temp-attribute">
+            <div class="temp">
+              ${this.stateObj.attributes.temperature !== undefined &&
+              this.stateObj.attributes.temperature !== null
+                ? html`
+                    ${formatNumber(
+                      this.stateObj.attributes.temperature,
+                      this.hass.locale
+                    )}&nbsp;<span
+                      >${getWeatherUnit(
+                        this.hass.config,
+                        this.stateObj,
+                        "temperature"
+                      )}</span
+                    >
+                  `
+                : html`&nbsp;`}
+            </div>
+            <div class="attribute">
+              ${getSecondaryWeatherAttribute(
+                this.hass,
+                this.stateObj,
+                forecast!
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="badges">
+        ${this._showValue(this.stateObj.attributes.pressure)
+          ? html` <ha-badge
+              label=${this.hass.localize(
+                "ui.card.weather.attributes.air_pressure"
+              )}
+            >
+              <ha-svg-icon slot="icon" .path=${mdiGauge}></ha-svg-icon>
               <div>
                 ${this.hass.formatEntityAttributeValue(
                   this.stateObj,
                   "pressure"
                 )}
               </div>
-            </div>
-          `
-        : ""}
-      ${this._showValue(this.stateObj.attributes.humidity)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiWaterPercent}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.humidity")}
-              </div>
-              <div>
-                ${this.hass.formatEntityAttributeValue(
-                  this.stateObj,
-                  "humidity"
+            </ha-badge>`
+          : ""}
+        ${this._showValue(this.stateObj.attributes.humidity)
+          ? html`
+              <ha-badge
+                label=${this.hass.localize(
+                  "ui.card.weather.attributes.humidity"
                 )}
-              </div>
-            </div>
-          `
-        : ""}
-      ${this._showValue(this.stateObj.attributes.wind_speed)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiWeatherWindy}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.wind_speed")}
-              </div>
+              >
+                <ha-svg-icon slot="icon" .path=${mdiWaterPercent}></ha-svg-icon>
+                <div>
+                  ${this.hass.formatEntityAttributeValue(
+                    this.stateObj,
+                    "humidity"
+                  )}
+                </div>
+              </ha-badge>
+            `
+          : ""}
+        ${this._showValue(this.stateObj.attributes.wind_speed)
+          ? html` <ha-badge
+              label=${this.hass.localize(
+                "ui.card.weather.attributes.wind_speed"
+              )}
+            >
+              <ha-svg-icon slot="icon" .path=${mdiWeatherWindy}></ha-svg-icon>
               <div>
                 ${getWind(
                   this.hass,
@@ -201,25 +270,24 @@ class MoreInfoWeather extends LitElement {
                   this.stateObj.attributes.wind_bearing
                 )}
               </div>
-            </div>
-          `
-        : ""}
-      ${this._showValue(this.stateObj.attributes.visibility)
-        ? html`
-            <div class="flex">
-              <ha-svg-icon .path=${mdiEye}></ha-svg-icon>
-              <div class="main">
-                ${this.hass.localize("ui.card.weather.attributes.visibility")}
-              </div>
+            </ha-badge>`
+          : ""}
+        ${this._showValue(this.stateObj.attributes.visibility)
+          ? html` <ha-badge
+              label=${this.hass.localize(
+                "ui.card.weather.attributes.visibility"
+              )}
+            >
+              <ha-svg-icon slot="icon" .path=${mdiEye}></ha-svg-icon>
               <div>
                 ${this.hass.formatEntityAttributeValue(
                   this.stateObj,
                   "visibility"
                 )}
               </div>
-            </div>
-          `
-        : ""}
+            </ha-badge>`
+          : ""}
+      </div>
       ${forecast
         ? html`
             <div class="section">
@@ -242,67 +310,81 @@ class MoreInfoWeather extends LitElement {
                   )}
                 </mwc-tab-bar>`
               : nothing}
-            ${forecast.map((item) =>
-              this._showValue(item.templow) || this._showValue(item.temperature)
-                ? html`<div class="flex">
-                    ${item.condition
-                      ? html`
-                          <ha-svg-icon
-                            .path=${weatherIcons[item.condition]}
-                          ></ha-svg-icon>
-                        `
-                      : ""}
-                    <div class="main">
-                      ${dayNight
-                        ? html`
-                            ${formatDateWeekdayDay(
-                              new Date(item.datetime),
-                              this.hass!.locale,
-                              this.hass!.config
-                            )}
-                            (${item.is_daytime !== false
-                              ? this.hass!.localize("ui.card.weather.day")
-                              : this.hass!.localize("ui.card.weather.night")})
-                          `
-                        : hourly
+            <div class="forecast">
+              ${forecast.map((item) =>
+                this._showValue(item.templow) ||
+                this._showValue(item.temperature)
+                  ? html`
+                      <div>
+                        <div>
+                          ${dayNight
+                            ? html`
+                                ${formatDateWeekdayShort(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                                <div class="daynight">
+                                  ${item.is_daytime !== false
+                                    ? this.hass!.localize("ui.card.weather.day")
+                                    : this.hass!.localize(
+                                        "ui.card.weather.night"
+                                      )}<br />
+                                </div>
+                              `
+                            : hourly
+                              ? html`
+                                  ${formatTime(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `
+                              : html`
+                                  ${formatDateWeekdayShort(
+                                    new Date(item.datetime),
+                                    this.hass!.locale,
+                                    this.hass!.config
+                                  )}
+                                `}
+                        </div>
+                        ${this._showValue(item.condition)
                           ? html`
-                              ${formatTimeWeekday(
-                                new Date(item.datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
+                              <div class="forecast-image-icon">
+                                ${getWeatherStateIcon(
+                                  item.condition!,
+                                  this,
+                                  !(
+                                    item.is_daytime ||
+                                    item.is_daytime === undefined
+                                  )
+                                )}
+                              </div>
                             `
-                          : html`
-                              ${formatDateWeekdayDay(
-                                new Date(item.datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
-                            `}
-                    </div>
-                    <div class="templow">
-                      ${this._showValue(item.templow)
-                        ? this.hass.formatEntityAttributeValue(
-                            this.stateObj!,
-                            "templow",
-                            item.templow
-                          )
-                        : hourly
-                          ? ""
-                          : "—"}
-                    </div>
-                    <div class="temp">
-                      ${this._showValue(item.temperature)
-                        ? this.hass.formatEntityAttributeValue(
-                            this.stateObj!,
-                            "temperature",
-                            item.temperature
-                          )
-                        : "—"}
-                    </div>
-                  </div>`
-                : ""
-            )}
+                          : ""}
+                        <div class="temp">
+                          ${this._showValue(item.temperature)
+                            ? html`${formatNumber(
+                                item.temperature,
+                                this.hass!.locale
+                              )}°`
+                            : "—"}
+                        </div>
+                        <div class="templow">
+                          ${this._showValue(item.templow)
+                            ? html`${formatNumber(
+                                item.templow!,
+                                this.hass!.locale
+                              )}°`
+                            : hourly
+                              ? ""
+                              : "—"}
+                        </div>
+                      </div>
+                    `
+                  : ""
+              )}
+            </div>
           `
         : ""}
       ${this.stateObj.attributes.attribution
@@ -322,56 +404,163 @@ class MoreInfoWeather extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      ha-svg-icon {
-        color: var(--paper-item-icon-color);
-        margin-left: 8px;
-        margin-inline-start: 8px;
-        margin-inline-end: initial;
-      }
+    return [
+      weatherSVGStyles,
+      css`
+        ha-svg-icon {
+          color: var(--paper-item-icon-color);
+        }
 
-      mwc-tab-bar {
-        margin-bottom: 4px;
-      }
+        mwc-tab-bar {
+          margin-bottom: 4px;
+        }
 
-      .section {
-        margin: 16px 0 8px 0;
-        font-size: 1.2em;
-      }
+        .section {
+          margin: 16px 0 8px 0;
+          font-size: 1.2em;
+        }
 
-      .flex {
-        display: flex;
-        height: 32px;
-        align-items: center;
-      }
-      .flex > div:last-child {
-        direction: ltr;
-      }
+        .badges {
+          display: flex;
+          justify-content: center;
+          flex-wrap: wrap;
+        }
 
-      .main {
-        flex: 1;
-        margin-left: 24px;
-        margin-inline-start: 24px;
-        margin-inline-end: initial;
-      }
+        .badges ha-badge {
+          margin: 8px 8px;
+        }
 
-      .temp,
-      .templow {
-        min-width: 48px;
-        text-align: right;
-        direction: ltr;
-      }
+        .attribution {
+          text-align: center;
+          margin-top: 16px;
+        }
 
-      .templow {
-        margin: 0 16px;
-        color: var(--secondary-text-color);
-      }
+        .time-ago,
+        .attribute {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
 
-      .attribution {
-        color: var(--secondary-text-color);
-        text-align: center;
-      }
-    `;
+        .attribution,
+        .templow,
+        .daynight,
+        .attribute,
+        .time-ago {
+          color: var(--secondary-text-color);
+        }
+
+        .content {
+          display: flex;
+          flex-wrap: nowrap;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 16px;
+        }
+
+        .icon-image {
+          display: flex;
+          align-items: center;
+          min-width: 64px;
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+        }
+
+        .icon-image > * {
+          flex: 0 0 64px;
+          height: 64px;
+        }
+
+        .weather-icon {
+          --mdc-icon-size: 64px;
+        }
+
+        .info {
+          display: flex;
+          justify-content: space-between;
+          flex-grow: 1;
+          overflow: hidden;
+        }
+
+        .temp-attribute {
+          text-align: var(--float-end);
+        }
+
+        .temp-attribute .temp {
+          position: relative;
+          margin-right: 24px;
+          direction: ltr;
+        }
+
+        .temp-attribute .temp span {
+          position: absolute;
+          font-size: 24px;
+          top: 1px;
+        }
+
+        .state,
+        .temp-attribute .temp {
+          font-size: 28px;
+          line-height: 1.2;
+        }
+
+        .attribute {
+          font-size: 14px;
+          line-height: 1;
+        }
+
+        .name-state {
+          overflow: hidden;
+          padding-right: 12px;
+          padding-inline-end: 12px;
+          padding-inline-start: initial;
+          width: 100%;
+        }
+
+        .state {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .forecast {
+          display: flex;
+          justify-content: space-around;
+          padding-top: 16px;
+        }
+
+        .forecast > div {
+          text-align: center;
+        }
+
+        .forecast .icon,
+        .forecast .temp {
+          margin: 4px 0;
+        }
+
+        .forecast .temp {
+          font-size: 16px;
+        }
+
+        .forecast-image-icon {
+          padding-top: 4px;
+          padding-bottom: 4px;
+          display: flex;
+          justify-content: center;
+        }
+
+        .forecast-image-icon > * {
+          width: 40px;
+          height: 40px;
+          --mdc-icon-size: 40px;
+        }
+
+        .forecast-icon {
+          --mdc-icon-size: 40px;
+        }
+      `,
+    ];
   }
 
   private _showValue(item: number | string | undefined): boolean {