diff --git a/src/data/weather.ts b/src/data/weather.ts
index be668288d1..e3ef7fa9ec 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -436,3 +436,19 @@ export const getWeatherStateIcon = (
 
   return undefined;
 };
+
+const DAY_IN_MILLISECONDS = 86400000;
+
+export const isForecastHourly = (
+  forecast?: ForecastAttribute[]
+): boolean | undefined => {
+  if (forecast && forecast?.length && forecast?.length > 2) {
+    const date1 = new Date(forecast[1].datetime);
+    const date2 = new Date(forecast[2].datetime);
+    const timeDiff = date2.getTime() - date1.getTime();
+
+    return timeDiff < DAY_IN_MILLISECONDS;
+  }
+
+  return undefined;
+};
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index f34308ff61..8d401f4cd7 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -33,7 +33,11 @@ import { formatDateWeekday } from "../../../common/datetime/format_date";
 import { formatTimeWeekday } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
 import "../../../components/ha-svg-icon";
-import { getWeatherUnit, getWind } from "../../../data/weather";
+import {
+  getWeatherUnit,
+  getWind,
+  isForecastHourly,
+} from "../../../data/weather";
 import { HomeAssistant } from "../../../types";
 
 const weatherIcons = {
@@ -82,6 +86,8 @@ class MoreInfoWeather extends LitElement {
       return html``;
     }
 
+    const hourly = isForecastHourly(this.stateObj.attributes.forecast);
+
     return html`
       <div class="flex">
         <ha-svg-icon .path=${mdiThermometer}></ha-svg-icon>
@@ -169,48 +175,49 @@ class MoreInfoWeather extends LitElement {
             <div class="section">
               ${this.hass.localize("ui.card.weather.forecast")}:
             </div>
-            ${this.stateObj.attributes.forecast.map(
-              (item) => html`
-                <div class="flex">
-                  ${item.condition
-                    ? html`
-                        <ha-svg-icon
-                          .path=${weatherIcons[item.condition]}
-                        ></ha-svg-icon>
-                      `
-                    : ""}
-                  ${!this._showValue(item.templow)
-                    ? html`
-                        <div class="main">
-                          ${formatTimeWeekday(
-                            new Date(item.datetime),
-                            this.hass.locale
-                          )}
-                        </div>
-                      `
-                    : ""}
-                  ${this._showValue(item.templow)
-                    ? html`
-                        <div class="main">
-                          ${formatDateWeekday(
-                            new Date(item.datetime),
-                            this.hass.locale
-                          )}
-                        </div>
-                        <div class="templow">
-                          ${formatNumber(item.templow, this.hass.locale)}
-                          ${getWeatherUnit(this.hass, "temperature")}
-                        </div>
-                      `
-                    : ""}
-                  <div class="temp">
-                    ${this._showValue(item.temperature)
-                      ? `${formatNumber(item.temperature, this.hass.locale)}
-                    ${getWeatherUnit(this.hass, "temperature")}`
+            ${this.stateObj.attributes.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>
-                </div>
-              `
+                    ${hourly
+                      ? html`
+                          <div class="main">
+                            ${formatTimeWeekday(
+                              new Date(item.datetime),
+                              this.hass.locale
+                            )}
+                          </div>
+                        `
+                      : html`
+                          <div class="main">
+                            ${formatDateWeekday(
+                              new Date(item.datetime),
+                              this.hass.locale
+                            )}
+                          </div>
+                        `}
+                    <div class="templow">
+                      ${this._showValue(item.templow)
+                        ? `${formatNumber(item.templow, this.hass.locale)}
+                          ${getWeatherUnit(this.hass, "temperature")}`
+                        : hourly
+                        ? ""
+                        : "—"}
+                    </div>
+                    <div class="temp">
+                      ${this._showValue(item.temperature)
+                        ? `${formatNumber(item.temperature, this.hass.locale)}
+                        ${getWeatherUnit(this.hass, "temperature")}`
+                        : "—"}
+                    </div>
+                  </div>`
+                : ""
             )}
           `
         : ""}
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 0d599a383a..7ec93b41e7 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -24,6 +24,7 @@ import {
   getWeatherStateIcon,
   getWeatherUnit,
   getWind,
+  isForecastHourly,
   weatherAttrIcons,
   WeatherEntity,
   weatherSVGStyles,
@@ -177,23 +178,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         : undefined;
     const weather = !forecast || this._config?.show_current !== false;
 
-    let hourly: boolean | undefined;
+    const hourly = isForecastHourly(forecast);
     let dayNight: boolean | undefined;
 
-    if (forecast?.length && forecast?.length > 2) {
-      const date1 = new Date(forecast[1].datetime);
-      const date2 = new Date(forecast[2].datetime);
-      const timeDiff = date2.getTime() - date1.getTime();
+    if (hourly) {
+      const dateFirst = new Date(forecast![0].datetime);
+      const datelast = new Date(forecast![forecast!.length - 1].datetime);
+      const dayDiff = datelast.getTime() - dateFirst.getTime();
 
-      hourly = timeDiff < DAY_IN_MILLISECONDS;
-
-      if (hourly) {
-        const dateFirst = new Date(forecast[0].datetime);
-        const datelast = new Date(forecast[forecast.length - 1].datetime);
-        const dayDiff = datelast.getTime() - dateFirst.getTime();
-
-        dayNight = dayDiff > DAY_IN_MILLISECONDS;
-      }
+      dayNight = dayDiff > DAY_IN_MILLISECONDS;
     }
 
     const weatherStateIcon = getWeatherStateIcon(stateObj.state, this);
@@ -288,69 +281,76 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         ${forecast
           ? html`
               <div class="forecast">
-                ${forecast.map(
-                  (item) => html`
-                    <div>
-                      <div>
-                        ${dayNight
-                          ? html`
-                              ${new Date(item.datetime).toLocaleDateString(
-                                this.hass!.language,
-                                { weekday: "short" }
-                              )}
-                              <div class="daynight">
-                                ${item.daytime === undefined || item.daytime
-                                  ? 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
-                              )}
-                            `
-                          : html`
-                              ${new Date(item.datetime).toLocaleDateString(
-                                this.hass!.language,
-                                { weekday: "short" }
-                              )}
-                            `}
-                      </div>
-                      ${item.condition !== undefined && item.condition !== null
-                        ? html`
-                            <div class="forecast-image-icon">
-                              ${getWeatherStateIcon(
-                                item.condition,
-                                this,
-                                !(item.daytime || item.daytime === undefined)
-                              )}
-                            </div>
-                          `
-                        : ""}
-                      ${item.temperature !== undefined &&
-                      item.temperature !== null
-                        ? html`
-                            <div class="temp">
-                              ${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°
-                            </div>
-                          `
-                        : ""}
-                      ${item.templow !== undefined && item.templow !== null
-                        ? html`
-                            <div class="templow">
-                              ${formatNumber(item.templow, this.hass!.locale)}°
-                            </div>
-                          `
-                        : ""}
-                    </div>
-                  `
+                ${forecast.map((item) =>
+                  this._showValue(item.templow) ||
+                  this._showValue(item.temperature)
+                    ? html`
+                        <div>
+                          <div>
+                            ${dayNight
+                              ? html`
+                                  ${new Date(item.datetime).toLocaleDateString(
+                                    this.hass!.language,
+                                    { weekday: "short" }
+                                  )}
+                                  <div class="daynight">
+                                    ${item.daytime === undefined || item.daytime
+                                      ? 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
+                                  )}
+                                `
+                              : html`
+                                  ${new Date(item.datetime).toLocaleDateString(
+                                    this.hass!.language,
+                                    { weekday: "short" }
+                                  )}
+                                `}
+                          </div>
+                          ${this._showValue(item.condition)
+                            ? html`
+                                <div class="forecast-image-icon">
+                                  ${getWeatherStateIcon(
+                                    item.condition!,
+                                    this,
+                                    !(
+                                      item.daytime || item.daytime === undefined
+                                    )
+                                  )}
+                                </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>
             `
@@ -402,6 +402,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._veryVeryNarrow = card.offsetWidth < 245;
   }
 
+  private _showValue(item?: any): boolean {
+    return typeof item !== "undefined" && item !== null;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       weatherSVGStyles,