diff --git a/packages/modules/display_themes/colors/source/src/App.vue b/packages/modules/display_themes/colors/source/src/App.vue
index 598bac0d6d..9cbc6abeb6 100644
--- a/packages/modules/display_themes/colors/source/src/App.vue
+++ b/packages/modules/display_themes/colors/source/src/App.vue
@@ -12,7 +12,6 @@ import DisplayTheme from './views/DisplayTheme.vue'
 import { wbSettings } from './assets/js/themeConfig'
 
 onMounted(() => {
-	console.log('on mounted')
 	let uri = window.location.search
 	if (uri != '') {
 		console.debug('search', uri)
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts b/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts
index c3225fbd94..dc6396f6a3 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts
@@ -49,6 +49,7 @@ const topics: { [topic: string]: string } = {
 	socUpdate: 'openWB/set/vehicle/%/get/force_soc_update',
 	setSoc: 'openWB/set/vehicle/%/soc_module/calculated_soc_state/manual_soc',
 	priceCharging: 'openWB/set/vehicle/template/charge_template/%/et/active',
+	chargeTemplate: 'openWB/set/chargepoint/%/set/charge_template',
 }
 export function updateServer(
 	item: string,
@@ -66,7 +67,7 @@ export function updateServer(
 		return
 	}
 	switch (item) {
-		case 'chargeMode':
+		/* case 'chargeMode':
 		case 'cpPriority':
 		case 'cpScheduledCharging':
 		case 'cpInstantTargetCurrent':
@@ -81,7 +82,7 @@ export function updateServer(
 		case 'cpPvMinSocCurrent':
 			// these values are set in the charge template
 			topic = topic.replace('%', chargePoints[index].chargeTemplate.toString())
-			break
+			break */
 		default:
 			topic = topic.replace('%', String(index))
 			if (index2 != undefined) {
@@ -105,3 +106,10 @@ export function sendCommand(command: string, data: object = {}) {
 		JSON.stringify({ command: command, data: data }),
 	)
 }
+
+export function updateChargeTemplate(cp: number) {
+	mqttPublish(
+		topics.chargeTemplate.replace('%', String(cp)),
+		JSON.stringify(chargePoints[cp].chargeTemplate),
+	)
+}
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts b/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
index c9395cadd0..69ac2157f9 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
@@ -293,29 +293,29 @@ export const widescreen = computed(() => {
 	return screensize.x >= breakpoint
 })
 export const chargemodes: { [key: string]: ChargeModeInfo } = {
-	pv_charging: {
-		mode: ChargeMode.pv_charging,
-		name: 'PV',
-		color: 'var(--color-pv',
-		icon: 'fa-solar-panel',
-	},
 	instant_charging: {
 		mode: ChargeMode.instant_charging,
 		name: 'Sofort',
 		color: 'var(--color-charging)',
 		icon: 'fa-bolt',
 	},
+	pv_charging: {
+		mode: ChargeMode.pv_charging,
+		name: 'PV',
+		color: 'var(--color-pv',
+		icon: 'fa-solar-panel',
+	},
 	scheduled_charging: {
 		mode: ChargeMode.scheduled_charging,
 		name: 'Zielladen',
 		color: 'var(--color-battery)',
 		icon: 'fa-bullseye',
 	},
-	standby: {
-		mode: ChargeMode.standby,
-		name: 'Standby',
-		color: 'var(--color-axis)',
-		icon: 'fa-pause',
+	eco_charging: {
+		mode: ChargeMode.eco_charging,
+		name: 'Eco',
+		color: 'var(--color-devices)',
+		icon: 'fa-coins',
 	},
 	stop: {
 		mode: ChargeMode.stop,
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/ChargePoint.vue
similarity index 96%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/ChargePoint.vue
index 953868838a..626891d61d 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/ChargePoint.vue
@@ -68,7 +68,7 @@
 
 		<!-- Car information-->
 		<template #footer>
-			<CPVehicle :chargepoint="props.chargepoint" />
+			<VehicleData :chargepoint="props.chargepoint" />
 		</template>
 	</WBWidget>
 </template>
@@ -83,7 +83,7 @@ import InfoItem from '@/components/shared/InfoItem.vue'
 import FormatWatt from '@/components/shared/FormatWatt.vue'
 import FormatWattH from '../shared/FormatWattH.vue'
 import DisplayButton from '@/components/shared/DisplayButton.vue'
-import CPVehicle from './CPVehicle.vue'
+import VehicleData from './VehicleData.vue'
 
 const props = defineProps<{
 	chargepoint: ChargePoint
@@ -174,6 +174,9 @@ function openSettings() {
 			case 'scheduled_charging':
 				chargePanelName = '#scSettings'
 				break
+			case 'eco_charging':
+				chargePanelName = '#ecSettings'
+				break
 			default:
 				chargePanelName = '#chSettings'
 		}
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/VehicleData.vue
similarity index 98%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/VehicleData.vue
index b3419b1404..727a1a5529 100644
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/VehicleData.vue
@@ -78,14 +78,15 @@
 		</div>
 		<div class="infoline">
 			<!-- ET Information -->
-			<InfoItem
+			<!-- <InfoItem
 				v-if="etData.active"
 				heading="Preisladen:"
 				class="grid-col-4 grid-left"
 			>
 				<SwitchInput v-model="cp.etActive" />
-				<!--{{ cp.etActive ? 'Ja' : 'Nein' }}-->
-			</InfoItem>
+				{{ cp.etActive ? 'Ja' : 'Nein' }}
+			</InfoItem> 
+			-->
 
 			<InfoItem v-if="etData.active" heading="max. Preis:" class="grid-col-4">
 				<DisplayButton v-if="cp.etActive" @click="openSettings('#prSettings')">
@@ -139,7 +140,6 @@ import InfoItem from '@/components/shared/InfoItem.vue'
 import BatterySymbol from '@/components/shared/BatterySymbol.vue'
 import RadioBarInput from '@/components/shared/RadioBarInput.vue'
 import DisplayButton from '@/components/shared/DisplayButton.vue'
-import SwitchInput from '../shared/SwitchInput.vue'
 import RangeInput from '../shared/RangeInput.vue'
 import { etData } from '../priceChart/model'
 import { computed } from 'vue'
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargeConfig.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ChargeConfig.vue
similarity index 93%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargeConfig.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ChargeConfig.vue
index 8e3373bdb1..bf5b4edc58 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargeConfig.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ChargeConfig.vue
@@ -11,7 +11,7 @@
 				:options="Object.values(vehicles).map((v) => [v.name, v.id])"
 			/>
 		</ConfigItem>
-		<ConfigItem
+		<!-- <ConfigItem
 			v-if="Object.keys(chargeTemplates).length > 1"
 			title="Ladeprofil"
 			icon="fa-sliders"
@@ -25,6 +25,7 @@
 				"
 			/>
 		</ConfigItem>
+		 -->
 		<hr class="grid-col-2 my-2" />
 		<ConfigItem
 			title="Priorität"
@@ -51,13 +52,14 @@
 		</ConfigItem>
 		<!-- Priority -->
 
-		<ConfigItem
+		<!-- <ConfigItem
 			title="Strompreisbasiert laden"
 			icon="fa-coins"
 			iconcolor="var(--color-battery)"
 		>
 			<SwitchInput v-model="etActive"></SwitchInput>
 		</ConfigItem>
+		 -->
 		<hr v-if="globalData.isBatteryConfigured" class="grid-col-2 my-2" />
 		<ConfigItem
 			v-if="globalData.isBatteryConfigured"
@@ -76,7 +78,7 @@
 </template>
 
 <script setup lang="ts">
-import { vehicles, chargePoints, chargeTemplates } from './model'
+import { vehicles, chargePoints } from '../model'
 import ConfigItem from '@/components/shared/ConfigItem.vue'
 import SwitchInput from '@/components/shared/SwitchInput.vue'
 import RadioInput from '@/components/shared/RadioInput.vue'
@@ -99,12 +101,6 @@ const connectedVehicle = computed({
 		chargePoints[cp.value.id].connectedVehicle = value
 	},
 })
-const etActive = computed({
-	get: () => cp.value.etActive,
-	set: (value: boolean) => {
-		chargePoints[cp.value.id].etActive = value
-	},
-})
 const timedCharging = computed({
 	get: () => cp.value.timedCharging,
 	set: (value: boolean) => {
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue
new file mode 100644
index 0000000000..b173ae5941
--- /dev/null
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue
@@ -0,0 +1,164 @@
+<template>
+	<div class="ecosettings">
+		<PriceChart
+			v-if="etData.active && etData.etPriceList.size > 0"
+			:charge-point-id="props.chargepoint.id"
+			class="fullwidth"
+		/>
+		<span class="fullwidth mb-4">
+			<button type="button" class="btn btn-secondary" @click="pageDown">
+				<i class="fa-solid fa-circle-down me-2"></i>
+				Abwärts
+			</button>
+		</span>
+
+		<!-- Minimal ampere -->
+		<ConfigItem
+			title="Minimaler Ladestrom unter der Preisgrenze"
+			icon="fa-bolt"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="minCurrent"
+				v-model="cp.ecoMinCurrent"
+				:min="6"
+				:max="32"
+				:step="1"
+				unit="A"
+			/>
+		</ConfigItem>
+
+		<!-- Phases -->
+		<ConfigItem title="Anzahl Phasen" icon="fa-plug" :fullwidth="true">
+			<RadioInput
+				id="targetPhases"
+				v-model="cp.ecoTargetPhases"
+				:options="[
+					['Eine', 1],
+					['Max', 2],
+					['Auto', 3],
+				]"
+			/>
+		</ConfigItem>
+		<hr v-if="cp.ecoChargeLimitMode != 'none'" class="fullwidth" />
+		<!-- Limit Mode -->
+		<ConfigItem title="Begrenzung" icon="fa-hand" :fullwidth="true">
+			<RadioInput
+				v-model="cp.ecoChargeLimitMode"
+				:options="ecoChargeLimitModes.map((e) => [e.name, e.id])"
+			/>
+		</ConfigItem>
+		<!-- Max SoC -->
+		<ConfigItem
+			v-if="cp.ecoChargeLimitMode == 'soc'"
+			title="Maximaler SoC"
+			icon="fa-sliders"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="maxSoc"
+				v-model="cp.ecoTargetSoc"
+				:min="0"
+				:max="100"
+				:step="1"
+				unit="%"
+			/>
+		</ConfigItem>
+
+		<!-- Max Energy -->
+		<ConfigItem
+			v-if="cp.ecoChargeLimitMode == 'amount'"
+			title="Zu ladende Energie"
+			icon="fa-sliders"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="maxEnergy"
+				v-model="energyLimit"
+				:min="0"
+				:max="100"
+				:step="1"
+				unit="kWh"
+			/>
+		</ConfigItem>
+		<span class="fullwidth">
+			<button type="button" class="btn btn-secondary" @click="pageUp">
+				<i class="fa-solid fa-circle-up me-2"></i>
+				Aufwärts
+			</button>
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+// import { eventBus } from '@/main.js'
+import { computed } from 'vue'
+import { ChargePoint, chargePoints } from '../model'
+import { etData } from '@/components/priceChart/model'
+import ConfigItem from '@/components/shared/ConfigItem.vue'
+import RangeInput from '@/components/shared/RangeInput.vue'
+import RadioInput from '@/components/shared/RadioInput.vue'
+import PriceChart from '@/components/priceChart/PriceChart.vue'
+
+const props = defineProps<{
+	chargepoint: ChargePoint
+}>()
+
+const cp = computed(() => {
+	return chargePoints[props.chargepoint.id]
+})
+
+const ecoChargeLimitModes = [
+	{ name: 'keine', id: 'none' },
+	{ name: 'EV-SoC', id: 'soc' },
+	{ name: 'Energiemenge', id: 'amount' },
+]
+const energyLimit = computed({
+	get() {
+		return cp.value.ecoMaxEnergy / 1000
+	},
+	set(limit: number) {
+		cp.value.ecoMaxEnergy = limit * 1000
+	},
+})
+// methods
+function pageDown() {
+	const modalbody = document.getElementById('modal-body-settingspage')
+	if (modalbody) {
+		modalbody.scrollTo({ top: modalbody.scrollHeight, behavior: 'smooth' })
+	} else {
+		console.warn('modalbody not found')
+	}
+}
+function pageUp() {
+	const modalbody = document.getElementById('modal-body-settingspage')
+	window.scrollTo(0, 0)
+	if (modalbody) {
+		modalbody.scrollTo({ top: 0, behavior: 'smooth' })
+	} else {
+		console.warn('modalbody not found')
+	}
+}
+</script>
+
+<style scoped>
+.ecosettings {
+	display: grid;
+	justify-content: space-between;
+	align-items: top;
+	grid-template-columns: auto auto;
+	grid-gap: 0px;
+}
+.chargeConfigSelect {
+	background: var(--color-bg);
+	color: var(--color-fg);
+}
+.heading {
+	color: var(--color-fg);
+	font-size: var(--font-settings);
+	font-weight: bold;
+}
+.fullwidth {
+	grid-column: 1 / -1;
+}
+</style>
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigInstant.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue
similarity index 81%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigInstant.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue
index 27d8417ec7..af7bc4e6ef 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigInstant.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue
@@ -11,7 +11,21 @@
 				unit="A"
 			/>
 		</ConfigItem>
-		<hr v-if="cp.instantChargeLimitMode != 'none'" />
+
+		<!-- Phases -->
+		<ConfigItem title="Anzahl Phasen" icon="fa-plug" :fullwidth="true">
+			<RadioInput
+				id="targetPhases"
+				v-model="cp.instantTargetPhases"
+				:options="[
+					['Eine', 1],
+					['Max', 2],
+					['Auto', 3],
+				]"
+			/>
+		</ConfigItem>
+
+		<hr v-if="cp.instantChargeLimitMode != 'none'" class="fullwidth" />
 		<!-- Limit Mode -->
 		<ConfigItem title="Begrenzung" icon="fa-hand" :fullwidth="true">
 			<RadioInput
@@ -58,8 +72,8 @@
 <script setup lang="ts">
 // import { eventBus } from '@/main.js'
 import { computed } from 'vue'
-import { chargePoints } from './model'
-import ConfigItem from '../shared/ConfigItem.vue'
+import { chargePoints } from '../model'
+import ConfigItem from '@/components/shared/ConfigItem.vue'
 import RangeInput from '@/components/shared/RangeInput.vue'
 import RadioInput from '@/components/shared/RadioInput.vue'
 
@@ -104,4 +118,7 @@ const energyLimit = computed({
 	font-size: var(--font-settings);
 	font-weight: bold;
 }
+.fullwidth {
+	grid-column: 1 / -1;
+}
 </style>
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigPv.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue
similarity index 64%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigPv.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue
index 4d30372135..45a2ea8cd0 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigPv.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue
@@ -1,35 +1,38 @@
 <template>
 	<div class="pvsettings pt-2">
-		<!-- Maximum SoC -->
-		<ConfigItem
-			title="Ladestand begrenzen"
-			icon="fa-battery-three-quarters"
-			:fullwidth="true"
-		>
-			<SwitchInput id="limitSoc" v-model="limitSoc" />
+		<!-- Min+PV-Laden -->
+		<ConfigItem title="Minimaler Ladestrom" icon="fa-bolt" :fullwidth="true">
+			<SwitchInput v-model="useMinPv" />
 		</ConfigItem>
+		<!-- Minimum Current -->
 		<ConfigItem
-			v-if="limitSoc"
-			title="...auf maximal..."
-			icon="fa-battery-three-quarters"
+			v-if="useMinPv"
+			title="...bei Ladestrom (minimal)"
 			:fullwidth="true"
 		>
 			<RangeInput
-				id="maxSoc"
-				v-model="cp.pvMaxSoc"
-				:min="0"
-				:max="100"
+				id="minCurrent"
+				v-model="cp.pvMinCurrent"
+				:min="6"
+				:max="32"
 				:step="1"
-				unit="%"
+				unit="A"
 			/>
 		</ConfigItem>
-		<ConfigItem
-			title="Einspeisegrenze beachten"
-			icon="fa-hand"
-			:fullwidth="true"
-		>
-			<SwitchInput v-model="cp.pvFeedInLimit" />
+
+		<!-- Phases -->
+		<ConfigItem title="Anzahl Phasen" icon="fa-plug" :fullwidth="true">
+			<RadioInput
+				id="targetPhases"
+				v-model="cp.pvTargetPhases"
+				:options="[
+					['Eine', 1],
+					['Max', 2],
+					['Auto', 3],
+				]"
+			/>
 		</ConfigItem>
+
 		<!-- Min-PV-Laden -->
 		<ConfigItem
 			title="Mindest-Ladestand"
@@ -62,34 +65,65 @@
 			/>
 		</ConfigItem>
 
-		<!-- Min+PV-Laden -->
-		<ConfigItem title="Minimaler Ladestrom" icon="fa-bolt" :fullwidth="true">
-			<SwitchInput v-model="useMinPv" />
+		<hr v-if="cp.pvChargeLimitMode != 'none'" class="fullwidth" />
+
+		<!-- Limit Mode -->
+		<ConfigItem title="Begrenzung" icon="fa-hand" :fullwidth="true">
+			<RadioInput
+				v-model="cp.pvChargeLimitMode"
+				:options="pvChargeLimitModes.map((e) => [e.name, e.id])"
+			/>
 		</ConfigItem>
-		<!-- Minimum Current -->
+		<!-- Max SoC -->
 		<ConfigItem
-			v-if="useMinPv"
-			title="...bei Ladestrom (minimal)"
+			v-if="cp.pvChargeLimitMode == 'soc'"
+			title="Maximaler SoC"
+			icon="fa-sliders"
 			:fullwidth="true"
 		>
 			<RangeInput
-				id="minCurrent"
-				v-model="cp.pvMinCurrent"
-				:min="6"
-				:max="32"
+				id="maxSoc"
+				v-model="cp.pvTargetSoc"
+				:min="0"
+				:max="100"
 				:step="1"
-				unit="A"
+				unit="%"
 			/>
 		</ConfigItem>
+
+		<!-- Max Energy -->
+		<ConfigItem
+			v-if="cp.pvChargeLimitMode == 'amount'"
+			title="Zu ladende Energie"
+			icon="fa-sliders"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="maxEnergy"
+				v-model="energyLimit"
+				:min="0"
+				:max="100"
+				:step="1"
+				unit="kWh"
+			/>
+		</ConfigItem>
+		<ConfigItem
+			title="Einspeisegrenze beachten"
+			icon="fa-hand"
+			:fullwidth="true"
+		>
+			<SwitchInput v-model="cp.pvFeedInLimit" />
+		</ConfigItem>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { chargePoints } from './model'
-import ConfigItem from '../shared/ConfigItem.vue'
+import { chargePoints } from '../model'
+import ConfigItem from '@/components/shared/ConfigItem.vue'
 import RangeInput from '@/components/shared/RangeInput.vue'
 import SwitchInput from '@/components/shared/SwitchInput.vue'
+import RadioInput from '@/components/shared/RadioInput.vue'
 const props = defineProps<{
 	chargepointId: number
 }>()
@@ -97,9 +131,21 @@ const cp = computed(() => {
 	return chargePoints[props.chargepointId]
 })
 
-// methods:
-
 // computed
+
+const pvChargeLimitModes = [
+	{ name: 'keine', id: 'none' },
+	{ name: 'EV-SoC', id: 'soc' },
+	{ name: 'Energiemenge', id: 'amount' },
+]
+const energyLimit = computed({
+	get() {
+		return cp.value.pvMaxEnergy / 1000
+	},
+	set(limit: number) {
+		cp.value.pvMaxEnergy = limit * 1000
+	},
+})
 const useMinPv = computed({
 	get() {
 		return cp.value.pvMinCurrent > 5
@@ -124,18 +170,6 @@ const useMinSoc = computed({
 		}
 	},
 })
-const limitSoc = computed({
-	get() {
-		return cp.value.pvMaxSoc <= 100
-	},
-	set(v: boolean) {
-		if (v) {
-			cp.value.pvMaxSoc = 100
-		} else {
-			cp.value.pvMaxSoc = 101
-		}
-	},
-})
 </script>
 
 <style scoped>
@@ -154,4 +188,7 @@ const limitSoc = computed({
 .heading {
 	color: var(--color-pv);
 }
+.fullwidth {
+	grid-column: 1 / -1;
+}
 </style>
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigScheduled.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigScheduled.vue
similarity index 51%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigScheduled.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigScheduled.vue
index 5b592d5c7a..037a9eb850 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigScheduled.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigScheduled.vue
@@ -1,18 +1,17 @@
 <template>
 	<div class="d-flex flex-column p-3">
 		<div class="subtitle mb-4">Pläne für Zielladen:</div>
-		<div v-if="plans.length == 0" class="warning p-5">
-			Es sind noch keine Pläne definiert. Pläne für das Zielladen können in der
-			Web-App festgelegt werden.
+		<div v-if="plans.length == 0" class="info p-5">
+			Pläne für das Zielladen können in den Einstellungen des Ladeprofils
+			angelegt werden.
 		</div>
-
-		<table class="table table-dark">
+		<table v-else class="table table-dark">
 			<thead>
 				<tr>
 					<th></th>
-					<th>Startzeit</th>
-					<th>SoC-Ziel</th>
-					<th>SoC-Limit</th>
+					<th>Plan</th>
+					<th>Zielzeit</th>
+					<th>Ladeziel</th>
 					<th>Wiederholung</th>
 				</tr>
 			</thead>
@@ -21,13 +20,18 @@
 					<td>
 						<SwitchInput
 							v-model="plan.active"
-							@update:model-value="updatePlanState(i)"
-						>
-						</SwitchInput>
+							@update:model-value="togglePlanStatus(i)"
+						/>
 					</td>
+					<td>{{ plan.name }}</td>
 					<td>{{ timeString(i) }}</td>
-					<td>{{ plan.limit.soc_scheduled }}%</td>
-					<td>{{ plan.limit.soc_limit }}%</td>
+					<td>
+						{{
+							plan.limit.selected == 'soc'
+								? plan.limit.soc_scheduled + '%'
+								: formatWattH(plan.limit.amount, 0)
+						}}
+					</td>
 					<td>{{ freqNames[plan.frequency.selected] }}</td>
 				</tr>
 			</tbody>
@@ -37,9 +41,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { scheduledChargingPlans } from './model'
-import SwitchInput from '../shared/SwitchInput.vue'
-import { updateServer } from '@/assets/js/sendMessages'
+import { ChargePoint } from '../model'
+import SwitchInput from '@/components/shared/SwitchInput.vue'
+import { updateChargeTemplate } from '@/assets/js/sendMessages'
+import { formatWattH } from '@/assets/js/helpers'
 
 const freqNames: { [key: string]: string } = {
 	daily: 'Täglich',
@@ -47,24 +52,15 @@ const freqNames: { [key: string]: string } = {
 	weekly: 'Wöchentlich',
 }
 const props = defineProps<{
-	chargeTemplateId: number
+	chargePoint: ChargePoint
 }>()
-//computed
-const plans = computed(() =>
-	scheduledChargingPlans[props.chargeTemplateId]
-		? Object.values(scheduledChargingPlans[props.chargeTemplateId])
-		: [],
-)
 
-function updatePlanState(i: number) {
-	console.log(`update ${i}`)
-	updateServer(
-		'cpScheduledPlanActive',
-		plans.value[i].active,
-		props.chargeTemplateId,
-		i,
+//computed
+const plans = computed(() => {
+	return (
+		props.chargePoint.chargeTemplate?.chargemode.scheduled_charging.plans ?? []
 	)
-}
+})
 
 //methods
 function timeString(key: number) {
@@ -74,6 +70,12 @@ function cellStyle(key: number) {
 	const style = plans.value[key].active ? 'bold' : 'regular'
 	return { 'font-weight': style }
 }
+function togglePlanStatus(i: number) {
+	props.chargePoint.chargeTemplate!.chargemode.scheduled_charging.plans[
+		i
+	]!.active = plans.value[i].active
+	updateChargeTemplate(props.chargePoint.id)
+}
 </script>
 
 <style scoped>
@@ -81,10 +83,10 @@ function cellStyle(key: number) {
 	font-size: var(--font-large);
 	font-weight: bold;
 }
-.warning {
+.info {
 	font-size: var(--font-large);
 	font-weight: bold;
-	color: var(--color-evu);
+	color: var(--color-fg);
 }
 td {
 	background-color: var(--color-bg) !important;
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigTimed.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigTimed.vue
similarity index 77%
rename from packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigTimed.vue
rename to packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigTimed.vue
index 875457bb02..fefc1f0e26 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPConfigTimed.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigTimed.vue
@@ -37,9 +37,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { timeChargingPlans } from './model'
-import { updateServer } from '@/assets/js/sendMessages'
-import SwitchInput from '../shared/SwitchInput.vue'
+import { ChargePoint } from '../model'
+import { updateChargeTemplate } from '@/assets/js/sendMessages'
+import SwitchInput from '@/components/shared/SwitchInput.vue'
 
 const freqNames: { [key: string]: string } = {
 	daily: 'Täglich',
@@ -47,24 +47,16 @@ const freqNames: { [key: string]: string } = {
 	weekly: 'Wöchentlich',
 }
 const props = defineProps<{
-	chargeTemplateId: number
+	chargePoint: ChargePoint
 }>()
 const plans = computed(() => {
-	if (timeChargingPlans[props.chargeTemplateId]) {
-		let result = Object.values(timeChargingPlans[props.chargeTemplateId])
-		return result ?? []
-	} else {
-		return []
-	}
+	return props.chargePoint.chargeTemplate?.time_charging.plans ?? []
 })
 function updatePlanState(i: number) {
-	console.log(`update ${i}`)
-	updateServer(
-		'cpTimedPlanActive',
-		plans.value[i].active,
-		props.chargeTemplateId,
-		i,
-	)
+	props.chargePoint.chargeTemplate!.chargemode.scheduled_charging.plans[
+		i
+	]!.active = plans.value[i].active
+	updateChargeTemplate(props.chargePoint.id)
 }
 function cellStyle(key: number) {
 	const style = plans.value[key].active ? 'bold' : 'regular'
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/model.ts b/packages/modules/display_themes/colors/source/src/components/chargePointList/model.ts
index f62e04385e..710d180a37 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/model.ts
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/model.ts
@@ -1,5 +1,5 @@
 import { reactive } from 'vue'
-import { updateServer } from '@/assets/js/sendMessages'
+import { updateChargeTemplate, updateServer } from '@/assets/js/sendMessages'
 import type { PowerItem } from '@/assets/js/types'
 export class ChargePoint {
 	id: number
@@ -17,10 +17,9 @@ export class ChargePoint {
 	isCharging = false
 	private _isLocked = false
 	private _connectedVehicle = 0
-	chargeTemplate = 0
+	chargeTemplate: ChargeTemplate | null = null
+	chargeTemplateId = 0
 	evTemplate = 0
-	private _chargeMode = ChargeMode.pv_charging
-	private _hasPriority = false
 	currentPlan = ''
 	averageConsumption = 0
 	vehicleName = ''
@@ -45,18 +44,6 @@ export class ChargePoint {
 	isSocManual = false
 	waitingForSoc = false
 	color = 'white'
-	private _timedCharging = false
-	private _instantChargeLimitMode = ''
-	private _instantTargetCurrent = 0
-	private _instantTargetSoc = 0
-	private _instantMaxEnergy = 0
-	private _pvFeedInLimit = false
-	private _pvMinCurrent = 0
-	private _pvMaxSoc = 101
-	private _pvMinSoc = 0
-	private _pvMinSocCurrent = 0
-	private _etActive = false
-	private _etMaxPrice = 20
 
 	constructor(index: number) {
 		this.id = index
@@ -94,126 +81,226 @@ export class ChargePoint {
 		}
 	}
 	get chargeMode() {
-		return this._chargeMode
+		return this.chargeTemplate?.chargemode.selected ?? ChargeMode.stop
 	}
 	set chargeMode(cm: ChargeMode) {
-		this._chargeMode = cm
-		updateServer('chargeMode', cm, this.id)
-	}
-	updateChargeMode(cm: ChargeMode) {
-		this._chargeMode = cm
+		console.log('set mode')
+		if (this.chargeTemplate) {
+			console.log('active')
+			this.chargeTemplate.chargemode.selected = cm
+			updateChargeTemplate(this.id)
+		}
 	}
 	get hasPriority() {
-		return this._hasPriority
+		return this.chargeTemplate?.prio ?? false
 	}
 	set hasPriority(prio: boolean) {
-		this._hasPriority = prio
-		updateServer('cpPriority', prio, this.id)
-	}
-	updateCpPriority(prio: boolean) {
-		this._hasPriority = prio
+		this.chargeTemplate!.prio = prio
+		updateChargeTemplate(this.id)
 	}
 	get timedCharging() {
-		if (chargeTemplates[this.chargeTemplate]) {
-			return chargeTemplates[this.chargeTemplate].time_charging.active
+		if (this.chargeTemplate) {
+			return this.chargeTemplate.time_charging.active
 		} else {
 			return false
 		}
 	}
 	set timedCharging(setting: boolean) {
-		// chargeTemplates[this.chargeTemplate].time_charging.active = false
-		chargeTemplates[this.chargeTemplate].time_charging.active = setting
-		updateServer('cpTimedCharging', setting, this.chargeTemplate)
+		this.chargeTemplate!.time_charging.active = setting
+		updateChargeTemplate(this.id)
 	}
 	get instantTargetCurrent() {
-		return this._instantTargetCurrent
+		return this.chargeTemplate?.chargemode.instant_charging.current ?? 0
 	}
 	set instantTargetCurrent(current: number) {
-		this._instantTargetCurrent = current
-		updateServer('cpInstantTargetCurrent', current, this.id)
-	}
-	updateInstantTargetCurrent(current: number) {
-		this._instantTargetCurrent = current
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.instant_charging.current = current
+			updateChargeTemplate(this.id)
+		}
 	}
 	get instantChargeLimitMode() {
-		return this._instantChargeLimitMode
+		return (
+			this.chargeTemplate?.chargemode.instant_charging.limit.selected ?? 'none'
+		)
 	}
 	set instantChargeLimitMode(mode: string) {
-		this._instantChargeLimitMode = mode
-		updateServer('cpInstantChargeLimitMode', mode, this.id)
-	}
-	updateInstantChargeLimitMode(mode: string) {
-		this._instantChargeLimitMode = mode
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.instant_charging.limit.selected = mode
+			updateChargeTemplate(this.id)
+		}
 	}
 	get instantTargetSoc() {
-		return this._instantTargetSoc
+		return this.chargeTemplate?.chargemode.instant_charging.limit.soc ?? 0
 	}
 	set instantTargetSoc(soc: number) {
-		this._instantTargetSoc = soc
-		updateServer('cpInstantTargetSoc', soc, this.id)
-	}
-	updateInstantTargetSoc(soc: number) {
-		this._instantTargetSoc = soc
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.instant_charging.limit.soc = soc
+			updateChargeTemplate(this.id)
+		}
 	}
 	get instantMaxEnergy() {
-		return this._instantMaxEnergy
+		return this.chargeTemplate?.chargemode.instant_charging.limit.amount ?? 0
 	}
 	set instantMaxEnergy(max: number) {
-		this._instantMaxEnergy = max
-		updateServer('cpInstantMaxEnergy', max, this.id)
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.instant_charging.limit.amount = max
+			updateChargeTemplate(this.id)
+		}
+	}
+	get instantTargetPhases() {
+		return this.chargeTemplate?.chargemode.instant_charging.phases_to_use ?? 0
 	}
-	updateInstantMaxEnergy(max: number) {
-		this._instantMaxEnergy = max
+	set instantTargetPhases(phases: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.instant_charging.phases_to_use = phases
+			updateChargeTemplate(this.id)
+		}
 	}
 	get pvFeedInLimit() {
-		return this._pvFeedInLimit
+		return this.chargeTemplate?.chargemode.pv_charging.feed_in_limit ?? false
 	}
 	set pvFeedInLimit(setting: boolean) {
-		this._pvFeedInLimit = setting
-		updateServer('cpPvFeedInLimit', setting, this.id)
-	}
-	updatePvFeedInLimit(setting: boolean) {
-		this._pvFeedInLimit = setting
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.feed_in_limit = setting
+			updateChargeTemplate(this.id)
+		}
 	}
 	get pvMinCurrent() {
-		return this._pvMinCurrent
+		return this.chargeTemplate?.chargemode.pv_charging.min_current ?? 0
 	}
 	set pvMinCurrent(min: number) {
-		this._pvMinCurrent = min
-		updateServer('cpPvMinCurrent', min, this.id)
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.min_current = min
+			updateChargeTemplate(this.id)
+		}
 	}
-	updatePvMinCurrent(min: number) {
-		this._pvMinCurrent = min
+	get pvMinSoc() {
+		return this.chargeTemplate?.chargemode.pv_charging.min_soc ?? 0
 	}
-	get pvMaxSoc() {
-		return this._pvMaxSoc
+	set pvMinSoc(min: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.min_soc = min
+			updateChargeTemplate(this.id)
+		}
 	}
-	set pvMaxSoc(max: number) {
-		this._pvMaxSoc = max
-		updateServer('cpPvMaxSoc', max, this.id)
+	get pvMinSocCurrent() {
+		return this.chargeTemplate?.chargemode.pv_charging.min_soc_current ?? 0
 	}
-	updatePvMaxSoc(max: number) {
-		this._pvMaxSoc = max
+	set pvMinSocCurrent(a: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.min_soc_current = a
+			updateChargeTemplate(this.id)
+		}
 	}
-	get pvMinSoc() {
-		return this._pvMinSoc
+	set pvMinSocPhases(n: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.phases_to_use_min_soc = n
+			updateChargeTemplate(this.id)
+		}
 	}
-	set pvMinSoc(min: number) {
-		this._pvMinSoc = min
-		updateServer('cpPvMinSoc', min, this.id)
+	get pvMinSocPhases() {
+		return (
+			this.chargeTemplate?.chargemode.pv_charging.phases_to_use_min_soc ?? 0
+		)
 	}
-	updatePvMinSoc(min: number) {
-		this._pvMinSoc = min
+	get pvChargeLimitMode() {
+		return this.chargeTemplate?.chargemode.pv_charging.limit.selected ?? 'none'
 	}
-	get pvMinSocCurrent() {
-		return this._pvMinSocCurrent
+	set pvChargeLimitMode(mode: string) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.limit.selected = mode
+			updateChargeTemplate(this.id)
+		}
 	}
-	set pvMinSocCurrent(a: number) {
-		this._pvMinSocCurrent = a
-		updateServer('cpPvMinSocCurrent', a, this.id)
+	get pvTargetSoc() {
+		return this.chargeTemplate?.chargemode.pv_charging.limit.soc ?? 0
+	}
+	set pvTargetSoc(soc: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.limit.soc = soc
+			updateChargeTemplate(this.id)
+		}
+	}
+	get pvMaxEnergy() {
+		return this.chargeTemplate?.chargemode.pv_charging.limit.amount ?? 0
+	}
+	set pvMaxEnergy(max: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.limit.amount = max
+			updateChargeTemplate(this.id)
+		}
+	}
+	get pvTargetPhases() {
+		return this.chargeTemplate?.chargemode.pv_charging.phases_to_use ?? 0
 	}
-	updatePvMinSocCurrent(a: number) {
-		this._pvMinSocCurrent = a
+	set pvTargetPhases(phases: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.pv_charging.phases_to_use = phases
+			updateChargeTemplate(this.id)
+		}
+	}
+	get ecoMinCurrent() {
+		return this.chargeTemplate?.chargemode.eco_charging.current ?? 0
+	}
+	set ecoMinCurrent(min: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.eco_charging.current = min
+			updateChargeTemplate(this.id)
+		}
+	}
+	get ecoTargetPhases() {
+		return this.chargeTemplate?.chargemode.eco_charging.phases_to_use ?? 0
+	}
+	set ecoTargetPhases(phases: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.eco_charging.phases_to_use = phases
+			updateChargeTemplate(this.id)
+		}
+	}
+	get ecoChargeLimitMode() {
+		return this.chargeTemplate?.chargemode.eco_charging.limit.selected ?? 'none'
+	}
+	set ecoChargeLimitMode(mode: string) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.eco_charging.limit.selected = mode
+			updateChargeTemplate(this.id)
+		}
+	}
+	get ecoTargetSoc() {
+		return this.chargeTemplate?.chargemode.eco_charging.limit.soc ?? 0
+	}
+	set ecoTargetSoc(soc: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.eco_charging.limit.soc = soc
+			updateChargeTemplate(this.id)
+		}
+	}
+	get ecoMaxEnergy() {
+		return this.chargeTemplate?.chargemode.eco_charging.limit.amount ?? 0
+	}
+	set ecoMaxEnergy(max: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.eco_charging.limit.amount = max
+			updateChargeTemplate(this.id)
+		}
+	}
+	get etMaxPrice() {
+		return (
+			(this.chargeTemplate?.chargemode.eco_charging.max_price ?? 0) * 100000
+		)
+	}
+	set etMaxPrice(newPrice: number) {
+		if (this.chargeTemplate) {
+			this.chargeTemplate.chargemode.eco_charging.max_price =
+				Math.ceil(newPrice * 1000) / 100000000
+			updateChargeTemplate(this.id)
+		}
+	}
+	get etActive() {
+		return (
+			this.chargeTemplate &&
+			this.chargeTemplate.chargemode.selected == ChargeMode.eco_charging
+		)
 	}
 	get realCurrent() {
 		switch (this.phasesInUse) {
@@ -229,24 +316,6 @@ export class ChargePoint {
 				return 0
 		}
 	}
-	get etActive() {
-		if (vehicles[this.connectedVehicle]) {
-			return vehicles[this.connectedVehicle].etActive
-		} else {
-			return false
-		}
-	}
-	set etActive(val) {
-		if (vehicles[this.connectedVehicle]) {
-			vehicles[this.connectedVehicle].etActive = val
-		}
-	}
-	get etMaxPrice() {
-		return vehicles[this.connectedVehicle].etMaxPrice ?? 0
-	}
-	set etMaxPrice(newPrice: number) {
-		updateServer('cpEtMaxPrice', Math.round(newPrice * 10) / 1000000, this.id)
-	}
 	toPowerItem(): PowerItem {
 		return {
 			name: this.name,
@@ -294,27 +363,6 @@ export class Vehicle {
 	updateEvTemplateId(id: number) {
 		this._evTemplateId = id
 	}
-	get etActive() {
-		if (chargeTemplates[this.chargeTemplateId]) {
-			return chargeTemplates[this.chargeTemplateId].et.active
-		} else {
-			return false
-		}
-	}
-	set etActive(val) {
-		if (chargeTemplates[this.chargeTemplateId]) {
-			updateServer('priceCharging', val, this.chargeTemplateId)
-
-			// openWB/set/vehicle/template/charge_template/2/et/active -> false
-		}
-	}
-	get etMaxPrice() {
-		if (chargeTemplates[this.chargeTemplateId]) {
-			if (chargeTemplates[this.chargeTemplateId].et.active) {
-				return chargeTemplates[this.chargeTemplateId].et.max_price * 100000
-			}
-		}
-	}
 	get chargepoint(): ChargePoint | undefined {
 		for (const cp of Object.values(chargePoints)) {
 			if (cp.connectedVehicle == this.id) {
@@ -336,7 +384,7 @@ export enum ChargeMode {
 	instant_charging = 'instant_charging',
 	pv_charging = 'pv_charging',
 	scheduled_charging = 'scheduled_charging',
-	standby = 'standby',
+	eco_charging = 'eco_charging',
 	stop = 'stop',
 }
 export interface ChargeTimePlan {
@@ -376,31 +424,57 @@ export class ChargeSchedule {
 	}
 }
 export interface ChargeTemplate {
+	id: number
 	name: string
 	prio: boolean
+	load_default: boolean
+	time_charging: {
+		active: boolean
+		plans: [ChargeTimePlan]
+	}
 	chargemode: {
 		selected: ChargeMode
-		instant_charging: {
+		eco_charging: {
 			current: number
+			dc_current: number
 			limit: {
 				selected: string
 				soc: number
 				amount: number
 			}
+			max_price: number
+			phases_to_use: number
 		}
 		pv_charging: {
+			dc_min_current: number
+			dc_min_soc_current: number
 			feed_in_limit: boolean
+			limit: {
+				selected: string
+				amount: number
+				soc: number
+			}
 			min_current: number
-			max_soc: number
-			min_soc: number
 			min_soc_current: number
+			min_soc: number
+			phases_to_use: number
+			phases_to_use_min_soc: number
+		}
+		scheduled_charging: {
+			plans: ChargeSchedule[]
+		}
+		instant_charging: {
+			current: number
+			dc_current: number
+			limit: {
+				selected: string
+				soc: number
+				amount: number
+			}
+			phases_to_use: number
 		}
-	}
-	time_charging: {
-		active: boolean
 	}
 	disable_after_unplug: boolean
-	load_default: boolean
 	et: {
 		active: boolean
 		max_price: number
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/processMessages.ts b/packages/modules/display_themes/colors/source/src/components/chargePointList/processMessages.ts
index b51170d0f0..816285961b 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/processMessages.ts
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/processMessages.ts
@@ -5,16 +5,11 @@ import {
 	chargeTemplates,
 	evTemplates,
 	Vehicle,
-	ChargeMode,
-	type ChargeTimePlan,
-	scheduledChargingPlans,
-	timeChargingPlans,
 } from './model'
 import type {
 	ConnectedVehicleConfig,
 	ChargeTemplate,
 	EvTemplate,
-	ChargeSchedule,
 } from './model'
 
 export function processChargepointMessages(topic: string, message: string) {
@@ -110,25 +105,12 @@ export function processChargepointMessages(topic: string, message: string) {
 			)
 		) {
 			const config: ConnectedVehicleConfig = JSON.parse(message)
-			switch (config.chargemode) {
-				case 'instant_charging':
-					chargePoints[index].updateChargeMode(ChargeMode.instant_charging)
-					break
-				case 'pv_charging':
-					chargePoints[index].updateChargeMode(ChargeMode.pv_charging)
-					break
-				case 'scheduled_charging':
-					chargePoints[index].updateChargeMode(ChargeMode.scheduled_charging)
-					break
-				case 'standby':
-					chargePoints[index].updateChargeMode(ChargeMode.standby)
-					break
-				case 'stop':
-					chargePoints[index].updateChargeMode(ChargeMode.stop)
-					break
-			}
-			chargePoints[index].chargeTemplate = config.charge_template
 			chargePoints[index].averageConsumption = config.average_consumption
+			chargePoints[index].chargeTemplateId = config.charge_template
+		} else if (
+			topic.match(/^openwb\/chargepoint\/[0-9]+\/set\/charge_template$/i)
+		) {
+			chargePoints[index].chargeTemplate = JSON.parse(message)
 		} else {
 			// console.warn('Ignored chargepoint message: ' + topic)
 		}
@@ -183,41 +165,7 @@ export function processVehicleTemplateMessages(topic: string, message: string) {
 		const match = topic.match(/[0-9]+$/i)
 		if (match) {
 			const index = +match[0]
-			const template: ChargeTemplate = JSON.parse(message) as ChargeTemplate
-			chargeTemplates[index] = template
-			updateCpFromChargeTemplate(index, template)
-		}
-	} else if (
-		topic.match(
-			/^openwb\/vehicle\/template\/charge_template\/[0-9]+\/time_charging\/plans\/[0-9]+$/i,
-		)
-	) {
-		const tidMatch = topic.match(/(?:\/)([0-9]+)(?:\/)/g)
-		const pidMatch = topic.match(/[0-9]+$/i)
-		if (tidMatch && pidMatch) {
-			const tId = +tidMatch[0].replace(/[^0-9]+/g, '')
-			const pId = +pidMatch[0]
-			const plan: ChargeTimePlan = JSON.parse(message)
-			if (!(tId in timeChargingPlans)) {
-				timeChargingPlans[tId] = []
-			}
-			timeChargingPlans[tId][pId] = plan
-		}
-	} else if (
-		topic.match(
-			/^openwb\/vehicle\/template\/charge_template\/[0-9]+\/chargemode\/scheduled_charging\/plans\/[0-9]+$/i,
-		)
-	) {
-		const tidMatch = topic.match(/(?:\/)([0-9]+)(?:\/)/g)
-		const pidMatch = topic.match(/[0-9]+$/i)
-		if (tidMatch && pidMatch) {
-			const tId = +tidMatch[0].replace(/[^0-9]+/g, '')
-			const pId = +pidMatch[0]
-			const plan: ChargeSchedule = JSON.parse(message)
-			if (!(tId in scheduledChargingPlans)) {
-				scheduledChargingPlans[tId] = []
-			}
-			scheduledChargingPlans[tId][pId] = plan
+			chargeTemplates[index] = JSON.parse(message) as ChargeTemplate
 		}
 	} else if (topic.match(/^openwb\/vehicle\/template\/ev_template\/[0-9]+$/i)) {
 		const match = topic.match(/[0-9]+$/i)
@@ -225,35 +173,11 @@ export function processVehicleTemplateMessages(topic: string, message: string) {
 			const index = +match[0]
 			const template: EvTemplate = JSON.parse(message) as EvTemplate
 			evTemplates[index] = template
-			// updateCpFromChargeTemplate(index, template)
 		}
 	} else {
 		// console.warn('Ignored VEHICLE TEMPLATE message [' + topic + ']=' + message)
 	}
 }
-function updateCpFromChargeTemplate(index: number, template: ChargeTemplate) {
-	Object.values(chargePoints).forEach((cp) => {
-		if (cp.chargeTemplate == index) {
-			cp.updateCpPriority(template.prio)
-			// cp.updateChargeMode(template.chargemode.selected)
-			cp.updateInstantChargeLimitMode(
-				template.chargemode.instant_charging.limit.selected,
-			)
-			cp.updateInstantTargetCurrent(
-				template.chargemode.instant_charging.current,
-			)
-			cp.updateInstantTargetSoc(template.chargemode.instant_charging.limit.soc)
-			cp.updateInstantMaxEnergy(
-				template.chargemode.instant_charging.limit.amount,
-			)
-			cp.updatePvFeedInLimit(template.chargemode.pv_charging.feed_in_limit)
-			cp.updatePvMinCurrent(template.chargemode.pv_charging.min_current)
-			cp.updatePvMaxSoc(template.chargemode.pv_charging.max_soc)
-			cp.updatePvMinSoc(template.chargemode.pv_charging.min_soc)
-			cp.updatePvMinSocCurrent(template.chargemode.pv_charging.min_soc_current)
-		}
-	})
-}
 
 function getIndex(topic: string): number | undefined {
 	let index = 0
diff --git a/packages/modules/display_themes/colors/source/src/components/powerGraph/PgSoc.vue b/packages/modules/display_themes/colors/source/src/components/powerGraph/PgSoc.vue
index d43453d16b..dfa14c32d5 100755
--- a/packages/modules/display_themes/colors/source/src/components/powerGraph/PgSoc.vue
+++ b/packages/modules/display_themes/colors/source/src/components/powerGraph/PgSoc.vue
@@ -118,7 +118,7 @@ const nameY = computed(() => {
 				return yScale.value(graphData.data[index]['soc' + vID.value] + 2)
 			case 2:
 				index = Math.round(graphData.data.length / 2)
-				return yScale.value(graphData.data[index].batSoc + 2)
+				return yScale.value((graphData.data[index]?.batSoc ?? 0) + 2)
 			default:
 				return 0
 		}
diff --git a/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue b/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue
index 88e9f2197c..9d69d6e5d9 100755
--- a/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue
+++ b/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue
@@ -1,9 +1,9 @@
 <template>
 	<div class="pricesettings">
 		<div class="grapharea">
-			<p>Anbieter: {{ etData.etProvider }}</p>
+			<span>Anbieter: {{ etData.etProvider }}</span>
 			<figure id="pricechart">
-				<svg viewBox="0 0 400 300">
+				<svg viewBox="0 0 400 270">
 					<g
 						:id="chartId"
 						:origin="draw"
@@ -323,12 +323,12 @@ onMounted(() => {
 .pricesettings {
 	display: grid;
 	grid-template-columns: 50% 50%;
-	grid-template-rows: 340px;
+	grid-template-rows: 325px;
 }
 .grapharea {
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
+	justify-content: top;
 	align-items: stretch;
 	min-width: 0px;
 	overflow: hidden;
@@ -337,7 +337,7 @@ onMounted(() => {
 .controlarea {
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
+	justify-content: center;
 	align-items: stretch;
 	min-width: 0px;
 	overflow: hidden;
@@ -346,7 +346,7 @@ onMounted(() => {
 	padding-right: 10px;
 }
 .sliderarea {
-	margin-bottom: 45px;
+	margin-bottom: 5px;
 }
 .subtitle {
 	font-size: var(--font-settings);
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/ModalComponent.vue b/packages/modules/display_themes/colors/source/src/components/shared/ModalComponent.vue
index a33c16e02d..0673fa6d7a 100755
--- a/packages/modules/display_themes/colors/source/src/components/shared/ModalComponent.vue
+++ b/packages/modules/display_themes/colors/source/src/components/shared/ModalComponent.vue
@@ -14,7 +14,7 @@
 						<i class="fa-solid fa-lg fa-circle-check m-0 p-0" />
 					</button>
 				</div>
-				<div class="modal-body">
+				<div :id="'modal-body-' + props.modalId" class="modal-body">
 					<slot />
 				</div>
 				<div class="modal-footer"></div>
diff --git a/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue b/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue
index 9aabc777b8..fc82cb3bf6 100644
--- a/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue
+++ b/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue
@@ -15,10 +15,10 @@
 		</div>
 
 		<div class="rightside">
-			<CPChargePoint
+			<ChargePoint
 				v-if="Object.values(chargePoints).length > globalConfig.cpToShow"
 				:chargepoint="Object.values(chargePoints)[globalConfig.cpToShow]"
-			></CPChargePoint>
+			></ChargePoint>
 		</div>
 	</div>
 	<ModalComponent modal-id="numberpad">
@@ -59,7 +59,7 @@ import StatusPage from '@/views/StatusPage.vue'
 import SettingsPage from '@/views/SettingsPage.vue'
 import { msgInit } from '@/assets/js/processMessages'
 import { initGraph } from '@/components/powerGraph/model'
-import CPChargePoint from '@/components/chargePointList/CPChargePoint.vue'
+import ChargePoint from '@/components/chargePointList/ChargePoint.vue'
 import { chargePoints } from '@/components/chargePointList/model'
 import { displayConfig, checkCode } from '@/assets/js/model'
 
diff --git a/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue b/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue
index 249a910d72..0d390405ac 100644
--- a/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue
+++ b/packages/modules/display_themes/colors/source/src/views/SettingsPage.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="m-0 mt-1 p-0 grid-col-12 tabarea">
+	<div :id="`tabarea-${cpid}`" class="m-0 mt-1 p-0 grid-col-12 tabarea">
 		<nav class="nav nav-tabs nav-justified mx-1 mt-1" role="tablist">
 			<a
 				:id="'chSettings' + cpid"
@@ -34,21 +34,21 @@
 				<i class="fa-solid fa-bullseye me-1" /> Zielladen
 			</a>
 			<a
-				:id="'tmSettings' + cpid"
+				:id="'ecSettings' + cpid"
 				class="nav-link"
 				data-bs-toggle="tab"
-				:data-bs-target="'#timeSettings' + cpid"
+				:data-bs-target="'#ecoSettings' + cpid"
 			>
-				<i class="fa-solid fa-clock" /> Zeitpläne
+				<i class="fa-solid fa-coins me-1" /> Eco
 			</a>
+
 			<a
-				v-if="etData.active"
-				:id="'prSettings' + cpid"
+				:id="'tmSettings' + cpid"
 				class="nav-link"
 				data-bs-toggle="tab"
-				:data-bs-target="'#priceSettings' + cpid"
+				:data-bs-target="'#timeSettings' + cpid"
 			>
-				<i class="fa-solid fa-coins" /> Strompreis
+				<i class="fa-solid fa-clock" /> Zeitpläne
 			</a>
 		</nav>
 
@@ -60,7 +60,7 @@
 				role="tabpanel"
 				aria-labelledby="instant-tab"
 			>
-				<CPChargeConfig :chargepoint-id="cpid" />
+				<ChargeConfig :chargepoint-id="cpid" />
 			</div>
 			<div
 				:id="'instantSettings' + cpid"
@@ -68,7 +68,7 @@
 				role="tabpanel"
 				aria-labelledby="instant-tab"
 			>
-				<CPConfigInstant :chargepoint-id="cpid" />
+				<ConfigInstant :chargepoint-id="cpid" />
 			</div>
 
 			<div
@@ -77,7 +77,7 @@
 				role="tabpanel"
 				aria-labelledby="pv-tab"
 			>
-				<CPConfigPv :chargepoint-id="cpid" />
+				<ConfigPv :chargepoint-id="cpid" />
 			</div>
 			<div
 				:id="'scheduledSettings' + cpid"
@@ -85,32 +85,31 @@
 				role="tabpanel"
 				aria-labelledby="scheduled-tab"
 			>
-				<CPConfigScheduled
+				<ConfigScheduled
 					v-if="chargeTemplate != undefined"
-					:charge-template-id="props.chargepoint.chargeTemplate"
+					:charge-point="props.chargepoint"
 				/>
 			</div>
 			<div
-				:id="'timeSettings' + cpid"
+				:id="'ecoSettings' + cpid"
 				class="tab-pane"
 				role="tabpanel"
-				aria-labelledby="time-tab"
+				aria-labelledby="eco-tab"
 			>
-				<CPConfigTimed
+				<ConfigEco
 					v-if="chargeTemplate != undefined"
-					:charge-template-id="props.chargepoint.chargeTemplate"
+					:chargepoint="props.chargepoint"
 				/>
 			</div>
 			<div
-				v-if="etData.active"
-				:id="'priceSettings' + cpid"
+				:id="'timeSettings' + cpid"
 				class="tab-pane"
 				role="tabpanel"
-				aria-labelledby="price-tab"
+				aria-labelledby="time-tab"
 			>
-				<PriceChart
-					v-if="etData.active"
-					:charge-point-id="props.chargepoint.id"
+				<ConfigTimed
+					v-if="chargeTemplate != undefined"
+					:charge-point="props.chargepoint"
 				/>
 			</div>
 		</div>
@@ -121,20 +120,20 @@
 import { computed } from 'vue'
 import {
 	type ChargePoint,
-	chargeTemplates,
+	//	chargeTemplates,
 } from '@/components/chargePointList/model'
-import CPConfigInstant from '@/components/chargePointList/CPConfigInstant.vue'
-import CPConfigPv from '@/components/chargePointList/CPConfigPv.vue'
-import CPConfigScheduled from '@/components/chargePointList/CPConfigScheduled.vue'
-import CPConfigTimed from '@/components/chargePointList/CPConfigTimed.vue'
-import CPChargeConfig from '@/components/chargePointList/CPChargeConfig.vue'
-import PriceChart from '@/components/priceChart/PriceChart.vue'
-import { etData } from '@/components/priceChart/model'
+import ConfigInstant from '@/components/chargePointList/configPanels/ConfigInstant.vue'
+import ConfigPv from '@/components/chargePointList/configPanels/ConfigPv.vue'
+import ConfigScheduled from '@/components/chargePointList/configPanels/ConfigScheduled.vue'
+import ConfigEco from '@/components/chargePointList/configPanels/ConfigEco.vue'
+import ConfigTimed from '@/components/chargePointList/configPanels/ConfigTimed.vue'
+import ChargeConfig from '@/components/chargePointList/configPanels/ChargeConfig.vue'
+//import PriceChart from '@/components/priceChart/PriceChart.vue'
 const props = defineProps<{
 	chargepoint: ChargePoint
 }>()
 const chargeTemplate = computed(() => {
-	return chargeTemplates[props.chargepoint.chargeTemplate]
+	return props.chargepoint.chargeTemplate
 })
 const cpid = computed(() => {
 	return props.chargepoint.id
@@ -163,7 +162,7 @@ const cpid = computed(() => {
 }
 
 .fa-charging-station {
-	color: var(--color-charging);
+	color: var(--color-menu);
 }
 
 .fa-bullseye {
@@ -179,6 +178,10 @@ const cpid = computed(() => {
 }
 
 .fa-coins {
-	color: var(--color-charging);
+	color: var(--color-devices);
+}
+
+.fa-clock {
+	color: var(--color-menu);
 }
 </style>