diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 0a7a8eeefaa8..d058e8685e4d 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -4,11 +4,12 @@ import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiCalendar } from "@mdi/js";
 import {
-  addDays,
+  subHours,
   endOfDay,
   endOfMonth,
   endOfWeek,
   endOfYear,
+  subDays,
   startOfDay,
   startOfMonth,
   startOfWeek,
@@ -112,28 +113,8 @@ export class HaDateRangePicker extends LitElement {
             weekStartsOn,
           }),
         ],
-        [this.hass.localize(
-          "ui.components.date-range-picker.ranges.yesterday"
-        )]: [
-          calcDate(
-            addDays(today, -1),
-            startOfDay,
-            this.hass.locale,
-            this.hass.config,
-            {
-              weekStartsOn,
-            }
-          ),
-          calcDate(
-            addDays(today, -1),
-            endOfDay,
-            this.hass.locale,
-            this.hass.config,
-            {
-              weekStartsOn,
-            }
-          ),
-        ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-24h")]:
+          [subHours(today, 24), today],
         [this.hass.localize(
           "ui.components.date-range-picker.ranges.this_week"
         )]: [weekStart, weekEnd],
@@ -161,6 +142,9 @@ export class HaDateRangePicker extends LitElement {
                   }
                 ),
               ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-30d"
+              )]: [subHours(today, 24 * 30), today],
               [this.hass.localize(
                 "ui.components.date-range-picker.ranges.this_year"
               )]: [
@@ -177,6 +161,9 @@ export class HaDateRangePicker extends LitElement {
                   weekStartsOn,
                 }),
               ],
+              [this.hass.localize(
+                "ui.components.date-range-picker.ranges.now-365d"
+              )]: [subDays(today, 365), today],
             }
           : {}),
       };
@@ -362,7 +349,6 @@ export class HaDateRangePicker extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-
       ha-icon-button {
         direction: var(--direction);
       }
@@ -389,16 +375,23 @@ export class HaDateRangePicker extends LitElement {
         width: 340px;
       }
       @media only screen and (max-width: 460px) {
-      ha-textarea {
-        width: 100%
+        ha-textarea {
+          width: 100%;
+        }
       }
-
       @media only screen and (max-width: 800px) {
         .date-range-ranges {
           border-right: none;
           border-bottom: 1px solid var(--divider-color);
         }
       }
+
+      @media only screen and (max-height: 920px) and (max-width: 800px) {
+        .date-range-ranges {
+          overflow: scroll;
+          max-height: calc(70vh - 350px);
+        }
+      }
     `;
   }
 }
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index d7419f7db888..3b4f43b31b83 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -18,6 +18,7 @@ import {
   startOfWeek,
   startOfYear,
   subDays,
+  subHours,
 } from "date-fns";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues } from "lit";
@@ -129,6 +130,8 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
             weekStartsOn,
           }),
         ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-24h")]:
+          [subHours(today, 24), today],
         [this.hass.localize(
           "ui.components.date-range-picker.ranges.yesterday"
         )]: [
@@ -173,12 +176,16 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
           calcDate(today, startOfQuarter, this.hass.locale, this.hass.config),
           calcDate(today, endOfQuarter, this.hass.locale, this.hass.config),
         ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-30d")]:
+          [subHours(today, 24 * 30), today],
         [this.hass.localize(
           "ui.components.date-range-picker.ranges.this_year"
         )]: [
           calcDate(today, startOfYear, this.hass.locale, this.hass.config),
           calcDate(today, endOfYear, this.hass.locale, this.hass.config),
         ],
+        [this.hass.localize("ui.components.date-range-picker.ranges.now-365d")]:
+          [subDays(today, 365), today],
       };
     }
   }
diff --git a/src/translations/en.json b/src/translations/en.json
index 6dcb8c2ecfb5..cc7dca1f7673 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -808,10 +808,13 @@
         "ranges": {
           "today": "Today",
           "yesterday": "Yesterday",
+          "now-24h": "Last 24 hours",
           "this_week": "This week",
           "this_quarter": "This quarter",
           "this_month": "This month",
-          "this_year": "This year"
+          "now-30d": "Last 30 days",
+          "this_year": "This year",
+          "now-365d": "Last 365 days"
         }
       },
       "grid-size-picker": {