diff --git a/packages/modules/web_themes/standard/source/package-lock.json b/packages/modules/web_themes/standard/source/package-lock.json
index 22d9c80ae2..7cd2058f6c 100644
--- a/packages/modules/web_themes/standard/source/package-lock.json
+++ b/packages/modules/web_themes/standard/source/package-lock.json
@@ -9,11 +9,16 @@
       "version": "0.0.1",
       "dependencies": {
         "@quasar/extras": "^1.16.12",
+        "chart.js": "^3.9.1",
+        "chartjs-adapter-luxon": "^1.3.1",
+        "chartjs-plugin-zoom": "^2.2.0",
+        "luxon": "^3.5.0",
         "mqtt": "^5.10.1",
         "pinia": "^2.2.4",
         "quasar": "^2.17.0",
         "register-service-worker": "^1.7.2",
         "vue": "^3.5.11",
+        "vue-chart-3": "^3.1.8",
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
@@ -3328,6 +3333,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="
+    },
     "node_modules/@types/har-format": {
       "version": "1.2.16",
       "resolved": "https://registry.npmjs.org/@types/har-format/-/har-format-1.2.16.tgz",
@@ -4687,6 +4697,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w=="
+    },
+    "node_modules/chartjs-adapter-luxon": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-luxon/-/chartjs-adapter-luxon-1.3.1.tgz",
+      "integrity": "sha512-yxHov3X8y+reIibl1o+j18xzrcdddCLqsXhriV2+aQ4hCR66IYFchlRXUvrJVoxglJ380pgytU7YWtoqdIgqhg==",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0",
+        "luxon": ">=1.0.0"
+      }
+    },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz",
+      "integrity": "sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.45",
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -5059,11 +5095,10 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -5124,11 +5159,10 @@
       }
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -6008,18 +6042,17 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "version": "4.21.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
+      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -6033,7 +6066,7 @@
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.12",
         "proxy-addr": "~2.0.7",
         "qs": "6.13.0",
         "range-parser": "~1.2.1",
@@ -6048,6 +6081,10 @@
       },
       "engines": {
         "node": ">= 0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/express/node_modules/debug": {
@@ -6652,6 +6689,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -7693,6 +7738,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -7757,6 +7807,14 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "license": "ISC"
     },
+    "node_modules/luxon": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -7977,16 +8035,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "funding": [
         {
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "license": "MIT",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -8455,11 +8512,10 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
-      "dev": true,
-      "license": "MIT"
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
+      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
+      "dev": true
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -11652,6 +11708,21 @@
         }
       }
     },
+    "node_modules/vue-chart-3": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz",
+      "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==",
+      "dependencies": {
+        "@vue/runtime-core": "latest",
+        "@vue/runtime-dom": "latest",
+        "csstype": "latest",
+        "lodash-es": "latest"
+      },
+      "peerDependencies": {
+        "chart.js": "=> ^3.1.0",
+        "vue": ">= 3"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/packages/modules/web_themes/standard/source/package.json b/packages/modules/web_themes/standard/source/package.json
index 322bc5e0e3..a6173cf709 100644
--- a/packages/modules/web_themes/standard/source/package.json
+++ b/packages/modules/web_themes/standard/source/package.json
@@ -15,11 +15,16 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.12",
+    "chart.js": "^3.9.1",
+    "chartjs-adapter-luxon": "^1.3.1",
+    "chartjs-plugin-zoom": "^2.2.0",
+    "luxon": "^3.5.0",
     "mqtt": "^5.10.1",
     "pinia": "^2.2.4",
     "quasar": "^2.17.0",
     "register-service-worker": "^1.7.2",
     "vue": "^3.5.11",
+    "vue-chart-3": "^3.1.8",
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
diff --git a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
index e0afe64d93..4124923c7f 100644
--- a/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/BaseCarousel.vue
@@ -5,6 +5,7 @@
     :animated="animated"
     control-color="primary"
     infinite
+    @update:model-value="handleSlideChange"
     padding
     :navigation="groupedItems.length > 1"
     :arrows="groupedItems.length > 1 && $q.screen.gt.xs"
@@ -19,7 +20,12 @@
       :name="index"
       class="row no-wrap justify-center carousel-slide"
     >
-      <div v-for="item in group" :key="item" class="item-container">
+      <div
+        v-for="item in group"
+        :key="item"
+        class="item-container"
+        :style="`min-height: ${maxCardHeight}px`"
+      >
         <slot name="item" :item="item"></slot>
       </div>
     </q-carousel-slide>
@@ -27,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick, onMounted } from 'vue';
 import { useQuasar } from 'quasar';
 
 const props = defineProps<{
@@ -78,6 +84,56 @@ watch(
     animated.value = true;
   },
 );
+
+const handleSlideChange = () => {
+  const currentScroll = window.scrollY;
+  nextTick(() => {
+    updateMaxCardHeight();
+    observeCardChanges();
+    window.scrollTo(0, currentScroll);
+  });
+};
+
+const maxCardHeight = ref<number>(0);
+
+const updateMaxCardHeight = () => {
+  const cards = document.querySelectorAll('.q-card');
+  const heights = Array.from(cards).map(
+    (card) => (card as HTMLElement).offsetHeight,
+  );
+  maxCardHeight.value = Math.max(...heights);
+};
+
+const observeCardChanges = () => {
+  const observer = new MutationObserver(() => {
+    updateMaxCardHeight();
+  });
+  const cards = document.querySelectorAll('.q-card');
+  cards.forEach((card) => {
+    observer.observe(card, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    });
+  });
+};
+
+onMounted(() => {
+  nextTick(() => {
+    updateMaxCardHeight();
+    observeCardChanges();
+  });
+});
+
+watch(
+  () => props.items,
+  () => {
+    nextTick(() => {
+      updateMaxCardHeight();
+      observeCardChanges();
+    });
+  },
+);
 </script>
 
 <style scoped>
@@ -89,5 +145,6 @@ watch(
 }
 .carousel-height {
   min-height: fit-content;
+  height: 100%;
 }
 </style>
diff --git a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
index ac2b42f634..f67f219c87 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChargePointScheduledPlanDetails.vue
@@ -40,7 +40,7 @@
       </q-btn-group>
       <div v-if="planLimitSelected.value === 'soc'" class="q-mt-md">
         <SliderStandard
-          title="Fahrzeug-SoC zum Zielzeitpunkt"
+          title="EV-SoC"
           :min="5"
           :max="100"
           :step="5"
@@ -60,7 +60,7 @@
       <q-input
         v-if="planLimitSelected.value === 'amount'"
         v-model="planLimitAmount.value"
-        label="Ziel-Energy (kWh)"
+        label="Energiemenge (kWh)"
         class="col"
       />
       <div class="q-mb-md">
diff --git a/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue b/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue
index f755b71059..29c96027e1 100644
--- a/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue
+++ b/packages/modules/web_themes/standard/source/src/components/ChartCarousel.vue
@@ -9,18 +9,25 @@
     infinite
     :navigation="chartCarouselItems.length > 1"
     :arrows="chartCarouselItems.length > 1 && $q.screen.gt.xs"
-    class="full-width bg-transparent"
+    class="full-width full-height bg-transparent carousel-height"
   >
     <q-carousel-slide
       v-for="(chartComponent, index) in chartCarouselItems"
       :key="index"
       :name="chartComponent.name"
     >
-      <component :is="chartComponent.component" />
+      <component :is="chartComponent.component" :show-legend="legendVisible" />
     </q-carousel-slide>
 
     <template v-slot:control>
       <q-carousel-control position="bottom-right">
+        <q-btn
+          v-if="currentSlide === 'HistoryChart'"
+          size="sm"
+          class="q-mr-sm legend-button-text"
+          label="Legend ein/aus"
+          @click="toggleLegend"
+        />
         <q-btn
           push
           round
@@ -37,15 +44,20 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useQuasar } from 'quasar';
-
 import EnergyFlowChart from './charts/energyFlowChart/EnergyFlowChart.vue';
 import HistoryChart from './charts/HistoryChart.vue';
 
 defineOptions({
   name: 'ChartCarousel',
 });
-
 const $q = useQuasar();
+
+const legendVisible = ref(!$q.platform.is.mobile);
+
+const toggleLegend = () => {
+  legendVisible.value = !legendVisible.value;
+};
+
 const fullscreen = ref(false);
 const chartCarouselItems = [
   {
@@ -59,3 +71,13 @@ const chartCarouselItems = [
 ];
 const currentSlide = ref<string>(chartCarouselItems[0].name);
 </script>
+
+<style scoped>
+.carousel-height {
+  min-height: fit-content;
+}
+
+.legend-button-text {
+  color: var(--q-carousel-control);
+}
+</style>
diff --git a/packages/modules/web_themes/standard/source/src/components/SmartHomeInformation.vue b/packages/modules/web_themes/standard/source/src/components/SmartHomeInformation.vue
index 8e5c7733cd..7ca88d5a74 100644
--- a/packages/modules/web_themes/standard/source/src/components/SmartHomeInformation.vue
+++ b/packages/modules/web_themes/standard/source/src/components/SmartHomeInformation.vue
@@ -1,30 +1,6 @@
 <template>
   <div class="q-pa-md">
     <p>Smart Home</p>
-    <div class="q-mt-md">
-      <q-list bordered>
-        <q-item>
-          <q-item-section>
-            <q-item-label>Leistung</q-item-label>
-            <q-item-label caption>22.0 kW</q-item-label>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Geladen</q-item-label>
-            <q-item-label caption>7.2 kWh</q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item>
-          <q-item-section>
-            <q-item-label>Ladestand</q-item-label>
-            <q-item-label caption>30% (100 km)</q-item-label>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label>Ladeziel</q-item-label>
-            <q-item-label caption>90% (360 km)</q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </div>
   </div>
 </template>
 
diff --git a/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue b/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue
index 3a7547c432..dbcf5f459e 100644
--- a/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue
+++ b/packages/modules/web_themes/standard/source/src/components/charts/HistoryChart.vue
@@ -1,15 +1,246 @@
 <template>
-  <img
-    :src="image"
-    draggable="false"
-    style="width: 100%; height: 100%; object-fit: contain"
-  />
+  <div class="chart-container">
+    <LineChart
+      :chartData="lineChartData"
+      :options="chartOptions"
+      :class="'chart'"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
-defineOptions({
-  name: 'HistoryChart',
+import { computed } from 'vue';
+import { useQuasar } from 'quasar';
+import { LineChart } from 'vue-chart-3';
+import { Chart, registerables } from 'chart.js';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import 'chartjs-adapter-luxon';
+
+Chart.register(...registerables);
+const $q = useQuasar();
+
+const props = defineProps<{
+  showLegend: boolean;
+}>();
+
+const legendDisplay = computed(() => props.showLegend);
+
+const mqttStore = useMqttStore();
+
+const selectedData = computed(() => {
+  const data = mqttStore.chartData;
+  const currentTime = Math.floor(Date.now() / 1000);
+  return data.filter((item) => item.timestamp > currentTime - 3600);
+});
+
+const chargePointIds = computed(() => mqttStore.chargePointIds);
+const chargePointNames = computed(() => mqttStore.chargePointName);
+const vehicles = computed(() => mqttStore.vehicleList());
+
+const chargePointDatasets = computed(() =>
+  chargePointIds.value.map((cpId) => ({
+    label: `${chargePointNames.value(cpId)}`,
+    borderColor: '#4766b5',
+    backgroundColor: 'rgba(71, 102, 181, 0.2)',
+    data: selectedData.value.map((item) => item[`cp${cpId}-power`] as number),
+    borderWidth: 2,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointHitRadius: 5,
+    fill: true,
+    yAxisID: 'y',
+  })),
+);
+
+const vehicleDatasets = computed(() =>
+  vehicles.value
+    .map((vehicle) => {
+      const socKey = `ev${vehicle.id}-soc`;
+      if (selectedData.value.some((item) => socKey in item)) {
+        return {
+          label: `${vehicle.name} SoC`,
+          borderColor: '#9F8AFF',
+          borderWidth: 2,
+          borderDash: [10, 5],
+          pointRadius: 0,
+          pointHoverRadius: 4,
+          pointHitRadius: 5,
+          data: selectedData.value.map(
+            (item) => item[socKey as keyof typeof item] as number,
+          ),
+          fill: false,
+          yAxisID: 'y2',
+        };
+      }
+      return undefined;
+    })
+    .filter(
+      (dataset): dataset is NonNullable<typeof dataset> =>
+        dataset !== undefined,
+    ),
+);
+
+const lineChartData = computed(() => {
+  return {
+    labels: selectedData.value.map((item) => item.time),
+    datasets: [
+      {
+        label: 'Grid Power',
+        borderColor: '#a33c42',
+        backgroundColor: 'rgba(239,182,188, 0.2)',
+        data: selectedData.value.map((item) => item.grid),
+        borderWidth: 2,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointHitRadius: 5,
+        fill: true,
+        yAxisID: 'y',
+      },
+      {
+        label: 'House Power',
+        borderColor: '#949aa1',
+        backgroundColor: 'rgba(148, 154, 161, 0.2)',
+        data: selectedData.value.map((item) => item['house-power'] as number),
+        borderWidth: 2,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointHitRadius: 5,
+        fill: true,
+        yAxisID: 'y',
+      },
+      {
+        label: 'PV Power',
+        borderColor: 'green',
+        backgroundColor: 'rgba(144, 238, 144, 0.2)',
+        data: selectedData.value.map((item) => item['pv-all'] as number),
+        borderWidth: 2,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointHitRadius: 5,
+        fill: true,
+        yAxisID: 'y',
+      },
+      {
+        label: 'Speicher ges.',
+        borderColor: '#b5a647',
+        backgroundColor: 'rgba(181, 166, 71, 0.2)',
+        data: selectedData.value.map((item) => item['bat-all-power'] as number),
+        borderWidth: 2,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointHitRadius: 5,
+        fill: true,
+        yAxisID: 'y',
+      },
+      {
+        label: 'Speicher SoC',
+        borderColor: '#FFB96E',
+        borderWidth: 2,
+        borderDash: [10, 5],
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        pointHitRadius: 5,
+        data: selectedData.value.map((item) => item['bat-all-soc'] as number),
+        fill: false,
+        yAxisID: 'y2',
+      },
+      ...chargePointDatasets.value,
+      ...vehicleDatasets.value,
+    ],
+  };
 });
 
-const image = '/src/assets/Dia_2.png';
+const chartOptions = computed(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: legendDisplay.value,
+      position: 'bottom',
+      fullSize: true,
+      labels: {
+        boxWidth: 19,
+        boxHeight: 0.1,
+      },
+    },
+    // title: {
+    //   display: true,
+    //   text: 'Zeitliche Verlauf',
+    //   font: {
+    //     size: 16,
+    //   },
+    // },
+  },
+  scales: {
+    x: {
+      type: 'time',
+      time: {
+        unit: 'minute',
+        stepSize: 5,
+        displayFormats: {
+          minute: 'HH:mm',
+        },
+      },
+      ticks: {
+        maxTicksLimit: 12,
+        source: 'auto',
+      },
+      grid: {
+        tickLength: 5,
+        color: $q.dark.isActive
+          ? 'rgba(255, 255, 255, 0.1)'
+          : 'rgba(0, 0, 0, 0.1)',
+      },
+    },
+    y: {
+      position: 'left',
+      type: 'linear',
+      display: true,
+      title: {
+        display: true,
+        text: 'Leistung [kW]',
+      },
+      ticks: {
+        stepSize: 0.2,
+        maxTicksLimit: 11,
+      },
+      grid: {
+        color: $q.dark.isActive
+          ? 'rgba(255, 255, 255, 0.1)'
+          : 'rgba(0, 0, 0, 0.1)',
+      },
+    },
+    y2: {
+      position: 'right',
+      type: 'linear',
+      display: true,
+      title: {
+        display: true,
+        text: 'SoC [%]',
+      },
+      min: 0,
+      max: 100,
+      ticks: {
+        stepSize: 10,
+      },
+      grid: {
+        display: false,
+      },
+    },
+  },
+}));
 </script>
+
+<style scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.chart {
+  object-fit: contain;
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/packages/modules/web_themes/standard/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/standard/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
index 54d69ca291..6f6eaf3092 100644
--- a/packages/modules/web_themes/standard/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
+++ b/packages/modules/web_themes/standard/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue
@@ -681,6 +681,7 @@ const svgRectWidth = computed(
   align-items: center;
   width: 100%;
   height: 100%;
+  user-select: none;
 }
 
 /* ------ */
@@ -776,12 +777,18 @@ rect {
 }
 
 @keyframes dash {
+  from {
+    stroke-dashoffset: 20;
+  }
   to {
-    stroke-dashoffset: -20;
+    stroke-dashoffset: 0;
   }
 }
 
 @keyframes dashReverse {
+  from {
+    stroke-dashoffset: 0;
+  }
   to {
     stroke-dashoffset: 20;
   }
diff --git a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
index 7a6b44ff6f..7d105632ae 100644
--- a/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/standard/source/src/css/quasar.variables.scss
@@ -22,20 +22,20 @@
 // $warning: #F2C037;
 /////////////////////////////////////////////////////////////////////
 // Default Light Theme Base Colors
-$primary: #5C93D1;
-$secondary: #D2D2D7;
-$accent: #546E7A;
-$positive: #66BD7A;
-$negative: #DB4F5F;
-$info: #7DC5D4;
-$warning: #D98E44;
-$background-1: #E3E3EC;
-$background-2: #EEEEF3;
-$brown-text: #524F57;
-$white: #FFFFFF;
-$grey: #9E9E9E; // Quasar's default grey
-$toggle-off: #E0E0E0;
-$battery: #BA7128;
+$primary: #5c93d1;
+$secondary: #d2d2d7;
+$accent: #546e7a;
+$positive: #66bd7a;
+$negative: #db4f5f;
+$info: #7dc5d4;
+$warning: #d98e44;
+$background-1: #e3e3ec;
+$background-2: #eeeef3;
+$brown-text: #524f57;
+$white: #ffffff;
+$grey: #9e9e9e; // Quasar's default grey
+$toggle-off: #e0e0e0;
+$battery: #ba7128;
 // Light theme (default)
 :root {
   --q-primary: #{$primary};
@@ -50,6 +50,7 @@ $battery: #BA7128;
   --q-brown-text: #{$brown-text};
   --q-white: #{$white};
   --q-grey: #{$grey};
+  --q-carousel-control: #{$primary};
   --q-toggle-off: #{$toggle-off};
   --q-flow-home-stroke: #{$grey};
   --q-battery: #{$battery};
@@ -129,18 +130,18 @@ $battery: #BA7128;
 }
 // Dark Theme Base Colors
 $dark-page: #030627; // This overrides Quasar's default dark page color
-$dark-primary: #3874DB;
-$dark-secondary: #28293D;
-$dark-accent: #546E7A;
-$dark-positive: #3E8F5E;
-$dark-negative: #C54D57;
-$dark-info: #4B89AA;
-$dark-warning: #D98E44;
+$dark-primary: #3874db;
+$dark-secondary: #28293d;
+$dark-accent: #546e7a;
+$dark-positive: #3e8f5e;
+$dark-negative: #c54d57;
+$dark-info: #4b89aa;
+$dark-warning: #d98e44;
 $dark-background-1: #030627;
 $dark-background-2: #010322;
-$dark-list: #3C3E5C;
-$dark-carousel: #8B8F9F;
-$dark-tab-icon: #D7D9E0;
+$dark-list: #3c3e5c;
+$dark-carousel: #8b8f9f;
+$dark-tab-icon: #d7d9e0;
 // Dark theme
 .body--dark {
   --q-primary: #{$dark-primary};
diff --git a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
index 3668beefef..e1d8959325 100644
--- a/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
+++ b/packages/modules/web_themes/standard/source/src/layouts/MainLayout.vue
@@ -1,6 +1,6 @@
 <template>
   <q-layout view="lHh Lpr lFf" class="centered-container">
-    <q-header elevated>
+    <q-header elevated class="centered-container">
       <q-toolbar>
         <q-toolbar-title>openWB</q-toolbar-title>
         <q-btn
diff --git a/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue b/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue
index eaba26b7c6..71eedbc0a7 100644
--- a/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue
+++ b/packages/modules/web_themes/standard/source/src/pages/IndexPage.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page class="column">
     <!-- Top Carousel -->
-    <div class="row justify-center">
+    <div class="row justify-center full-width chart-section">
       <ChartCarousel />
     </div>
 
@@ -67,3 +67,9 @@ const mqttStore = useMqttStore();
 const chargePointIds = computed(() => mqttStore.chargePointIds);
 const batteryIds = computed(() => mqttStore.batteryIds);
 </script>
+
+<style scoped>
+.chart-section {
+  height: 40vh;
+}
+</style>
diff --git a/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts
index 05907f7672..a770f0eb79 100644
--- a/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/standard/source/src/stores/mqtt-store-model.ts
@@ -116,3 +116,16 @@ export interface ScheduledChargingPlan {
   };
   name: string;
 }
+
+export interface GraphDataPoint {
+  timestamp: number;
+  time: string;
+  grid: number;
+  'house-power': number;
+  'charging-all': number;
+  'pv-all': number;
+  'bat-all-power': number;
+  'bat-all-soc': number;
+  [key: `cp${number}-power`]: number;
+  [key: `ev${number}-soc`]: number | null;
+}
diff --git a/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
index 9ed2f076ad..6082b07515 100644
--- a/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/standard/source/src/stores/mqtt-store.ts
@@ -17,6 +17,7 @@ import type {
   Vehicle,
   ScheduledChargingPlan,
   ChargePointConnectedVehicleSoc,
+  GraphDataPoint,
 } from './mqtt-store-model';
 
 export const useMqttStore = defineStore('mqtt', () => {
@@ -2037,6 +2038,30 @@ export const useMqttStore = defineStore('mqtt', () => {
     };
   });
 
+  ////////////////// Chart //////////////////////////
+
+  /**
+   * Get live chart data
+   * @returns GraphDataPoint[]
+   */
+  const chartData = computed(() => {
+    const list = getWildcardValues.value('openWB/graph/+');
+    const result: GraphDataPoint[] = [];
+
+    Object.entries(list).forEach(([topic, data]) => {
+      if (topic.includes('alllivevaluesJson') && typeof data === 'string') {
+        const lines = data.split('\n');
+        lines.forEach((line) => {
+          if (line && line.startsWith('{') && line.endsWith('}')) {
+            const dataPoint = JSON.parse(line);
+            result.push(dataPoint);
+          }
+        });
+      }
+    });
+    return result.sort((a, b) => a.timestamp - b.timestamp);
+  });
+
   // exports
   return {
     topics,
@@ -2122,5 +2147,7 @@ export const useMqttStore = defineStore('mqtt', () => {
     // PV data
     getPvConfigured,
     getPvPower,
+    // Chart data
+    chartData,
   };
 });