diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index c48a4e6388..5b2b6a844e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -5,14 +5,18 @@
         <div class="col flex items-center">
           {{ name }}
           <ChargePointLock :charge-point-id="props.chargePointId" />
-          <ChargePointStateIcon :charge-point-id="props.chargePointId" />
+          <ChargePointStateIcon
+            :charge-point-id="Number(props.chargePointId)"
+          />
         </div>
         <q-icon name="settings" size="sm" @click="settingsVisible = true" />
       </div>
       <ChargePointFaultMessage :charge-point-id="props.chargePointId" />
       <ChargePointStateMessage :charge-point-id="props.chargePointId" />
       <div class="row items-center q-mt-sm">
-        <ChargePointVehicleSelect :charge-point-id="props.chargePointId" />
+        <ChargePointVehicleSelect
+          :charge-point-id="Number(props.chargePointId)"
+        />
         <ChargePointPriority :charge-point-id="props.chargePointId" />
       </div>
       <ChargePointModeButtons :charge-point-id="props.chargePointId" />
@@ -27,29 +31,27 @@
         </div>
         <div class="col q-pl-sm">
           <div class="text-subtitle2">geladen</div>
-          <!-- {{ energyCharged }} -->
           {{ energyChargedPlugged }}
         </div>
       </div>
       <SliderDouble
         v-if="showSocTargetSlider"
         class="q-mt-sm"
+        :model-value="target"
         :readonly="true"
         :charge-mode="chargeMode"
-        :connected-vehicle-soc="connectedVehicleSoc"
-        :target-soc="targetSoc"
+        :limit-mode="limitMode"
+        :current-value="currentValue"
         :target-time="targetTime"
       />
     </q-card-section>
   </q-card>
-
   <!-- //////////////////////  Settings popup dialog   //////////////////// -->
   <ChargePointSettings
     :chargePointId="props.chargePointId"
     v-model="settingsVisible"
   />
 </template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
@@ -62,19 +64,33 @@ import ChargePointStateMessage from './ChargePointStateMessage.vue';
 import ChargePointFaultMessage from './ChargePointFaultMessage.vue';
 import ChargePointVehicleSelect from './ChargePointVehicleSelect.vue';
 import ChargePointSettings from './ChargePointSettings.vue';
-
 const mqttStore = useMqttStore();
-
 const props = defineProps<{
   chargePointId: number;
 }>();
-
+const limitMode = computed(() => {
+  switch (chargeMode.value) {
+    case 'instant_charging':
+      return mqttStore.chargePointConnectedVehicleInstantChargeLimit(
+        props.chargePointId,
+      ).value;
+    case 'pv_charging':
+      return mqttStore.chargePointConnectedVehiclePvChargeLimit(
+        props.chargePointId,
+      ).value;
+    case 'eco_charging':
+      return mqttStore.chargePointConnectedVehicleEcoChargeLimit(
+        props.chargePointId,
+      ).value;
+    default:
+      return 'soc';
+  }
+});
 const settingsVisible = ref<boolean>(false);
 const name = computed(() => mqttStore.chargePointName(props.chargePointId));
 const power = computed(() =>
   mqttStore.chargePointPower(props.chargePointId, 'textValue'),
 );
-
 const energyChargedPlugged = computed(() =>
   mqttStore.chargePointEnergyChargedPlugged(props.chargePointId, 'textValue'),
 );
@@ -84,20 +100,24 @@ const phaseNumber = computed(() =>
 const chargingCurrent = computed(() =>
   mqttStore.chargePointChargingCurrent(props.chargePointId),
 );
-
-const connectedVehicleSoc = computed(() =>
-  Math.round(
-    mqttStore.chargePointConnectedVehicleSoc(props.chargePointId).value?.soc ??
+const currentValue = computed(() => {
+  if (limitMode.value === 'soc') {
+    return Math.round(
+      mqttStore.chargePointConnectedVehicleSoc(props.chargePointId).value?.soc ??
       0,
-  ),
-);
-
+    );
+  } else {
+    return mqttStore.chargePointEnergyChargedPlugged(
+      props.chargePointId,
+      'value',
+    ) as number;
+  }
+});
 const chargeMode = computed(
   () =>
     mqttStore.chargePointConnectedVehicleChargeMode(props.chargePointId).value,
 );
-
-const targetSoc = computed<number | undefined>(() => {
+const target = computed(() => {
   switch (chargeMode.value) {
     case 'scheduled_charging':
       return mqttStore.vehicleScheduledChargingTarget(props.chargePointId).value
@@ -110,8 +130,10 @@ const targetSoc = computed<number | undefined>(() => {
       return instantLimitMode === 'soc'
         ? mqttStore.chargePointConnectedVehicleInstantChargeLimitSoC(
             props.chargePointId,
-          ).value
-        : undefined;
+          ).value ?? 0
+        : (mqttStore.chargePointConnectedVehicleInstantChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000;
     case 'pv_charging':
       const pvLimitMode = mqttStore.chargePointConnectedVehiclePvChargeLimit(
         props.chargePointId,
@@ -119,8 +141,10 @@ const targetSoc = computed<number | undefined>(() => {
       return pvLimitMode === 'soc'
         ? mqttStore.chargePointConnectedVehiclePvChargeLimitSoC(
             props.chargePointId,
-          ).value
-        : undefined;
+          ).value ?? 0
+        : (mqttStore.chargePointConnectedVehiclePvChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000;
     case 'eco_charging':
       const ecoLimitMode = mqttStore.chargePointConnectedVehicleEcoChargeLimit(
         props.chargePointId,
@@ -128,31 +152,27 @@ const targetSoc = computed<number | undefined>(() => {
       return ecoLimitMode === 'soc'
         ? mqttStore.chargePointConnectedVehicleEcoChargeLimitSoC(
             props.chargePointId,
-          ).value
-        : undefined;
+          ).value ?? 0
+        : (mqttStore.chargePointConnectedVehicleEcoChargeLimitEnergy(
+          props.chargePointId,
+        ).value ?? 0) * 1000;
     default:
-      return undefined;
+      return 0;
   }
 });
-
 const showSocTargetSlider = computed(() => {
-  return (
-    chargeMode.value !== undefined &&
-    !['stop', 'standby'].includes(chargeMode.value)
-  );
+  return chargeMode.value !== undefined && !'stop'.includes(chargeMode.value) && limitMode.value !== 'none';
 });
-
 const targetTime = computed(() => {
   const target = mqttStore.vehicleScheduledChargingTarget(
     props.chargePointId,
   ).value;
   if (!target || !target.time || chargeMode.value !== 'scheduled_charging') {
-    return 'keine';
+    return undefined;
   }
   return target.time;
 });
 </script>
-
 <style lang="scss" scoped>
 .card-width {
   max-width: 24em;
diff --git a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
index e5c112005d..2613a0bd9d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
@@ -42,22 +42,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
+import { useLocalDataStore } from 'src/stores/localData-store';
 
 defineOptions({
   name: 'ChartCarousel',
 });
 const $q = useQuasar();
-
-const legendVisible = ref(!$q.platform.is.mobile);
+const localDataStore = useLocalDataStore();
 
 const toggleLegend = () => {
-  legendVisible.value = !legendVisible.value;
+  localDataStore.toggleLegendVisibility();
 };
-
+const legendVisible = computed(() => localDataStore.legendVisible);
 const fullscreen = ref(false);
 const chartCarouselItems = [
   {
diff --git a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
index 181c4fa987..618608d2ed 100644
--- a/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
+++ b/packages/modules/web_themes/koala/source/src/components/SliderDouble.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="my-card">
-    <div class="relative-position" style="height: 40px">
+    <div class="slider-container">
       <q-slider
-        v-model="currentCharge"
+        :model-value="currentValue"
         :min="0"
-        :max="100"
+        :max="maxValue"
         color="green-7"
+        class="current-slider"
         track-size="1.5em"
         thumb-size="0px"
         readonly
@@ -13,49 +14,67 @@
         @touchstart.stop
         @touchmove.stop
         @touchend.stop
-        style="position: absolute; width: 100%; z-index: 1"
       />
       <q-slider
-        v-model="targetCharge"
+        v-if="props.limitMode == 'soc'"
+        v-model="target"
         :min="0"
         :max="100"
         color="light-green-5"
         inner-track-color="blue-grey-2"
+        class="target-slider"
         track-size="1.5em"
         :thumb-size="props.readonly ? '0' : '2em'"
         :readonly="props.readonly"
         @touchstart.stop
         @touchmove.stop
         @touchend.stop
-        style="position: absolute; width: 100%"
       />
     </div>
-
     <div class="row justify-between no-wrap">
       <div class="col">
-        <div>Ladestand</div>
-        <div>{{ currentCharge }}%</div>
+        <div>{{ props.limitMode == 'soc' ? 'Ladestand' : 'Geladen' }}</div>
+        <div>
+          {{
+            props.limitMode == 'soc'
+              ? currentValue + '%'
+              : formatEnergy(currentValue)
+          }}
+        </div>
       </div>
-      <div v-if="showTargetTime" class="col text-center">
+      <div
+        v-if="props.targetTime"
+        class="col text-center"
+      >
         <div>Zielzeit</div>
-        <div>{{ targetTime }}</div>
+        <div>{{ props.targetTime }}</div>
       </div>
       <div class="col text-right">
-        <div>Ladeziel</div>
-        <div>{{ targetCharge }}%</div>
+        <div>
+          {{ props.limitMode == 'soc' ? 'Ladeziel' : 'Energieziel' }}
+        </div>
+        <div>
+          {{
+            props.limitMode == 'soc'
+              ? target + '%'
+              : formatEnergy(target)
+          }}
+        </div>
       </div>
     </div>
   </div>
 </template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
-
 defineOptions({
   name: 'SliderQuasar',
 });
-
+const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
+  },
   readonly: {
     type: Boolean,
     default: false,
@@ -64,30 +83,58 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  connectedVehicleSoc: {
-    type: Number,
-    default: 0,
+  limitMode: {
+    type: String,
+    default: 'soc',
   },
-  targetSoc: {
+  currentValue: {
     type: Number,
     default: 0,
   },
   targetTime: {
     type: String,
-    default: 'keine',
+    required: false,
+    default: undefined,
+  },
+});
+const target = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    if (!props.readonly) {
+      emit('update:modelValue', value);
+    }
   },
 });
-
-const showTargetTime = computed(
-  () => props.chargeMode === 'scheduled_charging',
-);
-const currentCharge = computed(() => props.connectedVehicleSoc);
-const targetCharge = computed(() => props.targetSoc);
+const maxValue = computed(() => {
+  if (props.limitMode == 'soc') {
+    return 100;
+  }
+  return target.value;
+});
+const formatEnergy = (value: number) => {
+  if (value >= 1000) {
+    return (value / 1000).toFixed(2) + ' kWh';
+  } else {
+    return value.toFixed(0) + ' Wh';
+  }
+};
 </script>
-
 <style scoped>
 .my-card {
   width: 100%;
   max-width: 300px;
 }
+.slider-container {
+  position: relative;
+  height: 40px;
+}
+.current-slider {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+}
+.target-slider {
+  position: absolute;
+  width: 100%;
+}
 </style>
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 ad61324aab..18aa3ce040 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
@@ -4,12 +4,13 @@
       :data="lineChartData"
       :options="chartOptions"
       :class="'chart'"
+      ref="chartRef"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { Line as ChartjsLine } from 'vue-chartjs';
 import {
@@ -20,11 +21,23 @@ import {
   PointElement,
   LinearScale,
   TimeScale,
+  Tooltip,
   Filler,
+  ChartEvent,
+  LegendItem,
+  LegendElement,
+  ChartTypeRegistry,
+  ChartDataset,
+  ChartType,
 } from 'chart.js';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useLocalDataStore } from 'src/stores/localData-store';
+import { GraphDataPoint } from 'src/stores/mqtt-store-model';
 import 'chartjs-adapter-luxon';
-import type { HistoryChartTooltipItem } from './history-chart-model';
+import type {
+  HistoryChartTooltipItem,
+  ChartComponentRef,
+} from './history-chart-model';
 
 Chart.register(
   Legend,
@@ -33,19 +46,45 @@ Chart.register(
   PointElement,
   LinearScale,
   TimeScale,
+  Tooltip,
   Filler,
 );
-const $q = useQuasar();
 
+const legendDisplay = computed(() => props.showLegend);
+const mqttStore = useMqttStore();
+const localDataStore = useLocalDataStore();
+const $q = useQuasar();
 const props = defineProps<{
   showLegend: boolean;
 }>();
 
-const legendDisplay = computed(() => props.showLegend);
+const chartRef = ref<ChartComponentRef | null>(null);
 
-const mqttStore = useMqttStore();
+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.hide(index);
+    }
+  });
+  chart.update();
+};
+
+watch(
+  () => chartRef.value?.chart,
+  (chart) => {
+    if (chart) {
+      applyHiddenDatasetsToChart(chart);
+    }
+  },
+  { immediate: true },
+);
 
-const selectedData = computed(() => {
+const selectedData = computed((): GraphDataPoint[] => {
   const data = mqttStore.chartData;
   const currentTime = Math.floor(Date.now() / 1000);
   return data.filter((item) => item.timestamp > currentTime - chartRange.value);
@@ -53,6 +92,15 @@ const selectedData = computed(() => {
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const chargePointNames = computed(() => mqttStore.chargePointName);
+
+const gridMeterName = computed(() => {
+  const gridId = mqttStore.getGridId;
+  if (gridId !== undefined) {
+    return mqttStore.getComponentName(gridId);
+  }
+  return 'Zähler';
+});
+
 const vehicles = computed(() => mqttStore.vehicleList());
 const chartRange = computed(
   () => mqttStore.themeConfiguration?.history_chart_range || 3600,
@@ -64,7 +112,10 @@ const chargePointDatasets = computed(() =>
     unit: 'kW',
     borderColor: '#4766b5',
     backgroundColor: 'rgba(71, 102, 181, 0.2)',
-    data: selectedData.value.map((item) => item[`cp${cpId}-power`] as number),
+    data: selectedData.value.map((item) => ({
+      x: item.timestamp * 1000,
+      y: item[`cp${cpId}-power`] || 0,
+    })),
     borderWidth: 2,
     pointRadius: 0,
     pointHoverRadius: 4,
@@ -77,7 +128,7 @@ const chargePointDatasets = computed(() =>
 const vehicleDatasets = computed(() =>
   vehicles.value
     .map((vehicle) => {
-      const socKey = `ev${vehicle.id}-soc`;
+      const socKey = `ev${vehicle.id}-soc` as keyof GraphDataPoint;
       if (selectedData.value.some((item) => socKey in item)) {
         return {
           label: `${vehicle.name} SoC`,
@@ -88,9 +139,10 @@ const vehicleDatasets = computed(() =>
           pointRadius: 0,
           pointHoverRadius: 4,
           pointHitRadius: 5,
-          data: selectedData.value.map(
-            (item) => item[socKey as keyof typeof item] as number,
-          ),
+          data: selectedData.value.map((item) => ({
+            x: item.timestamp * 1000,
+            y: Number(item[socKey] ?? 0),
+          })),
           fill: false,
           yAxisID: 'y2',
         };
@@ -102,17 +154,18 @@ const vehicleDatasets = computed(() =>
         dataset !== undefined,
     ),
 );
-
 const lineChartData = computed(() => {
   return {
-    labels: selectedData.value.map((item) => item.time),
     datasets: [
       {
-        label: 'Grid Power',
+        label: gridMeterName.value,
         unit: 'kW',
         borderColor: '#a33c42',
         backgroundColor: 'rgba(239,182,188, 0.2)',
-        data: selectedData.value.map((item) => item.grid),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item.grid,
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -125,7 +178,10 @@ const lineChartData = computed(() => {
         unit: 'kW',
         borderColor: '#949aa1',
         backgroundColor: 'rgba(148, 154, 161, 0.2)',
-        data: selectedData.value.map((item) => item['house-power'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['house-power'],
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -134,11 +190,14 @@ const lineChartData = computed(() => {
         yAxisID: 'y',
       },
       {
-        label: 'PV Power',
+        label: 'PV ges.',
         unit: 'kW',
         borderColor: 'green',
         backgroundColor: 'rgba(144, 238, 144, 0.2)',
-        data: selectedData.value.map((item) => item['pv-all'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['pv-all'],
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -151,7 +210,10 @@ const lineChartData = computed(() => {
         unit: 'kW',
         borderColor: '#b5a647',
         backgroundColor: 'rgba(181, 166, 71, 0.2)',
-        data: selectedData.value.map((item) => item['bat-all-power'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['bat-all-power'],
+        })),
         borderWidth: 2,
         pointRadius: 0,
         pointHoverRadius: 4,
@@ -168,7 +230,10 @@ const lineChartData = computed(() => {
         pointRadius: 0,
         pointHoverRadius: 4,
         pointHitRadius: 5,
-        data: selectedData.value.map((item) => item['bat-all-soc'] as number),
+        data: selectedData.value.map((item) => ({
+          x: item.timestamp * 1000,
+          y: item['bat-all-soc'],
+        })),
         fill: false,
         yAxisID: 'y2',
       },
@@ -191,6 +256,25 @@ const chartOptions = computed(() => ({
         boxWidth: 19,
         boxHeight: 0.1,
       },
+      onClick: (
+        e: ChartEvent,
+        legendItem: LegendItem,
+        legend: LegendElement<keyof ChartTypeRegistry>,
+      ) => {
+        const index = legendItem.datasetIndex!;
+        const chartInstance = legend.chart;
+        const datasetName = legendItem.text;
+
+        // Toggle visibility using the store
+        localDataStore.toggleDataset(datasetName);
+
+        // Update chart visibility
+        if (localDataStore.isDatasetHidden(datasetName)) {
+          chartInstance.hide(index);
+        } else {
+          chartInstance.show(index);
+        }
+      },
     },
     tooltip: {
       mode: 'index' as const,
@@ -206,7 +290,6 @@ const chartOptions = computed(() => ({
       type: 'time' as const,
       time: {
         unit: 'minute' as const,
-        // stepSize: 5,
         displayFormats: {
           minute: 'HH:mm' as const,
         },
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 f219c7840f..efacd28589 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
@@ -1,7 +1,11 @@
-import { TooltipItem } from 'chart.js'; // Importieren des TooltipItem-Typs
-
+import { TooltipItem, Chart } from 'chart.js'; // Importieren des TooltipItem-Typs
 export interface HistoryChartTooltipItem extends TooltipItem<'line'> {
   dataset: TooltipItem<'line'>['dataset'] & {
     unit?: string;
   };
 }
+
+// Define a type for the component that contains the Chart instance
+export interface ChartComponentRef {
+  chart?: Chart;
+}
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
new file mode 100644
index 0000000000..7fa748fb1d
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/stores/localData-store.ts
@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+
+export const useLocalDataStore = defineStore('localData', () => {
+  const $q = useQuasar();
+
+  //////////////    Legend Visibility     ///////////////////////
+
+  const legendVisible = ref(!$q.platform.is.mobile);
+
+  const toggleLegendVisibility = () => {
+    legendVisible.value = !legendVisible.value;
+  };
+
+  //////////////    Legend Item Visibility     ///////////////////////
+
+  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 showDataset = (datasetName: string) => {
+    hiddenDatasets.value = hiddenDatasets.value.filter(
+      (item) => item !== datasetName,
+    );
+  };
+
+  const toggleDataset = (datasetName: string) => {
+    if (hiddenDatasets.value.includes(datasetName)) {
+      showDataset(datasetName);
+    } else {
+      hideDataset(datasetName);
+    }
+  };
+
+  const isDatasetHidden = (datasetName: string): boolean => {
+    return hiddenDatasets.value.includes(datasetName);
+  };
+
+  return {
+    hiddenDatasets,
+    isDatasetHidden,
+    toggleDataset,
+    hideDataset,
+    showDataset,
+    legendVisible,
+    toggleLegendVisibility,
+  };
+});
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 7a3c63cad5..b92fc357d3 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
@@ -165,3 +165,14 @@ export interface BatteryConfiguration {
   id: number;
   configuration: object;
 }
+
+export interface CounterConfiguration {
+  name: string;
+  info: {
+    manufacturer: string;
+    model: string;
+  };
+  type: string;
+  id: number;
+  configuration: object;
+}
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 8f8c4992f4..7a9506bc74 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
@@ -19,6 +19,7 @@ import type {
   ChargePointConnectedVehicleSoc,
   GraphDataPoint,
   BatteryConfiguration,
+  CounterConfiguration,
   ThemeConfiguration,
 } from './mqtt-store-model';
 
@@ -2244,6 +2245,23 @@ export const useMqttStore = defineStore('mqtt', () => {
     return undefined;
   });
 
+  /**
+   * Get the power meter(counter) name identified by the Grid ID
+   * @param counterId counter ID
+   * @returns string
+   */
+  const getComponentName = computed(() => {
+    return (componentId: number): string => {
+      const configurations = getWildcardValues.value(
+        `openWB/system/device/+/component/${componentId}/config`,
+      ) as { [key: string]: CounterConfiguration };
+      if (Object.keys(configurations).length === 0) {
+        return `Zähler ${componentId}`;
+      }
+      return Object.values(configurations)[0].name;
+    };
+  });
+
   /**
    * Get grid power identified from root of component hierarchy
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -2455,6 +2473,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryMode,
     // Grid data
     getGridId,
+    getComponentName,
     getGridPower,
     // Home data
     getHomePower,