diff --git a/src/assets/DefaultBaseMaps.json b/src/assets/DefaultBaseMaps.json
new file mode 100644
index 000000000..0f09bff28
--- /dev/null
+++ b/src/assets/DefaultBaseMaps.json
@@ -0,0 +1,17 @@
+{
+  "automatic": {
+    "id": "automatic",
+    "name": "Automatic",
+    "style": "automatic"
+  },
+  "light": {
+    "id": "carto-db-light",
+    "name": "CartoDB (light)",
+    "style": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+  },
+  "dark": {
+    "id": "carto-dark-matter",
+    "name": "CartoDB (dark)",
+    "style": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
+  }
+}
diff --git a/src/assets/DefaultUserSettings.json b/src/assets/DefaultUserSettings.json
index 2bbc2e643..746cf89f7 100644
--- a/src/assets/DefaultUserSettings.json
+++ b/src/assets/DefaultUserSettings.json
@@ -82,27 +82,6 @@
     ],
     "group": "UI"
   },
-  {
-    "id": "ui.map.theme",
-    "type": "oneOfMultiple",
-    "label": "Basemap",
-    "value": "carto-db-automatic",
-    "items": [
-      {
-        "value": "carto-db-automatic",
-        "icon": "mdi-theme-light-dark"
-      },
-      {
-        "value": "carto-db-light",
-        "icon": "mdi-weather-sunny"
-      },
-      {
-        "value": "carto-dark-matter",
-        "icon": "mdi-weather-night"
-      }
-    ],
-    "group": "Map"
-  },
   {
     "id": "ui.map.showLocationNames",
     "type": "boolean",
diff --git a/src/assets/base-layers.json b/src/assets/base-layers.json
deleted file mode 100644
index a4581f1b2..000000000
--- a/src/assets/base-layers.json
+++ /dev/null
@@ -1,57 +0,0 @@
-{
-  "default": "carto-dark-matter",
-  "maxZoom": 18,
-  "baseLayers": [
-    {
-      "id": "carto-db-automatic",
-      "name": "CartoDB (automatic)",
-      "img": "cartodb-light-dark.png",
-      "automatic": {
-        "dark": "carto-dark-matter",
-        "light": "carto-db-light"
-      }
-    },
-    {
-      "id": "carto-db-light",
-      "name": "CartoDB (licht)",
-      "img": "cartodb-light.png",
-      "type": "vector",
-      "style": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
-      "attribution": "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> &copy; <a href='http://cartodb.com/attributions'>CartoDB</a>"
-    },
-    {
-      "id": "carto-dark-matter",
-      "name": "CartoDB (dark)",
-      "img": "cartodb-dark.png",
-      "type": "vector",
-      "style": "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
-      "attribution": "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> &copy; <a href='http://cartodb.com/attributions'>CartoDB</a>"
-    },
-    {
-      "id": "brt-water",
-      "name": "BRT Water",
-      "type": "raster",
-      "img": "brt-waterkaart-thumbnail.png",
-      "layers": [
-        {
-          "urlTemplate": "https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/water/EPSG:3857/{z}/{x}/{y}.png",
-          "attribution": ""
-        }
-      ],
-      "minZoom": 6,
-      "maxZoom": 19
-    },
-    {
-      "id": "esri-imagery",
-      "type": "raster",
-      "name": "ESRI WorldImagery",
-      "img": "esri-worldimagery-thumbnail.jpeg",
-      "layers": [
-        {
-          "urlTemplate": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
-          "attribution": "Tiles &copy; Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AEX, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community"
-        }
-      ]
-    }
-  ]
-}
diff --git a/src/components/general/DashboardDisplay.vue b/src/components/general/DashboardDisplay.vue
index fd8ab6710..570da93f6 100644
--- a/src/components/general/DashboardDisplay.vue
+++ b/src/components/general/DashboardDisplay.vue
@@ -1,39 +1,23 @@
 <template>
   <div class="dashboard-container ga-3 pa-3">
-    <template v-for="panel in panelItems">
-      <v-card
-        v-if="panel.component"
-        :style="{ gridArea: panel.id }"
-        class="d-flex flex-column"
-        density="compact"
-      >
-        <component
-          class="overflow-auto"
-          :is="panel.component"
-          v-bind="panel.props"
-          :topologyNode="panel.node"
-        />
-      </v-card>
-      <v-alert
-        v-else
-        :title="`${panel.id} not implemented`"
-        :style="{ gridArea: panel.id }"
-        class="ma-2"
-      />
+    <template v-for="group in groups">
+      <template v-for="element in group.elements">
+        <v-card
+          :style="{ gridArea: element.gridTemplateArea }"
+          class="d-flex flex-column"
+          density="compact"
+        >
+          <DashboardItems :items="element.items" />
+        </v-card>
+      </template>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getComponentWithPropsForNode } from '@/lib/topology/dashboard'
-import type { TopologyNode } from '@deltares/fews-pi-requests'
+import type { Dashboard } from '@/lib/dashboard/types'
 import { computed, watch } from 'vue'
-
-interface Dashboard {
-  id: string
-  css: string
-  panels: TopologyNode[]
-}
+import DashboardItems from '@/components/general/DashboardItems.vue'
 
 interface Props {
   dashboard: Dashboard
@@ -41,18 +25,7 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const panelItems = computed(() => {
-  return props.dashboard.panels.map((panel) => {
-    const { component, props } = getComponentWithPropsForNode(panel)
-    return {
-      id: panel.id,
-      title: panel.name,
-      node: panel,
-      component,
-      props,
-    }
-  })
-})
+const groups = computed(() => props.dashboard.groups)
 
 function loadCss(url: string) {
   if (!document.querySelector(`link[href="${url}"]`)) {
@@ -71,7 +44,7 @@ function removeCss(url: string) {
 }
 
 watch(
-  () => props.dashboard.css,
+  () => props.dashboard.cssTemplate,
   (newCss, oldCss) => {
     if (oldCss) removeCss(oldCss)
     loadCss(newCss)
diff --git a/src/components/general/DashboardItems.vue b/src/components/general/DashboardItems.vue
new file mode 100644
index 000000000..d0fe895a4
--- /dev/null
+++ b/src/components/general/DashboardItems.vue
@@ -0,0 +1,87 @@
+<template>
+  <v-tabs
+    v-model="tab"
+    v-if="items.length > 1"
+    bg-color="primary"
+    align-tabs="center"
+    class="flex-0-0 w-100"
+    density="compact"
+  >
+    <v-tab
+      v-for="item in componentItems"
+      :prepend-icon="item.icon"
+      class="text-none"
+    >
+      {{ item.title }}
+    </v-tab>
+  </v-tabs>
+
+  <template v-for="(item, i) in componentItems">
+    <component
+      v-if="tab === i"
+      class="overflow-auto flex-1-1"
+      :is="item.component"
+      v-bind="item.componentProps"
+      :topologyNode="item.topologyNode"
+      :settings="item.settings"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { DashboardItem } from '@/lib/dashboard/types'
+import {
+  componentTypeToIconMap,
+  componentTypeToTitleMap,
+} from '@/lib/topology/component'
+import {
+  componentTypeToComponentMap,
+  getComponentPropsForNode,
+} from '@/lib/topology/dashboard'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { useTopologyNodesStore } from '@/stores/topologyNodes'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  items: DashboardItem[]
+}
+
+const props = defineProps<Props>()
+
+const tab = ref(0)
+
+const topologyNodesStore = useTopologyNodesStore()
+const componentSettingsStore = useComponentSettingsStore()
+
+function getComponentSettingsForItem(item: DashboardItem) {
+  const settings = componentSettingsStore.getSettingsById(
+    item.componentSettingsId,
+  )
+  return settings?.[item.component]
+}
+
+const componentItems = computed(() => {
+  return props.items.map((item) => {
+    const componentName = item.component
+    const topologyNode = topologyNodesStore.getNodeById(item.topologyNodeId)
+    const component = componentTypeToComponentMap[componentName]
+    const componentProps = getComponentPropsForNode(componentName, topologyNode)
+    const title = topologyNode?.name ?? componentTypeToTitleMap[componentName]
+    const icon = topologyNode?.iconId ?? componentTypeToIconMap[componentName]
+    const settings = getComponentSettingsForItem(item)
+    return {
+      title,
+      icon,
+      component,
+      componentProps,
+      componentName,
+      topologyNode,
+      settings,
+    }
+  })
+})
+
+watch(componentItems, () => {
+  tab.value = 0
+})
+</script>
diff --git a/src/components/map/MapComponent.vue b/src/components/map/MapComponent.vue
index 8bb67398b..88a0d991a 100644
--- a/src/components/map/MapComponent.vue
+++ b/src/components/map/MapComponent.vue
@@ -26,42 +26,37 @@ import { configManager } from '@/services/application-config'
 import { authenticationManager } from '@/services/authentication/AuthenticationManager'
 import {
   MglAttributionControl,
-  MglDefaults,
   MglMap,
   MglScaleControl,
-  useMap,
 } from '@indoorequal/vue-maplibre-gl'
-import type { ResourceType, RequestParameters, LngLatBounds } from 'maplibre-gl'
-import { useBaseLayers } from '@/services/useBaseLayers'
-import { useUserSettingsStore } from '@/stores/userSettings'
-import { useTemplateRef, watch } from 'vue'
+import type {
+  ResourceType,
+  RequestParameters,
+  LngLatBounds,
+  Map,
+} from 'maplibre-gl'
+import { computed, useTemplateRef, watch } from 'vue'
 import { transformStyle } from '@/lib/map'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 
 interface Props {
   bounds?: LngLatBounds
+  baseMapId?: string
 }
 
 defineProps<Props>()
 
-const settings = useUserSettingsStore()
-
-MglDefaults.style =
-  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
-
-const { baseLayerStyle } = useBaseLayers(
-  () => settings.get('ui.map.theme')?.value as string | undefined,
-)
-
-const initialStyle = baseLayerStyle.value
-
 const mapRef = useTemplateRef('map')
 
-watch(baseLayerStyle, (newBaseStyle) => {
+const componentSettingsStore = useComponentSettingsStore()
+const selectedStyle = computed(() => componentSettingsStore.selectedStyle)
+const initialStyle = selectedStyle.value
+
+watch(selectedStyle, (newBaseStyle) => {
   if (!newBaseStyle) return
 
-  // NOTE: We have to get mapkey because useMap uses inject and we are not a child of MglMap
-  const mapKey = mapRef.value?.mapKey
-  const map = useMap(mapKey).map
+  // @ts-expect-error map is not exposed in the types
+  const map: Map | undefined = mapRef.value?.map
   map?.setStyle(newBaseStyle, { transformStyle })
 })
 
diff --git a/src/components/spatialdisplay/SpatialDisplay.vue b/src/components/spatialdisplay/SpatialDisplay.vue
index 12279daae..ce4458bdb 100644
--- a/src/components/spatialdisplay/SpatialDisplay.vue
+++ b/src/components/spatialdisplay/SpatialDisplay.vue
@@ -1,34 +1,39 @@
 <template>
-  <div class="container">
+  <div class="container" ref="container">
     <div class="child-container" :class="{ 'd-none': hideMap }">
       <SpatialDisplayComponent
         :layer-name="props.layerName"
-        :location-id="props.locationId"
-        :latitude="props.latitude"
-        :longitude="props.longitude"
+        :location-id="currentLocationId"
+        :latitude="currentLatitude"
+        :longitude="currentLongitude"
         :filter-ids="props.filterIds"
         @changeLocationId="onLocationChange"
         :layer-capabilities="layerCapabilities"
         :times="times"
+        :settings="props.settings"
         :max-values-time-series="maxValuesTimeSeries"
         v-model:elevation="elevation"
         v-model:current-time="currentTime"
         @coordinate-click="onCoordinateClick"
       ></SpatialDisplayComponent>
     </div>
-    <div v-if="filter" class="child-container">
-      <router-view
-        @close="closeTimeSeriesDisplay"
-        :filter="filter"
-        :elevation-chart-filter="elevationChartFilter"
-        :current-time="currentTime"
-      ></router-view>
+    <div v-if="showChartPanel" class="child-container">
+      <router-view v-slot="{ Component }">
+        <component
+          :is="Component ?? SpatialTimeSeriesDisplay"
+          @close="closeTimeSeriesDisplay"
+          :filter="filter"
+          :elevation-chart-filter="elevationChartFilter"
+          :current-time="currentTime"
+          :settings="props.settings"
+        />
+      </router-view>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, defineAsyncComponent, ref, useTemplateRef, watch } from 'vue'
 import SpatialDisplayComponent from '@/components/spatialdisplay/SpatialDisplayComponent.vue'
 import { useDisplay } from 'vuetify'
 import { configManager } from '@/services/application-config'
@@ -47,7 +52,12 @@ import { toMercator } from '@turf/projection'
 import circle from '@turf/circle'
 import bbox from '@turf/bbox'
 import { useUserSettingsStore } from '@/stores/userSettings'
-import { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
+import type { UseDisplayConfigOptions } from '@/services/useDisplayConfig'
+import type { MapSettings } from '@/lib/topology/componentSettings'
+import { useElementSize } from '@vueuse/core'
+const SpatialTimeSeriesDisplay = defineAsyncComponent(
+  () => import('@/components/spatialdisplay/SpatialTimeSeriesDisplay.vue'),
+)
 
 interface Props {
   layerName?: string
@@ -55,6 +65,7 @@ interface Props {
   filterIds?: string[]
   latitude?: string
   longitude?: string
+  settings?: MapSettings
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,9 +75,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const route = useRoute()
 const router = useRouter()
-const { mobile } = useDisplay()
+const { thresholds } = useDisplay()
+const containerRef = useTemplateRef('container')
 
-const settings = useUserSettingsStore()
+const userSettings = useUserSettingsStore()
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 const { layerCapabilities, times } = useWmsLayerCapabilities(
   baseUrl,
@@ -98,22 +110,22 @@ const onlyCoverageLayersAvailable = computed(
 function getFilterActionsFilter(): filterActionsFilter &
   UseDisplayConfigOptions {
   return {
-    locationIds: props.locationId,
+    locationIds: currentLocationId.value,
     filterId: props.filterIds ? props.filterIds[0] : undefined,
-    useDisplayUnits: settings.useDisplayUnits,
-    convertDatum: settings.convertDatum,
+    useDisplayUnits: userSettings.useDisplayUnits,
+    convertDatum: userSettings.convertDatum,
   }
 }
 
 function getTimeSeriesGridActionsFilter():
   | (timeSeriesGridActionsFilter & UseDisplayConfigOptions)
   | undefined {
-  if (!props.longitude || !props.latitude) return
+  if (!currentLongitude.value || !currentLatitude.value) return
   if (!layerCapabilities.value?.boundingBox) return
   if (!layerCapabilities.value?.firstValueTime) return
   if (!layerCapabilities.value?.lastValueTime) return
 
-  const coordinates = [+props.longitude, +props.latitude]
+  const coordinates = [+currentLongitude.value, +currentLatitude.value]
   const [x, y] = toMercator(coordinates)
   const clickRadius = circle(coordinates, 10, { steps: 4, units: 'kilometers' })
   const bboxArray = bbox(clickRadius)
@@ -133,21 +145,27 @@ function getTimeSeriesGridActionsFilter():
     bbox: mercatorBbox,
     documentFormat: 'PI_JSON',
     elevation: elevation.value ?? layerCapabilities.value.elevation?.upperValue,
-    useDisplayUnits: settings.useDisplayUnits,
+    useDisplayUnits: userSettings.useDisplayUnits,
     // Should be available according to the docs, but errors
     // convertDatum: settings.convertDatum,
   }
 }
 
 const filter = computed(() => {
-  if (props.locationId) {
+  if (currentLocationId.value) {
     return getFilterActionsFilter()
   }
-  if (props.longitude && props.latitude) {
+  if (currentLatitude.value && currentLongitude.value) {
     return getTimeSeriesGridActionsFilter()
   }
 })
 
+const showChartPanel = computed(() => {
+  return (
+    filter.value !== undefined && !(props.settings?.chartPanelEnabled === false)
+  )
+})
+
 const elevationChartFilter = computed(() => {
   if (!layerCapabilities.value?.elevation) return
   const actionsFilter = getTimeSeriesGridActionsFilter()
@@ -172,8 +190,17 @@ onMounted(() => {
   currentLongitude.value = props.longitude
 })
 
+const { width: containerWidth } = useElementSize(containerRef)
+
+const containerIsMobileSize = computed(() => {
+  return containerWidth.value < thresholds.value.lg
+})
+
 const hideMap = computed(() => {
-  return mobile.value && (props.locationId || props.latitude || props.longitude)
+  return (
+    containerIsMobileSize.value &&
+    (currentLocationId.value || currentLongitude.value || currentLatitude.value)
+  )
 })
 
 function onLocationChange(locationId: string | null): void {
@@ -232,11 +259,12 @@ function openCoordinatesTimeSeriesDisplay(latitude: number, longitude: number) {
 }
 
 function closeTimeSeriesDisplay(): void {
+  currentLocationId.value = undefined
+  currentLatitude.value = undefined
+  currentLongitude.value = undefined
+
   const parentRoute = findParentRoute(route)
   if (parentRoute !== null) {
-    currentLocationId.value = undefined
-    currentLatitude.value = undefined
-    currentLongitude.value = undefined
     router.push({
       name: parentRoute.name,
       params: {
diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 56540a131..97d7189d1 100644
--- a/src/components/spatialdisplay/SpatialDisplayComponent.vue
+++ b/src/components/spatialdisplay/SpatialDisplayComponent.vue
@@ -13,18 +13,18 @@
       :streamlineOptions="layerCapabilities?.animatedVectors"
       @doubleclick="onCoordinateClick"
     />
-    <div class="colourbar-container" v-if="colourScalesStore.currentScale">
+    <div class="colourbar-container" v-if="currentColourScale">
       <ColourLegend
-        v-if="!colourScalesStore.currentScale.useGradients"
-        :colourMap="colourScalesStore.currentScale.colourMap"
-        :title="colourScalesStore.currentScale.title"
+        v-if="!currentColourScale.useGradients"
+        :colourMap="currentColourScale.colourMap"
+        :title="currentColourScale.title"
       />
       <ColourBar
         v-else
-        :colourMap="colourScalesStore.currentScale.colourMap"
-        :title="colourScalesStore.currentScale.title"
-        :useGradients="colourScalesStore.currentScale.useGradients"
-        v-model:range="colourScalesStore.currentScale.range"
+        :colourMap="currentColourScale.colourMap"
+        :title="currentColourScale.title"
+        :useGradients="currentColourScale.useGradients"
+        v-model:range="currentColourScale.range"
       />
     </div>
     <SelectedCoordinateLayer
@@ -41,51 +41,61 @@
       v-if="workflowsStore.isSelectingCoordinate"
       v-model:coordinate="workflowsStore.coordinate"
     />
+    <OverlayLayer
+      v-for="overlay in componentSettingsStore.selectedOverlays"
+      :key="overlay.id"
+      :overlay="overlay"
+    />
   </MapComponent>
-  <div class="mapcomponent__controls-container">
-    <v-chip-group class="control-group" selected-class="no-class">
-      <BoundingBoxControl
-        v-model:active="workflowsStore.isDrawingBoundingBox"
-        v-model:boundingBox="workflowsStore.boundingBox"
-        @finish="workflowsStore.showDialog = true"
-        v-if="workflowsStore.isDrawingBoundingBox"
-      />
-      <CoordinateSelectorControl
-        v-if="workflowsStore.isSelectingCoordinate"
-        v-model:active="workflowsStore.isSelectingCoordinate"
-        @finish="workflowsStore.showDialog = true"
-        :coordinate="workflowsStore.coordinate"
-      />
-      <template v-else>
-        <InformationPanel
-          v-if="layerOptions"
-          :layerTitle="props.layerCapabilities?.title"
-          :isLoading="isLoading"
-          :currentTime="currentTime"
-          :forecastTime="forecastTime"
-          :completelyMissing="
-            props.layerCapabilities?.completelyMissing ?? false
-          "
-          :firstValueTime="
-            new Date(props.layerCapabilities?.firstValueTime ?? '')
-          "
-          :lastValueTime="
-            new Date(props.layerCapabilities?.lastValueTime ?? '')
-          "
-          :canUseStreamlines="canUseStreamlines"
-          v-model:layer-kind="layerKind"
-          v-model:show-layer="showLayer"
-        />
-        <LocationsSearchControl
-          v-model:showLocations="showLocationsLayer"
-          width="50vw"
-          max-width="250"
-          :locations="locations"
-          :selectedLocationId="props.locationId"
-          @changeLocationId="onLocationChange"
+  <div class="mapcomponent__controls-container pa-2 ga-2">
+    <BoundingBoxControl
+      v-model:active="workflowsStore.isDrawingBoundingBox"
+      v-model:boundingBox="workflowsStore.boundingBox"
+      @finish="workflowsStore.showDialog = true"
+      v-if="workflowsStore.isDrawingBoundingBox"
+    />
+    <CoordinateSelectorControl
+      v-if="workflowsStore.isSelectingCoordinate"
+      v-model:active="workflowsStore.isSelectingCoordinate"
+      @finish="workflowsStore.showDialog = true"
+      :coordinate="workflowsStore.coordinate"
+    />
+    <template v-else>
+      <InformationPanel
+        v-if="layerOptions"
+        :layerTitle="props.layerCapabilities?.title"
+        :isLoading="isLoading"
+        :currentTime="currentTime"
+        :forecastTime="forecastTime"
+        :completelyMissing="props.layerCapabilities?.completelyMissing ?? false"
+        :firstValueTime="
+          new Date(props.layerCapabilities?.firstValueTime ?? '')
+        "
+        :lastValueTime="new Date(props.layerCapabilities?.lastValueTime ?? '')"
+        :canUseStreamlines="canUseStreamlines"
+        v-model:layer-kind="layerKind"
+        v-model:show-layer="showLayer"
+      >
+        <v-divider />
+        <ColourPanel
+          :currentColourScaleIds="currentColourScaleIds"
+          v-model:currentColourScaleIndex="currentColourScaleIndex"
         />
-      </template>
-    </v-chip-group>
+        <v-divider />
+        <BaseMapPanel />
+        <v-divider />
+        <OverlayPanel />
+      </InformationPanel>
+      <LocationsSearchControl
+        v-if="showLocationSearchControl"
+        v-model:showLocations="showLocationsLayer"
+        width="50vw"
+        max-width="250"
+        :locations="locations"
+        :selectedLocationId="props.locationId"
+        @changeLocationId="onLocationChange"
+      />
+    </template>
   </div>
   <ElevationSlider
     v-if="layerHasElevation"
@@ -108,7 +118,7 @@
     <template #below-track>
       <DateTimeSliderValues
         :values="maxValuesTimeSeries ?? []"
-        :colour-scale="colourScalesStore.currentScale ?? null"
+        :colour-scale="currentColourScale ?? null"
         height="6px"
         class="mb-1"
         style="margin-top: -7px"
@@ -122,12 +132,8 @@ import DateTimeSliderValues from '@/components/general/DateTimeSliderValues.vue'
 import MapComponent from '@/components/map/MapComponent.vue'
 import AnimatedStreamlineRasterLayer from '@/components/wms/AnimatedStreamlineRasterLayer.vue'
 
-import { ref, computed, onBeforeMount, reactive, watch, watchEffect } from 'vue'
-import {
-  convertBoundingBoxToLngLatBounds,
-  fetchWmsLegend,
-  useWmsLegend,
-} from '@/services/useWms'
+import { ref, computed, onBeforeMount, watch, watchEffect } from 'vue'
+import { convertBoundingBoxToLngLatBounds } from '@/services/useWms'
 import ColourBar from '@/components/wms/ColourBar.vue'
 import AnimatedRasterLayer, {
   AnimatedRasterLayerOptions,
@@ -135,7 +141,10 @@ import AnimatedRasterLayer, {
 import LocationsSearchControl from '@/components/wms/LocationsSearchControl.vue'
 import LocationsLayer from '@/components/wms/LocationsLayer.vue'
 import SelectedCoordinateLayer from '@/components/wms/SelectedCoordinateLayer.vue'
-import InformationPanel from '../wms/InformationPanel.vue'
+import InformationPanel from '@/components/wms/panel/InformationPanel.vue'
+import ColourPanel from '@/components/wms/panel/ColourPanel.vue'
+import OverlayPanel from '@/components/wms/panel/OverlayPanel.vue'
+import BaseMapPanel from '@/components/wms/panel/BaseMapPanel.vue'
 import ElevationSlider from '@/components/wms/ElevationSlider.vue'
 import DateTimeSlider from '@/components/general/DateTimeSlider.vue'
 import BoundingBoxControl from '@/components/map/BoundingBoxControl.vue'
@@ -155,16 +164,15 @@ import { useColourScalesStore } from '@/stores/colourScales'
 import { useDisplay } from 'vuetify'
 import { useFilterLocations } from '@/services/useFilterLocations'
 import ColourLegend from '@/components/wms/ColourLegend.vue'
-import {
-  getLegendTitle,
-  legendToRange,
-  rangeToString,
-  styleToId,
-} from '@/lib/legend'
+import { rangeToString, styleToId } from '@/lib/legend'
 import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
 import CoordinateSelectorLayer from '@/components/wms/CoordinateSelectorLayer.vue'
 import CoordinateSelectorControl from '@/components/map/CoordinateSelectorControl.vue'
+import type { MapSettings } from '@/lib/topology/componentSettings'
+import OverlayLayer from '@/components/wms/OverlayLayer.vue'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { useColourScales } from '@/services/useColourScales'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -184,6 +192,7 @@ interface Props {
   longitude?: string
   currentTime?: Date
   maxValuesTimeSeries?: TimeSeriesData[]
+  settings?: MapSettings
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -221,9 +230,8 @@ const forecastTime = ref<Date>()
 const isLoading = ref(false)
 let debouncedSetLayerOptions!: () => void
 
-const legendLayerName = ref(props.layerName)
 const legendLayerStyles = ref<Style[]>()
-const settings = useUserSettingsStore()
+const userSettings = useUserSettingsStore()
 
 const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 
@@ -231,6 +239,15 @@ const showLayer = ref<boolean>(true)
 const layerKind = ref(LayerKind.Static)
 
 const colourScalesStore = useColourScalesStore()
+const componentSettingsStore = useComponentSettingsStore()
+const currentColourScaleIds = ref<string[]>([])
+const currentColourScaleIndex = ref(0)
+const { currentScale: currentColourScale } = useColourScales(
+  currentColourScaleIndex,
+  currentColourScaleIds,
+  colourScalesStore.scales,
+)
+
 const workflowsStore = useWorkflowsStore()
 
 const showLocationsLayer = ref<boolean>(true)
@@ -248,73 +265,22 @@ watchEffect(() => {
 
 watch(
   legendLayerStyles,
-  () => {
-    const styles = legendLayerStyles.value
+  (styles) => {
     if (styles === undefined) {
-      colourScalesStore.currentIds = []
-      colourScalesStore.currentIndex = 0
+      currentColourScaleIds.value = []
       return
     }
 
-    legendLayerName.value = props.layerName
-    colourScalesStore.currentIds = styles.map(styleToId)
-    colourScalesStore.currentIndex = 0
-
-    styles.forEach(async (style) => {
-      const styleId = styleToId(style)
-
-      if (!(styleId in colourScalesStore.scales)) {
-        const initialLegendGraphic = await fetchWmsLegend(
-          baseUrl,
-          legendLayerName.value,
-          settings.useDisplayUnits,
-          undefined,
-          style,
-        )
-
-        const legend = initialLegendGraphic.legend
-        const newColourScale = reactive({
-          title: getLegendTitle(
-            props.layerCapabilities?.title ?? '',
-            initialLegendGraphic,
-          ),
-          style: style,
-          colourMap: legend,
-          range: legendToRange(legend),
-          initialRange: legendToRange(legend),
-          useGradients: !legend.some((entry) => entry.colorSmoothing === false),
-        })
-        colourScalesStore.scales[styleId] = newColourScale
-
-        const range = computed(() => {
-          const newRange = rangeToString(newColourScale.range)
-          const initialRange = rangeToString(newColourScale.initialRange)
-
-          return newRange !== initialRange ? newRange : undefined
-        })
-
-        const newLegendGraphic = useWmsLegend(
-          baseUrl,
-          legendLayerName,
-          () => settings.useDisplayUnits,
-          range,
-          style,
-          () =>
-            props.layerCapabilities
-              ? (props.layerCapabilities.styles ?? [style])
-              : undefined,
-        )
-
-        watch(newLegendGraphic, () => {
-          if (newLegendGraphic.value?.legend === undefined) return
-          colourScalesStore.scales[styleId].title = getLegendTitle(
-            props.layerCapabilities?.title ?? '',
-            newLegendGraphic.value,
-          )
-          colourScalesStore.scales[styleId].colourMap =
-            newLegendGraphic.value.legend
-        })
-      }
+    currentColourScaleIds.value = styles.map(styleToId)
+
+    styles.forEach((style) => {
+      colourScalesStore.addScale(
+        style,
+        props.layerName,
+        () => props.layerCapabilities?.title,
+        () => userSettings.useDisplayUnits,
+        () => props.layerCapabilities?.styles ?? [],
+      )
     })
   },
   { immediate: true },
@@ -358,13 +324,16 @@ const layerHasElevation = computed(() => {
   return props.layerCapabilities?.elevation !== undefined
 })
 
+const showLocationSearchControl = computed(() => {
+  return !(props.settings?.locationSearchEnabled === false)
+})
+
 watch(
   () => props.layerCapabilities,
   (layer) => {
     const _forecastTime = layer?.keywordList?.[0].forecastTime
     forecastTime.value = _forecastTime ? new Date(_forecastTime) : undefined
 
-    legendLayerName.value = props.layerName
     legendLayerStyles.value = props.layerCapabilities?.styles
     if (legendLayerStyles.value === undefined && props.layerName) {
       legendLayerStyles.value = [
@@ -395,7 +364,7 @@ watch(currentElevation, () => {
 })
 
 watch(
-  [() => colourScalesStore.currentScale?.range, () => settings.useDisplayUnits],
+  [() => currentColourScale.value?.range, () => userSettings.useDisplayUnits],
   () => {
     setLayerOptions()
   },
@@ -443,11 +412,11 @@ function setLayerOptions(): void {
         ? convertBoundingBoxToLngLatBounds(props.layerCapabilities.boundingBox)
         : undefined,
       elevation: currentElevation.value,
-      colorScaleRange: colourScalesStore.currentScale?.range
-        ? rangeToString(colourScalesStore.currentScale?.range)
+      colorScaleRange: currentColourScale.value?.range
+        ? rangeToString(currentColourScale.value?.range)
         : undefined,
-      style: colourScalesStore.currentScale?.style.name,
-      useDisplayUnits: settings.useDisplayUnits,
+      style: currentColourScale.value?.style.name,
+      useDisplayUnits: userSettings.useDisplayUnits,
     }
   } else {
     layerOptions.value = undefined
@@ -513,6 +482,8 @@ function onCoordinateMoved(lat: number, lng: number): void {
 }
 
 .mapcomponent__controls-container {
+  display: flex;
+  flex-wrap: wrap;
   position: absolute;
   max-width: 100%;
   z-index: 3;
diff --git a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
index c6d800d38..3a37b473c 100644
--- a/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
+++ b/src/components/spatialdisplay/SpatialTimeSeriesDisplay.vue
@@ -29,16 +29,18 @@
           <v-spacer />
         </template>
         <template v-slot:toolbar-append>
-          <v-btn size="small" icon>
+          <v-btn size="small" icon v-if="displayActionItems.length">
             <v-icon>mdi-dots-horizontal</v-icon>
             <v-menu activator="parent" density="compact">
               <v-list>
                 <v-list-item
-                  prepend-icon="mdi-download"
-                  @click="downloadDialogStore.showDialog = true"
-                  :disabled="downloadDialogStore.disabled"
-                  >Download time series ...</v-list-item
+                  v-for="item in displayActionItems"
+                  :key="item.label"
+                  @click="item.action"
+                  :prepend-icon="item.icon"
                 >
+                  {{ item.label }}
+                </v-list-item>
               </v-list>
             </v-menu>
           </v-btn>
@@ -86,20 +88,22 @@ import { useSystemTimeStore } from '@/stores/systemTime'
 import { useLocationTooltip } from '@/services/useLocationTooltip'
 import { isFilterActionsFilter } from '@/lib/filters'
 import { useDownloadDialogStore } from '@/stores/downloadDialog'
+import type { ChartSettings } from '@/lib/topology/componentSettings'
 
 interface Props {
   filter: filterActionsFilter | timeSeriesGridActionsFilter
   elevationChartFilter?: timeSeriesGridActionsFilter
   currentTime?: Date
+  settings?: ChartSettings
 }
 
-const settings = useUserSettingsStore()
+const userSettings = useUserSettingsStore()
 const systemTimeStore = useSystemTimeStore()
 
 const options = computed<UseDisplayConfigOptions>(() => {
   return {
-    useDisplayUnits: settings.useDisplayUnits,
-    convertDatum: settings.convertDatum,
+    useDisplayUnits: userSettings.useDisplayUnits,
+    convertDatum: userSettings.convertDatum,
   }
 })
 
@@ -153,46 +157,67 @@ interface DisplayTypeItem {
   disabled?: boolean
 }
 
+const displayActionItems = computed(() => {
+  const dataDownloadEnabled = !(props.settings?.downloadEnabled === false)
+  return [
+    {
+      icon: 'mdi-download',
+      label: 'Download time series ...',
+      action: () => {
+        downloadDialogStore.showDialog = true
+      },
+      disabled: downloadDialogStore.disabled,
+      hidden: !dataDownloadEnabled,
+    },
+  ].filter((item) => !item.hidden)
+})
+
 const displayType = ref(DisplayType.TimeSeriesChart)
 const displayTypeItems = computed<DisplayTypeItem[]>(() => {
-  const displayItems: DisplayTypeItem[] = [
+  const noElevationCharts = !(
+    (elevationChartDisplayconfig.value?.subplots?.length ?? 0) > 0
+  )
+  const noTooltip = !tooltip.value
+
+  const chartEnabled = !(props.settings?.chartEnabled === false)
+  const elevationChartEnabled = !(
+    props.settings?.elevationChartEnabled === false
+  )
+  const tableEnabled = !(props.settings?.tableEnabled === false)
+  const metaDataEnabled = !(props.settings?.metaDataEnabled === false)
+  return [
     {
       icon: 'mdi-chart-line',
       label: 'Chart',
       value: DisplayType.TimeSeriesChart,
+      hidden: !chartEnabled,
     },
     {
       icon: 'mdi-elevation-rise',
       label: 'Vertical profile',
       value: DisplayType.ElevationChart,
       iconStyle: 'transform: rotate(-90deg);',
+      disabled: noElevationCharts,
+      hidden: !elevationChartEnabled,
     },
     {
       icon: 'mdi-table',
       label: 'Table',
       value: DisplayType.TimeSeriesTable,
+      hidden: !tableEnabled,
     },
     {
       icon: 'mdi-information-outline',
       label: 'Information',
       value: DisplayType.Information,
+      disabled: noTooltip,
+      hidden: !metaDataEnabled,
     },
-  ]
-  // Mdi icon for metatdata at the current location
-  //    {
-  //     icon: 'mdi-information',
-  //    label: 'Metadata',
-  //
-
-  if (!((elevationChartDisplayconfig.value?.subplots?.length ?? 0) > 0)) {
-    displayItems[1].disabled = true
-  }
-
-  if (!tooltip.value) {
-    displayItems[3].disabled = true
-  }
-
-  return displayItems
+    // Mdi icon for metatdata at the current location
+    //    {
+    //     icon: 'mdi-information',
+    //    label: 'Metadata',
+  ].filter((item) => !item.hidden)
 })
 
 watch(displayTypeItems, () => {
diff --git a/src/components/wms/InformationPanel.vue b/src/components/wms/InformationPanel.vue
deleted file mode 100644
index 32d2c26c4..000000000
--- a/src/components/wms/InformationPanel.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<template>
-  <ControlChip>
-    <v-btn
-      @click="showLayer = !showLayer"
-      density="compact"
-      variant="plain"
-      icon
-    >
-      <v-icon>{{ showLayer ? 'mdi-layers' : 'mdi-layers-off' }}</v-icon>
-    </v-btn>
-    <v-menu
-      transition="slide-y-transition"
-      :close-on-content-click="false"
-      v-if="showLayer"
-    >
-      <template v-slot:activator="{ props }">
-        <v-btn variant="plain" v-bind="props" class="pe-0 text-none">
-          <span
-            class="me-2"
-            :class="{ 'text-decoration-line-through': props.completelyMissing }"
-            >{{ layerTitle }}</span
-          >
-        </v-btn>
-      </template>
-      <v-list>
-        <v-list-item
-          :title="props.layerTitle"
-          :subtitle="analysisTime"
-          prepend-icon="mdi-layers"
-        >
-        </v-list-item>
-        <v-divider></v-divider>
-        <v-list-item
-          :title="'Time range'"
-          :subtitle="formattedTimeRange"
-          prepend-icon="mdi-clock-time-four-outline"
-        >
-        </v-list-item>
-        <v-list-item
-          prepend-icon="mdi-palette"
-          v-if="colourScalesStore.currentScales"
-        >
-          <v-list-item
-            v-for="(item, index) of colourScalesStore.currentScales"
-            :key="index"
-            @click="colourScalesStore.currentIndex = index"
-            class="px-0"
-          >
-            <v-list-item-title>
-              {{ item.style.title }}
-            </v-list-item-title>
-            <div class="d-flex align-center ga-1">
-              <template v-if="item.useGradients !== false">
-                <span class="mb-1">{{ item.range?.min ?? '' }}</span>
-                <ColourStrip
-                  :colourMap="item.colourMap"
-                  :useGradients="item.useGradients"
-                />
-                <span class="mb-1">{{ item.range?.max ?? '' }}</span>
-              </template>
-              <template v-else>
-                <ColourLegendTable :colourMap="item.colourMap" />
-              </template>
-            </div>
-            <template #append v-if="index === colourScalesStore.currentIndex">
-              <v-icon>mdi-check</v-icon>
-            </template>
-          </v-list-item>
-        </v-list-item>
-        <v-list-item
-          v-if="colourScalesStore.currentScale?.useGradients !== false"
-        >
-          <template v-slot:prepend>
-            <div class="mx-7"></div>
-          </template>
-          <v-row v-if="mutableColorScaleRange">
-            <v-col cols="5">
-              <v-text-field
-                v-model.number="mutableColorScaleRange.min"
-                label="Min"
-                variant="plain"
-                hide-details
-                density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
-                :rules="[rules.required, rules.smallerThanMax]"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="5">
-              <v-text-field
-                v-model.number="mutableColorScaleRange.max"
-                label="Max"
-                variant="plain"
-                hide-details
-                density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
-                :rules="[rules.required, rules.biggerThanMin]"
-              ></v-text-field>
-            </v-col>
-            <v-col cols="2" class="d-flex align-center justify-center">
-              <v-btn
-                v-if="!colourScalesStore.currentScaleIsInitialRange"
-                icon="mdi-restore"
-                variant="flat"
-                density="compact"
-                @click="colourScalesStore.resetCurrentScaleRange"
-              />
-            </v-col>
-          </v-row>
-        </v-list-item>
-        <v-list-item v-if="canUseStreamlines" prepend-icon="mdi-animation-play">
-          <v-list-item-title>Animate</v-list-item-title>
-          <template v-slot:append>
-            <v-switch
-              density="compact"
-              v-model="animate"
-              hide-details
-            ></v-switch>
-          </template>
-        </v-list-item>
-      </v-list>
-    </v-menu>
-    <v-btn
-      v-if="showLayer && canUseStreamlines"
-      @click="switchLayerType"
-      icon
-      density="compact"
-      variant="plain"
-      :color="animate ? 'primary' : undefined"
-    >
-      <v-progress-circular v-if="isLoading" size="20" indeterminate />
-      <v-icon v-else>mdi-animation-play</v-icon>
-    </v-btn>
-  </ControlChip>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { DateTime } from 'luxon'
-import { ref } from 'vue'
-import { LayerKind } from '@/lib/streamlines'
-import ColourStrip from '@/components/wms/ColourStrip.vue'
-import { watch } from 'vue'
-import { useColourScalesStore } from '@/stores/colourScales'
-import ColourLegendTable from './ColourLegendTable.vue'
-import ControlChip from '@/components/wms/ControlChip.vue'
-
-interface Props {
-  layerTitle?: string
-  isLoading: boolean
-  currentTime?: Date
-  forecastTime?: Date
-  completelyMissing?: boolean
-  firstValueTime?: Date
-  lastValueTime?: Date
-  canUseStreamlines?: boolean
-}
-
-const colourScalesStore = useColourScalesStore()
-
-const props = withDefaults(defineProps<Props>(), {
-  layerTitle: '',
-  completelyMissing: false,
-})
-
-const emit = defineEmits(['style-click', 'update:layerKind'])
-
-const mutableColorScaleRange = ref(
-  colourScalesStore.currentScale?.range
-    ? { ...colourScalesStore.currentScale?.range }
-    : undefined,
-)
-
-watch(
-  () => colourScalesStore.currentScale?.range,
-  () => {
-    mutableColorScaleRange.value = colourScalesStore.currentScale?.range
-      ? { ...colourScalesStore.currentScale?.range }
-      : undefined
-  },
-  { deep: true },
-)
-
-const changecolorScaleRange = () => {
-  if (mutableColorScaleRange.value === undefined) return
-  colourScalesStore.setCurrentScaleRange(mutableColorScaleRange.value)
-}
-
-const showLayer = defineModel<boolean>('showLayer')
-const animate = defineModel<boolean>('animate', { default: false })
-
-const rules = {
-  required: (v: number) =>
-    (v !== null && v !== undefined && String(v) !== '') || 'Field is required',
-  biggerThanZero: (v: number) =>
-    v >= 0 || 'Value must be bigger or equal than 0',
-  smallerThanMax: (v: number) =>
-    (mutableColorScaleRange.value && v < mutableColorScaleRange.value.max) ||
-    'Value must be smaller than max',
-  biggerThanMin: (v: number) =>
-    (mutableColorScaleRange.value && v > mutableColorScaleRange.value.min) ||
-    'Value must be bigger than min',
-}
-
-const analysisTime = computed(() => {
-  if (!props.forecastTime) return undefined
-
-  if (isNaN(props.forecastTime.getTime())) {
-    return 'Analysis time not available'
-  }
-
-  return (
-    'Analysis time: ' +
-    DateTime.fromJSDate(props.forecastTime).toFormat('dd/MM/yyyy, HH:mm:ss')
-  )
-})
-
-const formattedTimeRange = computed(() => {
-  if (!props.firstValueTime || !props.lastValueTime) return ''
-  const format = 'dd/MM/yyyy, HH:mm:ss'
-  return `${DateTime.fromJSDate(props.firstValueTime).toFormat(
-    format,
-  )} → ${DateTime.fromJSDate(props.lastValueTime).toFormat(format)}`
-})
-
-const switchLayerType = () => {
-  animate.value = !animate.value
-}
-
-watch(
-  () => animate.value,
-  () => {
-    const value = animate.value ? LayerKind.Streamline : LayerKind.Static
-    emit('update:layerKind', value)
-  },
-)
-</script>
-
-<style scoped>
-#toggle {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/src/components/wms/OverlayLayer.vue b/src/components/wms/OverlayLayer.vue
new file mode 100644
index 000000000..6a11397f4
--- /dev/null
+++ b/src/components/wms/OverlayLayer.vue
@@ -0,0 +1,42 @@
+<template>
+  <mgl-geo-json-source v-if="geojson" :sourceId :data="geojson">
+    <mgl-fill-layer
+      v-if="overlay.type === 'fill'"
+      :paint="overlay.paint"
+      :layerId
+    />
+    <mgl-line-layer
+      v-if="overlay.type === 'line'"
+      :paint="overlay.paint"
+      :layerId
+    />
+  </mgl-geo-json-source>
+</template>
+
+<script setup lang="ts">
+import {
+  MglGeoJsonSource,
+  MglFillLayer,
+  MglLineLayer,
+} from '@indoorequal/vue-maplibre-gl'
+import type { OverlayLocation } from '@/lib/topology/componentSettings'
+import { fetchLocationSetAsGeoJson } from '@/lib/topology'
+import { configManager } from '@/services/application-config'
+import { asyncComputed } from '@vueuse/core'
+import { getLayerId, getSourceId } from '@/lib/map'
+
+interface Props {
+  overlay: OverlayLocation
+}
+
+const props = defineProps<Props>()
+
+const sourceId = getSourceId(`overlay-${props.overlay.id}`)
+const layerId = getLayerId(`overlay-${props.overlay.id}`)
+
+const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+const geojson = asyncComputed(
+  async () =>
+    await fetchLocationSetAsGeoJson(baseUrl, props.overlay.locationSet),
+)
+</script>
diff --git a/src/components/wms/panel/BaseMapPanel.vue b/src/components/wms/panel/BaseMapPanel.vue
new file mode 100644
index 000000000..f6661c6fc
--- /dev/null
+++ b/src/components/wms/panel/BaseMapPanel.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-list-item prepend-icon="mdi-map" class="pe-1">
+    <v-list class="pa-0" density="compact" max-height="160">
+      <v-list-item
+        v-for="basemap in componentSettingsStore.baseMaps"
+        :key="basemap.id"
+        :title="basemap.name"
+        @click="componentSettingsStore.selectedBaseMapId = basemap.id"
+        class="ps-0"
+      >
+        <template
+          #append
+          v-if="basemap.id === componentSettingsStore.selectedBaseMapId"
+        >
+          <v-icon>mdi-check</v-icon>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+
+const componentSettingsStore = useComponentSettingsStore()
+</script>
diff --git a/src/components/wms/panel/ColourPanel.vue b/src/components/wms/panel/ColourPanel.vue
new file mode 100644
index 000000000..17425396d
--- /dev/null
+++ b/src/components/wms/panel/ColourPanel.vue
@@ -0,0 +1,141 @@
+<template>
+  <v-list-item prepend-icon="mdi-palette" v-if="currentScales" class="pe-1">
+    <v-list max-height="130">
+      <v-list-item
+        v-for="(item, index) of currentScales"
+        :key="index"
+        @click="currentColourScaleIndex = index"
+        class="ps-0"
+        :title="item.style.title"
+      >
+        <div class="d-flex align-center ga-1">
+          <template v-if="item.useGradients !== false">
+            <span class="mb-1">{{ item.range?.min ?? '' }}</span>
+            <ColourStrip
+              :colourMap="item.colourMap"
+              :useGradients="item.useGradients"
+            />
+            <span class="mb-1">{{ item.range?.max ?? '' }}</span>
+          </template>
+          <template v-else>
+            <ColourLegendTable :colourMap="item.colourMap" />
+          </template>
+        </div>
+        <template #append v-if="index === currentColourScaleIndex">
+          <v-icon>mdi-check</v-icon>
+        </template>
+      </v-list-item>
+    </v-list>
+    <template v-if="currentScale?.useGradients !== false">
+      <v-row v-if="mutableColorScaleRange">
+        <v-col cols="5">
+          <v-text-field
+            v-model.number="mutableColorScaleRange.min"
+            label="Min"
+            variant="plain"
+            hide-details
+            density="comfortable"
+            @keydown.enter.stop="changeCurrentColourScaleRange"
+            @blur="changeCurrentColourScaleRange"
+            :rules="[rules.required, rules.smallerThanMax]"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="5">
+          <v-text-field
+            v-model.number="mutableColorScaleRange.max"
+            label="Max"
+            variant="plain"
+            hide-details
+            density="comfortable"
+            @keydown.enter.stop="changeCurrentColourScaleRange"
+            @blur="changeCurrentColourScaleRange"
+            :rules="[rules.required, rules.biggerThanMin]"
+          ></v-text-field>
+        </v-col>
+        <v-col cols="2" class="d-flex align-center justify-center">
+          <v-btn
+            v-if="!currentScaleIsInitialRange"
+            icon="mdi-restore"
+            variant="flat"
+            density="compact"
+            @click="resetCurrentScaleRange"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import ColourStrip from '@/components/wms/ColourStrip.vue'
+import ColourLegendTable from '@/components/wms/ColourLegendTable.vue'
+import { useColourScalesStore, type Range } from '@/stores/colourScales'
+import { useColourScales } from '@/services/useColourScales'
+import { ref, watch } from 'vue'
+
+interface Props {
+  currentColourScaleIds: string[]
+}
+
+const props = defineProps<Props>()
+
+const currentColourScaleIndex = defineModel<number>('currentColourScaleIndex', {
+  required: true,
+})
+watch(
+  () => props.currentColourScaleIds,
+  () => {
+    currentColourScaleIndex.value = 0
+  },
+)
+
+const rules = {
+  required: (v: number) =>
+    (v !== null && v !== undefined && String(v) !== '') || 'Field is required',
+  biggerThanZero: (v: number) =>
+    v >= 0 || 'Value must be bigger or equal than 0',
+  smallerThanMax: (v: number) =>
+    (mutableColorScaleRange.value && v < mutableColorScaleRange.value.max) ||
+    'Value must be smaller than max',
+  biggerThanMin: (v: number) =>
+    (mutableColorScaleRange.value && v > mutableColorScaleRange.value.min) ||
+    'Value must be bigger than min',
+}
+
+const colourScalesStore = useColourScalesStore()
+const {
+  currentScale,
+  currentScales,
+  currentScaleIsInitialRange,
+  resetCurrentScaleRange,
+} = useColourScales(
+  currentColourScaleIndex,
+  () => props.currentColourScaleIds,
+  colourScalesStore.scales,
+)
+
+const mutableColorScaleRange = ref<Range>()
+watch(
+  () => currentScale.value?.range,
+  () => {
+    mutableColorScaleRange.value = currentScale.value?.range
+      ? { ...currentScale.value?.range }
+      : undefined
+  },
+  { immediate: true, deep: true },
+)
+
+const changeCurrentColourScaleRange = () => {
+  if (mutableColorScaleRange.value === undefined) return
+  if (currentScale.value === undefined) return
+
+  currentScale.value.range = mutableColorScaleRange.value
+}
+</script>
+
+<style scoped>
+.scales-container {
+  max-height: 300px;
+  overflow-y: auto;
+}
+</style>
diff --git a/src/components/wms/panel/InformationPanel.vue b/src/components/wms/panel/InformationPanel.vue
new file mode 100644
index 000000000..b65f045ad
--- /dev/null
+++ b/src/components/wms/panel/InformationPanel.vue
@@ -0,0 +1,140 @@
+<template>
+  <ControlChip>
+    <v-btn
+      @click="showLayer = !showLayer"
+      density="compact"
+      variant="plain"
+      icon
+    >
+      <v-icon>{{ showLayer ? 'mdi-layers' : 'mdi-layers-off' }}</v-icon>
+    </v-btn>
+    <v-menu
+      transition="slide-y-transition"
+      :close-on-content-click="false"
+      v-if="showLayer"
+    >
+      <template v-slot:activator="{ props }">
+        <v-btn variant="plain" v-bind="props" class="pe-0 text-none">
+          <span
+            class="me-2"
+            :class="{ 'text-decoration-line-through': props.completelyMissing }"
+            >{{ layerTitle }}</span
+          >
+        </v-btn>
+      </template>
+      <v-list class="information-panel-list">
+        <v-list-item
+          :title="props.layerTitle"
+          :subtitle="analysisTime"
+          prepend-icon="mdi-layers"
+        >
+        </v-list-item>
+        <v-divider></v-divider>
+        <v-list-item
+          :title="'Time range'"
+          :subtitle="formattedTimeRange"
+          prepend-icon="mdi-clock-time-four-outline"
+        >
+        </v-list-item>
+
+        <slot></slot>
+
+        <v-list-item v-if="canUseStreamlines" prepend-icon="mdi-animation-play">
+          <v-list-item-title>Animate</v-list-item-title>
+          <template v-slot:append>
+            <v-switch
+              density="compact"
+              v-model="animate"
+              hide-details
+            ></v-switch>
+          </template>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+    <v-btn
+      v-if="showLayer && canUseStreamlines"
+      @click="switchLayerType"
+      icon
+      density="compact"
+      variant="plain"
+      :color="animate ? 'primary' : undefined"
+    >
+      <v-progress-circular v-if="isLoading" size="20" indeterminate />
+      <v-icon v-else>mdi-animation-play</v-icon>
+    </v-btn>
+  </ControlChip>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DateTime } from 'luxon'
+import { LayerKind } from '@/lib/streamlines'
+import { watch } from 'vue'
+import ControlChip from '@/components/wms/ControlChip.vue'
+
+interface Props {
+  layerTitle?: string
+  isLoading: boolean
+  currentTime?: Date
+  forecastTime?: Date
+  completelyMissing?: boolean
+  firstValueTime?: Date
+  lastValueTime?: Date
+  canUseStreamlines?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  layerTitle: '',
+  completelyMissing: false,
+})
+
+const emit = defineEmits(['style-click', 'update:layerKind'])
+
+const showLayer = defineModel<boolean>('showLayer')
+const animate = defineModel<boolean>('animate', { default: false })
+
+const analysisTime = computed(() => {
+  if (!props.forecastTime) return undefined
+
+  if (isNaN(props.forecastTime.getTime())) {
+    return 'Analysis time not available'
+  }
+
+  return (
+    'Analysis time: ' +
+    DateTime.fromJSDate(props.forecastTime).toFormat('dd/MM/yyyy, HH:mm:ss')
+  )
+})
+
+const formattedTimeRange = computed(() => {
+  if (!props.firstValueTime || !props.lastValueTime) return ''
+  const format = 'dd/MM/yyyy, HH:mm:ss'
+  return `${DateTime.fromJSDate(props.firstValueTime).toFormat(
+    format,
+  )} → ${DateTime.fromJSDate(props.lastValueTime).toFormat(format)}`
+})
+
+const switchLayerType = () => {
+  animate.value = !animate.value
+}
+
+watch(
+  () => animate.value,
+  () => {
+    const value = animate.value ? LayerKind.Streamline : LayerKind.Static
+    emit('update:layerKind', value)
+  },
+)
+</script>
+
+<style scoped>
+#toggle {
+  display: flex;
+  justify-content: center;
+}
+
+:deep(.information-panel-list > .v-list-item > .v-list-item__prepend) {
+  align-self: start;
+  transform: translateY(8px);
+}
+</style>
diff --git a/src/components/wms/panel/OverlayPanel.vue b/src/components/wms/panel/OverlayPanel.vue
new file mode 100644
index 000000000..608bf3ce9
--- /dev/null
+++ b/src/components/wms/panel/OverlayPanel.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-list-item prepend-icon="mdi-layers-outline">
+    <v-list-item title="Select All" @click="toggleAll" class="ps-1">
+      <template #prepend>
+        <v-list-item-action start>
+          <v-checkbox-btn
+            :indeterminate="someSelected && !allSelected"
+            :model-value="allSelected"
+            density="compact"
+          />
+        </v-list-item-action>
+      </template>
+    </v-list-item>
+    <v-divider />
+    <v-list
+      v-model:selected="componentSettingsStore.selectedOverlayIds"
+      select-strategy="leaf"
+      class="pa-0"
+      density="compact"
+      max-height="160"
+    >
+      <v-list-item
+        v-for="overlay in componentSettingsStore.overlays"
+        :key="overlay.id"
+        :title="overlay.name"
+        :value="overlay.id"
+        :active="false"
+        class="ps-1"
+      >
+        <template #prepend="{ isSelected }">
+          <v-list-item-action start>
+            <v-checkbox-btn :model-value="isSelected" density="compact" />
+          </v-list-item-action>
+        </template>
+      </v-list-item>
+    </v-list>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+import { useComponentSettingsStore } from '@/stores/componentSettings'
+import { computed } from 'vue'
+
+const componentSettingsStore = useComponentSettingsStore()
+
+const allSelected = computed(
+  () =>
+    componentSettingsStore.overlays.length ===
+    componentSettingsStore.selectedOverlayIds.length,
+)
+
+const someSelected = computed(
+  () =>
+    componentSettingsStore.selectedOverlayIds.length > 0 &&
+    componentSettingsStore.selectedOverlayIds.length <
+      componentSettingsStore.overlays.length,
+)
+
+function toggleAll() {
+  if (allSelected.value) {
+    componentSettingsStore.selectedOverlayIds = []
+  } else {
+    componentSettingsStore.selectedOverlayIds =
+      componentSettingsStore.overlays.map((overlay) => overlay.id)
+  }
+}
+</script>
diff --git a/src/lib/dashboard/types.ts b/src/lib/dashboard/types.ts
new file mode 100644
index 000000000..d6dcd8583
--- /dev/null
+++ b/src/lib/dashboard/types.ts
@@ -0,0 +1,26 @@
+import { ComponentType } from '@/lib/topology/component'
+
+export interface DashboardsResponse {
+  dashboards: Dashboard[]
+}
+
+export interface Dashboard {
+  id: string
+  cssTemplate: string
+  groups: DashboardGroup[]
+}
+
+export interface DashboardGroup {
+  elements: DashboardElement[]
+}
+
+export interface DashboardElement {
+  gridTemplateArea: string
+  items: DashboardItem[]
+}
+
+export interface DashboardItem {
+  topologyNodeId: string
+  component: ComponentType
+  componentSettingsId: string
+}
diff --git a/src/lib/topology/component.ts b/src/lib/topology/component.ts
new file mode 100644
index 000000000..e9164bd82
--- /dev/null
+++ b/src/lib/topology/component.ts
@@ -0,0 +1,61 @@
+export const ComponentType = {
+  map: 'map',
+  charts: 'charts',
+  'data-download': 'data-download',
+  reports: 'reports',
+  'schematic-status-display': 'schematic-status-display',
+  'system-monitor': 'system-monitor',
+  'web-display': 'web-display',
+  dashboard: 'dashboard',
+  tasks: 'tasks',
+} as const
+
+export type ComponentType = (typeof ComponentType)[keyof typeof ComponentType]
+
+export const componentTypeToIconMap = {
+  map: 'mdi-map',
+  charts: 'mdi-chart-multiple',
+  'data-download': 'mdi-download',
+  reports: 'mdi-file-document',
+  'schematic-status-display': 'mdi-view-dashboard',
+  'system-monitor': 'mdi-monitor',
+  'web-display': 'mdi-web',
+  dashboard: 'mdi-view-dashboard',
+  tasks: 'mdi-cog',
+} satisfies Record<ComponentType, string>
+
+export const componentTypeToTitleMap = {
+  map: 'Map',
+  charts: 'Charts',
+  'data-download': 'Download',
+  reports: 'Reports',
+  'schematic-status-display': 'Schematic',
+  'system-monitor': 'System Monitor',
+  'web-display': 'Web Display',
+  dashboard: 'Dashboard',
+  tasks: 'Tasks',
+} satisfies Record<ComponentType, string>
+
+export const componentTypeToRouteNameMap = {
+  map: 'TopologySpatialDisplay',
+  charts: 'TopologyTimeSeries',
+  'data-download': 'TopologyDataDownload',
+  reports: 'TopologyReports',
+  'schematic-status-display': 'TopologySchematicStatusDisplay',
+  'system-monitor': 'TopologySystemMonitor',
+  'web-display': 'TopologyWebDisplay',
+  dashboard: 'TopologyDashboard',
+  tasks: 'TopologyTasks',
+} satisfies Record<ComponentType, string>
+
+export const componentTypeToIdMap = {
+  map: 'spatial',
+  charts: 'timeseries',
+  'data-download': 'download',
+  reports: 'reports',
+  'schematic-status-display': 'ssd',
+  'system-monitor': 'systemmonitor',
+  'web-display': 'webdisplay',
+  dashboard: 'dashboard',
+  tasks: crypto.randomUUID(),
+} satisfies Record<ComponentType, string>
diff --git a/src/lib/topology/componentSettings.ts b/src/lib/topology/componentSettings.ts
new file mode 100644
index 000000000..a80adc9a2
--- /dev/null
+++ b/src/lib/topology/componentSettings.ts
@@ -0,0 +1,68 @@
+import type { FillPaintProps, LinePaintProps } from 'maplibre-gl'
+import type { ComponentType } from './component'
+
+type PaintMapping = {
+  fill: FillPaintProps
+  line: LinePaintProps
+}
+
+export interface ComponentSettingsResponse {
+  componentSettings: ComponentSettings[]
+  declarations?: Declarations
+}
+
+interface ComponentSettingsMapping {
+  map: MapSettings
+  charts: ChartSettings
+  'data-download': undefined
+  reports: undefined
+  'schematic-status-display': undefined
+  'system-monitor': undefined
+  'web-display': undefined
+  dashboard: undefined
+  tasks: undefined
+}
+
+type SettingsPerComponent = {
+  [key in ComponentType]?: ComponentSettingsMapping[key]
+}
+
+export interface ComponentSettings extends SettingsPerComponent {
+  id: string
+}
+
+export interface ChartSettings {
+  chartEnabled?: boolean
+  elevationChartEnabled?: boolean
+  tableEnabled?: boolean
+  metaDataEnabled?: boolean
+  downloadEnabled?: boolean
+}
+
+export interface MapSettings extends ChartSettings {
+  chartPanelEnabled?: boolean
+  locationSearchEnabled?: boolean
+}
+
+export interface Declarations {
+  baseMaps?: BaseMap[]
+  overlays?: Overlays
+}
+
+export interface BaseMap {
+  id: string
+  name: string
+  style: string
+}
+
+export interface Overlays {
+  locations: OverlayLocation[]
+}
+
+export interface OverlayLocation {
+  id: string
+  name: string
+  locationSet: string
+  type: keyof PaintMapping
+  paint: PaintMapping[OverlayLocation['type']]
+}
diff --git a/src/lib/topology/dashboard.ts b/src/lib/topology/dashboard.ts
index 325521cb1..8ea23ed0d 100644
--- a/src/lib/topology/dashboard.ts
+++ b/src/lib/topology/dashboard.ts
@@ -1,14 +1,7 @@
 import type { TopologyNode } from '@deltares/fews-pi-requests'
 import { defineAsyncComponent, type Component } from 'vue'
-import {
-  nodeHasCharts,
-  nodeHasDataDownload,
-  nodeHasMap,
-  nodeHasReports,
-  nodeHasSchematicStatusDisplay,
-  nodeHasSystemMonitor,
-} from './nodes'
 import { ComponentProps } from '@/lib/utils/types'
+import { ComponentType } from '@/lib/topology/component'
 
 const SpatialDisplay = defineAsyncComponent(
   () => import('@/components/spatialdisplay/SpatialDisplay.vue'),
@@ -29,83 +22,72 @@ const SystemMonitorDisplayView = defineAsyncComponent(
   () => import('@/views/SystemMonitorDisplayView.vue'),
 )
 
-export interface ComponentWithProps<T extends Component> {
-  component: T
-  props: ComponentProps<T>
-}
+const Empty = defineAsyncComponent(() => import('@/views/Empty.vue'))
 
-export function getComponentWithPropsForNode(node: TopologyNode | undefined) {
-  if (!node) {
-    return {
-      component: undefined,
-      props: undefined,
-    }
-  }
+export const componentTypeToComponentMap = {
+  map: SpatialDisplay,
+  charts: TimeSeriesDisplay,
+  'data-download': DataDownloadDisplayView,
+  reports: ReportsDisplayView,
+  'schematic-status-display': SchematicStatusDisplay,
+  'system-monitor': SystemMonitorDisplayView,
+  tasks: Empty,
+  'web-display': Empty,
+  dashboard: Empty,
+} satisfies Record<ComponentType, Component>
 
-  if (nodeHasMap(node)) {
-    const result: ComponentWithProps<typeof SpatialDisplay> = {
-      component: SpatialDisplay,
-      props: {
-        layerName: node.gridDisplaySelection?.plotId,
-        filterIds: node.filterIds,
-      },
-    }
-    return result
-  }
+export type PropsForComponentType<T extends ComponentType> = ComponentProps<
+  (typeof componentTypeToComponentMap)[T]
+>
+
+export function getComponentPropsForNode(
+  componentType: ComponentType,
+  node?: TopologyNode,
+): PropsForComponentType<ComponentType> | undefined {
+  if (!node) return
 
-  if (nodeHasCharts(node)) {
-    const result: ComponentWithProps<typeof TimeSeriesDisplay> = {
-      component: TimeSeriesDisplay,
-      props: {
-        nodeId: node.id,
-      },
+  if (componentType === 'map') {
+    const result: PropsForComponentType<'map'> = {
+      layerName: node.gridDisplaySelection?.plotId,
+      filterIds: node.filterIds,
     }
     return result
   }
 
-  if (nodeHasDataDownload(node)) {
-    const result: ComponentWithProps<typeof DataDownloadDisplayView> = {
-      component: DataDownloadDisplayView,
-      props: {
-        nodeId: node.id,
-        topologyNode: node,
-      },
+  if (componentType === 'charts') {
+    const result: PropsForComponentType<'charts'> = {
+      nodeId: node.id,
     }
     return result
   }
 
-  if (nodeHasReports(node)) {
-    const result: ComponentWithProps<typeof ReportsDisplayView> = {
-      component: ReportsDisplayView,
-      props: {
-        topologyNode: node,
-      },
+  if (componentType === 'data-download') {
+    const result: PropsForComponentType<'data-download'> = {
+      nodeId: node.id,
+      topologyNode: node,
     }
     return result
   }
 
-  if (nodeHasSchematicStatusDisplay(node)) {
-    const result: ComponentWithProps<typeof SchematicStatusDisplay> = {
-      component: SchematicStatusDisplay,
-      props: {
-        panelId: node.scadaPanelId,
-        groupId: node.id,
-        objectId: '',
-        showDateTimeSlider: false,
-      },
+  if (componentType === 'reports') {
+    const result: PropsForComponentType<'reports'> = {
+      topologyNode: node,
     }
     return result
   }
-  if (nodeHasSystemMonitor(node)) {
-    const result: ComponentWithProps<typeof SystemMonitorDisplayView> = {
-      component: SystemMonitorDisplayView,
-      props: {},
+
+  if (componentType === 'schematic-status-display') {
+    const result: PropsForComponentType<'schematic-status-display'> = {
+      panelId: node.scadaPanelId,
+      groupId: node.id,
+      objectId: '',
+      showDateTimeSlider: false,
     }
     return result
   }
 
-  return {
-    component: undefined,
-    props: undefined,
+  if (componentType === 'system-monitor') {
+    const result: PropsForComponentType<'system-monitor'> = {}
+    return result
   }
 }
diff --git a/src/lib/topology/displayTabs.ts b/src/lib/topology/displayTabs.ts
index aa6f3abf4..5d5d59091 100644
--- a/src/lib/topology/displayTabs.ts
+++ b/src/lib/topology/displayTabs.ts
@@ -10,18 +10,16 @@ import {
   nodeHasSystemMonitor,
   nodeHasWebDisplay,
 } from './nodes'
+import {
+  ComponentType,
+  componentTypeToIconMap,
+  componentTypeToIdMap,
+  componentTypeToRouteNameMap,
+  componentTypeToTitleMap,
+} from './component'
 
 export interface DisplayTab {
-  type:
-    | 'charts'
-    | 'map'
-    | 'reports'
-    | 'data-download'
-    | 'schematic-status-display'
-    | 'system-monitor'
-    | 'web-display'
-    | 'dashboard'
-    | 'tasks'
+  type: ComponentType
   id: string
   title: string
   href?: string
@@ -31,80 +29,16 @@ export interface DisplayTab {
   active: boolean
 }
 
-const displayTabs: DisplayTab[] = [
-  {
-    type: 'map',
-    id: 'spatial',
-    title: 'Map',
-    to: { name: 'TopologySpatialDisplay' },
-    icon: 'mdi-map',
-    active: false,
-  },
-  {
-    type: 'charts',
-    id: 'timeseries',
-    title: 'Charts',
-    to: { name: 'TopologyTimeSeries' },
-    icon: 'mdi-chart-multiple',
-    active: false,
-  },
-  {
-    type: 'data-download',
-    id: 'download',
-    title: 'Download',
-    to: { name: 'TopologyDataDownload' },
-    icon: 'mdi-download',
-    active: false,
-  },
-  {
-    type: 'web-display',
-    id: 'web-display',
-    title: 'Web Display',
-    to: { name: 'TopologyWebDisplay' },
-    icon: 'mdi-web',
-    active: false,
-  },
-  {
-    type: 'reports',
-    id: 'reports',
-    title: 'Reports',
-    to: { name: 'TopologyReports' },
-    icon: 'mdi-file-document',
+const displayTabs: DisplayTab[] = Object.values(ComponentType).map((type) => {
+  return {
+    type,
+    id: componentTypeToIdMap[type],
+    title: componentTypeToTitleMap[type],
+    to: { name: componentTypeToRouteNameMap[type] },
+    icon: componentTypeToIconMap[type],
     active: false,
-  },
-  {
-    type: 'schematic-status-display',
-    id: 'ssd',
-    title: 'Schematic',
-    to: { name: 'TopologySchematicStatusDisplay' },
-    icon: 'mdi-view-dashboard',
-    active: false,
-  },
-  {
-    type: 'system-monitor',
-    id: 'ssd',
-    title: 'System Monitor',
-    to: { name: 'TopologySystemMonitor' },
-    icon: 'mdi-view-dashboard',
-    active: false,
-  },
-  {
-    type: 'dashboard',
-    id: 'dashboard',
-    title: 'Dashboard',
-    to: { name: 'TopologyDashboard' },
-    icon: 'mdi-view-dashboard',
-    active: false,
-  },
-  {
-    type: 'tasks',
-    id: crypto.randomUUID(),
-    title: 'Tasks',
-    to: { name: 'TopologyTasksDisplay' },
-    icon: 'mdi-cog',
-    active: false,
-  },
-]
+  }
+})
 
 export function displayTabsForNode(
   node: TopologyNode,
@@ -154,7 +88,7 @@ export function displayTabsForNode(
         break
       case 'tasks':
         // HACK
-        tab.active = true
+        tab.active = false
         tab.to.params = { ...params }
         break
     }
diff --git a/src/lib/topology/index.ts b/src/lib/topology/index.ts
index cfb39e52d..332278491 100644
--- a/src/lib/topology/index.ts
+++ b/src/lib/topology/index.ts
@@ -1,5 +1,5 @@
 export * from './locations'
-import { configManager } from '../../services/application-config/index.ts'
+import { configManager } from '@/services/application-config/index.ts'
 import {
   PiWebserviceProvider,
   type TopologyNode,
@@ -7,27 +7,43 @@ import {
 import { createTransformRequestFn } from '@/lib/requests/transformRequest'
 
 /**
- * Recursively updates a topology map where each node is stored by its id.
+ * Creates hash maps for topology nodes.
+ *
+ * This function generates two hash maps:
+ * 1. idToNodeMap: Maps node IDs to their corresponding TopologyNode objects.
+ * 2. childIdToParentNodeMap: Maps child node IDs to their parent node.
  *
  * @param {TopologyNode[] | undefined} nodes - An array of TopologyNode objects or undefined.
- * @param {Map<string, TopologyNode>} topologyMap - A Map used to store the topology nodes.
+ * @returns {{ idToNodeMap: Map<string, TopologyNode>, childIdToParentNodeMap: Map<string, string> }} - An object containing the two hash maps.
  */
-export function createTopologyMap(nodes: TopologyNode[] | undefined) {
-  const topologyMap = new Map<string, TopologyNode>()
-
-  function recursiveCreateTopologyMap(
-    nodes: TopologyNode[] | undefined,
-    topologyMap: Map<string, TopologyNode>,
-  ) {
-    if (nodes === undefined) return undefined
+export function createTopologyHashMaps(nodes: TopologyNode[] | undefined): {
+  idToNodeMap: Map<string, TopologyNode>
+  childIdToParentNodeMap: Map<string, TopologyNode>
+} {
+  const idToNodeMap = new Map<string, TopologyNode>()
+  const childIdToParentNodeMap = new Map<string, TopologyNode>()
+
+  function recursivelyFillMaps(nodes: TopologyNode[]) {
     for (const node of nodes) {
-      topologyMap.set(node.id, node)
-      recursiveCreateTopologyMap(node.topologyNodes, topologyMap)
+      idToNodeMap.set(node.id, node)
+
+      if (node.topologyNodes) {
+        node.topologyNodes.forEach((childNode) => {
+          childIdToParentNodeMap.set(childNode.id, node)
+        })
+        recursivelyFillMaps(node.topologyNodes)
+      }
     }
   }
 
-  recursiveCreateTopologyMap(nodes, topologyMap)
-  return topologyMap
+  if (nodes) {
+    recursivelyFillMaps(nodes)
+  }
+
+  return {
+    idToNodeMap,
+    childIdToParentNodeMap,
+  }
 }
 
 /**
diff --git a/src/lib/topology/locations.ts b/src/lib/topology/locations.ts
index f3e75a39d..58110e084 100644
--- a/src/lib/topology/locations.ts
+++ b/src/lib/topology/locations.ts
@@ -71,9 +71,36 @@ async function fetchLocationsAsGeoJsonForSingleFilterId(
     includeIconNames: true,
     showThresholds: true,
   }
-  // TODO: Remove cast to any when fews-pi-requests supports GeoJSON response in LocationResponse
-  //       type.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const response = (await provider.getLocations(filter)) as any
-  return response as FeatureCollection<Geometry, Location>
+  const response = await provider.getLocations(filter)
+  if (!isFeatureCollection(response)) {
+    throw new Error('Expected GeoJSON FeatureCollection')
+  }
+  return response
+}
+
+function isFeatureCollection(
+  geojson: FeatureCollection<Geometry, Location> | unknown,
+): geojson is FeatureCollection<Geometry, Location> {
+  return (
+    (geojson as FeatureCollection<Geometry, Location>).type ===
+    'FeatureCollection'
+  )
+}
+
+export async function fetchLocationSetAsGeoJson(
+  baseUrl: string,
+  locationSetId: string,
+): Promise<FeatureCollection<Geometry, Location>> {
+  const provider = new PiWebserviceProvider(baseUrl, {
+    transformRequestFn: createTransformRequestFn(),
+  })
+  const filter = {
+    documentFormat: DocumentFormat.GEO_JSON,
+    locationSetId: locationSetId,
+  }
+  const response = await provider.getLocations(filter)
+  if (!isFeatureCollection(response)) {
+    throw new Error('Expected GeoJSON FeatureCollection')
+  }
+  return response
 }
diff --git a/src/lib/topology/nodes.ts b/src/lib/topology/nodes.ts
index de6f92a42..1de0ddd0b 100644
--- a/src/lib/topology/nodes.ts
+++ b/src/lib/topology/nodes.ts
@@ -165,5 +165,8 @@ export function nodeHasWebDisplay(node: TopologyNode) {
 }
 
 export function nodeHasDashboard(node: TopologyNode) {
-  return node.id.startsWith('dashboard') && node.topologyNodes !== undefined
+  return (
+    node.id.toLowerCase().includes('dashboard') &&
+    node.topologyNodes !== undefined
+  )
 }
diff --git a/src/services/useBaseLayers/index.ts b/src/services/useBaseLayers/index.ts
deleted file mode 100644
index 424c6e4e5..000000000
--- a/src/services/useBaseLayers/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { MaybeRefOrGetter, ShallowRef } from 'vue'
-import { shallowRef, toValue, watchEffect } from 'vue'
-import Basemaps from '@/assets/base-layers.json'
-import { MglDefaults } from '@indoorequal/vue-maplibre-gl'
-import { useDark } from '@vueuse/core'
-import { StyleSpecification } from 'maplibre-gl'
-
-export interface UseBaseLayersReturn {
-  baseLayerStyle: ShallowRef<string | StyleSpecification>
-  baseLayers: ShallowRef<(string | object)[]>
-}
-
-export function useBaseLayers(
-  layerId: MaybeRefOrGetter<string | undefined>,
-): UseBaseLayersReturn {
-  const baseLayerStyle = shallowRef<string | StyleSpecification>(
-    MglDefaults.style ?? '',
-  )
-  const baseLayers = shallowRef<(string | object)[]>(Basemaps.baseLayers)
-
-  const isDark = useDark()
-
-  watchEffect(() => {
-    const _layerId = toValue(layerId)
-    const layerDefinition = Basemaps.baseLayers.find(
-      (layer: any) => layer.id === _layerId,
-    )
-    if (layerDefinition?.automatic) {
-      if (isDark.value === true) {
-        const themedLayer = Basemaps.baseLayers.find(
-          (layer: any) => layer.id === layerDefinition.automatic.dark,
-        )
-        if (themedLayer?.style) baseLayerStyle.value = themedLayer?.style
-      } else {
-        const themedLayer = Basemaps.baseLayers.find(
-          (layer: any) => layer.id === layerDefinition.automatic.light,
-        )
-        if (themedLayer?.style) baseLayerStyle.value = themedLayer?.style
-      }
-    } else if (layerDefinition?.style) {
-      baseLayerStyle.value = layerDefinition?.style
-    }
-  })
-
-  return {
-    baseLayerStyle,
-    baseLayers,
-  }
-}
diff --git a/src/services/useColourScales/index.ts b/src/services/useColourScales/index.ts
new file mode 100644
index 000000000..f8c2e65dd
--- /dev/null
+++ b/src/services/useColourScales/index.ts
@@ -0,0 +1,56 @@
+import type { ColourScale } from '@/stores/colourScales'
+import type { MaybeRefOrGetter, ShallowRef } from 'vue'
+import { computed, toValue } from 'vue'
+
+export interface UseColourScalesReturn {
+  currentScaleId: ShallowRef<string | undefined>
+  currentScale: ShallowRef<ColourScale | undefined>
+  currentScales: ShallowRef<ColourScale[]>
+  currentScaleIsInitialRange: ShallowRef<boolean>
+  resetCurrentScaleRange: () => void
+}
+
+export function useColourScales(
+  currentIndex: MaybeRefOrGetter<number>,
+  currentIds: MaybeRefOrGetter<string[]>,
+  scales: MaybeRefOrGetter<Record<string, ColourScale>>,
+): UseColourScalesReturn {
+  const currentScaleId = computed<string | undefined>(() => {
+    const _currentIndex = toValue(currentIndex)
+    const _currentIds = toValue(currentIds)
+    return _currentIds[_currentIndex]
+  })
+
+  const currentScale = computed(() => {
+    const _scales = toValue(scales)
+    if (!currentScaleId.value) return
+    return _scales[currentScaleId.value]
+  })
+
+  const currentScales = computed(() => {
+    const _scales = toValue(scales)
+    const _currentIds = toValue(currentIds)
+    return _currentIds.map((id) => _scales[id])
+  })
+
+  const currentScaleIsInitialRange = computed(() => {
+    if (!currentScale.value) return false
+    return (
+      currentScale.value.range.min === currentScale.value.initialRange.min &&
+      currentScale.value.range.max === currentScale.value.initialRange.max
+    )
+  })
+
+  function resetCurrentScaleRange() {
+    if (!currentScale.value) return
+    currentScale.value.range = currentScale.value.initialRange
+  }
+
+  return {
+    currentScaleId,
+    currentScale,
+    currentScales,
+    currentScaleIsInitialRange,
+    resetCurrentScaleRange,
+  }
+}
diff --git a/src/services/useWms/index.ts b/src/services/useWms/index.ts
index 989c4f6ef..336f1b707 100644
--- a/src/services/useWms/index.ts
+++ b/src/services/useWms/index.ts
@@ -95,8 +95,8 @@ export function useWmsLegend(
   layerName: MaybeRefOrGetter<string>,
   useDisplayUnits: MaybeRefOrGetter<boolean>,
   colorScaleRange: MaybeRefOrGetter<string | undefined>,
-  style: MaybeRefOrGetter<Style | undefined>,
-  activeStyles: MaybeRefOrGetter<Style[] | undefined>,
+  style: MaybeRefOrGetter<Style>,
+  activeStyles: MaybeRefOrGetter<Style[]>,
 ): Ref<GetLegendGraphicResponse | undefined> {
   const legendGraphic = ref<GetLegendGraphicResponse>()
 
@@ -112,11 +112,7 @@ export function useWmsLegend(
       return
     }
 
-    if (
-      _activeStyles &&
-      _style &&
-      !_activeStyles.some((s) => styleToId(s) === styleToId(_style))
-    ) {
+    if (!_activeStyles.some((s) => styleToId(s) === styleToId(_style))) {
       return
     }
 
diff --git a/src/stores/colourScales.ts b/src/stores/colourScales.ts
index c421788db..a7ac632c1 100644
--- a/src/stores/colourScales.ts
+++ b/src/stores/colourScales.ts
@@ -1,5 +1,14 @@
 import { defineStore } from 'pinia'
 import type { ColourMap, Style } from '@deltares/fews-wms-requests'
+import { computed, MaybeRefOrGetter, reactive, ref, toValue, watch } from 'vue'
+import { configManager } from '@/services/application-config'
+import { fetchWmsLegend, useWmsLegend } from '@/services/useWms'
+import {
+  getLegendTitle,
+  legendToRange,
+  rangeToString,
+  styleToId,
+} from '@/lib/legend'
 
 export interface Range {
   min: number
@@ -15,45 +24,77 @@ export interface ColourScale {
   useGradients: boolean
 }
 
-interface ColourScalesState {
-  scales: Record<string, ColourScale>
-  currentIds: string[]
-  currentIndex: number
-}
+const useColourScalesStore = defineStore('colourScales', () => {
+  const scales = ref<Record<string, ColourScale>>({})
+  const processingScaleIds = ref<string[]>([])
+
+  async function addScale(
+    style: Style,
+    layerName: MaybeRefOrGetter<string>,
+    title: MaybeRefOrGetter<string | undefined>,
+    useDisplayUnits: MaybeRefOrGetter<boolean>,
+    activeStyles: MaybeRefOrGetter<Style[]>,
+  ) {
+    const styleId = styleToId(style)
+    if (styleId in scales.value || processingScaleIds.value.includes(styleId)) {
+      return
+    }
+
+    processingScaleIds.value.push(styleId)
+
+    const baseUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
+
+    const initialLegendGraphic = await fetchWmsLegend(
+      baseUrl,
+      toValue(layerName),
+      toValue(useDisplayUnits),
+      undefined,
+      style,
+    )
+
+    const legend = initialLegendGraphic.legend
+    const newColourScale = reactive({
+      title: getLegendTitle(toValue(title) ?? '', initialLegendGraphic),
+      style: style,
+      colourMap: legend,
+      range: legendToRange(legend),
+      initialRange: legendToRange(legend),
+      useGradients: !legend.some((entry) => entry.colorSmoothing === false),
+    })
+    processingScaleIds.value = processingScaleIds.value.filter(
+      (id) => id !== styleId,
+    )
+    scales.value[styleId] = newColourScale
+
+    const range = computed(() => {
+      const newRange = rangeToString(newColourScale.range)
+      const initialRange = rangeToString(newColourScale.initialRange)
+
+      return newRange !== initialRange ? newRange : undefined
+    })
+
+    const newLegendGraphic = useWmsLegend(
+      baseUrl,
+      layerName,
+      useDisplayUnits,
+      range,
+      style,
+      activeStyles,
+    )
 
-const useColourScalesStore = defineStore('colourScales', {
-  state: (): ColourScalesState => ({
-    scales: {},
-    currentIds: [],
-    currentIndex: 0,
-  }),
-  getters: {
-    currentScaleId: (state) => state.currentIds[state.currentIndex],
-    currentScale(): ColourScale | undefined {
-      if (!this.currentScaleId) return
-      return this.scales[this.currentScaleId]
-    },
-    currentScales(): ColourScale[] {
-      return this.currentIds.map((id) => this.scales[id])
-    },
-    currentScaleIsInitialRange(): boolean {
-      if (!this.currentScale) return false
-      return (
-        this.currentScale.range.min === this.currentScale.initialRange.min &&
-        this.currentScale.range.max === this.currentScale.initialRange.max
+    watch(newLegendGraphic, () => {
+      if (newLegendGraphic.value?.legend === undefined) return
+      scales.value[styleId].title = getLegendTitle(
+        toValue(title) ?? '',
+        newLegendGraphic.value,
       )
-    },
-  },
-  actions: {
-    setCurrentScaleRange(newRange: Range) {
-      if (!this.currentScale) return
-      this.currentScale.range = newRange
-    },
-    resetCurrentScaleRange() {
-      if (!this.currentScale) return
-      this.currentScale.range = this.currentScale.initialRange
-    },
-  },
+      scales.value[styleId].colourMap = newLegendGraphic.value.legend
+    })
+  }
+  return {
+    scales,
+    addScale,
+  }
 })
 
 export { useColourScalesStore }
diff --git a/src/stores/componentSettings.ts b/src/stores/componentSettings.ts
new file mode 100644
index 000000000..ed126ab2a
--- /dev/null
+++ b/src/stores/componentSettings.ts
@@ -0,0 +1,84 @@
+import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { defineStore } from 'pinia'
+import DefaultBaseMaps from '@/assets/DefaultBaseMaps.json'
+import type {
+  BaseMap,
+  ComponentSettings,
+  ComponentSettingsResponse,
+  Declarations,
+  OverlayLocation,
+} from '@/lib/topology/componentSettings'
+import { useDark } from '@vueuse/core'
+
+interface State {
+  settings: ComponentSettings[]
+  declarations?: Declarations
+  selectedOverlayIds: string[]
+  selectedBaseMapId: string
+}
+
+function isKeyOfDefaultStyle(key: string): key is keyof typeof DefaultBaseMaps {
+  return key in DefaultBaseMaps
+}
+
+export const useComponentSettingsStore = defineStore('componentSettings', {
+  state: (): State => ({
+    settings: [],
+    selectedOverlayIds: [],
+    selectedBaseMapId: 'automatic',
+  }),
+  getters: {
+    overlays: (state) => state.declarations?.overlays?.locations ?? [],
+    selectedOverlays(): OverlayLocation[] {
+      return this.selectedOverlayIds
+        .map((id) => this.overlays.find((o) => o.id === id))
+        .filter((o) => o !== undefined)
+    },
+    baseMaps: (state) => {
+      const defaultBaseMaps: BaseMap[] = Object.values(DefaultBaseMaps)
+      const baseMaps = state.declarations?.baseMaps ?? []
+      return [...defaultBaseMaps, ...baseMaps]
+    },
+    selectedBaseMap(): BaseMap {
+      if (this.selectedBaseMapId === 'automatic') {
+        const isDark = useDark()
+        return DefaultBaseMaps[isDark.value ? 'dark' : 'light']
+      }
+      if (isKeyOfDefaultStyle(this.selectedBaseMapId)) {
+        return DefaultBaseMaps[this.selectedBaseMapId]
+      }
+      // FIXME: What to do if the selected base map is not found?
+      //        Could happen when persisting the selected base map
+      return (
+        this.baseMaps.find((b) => b.id === this.selectedBaseMapId) ??
+        this.baseMaps[0]
+      )
+    },
+    selectedStyle(): string {
+      const style = this.selectedBaseMap.style
+      if (style.startsWith('/')) {
+        return getResourcesStaticUrl(style.slice(1))
+      }
+      return style
+    },
+  },
+  actions: {
+    async fetchState() {
+      if (this.settings.length > 0) return
+
+      const url = getResourcesStaticUrl('webocComponentSettings.json')
+      const response = await fetch(url)
+      const data: ComponentSettingsResponse = await response.json()
+      this.settings = data.componentSettings
+      this.declarations = data.declarations
+    },
+    getSettingsById(id: string) {
+      return this.settings.find((s) => s.id === id)
+    },
+  },
+  persist: {
+    key: 'weboc-component-settings-v1.0.0',
+    storage: window.localStorage,
+    omit: ['settings', 'declarations'],
+  },
+})
diff --git a/src/stores/dashboards.ts b/src/stores/dashboards.ts
new file mode 100644
index 000000000..e07492d18
--- /dev/null
+++ b/src/stores/dashboards.ts
@@ -0,0 +1,29 @@
+import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { defineStore } from 'pinia'
+import type { Dashboard, DashboardsResponse } from '@/lib/dashboard/types'
+
+interface State {
+  dashboards: Dashboard[]
+}
+
+export const useDashboardsStore = defineStore('dashboards', {
+  state: (): State => ({
+    dashboards: [],
+  }),
+  actions: {
+    async fetchState() {
+      if (this.dashboards.length > 0) return
+
+      const url = getResourcesStaticUrl('dashboards.json')
+      const response = await fetch(url)
+      const data: DashboardsResponse = await response.json()
+      this.dashboards = data.dashboards
+      this.dashboards.forEach((dashboard) => {
+        dashboard.cssTemplate = getResourcesStaticUrl(dashboard.cssTemplate)
+      })
+    },
+    getDashboardById(id: string): Dashboard | undefined {
+      return this.dashboards.find((d) => d.id === id)
+    },
+  },
+})
diff --git a/src/stores/topologyNodes.ts b/src/stores/topologyNodes.ts
new file mode 100644
index 000000000..7f1cbcb14
--- /dev/null
+++ b/src/stores/topologyNodes.ts
@@ -0,0 +1,50 @@
+import { createTopologyHashMaps, getTopologyNodes } from '@/lib/topology'
+import { TopologyNode } from '@deltares/fews-pi-requests'
+import { defineStore } from 'pinia'
+import { ref, watchEffect } from 'vue'
+
+export const useTopologyNodesStore = defineStore('topologyNodes', () => {
+  const nodes = ref<TopologyNode[]>([])
+  const _idToNodeMap = ref<Map<string, TopologyNode>>(new Map())
+  const _childIdToParentNodeMap = ref<Map<string, TopologyNode>>(new Map())
+  const subNodes = ref<TopologyNode[]>([])
+
+  watchEffect(() => {
+    const { idToNodeMap, childIdToParentNodeMap } = createTopologyHashMaps(
+      nodes.value,
+    )
+    _idToNodeMap.value = idToNodeMap
+    _childIdToParentNodeMap.value = childIdToParentNodeMap
+  })
+
+  function getSubNodesForIds(nodeIds?: string[]) {
+    if (!nodeIds) return []
+
+    return nodeIds.flatMap((nodeId) => {
+      const node = _idToNodeMap.value.get(nodeId)
+      return node ? [node] : []
+    })
+  }
+
+  function getNodeById(nodeId: string): TopologyNode | undefined {
+    return _idToNodeMap.value.get(nodeId)
+  }
+
+  function getParentNodeById(childNodeId: string) {
+    return _childIdToParentNodeMap.value.get(childNodeId)
+  }
+
+  watchEffect(async () => {
+    nodes.value = await getTopologyNodes()
+  })
+
+  return {
+    nodes,
+    subNodes,
+    _idToNodeMap,
+    _childIdToParentNodeMap,
+    getSubNodesForIds,
+    getNodeById,
+    getParentNodeById,
+  }
+})
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index bcc7169a3..f5ded4db3 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -5,9 +5,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useComponentSettingsStore } from '@/stores/componentSettings'
 import DashboardDisplay from '@/components/general/DashboardDisplay.vue'
 import type { TopologyNode } from '@deltares/fews-pi-requests'
-import { getResourcesStaticUrl } from '@/lib/fews-config'
+import { useDashboardsStore } from '@/stores/dashboards'
 
 interface Props {
   topologyNode?: TopologyNode
@@ -15,13 +16,14 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const componentSettingsStore = useComponentSettingsStore()
+componentSettingsStore.fetchState()
+
+const dashboardsStore = useDashboardsStore()
+dashboardsStore.fetchState()
+
 const dashboard = computed(() => {
   if (!props.topologyNode) return
-  const css = getResourcesStaticUrl(`${props.topologyNode.id}.css`)
-  return {
-    id: props.topologyNode.id,
-    css,
-    panels: props.topologyNode.topologyNodes ?? [],
-  }
+  return dashboardsStore.getDashboardById(props.topologyNode.id)
 })
 </script>
diff --git a/src/views/TopologyDisplayView.vue b/src/views/TopologyDisplayView.vue
index 240add29a..3bc27b618 100644
--- a/src/views/TopologyDisplayView.vue
+++ b/src/views/TopologyDisplayView.vue
@@ -90,7 +90,6 @@ import WorkflowsControl from '@/components/workflows/WorkflowsControl.vue'
 import LeafNodeButtons from '@/components/general/LeafNodeButtons.vue'
 
 import type { ColumnItem } from '@/components/general/ColumnItem'
-import { createTopologyMap, getTopologyNodes } from '@/lib/topology'
 import { useConfigStore } from '@/stores/config'
 import { useUserSettingsStore } from '@/stores/userSettings'
 import { useWorkflowsStore } from '@/stores/workflows'
@@ -115,6 +114,7 @@ import {
   displayTabsForNode,
   type DisplayTab,
 } from '@/lib/topology/displayTabs.js'
+import { useTopologyNodesStore } from '@/stores/topologyNodes'
 
 interface Props {
   topologyId?: string
@@ -149,7 +149,7 @@ watch(active, () => {
 const activeNode = computed(() => {
   if (!active.value) return
 
-  const node = topologyMap.value.get(active.value)
+  const node = topologyNodesStore.getNodeById(active.value)
   if (node?.topologyNodes) {
     const leafNode = node.topologyNodes.find(
       (n) => n.id === nodesStore.activeNodeId,
@@ -240,23 +240,13 @@ const showActiveThresholdCrossingsForFilters = computed(() => {
   )
 })
 
-const nodes = ref<TopologyNode[]>()
-const topologyMap = ref(new Map<string, TopologyNode>())
-const subNodes = computed<TopologyNode[] | undefined>(
-  () =>
-    topologyDisplayNodes.value?.flatMap((nodeId) => {
-      const node = topologyMap.value.get(nodeId)
-      return node ? [node] : []
-    }) ?? nodes.value,
+const topologyNodesStore = useTopologyNodesStore()
+const subNodes = computed(() =>
+  topologyNodesStore.getSubNodesForIds(topologyDisplayNodes.value),
 )
-
-getTopologyNodes().then((response) => {
-  nodes.value = response
-  topologyMap.value = createTopologyMap(nodes.value)
+watch(topologyNodesStore.nodes, () => {
   const to = reroute(route)
-  if (to) {
-    router.push(to)
-  }
+  if (to) router.push(to)
 })
 
 function updateItems(): void {
@@ -289,7 +279,7 @@ watchEffect(() => {
     : undefined
 
   // Check if the active node is a leaf.
-  const node = topologyMap.value.get(activeNodeId)
+  const node = topologyNodesStore.getNodeById(activeNodeId)
   if (node === undefined) {
     filterIds.value = []
     return
@@ -299,7 +289,8 @@ watchEffect(() => {
 
   if (showLeafsAsButton.value && Array.isArray(props.nodeId)) {
     const menuNodeId = props.nodeId[0]
-    const menuNode = topologyMap.value.get(menuNodeId) as any
+    const menuNode = topologyNodesStore.getNodeById(menuNodeId)
+    if (!menuNode) return
     nodesStore.setNodeButtons(
       nodeButtonItems(
         menuNode,
@@ -320,10 +311,9 @@ onBeforeRouteUpdate(reroute)
 
 function reroute(to: RouteLocationNormalized) {
   if (!to.params.nodeId) {
-    if (topologyMap.value.size === 0) return
-    const topologyEntry = topologyMap.value.entries().next()
-    if (topologyEntry.value) {
-      to.params.nodeId = topologyEntry.value[0]
+    const firstSubNodeId = subNodes.value[0].id
+    if (firstSubNodeId) {
+      to.params.nodeId = firstSubNodeId
       return to
     }
     return
@@ -336,13 +326,11 @@ function reroute(to: RouteLocationNormalized) {
     const parentNodeId = Array.isArray(to.params.nodeId)
       ? to.params.nodeId[0]
       : to.params.nodeId
-    const menuNode = topologyMap.value.get(parentNodeId) as TopologyNode
+    const menuNode = topologyNodesStore.getNodeById(parentNodeId)
     if (menuNode === undefined) return
     if (menuNode.topologyNodes === undefined) {
       const leafNodeId = parentNodeId
-      const parentNode = [...topologyMap.value?.values()].find((p) => {
-        return p.topologyNodes?.map((c) => c.id).includes(leafNodeId)
-      })
+      const parentNode = topologyNodesStore.getParentNodeById(leafNodeId)
       if (parentNode?.id === undefined) return
       const to = {
         name: 'TopologyDisplay',
@@ -372,7 +360,9 @@ function reroute(to: RouteLocationNormalized) {
         Array.isArray(to.params.nodeId) && to.params.nodeId.length > 1
           ? to.params.nodeId[0]
           : undefined
-      const menuNode = topologyMap.value.get(leafNodeId) as TopologyNode
+      const menuNode = topologyNodesStore.getNodeById(leafNodeId)
+      if (!menuNode) return
+
       const topologyId = to.params.topologyId as string
       const tabs = displayTabsForNode(menuNode, parentNodeId, topologyId)
       const tab = tabs.find((t) => t.type === activeTab.value) ?? tabs[0]