diff --git a/packages/modules/web_themes/koala/source/public/icons/icon_Data.md b/packages/modules/web_themes/koala/source/src/assets/icons/icon_Data.md
similarity index 100%
rename from packages/modules/web_themes/koala/source/public/icons/icon_Data.md
rename to packages/modules/web_themes/koala/source/src/assets/icons/icon_Data.md
diff --git a/packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg b/packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg
new file mode 100644
index 0000000000..ee05b02183
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/assets/icons/owbConsumer.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M682.666667 298.666667V128h-85.333334v170.666667h-170.666666V128H341.333333v170.666667C298.666667 298.666667 256 341.333333 256 384v234.666667L405.333333 768v128h213.333334v-128l149.333333-149.333333V384c0-42.666667-42.666667-85.333333-85.333333-85.333333z" /></svg>
diff --git a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
index 2276377097..afd4b88abc 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConsumerCard.vue
@@ -1,6 +1,6 @@
 <template>
   <q-card
-    class="card-width"
+    class="consumer-card"
     :class="{ 'full-height': props.fullHeight }"
   >
     <q-card-section class="row no-wrap items-center justify-between">
@@ -144,14 +144,19 @@ const onOff = computed({
     consumerMode.value = value ? 'instant_charging' : 'stop';
   },
 });
+
+const consumerColor = computed(() => {
+  return mqttStore.consumerColor(props.consumerId) || 'var(--q-consumer)';
+});
 </script>
 
 <style scoped lang="scss">
-.card-width {
+
+.consumer-card {
   width: 22em;
   max-width: 100%;
   border: none;
-  border-left: 4px solid var(--q-consumer);
+  border-left: 4px solid v-bind(consumerColor);
   border-radius: 15px;
 }
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index a460ff999f..7eea7662a0 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -89,16 +89,20 @@
                 <template v-else-if="item.id === 'pv'">
                   <div>Ertrag:</div>
                 </template>
-                <template v-else-if="item.id === 'house'">
+                <template v-else-if="['house', 'consumer'].includes(item.id)">
                   <div>Verbrauch:</div>
                 </template>
               </template>
               <template #right-value>
                 <div
                   v-if="
-                    ['battery', 'grid', 'house', 'chargepoint'].includes(
-                      item.id,
-                    ) && item.today !== undefined
+                    [
+                      'battery',
+                      'grid',
+                      'house',
+                      'chargepoint',
+                      'consumer',
+                    ].includes(item.id) && item.today !== undefined
                   "
                 >
                   {{ item.today.imported }}
@@ -191,6 +195,28 @@
               </DailyTotalsRow>
             </div>
           </div>
+          <div v-if="item.id === 'consumer'">
+            <div
+              v-for="consumerData in individualConsumerData"
+              :key="consumerData.id"
+              class="sub-row"
+            >
+              <DailyTotalsRow
+                :item="consumerData"
+                :rowHeight="rowHeight"
+                :componentNameVisible="componentNameVisible"
+                :currentPowerVisible="currentPowerVisible"
+                :socValueVisible="socValueVisible"
+              >
+                <template #right-label>
+                  <div>Verbrauch:</div>
+                </template>
+                <template #right-value>
+                  <div>{{ consumerData.today?.imported }}</div>
+                </template>
+              </DailyTotalsRow>
+            </div>
+          </div>
         </q-expansion-item>
       </div>
     </div>
@@ -224,6 +250,7 @@ const expanded = ref<Record<string, boolean>>({
   chargepoint: false,
   battery: false,
   pv: false,
+  consumer: false,
 });
 
 const componentNameVisible = computed(() => $q.screen.width >= 300);
@@ -235,6 +262,7 @@ const showHomePower = computed(() => {
 });
 const batteryConfigured = computed(() => mqttStore.batteryConfigured);
 const pvConfigured = computed(() => mqttStore.pvConfigured);
+const consumerConfigured = computed(() => mqttStore.consumerIds.length > 0);
 const chargePointSumPowerAvailable = computed(
   () => mqttStore.chargePointSumPower('value') !== undefined,
 );
@@ -252,6 +280,8 @@ const secondaryComponentsConfigured = computed(() => {
         return individualBatteryData.value.length > 1;
       case 'pv':
         return individualPvData.value.length > 1;
+      case 'consumer':
+        return individualConsumerData.value.length > 1;
       default:
         return false;
     }
@@ -387,6 +417,29 @@ const individualPvData = computed((): DailyTotalsItem[] => {
   return pvSystems;
 });
 
+const individualConsumerData = computed((): DailyTotalsItem[] => {
+  const consumers: DailyTotalsItem[] = [];
+
+  mqttStore.consumerIds.forEach((id) => {
+    const name = mqttStore.consumerName(id);
+    if (name !== undefined) {
+      consumers.push({
+        id: `consumer-${id}`,
+        title: name,
+        level: 'secondary',
+        icon: 'consumer',
+        power: mqttStore.consumerPower(id, 'textValue') as string,
+        powerValue: mqttStore.consumerPower(id, 'value') as number,
+        today: {
+          imported: mqttStore.consumerDailyImported('textValue', id) as string,
+        },
+        color: mqttStore.consumerColor(id) || 'var(--q-consumer)',
+      });
+    }
+  });
+  return consumers;
+});
+
 const componentData = computed((): DailyTotalsItem[] => {
   const components: DailyTotalsItem[] = [];
 
@@ -466,6 +519,24 @@ const componentData = computed((): DailyTotalsItem[] => {
     }
     components.push(item);
   }
+  if (consumerConfigured.value) {
+    components.push({
+      id: 'consumer',
+      title: 'Verbraucher',
+      level: 'primary',
+      icon: 'consumer',
+      power: mqttStore.consumerSumPower('textValue') as string,
+      powerValue: mqttStore.consumerSumPower('value') as number,
+      today: {
+        imported: mqttStore.consumerDailyImported('textValue') as string,
+      },
+      color:
+        mqttStore.consumerIds.length === 1
+          ? mqttStore.consumerColor(mqttStore.consumerIds[0]) ||
+            'var(--q-consumer)'
+          : 'var(--q-consumer)',
+    });
+  }
   return components;
 });
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
index b318efcb99..d468ec2632 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -99,6 +99,7 @@ import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
 import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
+import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 
 const mqttStore = useMqttStore();
 
@@ -132,6 +133,9 @@ const arrowDirection = (id: string) => {
     case 'chargepoint':
       value = mqttStore.chargePointSumPower('value') as number;
       break;
+    case 'consumer':
+      value = mqttStore.consumerSumPower('value') as number;
+      break;
     default:
       if (id.startsWith('counter-')) {
         const counterId = Number(id.replace('counter-', ''));
@@ -155,6 +159,7 @@ const iconMap = {
   pv: PvIcon,
   house: HouseIcon,
   counter: CounterIcon,
+  consumer: ConsumerIcon,
 };
 </script>
 
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 6de4de2614..65d897d514 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -10,6 +10,7 @@ import PvIcon from 'src/assets/icons/owbPV.svg?component';
 import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
 import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
+import ConsumerIcon from 'src/assets/icons/owbConsumer.svg?component';
 
 const mqttStore = useMqttStore();
 const $q = useQuasar();
@@ -97,6 +98,13 @@ const showHomePower = computed(() => {
 const homeConsumption = computed(() => Number(homePower.value.value) > 0);
 const homeProduction = computed(() => Number(homePower.value.value) < 0);
 
+const consumerPower = computed(
+  () => mqttStore.consumerSumPower('object') as ValueObject,
+);
+const showConsumerPower = computed(
+  () => mqttStore.consumerIds.length > 0,
+);
+
 const pvPower = computed(() => mqttStore.pvPowerTotal('object') as ValueObject);
 const pvProduction = computed(() => {
   const value = Number(pvPower.value.value);
@@ -282,6 +290,7 @@ const maxSystemPower = computed(() => {
   const powerValues = [
     Math.abs(Number(gridPower.value.value)),
     Math.abs(Number(homePower.value.value)),
+    Math.abs(Number(consumerPower.value.value)),
     Math.abs(Number(pvPower.value.value)),
     Math.abs(Number(batteryPower.value.value)),
     Math.abs(Number(chargePoint1Power.value.value)),
@@ -314,6 +323,7 @@ const animationDurations = computed(() => {
   return {
     grid: calcDuration(Number(gridPower.value.value), maxPower),
     home: calcDuration(Number(homePower.value.value), maxPower),
+    consumer: calcDuration(Number(consumerPower.value.value), maxPower),
     pv: calcDuration(Number(pvPower.value.value), maxPower),
     battery: calcDuration(Number(batteryPower.value.value), maxPower),
     chargePoint1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
@@ -371,6 +381,22 @@ const svgComponents = computed((): FlowComponent[] => {
     });
   }
 
+  if (showConsumerPower.value) {
+    components.push({
+      id: 'consumer',
+      class: {
+        base: 'consumer',
+        valueLabelColor: 'var(--q-consumer)',
+        animatedReverse: Number(consumerPower.value.value) > 0,
+      },
+      position: { row: 0, column: 1 },
+      label: ['Verbraucher', absoluteValueObject(consumerPower.value).textValue],
+      powerValue: Number(consumerPower.value.value),
+      iconComponent: ConsumerIcon,
+      iconColor: 'var(--q-consumer)',
+    });
+  }
+
   if (mqttStore.pvConfigured) {
     components.push({
       id: 'pv',
@@ -949,6 +975,11 @@ path.animatedReverse.home {
   animation-duration: v-bind('animationDurations.home');
 }
 
+path.animatedReverse.consumer {
+  color: var(--q-consumer);
+  animation-duration: v-bind('animationDurations.consumer');
+}
+
 path.animated.pv,
 path.animatedReverse.pv {
   color: var(--q-pv-stroke);
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 502414280c..430235788d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -31,7 +31,6 @@ import {
   TimeScale,
   Tooltip,
   Filler,
-  ChartDataset,
   ChartType,
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
@@ -39,9 +38,15 @@ import { useLocalDataStore } from 'src/stores/localData-store';
 import { GraphDataPoint } from 'src/stores/mqtt-store-model';
 import HistoryChartLegend from 'src/components/charts/historyChart/HistoryChartLegend.vue';
 import 'chartjs-adapter-luxon';
-import type {
-  HistoryChartTooltipItem,
-  ChartComponentRef,
+import {
+  CONSUMER_TOTAL_LABEL,
+  CONSUMER_TOTAL_KEY,
+  BATTERY_TOTAL_KEY,
+  BATTERY_SOC_KEY,
+  consumerDatasetKey,
+  type CategorizedDataset,
+  type HistoryChartTooltipItem,
+  type ChartComponentRef,
 } from './history-chart-model';
 
 Chart.register(
@@ -73,11 +78,9 @@ const legendDisplay = computed(() => props.showLegend);
 const applyHiddenDatasetsToChart = <TType extends ChartType, TData>(
   chart: Chart<TType, TData>,
 ): void => {
-  chart.data.datasets.forEach((dataset: ChartDataset<TType, TData>, index) => {
-    if (
-      typeof dataset.label === 'string' &&
-      localDataStore.isDatasetHidden(dataset.label)
-    ) {
+  chart.data.datasets.forEach((dataset, index) => {
+    const { key } = dataset as unknown as CategorizedDataset;
+    if (key && localDataStore.isDatasetHidden(key)) {
       chart.hide(index);
     }
   });
@@ -144,6 +147,7 @@ const secondaryCounterDatasets = computed(() =>
         getGlobalColor('--q-secondary-counter-stroke');
       return {
         label: mqttStore.componentName(id),
+        key: `counter-${id}`,
         category: 'component',
         unit: 'kW',
         borderColor: baseColor,
@@ -174,6 +178,7 @@ const chargePointDatasets = computed(() =>
 
     return {
       label: `${chargePointNames.value(cpId)}`,
+      key: `cp-${cpId}`,
       category: 'chargepoint',
       unit: 'kW',
       borderColor: baseColor,
@@ -195,6 +200,90 @@ const chargePointDatasets = computed(() =>
   }),
 );
 
+const consumerLabel = (id: number) =>
+  mqttStore.consumerName(id) || `Verbraucher ${id}`;
+
+const consumerDatasets = computed(() => {
+  const ids = mqttStore.consumerIds;
+  if (ids.length === 0) return [];
+  const defaultColor = getGlobalColor('--q-consumer');
+
+  const individualDataset = (id: number) => {
+    const baseColor = mqttStore.consumerColor(id) || defaultColor;
+    const label = consumerLabel(id);
+    return {
+      label,
+      key: consumerDatasetKey(id),
+      category: 'consumer',
+      unit: 'kW',
+      borderColor: baseColor,
+      backgroundColor: hexColorToRgba(baseColor, 0.1),
+      data: selectedData.value.map(
+        (item) =>
+          ({
+            x: item.timestamp * 1000,
+            y: item[`consumer${id}-power` as keyof GraphDataPoint] ?? 0,
+          }) as Point,
+      ),
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHitRadius: 5,
+      fill: true,
+      yAxisID: 'y',
+    };
+  };
+
+  if (ids.length === 1) {
+    return [individualDataset(ids[0])];
+  }
+
+  return [
+    {
+      label: CONSUMER_TOTAL_LABEL,
+      key: CONSUMER_TOTAL_KEY,
+      category: 'consumer',
+      unit: 'kW',
+      borderColor: defaultColor,
+      backgroundColor: hexColorToRgba(defaultColor, 0.1),
+      data: selectedData.value.map(
+        (item) =>
+          ({
+            x: item.timestamp * 1000,
+            y: item['consumer-all'],
+          }) as Point,
+      ),
+      borderWidth: 2,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHitRadius: 5,
+      fill: true,
+      yAxisID: 'y',
+    },
+    ...ids.map((id) => ({
+      ...individualDataset(id),
+      hidden: localDataStore.isDatasetHidden(consumerDatasetKey(id)),
+    })),
+  ];
+});
+
+const seededHiddenConsumers = new Set<string>();
+watch(
+  () =>
+    mqttStore.consumerIds.length > 1
+      ? mqttStore.consumerIds.map((id) => consumerDatasetKey(id))
+      : [],
+  (keys) => {
+    keys.forEach((key) => {
+      if (!seededHiddenConsumers.has(key)) {
+        seededHiddenConsumers.add(key);
+        localDataStore.hideDataset(key);
+      }
+    });
+  },
+  { immediate: true },
+);
+
 const vehicleDatasets = computed(() =>
   vehicles.value
     .map((vehicle) => {
@@ -205,6 +294,7 @@ const vehicleDatasets = computed(() =>
           getGlobalColor('--q-vehicle-stroke');
         return {
           label: `${vehicle.name} SoC`,
+          key: `vehicle-${vehicle.id}-soc`,
           category: 'vehicle',
           unit: '%',
           borderColor: baseColor,
@@ -264,6 +354,7 @@ const lineChartData = computed(() => {
     const baseColor = getGlobalColor('--q-grid-stroke');
     datasets.push({
       label: gridMeterName.value,
+      key: 'grid',
       category: 'component',
       unit: 'kW',
       borderColor: baseColor,
@@ -286,6 +377,7 @@ const lineChartData = computed(() => {
   if (mqttStore.homePower('value') !== undefined) {
     datasets.push({
       label: 'Hausverbrauch',
+      key: 'house',
       category: 'component',
       unit: 'kW',
       borderColor: getGlobalColor('--q-home-stroke'),
@@ -310,6 +402,7 @@ const lineChartData = computed(() => {
     const baseColor = getGlobalColor('--q-pv-stroke');
     datasets.push({
       label: 'PV ges.',
+      key: 'pv-total',
       category: 'component',
       unit: 'kW',
       borderColor: baseColor,
@@ -334,6 +427,7 @@ const lineChartData = computed(() => {
     datasets.push(
       {
         label: 'Speicher ges.',
+        key: BATTERY_TOTAL_KEY,
         category: 'component',
         unit: 'kW',
         borderColor: baseColor,
@@ -354,6 +448,7 @@ const lineChartData = computed(() => {
       },
       {
         label: 'Speicher SoC',
+        key: BATTERY_SOC_KEY,
         category: 'component',
         unit: '%',
         borderColor: '#FFB96E',
@@ -376,6 +471,7 @@ const lineChartData = computed(() => {
   }
   datasets.push(...chargePointDatasets.value);
   datasets.push(...vehicleDatasets.value);
+  datasets.push(...consumerDatasets.value);
   return {
     labels: chartLabels.value,
     datasets: datasets,
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index 02965fb88b..1e36105c04 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -30,10 +30,13 @@
 import { ref, watch, computed, nextTick } from 'vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { Chart, ChartDataset, LegendItem } from 'chart.js';
-import type {
-  Category,
-  CategorizedDataset,
-  LegendItemWithCategory,
+import {
+  CONSUMER_TOTAL_KEY,
+  BATTERY_TOTAL_KEY,
+  BATTERY_SOC_KEY,
+  type Category,
+  type CategorizedDataset,
+  type LegendItemWithCategory,
 } from './history-chart-model';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
@@ -60,27 +63,26 @@ const batteryConfigured = computed(() => {
 
 const updateLegendItems = () => {
   if (!props.chart) return;
-  let items =
-    props.chart.options.plugins?.legend?.labels?.generateLabels?.(
-      props.chart,
-    ) || [];
-  if (!batteryConfigured.value) {
-    items = items.filter(
-      (item: LegendItemWithCategory) =>
-        item.text !== 'Speicher ges.' && item.text !== 'Speicher SoC',
-    );
-  }
-  (items as LegendItemWithCategory[]).forEach((item) => {
-    if (item.text && localDataStore.isDatasetHidden(item.text)) {
-      item.hidden = true;
-    }
-    // Inject the category from the dataset
+  let items = (props.chart.options.plugins?.legend?.labels?.generateLabels?.(
+    props.chart,
+  ) || []) as LegendItemWithCategory[];
+  items.forEach((item) => {
+    // Inject the category and key from the dataset
     const dataset = props.chart?.data.datasets[
       item.datasetIndex!
     ] as unknown as CategorizedDataset;
     item.category = dataset.category;
+    item.key = dataset.key;
+    if (item.key && localDataStore.isDatasetHidden(item.key)) {
+      item.hidden = true;
+    }
   });
-  legendItems.value = items as LegendItemWithCategory[];
+  if (!batteryConfigured.value) {
+    items = items.filter(
+      (item) => item.key !== BATTERY_TOTAL_KEY && item.key !== BATTERY_SOC_KEY,
+    );
+  }
+  legendItems.value = items;
 };
 
 const categorizedLegendItems = computed(() => {
@@ -88,6 +90,7 @@ const categorizedLegendItems = computed(() => {
     chargepoint: [],
     vehicle: [],
     battery: [],
+    consumer: [],
     component: [],
   };
   for (const item of legendItems.value) {
@@ -98,11 +101,24 @@ const categorizedLegendItems = computed(() => {
       categories.component.push(item);
     }
   }
-  // Sort each category's items alphabetically
+
   Object.keys(categories).forEach((key) => {
-    categories[key as Category].sort((a, b) =>
-      (a.text || '').localeCompare(b.text || '', undefined, { numeric: true }),
+    const category = key as Category;
+    categories[category].sort((a, b) =>
+      (a.text || '').localeCompare(b.text || '', undefined, {
+        numeric: true,
+      }),
     );
+
+    if (category === 'consumer') {
+      const totalIndex = categories[category].findIndex(
+        (item) => item.key === CONSUMER_TOTAL_KEY,
+      );
+      if (totalIndex > 0) {
+        const [total] = categories[category].splice(totalIndex, 1);
+        categories[category].unshift(total);
+      }
+    }
   });
   return categories;
 });
@@ -124,10 +140,10 @@ const getItemLineType = (item: LegendItem) => {
     : 'solid';
 };
 
-const toggleDataset = (datasetName?: string, datasetIndex?: number) => {
-  if (!props.chart || !datasetName || datasetIndex === undefined) return;
-  localDataStore.toggleDataset(datasetName);
-  if (localDataStore.isDatasetHidden(datasetName)) {
+const toggleDataset = (datasetKey?: string, datasetIndex?: number) => {
+  if (!props.chart || !datasetKey || datasetIndex === undefined) return;
+  localDataStore.toggleDataset(datasetKey);
+  if (localDataStore.isDatasetHidden(datasetKey)) {
     props.chart.hide(datasetIndex);
   } else {
     props.chart.show(datasetIndex);
@@ -141,10 +157,8 @@ watch(
   (newChart) => {
     if (newChart) {
       newChart.data.datasets.forEach((dataset, index) => {
-        if (
-          typeof dataset.label === 'string' &&
-          localDataStore.isDatasetHidden(dataset.label)
-        ) {
+        const { key } = dataset as unknown as CategorizedDataset;
+        if (key && localDataStore.isDatasetHidden(key)) {
           newChart.hide(index);
         }
       });
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
index 2215427764..aec4d68f45 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
@@ -18,7 +18,6 @@
       :getItemLineType="getItemLineType"
       menuAnchor="bottom middle"
       menuSelf="top middle"
-      menuFormat="q-mx-lg"
     />
 
     <HistoryChartLegendCategory
@@ -27,6 +26,17 @@
       :toggleDataset="toggleDataset"
       :getItemColor="getItemColor"
       :getItemLineType="getItemLineType"
+      menuAnchor="bottom middle"
+      menuSelf="top middle"
+    />
+
+    <HistoryChartLegendCategory
+      v-if="categorizedLegendItems.consumer.length"
+      :label="'Verbraucher'"
+      :items="categorizedLegendItems.consumer"
+      :toggleDataset="toggleDataset"
+      :getItemColor="getItemColor"
+      :getItemLineType="getItemLineType"
       menuAnchor="bottom left"
       menuSelf="top left"
     />
@@ -36,12 +46,21 @@
 <script setup lang="ts">
 import HistoryChartLegendCategory from './HistoryChartLegendCategory.vue';
 import type { LegendItem } from 'chart.js';
-import type { Category } from './history-chart-model';
+import type { Category, LegendItemWithCategory } from './history-chart-model';
 
 defineProps<{
-  categorizedLegendItems: Record<Category, LegendItem[]>;
-  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  categorizedLegendItems: Record<Category, LegendItemWithCategory[]>;
+  toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
 }>();
 </script>
+
+<style scoped>
+:deep(.q-btn):not(:first-child) {
+  margin-left: 4px;
+}
+:deep(.q-btn) .q-btn-dropdown__arrow {
+  margin-left: 0;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
index aeec8de4ee..3876526674 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
@@ -12,14 +12,14 @@
     <q-list dense class="q-pa-none" style="max-height: 200px; overflow-y: auto">
       <q-item
         v-for="(dataset, index) in items"
-        :key="dataset.text || index"
+        :key="dataset.key || index"
         clickable
         dense
         class="q-py-none"
         :class="{ 'legend-item-hidden': dataset.hidden }"
         @click="
           dataset.datasetIndex !== undefined &&
-          toggleDataset(dataset.text, dataset.datasetIndex)
+          toggleDataset(dataset.key, dataset.datasetIndex)
         "
       >
         <q-item-section avatar class="q-pr-none">
@@ -60,11 +60,12 @@
 <script setup lang="ts">
 import { LegendItem } from 'chart.js';
 import type { QMenuProps } from 'quasar';
+import type { LegendItemWithCategory } from './history-chart-model';
 
 defineProps<{
   label: string;
-  items: LegendItem[];
-  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  items: LegendItemWithCategory[];
+  toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
   menuAnchor: QMenuProps['anchor'];
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
index fb284de12c..d18b6ccd85 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
@@ -3,14 +3,14 @@
     <div class="row wrap q-pa-none items-center justify-center">
       <q-item
         v-for="(dataset, index) in items"
-        :key="dataset.text || index"
+        :key="dataset.key || index"
         clickable
         dense
         class="q-py-none"
         :class="{ 'legend-item-hidden': dataset.hidden }"
         @click="
           dataset.datasetIndex !== undefined &&
-          toggleDataset(dataset.text, dataset.datasetIndex)
+          toggleDataset(dataset.key, dataset.datasetIndex)
         "
       >
         <q-item-section avatar class="q-pr-none">
@@ -50,10 +50,11 @@
 
 <script setup lang="ts">
 import { LegendItem } from 'chart.js';
+import type { LegendItemWithCategory } from './history-chart-model';
 
 defineProps<{
-  items: LegendItem[];
-  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  items: LegendItemWithCategory[];
+  toggleDataset: (datasetKey: string | undefined, datasetIndex: number) => void;
   getItemColor: (dataset: LegendItem) => string;
   getItemLineType: (dataset: LegendItem) => string | undefined;
 }>();
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index ade9f6ac7d..c9f60823e7 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -11,17 +11,32 @@ export interface ChartComponentRef {
   chart?: Chart;
 }
 
-export type Category = 'chargepoint' | 'vehicle' | 'battery' | 'component';
+export type Category =
+  | 'chargepoint'
+  | 'vehicle'
+  | 'battery'
+  | 'consumer'
+  | 'component';
 
-// Add category to the chart datasets
+export const CONSUMER_TOTAL_LABEL = 'Verbraucher ges.';
+
+export const CONSUMER_TOTAL_KEY = 'consumer-total';
+export const BATTERY_TOTAL_KEY = 'battery-total';
+export const BATTERY_SOC_KEY = 'battery-soc';
+
+export const consumerDatasetKey = (id: number) => `consumer-${id}`;
+
+// Add category and key to the chart datasets
 export interface CategorizedDataset extends ChartDataset<
   'line',
   { x: number; y: number }
 > {
   category: Category;
+  key: string;
 }
 
-// Add category to the legendItem
+// Add category and key to the legendItem
 export interface LegendItemWithCategory extends LegendItem {
   category?: Category;
+  key?: string;
 }
diff --git a/packages/modules/web_themes/koala/source/src/stores/localData-store.ts b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
index 7fa748fb1d..170aa5c1ce 100644
--- a/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
@@ -18,28 +18,28 @@ export const useLocalDataStore = defineStore('localData', () => {
   const hiddenDatasets = ref<string[]>([]);
 
   // Function to add a dataset to hidden list
-  const hideDataset = (datasetName: string) => {
-    if (!hiddenDatasets.value.includes(datasetName)) {
-      hiddenDatasets.value.push(datasetName);
+  const hideDataset = (datasetKey: string) => {
+    if (!hiddenDatasets.value.includes(datasetKey)) {
+      hiddenDatasets.value.push(datasetKey);
     }
   };
 
-  const showDataset = (datasetName: string) => {
+  const showDataset = (datasetKey: string) => {
     hiddenDatasets.value = hiddenDatasets.value.filter(
-      (item) => item !== datasetName,
+      (item) => item !== datasetKey,
     );
   };
 
-  const toggleDataset = (datasetName: string) => {
-    if (hiddenDatasets.value.includes(datasetName)) {
-      showDataset(datasetName);
+  const toggleDataset = (datasetKey: string) => {
+    if (hiddenDatasets.value.includes(datasetKey)) {
+      showDataset(datasetKey);
     } else {
-      hideDataset(datasetName);
+      hideDataset(datasetKey);
     }
   };
 
-  const isDatasetHidden = (datasetName: string): boolean => {
-    return hiddenDatasets.value.includes(datasetName);
+  const isDatasetHidden = (datasetKey: string): boolean => {
+    return hiddenDatasets.value.includes(datasetKey);
   };
 
   return {
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index c99bc49712..353783180a 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -142,6 +142,7 @@ export interface ConsumerModule {
   type: string;
   id: number;
   vendor: string;
+  color?: string | null;
 }
 export type ConsumerUsageType =
   | 'meter_only'
@@ -218,10 +219,12 @@ export interface GraphDataPoint {
   grid: number;
   'house-power': number;
   'charging-all': number;
+  'consumer-all': number;
   'pv-all': number;
   'bat-all-power': number;
   'bat-all-soc': number;
   [key: `cp${number}-power`]: number;
+  [key: `consumer${number}-power`]: number;
   [key: `ev${number}-soc`]: number | null;
 }
 
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 3ae3500c44..ef7e3b0ec9 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -3754,6 +3754,22 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the consumer user-defined color identified by the consumer id
+   * @param consumerId consumer id
+   * @returns string | null
+   */
+  const consumerColor = computed(() => {
+    return (consumerId: number): string | null => {
+      const color = getValue.value(
+        `openWB/consumer/${consumerId}/module`,
+        'color',
+        null,
+      ) as string | null;
+      return resolveComponentColor(color, SETTINGS_UI_COLORS.consumer);
+    };
+  });
+
   /**
    * Get the current power of a consumer identified by the consumer id
    * @param consumerId consumer id
@@ -3779,6 +3795,56 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  /**
+   * Get the summed power of all consumers.
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @returns string | number | ValueObject
+   */
+  const consumerSumPower = computed(() => {
+    return (returnType: string = 'textValue') => {
+      const power = getValue.value('openWB/consumer/get/power') as
+        | number
+        | undefined;
+      const valueObject = getValueObject.value(power);
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, power);
+    };
+  });
+
+  /**
+   * Get the daily imported energy total of all consumers, or of a single
+   * consumer when an id is provided
+   * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param id optional consumer id; omit for the sum of all consumers
+   * @returns string | number | ValueObject
+   */
+  const consumerDailyImported = computed(() => {
+    return (
+      returnType: string = 'textValue',
+      id: number | undefined = undefined,
+    ) => {
+      const energy =
+        (getValue.value(
+          `openWB/consumer/${id !== undefined ? `${id}/` : ''}get/daily_imported`,
+          undefined,
+          0,
+        ) as number) || 0;
+      const valueObject = getValueObject.value(energy, 'Wh');
+      if (Object.hasOwn(valueObject, returnType)) {
+        return valueObject[returnType as keyof ValueObject];
+      }
+      if (returnType == 'object') {
+        return valueObject;
+      }
+      console.error('returnType not found!', returnType, energy);
+    };
+  });
+
   /**
    * Get the running time (on_time, in seconds) of a consumer since it last
    * started. Resets when the device stops drawing current.
@@ -4359,6 +4425,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     vehicle: '#17a2b8',
     counter: '#dc3545',
     pv: '#28a745',
+    consumer: '#6f42c1',
   } as const;
 
   const resolveComponentColor = (
@@ -4520,7 +4587,10 @@ export const useMqttStore = defineStore('mqtt', () => {
     consumerList,
     consumerIds,
     consumerName,
+    consumerColor,
     consumerPower,
+    consumerSumPower,
+    consumerDailyImported,
     consumerOnTime,
     consumerStateStr,
     consumerFaultState,