diff --git a/packages/modules/web_themes/colors/source/src/assets/css/style.css b/packages/modules/web_themes/colors/source/src/assets/css/style.css
index dd40123f55..5b975bbda9 100644
--- a/packages/modules/web_themes/colors/source/src/assets/css/style.css
+++ b/packages/modules/web_themes/colors/source/src/assets/css/style.css
@@ -125,9 +125,7 @@ html {
 .largeTextSize {
 	font-size: var(--font-large);
 }
-.buttonTextSize {
-	font-size: var(--font-large);
-}
+
 h3 {
 	font-size: var(--font-large);
 	color: var(--color-title);
@@ -193,7 +191,7 @@ body>.container-fluid {
 	/* --color-counters: #cab2d6; */
 	/* --color-counters: #a00dd8; */
 	--color-counters: chocolate;
-
+	--color-eco: #f16913;
 	--color-ctr1: chocolate;
 	--color-ctr2: peru;
 	--color-ctr3: sienna;
diff --git a/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts b/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts
index e9009121aa..0c4703ca7f 100755
--- a/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts
+++ b/packages/modules/web_themes/colors/source/src/assets/js/helpers.ts
@@ -4,6 +4,8 @@
  * Copyright (c) 2022 Claus Hagen
  */
 
+import { etData } from '@/components/priceChart/model'
+
 export function formatWatt(watt: number, decimalPlaces = 1) {
 	let wattResult: number
 	if (watt >= 1000 && decimalPlaces < 4) {
@@ -80,10 +82,20 @@ export function formatTime(seconds: number) {
 		return minutes + ' min'
 	}
 }
-export function formatCurrentTime(d: Date) {
-	return d.toLocaleTimeString(['de-DE'], { hour: '2-digit', minute: '2-digit' })
+export function formatCurrentTime(d: Date, includeDay = false) {
+	if (includeDay) {
+		return d.toLocaleTimeString(['de-DE'], {
+			weekday: 'short',
+			hour: '2-digit',
+			minute: '2-digit',
+		})
+	} else {
+		return d.toLocaleTimeString(['de-DE'], {
+			hour: '2-digit',
+			minute: '2-digit',
+		})
+	}
 }
-
 export function formatDate(d: Date, mode: string = 'day') {
 	switch (mode) {
 		case 'day':
@@ -95,7 +107,6 @@ export function formatDate(d: Date, mode: string = 'day') {
 			return `${d.getFullYear()}`
 	}
 }
-
 export function formatMonth(month: number, year: number) {
 	const months = [
 		'Jan',
@@ -122,6 +133,10 @@ export function formatTemp(t: number) {
 		: '-'
 }
 
+export function formatPrice(price: number) {
+	return `${price.toFixed(2)} ${etData.unit}`
+}
+
 export function fgColor(colorname: string) {
 	const root = document.documentElement
 	const style = getComputedStyle(root)
diff --git a/packages/modules/web_themes/colors/source/src/assets/js/model.ts b/packages/modules/web_themes/colors/source/src/assets/js/model.ts
index 36b472d5b1..cf66e86010 100644
--- a/packages/modules/web_themes/colors/source/src/assets/js/model.ts
+++ b/packages/modules/web_themes/colors/source/src/assets/js/model.ts
@@ -32,6 +32,7 @@ export const masterData: { [key: string]: ItemProps } = reactive({
 	counters: { name: 'Zähler', color: 'var(--color-counters)', icon: '\uf0eb' },
 	batIn: { name: '> Bat', color: 'var(--color-battery)', icon: '\uf061\uf5df' },
 	house: { name: 'Haus', color: 'var(--color-house)', icon: '\uf015' },
+	price: { name: 'Strompreis', color: 'crimson', icon: '\uf0d6' },
 })
 export const colormap: Map<string, string[]> = new Map([
 	[
diff --git a/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts b/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts
index c14ac19202..929fdfa60a 100755
--- a/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts
+++ b/packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts
@@ -39,6 +39,7 @@ const topicsToSubscribe = [
 	'openWB/chargepoint/#',
 	'openWB/vehicle/#',
 	'openWB/general/chargemode_config/pv_charging/#',
+	'openWB/general/web_theme',
 	'openWB/optional/ep/#',
 	'openWB/system/#',
 	'openWB/LegacySmartHome/#',
@@ -77,6 +78,8 @@ function processMqttMessage(topic: string, payload: Buffer) {
 		topic.match(/^openwb\/general\/chargemode_config\/pv_charging\//i)
 	) {
 		processPvConfigMessages(topic, message)
+	} else if (topic.match(/^openwb\/general\/web_theme/i)) {
+		processThemeConfigMessages(topic, message)
 	} else if (topic.match(/^openwb\/graph\//i)) {
 		processLiveGraphMessages(topic, message)
 	} else if (topic.match(/^openwb\/log\/daily\//i)) {
@@ -200,7 +203,21 @@ function processPvConfigMessages(topic: string, message: string) {
 		}
 	}
 }
-
+function processThemeConfigMessages(topic: string, message: string) {
+	const themeConfig = JSON.parse(message).configuration
+	globalConfig.setShowRelativeArcs(themeConfig.showRelativeArcs)
+	globalConfig.setDisplayMode(themeConfig.displayMode)
+	globalConfig.setLiveGraphDuration(themeConfig.liveGraphDuration)
+	globalConfig.setShowGrid(themeConfig.showGrid)
+	globalConfig.setSmartHomeColors(themeConfig.smartHomeColors)
+	globalConfig.setDecimalPlaces(themeConfig.decimalPlaces)
+	globalConfig.setShowCounters(themeConfig.showCounters)
+	globalConfig.setShowVehicles(themeConfig.showVehicles)
+	globalConfig.setShowStandardVehicle(themeConfig.showStandardVehicle)
+	globalConfig.setShowPrices(themeConfig.showPrices)
+	globalConfig.setShowInverters(themeConfig.showInverters)
+	globalConfig.setAlternativeEnergy(themeConfig.alternativeEnergy)
+}
 function processEvuMessages(topic: string, message: string) {
 	const elements = topic.split('/')
 	switch (elements[4]) {
@@ -249,23 +266,6 @@ function processSystemMessages(topic: string, message: string) {
 				}
 				batteries.value.get(config.id)!.name = config.name
 		}
-
-		/* 	if (
-			(config.type == 'counter' || config.type == 'consumption_counter') &&
-			counters[config.id]
-		) {
-			counters[config.id].name = config.name
-		} else if (config.type == 'inverter' ) {
-			if (!pvSystems.value.has(config.id)) {
-				pvSystems.value.set(config.id, new PvSystem(config.id))
-			}
-			pvSystems.value.get(config.id)!.name = config.name
-		} else if (config.type == 'bat') {
-			if (!batteries.value.has(config.id)) {
-				addBattery(config.id)
-			}
-			batteries.value.get(config.id)!.name = config.name
-		} */
 	}
 }
 
diff --git a/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts b/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts
index 216780c22b..9ff7089a3a 100644
--- a/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts
+++ b/packages/modules/web_themes/colors/source/src/assets/js/themeConfig.ts
@@ -9,10 +9,6 @@ import { select } from 'd3'
 import { ChargeMode, type ChargeModeInfo } from './types'
 import { addShDevice, shDevices } from '@/components/smartHome/model'
 import { registry } from './model'
-import {
-	sourceGraphIsNotInitialized,
-	usageGraphIsNotInitialized,
-} from '@/components/powerGraph/model'
 import { updateServer } from './sendMessages'
 import { counters } from '@/components/counterList/model'
 export class Config {
@@ -21,6 +17,7 @@ export class Config {
 	private _graphPreference = 'today'
 	private _usageStackOrder = 0
 	private _displayMode = 'dark'
+	private _liveGraphDuration = 7200
 	private _showGrid = false
 	private _smartHomeColors = 'normal'
 	private _decimalPlaces = 1
@@ -56,10 +53,11 @@ export class Config {
 	get showRelativeArcs() {
 		return this._showRelativeArcs
 	}
-	set showRelativeArcs(setting: boolean) {
+	/* set showRelativeArcs(setting: boolean) {
 		this._showRelativeArcs = setting
 		savePrefs()
 	}
+	 */
 	setShowRelativeArcs(setting: boolean) {
 		this._showRelativeArcs = setting
 	}
@@ -86,41 +84,48 @@ export class Config {
 	get displayMode() {
 		return this._displayMode
 	}
-	set displayMode(mode: string) {
+	/* set displayMode(mode: string) {
 		this._displayMode = mode
 		switchTheme(mode)
-	}
+	} */
 	setDisplayMode(mode: string) {
 		this._displayMode = mode
+		switchTheme(mode)
+	}
+	get liveGraphDuration() {
+		return this._liveGraphDuration
+	}
+	setLiveGraphDuration(t: number) {
+		this._liveGraphDuration = t
 	}
 	get showGrid() {
 		return this._showGrid
 	}
-	set showGrid(setting: boolean) {
+	/* set showGrid(setting: boolean) {
 		this._showGrid = setting
 		savePrefs()
-	}
+	} */
 	setShowGrid(setting: boolean) {
 		this._showGrid = setting
 	}
 	get decimalPlaces() {
 		return this._decimalPlaces
 	}
-	set decimalPlaces(setting: number) {
+	/* set decimalPlaces(setting: number) {
 		this._decimalPlaces = setting
 		savePrefs()
-	}
+	} */
 	setDecimalPlaces(setting: number) {
 		this._decimalPlaces = setting
 	}
 	get smartHomeColors() {
 		return this._smartHomeColors
 	}
-	set smartHomeColors(setting: string) {
+	/* set smartHomeColors(setting: string) {
 		this._smartHomeColors = setting
 		switchSmarthomeColors(setting)
 		savePrefs()
-	}
+	} */
 	setSmartHomeColors(setting: string) {
 		this._smartHomeColors = setting
 		switchSmarthomeColors(setting)
@@ -238,64 +243,64 @@ export class Config {
 	get showCounters() {
 		return this._showCounters
 	}
-	set showCounters(show: boolean) {
+	/* set showCounters(show: boolean) {
 		this._showCounters = show
 		savePrefs()
-	}
+	} */
 	setShowCounters(show: boolean) {
 		this._showCounters = show
 	}
 	get showVehicles() {
 		return this._showVehicles
 	}
-	set showVehicles(show: boolean) {
+	/* set showVehicles(show: boolean) {
 		this._showVehicles = show
 		savePrefs()
-	}
+	} */
 	setShowVehicles(show: boolean) {
 		this._showVehicles = show
 	}
 	get showStandardVehicle() {
 		return this._showStandardVehicle
 	}
-	set showStandardVehicle(show: boolean) {
-		this._showStandardVehicle = show
-		savePrefs()
-	}
+	//set showStandardVehicle(show: boolean) {
+	//this._showStandardVehicle = show
+	//savePrefs()
+	//}
 	setShowStandardVehicle(show: boolean) {
 		this._showStandardVehicle = show
 	}
 	get showPrices() {
 		return this._showPrices
 	}
-	set showPrices(show: boolean) {
+	/* set showPrices(show: boolean) {
 		this._showPrices = show
 		savePrefs()
-	}
+	} */
 	setShowPrices(show: boolean) {
 		this._showPrices = show
 	}
 	get showInverters() {
 		return this._showInverters
 	}
-	set showInverters(show: boolean) {
+	/* set showInverters(show: boolean) {
 		this._showInverters = show
 		sourceGraphIsNotInitialized()
 		usageGraphIsNotInitialized()
 		savePrefs()
-	}
+	} */
 	setShowInverters(show: boolean) {
 		this._showInverters = show
 	}
 	get alternativeEnergy() {
 		return this._alternativeEnergy
 	}
-	set alternativeEnergy(show: boolean) {
+	/* set alternativeEnergy(show: boolean) {
 		this._alternativeEnergy = show
 		sourceGraphIsNotInitialized()
 		usageGraphIsNotInitialized()
 		savePrefs()
-	}
+	} */
 	setAlternativeEnergy(show: boolean) {
 		this._alternativeEnergy = show
 	}
@@ -385,7 +390,7 @@ export const chargemodes: { [key: string]: ChargeModeInfo } = {
 	eco_charging: {
 		mode: ChargeMode.eco_charging,
 		name: 'Eco',
-		color: 'var(--color-devices)',
+		color: 'var(--color-eco)',
 		icon: 'fa-coins',
 	},
 	stop: {
@@ -432,15 +437,15 @@ export function switchTheme(mode: string) {
 	doc.classed('theme-blue', mode == 'blue')
 	savePrefs()
 }
-export function toggleGrid() {
+/* export function toggleGrid() {
 	globalConfig.showGrid = !globalConfig.showGrid
 	savePrefs()
-}
-export function toggleFixArcs() {
+} */
+/* export function toggleFixArcs() {
 	// globalConfig.etPrice = globalConfig.etPrice + 10
 	globalConfig.showRelativeArcs = !globalConfig.showRelativeArcs
 	savePrefs()
-}
+} */
 export function resetArcs() {
 	globalConfig.maxPower =
 		registry.getPower('evuIn') +
@@ -448,14 +453,14 @@ export function resetArcs() {
 		registry.getPower('batOut')
 	savePrefs()
 }
-export function switchDecimalPlaces() {
+/* export function switchDecimalPlaces() {
 	if (globalConfig.decimalPlaces < 4) {
 		globalConfig.decimalPlaces = globalConfig.decimalPlaces + 1
 	} else {
 		globalConfig.decimalPlaces = 0
 	}
 	savePrefs()
-}
+} */
 export function switchSmarthomeColors(setting: string) {
 	const doc = select('html')
 	doc.classed('shcolors-normal', setting == 'normal')
@@ -478,6 +483,7 @@ export const infotext: { [key: string]: string } = {
 		'Laden bei dynamischem Stromtarif, wenn eingestellter Maximalpreis unterboten wird.',
 	pvpriority:
 		'Ladepriorität bei PV-Produktion. Bevorzung von Fahzeugen, Speicher, oder Fahrzeugen bis zum eingestellten Mindest-Ladestand. Die Einstellung ist für alle Ladepunkte gleich.',
+	chargeTemplate: 'Ladeprofil für dieses Fahrzeug.',
 }
 interface Preferences {
 	hideSH?: string[]
@@ -520,12 +526,12 @@ function writeCookie() {
 		.filter((ctr) => ctr.showInGraph)
 		.map((ctr) => ctr.id.toString())
 	prefs.showLG = globalConfig.graphPreference == 'live'
-	prefs.displayM = globalConfig.displayMode
+	//prefs.displayM = globalConfig.displayMode
 	prefs.stackO = globalConfig.usageStackOrder
-	prefs.showGr = globalConfig.showGrid
-	prefs.decimalP = globalConfig.decimalPlaces
-	prefs.smartHomeC = globalConfig.smartHomeColors
-	prefs.relPM = globalConfig.showRelativeArcs
+	//prefs.showGr = globalConfig.showGrid
+	//prefs.decimalP = globalConfig.decimalPlaces
+	//prefs.smartHomeC = globalConfig.smartHomeColors
+	//prefs.relPM = globalConfig.showRelativeArcs
 	prefs.maxPow = globalConfig.maxPower
 	prefs.showQA = globalConfig.showQuickAccess
 	prefs.simpleCP = globalConfig.simpleCpList
@@ -535,12 +541,12 @@ function writeCookie() {
 	prefs.fluidD = globalConfig.fluidDisplay
 	prefs.clock = globalConfig.showClock
 	prefs.showButtonBar = globalConfig.showButtonBar
-	prefs.showCounters = globalConfig.showCounters
-	prefs.showVehicles = globalConfig.showVehicles
-	prefs.showStandardV = globalConfig.showStandardVehicle
-	prefs.showPrices = globalConfig.showPrices
-	prefs.showInv = globalConfig.showInverters
-	prefs.altEngy = globalConfig.alternativeEnergy
+	//prefs.showCounters = globalConfig.showCounters
+	//prefs.showVehicles = globalConfig.showVehicles
+	//prefs.showStandardV = globalConfig.showStandardVehicle
+	//prefs.showPrices = globalConfig.showPrices
+	//prefs.showInv = globalConfig.showInverters
+	//prefs.altEngy = globalConfig.alternativeEnergy
 	prefs.lowerP = globalConfig.lowerPriceBound
 	prefs.upperP = globalConfig.upperPriceBound
 	prefs.sslPrefs = globalConfig.sslPrefs
@@ -561,12 +567,12 @@ function readCookie() {
 	)
 	if (myCookie.length > 0) {
 		const prefs = JSON.parse(myCookie[0].split('=')[1]) as Preferences
-		if (prefs.decimalP !== undefined) {
+		/* if (prefs.decimalP !== undefined) {
 			globalConfig.setDecimalPlaces(+prefs.decimalP)
-		}
-		if (prefs.smartHomeC !== undefined) {
+		} */
+		/* if (prefs.smartHomeC !== undefined) {
 			globalConfig.setSmartHomeColors(prefs.smartHomeC)
-		}
+		} */
 		if (prefs.hideSH !== undefined) {
 			prefs.hideSH.forEach((i) => {
 				if (shDevices.get(i) == undefined) {
@@ -575,27 +581,27 @@ function readCookie() {
 				shDevices.get(i)!.setShowInGraph(false)
 			})
 		}
-		if (prefs.showCtr !== undefined) {
+		/* if (prefs.showCtr !== undefined) {
 			globalConfig.countersToShow = prefs.showCtr.map((i) => +i)
-		}
+		} */
 		if (prefs.showLG !== undefined) {
 			globalConfig.setGraphPreference(prefs.showLG ? 'live' : 'today')
 		}
 		if (prefs.maxPow !== undefined) {
 			globalConfig.setMaxPower(+prefs.maxPow)
 		}
-		if (prefs.relPM !== undefined) {
+		/* if (prefs.relPM !== undefined) {
 			globalConfig.setShowRelativeArcs(prefs.relPM)
-		}
-		if (prefs.displayM !== undefined) {
+		} */
+		/* if (prefs.displayM !== undefined) {
 			globalConfig.setDisplayMode(prefs.displayM)
-		}
+		} */
 		if (prefs.stackO !== undefined) {
 			globalConfig.setUsageStackOrder(prefs.stackO)
 		}
-		if (prefs.showGr !== undefined) {
+		/* if (prefs.showGr !== undefined) {
 			globalConfig.setShowGrid(prefs.showGr)
-		}
+		} */
 		if (prefs.showQA !== undefined) {
 			globalConfig.setShowQuickAccess(prefs.showQA)
 		}
@@ -620,24 +626,24 @@ function readCookie() {
 		if (prefs.showButtonBar !== undefined) {
 			globalConfig.setShowButtonBar(prefs.showButtonBar)
 		}
-		if (prefs.showCounters !== undefined) {
+		/* if (prefs.showCounters !== undefined) {
 			globalConfig.setShowCounters(prefs.showCounters)
-		}
-		if (prefs.showVehicles !== undefined) {
+		} */
+		/* if (prefs.showVehicles !== undefined) {
 			globalConfig.setShowVehicles(prefs.showVehicles)
-		}
-		if (prefs.showStandardV !== undefined) {
-			globalConfig.setShowStandardVehicle(prefs.showStandardV)
-		}
-		if (prefs.showPrices !== undefined) {
+		} */
+		//if (prefs.showStandardV !== undefined) {
+		//	globalConfig.setShowStandardVehicle(prefs.showStandardV)
+		//}
+		/* if (prefs.showPrices !== undefined) {
 			globalConfig.setShowPrices(prefs.showPrices)
-		}
-		if (prefs.showInv !== undefined) {
+		} */
+		/* if (prefs.showInv !== undefined) {
 			globalConfig.setShowInverters(prefs.showInv)
-		}
-		if (prefs.altEngy !== undefined) {
+		} */
+		/* if (prefs.altEngy !== undefined) {
 			globalConfig.setAlternativeEnergy(prefs.altEngy)
-		}
+		} */
 		if (prefs.lowerP !== undefined) {
 			globalConfig.setLowerPriceBound(prefs.lowerP)
 		}
diff --git a/packages/modules/web_themes/colors/source/src/components/buttonBar/BBSelect.vue b/packages/modules/web_themes/colors/source/src/components/buttonBar/BBSelect.vue
index 59b3c3d648..6d70e54058 100755
--- a/packages/modules/web_themes/colors/source/src/components/buttonBar/BBSelect.vue
+++ b/packages/modules/web_themes/colors/source/src/components/buttonBar/BBSelect.vue
@@ -122,7 +122,7 @@ const buttons = [
 		name: 'Zielladen',
 		color: 'var(--color-battery)',
 	},
-	{ mode: 'eco_charging', name: 'Eco', color: 'var(--color-devices)' },
+	{ mode: 'eco_charging', name: 'Eco', color: 'var(--color-eco)' },
 	{ mode: 'stop', name: 'Stop', color: 'var(--color-axis)' },
 ]
 const cp = computed(() => {
@@ -150,4 +150,8 @@ function setBatteryPriority(mode: string) {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.buttonTextSize {
+	font-size: var(--font-large);
+}
+</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
index 3c572cbd9c..c03f0cb499 100644
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/CPChargePoint.vue
@@ -19,11 +19,7 @@
 		</template>
 
 		<template #buttons>
-			<span
-				type="button"
-				class="ms-2 ps-1 pt-1"
-				@click="configmode = !configmode"
-			>
+			<span type="button" class="ms-2 ps-1 pt-1" @click="toggleConfigMode()">
 				<span class="fa-solid fa-lg ps-1 fa-ellipsis-vertical" />
 			</span>
 		</template>
@@ -149,6 +145,9 @@ const cpNameStyle = computed(() => {
 })
 
 // methods
+function toggleConfigMode() {
+	configmode.value = !configmode.value
+}
 </script>
 
 <style scoped>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ChargeConfigPanel.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ChargeConfigPanel.vue
index 9f797d8ac3..cfa65ce20d 100755
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ChargeConfigPanel.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ChargeConfigPanel.vue
@@ -5,7 +5,7 @@
 		:fullwidth="true"
 		class="item"
 	>
-		<span class="status-string">{{ cp.stateStr }}</span>
+		<span class="status-string shadow m-0 mb-1 p-3">{{ cp.stateStr }}</span>
 	</ConfigItem>
 
 	<ConfigItem
@@ -17,9 +17,10 @@
 		<span style="color: red"> {{ cp.faultStr }} </span>
 	</ConfigItem>
 
-	<div class="m-0 mt-4 p-0 grid-col-12 tabarea">
+	<div :id="`cptabarea-${cpid}`" class="m-0 mt-4 p-0 grid-col-12 tabarea">
 		<nav class="nav nav-tabs nav-justified mx-1 mt-1" role="tablist">
 			<a
+				:id="`chSettings${cpid}`"
 				class="nav-link active"
 				data-bs-toggle="tab"
 				:data-bs-target="'#chargeSettings' + cpid"
@@ -27,6 +28,7 @@
 				<i class="fa-solid fa-charging-station" />
 			</a>
 			<a
+				:id="`inSettings${cpid}`"
 				class="nav-link"
 				data-bs-toggle="tab"
 				:data-bs-target="'#instantSettings' + cpid"
@@ -34,6 +36,7 @@
 				<i class="fa-solid fa-lg fa-bolt" />
 			</a>
 			<a
+				:id="`pvhSettings${cpid}`"
 				class="nav-link"
 				data-bs-toggle="tab"
 				:data-bs-target="'#pvSettings' + cpid"
@@ -41,6 +44,7 @@
 				<i class="fa-solid fa-solar-panel me-1" />
 			</a>
 			<a
+				:id="`scSettings${cpid}`"
 				class="nav-link"
 				data-bs-toggle="tab"
 				:data-bs-target="'#scheduledSettings' + cpid"
@@ -48,6 +52,7 @@
 				<i class="fa-solid fa-bullseye me-1" />
 			</a>
 			<a
+				:id="`ecSettings${cpid}`"
 				class="nav-link"
 				data-bs-toggle="tab"
 				:data-bs-target="'#ecoSettings' + cpid"
@@ -64,7 +69,7 @@
 		</nav>
 
 		<!-- Tab panes -->
-		<div id="settingsPanes" class="tab-content mx-1 p-1 pb-3">
+		<div :id="`cpsettingsPanes-${cpid}`" class="tab-content mx-1 p-1 pb-3">
 			<div
 				:id="'chargeSettings' + cpid"
 				class="tab-pane active"
@@ -80,7 +85,7 @@
 				aria-labelledby="instant-tab"
 			>
 				<ConfigInstant
-					:chargepoint="cp"
+					:chargepoint="cp as ChargePoint"
 					:vehicles="vehicles"
 					:charge-templates="chargeTemplates"
 				/>
@@ -93,7 +98,7 @@
 				aria-labelledby="pv-tab"
 			>
 				<ConfigPv
-					:chargepoint="cp"
+					:chargepoint="cp as ChargePoint"
 					:vehicles="vehicles"
 					:charge-templates="chargeTemplates"
 				/>
@@ -106,7 +111,7 @@
 			>
 				<ConfigScheduled
 					v-if="chargeTemplate != undefined"
-					:charge-point="cp"
+					:charge-point="cp as ChargePoint"
 				/>
 			</div>
 			<div
@@ -115,7 +120,7 @@
 				role="tabpanel"
 				aria-labelledby="eco-tab"
 			>
-				<ConfigEco v-if="chargeTemplate != undefined" :chargepoint="cp" />
+				<ConfigEco v-if="chargeTemplate != undefined" :chargepoint="cp as ChargePoint" />
 			</div>
 			<div
 				:id="'timedSettings' + cpid"
@@ -123,14 +128,15 @@
 				role="tabpanel"
 				aria-labelledby="scheduled-tab"
 			>
-				<ConfigTimed v-if="chargeTemplate != undefined" :charge-point="cp" />
+				<ConfigTimed v-if="chargeTemplate != undefined" :charge-point="cp as ChargePoint" />
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { Tab } from 'bootstrap'
 import { ChargePoint, vehicles, chargeTemplates } from '../model'
 import ConfigItem from '../../shared/ConfigItem.vue'
 import ConfigInstant from './ConfigInstant.vue'
@@ -144,25 +150,57 @@ const props = defineProps<{
 }>()
 defineEmits(['closeConfig'])
 //state
-const cp = props.chargepoint
+const cp = ref(props.chargepoint)
 
 // computed
 const chargeTemplate = computed(() => {
-	return cp.chargeTemplate?.id ?? 0
+	return cp.value.chargeTemplate?.id ?? 0
 })
 const cpid = computed(() => {
-	return cp.id
+	return cp.value.id
 })
 // methods
+function selectStartTab() {
+	let chargePanelName = ''
+	switch (props.chargepoint.chargeMode) {
+		case 'instant_charging':
+			chargePanelName = '#inSettings' + props.chargepoint.id
+			break
+		case 'pv_charging':
+			chargePanelName = '#pvhSettings' + props.chargepoint.id
+			break
+		case 'scheduled_charging':
+			chargePanelName = '#scSettings' + props.chargepoint.id
+			break
+		case 'eco_charging':
+			chargePanelName = '#ecSettings' + props.chargepoint.id
+			break
+		default:
+			chargePanelName = '#chSettings' + props.chargepoint.id
+	}
+	const tabToActivate = document.querySelector(chargePanelName)
+	if (tabToActivate) {
+		var tab = new Tab(tabToActivate)
+		tab.show()
+	} else {
+		console.error('Could not find the Tab element to activate')
+	}
+}
 // lifecycle
-onMounted(() => {})
+onMounted(() => {
+	selectStartTab()
+})
 </script>
 
 <style scoped>
 .status-string {
 	font-size: var(--font-settings);
 	font-style: italic;
-	color: var(--color-battery);
+	color: var(--color-charging);
+	border-radius: 12px;
+	background: var(--color-input);
+	width: 100%;
+	text-align: center;
 }
 
 .nav-tabs .nav-link {
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigEco.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigEco.vue
index 0ce0f36e8b..37412c38f6 100644
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigEco.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigEco.vue
@@ -2,7 +2,6 @@
 	<div class="pt-2 d-flex flex-column">
 		<div class="heading ms-1">Eco-Laden:</div>
 		<PriceChart v-if="etData.active" :chargepoint="cp as ChargePoint" />
-
 		<!-- Minimal current -->
 		<ConfigItem
 			v-if="etData.active"
@@ -79,6 +78,10 @@
 			/>
 		</ConfigItem>
 	</div>
+	<PriceCalculator
+		:model-value="price"
+		:cp-id="chargepoint.id"
+	></PriceCalculator>
 </template>
 
 <script setup lang="ts">
@@ -90,11 +93,13 @@ import RangeInput from '@/components/shared/RangeInput.vue'
 //import SwitchInput from '@/components/shared/SwitchInput.vue'
 import RadioInput2 from '@/components/shared/RadioInput2.vue'
 import PriceChart from '@/components/priceChart/PriceChart.vue'
+import PriceCalculator from './PriceCalculator.vue'
 //import { infotext } from '@/assets/js/themeConfig'
 const props = defineProps<{
 	chargepoint: ChargePoint
 }>()
 const cp = ref(props.chargepoint)
+var price = 0
 const energyLimit = computed({
 	get() {
 		return cp.value.ecoMaxEnergy / 1000
@@ -112,7 +117,7 @@ const energyLimit = computed({
 }
 
 .heading {
-	color: var(--color-devices);
+	color: var(--color-eco);
 	font-size: var(--font-settings);
 	font-weight: bold;
 }
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigGeneral.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigGeneral.vue
index 29cd262901..54a78b61db 100755
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigGeneral.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigGeneral.vue
@@ -39,6 +39,23 @@
 			"
 		/>
 	</ConfigItem>
+	<!-- Select the charge template -->
+	<ConfigItem
+		title="Ladeprofil"
+		icon="fa-settings"
+		:infotext="infotext['chargeTemplate']"
+		:fullwidth="true"
+	>
+		<RadioInput2
+			v-model="templateId"
+			:options="
+				Object.values(chargeTemplates).map((template) => [
+					template.name,
+					template.id,
+				])
+			"
+		/>
+	</ConfigItem>
 	<ConfigItem
 		title="Sperren"
 		icon="fa-lock"
@@ -101,7 +118,7 @@
 
 <script setup lang="ts">
 import { chargemodes } from '@/assets/js/themeConfig'
-import { ChargePoint, vehicles } from '../model'
+import { ChargePoint, vehicles, chargeTemplates } from '../model'
 import ConfigItem from '../../shared/ConfigItem.vue'
 import { infotext } from '@/assets/js/themeConfig'
 import SwitchInput from '../../shared/SwitchInput.vue'
@@ -109,12 +126,23 @@ import RadioInput2 from '@/components/shared/RadioInput2.vue'
 //import { etData } from '@/components/priceChart/model'
 import { globalData } from '@/assets/js/model'
 import { evPriorityModes } from '@/assets/js/types'
+import { computed } from 'vue'
 const props = defineProps<{
 	chargepoint: ChargePoint
 }>()
 defineEmits(['closeConfig'])
 //state
 const cp = props.chargepoint
+const vehicle = vehicles[cp.connectedVehicle]
+const templateId = computed({
+	get() {
+		return vehicle.chargeTemplateId
+	},
+	set(value: number) {
+		vehicle.chargeTemplateId = value
+		cp.chargeTemplate = chargeTemplates[value]
+	},
+})
 </script>
 
 <style scoped>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue
new file mode 100644
index 0000000000..e022ccee2c
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue
@@ -0,0 +1,184 @@
+<template>
+	<ModalComponent :modal-id="'priceCalculator-' + cpId">
+		<template #title> Maximaler Strompreis für {{ cp.vehicleName }} </template>
+		<template #footer>
+			<button
+				class="closebutton btn btn-secondary"
+				@click="$emit('update:modelValue', maxPrice)"
+			>
+				Preis bestätigen
+			</button>
+		</template>
+		<div class="pricecalculator p-2">
+			<InfoItem class="infoitem" heading="Aktueller SoC"
+				>{{ currentSoc }}%
+			</InfoItem>
+			<InfoItem class="infoitem" heading="Batterie-Kapazität"
+				>{{ (evTemplate.battery_capacity ?? 0) / 1000 }} kWh
+			</InfoItem>
+			<InfoItem class="infoitem" heading="Ladestrom">
+				{{ evTemplate.max_current_multi_phases ?? 0 }} A
+			</InfoItem>
+			<ConfigItem2
+				title="Ziel-SoC"
+				icon="fa-battery-full"
+				class="mt-4"
+				:fullwidth="true"
+				:infotext="`Der gewünschte Ladezustand, der bis zur Zielzeit erreicht sein soll. Aktueller SoC: ${currentSoc}%`"
+			>
+				<RangeInput
+					id="targetSoc"
+					v-model="targetSoc"
+					:min="currentSoc"
+					:max="100"
+					:step="1"
+					unit="%"
+				/>
+			</ConfigItem2>
+			<ConfigItem2
+				title="Zielzeit"
+				icon="fa-clock"
+				:fullwidth="true"
+				:infotext="`Die Uhrzeit, zu der das Fahrzeug auf dem angegebenen Ladestand sein soll.`"
+			>
+				<DateRangeInput
+					id="targetTime"
+					v-model="newTime"
+					:min="new Date()"
+					:max="etData.maxDate() ?? new Date()"
+					:step="900000"
+					unit="min"
+				/>
+			</ConfigItem2>
+			<ConfigItem2
+				title="Ladezeit-Puffer"
+				icon="fa-clock"
+				class="mb-4"
+				:fullwidth="true"
+				:infotext="`Der zeitliche Puffer, der zur berechneten Ladezeit hinzugerechnet wird. Dadurch wird sichergestellt, dass das Fahrzeug rechtzeitig fertig geladen ist.`"
+			>
+				<RangeInput
+					id="bufferMinutes"
+					v-model="bufferMinutes"
+					:min="0"
+					:max="60"
+					:step="1"
+					unit="min"
+				/>
+			</ConfigItem2>
+			<InfoItem class="infoitem" heading="Ladezeit"
+				>{{ Math.floor((chargeDuration + bufferMinutes) / 60) }}h
+				{{ Math.round((chargeDuration + bufferMinutes) % 60) }}min
+			</InfoItem>
+			<InfoItem class="infoitem" heading="Höchstpreis"
+				><span class="targetprice" :style="targetPriceStyle">{{
+					targetPrice
+				}}</span>
+			</InfoItem>
+		</div>
+	</ModalComponent>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ModalComponent from '@/components/shared/ModalComponent.vue'
+import InfoItem from '@/components/shared/InfoItem.vue'
+import ConfigItem2 from '@/components/shared/ConfigItem2.vue'
+import RangeInput from '@/components/shared/RangeInput.vue'
+import DateRangeInput from '@/components/shared/DateRangeInput.vue'
+import { chargePoints, evTemplates, chargeTemplates } from '../model'
+import { etData } from '@/components/priceChart/model'
+import { globalData } from '@/assets/js/model'
+const props = defineProps<{
+	modelValue: number
+	cpId: number
+}>()
+const emit = defineEmits(['update:modelValue', 'deletePlan'])
+const cp = computed(() => chargePoints[props.cpId])
+const currentSoc = ref(cp.value.soc)
+var targetSoc = ref(currentSoc.value < 80 ? 80 : 100)
+const bufferMinutes = ref(30)
+const evTemplate = computed(() => evTemplates[cp.value.evTemplate])
+const chargeTemplate = computed(() => chargeTemplates[cp.value.evTemplate])
+
+const price = computed({
+	get() {
+		return props.modelValue
+	},
+	set(value: number) {
+		emit('update:modelValue', value)
+	},
+})
+const newTime = ref(etData.maxDate() ?? new Date())
+const chargeDuration = computed(() => {
+	if (evTemplate.value != null) {
+		const batteryCapacity = evTemplate.value.battery_capacity ?? 0 //in Wh
+		const phases = Math.min(
+			evTemplate.value.max_phases,
+			chargeTemplate.value.chargemode.eco_charging.phases_to_use,
+		)
+		const chargingPower =
+			evTemplate.value.max_current_multi_phases * phases * 230
+		const neededCapacity =
+			(batteryCapacity * (targetSoc.value - currentSoc.value)) / 100
+		return (neededCapacity / chargingPower) * 60 //in minutes
+	} else {
+		return -1
+	}
+})
+const maxPrice = computed(() => {
+	return etData.maxPriceForDuration(
+		chargeDuration.value + bufferMinutes.value,
+		newTime.value,
+	)
+})
+
+const targetPrice = computed(() => {
+	if (maxPrice.value > 0) {
+		return `${Math.round(maxPrice.value * 100) / 100} ${globalData.country == 'ch' ? 'Rp' : 'ct'}`
+	} else {
+		return 'Ziel nicht erreichbar'
+	}
+})
+const targetPriceStyle = computed(() => {
+	if (maxPrice.value > price.value) {
+		return 'color: var(--color-charging);'
+	} else {
+		return 'color: var(--color-evu);'
+	}
+})
+</script>
+<style scoped>
+.heading {
+	font-size: var(--font-settings);
+	color: var(--color-charging);
+	font-weight: bold;
+	margin-bottom: 0.5rem;
+}
+.configheader {
+	font-size: var(--font-settings);
+	color: var(--color-charging);
+	font-weight: bold;
+	margin-bottom: 1rem;
+	text-align: center;
+}
+.pricecalculator {
+	display: grid;
+}
+.closebutton {
+	font-size: var(--font-settings-button);
+	background-color: var(--color-charging);
+	color: white;
+}
+.delete_button {
+	grid-column: span 12;
+	font-size: var(--font-settings);
+	color: var(--color-evu);
+	text-align: center;
+}
+.infoitem {
+	grid-column: span 4;
+}
+.targetprice {
+	color: var(--color-charging);
+}
+</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue b/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
index c033dab1e3..bcb740dade 100755
--- a/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
+++ b/packages/modules/web_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
@@ -21,7 +21,7 @@
 					class="ms-1 p-0 pt-1"
 					@click="zoomGraph"
 				>
-					<span class="fa-solid fa-lg ps-1 fa-magnifying-glass" />
+					<span class="fa-solid fa-lg ps-1" :class="zoomIcon()" />
 				</span>
 			</div>
 		</template>
@@ -168,10 +168,16 @@ function zoomGraph() {
 	globalConfig.zoomedWidget = 2
 	globalConfig.zoomGraph = !globalConfig.zoomGraph
 }
+function zoomIcon() {
+	return globalConfig.zoomGraph ? 'fa-minimize' : 'fa-maximize'
+}
 </script>
 
 <style scoped>
-.fa-magnifying-glass {
+.fa-maximize {
 	color: var(--color-menu);
 }
+.fa-minimize {
+	color: var(--color-charging);
+}
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSelector.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSelector.vue
index 7d4f7b7d8e..77f0522f1c 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSelector.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSelector.vue
@@ -100,11 +100,11 @@ import {
 	dayGraph,
 	graphData,
 	initGraph,
-	liveGraph,
 	setGraphDate,
 	yearGraph,
 } from './model'
 import { monthGraph } from './model'
+import { globalConfig } from '@/assets/js/themeConfig'
 
 const props = defineProps<{
 	widgetid: string
@@ -129,7 +129,9 @@ const displayDate = computed(() => {
 				console.warn('Graph Data empty.')
 				return '???'
 			} */
-				return props.ignoreLive ? 'heute' : `${liveGraph.duration} min`
+				return props.ignoreLive
+					? 'heute'
+					: `${Math.floor(globalConfig.liveGraphDuration / 60)} min`
 			case 'today':
 				return 'heute'
 			case 'day':
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue
index 5e441821da..9796b5277c 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue
@@ -16,7 +16,7 @@
 				:d="myline"
 				:stroke="cpColor"
 				stroke-width="1"
-				:style="{ strokeDasharray: '3,3' }"
+				:style="{ strokeDasharray: '3,1' }"
 				fill="none"
 			/>
 			<text
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
index 2e2c384054..35cd62af45 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
@@ -104,14 +104,23 @@
 				:power="entry.evuOut"
 				:width="boxwidth"
 			/>
+			<PgToolTipLine
+				v-if="globalConfig.showPrices"
+				cat="price"
+				:indent="5"
+				:power="entry.price"
+				name="Preis"
+				:width="boxwidth"
+			/>
 		</text>
 	</g>
 </template>
 
 <script setup lang="ts">
-import { itemNames, type GraphDataItem } from './model'
 import type { ScaleTime } from 'd3'
 import { timeFormat } from 'd3'
+import { itemNames, type GraphDataItem } from './model'
+import { globalConfig } from '@/assets/js/themeConfig'
 import PgToolTipLine from './PgToolTipLine.vue'
 
 const props = defineProps<{
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue
index 5938df7e00..c731c4efa7 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue
@@ -9,11 +9,13 @@
 		{{ name ? name : masterData[cat].icon }} &nbsp;
 	</tspan>
 	<tspan text-anchor="end" :x="width - indent">
-		<FormatWatt v-if="props.power > 0" :watt="power * 1000" />
+		<FormatWatt v-if="cat != 'price' && props.power > 0" :watt="power * 1000" />
+		<tspan v-if="cat === 'price'">{{ formatPrice(props.power) }}</tspan>
 	</tspan>
 </template>
 <script setup lang="ts">
 import { masterData } from '@/assets/js/model'
+import { formatPrice } from '@/assets/js/helpers'
 import FormatWatt from '@/components/shared/FormatWatt.vue'
 const props = defineProps<{
 	cat: string
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
index 30628c6916..c420351c2d 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue
@@ -21,7 +21,7 @@
 					class="ms-1 p-0 pt-1"
 					@click="zoomGraph"
 				>
-					<span class="fa-solid fa-lg ps-1 fa-magnifying-glass" />
+					<span class="fa-solid fa-lg ps-1" :class="zoomIcon()" />
 				</span>
 				<span type="button" class="ms-1 p-0 pt-1" @click="changeStackOrder">
 					<span class="fa-solid fa-lg ps-1 fa-sort" />
@@ -95,6 +95,15 @@
 						:margin="margin"
 						:order="2"
 					/>
+					<PriceLine
+						v-if="
+							globalConfig.showPrices &&
+							(graphData.graphMode == 'day' || graphData.graphMode == 'today')
+						"
+						:width="width - margin.left - 2 * margin.right"
+						:height="(height - margin.top - margin.bottom) / 2"
+						:margin="margin"
+					/>
 
 					<PgSocAxis
 						v-if="
@@ -138,15 +147,15 @@ import {
 	margin,
 	mytransform,
 } from './model'
+import { onMounted } from 'vue'
+import { zoom, type D3ZoomEvent, type Selection, select } from 'd3'
 import { globalConfig, widescreen } from '@/assets/js/themeConfig'
-import { topVehicles } from '../chargePointList/model'
+import { topVehicles, vehicles } from '../chargePointList/model'
 import PgSoc from './PgSoc.vue'
 import PgSocAxis from './PgSocAxis.vue'
-import { vehicles } from '../chargePointList/model'
 import PgSelector from './PgSelector.vue'
-import { zoom, type D3ZoomEvent, type Selection, select } from 'd3'
-import { onMounted } from 'vue'
 import PgToolTips from './PgToolTips.vue'
+import PriceLine from './PriceLine.vue'
 
 // state
 const stackOrderMax = 2
@@ -157,7 +166,7 @@ const heading = computed(() => {
 		case 'month':
 			return 'Monatsübersicht'
 		default:
-			return 'Leistung / Ladestand'
+			return 'Verlauf'
 	}
 })
 /**
@@ -224,7 +233,9 @@ function zoomGraph() {
 	globalConfig.zoomedWidget = 1
 	globalConfig.zoomGraph = !globalConfig.zoomGraph
 }
-
+function zoomIcon() {
+	return globalConfig.zoomGraph ? 'fa-minimize' : 'fa-maximize'
+}
 onMounted(() => {
 	const svg = select<Element, unknown>('svg#powergraph')
 	setZoom(svg)
@@ -232,9 +243,12 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.fa-magnifying-glass {
+.fa-maximize {
 	color: var(--color-menu);
 }
+.fa-minimize {
+	color: var(--color-charging);
+}
 .fa-sort {
 	color: var(--color-menu);
 }
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PriceLine.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PriceLine.vue
new file mode 100644
index 0000000000..5ee9792b82
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PriceLine.vue
@@ -0,0 +1,106 @@
+<template>
+	<svg x="0" :width="props.width" class="Prices">
+		<g>
+			<path
+				id="price"
+				.origin="autozoom"
+				class="price-baseline"
+				:d="myline"
+				stroke="var(--color-bg)"
+				stroke-width="1"
+				fill="none"
+			/>
+			<path
+				id="pricedashes"
+				class="price-dashes"
+				:d="myline"
+				stroke="crimson"
+				stroke-width="1"
+				:style="{ strokeDasharray: '3,1' }"
+				fill="none"
+			/>
+			<text
+				class="pricename"
+				:x="props.width / 2"
+				:y="nameY"
+				:style="{ fill: 'crimson', fontSize: 10 }"
+				text-anchor="middle"
+			>
+				Strompreis
+			</text>
+		</g>
+	</svg>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+	extent,
+	scaleLinear,
+	scaleTime,
+	line,
+	type Selection,
+	select,
+} from 'd3'
+import { graphData, type GraphDataItem, zoomedRange } from './model'
+
+const props = defineProps<{
+	width: number
+	height: number
+	margin: { left: number; top: number; right: number; bottom: number }
+}>()
+const xScale = computed(() => {
+	let e = extent(graphData.data, (d) => d.date)
+	if (e[0] && e[1]) {
+		return scaleTime<number>().domain(e).range([0, props.width])
+	} else {
+		return scaleTime().range([0, 0])
+	}
+})
+const yScale = computed(() => {
+	let e = extent(graphData.data, (d) => d.price)
+	if (e[0] && e[1]) {
+		return scaleLinear()
+			.range([props.height - 10, 0])
+			.domain(e)
+	} else {
+		return scaleLinear()
+			.range([props.height - 10, 0])
+			.domain([0, 0])
+	}
+})
+const myline = computed(() => {
+	const path = line<GraphDataItem>()
+		.x((d) => xScale.value(d.date))
+		.y((d) => yScale.value(d.price) ?? yScale.value(0))
+	let p = path(graphData.data)
+	return p ? p : ''
+})
+
+const nameY = computed(() => {
+	if (graphData.data.length > 0) {
+		let index: number
+		index = Math.round(graphData.data.length / 2)
+		return yScale.value(graphData.data[index].price) + 2
+	} else {
+		return 0
+	}
+})
+
+const autozoom = computed(() => {
+	if (graphData.graphMode != 'month' && graphData.graphMode != 'year') {
+		const path1: Selection<SVGPathElement, unknown, HTMLElement, unknown> =
+			select('path#price')
+		const path2: Selection<SVGPathElement, unknown, HTMLElement, unknown> =
+			select('path#pricedashes')
+		xScale.value.range(zoomedRange.value)
+		const path = line<GraphDataItem>()
+			.x((d) => xScale.value(d.date))
+			.y((d) => yScale.value(d.price) ?? yScale.value(0))
+		path1.attr('d', path(graphData.data))
+		path2.attr('d', path(graphData.data))
+	}
+	return 'zoomed'
+})
+</script>
+<style scoped></style>
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts
index 86ffc3e994..62e24a2a09 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/model.ts
@@ -50,6 +50,12 @@ export interface RawDayGraphDataItem {
 	cp: object
 	ev: object
 	sh: object
+	prices: {
+		grid: number
+		pv: number
+		bat: number
+		cp: number
+	}
 }
 
 export class GraphData {
@@ -97,9 +103,15 @@ export function setInitializeUsageGraph(val: boolean) {
 	animateUsageGraph = val
 }
 export function setGraphData(d: GraphDataItem[]) {
-	graphData.data = d
-	graphData.waitForData = false
-	// graphData.graphMode = graphData.graphMode
+	if (graphData.graphMode == 'live' && d.length > 0) {
+		const windowStart =
+			new Date().getTime() - globalConfig.liveGraphDuration * 1000
+		graphData.data = d.filter((e) => e.date > windowStart)
+		graphData.waitForData = false
+	} else {
+		graphData.data = d
+		graphData.waitForData = false
+	}
 }
 // LIVE GRAPH
 export const liveGraph = reactive({
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts
index 312f5977b0..989f3f2b51 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/processDayGraphData.ts
@@ -160,6 +160,10 @@ function transformRow(currentRow: RawDayGraphDataItem): GraphDataItem {
 					currentItem.evuIn +
 					currentItem.batOut)
 		}
+		// Prices
+		if (currentRow.prices.grid > 0) {
+			currentItem.price = currentRow.prices.grid * 100000
+		}
 	})
 
 	// Counters
diff --git a/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue b/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue
index 2c1fcb1ff1..928fba9339 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue
@@ -1,6 +1,6 @@
 <template>
 	<WBWidget :full-width="true">
-		<template #title> Aktuelle Leistung </template>
+		<template #title> Aktuell </template>
 		<figure id="powermeter" class="p-0 m-0">
 			<svg :viewBox="'0 0 ' + width + ' ' + height">
 				<g :transform="'translate(' + width / 2 + ',' + height / 2 + ')'">
diff --git a/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue b/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue
index b8fe8d7491..59df37f7c4 100755
--- a/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue
+++ b/packages/modules/web_themes/colors/source/src/components/priceChart/PriceChart.vue
@@ -34,8 +34,19 @@
 			<i class="fa fa-sm fa-arrow-right" />
 		</button>
 	</div>
-	<div v-if="chargepoint != undefined" class="d-flex justify-content-end">
-		<span class="me-3 pt-2 pb-3" @click="setMaxPrice">
+	<div
+		v-if="chargepoint != undefined"
+		class="d-flex justify-content-between align-items-center mx-2 mb-4 mt-2"
+	>
+		<button
+			class="calculatorButton btn btn-secondary"
+			type="button"
+			@click="openCalculator"
+		>
+			Preis berechnen
+		</button>
+
+		<span class="" @click="setMaxPrice">
 			<button
 				type="button"
 				class="btn btn-secondary confirmButton"
@@ -46,6 +57,12 @@
 			</button>
 		</span>
 	</div>
+
+	<PriceCalculator
+		:model-value="calculatedPrice"
+		:cp-id="chargepoint!.id"
+		@update:model-value="storePrice"
+	/>
 </template>
 
 <script setup lang="ts">
@@ -65,10 +82,14 @@ import {
 import RangeInput from '../shared/RangeInput.vue'
 import { chargePoints, type ChargePoint } from '../chargePointList/model'
 import { globalConfig } from '@/assets/js/themeConfig'
+import { Modal } from 'bootstrap'
+import PriceCalculator from '../chargePointList/cpConfig/PriceCalculator.vue'
 const props = defineProps<{
 	chargepoint?: ChargePoint
 	globalview?: boolean
 }>()
+const calculatedPrice = ref(0)
+var calculatorModal = ref<Modal | null>(null)
 
 let _maxPrice = props.chargepoint ? ref(props.chargepoint.etMaxPrice) : ref(0)
 const maxPriceEdited = ref(false)
@@ -312,6 +333,19 @@ function priceUp() {
 	}
 	maxPrice.value = result
 }
+function openCalculator() {
+	const modalId = `priceCalculator-${props.chargepoint!.id}`
+	calculatorModal.value = new Modal(document.getElementById(modalId)!)
+	calculatorModal.value.toggle()
+}
+function storePrice(newPrice: number) {
+	calculatorModal.value!.hide()
+	maxPrice.value = newPrice
+	if (cp.value) {
+		chargePoints[cp.value.id].etMaxPrice = maxPrice.value
+	}
+	maxPriceEdited.value = false
+}
 onMounted(() => {
 	needsUpdate.value = !needsUpdate.value
 })
@@ -357,4 +391,8 @@ onMounted(() => {
 .rangeInputContainer {
 	font-size: var(--font-settings);
 }
+.calculatorButton {
+	background-color: var(--color-pv);
+	font-size: var(--font-settings-button);
+}
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/priceChart/model.ts b/packages/modules/web_themes/colors/source/src/components/priceChart/model.ts
index 6f5145e881..f03756a60e 100755
--- a/packages/modules/web_themes/colors/source/src/components/priceChart/model.ts
+++ b/packages/modules/web_themes/colors/source/src/components/priceChart/model.ts
@@ -7,6 +7,7 @@ class EtData {
 	etProvider = ''
 	etMaxPrice = 0
 	country = 'de'
+	unit = 'ct'
 
 	get etCurrentPriceString() {
 		if (this.etPriceList.size > 0) {
@@ -19,6 +20,36 @@ class EtData {
 			return '---'
 		}
 	}
+
+	maxPriceForDuration(durationMinutes: number, maxTime?: Date): number {
+		if (this.etPriceList.size > 0) {
+			const plist = maxTime
+				? [...this.etPriceList.entries()]
+						.filter((entry) => entry[0] <= maxTime)
+						.sort((a, b) => a[1] - b[1])
+				: [...this.etPriceList.entries()].sort((a, b) => a[1] - b[1])
+			let accumulatedMinutes = 0
+			for (let i = 0; i < plist.length; i++) {
+				accumulatedMinutes += 15
+				if (accumulatedMinutes >= durationMinutes) {
+					return plist[i][1]
+				}
+			}
+			return -1 // return the highest price if duration exceeds available data
+		} else {
+			return -1
+		}
+	}
+
+	maxDate(): Date | null {
+		if (this.etPriceList.size > 0) {
+			return Array.from(this.etPriceList.keys()).reduce((a, b) =>
+				a > b ? a : b,
+			)
+		} else {
+			return null
+		}
+	}
 }
 
 export interface ServerPriceList {
diff --git a/packages/modules/web_themes/colors/source/src/components/priceChart/processMessages.ts b/packages/modules/web_themes/colors/source/src/components/priceChart/processMessages.ts
index a7803e27e7..da9c1b0fa6 100755
--- a/packages/modules/web_themes/colors/source/src/components/priceChart/processMessages.ts
+++ b/packages/modules/web_themes/colors/source/src/components/priceChart/processMessages.ts
@@ -7,8 +7,14 @@ export function processEtProviderMessages(topic: string, message: string) {
 	} else if (topic == 'openWB/optional/ep/flexible_tariff/provider') {
 		const data = JSON.parse(message)
 		etData.etProvider = data.name
-		if (data.configuration && data.configuration.country != null) {
-			globalData.country = data.configuration.country
+		if (data.configuration) {
+			if (data.configuration.country != null) {
+				globalData.country = data.configuration.country
+				etData.country = data.configuration.country
+			}
+			if (data.configuration.unit != null) {
+				etData.unit = data.configuration.unit
+			}
 		}
 	} else if (topic == 'openWB/optional/ep/get/prices') {
 		const plist = JSON.parse(message)
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem.vue b/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem.vue
index 6607168e8b..924836193c 100755
--- a/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem.vue
+++ b/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem.vue
@@ -1,11 +1,11 @@
 <template>
 	<WbSubwidget :fullwidth="fullwidth ? true : false">
-		<div class="grid-col-12 mt-0 mb-0 px-0 py-0 configitem">
+		<div class="configitem grid-col-12 mt-0 mb-0 px-0 py-0">
 			<div
-				class="titlecolumn m-0 p-0 d-flex justify-content-between align-items-baseline"
+				class="titlerow m-0 p-0 d-flex justify-content-between align-items-center"
 			>
-				<span class="d-flex justify-content-end align-items-baseline">
-					<span class="d-flex align-items-baseline m-0 p-0" @click="toggleInfo">
+				<span class="lefttitle d-flex justify-content-end align-items-baseline">
+					<span class="d-flex align-items-center m-0 p-0" @click="toggleInfo">
 						<i
 							v-if="props.icon"
 							class="fa-solid fa-sm m-0 p-0 me-2 item-icon"
@@ -13,26 +13,22 @@
 						/>
 						{{ title }}
 					</span>
-				</span>
-				<span class="d-flex align-items-center">
 					<span class="d-flex">
 						<i
 							v-if="props.infotext"
-							class="fa-solid fa-sm fa-circle-question ms-4 me-2"
+							class="fa-solid fa-sm fa-circle-question ms-3 me-2"
 							:style="iconstyle"
 							@click="toggleInfo"
 						/>
 					</span>
-
-					<span class="d-flex justify-content-end m-0 p-0"
-						><slot name="inline-item" />
-					</span>
+				</span>
+				<span class="righttitle d-flex align-items-center">
+					<span class="inlinecontent"><slot name="inline-item" /></span>
 				</span>
 			</div>
-
 			<p
 				v-if="showInfo"
-				class="infotext shadow m-0 ps-2 mb-1 p-1"
+				class="infotext shadow m-0 ps-2 mb-1 p-3"
 				@click="toggleInfo"
 			>
 				<i class="me-1 fa-solid fa-sm fa-circle-info" />
@@ -81,7 +77,10 @@ const iconstyle = computed(() => {
 	font-size: var(--font-settings);
 }
 
-.titlecolumn {
+.titlerow {
+	display: grid;
+	grid-column: 1 / 13;
+	grid-template-columns: subgrid;
 	color: var(--color-fg);
 	font-size: var(--font-settings);
 	flex-grow: 1;
@@ -100,9 +99,29 @@ const iconstyle = computed(() => {
 	height: 100%;
 	width: 100%;
 }
+.lefttitle {
+	display: grid;
+	grid-column: 1 / 7;
+}
+.righttitle {
+	display: grid;
+	grid-column: 7 / 13;
+	justify-content: stretch;
+}
+.inlinecontent {
+	display: grid;
+	width: 100%;
+}
 .contentrow {
 	display: flex;
 	height: 100%;
 	width: 100%;
 }
+.infotext {
+	font-size: var(--font-settings);
+	text-align: center;
+	color: var(--color-charging);
+	grid-column: span 12;
+	border-radius: 12px;
+}
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem2.vue b/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem2.vue
index b52ae89e1a..3bf4a4aedc 100644
--- a/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem2.vue
+++ b/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem2.vue
@@ -7,7 +7,7 @@
 				<span
 					class="lefttitle d-flex justify-content-start align-items-baseline"
 				>
-					<span class="d-flex align-items-baseline m-0 p-0" @click="toggleInfo">
+					<span class="d-flex align-items-center m-0 p-0" @click="toggleInfo">
 						<i
 							v-if="props.icon"
 							class="fa-solid fa-sm m-0 p-0 me-2 item-icon"
@@ -15,23 +15,22 @@
 						/>
 						{{ title }}
 					</span>
-				</span>
-				<span class="righttitle d-flex align-items-center">
 					<span class="d-flex">
 						<i
 							v-if="props.infotext"
-							class="fa-solid fa-sm fa-circle-question ms-4 me-2"
+							class="fa-solid fa-sm fa-circle-question ms-3 me-2"
 							:style="iconstyle"
 							@click="toggleInfo"
 						/>
 					</span>
-
+				</span>
+				<span class="righttitle d-flex align-items-center">
 					<span class="inlinecontent"><slot name="inline-item" /> </span>
 				</span>
 			</div>
 			<p
 				v-if="showInfo"
-				class="infotext shadow m-0 ps-2 mb-1 p-1"
+				class="infotext shadow m-0 ps-2 mb-1 p-3"
 				@click="toggleInfo"
 			>
 				<i class="me-1 fa-solid fa-sm fa-circle-info" />
@@ -108,7 +107,10 @@ const iconstyle = computed(() => {
 }
 .infotext {
 	font-size: var(--font-settings);
-	color: var(--color-battery);
+	text-align: center;
+	color: var(--color-charging);
+	grid-column: span 12;
+	border-radius: 12px;
 }
 
 .item-icon {
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/DateInput.vue b/packages/modules/web_themes/colors/source/src/components/shared/DateInput.vue
index 2e9201ec3e..5411190ea9 100755
--- a/packages/modules/web_themes/colors/source/src/components/shared/DateInput.vue
+++ b/packages/modules/web_themes/colors/source/src/components/shared/DateInput.vue
@@ -114,23 +114,24 @@ const days = computed(() => {
 	const newDate = new Date(year.value, month.value, 1)
 	const firstWeekdayInMonth = newDate.getDay()
 	let maxDaysPerMonth = 0
+	console.log(month.value)
 	switch (month.value) {
-		case 1:
-		case 3:
-		case 5:
-		case 7:
-		case 8:
-		case 10:
-		case 12:
-			maxDaysPerMonth = 31
-			break
+		case 0:
+		case 2:
 		case 4:
 		case 6:
+		case 7:
 		case 9:
 		case 11:
+			maxDaysPerMonth = 31
+			break
+		case 3:
+		case 5:
+		case 8:
+		case 10:
 			maxDaysPerMonth = 30
 			break
-		case 2:
+		case 1:
 			if (Math.trunc(year.value / 4) * 4 == year.value) {
 				maxDaysPerMonth = 29
 			} else {
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/DateRangeInput.vue b/packages/modules/web_themes/colors/source/src/components/shared/DateRangeInput.vue
new file mode 100644
index 0000000000..e37ccd78f0
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/shared/DateRangeInput.vue
@@ -0,0 +1,94 @@
+<template>
+	<span class="d-flex flex-column rangeinput">
+		<span class="d-flex flex-fill justify-content-between align-items-center">
+			<span type="button" class="minusButton" @click="stepDown">
+				<i class="fa fa-xl fa-minus-square me-2" />
+			</span>
+			<div class="d-flex flex-fill flex-column justify-content-center m-0 p-0">
+				<input
+					:id="id"
+					v-model.number="v"
+					type="range"
+					class="form-range flex-fill"
+					:min="min.getTime()"
+					:max="max.getTime()"
+					:step="step"
+				/>
+			</div>
+			<span type="button" class="plusButton" @click="stepUp">
+				<i class="fa fa-xl fa-plus-square ms-2" />
+			</span>
+		</span>
+		<span class="d-flex justify-content-between align-items-center">
+			<span class="minlabel ps-4"> {{ formatCurrentTime(min, true) }} </span>
+			<span class="valuelabel"
+				>{{ formatCurrentTime(new Date(v), true) }}
+			</span>
+			<span class="maxlabel pe-4"> {{ formatCurrentTime(max, true) }} </span>
+		</span>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { formatCurrentTime } from '@/assets/js/helpers'
+import { computed } from 'vue'
+const props = defineProps<{
+	id: string
+	min: Date
+	max: Date
+	step: number
+	unit: string
+	modelValue: Date // for v-model binding
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+const v = computed({
+	get() {
+		return props.modelValue.getTime()
+	},
+	set(value: number) {
+		emit('update:modelValue', new Date(value))
+	},
+})
+//methods
+function stepDown() {
+	if (v.value > props.min.getTime()) {
+		v.value = v.value - props.step
+	}
+}
+function stepUp() {
+	if (v.value < props.max.getTime()) {
+		v.value = v.value + props.step
+	}
+}
+</script>
+
+<style scoped>
+.minlabel {
+	color: var(--color-menu);
+}
+
+.maxlabel {
+	color: var(--color-menu);
+}
+
+.valuelabel {
+	color: var(--color-fg);
+}
+
+.minusButton {
+	color: var(--color-menu);
+}
+
+.plusButton {
+	color: var(--color-menu);
+}
+.rangeIndicator {
+	margin: 0px;
+	padding: 0px;
+	line-height: 10px;
+}
+.rangeinput {
+	width: 100%;
+}
+</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/ModalComponent.vue b/packages/modules/web_themes/colors/source/src/components/shared/ModalComponent.vue
index 0861da3655..9c615fce70 100755
--- a/packages/modules/web_themes/colors/source/src/components/shared/ModalComponent.vue
+++ b/packages/modules/web_themes/colors/source/src/components/shared/ModalComponent.vue
@@ -1,7 +1,7 @@
 <template>
 	<Teleport to="body">
-		<div :id="props.modalId" class="modal fade" data-bs-backdrop="static">
-			<div class="modal-dialog modal-lg modal-fullscreen-lg-down">
+		<div :id="props.modalId" class="modal fade">
+			<div class="modal-dialog modal-lg modal-fullscreen-lg-down shadow">
 				<div class="modal-content">
 					<div class="modal-header">
 						<h3 class="modal-title">
@@ -9,9 +9,11 @@
 						</h3>
 						<button
 							type="button"
-							class="btn-close buttonTextSize d-flex justify-content-center pt-3 pb-0"
+							class="btn-close d-flex justify-content-center pt-3 pb-0"
 							data-bs-dismiss="modal"
-						></button>
+						>
+							<span class="fa-solid fa-xl fa-circle-check" />
+						</button>
 					</div>
 					<div class="modal-body">
 						<slot />
@@ -51,21 +53,33 @@ onMounted(() => {
 	opacity: 1;
 }
 .modal-dialog {
-	border-radius: 2px;
-	box-shadow: 2px 2px 5px 3px darkslategray;
+	border-radius: 30px;
+	border: 0px dotted var(--color-frame);
+}
+.modal-content {
+	border-radius: 30px;
+}
+.modal-title {
+	font-size: var(--font-large);
+	color: var(--color-charging);
 }
-
 .modal-footer,
 .modal-header,
 .modal-body {
 	background: var(--color-bg);
 	color: var(--color-fg);
 }
+.modal-header {
+	border: 0px;
+}
 .btn-close {
-	color: var(--color-input);
+	color: var(--color-menu);
+	font-size: var(--font-medium);
+	background-size: 0px;
 }
 .modal-footer {
 	text-align: right;
+	border: 0px;
 }
 .modal-header .btn-close {
 	color: var(--color-fg);
@@ -84,6 +98,6 @@ onMounted(() => {
 }
 
 .close-button-bottom {
-	font-size: var(--font-settings);
+	font-size: var(--font-settings-button);
 }
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/RadioInput2.vue b/packages/modules/web_themes/colors/source/src/components/shared/RadioInput2.vue
index a4477f00dc..dfe090d019 100644
--- a/packages/modules/web_themes/colors/source/src/components/shared/RadioInput2.vue
+++ b/packages/modules/web_themes/colors/source/src/components/shared/RadioInput2.vue
@@ -11,11 +11,11 @@
 			:key="index"
 			class="btn btn-outline-secondary radiobutton me-0 mb-0 px-2"
 			:value="element[1]"
-			:style="getColors(index)"
+			:style="buttonStyle(index)"
 			:class="element[1] == v ? 'active' : ''"
 			@click="setValue"
 		>
-			<span :style="getColors(index)">
+			<span>
 				<i v-if="element[3]" class="fa-solid" :class="element[3]" />
 				{{ element[0] }}
 			</span>
@@ -39,16 +39,56 @@ const v = computed({
 		emit('update:modelValue', value)
 	},
 })
-function getColors(index: number) {
+function buttonStyle(index: number) {
 	const fg = props.options[index][2] || 'var(--color-fg)'
 	const bg = 'var(--color-bg)'
+	let color = fg
+	let background = bg
+	let borderRadius = ['0', '0', '0', '0'] // top-left, top-right, bottom-right, bottom-left
+	let borderWidth = ['0', '0', '0', '0'] // top, right, bottom, left
 	if (props.options[index][1] == v.value) {
-		return {
-			color: bg,
-			background: props.options[index][2] || 'var(--color-menu)',
+		color = bg
+		background = props.options[index][2] || 'var(--color-menu)'
+	}
+
+	const optionCount = props.options.length
+	const col = index % 3
+	const row = Math.floor(index / 3)
+	const maxRow = Math.floor((optionCount - 1) / 3)
+	if (col == 0) {
+		if (row == 0) {
+			borderRadius[0] = '0.45rem' // top-left
+		}
+		if (row == maxRow) {
+			borderRadius[3] = '0.45rem' // bottom-left
+		}
+		borderWidth[1] = '0.1px' // right
+	}
+	if (col == 1) {
+		borderWidth[1] = '0.1px' // right
+		borderWidth[3] = '0.1px' // left
+	}
+	if (col == 2) {
+		if (row == 0) {
+			borderRadius[1] = '0.45rem' // top-right
 		}
-	} else {
-		return { color: fg, background: bg }
+		if (row == maxRow) {
+			borderRadius[2] = '0.45rem' // bottom-right
+		}
+		borderWidth[3] = '0.1px' // left
+	}
+	if (row != 0) {
+		borderWidth[0] = '0.1px' // top
+	}
+	if (row != maxRow) {
+		borderWidth[2] = '0.1px' // bottom
+	}
+
+	return {
+		color: color,
+		background: background,
+		'border-radius': `${borderRadius[0]} ${borderRadius[1]} ${borderRadius[2]} ${borderRadius[3]}`,
+		'border-width': `${borderWidth[0]} ${borderWidth[1]} ${borderWidth[2]} ${borderWidth[3]}`,
 	}
 }
 function setValue(event: Event) {
@@ -69,7 +109,7 @@ function setValue(event: Event) {
 
 <style scoped>
 .radiobutton {
-	border: 0.2px solid var(--color-menu);
+	border: 0.1px solid var(--color-menu);
 	opacity: 1;
 	font-size: var(--font-settings-button);
 	border-radius: 0;
diff --git a/packages/modules/web_themes/colors/source/src/views/ThemeSettings.vue b/packages/modules/web_themes/colors/source/src/views/ThemeSettings.vue
index 81c74613a1..c436debcf2 100755
--- a/packages/modules/web_themes/colors/source/src/views/ThemeSettings.vue
+++ b/packages/modules/web_themes/colors/source/src/views/ThemeSettings.vue
@@ -14,8 +14,13 @@
 			</span>
 		</template>
 		<div class="subgrid m-0 p-0">
+			<div class="topbanner grid-col-12">
+				Eine Reihe von Einstellungen werden neu
+				<em>in den openWB-Einstellungen "Allgemein"</em> <br />
+				für alle Geräte einheitlich festgelegt.
+			</div>
 			<div class="settingscolumn">
-				<ConfigItem
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Farbschema"
 					icon="fa-adjust"
@@ -25,8 +30,8 @@
 						v-model="globalConfig.displayMode"
 						:options="colorschemes"
 					/>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Farbschema Smart-Home-Geräte"
 					icon="fa-palette"
@@ -36,8 +41,8 @@
 						v-model="globalConfig.smartHomeColors"
 						:options="shSchemes"
 					/>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Grafik: Raster"
 					icon="fa-th"
@@ -46,8 +51,8 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.showGrid" />
 					</template>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Variable Bogenlänge"
 					icon="fa-chart-area"
@@ -56,11 +61,11 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.showRelativeArcs" />
 					</template>
-				</ConfigItem>
+				</ConfigItem> -->
 				<ConfigItem
 					v-if="globalConfig.showRelativeArcs"
 					:fullwidth="true"
-					title="Bögen zurücksetzen"
+					title="Linker Graph: Bögen zurücksetzen"
 					icon="fa-undo"
 					infotext="Durch Click auf den Button wird die Maximallänge der Bögen auf den aktuellen Wert gesetzt."
 				>
@@ -72,7 +77,7 @@
 						Reset
 					</button>
 				</ConfigItem>
-				<ConfigItem
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Anzahl Dezimalstellen"
 					icon="fa-sliders-h"
@@ -82,7 +87,7 @@
 						v-model="globalConfig.decimalPlaces"
 						:options="decimalDisplay"
 					/>
-				</ConfigItem>
+				</ConfigItem> -->
 				<ConfigItem
 					:fullwidth="true"
 					title="Uhrzeit anzeigen"
@@ -105,8 +110,6 @@
 						:options="shortListOptions"
 					/>
 				</ConfigItem>
-			</div>
-			<div class="settingscolumn">
 				<ConfigItem
 					:fullwidth="true"
 					title="Buttonleiste für Ladepunkte"
@@ -127,6 +130,8 @@
 						<SwitchInput v-model="globalConfig.showQuickAccess" />
 					</template>
 				</ConfigItem>
+			</div>
+			<div class="settingscolumn">
 				<ConfigItem
 					:fullwidth="true"
 					title="Breite Widgets"
@@ -157,7 +162,7 @@
 						<SwitchInput v-model="globalConfig.showAnimations" />
 					</template>
 				</ConfigItem>
-				<ConfigItem
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Zähler anzeigen"
 					icon="fa-chart-bar"
@@ -166,8 +171,8 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.showCounters" />
 					</template>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Fahrzeuge anzeigen"
 					icon="fa-car"
@@ -176,8 +181,8 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.showVehicles" />
 					</template>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Standardfahrzeug anzeigen"
 					icon="fa-car"
@@ -186,8 +191,8 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.showStandardVehicle" />
 					</template>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Wechselrichter-Details anzeigen"
 					icon="fa-solar-panel"
@@ -196,8 +201,8 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.showInverters" />
 					</template>
-				</ConfigItem>
-				<ConfigItem
+				</ConfigItem> -->
+				<!-- <ConfigItem
 					:fullwidth="true"
 					title="Alternatives Energie-Widget"
 					icon="fa-chart-area"
@@ -206,19 +211,7 @@
 					<template #inline-item>
 						<SwitchInput v-model="globalConfig.alternativeEnergy" />
 					</template>
-				</ConfigItem>
-			</div>
-			<div class="settingscolumn">
-				<ConfigItem
-					:fullwidth="true"
-					title="Preistabelle anzeigen"
-					icon="fa-car"
-					infotext="Zeige die Strompreistabelle in einer separaten Box an"
-				>
-					<template #inline-item>
-						<SwitchInput v-model="globalConfig.showPrices" />
-					</template>
-				</ConfigItem>
+				</ConfigItem> -->
 				<ConfigItem
 					:fullwidth="true"
 					title="Untere Markierung in der Preistabelle"
@@ -251,6 +244,18 @@
 						unit="ct"
 					/>
 				</ConfigItem>
+			</div>
+			<div class="settingscolumn">
+				<!-- <ConfigItem
+					:fullwidth="true"
+					title="Preistabelle anzeigen"
+					icon="fa-car"
+					infotext="Zeige die Strompreistabelle in einer separaten Box an"
+				>
+					<template #inline-item>
+						<SwitchInput v-model="globalConfig.showPrices" />
+					</template>
+				</ConfigItem> -->
 
 				<ConfigItem
 					:fullwidth="true"
@@ -290,7 +295,7 @@
 
 <script setup lang="ts">
 import { globalConfig } from '@/assets/js/themeConfig'
-import SelectInput from '@/components/shared/SelectInput.vue'
+//import SelectInput from '@/components/shared/SelectInput.vue'
 import ConfigItem from '@/components/shared/ConfigItem.vue'
 import SwitchInput from '@/components/shared/SwitchInput.vue'
 import RadioInput2 from '@/components/shared/RadioInput2.vue'
@@ -298,23 +303,23 @@ import RadioInput2 from '@/components/shared/RadioInput2.vue'
 import WbWidgetFlex from '@/components/shared/WbWidgetFlex.vue'
 import RangeInput from '@/components/shared/RangeInput.vue'
 const emit = defineEmits(['reset-arcs'])
-const colorschemes: [string, string][] = [
+/* const colorschemes: [string, string][] = [
 	['Dunkel', 'dark'],
 	['Hell', 'light'],
 	['Blau', 'blue'],
-]
-const decimalDisplay: [string, string][] = [
+] */
+/* const decimalDisplay: [string, string][] = [
 	['3 kW', '0'],
 	['3,1 kW', '1'],
 	['3,14 kW', '2'],
 	['3,141 kW', '3'],
 	['3141 W', '4'],
-]
-const shSchemes: [string, string][] = [
+] */
+/* const shSchemes: [string, string][] = [
 	['Orange', 'normal'],
 	['Grün/Violett', 'standard'],
 	['Bunt', 'advanced'],
-]
+] */
 const clockModes: [string, string][] = [
 	['Aus', 'off'],
 	['Menü', 'navbar'],
@@ -340,4 +345,12 @@ const shortListOptions: [string, string][] = [
 .settingscolumn {
 	padding: 20px;
 }
+.topbanner {
+	font-size: var(--font-large);
+	color: var(--color-evu);
+	text-align: center;
+	padding: 1em;
+	border: 1px solid var(--color-evu);
+	border-radius: 5px;
+}
 </style>