diff --git a/src/modules/infobox/components/FeatureList.vue b/src/modules/infobox/components/FeatureList.vue
index 37f4d5a3a..19770efc0 100644
--- a/src/modules/infobox/components/FeatureList.vue
+++ b/src/modules/infobox/components/FeatureList.vue
@@ -113,6 +113,7 @@ function loadMoreResultForLayer(layerId) {
     }
     &:not(.fluid) {
         max-height: 33vh;
+        overflow-x: hidden;
         overflow-y: auto;
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax($overlay-width, 1fr));
diff --git a/src/modules/map/components/cesium/CesiumInternalLayer.vue b/src/modules/map/components/cesium/CesiumInternalLayer.vue
index 390abae01..cb05f1808 100644
--- a/src/modules/map/components/cesium/CesiumInternalLayer.vue
+++ b/src/modules/map/components/cesium/CesiumInternalLayer.vue
@@ -10,19 +10,15 @@
         v-if="layerConfig.type === LayerTypes.WMS"
         :wms-layer-config="layerConfig"
         :parent-layer-opacity="parentLayerOpacity"
-        :projection="projection"
         :z-index="zIndex"
-        :is-time-slider-active="isTimeSliderActive"
     />
     <div v-if="layerConfig.type === LayerTypes.GROUP">
         <CesiumWMSLayer
             v-for="(layer, index) in layerConfig.layers"
             :key="`${layer.id}-${index}`"
             :wms-layer-config="layer"
-            :projection="projection"
             :parent-layer-opacity="parentLayerOpacity"
             :z-index="zIndex + index"
-            :is-time-slider-active="isTimeSliderActive"
         />
     </div>
     <div v-if="layerConfig.type === LayerTypes.AGGREGATE">
diff --git a/src/modules/map/components/cesium/CesiumWMSLayer.vue b/src/modules/map/components/cesium/CesiumWMSLayer.vue
index 26d4ac607..b750246dd 100644
--- a/src/modules/map/components/cesium/CesiumWMSLayer.vue
+++ b/src/modules/map/components/cesium/CesiumWMSLayer.vue
@@ -1,125 +1,97 @@
-<template>
-    <slot />
-</template>
-
-<script>
-import { ImageryLayer, Rectangle, WebMapServiceImageryProvider } from 'cesium'
+<script setup>
+import { Rectangle, WebMapServiceImageryProvider } from 'cesium'
 import { cloneDeep } from 'lodash'
-import { mapState } from 'vuex'
+import { computed, inject, toRef, toRefs, watch } from 'vue'
+import { useStore } from 'vuex'
 
 import ExternalWMSLayer from '@/api/layers/ExternalWMSLayer.class'
 import GeoAdminWMSLayer from '@/api/layers/GeoAdminWMSLayer.class'
 import { ALL_YEARS_TIMESTAMP } from '@/api/layers/LayerTimeConfigEntry.class'
 import { getBaseUrlOverride } from '@/config/baseUrl.config'
 import { DEFAULT_PROJECTION } from '@/config/map.config'
-import addImageryLayerMixins from '@/modules/map/components/cesium/utils/addImageryLayer-mixins'
-import CoordinateSystem from '@/utils/coordinates/CoordinateSystem.class'
+import useAddImageryLayer from '@/modules/map/components/cesium/utils/useAddImageryLayer.composable'
 import { WGS84 } from '@/utils/coordinates/coordinateSystems'
 import { getTimestampFromConfig } from '@/utils/layerUtils'
 
 const MAXIMUM_LEVEL_OF_DETAILS = 18
 
-export default {
-    mixins: [addImageryLayerMixins],
-    props: {
-        wmsLayerConfig: {
-            type: [GeoAdminWMSLayer, ExternalWMSLayer],
-            required: true,
-        },
-        projection: {
-            type: CoordinateSystem,
-            required: true,
-        },
-        zIndex: {
-            type: Number,
-            default: -1,
-        },
-        isTimeSliderActive: {
-            type: Boolean,
-            default: false,
-        },
-        parentLayerOpacity: {
-            type: Number,
-            default: null,
-        },
+const props = defineProps({
+    wmsLayerConfig: {
+        type: [GeoAdminWMSLayer, ExternalWMSLayer],
+        required: true,
     },
-    computed: {
-        ...mapState({
-            currentLang: (state) => state.i18n.lang,
-        }),
-        layerId() {
-            return this.wmsLayerConfig.technicalName ?? this.wmsLayerConfig.id
-        },
-        opacity() {
-            return this.parentLayerOpacity ?? this.wmsLayerConfig.opacity ?? 1.0
-        },
-        wmsVersion() {
-            return this.wmsLayerConfig.wmsVersion ?? '1.3.0'
-        },
-        format() {
-            return this.wmsLayerConfig.format ?? 'png'
-        },
-        url() {
-            return getBaseUrlOverride('wms') ?? this.wmsLayerConfig.baseUrl
-        },
-        timestamp() {
-            return getTimestampFromConfig(this.wmsLayerConfig)
-        },
-        customAttributes() {
-            return cloneDeep(this.wmsLayerConfig.customAttributes)
-        },
-        /**
-         * Definition of all relevant URL param for our WMS backends. Passes as parameters to
-         * https://cesium.com/learn/cesiumjs/ref-doc/WebMapServiceImageryProvider.html#.ConstructorOptions
-         *
-         * If we let the URL have all the param beforehand (sending all URL param through the url
-         * option), most of our wanted params will be doubled, resulting in longer and more
-         * difficult to read URLs
-         *
-         * @returns Object
-         */
-        wmsUrlParams() {
-            let params = {
-                SERVICE: 'WMS',
-                REQUEST: 'GetMap',
-                TRANSPARENT: true,
-                LAYERS: this.layerId,
-                FORMAT: `image/${this.format}`,
-                LANG: this.currentLang,
-                VERSION: this.wmsVersion,
-            }
-            if (this.timestamp && this.timestamp !== ALL_YEARS_TIMESTAMP) {
-                params.TIME = this.timestamp
-            }
-            if (this.customAttributes) {
-                params = { ...params, ...this.customAttributes }
-            }
-            return params
-        },
+    zIndex: {
+        type: Number,
+        default: -1,
     },
-    watch: {
-        wmsUrlParams() {
-            this.updateLayer()
-        },
-    },
-    methods: {
-        createImagery(url) {
-            return new ImageryLayer(
-                new WebMapServiceImageryProvider({
-                    url: url,
-                    parameters: this.wmsUrlParams,
-                    layers: this.layerId,
-                    maximumLevel: MAXIMUM_LEVEL_OF_DETAILS,
-                    enablePickFeatures: false,
-                    rectangle: Rectangle.fromDegrees(
-                        ...DEFAULT_PROJECTION.getBoundsAs(WGS84).flatten
-                    ),
-                }),
-                {
-                    alpha: this.opacity,
-                }
-            )
-        },
+    parentLayerOpacity: {
+        type: Number,
+        default: null,
     },
+})
+const { wmsLayerConfig, zIndex, parentLayerOpacity } = toRefs(props)
+
+const getViewer = inject('getViewer')
+
+const store = useStore()
+const currentLang = computed(() => store.state.i18n.lang)
+
+const layerId = computed(() => wmsLayerConfig.value.technicalName ?? wmsLayerConfig.value.id)
+const opacity = computed(() => parentLayerOpacity.value ?? wmsLayerConfig.value.opacity ?? 1.0)
+const wmsVersion = computed(() => wmsLayerConfig.value.wmsVersion ?? '1.3.0')
+const format = computed(() => wmsLayerConfig.value.format ?? 'png')
+const url = computed(() => getBaseUrlOverride('wms') ?? wmsLayerConfig.value.baseUrl)
+const timestamp = computed(() => getTimestampFromConfig(wmsLayerConfig.value))
+const customAttributes = computed(() => cloneDeep(wmsLayerConfig.value.customAttributes))
+
+/**
+ * Definition of all relevant URL param for our WMS backends. Passes as parameters to
+ * https://cesium.com/learn/cesiumjs/ref-doc/WebMapServiceImageryProvider.html#.ConstructorOptions
+ *
+ * If we let the URL have all the param beforehand (sending all URL param through the url option),
+ * most of our wanted params will be doubled, resulting in longer and more difficult to read URLs
+ *
+ * @returns Object
+ */
+const wmsUrlParams = computed(() => {
+    let params = {
+        SERVICE: 'WMS',
+        REQUEST: 'GetMap',
+        TRANSPARENT: true,
+        LAYERS: layerId.value,
+        FORMAT: `image/${format.value}`,
+        LANG: currentLang.value,
+        VERSION: wmsVersion.value,
+    }
+    if (timestamp.value && timestamp.value !== ALL_YEARS_TIMESTAMP) {
+        params.TIME = timestamp.value
+    }
+    if (customAttributes.value) {
+        params = { ...params, ...customAttributes.value }
+    }
+    return params
+})
+
+watch(wmsUrlParams, () => refreshLayer(), { deep: true })
+
+function createProvider() {
+    return new WebMapServiceImageryProvider({
+        url: url.value,
+        parameters: wmsUrlParams.value,
+        layers: layerId.value,
+        maximumLevel: MAXIMUM_LEVEL_OF_DETAILS,
+        enablePickFeatures: false,
+        rectangle: Rectangle.fromDegrees(...DEFAULT_PROJECTION.getBoundsAs(WGS84).flatten),
+    })
 }
+const { refreshLayer } = useAddImageryLayer(
+    getViewer(),
+    createProvider,
+    toRef(zIndex),
+    toRef(opacity)
+)
 </script>
+
+<template>
+    <slot />
+</template>
diff --git a/src/modules/map/components/cesium/utils/useAddImageryLayer.composable.js b/src/modules/map/components/cesium/utils/useAddImageryLayer.composable.js
index 33caeea75..fb8977951 100644
--- a/src/modules/map/components/cesium/utils/useAddImageryLayer.composable.js
+++ b/src/modules/map/components/cesium/utils/useAddImageryLayer.composable.js
@@ -15,7 +15,7 @@ import { onBeforeUnmount, onMounted, toValue, watch } from 'vue'
  * @param {Function<ImageryProvider>} createProvider
  * @param {Ref<Number>} zIndex
  * @param {Ref<Number>} opacity
- * @returns {{ layer: ImageryLayer; refreshLayer: Function }}
+ * @returns {{ refreshLayer: Function }}
  */
 export default function useAddImageryLayer(cesiumViewer, createProvider, zIndex, opacity) {
     let layer
@@ -26,10 +26,7 @@ export default function useAddImageryLayer(cesiumViewer, createProvider, zIndex,
         }
         const provider = createProvider()
         if (provider) {
-            layer = cesiumViewer.scene.imageryLayers.addImageryProvider(
-                createProvider(),
-                toValue(zIndex)
-            )
+            layer = cesiumViewer.scene.imageryLayers.addImageryProvider(provider, toValue(zIndex))
         }
     }
 
diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
index 9bbcf843e..4aa1f28c8 100644
--- a/src/modules/menu/components/LayerCatalogueItem.vue
+++ b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -139,6 +139,13 @@ function startLayerPreview() {
     }
 }
 
+function stopLayerPreview() {
+    store.dispatch('setPreviewLayer', {
+        layer: null,
+        ...dispatcher,
+    })
+}
+
 function addRemoveLayer() {
     // if this is a group of a layer then simply add it to the map
     const layers = store.getters.getActiveLayersById(
@@ -164,6 +171,7 @@ function addRemoveLayer() {
             ...dispatcher,
         })
     }
+    stopLayerPreview()
 }
 
 function onItemClick() {
diff --git a/tests/cypress/tests-e2e/3d/layers.cy.js b/tests/cypress/tests-e2e/3d/layers.cy.js
index fc1aef017..1f84cc6bc 100644
--- a/tests/cypress/tests-e2e/3d/layers.cy.js
+++ b/tests/cypress/tests-e2e/3d/layers.cy.js
@@ -1,12 +1,22 @@
 import { EditableFeatureTypes } from '@/api/features/EditableFeature.class'
 import { WEBMERCATOR } from '@/utils/coordinates/coordinateSystems'
 
+function expectLayerCountToBe(viewer, layerCount) {
+    const layers = viewer.scene.imageryLayers
+    const layerUrls = []
+    for (let i = 0; i < layers.length; i++) {
+        layerUrls.push(layers.get(i).imageryProvider.url)
+    }
+    expect(layers.length).to.eq(
+        layerCount,
+        `Wrong layer count. Expected ${layerCount} but got ${layers.length}. Layers: \n${layerUrls.join('\n')}`
+    )
+}
+
 describe('Test of layer handling in 3D', () => {
     it('add layer from search bar', () => {
-        const expectedLayerId = 'test.wmts.layer'
-        cy.intercept(`**/1.0.0/${expectedLayerId}/default/**`, {
-            statusCode: 200,
-        }).as('get-wmts-layer')
+        cy.log('Search and add a WMTS layer through the search bar')
+        const expectedWmtsLayerId = 'test.wmts.layer'
         cy.mockupBackendResponse(
             '**rest/services/ech/SearchServer*?type=layers*',
             {
@@ -15,13 +25,13 @@ describe('Test of layer handling in 3D', () => {
                         id: 4321,
                         weight: 1,
                         attrs: {
-                            label: '<b>Test layer</b>',
-                            layer: expectedLayerId,
+                            label: '<b>Test WMTS layer</b>',
+                            layer: expectedWmtsLayerId,
                         },
                     },
                 ],
             },
-            'search-layers'
+            'search-wmts-layers'
         )
         cy.mockupBackendResponse(
             '**rest/services/ech/SearchServer*?type=locations*',
@@ -33,21 +43,47 @@ describe('Test of layer handling in 3D', () => {
         })
         cy.waitUntilCesiumTilesLoaded()
         cy.openMenuIfMobile()
-        cy.get('[data-cy="searchbar"]').paste('test')
-        cy.wait(['@search-locations', '@search-layers'])
+        cy.get('[data-cy="searchbar"]').as('searchBar').paste('test wmts')
+        cy.wait(['@search-locations', '@search-wmts-layers'])
         cy.get('[data-cy="search-results-layers"] [data-cy="search-result-entry"]').first().click()
         cy.get('[data-cy="menu-button"]').click()
         cy.readWindowValue('cesiumViewer').then((viewer) => {
-            const layers = viewer.scene.imageryLayers
-            expect(layers.length).to.eq(
-                2,
-                'There should be the background layer + the layer added through the search'
-            )
-            expect(layers.get(1).show).to.eq(true)
-            expect(layers.get(1).imageryProvider.url).to.have.string(
-                `1.0.0/${expectedLayerId}/default/current/3857/{z}/{x}/{y}.png`
+            expectLayerCountToBe(viewer, 2)
+            const wmtsLayer = viewer.scene.imageryLayers.get(1)
+            expect(wmtsLayer.show).to.eq(true)
+            expect(wmtsLayer.imageryProvider.url).to.have.string(
+                `1.0.0/${expectedWmtsLayerId}/default/current/3857/{z}/{x}/{y}.png`
             )
         })
+
+        cy.log('Search and add a WMS layer through the search bar')
+        const expectedWmsLayerId = 'test.wms.layer'
+        cy.mockupBackendResponse(
+            '**rest/services/ech/SearchServer*?type=layers*',
+            {
+                results: [
+                    {
+                        id: 5678,
+                        weight: 1,
+                        attrs: {
+                            label: '<b>Test WMS layer</b>',
+                            layer: expectedWmsLayerId,
+                        },
+                    },
+                ],
+            },
+            'search-wms-layers'
+        )
+        cy.get('@searchBar').clear()
+        cy.get('@searchBar').paste('test wms')
+        cy.wait(['@search-locations', '@search-wms-layers'])
+        cy.get('[data-cy="search-results-layers"] [data-cy="search-result-entry"]').first().click()
+        cy.readWindowValue('cesiumViewer').then((viewer) => {
+            expectLayerCountToBe(viewer, 3)
+            const wmsLayer = viewer.scene.imageryLayers.get(2)
+            expect(wmsLayer.show).to.eq(true)
+            expect(wmsLayer.imageryProvider.layers).to.have.string(expectedWmsLayerId)
+        })
     })
     it('sets the opacity to the value defined in the layers URL param or menu UI', () => {
         cy.log('checking a WMTS layer without 3D specific configuration')
@@ -59,7 +95,14 @@ describe('Test of layer handling in 3D', () => {
         cy.waitUntilCesiumTilesLoaded()
         cy.readWindowValue('cesiumViewer').then((viewer) => {
             const layers = viewer.scene.imageryLayers
-            expect(layers.get(1).alpha).to.eq(0.5)
+            expect(layers.length).to.eq(
+                2,
+                'There should be the background layer + the WMTS layer added through the URL'
+            )
+            expect(layers.get(1).alpha).to.eq(
+                0.5,
+                'The opacity must come from the URL and not the default value from layers config'
+            )
         })
 
         cy.log('Checking that using the menu also changes the opacity correctly')
@@ -76,7 +119,24 @@ describe('Test of layer handling in 3D', () => {
             .trigger('input')
         cy.readWindowValue('cesiumViewer').should((viewer) => {
             const layers = viewer.scene.imageryLayers
-            expect(layers.get(1).alpha).to.eq(1.0 - newSliderPosition)
+            expect(layers.get(1).alpha).to.eq(
+                1.0 - newSliderPosition,
+                'Changing the transparency in the menu must change the opacity of the 3D layer'
+            )
+        })
+
+        cy.log('checking a WMS layer without 3D specific configuration')
+        const wmsLayerIdWithout3DConfig = 'test.wms.layer'
+        // closing the 3D menu section to have more room to manipulate the catalog section
+        cy.get('[data-cy="menu-tray-3d-section"] > [data-cy="menu-section-header"]').click()
+        cy.get('[data-cy="menu-topic-section"]').click()
+        cy.get('[data-cy="catalogue-tree-item-2"]').click()
+        cy.get('[data-cy="catalogue-tree-item-5"]').click()
+        cy.get(`[data-cy="catalogue-add-layer-button-${wmsLayerIdWithout3DConfig}"]`).click()
+        cy.readWindowValue('cesiumViewer').should((viewer) => {
+            expectLayerCountToBe(viewer, 3)
+            const wmsLayer = viewer.scene.imageryLayers.get(2)
+            expect(wmsLayer.imageryProvider.layers).to.have.string(wmsLayerIdWithout3DConfig)
         })
     })
     it('sets the timestamp of a layer when specified in the layers URL param', () => {
diff --git a/tests/cypress/tests-e2e/importToolFile.cy.js b/tests/cypress/tests-e2e/importToolFile.cy.js
index 8032dd10d..de256deb7 100644
--- a/tests/cypress/tests-e2e/importToolFile.cy.js
+++ b/tests/cypress/tests-e2e/importToolFile.cy.js
@@ -231,10 +231,24 @@ describe('The Import File Tool', () => {
             expect(result[0]).to.approximately(expected[0], acceptedDelta)
             expect(result[1]).to.approximately(expected[1], acceptedDelta)
         }
+        const emptySearchResponse = {
+            results: [],
+        }
+        cy.mockupBackendResponse(
+            'rest/services/ech/SearchServer*?type=layers*',
+            emptySearchResponse,
+            'search-layers'
+        )
+        cy.mockupBackendResponse(
+            'rest/services/ech/SearchServer*?type=locations*',
+            emptySearchResponse,
+            'search-locations'
+        )
 
         cy.log('Test search for a feature in the local KML file')
         cy.closeMenuIfMobile()
         cy.get('[data-cy="searchbar"]').paste('placemark')
+        cy.wait(['@search-layers', '@search-locations'])
         cy.get('[data-cy="search-results"]').should('be.visible')
         cy.get('[data-cy="search-result-entry"]').as('layerSearchResults').should('have.length', 3)
         cy.get('@layerSearchResults').invoke('text').should('contain', 'Sample Placemark')
@@ -252,6 +266,7 @@ describe('The Import File Tool', () => {
         cy.log('Test search for a feature in the online KML file')
         cy.get('[data-cy="searchbar-clear"]').click()
         cy.get('[data-cy="searchbar"]').paste('another sample')
+        cy.wait(['@search-layers', '@search-locations'])
         cy.get('[data-cy="search-results"]').should('be.visible')
         cy.get('[data-cy="search-result-entry"]').as('layerSearchResults').should('have.length', 1)
         cy.get('@layerSearchResults').invoke('text').should('contain', 'Another Sample Placemark')