diff --git a/packages/viewer/src/api/icon.api.ts b/packages/viewer/src/api/icon.api.ts
index 18df91957a..0a014b9f0f 100644
--- a/packages/viewer/src/api/icon.api.ts
+++ b/packages/viewer/src/api/icon.api.ts
@@ -3,12 +3,7 @@ import axios from 'axios'
 import { fromString } from 'ol/color'
 
 import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config'
-import {
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    LARGE,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { type FeatureStyleColor, LARGE, RED } from '@/utils/featureStyleUtils'
 
 /**
  * Generate an icon URL from its template. If no iconScale is given, the default scale 1 will be
@@ -17,19 +12,18 @@ import {
  *
  * @returns A full URL to this icon on the service-icons backend
  */
-export function generateIconURL(
-    icon: DrawingIcon,
-    iconColor: FeatureStyleColor = RED,
-    iconSize: FeatureStyleSize = LARGE
-) {
+export function generateIconURL(icon: DrawingIcon, iconColor: FeatureStyleColor = RED) {
     const rgb = fromString(iconColor.fill)
-    return icon.imageTemplateURL
-        .replace('{icon_set_name}', icon.iconSetName)
-        .replace('{icon_name}', icon.name)
-        .replace('{icon_scale}', iconSize.iconScale + 'x')
-        .replace('{r}', `${rgb[0]}`)
-        .replace('{g}', `${rgb[1]}`)
-        .replace('{b}', `${rgb[2]}`)
+    return (
+        icon.imageTemplateURL
+            .replace('{icon_set_name}', icon.iconSetName)
+            .replace('{icon_name}', icon.name)
+            // we always use the LARGE icon scale and resize the icon with the <IconStyle><scale> property in KMLs
+            .replace('{icon_scale}', LARGE.iconScale + 'x')
+            .replace('{r}', `${rgb[0]}`)
+            .replace('{g}', `${rgb[1]}`)
+            .replace('{b}', `${rgb[2]}`)
+    )
 }
 
 /**
diff --git a/packages/viewer/src/modules/drawing/components/DrawingToolbox.vue b/packages/viewer/src/modules/drawing/components/DrawingToolbox.vue
index 8888079847..70bfdabb35 100644
--- a/packages/viewer/src/modules/drawing/components/DrawingToolbox.vue
+++ b/packages/viewer/src/modules/drawing/components/DrawingToolbox.vue
@@ -2,7 +2,6 @@
 import type { SingleCoordinate } from '@swissgeo/coordinates'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import log from '@swissgeo/log'
 import GeoadminTooltip from '@swissgeo/tooltip'
 import DOMPurify from 'dompurify'
 import { computed, ref } from 'vue'
@@ -48,6 +47,7 @@ const showNoActiveKmlWarning = computed<boolean>(() => layersStore.activeKmlLaye
 const tooltipText = computed<string>(() =>
     t(showNoActiveKmlWarning.value ? 'drawing_empty_cannot_edit_name' : '')
 )
+
 const isDrawingLineOrMeasure = computed<boolean>(() => {
     return (
         !!drawingStore.edit.featureType &&
@@ -117,12 +117,7 @@ const online = computed(() => drawingStore.online)
 function onCloseClearConfirmation(confirmed: boolean) {
     showClearConfirmationModal.value = false
     if (confirmed) {
-        drawingStore.closeDrawing(dispatcher).catch((error) => {
-            log.error({
-                title: 'DrawingToolbox.vue',
-                messages: ['Error while closing drawing', error],
-            })
-        })
+        drawingStore.deleteCurrentDrawing(dispatcher)
     }
 }
 
@@ -373,6 +368,7 @@ $zindex-drawing-toolbox: -1;
     position: relative;
     z-index: $zindex-drawing-toolbox;
     transition: transform $animation-time;
+
     .button-open-close-draw-menu {
         height: $openCloseButtonHeight;
     }
@@ -397,6 +393,7 @@ $zindex-drawing-toolbox: -1;
     .drawing-toolbox {
         position: absolute;
         max-width: $menu-tray-width;
+
         .drawing-toolbox-content {
             transition: opacity $animation-time;
         }
@@ -419,4 +416,4 @@ $zindex-drawing-toolbox: -1;
         gap: 0.5rem 2rem;
     }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/packages/viewer/src/modules/drawing/components/useDrawingModeInteraction.composable.ts b/packages/viewer/src/modules/drawing/components/useDrawingModeInteraction.composable.ts
index 4d63b7ee20..b08dad9dde 100644
--- a/packages/viewer/src/modules/drawing/components/useDrawingModeInteraction.composable.ts
+++ b/packages/viewer/src/modules/drawing/components/useDrawingModeInteraction.composable.ts
@@ -268,6 +268,9 @@ export default function useDrawingModeInteraction(config?: UseDrawingModeInterac
     }
 
     function onDrawStart(event: DrawEvent) {
+        if (drawingStore.online && drawingStore.reportProblemDrawing) {
+            drawingStore.setReportProblemDrawing(false, dispatcher)
+        }
         if (isExtending && startingFeature) {
             // hide the starting feature and store its style to restore it later
             previousStyle = startingFeature.getStyle()
diff --git a/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue b/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue
index 7d19edc4d5..2449c228e9 100644
--- a/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue
+++ b/packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue
@@ -17,8 +17,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const generatedMediaLink = ref<string | undefined>(undefined)
-const linkDescription = ref<string | undefined>(undefined)
+const generatedMediaLink = ref<string>()
+const linkDescription = ref<string>()
 const isFormValid = ref<boolean>(false)
 const activateValidation = ref<boolean>(false)
 
@@ -117,14 +117,14 @@ function onUrlValidate(result: TextInputValidateResult): void {
                 placeholder="paste_url"
                 :validate="validateUrl"
                 data-cy="drawing-style-media-url"
-                @keydown.enter="addLink()"
+                @keydown.enter="addLink"
                 @validate="onUrlValidate"
             >
                 <button
                     class="btn btn-default btn-outline-group rounded-0 rounded-end"
                     type="button"
                     data-cy="drawing-style-media-generate-button"
-                    @click="addLink()"
+                    @click="addLink"
                 >
                     {{ t('add') }}
                 </button>
diff --git a/packages/viewer/src/modules/map/components/openlayers/OpenLayersVisibleLayers.vue b/packages/viewer/src/modules/map/components/openlayers/OpenLayersVisibleLayers.vue
index f7889eb6a5..0d38a4efc5 100644
--- a/packages/viewer/src/modules/map/components/openlayers/OpenLayersVisibleLayers.vue
+++ b/packages/viewer/src/modules/map/components/openlayers/OpenLayersVisibleLayers.vue
@@ -23,7 +23,7 @@ const filteredVisibleLayers = computed(() => {
     // In report problem drawing mode show the drawing layer and the temporary layer
     if (drawingStore.overlay.show && !drawingStore.online && drawingStore.layer.temporaryKmlId) {
         return layersStore.visibleLayers.filter(
-            (layer) => layer.id !== drawingStore.layer.temporaryKmlId
+            (layer) => layer.id !== `KML|${drawingStore.layer.temporaryKmlId}`
         )
     }
     return layersStore.visibleLayers
diff --git a/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue b/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue
index 4aa93f19db..0706d22f05 100644
--- a/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue
+++ b/packages/viewer/src/modules/menu/components/help/ReportProblemButton.vue
@@ -93,7 +93,7 @@ const isEmailValid = ref(true)
 const showDrawingOverlay = computed(() => drawingStore.overlay.show)
 
 const temporaryKml: ComputedRef<KMLLayer> = computed(
-    () => layersStore.systemLayers.find((l) => l.id === temporaryKmlId) as KMLLayer
+    () => layersStore.systemLayers.find((l) => l.id === `KML|${temporaryKmlId}`) as KMLLayer
 )
 
 const isTemporaryKmlValid = computed(
@@ -177,9 +177,10 @@ function closeAndCleanForm() {
     request.value.failed = false
     request.value.completed = false
     if (temporaryKml.value) {
-        layersStore.removeSystemLayer(temporaryKmlId, dispatcher)
+        layersStore.removeSystemLayer(`KML|${temporaryKmlId}`, dispatcher)
         drawingStore.clearDrawingFeatures(dispatcher)
     }
+    drawingStore.setReportProblemDrawing(false, dispatcher)
 }
 
 function onTextValidate(valid: boolean) {
@@ -224,6 +225,7 @@ function toggleDrawingOverlay() {
         },
         dispatcher
     )
+    drawingStore.setReportProblemDrawing(true, dispatcher)
 }
 
 function selectItem(dropdownItem: DropdownItem<string>) {
diff --git a/packages/viewer/src/store/modules/drawing/actions/clearDrawingFeatures.ts b/packages/viewer/src/store/modules/drawing/actions/clearDrawingFeatures.ts
index ab491c2120..fde547a85a 100644
--- a/packages/viewer/src/store/modules/drawing/actions/clearDrawingFeatures.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/clearDrawingFeatures.ts
@@ -1,7 +1,10 @@
 import type { DrawingStore } from '@/store/modules/drawing/types/drawing'
 import type { ActionDispatcher } from '@/store/types'
 
+import { DrawingSaveState } from '@/store/modules/drawing/types/DrawingSaveState.enum'
+
 export default function clearDrawingFeatures(this: DrawingStore, dispatcher: ActionDispatcher) {
     this.feature.all = []
     this.feature.current = undefined
-}
+    this.save.state = DrawingSaveState.Initial
+}   
diff --git a/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts b/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts
index b2226df532..da6aa2cbbc 100644
--- a/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts
@@ -41,25 +41,27 @@ export default async function closeDrawing(this: DrawingStore, dispatcher: Actio
             await debounceSaveDrawing({ debounceTime: 0, retryOnError: false })
         }
 
-        this.toggleDrawingOverlay(
-            {
-                show: false,
-            },
-            dispatcher
-        )
-
         if (this.layer.config) {
             // flagging the layer as not edited anymore (not displayed on the map by the drawing module anymore)
-            layersStore.updateLayer<KMLLayer>(
-                this.layer.config,
-                {
+            if (!this.online) {
+                const updatedLayer = {
+                    ...this.layer.config,
                     isEdited: false,
-                },
-                dispatcher
-            )
+                }
+                layersStore.updateSystemLayer(updatedLayer, dispatcher)
+            } else {
+                layersStore.updateLayer<KMLLayer>(
+                    this.layer.config,
+                    {
+                        isEdited: false,
+                    },
+                    dispatcher
+                )
+            }
+
             delete this.layer.config
         }
-
+        this.overlay.show = false
         this.edit.featureType = undefined
         this.layer.ol?.getSource()?.clear()
 
diff --git a/packages/viewer/src/store/modules/drawing/actions/deleteCurrentDrawing.ts b/packages/viewer/src/store/modules/drawing/actions/deleteCurrentDrawing.ts
new file mode 100644
index 0000000000..1de1249018
--- /dev/null
+++ b/packages/viewer/src/store/modules/drawing/actions/deleteCurrentDrawing.ts
@@ -0,0 +1,29 @@
+import type { DrawingStore } from '@/store/modules/drawing/types/drawing'
+import type { ActionDispatcher } from '@/store/types'
+
+import { DrawingSaveState } from '@/store/modules/drawing/types/DrawingSaveState.enum'
+import useLayersStore from '@/store/modules/layers'
+
+export default function deleteCurrentDrawing(
+    this: DrawingStore,
+    dispatcher: ActionDispatcher
+) {
+    if (!this.layer.config && !this.layer.temporaryKmlId) {
+        return
+    }
+    this.clearDrawingFeatures(dispatcher)
+    this.setDrawingSaveState(DrawingSaveState.Initial, dispatcher)
+    this.setDrawingMode(undefined, dispatcher)
+    this.setIsDrawingEditShared(false, dispatcher)
+
+    const layersStore = useLayersStore()
+
+    if (this.online && this.layer.config?.id) {
+        layersStore.removeLayer(this.layer.config.id, dispatcher)
+    } else if (this.layer.temporaryKmlId) {
+        layersStore.removeSystemLayer(`KML|${this.layer.temporaryKmlId}`, dispatcher)
+    }
+
+    this.layer.ol?.getSource()?.clear()
+    this.edit.featureType = undefined
+}
diff --git a/packages/viewer/src/store/modules/drawing/actions/initiateDrawing.ts b/packages/viewer/src/store/modules/drawing/actions/initiateDrawing.ts
index aba3c21741..fa2a74de70 100644
--- a/packages/viewer/src/store/modules/drawing/actions/initiateDrawing.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/initiateDrawing.ts
@@ -68,8 +68,7 @@ export default async function initiateDrawing(
         }
 
         let kmlLayer: KMLLayer | undefined
-
-        if (preExistingDrawing) {
+        if (preExistingDrawing && this.online) {
             kmlLayer = preExistingDrawing
             this.isDrawingNew = !!kmlLayer.adminId
         } else if (adminId) {
@@ -97,7 +96,7 @@ export default async function initiateDrawing(
                 })
             ),
             config: kmlLayer,
-            temporaryKmlId,
+            temporaryKmlId: temporaryKmlId ?? this.layer.temporaryKmlId,
         }
 
         log.debug({
diff --git a/packages/viewer/src/store/modules/drawing/actions/setCurrentlyDrawnFeature.ts b/packages/viewer/src/store/modules/drawing/actions/setCurrentlyDrawnFeature.ts
index 41fe42e41b..e4c148574c 100644
--- a/packages/viewer/src/store/modules/drawing/actions/setCurrentlyDrawnFeature.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/setCurrentlyDrawnFeature.ts
@@ -30,6 +30,7 @@ export default function setCurrentlyDrawnFeature(
             profileStore.setProfileFeature(this.feature.current, dispatcher)
         }
         if (!this.feature.all.some((feature) => feature.id === this.feature.current?.id)) {
+            this.feature.all.push(this.feature.current)
             debounceSaveDrawing().catch((error) => {
                 log.error({
                     title: 'Drawing store / setCurrentlyDrawnFeature',
diff --git a/packages/viewer/src/store/modules/drawing/actions/setReportProblemDrawing.ts b/packages/viewer/src/store/modules/drawing/actions/setReportProblemDrawing.ts
new file mode 100644
index 0000000000..474cce9bf3
--- /dev/null
+++ b/packages/viewer/src/store/modules/drawing/actions/setReportProblemDrawing.ts
@@ -0,0 +1,10 @@
+import type { DrawingStore } from '@/store/modules/drawing/types/drawing'
+import type { ActionDispatcher } from '@/store/types'
+
+export default function setReportProblemDrawing(
+    this: DrawingStore,
+    isReportProblemDrawing: boolean,
+    dispatcher: ActionDispatcher
+) {
+    this.reportProblemDrawing = isReportProblemDrawing
+}
diff --git a/packages/viewer/src/store/modules/drawing/actions/toggleDrawingOverlay.ts b/packages/viewer/src/store/modules/drawing/actions/toggleDrawingOverlay.ts
index 43f2dfddda..477786d3f4 100644
--- a/packages/viewer/src/store/modules/drawing/actions/toggleDrawingOverlay.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/toggleDrawingOverlay.ts
@@ -22,11 +22,8 @@ export default function toggleDrawingOverlay(
     optionsOrDispatcher: ToggleDrawingOverlayOptions | ActionDispatcher,
     dispatcherOrNothing?: ActionDispatcher
 ) {
-    const options = !dispatcherOrNothing ? (optionsOrDispatcher as ToggleDrawingOverlayOptions) : {}
-    const dispatcher = dispatcherOrNothing
-        ? dispatcherOrNothing
-        : (optionsOrDispatcher as ActionDispatcher)
-
+    const dispatcher = dispatcherOrNothing ?? (optionsOrDispatcher as ActionDispatcher)
+    const options = dispatcherOrNothing ? (optionsOrDispatcher as ToggleDrawingOverlayOptions) : {}
     const { show, online, kmlId, title = 'draw_mode_title' } = options
     this.overlay.show = typeof show === 'boolean' ? show : !this.overlay.show
     this.overlay.title = title
diff --git a/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts b/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts
index bad7925d92..8cc71b62c2 100644
--- a/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts
+++ b/packages/viewer/src/store/modules/drawing/actions/updateCurrentDrawingFeature.ts
@@ -8,13 +8,7 @@ import { generateIconURL } from '@/api/icon.api'
 import { DrawingSaveState } from '@/store/modules/drawing/types/DrawingSaveState.enum'
 import debounceSaveDrawing from '@/store/modules/drawing/utils/debounceSaveDrawing'
 import useProfileStore from '@/store/modules/profile'
-import {
-    calculateTextOffset,
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    MEDIUM,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { calculateTextOffset } from '@/utils/featureStyleUtils'
 
 export default function updateCurrentDrawingFeature(
     this: DrawingStore,
@@ -24,21 +18,24 @@ export default function updateCurrentDrawingFeature(
     if (this.feature.current) {
         this.save.state = DrawingSaveState.UnsavedChanges
 
-        let needIconUrlRefresh = false
-
         Object.assign(this.feature.current, valuesToUpdate)
 
         // keeping values as preferred, if present, so that the next time the user draws, the values are used
         if (valuesToUpdate.iconSize) {
             this.edit.preferred.size = valuesToUpdate.iconSize
-            needIconUrlRefresh = true
         }
         if (valuesToUpdate.textSize) {
             this.edit.preferred.size = valuesToUpdate.textSize
         }
         if (valuesToUpdate.fillColor) {
             this.edit.preferred.color = valuesToUpdate.fillColor
-            needIconUrlRefresh = true
+            // refreshing the icon color if present
+            if (this.feature.current.icon) {
+                this.feature.current.icon.imageURL = generateIconURL(
+                    this.feature.current.icon,
+                    valuesToUpdate.fillColor
+                )
+            }
         }
         if (valuesToUpdate.textColor) {
             this.edit.preferred.color = valuesToUpdate.textColor
@@ -62,18 +59,6 @@ export default function updateCurrentDrawingFeature(
             }
         }
 
-        if (this.feature.current.icon && needIconUrlRefresh) {
-            const newIconSize: FeatureStyleSize =
-                valuesToUpdate.iconSize ?? this.feature.current.iconSize ?? MEDIUM
-            const newIconColor: FeatureStyleColor =
-                valuesToUpdate.fillColor ?? this.feature.current.fillColor ?? RED
-            this.feature.current.icon.imageURL = generateIconURL(
-                this.feature.current.icon,
-                newIconColor,
-                newIconSize
-            )
-        }
-
         const profileStore = useProfileStore()
         // updating the profile feature if the currently drawn feature is the profile feature
         if (profileStore.feature?.id === this.feature.current.id) {
diff --git a/packages/viewer/src/store/modules/drawing/getters/showNotSharedDrawingWarning.ts b/packages/viewer/src/store/modules/drawing/getters/showNotSharedDrawingWarning.ts
index 8875c6406b..8466ea2620 100644
--- a/packages/viewer/src/store/modules/drawing/getters/showNotSharedDrawingWarning.ts
+++ b/packages/viewer/src/store/modules/drawing/getters/showNotSharedDrawingWarning.ts
@@ -5,6 +5,7 @@ export default function showNotSharedDrawingWarning(this: DrawingStore): boolean
         !this.isVisitWithAdminId &&
         !this.isDrawingEditShared &&
         this.isDrawingModified &&
-        this.online
+        this.online &&
+        !this.reportProblemDrawing
     )
 }
diff --git a/packages/viewer/src/store/modules/drawing/index.ts b/packages/viewer/src/store/modules/drawing/index.ts
index 7b676e899a..15f2e0bb83 100644
--- a/packages/viewer/src/store/modules/drawing/index.ts
+++ b/packages/viewer/src/store/modules/drawing/index.ts
@@ -4,6 +4,7 @@ import type { DrawingStoreGetters, DrawingStoreState } from '@/store/modules/dra
 
 import clearDrawingFeatures from '@/store/modules/drawing/actions/clearDrawingFeatures'
 import closeDrawing from '@/store/modules/drawing/actions/closeDrawing'
+import deleteCurrentDrawing from '@/store/modules/drawing/actions/deleteCurrentDrawing'
 import deleteDrawingFeature from '@/store/modules/drawing/actions/deleteDrawingFeature'
 import initiateDrawing from '@/store/modules/drawing/actions/initiateDrawing'
 import loadAvailableIconSets from '@/store/modules/drawing/actions/loadAvailableIconSets'
@@ -15,6 +16,7 @@ import setDrawingSaveState from '@/store/modules/drawing/actions/setDrawingSaveS
 import setEditingMode from '@/store/modules/drawing/actions/setEditingMode'
 import setIsDrawingEditShared from '@/store/modules/drawing/actions/setIsDrawingEditShared'
 import setIsVisitWithAdminId from '@/store/modules/drawing/actions/setIsVisitWithAdminId'
+import setReportProblemDrawing from '@/store/modules/drawing/actions/setReportProblemDrawing'
 import toggleDrawingOverlay from '@/store/modules/drawing/actions/toggleDrawingOverlay'
 import updateCurrentDrawingFeature from '@/store/modules/drawing/actions/updateCurrentDrawingFeature'
 import updateDrawingPreferences from '@/store/modules/drawing/actions/updateDrawingPreferences'
@@ -56,6 +58,7 @@ const state = (): DrawingStoreState => ({
         state: DrawingSaveState.Initial,
         pending: undefined,
     },
+    reportProblemDrawing: false,
     online: true,
     name: undefined,
     isDrawingNew: true,
@@ -70,6 +73,8 @@ const getters: DrawingStoreGetters = {
 }
 
 const actions = {
+    deleteCurrentDrawing,
+    setReportProblemDrawing,
     clearDrawingFeatures,
     deleteDrawingFeature,
     loadAvailableIconSets,
diff --git a/packages/viewer/src/store/modules/drawing/types/drawing.ts b/packages/viewer/src/store/modules/drawing/types/drawing.ts
index f34b94aab5..e91064f1af 100644
--- a/packages/viewer/src/store/modules/drawing/types/drawing.ts
+++ b/packages/viewer/src/store/modules/drawing/types/drawing.ts
@@ -56,6 +56,8 @@ export interface DrawingStoreState {
         state: DrawingSaveState
         pending: ReturnType<typeof setTimeout> | undefined
     }
+    /** Flag to indicate if the user is currently reporting a problem with the drawing */
+    reportProblemDrawing: boolean
     /** KML is saved online using the KML backend service */
     online: boolean
     /** The name of the drawing, or undefined if no drawing is currently edited. */
diff --git a/packages/viewer/src/store/modules/drawing/utils/debounceSaveDrawing.ts b/packages/viewer/src/store/modules/drawing/utils/debounceSaveDrawing.ts
index 19ca1734bf..37080e46ef 100644
--- a/packages/viewer/src/store/modules/drawing/utils/debounceSaveDrawing.ts
+++ b/packages/viewer/src/store/modules/drawing/utils/debounceSaveDrawing.ts
@@ -40,15 +40,47 @@ function willModify() {
     }
 }
 
+async function saveLocalDrawing(kmlData: string) {
+    const drawingStore = useDrawingStore()
+    const layersStore = useLayersStore()
+    const kmlMetadata = await createKml(kmlData)
+
+    const kmlLayer = layerUtils.makeKMLLayer({
+        name: drawingStore.name,
+        kmlFileUrl: drawingStore.layer.temporaryKmlId,
+        isVisible: true,
+        opacity: 1,
+        kmlData: kmlData,
+        kmlMetadata,
+        adminId: kmlMetadata.adminId,
+        isEdited: true,
+    })
+    drawingStore.layer.config = kmlLayer
+
+    if (!layersStore.systemLayers.find((systemLayer) => systemLayer.id === kmlLayer.id)) {
+        layersStore.addSystemLayer(kmlLayer, dispatcher)
+    } else {
+        layersStore.updateSystemLayer(kmlLayer, dispatcher)
+    }
+}
+
 async function saveDrawing({ retryOnError = true }: { retryOnError?: boolean }) {
     const drawingStore = useDrawingStore()
 
-    if (!drawingStore.layer.ol || !drawingStore.online) {
+    if (!drawingStore.layer.ol) {
         return
     }
-
-    const layersStore = useLayersStore()
     const positionStore = usePositionStore()
+    const kmlData = generateKmlString(
+        positionStore.projection,
+        drawingStore.layer.ol?.getSource()?.getFeatures() ?? [],
+        drawingStore.name
+    )
+    if (!drawingStore.online) {
+        await saveLocalDrawing(kmlData)
+        return
+    }
+    const layersStore = useLayersStore()
 
     try {
         log.debug({
diff --git a/packages/viewer/src/store/modules/layers/actions/removeLayer.ts b/packages/viewer/src/store/modules/layers/actions/removeLayer.ts
index 9e5b711892..2cf4c0b188 100644
--- a/packages/viewer/src/store/modules/layers/actions/removeLayer.ts
+++ b/packages/viewer/src/store/modules/layers/actions/removeLayer.ts
@@ -57,7 +57,6 @@ export default function removeLayer(
             (layer) => !matchTwoLayers(layerId, isExternal, baseUrl, layer)
         )
     }
-
     removedLayers.forEach((layer) => {
         if (layer.type === LayerType.GEOJSON) {
             const geoJsonLayer = layer as GeoAdminGeoJSONLayer
diff --git a/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts b/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts
index db07e1d2d4..dc38e84260 100644
--- a/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts
+++ b/packages/viewer/src/utils/__tests__/kmlUtils.spec.ts
@@ -12,7 +12,7 @@ import type { EditableFeature } from '@/api/features.api'
 import { type DrawingIconSet, generateIconURL } from '@/api/icon.api'
 import { getServiceKmlBaseUrl } from '@/config/baseUrl.config'
 import { fakeIconSets } from '@/utils/__tests__/legacyKmlUtils.spec'
-import { BLUE, EXTRA_LARGE } from '@/utils/featureStyleUtils'
+import { BLUE } from '@/utils/featureStyleUtils'
 import {
     getIcon,
     getKmlExtent,
@@ -350,7 +350,7 @@ describe('Test KML utils', () => {
                 'https://fake.image.url/api/icons/sets/default/icons/001-marker@1x-255,0,0.png'
             )
         })
-        it('get icon with standard arguments from the set with scale and color', () => {
+        it('get icon with standard arguments from the set with color', () => {
             const icon = getIcon(
                 {
                     set: 'default',
@@ -363,8 +363,8 @@ describe('Test KML utils', () => {
             expect(icon).toBeDefined()
             expect(icon!.name).to.be.equal('001-marker')
             expect(icon!.iconSetName).to.be.equal('default')
-            expect(generateIconURL(icon!, BLUE, EXTRA_LARGE)).to.be.equal(
-                'https://fake.image.url/api/icons/sets/default/icons/001-marker@1.25x-0,0,255.png'
+            expect(generateIconURL(icon!, BLUE)).to.be.equal(
+                'https://fake.image.url/api/icons/sets/default/icons/001-marker@1x-0,0,255.png'
             )
         })
         it('get icon with standard arguments from the babs set', () => {
diff --git a/packages/viewer/src/utils/components/EmailInput.vue b/packages/viewer/src/utils/components/EmailInput.vue
index af7feefaa1..36d156983a 100644
--- a/packages/viewer/src/utils/components/EmailInput.vue
+++ b/packages/viewer/src/utils/components/EmailInput.vue
@@ -1,121 +1,105 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { toRefs, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
 import { useFieldValidation } from '@/utils/composables/useFieldValidation'
 import { isValidEmail } from '@/utils/utils'
 
-const {
-    label = '',
-    description = '',
-    disabled = false,
-    placeholder = '',
-    required = false,
-    validMarker = undefined,
-    validMessage = '',
-    invalidMarker = undefined,
-    invalidMessage = '',
-    activateValidation = false,
-    validate = undefined,
-    dataCy = '',
-} = defineProps<{
-    /** Label to add above the field */
-    label?: string
-    /** Description to add below the input */
-    description?: string
-    /** Mark the field as disable */
-    disabled?: boolean
-    /**
-     * Placeholder text
-     *
-     * NOTE: this should be a translation key
-     */
-    placeholder?: string
-    /** Field is required and will be marked as invalid if empty */
-    required?: boolean
-    /**
-     * Mark the field as valid
-     *
-     * This can be used if the field requires some external validation. When not set or set to
-     * undefined this props is ignored.
-     *
-     * NOTE: this props is ignored when activate-validation is false
-     */
-    validMarker?: boolean | undefined
-    /**
-     * Valid message Message that will be added in green below the field once the validation has
-     * been done and the field is valid.
-     */
-    validMessage?: string
-    /**
-     * Mark the field as invalid
-     *
-     * This can be used if the field requires some external validation. When not set or set to
-     * undefined this props is ignored.
-     *
-     * NOTE: this props is ignored when activate-validation is false
-     */
-    invalidMarker?: boolean | undefined
-    /**
-     * Invalid message Message that will be added in red below the field once the validation has
-     * been done and the field is invalid.
-     *
-     * NOTE: this message is overwritten if the internal validation failed (not allow file type or
-     * file too big or required empty file)
-     */
-    invalidMessage?: string
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
-    /**
-     * Validate function to run when the input changes The function should return an object of type
-     * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
-     * translation key.
-     *
-     * NOTE: this function is called each time the field is modified
-     */
-    validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
-    dataCy?: string
-}>()
+const props = withDefaults(
+    defineProps<{
+        /** Label to add above the field */
+        label?: string
+        /** Description to add below the input */
+        description?: string
+        /** Mark the field as disable */
+        disabled?: boolean
+        /**
+         * Placeholder text
+         *
+         * NOTE: this should be a translation key
+         */
+        placeholder?: string
+        /** Field is required and will be marked as invalid if empty */
+        required?: boolean
+        /**
+         * Mark the field as valid
+         *
+         * This can be used if the field requires some external validation. When not set or set to
+         * undefined this props is ignored.
+         *
+         * NOTE: this props is ignored when activate-validation is false
+         */
+        validMarker?: boolean | undefined
+        /**
+         * Valid message Message that will be added in green below the field once the validation has
+         * been done and the field is valid.
+         */
+        validMessage?: string
+        /**
+         * Mark the field as invalid
+         *
+         * This can be used if the field requires some external validation. When not set or set to
+         * undefined this props is ignored.
+         *
+         * NOTE: this props is ignored when activate-validation is false
+         */
+        invalidMarker?: boolean | undefined
+        /**
+         * Invalid message Message that will be added in red below the field once the validation has
+         * been done and the field is invalid.
+         *
+         * NOTE: this message is overwritten if the internal validation failed (not allow file type
+         * or file too big or required empty file)
+         */
+        invalidMessage?: string
+        /**
+         * Mark the field has validated.
+         *
+         * As long as the flag is false, no validation is run and no validation marks are set. Also
+         * the props is-invalid and is-valid are ignored.
+         */
+        activateValidation?: boolean
+        /**
+         * Validate function to run when the input changes The function should return an object of
+         * type `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
+         * translation key.
+         *
+         * NOTE: this function is called each time the field is modified
+         */
+        validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
+        dataCy?: string
+    }>(),
+    {
+        validMarker: undefined,
+        invalidMarker: undefined,
+    }
+)
+
+const { label, description, disabled, placeholder, dataCy } = toRefs(props)
 
 const inputEmailId = useComponentUniqueId('email-input')
 
 const model = defineModel<string>({ default: '' })
-const emits = defineEmits(['change', 'validate', 'focusin', 'focusout', 'keydown.enter'])
+const emits = defineEmits<{
+    change: [void]
+    validate: [isValid: boolean]
+    focusin: [void]
+    focusout: [void]
+    'keydown.enter': [void]
+}>()
 const { t } = useI18n()
 
-const validationProps = {
-    required,
-    validMarker,
-    validMessage,
-    invalidMarker,
-    invalidMessage,
-    activateValidation,
-    validate,
-}
-
 const {
     value,
     validMarker: computedValidMarker,
     invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
     invalidMessage: computedInvalidMessage,
-    required: computedRequired,
     onFocus,
-} = useFieldValidation(
-    validationProps,
-    model,
-    emits as (_event: string, ..._args: unknown[]) => void,
-    {
-        customValidate: validateEmail,
-        requiredInvalidMessage: 'no_email',
-    }
-)
+} = useFieldValidation(props, model, emits, {
+    customValidate: validateEmail,
+    requiredInvalidMessage: 'no_email',
+})
 
 const emailInputElement = useTemplateRef<HTMLInputElement>('emailInputElement')
 
@@ -141,7 +125,7 @@ defineExpose({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="inputEmailId"
             data-cy="email-input-label"
         >
@@ -158,7 +142,7 @@ defineExpose({ focus })
             }"
             type="email"
             class="form-control"
-            :required="computedRequired"
+            :required="required"
             :placeholder="placeholder ? t(placeholder) : ''"
             data-cy="email-input"
             @focusin="onFocus($event, true)"
@@ -173,11 +157,11 @@ defineExpose({ focus })
             {{ t(computedInvalidMessage) }}
         </div>
         <div
-            v-if="computedValidMessage"
+            v-if="validMessage"
             class="valid-feedback"
             data-cy="email-input-valid-feedback"
         >
-            {{ t(computedValidMessage) }}
+            {{ t(validMessage) }}
         </div>
         <div
             v-if="description"
diff --git a/packages/viewer/src/utils/components/FileInput.vue b/packages/viewer/src/utils/components/FileInput.vue
index 95036c6c8c..550867508b 100644
--- a/packages/viewer/src/utils/components/FileInput.vue
+++ b/packages/viewer/src/utils/components/FileInput.vue
@@ -115,7 +115,7 @@ const inputFileId = useComponentUniqueId('file-input')
 const { t } = useI18n()
 const model = defineModel<File | undefined>({ default: undefined })
 const emits = defineEmits<{
-    change: []
+    change: [void]
     validate: [isValid: boolean]
 }>()
 
@@ -161,23 +161,11 @@ const {
     value,
     validMarker: computedValidMarker,
     invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
     invalidMessage: computedInvalidMessage,
-} = useFieldValidation<File>(
-    validationProps,
-    model,
-    (event: string, ...args: unknown[]) => {
-        if (event === 'change') {
-            emits('change')
-        } else if (event === 'validate') {
-            emits('validate', args[0] as boolean)
-        }
-    },
-    {
-        customValidate: validateFile,
-        requiredInvalidMessage: 'no_file',
-    }
-)
+} = useFieldValidation<File>(validationProps, model, emits, {
+    customValidate: validateFile,
+    requiredInvalidMessage: 'no_file',
+})
 
 const filePathInfo = computed(() =>
     value.value ? `${value.value.name}, ${value.value.size / 1000} kb` : ''
@@ -254,11 +242,11 @@ function onFileSelected(evt: Event): void {
                 }}
             </div>
             <div
-                v-if="computedValidMessage"
+                v-if="validMessage"
                 class="valid-feedback"
                 data-cy="file-input-valid-feedback"
             >
-                {{ t(computedValidMessage) }}
+                {{ t(validMessage) }}
             </div>
         </div>
         <div
diff --git a/packages/viewer/src/utils/components/TextAreaInput.vue b/packages/viewer/src/utils/components/TextAreaInput.vue
index bf451abe70..4e41c1f373 100644
--- a/packages/viewer/src/utils/components/TextAreaInput.vue
+++ b/packages/viewer/src/utils/components/TextAreaInput.vue
@@ -1,86 +1,81 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { toRefs, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
 import { useFieldValidation } from '@/utils/composables/useFieldValidation'
 
-const {
-    label = '',
-    description = '',
-    disabled = false,
-    placeholder = '',
-    required = false,
-    validMarker = undefined,
-    validMessage = '',
-    invalidMarker = undefined,
-    invalidMessage = '',
-    activateValidation = false,
-    validate = undefined,
-    dataCy = '',
-} = defineProps<{
-    /** Label to add above the field */
-    label?: string
-    /** Description to add below the input */
-    description?: string
-    /** Mark the field as disable */
-    disabled?: boolean
-    /**
-     * Placeholder
-     *
-     * NOTE: this should be a translation key
-     */
-    placeholder?: string
-    /** Field is required and will be marked as invalid if empty */
-    required?: boolean
-    /**
-     * Mark the field as valid
-     *
-     * This can be used if the field requires some external validation. When not set or set to
-     * undefined this props is ignored.
-     *
-     * NOTE: this props is ignored when activate-validation is false
-     */
-    validMarker?: boolean | undefined
-    /**
-     * Valid message Message that will be added in green below the field once the validation has
-     * been done and the field is valid.
-     */
-    validMessage?: string
-    /**
-     * Mark the field as invalid
-     *
-     * This can be used if the field requires some external validation. When not set or set to
-     * undefined this props is ignored.
-     *
-     * NOTE: this props is ignored when activate-validation is false
-     */
-    invalidMarker?: boolean | undefined
-    /**
-     * Invalid message Message that will be added in red below the field once the validation has
-     * been done and the field is invalid.
-     *
-     * NOTE: this message is overwritten if the internal validation failed (not allow file type or
-     * file too big or required empty file)
-     */
-    invalidMessage?: string
-    /**
-     * Mark the field has validated.
-     *
-     * As long as the flag is false, no validation is run and no validation marks are set. Also the
-     * props is-invalid and is-valid are ignored.
-     */
-    activateValidation?: boolean
-    /**
-     * Validate function to run when the input changes The function should return an object of type
-     * `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
-     * translation key.
-     *
-     * NOTE: this function is called each time the field is modified
-     */
-    validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
-    dataCy?: string
-}>()
+const props = withDefaults(
+    defineProps<{
+        /** Label to add above the field */
+        label?: string
+        /** Description to add below the input */
+        description?: string
+        /** Mark the field as disable */
+        disabled?: boolean
+        /**
+         * Placeholder
+         *
+         * NOTE: this should be a translation key
+         */
+        placeholder?: string
+        /** Field is required and will be marked as invalid if empty */
+        required?: boolean
+        /**
+         * Mark the field as valid
+         *
+         * This can be used if the field requires some external validation. When not set or set to
+         * undefined this props is ignored.
+         *
+         * NOTE: this props is ignored when activate-validation is false
+         */
+        validMarker?: boolean | undefined
+        /**
+         * Valid message Message that will be added in green below the field once the validation has
+         * been done and the field is valid.
+         */
+        validMessage?: string
+        /**
+         * Mark the field as invalid
+         *
+         * This can be used if the field requires some external validation. When not set or set to
+         * undefined this props is ignored.
+         *
+         * NOTE: this props is ignored when activate-validation is false
+         */
+        invalidMarker?: boolean | undefined
+        /**
+         * Invalid message Message that will be added in red below the field once the validation has
+         * been done and the field is invalid.
+         *
+         * NOTE: this message is overwritten if the internal validation failed (not allow file type
+         * or file too big or required empty file)
+         */
+        invalidMessage?: string
+        /**
+         * Mark the field has validated.
+         *
+         * As long as the flag is false, no validation is run and no validation marks are set. Also
+         * the props is-invalid and is-valid are ignored.
+         */
+        activateValidation?: boolean
+        /**
+         * Validate function to run when the input changes The function should return an object of
+         * type `{valid: Boolean, invalidMessage: String}`. The `invalidMessage` string should be a
+         * translation key.
+         *
+         * NOTE: this function is called each time the field is modified
+         */
+        validate?: ((_value?: string) => { valid: boolean; invalidMessage: string }) | undefined
+        dataCy?: string
+    }>(),
+    {
+        validMarker: undefined,
+        invalidMarker: undefined,
+    }
+)
+
+const { label, description, disabled, placeholder, dataCy } = toRefs(props)
 
 const textAreaInputId = useComponentUniqueId('text-area-input')
 
@@ -90,29 +85,13 @@ const { t } = useI18n()
 
 const textAreaElement = useTemplateRef('textAreaElement')
 
-const validationProps = {
-    required,
-    validMarker,
-    validMessage,
-    invalidMarker,
-    invalidMessage,
-    activateValidation,
-    validate,
-}
-
 const {
     value,
     validMarker: computedValidMarker,
     invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
     invalidMessage: computedInvalidMessage,
     onFocus,
-    required: computedRequired,
-} = useFieldValidation(
-    validationProps,
-    model,
-    emits as (_event: string, ..._args: unknown[]) => void
-)
+} = useFieldValidation(props, model, emits)
 
 function focus(): void {
     textAreaElement.value?.focus()
@@ -129,7 +108,7 @@ defineExpose({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="textAreaInputId"
             data-cy="text-area-input-label"
         >
@@ -140,7 +119,7 @@ defineExpose({ focus })
             ref="textAreaElement"
             v-model="value"
             :disabled="disabled"
-            :required="computedRequired"
+            :required="required"
             :class="{
                 'is-invalid': computedInvalidMarker,
                 'is-valid': computedValidMarker,
@@ -160,11 +139,11 @@ defineExpose({ focus })
             {{ t(computedInvalidMessage) }}
         </div>
         <div
-            v-if="computedValidMessage"
+            v-if="validMessage"
             class="valid-feedback"
             data-cy="text-area-input-valid-feedback"
         >
-            {{ t(computedValidMessage) }}
+            {{ t(validMessage) }}
         </div>
         <div
             v-if="description"
diff --git a/packages/viewer/src/utils/components/TextInput.vue b/packages/viewer/src/utils/components/TextInput.vue
index d25f67ba54..d4c9a20dff 100644
--- a/packages/viewer/src/utils/components/TextInput.vue
+++ b/packages/viewer/src/utils/components/TextInput.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
 /** Input with clear button component */
-import { nextTick, ref, useSlots, useTemplateRef } from 'vue'
+
+import type { NamedValue } from 'vue-i18n'
+
+import { computed, nextTick, ref, toRef, useSlots, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useComponentUniqueId } from '@/utils/composables/useComponentUniqueId'
-import { useFieldValidation } from '@/utils/composables/useFieldValidation'
+import {
+    type FieldValidationProps,
+    useFieldValidation,
+} from '@/utils/composables/useFieldValidation'
 
 export interface TextInputExposed {
     focus: () => void
@@ -17,21 +23,7 @@ export interface TextInputValidateResult {
 
 export type TextInputValidateFunction = (_value?: string) => TextInputValidateResult
 
-const {
-    label = '',
-    description = '',
-    disabled = false,
-    placeholder = '',
-    required = false,
-    validMarker = undefined,
-    validMessage = '',
-    invalidMarker = undefined,
-    invalidMessage = '',
-    invalidMessageParams = undefined,
-    activateValidation = false,
-    validate = undefined,
-    dataCy = '',
-} = defineProps<{
+const props = defineProps<{
     /** Label to add above the field */
     label?: string
     /** Description to add below the input */
@@ -81,7 +73,7 @@ const {
      * Parameters for replacing any placeholder within an invalid message translated text (will be
      * passed to Vue I18N when translating the invalid message).
      */
-    invalidMessageParams?: Record<string, unknown>
+    invalidMessageParams?: NamedValue
     /**
      * Mark the field has validated.
      *
@@ -100,11 +92,30 @@ const {
     dataCy?: string
 }>()
 
+const {
+    label = '',
+    description = '',
+    disabled = false,
+    placeholder = '',
+    validMessage = '',
+    invalidMessageParams = undefined,
+    dataCy = '',
+} = props
+
+// to keep the reactivity going (with the useFieldValidation composable, and the parent that used this component)
+// we wrap some props to refs (those that are passed as FieldValidationProps)
+const required = toRef(props, 'required', false)
+const validMarker = toRef(props, 'validMarker')
+const invalidMarker = toRef(props, 'invalidMarker')
+const invalidMessage = toRef(props, 'invalidMessage')
+const activateValidation = toRef(props, 'activateValidation', false)
+const validate = toRef(props, 'validate', undefined)
+
 // On each component creation set the current component unique ID
 const clearButtonId = useComponentUniqueId('button-addon-clear')
 const textInputId = useComponentUniqueId('text-input')
 
-const model = defineModel<string>({ default: '' })
+const inputValue = defineModel<string>({ default: '' })
 const emits = defineEmits<{
     change: [value: string]
     validate: [result: TextInputValidateResult]
@@ -114,10 +125,9 @@ const emits = defineEmits<{
     'keydown.enter': []
 }>()
 
-const validationProps = {
+const validationProps: FieldValidationProps<string> = {
     required,
     validMarker,
-    validMessage,
     invalidMarker,
     invalidMessage,
     activateValidation,
@@ -125,29 +135,34 @@ const validationProps = {
 }
 
 const {
-    value,
     validMarker: computedValidMarker,
     invalidMarker: computedInvalidMarker,
-    validMessage: computedValidMessage,
     invalidMessage: computedInvalidMessage,
     onFocus,
-    required: computedRequired,
-} = useFieldValidation(
-    validationProps,
-    model,
-    emits as (_event: string, ..._args: unknown[]) => void
-)
+} = useFieldValidation(validationProps, inputValue, emits)
 
 const { t } = useI18n()
 const slots = useSlots()
 
-const inputElement = useTemplateRef('inputElement')
-const error = ref('')
+const inputElement = useTemplateRef<HTMLInputElement>('inputElement')
+const error = ref<string>('')
+
+const translatedInvalidMessage = computed<string | undefined>(() => {
+    if (computedInvalidMessage.value) {
+        if (invalidMessageParams) {
+            return t(computedInvalidMessage.value, invalidMessageParams)
+        }
+        return t(computedInvalidMessage.value)
+    }
+    return undefined
+})
 
-function onClearInput(): void {
-    value.value = ''
+function onClearInput(event: Event): void {
+    inputValue.value = ''
     error.value = ''
     inputElement.value?.focus()
+    // stopping the event here so that it won't close a modal window if used inside it.
+    event.stopPropagation()
     emits('clear')
 }
 
@@ -166,7 +181,7 @@ defineExpose<TextInputExposed>({ focus })
         <label
             v-if="label"
             class="mb-2"
-            :class="{ 'fw-bolder': computedRequired }"
+            :class="{ 'fw-bolder': required }"
             :for="textInputId"
             data-cy="text-input-label"
         >
@@ -176,13 +191,13 @@ defineExpose<TextInputExposed>({ focus })
             <input
                 :id="textInputId"
                 ref="inputElement"
-                v-model="value"
+                v-model="inputValue"
                 type="text"
                 :disabled="disabled"
-                :required="computedRequired"
+                :required="required"
                 class="form-control text-truncate"
                 :class="{
-                    'rounded-end': !value?.length && !slots?.default,
+                    'rounded-end': !inputValue?.length && !slots?.default,
                     'is-invalid': computedInvalidMarker,
                     'is-valid': computedValidMarker,
                 }"
@@ -194,7 +209,7 @@ defineExpose<TextInputExposed>({ focus })
                 @keydown.enter="emits('keydown.enter')"
             />
             <button
-                v-if="value && value.length > 0"
+                v-if="inputValue && inputValue.length > 0"
                 :id="clearButtonId"
                 class="btn btn-outline-group rounded-0"
                 :class="{ 'rounded-end': !slots?.default }"
@@ -206,18 +221,18 @@ defineExpose<TextInputExposed>({ focus })
             </button>
             <slot />
             <div
-                v-if="computedInvalidMessage"
+                v-if="translatedInvalidMessage"
                 class="invalid-feedback"
                 data-cy="text-input-invalid-feedback"
             >
-                {{ t(computedInvalidMessage, invalidMessageParams ?? {}) }}
+                {{ translatedInvalidMessage }}
             </div>
             <div
-                v-if="computedValidMessage"
+                v-if="validMessage"
                 class="valid-feedback"
                 data-cy="text-input-valid-feedback"
             >
-                {{ t(computedValidMessage) }}
+                {{ t(validMessage) }}
             </div>
         </div>
         <div
diff --git a/packages/viewer/src/utils/composables/useFieldValidation.ts b/packages/viewer/src/utils/composables/useFieldValidation.ts
index 400b54589f..540d5929ef 100644
--- a/packages/viewer/src/utils/composables/useFieldValidation.ts
+++ b/packages/viewer/src/utils/composables/useFieldValidation.ts
@@ -1,6 +1,14 @@
-import type { ComputedRef, Ref } from 'vue'
-
-import { computed, onMounted, ref, toRef, watch } from 'vue'
+import {
+    computed,
+    type ComputedRef,
+    type MaybeRefOrGetter,
+    onMounted,
+    type Ref,
+    ref,
+    toValue,
+    watch,
+    watchEffect,
+} from 'vue'
 
 export interface ValidationResult {
     valid: boolean
@@ -10,17 +18,12 @@ export interface ValidationResult {
 export type ValidateFunction<T extends string | File> = (value?: T) => ValidationResult
 
 export interface FieldValidationProps<T extends string | File> {
-    label?: string
-    description?: string
-    disabled?: boolean
-    placeholder?: string
-    required?: boolean
-    validMarker?: boolean | undefined
-    validMessage?: string
-    invalidMarker?: boolean | undefined
-    invalidMessage?: string
-    activateValidation?: boolean
-    validate?: ValidateFunction<T> | undefined
+    required?: MaybeRefOrGetter<boolean>
+    validMarker?: MaybeRefOrGetter<boolean>
+    invalidMarker?: MaybeRefOrGetter<boolean>
+    invalidMessage?: MaybeRefOrGetter<string | undefined>
+    activateValidation?: MaybeRefOrGetter<boolean>
+    validate?: MaybeRefOrGetter<ValidateFunction<T>>
 }
 
 export interface FieldValidationOptions {
@@ -28,42 +31,25 @@ export interface FieldValidationOptions {
     requiredInvalidMessage?: string
 }
 
+type FieldValidationEvents = 'change' | 'validate' | 'focusin' | 'focusout'
+interface FieldValidationEventsPayloads {
+    change: [value?: string | File]
+    validate: [result: ValidationResult]
+    focusin: [event: Event]
+    focusout: [event: Event]
+}
+type FieldValidationEmits = <key extends FieldValidationEvents>(
+    eventName: key,
+    ...args: FieldValidationEventsPayloads[key]
+) => void
+
 export interface FieldValidationReturn<T extends string | File> {
     value: Ref<T | undefined>
     isValid: ComputedRef<boolean>
     validMarker: ComputedRef<boolean>
     invalidMarker: ComputedRef<boolean>
-    validMessage: Ref<string | undefined>
     invalidMessage: ComputedRef<string | undefined>
     onFocus: (event: Event, inFocus: boolean) => void
-    required: Ref<boolean | undefined>
-    activateValidation: Ref<boolean | undefined>
-}
-
-export function propsValidator4ValidateFunc(value: unknown, _props: unknown): boolean {
-    if (value === undefined) {
-        return true
-    }
-    if (typeof value !== 'function') {
-        return false
-    }
-    const returnObject = value('') as Record<string, unknown>
-    if (typeof returnObject !== 'object') {
-        return false
-    }
-    if (!('valid' in returnObject)) {
-        return false
-    }
-    if (!('invalidMessage' in returnObject)) {
-        return false
-    }
-    if (typeof returnObject.valid !== 'boolean') {
-        return false
-    }
-    if (typeof returnObject.invalidMessage !== 'string') {
-        return false
-    }
-    return true
 }
 
 /**
@@ -76,8 +62,8 @@ export function propsValidator4ValidateFunc(value: unknown, _props: unknown): bo
  */
 export function useFieldValidation<T extends string | File>(
     props: FieldValidationProps<T>,
-    model: Ref<T | undefined>,
-    emits: (event: string, ...args: unknown[]) => void,
+    model: MaybeRefOrGetter<T | undefined>,
+    emits: FieldValidationEmits,
     {
         customValidate = (): ValidationResult => {
             return { valid: true, invalidMessage: '' }
@@ -85,13 +71,12 @@ export function useFieldValidation<T extends string | File>(
         requiredInvalidMessage = 'field_required',
     }: FieldValidationOptions = {}
 ): FieldValidationReturn<T> {
-    // Reactive data
-    const value = ref(model.value) as Ref<T | undefined>
+    const { required, validMarker, invalidMarker, invalidMessage, activateValidation, validate } =
+        props
 
+    const internalModel = ref<T | undefined>(toValue(model))
     const userIsTyping = ref<boolean>(false)
-    const activateValidation = toRef(props, 'activateValidation')
-    const required = toRef(props, 'required')
-    const validMessage = toRef(props, 'validMessage')
+
     const validation = ref<ValidationResult>({ valid: true, invalidMessage: '' })
 
     // Helper function to check if value is empty
@@ -106,66 +91,63 @@ export function useFieldValidation<T extends string | File>(
     }
 
     // Computed properties
-    const isValid = computed(() => {
+    const isValid = computed<boolean>(() => {
         return validation.value.valid
     })
-    const activateValidationMarkers = computed(() => activateValidation.value)
-    const validMarker = computed(() => {
-        // Do not add a valid marker when the marker are not activated or when the field is empty
-        // or when it is already marked as invalid
-        if (!activateValidationMarkers.value || isEmpty(value.value) || invalidMarker.value) {
-            return false
-        }
-        let _validMarker = isValid.value
-        if (props.validMarker !== undefined) {
-            _validMarker = _validMarker && (props.validMarker ?? false)
-        }
-        return _validMarker
-    })
-    const invalidMarker = computed(() => {
-        if (!activateValidationMarkers.value) {
+    const internalInvalidMarker = computed<boolean>(() => {
+        if (!toValue(activateValidation)) {
             return false
         }
         let _invalidMarker = !isValid.value
-        if (props.invalidMarker !== undefined) {
-            _invalidMarker = _invalidMarker || !!props.invalidMarker
+        if (toValue(invalidMarker) !== undefined) {
+            _invalidMarker = _invalidMarker || !!toValue(invalidMarker)
         }
         return _invalidMarker
     })
-    const invalidMessage = computed(() => {
-        if (props.invalidMessage) {
-            return props.invalidMessage
+    const internalValidMarker = computed<boolean>(() => {
+        // Do not add a valid marker when the marker are not activated or when the field is empty
+        // or when it is already marked as invalid
+        if (!toValue(activateValidation) || isEmpty(internalModel.value) || !isValid.value) {
+            return false
         }
-        return validation.value.invalidMessage
+        // If validMarker prop is explicitly provided (not undefined), use it
+        if (toValue(validMarker) !== undefined) {
+            return !!toValue(validMarker)
+        }
+        // Default: show valid marker when field is valid
+        return true
     })
+    const internalInvalidMessage = computed<string>(
+        () => toValue(invalidMessage) ?? validation.value.invalidMessage ?? ''
+    )
 
-    // Watches
-    watch(activateValidation, () => validate())
-    watch(userIsTyping, () => validate())
-    watch(value, () => {
-        model.value = value.value
-        validate()
-        emits('change', value.value)
+    onMounted(() => {
+        internalValidate()
     })
-    watch(model, (newValue) => (value.value = newValue))
 
-    onMounted(() => {
-        validate()
+    watchEffect(() => {
+        if (toValue(model) !== internalModel.value) {
+            internalModel.value = toValue(model)
+        }
+        internalValidate()
+    })
+    watch(internalModel, () => {
+        emits('change', internalModel.value)
     })
 
-    function validate(): void {
+    function internalValidate(): void {
         validation.value = customValidate()
-        if (required.value && isEmpty(value.value)) {
+        if (toValue(required) && isEmpty(internalModel.value)) {
             validation.value = {
                 valid: false,
                 invalidMessage: requiredInvalidMessage,
             }
         }
-        if (props.validate && validation.value.valid) {
+        if (typeof toValue(validate) === 'function' && validation.value.valid) {
             // Run user custom validation
-            validation.value = props.validate(value.value)
+            validation.value = toValue(validate)!(internalModel.value)
         }
-        emits('validate', validation.value.valid)
+        emits('validate', validation.value)
     }
 
     function onFocus(event: Event, inFocus: boolean): void {
@@ -178,14 +160,11 @@ export function useFieldValidation<T extends string | File>(
     }
 
     return {
-        value,
+        value: internalModel as Ref<T | undefined>,
         isValid,
-        validMarker,
-        invalidMarker,
-        validMessage,
-        invalidMessage,
+        validMarker: internalValidMarker,
+        invalidMarker: internalInvalidMarker,
+        invalidMessage: internalInvalidMessage,
         onFocus,
-        required,
-        activateValidation,
     }
 }
diff --git a/packages/viewer/src/utils/featureStyleUtils.ts b/packages/viewer/src/utils/featureStyleUtils.ts
index c2b10962c5..582b5450af 100644
--- a/packages/viewer/src/utils/featureStyleUtils.ts
+++ b/packages/viewer/src/utils/featureStyleUtils.ts
@@ -398,13 +398,10 @@ export function geoadminStyleFunction(
     let image: Icon | undefined
     if (editableFeature?.icon) {
         image = new Icon({
-            src: generateIconURL(
-                editableFeature.icon,
-                editableFeature.fillColor,
-                editableFeature.iconSize
-            ),
+            src: generateIconURL(editableFeature.icon, editableFeature.fillColor),
             crossOrigin: 'Anonymous',
             anchor: editableFeature.icon.anchor,
+            scale: editableFeature.iconSize?.iconScale,
         })
     }
     const styles = [
diff --git a/packages/viewer/src/utils/kmlUtils.ts b/packages/viewer/src/utils/kmlUtils.ts
index 7c470ec0ed..1ef1525d1d 100644
--- a/packages/viewer/src/utils/kmlUtils.ts
+++ b/packages/viewer/src/utils/kmlUtils.ts
@@ -554,7 +554,7 @@ export function getEditableFeatureFromKmlFeature(
         })
         const image = style.getImage()
         if (image instanceof IconStyle) {
-            image.setSrc(generateIconURL(icon, fillColor, iconSize))
+            image.setSrc(generateIconURL(icon, fillColor))
         }
     }
 
diff --git a/packages/viewer/tests/cypress/support/drawing.ts b/packages/viewer/tests/cypress/support/drawing.ts
index 8640e819df..e1a0e67c44 100644
--- a/packages/viewer/tests/cypress/support/drawing.ts
+++ b/packages/viewer/tests/cypress/support/drawing.ts
@@ -199,8 +199,8 @@ Cypress.Commands.add('goToDrawing', (queryParams = {}, withHash = true) => {
 
 Cypress.Commands.add('openDrawingMode', () => {
     cy.openMenuIfMobile()
-    cy.get('[data-cy="menu-tray-drawing-section"]').should('be.visible').click()
-    // Make sure that the map pointer events are unregistered to avoid intereference with drawing
+    cy.get('[data-cy="menu-tray-drawing-section"]:visible').click()
+    // Make sure that the map pointer events are unregistered to avoid interference with drawing
     // pointer events
     cy.window().its('mapPointerEventReady').should('be.false')
 })
@@ -215,9 +215,9 @@ Cypress.Commands.add('closeDrawingMode', (closeDrawingNotSharedAdmin = true) =>
                 cy.get('[data-cy="drawing-share-admin-close"]').click()
             }
         })
-        cy.getPinia().should((pinia) => {
+        cy.waitUntilState((pinia) => {
             const drawingStore = useDrawingStore(pinia)
-            expect(drawingStore.overlay.show).to.be.false
+            return !drawingStore.overlay.show
         })
         // In drawing mode the click event on the map are removed therefore we need to wait that
         // they are added again begore continuing testing
@@ -371,7 +371,7 @@ export async function checkKMLRequest(
     request: CyHttpMessages.IncomingHttpRequest,
     data: (RegExp | string)[],
     updatedKmlId?: string
-) {
+): Promise<void> {
     // Check request
     if (updatedKmlId) {
         const urlArray = request.url.split('/')
diff --git a/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts b/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts
index b87615a6be..87d613ebcb 100644
--- a/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts
+++ b/packages/viewer/tests/cypress/tests-e2e/drawing.cy.ts
@@ -80,12 +80,12 @@ describe('Drawing module tests', () => {
         function waitForKmlUpdate(...regexExpressions: string[]): void {
             cy.wait('@update-kml')
                 .its('request')
-                .should(
-                    (request) =>
-                        void checkKMLRequest(
-                            request as CyHttpMessages.IncomingHttpRequest,
-                            regexExpressions.map((expression) => new RegExp(expression))
-                        )
+                // we can't use .should here as checkKMLRequest is async (returns a Promise<void>)
+                .then((request) =>
+                    checkKMLRequest(
+                        request as CyHttpMessages.IncomingHttpRequest,
+                        regexExpressions.map((expression) => new RegExp(expression))
+                    )
                 )
         }
 
@@ -146,7 +146,7 @@ describe('Drawing module tests', () => {
             cy.get('[data-cy="ol-map"]:visible').click()
 
             cy.wait('@post-kml').then((interception) => {
-                const kmlId = `${getServiceKmlBaseUrl()}api/kml/files/${interception.response?.body.id}`
+                const kmlUrl = `${getServiceKmlBaseUrl()}api/kml/files/${interception.response?.body.id}`
                 const bgLayer = 'test.background.layer2'
 
                 cy.log(
@@ -371,7 +371,7 @@ describe('Drawing module tests', () => {
                 cy.get('[data-cy="drawing-style-media-url"] [data-cy="text-input"]').type(valid_url)
                 cy.get('[data-cy="drawing-style-media-generate-button"]').should('be.enabled')
 
-                cy.log('Generate video link')
+                cy.log('Generate video link (external URL)')
                 cy.get('[data-cy="drawing-style-media-generate-button"]').click()
                 cy.get('[data-cy="drawing-style-feature-description"]').should(
                     'have.value',
@@ -380,6 +380,7 @@ describe('Drawing module tests', () => {
                 waitForKmlUpdate(`iframe src="${valid_url}".*`)
                 cy.get('[data-cy="infobox-close"]').click()
 
+                cy.log('Adding a second marker with video link (external URL)')
                 cy.clickDrawingTool(EditableFeatureTypes.Marker)
                 cy.get('[data-cy="ol-map"]').click(160, 220)
                 cy.wait('@update-kml')
@@ -389,6 +390,9 @@ describe('Drawing module tests', () => {
                 waitForKmlUpdate(`(iframe src="${valid_url}".*){2}`)
                 cy.get('[data-cy="infobox-close"]').click()
 
+                cy.log(
+                    'Adding a third marker with image link (from geo.admin.ch, there should be no disclaimer)'
+                )
                 cy.clickDrawingTool(EditableFeatureTypes.Marker)
                 cy.get('[data-cy="ol-map"]').click(220, 260)
                 cy.wait('@update-kml')
@@ -400,10 +404,13 @@ describe('Drawing module tests', () => {
                 waitForKmlUpdate(`iframe src="${valid_whitelisted_url}"`)
                 cy.get('[data-cy="infobox-close"]').click()
 
+                cy.log(
+                    'Closing the drawing module, and checking that the drawing layer is added to the map'
+                )
                 cy.closeDrawingMode()
                 cy.closeMenuIfMobile()
                 waitForKmlUpdate(`(ExtendedData.*){14}`)
-                cy.checkOlLayer([bgLayer, kmlId])
+                cy.checkOlLayer([bgLayer, `KML|${kmlUrl}`])
 
                 cy.log('Hyperlink exists after sanitize')
                 cy.intercept('**http:dummy*', {
diff --git a/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts b/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts
index 48e71979f3..2fe6b866c6 100644
--- a/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts
+++ b/packages/viewer/tests/cypress/tests-e2e/reportProblem.cy.ts
@@ -44,7 +44,6 @@ describe('Testing the report problem form', () => {
         cy.get('@minimizeButton').click()
         cy.get('@firstFeedbackElement').should('be.visible')
         closeForm()
-        cy.closeMenuIfMobile()
 
         cy.log('The button should be in the header as a link on desktop')
         cy.viewport(1920, 1080)
@@ -198,7 +197,6 @@ describe('Testing the report problem form', () => {
             force: true,
         })
         cy.get('@submit').click()
-        cy.get('[data-cy="file-input-text"]').should('have.class', 'is-valid')
 
         cy.wait('@feedback').then((interception) => {
             const formData = parseFormData(interception.request)
@@ -244,7 +242,7 @@ describe('Testing the report problem form', () => {
         closeForm()
     })
 
-    it.only('reports a problem with drawing attachment', () => {
+    it('reports a problem with drawing attachment', () => {
         cy.goToMapView()
         interceptFeedback(true)
         cy.openMenuIfMobile()
@@ -311,7 +309,7 @@ describe('Testing the report problem form', () => {
             cy.get('[data-cy="ol-map"]').click(mapWidth / 2 + 50, mapHeight / 2)
         })
         // we need to increase the timeout here below because, upon opening the drawing mode for the
-        // first time in e2e tests, the loading of the library can take time
+        // first time in e2e tests, the loading of the library can take more time 
         cy.get('[data-cy="drawing-header-title"]', { timeout: 15000 })
             .should('be.visible')
             .contains('3. Indicate the appropriate location on the map :')
@@ -328,26 +326,19 @@ describe('Testing the report problem form', () => {
         cy.log('Select category')
         cy.get('[data-cy="report-problem-category"] [data-cy="dropdown-main-button"]')
             .as('categoryDropdown')
-            .scrollIntoView()
-        cy.get('@categoryDropdown').should('be.visible')
         cy.get('@categoryDropdown').click()
-        cy.get('[data-cy="dropdown-item-other"]:visible').click()
+        cy.get('[data-cy="dropdown-item-other"]').click()
 
         cy.log('Write description and email')
         cy.get('[data-cy="report-problem-text-area"] [data-cy="text-area-input"]')
             .as('textArea')
-            .scrollIntoView()
-        cy.get('@textArea').should('be.visible')
         cy.get('@textArea').type(text)
 
         cy.get('[data-cy="report-problem-email"] [data-cy="email-input"]')
             .as('emailInput')
-            .scrollIntoView()
-        cy.get('@emailInput').should('be.visible')
         cy.get('@emailInput').type(validEmail)
 
-        cy.get('@emailInput').should('be.visible').should('have.value', validEmail)
-        cy.get('[data-cy="report-problem-drawing-added-feedback"]').scrollIntoView()
+        cy.get('@emailInput').should('have.value', validEmail)
         cy.get('[data-cy="report-problem-drawing-added-feedback"]')
             .should('be.visible')
             .should('have.class', 'valid-feedback')
@@ -360,16 +351,13 @@ describe('Testing the report problem form', () => {
         cy.get('[data-cy="drawing-header-close-button"]:visible').click()
         cy.viewport('iphone-3')
 
-        cy.get('@categoryDropdown').scrollIntoView()
-        cy.get('@categoryDropdown').should('be.visible')
+        cy.get('@categoryDropdown').should('exist')
         cy.get('[data-cy="drawing-header-title"]').should('not.exist')
         cy.get('@textArea').should('have.value', text)
         cy.get('@emailInput').should('have.value', validEmail)
         cy.get('[data-cy="report-problem-drawing-added-feedback"]').should('not.be.visible')
 
         cy.log('Draw some more features')
-        cy.get('@reportDrawing').scrollIntoView()
-        cy.get('@reportDrawing').should('be.visible')
         cy.get('@reportDrawing').click()
         cy.clickDrawingTool(EditableFeatureTypes.Marker)
         cy.get('[data-cy="ol-map"]').click()
@@ -395,12 +383,10 @@ describe('Testing the report problem form', () => {
         })
 
         cy.get('[data-cy="drawing-toolbox-close-button"]').should('be.visible').click()
-        cy.get('@categoryDropdown').scrollIntoView()
         cy.get('@reportForm').should('exist')
         cy.get('[data-cy="drawing-header-title"]').should('not.exist')
         cy.get('@textArea').should('have.value', text)
         cy.get('@emailInput').should('have.value', validEmail)
-        cy.get('[data-cy="report-problem-drawing-added-feedback"]').scrollIntoView()
         cy.get('[data-cy="report-problem-drawing-added-feedback"]')
             .as('reportDrawingFeedback')
             .should('be.visible')
@@ -411,19 +397,19 @@ describe('Testing the report problem form', () => {
         cy.get('[data-cy="submit-button"]').click()
         cy.wait('@feedback').then((interception) => {
             const formData = parseFormData(interception.request)
-            ;[
-                { name: 'subject', contains: `[Problem Report]` },
-                { name: 'feedback', contains: text },
-                { name: 'version', contains: APP_VERSION.replace('.dirty', '') },
-                { name: 'ua', contains: navigator.userAgent },
-                { name: 'kml', contains: '<Data name="type"><value>marker</value></Data>' },
-                { name: 'kml', contains: '<Data name="type"><value>annotation</value></Data>' },
-                { name: 'kml', contains: '<Data name="type"><value>linepolygon</value></Data>' },
-            ].forEach((param) => {
-                expect(interception.request.body).to.be.a('String')
-                expect(formData).to.haveOwnProperty(param.name)
-                expect(formData[param.name]).to.contain(param.contains)
-            })
+                ;[
+                    { name: 'subject', contains: `[Problem Report]` },
+                    { name: 'feedback', contains: text },
+                    { name: 'version', contains: APP_VERSION.replace('.dirty', '') },
+                    { name: 'ua', contains: navigator.userAgent },
+                    { name: 'kml', contains: '<Data name="type"><value>marker</value></Data>' },
+                    { name: 'kml', contains: '<Data name="type"><value>annotation</value></Data>' },
+                    { name: 'kml', contains: '<Data name="type"><value>linepolygon</value></Data>' },
+                ].forEach((param) => {
+                    expect(interception.request.body).to.be.a('String')
+                    expect(formData).to.haveOwnProperty(param.name)
+                    expect(formData[param.name]).to.contain(param.contains)
+                })
         })
     })
 })
diff --git a/packages/viewer/tests/cypress/tests-e2e/shareShortLink.cy.ts b/packages/viewer/tests/cypress/tests-e2e/shareShortLink.cy.ts
index 27f8500305..f0c0c0a1a6 100644
--- a/packages/viewer/tests/cypress/tests-e2e/shareShortLink.cy.ts
+++ b/packages/viewer/tests/cypress/tests-e2e/shareShortLink.cy.ts
@@ -81,7 +81,6 @@ describe('Testing the share menu', () => {
 
             // Open the share menu
             cy.openMenuIfMobile()
-            cy.get('[data-cy="menu-tray-tool-section"]:visible').click()
             cy.get('[data-cy="menu-share-section"]').click()
             cy.wait('@shortLink')
             cy.getPinia().then((pinia) => {