diff --git a/src/modules/infobox/components/ImportContent.vue b/src/modules/infobox/components/ImportContent.vue
deleted file mode 100644
index b7d83f50f..000000000
--- a/src/modules/infobox/components/ImportContent.vue
+++ /dev/null
@@ -1,502 +0,0 @@
-<template>
-    <div
-        data-infobox="height-reference"
-        class="import-overlay-content"
-        :class="{ 'with-layers': importedLayers?.length }"
-        data-cy="import-tool-content"
-    >
-        <ul class="nav nav-tabs" role="tablist">
-            <li class="nav-item">
-                <button
-                    class="nav-link py-1"
-                    :class="{
-                        active: selectedTab === 'online',
-                    }"
-                    data-bs-toggle="tab"
-                    data-bs-target="#nav-online"
-                    type="button"
-                    role="tab"
-                    aria-controls="nav-online"
-                    aria-selected="true"
-                    data-cy="online-import-btn"
-                    @click="() => (selectedTab = 'online')"
-                >
-                    <!-- TODO add translation -->
-                    Online
-                </button>
-            </li>
-            <li class="nav-item">
-                <button
-                    class="nav-link py-1"
-                    :class="{
-                        active: selectedTab === 'local',
-                    }"
-                    data-bs-toggle="tab"
-                    data-bs-target="#nav-local"
-                    type="button"
-                    role="tab"
-                    aria-controls="nav-local"
-                    aria-selected="false"
-                    data-cy="local-import-btn"
-                    @click="() => (selectedTab = 'local')"
-                >
-                    <!-- TODO add translation -->
-                    Local
-                </button>
-            </li>
-        </ul>
-        <div class="tab-content mt-2">
-            <div
-                id="nav-online"
-                class="tab-pane fade"
-                :class="{ active: selectedTab === 'online', show: selectedTab === 'online' }"
-                role="tabpanel"
-                aria-labelledby="nav-online-tab"
-            >
-                <div class="input-group d-flex">
-                    <input
-                        ref="onlineImportInput"
-                        type="text"
-                        class="form-control import-input"
-                        :class="{ 'rounded-end': !onlineImportValue?.length }"
-                        :placeholder="$t('import_online_placeholder')"
-                        :value="onlineImportValue"
-                        data-cy="import"
-                        @input="onInputChange"
-                        @focus="showProviders"
-                        @keydown.down.prevent="goToFirstResult"
-                        @keydown.esc.prevent="hideProviders"
-                    />
-                    <button
-                        class="list-switch"
-                        :class="{ 'clear-btn-shown': onlineImportValue?.length > 0 }"
-                        data-cy="import-list-switch-button"
-                        @click="toggleProviders"
-                    >
-                        <FontAwesomeIcon :icon="listShown ? 'caret-up' : 'caret-down'" />
-                    </button>
-                    <button
-                        v-if="onlineImportValue?.length > 0"
-                        id="button-addon1"
-                        class="btn btn-outline-group rounded-end"
-                        type="button"
-                        data-cy="import-input-clear"
-                        @click="clearImportQuery"
-                    >
-                        <FontAwesomeIcon :icon="['fas', 'times-circle']" />
-                    </button>
-                    <div v-if="listShown" ref="providers" class="providers-list-container bg-light">
-                        <div class="providers-list" data-cy="import-provider-list">
-                            <div
-                                v-for="(provider, key) in filteredList"
-                                :key="provider"
-                                :tabindex="key"
-                                class="providers-list-item p-2"
-                                @keydown.up.prevent="() => goToPrevious(key)"
-                                @keydown.down.prevent="() => goToNext(key)"
-                                @keydown.home.prevent="goToFirst"
-                                @keydown.end.prevent="goToLast"
-                                @click="() => onChooseProvider(provider.value)"
-                            >
-                                <!-- eslint-disable vue/no-v-html-->
-                                <span v-html="provider.toShow"></span>
-                                <!-- eslint-enable vue/no-v-html-->
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div
-                    class="connect-btn-container mb-2"
-                    :class="{
-                        disabled: isConnectDisabled,
-                    }"
-                >
-                    <button
-                        type="button"
-                        class="btn btn-outline-secondary connect-btn mt-1"
-                        :disabled="isConnectDisabled"
-                        data-cy="import-connect-button"
-                        @click="onConnectOrLoad"
-                    >
-                        {{ buttonText }}
-                    </button>
-                </div>
-            </div>
-            <div
-                id="nav-local"
-                class="tab-pane fade"
-                :class="{ active: selectedTab === 'local', show: selectedTab === 'local' }"
-                role="tabpanel"
-                aria-labelledby="nav-local-tab"
-            >
-                <div class="input-group">
-                    <input
-                        ref="localImportInput"
-                        type="file"
-                        :accept="localUploadAccept"
-                        :size="localUploadMaxSize"
-                        hidden
-                        data-cy="import-local-input"
-                        @change="onFileSelected"
-                    />
-                    <input
-                        type="text"
-                        class="form-control local-import-input"
-                        :placeholder="$t('no_file')"
-                        :value="importedFileInfo"
-                        readonly
-                        @click="() => $refs.localImportInput.click()"
-                    />
-                    <button
-                        class="btn btn-outline-secondary local-import-btn"
-                        type="button"
-                        @click="() => $refs.localImportInput.click()"
-                    >
-                        {{ $t('browse') }}
-                    </button>
-                </div>
-                <div v-show="showMaxSizeError" class="text-danger">{{ $t('file_too_large') }}</div>
-                <div
-                    class="connect-btn-container mb-2"
-                    :class="{
-                        disabled: isLoadDisabled,
-                    }"
-                >
-                    <button
-                        type="button"
-                        class="btn btn-outline-secondary connect-btn mt-1"
-                        :disabled="isLoadDisabled"
-                        data-cy="import-load-button"
-                        @click="onConnectOrLoad"
-                    >
-                        {{ buttonText }}
-                    </button>
-                </div>
-            </div>
-        </div>
-        <ImportContentResultList
-            v-if="importedLayers?.length"
-            :imported-layers="importedLayers"
-            :max-size="wmsMaxSize"
-        ></ImportContentResultList>
-    </div>
-</template>
-<script>
-import axios from 'axios'
-import { useI18n } from 'vue-i18n'
-import { mapState } from 'vuex'
-
-import KMLLayer from '@/api/layers/KMLLayer.class'
-import { parseWmsCapabilities, parseWmtsCapabilities } from '@/api/layers/layers-external.api'
-import externalLayerProviders from '@/modules/infobox/utils/external-layer-providers.json'
-import {
-    guessExternalLayerUrl,
-    isGpx,
-    isKml,
-    isValidUrl,
-    isWmsGetCap,
-    isWmtsGetCap,
-} from '@/modules/infobox/utils/external-provider'
-import log from '@/utils/logging'
-
-import ImportContentResultList from './ImportContentResultList.vue'
-
-const BTN_RESET_TIMEOUT = 3000
-
-export default {
-    components: { ImportContentResultList },
-    emits: ['connected'],
-    setup() {
-        const i18n = useI18n()
-        return {
-            i18n,
-        }
-    },
-    data() {
-        return {
-            onlineImportValue: '',
-            listShown: false,
-            /** @type {'default' | 'loading' | 'failed' | 'succeeded'} */
-            uploadBtnStatus: 'default',
-            importedLayers: [],
-            wmsMaxSize: undefined,
-            /** @type {'online' | 'local'} */
-            selectedTab: 'online',
-            importedFileInfo: '',
-            localUploadAccept: '.kml,.KML,.gpx,.GPX',
-            localUploadMaxSize: 20000000, // 20mb
-            selectedFile: null,
-            showMaxSizeError: false,
-        }
-    },
-    computed: {
-        ...mapState({
-            lang: (state) => state.i18n.lang,
-            projection: (state) => state.position.projection,
-        }),
-        filteredList() {
-            let providers = externalLayerProviders
-            if (this.onlineImportValue?.length) {
-                providers = externalLayerProviders.filter((it) =>
-                    it.includes(this.onlineImportValue)
-                )
-            }
-            return providers.map((it) => {
-                return {
-                    value: it,
-                    toShow: it.replace(
-                        this.onlineImportValue,
-                        `<strong>${this.onlineImportValue}</strong>`
-                    ),
-                }
-            })
-        },
-        isConnectDisabled() {
-            return !isValidUrl(this.onlineImportValue)
-        },
-        isLoadDisabled() {
-            return !this.selectedFile
-        },
-        buttonText() {
-            if (this.uploadBtnStatus === 'loading') {
-                return this.i18n.t('parsing_file')
-            } else if (this.uploadBtnStatus === 'failed') {
-                return this.i18n.t('parse_failed')
-            } else if (this.uploadBtnStatus === 'succeeded') {
-                return this.i18n.t('parse_succeeded')
-            } else if (this.selectedTab === 'local') {
-                return this.i18n.t('load_local_file')
-            }
-            return this.i18n.t('connect')
-        },
-    },
-    watch: {
-        lang() {
-            if (this.importedLayers?.length) {
-                this.onConnectOrLoad()
-            }
-        },
-    },
-    methods: {
-        onInputChange(event) {
-            this.onlineImportValue = event.target.value
-        },
-        onChooseProvider(provider) {
-            this.onlineImportValue = provider
-            this.hideProviders()
-        },
-        async onConnectOrLoad() {
-            this.uploadBtnStatus = 'loading'
-            if (this.selectedTab === 'online') {
-                await this.handleFileUrl()
-            } else if (this.selectedTab === 'local') {
-                this.uploadFile()
-            }
-            this.$emit('connected')
-        },
-        showProviders() {
-            this.listShown = true
-        },
-        hideProviders() {
-            this.listShown = false
-        },
-        toggleProviders() {
-            if (this.listShown) {
-                this.hideProviders()
-            } else {
-                this.showProviders()
-            }
-        },
-        goToFirstResult() {
-            if (!this.listShown) {
-                this.showProviders()
-            }
-            // Wait a tick in case the list weren't shown before.
-            this.$nextTick(() => {
-                // Switch focus to the first item in the list that can get it.
-                // Initially, this will be the first entry of the location list.
-                this.$refs.providers.querySelector('[tabindex="0"]').focus()
-            })
-        },
-        goToPrevious(currentKey) {
-            if (currentKey === 0) return
-            const key = currentKey - 1
-            this.$refs.providers.querySelector(`[tabindex="${key}"]`).focus()
-        },
-        goToNext(currentKey) {
-            if (currentKey >= this.filteredList.length - 1) return
-            const key = currentKey + 1
-            this.$refs.providers.querySelector(`[tabindex="${key}"]`).focus()
-        },
-        goToFirst() {
-            this.$refs.providers.querySelector('[tabindex="0"]').focus()
-        },
-        goToLast() {
-            this.$refs.providers
-                .querySelector(`[tabindex="${this.filteredList.length - 1}"]`)
-                .focus()
-        },
-        handleFileContent(fileContent, url, contentType) {
-            if (isWmsGetCap(fileContent)) {
-                const capabilities = parseWmsCapabilities(fileContent, url)
-                this.handleWms(capabilities)
-            } else if (isWmtsGetCap(fileContent)) {
-                const capabilities = parseWmtsCapabilities(fileContent, url)
-                this.handleWmts(capabilities)
-            } else if (isKml(fileContent)) {
-                // todo just for test
-                this.importedLayers = [new KMLLayer(url, true, 1, null, null, null, null, true)]
-            } else if (isGpx(fileContent)) {
-                // TODO GPX layer not done yet
-            } else {
-                throw new Error(
-                    `Unsupported url ${url} response content; Content-Type=${contentType}`
-                )
-            }
-        },
-        handleWms(capabilities) {
-            if (capabilities.Service.MaxWidth && capabilities.Service.MaxHeight) {
-                this.wmsMaxSize = {
-                    width: capabilities.Service.MaxWidth,
-                    height: capabilities.Service.MaxHeight,
-                }
-            }
-            this.importedLayers = capabilities.getAllExternalLayerObjects(this.projection, 1, true)
-        },
-        handleWmts(capabilities) {
-            this.importedLayers = capabilities.getAllExternalLayerObjects(this.projection, 1, true)
-        },
-        async handleFileUrl() {
-            this.wmsMaxSize = undefined
-            const url = guessExternalLayerUrl(this.onlineImportValue, this.lang).toString()
-            try {
-                const response = await axios.get(url)
-                if (response.status !== 200) {
-                    throw new Error(`Failed to fetch ${url}; status_code=${response.status}`)
-                }
-                this.handleFileContent(response.data, url, response.headers.get('Content-Type'))
-                if (this.importedLayers.length === 0) {
-                    throw new Error(`No valid layer found in ${url}`)
-                }
-                this.uploadBtnStatus = 'succeeded'
-                setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
-            } catch (error) {
-                log.error(`Failed to fetch url ${url}`, error, error.stack)
-                this.uploadBtnStatus = 'failed'
-                setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
-            }
-        },
-        clearImportQuery() {
-            this.onlineImportValue = ''
-            this.$refs.onlineImportInput.focus()
-        },
-        onFileSelected(evt) {
-            this.showMaxSizeError = false
-            const file = evt.target?.files[0]
-            if (!file) return
-            this.importedFileInfo = `${file.name}, ${file.size / 1000} ko`
-            this.$refs.localImportInput.value = null
-            if (file.size > this.localUploadMaxSize) {
-                this.showMaxSizeError = true
-                this.selectedFile = null
-            } else {
-                this.selectedFile = file
-            }
-        },
-        uploadFile() {
-            this.importedLayers = []
-            this.onlineImportValue = ''
-
-            // TODO handle file content
-            console.error('Uploaded file: ', this.selectedFile)
-
-            this.uploadBtnStatus = 'succeeded'
-            setTimeout(() => (this.uploadBtnStatus = 'default'), BTN_RESET_TIMEOUT)
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/webmapviewer-bootstrap-theme';
-
-.import-overlay-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    font-size: 0.825rem;
-    height: min(260px, 35vh);
-}
-
-.import-overlay-content.with-layers {
-    height: min(450px, 35vh);
-}
-
-.local-import-btn:focus,
-.local-import-input:focus,
-.import-input:focus {
-    box-shadow: none;
-}
-
-.connect-btn {
-    width: 100%;
-    cursor: pointer;
-}
-.connect-btn.loading {
-    background-color: #c9302c;
-}
-.connect-btn-container.disabled {
-    cursor: not-allowed;
-}
-.providers-list-container {
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    overflow-y: auto;
-    max-height: 200px;
-    background-color: white;
-    z-index: 1;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-    .providers-list {
-        display: grid;
-        grid-auto-rows: 1fr;
-
-        .providers-list-item {
-            cursor: pointer;
-            font-size: 0.8rem;
-        }
-        .providers-list-item:focus,
-        .providers-list-item:hover {
-            background-color: $list-item-hover-bg-color;
-        }
-    }
-}
-
-.list-switch {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    width: 15px;
-    right: 10px;
-    height: 100%;
-    cursor: pointer;
-    background: transparent;
-    border: none;
-    z-index: 10;
-}
-
-.list-switch.clear-btn-shown {
-    right: 50px;
-}
-.local-import-btn,
-.local-import-input {
-    cursor: pointer;
-}
-.nav-tabs {
-    .nav-link.active {
-        background-color: $primary;
-        color: white;
-    }
-}
-</style>
diff --git a/src/modules/infobox/components/ImportContentResultItem.vue b/src/modules/infobox/components/ImportContentResultItem.vue
deleted file mode 100644
index 2db8b4851..000000000
--- a/src/modules/infobox/components/ImportContentResultItem.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-    <div class="import-list-item">
-        <div
-            class="import-list-item-title"
-            :class="{
-                selected: item.externalLayerId === highlightId,
-            }"
-            @click="onItemClick"
-            @mouseenter="startResultPreview"
-            @mouseleave="stopResultPreview"
-        >
-            <div v-if="depth > 0" class="vr"></div>
-            <div
-                class="zoom-btn-container"
-                :class="{
-                    disabled: !item.extent?.length,
-                }"
-            >
-                <button
-                    class="btn d-flex align-items-center zoom-btn"
-                    :disabled="!item.extent?.length"
-                    @click="zoomToLayer"
-                >
-                    <FontAwesomeIcon icon="fa fa-search-plus" />
-                    <div class="vr ms-2"></div>
-                </button>
-            </div>
-            <button
-                class="btn d-flex align-items-center"
-                :class="{
-                    'btn-rounded': isGroup,
-                }"
-                @click="toggleItem"
-            >
-                <FontAwesomeLayers v-if="isGroup">
-                    <FontAwesomeIcon class="text-secondary" icon="fa-regular fa-circle" />
-                    <FontAwesomeIcon size="xs" :icon="showChildren ? 'minus' : 'plus'" />
-                </FontAwesomeLayers>
-            </button>
-            <span class="import-list-item-name">{{ item.name }}</span>
-        </div>
-        <CollapseTransition :duration="200">
-            <div
-                v-show="showChildren"
-                class="import-list-item-children"
-                :class="`ps-${5 + 2 * depth}`"
-            >
-                <ImportContentResultItem
-                    v-for="(layer, index) in item.layers"
-                    :key="`${index}-${layer.externalLayerId}`"
-                    :item="layer"
-                    :depth="depth + 1"
-                    :highlight-id="highlightId"
-                    @click-on-item="bubbleEvent('clickOnItem', $event)"
-                    @preview-start="bubbleEvent('previewStart', $event)"
-                    @preview-stop="bubbleEvent('previewStop', $event)"
-                />
-            </div>
-        </CollapseTransition>
-    </div>
-</template>
-
-<script>
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-// importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
-import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
-import { mapActions } from 'vuex'
-
-import ExternalGroupOfLayers from '@/api/layers/ExternalGroupOfLayers.class'
-import ExternalWMSLayer from '@/api/layers/ExternalWMSLayer.class'
-import ExternalWMTSLayer from '@/api/layers/ExternalWMTSLayer.class'
-
-export default {
-    name: 'ImportContentResultItem',
-    components: {
-        FontAwesomeLayers,
-        FontAwesomeIcon,
-        CollapseTransition,
-    },
-    props: {
-        item: {
-            type: Object,
-            required: true,
-        },
-        depth: {
-            type: Number,
-            default: 0,
-        },
-        highlightId: {
-            type: String,
-            default: undefined,
-        },
-    },
-    emits: ['clickOnItem', 'previewStart', 'previewStop'],
-    data() {
-        return {
-            showChildren: false,
-        }
-    },
-    computed: {
-        isLayer() {
-            return this.item instanceof ExternalWMSLayer || this.item instanceof ExternalWMTSLayer
-        },
-        isGroup() {
-            return this.item instanceof ExternalGroupOfLayers
-        },
-    },
-    methods: {
-        ...mapActions(['zoomToExtent']),
-        toggleItem(event) {
-            event.stopPropagation()
-            this.showChildren = !this.showChildren
-        },
-        zoomToLayer(event) {
-            event.stopPropagation()
-            this.zoomToExtent(this.item.extent)
-        },
-        onItemClick() {
-            this.$emit('clickOnItem', this.item)
-        },
-        startResultPreview() {
-            this.$emit('previewStart', this.item)
-        },
-        stopResultPreview() {
-            this.$emit('previewStop')
-        },
-        /**
-         * As we can have recursive component (see template), we have to bubble up user interaction
-         * events, otherwise the event get stuck mid course and never reaches the parent that can
-         * interact with the store
-         */
-        bubbleEvent(type, payload) {
-            this.$emit(type, payload)
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/webmapviewer-bootstrap-theme';
-@import 'src/modules/menu/scss/menu-items';
-
-.import-list-item {
-    border-bottom: none;
-    .btn {
-        border: none;
-    }
-}
-.import-list-item {
-    background-color: $gray-100;
-}
-.import-list-item.odd {
-    background-color: white;
-}
-.import-list-item-title.selected:hover,
-.import-list-item-title.selected {
-    background-color: $list-item-hover-bg-color;
-}
-
-.import-list-item-title:hover {
-    background-color: $list-item-hover-bg-color;
-}
-.import-list-item-title {
-    @extend .menu-title;
-    cursor: pointer;
-    .import-list-item-active & {
-        color: $primary;
-    }
-    .import-list-item-theme & {
-        border-bottom: 1px solid $gray-400;
-    }
-    .import-list-item-layer & {
-        border-bottom: 1px dashed $gray-400;
-    }
-}
-.import-list-item-name {
-    @extend .menu-name;
-    text-overflow: ellipsis;
-}
-.import-list-item-children {
-    @extend .menu-list;
-    border-top: 1px solid $gray-400;
-    background: white;
-    .import-list-item-title {
-        padding: 0;
-    }
-    .import-list-item {
-        background: white;
-    }
-}
-.zoom-btn:active {
-    transform: scale(1.2);
-}
-.zoom-btn-container.disabled {
-    cursor: not-allowed;
-}
-</style>
diff --git a/src/modules/infobox/components/ImportContentResultList.vue b/src/modules/infobox/components/ImportContentResultList.vue
deleted file mode 100644
index 4cd7cdc8b..000000000
--- a/src/modules/infobox/components/ImportContentResultList.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<template>
-    <div class="d-flex flex-column results-list-container">
-        <div v-if="maxSize">
-            {{ $t('wms_max_size_allowed') }} {{ maxSize.width }} * {{ maxSize.height }}
-        </div>
-        <div class="results-container column-gap-2">
-            <div class="flex-grow-1 results-table-container">
-                <div class="d-flex justify-content-between align-items-center results-header">
-                    <div></div>
-                    <div>{{ $t('title') }}</div>
-                    <div>
-                        <button class="btn" @click="toggleSort">
-                            <FontAwesomeIcon
-                                :icon="
-                                    revertSort
-                                        ? ['fas', 'sort-alpha-up']
-                                        : ['fas', 'sort-alpha-down']
-                                "
-                            />
-                        </button>
-                    </div>
-                </div>
-                <div class="results-list overflow-y-auto" data-cy="import-result-list">
-                    <ImportContentResultItem
-                        v-for="(layer, index) in sortedList"
-                        :key="`${index}-${layer.externalLayerId}`"
-                        :item="layer"
-                        :highlight-id="selectedLayer?.externalLayerId"
-                        class="list-item"
-                        :class="{
-                            odd: (index + 1) % 2,
-                        }"
-                        @click-on-item="onItemClick"
-                        @preview-start="onPreviewStart"
-                        @preview-stop="onPreviewStop"
-                    />
-                </div>
-            </div>
-            <div class="d-flex flex-column flex-grow-1 description-container">
-                <span class="description-title">{{ $t('description') }}</span>
-                <textarea class="description-text" :value="description" readonly></textarea>
-                <div
-                    class="add-btn-container mb-2"
-                    :class="{
-                        disabled: !selectedLayer,
-                    }"
-                >
-                    <button
-                        type="button"
-                        class="btn btn-outline-secondary add-btn mt-1 w-100"
-                        :disabled="!selectedLayer"
-                        data-cy="import-add-layer-button"
-                        @click="onAddLayer"
-                    >
-                        {{ $t('add_layer') }}
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { mapActions } from 'vuex'
-
-import ImportContentResultItem from './ImportContentResultItem.vue'
-
-export default {
-    components: { ImportContentResultItem, FontAwesomeIcon },
-    props: {
-        importedLayers: {
-            type: Array,
-            default: () => [],
-        },
-        maxSize: {
-            type: Object,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            revertSort: false,
-            selectedLayer: undefined,
-            description: '',
-        }
-    },
-    computed: {
-        sortedList() {
-            if (this.importedLayers) {
-                const layers = [...this.importedLayers]
-                let sortedList = layers.sort((layerA, layerB) => {
-                    return layerA.name.localeCompare(layerB.name)
-                })
-                if (this.revertSort) {
-                    sortedList = sortedList.reverse()
-                }
-                return sortedList
-            }
-            return []
-        },
-    },
-    methods: {
-        ...mapActions(['addLayer', 'setPreviewLayer', 'clearPreviewLayer']),
-        toggleSort() {
-            this.revertSort = !this.revertSort
-        },
-        onItemClick(layer) {
-            this.selectedLayer = layer
-            this.description = this.selectedLayer.abstract
-        },
-        onPreviewStart(layer) {
-            this.setPreviewLayer(layer)
-            if (!this.selectedLayer) {
-                this.description = layer.abstract
-            }
-        },
-        onPreviewStop() {
-            this.clearPreviewLayer()
-        },
-        onAddLayer() {
-            if (this.selectedLayer) {
-                this.addLayer(this.selectedLayer)
-            }
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/webmapviewer-bootstrap-theme';
-@import 'src/scss/media-query.mixin';
-
-.results-list-container {
-    height: calc(100% - 130px);
-}
-
-.results-container {
-    display: flex;
-    flex-direction: row;
-    height: calc(100% - 20px);
-}
-
-.results-table-container {
-    border: 1px solid $gray-300;
-    border-radius: 0.375rem;
-    max-width: 50%;
-    .btn {
-        border: none;
-    }
-}
-.results-header {
-    border-bottom: 1px solid $gray-300;
-    font-weight: bold;
-}
-.results-list {
-    height: calc(100% - 40px);
-    .list-item:not(:last-child) {
-        border-bottom: 1px solid $gray-300;
-    }
-}
-.description-container {
-    width: 50%;
-    .description-title {
-        font-weight: bold;
-    }
-    .description-text {
-        height: 100%;
-        resize: none;
-    }
-    .add-btn-container.disabled {
-        cursor: not-allowed;
-    }
-}
-@media (max-width: $breakpoint_tablet) {
-    .results-container {
-        flex-direction: column;
-    }
-    .results-table-container {
-        max-width: 100%;
-        .results-list {
-            height: 150px;
-        }
-    }
-    .description-container {
-        width: 100%;
-
-        .description-text,
-        .description-title {
-            display: none;
-        }
-    }
-}
-</style>
diff --git a/src/modules/menu/components/LayerCatalogueItem.vue b/src/modules/menu/components/LayerCatalogueItem.vue
index 0b6d49fa3..0d5d25452 100644
--- a/src/modules/menu/components/LayerCatalogueItem.vue
+++ b/src/modules/menu/components/LayerCatalogueItem.vue
@@ -4,7 +4,7 @@
  * layers or a single layer.
  */
 
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 // importing directly the vue component, see https://github.com/ivanvermeyen/vue-collapse-transition/issues/5
 import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -14,6 +14,7 @@ import AbstractLayer from '@/api/layers/AbstractLayer.class'
 import GeoAdminGroupOfLayers from '@/api/layers/GeoAdminGroupOfLayers.class'
 import LayerLegendPopup from '@/modules/menu/components/LayerLegendPopup.vue'
 import { ActiveLayerConfig } from '@/utils/layerUtils'
+import log from '@/utils/logging'
 
 const { item, compact, depth } = defineProps({
     item: {
@@ -41,6 +42,8 @@ const activeLayers = computed(() => store.state.layers.activeLayers)
 const openThemesIds = computed(() => store.state.topics.openedTreeThemesIds)
 
 const hasChildren = computed(() => item?.layers?.length > 0)
+const hasLegend = computed(() => canBeAddedToTheMap.value && (!item.isExternal || item.abstract))
+
 /**
  * Flag telling if this layer can be added to the map (so if the UI should include the necessary
  * element to do so)
@@ -73,46 +76,56 @@ function startLayerPreview() {
         store.dispatch('setPreviewLayer', item)
     }
 }
+
+function addLayer() {
+    // if this is a group of a layer then simply add it to the map
+    const matchingActiveLayer = store.getters.getActiveLayerById(item.getID())
+    if (matchingActiveLayer) {
+        store.dispatch('toggleLayerVisibility', matchingActiveLayer)
+    } else if (item.isExternal) {
+        store.dispatch('addLayer', item)
+    } else {
+        store.dispatch('addLayer', new ActiveLayerConfig(item.getID(), true))
+    }
+}
+
 function onItemClick() {
-    if (hasChildren.value) {
+    if (canBeAddedToTheMap.value) {
+        addLayer()
+    } else if (hasChildren.value) {
         showChildren.value = !showChildren.value
-    } else {
-        const matchingActiveLayer = store.getters.getActiveLayerById(item.getID())
-        if (matchingActiveLayer) {
-            store.dispatch('toggleLayerVisibility', matchingActiveLayer)
-        } else {
-            store.dispatch('addLayer', new ActiveLayerConfig(item.getID(), true))
-        }
     }
 }
+
+function onCollapseClick() {
+    showChildren.value = !showChildren.value
+}
+
+function zoomToLayer() {
+    log.debug(`Zoom to layer ${item.name}`, item.extent)
+    store.dispatch('zoomToExtent', item.extent)
+}
 </script>
 
 <template>
     <div class="menu-catalogue-item" data-cy="catalogue-tree-item">
         <div
-            class="menu-catalogue-item-title"
+            class="menu-catalogue-item-title ps-2"
             :class="{ group: hasChildren }"
             :data-cy="`catalogue-tree-item-${item.getID()}`"
             @click="onItemClick"
             @mouseenter="startLayerPreview"
         >
             <button
-                class="btn d-flex align-items-center"
+                v-if="canBeAddedToTheMap"
+                class="btn"
                 :class="{
-                    'text-danger': isPresentInActiveLayers || isCurrentlyHidden,
+                    'text-primary': isPresentInActiveLayers || isCurrentlyHidden,
                     'btn-lg': !compact,
-                    'btn-rounded': hasChildren,
                 }"
+                @click.stop="addLayer()"
             >
-                <FontAwesomeLayers v-if="hasChildren">
-                    <FontAwesomeIcon class="text-secondary" icon="fa-regular fa-circle" />
-                    <FontAwesomeIcon size="xs" :icon="showChildren ? 'minus' : 'plus'" />
-                </FontAwesomeLayers>
                 <FontAwesomeIcon
-                    v-if="canBeAddedToTheMap"
-                    :class="{
-                        'ms-1': hasChildren,
-                    }"
                     :icon="`far ${
                         isPresentInActiveLayers && !isCurrentlyHidden
                             ? 'fa-check-square'
@@ -120,9 +133,29 @@ function onItemClick() {
                     }`"
                 />
             </button>
-            <span class="menu-catalogue-item-name">{{ item.name }}</span>
             <button
-                v-if="canBeAddedToTheMap"
+                v-if="hasChildren"
+                class="btn btn-rounded"
+                :class="{
+                    'text-primary': isPresentInActiveLayers || isCurrentlyHidden,
+                    'btn-lg': !compact,
+                }"
+                @click.stop="onCollapseClick"
+            >
+                <!-- TODO change to the regular icons once we have bought fontawesome fonts -->
+                <FontAwesomeIcon :icon="['fas', showChildren ? 'circle-minus' : 'circle-plus']" />
+            </button>
+
+            <span
+                class="menu-catalogue-item-name"
+                :class="{ 'text-primary': isPresentInActiveLayers || isCurrentlyHidden }"
+                >{{ item.name }}</span
+            >
+            <button v-if="item.extent?.length" class="btn" @click.stop="zoomToLayer">
+                <FontAwesomeIcon icon="fa fa-search-plus" />
+            </button>
+            <button
+                v-if="hasLegend"
                 class="btn"
                 :class="{ 'btn-lg': !compact }"
                 data-cy="catalogue-tree-item-info"
@@ -135,7 +168,7 @@ function onItemClick() {
             <ul
                 v-show="showChildren"
                 class="menu-catalogue-item-children"
-                :class="`ps-${2 + 2 * depth}`"
+                :class="`ps-${2 + depth}`"
             >
                 <LayerCatalogueItem
                     v-for="child in item.layers"
@@ -146,11 +179,7 @@ function onItemClick() {
                 />
             </ul>
         </CollapseTransition>
-        <LayerLegendPopup
-            v-if="showLayerLegend"
-            :layer-id="item.getID()"
-            @close="showLayerLegend = false"
-        />
+        <LayerLegendPopup v-if="showLayerLegend" :layer="item" @close="showLayerLegend = false" />
     </div>
 </template>
 
@@ -177,6 +206,9 @@ function onItemClick() {
         }
     }
 }
+.menu-catalogue-item-title:hover {
+    background-color: $list-item-hover-bg-color;
+}
 .menu-catalogue-item-name {
     @extend .menu-name;
 }
diff --git a/src/modules/menu/components/LayerLegendPopup.vue b/src/modules/menu/components/LayerLegendPopup.vue
index 64cf7b40b..2eb87b52c 100644
--- a/src/modules/menu/components/LayerLegendPopup.vue
+++ b/src/modules/menu/components/LayerLegendPopup.vue
@@ -1,55 +1,85 @@
+<script setup>
+import { computed, ref, toRefs, watch } from 'vue'
+import { onMounted } from 'vue'
+import { useStore } from 'vuex'
+
+import AbstractLayer from '@/api/layers/AbstractLayer.class'
+import { getLayerLegend } from '@/api/layers/layers.api'
+import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
+
+const props = defineProps({
+    layer: {
+        type: AbstractLayer || null,
+        default: null,
+    },
+    layerId: {
+        type: String || null,
+        default: null,
+    },
+    layerName: {
+        type: String || null,
+        default: null,
+    },
+})
+const emit = defineEmits(['close'])
+const store = useStore()
+
+const { layer, layerId, layerName } = toRefs(props)
+const htmlContent = ref('')
+
+const currentLang = computed(() => store.state.i18n.lang)
+const title = computed(() => layer.value?.name ?? layerName.value)
+const body = computed(() => layer.value?.abstract ?? '')
+
+const attributionName = computed(() => layer.value?.attributions[0].name ?? '')
+const attributionUrl = computed(() => layer.value?.attributions[0].url ?? '')
+const isExternal = computed(() => layer.value?.isExternal ?? false)
+
+watch(layer, async (newLayer) => {
+    htmlContent.value = await getLayerLegend(currentLang.value, newLayer.getID())
+})
+
+watch(layerId, async (newLayerId) => {
+    htmlContent.value = await getLayerLegend(currentLang.value, newLayerId)
+})
+
+onMounted(async () => {
+    if (!isExternal.value && layer.value) {
+        htmlContent.value = await getLayerLegend(currentLang.value, layer.value.getID())
+    } else if (!isExternal.value && layerId.value) {
+        htmlContent.value = await getLayerLegend(currentLang.value, layerId.value)
+    }
+})
+</script>
+
 <template>
-    <ModalWithBackdrop :title="$t('metadata_window_title')" :allow-print="true" @close="onClose">
+    <ModalWithBackdrop :title="title" :allow-print="true" fluid @close="emit('close', layerId)">
         <div class="layer-legend" data-cy="layer-legend-popup">
-            <h4 v-if="!content" class="mb-0">
+            <h4 v-if="!isExternal && !htmlContent" class="mb-0">
                 <font-awesome-icon spin :icon="['fa', 'spinner']" />
             </h4>
+            <div v-else-if="isExternal">
+                <div>{{ body }}</div>
+                <div class="mt-2 text-primary text-end">
+                    <span class="me-1">{{ $t('copyright_data') }}</span>
+                    <a v-if="attributionUrl" :href="attributionUrl" target="_blank">{{
+                        attributionName
+                    }}</a>
+                    <span v-else>{{ attributionName }}</span>
+                </div>
+            </div>
             <!-- eslint-disable vue/no-v-html-->
-            <div v-else data-cy="layer-legend" v-html="content"></div>
+            <div v-else data-cy="layer-legend" v-html="htmlContent"></div>
             <!-- eslint-enable vue/no-v-html-->
         </div>
     </ModalWithBackdrop>
 </template>
 
-<script>
-import { mapState } from 'vuex'
-
-import { getLayerLegend } from '@/api/layers/layers.api'
-import ModalWithBackdrop from '@/utils/ModalWithBackdrop.vue'
-
-export default {
-    components: { ModalWithBackdrop },
-    props: {
-        layerId: {
-            type: String,
-            required: true,
-        },
-    },
-    emits: ['close'],
-    data() {
-        return {
-            content: null,
-        }
-    },
-    computed: {
-        ...mapState({
-            currentLang: (state) => state.i18n.lang,
-        }),
-    },
-    async mounted() {
-        this.content = await getLayerLegend(this.currentLang, this.layerId)
-    },
-    methods: {
-        onClose() {
-            this.$emit('close', this.layerId)
-        },
-    },
-}
-</script>
-
 <style lang="scss">
 // No scoping here as we need to apply styles to the markup we included with v-html.
 @import 'src/scss/variables';
+@import 'src/scss/webmapviewer-bootstrap-theme';
+
 $spacing: 8px;
 
 .layer-legend {
@@ -72,7 +102,7 @@ $spacing: 8px;
     padding: $spacing;
     background-color: #eee;
     .bod-title {
-        color: red;
+        color: $primary;
         margin-bottom: $spacing;
     }
     .legend-abstract {
diff --git a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
index 23af77b62..cb0c9551b 100644
--- a/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
+++ b/src/modules/menu/components/activeLayers/MenuActiveLayersList.vue
@@ -18,12 +18,12 @@
                 @toggle-layer-details="onToggleLayerDetails"
                 @opacity-change="onOpacityChange"
                 @order-change="onOrderChange"
-                @show-layer-legend-popup="showLayerLegendForId = layer.getID()"
+                @show-layer-legend-popup="showLayerLegendForLayer = layer"
             />
             <LayerLegendPopup
-                v-if="showLayerLegendForId"
-                :layer-id="showLayerLegendForId"
-                @close="showLayerLegendForId = null"
+                v-if="showLayerLegendForLayer"
+                :layer="showLayerLegendForLayer"
+                @close="showLayerLegendForLayer = null"
             />
         </div>
         <div v-show="activeLayers.length === 0" class="p-1 ps-3" data-cy="menu-section-no-layers">
@@ -53,7 +53,7 @@ export default {
     },
     data() {
         return {
-            showLayerLegendForId: null,
+            showLayerLegendForLayer: null,
             showLayerDetailsForId: null,
         }
     },
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
index af0efbfdb..3831ba839 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ImportCatalogue.vue
@@ -21,7 +21,9 @@ const capabilities = ref([])
 
 function onNewCapabilities(newCapabilities, newWmsMaxSize) {
     log.debug(`New capabilities`, newCapabilities, newWmsMaxSize)
-    capabilities.value = newCapabilities
+    capabilities.value = newCapabilities.sort((layerA, layerB) =>
+        layerA.name.localeCompare(layerB.name, undefined, { sensitivity: 'base' })
+    )
     wmsMaxSize.value = newWmsMaxSize
 }
 
@@ -32,13 +34,12 @@ function onClear() {
 </script>
 
 <template>
-    <div data-cy="import-catalog-content">
-        <ProviderUrl @capabilities:parsed="onNewCapabilities" @capabilities:clear="onClear" />
-        <!-- TODO display of the result-->
+    <div class="ps-2" data-cy="import-catalog-content">
+        <ProviderUrl @capabilities:parsed="onNewCapabilities" @capabilities:cleared="onClear" />
         <div v-if="wmsMaxSize">
             {{ i18n.t('wms_max_size_allowed') }} {{ wmsMaxSize.width }} * {{ wmsMaxSize.height }}
         </div>
-        <LayerCatalogue :layer-catalogue="capabilities" :compact="compact" />
+        <LayerCatalogue class="mb-2" :layer-catalogue="capabilities" :compact="compact" />
     </div>
 </template>
 
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue
index 7167ff161..929ce8d09 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue
@@ -49,7 +49,7 @@ defineExpose({ goToFirst })
 <template>
     <div
         v-show="showProviders"
-        class="providers-list-container shadow border rounded-0 rounded-bottom overflow-auto"
+        class="providers-list-container shadow border rounded-bottom overflow-auto"
     >
         <div ref="providerList" class="providers-list" data-cy="import-provider-list">
             <div
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
index 2391e5073..ffa93e994 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/ProviderUrl.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import ProviderList from '@/modules/menu/components/advancedTools/ImportCatalogue/ProviderList.vue'
 import {
@@ -8,12 +9,12 @@ import {
     useCapabilities,
 } from '@/modules/menu/components/advancedTools/ImportCatalogue/useCapabilities'
 import { useProviders } from '@/modules/menu/components/advancedTools/ImportCatalogue/useProviders'
-import log from '@/utils/logging'
 import { isValidUrl } from '@/utils/utils'
 
-const emit = defineEmits(['capabilities:parsed', 'capabilities:clear'])
+const emit = defineEmits(['capabilities:parsed', 'capabilities:cleared'])
 
 const i18n = useI18n()
+const store = useStore()
 
 // Reactive data
 const url = ref('')
@@ -21,6 +22,7 @@ const capabilitiesParsed = ref(false)
 const errorMessage = ref(null)
 const providerList = ref(null)
 const isLoading = ref(false)
+const providerIntput = ref(null)
 
 const { providers, showProviders, toggleProviders } = useProviders(url)
 const { loadCapabilities } = useCapabilities(url)
@@ -29,6 +31,12 @@ const { loadCapabilities } = useCapabilities(url)
 const isValid = computed(() => !errorMessage.value && capabilitiesParsed.value)
 const isInvalid = computed(() => errorMessage.value)
 const connectButtonKey = computed(() => (isLoading.value ? 'loading' : 'connect'))
+const lang = computed(() => store.state.i18n.lang)
+
+watch(lang, () => {
+    // When the language changes re-connect to reload the translated capabilities
+    connect()
+})
 
 // Methods
 function onUrlChange(_event) {
@@ -37,21 +45,23 @@ function onUrlChange(_event) {
 }
 
 function validateUrl() {
-    errorMessage.value = null
-    if (!url.value) {
-        errorMessage.value = 'no_url'
-    } else if (!isValidUrl(url.value)) {
+    if (url.value.length && !isValidUrl(url.value)) {
         errorMessage.value = 'invalid_url'
     }
     return !errorMessage.value
 }
 
-function clearUrl() {
+function clearUrl(event) {
     capabilitiesParsed.value = false
     url.value = ''
     showProviders.value = false
     errorMessage.value = null
-    emit('capabilities:clear')
+    if (event.screenX !== 0 || event.screenY !== 0) {
+        // only focus on the provider input when the clear button has been clicked
+        // and when it is a real click event (not a key stroke)
+        providerIntput.value.focus()
+    }
+    emit('capabilities:cleared')
 }
 
 function chooseProvider(providerUrl) {
@@ -73,7 +83,6 @@ async function connect() {
         const { layers, wmsMaxSize } = await loadCapabilities()
         isLoading.value = false
         capabilitiesParsed.value = true
-        log.debug(`load capabilities successful`, layers, wmsMaxSize)
         emit('capabilities:parsed', layers, wmsMaxSize)
     } catch (error) {
         isLoading.value = false
@@ -85,15 +94,25 @@ async function connect() {
         }
     }
 }
+
+function onToggleProviders(event) {
+    toggleProviders()
+    if (showProviders.value && (event.screenX !== 0 || event.screenY !== 0)) {
+        // only focus on the provider input when the provider list has been opened
+        // and when it is a real click event (not a key stroke)
+        providerIntput.value.focus()
+    }
+}
 </script>
 
 <template>
-    <div v-click-outside="() => (showProviders = false)" class="container mb-2 pe-0">
-        <form class="input-group input-group-sm needs-validation">
+    <div v-click-outside="() => (showProviders = false)" class="mb-2 pe-0">
+        <form class="input-group input-group-sm has-validation">
             <input
+                ref="providerIntput"
                 v-model="url"
                 type="text"
-                class="form-control text-truncate"
+                class="form-control text-truncate rounded-end-0"
                 :class="{
                     'is-valid': isValid,
                     'is-invalid': isInvalid,
@@ -102,7 +121,7 @@ async function connect() {
                 :disabled="isLoading"
                 :aria-label="i18n.t('import_maps_url_placeholder')"
                 :placeholder="i18n.t('import_maps_url_placeholder')"
-                aria-describedby="urlInputControl urlInvalidMessageFeedback"
+                aria-describedby="urlInputControlBtnGrp urlToggleProviderButton urlClearButton urlConnectButton urlInvalidMessageFeedback"
                 data-cy="import-catalogue-input"
                 @input="onUrlChange"
                 @focusin="showProviders = true"
@@ -116,22 +135,26 @@ async function connect() {
                 class="input-group-append btn-group btn-group-sm"
                 role="group"
                 aria-label="Input control"
-                aria-describedby="urlInputControl urlClearButton connectButton"
+                aria-describedby="urlToggleProviderButton urlClearButton urlConnectButton"
             >
+                <!-- Toggle Provider button -->
                 <button
-                    id="urlInputControl"
-                    class="btn btn-outline-secondary rounded-0"
+                    id="urlToggleProviderButton"
+                    class="btn btn-outline-secondary rounded-start-0"
+                    :class="{ 'url-input-dropdown-open': showProviders }"
                     :disabled="isLoading"
                     type="button"
                     data-cy="import-catalogue-providers-toggle"
-                    @click="toggleProviders"
+                    @click="onToggleProviders"
                 >
                     <FontAwesomeIcon :icon="showProviders ? 'caret-up' : 'caret-down'" />
                 </button>
+                <!-- Clear button -->
                 <button
                     v-if="url?.length > 0"
                     id="urlClearButton"
                     class="btn btn-outline-secondary"
+                    :class="{ 'url-input-dropdown-open': showProviders }"
                     :disabled="isLoading"
                     type="button"
                     data-cy="import-input-clear"
@@ -139,8 +162,14 @@ async function connect() {
                 >
                     <FontAwesomeIcon :icon="['fas', 'times-circle']" />
                 </button>
+                <!-- Connect button -->
                 <button
-                    id="connectButton"
+                    v-if="
+                        // We use v-if instead of v-show here in order to have bootstrap handling
+                        // the rounded corner correctly
+                        !capabilitiesParsed && url.length && isValidUrl(url)
+                    "
+                    id="urlConnectButton"
                     type="button"
                     class="btn btn-outline-secondary"
                     :class="{ 'url-input-dropdown-open': showProviders }"
@@ -158,7 +187,7 @@ async function connect() {
                 </button>
             </div>
             <div
-                v-if="errorMessage && !showProviders"
+                v-if="isInvalid && !showProviders"
                 id="urlInvalidMessageFeedback"
                 class="invalid-feedback"
             >
@@ -166,6 +195,7 @@ async function connect() {
             </div>
         </form>
         <ProviderList
+            id="urlProvidersList"
             ref="providerList"
             :providers="providers"
             :show-providers="showProviders"
diff --git a/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json b/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
index 5186eef71..8a7671e9d 100644
--- a/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
+++ b/src/modules/menu/components/advancedTools/ImportCatalogue/external-providers.json
@@ -308,6 +308,7 @@
     "https://wms.zh.ch/WaldWNBZHWMS",
     "https://wms.zh.ch/WildkarteZHWMS",
     "https://wms.zh.ch/ZVVZHWMS",
+    "https://wmts.geo.admin.ch/1.0.0/WMTSCapabilities.xml",
     "https://wmts.geo.bs.ch/1.0.0/WMTSCapabilities.xml",
     "https://wmts.geo.ti.ch/wmts/1.0.0/WMTSCapabilities.xml",
     "https://www.basemap.at/wmts/1.0.0/WMTSCapabilities.xml",
diff --git a/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue b/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue
index 4213bac14..446eab390 100644
--- a/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue
+++ b/src/modules/menu/components/advancedTools/MenuAdvancedToolsList.vue
@@ -8,7 +8,7 @@
             data-cy="menu-advanced-tools-import-catalogue"
             @toggle-menu="onToggleImportCatalogue"
         >
-            <ImportCatalogue v-if="showImportCatalogue" :compact="compact" />
+            <ImportCatalogue v-show="showImportCatalogue" :compact="compact" />
         </MenuAdvancedToolsListItem>
         <MenuAdvancedToolsListItem
             :is-selected="showImportFile"
diff --git a/src/modules/menu/components/search/SearchResultList.vue b/src/modules/menu/components/search/SearchResultList.vue
index 289ffc076..b02df1325 100644
--- a/src/modules/menu/components/search/SearchResultList.vue
+++ b/src/modules/menu/components/search/SearchResultList.vue
@@ -35,15 +35,16 @@
                         :key="index"
                         :index="index"
                         :entry="layer"
-                        @show-layer-legend-popup="showLayerLegendForId = layer.layerId"
+                        @show-layer-legend-popup="showLayerLegend(layer)"
                     />
                 </SearchResultCategory>
             </div>
         </div>
         <LayerLegendPopup
-            v-if="showLayerLegendForId"
-            :layer-id="showLayerLegendForId"
-            @close="showLayerLegendForId = null"
+            v-if="layerLegendId"
+            :layer-id="layerLegendId"
+            :layer-name="layerLegendName"
+            @close="hideLayerLegend()"
         />
     </div>
 </template>
@@ -65,7 +66,8 @@ export default {
     emits: ['close'],
     data() {
         return {
-            showLayerLegendForId: null,
+            layerLegendId: null,
+            layerLegendName: null,
         }
     },
     computed: {
@@ -74,6 +76,17 @@ export default {
         }),
         ...mapGetters(['isPhoneMode', 'hasDevSiteWarning']),
     },
+    methods: {
+        showLayerLegend(layerResult) {
+            this.layerLegendId = layerResult.layerId
+            // NOTE: the service search wsgi is setting the title in <b></b> tags
+            this.layerLegendName = layerResult.title.replace(/<[^>]*>?/gm, '')
+        },
+        hideLayerLegend() {
+            this.layerLegendId = null
+            this.layerLegendName = null
+        },
+    },
 }
 </script>
 
diff --git a/src/setup-fontawesome.js b/src/setup-fontawesome.js
index c6df66e26..ca7bf916b 100644
--- a/src/setup-fontawesome.js
+++ b/src/setup-fontawesome.js
@@ -23,6 +23,8 @@ import {
     faChevronUp,
     faCircle,
     faCircleChevronRight,
+    faCircleMinus,
+    faCirclePlus,
     faClockRotateLeft,
     faCog,
     faCube,
@@ -116,6 +118,8 @@ library.add(
     faXmark,
     faSortAlphaUp,
     faSortAlphaDown,
+    faCirclePlus,
+    faCircleMinus,
     // Regular
     faCheckSquare,
     faClock,
diff --git a/src/utils/ModalWithBackdrop.vue b/src/utils/ModalWithBackdrop.vue
index 24d2c5c49..b8de653e8 100644
--- a/src/utils/ModalWithBackdrop.vue
+++ b/src/utils/ModalWithBackdrop.vue
@@ -16,7 +16,9 @@
                         class="card-header d-flex align-middle"
                         :class="{ 'bg-primary text-white border-primary': headerPrimary }"
                     >
-                        <span v-if="title" class="flex-grow-1 text-start">{{ title }}</span>
+                        <span v-if="title" class="flex-grow-1 text-start text-truncate">{{
+                            title
+                        }}</span>
                         <button
                             v-if="allowPrint"
                             class="btn btn-sm"
diff --git a/tests/e2e-cypress/integration/importTool.cy.js b/tests/e2e-cypress/integration/importTool.cy.js
index b7de49509..514e54bd7 100644
--- a/tests/e2e-cypress/integration/importTool.cy.js
+++ b/tests/e2e-cypress/integration/importTool.cy.js
@@ -69,7 +69,6 @@ describe('The Import Maps Tool', () => {
             .children()
             .contains('https://wms.geo.admin.ch')
             .click()
-        cy.get('[data-cy="import-connect-button"]').click()
         cy.wait('@wms-get-capabilities')
         // TODO test add layer
         // cy.get('[data-cy="import-add-layer-button"]').scrollIntoView()