diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue
index 25341a1365..3b0cba97ee 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanButton.vue
@@ -6,69 +6,17 @@
     :color="planActive.value ? 'positive' : 'negative'"
     @click="$emit('editPlan', plan)"
   >
-    <div class="column">
-      <div class="plan-name">{{ plan.name }}</div>
-      <div class="plan-details">
-        <div>
-          <q-icon
-            :name="
-              plan.frequency.selected === 'once'
-                ? 'today'
-                : plan.frequency.selected === 'daily'
-                  ? 'date_range'
-                  : 'calendar_month'
-            "
-            size="sm"
-            :title="
-              plan.frequency.selected === 'once'
-                ? 'Einmalig'
-                : plan.frequency.selected === 'daily'
-                  ? 'Täglich'
-                  : 'Wöchentlich'
-            "
-          />
-          <div v-if="plan.frequency.selected === 'once'">
-            {{ formattedDate }}
-          </div>
-          <div v-if="plan.frequency.selected === 'weekly'">
-            {{ selectedWeekDays }}
-          </div>
-          <div v-if="plan.frequency.selected === 'daily'">täglich</div>
-        </div>
-        <div>
-          <q-icon name="schedule" size="sm" />
-          <div>{{ plan.time }}</div>
-        </div>
-        <div>
-          <q-icon
-            :name="plan.limit.selected === 'soc' ? 'battery_full' : 'bolt'"
-            size="sm"
-          />
-          <div v-if="plan.limit.selected === 'soc'">
-            {{ plan.limit.soc_scheduled }}%
-            <q-icon
-              :name="
-                plan.bidi_charging_enabled ? 'sync_alt' : 'arrow_right_alt'
-              "
-              size="sm"
-            />
-            {{ plan.limit.soc_limit }}%
-          </div>
-          <div v-if="plan.limit.selected === 'amount'">
-            {{ plan.limit.amount ? plan.limit.amount / 1000 : '' }}kWh
-          </div>
-        </div>
-        <div>
-          <q-icon v-if="planEtActive.value" name="bar_chart" size="sm" />
-        </div>
-      </div>
-    </div>
+    <ChargePointScheduledPlanSummary
+      :charge-point-id="props.chargePointId"
+      :plan="props.plan"
+    />
   </q-btn>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import ChargePointScheduledPlanSummary from './ChargePointScheduledPlanSummary.vue';
 import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
 
 const props = defineProps<{
@@ -78,84 +26,10 @@ const props = defineProps<{
 
 const mqttStore = useMqttStore();
 
-const weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
-
 const planActive = computed(() =>
   mqttStore.vehicleScheduledChargingPlanActive(
     props.chargePointId,
     props.plan.id,
   ),
 );
-
-const planEtActive = computed(() =>
-  mqttStore.vehicleScheduledChargingPlanEtActive(
-    props.chargePointId,
-    props.plan.id,
-  ),
-);
-
-const selectedWeekDays = computed(() => {
-  let planDays: string[] = [];
-  let rangeStart: number | null = null;
-
-  props.plan.frequency.weekly.forEach((dayValue, index) => {
-    if (dayValue) {
-      if (rangeStart === null) {
-        rangeStart = index;
-      }
-    } else {
-      if (rangeStart !== null) {
-        if (rangeStart === index - 1) {
-          planDays.push(weekdays[rangeStart]);
-        } else {
-          planDays.push(`${weekdays[rangeStart]}-${weekdays[index - 1]}`);
-        }
-        rangeStart = null;
-      }
-    }
-  });
-
-  // Handle the case where the last day(s) of the week are true
-  if (rangeStart !== null) {
-    if (rangeStart === props.plan.frequency.weekly.length - 1) {
-      planDays.push(weekdays[rangeStart]);
-    } else {
-      planDays.push(
-        `${weekdays[rangeStart]}-${weekdays[props.plan.frequency.weekly.length - 1]}`,
-      );
-    }
-  }
-
-  return planDays.join(', ');
-});
-
-const formattedDate = computed(() => {
-  if (props.plan.frequency.once === undefined) return '-';
-  const date = new Date(props.plan.frequency.once);
-  return date.toLocaleDateString(undefined, {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  });
-});
 </script>
-
-<style scoped lang="scss">
-.plan-name {
-  font-weight: bold;
-}
-
-.plan-details {
-  display: flex;
-  justify-content: center;
-}
-
-.plan-details > div {
-  display: flex;
-  align-items: center;
-}
-
-.plan-details > div:not(:last-child) {
-  margin-right: #{map-get($space-sm, x)};
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
index 448b2c27b8..36c6671c0d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -76,11 +76,11 @@
           <q-input
             v-else
             class="q-mr-lg col"
-            :model-value="
-              planFrequency.value === 'daily' ? today : firstSelectedWeekday
-            "
+            :model-value="undefined"
+            type="date"
             label="Ziel-Datum"
             readonly
+            disable
           />
           <q-input
             v-model="planTime.value"
@@ -89,6 +89,17 @@
             class="col"
           />
         </div>
+        <div
+          class="row q-mt-sm q-pa-sm text-white no-wrap items-center bg-primary"
+          style="border-radius: 10px"
+        >
+          <q-icon name="info" size="sm" class="q-mr-xs" />
+          <ChargePointScheduledPlanSummary
+            :charge-point-id="props.chargePointId"
+            :plan="props.plan"
+            mode="info"
+          />
+        </div>
       </div>
       <q-separator />
       <SliderStandard
@@ -238,6 +249,7 @@ import { useQuasar } from 'quasar';
 import SliderStandard from './SliderStandard.vue';
 import ToggleStandard from './ToggleStandard.vue';
 import { computed } from 'vue';
+import ChargePointScheduledPlanSummary from './ChargePointScheduledPlanSummary.vue';
 import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
 
 const props = defineProps<{
@@ -249,12 +261,6 @@ const emit = defineEmits(['close']);
 const mqttStore = useMqttStore();
 const $q = useQuasar();
 
-const formatDateDayMonthYear = (dateString: string): string => {
-  if (!dateString) return '';
-  const [year, month, day] = dateString.split('-');
-  return `${day}.${month}.${year}`;
-};
-const today = formatDateDayMonthYear(new Date().toISOString().split('T')[0]);
 const weekDays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
 
 const selectDay = (index: number) => {
@@ -263,27 +269,6 @@ const selectDay = (index: number) => {
   selectedWeekDays.value = newArray;
 };
 
-const firstSelectedWeekday = computed(() => {
-  const today = new Date();
-  // 0=Sonntag, ..., 6=Samstag >> 0=Montag, ..., 6=Sonntag
-  const todayIndex = (today.getDay() + 6) % 7;
-  const userSelection = selectedWeekDays.value
-    .map((isSelected, index) => (isSelected ? index : -1))
-    .filter((index) => index !== -1);
-  if (userSelection.length === 0) return '';
-  // For all selected days, calculate the distance to today
-  const daysUntilSelected = userSelection.map((idx) => {
-    let daysUntil = idx - todayIndex;
-    if (daysUntil < 0) daysUntil += 7;
-    return daysUntil;
-  });
-  // Take the smallest distance (this is the next day)
-  const nearestDay = Math.min(...daysUntilSelected);
-  const dateNextDay = new Date(today);
-  dateNextDay.setDate(today.getDate() + nearestDay);
-  return formatDateDayMonthYear(dateNextDay.toISOString().split('T')[0]);
-});
-
 const phaseOptions = [
   { value: 1, label: '1' },
   { value: 3, label: 'Maximum' },
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanSummary.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanSummary.vue
new file mode 100644
index 0000000000..b3eafb6bc4
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledPlanSummary.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="column">
+    <div class="plan-name">
+      {{ mode === 'button' ? plan.name : 'Nächster geplanter Termin:' }}
+    </div>
+    <div class="plan-details">
+      <div>
+        <q-icon
+          :name="
+            plan.frequency.selected === 'once'
+              ? 'today'
+              : plan.frequency.selected === 'daily'
+                ? 'date_range'
+                : 'calendar_month'
+          "
+          size="sm"
+          :title="
+            plan.frequency.selected === 'once'
+              ? 'Einmalig'
+              : plan.frequency.selected === 'daily'
+                ? 'Täglich'
+                : 'Wöchentlich'
+          "
+        />
+        <div>{{ dateLabel }}</div>
+      </div>
+      <div>
+        <q-icon name="schedule" size="sm" />
+        <div>{{ plan.time }}</div>
+      </div>
+      <div>
+        <q-icon
+          :name="plan.limit.selected === 'soc' ? 'battery_full' : 'bolt'"
+          size="sm"
+        />
+        <div v-if="plan.limit.selected === 'soc'">
+          {{ plan.limit.soc_scheduled }}%
+          <q-icon
+            :name="plan.bidi_charging_enabled ? 'sync_alt' : 'arrow_right_alt'"
+            size="sm"
+          />
+          {{ plan.limit.soc_limit }}%
+        </div>
+        <div v-if="plan.limit.selected === 'amount'">
+          {{ plan.limit.amount ? plan.limit.amount / 1000 : '' }}kWh
+        </div>
+      </div>
+      <div>
+        <q-icon v-if="planEtActive.value" name="bar_chart" size="sm" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { type ScheduledChargingPlan } from '../stores/mqtt-store-model';
+
+const props = withDefaults(
+  defineProps<{
+    chargePointId: number;
+    plan: ScheduledChargingPlan;
+    mode?: 'button' | 'info';
+  }>(),
+  {
+    mode: 'button',
+  },
+);
+
+const mqttStore = useMqttStore();
+
+const weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+const formatDateDayMonthYear = (dateString: string): string => {
+  if (!dateString) return '';
+  const [year, month, day] = dateString.split('-');
+  return `${day}.${month}.${year}`;
+};
+const today = formatDateDayMonthYear(new Date().toISOString().split('T')[0]);
+
+const selectedWeekDays = computed<boolean[]>(() => {
+  return (
+    mqttStore.vehicleScheduledChargingPlanWeeklyDays(
+      props.chargePointId,
+      props.plan.id,
+    ).value ?? Array(7).fill(false)
+  );
+});
+// String label for button mode ("Mo-Fr, So")
+const selectedWeekDaysLabels = computed(() => {
+  const selected = selectedWeekDays.value;
+  const planDays: string[] = [];
+  let rangeStart: number | null = null;
+  selected.forEach((isSelected, index) => {
+    if (isSelected) {
+      if (rangeStart === null) {
+        rangeStart = index;
+      }
+    } else if (rangeStart !== null) {
+      if (rangeStart === index - 1) {
+        planDays.push(weekdays[rangeStart]);
+      } else {
+        planDays.push(`${weekdays[rangeStart]}-${weekdays[index - 1]}`);
+      }
+      rangeStart = null;
+    }
+  });
+  if (rangeStart !== null) {
+    const lastIndex = selected.length - 1;
+    if (rangeStart === lastIndex) {
+      planDays.push(weekdays[rangeStart]);
+    } else {
+      planDays.push(`${weekdays[rangeStart]}-${weekdays[lastIndex]}`);
+    }
+  }
+  return planDays.join(', ');
+});
+
+const firstSelectedWeekday = computed(() => {
+  const today = new Date();
+  // 0=Sonntag, ..., 6=Samstag >> 0=Montag, ..., 6=Sonntag
+  const todayIndex = (today.getDay() + 6) % 7;
+  const userSelection = selectedWeekDays.value
+    .map((isSelected, index) => (isSelected ? index : -1))
+    .filter((index) => index !== -1);
+  if (userSelection.length === 0) return '';
+  // For all selected days, calculate the distance to today
+  const daysUntilSelected = userSelection.map((idx) => {
+    let daysUntil = idx - todayIndex;
+    if (daysUntil < 0) daysUntil += 7;
+    return daysUntil;
+  });
+  // Take the smallest distance (this is the next day)
+  const nearestDay = Math.min(...daysUntilSelected);
+  const dateNextDay = new Date(today);
+  dateNextDay.setDate(today.getDate() + nearestDay);
+  return formatDateDayMonthYear(dateNextDay.toISOString().split('T')[0]);
+});
+
+const planOnceDate = computed(() => {
+  if (props.plan.frequency.once === undefined) return '-';
+  const date = new Date(props.plan.frequency.once);
+  return formatDateDayMonthYear(date.toISOString().split('T')[0]);
+});
+
+const dateLabel = computed(() => {
+  const freq = props.plan.frequency.selected;
+  if (freq === 'once') {
+    return planOnceDate.value;
+  }
+  if (freq === 'daily') {
+    return props.mode === 'button' ? 'täglich' : today;
+  }
+  if (freq === 'weekly') {
+    return props.mode === 'button'
+      ? selectedWeekDaysLabels.value
+      : firstSelectedWeekday.value;
+  }
+  return '';
+});
+
+const planEtActive = computed(() =>
+  mqttStore.vehicleScheduledChargingPlanEtActive(
+    props.chargePointId,
+    props.plan.id,
+  ),
+);
+</script>
+
+<style scoped lang="scss">
+.plan-name {
+  font-weight: bold;
+}
+
+.plan-details {
+  display: flex;
+  justify-content: center;
+}
+
+.plan-details > div {
+  display: flex;
+  align-items: center;
+}
+
+.plan-details > div:not(:last-child) {
+  margin-right: #{map-get($space-sm, x)};
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue
index 627ed96a3e..8db8eb514a 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointScheduledSettings.vue
@@ -19,7 +19,7 @@
     Keine Ladeziele festgelegt.
   </div>
   <div v-else>
-    <div v-for="(plan, index) in plans" :key="index" class="row q-mt-sm">
+    <div v-for="plan in plans" :key="plan.id" class="row q-mt-sm">
       <ChargePointScheduledPlanButton
         class="full-width"
         :charge-point-id="props.chargePointId"
@@ -43,33 +43,39 @@
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import ChargePointScheduledPlanButton from './ChargePointScheduledPlanButton.vue';
 import ChargePointScheduledPlanDetails from './ChargePointScheduledPlanDetails.vue';
-import { computed, ref } from 'vue';
 import { Screen } from 'quasar';
 
 const props = defineProps<{
   chargePointId: number;
 }>();
 
-const isSmallScreen = computed(() => Screen.lt.sm);
-
-const currentPlanDetailsVisible = ref<boolean>(false);
-const selectedPlan = ref(null);
-
 const mqttStore = useMqttStore();
 
+const isSmallScreen = computed(() => Screen.lt.sm);
+
 const plans = computed(() =>
-  mqttStore.vehicleScheduledChargingPlans(props.chargePointId),
+  mqttStore.vehicleScheduledChargingPlans(props.chargePointId)
 );
 
-const addScheduledChargingPlan = () => {
-  mqttStore.addScheduledChargingPlanForChargePoint(props.chargePointId);
-};
+const selectedPlanId = ref<number | null>(null);
+
+const selectedPlan = computed(() => {
+  if (selectedPlanId.value === null) return null;
+  return plans.value.find(p => p.id === selectedPlanId.value);
+});
+
+const currentPlanDetailsVisible = ref(false);
 
 const openPlanDialog = (plan) => {
-  selectedPlan.value = plan;
+  selectedPlanId.value = plan.id;
   currentPlanDetailsVisible.value = true;
 };
+
+const addScheduledChargingPlan = () => {
+  mqttStore.addScheduledChargingPlanForChargePoint(props.chargePointId);
+};
 </script>