diff --git a/assets/js/components/Loadpoints.vue b/assets/js/components/Loadpoints.vue
index ce560f0e9a..e022209a2a 100644
--- a/assets/js/components/Loadpoints.vue
+++ b/assets/js/components/Loadpoints.vue
@@ -4,7 +4,7 @@
 	>
 		<div ref="carousel" class="carousel d-lg-flex flex-wrap">
 			<div
-				v-for="(loadpoint, index) in loadpoints"
+				v-for="(loadpoint, index) in loadpoints.slice(0, 2)"
 				:key="index"
 				class="flex-grow-1 mb-3 m-lg-0 p-lg-0"
 			>
@@ -17,10 +17,28 @@
 					@click="scrollTo(index)"
 				/>
 			</div>
+			<div
+				v-for="(group, groupIndex) in miniLoadpointGroups"
+				:key="loadpoints + groupIndex"
+				class="mini-loadpoints flex-grow-1 mb-3 m-lg-0 p-lg-0"
+				:class="{
+					[`mini-loadpoints--${miniLoadpointsPerPage}`]: true,
+					'loadpoint-unselected': !selected(loadpoints.length + groupIndex),
+				}"
+				@click="scrollTo(loadpoints.length + groupIndex)"
+			>
+				<MiniLoadpoint
+					v-for="(miniLoadpoint, index) in group"
+					:id="(index % 2) + 1 /* TODO: real ids */"
+					:key="index"
+					v-bind="miniLoadpoint"
+					class="h-100"
+				/>
+			</div>
 		</div>
 		<div v-if="loadpoints.length > 1" class="d-flex d-lg-none justify-content-center">
 			<button
-				v-for="(loadpoint, index) in loadpoints"
+				v-for="index in loadpoints.length + 1"
 				:key="index"
 				class="btn btn-sm btn-link p-0 mx-1 indicator d-flex justify-content-center align-items-center evcc-default-text"
 				:class="{ 'indicator--selected': selected(index) }"
@@ -36,26 +54,123 @@
 import "@h2d2/shopicons/es/filled/circle";
 
 import Loadpoint from "./Loadpoint.vue";
+import MiniLoadpoint from "./MiniLoadpoint.vue";
+
+const XXL_BREAKPOINT = 1400;
+
+const mlp1 = {
+	chargeCurrent: 2,
+	chargedEnergy: 3261.87,
+	chargePower: 400,
+	chargerIcon: "cooler",
+	maxCurrent: 6,
+	minCurrent: 0,
+	minSoc: 0,
+	mode: "smart",
+	phasesActive: 1,
+	phasesConfigured: null,
+	phasesEnabled: 1,
+	title: "Air Conditioner",
+};
+
+const mlp2 = {
+	chargeCurrent: 0,
+	chargedEnergy: 361.87,
+	chargePower: 0,
+	chargerIcon: "scooter",
+	maxCurrent: 6,
+	minCurrent: 0,
+	minSoc: 0,
+	mode: "aus",
+	phasesActive: 1,
+	phasesConfigured: null,
+	phasesEnabled: 1,
+	title: "Scooter",
+};
+
+const mlp3 = {
+	chargeCurrent: 7,
+	chargedEnergy: 4421,
+	chargePower: 1610,
+	chargerIcon: "heater",
+	maxCurrent: 16,
+	minCurrent: 0,
+	minSoc: 0,
+	mode: "smart",
+	phasesActive: 1,
+	phasesConfigured: null,
+	phasesEnabled: 1,
+	title: "Heizstab",
+};
+
+const mlp4 = {
+	chargeCurrent: 16,
+	chargedEnergy: 412,
+	chargePower: 882,
+	chargerIcon: "generic",
+	maxCurrent: 16,
+	minCurrent: 0,
+	minSoc: 0,
+	mode: "an",
+	phasesActive: 1,
+	phasesConfigured: null,
+	phasesEnabled: 1,
+	title: "Kaffeemaschine",
+};
+
+const mlp5 = {
+	chargeCurrent: 10,
+	chargedEnergy: 122421,
+	chargePower: 1610,
+	chargerIcon: "waterheater",
+	maxCurrent: 16,
+	minCurrent: 0,
+	minSoc: 0,
+	mode: false,
+	phasesActive: 1,
+	phasesConfigured: null,
+	phasesEnabled: 1,
+	title: "Wärmepumpe",
+};
 
 export default {
 	name: "Site",
-	components: { Loadpoint },
+	components: { Loadpoint, MiniLoadpoint },
 	props: {
 		loadpoints: Array,
 		vehicles: Array,
 	},
 	data() {
-		return { selectedIndex: 0, snapTimeout: null };
+		return { selectedIndex: 0, snapTimeout: null, miniLoadpointsPerPage: 2 };
+	},
+	computed: {
+		miniLoadpointGroups() {
+			// get real mini lps from api
+			const loadpoints = [mlp1, mlp2, mlp3, mlp4, mlp5];
+
+			const groups = [];
+			const groupSize = this.miniLoadpointsPerPage;
+			for (let i = 0; i < loadpoints.length; i += groupSize) {
+				groups.push(loadpoints.slice(i, i + groupSize));
+			}
+			return groups;
+		},
 	},
 	mounted() {
+		window.addEventListener("resize", this.handleResize);
+		this.handleResize();
 		this.$refs.carousel.addEventListener("scroll", this.handleCarouselScroll, false);
 	},
 	unmounted() {
+		window.removeEventListener("resize", this.handleResize);
 		if (this.$refs.carousel) {
 			this.$refs.carousel.removeEventListener("scroll", this.handleCarouselScroll);
 		}
 	},
 	methods: {
+		handleResize() {
+			this.miniLoadpointsPerPage = window.innerWidth < XXL_BREAKPOINT ? 2 : 4;
+		},
 		handleCarouselScroll() {
 			const { scrollLeft } = this.$refs.carousel;
 			const { offsetWidth } = this.$refs.carousel.children[0];
@@ -171,4 +286,16 @@ export default {
 		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
 	}
 }
+
+.mini-loadpoints {
+	display: grid;
+	grid-gap: 2rem;
+}
+.mini-loadpoints--2 {
+	grid-template-rows: 1fr 1fr;
+}
+.mini-loadpoints--4 {
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr 1fr;
+}
 </style>
diff --git a/assets/js/components/MiniLoadpoint.vue b/assets/js/components/MiniLoadpoint.vue
new file mode 100644
index 0000000000..eb3642b392
--- /dev/null
+++ b/assets/js/components/MiniLoadpoint.vue
@@ -0,0 +1,314 @@
+<template>
+	<div class="loadpoint d-flex flex-column pt-4 pb-2 px-3 px-sm-4 mx-2 mx-sm-0">
+		<div class="d-flex justify-content-between align-items-center mb-3 text-truncate">
+			<h3 class="me-2 mb-0 text-truncate d-flex">
+				<VehicleIcon :name="icon" class="me-2 flex-shrink-0" />
+				<div class="text-truncate">
+					{{ title || $t("main.loadpoint.fallbackName") }}
+				</div>
+			</h3>
+			<LoadpointSettingsButton v-if="settingsButtonVisible" :id="id" />
+		</div>
+		<LoadpointSettingsModal
+			v-bind="settingsModal"
+			@maxcurrent-updated="setMaxCurrent"
+			@mincurrent-updated="setMinCurrent"
+			@phasesconfigured-updated="setPhasesConfigured"
+			@minsoc-updated="setMinSoc"
+		/>
+		<MiniMode class="mb-3" :mode="mode" />
+
+		<div class="details d-flex align-items-start pb-2">
+			<div>
+				<div class="d-flex align-items-center">
+					<LabelAndValue
+						:label="$t('main.loadpoint.power')"
+						:value="chargePower"
+						:valueFmt="fmtPower"
+						class="mb-1"
+						align="start"
+					/>
+				</div>
+				<Phases v-bind="phasesProps" class="opacity-transiton opacity-100" />
+			</div>
+			<TargetCharge
+				v-if="chargerIcon === 'heater'"
+				class="flex-grow-1 text-center target-charge"
+				@target-time-updated="setTargetTime"
+				@target-time-removed="removeTargetTime"
+			/>
+			<LabelAndValue
+				:label="info.label"
+				:value="info.value"
+				:extraValue="info.extra"
+				align="end"
+			/>
+		</div>
+	</div>
+</template>
+
+<script>
+import "@h2d2/shopicons/es/regular/lightning";
+import "@h2d2/shopicons/es/regular/adjust";
+import api from "../api";
+import Vehicle from "./Vehicle.vue";
+import Phases from "./Phases.vue";
+import LabelAndValue from "./LabelAndValue.vue";
+import formatter from "../mixins/formatter";
+import collector from "../mixins/collector";
+import LoadpointSettingsButton from "./LoadpointSettingsButton.vue";
+import LoadpointSettingsModal from "./LoadpointSettingsModal.vue";
+import VehicleIcon from "./VehicleIcon";
+import TargetCharge from "./TargetCharge.vue";
+import MiniMode from "./MiniMode.vue";
+
+export default {
+	name: "MiniLoadpoint",
+	components: {
+		LabelAndValue,
+		LoadpointSettingsButton,
+		LoadpointSettingsModal,
+		VehicleIcon,
+		TargetCharge,
+		MiniMode,
+		Phases,
+	},
+	mixins: [formatter, collector],
+	props: {
+		id: Number,
+		single: Boolean,
+
+		// main
+		title: String,
+		mode: String,
+		targetSoc: Number,
+		targetEnergy: Number,
+		remoteDisabled: Boolean,
+		remoteDisabledSource: String,
+		chargeDuration: Number,
+		charging: Boolean,
+
+		// charger
+		chargerFeatureIntegratedDevice: Boolean,
+		chargerIcon: String,
+
+		// vehicle
+		connected: Boolean,
+		// charging: Boolean,
+		enabled: Boolean,
+		vehicleDetectionActive: Boolean,
+		vehiclePresent: Boolean,
+		vehicleRange: Number,
+		vehicleSoc: Number,
+		vehicleTitle: String,
+		vehicleIcon: String,
+		vehicleTargetSoc: Number,
+		vehicleCapacity: Number,
+		vehicleFeatureOffline: Boolean,
+		vehicles: Array,
+		minSoc: Number,
+		planActive: Boolean,
+		planProjectedStart: String,
+		targetTime: String,
+		vehicleProviderLoggedIn: Boolean,
+		vehicleProviderLoginPath: String,
+		vehicleProviderLogoutPath: String,
+
+		// details
+		chargePower: Number,
+		chargedEnergy: Number,
+		// chargeDuration: Number,
+		climaterActive: Boolean,
+		chargeRemainingDuration: Number,
+
+		// other information
+		phases: Number,
+		phasesConfigured: Number,
+		minCurrent: Number,
+		maxCurrent: Number,
+		phasesActive: Number,
+		chargeCurrent: Number,
+		connectedDuration: Number,
+		chargeCurrents: Array,
+		chargeRemainingEnergy: Number,
+		phaseAction: String,
+		phaseRemaining: Number,
+		pvRemaining: Number,
+		pvAction: String,
+		guardRemaining: Number,
+		guardAction: String,
+	},
+	data() {
+		return {
+			tickerHandler: null,
+			phaseRemainingInterpolated: this.phaseRemaining,
+			pvRemainingInterpolated: this.pvRemaining,
+			guardRemainingInterpolated: this.guardRemaining,
+			chargeDurationInterpolated: this.chargeDuration,
+			chargeRemainingDurationInterpolated: this.chargeRemainingDuration,
+		};
+	},
+	computed: {
+		icon: function () {
+			return this.chargerIcon || this.vehicleIcon;
+		},
+		integratedDevice: function () {
+			return this.chargerFeatureIntegratedDevice;
+		},
+		phasesProps: function () {
+			return this.collectProps(Phases);
+		},
+		settingsModal: function () {
+			return this.collectProps(LoadpointSettingsModal);
+		},
+		settingsButtonVisible: function () {
+			return this.$hiddenFeatures() || [0, 1, 3].includes(this.phasesConfigured);
+		},
+		vehicle: function () {
+			return this.collectProps(Vehicle);
+		},
+		showChargingIndicator: function () {
+			return this.charging && this.chargePower > 0;
+		},
+		socBasedCharging: function () {
+			return !this.vehicleFeatureOffline && this.vehiclePresent;
+		},
+		info: function () {
+			if (this.chargerIcon === "cooler") {
+				return { label: "Ø Heute", value: "12 ct/kWh" };
+			}
+			if (this.chargerIcon === "heater") {
+				return { label: "Temp.", value: "54 °C" };
+			}
+			if (this.chargerIcon === "waterheater") {
+				return { label: "Σ 30 Tage", value: this.fmtEnergy(this.chargedEnergy) };
+			}
+			return { label: "Σ Heute", value: this.fmtEnergy(this.chargedEnergy) };
+		},
+	},
+	watch: {
+		phaseRemaining() {
+			this.phaseRemainingInterpolated = this.phaseRemaining;
+		},
+		pvRemaining() {
+			this.pvRemainingInterpolated = this.pvRemaining;
+		},
+		guardRemaining() {
+			this.guardRemainingInterpolated = this.guardRemaining;
+		},
+		chargeDuration() {
+			this.chargeDurationInterpolated = this.chargeDuration;
+		},
+		chargeRemainingDuration() {
+			this.chargeRemainingDurationInterpolated = this.chargeRemainingDuration;
+		},
+	},
+	mounted() {
+		this.tickerHandler = setInterval(this.tick, 1000);
+	},
+	unmounted() {
+		clearInterval(this.tickerHandler);
+	},
+	methods: {
+		tick() {
+			if (this.phaseRemainingInterpolated > 0) {
+				this.phaseRemainingInterpolated--;
+			}
+			if (this.pvRemainingInterpolated > 0) {
+				this.pvRemainingInterpolated--;
+			}
+			if (this.guardRemainingInterpolated > 0) {
+				this.guardRemainingInterpolated--;
+			}
+			if (this.chargeDurationInterpolated > 0 && this.charging) {
+				this.chargeDurationInterpolated++;
+			}
+			if (this.chargeRemainingDurationInterpolated > 0 && this.charging) {
+				this.chargeRemainingDurationInterpolated--;
+			}
+		},
+		apiPath: function (func) {
+			return "loadpoints/" + this.id + "/" + func;
+		},
+		setTargetMode: function (mode) {
+			api.post(this.apiPath("mode") + "/" + mode);
+		},
+		setTargetSoc: function (soc) {
+			api.post(this.apiPath("target/soc") + "/" + soc);
+		},
+		setTargetEnergy: function (kWh) {
+			api.post(this.apiPath("target/energy") + "/" + kWh);
+		},
+		setMaxCurrent: function (maxCurrent) {
+			api.post(this.apiPath("maxcurrent") + "/" + maxCurrent);
+		},
+		setMinCurrent: function (minCurrent) {
+			api.post(this.apiPath("mincurrent") + "/" + minCurrent);
+		},
+		setPhasesConfigured: function (phases) {
+			api.post(this.apiPath("phases") + "/" + phases);
+		},
+		setMinSoc: function (soc) {
+			api.post(this.apiPath("minsoc") + "/" + soc);
+		},
+		setTargetTime: function (date) {
+			api.post(`${this.apiPath("target/time")}/${date.toISOString()}`);
+		},
+		removeTargetTime: function () {
+			api.delete(this.apiPath("target/time"));
+		},
+		changeVehicle(index) {
+			api.post(this.apiPath("vehicle") + `/${index}`);
+		},
+		removeVehicle() {
+			api.delete(this.apiPath("vehicle"));
+		},
+		fmtPower(value) {
+			const inKw = value == 0 || value >= 1000;
+			return this.fmtKw(value, inKw);
+		},
+		fmtEnergy(value) {
+			const inKw = value == 0 || value >= 1000;
+			return this.fmtKWh(value, inKw);
+		},
+	},
+};
+</script>
+
+<style scoped>
+.loadpoint {
+	border-radius: 2rem;
+	color: var(--evcc-default-text);
+	background: var(--evcc-box);
+}
+
+.details > div {
+	flex-grow: 1;
+	flex-basis: 0;
+}
+
+.details > div:nth-child(2) {
+	text-align: center;
+}
+.details > div:nth-child(3) {
+	text-align: right;
+}
+.opacity-transiton {
+	transition: opacity var(--evcc-transition-slow) ease-in;
+}
+.divider {
+	border: none;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	border-bottom-color: var(--evcc-gray);
+	background: none;
+	opacity: 0.5;
+	margin: 0 -1rem;
+}
+/* breakpoint sm */
+@media (min-width: 576px) {
+	.divider {
+		margin: 0 -1.5rem;
+	}
+}
+</style>
diff --git a/assets/js/components/MiniMode.vue b/assets/js/components/MiniMode.vue
new file mode 100644
index 0000000000..03b2938e89
--- /dev/null
+++ b/assets/js/components/MiniMode.vue
@@ -0,0 +1,72 @@
+<template>
+	<div class="mode-group border d-inline-flex" :class="{ disabled: !mode }" role="group">
+		<button
+			type="button"
+			class="btn flex-grow-1 flex-shrink-1"
+			:class="{ active: isActive('aus') }"
+		>
+			aus
+		</button>
+		<button
+			type="button"
+			class="btn flex-grow-1 flex-shrink-1"
+			:class="{ active: isActive('an') }"
+		>
+			an
+		</button>
+		<button
+			type="button"
+			class="btn flex-grow-1 flex-shrink-1"
+			:class="{ active: isActive('smart') }"
+		>
+			smart
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "MiniMode",
+	props: {
+		mode: String,
+	},
+	methods: {
+		isActive: function (mode) {
+			return this.mode === mode;
+		},
+	},
+};
+</script>
+
+<style scoped>
+.mode-group {
+	border: 2px solid var(--evcc-default-text);
+	border-radius: 20px;
+	padding: 4px;
+	min-width: 255px;
+}
+
+.disabled button {
+	opacity: 0.2;
+}
+
+.btn {
+	/* equal width buttons */
+	flex-basis: 0;
+	white-space: nowrap;
+	border-radius: 18px;
+	padding: 0.1em 0.8em;
+	color: var(--evcc-default-text);
+	border: none;
+}
+.btn:hover {
+	color: var(--evcc-gray);
+}
+.btn.active {
+	color: var(--evcc-background);
+	background: var(--evcc-default-text);
+}
+.btn-group {
+	border-radius: 16px;
+}
+</style>
diff --git a/assets/js/components/Mode.vue b/assets/js/components/Mode.vue
index 86d08e96ce..4290fa2356 100644
--- a/assets/js/components/Mode.vue
+++ b/assets/js/components/Mode.vue
@@ -18,11 +18,12 @@ export default {
 	name: "Mode",
 	props: {
 		mode: String,
+		mini: Boolean,
 	},
 	emits: ["updated"],
 	data() {
 		return {
-			modes: ["off", "pv", "minpv", "now"],
+			modes: this.mini ? ["off", "pv", "now"] : ["off", "pv", "minpv", "now"],
 		};
 	},
 	methods: {
diff --git a/assets/js/components/TargetCharge.vue b/assets/js/components/TargetCharge.vue
index a7463647f5..cc82e81fae 100644
--- a/assets/js/components/TargetCharge.vue
+++ b/assets/js/components/TargetCharge.vue
@@ -224,12 +224,12 @@ export default {
 	},
 	mounted() {
 		this.modal = Modal.getOrCreateInstance(this.$refs.modal);
-		this.$refs.modal.addEventListener("show.bs.modal", this.modalVisible);
-		this.$refs.modal.addEventListener("hide.bs.modal", this.modalInvisible);
+		this.$refs.modal?.addEventListener("show.bs.modal", this.modalVisible);
+		this.$refs.modal?.addEventListener("hide.bs.modal", this.modalInvisible);
 	},
 	unmounted() {
-		this.$refs.modal.removeEventListener("show.bs.modal", this.modalVisible);
-		this.$refs.modal.removeEventListener("hide.bs.modal", this.modalInvisible);
+		this.$refs.modal?.removeEventListener("show.bs.modal", this.modalVisible);
+		this.$refs.modal?.removeEventListener("hide.bs.modal", this.modalInvisible);
 	},
 	methods: {
 		modalVisible: function () {
diff --git a/docs/design/Mini Loadpoint.md b/docs/design/Mini Loadpoint.md
new file mode 100644
index 0000000000..21bba3d0a7
--- /dev/null
+++ b/docs/design/Mini Loadpoint.md	
@@ -0,0 +1,57 @@
+# Proposal: Mini Loadpoint
+
+## Motivation
+
+Our loadpoint UI is optimized to visualize charger- and vehicle status. We notice that evcc is more and more used for other energy optimizations like heating (electric heater, heatpump) or smart plugs (battery charging, appliances). Due to evccs plugin structure its already possible to make this work right now, but applying the concept of vehicles to everything feels clunky. Introducing the concept of a "Mini Loadpoint" should address this.
+
+## Concept
+
+The idea is to establish a new type of loadpoint that omits everything thats vehicle-, SoC-sepecific. The concept of a charging session and connection-states will only be available in the "normal" loadpoint.
+
+**Modes**
+
+Mini loadpoints also offer manual control (off/on) as well as an (optional?) evcc controlled mode (pv/smart).
+
+**Read only**
+
+The mini loadpoint can also be used for simple meters without power control to monitor consumption of devices like washers, dryers, simple-heaters, coffee-makers, air conditioners, ... UI controls will be disabled/omitted for these read-only loadpoints.
+
+**Configuration**
+
+Creating/configuring a mini loadpoint would be similar to the existing one since the functionality is mostly a subset of the regular loadpoint.
+
+**Visual representation**
+
+Mini loadpoints will show along regular loadpoints in the UI. Since they have fewer features we can visalize them more compact. On larger screens the space required for a regular loadpoint may be enough for four mini loadpoints. On phone screens we could show two mini loadpoints instead of one regular loadpoint (see screenshots).
+
+## Features: Loadpoint vs Mini Loadpoint
+
+|                                                   | Regular | Mini  |
+| ------------------------------------------------- | ------- | ----- |
+| Loadpoint title                                   | ✅      | ✅    |
+| Loadpoint icon                                    | ❌      | ✅    |
+| Loadpoint settings<br>(max power, phases, ...)    | ✅      | ✅    |
+| Modes<br>(off, pv/smart, on)                      | ✅      | ✅    |
+| Read only<br>(no switching, just watching)        | ❌      | ✅    |
+| Status text<br>(connected, timer, ..)             | ✅      | ❌    |
+| Simplified status<br>(icon?)                      | ❌      | ✅    |
+| Vehicle title                                     | ✅      | ❌    |
+| Vehicle icon                                      | ✅      | ❌    |
+| Vehicle switcher                                  | ✅      | ❌    |
+| Charging plan                                     | ✅      | ❓    |
+| SoC / energy limit                                | ✅      | ❌    |
+| Progress bar / slider                             | ✅      | ❌    |
+| Power                                             | ✅      | ✅    |
+| Charged energy                                    | ✅      | 🔁    |
+| SoC                                               | ✅      | ❌    |
+| Elapsed time                                      | ✅ ℹ️   | ❌    |
+| Remaining time                                    | ✅ ℹ️   | ❌    |
+| Additional infos<br>(% solar, co2, price/kWh, °C) | 🔮 🔁   | 🔮 🔁 |
+| Charging sessions                                 | ✅      | ❌    |
+| Cumulative stats<br>(daily, monthly, ...)         | 🔮      | 🔮    |
+
+✅ Available.<br>
+❌ Not available.<br>
+🔁 User configurable. Maybe toggling through available values.<br>
+ℹ️ Currently "remaining" replaces "elapsed" if available (hard wired).<br>
+🔮 In the future.
diff --git a/i18n/de.toml b/i18n/de.toml
index 84d172ce2e..104dbbb7be 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -141,7 +141,7 @@ remove = "Entfernen"
 setTargetTime = "keine"
 targetIsInThePast = "Wähle einen Zeitpunkt in der Zukunft, Marty."
 targetIsTooFarInTheFuture = "Wir passen den Plan an sobald wir mehr über die Zukunft wissen."
-title = "Zielzeit"
+title = "Plan"
 today = "heute"
 tomorrow = "morgen"
 update = "Aktualisieren"