diff --git a/examples/generic/index.js b/examples/generic/index.js
index cb3edfba1d..74060a739a 100644
--- a/examples/generic/index.js
+++ b/examples/generic/index.js
@@ -11,15 +11,7 @@ let colorScheme = 'light'
 
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
-
-// NOTE: This function is only usable if the layer is clustered
-const isReportSelectable = (feature) =>
-	feature
-		.get('features')
-		.reduce(
-			(accumulator, current) => isEvenId(current.get('mmlid')) || accumulator,
-			false
-		)
+const isReportSelectable = (feature) => isEvenId(feature.get('mmlid'))
 
 const map = await createMap(
 	'polarstern',
diff --git a/examples/github-io/components/HeroPolarMap.vue b/examples/github-io/components/HeroPolarMap.vue
index 7ee52c1526..2a0067a995 100644
--- a/examples/github-io/components/HeroPolarMap.vue
+++ b/examples/github-io/components/HeroPolarMap.vue
@@ -7,7 +7,6 @@
 </template>
 
 <script setup lang="ts">
-import type { Feature } from 'ol'
 import type { MpapiParameters } from '@/lib/getFeatures/types'
 
 import { createMap } from '@polar/polar/client'
@@ -20,13 +19,7 @@ const reports = '6059'
 const hamburgBorder = '1693'
 
 const isEvenId = (mmlid: string) => Number(mmlid.slice(-1)) % 2 === 0
-
-const isReportSelectable = (feature: Feature) =>
-	(feature.get('features') as Feature[]).reduce(
-		(acc: boolean, curr: Feature) =>
-			isEvenId(curr.get('mmlid') as string) || acc,
-		false
-	)
+const isReportSelectable = (feature) => isEvenId(feature.get('mmlid'))
 
 onMounted(async () => {
 	await createMap(
diff --git a/examples/snowbox/index.js b/examples/snowbox/index.js
index 81b621088b..a1f93532ee 100644
--- a/examples/snowbox/index.js
+++ b/examples/snowbox/index.js
@@ -80,15 +80,7 @@ const dataportTheme = {
 
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
-
-// NOTE: This function is only usable if the layer is clustered
-const isReportSelectable = (feature) =>
-	feature
-		.get('features')
-		.reduce(
-			(accumulator, current) => isEvenId(current.get('mmlid')) || accumulator,
-			false
-		)
+const isReportSelectable = (feature) => isEvenId(feature.get('mmlid'))
 
 const map = await createMap(
 	'snowbox',
diff --git a/src/core/components/PolarContainer.ce.vue b/src/core/components/PolarContainer.ce.vue
index aec8d30efa..61a5122817 100644
--- a/src/core/components/PolarContainer.ce.vue
+++ b/src/core/components/PolarContainer.ce.vue
@@ -49,10 +49,10 @@ import { useT } from '../composables/useT'
 import { useCoreStore } from '../stores'
 import { useContextMenuStore } from '../stores/contextMenu'
 import { useMainStore } from '../stores/main'
+import { useMarkerStore } from '../stores/marker'
 import { useMoveHandleStore } from '../stores/moveHandle'
 import { CoreId } from '../types'
 import { loadKern } from '../utils/loadKern'
-import { teardownMarkers } from '../utils/map/setupMarkers'
 import { mapZoomOffset } from '../utils/mapZoomOffset'
 import ContextMenu from './ContextMenu.ce.vue'
 import MoveHandle from './MoveHandle.ce.vue'
@@ -223,6 +223,8 @@ function openContextMenu(e: MouseEvent) {
 	)
 }
 
+const markerStore = useMarkerStore()
+
 onMounted(() => {
 	mainStore.lightElement = useHost()
 	mainStore.shadowRoot = useShadowRoot()
@@ -266,7 +268,7 @@ onBeforeUnmount(() => {
 	mapEl.removeEventListener('contextmenu', openContextMenu)
 	document.removeEventListener('pointerdown', contextMenuStore.dismiss)
 	if (mainStore.configuration.markers) {
-		teardownMarkers(mainStore.map)
+		markerStore.teardown()
 	}
 	mainStore.map.dispose()
 	mapEl.replaceChildren()
diff --git a/src/core/components/PolarMap.ce.vue b/src/core/components/PolarMap.ce.vue
index f57c76755a..f872da1444 100644
--- a/src/core/components/PolarMap.ce.vue
+++ b/src/core/components/PolarMap.ce.vue
@@ -20,10 +20,10 @@ import { markRaw, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
 
 import { useContextMenuStore } from '../stores/contextMenu'
 import { useMainStore } from '../stores/main'
+import { useMarkerStore } from '../stores/marker'
 import { CoreId } from '../types'
 import { checkServiceAvailability } from '../utils/checkServiceAvailability'
 import { createKeyboardInteractions } from '../utils/interactions'
-import { setupMarkers } from '../utils/map/setupMarkers'
 import { setupStyling } from '../utils/map/setupStyling'
 import { updateDragAndZoomInteractions } from '../utils/map/updateDragAndZoomInteractions'
 
@@ -35,6 +35,7 @@ const emit = defineEmits(['updateListeners', 'wheel'])
 const mainStore = useMainStore()
 const { hasWindowSize, hasSmallDisplay, center, extent, zoom } =
 	storeToRefs(mainStore)
+const markerStore = useMarkerStore()
 const contextMenuStore = useContextMenuStore()
 
 function onMove() {
@@ -109,7 +110,7 @@ onMounted(async () => {
 		checkServiceAvailability(mainStore.configuration, mainStore.serviceRegister)
 	}
 	if (mainStore.configuration.markers) {
-		setupMarkers(mainStore.map)
+		markerStore.setup()
 	}
 	await setupStyling(
 		mainStore.map,
diff --git a/src/core/composables/useClusterMarker.ts b/src/core/composables/useClusterMarker.ts
new file mode 100644
index 0000000000..fb65ee5f73
--- /dev/null
+++ b/src/core/composables/useClusterMarker.ts
@@ -0,0 +1,71 @@
+import type { Feature, Map } from 'ol'
+import type { Point } from 'ol/geom'
+import type { Style } from 'ol/style'
+import type { ShallowRef } from 'vue'
+
+import { computed, markRaw, shallowRef, watch } from 'vue'
+
+import { findLayer } from '@/lib/findLayer'
+import getCluster from '@/lib/getCluster'
+
+import { useMainStore } from '../stores/main'
+
+function getClusterSafe(map: Map, feature: Feature) {
+	const layerId = feature.get('_polarLayerId') as string
+	// @ts-expect-error | Found layers always have a source and getDistance is defined on cluster sources.
+	return typeof findLayer(map, layerId)?.getSource().getDistance === 'function'
+		? getCluster(map, feature, '_polarLayerId')
+		: feature
+}
+
+export function useClusterMarker(
+	feature: ShallowRef<Feature | null>,
+	style: (active: boolean, feature: Feature) => Style
+) {
+	const mainStore = useMainStore()
+
+	const cluster = shallowRef<Feature | null>(null)
+	const clusterFeatures = computed(
+		() => (cluster.value?.get('features') ?? []) as Feature[]
+	)
+	const clusterCoordinates = computed(() =>
+		cluster.value === null
+			? null
+			: ((cluster.value.getGeometry() as Point).getCoordinates() as [
+					number,
+					number,
+				])
+	)
+
+	function updateCluster(newFeature: Feature | null) {
+		const newCluster =
+			newFeature === null
+				? null
+				: markRaw(getClusterSafe(mainStore.map, newFeature))
+
+		if (cluster.value === newCluster) {
+			return
+		}
+
+		if (cluster.value) {
+			cluster.value.setStyle(style(false, cluster.value))
+		}
+
+		cluster.value = newCluster
+
+		if (cluster.value) {
+			cluster.value.setStyle(style(true, cluster.value))
+		}
+	}
+
+	watch(feature, updateCluster, { immediate: true })
+
+	watch(
+		() => mainStore.zoom,
+		() => {
+			updateCluster(feature.value)
+		}
+	)
+
+	return { cluster, clusterFeatures, clusterCoordinates }
+}
diff --git a/src/core/stores/index.ts b/src/core/stores/index.ts
index a81c6d0b07..3976d6a958 100644
--- a/src/core/stores/index.ts
+++ b/src/core/stores/index.ts
@@ -4,12 +4,9 @@
  */
 /* eslint-enable tsdoc/syntax */
 
-import type { Feature } from 'ol'
-
 import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
-import { computed } from 'vue'
+import { computed, readonly } from 'vue'
 
-import { updateSelection } from '../utils/map/setupMarkers'
 import { useContextMenuStore } from './contextMenu'
 import { useMainStore } from './main'
 import { useMarkerStore } from './marker'
@@ -286,11 +283,41 @@ export const useCoreStore = defineStore('core', () => {
 		 *
 		 * @alpha
 		 */
-		hoveredFeature: markerStoreRefs.hovered,
+		hoveredFeature: markerStoreRefs.hoveredFeature,
+
+		/**
+		 * Feature that is hovered by the user with a marker.
+		 * If the layer does not use clustering, this is the same as {@link hoveredFeature}.
+		 * Otherwise, this is the cluster feature that contains the {@link hoveredFeature}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		hoveredCluster: readonly(markerStoreRefs.hoveredCluster),
+
+		/**
+		 * Features that are hovered by the user with a marker.
+		 * If the layer does not use clustering, this is an array with a single element, which is the same as {@link hoveredFeature}.
+		 * Otherwise, this is an array of all features that are contained in the {@link hoveredCluster}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		hoveredClusterFeatures: markerStoreRefs.hoveredClusterFeatures,
+
+		/**
+		 * Coordinates that were hovered by the user with a marker.
+		 *
+		 * @readonly
+		 */
+		hoveredCoordinates: computed(() => markerStore.hoveredCoordinates),
 
 		/**
 		 * Feature that was selected by the user with a marker.
 		 *
+		 * You may not set this to a cluster feature.
+		 * Setting this value to a cluster feature has no effect, however, this may change in the future.
+		 *
 		 * If this value is modified, the newly selected feature is centered on the map.
 		 *
 		 * @remarks
@@ -301,12 +328,35 @@ export const useCoreStore = defineStore('core', () => {
 		 * @alpha
 		 */
 		selectedFeature: computed({
-			get: () => markerStore.selected,
+			get: () => markerStore.selectedFeature,
 			set: (feature) => {
-				updateSelection(mainStore.map, feature as Feature, true)
+				if (feature?.get('features')) {
+					return
+				}
+				markerStore.selectedFeature = feature
 			},
 		}),
 
+		/**
+		 * Feature that is marked as selected on the map.
+		 * If the layer does not use clustering, this is the same as {@link selectedFeature}.
+		 * Otherwise, this is the cluster feature that contains the {@link selectedFeature}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		selectedCluster: readonly(markerStoreRefs.selectedCluster),
+
+		/**
+		 * Features that are marked as selected on the map.
+		 * If the layer does not use clustering, this is an array with a single element, which is the same as {@link selectedFeature}.
+		 * Otherwise, this is an array of all features that are contained in the {@link selectedCluster}.
+		 *
+		 * @readonly
+		 * @alpha
+		 */
+		selectedClusterFeatures: markerStoreRefs.selectedClusterFeatures,
+
 		/**
 		 * Coordinates that were selected by the user with a marker.
 		 *
diff --git a/src/core/stores/marker.ts b/src/core/stores/marker.ts
index cf91f5dad7..c0ae8ce6ad 100644
--- a/src/core/stores/marker.ts
+++ b/src/core/stores/marker.ts
@@ -1,54 +1,265 @@
-import type { Feature } from 'ol'
-import type { Point } from 'ol/geom'
-import type { CallOnMapSelect } from '../types'
+import type { Feature, MapBrowserEvent } from 'ol'
+import type BaseLayer from 'ol/layer/Base'
+import type VectorLayer from 'ol/layer/Vector'
+import type { Style } from 'ol/style'
+import type {
+	MarkerLayer,
+	MarkerLayerConfiguration,
+	MarkerStyle,
+} from '../types'
 
+import { toMerged } from 'es-toolkit'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { computed, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 
+import { isVisible } from '@/lib/invisibleStyle'
+
+import { useClusterMarker } from '../composables/useClusterMarker'
+import { resolveClusterClick } from '../utils/map/resolveClusterClick'
+import { getMarkerStyle } from '../utils/markers'
 import { useMainStore } from './main'
 
+// these have been measured to fit once and influence marker size
+const imgSize: [number, number] = [26, 36]
+const imgSizeMulti: [number, number] = [40, 36]
+
+const defaultStroke = '#FFFFFF'
+const defaultStrokeWidth = '2'
+
+const defaultStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#005CA9',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+const hoverStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#7B1045',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+const selectionStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#679100',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+const unselectableStyle: MarkerStyle = {
+	clusterSize: imgSizeMulti,
+	fill: '#333333',
+	size: imgSize,
+	stroke: defaultStroke,
+	strokeWidth: defaultStrokeWidth,
+}
+
+const layerDefaults = {
+	defaultStyle,
+	hoverStyle,
+	selectionStyle,
+	unselectableStyle,
+	isSelectable: () => true,
+} satisfies Partial<MarkerLayerConfiguration>
+
 export const useMarkerStore = defineStore('marker', () => {
 	const mainStore = useMainStore()
 	const configuration = computed(() => mainStore.configuration.markers)
 
-	const callOnMapSelect = computed(() =>
-		typeof configuration.value?.callOnMapSelect === 'function'
-			? (configuration.value.callOnMapSelect as CallOnMapSelect)
-			: null
+	const layers = computed(
+		() =>
+			configuration.value?.layers.map((layer) =>
+				toMerged(layerDefaults, layer)
+			) ?? []
+	)
+
+	function getLayerConfiguration(id: string) {
+		return layers.value.find((layer) => layer.id === id) as MarkerLayer
+	}
+
+	function layerFilter(layer: BaseLayer) {
+		return layers.value.some(({ id }) => id === (layer.get('id') as string))
+	}
+
+	function getStyle(
+		feature: Feature,
+		layerId: string,
+		hovered: boolean,
+		selected: boolean
+	): Style {
+		const layerConfiguration = getLayerConfiguration(layerId)
+		const clusterFeatures = feature.get('features') || [feature]
+		return getMarkerStyle(
+			clusterFeatures.some(layerConfiguration.isSelectable)
+				? selected
+					? layerConfiguration.selectionStyle
+					: hovered
+						? layerConfiguration.hoverStyle
+						: layerConfiguration.defaultStyle
+				: layerConfiguration.unselectableStyle,
+			feature.get('features')?.length > 1
+		)
+	}
+
+	const selectedFeature = shallowRef<Feature | null>(null)
+	const {
+		cluster: selectedCluster,
+		clusterFeatures: selectedClusterFeatures,
+		clusterCoordinates: selectedCoordinates,
+	} = useClusterMarker(selectedFeature, (active, cluster) =>
+		getStyle(
+			cluster,
+			cluster.get('_polarLayerId'),
+			cluster === hoveredCluster.value,
+			active
+		)
+	)
+
+	const hoveredFeature = shallowRef<Feature | null>(null)
+	const {
+		cluster: hoveredCluster,
+		clusterFeatures: hoveredClusterFeatures,
+		clusterCoordinates: hoveredCoordinates,
+	} = useClusterMarker(hoveredFeature, (active, cluster) =>
+		getStyle(
+			cluster,
+			cluster.get('_polarLayerId'),
+			active,
+			cluster === selectedCluster.value
+		)
 	)
+
+	function mapPointerMove({ map, pixel }: MapBrowserEvent) {
+		const feature = map.getFeaturesAtPixel(pixel, {
+			layerFilter,
+		})[0] as Feature | null
+
+		if (!feature) {
+			hoveredFeature.value = null
+			return
+		}
+
+		const layerConfiguration = getLayerConfiguration(
+			feature.get('_polarLayerId') as string
+		)
+
+		const clusterFeatures = feature.get('features') || [feature]
+		const selectableClusterFeatures = clusterFeatures.filter(
+			layerConfiguration.isSelectable
+		)
+		if (selectableClusterFeatures.length === 0) {
+			return
+		}
+
+		hoveredFeature.value = selectableClusterFeatures[0]
+	}
+
 	const clusterClickZoom = computed(
 		() => (configuration.value?.clusterClickZoom as boolean) || false
 	)
 
-	const hovered = shallowRef<Feature | null>(null)
-	const selected = shallowRef<Feature | null>(null)
-	const selectedCoordinates = computed(() =>
-		selected.value === null
-			? null
-			: (selected.value.getGeometry() as Point).getCoordinates()
+	const isMaxZoom = computed(
+		() => mainStore.map.getView().getMaxZoom() === mainStore.zoom
+	)
+
+	const lastClickEvent = ref<PointerEvent | KeyboardEvent | WheelEvent | null>(
+		null
 	)
 
-	const selectedBaseFeature = shallowRef<Feature | null>(null)
-	watch(selected, (feature) => {
-		if (feature) {
-			const childFeatures = feature.get('features') as Feature[] | undefined
-			if (childFeatures?.length === 1 && childFeatures[0]) {
-				selectedBaseFeature.value = childFeatures[0]
-			}
-		} else {
-			selectedBaseFeature.value = null
+	function mapClick(event: MapBrowserEvent) {
+		const { map, pixel } = event
+		const feature = map.getFeaturesAtPixel(pixel, {
+			layerFilter,
+		})[0] as Feature | null
+
+		if (!feature) {
+			selectedFeature.value = null
+			return
+		}
+
+		const layerConfiguration = getLayerConfiguration(
+			feature.get('_polarLayerId') as string
+		)
+
+		const clusterFeatures = feature.get('features') || [feature]
+		const selectableClusterFeatures = clusterFeatures.filter(
+			layerConfiguration.isSelectable
+		)
+		if (selectableClusterFeatures.length === 0) {
+			return
 		}
-	})
+
+		event.stopPropagation()
+		lastClickEvent.value = event.originalEvent
+
+		if (
+			clusterClickZoom.value &&
+			clusterFeatures.length > 1 &&
+			!isMaxZoom.value
+		) {
+			resolveClusterClick(map, feature)
+			return
+		}
+
+		selectedFeature.value = selectableClusterFeatures[0]
+	}
+
+	function mapSingleClick(event: MapBrowserEvent) {
+		if (event.originalEvent === lastClickEvent.value) {
+			event.stopPropagation()
+		}
+	}
+
+	function setup() {
+		mainStore.map
+			.getLayers()
+			.getArray()
+			.filter(layerFilter)
+			.forEach((layer) => {
+				// only vector layers reach this
+				const source = (layer as VectorLayer).getSource()
+				if (source !== null) {
+					// @ts-expect-error | Undocumented hook.
+					source.geometryFunction =
+						// prevents features from jumping due to invisible features "pulling"
+						(feature: Feature) =>
+							isVisible(feature) ? feature.getGeometry() : null
+					source.on('addfeature', (event) => {
+						event.feature.set('_polarLayerId', layer.get('id'), true)
+						;(event.feature.get('features') || []).forEach((feature) => {
+							feature.set('_polarLayerId', layer.get('id'), true)
+						})
+					})
+				}
+				;(layer as VectorLayer).setStyle((feature) =>
+					getStyle(feature as Feature, layer.get('id'), false, false)
+				)
+			})
+
+		mainStore.map.on('pointermove', mapPointerMove)
+		mainStore.map.on('click', mapClick)
+		mainStore.map.on('singleclick', mapSingleClick)
+	}
+	function teardown() {
+		mainStore.map.un('pointermove', mapPointerMove)
+		mainStore.map.un('click', mapClick)
+		mainStore.map.un('singleclick', mapSingleClick)
+	}
 
 	return {
-		configuration,
-		callOnMapSelect,
-		clusterClickZoom,
+		hoveredFeature,
+		hoveredCluster,
+		hoveredClusterFeatures,
+		hoveredCoordinates,
 
-		hovered,
-		selectedBaseFeature,
-		selected,
+		selectedFeature,
+		selectedCluster,
+		selectedClusterFeatures,
 		selectedCoordinates,
+
+		setup,
+		teardown,
 	}
 })
 
diff --git a/src/core/types/marker.ts b/src/core/types/marker.ts
index fd6747e231..8552dea740 100644
--- a/src/core/types/marker.ts
+++ b/src/core/types/marker.ts
@@ -2,12 +2,6 @@ import type { Feature } from 'ol'
 
 export type MarkersIsSelectableFunction = (feature: Feature) => boolean
 
-export interface CallOnMapSelect {
-	action: string
-	payload: unknown
-	pluginName?: string
-}
-
 /**
  * A full documentation of the parameters is available at the Masterportal's https://www.masterportal.org/mkdocs/doc/Latest/User/Global-Config/style.json/.
  * For more details, visual examples, and expert features, see there.
@@ -123,26 +117,6 @@ export interface MarkerConfiguration {
 	 */
 	layers: MarkerLayerConfiguration[]
 
-	/**
-	 * If set, the given `action` will be called with the given `payload`. If the
-	 * `pluginName` is set, the action will be called in the respective plugin,
-	 * otherwise the core store is used.
-	 *
-	 * @example
-	 * ```
-	 * callOnMapSelect: {
-	 *   action: 'openMenuById',
-	 *   payload: 'gfi',
-	 *   pluginName: 'iconMenu'
-	 * }
-	 * ```
-	 *
-	 * @remarks
-	 * The example open the gfi window in the iconMenu, if the IconMenu exists
-	 * with the gfi plugin registered under the id `gfi`.
-	 */
-	callOnMapSelect?: CallOnMapSelect
-
 	/**
 	 * If `true`, clicking a cluster feature will zoom into the clustered features'
 	 * bounding box (with padding) so that the cluster is "resolved". This happens
diff --git a/src/core/utils/map/resolveClusterClick.ts b/src/core/utils/map/resolveClusterClick.ts
new file mode 100644
index 0000000000..1e1e0cef18
--- /dev/null
+++ b/src/core/utils/map/resolveClusterClick.ts
@@ -0,0 +1,17 @@
+import type { Feature, Map } from 'ol'
+
+import { createEmpty, extend } from 'ol/extent'
+
+export function resolveClusterClick(map: Map, feature: Feature) {
+	const features = feature.get('features') as Feature[]
+
+	const extent = createEmpty()
+	features.forEach((feature) =>
+		extend(extent, feature.getGeometry()?.getExtent() || [])
+	)
+
+	map.getView().fit(extent, {
+		duration: 400,
+		padding: [80, 30, 80, 30],
+	})
+}
diff --git a/src/core/utils/map/setupMarkers.ts b/src/core/utils/map/setupMarkers.ts
deleted file mode 100644
index 32709db16e..0000000000
--- a/src/core/utils/map/setupMarkers.ts
+++ /dev/null
@@ -1,369 +0,0 @@
-import type { Feature, Map, MapBrowserEvent, MapEvent } from 'ol'
-import type BaseLayer from 'ol/layer/Base'
-import type VectorSource from 'ol/source/Vector'
-import type { MarkerLayer, MarkerStyle, PluginId } from '../../types'
-
-import { toMerged } from 'es-toolkit'
-import { createEmpty, extend } from 'ol/extent'
-import VectorLayer from 'ol/layer/Vector'
-import RenderFeature from 'ol/render/Feature'
-import Cluster from 'ol/source/Cluster'
-import { markRaw, toRaw, watch } from 'vue'
-
-import { findLayer } from '@/lib/findLayer'
-import getCluster from '@/lib/getCluster'
-import { isVisible } from '@/lib/invisibleStyle'
-
-import { useMainStore } from '../../stores/main'
-import { useMarkerStore } from '../../stores/marker'
-import { usePluginStore } from '../../stores/plugin'
-import { getMarkerStyle } from '../markers'
-
-let stopWatcher: (() => void) | null = null
-
-// these have been measured to fit once and influence marker size
-const imgSize: [number, number] = [26, 36]
-const imgSizeMulti: [number, number] = [40, 36]
-
-const defaultStroke = '#FFFFFF'
-const defaultStrokeWidth = '2'
-
-const defaultStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#005CA9',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-const hoverStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#7B1045',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-const selectionStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#679100',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-const unselectableStyle: MarkerStyle = {
-	clusterSize: imgSizeMulti,
-	fill: '#333333',
-	size: imgSize,
-	stroke: defaultStroke,
-	strokeWidth: defaultStrokeWidth,
-}
-
-let layers: MarkerLayer[] = []
-
-let lastZoom = 0
-
-// As this function is only internally used, it is expected that a layer is found.
-function getLayerConfiguration(id: string) {
-	return layers.find((layer) => layer.id === id) as MarkerLayer
-}
-
-function layerFilter(layer: BaseLayer) {
-	return layers.some(({ id }) => id === (layer.get('id') as string))
-}
-
-function resolveClusterClick(map: Map, feature: Feature) {
-	const features = feature.get('features') as Feature[]
-
-	const extent = createEmpty()
-	features.forEach((feature) =>
-		extend(extent, feature.getGeometry()?.getExtent() || [])
-	)
-
-	map.getView().fit(extent, {
-		duration: 400,
-		padding: [80, 30, 80, 30],
-	})
-}
-
-/**
- * Update the selected marker in the map.
- *
- * @param map - Map
- * @param feature - Feature to select
- * @param centerOnFeature - Whether the map should center on the feature
- */
-export function updateSelection(
-	map: Map,
-	feature: Feature | null,
-	centerOnFeature = false
-) {
-	const store = useMarkerStore()
-
-	store.selected?.setStyle(undefined)
-	store.selected = null
-
-	if (feature === null) {
-		return
-	}
-
-	const layerId = feature.get('_polarLayerId') as string
-	const selectedCluster =
-		// @ts-expect-error | Found layers always have a source and getDistance is defined on cluster sources.
-		typeof findLayer(map, layerId)?.getSource().getDistance === 'function'
-			? getCluster(map, feature, '_polarLayerId')
-			: feature
-
-	selectedCluster.setStyle(
-		getMarkerStyle(
-			getLayerConfiguration(feature.get('_polarLayerId') as string)
-				.selectionStyle,
-			selectedCluster.get('features')?.length > 1
-		)
-	)
-
-	store.selected = markRaw(selectedCluster)
-	if (centerOnFeature) {
-		const mainStore = useMainStore()
-		mainStore.centerOnFeature(store.selected)
-	}
-}
-
-function setLayerId(map: Map, feature: Feature) {
-	if (feature.get('_polarLayerId')) {
-		return
-	}
-
-	const layerId = map
-		.getLayers()
-		.getArray()
-		.find((layer) => {
-			if (layer instanceof VectorLayer) {
-				let step: VectorLayer | VectorSource | Cluster = layer
-				while (step instanceof VectorLayer || step instanceof Cluster) {
-					// @ts-expect-error | Clusters in masterportalapi always have a source.
-					step = step.getSource()
-					// @ts-expect-error | It's not a vector layer anymore.
-					if (step.hasFeature(feature)) {
-						return true
-					}
-				}
-				return step.hasFeature(feature)
-			}
-			return false
-		})
-		?.get('id') as string | undefined
-	if (layerId) {
-		feature.set('_polarLayerId', layerId, true)
-	}
-}
-
-export function setupMarkers(map: Map) {
-	const store = useMarkerStore()
-	const configuration = store.configuration
-	if (!configuration) {
-		return
-	}
-
-	layers = configuration.layers.map((layer) =>
-		toMerged(
-			{
-				defaultStyle,
-				hoverStyle,
-				selectionStyle,
-				unselectableStyle,
-				isSelectable: () => true,
-			},
-			layer
-		)
-	)
-
-	lastZoom = map.getView().getZoom() as number
-
-	map
-		.getLayers()
-		.getArray()
-		.filter(layerFilter)
-		.forEach((layer) => {
-			// only vector layers reach this
-			const source = (layer as VectorLayer).getSource()
-			if (source !== null) {
-				// @ts-expect-error | Undocumented hook.
-				source.geometryFunction =
-					// prevents features from jumping due to invisible features "pulling"
-					(feature: Feature) =>
-						isVisible(feature) ? feature.getGeometry() : null
-			}
-			const layerConfiguration = getLayerConfiguration(
-				layer.get('id') as string
-			)
-			;(layer as VectorLayer).setStyle((feature) =>
-				getMarkerStyle(
-					layerConfiguration.isSelectable(feature as Feature)
-						? layerConfiguration.defaultStyle
-						: layerConfiguration.unselectableStyle,
-					feature.get('features')?.length > 1
-				)
-			)
-		})
-
-	// // // STORE EVENT HANDLING
-
-	stopWatcher = watch(
-		() => store.hovered,
-		(feature, oldFeature) => {
-			if (oldFeature !== null && oldFeature !== toRaw(store.selected)) {
-				oldFeature.setStyle(undefined)
-			}
-			if (feature !== null && feature !== toRaw(store.selected)) {
-				store.hovered = markRaw(feature)
-				const layerId = feature.get('_polarLayerId') as string
-				const selectedCluster =
-					// @ts-expect-error | Found layers always have a source and getDistance is defined on cluster sources.
-					typeof findLayer(map, layerId)?.getSource().getDistance === 'function'
-						? getCluster(map, feature, '_polarLayerId')
-						: feature
-				selectedCluster.setStyle(
-					getMarkerStyle(
-						getLayerConfiguration(feature.get('_polarLayerId') as string)
-							.hoverStyle,
-						selectedCluster.get('features')?.length > 1
-					)
-				)
-			}
-		}
-	)
-
-	map.on('moveend', mapMoveEnd)
-	map.on('pointermove', mapPointerMove)
-	map.on('click', mapClick)
-
-	/*
-	 * click leads to singlelick; if an element is selected,
-	 * to not let other plugins pick it up, something was already done with it
-	 */
-	map.on('singleclick', mapSingleClick)
-}
-
-export function teardownMarkers(map: Map) {
-	stopWatcher?.()
-	stopWatcher = null
-	layers = []
-	lastClickEvent = null
-
-	map.un('moveend', mapMoveEnd)
-	map.un('pointermove', mapPointerMove)
-	map.un('click', mapClick)
-
-	map.un('singleclick', mapSingleClick)
-}
-
-// // // MAP EVENT HANDLING
-
-let lastClickEvent: MapBrowserEvent | null = null
-
-function mapMoveEnd({ map }: MapEvent) {
-	const store = useMarkerStore()
-	const zoom = map.getView().getZoom() as number
-	if (zoom !== lastZoom) {
-		lastZoom = zoom
-		if (store.selected) {
-			const baseFeature =
-				store.selectedBaseFeature ||
-				((store.selected.get('features')?.[0] || store.selected) as Feature)
-			setLayerId(map, baseFeature)
-			updateSelection(map, baseFeature)
-		}
-	}
-}
-
-function mapPointerMove({ map, pixel }: MapBrowserEvent) {
-	const store = useMarkerStore()
-	const feature = map.getFeaturesAtPixel(pixel, {
-		layerFilter,
-	})[0]
-
-	if (feature === toRaw(store.selected) || feature instanceof RenderFeature) {
-		return
-	}
-	if (
-		toRaw(store.hovered) !== null &&
-		toRaw(store.hovered) !== toRaw(store.selected)
-	) {
-		store.hovered?.setStyle(undefined)
-		store.hovered = null
-	}
-
-	if (!feature) {
-		return
-	}
-	setLayerId(map, feature)
-	const layerConfiguration = getLayerConfiguration(
-		feature.get('_polarLayerId') as string
-	)
-	if (!layerConfiguration.isSelectable(feature)) {
-		return
-	}
-	const isMultiFeature = feature.get('features')?.length > 1
-	feature.setStyle(
-		getMarkerStyle(layerConfiguration.hoverStyle, isMultiFeature)
-	)
-	store.hovered = markRaw(feature)
-}
-
-function mapClick(event: MapBrowserEvent) {
-	const store = useMarkerStore()
-	const map = event.map
-	if (store.selected !== null) {
-		updateSelection(map, null)
-	}
-	const feature = map.getFeaturesAtPixel(event.pixel, { layerFilter })[0]
-
-	if (!feature || feature instanceof RenderFeature) {
-		return
-	}
-	setLayerId(map, feature)
-	const layerConfiguration = getLayerConfiguration(
-		feature.get('_polarLayerId') as string
-	)
-	if (!layerConfiguration.isSelectable(feature)) {
-		return
-	}
-
-	const isMultiFeature = feature.get('features')?.length > 1
-	lastClickEvent = event
-	event.stopPropagation()
-
-	const isMaxZoom = map.getView().getZoom() !== map.getView().getMaxZoom()
-	if (store.clusterClickZoom && isMultiFeature && isMaxZoom) {
-		resolveClusterClick(map, feature)
-		return
-	}
-
-	store.hovered?.setStyle(undefined)
-	store.hovered = null
-	updateSelection(map, feature, true)
-
-	if (store.callOnMapSelect) {
-		const mainStore = useMainStore()
-		const { action, payload, pluginName } = store.callOnMapSelect
-		if (!pluginName) {
-			mainStore[action](payload)
-			return
-		}
-
-		const pluginListStore = usePluginStore()
-		const pluginStore = pluginListStore.getPluginStore(pluginName as PluginId)
-		if (!pluginStore) {
-			console.error(
-				`Plugin ${pluginName} does not exist or is not configured or has no store module. Action ${action} could not be called.`
-			)
-			return
-		}
-		pluginStore[action](payload)
-	}
-}
-
-function mapSingleClick(event: MapBrowserEvent) {
-	if (event.originalEvent === lastClickEvent?.originalEvent) {
-		event.stopPropagation()
-	}
-}
diff --git a/src/plugins/gfi/components/GfiFeature.ce.vue b/src/plugins/gfi/components/GfiFeature.ce.vue
index 56d7ba9703..22f6fa1157 100644
--- a/src/plugins/gfi/components/GfiFeature.ce.vue
+++ b/src/plugins/gfi/components/GfiFeature.ce.vue
@@ -2,20 +2,30 @@
 	<div class="action-bar">
 		<div class="action-bar-group">
 			<KernButton
-				v-if="gfiStore.featureIndex > 0"
+				v-if="gfiStore.features.length > 1"
 				class="kern-btn--tertiary"
 				icon="kern-icon--arrow-back"
 				:label-sr-only="true"
-				@click="gfiStore.featureIndex--"
+				@click="
+					gfiStore.featureIndex =
+						gfiStore.featureIndex > 0
+							? gfiStore.featureIndex - 1
+							: gfiStore.features.length - 1
+				"
 			>
 				{{ $t(($) => $.switch.previous, { ns: PluginId }) }}
 			</KernButton>
 			<KernButton
-				v-if="gfiStore.featureIndex + 1 < gfiStore.features.length"
+				v-if="gfiStore.features.length > 1"
 				class="kern-btn--tertiary"
 				icon="kern-icon--arrow-forward"
 				:label-sr-only="true"
-				@click="gfiStore.featureIndex++"
+				@click="
+					gfiStore.featureIndex =
+						gfiStore.featureIndex + 1 < gfiStore.features.length
+							? gfiStore.featureIndex + 1
+							: 0
+				"
 			>
 				{{ $t(($) => $.switch.next, { ns: PluginId }) }}
 			</KernButton>
@@ -34,7 +44,7 @@
 				class="kern-btn--tertiary"
 				icon="kern-icon--close"
 				:label-sr-only="true"
-				@click="gfiStore.selectedFeatures = markRaw({})"
+				@click="gfiStore.selectedFeature = null"
 			>
 				{{ $t(($) => $.header.close, { ns: PluginId }) }}
 			</KernButton>
@@ -109,8 +119,6 @@
 </template>
 
 <script setup lang="ts">
-import { markRaw } from 'vue'
-
 import KernButton from '@/components/kern/KernButton.ce.vue'
 import { useCoreStore } from '@/core/stores'
 
diff --git a/src/plugins/gfi/components/GfiFeatureList.ce.vue b/src/plugins/gfi/components/GfiFeatureList.ce.vue
index 256683253a..95953b3e14 100644
--- a/src/plugins/gfi/components/GfiFeatureList.ce.vue
+++ b/src/plugins/gfi/components/GfiFeatureList.ce.vue
@@ -17,7 +17,7 @@
 			/>
 		</hgroup>
 	</header>
-	<section class="kern-card__body" @mouseleave="gfiStore.hover(null)">
+	<section class="kern-card__body" @mouseleave="gfiStore.hoveredFeature = null">
 		<p
 			v-if="gfiStore.listFlatFeatures.length === 0"
 			class="kern-body kern-body--small polar-plugin-gfi-list-empty-view"
@@ -34,9 +34,9 @@
 				class="feature-list-item"
 				:class="{ hovered }"
 				@click="setSelectedFeature(layerId, feature)"
-				@mouseenter="gfiStore.hover({ layerId, feature })"
-				@focus="gfiStore.hover({ layerId, feature })"
-				@blur="gfiStore.hover(null)"
+				@mouseenter="gfiStore.hoveredFeature = { layerId, feature }"
+				@focus="gfiStore.hoveredFeature = { layerId, feature }"
+				@blur="gfiStore.hoveredFeature = null"
 			>
 				<h3 class="kern-title kern-title--small">
 					{{ text.title }}
@@ -55,7 +55,7 @@
 <script setup lang="ts">
 import type { Feature } from 'ol'
 
-import { markRaw, nextTick } from 'vue'
+import { nextTick } from 'vue'
 
 import KernPagination from '@/components/kern/KernPagination.ce.vue'
 
@@ -65,11 +65,9 @@ import { PluginId } from '../types'
 const gfiStore = useGfiStore()
 
 async function setSelectedFeature(layerId: string, feature: Feature) {
-	gfiStore.hoveredFeatures = markRaw({})
+	gfiStore.hoveredFeature = null
 	await nextTick()
-	gfiStore.selectedFeatures = markRaw({
-		[layerId]: markRaw([feature]),
-	})
+	gfiStore.selectedFeature = { layerId, feature }
 }
 </script>
 
diff --git a/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts b/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts
index cc0973d220..c2e0883837 100644
--- a/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts
+++ b/src/plugins/gfi/composables/useBindWithCoreHoverSelect.ts
@@ -1,108 +1,103 @@
 import type { Feature } from 'ol'
 import type { ShallowRef } from 'vue'
 
-import ClusterSource from 'ol/source/Cluster'
 import { markRaw, watch } from 'vue'
 
-import { useCoreStore } from '@/core/stores'
-import getCluster from '@/lib/getCluster'
-
 import { useGfiMainStore } from '../stores/main'
 import { filterSelectableFeatures } from '../utils/filterSelectableFeatures'
 
 type CoreFeature = Feature | null
-type GfiFeature = Record<string, Feature[]>
-
-function assignCoreToGfi(target: ShallowRef<GfiFeature>, feature: CoreFeature) {
+type CoreFeatures = Feature[]
+type GfiFeature = { layerId: string; feature: Feature } | null
+type GfiFeatures = Partial<Record<string, Feature[]>>
+
+function assignCoreToGfiCluster(
+	target: ShallowRef<GfiFeatures>,
+	features: CoreFeatures,
+	referenceOrder?: CoreFeatures
+) {
 	const gfiMainStore = useGfiMainStore()
-
-	if (feature === null) {
-		target.value = markRaw({})
-		return
+	const layerId = features[0]?.get('_polarLayerId')
+	const layerConfiguration = gfiMainStore.getLayerConfiguration(layerId)
+
+	if (referenceOrder) {
+		features.sort((a, b) => {
+			const getIndex = (feature) => referenceOrder.indexOf(feature)
+			return getIndex(a) - getIndex(b)
+		})
 	}
 
-	const layerId = feature.get('_polarLayerId')
-	const newFeatures = filterSelectableFeatures(
-		feature.get('features') || [feature],
-		gfiMainStore.getLayerConfiguration(layerId)?.isSelectable
+	target.value = markRaw(
+		Object.groupBy(
+			filterSelectableFeatures(features, layerConfiguration?.isSelectable),
+			(feature) => feature.get('_polarLayerId')
+		)
 	)
-	target.value = markRaw({
-		...(newFeatures.length ? { [layerId]: markRaw(newFeatures) } : {}),
-	})
 }
 
-function assignGfiToCore(
+function assignGfiToCoreFeature(
 	target: ShallowRef<CoreFeature>,
-	featureMap: GfiFeature
+	feature: GfiFeature
 ) {
-	const coreStore = useCoreStore()
-
-	const features = Object.entries(featureMap).flatMap(([layerId, features]) =>
-		features.map((feature) => ({ layerId, feature }))
-	)
-
-	// The second condition is necessary for TypeScript checks.
-	if (features.length <= 0 || !features[0]) {
+	if (!feature) {
 		target.value = null
 		return
 	}
+	target.value = markRaw(feature.feature)
+}
 
-	const targetFeature = target.value
-	const targetLayerId = targetFeature?.get('_polarLayerId')
-	const targetClusterFeatures =
-		targetFeature?.get('features') || (targetFeature ? [targetFeature] : [])
-	if (
-		targetLayerId === features[0].layerId &&
-		targetClusterFeatures.length === features.length &&
-		features.every(({ feature }) => targetClusterFeatures.includes(feature))
-	) {
+function assignCoreToGfiFeature(
+	target: ShallowRef<GfiFeature>,
+	feature: CoreFeature
+) {
+	if (!feature) {
+		target.value = null
 		return
 	}
-
-	const { feature, layerId } = features[0]
-	feature.set('_polarLayerId', layerId, true)
-	target.value = markRaw(
-		coreStore.getLayer(layerId)?.getSource() instanceof ClusterSource
-			? getCluster(coreStore.map, feature, '_polarLayerId')
-			: feature
-	)
+	target.value = markRaw({
+		layerId: feature.get('_polarLayerId'),
+		feature,
+	})
 }
 
-export function useBindWithCoreHoverSelect(
-	hoveredFeatures: ShallowRef<Record<string, Feature[]>>,
-	selectedFeatures: ShallowRef<Record<string, Feature[]>>,
-	coreHoveredFeature: ShallowRef<Feature | null>,
-	coreSelectedFeature: ShallowRef<Feature | null>
+function bindWithWatcher<T, S, E>(
+	target: ShallowRef<T>,
+	source: ShallowRef<S>,
+	handler: (target: ShallowRef<T>, source: S, extra?: E) => void,
+	extra?: ShallowRef<E>
 ) {
 	watch(
-		coreHoveredFeature,
-		(feature) => {
-			assignCoreToGfi(hoveredFeatures, feature)
-		},
-		{ immediate: true }
-	)
-
-	watch(
-		coreSelectedFeature,
-		(feature) => {
-			assignCoreToGfi(selectedFeatures, feature)
+		source,
+		(value) => {
+			handler(target, value, extra?.value)
 		},
-		{ immediate: true }
+		{
+			immediate: true,
+		}
 	)
+}
 
-	watch(
-		hoveredFeatures,
-		(featureMap) => {
-			assignGfiToCore(coreHoveredFeature, featureMap)
-		},
-		{ immediate: true }
-	)
+export function useBindWithCoreHoverSelect(
+	hoveredFeature: ShallowRef<GfiFeature>,
+	coreHoveredFeature: ShallowRef<CoreFeature>,
+	hoveredFeatures: ShallowRef<GfiFeatures>,
+	coreHoveredFeatures: ShallowRef<CoreFeatures>,
+	selectedFeature: ShallowRef<GfiFeature>,
+	coreSelectedFeature: ShallowRef<CoreFeature>,
+	selectedFeatures: ShallowRef<GfiFeatures>,
+	coreSelectedFeatures: ShallowRef<CoreFeatures>,
+	referenceOrder: ShallowRef<Feature[]>
+) {
+	bindWithWatcher(hoveredFeature, coreHoveredFeature, assignCoreToGfiFeature)
+	bindWithWatcher(coreHoveredFeature, hoveredFeature, assignGfiToCoreFeature)
+	bindWithWatcher(hoveredFeatures, coreHoveredFeatures, assignCoreToGfiCluster)
 
-	watch(
+	bindWithWatcher(selectedFeature, coreSelectedFeature, assignCoreToGfiFeature)
+	bindWithWatcher(coreSelectedFeature, selectedFeature, assignGfiToCoreFeature)
+	bindWithWatcher(
 		selectedFeatures,
-		(featureMap) => {
-			assignGfiToCore(coreSelectedFeature, featureMap)
-		},
-		{ immediate: true }
+		coreSelectedFeatures,
+		assignCoreToGfiCluster,
+		referenceOrder
 	)
 }
diff --git a/src/plugins/gfi/composables/useSelectedFeatures.ts b/src/plugins/gfi/composables/useSelectedFeatures.ts
index 66422da7ec..59976baa6b 100644
--- a/src/plugins/gfi/composables/useSelectedFeatures.ts
+++ b/src/plugins/gfi/composables/useSelectedFeatures.ts
@@ -1,28 +1,115 @@
 import type { Feature as GeoJsonFeature } from 'geojson'
-import type { Feature } from 'ol'
+import type { Feature as OlFeature } from 'ol'
 
+import { isEqual, mapValues } from 'es-toolkit'
 import { GeoJSON } from 'ol/format'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, shallowRef } from 'vue'
 
+interface Feature {
+	geojsonFeature: GeoJsonFeature
+	olFeature?: OlFeature
+}
+
+/**
+ * The GFI plugin may be used either with a vector layer or using GFI requests.
+ * If a vector layer is used, we have OpenLayers features that are converted to GeoJSON features.
+ * Otherwise, the response are just GeoJSON features.
+ *
+ * This composable considers this and allows for both scenarios:
+ * For vector layers, both features are updated.
+ * For GFI requests, only the GeoJSON features are used.
+ */
 export function useSelectedFeatures() {
-	const selectedFeatures = shallowRef<Record<string, Feature[]>>({})
-	const featureInformation = ref<Record<string, GeoJsonFeature[]>>({})
+	const features = shallowRef<Record<string, Feature[]>>({})
+	const feature = shallowRef<(Feature & { layerId: string }) | null>(null)
+
+	const olFeatures = computed<Record<string, OlFeature[]>>({
+		get: () =>
+			mapValues(features.value, (list) =>
+				list
+					.filter(
+						(feature): feature is Feature & { olFeature: Feature } =>
+							'olFeature' in feature
+					)
+					.map(({ olFeature }) => olFeature)
+			),
+		set: (value) => {
+			features.value = mapValues(value, (list) =>
+				list.map((olFeature) => ({
+					olFeature,
+					geojsonFeature: new GeoJSON().writeFeatureObject(olFeature),
+				}))
+			)
+		},
+	})
+
+	const geojsonFeatures = computed<Record<string, GeoJsonFeature[]>>({
+		get: () =>
+			mapValues(features.value, (list) =>
+				list.map(({ geojsonFeature }) => geojsonFeature)
+			),
+		set: (value) => {
+			features.value = mapValues(value, (list) =>
+				list.map((geojsonFeature) => ({ geojsonFeature }))
+			)
+		},
+	})
+
+	const olFeature = computed<{
+		layerId: string
+		feature: OlFeature
+	} | null>({
+		get: () =>
+			feature.value?.olFeature
+				? {
+						layerId: feature.value.layerId,
+						feature: feature.value.olFeature,
+					}
+				: null,
+		set: (value) => {
+			if (value === null) {
+				feature.value = null
+				return
+			}
+			const layerId = value.layerId
+			feature.value = {
+				layerId,
+				olFeature: value.feature,
+				geojsonFeature: new GeoJSON().writeFeatureObject(value.feature),
+			}
+		},
+	})
+
+	const geojsonFeature = computed<{
+		layerId: string
+		feature: GeoJsonFeature
+	} | null>({
+		get: () =>
+			feature.value
+				? {
+						layerId: feature.value.layerId,
+						feature: feature.value.geojsonFeature,
+					}
+				: null,
+		set: (value) => {
+			if (value === null) {
+				feature.value = null
+				return
+			}
+			const layerId = value.layerId
+			const item = features.value[layerId]?.find(({ geojsonFeature }) =>
+				isEqual(geojsonFeature, value.feature)
+			)
+			feature.value = item
+				? { ...item, layerId }
+				: { layerId, geojsonFeature: value.feature }
+		},
+	})
 
 	return {
-		selectedFeatures: computed({
-			get: () => selectedFeatures.value,
-			set: (value) => {
-				selectedFeatures.value = value
-				featureInformation.value = Object.fromEntries(
-					Object.entries(value).map(([layerId, features]) => [
-						layerId,
-						features.map((feature) =>
-							new GeoJSON().writeFeatureObject(feature)
-						),
-					])
-				)
-			},
-		}),
-		featureInformation,
+		olFeatures,
+		olFeature,
+		geojsonFeatures,
+		geojsonFeature,
 	}
 }
diff --git a/src/plugins/gfi/store.ts b/src/plugins/gfi/store.ts
index 4f7de3e0e7..b8457a7aec 100644
--- a/src/plugins/gfi/store.ts
+++ b/src/plugins/gfi/store.ts
@@ -5,6 +5,7 @@
 /* eslint-enable tsdoc/syntax */
 
 import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
+import { readonly } from 'vue'
 
 import { useGfiFeatureStore } from './stores/feature'
 import { useGfiListStore } from './stores/list'
@@ -43,35 +44,49 @@ export const useGfiStore = defineStore('plugins/gfi', () => {
 		renderType: gfiMainStoreRefs.renderType,
 
 		/**
-		 * Hovered features.
+		 * Hovered feature.
+		 * This is a feature whose hovering state is originated at the plugin.
+		 *
 		 * This is only used for the list view.
 		 *
 		 * @alpha
 		 */
-		hoveredFeatures: gfiListStoreRefs.hoveredFeatures,
+		hoveredFeature: gfiListStoreRefs.hoveredFeature,
 
 		/**
-		 * Mark feature as hovered.
+		 * Hovered features.
+		 * The hovering state may be originated either from {@link hoveredFeature} or by other means.
+		 *
 		 * This is only used for the list view.
 		 *
+		 * @readonly
+		 * @alpha
+		 */
+		hoveredFeatures: readonly(gfiListStoreRefs.hoveredFeatures),
+
+		/**
+		 * Selected feature.
+		 * This is only used if the feature is loaded from the list view.
+		 *
 		 * @alpha
 		 */
-		hover: gfiListStore.hover,
+		selectedFeature: gfiMainStoreRefs.olFeature,
 
 		/**
 		 * Selected features.
 		 * This is only used if the feature is loaded from the list view.
 		 *
+		 * @readonly
 		 * @alpha
 		 */
-		selectedFeatures: gfiMainStoreRefs.selectedFeatures,
+		selectedFeatures: readonly(gfiMainStoreRefs.olFeatures),
 
 		/**
 		 * Feature information for the currently selected feature(s).
 		 *
 		 * @alpha
 		 */
-		featureInformation: gfiMainStoreRefs.featureInformation,
+		featureInformation: gfiMainStoreRefs.geojsonFeatures,
 
 		/**
 		 * List of features that should be displayed in a list view.
@@ -177,12 +192,9 @@ export const useGfiStore = defineStore('plugins/gfi', () => {
 		 * Selected feature for the detail view.
 		 * This is the currently shown feature.
 		 *
-		 * To mutate this value, change `featureIndex`.
-		 *
-		 * @readonly
 		 * @alpha
 		 */
-		feature: gfiFeatureStoreRefs.selectedFeature,
+		feature: gfiMainStoreRefs.geojsonFeature,
 
 		/**
 		 * Properties for the selected feature in detail view.
diff --git a/src/plugins/gfi/stores/feature.ts b/src/plugins/gfi/stores/feature.ts
index 56be4518e4..ef48a45b6d 100644
--- a/src/plugins/gfi/stores/feature.ts
+++ b/src/plugins/gfi/stores/feature.ts
@@ -5,7 +5,7 @@ import type { GfiLayerConfiguration, RequestGfiParameters } from '../types'
 import { rawLayerList } from '@masterportal/masterportalapi'
 import { debounce, isEqual } from 'es-toolkit'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { computed, nextTick, onScopeDispose, ref, watch } from 'vue'
+import { computed, nextTick, onScopeDispose, watch } from 'vue'
 
 import { useRefStore } from '@/composables/useRefStore'
 import { useStoreWatcher } from '@/composables/useStoreWatcher'
@@ -85,10 +85,10 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 
 		if (options.toggleSelection) {
 			Object.entries(result).forEach(([layerId, features]) => {
-				if (!gfiMainStore.featureInformation[layerId]) {
-					gfiMainStore.featureInformation[layerId] = []
+				if (!gfiMainStore.geojsonFeatures[layerId]) {
+					gfiMainStore.geojsonFeatures[layerId] = []
 				}
-				const layerFeatureList = gfiMainStore.featureInformation[layerId]
+				const layerFeatureList = gfiMainStore.geojsonFeatures[layerId]
 
 				features.forEach((feature) => {
 					const oldFeatureIndex = layerFeatureList.findIndex((oldFeature) =>
@@ -104,7 +104,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 			return
 		}
 
-		gfiMainStore.featureInformation = result
+		gfiMainStore.geojsonFeatures = result
 	}
 
 	const waitMs = computed(() => gfiMainStore.configuration.waitMs || 50)
@@ -118,7 +118,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 					coordinate as RequestGfiParameters['coordinateOrExtent']
 				)
 			} else {
-				gfiMainStore.featureInformation = {}
+				gfiMainStore.geojsonFeatures = {}
 			}
 		},
 		{ immediate: true }
@@ -136,7 +136,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 						gfiMainStore.configuration.multiSelect?.toggleSelection ?? true,
 				})
 			} else {
-				gfiMainStore.featureInformation = {}
+				gfiMainStore.geojsonFeatures = {}
 			}
 		})
 	}
@@ -161,20 +161,30 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	}
 
 	const visibleFeatures = computed(() =>
-		Object.entries(gfiMainStore.featureInformation)
+		Object.entries(gfiMainStore.geojsonFeatures)
 			.filter(([layerId]) => gfiMainStore.configuration.layers[layerId]?.window)
 			.flatMap(([layerId, features]) =>
 				features.map((feature) => ({ layerId, feature }))
 			)
 	)
 
-	const selectedFeatureIndex = ref(0)
-	const selectedFeature = computed(
-		() => visibleFeatures.value[selectedFeatureIndex.value]
-	)
+	const selectedFeatureIndex = computed({
+		get: () =>
+			visibleFeatures.value.findIndex((feature) =>
+				isEqual(feature, gfiMainStore.geojsonFeature)
+			),
+		set: (value) => {
+			const feature = visibleFeatures.value[value]
+			if (feature) {
+				gfiMainStore.geojsonFeature = feature
+			}
+		},
+	})
 
 	const selectedFeatureLayerConfiguration = computed(() =>
-		gfiMainStore.getLayerConfiguration(selectedFeature.value?.layerId || '')
+		gfiMainStore.getLayerConfiguration(
+			gfiMainStore.geojsonFeature?.layerId || ''
+		)
 	)
 
 	const exportPropertyLayerConfiguration = computed(
@@ -183,7 +193,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 
 	const exportProperty = computed(() =>
 		exportPropertyLayerConfiguration.value
-			? selectedFeature.value?.feature.properties?.[
+			? gfiMainStore.geojsonFeature?.feature.properties?.[
 					exportPropertyLayerConfiguration.value
 				]
 			: null
@@ -196,8 +206,8 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	)
 
 	const title = computed(() =>
-		titleLayerConfiguration.value && selectedFeature.value
-			? titleLayerConfiguration.value(selectedFeature.value.feature)
+		titleLayerConfiguration.value && gfiMainStore.geojsonFeature
+			? titleLayerConfiguration.value(gfiMainStore.geojsonFeature.feature)
 			: null
 	)
 
@@ -207,7 +217,7 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 
 	const selectedFeatureProperties = computed(() =>
 		Object.fromEntries(
-			Object.entries(selectedFeature.value?.feature.properties || {})
+			Object.entries(gfiMainStore.geojsonFeature?.feature.properties || {})
 				.filter(
 					([key]) =>
 						(!selectedFeaturePropertiesLayerConfiguration.value ||
@@ -222,15 +232,10 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	)
 
 	watch(
-		visibleFeatures,
-		() => {
-			selectedFeatureIndex.value = 0
-		},
-		{ deep: true }
-	)
-
-	watch(
-		[() => gfiMainStore.configuration.coordinateTarget, selectedFeature],
+		[
+			() => gfiMainStore.configuration.coordinateTarget,
+			() => gfiMainStore.geojsonFeature,
+		],
 		([target, feature], [, oldFeature]) => {
 			if (target && !feature && oldFeature) {
 				const targetStore = useRefStore(target)
@@ -257,11 +262,14 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 		void nextTick(() => {
 			const iconMenuStore = coreStore.getPluginStore('iconMenu')
 			if (iconMenuStore) {
-				watch(selectedFeature, (newFeature) => {
-					if (newFeature) {
-						iconMenuStore.openMenuById(PluginId)
+				watch(
+					() => gfiMainStore.geojsonFeature,
+					(newFeature) => {
+						if (newFeature) {
+							iconMenuStore.openMenuById(PluginId)
+						}
 					}
-				})
+				)
 			}
 		})
 	}
@@ -269,7 +277,6 @@ export const useGfiFeatureStore = defineStore('plugins/gfi/feature', () => {
 	return {
 		visibleFeatures,
 		selectedFeatureIndex,
-		selectedFeature,
 		selectedFeatureProperties,
 		exportProperty,
 		title,
diff --git a/src/plugins/gfi/stores/list.ts b/src/plugins/gfi/stores/list.ts
index 8779bc6a1a..236d0643a2 100644
--- a/src/plugins/gfi/stores/list.ts
+++ b/src/plugins/gfi/stores/list.ts
@@ -2,7 +2,7 @@ import type { Feature } from 'ol'
 import type { FeatureList } from '../types'
 
 import { acceptHMRUpdate, defineStore, storeToRefs } from 'pinia'
-import { computed, markRaw, ref, shallowRef } from 'vue'
+import { computed, markRaw, ref, shallowRef, watch } from 'vue'
 
 import { useOlVectorSources } from '@/composables/useOlVectorSources'
 import { useRefStore } from '@/composables/useRefStore'
@@ -24,32 +24,11 @@ export const useGfiListStore = defineStore('plugins/gfi/list', () => {
 
 	const configuration = computed(() => gfiMainStore.configuration.featureList)
 
+	const hoveredFeature = shallowRef<{
+		layerId: string
+		feature: Feature
+	} | null>(null)
 	const hoveredFeatures = shallowRef<Record<string, Feature[]>>({})
-	if (configuration.value?.bindWithCoreHoverSelect) {
-		useBindWithCoreHoverSelect(
-			hoveredFeatures,
-			gfiMainStoreRefs.selectedFeatures,
-			coreStoreRefs.hoveredFeature,
-			coreStoreRefs.selectedFeature
-		)
-	}
-
-	function hover(data: { layerId: string; feature: Feature } | null) {
-		if (data === null) {
-			if (Object.keys(hoveredFeatures.value).length) {
-				hoveredFeatures.value = markRaw({})
-			}
-			return
-		}
-
-		const { layerId, feature } = data
-		if (hoveredFeatures.value[layerId]?.includes(feature)) {
-			return
-		}
-		hoveredFeatures.value = markRaw({
-			[layerId]: markRaw([feature]),
-		})
-	}
 
 	const activeLayers = computed((): string[] => {
 		if (!configuration.value) {
@@ -170,8 +149,12 @@ export const useGfiListStore = defineStore('plugins/gfi/list', () => {
 		paginatedFeatures.value.map((feature) => ({
 			...feature,
 			get hovered() {
-				return Object.values(hoveredFeatures.value).some((features) =>
-					features.includes(feature.feature)
+				return (
+					Object.values(hoveredFeatures.value).some((features) =>
+						features.includes(feature.feature)
+					) ||
+					(configuration.value?.bindWithCoreHoverSelect &&
+						coreStore.hoveredClusterFeatures.includes(feature.feature))
 				)
 			},
 			text: {
@@ -182,10 +165,46 @@ export const useGfiListStore = defineStore('plugins/gfi/list', () => {
 		}))
 	)
 
+	if (configuration.value?.bindWithCoreHoverSelect) {
+		useBindWithCoreHoverSelect(
+			// hovered feature
+			hoveredFeature,
+			coreStoreRefs.hoveredFeature,
+			// hovered cluster
+			hoveredFeatures,
+			coreStoreRefs.hoveredClusterFeatures,
+			// selected feature
+			gfiMainStoreRefs.olFeature,
+			coreStoreRefs.selectedFeature,
+			// selected cluster
+			gfiMainStoreRefs.olFeatures,
+			coreStoreRefs.selectedClusterFeatures,
+			// reference order
+			computed(() => flatFeatures.value.map(({ feature }) => feature))
+		)
+	} else {
+		watch(hoveredFeature, (value) => {
+			if (value === null) {
+				hoveredFeatures.value = {}
+				return
+			}
+			const { layerId, feature } = value
+			hoveredFeatures.value = { [layerId]: [feature] }
+		})
+		watch(gfiMainStoreRefs.olFeature, (value) => {
+			if (value === null) {
+				gfiMainStore.olFeatures = {}
+				return
+			}
+			const { layerId, feature } = value
+			gfiMainStore.olFeatures = { [layerId]: [feature] }
+		})
+	}
+
 	return {
 		features,
+		hoveredFeature,
 		hoveredFeatures,
-		hover,
 		flatFeatures,
 		paginationActive,
 		pageLength,
diff --git a/src/plugins/gfi/stores/main.ts b/src/plugins/gfi/stores/main.ts
index 19b8093e68..70c030875a 100644
--- a/src/plugins/gfi/stores/main.ts
+++ b/src/plugins/gfi/stores/main.ts
@@ -35,7 +35,8 @@ export const useGfiMainStore = defineStore('plugins/gfi/main', () => {
 		return configuration.value.layers[layerId]
 	}
 
-	const { selectedFeatures, featureInformation } = useSelectedFeatures()
+	const { olFeatures, olFeature, geojsonFeatures, geojsonFeature } =
+		useSelectedFeatures()
 
 	const customHighlightStyle = computed(
 		() =>
@@ -51,7 +52,7 @@ export const useGfiMainStore = defineStore('plugins/gfi/main', () => {
 			})
 	)
 	const highlightedFeatures = computed(() =>
-		Object.entries(featureInformation.value)
+		Object.entries(geojsonFeatures.value)
 			.filter(([layerId]) => getLayerConfiguration(layerId)?.geometry ?? true)
 			.flatMap(([, features]) => features)
 	)
@@ -65,8 +66,10 @@ export const useGfiMainStore = defineStore('plugins/gfi/main', () => {
 		configuration,
 		renderType,
 		getLayerConfiguration,
-		selectedFeatures,
-		featureInformation,
+		olFeatures,
+		olFeature,
+		geojsonFeatures,
+		geojsonFeature,
 	}
 })