diff --git a/package.json b/package.json
index 098de7c94..b2c5eecab 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "private": true,
     "scripts": {
         "start": "npm run dev",
-        "dev": "vite --port 8080",
+        "dev": "vite --port 8080 --host --cors",
         "preview": "npm run build:prod && vite preview --port 8080 --outDir dist/production",
         "preview:dev": "npm run build:dev && vite preview --port 8080 --outDir dist/development",
         "preview:int": "npm run build:int && vite preview --port 8080 --outDir dist/integration",
diff --git a/src/api/__tests__/features.api.spec.js b/src/api/__tests__/features.api.spec.js
index b2cda19f4..8bf8022fb 100644
--- a/src/api/__tests__/features.api.spec.js
+++ b/src/api/__tests__/features.api.spec.js
@@ -47,7 +47,7 @@ describe('Validate features api', () => {
             expect(reconstructed.description).to.be.equal(testObject.description)
             expect(reconstructed.icon).to.be.equal(testObject.icon)
 
-            /* If theses classes are extended to save more data than what is serialized, these tests
+            /* If these classes are extended to save more data than what is serialized, these tests
             will need to be changed*/
             expect(reconstructed.textColor).to.deep.equal(testObject.textColor)
             expect(reconstructed.textSize).to.deep.equal(testObject.textSize)
diff --git a/src/api/features.api.js b/src/api/features.api.js
index 8b39f178b..ed9af06fe 100644
--- a/src/api/features.api.js
+++ b/src/api/features.api.js
@@ -1,4 +1,4 @@
-import { Icon } from '@/api/icon.api'
+import { DrawingIcon } from '@/api/icon.api'
 import { API_BASE_URL } from '@/config'
 import { CoordinateSystems } from '@/utils/coordinateUtils'
 import EventEmitter from '@/utils/EventEmitter.class'
@@ -10,15 +10,17 @@ import {
     MEDIUM,
     RED,
 } from '@/utils/featureStyleUtils'
+import { getEditableFeatureFromLegacyKmlFeature } from '@/utils/legacyKmlUtils'
 import log from '@/utils/logging'
 import axios from 'axios'
 import { Icon as openlayersIcon } from 'ol/style'
+import Feature from 'ol/Feature'
 import { featureStyleFunction } from '@/modules/drawing/lib/style'
 import { GeodesicGeometries } from '@/utils/geodesicManager'
 /**
  * Representation of a feature that can be selected by the user on the map. This feature can be
- * edited if the corresponding flag says so (it will then fires "change" events any time one
- * property of the instance has changed)
+ * edited if the corresponding flag says so (it will then fire "change" events any time one property
+ * of the instance has changed)
  *
  * This will then be specialized in (at least) two flavor of features, layer feature (coming from
  * our backend, with extra information attached) and drawing feature (that can be modified by the
@@ -26,7 +28,7 @@ import { GeodesicGeometries } from '@/utils/geodesicManager'
  *
  * @abstract
  */
-export class Feature extends EventEmitter {
+export class SelectableFeature extends EventEmitter {
     /**
      * @param {String | Number} id Unique identifier for this feature (unique in the context it
      *   comes from, not for the whole app)
@@ -42,9 +44,9 @@ export class Feature extends EventEmitter {
         super()
         this._id = id
         // using the setter for coordinate (see below)
-        this._coordinates = coordinates
-        this._title = title
-        this._description = description
+        this.coordinates = coordinates
+        this.title = title
+        this.description = description
         this._isEditable = !!isEditable
         this._isDragged = false
     }
@@ -95,6 +97,10 @@ export class Feature extends EventEmitter {
                 this._coordinates = newCoordinates
             }
             this.emitChangeEvent('coordinates')
+        } else if (newCoordinates === null) {
+            this._coordinates = newCoordinates
+        } else {
+            log.error(`feature.api new coordinates is not an array`, newCoordinates)
         }
     }
     get lastCoordinate() {
@@ -132,12 +138,12 @@ export const EditableFeatureTypes = {
 }
 
 /** Describe a feature that can be edited by the user, such as feature from the current drawing */
-export class EditableFeature extends Feature {
+export class EditableFeature extends SelectableFeature {
     /**
      * @param {String | Number} id Unique identifier for this feature (unique in the context it
      *   comes from, not for the whole app)
-     * @param {Number[][]} coordinates [[x,y],[x2.y2],...] coordinates of this feature in EPSG:3857
-     *   (metric mercator)
+     * @param {Number[][]} coordinates [[x,y],[x2.y2],...] or [x,y] if point geometry coordinates of
+     *   this feature in EPSG:3857 (metric mercator)
      * @param {String} title Title of this feature
      * @param {String} description A description of this feature, can not be HTML content (only
      *   text)
@@ -145,7 +151,7 @@ export class EditableFeature extends Feature {
      * @param {FeatureStyleColor} textColor Color for the text of this feature
      * @param {FeatureStyleSize} textSize Size of the text for this feature
      * @param {FeatureStyleColor} fillColor Color of the icon (if defined)
-     * @param {Icon} icon Icon that will be covering this feature, can be null
+     * @param {DrawingIcon} icon Icon that will be covering this feature, can be null
      * @param {FeatureStyleSize} iconSize Size of the icon (if defined) that will be covering this
      *   feature
      */
@@ -196,7 +202,7 @@ export class EditableFeature extends Feature {
     /**
      * This function returns a stripped down version of this object ready to be serialized.
      *
-     * @returns The version of the object that can be serialized
+     * @returns {Object} The version of the object that can be serialized
      */
     getStrippedObject() {
         /* Warning: Changing this method will break the compability of KML files */
@@ -217,7 +223,7 @@ export class EditableFeature extends Feature {
     /**
      * Regenerates the full version of an editable feature given a stripped version.
      *
-     * @param {stripped EditableFeature} o A stripped down version of the editable Feature
+     * @param {Object} o A stripped down version of the editable Feature
      * @returns The full version of the editable Feature
      */
     static recreateObject(o) {
@@ -230,28 +236,43 @@ export class EditableFeature extends Feature {
             FeatureStyleColor.recreateObject(o.textColor),
             FeatureStyleSize.recreateObject(o.textSize),
             FeatureStyleColor.recreateObject(o.fillColor),
-            o.icon ? Icon.recreateObject(o.icon) : null,
+            o.icon ? DrawingIcon.recreateObject(o.icon) : null,
             FeatureStyleSize.recreateObject(o.iconSize)
         )
     }
 
     /**
      * This method deserializes an editable feature that is stored in the extra properties of an
-     * openlayers feature. It then recreates a fully functional olFeature with the correct styling.
+     * openlayers feature. If there is no editable feature to deserialize (e.g. in the case of a kml
+     * that was generated with mf-geoadmin3), the editable feature is instead reconstructed with the
+     * styling information stored in the official '<style>' tag of the kml. It then recreates a
+     * fully functional olFeature with the correct styling.
      *
-     * @param {openlayersFeature} olFeature
+     * @param {Feature} olFeature An olFeature that was just deserialized with
+     * @param {DrawingIconSet[]} availableIconSets {@link ol/format/KML}.
      */
-    static deserialize(olFeature) {
-        const editableFeature = this.recreateObject(JSON.parse(olFeature.get('editableFeature')))
-        olFeature.set('editableFeature', editableFeature)
-        olFeature.setStyle(featureStyleFunction)
-        if (editableFeature.isLineOrMeasure()) {
-            /* The featureStyleFunction uses the geometries calculated in the geodesic object
-            if present. The lines connecting the vertices of the geometry will appear
-            geodesic (follow the shortest path) in this case instead of linear (be straight on
-            the screen)  */
-            olFeature.geodesic = new GeodesicGeometries(olFeature)
+    static deserialize(olFeature, availableIconSets) {
+        const serializedEditableFeature = olFeature.get('editableFeature')
+        // in case we are deserializing a legacy KML (one made with mf-geoadmin3) the editableFeature object
+        // will not be present, and we will have to rebuild one from the styles tags in the KML
+        let editableFeature = null
+        if (!serializedEditableFeature) {
+            editableFeature = getEditableFeatureFromLegacyKmlFeature(olFeature, availableIconSets)
+        } else {
+            editableFeature = this.recreateObject(JSON.parse(serializedEditableFeature))
+        }
+        if (editableFeature) {
+            olFeature.set('editableFeature', editableFeature)
+            olFeature.setStyle(featureStyleFunction)
+            if (editableFeature.isLineOrMeasure()) {
+                /* The featureStyleFunction uses the geometries calculated in the geodesic object
+                if present. The lines connecting the vertices of the geometry will appear
+                geodesic (follow the shortest path) in this case instead of linear (be straight on
+                the screen)  */
+                olFeature.geodesic = new GeodesicGeometries(olFeature)
+            }
         }
+        return editableFeature
     }
 
     isLineOrMeasure() {
@@ -308,11 +329,11 @@ export class EditableFeature extends Feature {
         return this._textSize?.font
     }
 
-    /** @returns {Icon | null} */
+    /** @returns {DrawingIcon | null} */
     get icon() {
         return this._icon
     }
-    /** @param newIcon {Icon} */
+    /** @param newIcon {DrawingIcon} */
     set icon(newIcon) {
         this._icon = newIcon
         this.emitStylingChangeEvent('icon')
@@ -389,7 +410,7 @@ export class EditableFeature extends Feature {
  * Describe a feature from the backend, so a feature linked to a backend layer (see
  * {@link getFeature}) below
  */
-export class LayerFeature extends Feature {
+export class LayerFeature extends SelectableFeature {
     /**
      * @param {GeoAdminLayer} layer The layer in which this feature belongs
      * @param {Number | String} id The unique feature ID in the layer it is part of
diff --git a/src/api/icon.api.js b/src/api/icon.api.js
index 0778ab12a..25d645e80 100644
--- a/src/api/icon.api.js
+++ b/src/api/icon.api.js
@@ -8,7 +8,7 @@ import axios from 'axios'
  *
  * Some sets are colorable, where other aren't
  */
-export class IconSet {
+export class DrawingIconSet {
     /**
      * @param {String} name Name of this set in the backend, lower cased
      * @param {Boolean} isColorable Tells if this set's icons can be colored differently (if the
@@ -52,14 +52,14 @@ export class IconSet {
         return this._templateURL
     }
 
-    /** @returns {Icon[]} List of all icons from this icon set */
+    /** @returns {DrawingIcon[]} List of all icons from this icon set */
     get icons() {
         return [...this._icons]
     }
     /**
      * Overwrite all icons of this set with the new ones
      *
-     * @param {Icon[]} newIcons
+     * @param {DrawingIcon[]} newIcons
      */
     set icons(newIcons) {
         this._icons = [...newIcons]
@@ -71,12 +71,12 @@ export class IconSet {
  *
  * Each icon has a specific anchor (an offset from the coordinate it is linked to)
  */
-export class Icon {
+export class DrawingIcon {
     /**
      * @param {String} name Name of this icon in the backend (lower cased)
      * @param {String} imageURL URL to the image of this icon itself (with default size and color)
      * @param {String} imageTemplateURL URL template where size and color can be defined (by
-     *   replacing {icon_scale} and {{r},{g},{b}} respectively, see {@link Icon.generateURL})
+     *   replacing {icon_scale} and {{r},{g},{b}} respectively, see {@link DrawingIcon.generateURL})
      * @param {String} iconSetName Name of the icon set in which belongs this icon (an icon can only
      *   belong to one icon set)
      * @param {Number[]} anchor Offset to apply to this icon when placed on a coordinate ([x,y]
@@ -102,7 +102,7 @@ export class Icon {
     }
 
     static recreateObject(o) {
-        return new Icon(o.name, o.imageURL, o.imageTemplateURL, o.iconSetName, o.anchor)
+        return new DrawingIcon(o.name, o.imageURL, o.imageTemplateURL, o.iconSetName, o.anchor)
     }
 
     /** @returns {String} Name of this icon in the backend (lower cased) */
@@ -117,7 +117,7 @@ export class Icon {
 
     /**
      * @returns {String} URL template where size and color can be defined (by replacing {icon_scale}
-     *   and {{r},{g},{b}} respectively, see {@link Icon.generateURL})
+     *   and {{r},{g},{b}} respectively, see {@link DrawingIcon.generateURL})
      */
     get imageTemplateURL() {
         return this._imageTemplateURL
@@ -129,8 +129,8 @@ export class Icon {
     }
 
     /**
-     * @returns {String} Name of the {@link IconSet} in which belongs this icon (an icon can only
-     *   belong to one icon set)
+     * @returns {String} Name of the {@link DrawingIconSet} in which belongs this icon (an icon can
+     *   only belong to one icon set)
      */
     get iconSetName() {
         return this._iconSetName
@@ -171,14 +171,14 @@ export class Icon {
  * Also retrieve all available icons for those icon sets (so no need to do any additional request to
  * the backend after that)
  *
- * @returns {Promise<IconSet[]>}
+ * @returns {Promise<DrawingIconSet[]>}
  */
 export async function loadAllIconSetsFromBackend() {
     const sets = []
     try {
         const rawSets = (await axios.get(`${API_SERVICES_BASE_URL}icons/sets`)).data.items
         for (const rawSet of rawSets) {
-            const iconSet = new IconSet(
+            const iconSet = new DrawingIconSet(
                 rawSet.name,
                 rawSet.colorable,
                 rawSet.icons_url,
@@ -198,7 +198,7 @@ export async function loadAllIconSetsFromBackend() {
 /**
  * Loads all icons from an icon set and attach them to the icon set
  *
- * @param {IconSet} iconSet
+ * @param {DrawingIconSet} iconSet
  * @returns {Promise} Promise resolving when all icons have been attached to the icon set
  */
 function loadIconsForIconSet(iconSet) {
@@ -207,7 +207,7 @@ function loadIconsForIconSet(iconSet) {
         .then((rawIcons) => {
             iconSet.icons = rawIcons.data.items.map(
                 (rawIcon) =>
-                    new Icon(
+                    new DrawingIcon(
                         rawIcon.name,
                         rawIcon.url,
                         rawIcon.template_url,
diff --git a/src/config.js b/src/config.js
index 83bbe2dfe..c540df432 100644
--- a/src/config.js
+++ b/src/config.js
@@ -15,12 +15,6 @@ export const ENVIRONMENT = VITE_ENVIRONMENT
  */
 export const IS_TESTING_WITH_CYPRESS = !!window.Cypress
 
-/**
- * Flag that tells if users should be warned that it is a development site. Also used to hide
- * development specific features in production (like the app version)
- */
-export const DEV_SITE_WARNING = !IS_TESTING_WITH_CYPRESS && ENVIRONMENT !== 'production'
-
 /**
  * Current app version (from package.json)
  *
@@ -253,3 +247,19 @@ export const DRAWING_HIT_TOLERANCE = 6
 export const VECTOR_TILES_STYLE_ID = 'ch.swisstopo.leichte-basiskarte_world.vt'
 
 export const VECTOR_TILES_STYLE_URL = `https://vectortiles.geo.admin.ch/styles/${VECTOR_TILES_STYLE_ID}/style.json`
+
+/**
+ * Display a big developpment banner on all but these hosts.
+ *
+ * @type {String[]}
+ */
+ export const NO_WARNING_BANNER_HOSTNAMES = ['test.map.geo.admin.ch', 'map.geo.admin.ch']
+
+ /**
+ * Display a warning ribbon ('TEST') on the top-left (mobile) or bottom-left (desktop)
+ * corner on all these hosts.
+ *
+ * @type {String[]}
+ */
+
+ export const WARNING_RIBBON_HOSTNAMES = ['test.map.geo.admin.ch']
diff --git a/src/modules/drawing/DrawingModule.vue b/src/modules/drawing/DrawingModule.vue
index 6e108e19b..809969a75 100644
--- a/src/modules/drawing/DrawingModule.vue
+++ b/src/modules/drawing/DrawingModule.vue
@@ -398,7 +398,7 @@ export default {
                 featureProjection: layer.projection,
             })
             features.forEach((olFeature) => {
-                EditableFeature.deserialize(olFeature)
+                EditableFeature.deserialize(olFeature, this.availableIconSets)
             })
             this.drawingLayer.getSource().addFeatures(features)
         },
diff --git a/src/modules/drawing/components/DrawingToolbox.vue b/src/modules/drawing/components/DrawingToolbox.vue
index 13d39db11..7eb554093 100644
--- a/src/modules/drawing/components/DrawingToolbox.vue
+++ b/src/modules/drawing/components/DrawingToolbox.vue
@@ -2,7 +2,7 @@
     <teleport v-if="readyForTeleport" to=".drawing-toolbox-in-menu">
         <DrawingHeader v-if="isDesktopMode" @close="emitCloseEvent" />
         <div :class="[{ 'drawing-toolbox-closed': !drawMenuOpen }, 'drawing-toolbox']">
-            <div class="card text-center drawing-toolbox-content">
+            <div class="card text-center drawing-toolbox-content rounded-0">
                 <div class="card-body position-relative">
                     <ButtonWithIcon
                         class="drawing-toolbox-close-button"
@@ -77,17 +77,13 @@
         <ModalWithBackdrop
             v-if="showClearConfirmationModal"
             show-confirmation-buttons
+            fluid
             data-cy="drawing-toolbox-delete-confirmation-modal"
             @close="onCloseClearConfirmation"
         >
             {{ $t('confirm_remove_all_features') }}
         </ModalWithBackdrop>
-        <ModalWithBackdrop
-            v-if="showShareModal"
-            :title="$t('share')"
-            data-cy="drawing-toolbox-share-modal"
-            @close="onCloseShare"
-        >
+        <ModalWithBackdrop v-if="showShareModal" fluid :title="$t('share')" @close="onCloseShare">
             <ShareForm :kml-ids="kmlIds" />
         </ModalWithBackdrop>
     </teleport>
diff --git a/src/modules/drawing/components/DrawingTooltip.vue b/src/modules/drawing/components/DrawingTooltip.vue
index 68874b871..0f71017b1 100644
--- a/src/modules/drawing/components/DrawingTooltip.vue
+++ b/src/modules/drawing/components/DrawingTooltip.vue
@@ -89,9 +89,7 @@ export default {
 
             const hasFeatureSelected = this.selectedFeatures.length > 0
             // we only keep track of the first feature's info (the one on top of the stack)
-            const selectedFeatureId = hasFeatureSelected
-                ? this.selectedFeatures[0]?.id.replace('drawing_feature_', '')
-                : null
+            const selectedFeatureId = hasFeatureSelected ? this.selectedFeatures[0]?.id : null
             let featureUnderCursor
 
             map.forEachFeatureAtPixel(
diff --git a/src/modules/drawing/components/SharePopup.vue b/src/modules/drawing/components/SharePopup.vue
index e211b77f3..fec4db3ed 100644
--- a/src/modules/drawing/components/SharePopup.vue
+++ b/src/modules/drawing/components/SharePopup.vue
@@ -2,48 +2,44 @@
     <div class="ga-share">
         <div class="form-group">
             <label>{{ $t('draw_share_user_link') }}:</label>
-            <div class="input-group input-group-sm mb-3">
+            <div class="input-group input-group mb-3 share-link-input">
                 <input
                     type="text"
                     class="form-control"
-                    :value="fileUrl"
+                    :value="shareUrl"
                     readonly
                     @focus="$event.target.select()"
-                    @click="copyUrl(false)"
+                    @click="copyShareUrl(false)"
                 />
-                <div class="input-group-append">
-                    <button
-                        class="btn btn-outline-secondary"
-                        type="button"
-                        data-cy="drawing-share-normal-link"
-                        @click="copyUrl(false)"
-                    >
-                        {{ fileUrlCopied ? $t('copy_success') : $t('copy_url') }}
-                    </button>
-                </div>
+                <button
+                    class="btn btn-outline-secondary"
+                    type="button"
+                    data-cy="drawing-share-normal-link"
+                    @click="copyShareUrl(false)"
+                >
+                    {{ fileUrlCopied ? $t('copy_success') : $t('copy_url') }}
+                </button>
             </div>
         </div>
         <div v-if="adminUrl" class="form-group">
             <label>{{ $t('draw_share_admin_link') }}:</label>
-            <div class="input-group input-group-sm mb-3">
+            <div class="input-group input-group mb-3 share-link-input">
                 <input
                     type="text"
                     class="form-control"
-                    :value="adminUrl"
+                    :value="adminShareUrl"
                     readonly
                     @focus="$event.target.select()"
-                    @click="copyUrl(true)"
+                    @click="copyAdminShareUrl()"
                 />
-                <div class="input-group-append">
-                    <button
-                        class="btn btn-outline-secondary"
-                        type="button"
-                        data-cy="drawing-share-admin-link"
-                        @click="copyUrl(true)"
-                    >
-                        {{ adminUrlCopied ? $t('copy_success') : $t('copy_url') }}
-                    </button>
-                </div>
+                <button
+                    class="btn btn-outline-secondary"
+                    type="button"
+                    data-cy="drawing-share-admin-link"
+                    @click="copyAdminShareUrl()"
+                >
+                    {{ adminUrlCopied ? $t('copy_success') : $t('copy_url') }}
+                </button>
             </div>
         </div>
     </div>
@@ -51,6 +47,8 @@
 
 <script>
 import { getKmlUrl } from '@/api/files.api'
+import { createShortLink } from '@/api/shortlink.api'
+import log from '@/utils/logging'
 
 export default {
     props: {
@@ -63,6 +61,8 @@ export default {
         return {
             adminUrlCopied: false,
             fileUrlCopied: false,
+            shareUrl: ' ',
+            adminShareUrl: ' ',
         }
     },
     computed: {
@@ -80,28 +80,63 @@ export default {
                     this.kmlIds.fileId
                 )}|${this.$t('draw_layer_label')}@adminId=${this.kmlIds.adminId}`
             }
-            // if no adminID is availble don't show the edit share link.
+            // if no adminID is available don't show the edit share link.
             return null
         },
     },
+    watch: {
+        kmlIds() {
+            this.updateShareUrl()
+            this.updateAdminShareUrl()
+        },
+    },
+    created() {
+        this.updateShareUrl()
+        this.updateAdminShareUrl()
+    },
     unmounted() {
         clearTimeout(this.adminTimeout)
         clearTimeout(this.fileTimeout)
     },
     methods: {
-        async copyUrl(adminUrl = false) {
-            if (adminUrl) {
-                await navigator.clipboard.writeText(this.adminUrl)
-                this.adminUrlCopied = true
-                this.adminTimeout = setTimeout(() => {
-                    this.adminUrlCopied = false
-                }, 5000)
-            } else {
-                await navigator.clipboard.writeText(this.fileUrl)
+        async copyShareUrl() {
+            try {
+                await navigator.clipboard.writeText(this.shareUrl)
                 this.fileUrlCopied = true
                 this.fileTimeout = setTimeout(() => {
                     this.fileUrlCopied = false
                 }, 5000)
+            } catch (error) {
+                log.error(`Failed to copy: `, error)
+            }
+        },
+        async copyAdminShareUrl() {
+            try {
+                await navigator.clipboard.writeText(this.adminShareUrl)
+                this.adminUrlCopied = true
+                this.adminTimeout = setTimeout(() => {
+                    this.adminUrlCopied = false
+                }, 5000)
+            } catch (error) {
+                log.error(`Failed to copy: `, error)
+            }
+        },
+        async updateShareUrl() {
+            try {
+                this.shareUrl = await createShortLink(this.fileUrl)
+            } catch (error) {
+                // Fallback to normal url
+                this.shareUrl = this.fileUrl
+            }
+        },
+        async updateAdminShareUrl() {
+            if (this.adminUrl) {
+                try {
+                    this.adminShareUrl = await createShortLink(this.adminUrl)
+                } catch (error) {
+                    // Fallback to normal url
+                    this.adminShareUrl = this.adminUrl
+                }
             }
         },
     },
@@ -109,8 +144,18 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'src/scss/media-query.mixin';
 .ga-share {
     width: 100%;
     text-align: start;
+
+    @include respond-above(phone) {
+        // Do not apply this minimal width on phone otherwise we will have
+        // a scroll bar on phone. On Desktop it looks a bit better to increase
+        // the size of the input.
+        .share-link-input {
+            min-width: 30rem;
+        }
+    }
 }
 </style>
diff --git a/src/modules/drawing/components/drawingInteraction.mixin.js b/src/modules/drawing/components/drawingInteraction.mixin.js
index b49cfdf86..2711f8755 100644
--- a/src/modules/drawing/components/drawingInteraction.mixin.js
+++ b/src/modules/drawing/components/drawingInteraction.mixin.js
@@ -79,14 +79,20 @@ const drawingInteractionMixin = {
         onAddFeature(event) {
             const feature = event.feature
             if (!feature.getId()) {
-                // setting a unique ID for each feature (using the feature metadata as seed for the UID generation)
-                const uid = getUid(feature)
+                /* setting a unique ID for each feature. getUid() is unique as long as the app
+                isn't reloaded. The first part is a time stamp to guarante uniqueness even after
+                reloading the app. Ps: We can not fully rely on the time stamp as some browsers may
+                make the timestamp less precise to increase privacy. */
+                const uid =
+                    'drawing_feature_' +
+                    Math.trunc(Date.now() / 1000) +
+                    ('000' + getUid(feature)).slice(-3)
                 feature.setId(uid)
                 const args =
                     typeof this.editableFeatureArgs === 'function'
                         ? this.editableFeatureArgs()
                         : this.editableFeatureArgs
-                args.id = `drawing_feature_${uid}`
+                args.id = uid
                 args.coordinates = null
 
                 /* applying extra properties that should be stored with that feature. Openlayers will
diff --git a/src/modules/drawing/lib/style.js b/src/modules/drawing/lib/style.js
index dd98b784f..b01db3818 100644
--- a/src/modules/drawing/lib/style.js
+++ b/src/modules/drawing/lib/style.js
@@ -133,7 +133,8 @@ export function featureStyleFunction(feature, resolution) {
             image: editableFeature.generateOpenlayersIcon(),
             text: new Text({
                 text: editableFeature.title,
-                font: editableFeature.font,
+                //font: editableFeature.font,
+                font: `normal 16px Helvetica`,
                 fill: new Fill({
                     color: editableFeature.textColor.fill,
                 }),
diff --git a/src/modules/infobox/InfoboxModule.vue b/src/modules/infobox/InfoboxModule.vue
index 2957a9b92..02894c80c 100644
--- a/src/modules/infobox/InfoboxModule.vue
+++ b/src/modules/infobox/InfoboxModule.vue
@@ -1,6 +1,11 @@
 <template>
     <teleport v-if="readyForTeleport" to="#map-footer-middle">
-        <div v-show="showContainer" class="infobox card" data-cy="infobox" @contextmenu.stop>
+        <div
+            v-show="showContainer"
+            class="infobox card rounded-0"
+            data-cy="infobox"
+            @contextmenu.stop
+        >
             <div
                 class="infobox-header card-header"
                 data-cy="infobox-header"
@@ -9,12 +14,18 @@
                 <ButtonWithIcon
                     v-if="showFloatingToggle"
                     :button-font-awesome-icon="['fa', 'caret-up']"
+                    small
                     data-cy="infobox-toggle-floating"
                     @click.stop="onToggleFloating"
                 />
-                <ButtonWithIcon :button-font-awesome-icon="['fa', 'print']" @click.stop="onPrint" />
+                <ButtonWithIcon
+                    :button-font-awesome-icon="['fa', 'print']"
+                    small
+                    @click.stop="onPrint"
+                />
                 <ButtonWithIcon
                     :button-font-awesome-icon="['fa', 'times']"
+                    small
                     data-cy="infobox-close"
                     @click.stop="onClose"
                 />
@@ -23,18 +34,19 @@
             <div
                 v-show="showContent"
                 ref="content"
-                class="infobox-content card-body"
+                class="infobox-content"
                 data-cy="infobox-content"
             >
                 <FeatureElevationProfile
                     v-if="showElevationProfile"
+                    class="card-body"
                     :feature="selectedFeature"
                     @update-elevation-profile-plot="setMaxHeight"
                 />
 
-                <FeatureCombo v-else-if="isCombo" :feature="selectedFeature" />
+                <FeatureCombo v-else-if="isCombo" class="card-body" :feature="selectedFeature" />
 
-                <FeatureEdit v-else-if="isEdit" :feature="selectedFeature" />
+                <FeatureEdit v-else-if="isEdit" class="card-body" :feature="selectedFeature" />
 
                 <FeatureList v-else-if="isList" />
             </div>
diff --git a/src/modules/infobox/components/FeatureElevationProfile.vue b/src/modules/infobox/components/FeatureElevationProfile.vue
index 52e24fd40..2c7e16068 100644
--- a/src/modules/infobox/components/FeatureElevationProfile.vue
+++ b/src/modules/infobox/components/FeatureElevationProfile.vue
@@ -89,7 +89,7 @@ export default {
     methods: {
         ...mapActions(['deleteDrawingFeature']),
         onDelete() {
-            const id = this.feature.id.replace('drawing_feature_', '')
+            const id = this.feature.id
             this.deleteDrawingFeature(id)
         },
         onCSVDownload() {
diff --git a/src/modules/infobox/components/FeatureElevationProfilePlot.vue b/src/modules/infobox/components/FeatureElevationProfilePlot.vue
index 87a05c0c5..5cc77f045 100644
--- a/src/modules/infobox/components/FeatureElevationProfilePlot.vue
+++ b/src/modules/infobox/components/FeatureElevationProfilePlot.vue
@@ -137,6 +137,11 @@ export default {
             this.$nextTick(this.updateElevationProfilePlot)
         },
         updateElevationProfilePlot() {
+            if (!this.$refs.profilePlot) {
+                // The $refs.profilePlot might be null because this method is
+                // executed within a Promise on the onResize() method.
+                return
+            }
             const { domainX, domainY, axisX, axisY } = updateD3ProfileChart(
                 this.$refs.profilePlot,
                 this.elevationProfile,
diff --git a/src/modules/infobox/components/FeatureList.vue b/src/modules/infobox/components/FeatureList.vue
index 0acb32064..4410e5a34 100644
--- a/src/modules/infobox/components/FeatureList.vue
+++ b/src/modules/infobox/components/FeatureList.vue
@@ -93,9 +93,7 @@ export default {
     margin-bottom: 7px;
     font-weight: 700;
 }
-.htmlpopup-content table {
-    width: 100%;
-    border: 0;
-    margin: 0 7px;
+.htmlpopup-content {
+    padding: 7px;
 }
 </style>
diff --git a/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue b/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue
index cb4ea5909..12c6447cc 100644
--- a/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue
+++ b/src/modules/infobox/components/styling/DrawingStyleIconSelector.vue
@@ -125,7 +125,7 @@ export default {
          * Generate an icon URL with medium size (so that the size doesn't change in the icon
          * selector, even when the user selects a different size for the icon the map)
          *
-         * @param {Icon} icon
+         * @param {DrawingIcon} icon
          * @returns {String} An icon URL
          */
         generateColorizedURL(icon) {
diff --git a/src/modules/infobox/components/styling/FeatureStyleEdit.vue b/src/modules/infobox/components/styling/FeatureStyleEdit.vue
index b258032ba..c622ce6fa 100644
--- a/src/modules/infobox/components/styling/FeatureStyleEdit.vue
+++ b/src/modules/infobox/components/styling/FeatureStyleEdit.vue
@@ -32,6 +32,7 @@
             <div class="d-flex feature-style-edit-control">
                 <PopoverButton
                     v-if="isFeatureMarker || isFeatureText"
+                    class="control-button"
                     data-cy="drawing-style-text-button"
                     with-close-button
                     popover-position="top"
@@ -52,6 +53,7 @@
 
                 <PopoverButton
                     v-if="isFeatureMarker"
+                    class="control-button"
                     data-cy="drawing-style-marker-button"
                     with-close-button
                     popover-position="top"
@@ -71,6 +73,7 @@
                     v-if="isFeatureLine"
                     data-cy="drawing-style-line-button"
                     popover-position="top"
+                    class="control-button"
                     with-close-button
                     :popover-title="$t('modify_color_label')"
                     :button-font-awesome-icon="['fas', 'paint-brush']"
@@ -83,6 +86,7 @@
                 </PopoverButton>
 
                 <ButtonWithIcon
+                    class="control-button"
                     data-cy="drawing-style-delete-button"
                     :button-font-awesome-icon="['far', 'trash-alt']"
                     @click="onDelete"
@@ -200,8 +204,7 @@ export default {
             this.changeFeatureIconSize({ feature: this.feature, iconSize })
         },
         onDelete() {
-            const id = this.feature.id.replace('drawing_feature_', '')
-            this.deleteDrawingFeature(id)
+            this.deleteDrawingFeature(this.feature.id)
         },
     },
 }
@@ -210,8 +213,7 @@ export default {
 <style lang="scss" scoped>
 @import 'src/scss/variables';
 
-.feature-style-edit-control button,
-div {
+.control-button {
     margin-right: $button-spacer;
 }
 </style>
diff --git a/src/modules/map/MapModule.vue b/src/modules/map/MapModule.vue
index 266e30fd6..44f8df2ec 100644
--- a/src/modules/map/MapModule.vue
+++ b/src/modules/map/MapModule.vue
@@ -5,15 +5,17 @@
             <slot />
             <LocationPopup />
         </OpenLayersMap>
+        <WarningRibbon />
     </div>
 </template>
 
 <script>
 import LocationPopup from './components/LocationPopup.vue'
 import OpenLayersMap from './components/openlayers/OpenLayersMap.vue'
+import WarningRibbon from './components/WarningRibbon.vue'
 
 export default {
-    components: { OpenLayersMap, LocationPopup },
+    components: { OpenLayersMap, LocationPopup, WarningRibbon },
 }
 </script>
 
diff --git a/src/modules/map/components/LocationPopup.vue b/src/modules/map/components/LocationPopup.vue
index c559f2800..4955b7932 100644
--- a/src/modules/map/components/LocationPopup.vue
+++ b/src/modules/map/components/LocationPopup.vue
@@ -2,85 +2,88 @@
     <OpenLayersPopover
         v-if="displayLocationPopup"
         :title="$t('position')"
-        :coordinates="clickCoordinates"
+        :coordinates="coordinate"
         class="location-popup"
+        use-content-padding
         data-cy="location-popup"
-        @close="clearClick"
+        @close="onClose"
     >
         <div class="location-popup-coordinates ol-selectable">
-            <div>
+            <div class="lp-label">
                 <a :href="$t('contextpopup_lv95_url')" target="_blank">CH1903+ / LV95</a>
             </div>
-            <div>
+            <div class="lp-data">
                 <span data-cy="location-popup-coordinates-lv95">
-                    {{ clickCoordinatesLV95 }}
+                    {{ coordinateLV95 }}
                 </span>
-                <LocationPopupCopySlot :value="clickCoordinatesLV95" />
+                <LocationPopupCopySlot :value="coordinateLV95" />
             </div>
-            <div>
+            <div class="lp-label">
                 <a :href="$t('contextpopup_lv03_url')" target="_blank">CH1903 / LV03</a>
             </div>
-            <div>
+            <div class="lp-data">
                 <span data-cy="location-popup-coordinates-lv03">
-                    {{ clickCoordinatesLV03 }}
+                    {{ coordinateLV03 }}
                 </span>
-                <LocationPopupCopySlot :value="clickCoordinatesLV03" />
+                <LocationPopupCopySlot :value="coordinateLV03" />
             </div>
-            <div>
+            <div class="lp-label">
                 <a href="https://epsg.io/4326" target="_blank">WGS 84 (lat/lon)</a>
             </div>
-            <div>
+            <div class="lp-data">
                 <span
                     class="location-popup-coordinates-wgs84-plain"
                     data-cy="location-popup-coordinates-plain-wgs84"
                 >
-                    {{ clickCoordinatesPlainWGS84 }}
+                    {{ coordinateWGS84Plain }}
                 </span>
-                <LocationPopupCopySlot :value="clickCoordinatesPlainWGS84" />
+                <LocationPopupCopySlot :value="coordinateWGS84Plain" />
                 <br />
                 <span data-cy="location-popup-coordinates-wgs84">
-                    {{ clickCoordinatesWGS84 }}
+                    {{ coordinateWGS84 }}
                 </span>
             </div>
-            <div>
+            <div class="lp-label">
                 <a href="https://epsg.io/32632" target="_blank">UTM</a>
             </div>
-            <div>
+            <div class="lp-data">
                 <span data-cy="location-popup-coordinates-utm">
-                    {{ clickCoordinatesUTM }}
+                    {{ coordinateUTM }}
                 </span>
-                <LocationPopupCopySlot :value="clickCoordinatesUTM" />
+                <LocationPopupCopySlot :value="coordinateUTM" />
             </div>
-            <div>{{ 'MGRS' }}</div>
-            <div>
+            <div class="lp-label">{{ 'MGRS' }}</div>
+            <div class="lp-data">
                 <span data-cy="location-popup-coordinates-mgrs">
-                    {{ clickCoordinatesMGRS }}
+                    {{ coordinateMGRS }}
                 </span>
-                <LocationPopupCopySlot :value="clickCoordinatesMGRS" />
+                <LocationPopupCopySlot :value="coordinateMGRS" />
             </div>
-            <div>
+            <div class="lp-label">
                 <a href="http://what3words.com/" target="_blank">what3words</a>
             </div>
-            <div>
-                <span v-show="clickWhat3Words" data-cy="location-popup-w3w">
-                    {{ clickWhat3Words }}
+            <div v-if="what3Words" class="lp-data what-3-words">
+                <span v-show="what3Words" data-cy="location-popup-w3w">
+                    {{ what3Words }}
                 </span>
-                <LocationPopupCopySlot :value="clickWhat3Words" />
+                <LocationPopupCopySlot :value="what3Words" />
             </div>
-            <div>
+            <div v-else>-</div>
+            <div class="lp-label">
                 <a :href="$t('elevation_href')" target="_blank">{{ $t('elevation') }}</a>
             </div>
-            <div>
-                <span data-cy="location-popup-height"> {{ height?.heightInMeter }} m</span> /
-                <span>{{ height?.heightInFeet }} ft</span>
-                <LocationPopupCopySlot :value="height?.heightInMeter" />
+            <div v-if="height" class="lp-data">
+                <span data-cy="location-popup-height"> {{ heightInMeter }} m</span> /
+                <span>{{ heightInFeet }} ft</span>
+                <LocationPopupCopySlot :value="heightInMeter" />
             </div>
-            <div class="location-popup-link">
-                {{ $t('link_bowl_crosshair') }}
+            <div v-else>-</div>
+            <div class="location-popup-link lp-label">
+                {{ $t('share_link') }}
             </div>
-            <div class="location-popup-link">
+            <div class="location-popup-link lp-data">
                 <LocationPopupCopyInput
-                    :value="shareLinkUrl"
+                    :value="shareLinkUrlDisplay"
                     data-cy="location-popup-link-bowl-crosshair"
                 />
             </div>
@@ -94,6 +97,7 @@
 <script>
 import { requestHeight } from '@/api/height.api'
 import { generateQrCode } from '@/api/qrcode.api'
+import { createShortLink } from '@/api/shortlink.api'
 
 import { registerWhat3WordsLocation } from '@/api/what3words.api'
 import LocationPopupCopyInput from '@/modules/map/components/LocationPopupCopyInput.vue'
@@ -104,6 +108,11 @@ import { CoordinateSystems, printHumanReadableCoordinates } from '@/utils/coordi
 import { round } from '@/utils/numberUtils'
 import proj4 from 'proj4'
 import { mapActions, mapState } from 'vuex'
+import log from '@/utils/logging'
+
+function reproject(toEpsg, coordinate) {
+    return proj4(CoordinateSystems.WEBMERCATOR.epsg, toEpsg, coordinate)
+}
 
 /** Right click pop up which shows the coordinates of the position under the cursor. */
 export default {
@@ -115,9 +124,11 @@ export default {
     inject: ['getMap'],
     data() {
         return {
-            clickWhat3Words: null,
+            what3Words: '',
             height: null,
             qrCodeImageSrc: null,
+            shareLinkUrlShorten: null,
+            shareLinkUrl: null,
         }
     },
     computed: {
@@ -126,100 +137,131 @@ export default {
             currentLang: (state) => state.i18n.lang,
             displayLocationPopup: (state) => state.map.displayLocationPopup,
         }),
-        clickCoordinates() {
+        coordinate() {
             return this.clickInfo?.coordinate
         },
-        clickCoordinatesLV95() {
+        coordinateLV95() {
             return printHumanReadableCoordinates(
-                this.reprojectClickCoordinates(CoordinateSystems.LV95.epsg),
+                reproject(CoordinateSystems.LV95.epsg, this.coordinate),
                 CoordinateSystems.LV95
             )
         },
-        clickCoordinatesLV03() {
+        coordinateLV03() {
             return printHumanReadableCoordinates(
-                this.reprojectClickCoordinates(CoordinateSystems.LV03.epsg),
+                reproject(CoordinateSystems.LV03.epsg, this.coordinate),
                 CoordinateSystems.LV03
             )
         },
-        clickCoordinatesPlainWGS84() {
-            const wgsMetric = this.reprojectClickCoordinates(CoordinateSystems.WGS84.epsg)
+        coordinateWGS84Metric() {
+            return reproject(CoordinateSystems.WGS84.epsg, this.coordinate)
+        },
+        coordinateWGS84Plain() {
+            const wgsMetric = this.coordinateWGS84Metric
             return `${round(wgsMetric[1], 5)}, ${round(wgsMetric[0], 5)}`
         },
-        clickCoordinatesWGS84() {
+        coordinateWGS84() {
             const complete = printHumanReadableCoordinates(
-                this.reprojectClickCoordinates(CoordinateSystems.WGS84.epsg),
+                this.coordinateWGS84Metric,
                 CoordinateSystems.WGS84
             )
             // Only return the first (HDMS) part here. The other part is in:
-            // this.clickCoordinatesPlainWGS84
+            // this.coordinateWGS84Plain
             return complete.split(' (')[0]
         },
-        clickCoordinatesUTM() {
+        coordinateUTM() {
             return printHumanReadableCoordinates(
-                this.reprojectClickCoordinates(CoordinateSystems.WGS84.epsg),
+                reproject(CoordinateSystems.WGS84.epsg, this.coordinate),
                 CoordinateSystems.UTM
             )
         },
-        clickCoordinatesMGRS() {
+        coordinateMGRS() {
             return printHumanReadableCoordinates(
-                this.reprojectClickCoordinates(CoordinateSystems.WGS84.epsg),
+                reproject(CoordinateSystems.WGS84.epsg, this.coordinate),
                 CoordinateSystems.MGRS
             )
         },
-        shareLinkUrl() {
-            let [lon, lat] = this.reprojectClickCoordinates(CoordinateSystems.WGS84.epsg)
-            let query = {
-                ...this.$route.query,
-                crosshair: 'marker',
-                lat,
-                lon,
-            }
-            return `${location.origin}/#/map?${stringifyQuery(query)}`
+        heightInFeet() {
+            return this.height?.heightInFeet || null
+        },
+        heightInMeter() {
+            return this.height?.heightInMeter || null
+        },
+        shareLinkUrlDisplay() {
+            return this.shareLinkUrlShorten || this.shareLinkUrl || ''
         },
     },
     watch: {
-        clickCoordinates() {
-            this.requestWhat3WordBackend()
-            this.registerHeigthFromBackend()
-            this.generateQrCodeFromBackend()
+        clickInfo(newClickInfo) {
+            if (newClickInfo && this.displayLocationPopup) {
+                this.updateWhat3Word(newClickInfo.coordinate, this.currentLang)
+                this.updateHeight(newClickInfo.coordinate)
+                this.updateShareLink(newClickInfo.coordinate, this.$route.query)
+            }
         },
-        currentLang() {
-            this.requestWhat3WordBackend()
-            this.generateQrCodeFromBackend()
+        currentLang(newLang) {
+            if (this.clickInfo && this.displayLocationPopup) {
+                this.updateWhat3Word(this.clickInfo.coordinate, newLang)
+                this.updateShareLink(this.clickInfo.coordinate, this.$route.query)
+            }
         },
-        // Watching shareLinkUrl breaks the component. But we need to react to
-        // changes in the layer config to update the QR code.
-        '$route.query'() {
-            this.generateQrCodeFromBackend()
+        '$route.query'(newQuery) {
+            if (this.clickInfo && this.displayLocationPopup) {
+                this.updateShareLink(this.clickInfo.coordinate, newQuery)
+            }
         },
     },
     methods: {
         ...mapActions(['clearClick']),
         onClose() {
             this.clearClick()
+            this.qrCodeImageSrc = null
+            this.what3Words = ''
+            this.height = null
+            this.shareLinkUrlShorten = null
+            this.shareLinkUrl = null
+        },
+        async updateWhat3Word(coordinate, lang) {
+            try {
+                this.what3Words = await registerWhat3WordsLocation(coordinate, lang)
+            } catch (error) {
+                log.error(`Failed to retrieve What3Words Location`)
+                this.what3Words = ''
+            }
         },
-        reprojectClickCoordinates(targetEpsg) {
-            return proj4(CoordinateSystems.WEBMERCATOR.epsg, targetEpsg, this.clickCoordinates)
+        async updateHeight(coordinate) {
+            try {
+                this.height = await requestHeight(coordinate)
+            } catch (error) {
+                log.error(`Failed to get position height`)
+                this.height = null
+            }
         },
-        requestWhat3WordBackend() {
-            if (this.displayLocationPopup) {
-                registerWhat3WordsLocation(this.clickCoordinates, this.currentLang).then(
-                    (what3word) => {
-                        this.clickWhat3Words = what3word
-                    }
-                )
+        updateShareLink(coordinate, routeQuery) {
+            let [lon, lat] = reproject(CoordinateSystems.WGS84.epsg, coordinate)
+            let query = {
+                ...routeQuery,
+                crosshair: 'marker',
+                lat,
+                lon,
             }
+            this.shareLinkUrl = `${location.origin}/#/map?${stringifyQuery(query)}`
+            this.shortenShareLink(this.shareLinkUrl)
         },
-        registerHeigthFromBackend() {
-            if (this.displayLocationPopup) {
-                requestHeight(this.clickCoordinates).then((height) => {
-                    this.height = height
-                })
+        async shortenShareLink(url) {
+            try {
+                this.shareLinkUrlShorten = await createShortLink(url)
+                await this.updateQrCode(this.shareLinkUrlShorten)
+            } catch (error) {
+                log.error(`Failed to shorten Share URL`)
+                this.shareLinkUrlShorten = null
             }
         },
-        async generateQrCodeFromBackend() {
-            if (this.displayLocationPopup) {
-                this.qrCodeImageSrc = await generateQrCode(this.shareLinkUrl)
+        async updateQrCode(url) {
+            try {
+                this.qrCodeImageSrc = await generateQrCode(url)
+            } catch (error) {
+                log.error(`Failed to generate qrcode for share url`)
+                this.qrCodeImageSrc = null
             }
         },
     },
@@ -229,21 +271,24 @@ export default {
 <style lang="scss" scoped>
 @import 'src/scss/webmapviewer-bootstrap-theme';
 .location-popup {
-    &::before {
-        $arrow-height: 15px;
-        position: absolute;
-        top: -($arrow-height * 2);
-        left: 50%;
-        margin-left: -$arrow-height;
-        border: $arrow-height solid transparent;
-        border-bottom-color: $light;
-        pointer-events: none;
-        content: '';
-    }
     &-coordinates {
         display: grid;
-        grid-template-columns: 1fr 2fr;
+        grid-template-columns: min-content auto;
+        grid-column-gap: 8px;
         font-size: 0.75rem;
+        grid-row-gap: 2px;
+        .lp-label {
+            white-space: nowrap;
+        }
+        .lp-data.what-3-words {
+            display: grid;
+            grid-template-columns: auto min-content;
+            span {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
     }
     &-link {
         display: flex;
@@ -259,7 +304,7 @@ export default {
         margin-bottom: 0.1rem;
     }
 }
-@media (min-height: 650px) {
+@media (min-height: 850px) {
     .location-popup-qrcode {
         display: block;
     }
diff --git a/src/modules/map/components/LocationPopupCopyInput.vue b/src/modules/map/components/LocationPopupCopyInput.vue
index a04e50453..9dd6475a6 100644
--- a/src/modules/map/components/LocationPopupCopyInput.vue
+++ b/src/modules/map/components/LocationPopupCopyInput.vue
@@ -7,6 +7,7 @@
             type="text"
             :value="value"
             readonly
+            data-cy="location-popup-link-input"
             @focus="focusSelect"
         />
         <button ref="button" class="btn btn-secondary" type="button" @click="copyValue">
@@ -18,6 +19,7 @@
 <script>
 import { Tooltip } from 'bootstrap'
 import { mapGetters } from 'vuex'
+import log from '@/utils/logging'
 
 export default {
     inheritAttrs: false,
@@ -62,11 +64,14 @@ export default {
             event.target.select()
         },
         async copyValue() {
-            await navigator.clipboard.writeText(this.value)
-
-            // Change button text and start the reset timer.
-            this.buttonText = 'copy_success'
-            this.resetTimeout = setTimeout(this.resetButton, this.resetDelay)
+            try {
+                await navigator.clipboard.writeText(this.value)
+                // Change button text and start the reset timer.
+                this.buttonText = 'copy_success'
+                this.resetTimeout = setTimeout(this.resetButton, this.resetDelay)
+            } catch (error) {
+                log.error(`Failed to copy to clipboard:`, error)
+            }
         },
     },
 }
diff --git a/src/modules/map/components/LocationPopupCopySlot.vue b/src/modules/map/components/LocationPopupCopySlot.vue
index d11b14f22..c0da01655 100644
--- a/src/modules/map/components/LocationPopupCopySlot.vue
+++ b/src/modules/map/components/LocationPopupCopySlot.vue
@@ -11,11 +11,13 @@
 </template>
 
 <script>
+import log from '@/utils/logging'
+
 export default {
     props: {
         value: {
             type: String,
-            required: true,
+            default: '',
         },
         resetDelay: {
             type: Number,
@@ -35,11 +37,15 @@ export default {
             this.buttonText = 'copy_cta'
         },
         async copyValue() {
-            await navigator.clipboard.writeText(this.value)
+            try {
+                await navigator.clipboard.writeText(this.value)
 
-            // Change button text and start the reset timer.
-            this.buttonText = 'copy_done'
-            this.resetTimeout = setTimeout(this.resetButton, this.resetDelay)
+                // Change button text and start the reset timer.
+                this.buttonText = 'copy_done'
+                this.resetTimeout = setTimeout(this.resetButton, this.resetDelay)
+            } catch (error) {
+                log.error(`Failed to copy to clipboard:`, error)
+            }
         },
     },
 }
diff --git a/src/modules/map/components/WarningRibbon.vue b/src/modules/map/components/WarningRibbon.vue
new file mode 100644
index 000000000..f22856f0b
--- /dev/null
+++ b/src/modules/map/components/WarningRibbon.vue
@@ -0,0 +1,56 @@
+<template>
+    <div v-if="hasWarningRibbon" class="corner-ribbon" data-cy="warning-ribbon">TEST</div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+      ...mapGetters([
+            'hasWarningRibbon',
+      ]),
+
+    }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'src/scss/media-query.mixin';
+@import 'src/scss/variables-admin';
+@import 'src/scss/variables';
+
+/* Corner ribbons, from http://codepen.io/eode9/pen/twkKm
+* mobile: ribbon top left, desktop: bottom left
+*/
+
+.corner-ribbon {
+  position: absolute;
+  /* top-left */
+  top: 78px;
+  bottom: auto;
+  left: -50px;
+  width: 200px;
+  transform: rotate(-45deg);
+  z-index: $zindex-warning;
+  background: $red;
+  color: white;
+  text-align: center;
+  line-height: 50px;
+  letter-spacing: 1px;
+  font-weight: bold;
+}
+
+
+@include respond-above(phone) {
+  .corner-ribbon {
+    /* bottom-left */
+    top: auto;
+    bottom: 50px; /* Under cesium inspectors */
+    left: -100px;
+    width: 300px;
+    transform: rotate(45deg);
+  }
+}
+</style>
diff --git a/src/modules/map/components/footer/MapFooterAppVersion.vue b/src/modules/map/components/footer/MapFooterAppVersion.vue
index 69a4cb602..38dff8c37 100644
--- a/src/modules/map/components/footer/MapFooterAppVersion.vue
+++ b/src/modules/map/components/footer/MapFooterAppVersion.vue
@@ -3,15 +3,20 @@
 </template>
 
 <script>
-import { APP_VERSION, DEV_SITE_WARNING } from '@/config'
+import { APP_VERSION } from '@/config'
+import { mapGetters } from 'vuex'
 
 export default {
     data() {
         return {
             appVersion: APP_VERSION,
-            showAppVersion: DEV_SITE_WARNING,
         }
     },
+    computed: {
+      ...mapGetters({
+        showAppVersion: 'hasDevSiteWarning'
+      }),
+    }
 }
 </script>
 
diff --git a/src/modules/map/components/openlayers/OpenLayersGeoJSONLayer.vue b/src/modules/map/components/openlayers/OpenLayersGeoJSONLayer.vue
index 75359f7d9..e5ac9fc73 100644
--- a/src/modules/map/components/openlayers/OpenLayersGeoJSONLayer.vue
+++ b/src/modules/map/components/openlayers/OpenLayersGeoJSONLayer.vue
@@ -52,9 +52,15 @@ export default {
         this.layer = new VectorLayer({ id: this.layerId, opacity: this.opacity })
 
         // loading the GeoJSON data and style with and wait for both the be loaded
-        axios
-            .all([axios.get(this.geojsonUrl), axios.get(this.styleUrl)])
+        // WARNING: axios.get(this.styleUrl) will not work on localhost and will fire a CORS error !!
+        // this is due to the fact that the backend send the styleUrl agnostic whitout HTTP scheme !
+        Promise.all([axios.get(this.geojsonUrl), axios.get(this.styleUrl)])
             .then((responses) => {
+                if (!this.layer) {
+                    // It could be that the layer has been removed meanwhile therefore check for
+                    // its existence
+                    return
+                }
                 const geojsonData = responses[0].data
                 const geojsonStyleLiterals = responses[1].data
                 const style = new OlStyleForPropertyValue(geojsonStyleLiterals)
diff --git a/src/modules/map/components/openlayers/OpenLayersHighlightedFeature.vue b/src/modules/map/components/openlayers/OpenLayersHighlightedFeature.vue
index 30eba3a68..9e105d000 100644
--- a/src/modules/map/components/openlayers/OpenLayersHighlightedFeature.vue
+++ b/src/modules/map/components/openlayers/OpenLayersHighlightedFeature.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { Feature } from '@/api/features.api'
+import { SelectableFeature } from '@/api/features.api'
 import OpenLayersMarker, {
     highlightedFill,
     highlightedStroke,
@@ -56,7 +56,7 @@ export default {
     mixins: [addLayerToMapMixin],
     props: {
         feature: {
-            type: Feature,
+            type: SelectableFeature,
             required: true,
         },
         zIndex: {
diff --git a/src/modules/map/components/openlayers/OpenLayersKMLLayer.vue b/src/modules/map/components/openlayers/OpenLayersKMLLayer.vue
index 8d86092b2..9ba3922c4 100644
--- a/src/modules/map/components/openlayers/OpenLayersKMLLayer.vue
+++ b/src/modules/map/components/openlayers/OpenLayersKMLLayer.vue
@@ -11,6 +11,7 @@ import { CoordinateSystems } from '@/utils/coordinateUtils'
 import KML from 'ol/format/KML'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
+import { mapState } from "vuex";
 import addLayerToMapMixin from './utils/addLayerToMap-mixins'
 import { getKmlFromUrl } from '@/api/files.api'
 
@@ -40,6 +41,11 @@ export default {
             default: -1,
         },
     },
+    computed: {
+        ...mapState({
+            availableIconSets: (state) => state.drawing.iconSets,
+        })
+    },
     watch: {
         url(newUrl) {
             this.layer.getSource().clear()
@@ -67,17 +73,16 @@ export default {
         }
     },
     methods: {
-        loadKml(url) {
-            getKmlFromUrl(url).then((kml) => {
-                const features = new KML().readFeatures(kml, {
-                    // Reproject all features to webmercator, as this is the projection used for the view
-                    featureProjection: CoordinateSystems.WEBMERCATOR.epsg,
-                })
-                features.forEach((olFeature) => {
-                    EditableFeature.deserialize(olFeature)
-                })
-                this.layer.getSource().addFeatures(features)
+        async loadKml(url) {
+            const kml = await getKmlFromUrl(url)
+            const features = new KML().readFeatures(kml, {
+                // Reproject all features to webmercator, as this is the projection used for the view
+                featureProjection: CoordinateSystems.WEBMERCATOR.epsg,
+            })
+            features.forEach((olFeature) => {
+                EditableFeature.deserialize(olFeature, this.availableIconSets)
             })
+            this.layer.getSource().addFeatures(features)
 
             if (IS_TESTING_WITH_CYPRESS) {
                 window.kmlLayer = this.layer
diff --git a/src/modules/map/components/openlayers/OpenLayersMap.vue b/src/modules/map/components/openlayers/OpenLayersMap.vue
index 40555c575..4a65f33f7 100644
--- a/src/modules/map/components/openlayers/OpenLayersMap.vue
+++ b/src/modules/map/components/openlayers/OpenLayersMap.vue
@@ -55,6 +55,7 @@
             v-if="showFeaturesPopover"
             :coordinates="popoverCoordinates"
             authorize-print
+            :use-content-padding="editFeature"
             @close="clearAllSelectedFeatures"
         >
             <template #extra-buttons>
@@ -385,7 +386,7 @@ export default {
                         this.map
                             .getFeaturesAtPixel(event.pixel, {
                                 // filtering other layers out
-                                layerFilter: (layer) => layer.get('id') === geoJsonLayer.id,
+                                layerFilter: (layer) => layer.get('id') === geoJsonLayer.getID(),
                             })
                             .forEach((feature) => {
                                 const featureGeometry = feature.getGeometry()
@@ -394,7 +395,8 @@ export default {
                                 // (not very fancy but otherwise the look and feel is different from a typical backend tooltip)
                                 const geoJsonFeature = new LayerFeature(
                                     geoJsonLayer,
-                                    feature.get('id') || feature.getId(),
+                                    geoJsonLayer.getID(),
+                                    geoJsonLayer.name,
                                     `<div class="htmlpopup-container">
                                         <div class="htmlpopup-header">
                                             <span>${geoJsonLayer.name}</span>
diff --git a/src/modules/map/components/openlayers/OpenLayersPopover.vue b/src/modules/map/components/openlayers/OpenLayersPopover.vue
index 6e5e19b1c..b92c08471 100644
--- a/src/modules/map/components/openlayers/OpenLayersPopover.vue
+++ b/src/modules/map/components/openlayers/OpenLayersPopover.vue
@@ -19,7 +19,12 @@
                     @click="onClose"
                 />
             </div>
-            <div ref="mapPopoverContent" class="card-body">
+            <div
+                id="mapPopoverContent"
+                ref="mapPopoverContent"
+                class="map-popover-content"
+                :class="{ 'card-body': useContentPadding }"
+            >
                 <slot />
             </div>
         </div>
@@ -51,6 +56,10 @@ export default {
             type: String,
             default: '',
         },
+        useContentPadding: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: ['close'],
     watch: {
@@ -79,7 +88,7 @@ export default {
             this.$emit('close')
         },
         printContent() {
-            promptUserToPrintHtmlContent(this.$refs.mapPopoverContent.outerHTML)
+            promptUserToPrintHtmlContent('mapPopoverContent')
         },
     },
 }
@@ -89,15 +98,18 @@ export default {
 @import 'src/scss/webmapviewer-bootstrap-theme';
 
 .map-popover {
-    .card-body {
-        width: $overlay-width;
-        max-width: 100%;
+    .card {
+        max-width: $overlay-width;
+    }
+    .map-popover-content {
         max-height: 350px;
         overflow-y: auto;
+    }
+    .card-body {
         display: flex;
         flex-direction: column;
-        gap: 8px;
     }
+    // Triangle border
     &::before {
         $arrow-height: 15px;
         position: absolute;
@@ -105,10 +117,21 @@ export default {
         left: 50%;
         margin-left: -$arrow-height;
         border: $arrow-height solid transparent;
-        border-bottom-color: $light;
+        border-bottom-color: $border-color-translucent;
         pointer-events: none;
         content: '';
     }
+    // Triangle background
+    &::after {
+        $arrow-border-height: 14px;
+        content: '';
+        border: $arrow-border-height solid transparent;
+        border-bottom-color: $light;
+        position: absolute;
+        top: -($arrow-border-height * 2);
+        left: 50%;
+        margin-left: -$arrow-border-height;
+    }
 }
 @media (min-height: 600px) {
     .map-popover .card-body {
diff --git a/src/modules/map/components/openlayers/OpenLayersWMSLayer.vue b/src/modules/map/components/openlayers/OpenLayersWMSLayer.vue
index 3fade2578..0e1ea4f87 100644
--- a/src/modules/map/components/openlayers/OpenLayersWMSLayer.vue
+++ b/src/modules/map/components/openlayers/OpenLayersWMSLayer.vue
@@ -8,9 +8,11 @@
 import { TILEGRID_EXTENT, TILEGRID_ORIGIN, TILEGRID_RESOLUTIONS, WMS_TILE_SIZE } from '@/config'
 import { CoordinateSystems } from '@/utils/coordinateUtils'
 import { Image as ImageLayer, Tile as TileLayer } from 'ol/layer'
+import { transformExtent } from 'ol/proj'
 import ImageWMS from 'ol/source/ImageWMS'
 import TileWMS from 'ol/source/TileWMS'
 import TileGrid from 'ol/tilegrid/TileGrid'
+import proj4 from 'proj4'
 import addLayerToMapMixin from './utils/addLayerToMap-mixins'
 
 /** Renders a WMS layer on the map */
@@ -51,35 +53,63 @@ export default {
         },
     },
     created() {
-        let tileGrid = undefined
+        let source = undefined
+        if (this.gutter !== -1) {
+            source = new TileWMS({
+                projection: this.projection,
+                url: this.url,
+                gutter: this.gutter,
+            })
+        } else {
+            source = new ImageWMS({
+                url: this.url,
+                projection: this.projection,
+            })
+        }
         // If we are using LV95, we can constrain the WMS to only request tiles over Switzerland
         if (this.projection === CoordinateSystems.LV95.epsg) {
-            tileGrid = new TileGrid({
+            const tileGridLV95 = new TileGrid({
                 resolutions: TILEGRID_RESOLUTIONS,
                 extent: TILEGRID_EXTENT,
                 origin: TILEGRID_ORIGIN,
                 tileSize: WMS_TILE_SIZE,
             })
+
+            source.tileGrid = tileGridLV95
+
+            // tile grid and  reprojection to WebMercator is done in analogy to WMTS to prevent
+            // that the layer appears twice, once in CH and once near New Zealand.
+            // see: https://github.com/geoadmin/web-mapviewer/commit/c689f9a650c546c6e52a91fc2086d7cbbf48faa2
+            if (this.gutter !== -1) {
+                source.setTileGridForProjection(
+                    CoordinateSystems.WEBMERCATOR.epsg,
+                    new TileGrid({
+                        resolutions: TILEGRID_RESOLUTIONS,
+                        origin: proj4(
+                            CoordinateSystems.LV95.epsg,
+                            CoordinateSystems.WEBMERCATOR.epsg,
+                            TILEGRID_ORIGIN
+                        ),
+                        extent: transformExtent(
+                            tileGridLV95.getExtent(),
+                            CoordinateSystems.LV95.epsg,
+                            CoordinateSystems.WEBMERCATOR.epsg
+                        ),
+                    })
+                )
+            }
         }
         if (this.gutter !== -1) {
             this.layer = new TileLayer({
                 id: this.layerId,
                 opacity: this.opacity,
-                source: new TileWMS({
-                    projection: this.projection,
-                    url: this.url,
-                    gutter: this.gutter,
-                    tileGrid,
-                }),
+                source,
             })
         } else {
             this.layer = new ImageLayer({
                 id: this.layerId,
                 opacity: this.opacity,
-                source: new ImageWMS({
-                    url: this.url,
-                    tileGrid,
-                }),
+                source,
             })
         }
     },
diff --git a/src/modules/map/components/openlayers/utils/styleFromLiterals.js b/src/modules/map/components/openlayers/utils/styleFromLiterals.js
index 0893ff490..2f8052988 100644
--- a/src/modules/map/components/openlayers/utils/styleFromLiterals.js
+++ b/src/modules/map/components/openlayers/utils/styleFromLiterals.js
@@ -71,7 +71,7 @@ function getOlStyleFromLiterals(value) {
     const olStyles = {}
     const { vectorOptions: style, geomType } = value
 
-    if (geomType === 'Point') {
+    if (geomType === 'point') {
         let olText
         if (style.label) {
             olText = getOlBasicStyles(style.label).text
diff --git a/src/modules/menu/components/BlackBackdrop.vue b/src/modules/menu/components/BlackBackdrop.vue
index ea80c8467..aef5a805d 100644
--- a/src/modules/menu/components/BlackBackdrop.vue
+++ b/src/modules/menu/components/BlackBackdrop.vue
@@ -14,6 +14,9 @@
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
-    z-index: -1000; //Display behind the current stacking context
+    z-index: 1;
+}
+.modal-view {
+    z-index: $zindex-modal - 1;
 }
 </style>
diff --git a/src/modules/menu/components/header/HeaderSwissConfederationText.vue b/src/modules/menu/components/header/HeaderSwissConfederationText.vue
index 1ef61d362..2fb19f912 100644
--- a/src/modules/menu/components/header/HeaderSwissConfederationText.vue
+++ b/src/modules/menu/components/header/HeaderSwissConfederationText.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="swiss-confederation-text"
-        :class="{ 'dev-site': devSiteWarning }"
+        :class="{ 'dev-site': hasDevSiteWarning }"
         @click="$emit('click', $event)"
     >
         <div class="multi-lang-title"></div>
@@ -13,9 +13,10 @@
 </template>
 
 <script>
-import { DEV_SITE_WARNING } from '@/config'
+import { mapGetters } from 'vuex'
 
 export default {
+
     props: {
         currentLang: {
             type: String,
@@ -23,12 +24,11 @@ export default {
         },
     },
     emits: ['click'],
-    data() {
-        return {
-            devSiteWarning: DEV_SITE_WARNING,
-        }
-    },
+    computed: {
+      ...mapGetters(['hasDevSiteWarning']),
+    }
 }
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/modules/menu/components/header/HeaderWithSearch.vue b/src/modules/menu/components/header/HeaderWithSearch.vue
index a7ed25684..c93d05f14 100644
--- a/src/modules/menu/components/header/HeaderWithSearch.vue
+++ b/src/modules/menu/components/header/HeaderWithSearch.vue
@@ -20,7 +20,7 @@
                 <SearchBar />
                 <!-- eslint-disable vue/no-v-html-->
                 <div
-                    v-if="devSiteWarning"
+                    v-if="hasDevSiteWarning"
                     class="header-warning-dev"
                     v-html="$t('test_host_warning')"
                 ></div>
@@ -32,7 +32,6 @@
 </template>
 
 <script>
-import { DEV_SITE_WARNING } from '@/config'
 import HeaderMenuButton from '@/modules/menu/components/header/HeaderMenuButton.vue'
 import HeaderSwissConfederationText from '@/modules/menu/components/header/HeaderSwissConfederationText.vue'
 import SwissFlag from '@/modules/menu/components/header/SwissFlag.vue'
@@ -49,17 +48,12 @@ export default {
         SwissFlag,
         LoadingBar,
     },
-    data() {
-        return {
-            devSiteWarning: DEV_SITE_WARNING,
-        }
-    },
     computed: {
         ...mapState({
             showLoadingBar: (state) => state.ui.showLoadingBar,
             currentLang: (state) => state.i18n.lang,
         }),
-        ...mapGetters(['currentTopicId', 'isPhoneMode']),
+        ...mapGetters(['currentTopicId', 'isPhoneMode', 'hasDevSiteWarning']),
     },
     methods: {
         resetApp() {
diff --git a/src/modules/menu/components/header/SwissFlag.vue b/src/modules/menu/components/header/SwissFlag.vue
index 42c5faf8c..093c9a5ad 100644
--- a/src/modules/menu/components/header/SwissFlag.vue
+++ b/src/modules/menu/components/header/SwissFlag.vue
@@ -1,7 +1,7 @@
 <template>
     <img
         class="swiss-flag"
-        :class="{ 'dev-site': devSiteWarning }"
+        :class="{ 'dev-site': hasDevSiteWarning }"
         :src="swissFlagIcon"
         alt="swiss-flag"
         @click="$emit('click', $event)"
@@ -10,16 +10,21 @@
 
 <script>
 import swissFlagIcon from '@/assets/svg/swiss-flag.svg'
-import { DEV_SITE_WARNING } from '@/config'
+import { mapGetters } from 'vuex'
 
 export default {
     emits: ['click'],
     data() {
         return {
             swissFlagIcon,
-            devSiteWarning: DEV_SITE_WARNING,
+
         }
     },
+    computed: {
+      ...mapGetters([
+        'hasDevSiteWarning',
+      ]),
+    }
 }
 </script>
 
diff --git a/src/modules/menu/components/search/SearchResultCategory.vue b/src/modules/menu/components/search/SearchResultCategory.vue
index dd10bbc50..da73eb70e 100644
--- a/src/modules/menu/components/search/SearchResultCategory.vue
+++ b/src/modules/menu/components/search/SearchResultCategory.vue
@@ -51,7 +51,7 @@ export default {
             default: false,
         },
     },
-    emits: ['preview'],
+    emits: ['preview', 'previewStart', 'previewStop'],
     data() {
         return {
             showLayerLegendForId: null,
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index f7c70526b..8a414fc48 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -1,4 +1,3 @@
-
 /* Z Indices are not an absolute value. Different css attributes (most importantly the z-index
 attribute) can trigger the generation of a new stacking context. An element cannot break out of its
 stacking context, independently of the value of its z-index. Inatall an extension like
@@ -8,6 +7,7 @@ browser dev tools. */
 // Main stacking context
 $zindex-map: 1;
 $zindex-footer: $zindex-map + 1; // The menu should be displayed above the footer in phone mode
+$zindex-warning: 1;
 $zindex-menu: $zindex-footer + 1;
 $zindex-footer-infobox: $zindex-menu + 1; //Is part of the footer, but should be displayed above other menu items
 $zindex-swipable-element: $zindex-menu + 1; //Not used for the moment, please check the value before using it.
@@ -35,4 +35,4 @@ $map-button-inner-icon-diameter: 26px;
 $map-button-border-width: calc(($map-button-diameter - $map-button-inner-icon-diameter) / 2);
 
 // Space between adjacent buttons
-$button-spacer: 0.5rem;
+$button-spacer: 0.5rem;
\ No newline at end of file
diff --git a/src/store/modules/ui.store.js b/src/store/modules/ui.store.js
index b8482a4d0..ac505110b 100644
--- a/src/store/modules/ui.store.js
+++ b/src/store/modules/ui.store.js
@@ -1,4 +1,4 @@
-import { BREAKPOINT_TABLET } from '@/config'
+import { BREAKPOINT_TABLET, WARNING_RIBBON_HOSTNAMES, NO_WARNING_BANNER_HOSTNAMES } from '@/config'
 
 /**
  * Describes the different mode the UI can have. Either desktop / tablet (menu is always shown, info
@@ -77,6 +77,13 @@ export default {
          * @type Boolean
          */
         floatingTooltip: false, // Configured in screen-size-management.plugin.js
+        /**
+         * Hostname on which the application is running (use to display warnings to the user on
+         * 'non-production' hosts)
+         *
+         * @type String
+         */
+        hostname: window.location.hostname,
     },
     getters: {
         screenDensity(state) {
@@ -134,6 +141,19 @@ export default {
         isTraditionalDesktopSize(state, getters) {
             return getters.isDesktopMode && state.width >= BREAKPOINT_TABLET
         },
+        /**
+         * Flag to display a warning ribbon ('TEST') at the top/bottom right corner
+         */
+        hasWarningRibbon(state) {
+            return WARNING_RIBBON_HOSTNAMES.some(hostname=>state.hostname.includes(hostname))
+        },
+        /**
+        * Flag that tells if users should be warned that it is a development site. Also used to hide
+        * development specific features in production (like the app version)
+        */
+        hasDevSiteWarning(state) {
+            return true //!NO_WARNING_BANNER_HOSTNAMES.some(hostname=>state.hostname.includes(hostname))
+        },
     },
     actions: {
         setSize({ commit }, { width, height }) {
diff --git a/src/utils/ModalWithBackdrop.vue b/src/utils/ModalWithBackdrop.vue
index 524018aa7..ac7791ce3 100644
--- a/src/utils/ModalWithBackdrop.vue
+++ b/src/utils/ModalWithBackdrop.vue
@@ -2,43 +2,45 @@
     <teleport to="#main-component">
         <!-- Must teleport inside main-component in order for dynamic outlines to work and to be
         sure that it is always on top of the reset. -->
-        <div class="modal-popup" :class="{ 'modal-popup-fluid': fluid }">
-            <BlackBackdrop @click="onClose(false)" />
-            <div class="card">
-                <div class="card-header d-flex align-middle">
-                    <span v-if="title" class="flex-grow-1 text-start">{{ title }}</span>
-                    <ButtonWithIcon
-                        v-if="allowPrint"
-                        small
-                        :button-font-awesome-icon="['fa', 'print']"
-                        data-cy="modal-print-button"
-                        @click="printModalContent"
-                    />
-                    <ButtonWithIcon
-                        :button-font-awesome-icon="['fa', 'times']"
-                        small
-                        class="float-end"
-                        data-cy="modal-close-button"
-                        @click="onClose(false)"
-                    />
-                </div>
-                <div ref="modalContent" class="card-body p-2">
-                    <slot />
-                    <div v-if="showConfirmationButtons" class="mt-1 d-flex justify-content-end">
-                        <button
-                            class="btn btn-light me-2"
-                            data-cy="modal-cancel-button"
+        <div>
+            <BlackBackdrop class="modal-view" @click="onClose(false)" />
+            <div class="modal-popup" :class="{ 'modal-popup-fluid': fluid }">
+                <div class="card">
+                    <div class="card-header d-flex align-middle">
+                        <span v-if="title" class="flex-grow-1 text-start mt-1">{{ title }}</span>
+                        <ButtonWithIcon
+                            v-if="allowPrint"
+                            small
+                            :button-font-awesome-icon="['fa', 'print']"
+                            data-cy="modal-print-button"
+                            @click="printModalContent"
+                        />
+                        <ButtonWithIcon
+                            :button-font-awesome-icon="['fa', 'times']"
+                            small
+                            class="float-end"
+                            data-cy="modal-close-button"
                             @click="onClose(false)"
-                        >
-                            {{ $t('cancel') }}
-                        </button>
-                        <button
-                            class="btn btn-primary"
-                            data-cy="modal-confirm-button"
-                            @click="onClose(true)"
-                        >
-                            {{ $t('success') }}
-                        </button>
+                        />
+                    </div>
+                    <div ref="modalContent" class="card-body pt-3 ps-4 pe-4">
+                        <slot />
+                        <div v-if="showConfirmationButtons" class="mt-1 d-flex justify-content-end">
+                            <button
+                                class="btn btn-light me-2"
+                                data-cy="modal-cancel-button"
+                                @click="onClose(false)"
+                            >
+                                {{ $t('cancel') }}
+                            </button>
+                            <button
+                                class="btn btn-primary"
+                                data-cy="modal-confirm-button"
+                                @click="onClose(true)"
+                            >
+                                {{ $t('success') }}
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -92,6 +94,7 @@ export default {
 
 <style lang="scss" scoped>
 @import 'src/scss/variables';
+@import 'src/scss/media-query.mixin';
 .modal-popup {
     position: fixed;
     top: 50%;
@@ -102,8 +105,14 @@ export default {
         min-width: 75vw;
     }
     z-index: $zindex-modal;
-    max-width: 90vw;
     max-height: 90vh;
+    // For phone we set the width fixed to 90% of the view.
+    width: 90vw;
+    @include respond-above(phone) {
+        // But for desktop we let the size be dinamic with max to 90% of the view
+        width: unset;
+        max-width: 90vw;
+    }
     .card {
         max-height: 90vh;
         .card-header {
diff --git a/src/utils/__tests__/legacyKmlUtils.spec.js b/src/utils/__tests__/legacyKmlUtils.spec.js
new file mode 100644
index 000000000..3dc01c318
--- /dev/null
+++ b/src/utils/__tests__/legacyKmlUtils.spec.js
@@ -0,0 +1,222 @@
+import { EditableFeature, EditableFeatureTypes } from '@/api/features.api'
+import { DrawingIcon, DrawingIconSet } from '@/api/icon.api'
+import { CoordinateSystems } from '@/utils/coordinateUtils'
+import {
+    BLACK,
+    BLUE,
+    GRAY,
+    GREEN,
+    LARGE,
+    MEDIUM,
+    RED,
+    SMALL,
+    VERY_SMALL,
+    WHITE,
+    YELLOW,
+} from '@/utils/featureStyleUtils'
+import { getEditableFeatureFromLegacyKmlFeature } from '@/utils/legacyKmlUtils'
+import { expect } from 'chai'
+import { readFileSync } from 'fs'
+import KML from 'ol/format/KML'
+import { resolve } from 'path'
+import { beforeEach, describe, it } from 'vitest'
+
+const fakeDefaultIconSet = new DrawingIconSet(
+    'default',
+    true,
+    'https://totally.fake.url',
+    'https://tottally.fake.template'
+)
+// adding the 3 icons from the default set found in mfgeoadmin3TestKml.kml
+fakeDefaultIconSet.icons = [
+    new DrawingIcon(
+        '001-marker',
+        'https://fake.image.url',
+        'https://fake.template.url',
+        'default',
+        [0, 0]
+    ),
+    new DrawingIcon(
+        '002-circle',
+        'https://fake.image.url',
+        'https://fake.template.url',
+        'default',
+        [0, 0]
+    ),
+    new DrawingIcon(
+        '0003-square',
+        'https://fake.image.url',
+        'https://fake.template.url',
+        'default',
+        [0, 0]
+    ),
+]
+const fakeBabsIconSet = new DrawingIconSet(
+    'babs',
+    false,
+    'https://another.fake.url',
+    'https://another.fake.template'
+)
+fakeBabsIconSet.icons = [
+    new DrawingIcon(
+        'babs-3',
+        'https://fake.image.url',
+        'https://fake.template.url',
+        'default',
+        [0, 0]
+    ),
+]
+const fakeIconSets = [fakeDefaultIconSet, fakeBabsIconSet]
+
+/**
+ * @param {EditableFeature} feature
+ * @param {EditableFeatureTypes} expectedFeatureType
+ * @param {String} expectedTitle
+ * @param {String} expectedDescription
+ * @param {Number} expectedCoordinateCount
+ */
+function performStandardChecks(
+    feature,
+    expectedFeatureType,
+    expectedTitle = '',
+    expectedDescription = '',
+    expectedCoordinateCount = 2
+) {
+    expect(feature).to.be.not.null.and.not.undefined
+    expect(feature.coordinates).to.have.length.greaterThan(0)
+    if (feature.coordinates.length === 1) {
+        expect(feature.coordinates[0]).to.have.length(expectedCoordinateCount)
+    } else {
+        expect(feature.coordinates).to.have.length(expectedCoordinateCount)
+    }
+    // checking that it matches also what is defined in the underlying OL object
+    const olCoordinates = feature.olFeature.getGeometry().getCoordinates()
+    // if olCoordinates is only 1 in length, it means it is a closed polygon and we
+    // need to check the length of this polygon
+    if (olCoordinates.length === 1) {
+        expect(olCoordinates[0]).to.have.length(expectedCoordinateCount)
+    } else {
+        expect(olCoordinates).to.have.length(expectedCoordinateCount)
+    }
+    expect(feature.title).to.be.equal(expectedTitle)
+    expect(feature.description).to.equal(expectedDescription)
+    expect(feature.featureType).to.be.equal(expectedFeatureType)
+}
+
+describe('Validate deserialization of the mf-geoadmin3 viewer kml format', () => {
+    let features = []
+
+    function findFeatureWithId(featureId) {
+        return features.find((feature) => feature.id === featureId)
+    }
+
+    beforeEach(() => {
+        const kml = readFileSync(resolve(__dirname, './mfgeoadmin3TestKml.kml'), 'utf8')
+        const olFeatures = new KML().readFeatures(kml, {
+            featureProjection: CoordinateSystems.WEBMERCATOR.epsg,
+        })
+        features = []
+        for (const olFeature of olFeatures) {
+            const feature = getEditableFeatureFromLegacyKmlFeature(olFeature, fakeIconSets)
+            expect(feature).to.be.not.null.and.not.undefined
+            feature.olFeature = olFeature
+            features.push(feature)
+        }
+    })
+    describe('icon parsing', () => {
+        it('parses a marker with a very small scale and blue fill color correctly', () => {
+            // ID in legacy KML is marker_1668530694970 but "marker" will be replaced by "drawing_feature"
+            const icon = findFeatureWithId('drawing_feature_1668530694970')
+            performStandardChecks(icon, EditableFeatureTypes.MARKER, 'icon 1', 'desc 1')
+            expect(icon.icon.name).to.be.equal('001-marker')
+            expect(icon.fillColor).to.be.equal(BLUE)
+            // old KMLs were using scales 0.5, 0.75 and 1.0, we are now having an extra 1.5 scale
+            // so legacy SMALL size has become VERY_SMALL
+            expect(icon.iconSize).to.be.equal(VERY_SMALL)
+        })
+        it('parses a marker with a small scale and grey fill color correctly', () => {
+            const icon = findFeatureWithId('drawing_feature_1668530774636')
+            performStandardChecks(icon, EditableFeatureTypes.MARKER, 'icon 2', 'desc 2')
+            expect(icon.icon.name).to.be.equal('002-circle')
+            expect(icon.fillColor).to.be.equal(GRAY)
+            expect(icon.iconSize).to.be.equal(SMALL)
+            expect(icon.textColor).to.be.equal(WHITE)
+        })
+        it('parses a marker with a big BABS icon correctly', () => {
+            const icon = findFeatureWithId('drawing_feature_1668530823345')
+            performStandardChecks(icon, EditableFeatureTypes.MARKER, 'icon 3', 'desc 3')
+            expect(icon.icon.name).to.be.equal('babs-3')
+            expect(icon.fillColor).to.be.equal(RED) // default should be red
+            expect(icon.iconSize).to.be.equal(MEDIUM)
+            expect(icon.textColor).to.be.equal(RED)
+        })
+    })
+    describe('text parsing', () => {
+        it('parses a small black text correctly', () => {
+            const standardText = findFeatureWithId('drawing_feature_1668530699494')
+            performStandardChecks(standardText, EditableFeatureTypes.ANNOTATION, 'text 1', '')
+            expect(standardText.textColor).to.be.equal(BLACK)
+            expect(standardText.textSize).to.be.equal(VERY_SMALL)
+            expect(standardText.fillColor).to.be.equal(RED) // default should be RED even if no icon is defined
+            expect(standardText.iconSize).to.be.equal(MEDIUM) // default should be MEDIUM even if no icon is defined
+            expect(standardText.icon).to.be.null
+        })
+        it('parses a medium blue text correctly', () => {
+            const standardText = findFeatureWithId('drawing_feature_1668530932170')
+            performStandardChecks(standardText, EditableFeatureTypes.ANNOTATION, 'text 2', '')
+            expect(standardText.textColor).to.be.equal(BLUE)
+            expect(standardText.textSize).to.be.equal(MEDIUM)
+            expect(standardText.fillColor).to.be.equal(RED) // default should be RED even if no icon is defined
+            expect(standardText.iconSize).to.be.equal(MEDIUM) // default should be MEDIUM even if no icon is defined
+            expect(standardText.icon).to.be.null
+        })
+        it('parses a large gray text correctly', () => {
+            const standardText = findFeatureWithId('drawing_feature_1668530944079')
+            performStandardChecks(standardText, EditableFeatureTypes.ANNOTATION, 'text 3', '')
+            expect(standardText.textColor).to.be.equal(GRAY)
+            expect(standardText.textSize).to.be.equal(LARGE)
+            expect(standardText.fillColor).to.be.equal(RED) // default should be RED even if no icon is defined
+            expect(standardText.iconSize).to.be.equal(MEDIUM) // default should be MEDIUM even if no icon is defined
+            expect(standardText.icon).to.be.null
+        })
+    })
+    describe('line/polygon parsing', () => {
+        it('parses a line/polygon with two points and black fill correctly', () => {
+            const line = findFeatureWithId('drawing_feature_1668530962424')
+            performStandardChecks(line, EditableFeatureTypes.LINEPOLYGON, '', 'desc 7', 2)
+            expect(line.textColor).to.be.equal(RED)
+            expect(line.textSize).to.be.equal(MEDIUM)
+            expect(line.fillColor).to.be.equal(BLACK)
+            expect(line.iconSize).to.be.equal(MEDIUM)
+            expect(line.icon).to.be.null
+        })
+        it('parses a line/polygon with two points and blue fill correctly', () => {
+            const line = findFeatureWithId('drawing_feature_1668530991477')
+            performStandardChecks(line, EditableFeatureTypes.LINEPOLYGON, '', 'desc 8', 2)
+            expect(line.textColor).to.be.equal(RED)
+            expect(line.textSize).to.be.equal(MEDIUM)
+            expect(line.fillColor).to.be.equal(BLUE)
+            expect(line.iconSize).to.be.equal(MEDIUM)
+            expect(line.icon).to.be.null
+        })
+        it('parses a line/polygon with five points and yello fill correctly', () => {
+            const line = findFeatureWithId('drawing_feature_1668625663095')
+            performStandardChecks(line, EditableFeatureTypes.LINEPOLYGON, '', 'desc 9', 5)
+            expect(line.textColor).to.be.equal(RED)
+            expect(line.textSize).to.be.equal(MEDIUM)
+            expect(line.fillColor).to.be.equal(YELLOW)
+            expect(line.iconSize).to.be.equal(MEDIUM)
+            expect(line.icon).to.be.null
+        })
+    })
+    describe('measure parsing', () => {
+        it('parses a measure with two points correctly', () => {
+            const line = findFeatureWithId('drawing_feature_1668531023034')
+            performStandardChecks(line, EditableFeatureTypes.MEASURE, '', '', 2)
+        })
+        it('parses a measure with three points correctly', () => {
+            const line = findFeatureWithId('drawing_feature_1668531037052')
+            performStandardChecks(line, EditableFeatureTypes.MEASURE, '', '', 3)
+        })
+    })
+})
diff --git a/src/utils/__tests__/mfgeoadmin3TestKml.kml b/src/utils/__tests__/mfgeoadmin3TestKml.kml
new file mode 100644
index 000000000..c3b7bebc5
--- /dev/null
+++ b/src/utils/__tests__/mfgeoadmin3TestKml.kml
@@ -0,0 +1,291 @@
+<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd">
+    <Document>
+        <name>Dessin</name>
+        <Placemark id="marker_1668530694970">
+            <ExtendedData>
+                <Data name="type">
+                    <value>marker</value>
+                </Data>
+            </ExtendedData>
+            <name>icon 1</name>
+            <description>desc 1</description>
+            <Style>
+                <IconStyle>
+                    <scale>0.5</scale>
+                    <Icon>
+                        <href>https://sys-api3.dev.bgdi.ch/color/0,0,255/marker-24@2x.png</href>
+                        <gx:w>48</gx:w>
+                        <gx:h>48</gx:h>
+                    </Icon>
+                    <hotSpot x="24" y="4.799999999999997" xunits="pixels" yunits="pixels" />
+                </IconStyle>
+                <LabelStyle>
+                    <color>ff00ffff</color>
+                    <scale>2</scale>
+                </LabelStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.174707229645867,47.194765869666504</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="annotation_1668530699494">
+            <ExtendedData>
+                <Data name="type">
+                    <value>annotation</value>
+                </Data>
+            </ExtendedData>
+            <name>text 1</name>
+            <description></description>
+            <Style>
+                <IconStyle>
+                    <scale>0</scale>
+                </IconStyle>
+                <LabelStyle>
+                    <color>ff000000</color>
+                </LabelStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.676137118359953,47.19033024383702</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="marker_1668530774636">
+            <ExtendedData>
+                <Data name="type">
+                    <value>marker</value>
+                </Data>
+            </ExtendedData>
+            <name>icon 2</name>
+            <description>desc 2</description>
+            <Style>
+                <IconStyle>
+                    <scale>0.75</scale>
+                    <Icon>
+                        <href>https://sys-api3.dev.bgdi.ch/color/128,128,128/circle-24@2x.png</href>
+                        <gx:w>48</gx:w>
+                        <gx:h>48</gx:h>
+                    </Icon>
+                </IconStyle>
+                <LabelStyle>
+                    <color>ffffffff</color>
+                </LabelStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.156058625106751,46.97884175366133</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="marker_1668530823345">
+            <ExtendedData>
+                <Data name="type">
+                    <value>marker</value>
+                </Data>
+            </ExtendedData>
+            <name>icon 3</name>
+            <description>desc 3</description>
+            <Style>
+                <IconStyle>
+                    <Icon>
+                        <href>https://sys-api3.dev.bgdi.ch/images/babs/babs-3.png</href>
+                        <gx:w>48</gx:w>
+                        <gx:h>48</gx:h>
+                    </Icon>
+                </IconStyle>
+                <LabelStyle>
+                    <color>ff0000ff</color>
+                    <scale>1.5</scale>
+                </LabelStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.173379660436119,46.79897707209845</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="annotation_1668530932170">
+            <ExtendedData>
+                <Data name="type">
+                    <value>annotation</value>
+                </Data>
+            </ExtendedData>
+            <name>text 2</name>
+            <description></description>
+            <Style>
+                <IconStyle>
+                    <scale>0</scale>
+                </IconStyle>
+                <LabelStyle>
+                    <color>ffff0000</color>
+                    <scale>1.5</scale>
+                </LabelStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.672124180684182,47.026181008957764</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="annotation_1668530944079">
+            <ExtendedData>
+                <Data name="type">
+                    <value>annotation</value>
+                </Data>
+            </ExtendedData>
+            <name>text 3</name>
+            <description></description>
+            <Style>
+                <IconStyle>
+                    <scale>0</scale>
+                </IconStyle>
+                <LabelStyle>
+                    <color>ff808080</color>
+                    <scale>2</scale>
+                </LabelStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.645108322032411,46.8418304984009</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="linepolygon_1668530962424">
+            <ExtendedData>
+                <Data name="type">
+                    <value>linepolygon</value>
+                </Data>
+            </ExtendedData>
+            <description>desc 7</description>
+            <Style>
+                <LineStyle>
+                    <color>ff000000</color>
+                    <width>3</width>
+                </LineStyle>
+                <PolyStyle>
+                    <color>66000000</color>
+                </PolyStyle>
+            </Style>
+            <LineString>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>8.101911065254011,47.20890519932012 8.78807916898707,47.19841048822741</coordinates>
+            </LineString>
+        </Placemark>
+        <Placemark id="linepolygon_1668530991477">
+            <ExtendedData>
+                <Data name="type">
+                    <value>linepolygon</value>
+                </Data>
+            </ExtendedData>
+            <description>desc 8</description>
+            <Style>
+                <LineStyle>
+                    <color>ffff0000</color>
+                    <width>3</width>
+                </LineStyle>
+                <PolyStyle>
+                    <color>66ff0000</color>
+                </PolyStyle>
+            </Style>
+            <LineString>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>8.093138508619504,47.03130065442874 8.809569202680157,47.006985820533394</coordinates>
+            </LineString>
+        </Placemark>
+        <Placemark id="measure_1668531023034">
+            <ExtendedData>
+                <Data name="overlays" />
+                <Data name="type">
+                    <value>measure</value>
+                </Data>
+            </ExtendedData>
+            <Style>
+                <LineStyle>
+                    <color>ff0000ff</color>
+                    <width>3</width>
+                </LineStyle>
+                <PolyStyle>
+                    <color>660000ff</color>
+                </PolyStyle>
+            </Style>
+            <LineString>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>8.064599217438573,46.840305862388725 9.029823390790018,46.78371218093456</coordinates>
+            </LineString>
+        </Placemark>
+        <Placemark id="measure_1668531037052">
+            <ExtendedData>
+                <Data name="overlays" />
+                <Data name="type">
+                    <value>measure</value>
+                </Data>
+            </ExtendedData>
+            <Style>
+                <LineStyle>
+                    <color>ff0000ff</color>
+                    <width>3</width>
+                </LineStyle>
+                <PolyStyle>
+                    <color>660000ff</color>
+                </PolyStyle>
+            </Style>
+            <LineString>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>8.016572173842913,46.64040453564143 8.499153637515965,46.60544796542086 8.893611064585631,46.589843133245395</coordinates>
+            </LineString>
+        </Placemark>
+        <Placemark id="marker_1668607213404">
+            <ExtendedData>
+                <Data name="type">
+                    <value>marker</value>
+                </Data>
+            </ExtendedData>
+            <name></name>
+            <description>desc 10</description>
+            <Style>
+                <IconStyle>
+                    <Icon>
+                        <href>https://sys-api3.dev.bgdi.ch/color/0,128,0/square-24@2x.png</href>
+                        <gx:w>48</gx:w>
+                        <gx:h>48</gx:h>
+                    </Icon>
+                </IconStyle>
+            </Style>
+            <Point>
+                <tessellate>1</tessellate>
+                <altitudeMode>clampToGround</altitudeMode>
+                <coordinates>7.122730979678771,46.50199343196728</coordinates>
+            </Point>
+        </Placemark>
+        <Placemark id="linepolygon_1668625663095">
+            <ExtendedData>
+                <Data name="type">
+                    <value>linepolygon</value>
+                </Data>
+            </ExtendedData>
+            <description>desc 9</description>
+            <Style>
+                <LineStyle>
+                    <color>ff00ffff</color>
+                    <width>3</width>
+                </LineStyle>
+                <PolyStyle>
+                    <color>6600ffff</color>
+                </PolyStyle>
+            </Style>
+            <Polygon>
+                <outerBoundaryIs>
+                    <LinearRing>
+                        <coordinates>7.51115386937066,47.155696556678855,0 7.274907108447742,46.79579538805226,0 8.574407915810442,46.614843162382584,0 8.616346517727928,47.04174329321305,0 7.51115386937066,47.155696556678855,0</coordinates>
+                    </LinearRing>
+                </outerBoundaryIs>
+            </Polygon>
+        </Placemark>
+    </Document>
+</kml>
diff --git a/src/utils/featureStyleUtils.js b/src/utils/featureStyleUtils.js
index db376166e..d1c1a7af8 100644
--- a/src/utils/featureStyleUtils.js
+++ b/src/utils/featureStyleUtils.js
@@ -139,13 +139,14 @@ export class FeatureStyleSize {
     }
 }
 
-export const SMALL = new FeatureStyleSize('small_size', 1.0, 0.5)
+export const VERY_SMALL = new FeatureStyleSize('very_small_size', 1.0, 0.5)
+export const SMALL = new FeatureStyleSize('small_size', 1.25, 0.75)
 export const MEDIUM = new FeatureStyleSize('medium_size', 1.5, 1.0)
-export const LARGE = new FeatureStyleSize('big_size', 2.0, 2.0)
+export const LARGE = new FeatureStyleSize('big_size', 2.0, 1.5)
 
 /**
  * List of all available sizes for drawing style
  *
  * @type {FeatureStyleSize[]}
  */
-export const allStylingSizes = [SMALL, MEDIUM, LARGE]
+export const allStylingSizes = [VERY_SMALL, SMALL, MEDIUM, LARGE]
diff --git a/src/utils/legacyKmlUtils.js b/src/utils/legacyKmlUtils.js
new file mode 100644
index 000000000..248b5358e
--- /dev/null
+++ b/src/utils/legacyKmlUtils.js
@@ -0,0 +1,269 @@
+import { EditableFeature, EditableFeatureTypes } from '@/api/features.api'
+import { DrawingIcon } from '@/api/icon.api'
+import { extractOlFeatureCoordinates } from '@/modules/drawing/lib/drawingUtils'
+import {
+    allStylingColors,
+    allStylingSizes,
+    FeatureStyleColor,
+    FeatureStyleSize, MEDIUM, RED, SMALL
+} from "@/utils/featureStyleUtils";
+import log from '@/utils/logging'
+import Feature from 'ol/Feature'
+import { getDefaultStyle } from 'ol/format/KML'
+import { Polygon } from 'ol/geom'
+import IconStyle from 'ol/style/Icon'
+import Style from 'ol/style/Style'
+
+/**
+ * This is a helper function for {@link deserialize} that generates an editable feature based on the
+ * style stored in the kml '<style>' tag. Only works with kmls that were generated with
+ * mf-geoadmin3
+ *
+ * @param {Feature} legacyKmlFeature An olFeature that was just deserialized with {@link KML}
+ * @param {DrawingIconSet[]} availableIconSets
+ * @returns {EditableFeature}
+ */
+export function getEditableFeatureFromLegacyKmlFeature(legacyKmlFeature, availableIconSets) {
+    if (
+        !(legacyKmlFeature instanceof Feature) ||
+        !Array.isArray(availableIconSets) ||
+        availableIconSets.length === 0
+    ) {
+        return null
+    }
+    const geom = legacyKmlFeature.getGeometry()
+    // The kml parser automatically created a style based on the "<style>" part of the feature in the kml file.
+    // We will now analyse this style to retrieve all information we need to generate the editable feature.
+    const style = parseStyle(legacyKmlFeature)
+    if (!style) {
+        throw new Error('Parsing error: Could not get the style from the ol Feature')
+    }
+    const featureType = legacyKmlFeature.get('type').toUpperCase() // only set by mf-geoadmin3's kml
+    if (!Object.values(EditableFeatureTypes).includes(featureType)) {
+        throw new Error('Parsing error: Type of features in kml not recognized')
+    }
+    const coordinates = parseCoordinate(legacyKmlFeature)
+    if (geom instanceof Polygon) {
+        geom.setCoordinates([coordinates])
+    } else {
+        geom.setCoordinates(coordinates)
+    }
+    const textSize = parseTextSize(style)
+    const featureId = parseFeatureID(legacyKmlFeature)
+
+    const title = legacyKmlFeature.get('name') ?? ''
+    const textColor = title /*facultative on marker, never present on measure and linepolygon*/
+        ? getFromFillColorArray(style.getText()?.getFill()?.getColor())
+        : undefined
+    return EditableFeature.constructWithObject({
+        id: featureId,
+        coordinates: coordinates,
+        featureType: featureType,
+        title,
+        description: legacyKmlFeature.get('description') ?? '', // only set by mf-geoadmin3's kml
+        textColor,
+        /* Fillcolor can be either the color of the stroke or the color of the icon. If an icon
+        is defined, the following color will be overridden by the icon color. */
+        fillColor: getFromFillColorArray(style.getFill()?.getColor()),
+        textSize: title ? getFromTextScale(textSize) : undefined,
+        iconSize: undefined,
+        // This is at the end as it may overwrite arguments already defined above
+        ...findIconFromOlIcon(style, availableIconSets),
+    })
+}
+
+/**
+ * @param legacyKmlFeature
+ * @returns {Style}
+ */
+function parseStyle(legacyKmlFeature) {
+    const styles = legacyKmlFeature.getStyle()(legacyKmlFeature)
+    if (Array.isArray(styles)) {
+        return styles[0]
+    } else if (styles instanceof Style) {
+        return styles
+    }
+    return null
+}
+
+function parseCoordinate(legacyKmlFeature) {
+    let coordinates = extractOlFeatureCoordinates(legacyKmlFeature)
+    // We do not want to store the z coordinate (height)
+    if (Array.isArray(coordinates[0])) {
+        coordinates = coordinates.map((coordinate) => coordinate.slice(0, 2))
+    } else {
+        coordinates = coordinates.slice(0, 2)
+    }
+    return coordinates
+}
+
+/**
+ * @param {Style} style
+ * @returns {null | IconStyle}
+ */
+function parseIcon(style) {
+    if (!style && !(style instanceof Style)) {
+        return null
+    }
+    let icon = style.getImage()
+    if (!(icon instanceof IconStyle)) {
+        return null
+    }
+    // To interpret the KMLs the same way as GoogleEarth, the kml parser automatically adds a Google icon
+    // if no icon is present (i.e. for our text feature type), but we do not want that.
+    if (
+        icon?.getSrc()?.match(/google/) ||
+        icon?.getSrc() === getDefaultStyle()?.getImage()?.getSrc()
+    ) {
+        return null
+    }
+    return icon
+}
+
+/**
+ * @param {Style} style
+ * @returns {number}
+ */
+function parseTextSize(style) {
+    // When exporting the kml, the parser does not put a scale property when the scale is 1.
+    // But when importing the kml, it seems that the parser interprets the lack of a scale
+    // property as if the scale was 0.8, which is strange. The code below tries to fix that.
+    let textSize = style.getText()?.getScale()
+    if (textSize === getDefaultStyle()?.getText()?.getScale()) {
+        return 1
+    }
+    return textSize
+}
+
+function parseFeatureID(legacyKmlFeature) {
+    const featureType = legacyKmlFeature.get('type').toUpperCase()
+    // In the old viewer, the kml feature id is of the form: "<featuretype>_<id>".
+    // In the new viewer, it is of the form: "drawing_feature_<id>".
+    let featureId = legacyKmlFeature.getId().match(featureType.toLowerCase() + '_([0-9]+)$')?.[1]
+    if (featureId) {
+        return `drawing_feature_${featureId}`
+    }
+    return legacyKmlFeature.getId()
+}
+
+/**
+ * @param {Style} style An olIcon generated by a kml coming from mf-geoadmin3
+ * @param {DrawingIconSet[]} availableIconSets
+ * @returns A list of arguments that can be passed to {@link constructWithObject}.
+ */
+function findIconFromOlIcon(style, availableIconSets) {
+    const iconStyle = parseIcon(style)
+    if (!(style instanceof Style) || !iconStyle) {
+        return {}
+    }
+    iconStyle.setDisplacement([0, 0])
+    const url = iconStyle.getSrc()
+    const setName = url.match(/images\/(\w+)\/[^\/]+\.png$/)?.[1] ?? 'default'
+
+    const iconSet = availableIconSets.find((drawingIconSet) => drawingIconSet.name === setName)
+    if (!iconSet) {
+        log.error('Parsing error: Could not retrieve icon set from legacy icon URL')
+        return { icon: generateIconFromOlIcon(iconStyle) }
+    }
+    let icon = null,
+        args = {}
+    if (setName === 'default') {
+        let color = url
+            .match(/color\/([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})\/[^\/]+\.png$/)
+            ?.slice(1, 4)
+            ?.map((nb) => Math.min(Number(nb), 255))
+        if (!Array.isArray(color) || color.length !== 3) {
+            log.error('Parsing error: Could not retrieve color from legacy icon URL')
+            return {}
+        } else {
+            args.fillColor = getFromFillColorArray(color)
+        }
+        let iconName = url.match(/color\/[^\/]+\/(\w+)-24@2x\.png$/)?.[1] ?? 'unknown'
+        icon = iconSet.icons.find((drawingIcon) =>
+            drawingIcon.name.match('^[0-9]+-' + iconName + '$')
+        )
+    } else {
+        let iconName = url.match(/images\/\w+\/([\w-]+)\.png$/)?.[1]
+        icon = iconSet.icons.find((drawingIcon) => drawingIcon.name === iconName)
+    }
+    if (!icon) {
+        log.error('Parsing error: Could not retrieve icon from legacy icon URL')
+        args.icon = generateIconFromOlIcon(iconStyle)
+    } else {
+        args.icon = icon
+    }
+    /* For the openlayers scale property and the kml files generated by the old viewer,
+    a scale of 1 is the original size of the icon (which is always 48px for icons used by
+    the old viewer). In the kml format used by the new viewer however, a scale of 1 is
+    always 32px, no matter the size of the icon. So the kml formatter misinterprets the
+    kml scale property for kml files from the old viewer and we have to multiply that scale
+    by 1.5 to get the correct scale again.*/
+    // SMALL = 0.5 , MEDIUM = 0.75 , LARGE = 1 for icons from the old viewer
+    const iconScale = iconStyle.getScale() * 1.5
+    args.iconSize = getFromIconScale(iconScale)
+    return args
+}
+
+/**
+ * Return an instance of this class matching the requested fill color
+ *
+ * @param {[Number]} fillColor Rgb array of the requested fill color
+ * @returns {FeatureStyleColor}
+ */
+function getFromFillColorArray(fillColor) {
+    if (!fillColor) {
+        return RED
+    }
+    const fill =
+        '#' +
+        fillColor
+            .slice(0, 3)
+            .map((color) => ('0' + color.toString(16)).slice(-2))
+            .reduce((prev, current) => prev + current)
+    return allStylingColors.find((color) => color.fill === fill) ?? RED
+}
+
+/**
+ * Generates a new icon that has the url of the given olIcon
+ *
+ * @param {IconStyle} iconStyle
+ * @returns {DrawingIcon}
+ */
+function generateIconFromOlIcon(iconStyle) {
+    if (!iconStyle) {
+        return null
+    }
+    iconStyle.setDisplacement([0, 0])
+    const url = iconStyle.getSrc()
+    const size = iconStyle.getSize()
+    let anchor = iconStyle.getAnchor()
+    anchor[0] /= size[0]
+    anchor[1] /= size[1]
+    return url && anchor ? new DrawingIcon('unknown', url, url, 'unknown', anchor) : null
+}
+
+/**
+ * Return an instance of FeatureStyleSize matching the requested text scale
+ *
+ * @param {Number} textScale The requested text scale
+ * @returns {FeatureStyleSize}
+ */
+function getFromTextScale(textScale) {
+    if (textScale) {
+        return allStylingSizes.find((size) => size.textScale === textScale) ?? MEDIUM
+    }
+    return MEDIUM
+}
+
+/**
+ * Return an instance of this class matching the requested icon scale
+ *
+ * @param {Number} iconScale The requested icon scale
+ * @returns {FeatureStyleSize}
+ */
+function getFromIconScale(iconScale) {
+    if (iconScale) {
+        return allStylingSizes.find((size) => size.iconScale === iconScale) ?? SMALL
+    }
+    return SMALL
+}
diff --git a/src/utils/print.js b/src/utils/print.js
index f53832ce3..ea26fb2f9 100644
--- a/src/utils/print.js
+++ b/src/utils/print.js
@@ -4,11 +4,11 @@ import printJS from 'print-js'
  * Prints the content of the given HTML element through the browser print prompt. The user can then
  * decide to export that as a PDF or print it physically.
  *
- * @param {HTMLElement} htmlContent Some HTML, to be printed separately (no app GUI)
+ * @param {string} htmlElementId HTML Element ID, to be printed separately (no app GUI)
  */
-const promptUserToPrintHtmlContent = (htmlContent) => {
+const promptUserToPrintHtmlContent = (htmlElementId) => {
     printJS({
-        printable: htmlContent,
+        printable: htmlElementId,
         type: 'html',
     })
 }
diff --git a/tests/e2e-cypress/fixtures/service-kml/lonelyMarker.kml b/tests/e2e-cypress/fixtures/service-kml/lonelyMarker.kml
index 85fdb5ccd..bfa04df0b 100644
--- a/tests/e2e-cypress/fixtures/service-kml/lonelyMarker.kml
+++ b/tests/e2e-cypress/fixtures/service-kml/lonelyMarker.kml
@@ -1,7 +1,7 @@
 <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/kml/2.2 https://developers.google.com/kml/schema/kml22gx.xsd">
     <Document>
         <name>Dessin</name>
-        <Placemark id="149">
+        <Placemark id="drawing_feature_149">
             <description></description>
             <Style />
             <ExtendedData>
diff --git a/tests/e2e-cypress/integration/drawing/share.cy.js b/tests/e2e-cypress/integration/drawing/share.cy.js
index 4927d2ef5..9c3d560a8 100644
--- a/tests/e2e-cypress/integration/drawing/share.cy.js
+++ b/tests/e2e-cypress/integration/drawing/share.cy.js
@@ -8,25 +8,75 @@ describe('Drawing toolbox actions', () => {
         cy.drawGeoms()
         cy.wait('@post-kml')
     })
-    it('generates a URL with the public file ID for a standard share link', () => {
-        cy.get(shareButton).click()
-        cy.get('[data-cy="drawing-share-normal-link"]').click()
-        // checking that the ID present in the "normal" link matches the
-        // public file ID (and not the admin ID)
-        cy.readStoreValue('state.drawing.drawingKmlIds').then((ids) => {
-            cy.readClipboardValue().then((clipboardText) => {
-                expect(clipboardText).to.contain(`/${ids.fileId}`)
-                expect(clipboardText).to.not.contain(`@adminId=${ids.adminId}`)
+    context(`With shortlink`, () => {
+        const dummyShortLink = 'https://dummy.short.link'
+        beforeEach(() => {
+            cy.intercept('POST', /^https?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: dummyShortLink },
+            }).as('shortLink')
+            cy.get(shareButton).click()
+        })
+        it('Generates a shorten URL for the public file share link', () => {
+            cy.readStoreValue('state.drawing.drawingKmlIds').then((ids) => {
+                cy.wait('@shortLink').then((intercept) => {
+                    expect(intercept.request.body).to.haveOwnProperty('url')
+                    expect(intercept.request.body.url).to.contain(`/${ids.fileId}`)
+                    // expect(intercept.request.body.url).to.not.contain(`@adminId=${ids.adminId}`)
+                })
+                // Check that the copied URL is the shorten one
+                cy.get('[data-cy="drawing-share-normal-link"]').click()
+                cy.readClipboardValue().then((clipboardText) => {
+                    expect(clipboardText).to.be.equal(
+                        dummyShortLink,
+                        `Share link is not a shortlink`
+                    )
+                })
+            })
+        })
+        it('Generates a shorten URL for the admin share link', () => {
+            cy.readStoreValue('state.drawing.drawingKmlIds').then((ids) => {
+                cy.wait('@shortLink').then((intercept) => {
+                    expect(intercept.request.body).to.haveOwnProperty('url')
+                    expect(intercept.request.body.url).to.contain(`/${ids.fileId}`)
+                    // expect(intercept.request.body.url).to.not.contain(`@adminId=${ids.adminId}`)
+                })
+                // Check that the copied URL is the shorten one
+                cy.get('[data-cy="drawing-share-admin-link"]').click()
+                cy.readClipboardValue().then((clipboardText) => {
+                    expect(clipboardText).to.be.equal(
+                        dummyShortLink,
+                        `Share link is not a shortlink`
+                    )
+                })
             })
         })
     })
-    it('generates a URL with the adminId when sharing a "draw later" link', () => {
-        cy.get(shareButton).click()
-        cy.get('[data-cy="drawing-share-admin-link"]').click()
-        cy.readStoreValue('state.drawing.drawingKmlIds').then((ids) => {
-            cy.readClipboardValue().then((clipboardText) => {
-                expect(clipboardText).to.contain(`/${ids.fileId}`)
-                expect(clipboardText).to.contain(`@adminId=${ids.adminId}`)
+    context(`Without shortlink -> fallback to non shorten share url`, () => {
+        beforeEach(() => {
+            // Intercept the shortlink and return an HTTP 500 to test fallback to non shorten url
+            cy.intercept('POST', /^https?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                statusCode: 500,
+            })
+            cy.get(shareButton).click()
+        })
+        it('Generates a URL with the public file ID for a standard share link', () => {
+            cy.get('[data-cy="drawing-share-normal-link"]').click()
+            // checking that the ID present in the "normal" link matches the
+            // public file ID (and not the admin ID)
+            cy.readStoreValue('state.drawing.drawingKmlIds').then((ids) => {
+                cy.readClipboardValue().then((clipboardText) => {
+                    expect(clipboardText).to.contain(`/${ids.fileId}`)
+                    expect(clipboardText).to.not.contain(`@adminId=${ids.adminId}`)
+                })
+            })
+        })
+        it('Generates a URL with the adminId when sharing a "draw later" link', () => {
+            cy.get('[data-cy="drawing-share-admin-link"]').click()
+            cy.readStoreValue('state.drawing.drawingKmlIds').then((ids) => {
+                cy.readClipboardValue().then((clipboardText) => {
+                    expect(clipboardText).to.contain(`/${ids.fileId}`)
+                    expect(clipboardText).to.contain(`@adminId=${ids.adminId}`)
+                })
             })
         })
     })
diff --git a/tests/e2e-cypress/integration/footer.cy.js b/tests/e2e-cypress/integration/footer.cy.js
index fafffb2ea..76a9329b7 100644
--- a/tests/e2e-cypress/integration/footer.cy.js
+++ b/tests/e2e-cypress/integration/footer.cy.js
@@ -21,5 +21,6 @@ describe('Testing the footer content', () => {
             cy.get(dezoomSelector).click().click().click()
             cy.get(scaleLineSelector).should('not.be.visible')
         })
+
     })
 })
diff --git a/tests/e2e-cypress/integration/mouseposition.cy.js b/tests/e2e-cypress/integration/mouseposition.cy.js
index 61181ff58..914734d06 100644
--- a/tests/e2e-cypress/integration/mouseposition.cy.js
+++ b/tests/e2e-cypress/integration/mouseposition.cy.js
@@ -2,7 +2,6 @@
 
 import { CoordinateSystems } from '@/utils/coordinateUtils'
 import setupProj4 from '@/utils/setupProj4'
-import { Decoder } from '@nuintun/qrcode'
 import proj4 from 'proj4'
 
 setupProj4()
@@ -46,11 +45,17 @@ function checkXY(expectedX, expectedY) {
 
 function checkMousePositionStringValue(coordStr) {
     cy.get('[data-cy="map"]').click()
+    cy.waitUntilState((state) => {
+        return state.map.clickInfo !== null
+    })
     cy.get('[data-cy="mouse-position"]').should('contain.text', coordStr)
 }
 
 function checkMousePositionNumberValue(expectedX, expectedY, parser) {
     cy.get('[data-cy="map"]').click()
+    cy.waitUntilState((state) => {
+        return state.map.clickInfo !== null
+    })
     cy.get('[data-cy="mouse-position"]')
         .invoke('text')
         .then(parser)
@@ -113,6 +118,9 @@ describe('Test mouse position', () => {
             cy.viewport(320, 1000)
             cy.goToMapView('en', { lat, lon })
             cy.get('[data-cy="map"]').rightclick()
+            cy.waitUntilState((state) => {
+                return state.map.clickInfo !== null
+            })
         })
         it('Test the LocationPopUp is visible', () => {
             cy.get('[data-cy="location-popup"]').should('be.visible')
@@ -174,44 +182,115 @@ describe('Test mouse position', () => {
             it('Uses the coordination system MGRS in the popup', () => {
                 cy.get('[data-cy="location-popup-coordinates-mgrs"]').contains('32TMQ 21184 83436')
             })
-            it('Tests the link with bowl crosshair gives the right coordinates', () => {
-                cy.get('[data-cy="location-popup-link-bowl-crosshair"]')
-                    .invoke('val')
-                    .then((value) => {
-                        const search = value.split('?')[1]
-                        const params = new URLSearchParams(search)
-                        return [parseFloat(params.get('lon')), parseFloat(params.get('lat'))]
-                    })
-                    .then(checkXY(lon, lat))
-            })
-            it('The QR code points to the right coordinates and has a crosshair', () => {
-                const decoder = new Decoder()
-                cy.get('[data-cy="location-popup-qr-code"').then(($element) => {
-                    decoder
-                        .scan($element.attr('src'))
-                        .then((result) => {
-                            const search = result.data.split('?')[1]
-                            const params = new URLSearchParams(search)
-                            expect(params.get('crosshair')).to.not.be.empty
-                            return [parseFloat(params.get('lon')), parseFloat(params.get('lat'))]
-                        })
-                        .then(checkXY(lon, lat))
-                })
-            })
-            it('The QR code updates when the layer config changes', () => {
-                const decoder = new Decoder()
-                cy.get('[data-cy="location-popup-qr-code"').then(($element) => {
-                    decoder.scan($element.attr('src')).then((result) => {
-                        result.data.includes('bgLayer=ch.swisstopo.pixelkarte-farbe')
-                    })
-                })
-                cy.get('[data-cy="background-selector').click()
-                cy.get('[data-cy="background-selector-void').click()
-                cy.get('[data-cy="location-popup-qr-code"').then(($element) => {
-                    decoder.scan($element.attr('src')).then((result) => {
-                        result.data.includes('bgLayer=void')
-                    })
-                })
+        })
+    })
+    context('LocationPopUp when rightclick on the map - shortlink and qrcode', function () {
+        const lat = 45
+        const lon = 8
+        beforeEach(() => {
+            cy.viewport(320, 1000)
+            cy.goToMapView('en', { lat, lon })
+        })
+        it('Tests that a link with crosshair and correct position is sent to shortlink', () => {
+            cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: 'https://s.geo.admin.ch/0000000', success: true },
+            }).as('shortlink')
+            cy.get('[data-cy="map"]').rightclick()
+            cy.wait('@shortlink').then((interception) => {
+                expect(interception.request.body.url).be.a('string')
+                const query = interception.request.body.url.split('?')[1]
+                const params = new URLSearchParams(query)
+                const position = [parseFloat(params.get('lon')), parseFloat(params.get('lat'))]
+                checkXY(...position)
+                expect(params.get('crosshair')).not.to.be.empty
+            })
+        })
+        it('Tests that the shortlink updates when the layer config changes', () => {
+            const shortUrl1 = 'https://s.geo.admin.ch/0000000'
+            cy.intercept('POST', /^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: shortUrl1, success: true },
+            }).as('shortlink')
+            cy.intercept(`**/api/qrcode/generate**`, {
+                fixture: 'service-qrcode/position-popup.png',
+            }).as('qrcode')
+
+            cy.get('[data-cy="map"]').rightclick()
+            cy.wait('@shortlink').then((interception) => {
+                expect(interception.request.body.url).be.a('string')
+                const query = interception.request.body.url.split('?')[1]
+                const params = new URLSearchParams(query)
+                expect(params.get('bgLayer')).to.be.equal(
+                    'ch.swisstopo.leichte-basiskarte_world.vt'
+                )
+            })
+            cy.get('[data-cy="location-popup-link-input"]').should('have.value', shortUrl1)
+
+            const shortUrl2 = 'https://s.geo.admin.ch/1111111'
+            cy.intercept('POST', /^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: shortUrl2, success: true },
+            }).as('shortlink-bg-void')
+            cy.get('[data-cy="background-selector').click()
+            cy.get('[data-cy="background-selector-void').click()
+            cy.wait('@shortlink-bg-void').then((interception) => {
+                expect(interception.request.body.url).be.a('string')
+                const query = interception.request.body.url.split('?')[1]
+                const params = new URLSearchParams(query)
+                expect(params.get('bgLayer')).to.be.equal('void')
+            })
+            cy.get('[data-cy="location-popup-link-input"]').should('have.value', shortUrl2)
+        })
+        it('Tests that a shortlink is passed to qrcode', () => {
+            const shortUrl = 'https://s.geo.admin.ch/0000000'
+            cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: shortUrl, success: true },
+            }).as('shortlink')
+            cy.intercept(`**/api/qrcode/generate**`, {
+                fixture: 'service-qrcode/position-popup.png',
+            }).as('qrcode')
+            cy.get('[data-cy="map"]').rightclick()
+            cy.wait('@qrcode').then((interception) => {
+                expect(interception.request.url).not.to.be.empty
+                expect(interception.request.url).to.include('?')
+                const query = interception.request.url.split('?')[1]
+                const params = new URLSearchParams(query)
+                expect(params.get('url')).to.be.equal(shortUrl)
+            })
+        })
+        it('Tests that the QR code updates when the layer config changes', () => {
+            const shortUrl1 = 'https://s.geo.admin.ch/0000000'
+            cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: shortUrl1, success: true },
+            }).as('shortlink')
+            cy.intercept(`**/api/qrcode/generate**`, {
+                fixture: 'service-qrcode/position-popup.png',
+            }).as('qrcode')
+            cy.get('[data-cy="map"]').rightclick()
+            cy.wait('@qrcode').then((interception) => {
+                expect(interception.request.url).not.to.be.empty
+                expect(interception.request.url).to.include('?')
+                const query = interception.request.url.split('?')[1]
+                const params = new URLSearchParams(query)
+                expect(params.get('url')).to.be.equal(shortUrl1)
+            })
+            cy.get('[data-cy="location-popup-qr-code"').then(($element) => {
+                expect($element.attr('src')).not.to.be.empty
+            })
+
+            const shortUrl2 = 'https://s.geo.admin.ch/1111111'
+            cy.intercept(/^http[s]?:\/\/(sys-s\.\w+\.bgdi\.ch|s\.geo\.admin\.ch)\//, {
+                body: { shorturl: shortUrl2, success: true },
+            }).as('shortlink')
+            cy.get('[data-cy="background-selector').click()
+            cy.get('[data-cy="background-selector-void').click()
+            cy.wait('@qrcode').then((interception) => {
+                expect(interception.request.url).not.to.be.empty
+                expect(interception.request.url).to.include('?')
+                const query = interception.request.url.split('?')[1]
+                const params = new URLSearchParams(query)
+                expect(params.get('url')).to.be.equal(shortUrl2)
+            })
+            cy.get('[data-cy="location-popup-qr-code"').then(($element) => {
+                expect($element.attr('src')).not.to.be.empty
             })
         })
     })
diff --git a/tests/e2e-cypress/integration/ribbon.cy.js b/tests/e2e-cypress/integration/ribbon.cy.js
new file mode 100644
index 000000000..9a2af1cf8
--- /dev/null
+++ b/tests/e2e-cypress/integration/ribbon.cy.js
@@ -0,0 +1,40 @@
+/// <reference types="cypress" />
+
+const ribbonSelector = '[data-cy="warning-ribbon"]'
+const BREAKPOINT_PHONE_WIDTH = 576
+
+
+
+describe('Testing the warning ribbon', () => {
+    beforeEach(() => {
+      cy.goToMapView()
+    })
+    context('Checking the warning ribbon', () => {
+      /*
+       * Normally, 'localhost' in not in the `WARNING_RIBBON_HOSTNAMES`constant,
+       * so the warning banner is not present on Cypress.
+       */
+
+      it('Ribbon shouldn\'t be be visible on localhost', () => {
+        cy.get(ribbonSelector).should('not.exist');
+      })
+
+      it('If ribbon do exist, it should be at top on a phone, bottom on desktop', () => {
+        // Conditional tests are bad on Cypress, but the banner we or not be present,
+        // depending on the hostname
+        cy.get(ribbonSelector)
+          // Bypassing the built-in existence assertion
+          .should(Cypress._.noop)
+          .then(($el) => {
+            if (!$el.length) {
+              return
+            }
+            if (Cypress.config().viewportWidth < BREAKPOINT_PHONE_WIDTH) {
+              cy.get(ribbonSelector).invoke('css', 'top').should('equal', '78px');
+            } else {
+              cy.get(ribbonSelector).invoke('css', 'bottom').should('equal', '50px');
+            }
+          })
+      })
+    })
+  })
\ No newline at end of file