diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 0868e12f62..1f6772cdb6 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -40,7 +40,7 @@ const OVERVIEW_VIEW = {
     type: "energy-overview",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
-};
+} as LovelaceViewConfig;
 
 const ELECTRICITY_VIEW = {
   back_path: "/energy",
@@ -51,6 +51,15 @@ const ELECTRICITY_VIEW = {
   },
 } as LovelaceViewConfig;
 
+const WATER_VIEW = {
+  back_path: "/energy",
+  path: "water",
+  strategy: {
+    type: "energy-water",
+    collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
+  },
+} as LovelaceViewConfig;
+
 const WIZARD_VIEW = {
   type: "panel",
   path: "setup",
@@ -248,9 +257,16 @@ class PanelEnergy extends LitElement {
         views: [ELECTRICITY_VIEW],
       };
     }
-    return {
-      views: [OVERVIEW_VIEW, ELECTRICITY_VIEW],
-    };
+
+    const hasWater =
+      prefs.energy_sources.some((source) => source.type === "water") ||
+      prefs.device_consumption_water?.length > 0;
+
+    const views: LovelaceViewConfig[] = [OVERVIEW_VIEW, ELECTRICITY_VIEW];
+    if (hasWater) {
+      views.push(WATER_VIEW);
+    }
+    return { views };
   }
 
   private _setLovelace() {
diff --git a/src/panels/energy/strategies/energy-overview-view-strategy.ts b/src/panels/energy/strategies/energy-overview-view-strategy.ts
index 0b892a5a70..ba734cc0b9 100644
--- a/src/panels/energy/strategies/energy-overview-view-strategy.ts
+++ b/src/panels/energy/strategies/energy-overview-view-strategy.ts
@@ -210,6 +210,10 @@ export class EnergyViewStrategy extends ReactiveElement {
           {
             type: "heading",
             heading: hass.localize("ui.panel.energy.overview.water"),
+            tap_action: {
+              action: "navigate",
+              navigation_path: "/energy/water",
+            },
           },
           {
             title: hass.localize(
diff --git a/src/panels/energy/strategies/energy-water-view-strategy.ts b/src/panels/energy/strategies/energy-water-view-strategy.ts
new file mode 100644
index 0000000000..5828bf2704
--- /dev/null
+++ b/src/panels/energy/strategies/energy-water-view-strategy.ts
@@ -0,0 +1,86 @@
+import { ReactiveElement } from "lit";
+import { customElement } from "lit/decorators";
+import { getEnergyDataCollection } from "../../../data/energy";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
+
+@customElement("energy-water-view-strategy")
+export class EnergyWaterViewStrategy extends ReactiveElement {
+  static async generate(
+    _config: LovelaceStrategyConfig,
+    hass: HomeAssistant
+  ): Promise<LovelaceViewConfig> {
+    const view: LovelaceViewConfig = { cards: [] };
+
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+
+    const energyCollection = getEnergyDataCollection(hass, {
+      key: collectionKey,
+    });
+    const prefs = energyCollection.prefs;
+
+    // No water sources available
+    if (
+      !prefs ||
+      (!prefs.device_consumption_water?.length &&
+        !prefs.energy_sources.some((source) => source.type === "water"))
+    ) {
+      return view;
+    }
+
+    view.type = "sidebar";
+
+    const hasWater = prefs.energy_sources.some(
+      (source) => source.type === "water"
+    );
+
+    view.cards!.push({
+      type: "energy-compare",
+      collection_key: collectionKey,
+    });
+
+    if (hasWater) {
+      view.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
+        type: "energy-water-graph",
+        collection_key: collectionKey,
+      });
+    }
+
+    if (hasWater) {
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_sources_table_title"
+        ),
+        type: "energy-sources-table",
+        collection_key: collectionKey,
+        types: ["water"],
+      });
+    }
+
+    // Only include if we have at least 1 water device in the config.
+    if (prefs.device_consumption_water?.length) {
+      const showFloorsNAreas = !prefs.device_consumption_water.some(
+        (d) => d.included_in_stat
+      );
+      view.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.water_sankey_title"),
+        type: "water-sankey",
+        collection_key: collectionKey,
+        group_by_floor: showFloorsNAreas,
+        group_by_area: showFloorsNAreas,
+      });
+    }
+
+    return view;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "energy-water-view-strategy": EnergyWaterViewStrategy;
+  }
+}
diff --git a/src/panels/lovelace/strategies/get-strategy.ts b/src/panels/lovelace/strategies/get-strategy.ts
index 4c69616014..790eb2b069 100644
--- a/src/panels/lovelace/strategies/get-strategy.ts
+++ b/src/panels/lovelace/strategies/get-strategy.ts
@@ -42,6 +42,8 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
       import("../../energy/strategies/energy-overview-view-strategy"),
     "energy-electricity": () =>
       import("../../energy/strategies/energy-electricity-view-strategy"),
+    "energy-water": () =>
+      import("../../energy/strategies/energy-water-view-strategy"),
     map: () => import("./map/map-view-strategy"),
     iframe: () => import("./iframe/iframe-view-strategy"),
     area: () => import("./areas/area-view-strategy"),