diff --git a/cypress/e2e/background-selection.cy.ts b/cypress/e2e/background-selection.cy.ts
index 94c5108c..efe1c265 100644
--- a/cypress/e2e/background-selection.cy.ts
+++ b/cypress/e2e/background-selection.cy.ts
@@ -22,7 +22,7 @@ describe('Background selector', () => {
       const layers = (<AUTWindowOlMap>window).olMap
         .getLayers()
         .getArray()
-        .filter((l: any) => l.get('featureID') != 'featureLayer')
+        .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
       expect(layers[0].get('id')).to.eq(556)
     })
 
@@ -52,7 +52,7 @@ describe('Background selector', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(502)
       })
     })
diff --git a/cypress/e2e/draw/draw-bar.cy.ts b/cypress/e2e/draw/draw-bar.cy.ts
index 774ba26b..dd0fed7a 100644
--- a/cypress/e2e/draw/draw-bar.cy.ts
+++ b/cypress/e2e/draw/draw-bar.cy.ts
@@ -1,3 +1,9 @@
+import {
+  checkDrawInteractionActive,
+  checkModifyInteractionActive,
+  testFeatItem,
+} from './draw-feat.utils'
+
 describe('Map controls', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -10,20 +16,27 @@ describe('Map controls', () => {
     })
   })
 
-  describe('when clicking button to draw point', () => {
-    beforeEach(() => {
+  describe('When clicking button to close draw tools', () => {
+    it('should deactivate active ol draw interaction', () => {
       cy.get('button[data-cy="drawPointButton"]').click()
-    })
-
-    it('activates ol Draw interaction in mode Point', () => {
+      checkDrawInteractionActive('Point')
+      cy.get('button[data-cy="drawButton"]').click()
       cy.getDrawInteractions().then(drawInteractions => {
         const activeInteractions = drawInteractions.filter(interaction => {
           return interaction.getActive() === true
         })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Point')
+        expect(activeInteractions).to.have.length(0)
       })
     })
+  })
+
+  describe('when clicking button to draw point', () => {
+    beforeEach(() => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+    })
+    it('activates ol Draw interaction in mode Point', () => {
+      checkDrawInteractionActive('Point')
+    })
 
     describe('When drawing the point on the map', () => {
       beforeEach(() => {
@@ -34,6 +47,11 @@ describe('Map controls', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
 
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
+
       it('does not display a tooltip overlay when clicking on the map', () => {
         cy.get('div.lux-tooltip').should('not.exist')
       })
@@ -46,13 +64,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Point', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Point')
-      })
+      checkDrawInteractionActive('Point')
     })
 
     describe('When drawing the label on the map', () => {
@@ -64,6 +76,11 @@ describe('Map controls', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
 
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
+
       it('does not display a tooltip overlay when clicking on the map', () => {
         cy.get('div.lux-tooltip').should('not.exist')
       })
@@ -76,13 +93,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode LineString', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('LineString')
-      })
+      checkDrawInteractionActive('LineString')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point double click)', () => {
@@ -101,6 +112,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 
@@ -110,13 +126,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Polygon', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Polygon')
-      })
+      checkDrawInteractionActive('Polygon')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (third point double click)', () => {
@@ -137,6 +147,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 
@@ -146,13 +161,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Circle', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Circle')
-      })
+      checkDrawInteractionActive('Circle')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point simple click)', () => {
@@ -171,6 +180,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 })
diff --git a/cypress/e2e/draw/draw-feat.utils.ts b/cypress/e2e/draw/draw-feat.utils.ts
index 4475d08c..ae30283a 100644
--- a/cypress/e2e/draw/draw-feat.utils.ts
+++ b/cypress/e2e/draw/draw-feat.utils.ts
@@ -16,3 +16,25 @@ export function testFeatItemDocking() {
   cy.get('*[data-cy="featItemDock"]').click()
   cy.get('*[data-cy="mapPopup"]').should('exist')
 }
+
+export function checkDrawInteractionActive(
+  type: 'Point' | 'LineString' | 'Polygon' | 'Circle'
+) {
+  cy.getDrawInteractions().then(drawInteractions => {
+    const activeInteractions = drawInteractions.filter(interaction => {
+      return interaction.getActive() === true
+    })
+    expect(activeInteractions).to.have.length(1)
+    expect(activeInteractions[0].mode_).to.be.equal(type)
+  })
+}
+
+export function checkModifyInteractionActive(exists: boolean) {
+  cy.getModifyInteraction().then(modifyInteraction => {
+    if (exists) {
+      expect(modifyInteraction).to.exist
+    } else {
+      expect(modifyInteraction).to.equal(undefined)
+    }
+  })
+}
diff --git a/cypress/e2e/draw/draw-panel.cy.ts b/cypress/e2e/draw/draw-panel.cy.ts
index c21a9385..82018f86 100644
--- a/cypress/e2e/draw/draw-panel.cy.ts
+++ b/cypress/e2e/draw/draw-panel.cy.ts
@@ -1,3 +1,5 @@
+import { checkModifyInteractionActive, testFeatItem } from './draw-feat.utils'
+
 describe('Draw panel', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -33,4 +35,16 @@ describe('Draw panel', () => {
       cy.get('@menuItem').eq(4).should('contain.text', 'Couper une ligne')
     })
   })
+
+  describe('When clicking toggle edit button', () => {
+    it('should toggle edit in panel and on map (ol modify interaction)', () => {
+      checkModifyInteractionActive(true)
+      testFeatItem()
+      cy.get('*[data-cy="featItemToggleEdit"]').click()
+      checkModifyInteractionActive(false)
+      cy.get('*[data-cy="featItemToggleEdit"]').click()
+      checkModifyInteractionActive(true)
+      testFeatItem()
+    })
+  })
 })
diff --git a/cypress/e2e/layers-selection.cy.ts b/cypress/e2e/layers-selection.cy.ts
index 882f5fd1..1e1c198e 100644
--- a/cypress/e2e/layers-selection.cy.ts
+++ b/cypress/e2e/layers-selection.cy.ts
@@ -66,7 +66,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(556)
       })
       cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-359"]').click()
@@ -76,7 +76,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(359)
         expect(layers[1].get('id')).to.eq(353)
       })
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 5b888a33..8cfa2d1d 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -36,7 +36,7 @@ Cypress.Commands.add('getDrawInteractions', () => {
       .getInteractions()
       .getArray()
       .filter(interaction => {
-        // workaround for 'instance of Draw' not working with Draw2 class
+        // workaround for 'instance of Draw' not working (with Draw2 class?)
         return (
           'finishDrawing' in interaction &&
           typeof interaction.finishDrawing === 'function'
@@ -45,10 +45,27 @@ Cypress.Commands.add('getDrawInteractions', () => {
   })
 })
 
+Cypress.Commands.add('getModifyInteraction', () => {
+  cy.window().then(win => {
+    const map = win.olMap
+    const modifyInteraction = map
+      .getInteractions()
+      .getArray()
+      .find(interaction => {
+        return (
+          'removePoint' in interaction &&
+          typeof interaction.removePoint === 'function'
+        )
+      })
+    cy.wrap(modifyInteraction)
+  })
+})
+
 declare global {
   namespace Cypress {
     interface Chainable {
       getDrawInteractions(): Chainable<Array<Interaction>>
+      getModifyInteraction(): Chainable<Interaction>
       // login(email: string, password: string): Chainable<void>
       // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
       // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
index 00bca3a9..00966781 100644
--- a/src/components/draw/feature-item.vue
+++ b/src/components/draw/feature-item.vue
@@ -32,8 +32,6 @@ function onToggleFeatureSub() {
 
 function onToggleEditFeature() {
   emit('toggleFeatureEdit', getUid(props.feature), !props.isEditing)
-
-  alert('TODO: Toggle edition mode')
 }
 
 function onClickDelete() {
diff --git a/src/components/footer/toolbar-draw.vue b/src/components/footer/toolbar-draw.vue
index 942c3066..3e09d44e 100644
--- a/src/components/footer/toolbar-draw.vue
+++ b/src/components/footer/toolbar-draw.vue
@@ -2,17 +2,19 @@
 import { useTranslation } from 'i18next-vue'
 import { storeToRefs } from 'pinia'
 
-import useDraw from '@/composables/draw/draw.composable'
 import { useDrawStore } from '@/stores/draw.store'
 
 import ButtonText from './button-text.vue'
+import { onBeforeUnmount } from 'vue'
 
 const { t } = useTranslation()
 const drawStore = useDrawStore()
-const { toggleActiveState } = drawStore
-const { drawStateActive } = storeToRefs(drawStore)
-// keep logic in composable
-useDraw()
+const { toggleDrawActiveState, setDrawActiveState } = drawStore
+const { drawStateActive, editStateActive } = storeToRefs(drawStore)
+
+onBeforeUnmount(() => {
+  setDrawActiveState(undefined)
+})
 </script>
 <template>
   <div data-cy="toolbarDraw">
@@ -22,8 +24,10 @@ useDraw()
       <li>
         <button-text
           :label="t('Draw Point', { ns: 'client' })"
-          :active="drawStateActive === 'drawPoint'"
-          @click="() => toggleActiveState('drawPoint')"
+          :active="
+            drawStateActive === 'drawPoint' || editStateActive === 'editPoint'
+          "
+          @click="() => toggleDrawActiveState('drawPoint')"
           data-cy="drawPointButton"
         >
         </button-text>
@@ -31,8 +35,10 @@ useDraw()
       <li>
         <button-text
           :label="t('Label', { ns: 'client' })"
-          :active="drawStateActive === 'drawLabel'"
-          @click="() => toggleActiveState('drawLabel')"
+          :active="
+            drawStateActive === 'drawLabel' || editStateActive === 'editLabel'
+          "
+          @click="() => toggleDrawActiveState('drawLabel')"
           data-cy="drawLabelButton"
         >
         </button-text>
@@ -40,8 +46,10 @@ useDraw()
       <li>
         <button-text
           :label="t('Line', { ns: 'client' })"
-          :active="drawStateActive === 'drawLine'"
-          @click="() => toggleActiveState('drawLine')"
+          :active="
+            drawStateActive === 'drawLine' || editStateActive === 'editLine'
+          "
+          @click="() => toggleDrawActiveState('drawLine')"
           data-cy="drawLineButton"
         >
         </button-text>
@@ -49,8 +57,11 @@ useDraw()
       <li>
         <button-text
           :label="t('Polygon', { ns: 'client' })"
-          :active="drawStateActive === 'drawPolygon'"
-          @click="() => toggleActiveState('drawPolygon')"
+          :active="
+            drawStateActive === 'drawPolygon' ||
+            editStateActive === 'editPolygon'
+          "
+          @click="() => toggleDrawActiveState('drawPolygon')"
           data-cy="drawPolygonButton"
         >
         </button-text>
@@ -58,8 +69,10 @@ useDraw()
       <li>
         <button-text
           :label="t('Circle', { ns: 'client' })"
-          :active="drawStateActive === 'drawCircle'"
-          @click="() => toggleActiveState('drawCircle')"
+          :active="
+            drawStateActive === 'drawCircle' || editStateActive === 'editCircle'
+          "
+          @click="() => toggleDrawActiveState('drawCircle')"
           data-cy="drawCircleButton"
         >
         </button-text>
@@ -67,7 +80,7 @@ useDraw()
     </ul>
     <ul
       class="absolute bottom-full top-auto z-10 pl-[130px] pb-16 w-[326px]"
-      v-if="drawStateActive === 'drawLine'"
+      v-if="drawStateActive === 'drawLine' || editStateActive === 'editLine'"
       data-cy="followRoads"
     >
       <li
diff --git a/src/components/map/map-container.vue b/src/components/map/map-container.vue
index 9a926469..00bb1019 100644
--- a/src/components/map/map-container.vue
+++ b/src/components/map/map-container.vue
@@ -14,6 +14,7 @@ import Map3dControl from '../map-controls/map-3d.vue'
 import FullscreenControl from '../map-controls/fullscreen-control.vue'
 import ZoomControl from '../map-controls/zoom-control.vue'
 import ZoomToExtentControl from '../map-controls/zoom-to-extent-control.vue'
+import useDraw from '@/composables/draw/draw.composable'
 
 const appStore = useAppStore()
 const { embedded } = storeToRefs(appStore)
@@ -21,7 +22,8 @@ const map = useMap()
 const mapContainer = ref(null)
 const olMap = map.createMap()
 // add draw layer after map init to allow restoring draw features
-map.addDrawLayer()
+const draw = useDraw()
+draw.addDrawLayer(olMap)
 
 withDefaults(
   defineProps<{
diff --git a/src/composables/draw/draw-select.composable.ts b/src/composables/draw/draw-select.composable.ts
index e8a3296b..1d81b5a8 100644
--- a/src/composables/draw/draw-select.composable.ts
+++ b/src/composables/draw/draw-select.composable.ts
@@ -11,7 +11,9 @@ import { useAppStore } from '@/stores/app.store'
 export default function useDrawSelect() {
   const map = useMap().getOlMap()
   const appStore = useAppStore()
-  const { activeFeatureId, drawnFeatures } = storeToRefs(useDrawStore())
+  const { activeFeatureId, editingFeatureId, drawnFeatures } = storeToRefs(
+    useDrawStore()
+  )
 
   listen(map, 'click', event => handleClick(event))
 
@@ -26,6 +28,7 @@ export default function useDrawSelect() {
       .filter(f => getUid(f) == newId)
       .forEach(newFeature => {
         newFeature.selected = true
+        newFeature.editable = false
         newFeature.changed()
       })
   })
@@ -40,6 +43,7 @@ export default function useDrawSelect() {
         if (featureMatch) {
           appStore.toggleMyMapsOpen(true)
           activeFeatureId.value = getUid(feature)
+          editingFeatureId.value = undefined
 
           return
         }
diff --git a/src/composables/draw/draw.composable.ts b/src/composables/draw/draw.composable.ts
index 3a78d042..a63f2881 100644
--- a/src/composables/draw/draw.composable.ts
+++ b/src/composables/draw/draw.composable.ts
@@ -1,10 +1,17 @@
 import { watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import Draw from 'ol/interaction/Draw'
-
 import { useDrawStore } from '@/stores/draw.store'
 import useDrawInteraction from './draw-interaction.composable'
 import useDrawNotifications from './draw-notifications.composable'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import OlMap from 'ol/Map'
+import useEdit from './edit.composable'
+
+export const DEFAULT_DRAW_ZINDEX = 1000
+export const FEATURE_LAYER_TYPE = 'featureLayer'
 
 type DrawInteractions = {
   drawPoint: Draw
@@ -15,7 +22,11 @@ type DrawInteractions = {
 }
 
 export default function useDraw() {
-  const { drawStateActive } = storeToRefs(useDrawStore())
+  const { drawStateActive, drawnFeatures } = storeToRefs(useDrawStore())
+
+  useDrawNotifications()
+  useEdit()
+
   const drawInteractions = {
     drawPoint: useDrawInteraction({ type: 'Point' }).drawInteraction,
     drawLabel: useDrawInteraction({ type: 'Point' }).drawInteraction,
@@ -24,8 +35,7 @@ export default function useDraw() {
     drawPolygon: useDrawInteraction({ type: 'Polygon' }).drawInteraction,
   } as DrawInteractions
 
-  useDrawNotifications()
-
+  //listener to synchronize ol interaction active states with store state
   watch(drawStateActive, drawStateActive => {
     Object.keys(drawInteractions).forEach(key => {
       if (`${[key as keyof DrawInteractions]}` === `${drawStateActive}`) {
@@ -36,5 +46,31 @@ export default function useDraw() {
     })
   })
 
-  return {}
+  const drawLayer = new VectorLayer({
+    source: new VectorSource({
+      features: [] as DrawnFeature[],
+    }),
+    zIndex: DEFAULT_DRAW_ZINDEX,
+  })
+  drawLayer.set('cyLayerType', FEATURE_LAYER_TYPE)
+
+  watch(
+    () => drawnFeatures.value,
+    drawnFeatures => {
+      setDrawnFeatures(drawnFeatures as DrawnFeature[])
+    }
+  )
+
+  function addDrawLayer(map: OlMap) {
+    map.addLayer(drawLayer)
+  }
+
+  function setDrawnFeatures(features: DrawnFeature[]) {
+    drawLayer.getSource()?.clear()
+    drawLayer.getSource()?.addFeatures(features)
+  }
+
+  return {
+    addDrawLayer,
+  }
 }
diff --git a/src/composables/draw/edit.composable.ts b/src/composables/draw/edit.composable.ts
new file mode 100644
index 00000000..260ea568
--- /dev/null
+++ b/src/composables/draw/edit.composable.ts
@@ -0,0 +1,84 @@
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { getUid } from 'ol'
+import { noModifierKeys, singleClick } from 'ol/events/condition'
+import Modify, { ModifyEvent } from 'ol/interaction/Modify'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import { listen } from 'ol/events'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { useDrawStore } from '@/stores/draw.store'
+import useMap from '../map/map.composable'
+import { EditStateActive } from '@/stores/draw.store.model'
+import { DEFAULT_DRAW_ZINDEX, FEATURE_LAYER_TYPE } from './draw.composable'
+
+export default function useEdit() {
+  const { editStateActive, editingFeatureId, drawnFeatures } = storeToRefs(
+    useDrawStore()
+  )
+  const { updateDrawnFeature, setEditActiveState } = useDrawStore()
+
+  let modifyInteraction: Modify
+  const map = useMap().getOlMap()
+  const editSource = new VectorSource({
+    features: [] as DrawnFeature[],
+  })
+  const editLayer = new VectorLayer({
+    source: editSource,
+    zIndex: DEFAULT_DRAW_ZINDEX,
+  })
+  editLayer.set('cyLayerType', FEATURE_LAYER_TYPE)
+  map.addLayer(editLayer)
+
+  watch(editStateActive, editStateActive => {
+    if (editStateActive) {
+      createModifyInteraction()
+    } else {
+      map.removeInteraction(modifyInteraction)
+    }
+  })
+
+  //listener on editingFeatureId to set stores editing states
+  watch(editingFeatureId, editingFeatureId => {
+    if (!editingFeatureId) {
+      setEditActiveState(undefined)
+      editSource.getFeatures().forEach(feature => {
+        ;(feature as DrawnFeature).editable = false
+        feature.changed()
+      })
+    }
+    editSource.clear()
+    const feature = drawnFeatures.value.find(
+      feature => getUid(feature) === editingFeatureId
+    ) as DrawnFeature
+    if (feature) {
+      const editState = feature.featureType.replace(
+        'drawn',
+        'edit'
+      ) as EditStateActive
+      setEditActiveState(editState)
+      feature.editable = true
+      feature.changed()
+      editSource.addFeature(feature)
+    }
+  })
+
+  function createModifyInteraction() {
+    if (modifyInteraction) {
+      map.removeInteraction(modifyInteraction)
+    }
+    modifyInteraction = new Modify({
+      source: editSource,
+      pixelTolerance: 20,
+      deleteCondition: function (event) {
+        return noModifierKeys(event) && singleClick(event)
+      },
+    })
+    map.addInteraction(modifyInteraction)
+
+    listen(modifyInteraction, 'modifyend', event => {
+      const feature = (event as ModifyEvent).features.getArray()[0]
+      updateDrawnFeature(feature as DrawnFeature)
+    })
+  }
+}
diff --git a/src/composables/map/map.composable.ts b/src/composables/map/map.composable.ts
index ac8624a4..90c5ca30 100644
--- a/src/composables/map/map.composable.ts
+++ b/src/composables/map/map.composable.ts
@@ -13,19 +13,12 @@ import type {
 } from '@/stores/map.store.model'
 import { MutationTypeValue } from './map.model'
 import { transformExtent } from 'ol/proj'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import { storeToRefs } from 'pinia'
-import { useDrawStore } from '@/stores/draw.store'
-import { Feature } from 'ol'
-import { Geometry } from 'ol/geom'
 
 export const PROJECTION_WEBMERCATOR = 'EPSG:3857'
 export const PROJECTION_WGS84 = 'EPSG:4326'
 export const PROJECTION_LUX = 'EPSG:2169'
 const MAX_EXTENT = JSON.parse(import.meta.env.VITE_DEFAULT_MAX_EXTENT)
 const DEFAULT_VIEW_ZOOM = parseInt(import.meta.env.VITE_DEFAULT_VIEW_ZOOM, 10)
-const DEFAULT_DRAW_ZINDEX = 1000
 
 let map: OlMap
 const olMap: ShallowRef<OlMap | undefined> = shallowRef()
@@ -192,20 +185,6 @@ export default function useMap() {
     // TODO: Add slide effect and do this update after slide animation ends
   }
 
-  function addDrawLayer() {
-    const { drawnFeatures } = storeToRefs(useDrawStore())
-    const features = drawnFeatures.value as unknown as Feature<Geometry>[] // as Collection<Feature<Geometry>>
-    const drawLayer = new VectorLayer({
-      source: new VectorSource({
-        features,
-      }),
-      zIndex: DEFAULT_DRAW_ZINDEX,
-      // altitudeMode: 'clampToGround', //used in v3, but causes type error
-    })
-    drawLayer.set('featureID', 'featureLayer')
-    map.addLayer(drawLayer)
-  }
-
   return {
     olMap,
     getOlMap,
@@ -219,6 +198,5 @@ export default function useMap() {
     getMutatedLayers,
     getMutationType,
     resize,
-    addDrawLayer,
   }
 }
diff --git a/src/composables/map/ol.composable.ts b/src/composables/map/ol.composable.ts
index 675440a7..381ad189 100644
--- a/src/composables/map/ol.composable.ts
+++ b/src/composables/map/ol.composable.ts
@@ -1,8 +1,5 @@
 import type BaseLayer from 'ol/layer/Base'
 import type OlMap from 'ol/Map'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
-import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 import { layersCache } from '@/stores/layers.cache'
 import type { Layer, LayerId } from '@/stores/map.store.model'
@@ -12,7 +9,6 @@ import { statePersistorStyleService } from '@/services/state-persistor/state-per
 import { olLayerFactoryService } from '@/services/ol-layer/ol-layer-factory.service'
 import { olLayerTimeService } from '@/services/ol-layer/ol-layer-time.service'
 import { OlLayer } from '@/services/ol-layer/ol-layer.model'
-import useMap from './map.composable'
 
 const DEFAULT_BGZINDEX = -200 // Value comming  from legacy
 
@@ -150,32 +146,6 @@ export default function useOpenLayers() {
     }
   }
 
-  function addFeatures(features: DrawnFeature[], olMap: OlMap) {
-    const mapLayers = olMap.getLayers()
-    const drawLayer = mapLayers
-      .getArray()
-      .find(
-        layer => layer.get('featureID') === 'featureLayer'
-      ) as VectorLayer<VectorSource>
-    if (!drawLayer) {
-      useMap().addDrawLayer()
-    } else {
-      drawLayer.getSource()?.addFeatures(features)
-    }
-  }
-
-  function removeFeatures(features: DrawnFeature[], olMap: OlMap) {
-    const mapLayers = olMap.getLayers()
-    const drawLayer = mapLayers
-      .getArray()
-      .find(
-        layer => layer.get('featureID') === 'featureLayer'
-      ) as VectorLayer<VectorSource>
-    features.forEach(f => {
-      drawLayer.getSource()?.removeFeature(f)
-    })
-  }
-
   return {
     addLayer,
     findLayer,
@@ -187,7 +157,5 @@ export default function useOpenLayers() {
     getLayerFromCache,
     setBgLayer,
     applyOnBgLayer,
-    addFeatures,
-    removeFeatures,
   }
 }
diff --git a/src/composables/map/ol.synchronizer.ts b/src/composables/map/ol.synchronizer.ts
index 5a487149..565d2656 100644
--- a/src/composables/map/ol.synchronizer.ts
+++ b/src/composables/map/ol.synchronizer.ts
@@ -6,20 +6,17 @@ import useOpenLayers from './ol.composable'
 
 import { useMapStore } from '@/stores/map.store'
 import { useStyleStore } from '@/stores/style.store'
-import { useDrawStore } from '@/stores/draw.store'
 import { StyleSpecification } from '@/composables/mvt-styles/mvt-styles.model'
 import useMvtStyles from '@/composables/mvt-styles/mvt-styles.composable'
 import useMap from '@/composables/map/map.composable'
 import useOffline from '@/composables/offline/offline.composable'
 import { MutationTypeValue } from './map.model'
-import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 export class OlSynchronizer {
   timeoutID: NodeJS.Timeout
   constructor(map: OlMap) {
     const mapStore = useMapStore()
     const styleStore = useStyleStore()
-    const drawStore = useDrawStore()
     const mapService = useMap()
     const styleService = useMvtStyles()
     const openLayers = useOpenLayers()
@@ -165,23 +162,5 @@ export class OlSynchronizer {
         }
       }
     )
-
-    watch(
-      () => drawStore.drawnFeatures,
-      (newFeatures, oldFeatures) => {
-        const addedFeatures = newFeatures.filter(
-          f => !oldFeatures.some(fo => fo.id == f.id)
-        )
-        if (addedFeatures.length > 0) {
-          openLayers.addFeatures(addedFeatures as DrawnFeature[], map)
-        }
-        const removedFeatures = oldFeatures.filter(
-          f => !newFeatures.some(fnew => fnew.id == f.id)
-        )
-        if (removedFeatures.length > 0) {
-          openLayers.removeFeatures(removedFeatures as DrawnFeature[], map)
-        }
-      }
-    )
   }
 }
diff --git a/src/stores/draw.store.model.ts b/src/stores/draw.store.model.ts
index a5351154..d1e806bb 100644
--- a/src/stores/draw.store.model.ts
+++ b/src/stores/draw.store.model.ts
@@ -6,6 +6,14 @@ export type DrawStateActive =
   | 'drawCircle'
   | 'drawPolygon'
 
+export type EditStateActive =
+  | undefined
+  | 'editPoint'
+  | 'editLabel'
+  | 'editLine'
+  | 'editCircle'
+  | 'editPolygon'
+
 export type DrawnFeatureType =
   | 'drawnPoint'
   | 'drawnLabel'
diff --git a/src/stores/draw.store.ts b/src/stores/draw.store.ts
index c0ca771e..f4bd7936 100644
--- a/src/stores/draw.store.ts
+++ b/src/stores/draw.store.ts
@@ -2,30 +2,70 @@ import { defineStore } from 'pinia'
 import { ref, Ref } from 'vue'
 
 import { getUid } from 'ol/util'
-import { DrawStateActive } from './draw.store.model'
+import { DrawStateActive, EditStateActive } from './draw.store.model'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 export const useDrawStore = defineStore('draw', () => {
   const activeFeatureId: Ref<String | undefined> = ref(undefined)
   const editingFeatureId: Ref<String | undefined> = ref(undefined)
   const drawStateActive = ref<DrawStateActive>(undefined)
-  // no immutable changes on drawnFeatures in functions bellow,
-  // but keep same Collection for sync with ol source (map)
+  const editStateActive = ref<EditStateActive>(undefined)
   const drawnFeatures = ref<DrawnFeature[]>([])
   const featureEditionDocked = ref(false)
 
-  function toggleActiveState(newState: DrawStateActive) {
-    if (drawStateActive.value === newState) {
+  function toggleDrawActiveState(newState: DrawStateActive) {
+    // allow draw of different geom type after edit, but not same type
+    if (
+      editStateActive.value?.replace('edit', '') ===
+      newState?.replace('draw', '')
+    ) {
+      drawStateActive.value = undefined
+      editStateActive.value = undefined
+      editingFeatureId.value = undefined
+    } else if (drawStateActive.value === newState) {
       drawStateActive.value = undefined
     } else {
-      drawStateActive.value = newState
+      setDrawActiveState(newState)
+    }
+  }
+
+  function setDrawActiveState(newState: DrawStateActive) {
+    if (newState) {
+      editStateActive.value = undefined
+      editingFeatureId.value = undefined
     }
+    drawStateActive.value = newState
+  }
+
+  function setEditActiveState(newState: EditStateActive) {
+    if (newState) {
+      drawStateActive.value = undefined
+    } else {
+      editingFeatureId.value = undefined
+    }
+    editStateActive.value = newState
   }
 
   function addDrawnFeature(feature: DrawnFeature) {
     drawnFeatures.value = [...drawnFeatures.value, feature]
     activeFeatureId.value = getUid(feature)
     editingFeatureId.value = getUid(feature)
+    editStateActive.value = feature.featureType.replace(
+      'drawn',
+      'edit'
+    ) as EditStateActive
+    drawStateActive.value = undefined
+  }
+
+  function updateDrawnFeature(feature: DrawnFeature) {
+    const index = drawnFeatures.value.findIndex(
+      drawnFeature => drawnFeature.id === feature.id
+    )
+    if (index !== -1) {
+      drawnFeatures.value[index] = feature
+    }
+    //affect immutable value to trigger reactivity for state persistor
+    drawnFeatures.value = [...drawnFeatures.value]
   }
 
   function setDrawnFeatures(features: DrawnFeature[]) {
@@ -42,11 +82,15 @@ export const useDrawStore = defineStore('draw', () => {
     activeFeatureId,
     editingFeatureId,
     drawStateActive,
+    editStateActive,
     drawnFeatures,
     featureEditionDocked,
     removeFeature,
-    toggleActiveState,
+    toggleDrawActiveState,
+    setDrawActiveState,
+    setEditActiveState,
     addDrawnFeature,
+    updateDrawnFeature,
     setDrawnFeatures,
   }
 })