diff --git a/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg b/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
new file mode 100644
index 0000000000..8a8f271fce
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/public/icons/owbCounter.svg
@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: white;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M686.606225 510.524392 517.747399 638.968763c-2.403746-0.198521-4.801353-0.401136-7.206122-0.401136-35.411511 0-64.020082 28.613688-64.020082 64.028269 0 35.410488 28.608571 64.021106 64.020082 64.021106 35.414581 0 64.028269-28.609595 64.028269-64.021106 0-2.403746-0.200568-4.801353-0.401136-7.206122l128.444371-168.859849L686.606225 510.524392 686.606225 510.524392zM686.606225 510.524392"  /><path d="M510.541277 190.410678c-247.484557 0-448.155926 200.672392-448.155926 448.157973 0 68.828598 15.60542 133.852544 43.214221 192.07048l72.226998 0c-30.810726-53.217039-48.414663-113.238041-51.017954-176.063925l63.61997 0 0-32.006971-63.61997 0c2.4017-57.623395 17.407462-113.044636 43.61331-162.862251l55.020104 31.813566 16.007579-27.812439-55.020104-31.608905c14.805194-23.210631 32.414247-45.216831 52.420907-65.22349 20.406772-20.207227 42.61354-38.015825 66.220191-53.021587l31.611975 54.618968 27.813462-16.001439-31.614022-54.618968c49.618071-26.010397 104.437607-40.615023 161.66089-43.018769l0 63.620993 32.006971 0 0-63.620993c57.222259 2.402723 112.041796 17.207917 161.659867 43.018769l-31.41243 54.618968 27.812439 16.001439 31.608905-54.618968c23.611767 15.005762 45.816488 32.81436 66.224284 53.021587 20.007683 20.006659 37.415145 41.812291 52.42193 65.22349l-54.819536 31.608905 16.002462 27.812439 55.020104-31.813566c26.209942 49.817616 41.215704 105.239879 43.618427 162.862251l-64.026222 0 0 32.006971 63.627133 0c-2.604314 62.825884-20.207227 122.846886-51.018977 176.063925l72.222905 0c27.611871-58.21896 43.218314-123.242905 43.218314-192.07048C958.70539 391.08307 758.034021 190.410678 510.541277 190.410678L510.541277 190.410678zM510.541277 190.410678"  /></svg>
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 17c95214e1..9925e73fc1 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue
@@ -51,7 +51,7 @@ import { ref, computed, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/historyChart/HistoryChart.vue';
-import DailyTotals from './DailyTotals.vue';
+import DailyTotals from './charts/dailyTotals/DailyTotals.vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
diff --git a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
deleted file mode 100644
index 508376bb91..0000000000
--- a/packages/modules/web_themes/koala/source/src/components/DailyTotals.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<template>
-  <div
-    class="flex column items-center justify-center container"
-    ref="rootRef"
-    :style="{ '--row-h': rowHeight + 'px' }"
-  >
-    <div class="centered-panel">
-      <div
-        class="flex justify-between text-subtitle1 text-weight-bold full-width"
-        ref="titleRef"
-      >
-        <div v-if="currentPowerVisible">Aktuelle Leistung</div>
-        <div>Tageswerte</div>
-      </div>
-      <q-table
-        flat
-        :rows="rows"
-        :columns="columns"
-        row-key="id"
-        hide-header
-        hide-bottom
-        dense
-        separator="none"
-        class="banner-table theme-text"
-      >
-        <template #body="props">
-          <q-tr
-            :props="props"
-            :class="props.row.id"
-          >
-            <q-td key="icon" :props="props">
-              <img
-                :src="props.row.icon"
-                :alt="props.row.title"
-                class="icon"
-                :style="{ width: iconSize + 'px', height: iconSize + 'px' }"
-              />
-            </q-td>
-
-            <q-td
-              v-if="componentNameVisible"
-              key="title"
-              :props="props"
-              class="text-weight-bold"
-            >
-              {{ props.row.title }}
-            </q-td>
-
-            <q-td
-              v-if="socValueVisible"
-              key="soc"
-              :props="props"
-              class="text-right"
-            >
-              <span v-if="props.row.id === 'battery'"
-                >{{ props.row.soc }}%</span
-              >
-            </q-td>
-
-            <q-td v-if="currentPowerVisible" key="arrow" :props="props">
-              <q-icon
-                :name="
-                  props.row.id === 'house'
-                    ? 'horizontal_rule'
-                    : arrowDirection(props.row.id).noCurrent
-                      ? 'horizontal_rule'
-                      : 'double_arrow'
-                "
-                :class="{
-                  'rotate-180': arrowDirection(props.row.id).rotate180,
-                }"
-              />
-            </q-td>
-
-            <q-td
-              v-if="currentPowerVisible"
-              key="power"
-              :props="props"
-              class="text-right"
-            >
-              {{ String(props.row.power).replace('-', '') }}
-            </q-td>
-
-            <!-- Gap column stretches -->
-            <q-td key="gap" :props="props"></q-td>
-
-            <q-td
-              key="rightLabel"
-              :props="props"
-              class="text-right text-weight-bold"
-            >
-              <template
-                v-if="['battery', 'chargepoint'].includes(props.row.id)"
-              >
-                <div>Geladen:</div>
-                <div>Entladen:</div>
-              </template>
-              <template v-else-if="props.row.id === 'grid'">
-                <div>Bezug:</div>
-                <div>Einspeisung:</div>
-              </template>
-              <template v-else-if="props.row.id === 'pv'">
-                <div>Ertrag:</div>
-              </template>
-              <template v-else-if="props.row.id === 'house'">
-                <div>Verbrauch:</div>
-              </template>
-            </q-td>
-
-            <q-td key="rightValue" :props="props">
-              <div
-                v-if="
-                  ['battery', 'grid', 'house', 'chargepoint'].includes(
-                    props.row.id,
-                  )
-                "
-              >
-                {{ props.row.today.imported }}
-              </div>
-              <div
-                v-if="
-                  ['battery', 'grid', 'pv', 'chargepoint'].includes(
-                    props.row.id,
-                  )
-                "
-              >
-                {{ props.row.today.exported }}
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </q-table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  nextTick,
-  watch,
-} from 'vue';
-import { useQuasar } from 'quasar';
-import { useMqttStore } from 'src/stores/mqtt-store';
-import type { QTableColumn } from 'quasar';
-import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
-
-const $q = useQuasar();
-const mqttStore = useMqttStore();
-
-const iconSize = ref(28);
-
-const columns: QTableColumn<DailyTotalsItem>[] = [
-  {
-    name: 'icon',
-    label: '',
-    field: 'icon',
-    align: 'left',
-    style: 'width:32px;',
-  },
-  {
-    name: 'title',
-    label: '',
-    field: 'title',
-    align: 'left',
-    style: 'width:80px;',
-  },
-  { name: 'soc', label: '', field: 'soc', align: 'right', style: 'width:6px;' },
-  {
-    name: 'arrow',
-    label: '',
-    field: 'arrow',
-    align: 'center',
-    style: 'width:24px;',
-  },
-  {
-    name: 'power',
-    label: '',
-    field: 'power',
-    align: 'right',
-    style: 'width:20px;',
-  },
-  { name: 'gap', label: '', field: 'gap', align: 'left', style: 'width:auto;' },
-  {
-    name: 'rightLabel',
-    label: '',
-    field: 'rightLabel',
-    align: 'right',
-    style: 'width:100px;',
-  },
-  {
-    name: 'rightValue',
-    label: '',
-    field: 'rightValue',
-    align: 'right',
-    style: 'width:70px;',
-  },
-];
-
-const componentNameVisible = computed(() => $q.screen.width >= 375);
-const currentPowerVisible = computed(() => $q.screen.width >= 500);
-const socValueVisible = computed(() => $q.screen.width >= 700);
-
-const batteryConfigured = computed(() => mqttStore.batteryConfigured);
-const pvConfigured = computed(() => mqttStore.getPvConfigured);
-const chargePointConfigured = computed(
-  () => mqttStore.chargePointIds.length > 0,
-);
-
-const rows = computed((): DailyTotalsItem[] => {
-  const components: DailyTotalsItem[] = [];
-
-  components.push({
-    id: 'grid',
-    title: 'Netz',
-    icon: 'icons/owbGrid.svg',
-    power: mqttStore.getGridPower('textValue') as string,
-    powerValue: mqttStore.getGridPower('value') as number,
-    today: {
-      imported: mqttStore.gridDailyImported('textValue') as string,
-      exported: mqttStore.gridDailyExported('textValue') as string,
-    },
-  });
-
-  if (batteryConfigured.value) {
-    components.push({
-      id: 'battery',
-      title: 'Speicher',
-      icon: 'icons/owbBattery.svg',
-      soc: mqttStore.batterySocTotal as number,
-      power: mqttStore.batteryTotalPower('textValue') as string,
-      powerValue: mqttStore.batteryTotalPower('value') as number,
-      today: {
-        imported: mqttStore.batteryDailyImportedTotal('textValue') as string,
-        exported: mqttStore.batteryDailyExportedTotal('textValue') as string,
-      },
-    });
-  }
-
-  if (pvConfigured.value) {
-    components.push({
-      id: 'pv',
-      title: 'PV',
-      icon: 'icons/owbPV.svg',
-      power: mqttStore.getPvPower('textValue') as string,
-      powerValue: mqttStore.getPvPower('value') as number,
-      today: { exported: mqttStore.pvDailyExported('textValue') as string },
-    });
-  }
-
-  components.push({
-    id: 'house',
-    title: 'Haus',
-    icon: 'icons/owbHouse.svg',
-    power: mqttStore.getHomePower('textValue') as string,
-    powerValue: mqttStore.getHomePower('value') as number,
-    today: { imported: mqttStore.homeDailyYield('textValue') as string },
-  });
-
-  if (chargePointConfigured.value) {
-    components.push({
-      id: 'chargepoint',
-      title: 'Ladepunkte',
-      icon: 'icons/owbChargePoint.svg',
-      power: mqttStore.chargePointSumPower('textValue') as string,
-      powerValue: mqttStore.chargePointSumPower('value') as number,
-      today: {
-        imported: mqttStore.chargePointDailyImported('textValue') as string,
-        exported: mqttStore.chargePointDailyExported('textValue') as string,
-      },
-    });
-  }
-
-  return components;
-});
-
-const getArrowDirection = computed(() =>
-  rows.value.map((item) => {
-    let rotate = false;
-    let noCurrent = false;
-    if (item.powerValue === 0) noCurrent = true;
-    if (item.id === 'grid') {
-      rotate = Number(item.powerValue) < 0;
-    } else {
-      rotate = Number(item.powerValue) > 0;
-    }
-    return { id: item.id, rotate180: rotate, noCurrent };
-  }),
-);
-
-const arrowDirection = (itemId: string) =>
-  getArrowDirection.value.find((component) => component.id === itemId) ?? {
-    rotate180: false,
-    noCurrent: false,
-  };
-
-const rootRef = ref<HTMLElement | null>(null);
-const titleRef = ref<HTMLElement | null>(null);
-const rowHeight = ref(44);
-
-let slideElement: HTMLElement | null = null;
-let slideObserver: ResizeObserver | null = null;
-
-function getSlideElement(): HTMLElement | null {
-  return rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null;
-}
-
-const calculateRowHeight = () => {
-  nextTick(() => {
-    const slide = slideElement ?? getSlideElement();
-    if (!slide) return;
-    const style = window.getComputedStyle(slide);
-    const paddings =
-      parseFloat(style.paddingTop || '0') +
-      parseFloat(style.paddingBottom || '0');
-    const totalHeight = slide.clientHeight - paddings;
-    const titleHeight = titleRef.value?.offsetHeight ?? 0;
-    const verticalGaps = (rows.value.length - 1) * 3;
-    const safetyPadding = 12;
-    const availableHeight = Math.max(
-      0,
-      totalHeight - titleHeight - verticalGaps - safetyPadding,
-    );
-    const rowCount = Math.max(1, rows.value.length);
-    const ROW_MIN = 36;
-    const ROW_MAX = 65;
-    rowHeight.value = Math.max(
-      ROW_MIN,
-      Math.min(ROW_MAX, Math.floor(availableHeight / rowCount)),
-    );
-  });
-};
-
-onMounted(() => {
-  slideElement = getSlideElement();
-  // Observe slide size changes (e.g. viewport resize, fullscreen, layout shifts)
-  if (slideElement) {
-    slideObserver = new ResizeObserver(calculateRowHeight);
-    slideObserver.observe(slideElement);
-  }
-  // Fallback: also listen to window resize
-  window.addEventListener('resize', calculateRowHeight, { passive: true });
-  calculateRowHeight();
-});
-
-onBeforeUnmount(() => {
-  slideObserver?.disconnect();
-  slideObserver = null;
-  window.removeEventListener('resize', calculateRowHeight);
-});
-// Recompute when number of rows changes (components shown/hidden)
-watch(rows, calculateRowHeight, { deep: true });
-</script>
-
-<style scoped>
-.container {
-  min-height: 100%;
-  overflow-y: auto;
-}
-
-.centered-panel {
-  max-width: 600px;
-  width: 100%;
-}
-
-.banner-table :deep(.q-table__middle table) {
-  border-collapse: separate;
-  border-spacing: 0 3px; /* vertical gap between “cards” */
-}
-
-.banner-table :deep(tbody tr) {
-  height: var(--row-h);
-}
-
-.banner-table :deep(tbody td:first-child) {
-  border-top-left-radius: 8px;
-  border-bottom-left-radius: 8px;
-}
-.banner-table :deep(tbody td:last-child) {
-  border-top-right-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-
-.banner-table :deep(.q-table__container),
-.banner-table :deep(.q-table__middle) {
-  background: var(--q-background-2) !important;
-}
-
-.grid {
-  background: #d5bbc0;
-}
-.body--dark .grid {
-  background: #a13a41;
-}
-
-.battery {
-  background: #c7a388;
-}
-.body--dark .battery {
-  background: #b97a1f;
-}
-
-.pv {
-  background: #b3ccbc;
-}
-.body--dark .pv {
-  background: #27623a;
-}
-
-.house {
-  background: #bababf;
-}
-.body--dark .house {
-  background: #6e6e6e;
-}
-
-.chargepoint {
-  background: #b1c0d6;
-}
-.body--dark .chargepoint {
-  background: #254a8c;
-}
-
-.icon {
-  filter: brightness(0.4);
-}
-.body--dark .icon {
-  filter: brightness(1);
-}
-
-.rotate-180 {
-  transform: rotate(180deg);
-}
-
-@media (min-width: 500px) {
-  .banner-table tbody td {
-    font-size: 15px;
-  }
-}
-</style>
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
new file mode 100644
index 0000000000..7a9b8ae3e7
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -0,0 +1,390 @@
+<template>
+  <div class="container" ref="rootRef">
+    <div class="centered-panel">
+      <div class="scroll-container narrow-scrollbar">
+        <div
+          class="flex justify-between text-subtitle1 text-weight-bold q-mb-xs"
+          ref="titleRef"
+        >
+          <div v-if="currentPowerVisible">Aktuelle Leistung</div>
+          <div>Tageswerte</div>
+        </div>
+        <!-- grid -->
+        <q-expansion-item
+          dense
+          expand-separator
+          v-model="gridExpanded"
+          class="grid card"
+          :header-class="
+            secondaryCountersConfigured ? 'cursor-pointer' : 'no-pointer'
+          "
+        >
+          <template #header>
+            <DailyTotalsRow
+              :item="gridData"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+              :secondaryCountersConfigured="secondaryCountersConfigured"
+              :gridExpanded="gridExpanded"
+            />
+          </template>
+          <!-- Secondary Counters -->
+          <div
+            v-for="item in secondaryCounterData"
+            :key="item.id"
+            class="counter"
+          >
+            <DailyTotalsRow
+              :item="item"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+            />
+          </div>
+        </q-expansion-item>
+        <!-- all other components -->
+        <q-expansion-item
+          v-for="item in componentData"
+          :key="item.id"
+          dense
+          expand-separator
+          :class="[item.id, 'card']"
+          header-class="no-pointer"
+        >
+          <template #header>
+            <DailyTotalsRow
+              :item="item"
+              :rowHeight="rowHeight"
+              :componentNameVisible="componentNameVisible"
+              :currentPowerVisible="currentPowerVisible"
+              :socValueVisible="socValueVisible"
+            >
+              <template #right-label>
+                <template
+                  v-if="item.id === 'battery' || item.id === 'chargepoint'"
+                >
+                  <div>Geladen:</div>
+                  <div>Entladen:</div>
+                </template>
+                <template v-else-if="item.id === 'pv'">
+                  <div>Ertrag:</div>
+                </template>
+                <template v-else-if="item.id === 'house'">
+                  <div>Verbrauch:</div>
+                </template>
+              </template>
+              <template #right-value>
+                <div
+                  v-if="
+                    ['battery', 'grid', 'house', 'chargepoint'].includes(
+                      item.id,
+                    )
+                  "
+                >
+                  {{ item.today.imported }}
+                </div>
+                <div
+                  v-if="
+                    ['battery', 'grid', 'pv', 'chargepoint'].includes(item.id)
+                  "
+                >
+                  {{ item.today.exported }}
+                </div>
+              </template>
+            </DailyTotalsRow>
+          </template>
+        </q-expansion-item>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  watch,
+} from 'vue';
+import { useQuasar } from 'quasar';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import DailyTotalsRow from './DailyTotalsRow.vue';
+import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
+
+const $q = useQuasar();
+const mqttStore = useMqttStore();
+const gridExpanded = ref(false);
+
+const componentNameVisible = computed(() => $q.screen.width >= 375);
+const currentPowerVisible = computed(() => $q.screen.width >= 500);
+const socValueVisible = computed(() => $q.screen.width >= 700);
+
+const batteryConfigured = computed(() => mqttStore.batteryConfigured);
+const pvConfigured = computed(() => mqttStore.getPvConfigured);
+const chargePointConfigured = computed(
+  () => mqttStore.chargePointIds.length > 0,
+);
+const secondaryCountersConfigured = computed(
+  () => mqttStore.getSecondaryCounterIds.length > 0,
+);
+
+const gridData = computed((): DailyTotalsItem => {
+  return {
+    id: 'grid',
+    title: 'Netz',
+    icon: 'icons/owbGrid.svg',
+    power: mqttStore.getCounterPower('textValue') as string,
+    powerValue: mqttStore.getCounterPower('value') as number,
+    today: {
+      imported: mqttStore.counterDailyImported('textValue') as string,
+      exported: mqttStore.counterDailyExported('textValue') as string,
+    },
+  };
+});
+
+const secondaryCounterData = computed((): DailyTotalsItem[] => {
+  const counters: DailyTotalsItem[] = [];
+  if (gridExpanded.value && secondaryCountersConfigured.value) {
+    mqttStore.getSecondaryCounterIds.forEach((id) => {
+      counters.push({
+        id: `counter-${id}`,
+        title: mqttStore.getComponentName(id),
+        icon: 'icons/owbCounter.svg',
+        power: mqttStore.getCounterPower('textValue', id) as string,
+        powerValue: mqttStore.getCounterPower('value', id) as number,
+        today: {
+          imported: mqttStore.counterDailyImported('textValue', id) as string,
+          exported: mqttStore.counterDailyExported('textValue', id) as string,
+        },
+      });
+    });
+  }
+  return counters;
+});
+
+const componentData = computed((): DailyTotalsItem[] => {
+  const components: DailyTotalsItem[] = [];
+
+  if (batteryConfigured.value) {
+    components.push({
+      id: 'battery',
+      title: 'Speicher',
+      icon: 'icons/owbBattery.svg',
+      soc: mqttStore.batterySocTotal as number,
+      power: mqttStore.batteryTotalPower('textValue') as string,
+      powerValue: mqttStore.batteryTotalPower('value') as number,
+      today: {
+        imported: mqttStore.batteryDailyImportedTotal('textValue') as string,
+        exported: mqttStore.batteryDailyExportedTotal('textValue') as string,
+      },
+    });
+  }
+
+  if (pvConfigured.value) {
+    components.push({
+      id: 'pv',
+      title: 'PV',
+      icon: 'icons/owbPV.svg',
+      power: mqttStore.getPvPower('textValue') as string,
+      powerValue: mqttStore.getPvPower('value') as number,
+      today: { exported: mqttStore.pvDailyExported('textValue') as string },
+    });
+  }
+
+  components.push({
+    id: 'house',
+    title: 'Haus',
+    icon: 'icons/owbHouse.svg',
+    power: mqttStore.getHomePower('textValue') as string,
+    powerValue: mqttStore.getHomePower('value') as number,
+    today: { imported: mqttStore.homeDailyYield('textValue') as string },
+  });
+
+  if (chargePointConfigured.value) {
+    components.push({
+      id: 'chargepoint',
+      title: 'Ladepunkte',
+      icon: 'icons/owbChargePoint.svg',
+      power: mqttStore.chargePointSumPower('textValue') as string,
+      powerValue: mqttStore.chargePointSumPower('value') as number,
+      today: {
+        imported: mqttStore.chargePointDailyImported('textValue') as string,
+        exported: mqttStore.chargePointDailyExported('textValue') as string,
+      },
+    });
+  }
+  return components;
+});
+
+const rootRef = ref<HTMLElement | null>(null);
+const titleRef = ref<HTMLElement | null>(null);
+const rowHeight = ref(45); // default / fallback
+
+const totalRowCount = computed(() => {
+  // grid header + secondary counters (only when expanded) + other components
+  return 1 + secondaryCounterData.value.length + componentData.value.length;
+});
+
+const slideObserver = ref<ResizeObserver | null>(null);
+const slideElement = computed<HTMLElement | null>(() => {
+  return rootRef.value?.closest('.q-carousel__slide') as HTMLElement | null;
+});
+
+const calculateRowHeight = () => {
+  nextTick(() => {
+    const slide = slideElement.value;
+    if (!slide) return;
+    const style = window.getComputedStyle(slide);
+    const paddings =
+      parseFloat(style.paddingTop || '0') +
+      parseFloat(style.paddingBottom || '0');
+    const totalHeight = slide.clientHeight - paddings;
+    const titleHeight = titleRef.value?.offsetHeight ?? 0;
+    // small vertical gaps between rows + some safety padding
+    const verticalGaps = (totalRowCount.value - 1) * 4;
+    const safetyPadding = 40;
+    const availableHeight = Math.max(
+      0,
+      totalHeight - titleHeight - verticalGaps - safetyPadding,
+    );
+    const ROW_MIN = 42;
+    const ROW_MAX = 75;
+    if (totalRowCount.value <= 0) {
+      rowHeight.value = ROW_MIN;
+      return;
+    }
+    rowHeight.value = Math.max(
+      ROW_MIN,
+      Math.min(ROW_MAX, Math.floor(availableHeight / totalRowCount.value)),
+    );
+  });
+};
+
+onMounted(() => {
+  if (slideElement.value) {
+    slideObserver.value = new ResizeObserver(calculateRowHeight);
+    slideObserver.value.observe(slideElement.value);
+  }
+
+  window.addEventListener('resize', calculateRowHeight, { passive: true });
+  calculateRowHeight();
+});
+
+onBeforeUnmount(() => {
+  slideObserver.value?.disconnect();
+  slideObserver.value = null;
+  window.removeEventListener('resize', calculateRowHeight);
+});
+
+// Recompute when rows or grid expansion change
+watch(
+  () => ({
+    rows: componentData.value.length + secondaryCounterData.value.length,
+    expanded: gridExpanded.value,
+  }),
+  () => calculateRowHeight(),
+);
+</script>
+
+<style scoped>
+.container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+.centered-panel {
+  width: 100%;
+  max-width: 600px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  overflow: hidden; /* clip scroll area */
+}
+.scroll-container {
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto; /* show scrollbar when needed */
+}
+/* Hide expansion item chevron */
+:deep(.q-expansion-item__toggle-icon) {
+  display: none !important;
+}
+/* Remove the padding inside expansion header */
+:deep(.q-expansion-item__container .q-item) {
+  padding: 0 0 !important;
+}
+/* Remove the padding inside q-item__section */
+:deep(.q-item__section) {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+/* headers that should NOT look clickable */
+:deep(.no-pointer) {
+  cursor: default !important;
+}
+/* Expansion item: override any clickable helper classes- prevent cursor: pointer */
+:deep(.no-pointer.q-item--clickable),
+:deep(.no-pointer.q-link),
+:deep(.no-pointer.cursor-pointer) {
+  cursor: default !important;
+  pointer-events: none;
+}
+.card,
+.grid {
+  border-radius: 0.5rem;
+  margin-bottom: 0.125rem;
+}
+.grid {
+  background: var(--q-grid-fill);
+  border: 0.125rem solid var(--q-grid-stroke);
+}
+.counter {
+  background: var(--q-secondary-counter-fill);
+  border-top: 0.125rem solid var(--q-secondary-counter-stroke);
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+}
+.battery {
+  background: var(--q-battery-fill);
+  border: 0.125rem solid var(--q-battery-stroke);
+}
+.pv {
+  background: var(--q-pv-fill);
+  border: 0.125rem solid var(--q-pv-stroke);
+}
+.house {
+  background: var(--q-home-fill);
+  border: 0.125rem solid var(--q-home-stroke);
+}
+.chargepoint {
+  background: var(--q-charge-point-fill);
+  border: 0.125rem solid var(--q-charge-point-stroke);
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+/* Dark mode overrides */
+.body--dark .grid {
+  background: var(--q-dark-daily-totals-grid-fill);
+  border: 0.125rem solid var(--q-dark-daily-totals-grid-stroke);
+}
+.body--dark .battery {
+  background: var(--q-dark-daily-totals-battery-fill);
+  border: 0.125rem solid var(--q-dark-daily-totals-battery-stroke);
+}
+.body--dark .pv {
+  background: var(--q-dark-daily-totals-pv-fill);
+}
+.body--dark .house {
+  background: var(--q-dark-daily-totals-house-fill);
+}
+.body--dark .chargepoint {
+  background: var(--q-dark-daily-totals-chargepoint-fill);
+}
+</style>
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
new file mode 100644
index 0000000000..a87bca1974
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotalsRow.vue
@@ -0,0 +1,264 @@
+<template>
+  <div class="component-container">
+    <!-- Icon -->
+    <div class="col-icon">
+      <img :src="props.item.icon" class="icon" />
+    </div>
+    <!-- Title -->
+    <div class="col-title text-weight-bold">
+      <div v-if="componentNameVisible" class="title-wrapper">
+        <template v-if="props.item.id.startsWith('counter-')">
+          <div class="ellipsis-wrapper">
+            {{ props.item.title }}
+            <q-tooltip>{{ props.item.title }}</q-tooltip>
+          </div>
+        </template>
+        <template v-else>
+          {{ props.item.title }}
+        </template>
+        <!-- Expansion chevron icon -->
+        <q-icon
+          v-if="props.item.id === 'grid' && secondaryCountersConfigured"
+          name="keyboard_arrow_down"
+          :class="['expand-icon', { 'rotate-180': gridExpanded }]"
+        />
+      </div>
+    </div>
+    <!-- SOC -->
+    <div :class="props.socValueVisible ? 'col-soc' : 'col-soc-spacer'">
+      <span v-if="props.socValueVisible && props.item.id === 'battery'">
+        {{ props.item.soc }}%
+      </span>
+    </div>
+    <!-- Arrow -->
+    <div class="col-arrow">
+      <q-icon
+        v-if="props.currentPowerVisible"
+        :name="
+          item.id === 'house'
+            ? 'horizontal_rule'
+            : arrowDirection(item.id).noCurrent
+              ? 'horizontal_rule'
+              : 'double_arrow'
+        "
+        :class="{ 'rotate-180': arrowDirection(props.item.id).rotate180 }"
+      />
+    </div>
+    <!-- Power -->
+    <div class="col-power">
+      <span v-if="props.currentPowerVisible">
+        {{ props.item.power.replace('-', '') }}
+      </span>
+    </div>
+
+    <div class="col-flex"></div>
+
+    <!-- Right label -->
+    <div class="col-right-label text-weight-bold">
+      <slot name="right-label" :item="props.item">
+        <template
+          v-if="
+            props.item.id === 'grid' || props.item.id.startsWith('counter-')
+          "
+        >
+          <div>Bezug:</div>
+          <div>Einspeisung:</div>
+        </template>
+      </slot>
+    </div>
+    <!-- Right value -->
+    <div class="col-right-value">
+      <slot name="right-value" :item="props.item">
+        <template
+          v-if="
+            props.item.id === 'grid' || props.item.id.startsWith('counter-')
+          "
+        >
+          <div>{{ props.item.today.imported }}</div>
+          <div>{{ props.item.today.exported }}</div>
+        </template>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
+
+const mqttStore = useMqttStore();
+
+const props = defineProps<{
+  item: DailyTotalsItem;
+  rowHeight: number;
+  componentNameVisible: boolean;
+  currentPowerVisible: boolean;
+  socValueVisible: boolean;
+  secondaryCountersConfigured?: boolean;
+  gridExpanded?: boolean;
+}>();
+
+const rowHeightCssValue = computed(() => `${props.rowHeight}px`);
+
+const arrowDirection = (id: string) => {
+  let value = 0;
+  switch (id) {
+    case 'grid':
+      value = mqttStore.getCounterPower('value') as number;
+      break;
+    case 'battery':
+      value = mqttStore.batteryTotalPower('value') as number;
+      break;
+    case 'pv':
+      value = mqttStore.getPvPower('value') as number;
+      break;
+    case 'house':
+      value = mqttStore.getHomePower('value') as number;
+      break;
+    case 'chargepoint':
+      value = mqttStore.chargePointSumPower('value') as number;
+      break;
+    default:
+      if (id.startsWith('counter-')) {
+        const counterId = Number(id.replace('counter-', ''));
+        value = mqttStore.getCounterPower('value', counterId) as number;
+      }
+  }
+  const noCurrent = value === 0;
+  let rotate180 = false;
+
+  if (id === 'grid' || id.startsWith('counter-')) rotate180 = value < 0;
+  else if (id !== 'house') rotate180 = value > 0;
+
+  return { noCurrent, rotate180 };
+};
+</script>
+
+<style scoped>
+.component-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: v-bind(rowHeightCssValue);
+  gap: 0.4rem;
+  font-size: 0.9rem;
+  padding-inline: 0.5rem;
+}
+/* allow columns to shrink properly in flex layout */
+.component-container > div {
+  min-width: 0;
+  flex-shrink: 1;
+}
+.col-icon {
+  flex: 0 0 2rem;
+  display: flex;
+  justify-content: center;
+}
+.icon {
+  width: 1.75rem;
+  filter: brightness(0.4);
+}
+.body--dark .icon {
+  filter: brightness(1);
+}
+.col-title {
+  flex: 0 0 5.5rem;
+}
+.title-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.ellipsis-wrapper {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.expand-icon {
+  font-size: 1.3rem;
+}
+.rotate-180 {
+  transform: rotate(180deg);
+}
+.col-soc {
+  flex: 0 0 3rem;
+  text-align: right;
+  white-space: nowrap;
+}
+.col-soc-spacer {
+  flex: 0 0 0;
+  overflow: hidden;
+}
+.col-arrow {
+  flex: 0 0 1.3rem;
+  text-align: center;
+}
+.col-power {
+  flex: 0 0 4rem;
+  text-align: right;
+  white-space: nowrap;
+}
+/* flexible column before right-side labels */
+.col-flex {
+  flex: 1 1 auto;
+}
+.col-right-label,
+.col-right-value {
+  display: grid;
+  grid-template-rows: auto auto;
+  align-items: center;
+  white-space: nowrap;
+}
+.col-right-label {
+  flex: 0 0 5rem;
+  text-align: right;
+}
+.col-right-value {
+  flex: 0 0 5rem;
+  text-align: right;
+}
+
+@media (max-width: 480px) {
+  .component-container {
+    font-size: 0.85rem;
+    gap: 0.3rem;
+  }
+  .col-title {
+    flex: 0 0 4.2rem;
+  }
+  .col-soc {
+    flex: 0 0 2.3rem;
+  }
+  .col-power {
+    flex: 0 0 3.4rem;
+  }
+  .col-right-label {
+    flex: 0 0 5rem;
+  }
+  .col-right-value {
+    flex: 0 0 5.5rem;
+  }
+}
+
+@media (max-width: 380px) {
+  .component-container {
+    font-size: 0.75rem;
+  }
+  .col-title {
+    flex: 0 0 3.5rem;
+  }
+  .col-soc {
+    flex: 0 0 1.8rem;
+  }
+  .col-power {
+    flex: 0 0 2.8rem;
+  }
+  .col-right-label {
+    flex: 0 0 8rem;
+  }
+  .col-right-value {
+    flex: 0 0 5.5rem;
+  }
+}
+</style>
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 c3f0dc85f4..ea1200dd8a 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
@@ -49,7 +49,7 @@ const absoluteValueObject = (valueObject: ValueObject): ValueObject => {
 };
 
 const gridPower = computed(
-  () => mqttStore.getGridPower('object') as ValueObject,
+  () => mqttStore.getCounterPower('object') as ValueObject,
 );
 const gridConsumption = computed(() => Number(gridPower.value.value) > 0);
 const gridFeedIn = computed(() => Number(gridPower.value.value) < 0);
@@ -286,18 +286,9 @@ const animationDurations = computed(() => {
     home: calcDuration(Number(homePower.value.value), maxPower),
     pv: calcDuration(Number(pvPower.value.value), maxPower),
     battery: calcDuration(Number(batteryPower.value.value), maxPower),
-    chargePoint1: calcDuration(
-      Number(chargePoint1Power.value.value),
-      maxPower,
-    ),
-    chargePoint2: calcDuration(
-      Number(chargePoint2Power.value.value),
-      maxPower,
-    ),
-    chargePoint3: calcDuration(
-      Number(chargePoint3Power.value.value),
-      maxPower,
-    ),
+    chargePoint1: calcDuration(Number(chargePoint1Power.value.value), maxPower),
+    chargePoint2: calcDuration(Number(chargePoint2Power.value.value), maxPower),
+    chargePoint3: calcDuration(Number(chargePoint3Power.value.value), maxPower),
     chargePointSum: calcDuration(
       Number(chargePointSumPower.value.value),
       maxPower,
@@ -837,7 +828,7 @@ path.animatedReverse.grid {
 
 path.animated.home,
 path.animatedReverse.home {
-  stroke: var(--q-flow-home-stroke);
+  stroke: var(--q-home-stroke);
   animation-duration: v-bind('animationDurations.home');
 }
 
@@ -849,28 +840,28 @@ path.animatedReverse.pv {
 
 path.animated.battery,
 path.animatedReverse.battery {
-  stroke: var(--q-warning);
+  stroke: var(--q-battery-stroke);
   animation-duration: v-bind('animationDurations.battery');
 }
 
 path.animated.charge-point-1,
 path.animatedReverse.charge-point-1 {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePoint1');
 }
 path.animated.charge-point-2,
 path.animatedReverse.charge-point-2 {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePoint2');
 }
 path.animated.charge-point-3,
 path.animatedReverse.charge-point-3 {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePoint3');
 }
 path.animated.charge-point-sum,
 path.animatedReverse.charge-point-sum {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
   animation-duration: v-bind('animationDurations.chargePointSum');
 }
 
@@ -909,7 +900,7 @@ path.animatedReverse.vehicle-3 {
 
 :root {
   path.home {
-    stroke: var(--q-grey);
+    stroke: var(--q-home-stroke);
   }
 }
 
@@ -958,7 +949,7 @@ text .fill-success {
 }
 
 text .fill-danger {
-  fill: var(--q-negative);
+  fill: var(--q-grid-stroke);
 }
 
 text .fill-dark {
@@ -966,42 +957,42 @@ text .fill-dark {
 }
 
 .grid text {
-  fill: var(--q-negative);
+  fill: var(--q-grid-stroke);
 }
 
 .grid circle,
 .grid rect {
-  stroke: var(--q-negative);
+  stroke: var(--q-grid-stroke);
 }
 
 .grid circle {
-  fill: color-mix(in srgb, var(--q-negative) 20%, transparent);
+  fill: var(--q-grid-fill);
 }
 
 .pv text {
-  fill: var(--q-positive);
+  fill: var(--q-pv-stroke);
 }
 
 .pv circle,
 .pv rect {
-  stroke: var(--q-positive);
+  stroke: var(--q-pv-stroke);
 }
 
 .pv circle {
-  fill: color-mix(in srgb, var(--q-positive) 30%, transparent);
+  fill: var(--q-pv-fill);
 }
 
 .battery text {
-  fill: var(--q-battery);
+  fill: var(--q-battery-stroke);
 }
 
 .battery circle,
 .battery rect {
-  stroke: var(--q-battery);
+  stroke: var(--q-battery-stroke);
 }
 
 .battery circle:not(.soc) {
-  fill: color-mix(in srgb, var(--q-battery) 50%, transparent);
+  fill: var(--q-battery-fill);
 }
 
 :root {
@@ -1018,24 +1009,24 @@ text .fill-dark {
 
 .home circle,
 .home rect {
-  stroke: var(--q-flow-home-stroke);
+  stroke: var(--q-home-stroke);
 }
 
 .home circle {
-  fill: color-mix(in srgb, var(--q-brown-text) 20%, transparent);
+  fill: var(--q-home-fill);
 }
 
 .charge-point text {
-  fill: var(--q-primary);
+  fill: var(--q-charge-point-stroke);
 }
 
 .charge-point circle,
 .charge-point rect {
-  stroke: var(--q-primary);
+  stroke: var(--q-charge-point-stroke);
 }
 
 .charge-point circle {
-  fill: color-mix(in srgb, var(--q-primary) 30%, transparent);
+  fill: var(--q-charge-point-fill);
 }
 
 .background-circle {
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 942141836d..8b8c1db139 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
@@ -118,13 +118,20 @@ const chartRange = computed(
   () => mqttStore.themeConfiguration?.history_chart_range || 3600,
 );
 
+const getGlobalColor = (name: string, fallback?: string) => {
+  const fromRoot = getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  return fromRoot || fallback;
+};
+
 const secondaryCounterDatasets = computed(() =>
   mqttStore.getSecondaryCounterIds.map((id) => ({
     label: mqttStore.getComponentName(id),
     category: 'component',
     unit: 'kW',
-    borderColor: '#FFA9A8',
-    backgroundColor: 'rgba(255,169,168, 0.2)',
+    borderColor: getGlobalColor('--q-secondary-counter-stroke'),
+    backgroundColor: getGlobalColor('--q-secondary-counter-fill'),
     data: selectedData.value.map((item) => ({
       x: item.timestamp * 1000,
       y: item[`counter${id}-power`] ?? 0,
@@ -143,8 +150,8 @@ const chargePointDatasets = computed(() =>
     label: `${chargePointNames.value(cpId)}`,
     category: 'chargepoint',
     unit: 'kW',
-    borderColor: '#4766b5',
-    backgroundColor: 'rgba(71, 102, 181, 0.2)',
+    borderColor: getGlobalColor('--q-charge-point-stroke'),
+    backgroundColor: getGlobalColor('--q-charge-point-fill'),
     data: selectedData.value.map((item) => ({
       x: item.timestamp * 1000,
       y: item[`cp${cpId}-power`] || 0,
@@ -223,8 +230,8 @@ const lineChartData = computed(() => {
         label: gridMeterName.value,
         category: 'component',
         unit: 'kW',
-        borderColor: '#a33c42',
-        backgroundColor: 'rgba(239,182,188, 0.2)',
+        borderColor: getGlobalColor('--q-grid-stroke'),
+        backgroundColor: getGlobalColor('--q-grid-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item.grid,
@@ -240,8 +247,8 @@ const lineChartData = computed(() => {
         label: 'Hausverbrauch',
         category: 'component',
         unit: 'kW',
-        borderColor: '#949aa1',
-        backgroundColor: 'rgba(148, 154, 161, 0.2)',
+        borderColor: getGlobalColor('--q-home-stroke'),
+        backgroundColor: getGlobalColor('--q-home-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['house-power'],
@@ -258,8 +265,8 @@ const lineChartData = computed(() => {
         label: 'PV ges.',
         category: 'component',
         unit: 'kW',
-        borderColor: 'green',
-        backgroundColor: 'rgba(144, 238, 144, 0.2)',
+        borderColor: getGlobalColor('--q-pv-stroke'),
+        backgroundColor: getGlobalColor('--q-pv-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['pv-all'],
@@ -275,8 +282,8 @@ const lineChartData = computed(() => {
         label: 'Speicher ges.',
         category: 'component',
         unit: 'kW',
-        borderColor: '#b5a647',
-        backgroundColor: 'rgba(181, 166, 71, 0.2)',
+        borderColor: getGlobalColor('--q-battery-stroke'),
+        backgroundColor: getGlobalColor('--q-battery-fill'),
         data: selectedData.value.map((item) => ({
           x: item.timestamp * 1000,
           y: item['bat-all-power'],
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 286da62c15..0c0d3f7f87 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -35,7 +35,19 @@ $brown-text: #524f57;
 $white: #ffffff;
 $grey: #9e9e9e; // Quasar's default grey
 $toggle-off: #e0e0e0;
+$grid-stroke: #a33c42;
+$grid-fill: #efb6bc33;
+$secondary-counter-stroke: #FFA9A8;
+$secondary-counter-fill: #FFA9A833;
+$home-stroke: #949aa1;
+$home-fill: #949aa133;
+$pv-stroke: #66bd7a;
+$pv-fill: #90ee9033;
 $battery: #ba7128;
+$battery-stroke: #ba7128;
+$battery-fill: #ba712833;
+$charge-point-stroke: #5c93d1;
+$charge-point-fill: #5c93d14D;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -52,8 +64,19 @@ $battery: #ba7128;
   --q-grey: #{$grey};
   --q-carousel-control: #{$primary};
   --q-toggle-off: #{$toggle-off};
-  --q-flow-home-stroke: #{$grey};
-  --q-battery: #{$battery};
+  --q-grid-fill: #{$grid-fill};
+  --q-grid-stroke: #{$grid-stroke};
+  --q-home-fill: #{$home-fill};
+  --q-home-stroke: #{$home-stroke};
+  --q-secondary-counter-stroke: #{$secondary-counter-stroke};
+  --q-secondary-counter-fill: #{$secondary-counter-fill};
+  --q-pv-stroke: #{$pv-stroke};
+  --q-pv-fill: #{$pv-fill};
+  --q-battery-stroke: #{$battery-stroke};
+  --q-battery-fill: #{$battery-fill};
+  --q-charge-point-stroke: #{$charge-point-stroke};
+  --q-charge-point-fill: #{$charge-point-fill};
+
   // Main background
   background-color: var(--q-background-1);
   // Text color
@@ -193,7 +216,7 @@ $battery: #ba7128;
   }
 
   // Scrollbar styling für .q-list auto Light Theme
-  .q-list {
+  .q-list, .narrow-scrollbar {
     scrollbar-width: thin;
     scrollbar-color: var(--q-primary) var(--q-background-2);
   }
@@ -232,6 +255,14 @@ $dark-background-2: #010322;
 $dark-list: rgb(40, 42, 62);
 $dark-carousel: #8b8f9f;
 $dark-tab-icon: #d7d9e0;
+$dark-daily-totals-grid-fill: #a13a41;
+$dark-daily-totals-grid-stroke: #da959a;
+$dark-daily-totals-battery-fill: #b97a1f;
+$dark-daily-totals-battery-stroke: #e7c08a;
+$dark-daily-totals-pv-fill: #27623a;
+$dark-daily-totals-house-fill: #6e6e6e;
+$dark-daily-totals-chargepoint-fill: #254a8c;
+
 // Dark theme
 .body--dark {
   --q-primary: #{$dark-primary};
@@ -249,8 +280,26 @@ $dark-tab-icon: #d7d9e0;
   --q-toggle-off: #{$toggle-off};
   --q-list: #{$dark-list};
   --q-tab-icon: #{$dark-tab-icon};
-  --q-flow-home-stroke: #{$grey};
-  --q-battery: #{$dark-warning};
+  --q-grid-fill: #{$grid-fill};
+  --q-grid-stroke: #{$grid-stroke};
+  --q-home-fill: #{$home-fill};
+  --q-home-stroke: #{$home-stroke};
+  --q-secondary-counter-stroke: #{$secondary-counter-stroke};
+  --q-secondary-counter-fill: #{$secondary-counter-fill};
+  --q-pv-stroke: #{$pv-stroke};
+  --q-pv-fill: #{$pv-fill};
+  --q-battery-stroke: #{$battery-stroke};
+  --q-battery-fill: #{$battery-fill};
+  --q-charge-point-stroke: #{$charge-point-stroke};
+  --q-charge-point-fill: #{$charge-point-fill};
+  --q-dark-daily-totals-grid-fill: #{$dark-daily-totals-grid-fill};
+  --q-dark-daily-totals-grid-stroke: #{$dark-daily-totals-grid-stroke};
+  --q-dark-daily-totals-battery-fill: #{$dark-daily-totals-battery-fill};
+  --q-dark-daily-totals-battery-stroke: #{$dark-daily-totals-battery-stroke};
+  --q-dark-daily-totals-pv-fill: #{$dark-daily-totals-pv-fill};
+  --q-dark-daily-totals-house-fill: #{$dark-daily-totals-house-fill};
+  --q-dark-daily-totals-chargepoint-fill: #{$dark-daily-totals-chargepoint-fill};
+
   // Main background
   background-color: $dark-page;
   // Text color
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 bad1ca5fcf..d3bde18597 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
@@ -3338,19 +3338,20 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get grid power identified from root of component hierarchy
+   * Get counter power identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param counterId counter ID
    * @returns string | number | ValueObject | undefined
    */
-  const getGridPower = computed(() => {
-    return (returnType: string = 'textValue') => {
-      const gridId = getGridId.value;
-      if (gridId === undefined) {
+  const getCounterPower = computed(() => {
+    return (returnType: string = 'textValue', counterId?: number) => {
+      const id = counterId ?? getGridId.value;
+      if (id === undefined) {
         return '---';
       }
       const power =
         (getValue.value(
-          `openWB/counter/${gridId}/get/power`,
+          `openWB/counter/${id}/get/power`,
           undefined,
           0,
         ) as number) || 0;
@@ -3366,19 +3367,20 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get daily grid energy imported identified from root of component hierarchy
+   * Get daily counter energy imported identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param counterId counter ID
    * @returns string | number | ValueObject | undefined
    */
-  const gridDailyImported = computed(() => {
-    return (returnType: string = 'textValue') => {
-      const gridId = getGridId.value;
-      if (gridId === undefined) {
+  const counterDailyImported = computed(() => {
+    return (returnType: string = 'textValue', counterId?: number ) => {
+      const id = counterId ?? getGridId.value;
+      if (id === undefined) {
         return '---';
       }
       const energy =
         (getValue.value(
-          `openWB/counter/${gridId}/get/daily_imported`,
+          `openWB/counter/${id}/get/daily_imported`,
           undefined,
           0,
         ) as number) || 0;
@@ -3394,19 +3396,20 @@ export const useMqttStore = defineStore('mqtt', () => {
   });
 
   /**
-   * Get daily grid energy exported identified from root of component hierarchy
+   * Get daily counter energy exported identified by root grid counter in component hierarchy or counterId
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
+   * @param counterId counter ID
    * @returns string | number | ValueObject | undefined
    */
-  const gridDailyExported = computed(() => {
-    return (returnType: string = 'textValue') => {
-      const gridId = getGridId.value;
-      if (gridId === undefined) {
+  const counterDailyExported = computed(() => {
+    return (returnType: string = 'textValue', counterId?: number) => {
+      const id = counterId ?? getGridId.value;
+      if (id === undefined) {
         return '---';
       }
       const energy =
         (getValue.value(
-          `openWB/counter/${gridId}/get/daily_exported`,
+          `openWB/counter/${id}/get/daily_exported`,
           undefined,
           0,
         ) as number) || 0;
@@ -3705,9 +3708,9 @@ export const useMqttStore = defineStore('mqtt', () => {
     getAllCounterIds,
     getSecondaryCounterIds,
     getComponentName,
-    getGridPower,
-    gridDailyImported,
-    gridDailyExported,
+    getCounterPower,
+    counterDailyImported,
+    counterDailyExported,
     // Home data
     getHomePower,
     homeDailyYield,