diff --git a/src/components/spatialdisplay/SpatialDisplayComponent.vue b/src/components/spatialdisplay/SpatialDisplayComponent.vue
index 56540a13..25628e50 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
@@ -75,6 +75,8 @@
           :canUseStreamlines="canUseStreamlines"
           v-model:layer-kind="layerKind"
           v-model:show-layer="showLayer"
+          :currentColourScaleIds="currentColourScaleIds"
+          @update:current-colour-scale="currentColourScale = $event"
         />
         <LocationsSearchControl
           v-model:showLocations="showLocationsLayer"
@@ -108,7 +110,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 +124,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,
@@ -151,16 +149,11 @@ import {
 import { configManager } from '@/services/application-config'
 import type { Layer, Style } from '@deltares/fews-wms-requests'
 import { LayerKind } from '@/lib/streamlines'
-import { useColourScalesStore } from '@/stores/colourScales'
+import { ColourScale, 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'
@@ -221,7 +214,6 @@ const forecastTime = ref<Date>()
 const isLoading = ref(false)
 let debouncedSetLayerOptions!: () => void
 
-const legendLayerName = ref(props.layerName)
 const legendLayerStyles = ref<Style[]>()
 const settings = useUserSettingsStore()
 
@@ -231,6 +223,9 @@ const showLayer = ref<boolean>(true)
 const layerKind = ref(LayerKind.Static)
 
 const colourScalesStore = useColourScalesStore()
+const currentColourScale = ref<ColourScale>()
+const currentColourScaleIds = ref<string[]>([])
+
 const workflowsStore = useWorkflowsStore()
 
 const showLocationsLayer = ref<boolean>(true)
@@ -248,73 +243,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,
+        () => settings.useDisplayUnits,
+        () => props.layerCapabilities?.styles ?? [],
+      )
     })
   },
   { immediate: true },
@@ -364,7 +308,6 @@ watch(
     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 +338,7 @@ watch(currentElevation, () => {
 })
 
 watch(
-  [() => colourScalesStore.currentScale?.range, () => settings.useDisplayUnits],
+  [() => currentColourScale.value?.range, () => settings.useDisplayUnits],
   () => {
     setLayerOptions()
   },
@@ -443,10 +386,10 @@ 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,
+      style: currentColourScale.value?.style.name,
       useDisplayUnits: settings.useDisplayUnits,
     }
   } else {
diff --git a/src/components/wms/InformationPanel.vue b/src/components/wms/InformationPanel.vue
index 32d2c26c..07edfe16 100644
--- a/src/components/wms/InformationPanel.vue
+++ b/src/components/wms/InformationPanel.vue
@@ -36,14 +36,11 @@
           prepend-icon="mdi-clock-time-four-outline"
         >
         </v-list-item>
-        <v-list-item
-          prepend-icon="mdi-palette"
-          v-if="colourScalesStore.currentScales"
-        >
+        <v-list-item prepend-icon="mdi-palette" v-if="currentScales">
           <v-list-item
-            v-for="(item, index) of colourScalesStore.currentScales"
+            v-for="(item, index) of currentScales"
             :key="index"
-            @click="colourScalesStore.currentIndex = index"
+            @click="currentColourScaleIndex = index"
             class="px-0"
           >
             <v-list-item-title>
@@ -62,14 +59,12 @@
                 <ColourLegendTable :colourMap="item.colourMap" />
               </template>
             </div>
-            <template #append v-if="index === colourScalesStore.currentIndex">
+            <template #append v-if="index === currentColourScaleIndex">
               <v-icon>mdi-check</v-icon>
             </template>
           </v-list-item>
         </v-list-item>
-        <v-list-item
-          v-if="colourScalesStore.currentScale?.useGradients !== false"
-        >
+        <v-list-item v-if="currentScale?.useGradients !== false">
           <template v-slot:prepend>
             <div class="mx-7"></div>
           </template>
@@ -81,8 +76,8 @@
                 variant="plain"
                 hide-details
                 density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
+                @keydown.enter.stop="changeCurrentColourScaleRange"
+                @blur="changeCurrentColourScaleRange"
                 :rules="[rules.required, rules.smallerThanMax]"
               ></v-text-field>
             </v-col>
@@ -93,18 +88,18 @@
                 variant="plain"
                 hide-details
                 density="comfortable"
-                @keydown.enter.stop="changecolorScaleRange"
-                @blur="changecolorScaleRange"
+                @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="!colourScalesStore.currentScaleIsInitialRange"
+                v-if="!currentScaleIsInitialRange"
                 icon="mdi-restore"
                 variant="flat"
                 density="compact"
-                @click="colourScalesStore.resetCurrentScaleRange"
+                @click="resetCurrentScaleRange"
               />
             </v-col>
           </v-row>
@@ -142,9 +137,10 @@ 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 { useColourScalesStore, type Range } from '@/stores/colourScales'
 import ColourLegendTable from './ColourLegendTable.vue'
 import ControlChip from '@/components/wms/ControlChip.vue'
+import { useColourScales } from '@/services/useColourScales'
 
 interface Props {
   layerTitle?: string
@@ -155,36 +151,64 @@ interface Props {
   firstValueTime?: Date
   lastValueTime?: Date
   canUseStreamlines?: boolean
+  currentColourScaleIds: string[]
 }
 
-const colourScalesStore = useColourScalesStore()
-
 const props = withDefaults(defineProps<Props>(), {
   layerTitle: '',
   completelyMissing: false,
 })
 
-const emit = defineEmits(['style-click', 'update:layerKind'])
+const emit = defineEmits([
+  'style-click',
+  'update:layerKind',
+  'update:current-colour-scale',
+])
+
+const currentColourScaleIndex = ref(0)
+watch(
+  () => props.currentColourScaleIds,
+  () => {
+    currentColourScaleIndex.value = 0
+  },
+)
+
+const colourScalesStore = useColourScalesStore()
+const {
+  currentScale,
+  currentScales,
+  currentScaleIsInitialRange,
+  resetCurrentScaleRange,
+} = useColourScales(
+  currentColourScaleIndex,
+  () => props.currentColourScaleIds,
+  () => colourScalesStore.scales,
+)
 
-const mutableColorScaleRange = ref(
-  colourScalesStore.currentScale?.range
-    ? { ...colourScalesStore.currentScale?.range }
-    : undefined,
+watch(
+  currentScale,
+  () => {
+    emit('update:current-colour-scale', currentScale.value)
+  },
+  { immediate: true },
 )
 
+const mutableColorScaleRange = ref<Range>()
 watch(
-  () => colourScalesStore.currentScale?.range,
+  () => currentScale.value?.range,
   () => {
-    mutableColorScaleRange.value = colourScalesStore.currentScale?.range
-      ? { ...colourScalesStore.currentScale?.range }
+    mutableColorScaleRange.value = currentScale.value?.range
+      ? { ...currentScale.value?.range }
       : undefined
   },
-  { deep: true },
+  { immediate: true, deep: true },
 )
 
-const changecolorScaleRange = () => {
+const changeCurrentColourScaleRange = () => {
   if (mutableColorScaleRange.value === undefined) return
-  colourScalesStore.setCurrentScaleRange(mutableColorScaleRange.value)
+  if (currentScale.value === undefined) return
+
+  currentScale.value.range = mutableColorScaleRange.value
 }
 
 const showLayer = defineModel<boolean>('showLayer')
diff --git a/src/services/useColourScales/index.ts b/src/services/useColourScales/index.ts
new file mode 100644
index 00000000..f8c2e65d
--- /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 989c4f6e..336f1b70 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 c421788d..a7ac632c 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 }