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 3754f13c2b..dd40123f55 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
@@ -226,6 +226,7 @@ body>.container-fluid {
 	--color-fg: black;
 	--color-scale: lightgrey;
 	--color-title: rgba(0, 0, 0, 0.644);
+	--color-config: lightgrey;
 	--padding-widget: 5px;
 	--fontCol: rgba(255, 255, 255, 0.82);
 	--gridCol: rgba(255, 255, 255, 0.82);
@@ -244,6 +245,7 @@ body>.container-fluid {
 	--color-fg: white;
 	--color-scale: steelblue;
 	--color-title: lightgrey;
+	--color-config: steelblue;
 	--padding-widget: 0px;
 }
 
@@ -258,6 +260,7 @@ body>.container-fluid {
 	--color-fg: white;
 	--color-scale: #999999;
 	--color-title: lightgrey;
+	--color-config: #666666;
 	--padding-widget: 0px;
 }
 
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 27babc633e..c14ac19202 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
@@ -100,7 +100,7 @@ function processCounterMessages(topic: string, message: string) {
 	if (id != undefined) {
 		if (id == globalData.evuId) {
 			processEvuMessages(topic, message)
-		} 
+		}
 		if (!counters.has(id)) {
 			console.warn('Invalid counter index: ' + id)
 		} else if (topic.match(/^openWB\/counter\/[0-9]+\/get\/power$/i)) {
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue
index f059e7145d..1f23b3ff39 100644
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue
@@ -23,7 +23,7 @@
 				v-if="chargepoint.isSocManual"
 				class="fa-solid fa-sm fas fa-edit"
 				:style="{ color: 'var(--color-bg)' }"
-				@click="editSoc = !editSoc"
+				@click="toggleSocEditor()"
 			/>
 
 			<i
@@ -99,7 +99,7 @@
 				<span>
 					<RangeInput
 						id="manualSoc"
-						v-model="manualSoc"
+						v-model="tempsoc"
 						:min="0"
 						:max="100"
 						:step="1"
@@ -215,15 +215,7 @@ const chargedRangeString = computed(() => {
 const soc = computed(() => {
 	return props.chargepoint.soc
 })
-const manualSoc = computed({
-	get() {
-		return props.chargepoint.soc
-	},
-	set(s: number) {
-		chargePoints[props.chargepoint.id].soc = s
-	},
-})
-
+const tempsoc = ref(0)
 const currentPrice = computed(() => {
 	const [p] = etData.etPriceList.values()
 	return (Math.round(p * 10) / 10).toFixed(1)
@@ -264,9 +256,18 @@ function loadSoc() {
 	chargePoints[props.chargepoint.id].waitingForSoc = true
 }
 function setSoc() {
-	updateServer('setSoc', manualSoc.value, props.chargepoint.connectedVehicle)
+	//updateServer('setSoc', manualSoc.value, props.chargepoint.connectedVehicle)
+	updateServer('setSoc', tempsoc.value, props.chargepoint.connectedVehicle)
 	editSoc.value = false
 }
+function toggleSocEditor() {
+	if (editSoc.value) {
+		editSoc.value = false
+	} else {
+		tempsoc.value = props.chargepoint.soc
+		editSoc.value = true
+	}
+}
 </script>
 <style scoped>
 .fa-star {
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigScheduled.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigScheduled.vue
index fc9ee2b6d7..38c628c05d 100755
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigScheduled.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigScheduled.vue
@@ -1,148 +1,231 @@
 <template>
-	<p class="heading ms-1 pt-2">Pläne für Zielladen:</p>
-	<table v-if="plans.length > 0" class="table table-borderless">
-		<thead>
-			<tr>
-				<th class="tableheader left" />
-				<th class="tableheader left">Plan</th>
-				<th class="tableheader">Zeit</th>
-				<th class="tableheader">Ziel</th>
-				<th class="tableheader">Wiederh.</th>
-
-				<th class="tableheader right" />
-			</tr>
-		</thead>
-		<tbody>
-			<tr
-				v-for="(plan, i) in plans"
-				:key="i"
-				:class="plan.active ? 'text-bold' : 'text-normal'"
+	<p class="heading pt-2">Zielladen - Pläne:</p>
+	<div class="plantable">
+		<div
+			v-for="(plan, i) in plans"
+			:key="i"
+			class="plandisplay"
+			:style="fontcolor(i)"
+		>
+			<span class="planbuttons-left">
+				<i
+					class="planswitch fa fa-xl"
+					:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
+					:style="switchStyle(i)"
+					type="button"
+					@click="toggleSwitch(i)"
+				/>
+			</span>
+			<span class="targettime"> {{ timeString(i) }} </span>
+			<span class="limit">
+				<i class="fa fa-sm me-1" :class="limitIcon(i)" />{{
+					limitString(i)
+				}}</span
 			>
-				<td class="tablecell left">
-					<a
-						v-if="props.chargePoint.chargeTemplate?.id != undefined"
-						@click="toggleSwitch(i)"
-					>
-						<span
-							:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
-							:style="switchStyle(i)"
-							class="fa"
-							type="button"
-						>
-						</span
-					></a>
-				</td>
-				<td class="tablecell left">{{ plan.name }}</td>
-				<td class="tablecell">
-					{{ timeString(i) }}
-				</td>
-				<td class="tablecell">
-					{{
-						plan.limit.selected == 'soc'
-							? plan.limit.soc_scheduled + '%'
-							: formatWattH(plan.limit.amount, 0)
-					}}
-				</td>
-				<td class="tablecell">
-					{{ freqNames[plan.frequency.selected] }}
-				</td>
-
-				<td class="tablecell right">
-					<i
-						class="me-1 fa-solid fa-sm fa-circle-info"
-						@click="showPlanDetails = !showPlanDetails"
-					/>
-				</td>
-			</tr>
-		</tbody>
-	</table>
-	<p v-else class="ms-1">
-		Pläne für das Zielladen können in den Einstellungen des Ladeprofils angelegt
-		werden .
-	</p>
-
-	<div v-if="showPlanDetails">
-		<ScheduleDetails
-			v-for="plan in plans"
-			:key="plan.id"
-			:plan="plan"
-			@close="showPlanDetails = false"
-		/>
+			<span class="planbuttons-right">
+				<i
+					class="fa-solid fa-lg fa-gear"
+					type="button"
+					@click="openEditor(i)"
+				/>
+			</span>
+			<span v-if="plan.frequency.selected != 'weekly'" class="frequency mt-2">
+				{{ frequencyString(i) }}
+			</span>
+			<div v-else class="frequency mt-2">
+				<i
+					v-for="(b, d) in plan.frequency.weekly"
+					:key="d"
+					:class="
+						'fa-solid fa-xs ' + (b ? 'fa-charging-station' : 'fa-circle-xmark')
+					"
+				>
+				</i>
+			</div>
+			<span class="planname mt-2">{{ plan.name }}</span>
+			<hr class="dividerline" />
+		</div>
 	</div>
+	<button class="createButton btn btn-sm" @click="addPlan">Neuer Plan</button>
+
+	<EditSchedule
+		v-for="plan in plans"
+		:key="plan.id"
+		:model-value="plan"
+		:cp-id="chargePoint.id"
+		@update:model-value="savePlan"
+		@delete-plan="deletePlan"
+	/>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ChargePoint, type ChargeSchedule } from '../model'
 import { updateChargeTemplate } from '@/assets/js/sendMessages'
-import ScheduleDetails from './ScheduleDetails.vue'
+import { Modal } from 'bootstrap'
+import EditSchedule from './EditSchedule.vue'
 import { formatWattH } from '@/assets/js/helpers'
+import { sendCommand } from '@/assets/js/sendMessages'
 
-const showPlanDetails = ref(false)
-const freqNames: { [key: string]: string } = {
-	daily: 'Täglich',
-	once: 'Einmal',
-	weekly: 'Woche',
-}
 const props = defineProps<{
 	chargePoint: ChargePoint
 }>()
-
+const planToEdit = ref<number>(0)
 //computed
 const plans = computed(
 	() =>
 		props.chargePoint?.chargeTemplate?.chargemode.scheduled_charging.plans ??
 		([] as ChargeSchedule[]),
 )
+var editorModal = ref<Modal | null>(null)
 //methods
+function frequencyString(i: number): string {
+	switch (plans.value[i].frequency.selected) {
+		case 'once':
+			return dateString(plans.value[i].frequency.once!)
+		case 'daily':
+			return 'täglich'
+		case 'weekly':
+			return ''
+		default:
+			return ''
+	}
+}
+function limitString(i: number): string {
+	switch (plans.value[i].limit.selected) {
+		case 'amount':
+			return formatWattH(plans.value[i].limit.amount!)
+		case 'soc':
+			return plans.value[i].limit.soc_scheduled! + '%'
+	}
+}
 function timeString(key: number) {
 	return plans.value[key].time
 }
+function dateString(s: string) {
+	const elts = s.split('-')
+	return `${Number(elts[2])}.${Number(elts[1])}.`
+}
 function switchStyle(key: number) {
 	const style = plans.value[key].active
 		? 'var(--color-switchGreen)'
 		: 'var(--color-switchRed)'
 	return { color: style }
 }
+function fontcolor(i: number) {
+	return {
+		color: plans.value[i].active ? 'var(--color-fg)' : 'var(--color-menu)',
+	}
+}
+function limitIcon(i: number) {
+	return plans.value[i]!.limit.selected == 'soc' ? 'fa-arrow-right' : 'fa-bolt'
+}
 function toggleSwitch(i: number) {
 	props.chargePoint.chargeTemplate!.chargemode.scheduled_charging.plans[
 		i
 	]!.active = !plans.value[i].active
 	updateChargeTemplate(props.chargePoint.id)
 }
+function openEditor(plan: number) {
+	const modalId = `schedulePlanSettings-${props.chargePoint.id}-${plans.value[plan]!.id}`
+	planToEdit.value = plan
+	editorModal.value = new Modal(document.getElementById(modalId)!)
+	editorModal.value.toggle()
+}
+function savePlan() {
+	editorModal.value!.hide()
+	updateChargeTemplate(props.chargePoint.id)
+}
+function addPlan() {
+	sendCommand({
+		command: 'addChargeTemplateSchedulePlan',
+		data: {
+			template: props.chargePoint.chargeTemplate!.id,
+			chargepoint: props.chargePoint.id,
+			changed_in_theme: true,
+		},
+	})
+}
+function deletePlan() {
+	editorModal.value!.hide()
+	sendCommand({
+		command: 'removeChargeTemplateSchedulePlan',
+		data: {
+			template: props.chargePoint.chargeTemplate!.id,
+			plan: plans.value[planToEdit.value]!.id,
+			chargepoint: props.chargePoint.id,
+			changed_in_theme: true,
+		},
+	})
+}
 </script>
 
 <style scoped>
-.tablecell {
-	color: var(--color-fg);
-	background-color: var(--color-bg);
-	text-align: center;
+.plantable {
+	display: grid;
+	grid-template-columns: repeat (2, 1fr) repeat (8, auto) repeat(2, 1fr);
 	font-size: var(--font-settings);
 }
-
-.tableheader {
-	color: var(--color-menu);
-	background-color: var(--color-bg);
-	text-align: center;
-	font-style: normal;
+.plandisplay {
+	display: grid;
+	grid-column: 1 / 13;
+	grid-template-columns: subgrid;
+}
+.planbuttons-right {
+	grid-column: span 2;
+	text-align: right;
+}
+.planbuttons-left {
+	grid-column: span 3;
+	text-align: left;
+}
+.planname {
+	grid-column: span 8;
+	text-align: right;
+}
+.planswitch {
+	font-size: 24px;
+}
+.frequency {
+	grid-column: span 4;
+	text-align: left;
+}
+.targettime {
+	grid-column: span 3;
+	text-align: left;
+	font-weight: bold;
+}
+.limit {
+	grid-column: span 4;
+	text-align: left;
+	font-weight: bold;
 }
 .heading {
 	color: var(--color-battery);
 	font-size: var(--font-settings);
 	font-weight: bold;
 }
-
-.left {
-	text-align: left;
+.fa-gear {
+	color: var(--color-charging);
+	cursor: pointer;
 }
-.text-bold {
-	font-weight: bold;
+.fa-trash {
+	color: var(--color-evu);
+	cursor: pointer;
 }
-.text-normal {
-	font-weight: normal;
+.fa-charging-station {
+	color: var(--color-charging);
+}
+.fa-circle-xmark {
+	color: var(--color-evu);
 }
-.fa-circle-info {
+.createButton {
+	background-color: var(--color-bg);
 	color: var(--color-charging);
-	cursor: pointer;
+	font-size: var(--font-settings-button);
+	width: 100%;
+}
+.dividerline {
+	grid-column: span 12;
 }
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigTimed.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigTimed.vue
index e8db4bdf8f..c179eb2851 100755
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigTimed.vue
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigTimed.vue
@@ -1,95 +1,102 @@
 <template>
-	<ConfigItem title="Zeitplan aktiv" icon="fa-clock" :fullwidth="true">
+	<ConfigItem title="Zeitladen aktiv" icon="fa-clock" :fullwidth="true">
 		<template #inline-item>
 			<SwitchInput v-model="cp.timedCharging" />
 		</template>
 	</ConfigItem>
-	<p class="heading ms-1 pt-2">Zeitpläne:</p>
-	<table class="table table-borderless">
-		<thead>
-			<tr>
-				<th class="tableheader left" />
-				<th class="tableheader">Von</th>
-				<th class="tableheader">Bis</th>
-				<th class="tableheader">Strom</th>
-				<th class="tableheader">Wiederh.</th>
-				<th class="tableheader right" />
-			</tr>
-		</thead>
-		<tbody>
-			<tr
-				v-for="(plan, i) in plans"
-				:key="i"
-				:class="plan.active ? 'text-bold' : 'text-normal'"
-			>
-				<td class="tablecell left">
-					<span
-						v-if="props.chargePoint.chargeTemplate?.id != undefined"
-						@click="toggleSwitch(i)"
-					>
-						<span
-							:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
-							:style="switchStyle(i)"
-							class="fa"
-							type="button"
-						>
-						</span
-					></span>
-				</td>
-				<td class="tablecell">
-					{{ plan.time[0] }}
-				</td>
-				<td class="tablecell">
-					{{ plan.time[1] }}
-				</td>
-				<td class="tablecell">{{ plan.current }} A</td>
-				<td class="tablecell">
-					{{ freqNames[plan.frequency.selected] }}
-				</td>
-				<td class="tablecell right">
-					<i
-						class="me-1 fa-solid fa-sm fa-circle-info"
-						@click="showPlanDetails = !showPlanDetails"
-					/>
-				</td>
-			</tr>
-		</tbody>
-	</table>
-
-	<div v-if="showPlanDetails">
-		<TimePlanDetails
-			v-for="plan in plans"
-			:key="plan.id"
-			:plan="plan"
-			@close="showPlanDetails = false"
-		/>
+	<p class="heading pt-2">Zeitpläne:</p>
+	<div class="plantable">
+		<div
+			v-for="(plan, i) in plans"
+			:key="i"
+			class="plandisplay"
+			:style="fontcolor(i)"
+		>
+			<span class="planbuttons-left">
+				<i
+					class="planswitch fa fa-xl"
+					:class="plan.active ? 'fa-toggle-on' : 'fa-toggle-off'"
+					:style="switchStyle(i)"
+					type="button"
+					@click="toggleSwitch(i)"
+				/>
+			</span>
+			<span class="targettime"> {{ timeString(i) }} </span>
+			<span class="planbuttons-right">
+				<i class="fa-solid fa-xl fa-gear" @click="openEditor(i)" />
+			</span>
+			<span v-if="plan.frequency.selected != 'weekly'" class="frequency mt-2">
+				{{ frequencyString(i) }}
+			</span>
+			<div v-else class="frequency mt-2">
+				<i
+					v-for="(b, d) in plan.frequency.weekly"
+					:key="d"
+					:class="
+						'fa-solid fa-xs ' + (b ? 'fa-charging-station' : 'fa-circle-xmark')
+					"
+				>
+				</i>
+			</div>
+			<span class="planname mt-2">{{ plan.name }}</span>
+			<hr class="dividerline" />
+		</div>
 	</div>
+	<button class="createButton btn btn-sm" @click="addPlan">Neuer Plan</button>
+
+	<EditTimeplan
+		v-for="plan in plans"
+		:key="plan.id"
+		:model-value="plan"
+		:cp-id="chargePoint.id"
+		@update:model-value="savePlan"
+		@delete-plan="deletePlan"
+	/>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { ChargePoint, type ChargeTimePlan } from '../model'
-import { updateChargeTemplate } from '@/assets/js/sendMessages'
-import TimePlanDetails from './TimePlanDetails.vue'
+import { sendCommand, updateChargeTemplate } from '@/assets/js/sendMessages'
+import { Modal } from 'bootstrap'
 import SwitchInput from '@/components/shared/SwitchInput.vue'
 import ConfigItem from '../../shared/ConfigItem.vue'
+import EditTimeplan from './EditTimeplan.vue'
+
 const props = defineProps<{
 	chargePoint: ChargePoint
 }>()
 
-const showPlanDetails = ref(false)
+var editorModal = ref<Modal | null>(null)
+const planToEdit = ref<number>(0)
 const cp = props.chargePoint
-const freqNames: { [key: string]: string } = {
-	daily: 'Täglich',
-	once: 'Einmal',
-	weekly: 'Woche',
-}
-
 const plans = computed(
 	() =>
 		props.chargePoint?.chargeTemplate?.time_charging.plans ??
 		([] as ChargeTimePlan[]),
 )
+function frequencyString(i: number): string {
+	switch (plans.value[i].frequency.selected) {
+		case 'once':
+			return dateString(plans.value[i].frequency.once!)
+		case 'daily':
+			return 'täglich'
+		case 'weekly':
+			return ''
+		default:
+			return ''
+	}
+}
+function timeString(key: number) {
+	return `${plans.value[key].time[0]} -> ${plans.value[key].time[1]}`
+}
+function dateString(s: [string, string]) {
+	console.log(s)
+	const elts0 = s[0].split('-')
+	const elts1 = s[1].split('-')
+
+	return `${Number(elts0[2])}.${Number(elts0[1])}.-${Number(elts1[2])}.${Number(elts1[1])}`
+}
 
 function switchStyle(key: number) {
 	const style = plans.value[key].active
@@ -97,14 +104,115 @@ function switchStyle(key: number) {
 		: 'var(--color-switchRed)'
 	return { color: style }
 }
+
+function fontcolor(i: number) {
+	return {
+		color: plans.value[i].active ? 'var(--color-fg)' : 'var(--color-menu)',
+	}
+}
 function toggleSwitch(i: number) {
 	props.chargePoint.chargeTemplate!.time_charging.plans[i]!.active =
 		!plans.value[i].active
 	updateChargeTemplate(props.chargePoint.id)
 }
+function openEditor(plan: number) {
+	const modalId = `timePlanSettings-${props.chargePoint.id}-${plans.value[plan]!.id}`
+	planToEdit.value = plan
+	editorModal.value = new Modal(document.getElementById(modalId)!)
+	editorModal.value.toggle()
+}
+function savePlan() {
+	editorModal.value!.hide()
+	updateChargeTemplate(props.chargePoint.id)
+}
+function addPlan() {
+	sendCommand({
+		command: 'addChargeTemplateTimeChargingPlan',
+		data: {
+			template: props.chargePoint.chargeTemplate!.id,
+			chargepoint: props.chargePoint.id,
+			changed_in_theme: true,
+		},
+	})
+}
+function deletePlan() {
+	editorModal.value!.hide()
+	sendCommand({
+		command: 'removeChargeTemplateTimeChargingPlan',
+		data: {
+			template: props.chargePoint.chargeTemplate!.id,
+			plan: plans.value[planToEdit.value]!.id,
+			chargepoint: props.chargePoint.id,
+			changed_in_theme: true,
+		},
+	})
+}
 </script>
 
 <style scoped>
+.plantable {
+	display: grid;
+	grid-template-columns: repeat (2, 1fr) repeat (8, auto) repeat(2, 1fr);
+	font-size: var(--font-settings);
+}
+.plandisplay {
+	display: grid;
+	grid-column: 1 / 13;
+	grid-template-columns: subgrid;
+}
+.planbuttons-right {
+	grid-column: span 2;
+	text-align: right;
+}
+.planbuttons-left {
+	grid-column: span 2;
+	text-align: left;
+}
+.planname {
+	grid-column: span 8;
+	text-align: right;
+}
+.frequency {
+	grid-column: span 4;
+	text-align: left;
+}
+.targettime {
+	grid-column: span 8;
+	text-align: center;
+	font-weight: bold;
+}
+.limit {
+	grid-column: span 4;
+	text-align: right;
+}
+.heading {
+	color: var(--color-battery);
+	font-size: var(--font-settings);
+	font-weight: bold;
+}
+.fa-gear {
+	color: var(--color-charging);
+	cursor: pointer;
+}
+.fa-trash {
+	color: var(--color-evu);
+	cursor: pointer;
+}
+.fa-charging-station {
+	color: var(--color-charging);
+}
+.fa-circle-xmark {
+	color: var(--color-evu);
+}
+.createButton {
+	background-color: var(--color-bg);
+	color: var(--color-charging);
+	font-size: var(--font-settings-button);
+	width: 100%;
+}
+.dividerline {
+	grid-column: span 12;
+}
 .tablecell {
 	color: var(--color-fg);
 	background-color: var(--color-bg);
@@ -140,4 +248,8 @@ function toggleSwitch(i: number) {
 	color: var(--color-charging);
 	cursor: pointer;
 }
+.fa-gear {
+	color: var(--color-charging);
+	cursor: pointer;
+}
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/EditSchedule.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/EditSchedule.vue
new file mode 100644
index 0000000000..4f6214f05d
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/EditSchedule.vue
@@ -0,0 +1,222 @@
+<template>
+	<ModalComponent
+		:modal-id="'schedulePlanSettings-' + cpId + '-' + modelValue.id"
+	>
+		<template #title> {{ props.modelValue.name }} </template>
+		<template #footer>
+			<button
+				class="closebutton btn btn-secondary"
+				@click="$emit('update:modelValue', plan)"
+			>
+				Speichern
+			</button>
+		</template>
+		<div class="planeditor p-2">
+			<ConfigItem2 title="Name" icon="fa-calendar-check" :fullwidth="true">
+				<template #inline-item>
+					<TextInput v-model="plan.name" :text="'Name des Plans'" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Aktiv" icon="fa-power-off" :fullwidth="true">
+				<template #inline-item>
+					<SwitchInput v-model="plan.active" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Zielzeit" icon="fa-clock" :fullwidth="true">
+				<template #inline-item>
+					<TextInput v-model="plan.time" :text="'Zielzeit (HH:MM)'" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Ladestrom (A)" icon="fa-bolt" :fullwidth="true">
+				<RangeInput
+					id="chargeCurrent"
+					v-model="plan.current"
+					:min="6"
+					:max="32"
+					:step="1"
+					unit="A"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 title="Ziel" icon="fa-bullseye" :fullwidth="true">
+				<template #inline-item>
+					<RadioInput
+						v-model="plan.limit.selected"
+						:options="[
+							['Soc', 'soc'],
+							['Energie', 'amount'],
+						]"
+					/>
+				</template>
+			</ConfigItem2>
+			<ConfigItem2
+				v-if="plan.limit.selected === 'soc'"
+				title="EV-SoC"
+				icon="fa-battery-half"
+				:fullwidth="true"
+			>
+				<RangeInput
+					id="evSoc"
+					v-model="plan.limit.soc_limit!"
+					:min="0"
+					:max="100"
+					:step="1"
+					unit="%"
+				/>
+			</ConfigItem2>
+			<ConfigItem2
+				v-if="plan.limit.selected === 'amount'"
+				title="Energiemenge (kWh)"
+				icon="fa-charging-station"
+				:fullwidth="true"
+			>
+				<RangeInput
+					id="energyAmount"
+					v-model="energy"
+					:min="1"
+					:max="150"
+					:step="1"
+					unit="kWh"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 title="Wiederholungen" icon="fa-repeat" :fullwidth="true">
+				<RadioInput2
+					v-model="plan.frequency.selected"
+					:options="[
+						['Einmalig', 'once'],
+						['Täglich', 'daily'],
+						['Wöchentlich', 'weekly'],
+					]"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 v-if="plan.frequency.selected === 'once'" title="Datum">
+				<template #inline-item>
+					<DateInput2
+						v-model="date"
+						:input-id="'schedule-date-' + props.cpId.toString() + '-' + plan.id"
+					/>
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 v-if="plan.frequency.selected === 'weekly'" title="Tage">
+				<CheckBoxInput
+					v-model="plan.frequency.weekly"
+					:options="['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']"
+				/>
+			</ConfigItem2>
+			<ConfigItem2
+				title="Strompreisbasiert Laden"
+				icon="fa-coins"
+				:fullwidth="true"
+			>
+				<template #inline-item>
+					<SwitchInput v-model="plan.et_active" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2
+				title="Anzahl Phasen Zielladen"
+				icon="fa-plug"
+				:fullwidth="true"
+			>
+				<RadioInput2
+					v-model="plan.phases_to_use"
+					:options="[
+						['1', 1],
+						['Maximum', 3],
+						['Automatik', 0],
+					]"
+				/>
+			</ConfigItem2>
+			<ConfigItem2
+				title="Anzahl Phasen bei PV-Überschuss"
+				icon="fa-plug"
+				:fullwidth="true"
+			>
+				<RadioInput2
+					v-model="plan.phases_to_use_pv"
+					:options="[
+						['1', 1],
+						['Maximum', 3],
+						['Automatik', 0],
+					]"
+				/>
+			</ConfigItem2>
+			<button
+				class="btn delete_button align-self-center"
+				type="button"
+				@click="$emit('deletePlan', plan)"
+			>
+				Plan löschen
+			</button>
+		</div>
+	</ModalComponent>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type ChargeSchedule } from '../model'
+import ModalComponent from '@/components/shared/ModalComponent.vue'
+import ConfigItem2 from '@/components/shared/ConfigItem2.vue'
+import TextInput from '@/components/shared/TextInput.vue'
+import SwitchInput from '@/components/shared/SwitchInput.vue'
+import RangeInput from '@/components/shared/RangeInput.vue'
+import RadioInput from '@/components/shared/RadioInput.vue'
+import RadioInput2 from '@/components/shared/RadioInput2.vue'
+import DateInput2 from '@/components/shared/DateInput2.vue'
+import CheckBoxInput from '@/components/shared/CheckBoxInput.vue'
+const props = defineProps<{
+	modelValue: ChargeSchedule
+	cpId: number
+}>()
+const emit = defineEmits(['update:modelValue', 'deletePlan'])
+const plan = computed({
+	get() {
+		return props.modelValue
+	},
+	set(value: number | string) {
+		emit('update:modelValue', value)
+	},
+})
+const energy = computed({
+	get() {
+		return plan.value.limit.amount! / 1000
+	},
+	set(value: number) {
+		plan.value.limit.amount = value * 1000
+	},
+})
+const date = computed({
+	get() {
+		return new Date(plan.value.frequency.once!)
+	},
+	set(value: Date) {
+		plan.value.frequency.once = `${value.getFullYear()}-${value.getMonth() + 1}-${value.getDate()}`
+	},
+})
+</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;
+}
+.planeditor {
+	display: grid;
+}
+.closebutton {
+	font-size: var(--font-settings);
+	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;
+}
+</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/EditTimeplan.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/EditTimeplan.vue
new file mode 100644
index 0000000000..ce7715cb0a
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/EditTimeplan.vue
@@ -0,0 +1,218 @@
+<template>
+	<ModalComponent :modal-id="'timePlanSettings-' + cpId + '-' + modelValue.id">
+		<template #title> Einstellungen Zeitladen: {{ modelValue.name }} </template>
+		<template #footer>
+			<button
+				class="closebutton btn btn-secondary"
+				@click="$emit('update:modelValue', plan)"
+			>
+				Speichern
+			</button>
+		</template>
+		<div class="planeditor p-2">
+			<ConfigItem2 title="Name" icon="fa-calendar-check" :fullwidth="true">
+				<template #inline-item>
+					<TextInput v-model="plan.name" :text="'Name des Plans'" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Aktiv" icon="fa-power-off" :fullwidth="true">
+				<template #inline-item>
+					<SwitchInput v-model="plan.active" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Ladebeginn" icon="fa-clock" :fullwidth="true">
+				<template #inline-item>
+					<TimeInput v-model="plan.time[0]" :text="'Startzeit (HH:MM)'" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Ladeende" icon="fa-clock" :fullwidth="true">
+				<template #inline-item>
+					<TimeInput v-model="plan.time[1]" :text="'Zielzeit (HH:MM)'" />
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 title="Ladestrom" icon="fa-bolt" :fullwidth="true">
+				<RangeInput
+					id="chargeCurrent"
+					v-model="plan.current"
+					:min="6"
+					:max="32"
+					:step="1"
+					unit="A"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 title="Begrenzung" icon="fa-bullseye" :fullwidth="true">
+				<template #inline-item>
+					<RadioInput
+						v-model="plan.limit.selected"
+						:options="[
+							['Aus', 'none'],
+							['Soc', 'soc'],
+							['Energie', 'amount'],
+						]"
+					/>
+				</template>
+			</ConfigItem2>
+			<ConfigItem2
+				v-if="plan.limit.selected === 'soc'"
+				title="Ziel-SoC für das Fahrzeug"
+				icon="fa-battery-half"
+				:fullwidth="true"
+			>
+				<RangeInput
+					id="evSoc"
+					v-model="plan.limit.soc!"
+					:min="0"
+					:max="100"
+					:step="1"
+					unit="%"
+				/>
+			</ConfigItem2>
+			<ConfigItem2
+				v-if="plan.limit.selected === 'amount'"
+				title="Ziel-Energie"
+				icon="fa-charging-station"
+				:fullwidth="true"
+			>
+				<RangeInput
+					id="energyAmount"
+					v-model="energy"
+					:min="1"
+					:max="150"
+					:step="1"
+					unit="kWh"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 title="Wiederholungen" icon="fa-repeat" :fullwidth="true">
+				<RadioInput2
+					v-model="plan.frequency.selected"
+					:options="[
+						['Einmalig', 'once'],
+						['Täglich', 'daily'],
+						['Wöchentlich', 'weekly'],
+					]"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 v-if="plan.frequency.selected === 'once'" title="Gültig ab">
+				<template #inline-item>
+					<DateInput2
+						v-model="startDate"
+						:input-id="
+							'time-from-date-' + props.cpId.toString() + '-' + plan.id
+						"
+					/>
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 v-if="plan.frequency.selected === 'once'" title="Gültig bis">
+				<template #inline-item>
+					<DateInput2
+						v-model="endDate"
+						:input-id="'time-to-date-' + props.cpId.toString() + '-' + plan.id"
+					/>
+				</template>
+			</ConfigItem2>
+			<ConfigItem2 v-if="plan.frequency.selected === 'weekly'" title="Tage">
+				<CheckBoxInput
+					v-model="plan.frequency.weekly"
+					:options="['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']"
+				/>
+			</ConfigItem2>
+			<ConfigItem2 title="Anzahl Phasen" icon="fa-plug" :fullwidth="true">
+				<RadioInput2
+					v-model="plan.phases_to_use"
+					:options="[
+						['1', 1],
+						['Maximum', 3],
+					]"
+				/>
+			</ConfigItem2>
+			<button
+				class="btn delete_button align-self-center"
+				type="button"
+				@click="$emit('deletePlan', plan)"
+			>
+				Plan löschen
+			</button>
+		</div>
+	</ModalComponent>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type ChargeTimePlan } from '../model'
+import ModalComponent from '@/components/shared/ModalComponent.vue'
+import ConfigItem2 from '@/components/shared/ConfigItem2.vue'
+import TextInput from '@/components/shared/TextInput.vue'
+import SwitchInput from '@/components/shared/SwitchInput.vue'
+import RangeInput from '@/components/shared/RangeInput.vue'
+import RadioInput from '@/components/shared/RadioInput.vue'
+import RadioInput2 from '@/components/shared/RadioInput2.vue'
+import DateInput2 from '@/components/shared/DateInput2.vue'
+import CheckBoxInput from '@/components/shared/CheckBoxInput.vue'
+import TimeInput from '@/components/shared/TimeInput.vue'
+const props = defineProps<{
+	modelValue: ChargeTimePlan
+	cpId: number
+}>()
+const emit = defineEmits(['update:modelValue', 'deletePlan'])
+const plan = computed({
+	get() {
+		return props.modelValue
+	},
+	set(value: number | string) {
+		emit('update:modelValue', value)
+	},
+})
+const energy = computed({
+	get() {
+		return plan.value.limit.amount! / 1000
+	},
+	set(value: number) {
+		plan.value.limit.amount = value * 1000
+	},
+})
+const startDate = computed({
+	get() {
+		return new Date(plan.value.frequency.once![0])
+	},
+	set(value: Date) {
+		plan.value.frequency.once![0] = `${value.getFullYear()}-${value.getMonth() + 1}-${value.getDate()}`
+	},
+})
+const endDate = computed({
+	get() {
+		return new Date(plan.value.frequency.once![1])
+	},
+	set(value: Date) {
+		plan.value.frequency.once![1] = `${value.getFullYear()}-${value.getMonth() + 1}-${value.getDate()}`
+	},
+})
+</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;
+}
+.planeditor {
+	display: grid;
+	grid-template-columns: repeat(2, auto);
+}
+.closebutton {
+	font-size: var(--font-settings);
+	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;
+}
+</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ScheduleDetails.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ScheduleDetails.vue
deleted file mode 100644
index fd89722d44..0000000000
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ScheduleDetails.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-	<div class="plandetails d-flex flex-cloumn">
-		<hr />
-		<span class="heading">Details für {{ props.plan.name }}:</span>
-		<ul>
-			<li>{{ targetString }}</li>
-			<li>{{ repeatString }}</li>
-			<li v-if="props.plan.et_active">Preisbasiert laden</li>
-		</ul>
-		<button class="btn btn-outline-secondary btn-sm" @click="$emit('close')">
-			Ok
-		</button>
-	</div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-import { type ChargeSchedule } from '../model'
-import { formatWattH } from '@/assets/js/helpers'
-const props = defineProps<{
-	plan: ChargeSchedule
-}>()
-defineEmits(['close'])
-const targetString = computed(() => {
-	if (props.plan.limit.selected == 'soc') {
-		return `Lade bis ${props.plan.time} auf ${props.plan.limit.soc_scheduled}% (maximal ${props.plan.limit.soc_limit}% mit PV)`
-	} else if (props.plan.limit.selected == 'amount') {
-		return `Energiemenge: ${formatWattH(props.plan.limit.amount)}`
-	} else {
-		return 'Keine Begrenzung'
-	}
-})
-const repeatString = computed(() => {
-	let result = `Wiederholung `
-
-	switch (props.plan.frequency.selected) {
-		case 'daily':
-			result += 'täglich'
-			break
-		case 'once':
-			result += `einmal (${props.plan.frequency.once})`
-			break
-		case 'weekly':
-			result += 'wöchentlich ' + weekDayString.value
-			break
-		default:
-			result += 'unbekannt'
-	}
-	return result
-})
-const weekDayString = computed(() => {
-	const days = [
-		'Montag',
-		'Dienstag',
-		'Mittwoch',
-		'Donnerstag',
-		'Freitag',
-		'Samstag',
-		'Sonntag',
-	]
-	let result = '('
-	props.plan.frequency.weekly.forEach((day, index) => {
-		if (day) {
-			result += `${days[index]} `
-		}
-	})
-	result = result.trim()
-	result += ')'
-	return result
-})
-</script>
-<style scoped>
-.heading {
-	font-size: var(--font-settings);
-	color: var(--color-charging);
-	font-weight: bold;
-	margin-bottom: 0.5rem;
-}
-.plandetails {
-	display: flex;
-	flex-direction: column;
-}
-</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/TimePlanDetails.vue b/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/TimePlanDetails.vue
deleted file mode 100644
index 721e0bf9f3..0000000000
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/TimePlanDetails.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-	<div class="plandetails d-flex flex-cloumn">
-		<hr />
-		<span class="heading">Details für {{ props.plan.name }}:</span>
-		<ul>
-			<li>{{ targetString }}</li>
-			<li>{{ limitString }}</li>
-			<li>{{ repeatString }}</li>
-		</ul>
-		<button class="btn btn-outline-secondary btn-sm" @click="$emit('close')">
-			Ok
-		</button>
-	</div>
-</template>
-<script setup lang="ts">
-import { computed } from 'vue'
-import { type ChargeTimePlan } from '../model'
-import { formatWattH } from '@/assets/js/helpers'
-const props = defineProps<{
-	plan: ChargeTimePlan
-}>()
-defineEmits(['close'])
-const targetString = computed(() => {
-	return `Lade von ${props.plan.time[0]} bis ${props.plan.time[1]} mit ${props.plan.current}A`
-})
-const limitString = computed(() => {
-	if (props.plan.limit.selected == 'soc') {
-		return `Lade bis maximal ${props.plan.limit.soc}%`
-	} else if (props.plan.limit.selected == 'amount') {
-		return `Lade maximal ${formatWattH(props.plan.limit.amount)}`
-	} else {
-		return 'Keine Begrenzung'
-	}
-})
-const repeatString = computed(() => {
-	let result = `Wiederholung `
-
-	switch (props.plan.frequency.selected) {
-		case 'daily':
-			result += 'täglich'
-			break
-		case 'once':
-			result += `einmal (${props.plan.frequency.once})`
-			break
-		case 'weekly':
-			result += 'wöchentlich ' + weekDayString.value
-			break
-		default:
-			result += 'unbekannt'
-	}
-	return result
-})
-const weekDayString = computed(() => {
-	const days = [
-		'Montag',
-		'Dienstag',
-		'Mittwoch',
-		'Donnerstag',
-		'Freitag',
-		'Samstag',
-		'Sonntag',
-	]
-	let result = '('
-	props.plan.frequency.weekly.forEach((day, index) => {
-		if (day) {
-			result += `${days[index]} `
-		}
-	})
-	result = result.trim()
-	result += ')'
-	return result
-})
-</script>
-<style scoped>
-.heading {
-	font-size: var(--font-settings);
-	color: var(--color-charging);
-	font-weight: bold;
-	margin-bottom: 0.5rem;
-}
-.plandetails {
-	display: flex;
-	flex-direction: column;
-}
-</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts b/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts
index a1764ad388..b89270f3aa 100755
--- a/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts
+++ b/packages/modules/web_themes/colors/source/src/components/chargePointList/model.ts
@@ -484,19 +484,19 @@ export interface ChargeTimePlan {
 	id: number
 	name: string
 	active: boolean
-	time: string[]
+	time: [string, string]
 	current: number
 	dc_current: number
 	phases_to_use: number
 	limit: {
-		selected: string
-		amount: number
-		soc: number
+		selected: 'none' | 'soc' | 'amount'
+		amount?: number
+		soc?: number
 	}
 	frequency: {
-		once: string[]
-		selected: string
-		weekly: boolean[]
+		selected: 'daily' | 'weekly' | 'once'
+		once?: [string, string]
+		weekly: [boolean, boolean, boolean, boolean, boolean, boolean, boolean]
 	}
 }
 export interface ChargeSchedule {
@@ -509,16 +509,18 @@ export interface ChargeSchedule {
 	phases_to_use: number
 	phases_to_use_pv: number
 	et_active: boolean
+	bidi_charging_enabled: boolean
+	bidi_power: number
 	limit: {
-		selected: string
-		amount: number
-		soc_limit: number
+		selected: 'soc' | 'amount'
+		amount?: number
+		soc_limit?: number
 		soc_scheduled: number
 	}
 	frequency: {
-		once: string
-		selected: string
-		weekly: boolean[]
+		once?: string
+		selected: 'weekly' | 'daily' | 'once'
+		weekly: [boolean, boolean, boolean, boolean, boolean, boolean, boolean]
 	}
 }
 export interface ChargeTemplate {
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/CheckBoxInput.vue b/packages/modules/web_themes/colors/source/src/components/shared/CheckBoxInput.vue
index 18596c9cf7..dc6cebb052 100755
--- a/packages/modules/web_themes/colors/source/src/components/shared/CheckBoxInput.vue
+++ b/packages/modules/web_themes/colors/source/src/components/shared/CheckBoxInput.vue
@@ -1,18 +1,20 @@
 <template>
-	<div v-for="(element, index) in options" :key="index">
-		<input
-			:id="'check' + index"
-			v-model="v[index]"
-			class="form-check-input"
-			type="checkbox"
-			:value="element"
-		/>
-		<label
-			class="form-check-label px-2"
-			:for="'check' + index"
-			:style="optionColor(index)"
-			>{{ options[index] }}</label
-		>
+	<div class="d-flex">
+		<div v-for="(element, index) in options" :key="index">
+			<input
+				:id="'check' + index"
+				v-model="v[index]"
+				class="form-check-input"
+				type="checkbox"
+				:value="element"
+			/>
+			<label
+				class="form-check-label px-2"
+				:for="'check' + index"
+				:style="optionColor(index)"
+				>{{ options[index] }}</label
+			>
+		</div>
 	</div>
 </template>
 
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
new file mode 100644
index 0000000000..b52ae89e1a
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/shared/ConfigItem2.vue
@@ -0,0 +1,121 @@
+<template>
+	<WbSubwidget :fullwidth="fullwidth ? true : false">
+		<div class="configitem grid-col-12 mt-0 mb-0 px-0 py-0">
+			<div
+				class="titlerow m-0 p-0 subgrid justify-content-between align-items-center"
+			>
+				<span
+					class="lefttitle d-flex justify-content-start align-items-baseline"
+				>
+					<span class="d-flex align-items-baseline m-0 p-0" @click="toggleInfo">
+						<i
+							v-if="props.icon"
+							class="fa-solid fa-sm m-0 p-0 me-2 item-icon"
+							:class="props.icon"
+						/>
+						{{ 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"
+							:style="iconstyle"
+							@click="toggleInfo"
+						/>
+					</span>
+
+					<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"
+				@click="toggleInfo"
+			>
+				<i class="me-1 fa-solid fa-sm fa-circle-info" />
+				{{ infotext }}
+			</p>
+			<div
+				class="contentrow ms-1 mb-2 p-0 pt-2 d-flex justify-content-stretch align-items-center"
+			>
+				<slot />
+			</div>
+		</div>
+	</WbSubwidget>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import WbSubwidget from './WbSubwidget.vue'
+
+const props = defineProps<{
+	title: string
+	infotext?: string
+	icon?: string
+	fullwidth?: boolean
+}>()
+const showInfo = ref(false)
+function toggleInfo() {
+	showInfo.value = !showInfo.value
+}
+const iconstyle = computed(() => {
+	let style = { color: 'var(--color-charging)' }
+	if (showInfo.value) {
+		style.color = 'var(--color-battery)'
+	}
+	return style
+})
+</script>
+
+<style scoped>
+.configitem {
+	font-size: var(--font-settings);
+	display: grid;
+	grid-column: 1 / 13;
+	grid-template-columns: subgrid;
+	height: 100%;
+	width: 100%;
+}
+
+.titlerow {
+	display: grid;
+	grid-column: 1 / 13;
+	grid-template-columns: subgrid;
+	color: var(--color-fg);
+	font-size: var(--font-settings);
+}
+.lefttitle {
+	display: grid;
+	grid-column: 1 / 7;
+}
+.righttitle {
+	display: grid;
+	grid-column: 7 / 13;
+	justify-content: stretch;
+}
+.inlinecontent {
+	display: grid;
+	width: 100%;
+}
+.contentrow {
+	display: grid;
+	grid-column: 1 / 13;
+	grid-template-columns: subgrid;
+	height: 100%;
+	width: 100%;
+}
+.infotext {
+	font-size: var(--font-settings);
+	color: var(--color-battery);
+}
+
+.item-icon {
+	color: var(--color-menu);
+	font-size: var(--font-settings);
+}
+.selectors {
+	font-size: var(--font-settings);
+}
+</style>
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/DateInput2.vue b/packages/modules/web_themes/colors/source/src/components/shared/DateInput2.vue
new file mode 100644
index 0000000000..a1f462b357
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/shared/DateInput2.vue
@@ -0,0 +1,95 @@
+<template>
+	<span class="p-1 m-1">
+		<div class="input-group">
+			<input
+				:id="inputId"
+				class="form-control"
+				type="date"
+				pattern="\d{2}.\d{2}.\d{4}"
+				placeholder="DD.MM.YYYY"
+			/>
+		</div>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+const props = defineProps({
+	inputId: {
+		type: String,
+		required: true,
+	},
+	modelValue: {
+		type: Date,
+		required: true,
+	},
+})
+
+var dateInput = document.getElementById('inputDate') as HTMLInputElement
+const emit = defineEmits(['update:modelValue'])
+
+function updateDate(d: Date) {
+	emit('update:modelValue', d)
+}
+
+onMounted(() => {
+	dateInput = document.getElementById(props.inputId) as HTMLInputElement
+	dateInput.value = props.modelValue.toISOString().substring(0, 10)
+	dateInput.addEventListener('change', handleChangeEvent)
+})
+
+function handleChangeEvent(event: Event) {
+	const target = event.target as HTMLInputElement
+	const dateParts = target.value.split('-')
+	const year = parseInt(dateParts[0])
+	const month = parseInt(dateParts[1]) - 1
+	const day = parseInt(dateParts[2])
+	updateDate(new Date(year, month, day))
+}
+</script>
+
+<style scoped>
+.form-select {
+	background-color: var(--color-input);
+	border: 1;
+	border-color: var(--color-bg);
+	color: var(--color-bg);
+	text-align: start;
+	font-size: var(--font-small);
+}
+
+.commitbutton {
+	background-color: var(--color-bg);
+	color: var(--color-input);
+}
+
+option {
+	color: green;
+}
+
+.form-select {
+	font-size: var(--font-verysmall);
+
+	background-color: var(--color-menu);
+	color: var(--color-fg);
+}
+.optiontable {
+	background-color: var(--color-menu);
+}
+.optionbutton {
+	font-size: var(--font-small);
+	color: white;
+	background-color: var(--color-menu);
+	font-size: var(--font-verysmall);
+	text-align: center;
+}
+.dropdown-menu {
+	background-color: var(--color-menu);
+}
+.dropdown-toggle {
+	background-color: var(--color-menu);
+	color: white;
+	border: 1px solid var(--color-bg);
+	font-size: var(--font-verysmall);
+}
+</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 904316519c..7486171b44 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,43 +1,43 @@
 <template>
-	<div :id="props.modalId" class="modal fade">
-		<div class="modal-dialog modal-lg modal-fullscreen-lg-down">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h3 class="modal-title">
-						<slot name="title" />
-					</h3>
-					<button
-						type="button"
-						class="btn-close buttonTextSize d-flex justify-content-center pt-3 pb-0"
-						data-bs-dismiss="modal"
-					>
-						<i class="fa-solid fa-lg fa-rectangle-xmark m-0 p-0" />
-					</button>
-				</div>
-				<div class="modal-body" style="background-color: var(--color-bg)">
-					<slot />
-					<button
-						class="btn btn-secondary float-end mt-3 ms-1"
-						data-bs-dismiss="modal"
-					>
-						Schließen
-					</button>
+	<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 class="modal-content">
+					<div class="modal-header">
+						<h3 class="modal-title">
+							<slot name="title" />
+						</h3>
+						<button
+							type="button"
+							class="btn-close buttonTextSize d-flex justify-content-center pt-3 pb-0"
+							data-bs-dismiss="modal"
+						></button>
+					</div>
+					<div class="modal-body">
+						<slot />
+					</div>
+					<div class="modal-footer d-flex justify-content-center">
+						<slot name="footer"></slot>
+						<button
+							class="close-button-bottom btn btn-secondary"
+							data-bs-dismiss="modal"
+						>
+							Schließen
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	</Teleport>
 </template>
+
 <script setup lang="ts">
 import { onMounted } from 'vue'
-// import { Modal } from 'bootstrap'
 
 const props = defineProps<{
 	modalId: string
 }>()
-// state
-//let mod: Modal
 
-// lifecycle
 onMounted(() => {
 	/* let target = document.getElementById(props.modalId)
 	if (target) {
@@ -47,46 +47,31 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.modal {
+	opacity: 0.9;
+}
+.modal-dialog {
+	border-radius: 2px;
+	box-shadow: 2px 2px 5px 3px darkslategray;
+}
+
 .modal-footer,
 .modal-header,
 .modal-body {
-	background: var(--color-bg);
+	background: var(--color-config);
+	color: var(--color-fg);
 }
 .btn-close {
-	color: var(--color-fg);
+	color: var(--color-input);
 }
 .modal-footer {
 	text-align: right;
 }
 .modal-header .btn-close {
 	color: var(--color-fg);
-	background: var(--color-bg);
 	border: 0px;
 }
 
-/*.modal.fade .modal-dialog {
-    -webkit-transform: scale(0.1);
-    -moz-transform: scale(0.1);
-    -ms-transform: scale(0.1);
-    transform: scale(0.1);
-     top: 300px;
-    opacity: 0;
-    -webkit-transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    transition: all 0.3s;
- }*/
-
-/*.modal.fade.in .modal-dialog {
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-     -webkit-transform: translate3d(0, -300px, 0);
-    transform: translate3d(0, -300px, 0);
-    opacity: 1;
- 
- }*/
-
 .modal.fade .modal-dialog {
 	transition: transform 1s ease-out;
 	transform: none;
@@ -97,4 +82,8 @@ onMounted(() => {
 	transform: none;
 	scale: 1;
 }
+
+.close-button-bottom {
+	font-size: var(--font-settings);
+}
 </style>
diff --git a/packages/modules/web_themes/colors/source/src/components/shared/TextInput.vue b/packages/modules/web_themes/colors/source/src/components/shared/TextInput.vue
new file mode 100644
index 0000000000..d603a46866
--- /dev/null
+++ b/packages/modules/web_themes/colors/source/src/components/shared/TextInput.vue
@@ -0,0 +1,30 @@
+<template>
+	<div class="form-group">
+		<input id="name" v-model="v" type="text" class="form-control" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+const props = defineProps<{
+	modelValue: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+const v = computed({
+	get() {
+		return props.modelValue
+	},
+	set(value: number | string) {
+		emit('update:modelValue', value)
+	},
+})
+</script>
+
+<style scoped>
+.form-select {
+	background-color: var(--color-input);
+	color: black;
+	border: 1px solid var(--color-bg);
+	font-size: var(--font-settings);
+}
+</style>