diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 55ebe91f5b..f82a62575c 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -5,7 +5,6 @@
     :class="{
       'battery-sum': props.batteryId === -1,
       'full-height': props.fullHeight,
-      'has-custom-color': batteryColor,
     }"
   >
     <q-card-section class="row no-wrap items-center justify-between">
@@ -164,8 +163,6 @@ const dailyExportedEnergy = computed(() => {
     '---'
   );
 });
-
-const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
 </script>
 
 <style scoped lang="scss">
@@ -175,10 +172,6 @@ const batteryColor = computed(() => mqttStore.batteryColor(props.batteryId));
   border-radius: 15px;
 }
 
-.battery-card.has-custom-color {
-  border-left: 4px solid v-bind(batteryColor);
-}
-
 .q-card__section {
   padding-left: $space-base;
   padding-right: $space-base;
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 d667d45dc1..226067dbd9 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
@@ -223,8 +223,6 @@ const secondaryCountersConfigured = computed(
   () => secondaryCounterData.value.length > 0,
 );
 
-const gridID = computed(() => mqttStore.gridId);
-
 const gridData = computed((): DailyTotalsItem => {
   let data: DailyTotalsItem = {
     id: 'grid',
@@ -243,10 +241,7 @@ const gridData = computed((): DailyTotalsItem => {
         imported: mqttStore.counterDailyImported('textValue') as string,
         exported: mqttStore.counterDailyExported('textValue') as string,
       },
-      color:
-        gridID.value !== undefined
-          ? mqttStore.gridComponentColor(gridID.value) || undefined
-          : undefined,
+      color: 'var(--q-grid-stroke)',
     };
   }
   return data;
@@ -268,7 +263,7 @@ const secondaryCounterData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.counterDailyImported('textValue', id) as string,
           exported: mqttStore.counterDailyExported('textValue', id) as string,
         },
-        color: mqttStore.gridComponentColor(id) || undefined,
+        color: mqttStore.gridComponentColor(id) || 'var(--q-secondary-counter-stroke)',
       });
     }
   });
@@ -297,7 +292,7 @@ const individualChargePointData = computed((): DailyTotalsItem[] => {
             id,
           ) as string,
         },
-        color: mqttStore.chargePointColor(id) || undefined,
+        color: mqttStore.chargePointColor(id) || 'var(--q-charge-point-stroke)',
       });
     }
   });
@@ -322,7 +317,7 @@ const individualBatteryData = computed((): DailyTotalsItem[] => {
           imported: mqttStore.batteryDailyImported(id, 'textValue') as string,
           exported: mqttStore.batteryDailyExported(id, 'textValue') as string,
         },
-        color: mqttStore.batteryColor(id) || undefined,
+        color: 'var(--q-battery-stroke)',
       });
     }
   });
@@ -348,10 +343,8 @@ const componentData = computed((): DailyTotalsItem[] => {
         imported: mqttStore.batteryDailyImportedTotal('textValue') as string,
         exported: mqttStore.batteryDailyExportedTotal('textValue') as string,
       },
+      color: 'var(--q-battery-stroke)',
     };
-    if (mqttStore.batteryIds.length === 1) {
-      item.color = mqttStore.batteryColor(mqttStore.batteryIds[0]) || undefined;
-    }
     components.push(item);
   }
 
@@ -364,7 +357,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       power: mqttStore.getPvPower('textValue') as string,
       powerValue: mqttStore.getPvPower('value') as number,
       today: { exported: mqttStore.pvDailyExported('textValue') as string },
-      color: mqttStore.pvAggregateColor || 'var(--q-diagram-icon)',
+      color: 'var(--q-pv-stroke)',
     });
   }
 
@@ -377,6 +370,7 @@ const componentData = computed((): DailyTotalsItem[] => {
       power: mqttStore.homePower('textValue') as string,
       powerValue: mqttStore.homePower('value') as number,
       today: { imported: mqttStore.homeDailyYield('textValue') as string },
+      color: 'var(--q-home-stroke)',
     });
   }
 
@@ -386,6 +380,11 @@ const componentData = computed((): DailyTotalsItem[] => {
       title: mqttStore.chargePointIds.length > 1 ? 'Ladepunkte' : 'Ladepunkt',
       level: 'primary',
       icon: 'chargepoint',
+      color:
+        mqttStore.chargePointIds.length === 1
+          ? mqttStore.chargePointColor(mqttStore.chargePointIds[0]) ||
+            'var(--q-charge-point-stroke)'
+          : 'var(--q-charge-point-stroke)',
     };
     if (chargePointSumPowerAvailable.value) {
       item = {
@@ -397,10 +396,6 @@ const componentData = computed((): DailyTotalsItem[] => {
           exported: mqttStore.chargePointDailyExported('textValue') as string,
         },
       };
-      if (mqttStore.chargePointIds.length === 1) {
-        item.color =
-          mqttStore.chargePointColor(mqttStore.chargePointIds[0]) || undefined;
-      }
     }
     components.push(item);
   }
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 4857b8416c..1689c229be 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
@@ -181,7 +181,6 @@ const iconMap = {
 .base-icon {
   width: 1.75rem;
   height: 1.75rem;
-  color: var(--q-diagram-icon);
 }
 .col-title {
   flex: 0 0 5.5rem;
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 1dbbde11cf..8ff7ddeb45 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useQuasar } from 'quasar';
 import { ref, computed, watch } from 'vue';
 import type { SvgSize, FlowComponent } from './energy-flow-chart-models';
 import type { ValueObject } from 'src/stores/mqtt-store-model';
@@ -11,6 +12,7 @@ import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
 import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
 
 const mqttStore = useMqttStore();
+const $q = useQuasar();
 
 const svgSize = ref<SvgSize>({
   xMin: 0,
@@ -24,6 +26,21 @@ const svgSize = ref<SvgSize>({
   numColumns: 3,
 });
 
+const BASE_CHART_WIDTH = 150;
+const chartWidth = computed(() => {
+  if ($q.screen.gt.md) return 170;
+  if ($q.screen.gt.sm) return 160;
+  return BASE_CHART_WIDTH;
+});
+
+watch(
+  chartWidth,
+  (newValue) => {
+    svgSize.value.xMax = newValue;
+  },
+  { immediate: true },
+);
+
 const svgViewBox = computed(
   () =>
     `${svgSize.value.xMin} ${svgSize.value.yMin} ${svgSize.value.xMax} ${svgSize.value.yMax}`,
@@ -164,19 +181,19 @@ const chargePoint3Discharging = computed(
 const translateChargeMode = (mode: string) => {
   switch (mode) {
     case 'instant_charging':
-      return { label: 'Sofort', class: 'danger' };
+      return { label: 'Sofort' };
     case 'pv_charging':
-      return { label: 'PV', class: 'success' };
+      return { label: 'PV' };
     case 'scheduled_charging':
-      return { label: 'Zielladen', class: 'primary' };
+      return { label: 'Zielladen' };
     case 'time_charging':
-      return { label: 'Zeitladen', class: 'warning' };
+      return { label: 'Zeitladen' };
     case 'eco_charging':
-      return { label: 'Eco', class: 'secondary' };
+      return { label: 'Eco' };
     case 'stop':
-      return { label: 'Stop', class: 'dark' };
+      return { label: 'Stop' };
     default:
-      return { label: 'Stop', class: 'dark' };
+      return { label: 'Stop' };
   }
 };
 
@@ -259,9 +276,6 @@ const chargePointSumCharging = computed(
   () => Number(chargePointSumPower.value.value) > 0,
 );
 
-const gridId = computed(() => mqttStore.gridId);
-const pvColor = computed(() => mqttStore.pvAggregateColor);
-const batteryColor = computed(() => mqttStore.batteryAggregateColor);
 
 ///////////////////// Set animation speed //////////////////////////
 
@@ -326,11 +340,11 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'grid',
       class: {
         base: 'grid',
-        valueLabel: gridFeedIn.value
-          ? 'fill-success'
+        valueLabelColor: gridFeedIn.value
+          ? 'var(--q-positive)'
           : gridConsumption.value
-            ? 'fill-danger'
-            : '',
+            ? 'var(--q-grid-stroke)'
+            : 'var(--q-text)',
         animated: gridConsumption.value,
         animatedReverse: gridFeedIn.value,
       },
@@ -338,11 +352,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['EVU', absoluteValueObject(gridPower.value).textValue],
       powerValue: Number(gridPower.value.value),
       iconComponent: GridIcon,
-      iconColor:
-        gridId.value !== undefined
-          ? mqttStore.gridComponentColor(gridId.value) ||
-            'var(--q-diagram-icon)'
-          : 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-grid-stroke)',
     });
   }
 
@@ -351,7 +361,6 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'home',
       class: {
         base: 'home',
-        valueLabel: '',
         animated: homeProduction.value,
         animatedReverse: homeConsumption.value,
       },
@@ -359,7 +368,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['Haus', absoluteValueObject(homePower.value).textValue],
       powerValue: Number(homePower.value.value),
       iconComponent: HouseIcon,
-      iconColor: 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-home-stroke)',
     });
   }
 
@@ -368,7 +377,6 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'pv',
       class: {
         base: 'pv',
-        valueLabel: 'fill-success',
         animated: pvProduction.value,
         animatedReverse: pvConsumption.value,
       },
@@ -376,7 +384,7 @@ const svgComponents = computed((): FlowComponent[] => {
       label: ['PV', absoluteValueObject(pvPower.value).textValue],
       powerValue: Number(pvPower.value.value),
       iconComponent: PvIcon,
-      iconColor: pvColor.value || 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-pv-stroke)',
     });
   }
 
@@ -385,7 +393,6 @@ const svgComponents = computed((): FlowComponent[] => {
       id: 'battery',
       class: {
         base: 'battery',
-        valueLabel: '',
         animated: batteryDischarging.value,
         animatedReverse: batteryCharging.value,
       },
@@ -394,7 +401,7 @@ const svgComponents = computed((): FlowComponent[] => {
       powerValue: Number(batteryPower.value.value),
       soc: batterySoc.value,
       iconComponent: BatteryIcon,
-      iconColor: batteryColor.value || 'var(--q-diagram-icon)',
+      iconColor: 'var(--q-battery-stroke)',
     });
   }
 
@@ -406,7 +413,6 @@ const svgComponents = computed((): FlowComponent[] => {
         class: {
           base: 'charge-point',
           animationId: 'charge-point-1',
-          valueLabel: '',
           animated: chargePoint1Discharging.value,
           animatedReverse: chargePoint1Charging.value,
         },
@@ -422,7 +428,7 @@ const svgComponents = computed((): FlowComponent[] => {
         iconComponent: ChargePointIcon,
         iconColor:
           mqttStore.chargePointColor(connectedChargePoints.value[0]) ||
-          'var(--q-diagram-icon)',
+          'var(--q-charge-point-stroke)',
       });
 
       if (chargePoint1VehicleConnected.value) {
@@ -432,8 +438,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'vehicle',
             animationId: 'vehicle-1',
-            valueLabel:
-              'fill-' + chargePoint1ConnectedVehicleChargeMode.value.class,
             animated: chargePoint1Discharging.value,
             animatedReverse: chargePoint1Charging.value,
           },
@@ -449,8 +453,8 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: VehicleIcon,
           iconColor: chargePoint1ConnectedVehicle.value?.id
             ? mqttStore.vehicleColor(chargePoint1ConnectedVehicle.value?.id) ||
-              'var(--q-diagram-icon)'
-            : 'var(--q-diagram-icon)',
+              'var(--q-vehicle-stroke)'
+            : 'var(--q-vehicle-stroke)',
           powerValue: Number(chargePoint1Power.value.value),
         });
       }
@@ -462,7 +466,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'charge-point',
             animationId: 'charge-point-2',
-            valueLabel: '',
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
           },
@@ -478,7 +481,7 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointColor(connectedChargePoints.value[1]) ||
-            'var(--q-diagram-icon)',
+            'var(--q-charge-point-stroke)',
         });
       }
 
@@ -489,8 +492,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'vehicle',
             animationId: 'vehicle-2',
-            valueLabel:
-              'fill-' + chargePoint2ConnectedVehicleChargeMode.value.class,
             animated: chargePoint2Discharging.value,
             animatedReverse: chargePoint2Charging.value,
           },
@@ -506,8 +507,8 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: VehicleIcon,
           iconColor: chargePoint2ConnectedVehicle.value?.id
             ? mqttStore.vehicleColor(chargePoint2ConnectedVehicle.value?.id) ||
-              'var(--q-diagram-icon)'
-            : 'var(--q-diagram-icon)',
+              'var(--q-vehicle-stroke)'
+            : 'var(--q-vehicle-stroke)',
           powerValue: Number(chargePoint2Power.value.value),
         });
       }
@@ -519,7 +520,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'charge-point',
             animationId: 'charge-point-3',
-            valueLabel: '',
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
           },
@@ -532,7 +532,7 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: ChargePointIcon,
           iconColor:
             mqttStore.chargePointColor(connectedChargePoints.value[2]) ||
-            'var(--q-diagram-icon)',
+            'var(--q-charge-point-stroke)',
         });
       }
 
@@ -543,8 +543,6 @@ const svgComponents = computed((): FlowComponent[] => {
           class: {
             base: 'vehicle',
             animationId: 'vehicle-3',
-            valueLabel:
-              'fill-' + chargePoint3ConnectedVehicleChargeMode.value.class,
             animated: chargePoint3Discharging.value,
             animatedReverse: chargePoint3Charging.value,
           },
@@ -560,8 +558,8 @@ const svgComponents = computed((): FlowComponent[] => {
           iconComponent: VehicleIcon,
           iconColor: chargePoint3ConnectedVehicle.value?.id
             ? mqttStore.vehicleColor(chargePoint3ConnectedVehicle.value?.id) ||
-              'var(--q-diagram-icon)'
-            : 'var(--q-diagram-icon)',
+              'var(--q-vehicle-stroke)'
+            : 'var(--q-vehicle-stroke)',
           powerValue: Number(chargePoint3Power.value.value),
         });
       }
@@ -572,7 +570,6 @@ const svgComponents = computed((): FlowComponent[] => {
         class: {
           base: 'charge-point',
           animationId: 'charge-point-sum',
-          valueLabel: '',
           animated: chargePointSumDischarging.value,
           animatedReverse: chargePointSumCharging.value,
         },
@@ -583,7 +580,7 @@ const svgComponents = computed((): FlowComponent[] => {
         ],
         powerValue: Number(chargePointSumPower.value.value),
         iconComponent: ChargePointIcon,
-        iconColor: 'var(--q-diagram-icon)',
+        iconColor: 'var(--q-charge-point-stroke)',
       });
     }
   }
@@ -665,12 +662,28 @@ const beginAnimation = (elementId: string) => {
 
 const svgRectWidth = computed(
   () =>
-    (svgSize.value.xMax -
+    (BASE_CHART_WIDTH -
       svgSize.value.xMin -
       svgSize.value.strokeWidth -
       svgSize.value.numColumns) /
     svgSize.value.numColumns,
 );
+
+const labelClipPath = computed(() => {
+  const cr = svgSize.value.circleRadius;
+  const iconCenter = cr - svgRectWidth.value / 2; // icon circle center x
+  const curveStart = svgRectWidth.value / 2 - cr; // where the right curve begins
+  const top = -cr;
+  const bottom = cr;
+  return (
+    `M ${iconCenter} ${top} ` +
+    `L ${curveStart} ${top} ` +
+    `A ${cr} ${cr} 0 0 1 ${curveStart} ${bottom} ` +
+    `L ${iconCenter} ${bottom} ` +
+    `A ${cr} ${cr} 0 0 0 ${iconCenter} ${top} ` +
+    'Z'
+  );
+});
 </script>
 
 <template>
@@ -751,14 +764,7 @@ const svgRectWidth = computed(
               />
             </clipPath>
             <clipPath :id="`clip-label-${component.id}`">
-              <rect
-                :x="-svgRectWidth / 2"
-                :y="-svgSize.circleRadius"
-                :width="svgRectWidth"
-                :height="svgSize.circleRadius * 2"
-                :rx="svgSize.circleRadius"
-                :ry="svgSize.circleRadius"
-              />
+              <path :d="labelClipPath" />
             </clipPath>
             <linearGradient
               :id="`gradient-soc-${component.id}`"
@@ -825,7 +831,9 @@ const svgRectWidth = computed(
             </tspan>
             <tspan
               :id="`value-${component.id}`"
-              :class="component.class.valueLabel"
+              :style="{
+                fill: component.class.valueLabelColor ?? component.iconColor,
+              }"
               text-anchor="end"
               :x="2 * svgSize.circleRadius + svgSize.strokeWidth"
               :y="svgSize.textSize"
@@ -1029,25 +1037,17 @@ feDropShadow {
 text {
   font-size: v-bind(svgFontSize);
   line-height: 1.25;
-  font-family: Arial;
+  font-family: 'Roboto', sans-serif;
   fill: var(--q-text);
   fill-opacity: 1;
 }
 
-text .fill-success {
-  fill: var(--q-positive);
-}
-
-text .fill-danger {
-  fill: var(--q-grid-stroke);
-}
-
 .battery {
   --soc-color: var(--q-battery-stroke);
 }
 
 .vehicle {
-  --soc-color: var(--q-vehicle-stroke);
+  --soc-color: var(--q-vehicle-fill);
 }
 
 use {
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index 0ec7f704d7..9db5e13293 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -15,7 +15,7 @@ export interface SvgSize {
 export interface ComponentClass {
   base: string;
   animationId?: string;
-  valueLabel: string;
+  valueLabelColor?: string;
   animated?: boolean;
   animatedReverse?: boolean;
   powerCategory?: string;
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 aa0396df90..1fdfc4f33e 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
@@ -101,9 +101,6 @@ const selectedData = computed((): GraphDataPoint[] => {
 });
 
 const chargePointIds = computed(() => mqttStore.chargePointIds);
-const gridId = computed(() => mqttStore.gridId);
-const pvColor = computed(() => mqttStore.pvAggregateColor);
-const batteryColor = computed(() => mqttStore.batteryAggregateColor);
 
 const chargePointNames = computed(() => mqttStore.chargePointName);
 
@@ -264,10 +261,7 @@ const chartLabels = computed(() => {
 const lineChartData = computed(() => {
   let datasets = [];
   if (gridMeterName.value !== undefined) {
-    const baseColor = gridId.value
-      ? mqttStore.gridComponentColor(gridId.value) ||
-        getGlobalColor('--q-grid-stroke')
-      : getGlobalColor('--q-grid-stroke');
+    const baseColor = getGlobalColor('--q-grid-stroke');
     datasets.push({
       label: gridMeterName.value,
       category: 'component',
@@ -313,7 +307,7 @@ const lineChartData = computed(() => {
   }
   datasets.push(...secondaryCounterDatasets.value);
   if (mqttStore.pvConfigured) {
-    const baseColor = pvColor.value || getGlobalColor('--q-pv-stroke');
+    const baseColor = getGlobalColor('--q-pv-stroke');
     datasets.push({
       label: 'PV ges.',
       category: 'component',
@@ -336,8 +330,7 @@ const lineChartData = computed(() => {
     });
   }
   if (mqttStore.batteryConfigured) {
-    const baseColor =
-      batteryColor.value || getGlobalColor('--q-battery-stroke');
+    const baseColor = getGlobalColor('--q-battery-stroke');
     datasets.push(
       {
         label: 'Speicher ges.',
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 464e29231b..7addd3cfc4 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
@@ -22,7 +22,7 @@
 // $warning: #F2C037;
 /////////////////////////////////////////////////////////////////////
 // Default Light Theme Base Colors
-$primary: #5c93d1;
+$primary: #153357;
 $secondary: #d2d2d7;
 $accent: #546e7a;
 $positive: #66bd7a;
@@ -36,20 +36,21 @@ $brown-text: #524f57;
 $white: #ffffff;
 $grey: #9e9e9e; // Quasar's default grey
 $toggle-off: #e0e0e0;
-$grid-stroke: #a33c42;
+$grid-stroke: #DC1629;
 $grid-fill: #efb6bc33;
 $secondary-counter-stroke: #ffa9a8;
 $secondary-counter-fill: #ffa9a833;
-$home-stroke: #949aa1;
+$home-stroke: #717171;
 $home-fill: #949aa133;
 $pv-stroke: #66bd7a;
 $pv-fill: #90ee9033;
 $battery: #ba7128;
-$battery-stroke: #ba7128;
+$battery-stroke: #FF9740;
 $battery-fill: #ba712833;
-$charge-point-stroke: #5c93d1;
+$charge-point-stroke: #153357;
 $charge-point-fill: #5c93d14d;
-$vehicle-stroke: #4f99af;
+$vehicle-stroke: #38bbb4;
+$vehicle-fill: #4f99af;
 $charge-plan-link-button: #6b757d;
 $diagram-icon: #717171;
 $table-hover: #f9f8f8;
@@ -86,6 +87,7 @@ $table-hover: #f9f8f8;
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
   --q-vehicle-stroke: #{$vehicle-stroke};
+  --q-vehicle-fill: #{$vehicle-fill};
   --q-charge-plan-link-button: #{$charge-plan-link-button};
   --q-diagram-icon: #{$diagram-icon};
   --q-table-hover: #{$table-hover};
@@ -268,6 +270,7 @@ $dark-table-hover: #ffffff12;
   --q-charge-point-stroke: #{$charge-point-stroke};
   --q-charge-point-fill: #{$charge-point-fill};
   --q-vehicle-stroke: #{$vehicle-stroke};
+  --q-vehicle-fill: #{$vehicle-fill};
   --q-charge-plan-link-button: #{$dark-charge-plan-link-button};
   --q-diagram-icon: #{$white};
   --q-table-hover: #{$dark-table-hover};
@@ -351,7 +354,7 @@ $dark-table-hover: #ffffff12;
 .tinted-box {
   background-color: color-mix(
     in srgb,
-    var(--tint-accent, var(--q-primary)) var(--tint-amount, 12%),
+    var(--tint-accent, var(--q-primary)) var(--tint-amount, 5%),
     transparent
   );
   border: 1px solid color-mix(in srgb, var(--q-text) 35%, transparent);
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 92e927fac2..4138cd2e34 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
@@ -2907,32 +2907,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     });
   };
 
-  /**
-   * Get the battery color if exactly one battery is configured
-   * @param batteryId battery id
-   * @returns string | null
-   */
-  const batteryAggregateColor = computed(() => {
-    const ids = batteryIds.value;
-    if (ids.length === 1) {
-      return batteryColor.value(ids[0]);
-    }
-    return null;
-  });
-
-  /**
-   * Get the battery color identified by the battery id
-   * @param batteryId battery id
-   * @returns string | null
-   */
-  const batteryColor = computed(() => {
-    return (batteryId: number): string | null => {
-      const DEFAULT_COLOR = '#ffc107';
-      const config = getComponentConfiguration.value(batteryId);
-      return resolveComponentColor(config?.color, DEFAULT_COLOR);
-    };
-  });
-
   ////////////////////////////// vehicle data ////////////////////////////////
 
   /**
@@ -3964,31 +3938,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     );
   });
 
-  /**
-   * Get the pv color identified by the inverter id
-   * @param inverterId inverter id
-   * @returns string | null
-   */
-  const pvColor = computed(() => {
-    return (inverterId: number): string | null => {
-      const DEFAULT_COLOR = '#28a745';
-      const config = getComponentConfiguration.value(inverterId);
-      return resolveComponentColor(config?.color, DEFAULT_COLOR);
-    };
-  });
-
-  /**
-   * Get the pv color for the pv if exactly one inverter is configured
-   * @returns string | null
-   */
-  const pvAggregateColor = computed((): string | null => {
-    const ids = getObjectIds.value('inverter');
-    if (ids.length === 1) {
-      return pvColor.value(ids[0]);
-    }
-    return null;
-  });
-
   /**
    * Get pv power
    * @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -4229,8 +4178,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     batteryTotalPower,
     batteryChargePriorityRange,
     batteryMode,
-    batteryAggregateColor,
-    batteryColor,
     // Grid data
     gridId,
     secondaryCounterIds,
@@ -4245,8 +4192,6 @@ export const useMqttStore = defineStore('mqtt', () => {
     homeDailyYield,
     // PV data
     pvConfigured,
-    pvAggregateColor,
-    pvColor,
     getPvPower,
     pvDailyExported,
     // Chart data