diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 6cc3863c6a..21f956f89b 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -18,6 +18,7 @@ module.exports = {
 		"vue/attribute-hyphenation": "off",
 		"vue/multi-word-component-names": "off",
 		"vue/no-reserved-component-names": "off",
+		"vue/no-undef-properties": "warn",
 		"no-param-reassign": "error",
 	},
 };
diff --git a/assets/css/app.css b/assets/css/app.css
index b0ee0b5719..b332d05c09 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -23,9 +23,9 @@
 
 :root {
 	--evcc-green: #baffcb;
-	--evcc-dark-green: #0fde41;
-	--evcc-darker-green: #0ba631;
-	--evcc-darkest-green: #076f20;
+	--evcc-dark-green: #0fde41ff;
+	--evcc-darker-green: #0ba631ff;
+	--evcc-darkest-green: #076f20ff;
 	--evcc-darkest-green-rgb: 11, 166, 49;
 	--evcc-yellow: #faf000;
 	--evcc-dark-yellow: #bbb400;
@@ -90,7 +90,7 @@
 	--evcc-grid: var(--bs-gray-medium);
 	--evcc-background: var(--bs-gray-deep);
 	--evcc-box: var(--bs-gray-dark);
-	--evcc-box-border: var(--vs-gray-darker);
+	--evcc-box-border: var(--bs-gray-darker);
 	--evcc-default-text: var(--bs-white);
 	--evcc-gray: var(--bs-gray-light);
 	--evcc-accent1: var(--evcc-yellow);
@@ -195,6 +195,10 @@ a:hover {
 	color: inherit;
 }
 
+.evcc-background {
+	background-color: var(--evcc-background);
+}
+
 .btn-primary,
 .btn-primary:focus {
 	background-color: var(--bs-primary);
diff --git a/assets/js/colors.js b/assets/js/colors.js
new file mode 100644
index 0000000000..10bef91930
--- /dev/null
+++ b/assets/js/colors.js
@@ -0,0 +1,68 @@
+import { reactive } from "vue";
+
+// alternatives
+// const COLORS = [ "#40916C", "#52B788", "#74C69D", "#95D5B2", "#B7E4C7", "#D8F3DC", "#081C15", "#1B4332", "#2D6A4F"];
+// const COLORS = ["#577590", "#43AA8B", "#90BE6D", "#F9C74F", "#F8961E", "#F3722C", "#F94144"];
+// const COLORS = ["#0077b6", "#00b4d8", "#90e0ef", "#caf0f8", "#03045e"];
+// const COLORS = [ "#0077B6FF", "#0096C7FF", "#00B4D8FF", "#48CAE4FF", "#90E0EFFF", "#ADE8F4FF", "#CAF0F8FF", "#03045EFF", "#023E8AFF",
+// const COLORS = [ "#0077B6FF", "#00B4D8FF", "#90E0EFFF", "#40A578FF", "#9DDE8BFF", "#F8961EFF", "#F9C74FFF", "#E6FF94FF"];
+
+const colors = reactive({
+  text: null,
+  muted: null,
+  border: null,
+  self: null,
+  grid: null,
+  pricePerKWh: "#FFB900FF",
+  price: "#FF912FFF",
+  co2PerKWh: "#00C997FF",
+  co2: "#00916EFF",
+  background: null,
+  selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"],
+  palette: [
+    "#03C1EFFF",
+    "#FD6158FF",
+    "#31AB4AFF",
+    "#0AAFBFFF",
+    "#FF922EFF",
+    "#0F662DFF",
+    "#0470D4FF",
+    "#FFBD2FFF",
+    "#77C93EFF",
+    "#41517AFF",
+    "#4E1D10FF",
+    "#813504FF",
+  ],
+});
+
+function updateCssColors() {
+  const style = window.getComputedStyle(document.documentElement);
+  colors.text = style.getPropertyValue("--evcc-default-text");
+  colors.muted = style.getPropertyValue("--bs-gray-medium");
+  colors.border = style.getPropertyValue("--bs-border-color-translucent");
+  colors.self = style.getPropertyValue("--evcc-self");
+  colors.grid = style.getPropertyValue("--evcc-grid");
+  colors.background = style.getPropertyValue("--evcc-background");
+}
+
+// update colors on theme change
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCssColors);
+updateCssColors();
+
+export const dimColor = (color) => {
+  return color.toLowerCase().replace(/ff$/, "20");
+};
+
+export const lightenColor = (color, level = 0) => {
+  if (level === 0) return color.toLowerCase();
+  const alpha = Math.round(255 * Math.pow(0.6, level))
+    .toString(16)
+    .padStart(2, "0");
+  return color.toLowerCase().replace(/ff$/, alpha);
+};
+
+export const fullColor = (color) => {
+  return color.toLowerCase().replace(/20$/, "ff");
+};
+
+export default colors;
diff --git a/assets/js/components/Config/PropertyField.vue b/assets/js/components/Config/PropertyField.vue
index 66c0d3858d..35148c1ccf 100644
--- a/assets/js/components/Config/PropertyField.vue
+++ b/assets/js/components/Config/PropertyField.vue
@@ -48,6 +48,7 @@
 		:id="id"
 		class="w-50"
 		v-model="value"
+		equal-width
 		:options="[
 			{ value: false, name: $t('config.options.boolean.no') },
 			{ value: true, name: $t('config.options.boolean.yes') },
diff --git a/assets/js/components/Config/UserInterfaceSettings.vue b/assets/js/components/Config/UserInterfaceSettings.vue
index 815021a3b6..74bec4f1dc 100644
--- a/assets/js/components/Config/UserInterfaceSettings.vue
+++ b/assets/js/components/Config/UserInterfaceSettings.vue
@@ -11,6 +11,7 @@
 						name: $t(`settings.theme.${value}`),
 					}))
 				"
+				equal-width
 			/>
 		</FormRow>
 		<FormRow id="settingsLanguage" :label="$t('settings.language.label')">
@@ -36,6 +37,7 @@
 						name: $t(`settings.unit.${value}`),
 					}))
 				"
+				equal-width
 			/>
 		</FormRow>
 		<FormRow id="telemetryEnabled" :label="$t('settings.telemetry.label')">
diff --git a/assets/js/components/Config/VehicleModal.vue b/assets/js/components/Config/VehicleModal.vue
index 342916d3d9..b9e670ed3c 100644
--- a/assets/js/components/Config/VehicleModal.vue
+++ b/assets/js/components/Config/VehicleModal.vue
@@ -120,6 +120,7 @@
 												{ name: '2-phases', value: '2' },
 												{ name: '3-phases', value: undefined },
 											]"
+											equal-width
 										/>
 									</FormRow>
 									<div class="row mb-3">
diff --git a/assets/js/components/IconSelectGroup.vue b/assets/js/components/IconSelectGroup.vue
new file mode 100644
index 0000000000..46b51b7560
--- /dev/null
+++ b/assets/js/components/IconSelectGroup.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="root border d-flex gap-1" role="group">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "IconSelectGroup",
+};
+</script>
+
+<style scoped>
+.root {
+	border-radius: 20px;
+	padding: 4px;
+}
+</style>
diff --git a/assets/js/components/IconSelectItem.vue b/assets/js/components/IconSelectItem.vue
new file mode 100644
index 0000000000..04ddb770ff
--- /dev/null
+++ b/assets/js/components/IconSelectItem.vue
@@ -0,0 +1,39 @@
+<template>
+	<div>
+		<button type="button" class="btn" :class="{ active }" @click="$emit('click', value)">
+			<slot></slot>
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "IconSelectItem",
+	emits: ["click"],
+	props: {
+		value: String,
+		active: Boolean,
+	},
+};
+</script>
+
+<style scoped>
+.btn {
+	width: 32px;
+	height: 32px;
+	border-radius: 2rem;
+	color: var(--evcc-default-text);
+	padding: 0;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.btn:hover {
+	color: var(--evcc-gray);
+}
+.btn.active {
+	color: var(--evcc-background);
+	background: var(--evcc-default-text);
+}
+</style>
diff --git a/assets/js/components/MaterialIcon/Total.vue b/assets/js/components/MaterialIcon/Total.vue
new file mode 100644
index 0000000000..a3d30ef82d
--- /dev/null
+++ b/assets/js/components/MaterialIcon/Total.vue
@@ -0,0 +1,17 @@
+<template>
+	<svg :style="svgStyle" viewBox="0 0 24 24">
+		<path
+			fill="currentColor"
+			d="M4.83 4.61A1 1 0 0 1 5.75 4h12.5a1 1 0 1 1 0 2H8.11l4.95 5.115a1 1 0 0 1 .04 1.346L7.924 18.5H18.25a1 1 0 1 1 0 2H5.75a1 1 0 0 1-.76-1.65l5.999-6.999L5.03 5.695a1 1 0 0 1-.2-1.085"
+		/>
+	</svg>
+</template>
+
+<script>
+import icon from "../../mixins/icon";
+
+export default {
+	name: "Total",
+	mixins: [icon],
+};
+</script>
diff --git a/assets/js/components/SelectGroup.vue b/assets/js/components/SelectGroup.vue
index 7c07fcdb1e..7a76bea4de 100644
--- a/assets/js/components/SelectGroup.vue
+++ b/assets/js/components/SelectGroup.vue
@@ -6,7 +6,7 @@
 			:key="option.value"
 			type="button"
 			class="btn btn-sm flex-grow-1 flex-shrink-1"
-			:class="{ active: option.value === modelValue }"
+			:class="{ active: option.value === modelValue, 'btn--equal': equalWidth }"
 			:disabled="option.disabled"
 			@click="$emit('update:modelValue', option.value)"
 		>
@@ -22,6 +22,7 @@ export default {
 		id: String,
 		options: Array,
 		modelValue: [Number, String],
+		equalWidth: Boolean,
 	},
 	emits: ["update:modelValue"],
 };
@@ -32,11 +33,10 @@ export default {
 	border: 2px solid var(--evcc-default-text);
 	border-radius: 17px;
 	padding: 4px;
+	background: var(--evcc-background);
 }
 
 .btn {
-	/* equal width buttons */
-	flex-basis: 0;
 	white-space: nowrap;
 	border-radius: 12px;
 	padding: 0.1em 0.8em;
@@ -45,6 +45,9 @@ export default {
 	overflow-x: hidden;
 	text-overflow: ellipsis;
 }
+.btn--equal {
+	flex-basis: 0;
+}
 .btn:hover {
 	color: var(--evcc-gray);
 }
diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
new file mode 100644
index 0000000000..9591ea0b93
--- /dev/null
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -0,0 +1,337 @@
+<template>
+	<div>
+		<div style="position: relative; height: 300px" class="my-3">
+			<Bar :data="chartData" :options="options" />
+		</div>
+		<LegendList :legends="legends" />
+	</div>
+</template>
+
+<script>
+import { Bar } from "vue-chartjs";
+import { BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import LegendList from "./LegendList.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import colors from "../../colors";
+
+registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
+
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+const COST_TYPES = {
+	PRICE: "price",
+	CO2: "co2",
+};
+
+export default {
+	name: "CostHistoryChart",
+	components: { Bar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: GROUPS.NONE },
+		costType: { type: String, default: COST_TYPES.PRICE },
+		period: { type: String, default: "total" },
+		currency: { type: String, default: "EUR" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		month() {
+			return this.firstDay?.getMonth() + 1;
+		},
+		year() {
+			return this.firstDay?.getFullYear();
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update history data");
+			const result = {};
+			const groups = new Set();
+
+			if (this.sessions.length > 0) {
+				//const lastDay = new Date(this.year, this.month, 0);
+				//const daysInMonth = this.lastDay.getDate();
+				let xFrom, xTo;
+				if (this.period === "total") {
+					xFrom = this.firstDay.getFullYear();
+					xTo = this.lastDay.getFullYear();
+				} else if (this.period === "year") {
+					xFrom = 1;
+					xTo = 12;
+				} else {
+					xFrom = 1;
+					xTo = new Date(
+						this.lastDay.getFullYear(),
+						this.lastDay.getMonth() + 1,
+						0
+					).getDate();
+				}
+
+				// initialize result with empty arrays
+				for (let i = xFrom; i <= xTo; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					let index;
+					const date = new Date(session.created);
+					if (this.period === "month") {
+						index = date.getDate();
+					} else if (this.period === "year") {
+						index = date.getMonth() + 1;
+					} else {
+						index = date.getFullYear();
+					}
+
+					const groupKey =
+						this.groupBy === GROUPS.NONE ? this.costType : session[this.groupBy];
+					groups.add(groupKey);
+
+					const value =
+						this.costType === COST_TYPES.PRICE
+							? session.price
+							: session.co2PerKWh * session.chargedEnergy;
+
+					result[index][groupKey] = (result[index][groupKey] || 0) + value;
+
+					result[index].totalCost = (result[index].totalCost || 0) + value;
+					result[index].totalKWh = (result[index].totalKWh || 0) + session.chargedEnergy;
+					result[index].avgCost = result[index].totalCost / result[index].totalKWh;
+				});
+			}
+
+			const datasets = Array.from(groups).map((group) => {
+				const colorGroup = this.groupBy === GROUPS.NONE ? "cost" : this.groupBy;
+				const backgroundColor = this.colorMappings[colorGroup][group];
+				const label =
+					this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${group}`) : group;
+
+				return {
+					type: "bar",
+					backgroundColor,
+					label,
+					data: Object.values(result).map((index) => index[group] || 0),
+					borderRadius: (context) => {
+						const threshold = 0.04; // 400 Wh
+						const { dataIndex, datasetIndex } = context;
+						const currentValue = context.dataset.data[dataIndex];
+						const previousValuesExist = context.chart.data.datasets
+							.filter((dataset) => dataset.type === "bar")
+							.slice(datasetIndex + 1)
+							.some((dataset) => (dataset?.data[dataIndex] || 0) > threshold);
+						return currentValue > threshold && !previousValuesExist
+							? { topLeft: 10, topRight: 10 }
+							: { topLeft: 0, topRight: 0 };
+					},
+				};
+			});
+
+			// add average price line
+			const costColor =
+				this.costType === COST_TYPES.PRICE ? colors.pricePerKWh : colors.co2PerKWh;
+			datasets.push({
+				type: "line",
+				label:
+					this.costType === COST_TYPES.PRICE
+						? this.pricePerKWhUnit(this.currency, false)
+						: "gCO₂e/kWh",
+				data: Object.values(result).map((index) => index.avgCost || null),
+				yAxisID: "y1",
+				tension: 0.25,
+				pointRadius: 0,
+				pointHoverRadius: 6,
+				borderColor: costColor,
+				backgroundColor: costColor,
+				borderWidth: 2,
+				spanGaps: true,
+			});
+
+			return {
+				labels: Object.keys(result),
+				datasets: datasets,
+			};
+		},
+		legends() {
+			return this.chartData.datasets.map((dataset) => {
+				let value = null;
+
+				// line chart handling
+				if (dataset.type === "line") {
+					const items = dataset.data.filter((v) => v !== null);
+					const min = Math.min(...items);
+					const max = Math.max(...items);
+					const format = (value, withUnit) => {
+						return this.costType === COST_TYPES.PRICE
+							? this.fmtPricePerKWh(value, this.currency, true, withUnit)
+							: this.fmtGrams(value, withUnit);
+					};
+					value = `${format(min, false)} – ${format(max, true)}`;
+				} else {
+					const total = dataset.data.reduce((acc, curr) => acc + curr, 0);
+					value =
+						this.costType === COST_TYPES.PRICE
+							? this.fmtMoney(total, this.currency, true, true)
+							: this.fmtGrams(total);
+				}
+				return {
+					label: dataset.label,
+					color: dataset.backgroundColor,
+					value,
+				};
+			});
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				color: colors.text,
+				borderSkipped: false,
+				maxBarThickness: 40,
+				animation: false,
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						mode: "index",
+						intersect: false,
+						positioner: (context) => {
+							const { chart, tooltipPosition } = context;
+							const { tooltip } = chart;
+							const { width, height } = tooltip;
+							const { x, y } = tooltipPosition();
+							const { innerWidth, innerHeight } = window;
+
+							return {
+								x: Math.min(x, innerWidth - width),
+								y: Math.min(y, innerHeight - height),
+							};
+						},
+						callbacks: {
+							title: (tooltipItem) => {
+								const { label } = tooltipItem[0];
+								if (this.period === "total") {
+									return label;
+								} else if (this.period === "year") {
+									const date = new Date(this.year, label - 1, 1);
+									return this.fmtMonth(date);
+								} else {
+									const date = new Date(this.year, this.month, label);
+									return this.fmtDayMonth(date);
+								}
+							},
+							label: (tooltipItem) => {
+								const datasetLabel = tooltipItem.dataset.label || "";
+								const value = tooltipItem.raw;
+
+								// line datasets have null values
+								if (tooltipItem.dataset.type === "line") {
+									if (value === null) {
+										return null;
+									}
+
+									return (
+										"⌀ " +
+										(this.costType === COST_TYPES.PRICE
+											? this.fmtPricePerKWh(value, this.currency, false)
+											: this.fmtCo2Medium(value))
+									);
+								}
+
+								return (
+									datasetLabel +
+									": " +
+									(this.costType === COST_TYPES.PRICE
+										? this.fmtMoney(value || 0, this.currency, true, true)
+										: this.fmtGrams(value || 0))
+								);
+							},
+							labelColor: (item) => {
+								const { backgroundColor } = item.element.options;
+								const white = "#fff";
+								return {
+									borderColor: !item.raw ? colors.muted : white,
+									backgroundColor,
+								};
+							},
+							labelTextColor: (item) => {
+								return !item.raw ? colors.muted : "#fff";
+							},
+						},
+						itemSort: function (a, b) {
+							return b.datasetIndex - a.datasetIndex;
+						},
+					},
+				},
+				scales: {
+					x: {
+						stacked: true,
+						border: { display: false },
+						grid: { display: false },
+						ticks: { color: colors.muted },
+					},
+					y: {
+						stacked: true,
+						position: "right",
+						border: { display: false },
+						grid: { color: colors.border },
+						title: {
+							text: "kgCO₂e",
+							display: this.costType === COST_TYPES.CO2,
+							color: colors.muted,
+						},
+						ticks: {
+							callback: (value) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtMoney(value, this.currency, false, true)
+									: this.fmtNumber(value / 1e3, 0),
+							color: colors.muted,
+							maxTicksLimit: 6,
+						},
+						min: 0,
+					},
+					y1: {
+						position: "left",
+						border: { display: false },
+						grid: {
+							drawOnChartArea: false,
+						},
+						title: {
+							text:
+								this.costType === COST_TYPES.CO2
+									? "gCO₂e/kWh"
+									: this.pricePerKWhUnit(this.currency, false),
+							display: true,
+							color: colors.muted,
+						},
+						ticks: {
+							callback: (value) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtPricePerKWh(value, this.currency, false, false)
+									: this.fmtNumber(value, 0),
+							color: colors.muted,
+							maxTicksLimit: 6,
+						},
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/CostYearChart.vue b/assets/js/components/Sessions/CostYearChart.vue
new file mode 100644
index 0000000000..c5a0979425
--- /dev/null
+++ b/assets/js/components/Sessions/CostYearChart.vue
@@ -0,0 +1,214 @@
+<template>
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<Radar :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList
+				:legends="legends"
+				:grid="period === 'year'"
+				:extra-class="
+					period === 'year'
+						? 'justify-content-around me-3 flex-row'
+						: 'ps-3 flex-md-column'
+				"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Radar } from "vue-chartjs";
+import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor, lightenColor } from "../../colors";
+import LegendList from "./LegendList.vue";
+registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
+
+const COST_TYPES = {
+	PRICE: "price",
+	CO2: "co2",
+};
+
+export default {
+	name: "CostYearChart",
+	components: { Radar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		costType: { type: String, default: COST_TYPES.PRICE },
+		currency: { type: String },
+		period: { type: String, default: "total" },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update cost year data");
+
+			if (!this.sessions.length > 0) return { labels: [], datasets: [] };
+
+			const firstYear = this.firstDay.getFullYear();
+			const lastYear = this.lastDay.getFullYear();
+
+			const result = {};
+
+			const years = [];
+
+			// initialize result for years and months
+			for (let year = lastYear; year >= firstYear; year--) {
+				const yearString = `${year}`;
+				years.push(yearString);
+				result[yearString] = {};
+				console.log("year", yearString);
+
+				for (let month = 1; month <= 12; month++) {
+					result[yearString][month] = { avgCost: null };
+				}
+			}
+
+			// Populate with actual data
+			this.sessions.forEach((session) => {
+				const date = new Date(session.created);
+				const year = `${date.getFullYear()}`;
+				const month = `${date.getMonth() + 1}`;
+
+				const value =
+					this.costType === COST_TYPES.PRICE
+						? session.price
+						: session.co2PerKWh * session.chargedEnergy;
+
+				const data = result[year][month];
+				data.totalCost = (data.totalCost || 0) + value;
+				data.totalKWh = (data.totalKWh || 0) + session.chargedEnergy;
+				data.avgCost = data.totalKWh ? data.totalCost / data.totalKWh : null;
+			});
+			const datasets = years.map((year) => {
+				let borderColor =
+					this.costType === COST_TYPES.PRICE ? colors.pricePerKWh : colors.co2PerKWh;
+				borderColor = lightenColor(borderColor, years.indexOf(year));
+				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
+				const { totalCost, totalKWh } = Object.values(result[year]).reduce(
+					(acc, { totalCost = 0, totalKWh = 0 }) => ({
+						totalCost: acc.totalCost + totalCost,
+						totalKWh: acc.totalKWh + totalKWh,
+					}),
+					{ totalCost: 0, totalKWh: 0 }
+				);
+				const yearData = totalKWh ? totalCost / totalKWh : null;
+				return {
+					backgroundColor,
+					borderColor,
+					label: year,
+					tension: 0.25,
+					data: Object.values(result[year]).map(({ avgCost }) => avgCost),
+					yearData,
+				};
+			});
+
+			const labels = Object.keys(result[firstYear]).map((month) =>
+				this.fmtMonth(new Date(firstYear, month - 1, 1), true)
+			);
+
+			return {
+				labels,
+				datasets,
+			};
+		},
+		legends() {
+			if (this.period === "total") {
+				return this.chartData.datasets.map((dataset) => {
+					const label = dataset.label;
+					const value =
+						dataset.yearData === 0 ? "- %" : this.fmtPricePerKWh(dataset.yearData);
+					return {
+						label,
+						color: dataset.borderColor,
+						value,
+					};
+				});
+			} else {
+				return this.chartData.labels.map((label, index) => {
+					const format = (value) =>
+						this.costType === COST_TYPES.PRICE
+							? this.fmtPricePerKWh(value, this.currency, true)
+							: this.fmtCo2Short(value);
+
+					const value = this.chartData.datasets[0].data[index];
+					return {
+						label,
+						value: value === null ? "-" : format(value),
+					};
+				});
+			}
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				aspectRatio: 1,
+				borderWidth: 4,
+				color: colors.text,
+				spacing: 0,
+				radius: "100%",
+				elements: { line: { tension: 0.05 } },
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						intersect: false,
+						mode: "index",
+						position: "topBottomCenter",
+						labelPointStyle: "circle",
+						callbacks: {
+							label: (tooltipItem) => {
+								const value = tooltipItem.raw || 0;
+								const datasetLabel = tooltipItem.dataset.label || "";
+								return (
+									datasetLabel +
+									": " +
+									this.fmtPricePerKWh(value, this.currency, true)
+								);
+							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
+						},
+					},
+				},
+				scales: {
+					r: {
+						beginAtZero: false,
+						ticks: {
+							color: colors.muted,
+							backdropColor: colors.background,
+							font: { size: 10 },
+							callback: (value) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtPricePerKWh(value, this.currency, true)
+									: this.fmtCo2Short(value),
+							maxTicksLimit: 4,
+						},
+						angleLines: { display: false },
+						grid: { color: colors.border },
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/DateNavigator.vue b/assets/js/components/Sessions/DateNavigator.vue
new file mode 100644
index 0000000000..8d4bec069b
--- /dev/null
+++ b/assets/js/components/Sessions/DateNavigator.vue
@@ -0,0 +1,174 @@
+<template>
+	<div
+		class="d-sm-flex justify-content-lg-end gap-lg-4"
+		:class="showMonth ? 'justify-content-between' : 'justify-content-end'"
+	>
+		<div v-if="showMonth" class="d-none d-sm-flex justify-content-between">
+			<DateNavigatorButton prev :disabled="!hasPrevMonth" :onClick="emitPrevMonth" />
+			<CustomSelect
+				id="sessionsMonth"
+				:options="monthOptions"
+				:selected="month"
+				@change="emitMonth($event.target.value)"
+			>
+				<button class="btn btn-sm border-0 text-truncate h-100" style="width: 8em">
+					{{ monthName }}
+				</button>
+			</CustomSelect>
+			<DateNavigatorButton next :disabled="!hasNextMonth" :onClick="emitNextMonth" />
+		</div>
+		<div v-if="showMonth" class="d-flex d-sm-none justify-content-between">
+			<DateNavigatorButton prev :disabled="!hasPrevMonth" :onClick="emitPrevMonth" />
+			<CustomSelect
+				id="sessionsMonthYear"
+				:options="monthYearOptions"
+				:selected="month"
+				@change="emitMonthYear($event.target.value)"
+			>
+				<button class="btn btn-sm border-0 h-100 text-truncate">
+					{{ monthYearName }}
+				</button>
+			</CustomSelect>
+			<DateNavigatorButton next :disabled="!hasNextMonth" :onClick="emitNextMonth" />
+		</div>
+		<div
+			v-if="showYear"
+			class="justify-content-between"
+			:class="showMonth ? 'd-none d-sm-flex' : 'd-flex'"
+		>
+			<DateNavigatorButton prev :disabled="!hasPrevYear" :onClick="emitPrevYear" />
+			<CustomSelect
+				id="sessionsYear"
+				:options="yearOptions"
+				:selected="year"
+				@change="emitYear($event.target.value)"
+			>
+				<button class="btn btn-sm border-0 h-100" style="width: 4em">
+					{{ year }}
+				</button>
+			</CustomSelect>
+			<DateNavigatorButton next :disabled="!hasNextYear" :onClick="emitNextYear" />
+		</div>
+	</div>
+</template>
+
+<script>
+import CustomSelect from "../CustomSelect.vue";
+import DateNavigatorButton from "./DateNavigatorButton.vue";
+import formatter from "../../mixins/formatter";
+
+export default {
+	name: "DateNavigator",
+	components: {
+		CustomSelect,
+		DateNavigatorButton,
+	},
+	props: {
+		month: Number,
+		year: Number,
+		startDate: Date,
+		showMonth: Boolean,
+		showYear: Boolean,
+	},
+	mixins: [formatter],
+	emits: ["update-date"],
+	computed: {
+		hasPrevMonth() {
+			return (
+				this.year > this.startDate.getFullYear() ||
+				this.month > this.startDate.getMonth() + 1
+			);
+		},
+		hasNextMonth() {
+			const now = new Date();
+			return this.year < now.getFullYear() || this.month < now.getMonth() + 1;
+		},
+		hasPrevYear() {
+			return this.year > this.startDate.getFullYear();
+		},
+		hasNextYear() {
+			return this.year < new Date().getFullYear();
+		},
+		monthOptions() {
+			return Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ({
+				name: this.fmtMonth(new Date(this.year, month - 1, 1)),
+				value: month,
+			}));
+		},
+		monthYearOptions() {
+			const first = this.startDate;
+			const last = new Date();
+			const yearMonths = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				const startMonth = year === first.getFullYear() ? first.getMonth() + 1 : 1;
+				const endMonth = year === last.getFullYear() ? last.getMonth() + 1 : 12;
+				for (let month = startMonth; month <= endMonth; month++) {
+					yearMonths.push({
+						name: this.fmtMonthYear(new Date(year, month - 1, 1)),
+						value: `${year}-${month}`,
+					});
+				}
+			}
+			return yearMonths;
+		},
+		yearOptions() {
+			const first = this.startDate;
+			const last = new Date();
+			const years = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				years.push({ name: year, value: year });
+			}
+			return years;
+		},
+		monthName() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			return this.fmtMonth(date);
+		},
+		monthYearName() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			date.setFullYear(this.year);
+			return this.fmtMonthYear(date);
+		},
+	},
+	methods: {
+		emitPrevMonth() {
+			const prevMonthDate = new Date(this.year, this.month - 2, 1);
+			this.$emit("update-date", {
+				year: prevMonthDate.getFullYear(),
+				month: prevMonthDate.getMonth() + 1,
+			});
+		},
+		emitNextMonth() {
+			const nextMonthDate = new Date(this.year, this.month, 1);
+			this.$emit("update-date", {
+				year: nextMonthDate.getFullYear(),
+				month: nextMonthDate.getMonth() + 1,
+			});
+		},
+		emitPrevYear() {
+			this.$emit("update-date", { year: this.year - 1, month: undefined });
+		},
+		emitNextYear() {
+			this.$emit("update-date", { year: this.year + 1, month: undefined });
+		},
+		emitMonth(month) {
+			this.$emit("update-date", { year: this.year, month });
+		},
+		emitMonthYear(monthYear) {
+			const [year, month] = monthYear.split("-");
+			this.$emit("update-date", { year: parseInt(year), month: parseInt(month) });
+		},
+		emitYear(year) {
+			this.$emit("update-date", { year, month: undefined });
+		},
+	},
+};
+</script>
+
+<style scoped>
+.btn {
+	color: inherit;
+}
+</style>
diff --git a/assets/js/components/Sessions/DateNavigatorButton.vue b/assets/js/components/Sessions/DateNavigatorButton.vue
new file mode 100644
index 0000000000..923a98bd79
--- /dev/null
+++ b/assets/js/components/Sessions/DateNavigatorButton.vue
@@ -0,0 +1,41 @@
+<template>
+	<button class="btn btn-sm border-0" :disabled="disabled" @click="onClick">
+		<component :is="icon" size="s" :class="iconClass"></component>
+	</button>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/angledoubleleftsmall";
+import "@h2d2/shopicons/es/regular/angledoublerightsmall";
+
+export default {
+	name: "DateNavigatorButton",
+	props: {
+		disabled: Boolean,
+		prev: Boolean,
+		next: Boolean,
+		onClick: Function,
+	},
+	computed: {
+		icon() {
+			if (this.prev) {
+				return "shopicon-regular-angledoubleleftsmall";
+			} else if (this.next) {
+				return "shopicon-regular-angledoublerightsmall";
+			}
+			return null;
+		},
+		iconClass() {
+			return this.prev ? "me-1" : this.next ? "ms-1" : "";
+		},
+	},
+};
+</script>
+
+<style scoped>
+.btn,
+.btn:active,
+.btn:focus {
+	color: inherit !important;
+}
+</style>
diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
new file mode 100644
index 0000000000..8ca33cf63c
--- /dev/null
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -0,0 +1,119 @@
+<template>
+	<div class="row" v-if="chartData.labels.length > 1">
+		<div class="col-12 col-md-6 mb-3">
+			<Doughnut :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center">
+			<LegendList :legends="legends" extra-class="flex-md-column" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { Doughnut } from "vue-chartjs";
+import { DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
+import LegendList from "./LegendList.vue";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import colors from "../../colors";
+
+registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
+
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+export default {
+	name: "EnergyGroupedChart",
+	components: { Doughnut, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: GROUPS.NONE },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {}, solar: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		chartData() {
+			console.log("update energy aggregate data");
+			const aggregatedData = {};
+
+			if (this.groupBy === GROUPS.NONE) {
+				const total = this.sessions.reduce((acc, s) => acc + s.chargedEnergy, 0);
+				const self = this.sessions.reduce(
+					(acc, s) => acc + (s.chargedEnergy / 100) * s.solarPercentage,
+					0
+				);
+				aggregatedData.self = self;
+				aggregatedData.grid = total - self;
+			} else {
+				this.sessions.forEach((session) => {
+					const groupKey = session[this.groupBy];
+					if (!aggregatedData[groupKey]) {
+						aggregatedData[groupKey] = 0;
+					}
+					aggregatedData[groupKey] += session.chargedEnergy;
+				});
+			}
+
+			// Sort the data by energy in descending order
+			const sortedEntries = Object.entries(aggregatedData); //.sort((a, b) => b[1] - a[1]);
+
+			const labels = sortedEntries.map(([label]) =>
+				this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${label}`) : label
+			);
+			const data = sortedEntries.map(([, value]) => value);
+			const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+			const backgroundColor = sortedEntries.map(
+				([label]) => this.colorMappings[colorGroup][label]
+			);
+
+			return {
+				labels: labels,
+				datasets: [{ data, backgroundColor }],
+			};
+		},
+		legends() {
+			const total = this.chartData.datasets[0].data.reduce((acc, curr) => acc + curr, 0);
+			return this.chartData.labels.map((label, index) => ({
+				label: label,
+				color: this.chartData.datasets[0].backgroundColor[index],
+				value: this.fmtPercentage(
+					(100 / total) * this.chartData.datasets[0].data[index],
+					1
+				),
+			}));
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				aspectRatio: 1,
+				borderRadius: 10,
+				color: colors.text,
+				borderWidth: 3,
+				borderColor: colors.background,
+				cutout: "70%",
+				radius: "95%",
+				animation: { duration: 250 },
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						mode: "index",
+						position: "center",
+						intersect: false,
+						callbacks: {
+							label: (tooltipItem) => {
+								const value = tooltipItem.raw || 0;
+								return this.fmtWh(value * 1e3, POWER_UNIT.AUTO);
+							},
+						},
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
new file mode 100644
index 0000000000..5d43ab27ef
--- /dev/null
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -0,0 +1,244 @@
+<template>
+	<div>
+		<div style="position: relative; height: 300px" class="my-3">
+			<Bar :data="chartData" :options="options" />
+		</div>
+		<LegendList :legends="legends" />
+	</div>
+</template>
+
+<script>
+import { Bar } from "vue-chartjs";
+import { BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import LegendList from "./LegendList.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import colors from "../../colors";
+
+registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
+
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+export default {
+	name: "EnergyHistoryChart",
+	components: { Bar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: GROUPS.NONE },
+		period: { type: String, default: "total" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		month() {
+			return this.firstDay?.getMonth() + 1;
+		},
+		year() {
+			return this.firstDay?.getFullYear();
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update history data");
+			const result = {};
+			const groups = new Set();
+
+			if (this.sessions.length > 0) {
+				//const lastDay = new Date(this.year, this.month, 0);
+				//const daysInMonth = this.lastDay.getDate();
+				let xFrom, xTo;
+				if (this.period === "total") {
+					xFrom = this.firstDay.getFullYear();
+					xTo = this.lastDay.getFullYear();
+				} else if (this.period === "year") {
+					xFrom = 1;
+					xTo = 12;
+				} else {
+					xFrom = 1;
+					xTo = new Date(
+						this.lastDay.getFullYear(),
+						this.lastDay.getMonth() + 1,
+						0
+					).getDate();
+				}
+
+				// initialize result with empty arrays
+				for (let i = xFrom; i <= xTo; i++) {
+					result[i] = {};
+				}
+
+				// Populate with actual data
+				this.sessions.forEach((session) => {
+					let index;
+					const date = new Date(session.created);
+					if (this.period === "month") {
+						index = date.getDate();
+					} else if (this.period === "year") {
+						index = date.getMonth() + 1;
+					} else {
+						index = date.getFullYear();
+					}
+
+					if (this.groupBy === GROUPS.NONE) {
+						groups.add("grid");
+						groups.add("self");
+						const charged = session.chargedEnergy;
+						const self = (charged / 100) * session.solarPercentage;
+						const grid = charged - self;
+						result[index].self = (result[index].self || 0) + self;
+						result[index].grid = (result[index].grid || 0) + grid;
+					} else {
+						const groupKey = session[this.groupBy];
+						groups.add(groupKey);
+						result[index][groupKey] =
+							(result[index][groupKey] || 0) + session.chargedEnergy;
+					}
+				});
+			}
+
+			const datasets = Array.from(groups).map((group) => {
+				const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+				const backgroundColor = this.colorMappings[colorGroup][group];
+				const label =
+					this.groupBy === GROUPS.NONE ? this.$t(`sessions.group.${group}`) : group;
+
+				return {
+					backgroundColor,
+					label,
+					data: Object.values(result).map((day) => day[group] || 0),
+					borderRadius: (context) => {
+						const threshold = 0.04; // 400 Wh
+						const { dataIndex, datasetIndex } = context;
+						const currentValue = context.dataset.data[dataIndex];
+						const previousValuesExist = context.chart.data.datasets
+							.slice(datasetIndex + 1)
+							.some((dataset) => (dataset?.data[dataIndex] || 0) > threshold);
+						return currentValue > threshold && !previousValuesExist
+							? { topLeft: 10, topRight: 10 }
+							: { topLeft: 0, topRight: 0 };
+					},
+				};
+			});
+
+			return {
+				labels: Object.keys(result),
+				datasets: datasets,
+			};
+		},
+		legends() {
+			return this.chartData.datasets.map((dataset) => ({
+				label: dataset.label,
+				color: dataset.backgroundColor,
+				value: this.fmtWh(
+					dataset.data.reduce((acc, curr) => acc + curr, 0) * 1e3,
+					POWER_UNIT.AUTO
+				),
+			}));
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				color: colors.text,
+				borderSkipped: false,
+				maxBarThickness: 40,
+				animation: false,
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						mode: "index",
+						intersect: false,
+						positioner: (context) => {
+							const { chart, tooltipPosition } = context;
+							const { tooltip } = chart;
+							const { width, height } = tooltip;
+							const { x, y } = tooltipPosition();
+							const { innerWidth, innerHeight } = window;
+
+							return {
+								x: Math.min(x, innerWidth - width),
+								y: Math.min(y, innerHeight - height),
+							};
+						},
+						callbacks: {
+							title: (tooltipItem) => {
+								const { label } = tooltipItem[0];
+								if (this.period === "total") {
+									return label;
+								} else if (this.period === "year") {
+									const date = new Date(this.year, label - 1, 1);
+									return this.fmtMonth(date);
+								} else {
+									const date = new Date(this.year, this.month, label);
+									return this.fmtDayMonth(date);
+								}
+							},
+							label: (tooltipItem) => {
+								const datasetLabel = tooltipItem.dataset.label || "";
+								const value = tooltipItem.raw || 0;
+								return (
+									datasetLabel + ": " + this.fmtWh(value * 1e3, POWER_UNIT.AUTO)
+								);
+							},
+							labelColor: (item) => {
+								const { backgroundColor } = item.element.options;
+								const white = "#fff";
+								return {
+									borderColor: !item.raw ? colors.muted : white,
+									backgroundColor,
+								};
+							},
+							labelTextColor: (item) => {
+								return !item.raw ? colors.muted : "#fff";
+							},
+						},
+						itemSort: function (a, b) {
+							return b.datasetIndex - a.datasetIndex;
+						},
+					},
+				},
+				scales: {
+					x: {
+						stacked: true,
+						border: { display: false },
+						grid: { display: false },
+						ticks: { color: colors.muted },
+					},
+					y: {
+						stacked: true,
+						border: { display: false },
+						grid: { color: colors.border },
+						title: {
+							text: "kWh",
+							display: true,
+							color: colors.muted,
+						},
+						ticks: {
+							callback: (value) => this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0),
+							color: colors.muted,
+							maxTicksLimit: 6,
+						},
+						position: "right",
+						min: 0,
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/LegendList.vue b/assets/js/components/Sessions/LegendList.vue
new file mode 100644
index 0000000000..9a1ccdd560
--- /dev/null
+++ b/assets/js/components/Sessions/LegendList.vue
@@ -0,0 +1,44 @@
+<template>
+	<ul
+		class="p-0 d-flex flex-wrap column-gap-4 row-gap-2 justify-content-start overflow-hidden"
+		:class="extraClass"
+	>
+		<li
+			class="legend-item d-flex align-items-baseline gap-2 no-wrap overflow-hidden"
+			:class="{ 'legend-item---grid': grid }"
+			v-for="legend in legends"
+			:key="legend.label"
+		>
+			<div
+				v-if="legend.color"
+				class="legend-color align-self-center me-1"
+				:style="{ backgroundColor: legend.color }"
+			></div>
+			<div class="text-truncate flex-shrink-1">{{ legend.label }}</div>
+			<div v-if="legend.value" class="text-muted text-nowrap">{{ legend.value }}</div>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	name: "LegendList",
+	props: {
+		legends: Array,
+		extraClass: { type: [String, Array, Object], default: "" },
+		grid: Boolean,
+	},
+};
+</script>
+
+<style scoped>
+.legend-color {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+}
+.legend-item---grid {
+	justify-content: space-between;
+	width: 100px;
+}
+</style>
diff --git a/assets/js/components/Sessions/PeriodSelector.vue b/assets/js/components/Sessions/PeriodSelector.vue
new file mode 100644
index 0000000000..193c9c927d
--- /dev/null
+++ b/assets/js/components/Sessions/PeriodSelector.vue
@@ -0,0 +1,35 @@
+<template>
+	<SelectGroup
+		id="sessionsPeriod"
+		class="w-100"
+		:options="periodOptions"
+		:modelValue="period"
+		@update:modelValue="changePeriod"
+	/>
+</template>
+
+<script>
+import SelectGroup from "../SelectGroup.vue";
+
+export default {
+	name: "PeriodSelector",
+	components: {
+		SelectGroup,
+	},
+	props: {
+		period: {
+			type: String,
+			required: true,
+		},
+		periodOptions: {
+			type: Array,
+			required: true,
+		},
+	},
+	methods: {
+		changePeriod(newPeriod) {
+			this.$emit("update:period", newPeriod);
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/ChargingSessionModal.vue b/assets/js/components/Sessions/SessionDetailsModal.vue
similarity index 95%
rename from assets/js/components/ChargingSessionModal.vue
rename to assets/js/components/Sessions/SessionDetailsModal.vue
index 213c5d3630..f49c1a0008 100644
--- a/assets/js/components/ChargingSessionModal.vue
+++ b/assets/js/components/Sessions/SessionDetailsModal.vue
@@ -129,10 +129,10 @@
 							</tbody>
 						</table>
 					</div>
-					<div class="modal-footer d-flex justify-content-right">
+					<div class="modal-footer d-flex justify-content-start">
 						<button
 							type="button"
-							class="btn btn-outline-danger"
+							class="btn btn-link text-danger"
 							data-bs-dismiss="modal"
 							@click="openRemoveConfirmationModal"
 						>
@@ -182,15 +182,14 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/checkmark";
-import { distanceUnit, distanceValue } from "../units";
-import formatter from "../mixins/formatter";
 import Modal from "bootstrap/js/dist/modal";
-import api from "../api";
-
-import VehicleOptions from "./VehicleOptions.vue";
+import formatter from "../../mixins/formatter";
+import VehicleOptions from "../VehicleOptions.vue";
+import { distanceUnit, distanceValue } from "../../units";
+import api from "../../api";
 
 export default {
-	name: "ChargingSessionModal",
+	name: "SessionDetailsModal",
 	components: { VehicleOptions },
 	mixins: [formatter],
 	props: {
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
new file mode 100644
index 0000000000..2ec3b6b485
--- /dev/null
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -0,0 +1,491 @@
+<template>
+	<div v-if="sessions.length === 0" data-testid="sessions-nodata" class="mt-3 mb-5">
+		<p>{{ $t("sessions.noData") }}</p>
+	</div>
+	<div v-else class="my-5 table-outer">
+		<table class="table text-nowrap">
+			<thead class="sticky-top">
+				<tr data-testid="sessions-head">
+					<th scope="col" class="align-top ps-0">
+						{{ $t("sessions.date") }}
+					</th>
+					<th
+						scope="col"
+						class="align-top d-none d-md-table-cell"
+						data-testid="loadpoint"
+					>
+						{{ $t("sessions.loadpoint") }}
+						<CustomSelect
+							:selected="loadpointFilter"
+							:options="loadpointFilterOptions"
+							data-testid="filter-loadpoint"
+							@change="changeLoadpointFilter"
+						>
+							<span
+								class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
+							>
+								{{ loadpointFilter || $t("sessions.filter.filter") }}
+							</span>
+						</CustomSelect>
+					</th>
+					<th scope="col" class="align-top d-none d-md-table-cell" data-testid="vehicle">
+						{{ $t("sessions.vehicle") }}
+						<CustomSelect
+							:selected="vehicleFilter"
+							:options="vehicleFilterOptions"
+							data-testid="filter-vehicle"
+							@change="changeVehicleFilter"
+						>
+							<span
+								class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
+							>
+								{{ vehicleFilter || $t("sessions.filter.filter") }}
+							</span>
+						</CustomSelect>
+					</th>
+					<th scope="col" class="align-top d-md-none text-truncate">
+						<div class="d-flex flex-wrap text-truncate">
+							<div class="me-2 text-truncate">
+								{{ $t("sessions.loadpoint") }}
+							</div>
+							<CustomSelect
+								:selected="loadpointFilter"
+								:options="loadpointFilterOptions"
+								data-testid="filter-loadpoint"
+								@change="changeLoadpointFilter"
+							>
+								<span
+									class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
+								>
+									{{ loadpointFilter || $t("sessions.filter.filter") }}
+								</span>
+							</CustomSelect>
+						</div>
+						<div class="text-truncate d-flex flex-wrap">
+							<div class="me-2 text-truncate">
+								{{ $t("sessions.vehicle") }}
+							</div>
+							<CustomSelect
+								:selected="vehicleFilter"
+								:options="vehicleFilterOptions"
+								data-testid="filter-vehicle"
+								@change="changeVehicleFilter"
+							>
+								<span
+									class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
+								>
+									{{ vehicleFilter || $t("sessions.filter.filter") }}
+								</span>
+							</CustomSelect>
+						</div>
+					</th>
+					<th
+						v-for="(column, index) in columnsPerBreakpoint"
+						:key="column.name"
+						scope="col"
+						:data-testid="`sessions-head-${column.name}`"
+						class="align-top text-end"
+					>
+						<CustomSelect
+							v-if="tooMuchColumns"
+							:selected="column.name"
+							:options="columnOptions"
+							data-testid="column"
+							@change="selectColumnPosition(index, $event.target.value)"
+						>
+							<span class="text-decoration-underline">
+								{{ $t(`sessions.${column.name}`) }}
+							</span>
+						</CustomSelect>
+						<span v-else>
+							{{ $t(`sessions.${column.name}`) }}
+						</span>
+						<div class="text-gray fw-normal">{{ column.unit }}</div>
+					</th>
+				</tr>
+			</thead>
+			<tfoot class="sticky-bottom">
+				<tr data-testid="sessions-foot">
+					<th scope="col" class="align-top ps-0">
+						{{ $t("sessions.total") }}
+					</th>
+					<th scope="col" class="d-none d-md-table-cell"></th>
+					<th scope="col" class="d-none d-md-table-cell"></th>
+					<th scope="col" class="d-md-none"></th>
+					<th
+						v-for="column in columnsPerBreakpoint"
+						:key="column.name"
+						:data-testid="`sessions-foot-${column.name}`"
+						scope="col"
+						class="align-top text-end"
+					>
+						{{ column.format(column.total) }}
+					</th>
+				</tr>
+			</tfoot>
+			<tbody>
+				<tr
+					v-for="(session, id) in filteredSessions"
+					:key="id"
+					role="button"
+					data-testid="sessions-entry"
+					@click="showDetails(session.id)"
+				>
+					<td class="ps-0">
+						{{ fmtFullDateTime(new Date(session.created), true) }}
+					</td>
+					<td class="d-none d-md-table-cell">
+						{{ session.loadpoint }}
+					</td>
+					<td class="d-none d-md-table-cell">
+						{{ session.vehicle }}
+					</td>
+					<td class="d-md-none text-truncate">
+						<div>{{ session.loadpoint }}</div>
+						<div>{{ session.vehicle }}</div>
+					</td>
+					<td v-for="column in columnsPerBreakpoint" :key="column.name" class="text-end">
+						<span v-if="column.value(session) === null" class="text-gray"> - </span>
+						<span v-else>{{ column.format(column.value(session)) }}</span>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+import CustomSelect from "../CustomSelect.vue";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import breakpoint from "../../mixins/breakpoint";
+import settings from "../../settings";
+
+const COLUMNS_PER_BREAKPOINT = {
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 4,
+	xl: 5,
+	xxl: 6,
+};
+
+export default {
+	name: "SessionTable",
+	components: { CustomSelect },
+	mixins: [formatter, breakpoint],
+	props: {
+		sessions: { type: Array, default: () => [] },
+		loadpointFilter: { type: String, default: "" },
+		vehicleFilter: { type: String, default: "" },
+		currency: { type: String },
+	},
+	data() {
+		return {
+			selectedColumns: settings.sessionColumns,
+		};
+	},
+	emits: ["show-session"],
+	computed: {
+		filteredSessions() {
+			return this.sessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
+		},
+		maxColumns() {
+			return COLUMNS_PER_BREAKPOINT[this.breakpoint] || 1;
+		},
+		columns() {
+			const columns = [
+				{
+					name: "energy",
+					unit: "kWh",
+					total: this.chargedEnergy,
+					value: (session) => session.chargedEnergy,
+					format: (value) => this.fmtWh(value * 1e3, POWER_UNIT.KW, false),
+				},
+				{
+					name: "solar",
+					unit: "%",
+					total: this.solarPercentage,
+					value: (session) => session.solarPercentage,
+					format: (value) => this.fmtNumber(value, 1),
+				},
+				{
+					name: "price",
+					unit: this.fmtCurrencySymbol(this.currency),
+					total: this.price,
+					value: (session) => session.price,
+					format: (value) => this.fmtMoney(value, this.currency),
+				},
+				{
+					name: "avgPrice",
+					unit: this.pricePerKWhUnit(this.currency),
+					total: this.pricePerKWh,
+					value: (session) => session.pricePerKWh,
+					format: (value) => this.fmtPricePerKWh(value, this.currency, false, false),
+				},
+				{
+					name: "co2",
+					unit: "g/kWh",
+					total: this.co2PerKWh,
+					value: (session) => session.co2PerKWh,
+					format: (value) => this.fmtNumber(value, 0),
+				},
+				{
+					name: "chargeDuration",
+					unit: "h:mm",
+					total: this.chargeDuration,
+					value: (session) => session.chargeDuration,
+					format: (value) => this.fmtDurationNs(value, false, "h"),
+				},
+				{
+					name: "avgPower",
+					unit: "kW",
+					total: this.avgPower,
+					value: (session) => {
+						if (session.chargedEnergy && session.chargeDuration) {
+							return session.chargedEnergy / this.nsToHours(session.chargeDuration);
+						}
+						return null;
+					},
+					format: (value) =>
+						value ? this.fmtW(value * 1e3, POWER_UNIT.KW, false, 1) : undefined,
+				},
+			];
+			// only columns with values are shown
+			return columns.filter((column) => {
+				if (column.name === "energy") return true;
+				return this.sessions.some((s) => column.value(s));
+			});
+		},
+		tooMuchColumns() {
+			return this.columns.length > this.maxColumns;
+		},
+		sortedColumns() {
+			const columns = [...this.columns];
+			let sorted = [];
+			for (let name of this.selectedColumns) {
+				if (!name && columns.length) {
+					sorted.push(columns.shift());
+				} else if (columns.some((c) => c.name === name)) {
+					const column = columns.find((c) => c.name === name);
+					sorted.push(column);
+					let index = columns.indexOf(column);
+					columns.splice(index, 1);
+				}
+			}
+			return sorted.concat(columns);
+		},
+		columnsPerBreakpoint() {
+			return this.sortedColumns.slice(0, this.maxColumns);
+		},
+		columnOptions() {
+			return this.columns.map((column) => {
+				return {
+					name: this.$t(`sessions.${column.name}`),
+					value: column.name,
+					disabled: this.columnsPerBreakpoint.find((c) => c.name === column.name),
+				};
+			});
+		},
+		vehicleFilterOptions() {
+			const options = [
+				{
+					name: this.$t("sessions.filter.allVehicles"),
+					value: "",
+					count: this.filterCountForVehicle(),
+				},
+			];
+			this.vehicles.forEach((name) => {
+				const count = this.filterCountForVehicle(name);
+				options.push({ name, value: name, count });
+			});
+			return options;
+		},
+		loadpointFilterOptions() {
+			const options = [
+				{
+					name: this.$t("sessions.filter.allLoadpoints"),
+					value: "",
+					count: this.filterCountForLoadpoint(),
+				},
+			];
+			this.loadpoints.forEach((name) => {
+				const count = this.filterCountForLoadpoint(name);
+				options.push({ name, value: name, count });
+			});
+			return options;
+		},
+		chargedEnergy() {
+			return this.filteredSessions.reduce((total, s) => total + s.chargedEnergy, 0);
+		},
+		chargeDuration() {
+			return this.filteredSessions.reduce((total, s) => total + s.chargeDuration, 0);
+		},
+		price() {
+			return this.filteredSessions.reduce((total, s) => total + s.price, 0);
+		},
+		avgPower() {
+			const { energy, hours } = this.filteredSessions
+				.filter((s) => s.chargedEnergy && s.chargeDuration)
+				.reduce(
+					(total, s) => {
+						total.energy += s.chargedEnergy;
+						total.hours += this.nsToHours(s.chargeDuration);
+						return total;
+					},
+					{ energy: 0, hours: 0 }
+				);
+			if (energy && hours) {
+				return energy / hours;
+			}
+			return null;
+		},
+		pricePerKWh() {
+			const total = this.filteredSessions
+				.filter((s) => s.price !== null)
+				.reduce(
+					(total, s) => ({
+						price: total.price + s.price,
+						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
+					}),
+					{ price: 0, chargedEnergy: 0 }
+				);
+			return total.price / total.chargedEnergy;
+		},
+		co2PerKWh() {
+			const total = this.filteredSessions
+				.filter((s) => s.co2PerKWh !== null)
+				.reduce(
+					(total, s) => ({
+						emittedCo2: total.emittedCo2 + s.chargedEnergy * s.co2PerKWh,
+						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
+					}),
+					{ emittedCo2: 0, chargedEnergy: 0 }
+				);
+			if (total.chargedEnergy && total.emittedCo2) {
+				return total.emittedCo2 / total.chargedEnergy;
+			}
+			return null;
+		},
+		solarPercentage() {
+			const total = this.filteredSessions
+				.filter((s) => s.solarPercentage !== null)
+				.reduce(
+					(total, s) => ({
+						chargedSolarEnergy:
+							total.chargedSolarEnergy + s.chargedEnergy * (s.solarPercentage / 100),
+						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
+					}),
+					{ chargedSolarEnergy: 0, chargedEnergy: 0 }
+				);
+
+			return (100 / total.chargedEnergy) * total.chargedSolarEnergy;
+		},
+		loadpoints() {
+			return [...new Set(this.sessions.map((s) => s.loadpoint))];
+		},
+		vehicles() {
+			return [...new Set(this.sessions.map((s) => s.vehicle))];
+		},
+	},
+	methods: {
+		nsToHours(ns) {
+			return ns / 1e9 / 3600;
+		},
+		filterByLoadpoint(session) {
+			return !this.loadpointFilter || session.loadpoint === this.loadpointFilter;
+		},
+		filterByVehicle(session) {
+			return !this.vehicleFilter || session.vehicle === this.vehicleFilter;
+		},
+		filterCountForVehicle(vehicle) {
+			return this.sessions
+				.filter(this.filterByLoadpoint)
+				.filter((s) => !vehicle || s.vehicle === vehicle).length;
+		},
+		filterCountForLoadpoint(loadpoint) {
+			return this.sessions
+				.filter(this.filterByVehicle)
+				.filter((s) => !loadpoint || s.loadpoint === loadpoint).length;
+		},
+		selectColumnPosition(index, value) {
+			this.selectedColumns[index] = value;
+			settings.sessionColumns = [...this.selectedColumns];
+		},
+		changeLoadpointFilter(event) {
+			const loadpoint = event.target.value || undefined;
+			this.$router.push({ query: { ...this.$route.query, loadpoint } });
+		},
+		changeVehicleFilter(event) {
+			const vehicle = event.target.value || undefined;
+			this.$router.push({ query: { ...this.$route.query, vehicle } });
+		},
+		showDetails(sessionId) {
+			this.$emit("show-session", sessionId);
+		},
+	},
+};
+</script>
+<style scoped>
+.table {
+	border-collapse: separate;
+	border-spacing: 0;
+}
+.table thead,
+.table tfoot {
+	background: var(--evcc-background);
+}
+.table tfoot th {
+	border-top-width: 2px;
+}
+.table thead th {
+	border-bottom-width: 2px;
+}
+.table tbody tr:last-child td {
+	border-bottom-width: 0;
+}
+
+.sticky-top,
+.sticky-bottom {
+	z-index: 1;
+}
+.sticky-top {
+	top: 6.5rem;
+}
+@media (min-width: 992px) {
+	.sticky-top {
+		top: 3rem;
+	}
+}
+.sticky-top th {
+	padding-top: max(0.5rem, env(safe-area-inset-top));
+}
+.table-outer {
+	position: relative;
+	top: calc(max(0.5rem, env(safe-area-inset-top)) * -1);
+}
+.month-header {
+	position: relative;
+	z-index: 2;
+}
+.sticky-bottom th {
+	padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+	border-bottom: none;
+}
+@media (max-width: 576px) {
+	.table td,
+	.table th {
+		width: 50%;
+	}
+	.table td:first-child,
+	.table th:first-child,
+	.table td:last-child,
+	.table th:last-child {
+		width: 25%;
+	}
+
+	.table td.text-truncate,
+	.table th.text-truncate {
+		max-width: 1px;
+	}
+}
+</style>
diff --git a/assets/js/components/Sessions/SolarGroupedChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
new file mode 100644
index 0000000000..9c452ab358
--- /dev/null
+++ b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -0,0 +1,138 @@
+<template>
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<PolarArea :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList :legends="legends" extra-class="flex-md-column" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { PolarArea } from "vue-chartjs";
+import { RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor } from "../../colors";
+import LegendList from "./LegendList.vue";
+
+registerChartComponents([RadialLinearScale, ArcElement, Legend, Tooltip]);
+
+const GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+export default {
+	name: "SolarGroupedChart",
+	components: { PolarArea, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		groupBy: { type: String, default: "loadpoint" },
+		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
+	},
+	mixins: [formatter],
+	computed: {
+		chartData() {
+			console.log("update solar grouped data");
+			const aggregatedData = {};
+
+			this.sessions.forEach((session) => {
+				const groupKey = session[this.groupBy];
+				if (!aggregatedData[groupKey]) {
+					aggregatedData[groupKey] = { grid: 0, self: 0 };
+				}
+				const charged = session.chargedEnergy;
+				const self = (charged / 100) * session.solarPercentage;
+				const grid = charged - self;
+				aggregatedData[groupKey].self += self;
+				aggregatedData[groupKey].grid += grid;
+			});
+
+			console.log("solar grouped data", aggregatedData);
+
+			// Sort the data by total energy in descending order
+			const sortedEntries = Object.entries(aggregatedData).sort(
+				(a, b) => b[1].grid + b[1].self - (a[1].grid + a[1].self)
+			);
+			const labels = sortedEntries.map(([label]) => label);
+			const data = sortedEntries.map(([, value]) => {
+				const total = value.grid + value.self;
+				const selfPercentage = (value.self / total) * 100;
+				return selfPercentage;
+			});
+
+			console.log("solar grouped data", labels, data);
+			const colorGroup = this.groupBy === GROUPS.NONE ? "solar" : this.groupBy;
+			const borderColors = labels.map((label) => this.colorMappings[colorGroup][label]);
+			const backgroundColors = borderColors.map((color) => dimColor(color));
+			return {
+				labels: labels,
+				datasets: [
+					{
+						data: data,
+						borderColor: borderColors,
+						backgroundColor: backgroundColors,
+					},
+				],
+			};
+		},
+		legends() {
+			return this.chartData.labels.map((label, index) => ({
+				label: label,
+				color: this.chartData.datasets[0].borderColor[index],
+				value: this.fmtPercentage(this.chartData.datasets[0].data[index], 1),
+			}));
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				aspectRatio: 1,
+				borderRadius: 8,
+				borderWidth: 3,
+				color: colors.text,
+				spacing: 0,
+				radius: "100%",
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						intersect: false,
+						mode: "index",
+						position: "topBottomCenter",
+						labelPointStyle: "circle",
+						callbacks: {
+							title: () => null,
+							label: (tooltipItem) => {
+								const { label, raw = 0 } = tooltipItem;
+								return label + ": " + this.fmtPercentage(raw, 1);
+							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
+						},
+					},
+				},
+				scales: {
+					r: {
+						min: 0,
+						max: 100,
+						ticks: {
+							stepSize: 25,
+							color: colors.muted,
+							backdropColor: colors.background,
+						},
+						grid: { color: colors.border },
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
new file mode 100644
index 0000000000..3cc035025a
--- /dev/null
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -0,0 +1,197 @@
+<template>
+	<div v-if="chartData.labels.length > 1" class="row">
+		<div class="col-12 col-md-6 mb-3">
+			<Radar :data="chartData" :options="options" />
+		</div>
+		<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
+			<LegendList
+				:legends="legends"
+				:grid="period === 'year'"
+				:extra-class="
+					period === 'year'
+						? 'justify-content-around me-3 flex-row'
+						: 'ps-3 flex-md-column'
+				"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import { Radar } from "vue-chartjs";
+import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter from "../../mixins/formatter";
+import colors, { dimColor, lightenColor } from "../../colors";
+import LegendList from "./LegendList.vue";
+
+registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
+
+export default {
+	name: "SolarYearChart",
+	components: { Radar, LegendList },
+	props: {
+		sessions: { type: Array, default: () => [] },
+		period: { type: String, default: "total" },
+	},
+	mixins: [formatter],
+	computed: {
+		firstDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[0].created);
+		},
+		lastDay() {
+			if (this.sessions.length === 0) {
+				return null;
+			}
+			return new Date(this.sessions[this.sessions.length - 1].created);
+		},
+		chartData() {
+			console.log("update solar month data");
+
+			if (!this.sessions.length > 0) return { labels: [], datasets: [] };
+
+			const firstYear = this.firstDay.getFullYear();
+			const lastYear = this.lastDay.getFullYear();
+
+			const result = {};
+
+			const years = [];
+
+			// initialize result for years and months
+			for (let year = lastYear; year >= firstYear; year--) {
+				const yearString = `${year}`;
+				years.push(yearString);
+				result[yearString] = {};
+				console.log("year", yearString);
+
+				for (let month = 1; month <= 12; month++) {
+					result[yearString][month] = {};
+				}
+			}
+
+			// Populate with actual data
+			this.sessions.forEach((session) => {
+				const date = new Date(session.created);
+				const year = `${date.getFullYear()}`;
+				const month = `${date.getMonth() + 1}`;
+
+				const charged = session.chargedEnergy;
+				const self = (charged / 100) * session.solarPercentage;
+				const grid = charged - self;
+				result[year][month].self = (result[year][month].self || 0) + self;
+				result[year][month].grid = (result[year][month].grid || 0) + grid;
+			});
+
+			const datasets = years.map((year) => {
+				const borderColor = lightenColor(colors.self, years.indexOf(year));
+				const backgroundColor = years.length === 1 ? dimColor(borderColor) : "transparent";
+				return {
+					backgroundColor,
+					borderColor,
+					label: year,
+					data: Object.values(result[year]).map(({ self = 0, grid = 0 }) => {
+						const total = self + grid;
+						return total === 0 ? null : (self / total) * 100;
+					}),
+					yearData: Object.values(result[year]).reduce(
+						(acc, { self = 0, grid = 0 }) => ({
+							self: acc.self + self,
+							grid: acc.grid + grid,
+						}),
+						{ self: 0, grid: 0 }
+					),
+				};
+			});
+
+			const labels = Object.keys(result[firstYear]).map((month) =>
+				this.fmtMonth(new Date(firstYear, month - 1, 1), true)
+			);
+
+			return {
+				labels,
+				datasets,
+			};
+		},
+		legends() {
+			if (this.period === "total") {
+				return this.chartData.datasets.map((dataset) => {
+					const label = dataset.label;
+					const { self, grid } = dataset.yearData;
+					const total = self + grid;
+					const value = total === 0 ? "- %" : this.fmtPercentage((self / total) * 100, 1);
+					return {
+						label,
+						color: dataset.borderColor,
+						value,
+					};
+				});
+			} else {
+				return this.chartData.labels.map((label, index) => {
+					const value = this.chartData.datasets[0].data[index];
+					return {
+						label,
+						value:
+							value === null
+								? "- %"
+								: this.fmtPercentage(this.chartData.datasets[0].data[index], 1),
+					};
+				});
+			}
+		},
+		options() {
+			return {
+				...commonOptions,
+				locale: this.$i18n?.locale,
+				aspectRatio: 1,
+				borderWidth: 4,
+				color: colors.text,
+				spacing: 0,
+				radius: "100%",
+				elements: { line: { tension: 0.05 } },
+				plugins: {
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						intersect: false,
+						mode: "index",
+						position: "topBottomCenter",
+						labelPointStyle: "circle",
+						callbacks: {
+							label: (tooltipItem) => {
+								const value = tooltipItem.raw || 0;
+								const datasetLabel = tooltipItem.dataset.label || "";
+								return datasetLabel + ": " + this.fmtPercentage(value, 1);
+							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
+						},
+					},
+				},
+				scales: {
+					r: {
+						min: 0,
+						max: 100,
+						beginAtZero: false,
+						ticks: {
+							stepSize: 20,
+							color: colors.muted,
+							backdropColor: colors.background,
+							font: { size: 10 },
+							callback: (value) => this.fmtPercentage(value, 0),
+						},
+						angleLines: { display: false },
+						grid: { color: colors.border },
+					},
+				},
+			};
+		},
+	},
+};
+</script>
diff --git a/assets/js/components/Sessions/chartConfig.js b/assets/js/components/Sessions/chartConfig.js
new file mode 100644
index 0000000000..eedac10c69
--- /dev/null
+++ b/assets/js/components/Sessions/chartConfig.js
@@ -0,0 +1,53 @@
+import { Chart, Tooltip } from "chart.js";
+
+// Register common components
+export function registerChartComponents(components) {
+  Chart.register(...components);
+}
+
+// Set default configurations immediately
+Chart.defaults.font.family = window
+  .getComputedStyle(document.documentElement)
+  .getPropertyValue("--bs-font-sans-serif");
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+
+// Custom tooltip positioners
+Tooltip.positioners.center = function () {
+  const { chart } = this;
+  return {
+    x: chart.width / 2,
+    y: chart.height / 2,
+    xAlign: "center",
+    yAlign: "center",
+  };
+};
+
+Tooltip.positioners.topBottomCenter = function (context, eventPosition) {
+  const { chart } = this;
+  const { height, width } = chart;
+
+  const isTop = eventPosition.y > height / 2;
+  const yPadding = height / 5;
+  const y = isTop ? yPadding : height - yPadding;
+  const x = width / 2;
+
+  return { x, y, xAlign: "center", yAlign: "center" };
+};
+
+export const commonOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      backgroundColor: "#000000cc",
+      boxPadding: 5,
+      usePointStyle: true,
+      borderWidth: 0.00001,
+      labelPointStyle: "circle",
+    },
+  },
+};
diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
index bca36bb559..d65dd595e2 100644
--- a/assets/js/mixins/formatter.js
+++ b/assets/js/mixins/formatter.js
@@ -82,6 +82,24 @@ export default {
         maximumFractionDigits: decimals,
       }).format(number);
     },
+    fmtGrams: function (gramms, withUnit = true) {
+      // handle gram, kilogram, tonne
+      let unit = "gram";
+      let value = gramms;
+      if (gramms >= 1000000) {
+        unit = "tonne";
+        value = gramms / 1000000;
+      } else if (gramms >= 1000) {
+        unit = "kilogram";
+        value = gramms / 1000;
+      }
+      return new Intl.NumberFormat(this.$i18n?.locale, {
+        style: withUnit ? "unit" : "decimal",
+        unit,
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+      }).format(value);
+    },
     fmtCo2Short: function (gramms) {
       return `${this.fmtNumber(gramms, 0)} g`;
     },
@@ -203,6 +221,11 @@ export default {
         month: short ? "short" : "long",
       }).format(date);
     },
+    fmtYear: function (date) {
+      return new Intl.DateTimeFormat(this.$i18n?.locale, {
+        year: "numeric",
+      }).format(date);
+    },
     fmtDayMonthYear: function (date) {
       return new Intl.DateTimeFormat(this.$i18n?.locale, {
         day: "numeric",
@@ -210,16 +233,23 @@ export default {
         year: "numeric",
       }).format(date);
     },
-    fmtMoney: function (amout = 0, currency = "EUR", decimals = true) {
-      return new Intl.NumberFormat(this.$i18n?.locale, {
+    fmtDayMonth: function (date) {
+      return new Intl.DateTimeFormat(this.$i18n?.locale, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+      }).format(date);
+    },
+    fmtMoney: function (amout = 0, currency = "EUR", decimals = true, withSymbol = false) {
+      const currencyDisplay = withSymbol ? "narrowSymbol" : "code";
+      const result = new Intl.NumberFormat(this.$i18n?.locale, {
         style: "currency",
         currency,
-        currencyDisplay: "code",
+        currencyDisplay,
         maximumFractionDigits: decimals ? undefined : 0,
-      })
-        .format(amout)
-        .replace(currency, "")
-        .trim();
+      }).format(amout);
+
+      return withSymbol ? result : result.replace(currency, "").trim();
     },
     fmtCurrencySymbol: function (currency = "EUR") {
       const symbols = { EUR: "€", USD: "$" };
diff --git a/assets/js/router.js b/assets/js/router.js
index 2bdaaab6e1..fdec316e2f 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -41,12 +41,13 @@ export default function setupRouter(i18n) {
       },
       {
         path: "/sessions",
-        component: () => import("./views/ChargingSessions.vue"),
+        component: () => import("./views/Sessions.vue"),
         props: (route) => {
-          const { month, year, loadpoint, vehicle } = route.query;
+          const { month, year, loadpoint, vehicle, period } = route.query;
           return {
             month: month ? parseInt(month, 10) : undefined,
             year: year ? parseInt(year, 10) : undefined,
+            period,
             loadpointFilter: loadpoint,
             vehicleFilter: vehicle,
           };
diff --git a/assets/js/settings.js b/assets/js/settings.js
index 7cf9bc41a5..f0d5b37dc7 100644
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -9,6 +9,9 @@ const SESSION_INFO = "session_info";
 const SESSION_COLUMNS = "session_columns";
 const SAVINGS_PERIOD = "savings_period";
 const SAVINGS_REGION = "savings_region";
+const SESSIONS_SOLAR_GROUP = "sessions_solar_group";
+const SESSIONS_COST_GROUP = "sessions_cost_group";
+const SESSIONS_COST_TYPE = "sessions_cost_type";
 
 function read(key) {
   return window.localStorage[key];
@@ -60,6 +63,9 @@ const settings = reactive({
   sessionColumns: readArray(SESSION_COLUMNS),
   savingsPeriod: read(SAVINGS_PERIOD),
   savingsRegion: read(SAVINGS_REGION),
+  sessionsSolarGroup: read(SESSIONS_SOLAR_GROUP),
+  sessionsCostGroup: read(SESSIONS_COST_GROUP),
+  sessionsCostType: read(SESSIONS_COST_TYPE),
 });
 
 watch(() => settings.locale, save(SETTINGS_LOCALE));
@@ -71,5 +77,7 @@ watch(() => settings.sessionInfo, saveArray(SESSION_INFO));
 watch(() => settings.sessionColumns, saveArray(SESSION_COLUMNS));
 watch(() => settings.savingsPeriod, save(SAVINGS_PERIOD));
 watch(() => settings.savingsRegion, save(SAVINGS_REGION));
-
+watch(() => settings.sessionsSolarGroup, save(SESSIONS_SOLAR_GROUP));
+watch(() => settings.sessionsCostGroup, save(SESSIONS_COST_GROUP));
+watch(() => settings.sessionsCostType, save(SESSIONS_COST_TYPE));
 export default settings;
diff --git a/assets/js/types/shopicons.d.ts b/assets/js/types/shopicons.d.ts
new file mode 100644
index 0000000000..1d4d8e5d86
--- /dev/null
+++ b/assets/js/types/shopicons.d.ts
@@ -0,0 +1,2 @@
+declare module "@h2d2/shopicons/es/regular/*";
+declare module "@h2d2/shopicons/es/filled/*";
diff --git a/assets/js/views/ChargingSessions.vue b/assets/js/views/ChargingSessions.vue
deleted file mode 100644
index 718c0b382f..0000000000
--- a/assets/js/views/ChargingSessions.vue
+++ /dev/null
@@ -1,667 +0,0 @@
-<template>
-	<div class="container px-4 safe-area-inset">
-		<TopHeader :title="$t('sessions.title')" />
-		<div class="row">
-			<main class="col-12">
-				<div
-					class="d-flex align-items-baseline justify-content-between my-3 my-md-5 month-header"
-				>
-					<router-link
-						class="d-flex text-decoration-none align-items-center"
-						:class="{ 'pe-none': !hasPrev, 'text-muted': !hasPrev }"
-						:to="{ query: { ...$route.query, ...prevYearMonth } }"
-					>
-						<shopicon-regular-angledoubleleftsmall
-							size="s"
-							class="me-1"
-						></shopicon-regular-angledoubleleftsmall>
-						<span class="d-none d-sm-block">{{ prevMonthName }}</span>
-						<span class="d-block d-sm-none">{{ prevMonthNameShort }}</span>
-					</router-link>
-					<h2 class="text-center">{{ headline }}</h2>
-					<router-link
-						class="d-flex text-decoration-none align-items-center"
-						:class="{ 'pe-none': !hasNext, 'text-muted': !hasNext }"
-						:to="{ query: { ...$route.query, ...nextYearMonth } }"
-					>
-						<span class="d-none d-sm-block">{{ nextMonthName }}</span>
-						<span class="d-block d-sm-none">{{ nextMonthNameShort }}</span>
-						<shopicon-regular-angledoublerightsmall
-							size="s"
-							class="ms-1"
-						></shopicon-regular-angledoublerightsmall>
-					</router-link>
-				</div>
-				<div v-if="currentSessions.length === 0" data-testid="sessions-nodata" class="my-5">
-					<p>{{ $t("sessions.noData") }}</p>
-				</div>
-				<div v-else class="my-3 my-md-5 table-outer">
-					<table class="table text-nowrap">
-						<thead class="sticky-top">
-							<tr data-testid="sessions-head">
-								<th scope="col" class="align-top ps-0">
-									{{ $t("sessions.date") }}
-								</th>
-								<th
-									scope="col"
-									class="align-top d-none d-md-table-cell"
-									data-testid="loadpoint"
-								>
-									{{ $t("sessions.loadpoint") }}
-									<CustomSelect
-										:selected="loadpointFilter"
-										:options="loadpointFilterOptions"
-										data-testid="filter-loadpoint"
-										@change="changeLoadpointFilter"
-									>
-										<span
-											class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
-										>
-											{{ loadpointFilter || $t("sessions.filter.filter") }}
-										</span>
-									</CustomSelect>
-								</th>
-								<th
-									scope="col"
-									class="align-top d-none d-md-table-cell"
-									data-testid="vehicle"
-								>
-									{{ $t("sessions.vehicle") }}
-									<CustomSelect
-										:selected="vehicleFilter"
-										:options="vehicleFilterOptions"
-										data-testid="filter-vehicle"
-										@change="changeVehicleFilter"
-									>
-										<span
-											class="fw-normal text-decoration-underline text-nowrap text-gray pe-none"
-										>
-											{{ vehicleFilter || $t("sessions.filter.filter") }}
-										</span>
-									</CustomSelect>
-								</th>
-								<th scope="col" class="align-top d-md-none text-truncate">
-									<div class="d-flex flex-wrap text-truncate">
-										<div class="me-2 text-truncate">
-											{{ $t("sessions.loadpoint") }}
-										</div>
-										<CustomSelect
-											:selected="loadpointFilter"
-											:options="loadpointFilterOptions"
-											data-testid="filter-loadpoint"
-											@change="changeLoadpointFilter"
-										>
-											<span
-												class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
-											>
-												{{
-													loadpointFilter || $t("sessions.filter.filter")
-												}}
-											</span>
-										</CustomSelect>
-									</div>
-									<div class="text-truncate d-flex flex-wrap">
-										<div class="me-2 text-truncate">
-											{{ $t("sessions.vehicle") }}
-										</div>
-										<CustomSelect
-											:selected="vehicleFilter"
-											:options="vehicleFilterOptions"
-											data-testid="filter-vehicle"
-											@change="changeVehicleFilter"
-										>
-											<span
-												class="fw-normal text-decoration-underline text-nowrap text-gray pe-none text-truncate"
-											>
-												{{ vehicleFilter || $t("sessions.filter.filter") }}
-											</span>
-										</CustomSelect>
-									</div>
-								</th>
-								<th
-									v-for="(column, index) in columnsPerBreakpoint"
-									:key="column.name"
-									scope="col"
-									:data-testid="`sessions-head-${column.name}`"
-									class="align-top text-end"
-								>
-									<CustomSelect
-										v-if="tooMuchColumns"
-										:selected="column.name"
-										:options="columnOptions"
-										data-testid="column"
-										@change="selectColumnPosition(index, $event.target.value)"
-									>
-										<span class="text-decoration-underline">
-											{{ $t(`sessions.${column.name}`) }}
-										</span>
-									</CustomSelect>
-									<span v-else>
-										{{ $t(`sessions.${column.name}`) }}
-									</span>
-									<div class="text-gray fw-normal">{{ column.unit }}</div>
-								</th>
-							</tr>
-						</thead>
-						<tfoot class="sticky-bottom">
-							<tr data-testid="sessions-foot">
-								<th scope="col" class="align-top ps-0">
-									{{ $t("sessions.total") }}
-								</th>
-								<th scope="col" class="d-none d-md-table-cell"></th>
-								<th scope="col" class="d-none d-md-table-cell"></th>
-								<th scope="col" class="d-md-none"></th>
-								<th
-									v-for="column in columnsPerBreakpoint"
-									:key="column.name"
-									:data-testid="`sessions-foot-${column.name}`"
-									scope="col"
-									class="align-top text-end"
-								>
-									{{ column.format(column.total) }}
-								</th>
-							</tr>
-						</tfoot>
-						<tbody>
-							<tr
-								v-for="(session, id) in filteredSessions"
-								:key="id"
-								role="button"
-								data-testid="sessions-entry"
-								@click="showDetails(session.id)"
-							>
-								<td class="ps-0">
-									{{ fmtFullDateTime(new Date(session.created), true) }}
-								</td>
-								<td class="d-none d-md-table-cell">
-									{{ session.loadpoint }}
-								</td>
-								<td class="d-none d-md-table-cell">
-									{{ session.vehicle }}
-								</td>
-								<td class="d-md-none text-truncate">
-									<div>{{ session.loadpoint }}</div>
-									<div>{{ session.vehicle }}</div>
-								</td>
-								<td
-									v-for="column in columnsPerBreakpoint"
-									:key="column.name"
-									class="text-end"
-								>
-									<span v-if="column.value(session) === null" class="text-gray">
-										-
-									</span>
-									<span v-else>{{ column.format(column.value(session)) }}</span>
-								</td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
-				<div class="d-grid gap-2 d-md-block mt-3 mb-5">
-					<a
-						v-if="currentSessions.length"
-						class="btn btn-outline-secondary text-nowrap me-md-2"
-						:href="csvLink"
-						download
-					>
-						{{ $t("sessions.csvMonth", { month: headline }) }}
-					</a>
-					<a
-						v-if="sessions.length"
-						class="btn btn-outline-secondary text-nowrap"
-						:href="csvTotalLink"
-						download
-					>
-						{{ $t("sessions.csvTotal") }}
-					</a>
-				</div>
-			</main>
-			<ChargingSessionModal
-				:session="selectedSession"
-				:vehicles="vehicleList"
-				:currency="currency"
-				@session-changed="loadSessions"
-			/>
-		</div>
-	</div>
-</template>
-
-<script>
-import Modal from "bootstrap/js/dist/modal";
-import "@h2d2/shopicons/es/regular/angledoubleleftsmall";
-import "@h2d2/shopicons/es/regular/angledoublerightsmall";
-import formatter, { POWER_UNIT } from "../mixins/formatter";
-import api from "../api";
-import store from "../store";
-import CustomSelect from "../components/CustomSelect.vue";
-import ChargingSessionModal from "../components/ChargingSessionModal.vue";
-import breakpoint from "../mixins/breakpoint";
-import settings from "../settings";
-import TopHeader from "../components/TopHeader.vue";
-
-const COLUMNS_PER_BREAKPOINT = {
-	xs: 1,
-	sm: 2,
-	md: 3,
-	lg: 4,
-	xl: 5,
-	xxl: 6,
-};
-
-export default {
-	name: "ChargingSessions",
-	components: { ChargingSessionModal, CustomSelect, TopHeader },
-	mixins: [formatter, breakpoint],
-	props: {
-		notifications: Array,
-		month: { type: Number, default: () => new Date().getMonth() + 1 },
-		year: { type: Number, default: () => new Date().getFullYear() },
-		loadpointFilter: { type: String, default: "" },
-		vehicleFilter: { type: String, default: "" },
-	},
-	data() {
-		return {
-			sessions: [],
-			selectedSessionId: undefined,
-			selectedColumns: settings.sessionColumns,
-		};
-	},
-	head() {
-		return { title: `${this.$t("sessions.title")} | evcc` };
-	},
-	computed: {
-		topNavigation: function () {
-			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
-			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
-		},
-		currentSessions() {
-			const sessionsWithDefaults = this.sessions.map((session) => {
-				const loadpoint = session.loadpoint || this.$t("main.loadpoint.fallbackName");
-				const vehicle = session.vehicle || this.$t("main.vehicle.unknown");
-				return { ...session, loadpoint, vehicle };
-			});
-
-			return sessionsWithDefaults.filter((session) => {
-				const date = new Date(session.created);
-				return date.getFullYear() === this.year && date.getMonth() + 1 === this.month;
-			});
-		},
-		filteredSessions() {
-			return this.currentSessions.filter(this.filterByLoadpoint).filter(this.filterByVehicle);
-		},
-		maxColumns() {
-			return COLUMNS_PER_BREAKPOINT[this.breakpoint] || 1;
-		},
-		columns() {
-			const columns = [
-				{
-					name: "energy",
-					unit: "kWh",
-					total: this.chargedEnergy,
-					value: (session) => session.chargedEnergy,
-					format: (value) => this.fmtWh(value * 1e3, POWER_UNIT.KW, false),
-				},
-				{
-					name: "solar",
-					unit: "%",
-					total: this.solarPercentage,
-					value: (session) => session.solarPercentage,
-					format: (value) => this.fmtNumber(value, 1),
-				},
-				{
-					name: "price",
-					unit: this.fmtCurrencySymbol(this.currency),
-					total: this.price,
-					value: (session) => session.price,
-					format: (value) => this.fmtMoney(value, this.currency),
-				},
-				{
-					name: "avgPrice",
-					unit: this.pricePerKWhUnit(this.currency),
-					total: this.pricePerKWh,
-					value: (session) => session.pricePerKWh,
-					format: (value) => this.fmtPricePerKWh(value, this.currency, false, false),
-				},
-				{
-					name: "co2",
-					unit: "g/kWh",
-					total: this.co2PerKWh,
-					value: (session) => session.co2PerKWh,
-					format: (value) => this.fmtNumber(value, 0),
-				},
-				{
-					name: "chargeDuration",
-					unit: "h:mm",
-					total: this.chargeDuration,
-					value: (session) => session.chargeDuration,
-					format: (value) => this.fmtDurationNs(value, false, "h"),
-				},
-				{
-					name: "avgPower",
-					unit: "kW",
-					total: this.avgPower,
-					value: (session) => {
-						if (session.chargedEnergy && session.chargeDuration) {
-							return session.chargedEnergy / this.nsToHours(session.chargeDuration);
-						}
-						return null;
-					},
-					format: (value) =>
-						value ? this.fmtW(value * 1e3, POWER_UNIT.KW, false, 1) : undefined,
-				},
-			];
-			// only columns with values are shown
-			return columns.filter((column) => {
-				if (column.name === "energy") return true;
-				return this.currentSessions.some((s) => column.value(s));
-			});
-		},
-		tooMuchColumns() {
-			return this.columns.length > this.maxColumns;
-		},
-		sortedColumns() {
-			const columns = [...this.columns];
-			let sorted = [];
-			for (let name of this.selectedColumns) {
-				if (!name && columns.length) {
-					sorted.push(columns.shift());
-				} else if (columns.some((c) => c.name === name)) {
-					const column = columns.find((c) => c.name === name);
-					sorted.push(column);
-					let index = columns.indexOf(column);
-					columns.splice(index, 1);
-				}
-			}
-			return sorted.concat(columns);
-		},
-		columnsPerBreakpoint() {
-			return this.sortedColumns.slice(0, this.maxColumns);
-		},
-		columnOptions() {
-			return this.columns.map((column) => {
-				return {
-					name: this.$t(`sessions.${column.name}`),
-					value: column.name,
-					disabled: this.columnsPerBreakpoint.find((c) => c.name === column.name),
-				};
-			});
-		},
-		vehicleFilterOptions() {
-			const options = [
-				{
-					name: this.$t("sessions.filter.allVehicles"),
-					value: "",
-					count: this.filterCountForVehicle(),
-				},
-			];
-			this.vehicles.forEach((name) => {
-				const count = this.filterCountForVehicle(name);
-				options.push({ name, value: name, count });
-			});
-			return options;
-		},
-		loadpointFilterOptions() {
-			const options = [
-				{
-					name: this.$t("sessions.filter.allLoadpoints"),
-					value: "",
-					count: this.filterCountForLoadpoint(),
-				},
-			];
-			this.loadpoints.forEach((name) => {
-				const count = this.filterCountForLoadpoint(name);
-				options.push({ name, value: name, count });
-			});
-			return options;
-		},
-		chargedEnergy() {
-			return this.filteredSessions.reduce((total, s) => total + s.chargedEnergy, 0);
-		},
-		chargeDuration() {
-			return this.filteredSessions.reduce((total, s) => total + s.chargeDuration, 0);
-		},
-		price() {
-			return this.filteredSessions.reduce((total, s) => total + s.price, 0);
-		},
-		avgPower() {
-			const { energy, hours } = this.filteredSessions
-				.filter((s) => s.chargedEnergy && s.chargeDuration)
-				.reduce(
-					(total, s) => {
-						total.energy += s.chargedEnergy;
-						total.hours += this.nsToHours(s.chargeDuration);
-						return total;
-					},
-					{ energy: 0, hours: 0 }
-				);
-			if (energy && hours) {
-				return energy / hours;
-			}
-			return null;
-		},
-		pricePerKWh() {
-			const total = this.filteredSessions
-				.filter((s) => s.price !== null)
-				.reduce(
-					(total, s) => ({
-						price: total.price + s.price,
-						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
-					}),
-					{ price: 0, chargedEnergy: 0 }
-				);
-			return total.price / total.chargedEnergy;
-		},
-		co2PerKWh() {
-			const total = this.filteredSessions
-				.filter((s) => s.co2PerKWh !== null)
-				.reduce(
-					(total, s) => ({
-						emittedCo2: total.emittedCo2 + s.chargedEnergy * s.co2PerKWh,
-						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
-					}),
-					{ emittedCo2: 0, chargedEnergy: 0 }
-				);
-			if (total.chargedEnergy && total.emittedCo2) {
-				return total.emittedCo2 / total.chargedEnergy;
-			}
-			return null;
-		},
-		solarPercentage() {
-			const total = this.filteredSessions
-				.filter((s) => s.solarPercentage !== null)
-				.reduce(
-					(total, s) => ({
-						chargedSolarEnergy:
-							total.chargedSolarEnergy + s.chargedEnergy * (s.solarPercentage / 100),
-						chargedEnergy: total.chargedEnergy + s.chargedEnergy,
-					}),
-					{ chargedSolarEnergy: 0, chargedEnergy: 0 }
-				);
-
-			return (100 / total.chargedEnergy) * total.chargedSolarEnergy;
-		},
-		loadpoints() {
-			return [...new Set(this.currentSessions.map((s) => s.loadpoint))];
-		},
-		vehicles() {
-			return [...new Set(this.currentSessions.map((s) => s.vehicle))];
-		},
-		vehicleList() {
-			const vehicles = store.state.vehicles || {};
-			return Object.entries(vehicles).map(([name, vehicle]) => ({ name, ...vehicle }));
-		},
-		selectedSession() {
-			return this.sessions.find((s) => s.id == this.selectedSessionId);
-		},
-		currency() {
-			return store.state.currency;
-		},
-		headline() {
-			const date = new Date();
-			date.setMonth(this.month - 1, 1);
-			date.setFullYear(this.year);
-			return this.fmtMonthYear(date);
-		},
-		csvLink() {
-			return this.csvHrefLink(this.year, this.month);
-		},
-		csvTotalLink() {
-			return this.csvHrefLink();
-		},
-		prevDate() {
-			const date = new Date();
-			date.setFullYear(this.year);
-			date.setMonth(this.month - 2, 1);
-			return date;
-		},
-		prevYearMonth() {
-			return { year: this.prevDate.getFullYear(), month: this.prevDate.getMonth() + 1 };
-		},
-		prevMonthName() {
-			return this.fmtMonth(this.prevDate);
-		},
-		prevMonthNameShort() {
-			return this.fmtMonth(this.prevDate, true);
-		},
-		nextDate() {
-			const date = new Date();
-			date.setFullYear(this.year);
-			date.setMonth(this.month, 1);
-			return date;
-		},
-		nextYearMonth() {
-			return { year: this.nextDate.getFullYear(), month: this.nextDate.getMonth() + 1 };
-		},
-		nextMonthName() {
-			return this.fmtMonth(this.nextDate);
-		},
-		nextMonthNameShort() {
-			return this.fmtMonth(this.nextDate, true);
-		},
-		hasNext() {
-			const now = new Date();
-			return this.year < now.getFullYear() || this.month < now.getMonth() + 1;
-		},
-		hasPrev() {
-			const length = this.sessions.length;
-			if (length === 0) {
-				return false;
-			}
-			const first = new Date(this.sessions[length - 1].created);
-			return this.year > first.getFullYear() || this.month > first.getMonth() + 1;
-		},
-	},
-	mounted() {
-		this.loadSessions();
-	},
-	methods: {
-		nsToHours(ns) {
-			return ns / 1e9 / 3600;
-		},
-		filterByLoadpoint(session) {
-			return !this.loadpointFilter || session.loadpoint === this.loadpointFilter;
-		},
-		filterByVehicle(session) {
-			return !this.vehicleFilter || session.vehicle === this.vehicleFilter;
-		},
-		filterCountForVehicle(vehicle) {
-			return this.currentSessions
-				.filter(this.filterByLoadpoint)
-				.filter((s) => !vehicle || s.vehicle === vehicle).length;
-		},
-		filterCountForLoadpoint(loadpoint) {
-			return this.currentSessions
-				.filter(this.filterByVehicle)
-				.filter((s) => !loadpoint || s.loadpoint === loadpoint).length;
-		},
-		selectColumnPosition(index, value) {
-			this.selectedColumns[index] = value;
-			settings.sessionColumns = [...this.selectedColumns];
-		},
-		changeLoadpointFilter(event) {
-			const loadpoint = event.target.value || undefined;
-			this.$router.push({ query: { ...this.$route.query, loadpoint } });
-		},
-		changeVehicleFilter(event) {
-			const vehicle = event.target.value || undefined;
-			this.$router.push({ query: { ...this.$route.query, vehicle } });
-		},
-		async loadSessions() {
-			const response = await api.get("sessions");
-			this.sessions = response.data?.result;
-		},
-		showDetails(sessionId) {
-			this.selectedSessionId = sessionId;
-			const modal = Modal.getOrCreateInstance(document.getElementById("sessionDetailsModal"));
-			modal.show();
-		},
-		csvHrefLink(year, month) {
-			const params = new URLSearchParams({
-				format: "csv",
-				lang: this.$i18n?.locale,
-			});
-			if (year && month) {
-				params.append("year", year);
-				params.append("month", month);
-			}
-			return `./api/sessions?${params.toString()}`;
-		},
-	},
-};
-</script>
-<style scoped>
-.table {
-	border-collapse: separate;
-	border-spacing: 0;
-}
-.table thead,
-.table tfoot {
-	background: var(--evcc-background);
-}
-.table tfoot th {
-	border-top-width: 2px;
-}
-.table thead th {
-	border-bottom-width: 2px;
-}
-.table tbody tr:last-child td {
-	border-bottom-width: 0;
-}
-
-.sticky-top,
-.sticky-bottom {
-	z-index: 1;
-}
-.sticky-top th {
-	padding-top: max(0.5rem, env(safe-area-inset-top));
-}
-.table-outer {
-	position: relative;
-	top: calc(max(0.5rem, env(safe-area-inset-top)) * -1);
-}
-.month-header {
-	position: relative;
-	z-index: 2;
-}
-.sticky-bottom th {
-	padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
-	border-bottom: none;
-}
-@media (max-width: 576px) {
-	.table td,
-	.table th {
-		width: 50%;
-	}
-	.table td:first-child,
-	.table th:first-child,
-	.table td:last-child,
-	.table th:last-child {
-		width: 25%;
-	}
-
-	.table td.text-truncate,
-	.table th.text-truncate {
-		max-width: 1px;
-	}
-}
-</style>
diff --git a/assets/js/views/Sessions.vue b/assets/js/views/Sessions.vue
new file mode 100644
index 0000000000..c09a7c41b9
--- /dev/null
+++ b/assets/js/views/Sessions.vue
@@ -0,0 +1,702 @@
+<template>
+	<div class="container px-4 safe-area-inset">
+		<TopHeader :title="$t('sessions.title')" />
+		<div class="row">
+			<main class="col-12">
+				<div class="header-outer sticky-top mb-3">
+					<div class="container">
+						<div class="row py-2 py-sm-3 d-flex flex-column flex-sm-row gap-2 gap-lg-0">
+							<div class="col-lg-5 d-flex mb-lg-0">
+								<PeriodSelector
+									:period="period"
+									:periodOptions="periodOptions"
+									@update:period="changePeriod"
+								/>
+							</div>
+							<div v-if="showDateNavigator" class="col-lg-6 offset-lg-1">
+								<DateNavigator
+									:month="month"
+									:year="year"
+									:startDate="startDate"
+									:showMonth="showMonthNavigation"
+									:showYear="showYearNavigation"
+									@update-date="updateDate"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="d-flex justify-content-between align-items-center gap-2">
+					<h3
+						class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden"
+					>
+						<span class="d-block no-wrap text-truncate">{{ energyTitle }}</span>
+						<small class="d-block no-wrap text-truncate">{{ energySubTitle }}</small>
+					</h3>
+					<IconSelectGroup>
+						<IconSelectItem
+							v-for="group in Object.values(solarGroups)"
+							:key="group"
+							:active="selectedSolarGroup === group"
+							@click="updateSolarGroup(group)"
+						>
+							<component :is="solarGroupIcons[group]"></component>
+						</IconSelectItem>
+					</IconSelectGroup>
+				</div>
+				<EnergyHistoryChart
+					class="mb-5"
+					:sessions="currentSessions"
+					:color-mappings="colorMappings"
+					:group-by="selectedSolarGroup"
+					:period="period"
+				/>
+				<div v-if="showExtraCharts" class="row align-items-start">
+					<div class="col-12 col-lg-6 mb-5">
+						<h3 class="fw-normal my-4">{{ solarTitle }}</h3>
+						<SolarYearChart
+							v-if="showSolarYearChart"
+							:period="period"
+							:sessions="currentSessions"
+						/>
+						<SolarGroupedChart
+							v-else
+							:sessions="currentSessions"
+							:color-mappings="colorMappings"
+							:group-by="selectedSolarGroup"
+						/>
+					</div>
+					<div class="col-12 col-lg-6 mb-5">
+						<h3 class="fw-normal my-4">{{ energyGroupedTitle }}</h3>
+						<EnergyGroupedChart
+							:sessions="currentSessions"
+							:color-mappings="colorMappings"
+							:group-by="selectedSolarGroup"
+						/>
+					</div>
+				</div>
+				<div v-if="showCostCharts">
+					<div class="d-flex justify-content-between align-items-center gap-2">
+						<h3
+							class="fw-normal my-0 d-flex gap-2 flex-wrap d-flex align-items-baseline overflow-hidden"
+						>
+							<span class="d-block no-wrap text-truncate">{{ costTitle }}</span>
+							<small class="d-block no-wrap text-truncate">{{ costSubTitle }}</small>
+						</h3>
+						<div class="d-flex gap-2">
+							<IconSelectGroup v-if="showCostTypeSelector">
+								<IconSelectItem
+									:active="selectedCostType === costTypes.PRICE"
+									@click="updateCostType(costTypes.PRICE)"
+								>
+									<DynamicPriceIcon />
+								</IconSelectItem>
+								<IconSelectItem
+									:active="selectedCostType === costTypes.CO2"
+									@click="updateCostType(costTypes.CO2)"
+								>
+									<shopicon-regular-eco1></shopicon-regular-eco1>
+								</IconSelectItem>
+							</IconSelectGroup>
+							<IconSelectGroup>
+								<IconSelectItem
+									v-for="group in Object.values(costGroups)"
+									:key="group"
+									:active="selectedCostGroup === group"
+									@click="updateCostGroup(group)"
+								>
+									<component :is="costGroupIcons[group]"></component>
+								</IconSelectItem>
+							</IconSelectGroup>
+						</div>
+					</div>
+					<CostHistoryChart
+						class="mb-5"
+						:sessions="currentCostTypeSessions"
+						:color-mappings="colorMappings"
+						:group-by="selectedCostGroup"
+						:cost-type="activeCostType"
+						:period="period"
+					/>
+					<div v-if="showExtraCharts" class="row align-items-start">
+						<div class="col-12 col-lg-6 mb-5">
+							<h3 class="fw-normal my-4">{{ avgCostTitle }}</h3>
+							<CostYearChart
+								:period="period"
+								:sessions="currentCostTypeSessions"
+								:cost-type="activeCostType"
+							/>
+						</div>
+						<div class="col-12 col-lg-6 mb-5">
+							<h3 class="fw-normal my-4">{{ costGroupedTitle }}</h3>
+						</div>
+					</div>
+				</div>
+				<div v-if="showTable">
+					<h3>Übersicht</h3>
+					<SessionTable
+						:sessions="currentSessions"
+						:vehicleFilter="vehicleFilter"
+						:loadpointFilter="loadpointFilter"
+						:currency="currency"
+						@show-session="showDetails"
+					/>
+					<div class="d-grid gap-2 d-md-block mt-3 mb-5">
+						<a
+							v-if="currentSessions.length"
+							class="btn btn-sm btn-outline-secondary text-nowrap me-md-2"
+							:href="csvLink"
+							download
+						>
+							{{ $t("sessions.csvMonth", { month: headline }) }}
+						</a>
+						<a
+							v-if="sessions.length"
+							class="btn btn-sm btn-outline-secondary text-nowrap"
+							:href="csvTotalLink"
+							download
+						>
+							{{ $t("sessions.csvTotal") }}
+						</a>
+					</div>
+				</div>
+			</main>
+			<SessionDetailsModal
+				:session="selectedSession"
+				:vehicles="vehicleList"
+				:currency="currency"
+				@session-changed="loadSessions"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import Modal from "bootstrap/js/dist/modal";
+import "@h2d2/shopicons/es/regular/cablecharge";
+import "@h2d2/shopicons/es/regular/car3";
+import "@h2d2/shopicons/es/regular/sun";
+import formatter, { POWER_UNIT } from "../mixins/formatter";
+import api from "../api";
+import store from "../store";
+import SessionDetailsModal from "../components/Sessions/SessionDetailsModal.vue";
+import SessionTable from "../components/Sessions/SessionTable.vue";
+import EnergyHistoryChart from "../components/Sessions/EnergyHistoryChart.vue";
+import EnergyGroupedChart from "../components/Sessions/EnergyGroupedChart.vue";
+import SolarGroupedChart from "../components/Sessions/SolarGroupedChart.vue";
+import SolarYearChart from "../components/Sessions/SolarYearChart.vue";
+import CostHistoryChart from "../components/Sessions/CostHistoryChart.vue";
+import CostYearChart from "../components/Sessions/CostYearChart.vue";
+import TopHeader from "../components/TopHeader.vue";
+import IconSelectGroup from "../components/IconSelectGroup.vue";
+import IconSelectItem from "../components/IconSelectItem.vue";
+import SelectGroup from "../components/SelectGroup.vue";
+import CustomSelect from "../components/CustomSelect.vue";
+import colors from "../colors";
+import settings from "../settings";
+import PeriodSelector from "../components/Sessions/PeriodSelector.vue";
+import DateNavigator from "../components/Sessions/DateNavigator.vue";
+import DynamicPriceIcon from "../components/MaterialIcon/DynamicPrice.vue";
+import TotalIcon from "../components/MaterialIcon/Total.vue";
+
+const COST_TYPES = {
+	PRICE: "price",
+	CO2: "co2",
+};
+
+const SOLAR_GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+const COST_GROUPS = {
+	NONE: "none",
+	LOADPOINT: "loadpoint",
+	VEHICLE: "vehicle",
+};
+
+const PERIODS = {
+	MONTH: "month",
+	YEAR: "year",
+	TOTAL: "total",
+};
+
+export default {
+	name: "Sessions",
+	components: {
+		SessionDetailsModal,
+		SessionTable,
+		TopHeader,
+		EnergyHistoryChart,
+		EnergyGroupedChart,
+		IconSelectGroup,
+		IconSelectItem,
+		SelectGroup,
+		CustomSelect,
+		SolarGroupedChart,
+		SolarYearChart,
+		PeriodSelector,
+		DateNavigator,
+		DynamicPriceIcon,
+		CostHistoryChart,
+		CostYearChart,
+	},
+	mixins: [formatter],
+	props: {
+		notifications: Array,
+		month: { type: Number, default: () => new Date().getMonth() + 1 },
+		year: { type: Number, default: () => new Date().getFullYear() },
+		period: { type: String, default: PERIODS.MONTH },
+		loadpointFilter: { type: String, default: "" },
+		vehicleFilter: { type: String, default: "" },
+		offline: Boolean,
+	},
+	data() {
+		return {
+			sessions: [],
+			selectedSolarGroup: settings.sessionsSolarGroup || SOLAR_GROUPS.NONE,
+			selectedCostGroup: settings.sessionsCostGroup || COST_GROUPS.NONE,
+			selectedCostType: settings.sessionsCostType || COST_TYPES.PRICE,
+			selectedSessionId: undefined,
+			periods: PERIODS,
+			solarGroups: SOLAR_GROUPS,
+			costGroups: COST_GROUPS,
+			costTypes: COST_TYPES,
+		};
+	},
+	head() {
+		return { title: `${this.$t("sessions.title")} | evcc` };
+	},
+	computed: {
+		currency() {
+			return store.state.currency || "EUR";
+		},
+		energyTitle() {
+			if (this.selectedSolarGroup === SOLAR_GROUPS.VEHICLE) {
+				return "Fahrzeuge";
+			} else if (this.selectedSolarGroup === SOLAR_GROUPS.LOADPOINT) {
+				return "Ladepunkte";
+			} else {
+				return `${this.solarPercentageFmt} Sonne`;
+			}
+		},
+		solarPercentageFmt() {
+			return this.fmtPercentage(
+				this.totalEnergy > 0 ? (100 / this.totalEnergy) * this.selfEnergy : 0
+			);
+		},
+		energySumFmt() {
+			return this.fmtWh(this.totalEnergy * 1e3, POWER_UNIT.AUTO);
+		},
+		energySubTitle() {
+			return `${this.energySumFmt} gesamt`;
+		},
+		solarTitle() {
+			return `${this.solarPercentageFmt} Sonnenanteil`;
+		},
+		energyGroupedTitle() {
+			return `${this.energySumFmt} Energiemenge`;
+		},
+		avgCostTitle() {
+			return "Ladepreis";
+		},
+		costGroupedTitle() {
+			return "Ladepunkt";
+		},
+		periodOptions() {
+			return Object.entries(PERIODS).map(([key, value]) => ({
+				name: this.$t(`sessions.period.${key.toLowerCase()}`),
+				value,
+			}));
+		},
+		totalEnergy() {
+			return this.currentSessions.reduce((acc, session) => acc + session.chargedEnergy, 0);
+		},
+		selfEnergy() {
+			return this.currentSessions.reduce(
+				(acc, session) => acc + (session.chargedEnergy / 100) * session.solarPercentage,
+				0
+			);
+		},
+		currentSessionsWithPrice() {
+			return this.currentSessions.filter((s) => s.price !== null);
+		},
+		currentCostTypeSessions() {
+			if (this.activeCostType === COST_TYPES.PRICE) {
+				return this.currentSessionsWithPrice;
+			} else {
+				return this.currentSessionsWithCo2;
+			}
+		},
+		totalPrice() {
+			return this.currentSessionsWithPrice.reduce((acc, s) => acc + s.price, 0);
+		},
+		pricePerKWh() {
+			const list = this.currentSessionsWithPrice;
+			const energy = list.reduce((acc, s) => acc + s.chargedEnergy, 0);
+			return energy ? this.totalPrice / energy : null;
+		},
+		currentSessionsWithCo2() {
+			return this.currentSessions.filter((s) => s.co2PerKWh !== null);
+		},
+		totalCo2() {
+			const list = this.currentSessionsWithCo2;
+			return list.reduce((acc, s) => acc + s.co2PerKWh * s.chargedEnergy, 0);
+		},
+		co2PerKWh() {
+			const list = this.currentSessionsWithCo2;
+			const energy = list.reduce((acc, s) => acc + s.chargedEnergy, 0);
+			return energy ? this.totalCo2 / energy : null;
+		},
+		costTitle() {
+			return this.activeCostType === COST_TYPES.PRICE
+				? `${this.fmtPricePerKWh(this.pricePerKWh, this.currency)} Ladepreis`
+				: `${this.fmtCo2Medium(this.co2PerKWh)} CO₂-Emission`;
+		},
+		costSubTitle() {
+			return this.activeCostType === COST_TYPES.PRICE
+				? `${this.fmtMoney(this.totalPrice, this.currency, true, true)} gesamt`
+				: `${this.fmtGrams(this.totalCo2)} gesamt`;
+		},
+		activeCostType() {
+			if (this.selectedCostType === COST_TYPES.PRICE && this.costTypePriceAvailable) {
+				return COST_TYPES.PRICE;
+			} else if (this.selectedCostType === COST_TYPES.CO2 && this.costTypeCo2Available) {
+				return COST_TYPES.CO2;
+			}
+			return null;
+		},
+		showCostCharts() {
+			return this.costTypePriceAvailable || this.costTypeCo2Available;
+		},
+		costTypePriceAvailable() {
+			return this.currentSessionsWithPrice.length > 0;
+		},
+		costTypeCo2Available() {
+			return this.currentSessionsWithCo2.length > 0;
+		},
+		showCostTypeSelector() {
+			return this.costTypePriceAvailable && this.costTypeCo2Available;
+		},
+		startDate() {
+			return new Date(this.sessions[0]?.created || Date.now());
+		},
+		topNavigation: function () {
+			const vehicleLogins = store.state.auth ? store.state.auth.vehicles : {};
+			return { vehicleLogins, ...this.collectProps(TopNavigation, store.state) };
+		},
+		sessionsWithDefaults() {
+			return this.sessions.map((session) => {
+				const loadpoint = session.loadpoint || this.$t("main.loadpoint.fallbackName");
+				const vehicle = session.vehicle || this.$t("main.vehicle.unknown");
+				return { ...session, loadpoint, vehicle };
+			});
+		},
+		currentSessions() {
+			return this.sessionsWithDefaults.filter((session) => {
+				const date = new Date(session.created);
+				switch (this.period) {
+					case PERIODS.MONTH:
+						return (
+							date.getFullYear() === this.year && date.getMonth() + 1 === this.month
+						);
+					case PERIODS.YEAR:
+						return date.getFullYear() === this.year;
+					case PERIODS.TOTAL:
+						return true;
+					default:
+						return false;
+				}
+			});
+		},
+		vehicleList() {
+			const vehicles = store.state.vehicles || {};
+			return Object.entries(vehicles).map(([name, vehicle]) => ({ name, ...vehicle }));
+		},
+		selectedSession() {
+			return this.sessions.find((s) => s.id == this.selectedSessionId);
+		},
+		monthName() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			return this.fmtMonth(date);
+		},
+		headline() {
+			const date = new Date();
+			date.setMonth(this.month - 1, 1);
+			date.setFullYear(this.year);
+			return this.fmtMonthYear(date);
+		},
+		csvLink() {
+			return this.csvHrefLink(this.year, this.month);
+		},
+		csvTotalLink() {
+			return this.csvHrefLink();
+		},
+		colorMappings() {
+			const lastThreeMonths = new Date();
+			lastThreeMonths.setMonth(lastThreeMonths.getMonth() - 3);
+
+			// Aggregate energy to get sorted list of loadpoints/vehicles for coloring
+			const aggregateEnergy = (group) => {
+				return this.sessionsWithDefaults.reduce((acc, session) => {
+					if (new Date(session.created) >= lastThreeMonths) {
+						const key = session[group];
+						acc[key] = (acc[key] || 0) + session.chargedEnergy;
+					}
+					return acc;
+				}, {});
+			};
+
+			// Assign colors based on energy usage
+			const assignColors = (energyAggregation, colorType) => {
+				const result = {};
+				let colorIndex = 0;
+
+				// Assign colors by used energy in the last three months
+				const sortedEntries = Object.entries(energyAggregation).sort((a, b) => b[1] - a[1]);
+				sortedEntries.forEach(([key]) => {
+					if (!result[key]) {
+						result[key] = colors.palette[colorIndex % colors.palette.length];
+						colorIndex++;
+					}
+				});
+
+				// Assign colors to remaining entries
+				this.sessionsWithDefaults.forEach((session) => {
+					const key = session[colorType];
+					if (!result[key]) {
+						result[key] = colors.palette[colorIndex % colors.palette.length];
+						colorIndex++;
+					}
+				});
+
+				return result;
+			};
+
+			const loadpointEnergy = aggregateEnergy("loadpoint");
+			const loadpointColors = assignColors(loadpointEnergy, "loadpoint");
+
+			const vehicleEnergy = aggregateEnergy("vehicle");
+			const vehicleColors = assignColors(vehicleEnergy, "vehicle");
+
+			const solar = { self: colors.self, grid: colors.grid };
+			const cost = { price: colors.price, co2: colors.co2 };
+
+			return {
+				loadpoint: loadpointColors,
+				vehicle: vehicleColors,
+				solar,
+				cost,
+			};
+		},
+		solarGroupIcons() {
+			return {
+				[SOLAR_GROUPS.NONE]: "shopicon-regular-sun",
+				[SOLAR_GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
+				[SOLAR_GROUPS.VEHICLE]: "shopicon-regular-car3",
+			};
+		},
+		costTypeIcons() {
+			return {
+				[COST_TYPES.PRICE]: DynamicPriceIcon,
+				[COST_TYPES.CO2]: "shopicon-regular-eco1",
+			};
+		},
+		costGroupIcons() {
+			return {
+				[COST_GROUPS.NONE]: this.showCostTypeSelector
+					? TotalIcon
+					: this.costTypePriceAvailable
+						? DynamicPriceIcon
+						: "shopicon-regular-eco1",
+				[COST_GROUPS.LOADPOINT]: "shopicon-regular-cablecharge",
+				[COST_GROUPS.VEHICLE]: "shopicon-regular-car3",
+			};
+		},
+		showTable() {
+			return this.period === PERIODS.MONTH;
+		},
+		showMonthNavigation() {
+			return this.period === PERIODS.MONTH;
+		},
+		showYearNavigation() {
+			return [PERIODS.MONTH, PERIODS.YEAR].includes(this.period);
+		},
+		showDateNavigator() {
+			return this.showMonthNavigation || this.showYearNavigation;
+		},
+		yearOptions() {
+			if (this.sessions.length === 0) {
+				return [];
+			}
+			const first = new Date(this.sessions[0].created);
+			const last = new Date();
+			const years = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				years.push({ name: year, value: year });
+			}
+			return years;
+		},
+		monthOptions() {
+			return Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ({
+				name: this.fmtMonth(new Date(this.year, month - 1, 1)),
+				value: month,
+			}));
+		},
+		monthYearOptions() {
+			if (this.sessions.length === 0) {
+				return [];
+			}
+			const first = new Date(this.sessions[0].created);
+			const last = new Date();
+			const yearMonths = [];
+			for (let year = first.getFullYear(); year <= last.getFullYear(); year++) {
+				const startMonth = year === first.getFullYear() ? first.getMonth() + 1 : 1;
+				const endMonth = year === last.getFullYear() ? last.getMonth() + 1 : 12;
+				for (let month = startMonth; month <= endMonth; month++) {
+					yearMonths.push({
+						name: this.fmtMonthYear(new Date(year, month - 1, 1)),
+						value: `${year}-${month}`,
+					});
+				}
+			}
+			return yearMonths;
+		},
+		groupEntriesAvailable() {
+			if (this.selectedSolarGroup === SOLAR_GROUPS.NONE || !this.currentSessions.length)
+				return false;
+			return new Set(this.currentSessions.map((s) => s[this.selectedSolarGroup])).size > 1;
+		},
+		showSolarYearChart() {
+			return (
+				this.showExtraCharts &&
+				this.period !== PERIODS.MONTH &&
+				this.selectedSolarGroup === SOLAR_GROUPS.NONE
+			);
+		},
+		showExtraCharts() {
+			if (this.period === PERIODS.MONTH && this.selectedSolarGroup === SOLAR_GROUPS.NONE) {
+				return false;
+			}
+			if (
+				[SOLAR_GROUPS.LOADPOINT, SOLAR_GROUPS.VEHICLE].includes(this.selectedSolarGroup) &&
+				!this.groupEntriesAvailable
+			) {
+				return false;
+			}
+			return true;
+		},
+	},
+	watch: {
+		offline: function () {
+			this.loadSessions();
+		},
+	},
+	mounted() {
+		this.loadSessions();
+	},
+	methods: {
+		changePeriod(newPeriod) {
+			let month = this.month;
+			let year = this.year;
+			let period = newPeriod;
+			switch (period) {
+				case PERIODS.TOTAL:
+					month = undefined;
+					year = undefined;
+					break;
+				case PERIODS.YEAR:
+					month = undefined;
+					break;
+				default:
+					period = undefined;
+			}
+			this.$router.push({ query: { ...this.$route.query, period, month, year } });
+		},
+		async loadSessions() {
+			const response = await api.get("sessions");
+			// ensure sessions are sorted by created date
+			const sortedSessions = response.data?.result.sort((a, b) => {
+				return new Date(a.created) - new Date(b.created);
+			});
+			this.sessions = sortedSessions;
+		},
+		showDetails(sessionId) {
+			this.selectedSessionId = sessionId;
+			const modal = Modal.getOrCreateInstance(document.getElementById("sessionDetailsModal"));
+			modal.show();
+		},
+		csvHrefLink(year, month) {
+			const params = new URLSearchParams({
+				format: "csv",
+				lang: this.$i18n?.locale,
+			});
+			if (year && month) {
+				params.append("year", year);
+				params.append("month", month);
+			}
+			return `./api/sessions?${params.toString()}`;
+		},
+		updateSolarGroup(group) {
+			this.selectedSolarGroup = group;
+			settings.sessionsSolarGroup = group;
+		},
+		updateCostType(costType) {
+			this.selectedCostType = costType;
+			settings.sessionsCostType = costType;
+		},
+		updateCostGroup(group) {
+			this.selectedCostGroup = group;
+			settings.sessionsCostGroup = group;
+		},
+		updateDate({ year, month }) {
+			this.$router.push({ query: { ...this.$route.query, year, month } });
+		},
+	},
+};
+</script>
+
+<style scoped>
+.header-outer {
+	--vertical-shift: 0rem;
+	left: 0;
+	right: 0;
+	margin: 0 calc(calc(1.5rem + var(--vertical-shift)) * -1);
+	-webkit-backdrop-filter: blur(35px);
+	backdrop-filter: blur(35px);
+	background-color: #0000;
+	box-shadow: 0 1px 8px 0px var(--evcc-background);
+}
+
+@media (min-width: 576px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 540px) / 2);
+	}
+}
+
+@media (min-width: 768px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 720px) / 2);
+	}
+}
+
+@media (min-width: 992px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 960px) / 2);
+	}
+}
+
+@media (min-width: 1200px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 1140px) / 2);
+	}
+}
+
+@media (min-width: 1400px) {
+	.header-outer {
+		--vertical-shift: calc((100vw - 1320px) / 2);
+	}
+}
+</style>
diff --git a/i18n/de.toml b/i18n/de.toml
index 8794e249be..adf0fe418b 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -644,6 +644,17 @@ allLoadpoints = "Alle Ladepunkte"
 allVehicles = "Alle Fahrzeuge"
 filter = "Filtern"
 
+[sessions.group]
+co2 = "Emissionen"
+grid = "Netz"
+price = "Preis"
+self = "Sonne"
+
+[sessions.period]
+month = "Monat"
+total = "Gesamt"
+year = "Jahr"
+
 [settings]
 title = "Darstellung"
 
diff --git a/i18n/en.toml b/i18n/en.toml
index 1dc5cafb49..e0c65c61f8 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -641,6 +641,17 @@ allLoadpoints = "all charging points"
 allVehicles = "all vehicles"
 filter = "Filter"
 
+[sessions.group]
+co2 = "Emissions"
+grid = "Grid"
+price = "Price"
+self = "Solar"
+
+[sessions.period]
+month = "Month"
+total = "Total"
+year = "Year"
+
 [settings]
 title = "User Interface"
 
diff --git a/package-lock.json b/package-lock.json
index d3107ef427..5f61a947ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "body-parser": "^1.20.2",
         "bootstrap": "^5.2.2",
         "canvas-confetti": "^1.4.0",
+        "chart.js": "^4.4.4",
         "countup.js": "^2.3.2",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.0.0",
@@ -46,6 +47,7 @@
         "vite-plugin-toml": "^0.7.0",
         "vitest": "^2.0.5",
         "vue": "^3.2.29",
+        "vue-chartjs": "^5.3.1",
         "vue-eslint-parser": "^9.1.0",
         "vue-hot-reload-api": "^2.3.4",
         "vue-i18n": "^10.0.1",
@@ -2620,6 +2622,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==",
+      "license": "MIT"
+    },
     "node_modules/@lezer/common": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
@@ -4350,6 +4358,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
@@ -9727,6 +9747,16 @@
         }
       }
     },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.1.tgz",
+      "integrity": "sha512-rZjqcHBxKiHrBl0CIvcOlVEBwRhpWAVf6rDU3vUfa7HuSRmGtCslc0Oc8m16oAVuk0erzc1FCtH1VCriHsrz+A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
     "node_modules/vue-component-type-helpers": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.6.tgz",
diff --git a/package.json b/package.json
index 49d90ed1b6..1bcf138ff1 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "body-parser": "^1.20.2",
     "bootstrap": "^5.2.2",
     "canvas-confetti": "^1.4.0",
+    "chart.js": "^4.4.4",
     "countup.js": "^2.3.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.0.0",
@@ -53,6 +54,7 @@
     "vite-plugin-toml": "^0.7.0",
     "vitest": "^2.0.5",
     "vue": "^3.2.29",
+    "vue-chartjs": "^5.3.1",
     "vue-eslint-parser": "^9.1.0",
     "vue-hot-reload-api": "^2.3.4",
     "vue-i18n": "^10.0.1",