diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 747778befc..eca00a476d 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -1,7 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import "../../components/ha-alert";
@@ -11,13 +10,9 @@ import "../../components/ha-top-app-bar-fixed";
 import type { EnergyPreferences } from "../../data/energy";
 import { getEnergyDataCollection } from "../../data/energy";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
-import {
-  isStrategyView,
-  type LovelaceViewConfig,
-} from "../../data/lovelace/config/view";
+import type { LovelaceViewConfig } from "../../data/lovelace/config/view";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
-import "../lovelace/components/hui-energy-period-selector";
 import "../lovelace/hui-root";
 import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
@@ -37,7 +32,6 @@ const OVERVIEW_VIEW = {
   strategy: {
     type: "energy-overview",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
-    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -46,7 +40,6 @@ const ENERGY_VIEW = {
   strategy: {
     type: "energy",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
-    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -55,7 +48,6 @@ const WATER_VIEW = {
   strategy: {
     type: "water",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
-    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -64,7 +56,6 @@ const GAS_VIEW = {
   strategy: {
     type: "gas",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
-    show_period_selector: true,
   },
 } as LovelaceViewConfig;
 
@@ -210,16 +201,6 @@ class PanelEnergy extends LitElement {
       return nothing;
     }
 
-    const routePath = this.route?.path?.split("/")[1] || "";
-    const currentView = this._lovelace.config.views.find(
-      (view) => view.path === routePath
-    );
-
-    const showEnergySelector =
-      currentView &&
-      isStrategyView(currentView) &&
-      currentView.strategy?.show_period_selector;
-
     return html`
       <hui-root
         .hass=${this.hass}
@@ -230,22 +211,8 @@ class PanelEnergy extends LitElement {
         .backButton=${this._searchParms.has("historyBack")}
         .backPath=${this._searchParms.get("backPath") || "/"}
         @reload-energy-panel=${this._reloadConfig}
-        class=${classMap({ "has-period-selector": showEnergySelector })}
       >
       </hui-root>
-      ${showEnergySelector
-        ? html`
-            <ha-card class="period-selector">
-              <hui-energy-period-selector
-                .hass=${this.hass}
-                .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
-                opening-direction="right"
-                vertical-opening-direction="up"
-                fixed
-              ></hui-energy-period-selector>
-            </ha-card>
-          `
-        : nothing}
     `;
   }
 
@@ -356,50 +323,6 @@ class PanelEnergy extends LitElement {
           align-items: center;
           justify-content: center;
         }
-        hui-root.has-period-selector {
-          --view-container-padding-bottom: var(--ha-space-18);
-        }
-        .period-selector {
-          position: fixed;
-          z-index: 4;
-          bottom: max(var(--ha-space-4), var(--safe-area-inset-bottom, 0px));
-          left: max(
-            var(--mdc-drawer-width, 0px),
-            var(--safe-area-inset-left, 0px)
-          );
-          right: var(--safe-area-inset-right, 0);
-          inset-inline-start: max(
-            var(--mdc-drawer-width, 0px),
-            var(--safe-area-inset-left, 0px)
-          );
-          inset-inline-end: var(--safe-area-inset-right, 0);
-          transition:
-            left var(--ha-animation-duration-normal) ease,
-            right var(--ha-animation-duration-normal) ease,
-            inset-inline-start var(--ha-animation-duration-normal) ease,
-            inset-inline-end var(--ha-animation-duration-normal) ease;
-          margin: 0 auto;
-          max-width: calc(min(470px, 100% - var(--ha-space-4)));
-          box-sizing: border-box;
-          padding-left: var(--ha-space-2);
-          padding-right: 0;
-          padding-inline-start: var(--ha-space-4);
-          padding-inline-end: 0;
-          --ha-card-box-shadow:
-            0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-            0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-            0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-          --ha-card-border-color: var(--divider-color);
-          --ha-card-border-width: var(--ha-card-border-width, 1px);
-        }
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          hui-root.has-period-selector {
-            --view-container-padding-bottom: var(--ha-space-14);
-          }
-          .period-selector {
-            bottom: max(var(--ha-space-2), var(--safe-area-inset-bottom, 0px));
-          }
-        }
       `,
     ];
   }
diff --git a/src/panels/energy/strategies/energy-overview-view-strategy.ts b/src/panels/energy/strategies/energy-overview-view-strategy.ts
index ff4be6179f..74e4d7aa76 100644
--- a/src/panels/energy/strategies/energy-overview-view-strategy.ts
+++ b/src/panels/energy/strategies/energy-overview-view-strategy.ts
@@ -13,16 +13,23 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
     const view: LovelaceViewConfig = {
       type: "sections",
       sections: [],
       dense_section_placement: true,
-      max_columns: 2,
+      max_columns: 3,
+      footer: {
+        column_span: 1.1,
+        card: {
+          type: "energy-date-selection",
+          collection_key: collectionKey,
+        },
+      },
     };
 
-    const collectionKey =
-      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
-
     const energyCollection = getEnergyDataCollection(hass, {
       key: collectionKey,
     });
diff --git a/src/panels/energy/strategies/energy-view-strategy.ts b/src/panels/energy/strategies/energy-view-strategy.ts
index a602534f75..5b518c34bc 100644
--- a/src/panels/energy/strategies/energy-view-strategy.ts
+++ b/src/panels/energy/strategies/energy-view-strategy.ts
@@ -2,6 +2,7 @@ import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
 import { getEnergyDataCollection } from "../../../data/energy";
+import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
@@ -14,11 +15,22 @@ export class EnergyViewStrategy extends ReactiveElement {
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = { cards: [] };
-
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      max_columns: 3,
+      sections: [],
+      footer: {
+        column_span: 1.1,
+        card: {
+          type: "energy-date-selection",
+          collection_key: collectionKey,
+        },
+      },
+    };
+
     const energyCollection = getEnergyDataCollection(hass, {
       key: collectionKey,
     });
@@ -36,8 +48,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       return view;
     }
 
-    view.type = "sidebar";
-
     const hasGrid = prefs.energy_sources.find(
       (source): source is GridSourceTypeEnergyPreference =>
         source.type === "grid" &&
@@ -50,83 +60,95 @@ export class EnergyViewStrategy extends ReactiveElement {
     const hasBattery = prefs.energy_sources.some(
       (source) => source.type === "battery"
     );
-    view.cards!.push({
+
+    const mainCards: LovelaceCardConfig[] = [];
+    const gaugeCards: LovelaceCardConfig[] = [];
+
+    // Only include if we have a grid source & return.
+    if (hasReturn) {
+      const card = {
+        type: "energy-grid-neutrality-gauge",
+        collection_key: collectionKey,
+      };
+      gaugeCards.push(card);
+    }
+
+    // Only include if we have a solar source.
+    if (hasSolar) {
+      if (hasReturn) {
+        const card = {
+          type: "energy-solar-consumed-gauge",
+          collection_key: collectionKey,
+        };
+        gaugeCards.push(card);
+      }
+      if (hasGrid) {
+        const card = {
+          type: "energy-self-sufficiency-gauge",
+          collection_key: collectionKey,
+        };
+        gaugeCards.push(card);
+      }
+    }
+
+    // Only include if we have a grid
+    if (hasGrid) {
+      const card = {
+        type: "energy-carbon-consumed-gauge",
+        collection_key: collectionKey,
+      };
+      gaugeCards.push(card);
+    }
+
+    if (gaugeCards.length) {
+      view.sections!.push({
+        type: "grid",
+        column_span: 3,
+        cards:
+          gaugeCards.length === 1
+            ? [gaugeCards[0]]
+            : gaugeCards.map((card) => ({
+                ...card,
+                grid_options: { columns: 6 },
+              })),
+      });
+    }
+
+    mainCards.push({
       type: "energy-compare",
       collection_key: collectionKey,
+      grid_options: { columns: 36 },
     });
 
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
-      view.cards!.push({
+      mainCards.push({
         title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
         type: "energy-usage-graph",
         collection_key: collectionKey,
+        grid_options: { columns: 36 },
       });
     }
 
     // Only include if we have a solar source.
     if (hasSolar) {
-      view.cards!.push({
+      mainCards.push({
         title: hass.localize("ui.panel.energy.cards.energy_solar_graph_title"),
         type: "energy-solar-graph",
         collection_key: collectionKey,
-      });
-    }
-
-    // Only include if we have a grid or battery.
-    if (hasGrid || hasBattery) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
-        type: "energy-distribution",
-        view_layout: { position: "sidebar" },
-        collection_key: collectionKey,
+        grid_options: { columns: 36 },
       });
     }
 
     if (hasGrid || hasSolar || hasBattery) {
-      view.cards!.push({
+      mainCards.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
         ),
         type: "energy-sources-table",
         collection_key: collectionKey,
         types: ["grid", "solar", "battery"],
-      });
-    }
-
-    // Only include if we have a grid source & return.
-    if (hasReturn) {
-      view.cards!.push({
-        type: "energy-grid-neutrality-gauge",
-        view_layout: { position: "sidebar" },
-        collection_key: collectionKey,
-      });
-    }
-
-    // Only include if we have a solar source.
-    if (hasSolar) {
-      if (hasReturn) {
-        view.cards!.push({
-          type: "energy-solar-consumed-gauge",
-          view_layout: { position: "sidebar" },
-          collection_key: collectionKey,
-        });
-      }
-      if (hasGrid) {
-        view.cards!.push({
-          type: "energy-self-sufficiency-gauge",
-          view_layout: { position: "sidebar" },
-          collection_key: collectionKey,
-        });
-      }
-    }
-
-    // Only include if we have a grid
-    if (hasGrid) {
-      view.cards!.push({
-        type: "energy-carbon-consumed-gauge",
-        view_layout: { position: "sidebar" },
-        collection_key: collectionKey,
+        grid_options: { columns: 36 },
       });
     }
 
@@ -137,29 +159,38 @@ export class EnergyViewStrategy extends ReactiveElement {
         hass,
         (d) => d.stat_consumption
       );
-      view.cards!.push({
+      mainCards.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_devices_detail_graph_title"
         ),
         type: "energy-devices-detail-graph",
         collection_key: collectionKey,
+        grid_options: { columns: 36 },
       });
-      view.cards!.push({
+      mainCards.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_devices_graph_title"
         ),
         type: "energy-devices-graph",
         collection_key: collectionKey,
+        grid_options: { columns: 36 },
       });
-      view.cards!.push({
+      mainCards.push({
         title: hass.localize("ui.panel.energy.cards.energy_sankey_title"),
         type: "energy-sankey",
         collection_key: collectionKey,
         group_by_floor: showFloorsAndAreas,
         group_by_area: showFloorsAndAreas,
+        grid_options: { columns: 36 },
       });
     }
 
+    view.sections!.push({
+      type: "grid",
+      column_span: 3,
+      cards: mainCards,
+    });
+
     return view;
   }
 }
diff --git a/src/panels/energy/strategies/gas-view-strategy.ts b/src/panels/energy/strategies/gas-view-strategy.ts
index 754018170d..1c97b5a677 100644
--- a/src/panels/energy/strategies/gas-view-strategy.ts
+++ b/src/panels/energy/strategies/gas-view-strategy.ts
@@ -13,14 +13,22 @@ export class GasViewStrategy extends ReactiveElement {
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = {
-      type: "sections",
-      sections: [{ type: "grid", cards: [] }],
-    };
-
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      max_columns: 3,
+      sections: [{ type: "grid", cards: [], column_span: 3 }],
+      footer: {
+        column_span: 1.1,
+        card: {
+          type: "energy-date-selection",
+          collection_key: collectionKey,
+        },
+      },
+    };
+
     const energyCollection = getEnergyDataCollection(hass, {
       key: collectionKey,
     });
@@ -49,6 +57,9 @@ export class GasViewStrategy extends ReactiveElement {
       title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
       type: "energy-gas-graph",
       collection_key: collectionKey,
+      grid_options: {
+        columns: 24,
+      },
     });
 
     section.cards!.push({
@@ -56,6 +67,9 @@ export class GasViewStrategy extends ReactiveElement {
       type: "energy-sources-table",
       collection_key: collectionKey,
       types: ["gas"],
+      grid_options: {
+        columns: 12,
+      },
     });
 
     return view;
diff --git a/src/panels/energy/strategies/water-view-strategy.ts b/src/panels/energy/strategies/water-view-strategy.ts
index 058a5e01a4..7579e169d3 100644
--- a/src/panels/energy/strategies/water-view-strategy.ts
+++ b/src/panels/energy/strategies/water-view-strategy.ts
@@ -14,14 +14,22 @@ export class WaterViewStrategy extends ReactiveElement {
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = {
-      type: "sections",
-      sections: [{ type: "grid", cards: [] }],
-    };
-
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      max_columns: 3,
+      sections: [{ type: "grid", cards: [], column_span: 3 }],
+      footer: {
+        column_span: 1.1,
+        card: {
+          type: "energy-date-selection",
+          collection_key: collectionKey,
+        },
+      },
+    };
+
     const energyCollection = getEnergyDataCollection(hass, {
       key: collectionKey,
     });
@@ -52,6 +60,9 @@ export class WaterViewStrategy extends ReactiveElement {
         title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
         type: "energy-water-graph",
         collection_key: collectionKey,
+        grid_options: {
+          columns: 24,
+        },
       });
       section.cards!.push({
         title: hass.localize(
@@ -60,6 +71,9 @@ export class WaterViewStrategy extends ReactiveElement {
         type: "energy-sources-table",
         collection_key: collectionKey,
         types: ["water"],
+        grid_options: {
+          columns: 12,
+        },
       });
     }
 
@@ -76,6 +90,9 @@ export class WaterViewStrategy extends ReactiveElement {
         collection_key: collectionKey,
         group_by_floor: showFloorsAndAreas,
         group_by_area: showFloorsAndAreas,
+        grid_options: {
+          columns: 24,
+        },
       });
     }
 
diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts
index 4580a9550e..ce45c682ec 100644
--- a/src/panels/lovelace/components/hui-energy-period-selector.ts
+++ b/src/panels/lovelace/components/hui-energy-period-selector.ts
@@ -125,7 +125,7 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) {
   }
 
   private _measure() {
-    this.narrow = this.offsetWidth < 450;
+    this.narrow = this.offsetWidth < 425;
     this._collapseButtons = this.offsetWidth < 320;
   }
 
diff --git a/src/panels/lovelace/views/hui-view-footer.ts b/src/panels/lovelace/views/hui-view-footer.ts
index 952c702355..02d2a447dc 100644
--- a/src/panels/lovelace/views/hui-view-footer.ts
+++ b/src/panels/lovelace/views/hui-view-footer.ts
@@ -241,8 +241,9 @@ export class HuiViewFooter extends LitElement {
       box-sizing: content-box;
       margin: 0 auto;
       max-width: calc(
-        var(--footer-column-span, 1) * var(--column-max-width, 500px) +
-          (var(--footer-column-span, 1) - 1) * var(--column-gap, 32px)
+        var(--footer-column-span, 1) / var(--column-count, 1) * 100% +
+          (var(--footer-column-span, 1) - var(--column-count, 1)) /
+          var(--column-count, 1) * var(--column-gap, 32px)
       );
     }