diff --git a/web/siteplan/src/App.vue b/web/siteplan/src/App.vue
index 76e0367e60..c04d14a57f 100644
--- a/web/siteplan/src/App.vue
+++ b/web/siteplan/src/App.vue
@@ -13,73 +13,67 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import Menubar from '@/components/toolbar/Menubar.vue'
 import Toolbar from '@/components/toolbar/Toolbar.vue'
 import axios from 'axios'
-import { Options, Vue } from 'vue-class-component'
+import { onMounted, ref } from 'vue'
 import SvgCatalogService from './service/SvgCatalogService'
 import { store } from './store'
 import Configuration from './util/Configuration'
 import PlanProToolboxTest from './util/PlanProToolboxTest'
 import { ToolboxConfiguration } from './util/ToolboxConfiguration'
-@Options({
-  async created () {
-    store.commit('setLoading', true)
-    // Download the siteplan font
-    await axios({
-      method: 'GET',
-      url: 'font',
-      responseType: 'blob'
-    })
-      .then(response => {
-        const reader = new FileReader()
-        reader.onload = () => {
-          store.commit(
-            'setSiteplanfont',
-            `
+
+const isShowMenu = ref(false)
+const loading = ref(true)
+
+function showMenu (value: boolean): void {
+  isShowMenu.value = value
+}
+
+onMounted (async () => {
+  store.commit('setLoading', true)
+  // Download the siteplan font
+  await axios({
+    method: 'GET',
+    url: 'font',
+    responseType: 'blob'
+  })
+    .then(response => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        store.commit(
+          'setSiteplanfont',
+          `
         @font-face {
           font-family: 'siteplanfont';
           src: url('${reader.result}') format('truetype');
         }`
-          )
-        }
-        reader.readAsDataURL(new Blob([response.data]))
-      })
-      .catch(() => {
-        console.warn('Siteplan Font not available')
-      })
-    // Wait until the svg catalog service is ready
-    await SvgCatalogService.getInstance().isReady()
-    // Download the toolbox configuration
-    await axios
-      .get<ToolboxConfiguration>('/configuration.json')
-      .then(response => {
-        store.commit('setpptConfiguration', response.data)
-        store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
-        store.commit('setPlanProModelType', response.data.planproModelType)
-        // run unit tests
-        if (Configuration.developmentMode()) {
-          PlanProToolboxTest.run()
-        }
+        )
+      }
+      reader.readAsDataURL(new Blob([response.data]))
+    })
+    .catch(() => {
+      console.warn('Siteplan Font not available')
+    })
+  // Wait until the svg catalog service is ready
+  await SvgCatalogService.getInstance().isReady()
+  // Download the toolbox configuration
+  await axios
+    .get<ToolboxConfiguration>('/configuration.json')
+    .then(response => {
+      store.commit('setpptConfiguration', response.data)
+      store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
+      store.commit('setPlanProModelType', response.data.planproModelType)
+      // run unit tests
+      if (Configuration.developmentMode()) {
+        PlanProToolboxTest.run()
+      }
 
-        this.loading = false
-      })
-  },
-  components: {
-    Toolbar,
-    Menubar
-  }
+      loading.value = false
+    })
 })
-export default class App extends Vue {
-  isShowMenu = false
-  altClientHeight = 0
-  loading = true
 
-  showMenu (value: boolean): void {
-    this.isShowMenu = value
-  }
-}
 </script>
 <style>
 html,
@@ -95,13 +89,16 @@ body {
   height: 100vh;
   flex-direction: column;
 }
+
 #view {
   display: flex;
   flex: 1;
 }
+
 #menubar {
   flex-grow: 1;
 }
+
 #mainView {
   flex-grow: 5;
 }
diff --git a/web/siteplan/src/components/FeatureInfoPopup.vue b/web/siteplan/src/components/FeatureInfoPopup.vue
index 0cb33b73dd..be44b509d5 100644
--- a/web/siteplan/src/components/FeatureInfoPopup.vue
+++ b/web/siteplan/src/components/FeatureInfoPopup.vue
@@ -22,181 +22,170 @@
     </div>
   </teleport>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import MenuPopup from '@/components/popup/MenuPopup.vue'
 import { FeatureType, getFeatureData, getFeatureType } from '@/feature/FeatureInfo'
 import { LeftRight } from '@/model/SiteplanModel'
 import { store } from '@/store'
 import { getFeatureGUIDs } from '@/util/FeatureExtensions'
-import NamedFeatureLayer from '@/util/NamedFeatureLayer'
 import { compare } from '@/util/ObjectExtension'
 import { Collection, Feature, MapBrowserEvent } from 'ol'
 import Geometry from 'ol/geom/Geometry'
 import Select, { SelectEvent } from 'ol/interaction/Select'
 import Map from 'ol/Map'
 import Overlay from 'ol/Overlay'
-import { Options, Vue } from 'vue-class-component'
-
+import { onMounted, ref } from 'vue'
 /**
  * Container for feature info popups
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    MenuPopup
-  },
-  props: {
-    map: Map,
-    featureLayers: Object
-  }
-})
-export default class FeatureInfoPopup extends Vue {
-  map!: Map
-  featureLayers!: NamedFeatureLayer[]
-  mouseDownButton: LeftRight | null = null
-  infoPopup: Overlay | null = null
-  selectedFeatures: Collection<Feature<Geometry>> = new Collection()
-  featureSelectionKey = 0
-  readonly existPopupFeature = [
-    FeatureType.Signal,
-    FeatureType.PZB,
-    FeatureType.PZBGU,
-    FeatureType.TrackDesignationMarker,
-    FeatureType.TrackSectionMarker,
-    FeatureType.Track,
-    FeatureType.TrackOutline,
-    FeatureType.TrackSwitchEndMarker,
-    FeatureType.TrackSwitch,
-    FeatureType.Error,
-    FeatureType.TrackLock,
-    FeatureType.LockKey,
-    FeatureType.ExternalElementControl,
-    FeatureType.Cant,
-    FeatureType.CantLine,
-    FeatureType.Unknown
-  ]
-
-  mounted (): void {
-    // Allow feature selection
-    const select = new Select({
-      style: null,
-      condition: this.onFeatureClick,
-      hitTolerance: 10,
-      multi: true,
-      features: this.selectedFeatures
-    })
-    this.map.addInteraction(select)
-    select.on('select', this.onFeatureSelect)
-    store.subscribe(m => {
-      if (m.type === 'setMeasureEnable') {
-        select.setActive(!m.payload)
-      }
-    })
-    // Add info window overlay
-    const element = document.getElementById('featureInfoPopup')
-    if (element === null) {
-      return
-    }
-
-    this.infoPopup = new Overlay({
-      element
-    })
-    this.map.addOverlay(this.infoPopup)
-  }
 
-  getPopupAvaibleFeatures () {
-    if (this.selectedFeatures === undefined) {
-      this.resetSelection()
-      return []
+const props = defineProps<{
+  map: Map
+}>()
+
+const mouseDownButton = ref<LeftRight | null>(null)
+const infoPopup = ref<Overlay | null>(null)
+const selectedFeatures = new Collection<Feature<Geometry>>()
+const featureSelectionKey = ref(0)
+const existPopupFeature = [
+  FeatureType.Signal,
+  FeatureType.PZB,
+  FeatureType.PZBGU,
+  FeatureType.TrackDesignationMarker,
+  FeatureType.TrackSectionMarker,
+  FeatureType.Track,
+  FeatureType.TrackOutline,
+  FeatureType.TrackSwitchEndMarker,
+  FeatureType.TrackSwitch,
+  FeatureType.Error,
+  FeatureType.TrackLock,
+  FeatureType.LockKey,
+  FeatureType.ExternalElementControl,
+  FeatureType.Cant,
+  FeatureType.CantLine,
+  FeatureType.Unknown
+]
+
+onMounted(() => {
+  // Allow feature selection
+  const select = new Select({
+    style: null,
+    condition: onFeatureClick,
+    hitTolerance: 10,
+    multi: true,
+    features: selectedFeatures
+  })
+  props.map.addInteraction(select)
+  select.on('select', onFeatureSelect)
+  store.subscribe(m => {
+    if (m.type === 'setMeasureEnable') {
+      select.setActive(!m.payload)
     }
-
-    const popupAvavaibleFeatures = this.selectedFeatures.getArray().filter(feature => this.hasPopup(feature))
-    const uniqueFeatures = this.filterSameFeature(popupAvavaibleFeatures)
-
-    if (uniqueFeatures.length == 0) {
-      this.resetSelection()
-      return []
-    }
-
-    return uniqueFeatures
+  })
+  // Add info window overlay
+  const element = document.getElementById('featureInfoPopup')
+  if (element === null) {
+    return
   }
 
-  filterSameFeature (features: Feature<Geometry>[]): Array<Feature<Geometry>> {
-    const result: Feature<Geometry>[] = []
-    features.forEach(feature => {
-      const featureType = getFeatureType(feature)
-      const featuresSameType = result.filter(ele =>
-        getFeatureType(ele) === featureType)
+  const overlay = new Overlay({
+    element
+  })
+  infoPopup.value = overlay
+  props.map.addOverlay(overlay)
+})
 
-      if (featuresSameType.length === 0) {
-        result.push(feature)
-        return
-      }
+function getPopupAvaibleFeatures () {
+  const popupAvavaibleFeatures = selectedFeatures.getArray().filter(feature => hasPopup(feature))
+  const uniqueFeatures = filterSameFeature(popupAvavaibleFeatures)
 
-      const isAlreadyAdded = !featuresSameType.every(ele => compare(getFeatureData(feature), getFeatureData(ele)))
-      if (!isAlreadyAdded) {
-        result.push(feature)
-      }
-    })
-    return result
+  if (uniqueFeatures.length == 0) {
+    resetSelection()
+    return []
   }
 
-  hasPopup (feature: Feature<Geometry>): boolean {
-    const existInfoPop = this.mouseDownButton === LeftRight.LEFT &&
-      this.existPopupFeature.includes(getFeatureType(feature))
-    const existGUID = this.mouseDownButton === LeftRight.RIGHT &&
-      getFeatureGUIDs(feature).length > 0
-    return existInfoPop || existGUID
-  }
+  return uniqueFeatures
+}
+
+function filterSameFeature (features: Feature<Geometry>[]): Array<Feature<Geometry>> {
+  const result: Feature<Geometry>[] = []
+  features.forEach(feature => {
+    const featureType = getFeatureType(feature)
+    const featuresSameType = result.filter(ele =>
+      getFeatureType(ele) === featureType)
 
-  resetSelection (): void {
-    if (this.infoPopup == null) {
+    if (featuresSameType.length === 0) {
+      result.push(feature)
       return
     }
 
-    this.selectedFeatures.clear()
-    this.infoPopup.setPosition(undefined)
+    const isAlreadyAdded = !featuresSameType.every(ele => compare(getFeatureData(feature), getFeatureData(ele)))
+    if (!isAlreadyAdded) {
+      result.push(feature)
+    }
+  })
+  return result
+}
+
+function hasPopup (feature: Feature<Geometry>): boolean {
+  const existInfoPop = mouseDownButton.value === LeftRight.LEFT &&
+    existPopupFeature.includes(getFeatureType(feature))
+  const existGUID = mouseDownButton.value === LeftRight.RIGHT &&
+    getFeatureGUIDs(feature).length > 0
+  return existInfoPop || existGUID
+}
+
+function resetSelection (): void {
+  if (infoPopup.value == null) {
+    return
   }
 
-  onFeatureSelect (event: SelectEvent): void {
-    // Update popup
-    this.featureSelectionKey++
-    // Reset state if no features are selected
-    const features = event.selected
-    if (!features || features.length === 0) {
-      this.resetSelection()
-      return
-    }
+  selectedFeatures.clear()
+  infoPopup.value.setPosition(undefined)
+}
 
-    this.infoPopup?.setPosition(event.mapBrowserEvent.coordinate)
+function onFeatureSelect (event: SelectEvent): void {
+  // Update popup
+  featureSelectionKey.value++
+  // Reset state if no features are selected
+  const features = event.selected
+  if (!features || features.length === 0) {
+    resetSelection()
+    return
   }
 
-  onFeatureClick (event: MapBrowserEvent<PointerEvent>): boolean {
-    if (event.originalEvent.type === 'pointerdown') {
-      switch (event.originalEvent.buttons) {
-        case 1: {
-          this.mouseDownButton = LeftRight.LEFT
-          break
-        }
-        case 2: {
-          this.mouseDownButton = LeftRight.RIGHT
-          break
-        }
-        default: {
-          this.mouseDownButton = null
-        }
+  infoPopup.value?.setPosition(event.mapBrowserEvent.coordinate)
+}
+
+function onFeatureClick (event: MapBrowserEvent): boolean {
+  if (event.originalEvent instanceof PointerEvent &&
+    event.originalEvent.type === 'pointerdown'
+  ) {
+    switch (event.originalEvent.buttons) {
+      case 1: {
+        mouseDownButton.value = LeftRight.LEFT
+        break
+      }
+      case 2: {
+        mouseDownButton.value = LeftRight.RIGHT
+        break
+      }
+      default: {
+        mouseDownButton.value = null
       }
     }
-
-    return (
-      event.originalEvent.type === 'pointerdown' &&
-        (
-          this.mouseDownButton === LeftRight.LEFT ||
-          this.mouseDownButton === LeftRight.RIGHT
-        )
-    )
   }
+
+  return (
+    event.originalEvent instanceof PointerEvent &&
+    event.originalEvent.type === 'pointerdown' &&
+      (
+        mouseDownButton.value === LeftRight.LEFT ||
+        mouseDownButton.value === LeftRight.RIGHT
+      )
+  )
 }
 </script>
 
diff --git a/web/siteplan/src/components/FeatureService.vue b/web/siteplan/src/components/FeatureService.vue
index 767e1dc774..8954406ef0 100644
--- a/web/siteplan/src/components/FeatureService.vue
+++ b/web/siteplan/src/components/FeatureService.vue
@@ -11,7 +11,6 @@
     <JumpToGuid
       :map="map"
       :feature-layers="featureLayers"
-      :model="model"
     />
     <FeatureInfoPopup
       :map="map"
@@ -19,7 +18,7 @@
     />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import CollisionFeature from '@/collision/CollisionFeature'
 import JumpToGuid from '@/components/development/JumpToGuid.vue'
 import FeatureInfoPopup from '@/components/FeatureInfoPopup.vue'
@@ -59,12 +58,9 @@ import axios from 'axios'
 import { Feature } from 'ol'
 import Geometry from 'ol/geom/Geometry'
 import Map from 'ol/Map'
-import { nextTick } from 'vue'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
 import CollisionService from '../collision/CollisionService'
 import SiteplanModel, { SiteplanColorValue } from '../model/SiteplanModel'
-import SvgService from '../service/SvgService'
 import Configuration from '../util/Configuration'
 import CenterMainRouteControl from '../util/Controls/CenterMainRouteControl'
 import ExtentControl from '../util/Controls/ExtentControl'
@@ -75,327 +71,315 @@ import NamedFeatureLayer from '../util/NamedFeatureLayer'
  *
  * @author Stuecker
  */
-@Options({
-  created () {
-    this.registerFeature(store.state.map)
-    this.unsubscribe = store.subscribe(m => {
-      if (m.type === 'setRouteVisible') {
-        this.featureLayers.forEach((layer: NamedFeatureLayer) => {
-          if (layer.getLayerType() === FeatureLayerType.Route) {
-            layer.changed()
-          }
-        })
-      } else if (m.type === 'setSessionState') {
-        this.onModelChange(this.model)
-      }
-    })
-  },
-  components: {
-    JumpToGuid,
-    RouteFeature,
-    FeatureInfoPopup
-  },
-  watch: {
-    model (newmodel) {
-      this.onModelChange(newmodel)
-    }
-  },
+const map: Map = store.state.map
+const featureLayers = shallowRef<NamedFeatureLayer[]>([])
+const model = ref<SiteplanModel | null>(null)
+const listFeature: ILageplanFeature[] = []
+const collisionService = new CollisionService(map)
+let unsubscribeRouteAndSession: (() => void) | undefined
+let unsubscribeSheetCut: (() => void) | undefined
 
-  beforeUnmount () {
-    store.commit('setRouteVisible', false)
-    this.unsubscribe()
-  }
-})
-export default class FeatureService extends Vue {
-  static readonly COLOR_UNCHANGED_VIEW = [140, 150, 157]
-  static readonly COLOR_UNCHANGED_PLANNING = [0, 0, 0]
-  static readonly COLOR_ADDED = [179, 40, 33] // RAL3016
-  static readonly COLOR_REMOVED = [241, 221, 56] // RAL1016
+registerFeature()
 
-  featureLayers: NamedFeatureLayer[] = []
-  unsubscribe: SubscribeOptions | undefined
-  map: Map = store.state.map
-  model: SiteplanModel | null = null
-  svgService: SvgService = new SvgService()
-  listFeature: ILageplanFeature[] = []
-  inLODView = false
-  collisionService = new CollisionService(this.map)
-
-  mounted (): void {
-    this.createLayers()
-    this.loadModel()
-    store.subscribe((m, s) => {
-      if (m.type === 'setSheetCutCRS') {
-        PlanProToolbox.changeLayoutCRS(s.sheetCutCRS)
-        store.commit('setLoading', true)
-        this.loadModel()
+unsubscribeRouteAndSession = store.subscribe(m => {
+  if (m.type === 'setRouteVisible') {
+    featureLayers.value.forEach(layer => {
+      if (layer.getLayerType() === FeatureLayerType.Route) {
+        layer.changed()
       }
     })
+  } else if (m.type === 'setSessionState' && model.value !== null) {
+    onModelChange(model.value)
   }
+})
 
-  private loadModel () {
-    // Download the current model
-    const modelType = store.state.planproModelType
-    axios
-      .get<SiteplanModel>(`/${modelType}.json`)
-      .then(response => {
-        this.modelLoaded(response.data)
-        store.commit('setLoading', false)
-      })
-      .catch(e => {
-        console.error(`Could not load ${modelType}.json`)
-        console.error(e)
-        store.commit('setLoading', false)
-        store.commit('setError', {
-          iserror: true,
-          msg: `Could not load ${modelType}.json`
-        })
-      })
-  }
-
-  unmounted (): void {
-    // Reset stored Map
-    store.commit('resetMap')
+watch(model, newModel => {
+  if (newModel !== null) {
+    onModelChange(newModel)
   }
+})
 
-  onModelChange (newValue: SiteplanModel) {
-    try {
-      // Remove all existing features
-      this.featureLayers.forEach(layer => layer.getSource()?.clear())
-      this.collisionService.reset()
-
-      if (newValue.layoutInfo !== undefined && newValue.layoutInfo !== null && newValue.layoutInfo.length > 0) {
-        store.commit('setSheetCutAvaiable', true)
-      }
-
-      // Load features
-      this.listFeature
-        .flatMap(feature => {
-          if (feature instanceof LayoutInfoFeature) {
-            return feature.getLayoutFeatures(newValue.layoutInfo)
-          }
+onMounted(() => {
+  createLayers()
+  loadModel()
 
-          return this.loadFeatureType(newValue, feature)
-        })
-        .groupBy(c => getFeatureLayer(c))
-        .forEach((features, layerIndex) => {
-          const layer = this.featureLayers.find(
-            c => c.getLayerType() === layerIndex
-          )
-          layer?.getSource()?.addFeatures(features)
-        })
+  unsubscribeSheetCut = store.subscribe((m, s) => {
+    if (m.type === 'setSheetCutCRS') {
+      PlanProToolbox.changeLayoutCRS(s.sheetCutCRS)
+      store.commit('setLoading', true)
+      loadModel()
+    }
+  })
+})
 
-      this.listFeature
-        .sort((a, b) => a.getDelayedFeatureOrder() - b.getDelayedFeatureOrder())
-        .flatMap(feature => this.loadDelayedFeatureType(newValue, feature))
-        .groupBy(c => getFeatureLayer(c))
-        .forEach((features, index) => {
-          const layer = this.featureLayers.find(
-            c => c.getLayerType() === index
-          )
-          layer?.getSource()?.addFeatures(features)
-        })
+onBeforeUnmount(() => {
+  store.commit('setRouteVisible', false)
+  unsubscribeRouteAndSession?.()
+  unsubscribeSheetCut?.()
+})
 
-      // Create bounding boxes
-      CollisionFeature.addCollisionFeatures(this.featureLayers)
-      // Start collision detection
-      this.collisionService.processCollisions(this.featureLayers)
-    } catch (exception) {
-      console.error('Siteplan model update failed')
-      console.error(exception)
-    }
-  }
+onUnmounted(() => {
+  // Reset stored Map
+  store.commit('resetMap')
+})
 
-  private loadFeatureType (
-    model: SiteplanModel,
-    featureClass: ILageplanFeature
-  ): Feature<Geometry>[] {
-    try {
-      // eslint-disable-next-line default-case
-      switch (store.state.sessionState) {
-        case TableType.INITIAL:
-          return [
-            model.commonState,
-            model.initialState,
-            model.changedInitialState
-          ]
-            .map(state => featureClass.getFeatures(state))
-            .flat()
-            .map(feature => featureClass.setFeatureColor(feature))
-        case TableType.FINAL:
-          return [
-            model.commonState,
-            model.finalState,
-            model.changedFinalState
-          ]
-            .map(state => featureClass.getFeatures(state))
-            .flat()
-            .map(feature => featureClass.setFeatureColor(feature))
-        case TableType.DIFF:{
-          const compareState = featureClass.compareChangedState(
-            model.changedInitialState,
-            model.changedFinalState
-          )
-          return [
-            featureClass
-              .getFeatures(model.commonState)
-              .map(feature => featureClass.setFeatureColor(feature)),
-            compareState,
-            featureClass
-              .getFeatures(model.finalState)
-              .map(feature =>
-                featureClass.setFeatureColor(
-                  feature,
-                  SiteplanColorValue.COLOR_ADDED
-                )),
-            featureClass
-              .getFeatures(model.initialState)
-              .map(feature =>
-                featureClass.setFeatureColor(
-                  feature,
-                  SiteplanColorValue.COLOR_REMOVED
-                ))
-          ].flat()
-        }
-      }
-    } catch (e) {
+function loadModel () {
+  // Download the current model
+  const modelType = store.state.planproModelType
+  axios
+    .get<SiteplanModel>(`/${modelType}.json`)
+    .then(response => {
+      modelLoaded(response.data)
+      store.commit('setLoading', false)
+    })
+    .catch(e => {
+      console.error(`Could not load ${modelType}.json`)
       console.error(e)
-      console.error('Cannot load feature ' + featureClass.constructor.name)
       store.commit('setLoading', false)
       store.commit('setError', {
         iserror: true,
-        msg: 'Cannot load ' + featureClass.constructor.name
+        msg: `Could not load ${modelType}.json`
       })
+    })
+}
+
+function onModelChange (newValue: SiteplanModel) {
+  try {
+    // Remove all existing features
+    featureLayers.value.forEach(layer => layer.getSource()?.clear())
+    collisionService.reset()
+
+    if (newValue.layoutInfo !== undefined && newValue.layoutInfo !== null && newValue.layoutInfo.length > 0) {
+      store.commit('setSheetCutAvaiable', true)
     }
-    return []
+
+    // Load features
+    listFeature
+      .flatMap(feature => {
+        if (feature instanceof LayoutInfoFeature) {
+          return feature.getLayoutFeatures(newValue.layoutInfo)
+        }
+
+        return loadFeatureType(newValue, feature)
+      })
+      .groupBy(c => getFeatureLayer(c))
+      .forEach((features, layerIndex) => {
+        const layer = featureLayers.value.find(
+          c => c.getLayerType() === layerIndex
+        )
+        layer?.getSource()?.addFeatures(features)
+      })
+
+    listFeature
+      .sort((a, b) => a.getDelayedFeatureOrder() - b.getDelayedFeatureOrder())
+      .flatMap(feature => loadDelayedFeatureType(newValue, feature))
+      .groupBy(c => getFeatureLayer(c))
+      .forEach((features, index) => {
+        const layer = featureLayers.value.find(
+          c => c.getLayerType() === index
+        )
+        layer?.getSource()?.addFeatures(features)
+      })
+
+    // Create bounding boxes
+    CollisionFeature.addCollisionFeatures(featureLayers.value)
+    // Start collision detection
+    collisionService.processCollisions(featureLayers.value)
+  } catch (exception) {
+    console.error('Siteplan model update failed')
+    console.error(exception)
   }
+}
 
-  private loadDelayedFeatureType (
-    model: SiteplanModel,
-    featureClass: ILageplanFeature
-  ): Feature<Geometry>[] {
-    try {
-      if (featureClass != null) {
-        return featureClass
-          .getDelayedFeatures(model.commonState, this.featureLayers)
+function loadFeatureType (
+  loadedModel: SiteplanModel,
+  featureClass: ILageplanFeature
+): Feature<Geometry>[] {
+  try {
+    // eslint-disable-next-line default-case
+    switch (store.state.sessionState) {
+      case TableType.INITIAL:
+        return [
+          loadedModel.commonState,
+          loadedModel.initialState,
+          loadedModel.changedInitialState
+        ]
+          .map(state => featureClass.getFeatures(state))
+          .flat()
           .map(feature => featureClass.setFeatureColor(feature))
+      case TableType.FINAL:
+        return [
+          loadedModel.commonState,
+          loadedModel.finalState,
+          loadedModel.changedFinalState
+        ]
+          .map(state => featureClass.getFeatures(state))
+          .flat()
+          .map(feature => featureClass.setFeatureColor(feature))
+      case TableType.DIFF: {
+        const compareState = featureClass.compareChangedState(
+          loadedModel.changedInitialState,
+          loadedModel.changedFinalState
+        )
+        return [
+          featureClass
+            .getFeatures(loadedModel.commonState)
+            .map(feature => featureClass.setFeatureColor(feature)),
+          compareState,
+          featureClass
+            .getFeatures(loadedModel.finalState)
+            .map(feature =>
+              featureClass.setFeatureColor(
+                feature,
+                SiteplanColorValue.COLOR_ADDED
+              )),
+          featureClass
+            .getFeatures(loadedModel.initialState)
+            .map(feature =>
+              featureClass.setFeatureColor(
+                feature,
+                SiteplanColorValue.COLOR_REMOVED
+              ))
+        ].flat()
       }
-    } catch (e) {
-      console.error(e)
-      console.error('Cannot load feature')
-      store.commit('setLoading', false)
-      store.commit('setError', {
-        iserror: true,
-        msg: 'Cannot load feature'
-      })
     }
-    return []
+  } catch (e) {
+    console.error(e)
+    console.error('Cannot load feature ' + featureClass.constructor.name)
+    store.commit('setLoading', false)
+    store.commit('setError', {
+      iserror: true,
+      msg: 'Cannot load ' + featureClass.constructor.name
+    })
   }
+  return []
+}
 
-  private createLayers (): void {
-    const baseIndex = 2
-    this.featureLayers = Object.values(FeatureLayerType)
-      .filter(x => isNaN(Number(x)))
-      .map((key, index) => new NamedFeatureLayer(baseIndex + index, index))
-    this.featureLayers.forEach(layer => {
-      this.map.addLayer(layer)
-      if (layer.getLayerType() === FeatureLayerType.SheetCut && !Configuration.developmentMode()) {
-        layer.setVisible(false)
-      }
+function loadDelayedFeatureType (
+  loadedModel: SiteplanModel,
+  featureClass: ILageplanFeature
+): Feature<Geometry>[] {
+  try {
+    if (featureClass != null) {
+      return featureClass
+        .getDelayedFeatures(loadedModel.commonState, featureLayers.value)
+        .map(feature => featureClass.setFeatureColor(feature))
+    }
+  } catch (e) {
+    console.error(e)
+    console.error('Cannot load feature')
+    store.commit('setLoading', false)
+    store.commit('setError', {
+      iserror: true,
+      msg: 'Cannot load feature'
     })
-    store.state.featureLayers = this.featureLayers
-    store.commit('setFeatureLayers', this.featureLayers)
   }
+  return []
+}
 
-  private registerFeature () {
-    this.listFeature.push(new ErrorFeature(this.map))
-    this.listFeature.push(new FMAFeature(this.map))
-    this.listFeature.push(new PlatformFeature(this.map))
-    this.listFeature.push(new PZBFeature(this.map))
-    this.listFeature.push(new PZBGUFeature(this.map))
-    this.listFeature.push(new RouteFeature(this.map))
-    this.listFeature.push(new RouteMarkerFeature(this.map))
-    this.listFeature.push(new SignalFeature(this.map))
-    this.listFeature.push(new SignalRouteMarkerFeature(this.map))
-    this.listFeature.push(new StationFeature(this.map))
-    this.listFeature.push(new TrackDesignationMarkerFeature(this.map))
-    this.listFeature.push(new TrackFeature(this.map))
-    this.listFeature.push(new TrackLockFeature(this.map))
-    this.listFeature.push(new TrackSectionMarkerFeature(this.map))
-    this.listFeature.push(new TrackSwitchEndMarkerFeature(this.map))
-    this.listFeature.push(new TrackSwitchFeature(this.map))
-    this.listFeature.push(new TrackCloseFeature(this.map))
-    this.listFeature.push(new ExternalElementControlFeature(this.map))
-    this.listFeature.push(new LockKeyFeature(this.map))
-    this.listFeature.push(new LayoutInfoFeature(this.map))
-    this.listFeature.push(new CantFeature(this.map))
-    this.listFeature.push(new CantLineFeature(this.map))
-    this.listFeature.push(new UnknownObjectFeature(this.map))
-    this.listFeature.push(new TrackDirectionFeature(this.map))
-  }
+function createLayers (): void {
+  const baseIndex = 2
+  featureLayers.value = Object.values(FeatureLayerType)
+    .filter(x => isNaN(Number(x)))
+    .map((key, index) => new NamedFeatureLayer(baseIndex + index, index))
+  featureLayers.value.forEach(layer => {
+    map.addLayer(layer)
+    if (layer.getLayerType() === FeatureLayerType.SheetCut && !Configuration.developmentMode()) {
+      layer.setVisible(false)
+    }
+  })
+  store.state.featureLayers = featureLayers.value
+  store.commit('setFeatureLayers', featureLayers.value)
+}
 
-  private modelLoaded (model: SiteplanModel) {
-    this.model = model
-    // console.log(JSON.stringify(model))
-    store.commit('setModel', this.model)
+function registerFeature () {
+  listFeature.push(new ErrorFeature(map))
+  listFeature.push(new FMAFeature(map))
+  listFeature.push(new PlatformFeature(map))
+  listFeature.push(new PZBFeature(map))
+  listFeature.push(new PZBGUFeature(map))
+  listFeature.push(new RouteFeature(map))
+  listFeature.push(new RouteMarkerFeature(map))
+  listFeature.push(new SignalFeature(map))
+  listFeature.push(new SignalRouteMarkerFeature(map))
+  listFeature.push(new StationFeature(map))
+  listFeature.push(new TrackDesignationMarkerFeature(map))
+  listFeature.push(new TrackFeature(map))
+  listFeature.push(new TrackLockFeature(map))
+  listFeature.push(new TrackSectionMarkerFeature(map))
+  listFeature.push(new TrackSwitchEndMarkerFeature(map))
+  listFeature.push(new TrackSwitchFeature(map))
+  listFeature.push(new TrackCloseFeature(map))
+  listFeature.push(new ExternalElementControlFeature(map))
+  listFeature.push(new LockKeyFeature(map))
+  listFeature.push(new LayoutInfoFeature(map))
+  listFeature.push(new CantFeature(map))
+  listFeature.push(new CantLineFeature(map))
+  listFeature.push(new UnknownObjectFeature(map))
+  listFeature.push(new TrackDirectionFeature(map))
+}
 
-    // Refresh the vector layer (including features) when the map is rotated
-    const view = this.map.getView()
-    view.on('change:rotation', () => {
-      this.featureLayers.forEach(layer => layer.changed())
-    })
+function modelLoaded (loadedModel: SiteplanModel) {
+  model.value = loadedModel
+  // console.log(JSON.stringify(model))
+  store.commit('setModel', loadedModel)
 
-    // Once the map is loaded, set up LOD limits
-    // This cannot be applied immediately, as a view with a center is required
-    this.map.once('rendercomplete', () => {
-      const lodScale = Configuration.getLodScale()
-      const lodResolution = getResolutionForScale(this.map.getView(), lodScale)
-      const lodZoom = this.map.getView().getZoomForResolution(lodResolution)
-      if (!lodZoom) {
-        return
-      }
+  // Refresh the vector layer (including features) when the map is rotated
+  const view = map.getView()
+  view.on('change:rotation', () => {
+    featureLayers.value.forEach(layer => layer.changed())
+  })
 
-      this.featureLayers
-        .filter(
-          c =>
-            c.getLayerType() !== FeatureLayerType.Track &&
-            c.getLayerType() !== FeatureLayerType.Collision &&
-            c.getLayerType() !== FeatureLayerType.SheetCut
-        )
-        .forEach(c => {
-          c.setMinZoom(lodZoom)
-        })
-    })
+  // Once the map is loaded, set up LOD limits
+  // This cannot be applied immediately, as a view with a center is required
+  map.once('rendercomplete', () => {
+    const lodScale = Configuration.getLodScale()
+    const lodResolution = getResolutionForScale(map.getView(), lodScale)
+    const lodZoom = map.getView().getZoomForResolution(lodResolution)
+    if (!lodZoom) {
+      return
+    }
 
-    // Move the map view to show all features and add the control for it
-    // Avoid doing this during hot reloads
-    if (
-      !this.map
-        .getControls()
-        .getArray()
-        .find(c => c instanceof ExtentControl)
-    ) {
-      const extentControl = new ExtentControl(view, this.featureLayers)
-      this.map.addControl(extentControl)
+    featureLayers.value
+      .filter(
+        c =>
+          c.getLayerType() !== FeatureLayerType.Track &&
+          c.getLayerType() !== FeatureLayerType.Collision &&
+          c.getLayerType() !== FeatureLayerType.SheetCut
+      )
+      .forEach(c => {
+        c.setMinZoom(lodZoom)
+      })
+  })
 
-      const centerControl = new CenterMainRouteControl(view, model)
-      this.map.addControl(centerControl)
+  // Move the map view to show all features and add the control for it
+  // Avoid doing this during hot reloads
+  if (
+    !map
+      .getControls()
+      .getArray()
+      .find(c => c instanceof ExtentControl)
+  ) {
+    const extentControl = new ExtentControl(view, featureLayers.value)
+    map.addControl(extentControl)
 
-      this.map.addControl(new MeasureControl(this.map))
+    const centerControl = new CenterMainRouteControl(view, loadedModel)
+    map.addControl(centerControl)
 
-      // If a center position is available, apply it. Otherwise zoom to fit
-      if (this.model.centerPosition === undefined) {
-        nextTick(() => {
-          extentControl.fit()
-        })
-      } else {
-        nextTick(() => {
-          centerControl.centerView()
-        })
-      }
+    map.addControl(new MeasureControl(map))
 
-      this.map.addInteraction(new FeatureClickInteraction())
+    // If a center position is available, apply it. Otherwise zoom to fit
+    if (model.value?.centerPosition === undefined) {
+      nextTick(() => {
+        extentControl.fit()
+      })
+    } else {
+      nextTick(() => {
+        centerControl.centerView()
+      })
     }
+
+    map.addInteraction(new FeatureClickInteraction())
   }
 }
 </script>
diff --git a/web/siteplan/src/components/Lageplan.vue b/web/siteplan/src/components/Lageplan.vue
index deef7973af..6eb0113656 100644
--- a/web/siteplan/src/components/Lageplan.vue
+++ b/web/siteplan/src/components/Lageplan.vue
@@ -23,52 +23,48 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { store } from '@/store'
 import 'material-design-icons/iconfont/material-icons.css'
-import FeatureService from './FeatureService'
-import MapContainer from './MapContainer'
-
-export default {
-  name: 'Lageplan',
-  components: {
-    MapContainer,
-    FeatureService
-  },
-  data: () => ({
-    loading: true,
-    error: {
-      iserror: false,
-      msg: ''
-    },
-    unsubscribe: undefined
-  }),
-  created () {
-    this.unsubscribe = store.subscribe((m, s) => {
-      if (m.type === 'setLoading') {
-        this.loading = s.loading
-      }
-
-      if (m.type === 'setError') {
-        this.error = s.error
-      }
-    })
-  },
-  beforeUnmount () {
-    this.unsubscribe()
-  },
-  methods: {
-    alertBox () {
-      alert(this.error.msg)
-    },
-    loadingIndicatorState () {
-      return this.loading ? 'visible' : 'hidden'
-    },
-    loadingIndicatorAnimationState () {
-      return this.loading ? 'running' : 'paused'
-    }
+import FeatureService from './FeatureService.vue'
+import MapContainer from './MapContainer.vue'
+import { onBeforeUnmount, ref } from 'vue'
+
+const loading = ref(true)
+
+const error = ref({
+  iserror: false,
+  msg: ''
+})
+
+let unsubscribe: (() => void) | undefined
+
+unsubscribe = store.subscribe((m, s) => {
+  if (m.type === 'setLoading') {
+    loading.value = s.loading
   }
+
+  if (m.type === 'setError') {
+    error.value = s.error
+  }
+})
+
+onBeforeUnmount(() => {
+  unsubscribe?.()
+})
+
+function alertBox () {
+  alert(error.value.msg)
+}
+
+function loadingIndicatorState () {
+  return loading.value ? 'visible' : 'hidden'
 }
+
+function loadingIndicatorAnimationState () {
+  return loading.value ? 'running' : 'paused'
+}
+
 </script>
 <style>
 #lageplan {
diff --git a/web/siteplan/src/components/MapContainer.vue b/web/siteplan/src/components/MapContainer.vue
index d47fab6875..7fd764fe01 100644
--- a/web/siteplan/src/components/MapContainer.vue
+++ b/web/siteplan/src/components/MapContainer.vue
@@ -10,13 +10,13 @@
   <div class="map-container">
     <div
       id="map-root"
-      ref="map-root"
+      ref="mapRoot"
     >
       <div class="custom-control-container">
-        <MapSourceSelection v-if="isSiteplan()" />
-        <LayerControl v-if="isDevelopmentMode && isSiteplan()" />
+        <MapSourceSelection v-if="isSiteplan" />
+        <LayerControl v-if="isDevelopmentMode && isSiteplan" />
         <ModelSummaryControl v-if="isDevelopmentMode" />
-        <SettingEditor v-if="isSiteplan()" />
+        <SettingEditor v-if="isSiteplan" />
       </div>
     </div>
     <div
@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import LayerControl from '@/components/development/LayerControl.vue'
 import ModelSummaryControl from '@/components/development/ModelSummaryControl.vue'
 import SettingEditor from '@/components/development/SettingEditor.vue'
@@ -41,122 +41,108 @@ import { getPixelProMeterAtScale, setMapScale } from '@/util/MapScale'
 import OlMap from 'ol/Map'
 import 'ol/ol.css'
 import OlView from 'ol/View'
-import { Options, Vue } from 'vue-class-component'
+import { computed, onMounted, ref } from 'vue'
 
 /**
  * Container for the open layers map
  *
  * @author Stuecker
  */
-@Options({
-  props: {},
-  components: {
-    MapSourceSelection,
-    LayerControl,
-    ModelSummaryControl,
-    SettingEditor
-  }
-})
-export default class MapContainer extends Vue {
-  isDevelopmentMode = Configuration.developmentMode()
-  map: OlMap = store.state.map
-  $refs!: {
-    [ 'map-root' ]: HTMLInputElement
+
+const isDevelopmentMode = Configuration.developmentMode()
+const map: OlMap = store.state.map
+const mapRoot = ref<HTMLDivElement | null>(null)
+
+const scaleLocked = ref(0)
+let scaleLine: ScaleBarControl | undefined
+
+const isSiteplan = computed(() =>
+  store.state.planproModelType === PlanProModelType.SITEPLAN)
+
+function getMapScale (): number {
+  return scaleLine!.getScaleForResolution()
+}
+
+onMounted((): void => {
+  const view = new OlView()
+  view.setConstrainResolution(false)
+  view.setRotation(0)
+
+  if (store.state.planproModelType === PlanProModelType.SITEPLAN) {
+    scaleLine = new ScaleBarControl(() => {
+      scaleLocked.value = Configuration.getInternalDefaultLodScale()
+      setMapScale(map.getView(), scaleLocked.value)
+      getPixelProMeterAtScale(
+        map,
+        map.getView(),
+        100
+      )
+    })
+
+    map.addControl(scaleLine)
+
+    map.on('rendercomplete', () => {
+      const ALLOWED_OFFSET = 0.01
+
+      if (!scaleLocked.value) {
+        return
+      }
+
+      const scale = getMapScale()
+      if (
+        scale > scaleLocked.value + ALLOWED_OFFSET ||
+        scale < scaleLocked.value - ALLOWED_OFFSET
+      ) {
+        setMapScale(map.getView(), scaleLocked.value)
+      }
+    })
   }
 
-  scaleLocked = 0
-  scaleLine!: ScaleBarControl
-
-  mounted (): void {
-    // Initialize view
-    const view = new OlView()
-    view.setConstrainResolution(false)
-    view.setRotation(0)
-
-    // Allow clicking the scale bar to force a 1:1000 scale
-    if (store.state.planproModelType === PlanProModelType.SITEPLAN) {
-      this.scaleLine = new ScaleBarControl(() => {
-        this.scaleLocked = Configuration.getInternalDefaultLodScale()
-        setMapScale(this.map.getView(), this.scaleLocked)
-        getPixelProMeterAtScale(
-          this.map,
-          this.map.getView(),
-          100
-        )
-      })
-      this.map.addControl(this.scaleLine)
-      // Reapply zoom level after moving
-      this.map.on('rendercomplete', () => {
-      // Allow a minimal offset to avoid constant rescaling
-        const ALLOWED_OFFSET = 0.01
-        if (!this.scaleLocked) {
-          return
-        }
-
-        const scale = this.getMapScale()
-        if (
-          scale > this.scaleLocked + ALLOWED_OFFSET ||
-        scale < this.scaleLocked - ALLOWED_OFFSET
-        ) {
-          setMapScale(this.map.getView(), this.scaleLocked)
-        }
-      })
+  map.once('rendercomplete', () => {
+    const scaleValue = Configuration.getExportScaleValue() / 4
+    if (store.state.pixelPerMeterAtScale.has(scaleValue)) {
+      return
     }
 
-    this.map.once('rendercomplete', () => {
-      // the export to image should have high resolution
-      // than scale value to avoid blurred symbols.
-      const scaleValue = Configuration.getExportScaleValue() / 4
-      if (store.state.pixelPerMeterAtScale.has(scaleValue)) {
+    getPixelProMeterAtScale(
+      map,
+      map.getView(),
+      scaleValue
+    ).then(pixelProMeter => {
+      if (pixelProMeter === undefined) {
         return
       }
 
-      getPixelProMeterAtScale(
-        this.map,
-        this.map.getView(),
-        scaleValue
-      ).then(pixelProMeter => {
-        if (pixelProMeter === undefined) {
-          return
-        }
-
-        // Set the pixel pro meter value in the store
-        store.commit('setPixelProMeter', {
-          scaleValue: Configuration.getExportScaleValue() / 4,
-          ppm: Math.round(pixelProMeter)
-        })
-        console.log(pixelProMeter)
-        store.commit('setCustomPpm', Math.round(pixelProMeter))
+      store.commit('setPixelProMeter', {
+        scaleValue: Configuration.getExportScaleValue() / 4,
+        ppm: Math.round(pixelProMeter)
       })
+      console.log(pixelProMeter)
+      store.commit('setCustomPpm', Math.round(pixelProMeter))
     })
+  })
 
-    // Disable locked scale after manually zooming
-    this.map.on('movestart', e => {
-      const previousZoom = e.frameState?.viewState.zoom
-      const currentZoom = this.map.getView().getZoom()
-      if (previousZoom !== currentZoom) {
-        this.scaleLocked = 0
-      }
-    })
-    const rotateLeftControl = new RotateViewControl(false, 30, view)
-    const rotateRightControl = new RotateViewControl(true, -30, view)
+  map.on('movestart', e => {
+    const previousZoom = e.frameState?.viewState.zoom
+    const currentZoom = map.getView().getZoom()
+    if (previousZoom !== currentZoom) {
+      scaleLocked.value = 0
+    }
+  })
 
-    this.map.addControl(rotateLeftControl)
-    this.map.addControl(rotateRightControl)
-    this.map.addControl(new ExportControl(this.map))
+  const rotateLeftControl = new RotateViewControl(false, 30, view)
+  const rotateRightControl = new RotateViewControl(true, -30, view)
 
-    this.map.setTarget(this.$refs['map-root'])
-    this.map.setView(view)
-  }
+  map.addControl(rotateLeftControl)
+  map.addControl(rotateRightControl)
+  map.addControl(new ExportControl(map))
 
-  getMapScale (): number {
-    return this.scaleLine.getScaleForResolution()
+  if (mapRoot.value) {
+    map.setTarget(mapRoot.value)
   }
 
-  isSiteplan () {
-    return store.state.planproModelType === PlanProModelType.SITEPLAN
-  }
-}
+  map.setView(view)
+})
 </script>
 
 <style>
diff --git a/web/siteplan/src/components/MapSourceSelection.vue b/web/siteplan/src/components/MapSourceSelection.vue
index 537b6687d3..afbd1988c9 100644
--- a/web/siteplan/src/components/MapSourceSelection.vue
+++ b/web/siteplan/src/components/MapSourceSelection.vue
@@ -51,7 +51,7 @@
   </SideInfoControl>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SideInfoControl from '@/components/SideInfoControl.vue'
 import { store } from '@/store'
 import 'material-design-icons/iconfont/material-icons.css'
@@ -59,7 +59,7 @@ import TileLayer from 'ol/layer/Tile'
 import VectorTileLayer from 'ol/layer/VectorTile'
 import OlMap from 'ol/Map'
 import TileSource from 'ol/source/Tile'
-import { Options, Vue } from 'vue-class-component'
+import { onMounted, ref, watch } from 'vue'
 import { MapSource, MapSourceType } from '../util/MapSource'
 import ArcGisSatellite from '../util/MapSources/ArcGisSatellite'
 import DigitalOrthophotosExtern from '../util/MapSources/DigitalOrthophotosExtern'
@@ -79,73 +79,66 @@ import TopPlusOpen from '../util/MapSources/TopPlusOpen'
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    SideInfoControl
-  },
-  watch: {
-    selected (selectedMap: string) {
-      const source = this.options.filter(
-        (x: MapSource) => x.getIdentifier() === selectedMap
-      )[0]
-      this.imageLayer.setSource(null)
-      this.vectorLayer.setSource(null)
-      source.setAsSource(this.imageLayer, this.vectorLayer)
+
+const map: OlMap = store.state.map
+const emptyMap: EmptyMap = new EmptyMap()
+const selected = ref(store.state.selectedSourceMap)
+const vectorLayer: VectorTileLayer = new VectorTileLayer()
+const imageLayer: TileLayer<TileSource> = new TileLayer()
+
+const options: MapSource[] = [
+  emptyMap,
+  new OpenStreetMap(),
+  new OpenRailwayMap(),
+  new TopPlusOpen(),
+  new MapboxTop(),
+  new HereMapsTop(),
+  new ArcGisSatellite(),
+  new Sentinel2DE(),
+  new DigitalOrthophotosIntern(),
+  new DigitalOrthophotosExtern(),
+  new MapboxSat(),
+  new HereMapsSat()
+].filter(x => x.isEnabled())
+
+watch(selected, (selectedMap: string) => {
+  const source = options.filter(
+    (x: MapSource) => x.getIdentifier() === selectedMap
+  )[0]
+  imageLayer.setSource(null)
+  vectorLayer.setSource(null)
+  source.setAsSource(imageLayer, vectorLayer)
+})
+
+onMounted((): void => {
+  vectorLayer.setZIndex(0)
+  imageLayer.setZIndex(0)
+  map.addLayer(vectorLayer)
+  map.addLayer(imageLayer)
+  store.subscribe(m => {
+    if (m.type === 'setSourceMap') {
+      selected.value = m.payload
     }
-  }
+  })
 })
-export default class MapSourceSelection extends Vue {
-  map: OlMap = store.state.map
-  emptyMap: EmptyMap = new EmptyMap()
-  selected: string = store.state.selectedSourceMap
-  vectorLayer: VectorTileLayer = new VectorTileLayer()
-  imageLayer: TileLayer<TileSource> = new TileLayer()
-  isOpenMenu!: boolean
-  options: MapSource[] = [
-    this.emptyMap,
-    new OpenStreetMap(),
-    new OpenRailwayMap(),
-    new TopPlusOpen(),
-    new MapboxTop(),
-    new HereMapsTop(),
-    new ArcGisSatellite(),
-    new Sentinel2DE(),
-    new DigitalOrthophotosIntern(),
-    new DigitalOrthophotosExtern(),
-    new MapboxSat(),
-    new HereMapsSat()
-  ].filter(x => x.isEnabled())
-
-  mounted (): void {
-    this.vectorLayer.setZIndex(0)
-    this.imageLayer.setZIndex(0)
-    this.map.addLayer(this.vectorLayer)
-    this.map.addLayer(this.imageLayer)
-    store.subscribe(m => {
-      if (m.type === 'setSourceMap') {
-        this.selected = m.payload
-      }
-    })
-  }
 
-  getDisplayName (option: MapSource): string {
-    return option.getName() ? option.getName() : option.getType()
-  }
+function getDisplayName (option: MapSource): string {
+  return option.getName() ? option.getName() : option.getType()
+}
 
-  getOptionIcon (option: MapSource): string {
-    switch (option.getType()) {
-      case MapSourceType.Topological:
-        return 'public'
-      case MapSourceType.Satellite:
-        return 'satellite'
-      default:
-        return 'block'
-    }
+function getOptionIcon (option: MapSource): string {
+  switch (option.getType()) {
+    case MapSourceType.Topological:
+      return 'public'
+    case MapSourceType.Satellite:
+      return 'satellite'
+    default:
+      return 'block'
   }
+}
 
-  selectedMap (option: MapSource): void {
-    this.selected = option.getIdentifier()
-  }
+function selectedMap (option: MapSource): void {
+  selected.value = option.getIdentifier()
 }
 </script>
 
diff --git a/web/siteplan/src/components/SVG/SignalBruecke.vue b/web/siteplan/src/components/SVG/SignalBruecke.vue
index 703a841cea..6ccd869847 100644
--- a/web/siteplan/src/components/SVG/SignalBruecke.vue
+++ b/web/siteplan/src/components/SVG/SignalBruecke.vue
@@ -23,73 +23,56 @@
     <span>{{ draw() }}</span>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { MountDirection } from '@/model/Signal'
 import { SignalMountType } from '@/model/SignalMount'
 import { ISvgElement, SvgBridgeSignal } from '@/model/SvgElement'
 import SvgService from '@/service/SvgService'
 import SvgDrawBridge, { SignalBridgePart } from '@/util/SVG/Draw/SvgDrawBridge'
-import {
-  HauptVorSignalGroup,
-  SignalBrueckeudAusleger
-} from '@/util/SVG/SvgEnum'
-import { Vue, Options } from 'vue-class-component'
+import { HauptVorSignalGroup } from '@/util/SVG/SvgEnum'
+import { ref } from 'vue'
 
-@Options({
-  props: {
-    svgService: Object
-  },
-  watch: {
-    selectedMast (value: SignalBrueckeudAusleger): SignalBrueckeudAusleger {
-      return value
-    }
-  }
-})
 /**
  * Draw Signal Bruecker with random count of Signal and Type of Signal
  * @author Truong
  */
-export default class SignalBruecke extends Vue {
-  svgService!: SvgService
-  listMast = [
-    SignalMountType.SignalauslegerLinks,
-    SignalMountType.SignalauslegerMitte,
-    SignalMountType.Signalbruecke
-  ]
 
-  selectedMast = SignalMountType.SignalauslegerLinks
-  private randomSelectSchirm (): ISvgElement[] {
-    const result = new Array<ISvgElement>()
-    const listschirm = this.svgService.getSvgElementInGroup(
-      HauptVorSignalGroup.KsSys
-    )
-    if (listschirm) {
-      const count = Math.floor(Math.random() * 5) + 2
-      for (let i = 0; i < count; i++) {
-        const schirmIndex = Math.floor(Math.random() * (listschirm.length - 1))
-        result.push(listschirm[schirmIndex])
-      }
-    }
+const props = defineProps<{
+  svgService: SvgService
+}>()
+
+const listMast = [
+  SignalMountType.SignalauslegerLinks,
+  SignalMountType.SignalauslegerMitte,
+  SignalMountType.Signalbruecke
+]
+
+const selectedMast = ref<SignalMountType>(SignalMountType.SignalauslegerLinks)
 
-    return result
+const randomSelectSchirm = (): ISvgElement[] => {
+  const result = new Array<ISvgElement>()
+  const listschirm = props.svgService.getSvgElementInGroup(HauptVorSignalGroup.KsSys)
+  if (listschirm) {
+    const count = Math.floor(Math.random() * 5) + 2
+    for (let i = 0; i < count; i++) {
+      const schirmIndex = Math.floor(Math.random() * (listschirm.length - 1))
+      result.push(listschirm[schirmIndex])
+    }
   }
 
-  public draw (): string | null {
-    const listSchirm = this.randomSelectSchirm()
-    const bridgeScreen: SignalBridgePart[] = []
-    listSchirm.forEach(screen => {
-      bridgeScreen.push({
-        guid: '',
-        signal: SvgBridgeSignal.fromSvgElement(
-          screen,
-          5,
-          MountDirection.Down,
-          null
-        )
-      })
+  return result
+}
+
+const draw = (): string | null => {
+  const listSchirm = randomSelectSchirm()
+  const bridgeScreen: SignalBridgePart[] = []
+  listSchirm.forEach(screen => {
+    bridgeScreen.push({
+      guid: '',
+      signal: SvgBridgeSignal.fromSvgElement(screen, 5, MountDirection.Down, undefined)
     })
-    const result = SvgDrawBridge.draw(bridgeScreen, this.selectedMast)
-    return result.content.outerHTML
-  }
+  })
+  const result = SvgDrawBridge.draw('', bridgeScreen, selectedMast.value)
+  return result.content.outerHTML
 }
 </script>
diff --git a/web/siteplan/src/components/SVG/Svg.vue b/web/siteplan/src/components/SVG/Svg.vue
index 4feb467c8d..318b7a7af5 100644
--- a/web/siteplan/src/components/SVG/Svg.vue
+++ b/web/siteplan/src/components/SVG/Svg.vue
@@ -31,7 +31,7 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import {
   AndereSignalGroup,
   HauptVorSignalGroup,
@@ -41,73 +41,63 @@ import SvgKatalog from './SvgKatalog.vue'
 import SvgSingleSignal from './SvgSingleSignal.vue'
 import SvgService from '@/service/SvgService'
 import SignalBruecker from './SignalBruecke.vue'
-import { Options, Vue } from 'vue-class-component'
-import { ISvgElement } from '@/model/SvgElement'
+import { ISvgElement, ZusatzSignal } from '@/model/SvgElement'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
-@Options({
-  components: {
-    SvgKatalog,
-    SvgSingleSignal,
-    SignalBruecker
-  },
-  created () {
-    this.setMode()
-  },
-  watch: {
-    $route () {
-      this.setMode()
-    },
-    mode (value: string): void {
-      this.mastList = []
-      this.schirmList = []
-      this.listSignalGroup = []
-      if (value === 'katalog') {
-        this.listSignalGroup = Object.assign(
-          {},
-          HauptVorSignalGroup,
-          AndereSignalGroup
-        )
-      } else if (value === 'einzeln') {
-        this.listSignalGroup = Object.values(HauptVorSignalGroup)
-      }
-    }
-  }
-})
-export default class Svg extends Vue {
-  svgService = new SvgService()
-  mode = ''
-  listSignalGroup = []
-  mastList: ISvgElement[] | null | undefined = []
-  schirmList: ISvgElement[] | null | undefined = []
+const svgService = new SvgService()
+const mode = ref('')
+const listSignalGroup = ref<string[]>([])
+const mastList = ref<ISvgElement[]>([])
+const schirmList = ref<ISvgElement[]>([])
 
-  getSvgList (signalGroup: HauptVorSignalGroup & AndereSignalGroup): void {
-    this.schirmList = this.svgService.getSvgElementInGroup(signalGroup)
-    const hauptVotSignalGroup = Object.values(HauptVorSignalGroup)
-    const andereSignalGroup = Object.values(AndereSignalGroup)
-    if (hauptVotSignalGroup.includes(signalGroup)) {
-      this.mastList = this.svgService.getSvgElementInGroup(SVGMast.LongMount)
-    }
+const route = useRoute()
 
-    if (andereSignalGroup.includes(signalGroup)) {
-      this.mastList = this.svgService.getSvgElementInGroup(SVGMast.ShortMount)
-    }
+const getSvgList = (signalGroup: HauptVorSignalGroup | AndereSignalGroup): void => {
+  schirmList.value = svgService.getSvgElementInGroup(signalGroup) ?? []
+  const hauptVotSignalGroup: (HauptVorSignalGroup | AndereSignalGroup)[] = Object.values(HauptVorSignalGroup)
+  const andereSignalGroup: (HauptVorSignalGroup | AndereSignalGroup)[] = Object.values(AndereSignalGroup)
+  if (hauptVotSignalGroup.includes(signalGroup)) {
+    mastList.value = svgService.getSvgElementInGroup(SVGMast.LongMount) ?? []
   }
 
-  getZusatzSignal (): ISvgElement[] | null | undefined {
-    return this.svgService.getSvgElementInGroup(AndereSignalGroup.ZusatzSignale)
+  if (andereSignalGroup.includes(signalGroup)) {
+    mastList.value = svgService.getSvgElementInGroup(SVGMast.ShortMount) ?? []
   }
+}
 
-  getShortMast (): void {
-    this.mastList = this.svgService.getSvgElementInGroup(SVGMast.ShortMount)
-  }
+const getZusatzSignal = (): ZusatzSignal[] => {
+  return (svgService.getSvgElementInGroup(AndereSignalGroup.ZusatzSignale) ?? []) as ZusatzSignal[]
+}
+
+const getShortMast = (): void => {
+  mastList.value = svgService.getSvgElementInGroup(SVGMast.ShortMount) ?? []
+}
 
-  setMode (): void {
-    const mode = this.$router.currentRoute.value.query.mode
-    if (mode) {
-      this.mode = mode.toString()
-    }
+const setMode = (): void => {
+  const m = route.query.mode
+  if (m) {
+    mode.value = m.toString()
   }
 }
+
+setMode()
+
+watch(route, () => {
+  setMode()
+})
+
+watch(mode, value => {
+  mastList.value = []
+  schirmList.value = []
+  listSignalGroup.value = []
+  if (value === 'katalog') {
+    listSignalGroup.value = Object.values({ ...HauptVorSignalGroup, ...AndereSignalGroup })
+  } else if (value === 'einzeln') {
+    listSignalGroup.value = Object.values(HauptVorSignalGroup)
+  }
+})
+
 </script>
 <style scoped>
 .btn {
diff --git a/web/siteplan/src/components/SVG/SvgKatalog.vue b/web/siteplan/src/components/SVG/SvgKatalog.vue
index bfe28a1764..ac5ca086e1 100644
--- a/web/siteplan/src/components/SVG/SvgKatalog.vue
+++ b/web/siteplan/src/components/SVG/SvgKatalog.vue
@@ -36,66 +36,57 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ISvgElement } from '@/model/SvgElement'
 import SvgDrawSignal from '@/util/SVG/Draw/SvgDrawSingleSignal'
 import { AndereSignalGroup } from '@/util/SVG/SvgEnum'
-import { Vue, Options } from 'vue-class-component'
-import { ISvgElement } from '@/model/SvgElement'
-@Options({
-  props: {
-    listsignalGroup: Object,
-    mastList: Object,
-    listSchirm: Object
-  },
-  watch: {
-    selectedSignalGroup (value: string): void {
-      this.$emit('select-signal-group', value)
-      this.withMast = false
-      if (!this.isWithoutMast(value) && value) {
-        this.haveMast = true
-      } else {
-        this.haveMast = false
-      }
-    },
-
-    selectedZusatzSignal (value: ISvgElement[]): void {
-      this.selectedZusatzSignal = value
-    }
-  },
-  emits: ['select-signal-group']
-})
+import { ref, watch } from 'vue'
 
 /**
  * Draw selected Signal Katalog with or without Mast
  * @author Truong
  */
-export default class SvgKatalog extends Vue {
-  listsignalGroup!: Array<string>
-  mastList!: Array<ISvgElement>
-  listSchirm!: Array<ISvgElement>
-  selectedSignalGroup = ''
-  withMast = false
-  haveMast = false
-  listSignalwithoutMast = [
-    AndereSignalGroup.Richtungspfeil.toString(),
-    AndereSignalGroup.Zuordnungstafel.toString()
-  ]
 
-  public drawElementInGroup (): string | null {
-    if (!this.listSchirm) {
-      return null
-    }
+const props = defineProps<{
+  listsignalGroup: Array<string>
+  mastList: Array<ISvgElement>
+  listSchirm: Array<ISvgElement>
+}>()
+
+const emit = defineEmits(['select-signal-group'])
+
+const selectedSignalGroup = ref('')
+const withMast = ref(false)
+const haveMast = ref(false)
+const listSignalwithoutMast = [
+  AndereSignalGroup.Richtungspfeil.toString(),
+  AndereSignalGroup.Zuordnungstafel.toString()
+]
 
-    if (this.mastList && this.withMast) {
-      return SvgDrawSignal.drawAllSignalInGroup(this.listSchirm, this.mastList)
-        .outerHTML
-    }
+const isWithoutMast = (value: string): boolean => {
+  return listSignalwithoutMast.includes(value)
+}
+
+watch(selectedSignalGroup, (value: string): void => {
+  emit('select-signal-group', value)
+  withMast.value = false
+  if (!isWithoutMast(value) && value) {
+    haveMast.value = true
+  } else {
+    haveMast.value = false
+  }
+})
 
-    return SvgDrawSignal.drawAllElementInGroup(this.listSchirm).outerHTML
+const drawElementInGroup = (): string | null => {
+  if (!props.listSchirm) {
+    return null
   }
 
-  public isWithoutMast (value: string): boolean {
-    return this.listSignalwithoutMast.includes(value)
+  if (props.mastList && withMast.value) {
+    return SvgDrawSignal.drawAllSignalInGroup(props.listSchirm, props.mastList).outerHTML
   }
+
+  return SvgDrawSignal.drawAllElementInGroup(props.listSchirm).outerHTML
 }
+
 </script>
diff --git a/web/siteplan/src/components/SVG/SvgSingleSignal.vue b/web/siteplan/src/components/SVG/SvgSingleSignal.vue
index 8cedd02ae0..e170006049 100644
--- a/web/siteplan/src/components/SVG/SvgSingleSignal.vue
+++ b/web/siteplan/src/components/SVG/SvgSingleSignal.vue
@@ -66,65 +66,58 @@
     <span>{{ drawEinzelnSignal() }}</span>
   </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
 import { ISvgElement, ZusatzSignal } from '@/model/SvgElement'
 import SvgDraw from '@/util/SVG/Draw/SvgDrawSingleSignal'
 import { ZusatzSignalBottom } from '@/util/SVG/SvgEnum'
-import { Vue, Options } from 'vue-class-component'
-
-@Options({
-  props: {
-    listsignalGroup: Object,
-    mastList: Object,
-    listSchirm: Object,
-    zusatzSignal: Object
-  },
-  watch: {
-    selectedSignalGroup (value: string): void {
-      this.$emit('select-signal-group', value)
-    },
-
-    selectedZusatzSignal (value: ISvgElement[]): void {
-      this.selectedZusatzSignal = value
-      const isContainBottomSignal =
-        value.filter(ele =>
-          Object.values(ZusatzSignalBottom).includes(
-            ele.id as ZusatzSignalBottom
-          )).length > 0
-      if (isContainBottomSignal) {
-        this.$emit('get-short-mast', '')
-      }
-    },
-
-    mastList (value: ISvgElement[]): void {
-      if (this.selectedMast) {
-        this.selectedMast = value.find(ele => ele.id === this.selectedMast.id)
-      }
-    }
-  },
-  emits: ['select-signal-group', 'get-short-mast']
-})
+import { ref, watch } from 'vue'
 
 /**
  * Draw Signal with selected Schirm, Mast and ZusatzSignal
  * @author Truong
  */
-export default class SvgSingleSignal extends Vue {
-  listsignalGroup!: Array<string>
-  mastList!: Array<ISvgElement>
-  listSchirm!: Array<ISvgElement>
-  zusatzSignal!: Array<ZusatzSignal>
-  selectedSignalGroup = ''
-  seletecSignalSchirm = null
-  selectedMast = null
-  selectedZusatzSignal: ZusatzSignal[] = []
 
-  public drawEinzelnSignal (): string | null {
-    return SvgDraw.drawSignal(
-      this.seletecSignalSchirm,
-      this.selectedMast,
-      this.selectedZusatzSignal
-    ).content.outerHTML
+const props = defineProps<{
+  listsignalGroup: Array<string>
+  mastList: Array<ISvgElement>
+  listSchirm: Array<ISvgElement>
+  zusatzSignal: Array<ZusatzSignal>
+}>()
+
+const emit = defineEmits(['select-signal-group', 'get-short-mast'])
+
+const selectedSignalGroup = ref('')
+const seletecSignalSchirm = ref<ISvgElement | null>(null)
+const selectedMast = ref<ISvgElement | null>(null)
+const selectedZusatzSignal = ref<ZusatzSignal[]>([])
+
+watch(selectedSignalGroup, (value: string): void => {
+  emit('select-signal-group', value)
+})
+
+watch(selectedZusatzSignal, (value: ISvgElement[]): void => {
+  const isContainBottomSignal =
+    value.filter(ele =>
+      Object.values(ZusatzSignalBottom).includes(
+        ele.id as ZusatzSignalBottom
+      )).length > 0
+  if (isContainBottomSignal) {
+    emit('get-short-mast', '')
   }
+})
+
+watch(() => props.mastList, (value: ISvgElement[]): void => {
+  if (selectedMast.value) {
+    selectedMast.value = value.find(ele => ele.id === selectedMast.value?.id) ?? null
+  }
+})
+
+const drawEinzelnSignal = (): string | null => {
+  return SvgDraw.drawSignal(
+    seletecSignalSchirm.value,
+    selectedMast.value,
+    selectedZusatzSignal.value
+  ).content.outerHTML
 }
 </script>
diff --git a/web/siteplan/src/components/SideInfoControl.vue b/web/siteplan/src/components/SideInfoControl.vue
index d0ad5cef95..4d2f93ebd2 100644
--- a/web/siteplan/src/components/SideInfoControl.vue
+++ b/web/siteplan/src/components/SideInfoControl.vue
@@ -48,49 +48,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 /**
  * Map control that shows information information in a box besides the map
  * @author Peters
  */
 import { store } from '@/store'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
+import { ref } from 'vue'
 
-@Options({
-  props: {
-    title: String
+defineProps<{
+  title?: string
+}>()
+
+const collapsed = ref(true)
+
+function setCollapsed (val: boolean): void {
+  const contentContainer = document.getElementById('side-info-container')
+  if (!contentContainer) {
+    console.warn('side-info-container not found')
+    return
   }
-})
-export default class SideInfoControl extends Vue {
-  unsubscribe: SubscribeOptions | undefined
-  collapsed = true
-  title!: string
-
-  setCollapsed (val: boolean) {
-    const contentContainer = document.getElementById('side-info-container')
-    if (!contentContainer) {
-      console.warn('side-info-container not found')
-      return
-    }
 
-    if (!val) {
-      // make sure other SideInfoControls are closed before displaying own content
-      const closeButton = contentContainer.getElementsByClassName(
-        'side-info-close'
-      )[0] as HTMLElement
-      if (closeButton) {
-        closeButton.click()
-      }
+  if (!val) {
+    // make sure other SideInfoControls are closed before displaying own content
+    const closeButton = contentContainer.getElementsByClassName(
+      'side-info-close'
+    )[0] as HTMLElement
+    if (closeButton) {
+      closeButton.click()
     }
-
-    this.collapsed = val
-    contentContainer.setAttribute(
-      'class',
-      this.collapsed ? 'side-info-container-closed' : 'side-info-container'
-    )
-    store.state.map.updateSize()
   }
+
+  collapsed.value = val
+  contentContainer.setAttribute(
+    'class',
+    collapsed.value ? 'side-info-container-closed' : 'side-info-container'
+  )
+  store.state.map.updateSize()
 }
 </script>
 
diff --git a/web/siteplan/src/components/development/FeatureSearch.vue b/web/siteplan/src/components/development/FeatureSearch.vue
index f8cbd75df0..f3e1e30e2e 100644
--- a/web/siteplan/src/components/development/FeatureSearch.vue
+++ b/web/siteplan/src/components/development/FeatureSearch.vue
@@ -38,94 +38,88 @@
     </teleport>
   </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
+import { store } from '@/store'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
 /**
  * Search Result Viewer
  * @author Peters
  */
-import { Options, Vue } from 'vue-class-component'
-import { store } from '@/store'
-import JumpToGuid from '@/components/development/JumpToGuid.vue'
 
-@Options({
-  components: {
-    JumpToGuid
-  },
-  watch: {
-    searchInput (value) {
-      this.updateSearchInput(value)
-    }
-  },
-  created () {
-    this.unsubscribe = store.subscribe((m, s) => {
-      if (m.type === 'setMatchingCount') {
-        this.matchingCount = s.matchingFeatures
-      }
-    })
-  },
-  beforeUnmount () {
-    this.unsubscribe()
-  }
-})
-export default class FeatureSearch extends Vue {
-  posTop = '0px'
-  posLeft = '0px'
-  suggestionsVisible = false
-  searchInput = ''
-  lastSearchInput = ''
-  matchingCount = 0
-  selectedFeatureOffset = 0
-  elements: string[] = []
+const posTop = ref('0px')
+const posLeft = ref('0px')
+const suggestionsVisible = ref(false)
+const searchInput = ref('')
+const lastSearchInput = ref('')
+const matchingCount = ref(0)
+const selectedFeatureOffset = ref(0)
+const elements = ref<string[]>([])
 
-  mounted (): void {
-    this.setPosition()
+const unsubscribe = store.subscribe((m, s) => {
+  if (m.type === 'setMatchingCount') {
+    matchingCount.value = s.matchingFeatures
   }
+})
 
-  searchSubmit (): void {
-    this.suggestionsVisible = false
-    if (this.searchInput === this.lastSearchInput) {
-      this.selectedFeatureOffset++
-    }
+onBeforeUnmount(() => {
+  unsubscribe()
+})
 
-    store.commit('setSelectFeatureOffset', this.selectedFeatureOffset)
-    store.commit('selectFeature', this.searchInput)
-    this.lastSearchInput = this.searchInput
+const setPosition = (): void => {
+  const elementSearch = document.getElementById('searchInput')
+  if (!elementSearch) {
+    console.warn('no searchInput found')
+    return
   }
 
-  setPosition (): void {
-    const elementSearch = document.getElementById('searchInput')
-    if (!elementSearch) {
-      console.warn('no searchInput found')
-      return
-    }
+  const box = elementSearch.getBoundingClientRect()
+  posLeft.value = Math.ceil(box.left) + 'px'
+  posTop.value = Math.ceil(box.bottom) + 'px'
+}
 
-    const box = elementSearch.getBoundingClientRect()
-    this.posLeft = Math.ceil(box.left) + 'px'
-    this.posTop = Math.ceil(box.bottom) + 'px'
+onMounted(() => {
+  setPosition()
+})
+
+const searchSubmit = (): void => {
+  suggestionsVisible.value = false
+  if (searchInput.value === lastSearchInput.value) {
+    selectedFeatureOffset.value++
   }
 
-  updateSearchInput (value: string): void {
-    this.selectedFeatureOffset = 0
-    if (!value) {
-      this.suggestionsVisible = false
-    }
+  store.commit('setSelectFeatureOffset', selectedFeatureOffset.value)
+  store.commit('selectFeature', searchInput.value)
+  lastSearchInput.value = searchInput.value
+}
+
+const updateSearchInput = (value: string): void => {
+  selectedFeatureOffset.value = 0
+  if (!value) {
+    suggestionsVisible.value = false
   }
+}
 
-  getResultText (): string {
-    if (this.matchingCount === 0) {
-      return '0 Treffer'
-    } else {
-      return (
-        (this.selectedFeatureOffset % this.matchingCount) +
-        1 +
-        ' von ' +
-        this.matchingCount +
-        ' Treffern'
-      )
-    }
+const getResultText = (): string => {
+  if (matchingCount.value === 0) {
+    return '0 Treffer'
+  } else {
+    return (
+      (selectedFeatureOffset.value % matchingCount.value) +
+      1 +
+      ' von ' +
+      matchingCount.value +
+      ' Treffern'
+    )
   }
 }
+
+watch(searchInput, value => {
+  updateSearchInput(value)
+})
 </script>
+
 <style scoped>
 #searchSuggestionContainer {
   background: #e0edff;
diff --git a/web/siteplan/src/components/development/JumpToGuid.vue b/web/siteplan/src/components/development/JumpToGuid.vue
index 045c019ecd..e6889ef7a1 100644
--- a/web/siteplan/src/components/development/JumpToGuid.vue
+++ b/web/siteplan/src/components/development/JumpToGuid.vue
@@ -9,8 +9,8 @@
 <template>
   <div />
 </template>
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+
+<script setup lang="ts">
 import Feature from 'ol/Feature'
 import OlPoint from 'ol/geom/Point'
 import Map from 'ol/Map'
@@ -20,7 +20,6 @@ import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'
 import { easeOut, upAndDown } from 'ol/easing'
 import { unByKey } from 'ol/Observable'
 import Geometry from 'ol/geom/Geometry'
-import { SubscribeOptions } from 'vuex'
 import { getFeatureGUIDs } from '@/util/FeatureExtensions'
 import NamedFeatureLayer from '@/util/NamedFeatureLayer'
 import { EventsKey } from 'ol/events'
@@ -28,233 +27,230 @@ import { FeatureLayerType, FeatureType, FlashFeatureData, createFeature, getFeat
 import Configuration from '@/util/Configuration'
 import TrackFeature from '@/feature/TrackFeature'
 import { getMapScale } from '@/util/MapScale'
+import { onBeforeUnmount, ref } from 'vue'
 
 /**
  * Development utility to quickly jump to signals by GUID
  *
  * @author Stuecker
  */
-@Options({
-  created () {
-    this.unsubscribe = store.subscribe((m, s) => {
-      if (m.type === 'selectFeature') {
-        this.jumpToFeature(s.selectedFeatureGuid)
-      } else if (m.type === 'setSelectFeatureOffset') {
-        this.setSelectFeatureOffset(s.selectedFeatureOffset)
-      }
-    })
-  },
-  props: {
-    map: Map,
-    featureLayers: Object,
-    model: Object
-  },
-  beforeUnmount () {
-    this.unsubscribe()
-  }
-})
-export default class JumpToGuid extends Vue {
-  featureLayers!: NamedFeatureLayer[]
-  map!: Map
-  unsubscribe: SubscribeOptions | undefined
-  selectFeatureOffset = 0
-  feature!: Feature<Geometry>
-  listernerKey!: EventsKey
-  guid = ''
-  readonly FLASH_DURATION = 5000
-  readonly FLASH_LINE_STROKE_WIDTH = 5
-  readonly FLASH_CIRCLE_STROKE_WIDTH = 0.25
-  readonly FLASH_CIRCLE_RADIUS_MIN = 5
-  readonly FLASH_CIRCLE_RADIUS_MAX = 25
-  readonly FLASH_COLOR = 'rgba(255, 0, 0, {})'
 
-  setSelectFeatureOffset (offset: number): void {
-    this.selectFeatureOffset = offset
-  }
+const props = defineProps<{
+  map: Map
+  featureLayers: NamedFeatureLayer[]
+}>()
 
-  public jumpToFeature (guid: string): void {
-    if (this.isDeselected(guid)) {
-      this.deselected()
-      this.guid = ''
-      return
-    }
+const selectFeatureOffset = ref(0)
+const guid = ref('')
 
-    if (this.guid === guid && this.selectFeatureOffset === 0) {
-      return
-    }
+let feature: Feature<Geometry>
+let listernerKey: EventsKey
 
-    if (this.guid !== guid || this.selectFeatureOffset > 0) {
-      this.deselected()
-      this.guid = guid
-    }
+const FLASH_DURATION = 5000
+const FLASH_LINE_STROKE_WIDTH = 5
+const FLASH_CIRCLE_STROKE_WIDTH = 0.25
+const FLASH_CIRCLE_RADIUS_MIN = 5
+const FLASH_CIRCLE_RADIUS_MAX = 25
+const FLASH_COLOR = 'rgba(255, 0, 0, {})'
 
-    const matchingFeatures: Feature<Geometry>[] = []
-    this.featureLayers.filter(layer => layer.getLayerType() !== FeatureLayerType.Collision)
-      .map(layer =>
-        layer
-          .getSource()
-          ?.getFeatures()
-          .filter(c => this.featureHasGuid(c, guid)))
-      .forEach(list =>
-        list?.forEach(feature => matchingFeatures.push(feature)))
-    const matchingCount = matchingFeatures.length
-    store.commit('setMatchingCount', matchingCount)
-    if (matchingCount > 0) {
-      const offset = this.selectFeatureOffset % matchingCount
-      const matchFeature = matchingFeatures[offset]
+const setSelectFeatureOffset = (offset: number): void => {
+  selectFeatureOffset.value = offset
+}
 
-      const flashFeature = this.createFlashFeature(
-        matchFeature
+const isDeselected = (guid: string): boolean => {
+  return guid === '' || guid === 'DESELECTED'
+}
+
+const deselected = () => {
+  try {
+    if (listernerKey) {
+      unByKey(listernerKey)
+      const flashLayer = props.featureLayers.find(
+        layer => layer.getLayerType() === FeatureLayerType.Flash
       )
-      if (flashFeature !== null) {
-        const extent = flashFeature.getGeometry()?.getExtent() as Extent
-        this.activeLayer(matchFeature)
-        this.map.getView().setCenter(getCenter(extent))
-        this.feature = flashFeature
-        this.flash(flashFeature)
+      if (flashLayer && flashLayer.getSource()?.hasFeature(feature)) {
+        flashLayer.getSource()?.removeFeature(feature)
       }
-    } else {
-      alert('Das ausgewählte Element exsistiert nicht im Lageplan.')
     }
+  } catch (e) {
+    console.error(e)
   }
+}
 
-  private createFlashFeature (originalFeature: Feature<Geometry>) {
-    const geometryType = originalFeature.getGeometry()?.getType()
-    const featureData: FlashFeatureData = {
-      guid: this.guid,
-      refFeature: originalFeature
-    }
-    if (geometryType && geometryType === 'Point') {
-      const extent = originalFeature.getGeometry()?.getExtent()
-      return extent !== undefined
-        ? createFeature(FeatureType.Flash, featureData,new OlPoint(getCenter(extent)))
-        : null
-    }
-
-    return createFeature(FeatureType.Flash, featureData ,originalFeature.getGeometry())
+const featureHasGuid = (
+  feat: Feature<Geometry>,
+  searchGuid: string | null
+): boolean => {
+  if (!searchGuid) {
+    return false
   }
 
-  private activeLayer (feature: Feature<Geometry>) {
-    const featureType = getFeatureType(feature)
-    const layerType = getFeatureLayerByType(featureType)
-    const matchLayer = this.featureLayers.find(layer => layer.getLayerType() === layerType)
-    if (!matchLayer || matchLayer.isVisible()) {
-      return
-    }
+  const guids = getFeatureGUIDs(feat)
+    .filter((g): g is string => !!g)
+    .map(g => g.toUpperCase())
+  const upperSearchGuid = searchGuid?.toUpperCase()
+  return guids.some(g => g.search(upperSearchGuid) !== -1)
+}
 
-    matchLayer.setVisible(true)
+const activeLayer = (feat: Feature<Geometry>) => {
+  const featureType = getFeatureType(feat)
+  const layerType = getFeatureLayerByType(featureType)
+  const matchLayer = props.featureLayers.find(layer => layer.getLayerType() === layerType)
+  if (!matchLayer || matchLayer.isVisible()) {
+    return
   }
 
-  private isDeselected (guid: string): boolean {
-    return guid === '' || guid === 'DESELECTED'
+  matchLayer.setVisible(true)
+}
+
+const createFlashFeature = (originalFeature: Feature<Geometry>) => {
+  const geometryType = originalFeature.getGeometry()?.getType()
+  const featureData: FlashFeatureData = {
+    guid: guid.value,
+    refFeature: originalFeature
+  }
+  if (geometryType && geometryType === 'Point') {
+    const extent = originalFeature.getGeometry()?.getExtent()
+    return extent !== undefined
+      ? createFeature(FeatureType.Flash, featureData, new OlPoint(getCenter(extent)))
+      : null
   }
 
-  private flash (feature: Feature<Geometry>) {
-    const flashLayer = this.featureLayers.find(
-      layer => layer.getLayerType() === FeatureLayerType.Flash
-    )
-    if (!flashLayer) {
-      console.warn('Flashing layer missing')
-      return
-    }
+  return createFeature(FeatureType.Flash, featureData, originalFeature.getGeometry())
+}
 
-    flashLayer.getSource()?.addFeature(feature)
-    let elapsed = 0
-    let now = new Date().getTime()
+const createFlashStyle = (feat: Feature<Geometry>, elapsedRatio: number, resolution: number) => {
+  const type = feat.getGeometry()?.getType()
+  switch (type) {
+    case 'Point':{
+      const radius = easeOut(elapsedRatio) * FLASH_CIRCLE_RADIUS_MAX + FLASH_CIRCLE_RADIUS_MIN
+      const opacity = easeOut(1 - elapsedRatio)
 
-    this.listernerKey = flashLayer.on('postrender', e => {
-      const framState = e.frameState ?? null
-      if (framState === null) {
-        return
-      }
-
-      elapsed = framState.time - now
-      if (elapsed >= this.FLASH_DURATION || elapsed === 0) {
-        now = new Date().getTime()
+      return new Style({
+        image: new CircleStyle({
+          radius,
+          stroke: new Stroke({
+            color: FLASH_COLOR.replace('{}', opacity.toString()),
+            width: FLASH_CIRCLE_STROKE_WIDTH + opacity
+          })
+        })
+      })}
+    case 'LineString':
+    case 'Polygon':
+    case 'GeometryCollection':{
+      const baseResolution = props.map.getView()
+        .getResolutionForZoom(Configuration.getToolboxConfiguration().baseZoomLevel)
+      let scale: number = baseResolution / resolution
+      if (getMapScale(props.map.getView()) >= Configuration.getLodScale()) {
+        scale = TrackFeature.LOD_VIEW_SCALE
       }
 
-      const elapsedRatio = elapsed / this.FLASH_DURATION
-      if (this.isDeselected(this.guid)) {
-        unByKey(this.listernerKey)
-        flashLayer.getSource()?.removeFeature(feature)
-      }
+      const opacity = upAndDown(elapsedRatio)
+      return new Style({
+        geometry: feat.getGeometry(),
+        fill: new Fill({
+          color: FLASH_COLOR.replace('{}', opacity.toString())
+        }),
+        stroke: new Stroke({
+          color: FLASH_COLOR.replace('{}', opacity.toString()),
+          width: FLASH_LINE_STROKE_WIDTH * scale
+        })
+      })}
+    default:
+      return null
+  }
+}
 
-      feature.setStyle((_, resolution) => {
-        const style = this.createFlashStyle(feature, elapsedRatio, resolution)
-        return style != null ? style : []
-      })
-    })
+const flash = (feat: Feature<Geometry>) => {
+  const flashLayer = props.featureLayers.find(
+    layer => layer.getLayerType() === FeatureLayerType.Flash
+  )
+  if (!flashLayer) {
+    console.warn('Flashing layer missing')
+    return
   }
 
-  private createFlashStyle (feature: Feature<Geometry>, elapsedRatio: number, resolution: number) {
-    const type = feature.getGeometry()?.getType()
-    switch (type) {
-      case 'Point':{
-        const radius = easeOut(elapsedRatio) * this.FLASH_CIRCLE_RADIUS_MAX + this.FLASH_CIRCLE_RADIUS_MIN
-        const opacity = easeOut(1 - elapsedRatio)
+  flashLayer.getSource()?.addFeature(feat)
+  let elapsed = 0
+  let now = new Date().getTime()
 
-        return new Style({
-          image: new CircleStyle({
-            radius,
-            stroke: new Stroke({
-              color: this.FLASH_COLOR.replace('{}', opacity.toString()),
-              width: this.FLASH_CIRCLE_STROKE_WIDTH + opacity
-            })
-          })
-        })}
-      case 'LineString':
-      case 'Polygon':
-      case 'GeometryCollection':{
-        const baseResolution = this.map.getView()
-          .getResolutionForZoom(Configuration.getToolboxConfiguration().baseZoomLevel)
-        let scale: number = baseResolution / resolution
-        if (getMapScale(this.map.getView()) >= Configuration.getLodScale()) {
-          scale = TrackFeature.LOD_VIEW_SCALE
-        }
+  listernerKey = flashLayer.on('postrender', e => {
+    const framState = e.frameState ?? null
+    if (framState === null) {
+      return
+    }
 
-        const opacity = upAndDown(elapsedRatio)
-        return new Style({
-          geometry: feature.getGeometry(),
-          fill: new Fill({
-            color: this.FLASH_COLOR.replace('{}', opacity.toString())
-          }),
-          stroke: new Stroke({
-            color: this.FLASH_COLOR.replace('{}', opacity.toString()),
-            width: this.FLASH_LINE_STROKE_WIDTH * scale
-          })
-        })}
-      default:
-        return null
+    elapsed = framState.time - now
+    if (elapsed >= FLASH_DURATION || elapsed === 0) {
+      now = new Date().getTime()
     }
-  }
 
-  private featureHasGuid (
-    feature: Feature<Geometry>,
-    guid: string | null
-  ): boolean {
-    if (!guid) {
-      return false
+    const elapsedRatio = elapsed / FLASH_DURATION
+    if (isDeselected(guid.value)) {
+      unByKey(listernerKey)
+      flashLayer.getSource()?.removeFeature(feat)
     }
 
-    const guids = getFeatureGUIDs(feature).map(guid => guid?.toUpperCase())
-    const searchGuid = guid?.toUpperCase()
-    return guids.some(guid => guid.search(searchGuid) !== -1)
+    feat.setStyle((_, resolution) => {
+      const style = createFlashStyle(feat, elapsedRatio, resolution)
+      return style != null ? style : []
+    })
+  })
+}
+
+const jumpToFeature = (searchGuid: string): void => {
+  if (isDeselected(searchGuid)) {
+    deselected()
+    guid.value = ''
+    return
   }
 
-  private deselected () {
-    try {
-      if (this.listernerKey) {
-        unByKey(this.listernerKey)
-        const flashLayer = this.featureLayers.find(
-          layer => layer.getLayerType() === FeatureLayerType.Flash
-        )
-        if (flashLayer && flashLayer.getSource()?.hasFeature(this.feature)) {
-          flashLayer.getSource()?.removeFeature(this.feature)
-        }
-      }
-    } catch (e) {
-      console.error(e)
+  if (guid.value === searchGuid && selectFeatureOffset.value === 0) {
+    return
+  }
+
+  if (guid.value !== searchGuid || selectFeatureOffset.value > 0) {
+    deselected()
+    guid.value = searchGuid
+  }
+
+  const matchingFeatures: Feature<Geometry>[] = []
+  props.featureLayers.filter(layer => layer.getLayerType() !== FeatureLayerType.Collision)
+    .map(layer =>
+      layer
+        .getSource()
+        ?.getFeatures()
+        .filter(c => featureHasGuid(c, searchGuid)))
+    .forEach(list =>
+      list?.forEach(f => matchingFeatures.push(f)))
+  const matchingCount = matchingFeatures.length
+  store.commit('setMatchingCount', matchingCount)
+  if (matchingCount > 0) {
+    const offset = selectFeatureOffset.value % matchingCount
+    const matchFeature = matchingFeatures[offset]
+
+    const flashFeature = createFlashFeature(matchFeature)
+    if (flashFeature !== null) {
+      const extent = flashFeature.getGeometry()?.getExtent() as Extent
+      activeLayer(matchFeature)
+      props.map.getView().setCenter(getCenter(extent))
+      feature = flashFeature
+      flash(flashFeature)
     }
+  } else {
+    alert('Das ausgewählte Element exsistiert nicht im Lageplan.')
   }
 }
+
+const unsubscribe = store.subscribe((m, s) => {
+  if (m.type === 'selectFeature') {
+    jumpToFeature(s.selectedFeatureGuid)
+  } else if (m.type === 'setSelectFeatureOffset') {
+    setSelectFeatureOffset(s.selectedFeatureOffset)
+  }
+})
+
+onBeforeUnmount(() => {
+  unsubscribe()
+})
 </script>
diff --git a/web/siteplan/src/components/development/LayerControl.vue b/web/siteplan/src/components/development/LayerControl.vue
index 0c0a37072e..3d87bddf04 100644
--- a/web/siteplan/src/components/development/LayerControl.vue
+++ b/web/siteplan/src/components/development/LayerControl.vue
@@ -72,140 +72,135 @@
   </SideInfoControl>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import SideInfoControl from '@/components/SideInfoControl.vue'
 import { store } from '@/store'
 import 'material-design-icons/iconfont/material-icons.css'
+import { FeatureLayerType } from '@/feature/FeatureInfo'
+import NamedFeatureLayer from '@/util/NamedFeatureLayer'
+import { onBeforeUnmount, ref } from 'vue'
+import type { Ref } from 'vue'
 
 /**
  * Layer (de-)selection control
  * @author Peters
  */
-import { FeatureLayerType } from '@/feature/FeatureInfo'
-import NamedFeatureLayer from '@/util/NamedFeatureLayer'
-import { Options, Vue } from 'vue-class-component'
-
-@Options({
-  components: {
-    SideInfoControl
-  },
-  beforeCreate () {
-    this.unsubscribe = store.subscribe((m, s) => {
-      if (m.type === 'setFeatureLayers') {
-        this.featureLayers = s.featureLayers
-      }
-    })
-  },
-  beforeUnmount () {
-    this.unsubscribe()
+
+const featureLayers = ref([]) as Ref<NamedFeatureLayer[]>
+const dragTargetLayer = ref(null) as Ref<NamedFeatureLayer | null>
+const dragInsertBefore = ref(false)
+const draggedLayer = ref(null) as Ref<NamedFeatureLayer | null>
+
+const unsubscribe = store.subscribe((m, s) => {
+  if (m.type === 'setFeatureLayers') {
+    featureLayers.value = s.featureLayers as NamedFeatureLayer[]
   }
 })
-export default class LayerControl extends Vue {
-  featureLayers: NamedFeatureLayer[] = []
-  dragTargetLayer: NamedFeatureLayer | null = null
-  dragInsertBefore = false
-  draggedLayer: NamedFeatureLayer | null = null
-
-  getEditableLayers (): NamedFeatureLayer[] {
-    // Do not allow to disable/edit the Layer for highlighting features
-    const layers = this.featureLayers.filter(
-      layer => layer.getLayerType() !== FeatureLayerType.Flash
-        && layer.getLayerType() !== FeatureLayerType.Measure
-    )
-    const sorted = layers.sort((a, b) => a.getZIndex() - b.getZIndex())
-    return sorted
+
+onBeforeUnmount(() => {
+  unsubscribe()
+})
+
+const getEditableLayers = (): NamedFeatureLayer[] => {
+  // Do not allow to disable/edit the Layer for highlighting features
+  const layers = featureLayers.value.filter(
+    layer => layer.getLayerType() !== FeatureLayerType.Flash
+      && layer.getLayerType() !== FeatureLayerType.Measure
+  )
+  const sorted = layers.sort((a, b) => (a.getZIndex() ?? 0) - (b.getZIndex() ?? 0))
+  return sorted
+}
+
+const toggleShowLayer = (layer: NamedFeatureLayer): void => {
+  layer.setVisible(!layer.getVisible())
+}
+
+const getLayerIndex = (layer: NamedFeatureLayer): number => {
+  return getEditableLayers().findIndex(l => l === layer)
+}
+
+const dragStart = (evt: DragEvent, layer: NamedFeatureLayer): void => {
+  draggedLayer.value = layer
+  if (evt.dataTransfer) {
+    evt.dataTransfer.dropEffect = 'move'
+    evt.dataTransfer.effectAllowed = 'move'
   }
+}
+
+const dragEnd = (): void => {
+  dragTargetLayer.value = null
+  draggedLayer.value = null
+}
 
-  toggleShowLayer (layer: NamedFeatureLayer): void {
-    layer.setVisible(!layer.getVisible())
+const dragOver = (evt: DragEvent, layer: NamedFeatureLayer): void => {
+  if (draggedLayer.value === layer || !draggedLayer.value) {
+    // The element cannot be dropped onto itself
+    return
   }
 
-  getLayerIndex (layer: NamedFeatureLayer): number {
-    return this.getEditableLayers().findIndex(l => l === layer)
+  if (dragTargetLayer.value !== layer) {
+    dragTargetLayer.value = layer
   }
 
-  dragStart (evt: DragEvent, layer: NamedFeatureLayer): void {
-    this.draggedLayer = layer
-    if (evt.dataTransfer) {
-      evt.dataTransfer.dropEffect = 'move'
-      evt.dataTransfer.effectAllowed = 'move'
-    }
+  const target = evt.target as Element
+  const layerControl = target
+    ?.closest('.layer-drag-container')
+    ?.getElementsByClassName('layer-control')[0]
+  if (!target || !layerControl) {
+    // Element dragged over something that is not a valid drop zone
+    return
   }
 
-  dragEnd (): void {
-    this.dragTargetLayer = null
-    this.draggedLayer = null
+  const targetY = target.getBoundingClientRect().top
+  const parentHeight = layerControl.getBoundingClientRect().height
+  const dropOffset = evt.clientY - targetY
+  dragInsertBefore.value = dropOffset <= parentHeight / 2
+
+  evt.preventDefault()
+}
+
+const moveLayer = (source: NamedFeatureLayer, offset: number): void => {
+  if (offset === 0) {
+    return
   }
 
-  dragOver (evt: DragEvent, layer: NamedFeatureLayer): void {
-    if (this.draggedLayer === layer || !this.draggedLayer) {
-      // The element cannot be dropped onto itself
-      return
-    }
-
-    if (this.dragTargetLayer !== layer) {
-      this.dragTargetLayer = layer
-    }
-
-    const target = evt.target as Element
-    const layerControl = target
-      ?.closest('.layer-drag-container')
-      ?.getElementsByClassName('layer-control')[0]
-    if (!target || !layerControl) {
-      // Element dragged over something that is not a valid drop zone
-      return
-    }
-
-    const targetY = target.getBoundingClientRect().top
-    const parentHeight = layerControl.getBoundingClientRect().height
-    const dropOffset = evt.clientY - targetY
-    this.dragInsertBefore = dropOffset <= parentHeight / 2
-
-    evt.preventDefault()
+  const layers = getEditableLayers()
+  if (offset < 0) {
+    layers.reverse()
+    offset = -offset
   }
 
-  dragDrop (): void {
-    if (!this.dragTargetLayer || !this.draggedLayer) {
-      return
-    }
-
-    const targetIndex = this.getLayerIndex(this.dragTargetLayer)
-    const sourceIndex = this.getLayerIndex(this.draggedLayer)
-    let offset = targetIndex - sourceIndex
-    if (sourceIndex < targetIndex && this.dragInsertBefore) {
-      offset -= 1
-    } else if (sourceIndex > targetIndex && !this.dragInsertBefore) {
-      offset += 1
-    }
-
-    this.moveLayer(this.draggedLayer, offset)
+  const sourceIndex = layers.findIndex(l => l === source)
+  const newSourceZIndex = layers[sourceIndex + offset].getZIndex() ?? 0
+  for (let i = sourceIndex + offset; i > sourceIndex; i--) {
+    layers[i].setZIndex(layers[i - 1].getZIndex() ?? 0)
   }
 
-  moveLayer (source: NamedFeatureLayer, offset: number): void {
-    if (offset === 0) {
-      return
-    }
-
-    const layers = this.getEditableLayers()
-    if (offset < 0) {
-      layers.reverse()
-      offset = -offset
-    }
-
-    const sourceIndex = layers.findIndex(l => l === source)
-    const newSourceZIndex = layers[sourceIndex + offset].getZIndex()
-    for (let i = sourceIndex + offset; i > sourceIndex; i--) {
-      layers[i].setZIndex(layers[i - 1].getZIndex())
-    }
-
-    source.setZIndex(newSourceZIndex)
-    const collision = layers.find(
-      ele => ele.getLayerType() === FeatureLayerType.Collision
-    )
-    collision?.dispatchEvent('changeIndex')
+  source.setZIndex(newSourceZIndex)
+  const collision = layers.find(
+    ele => ele.getLayerType() === FeatureLayerType.Collision
+  )
+  collision?.dispatchEvent('changeIndex')
+}
+
+const dragDrop = (): void => {
+  if (!dragTargetLayer.value || !draggedLayer.value) {
+    return
+  }
+
+  const targetIndex = getLayerIndex(dragTargetLayer.value)
+  const sourceIndex = getLayerIndex(draggedLayer.value)
+  let offset = targetIndex - sourceIndex
+  if (sourceIndex < targetIndex && dragInsertBefore.value) {
+    offset -= 1
+  } else if (sourceIndex > targetIndex && !dragInsertBefore.value) {
+    offset += 1
   }
+
+  moveLayer(draggedLayer.value, offset)
 }
 </script>
+
 <style scoped>
 .layer-control-container {
   margin: 3px;
diff --git a/web/siteplan/src/components/development/SettingEditor.vue b/web/siteplan/src/components/development/SettingEditor.vue
index fceeb4c1fe..2173b34876 100644
--- a/web/siteplan/src/components/development/SettingEditor.vue
+++ b/web/siteplan/src/components/development/SettingEditor.vue
@@ -102,8 +102,8 @@
             <input
               v-model="ppm"
               type="number"
-              max:="maxPpm"
-              min:="minPpm"
+              :max="maxPpm"
+              :min="minPpm"
               step="0.5"
             >
           </li>
@@ -119,148 +119,148 @@
   </SideInfoControl>
 </template>
 
-<script lang="ts">
-/**
- * Temporary widget for experimentation with different track widths
- * @author Stuecker
- */
+<script setup lang="ts">
 import SideInfoControl from '@/components/SideInfoControl.vue'
 import { DBRef } from '@/model/Position'
 import { store, TableType } from '@/store'
 import Configuration from '@/util/Configuration'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
-
-@Options({
-  components: {
-    SideInfoControl
-  },
-  created () {
-    this.unsubscribe = store.subscribe((m, s) => {
-      if (m.type === 'defaultTrackWidth') {
-        this.mainTrackWidth = s.mainTrackWidth
-        this.sideTrackWidth = s.sideTrackWidth
-        this.otherTrackWidth = s.otherTrackWidth
-        this.trackOutlineWidth = s.trackOutlineWidth
-      }
+import { onBeforeUnmount, ref, watch } from 'vue'
 
-      if (m.type === 'setSheetCutCRS') {
-        this.sheetCutCRS = s.sheetCutCRS
-      }
+/**
+ * Temporary widget for experimentation with different track widths
+ * @author Stuecker
+ */
 
-      if (m.type === 'setCustomPpm') {
-        this.ppm = s.customPpm
-      }
-    })
-  },
-  beforeUnmount () {
-    this.unsubscribe()
-  },
-  watch: {
-    viewState (value: TableType) {
-      store.commit('setSessionState', value)
-    },
-    mainTrackWidth (value: number) {
-      store.commit('setMainTrackWidth', value)
-    },
-    sideTrackWidth (value: number) {
-      store.commit('setSideTrackWidth', value)
-    },
-    otherTrackWidth (value: number) {
-      store.commit('setOtherTrackWidth', value)
-    },
-    trackOutlineWidth (value: number) {
-      store.commit('setTrackOutlineWidth', value)
-    },
-    boundingBoxScale (value: number) {
-      if (value >= 1) {
-        store.commit('setBoundingBoxScaleFactor', value)
-      }
-    },
-    collisionEnabled (value: boolean) {
-      store.commit('setCollisionEnabled', value)
-    },
-    sheetCutCRS (value: DBRef) {
-      store.commit('setSheetCutCRS', value)
-    },
-    ppm (value: number) {
-      if (value > Configuration.MAX_EXPORT_PPM) {
-        value = Configuration.MAX_EXPORT_PPM
-      } else if (value < Configuration.MIN_EXPORT_PPM) {
-        value = Configuration.MIN_EXPORT_PPM
-      }
+const mainTrackWidth = ref(store.state.mainTrackWidth)
+const sideTrackWidth = ref(store.state.sideTrackWidth)
+const otherTrackWidth = ref(store.state.otherTrackWidth)
+const trackOutlineWidth = ref(store.state.trackOutlineWidth)
+const boundingBoxScale = ref(store.state.boundingBoxScaleFactor)
+const viewState = ref(store.state.sessionState)
+const collisionEnabled = ref(store.state.collisionEnabled)
+const sheetCutCRS = ref(store.state.sheetCutCRS)
+const ppm = ref(store.state.customPpm)
+const trackWidth = Configuration.getTrackWidth()
+const maxPpm = Configuration.MAX_EXPORT_PPM
+const minPpm = Configuration.MIN_EXPORT_PPM
 
-      this.ppm = value
-      store.commit('setCustomPpm', value)
-    }
+const unsubscribe = store.subscribe((m, s) => {
+  if (m.type === 'defaultTrackWidth') {
+    mainTrackWidth.value = s.mainTrackWidth
+    sideTrackWidth.value = s.sideTrackWidth
+    otherTrackWidth.value = s.otherTrackWidth
+    trackOutlineWidth.value = s.trackOutlineWidth
   }
-})
-export default class SettingEditor extends Vue {
-  mainTrackWidth = store.state.mainTrackWidth
-  sideTrackWidth = store.state.sideTrackWidth
-  otherTrackWidth = store.state.otherTrackWidth
-  trackOutlineWidth = store.state.trackOutlineWidth
-  boundingBoxScale = store.state.boundingBoxScaleFactor
-  viewState = store.state.sessionState
-  collisionEnabled = store.state.collisionEnabled
-  sheetCutCRS = store.state.sheetCutCRS
-  ppm = store.state.customPpm
-  trackWidth = Configuration.getTrackWidth()
-  unsubscribe: SubscribeOptions | undefined
-  maxPpm = Configuration.MAX_EXPORT_PPM
-  minPpm = Configuration.MIN_EXPORT_PPM
 
-  reset (): void {
-    store.commit('defaultTrackWidth', this.trackWidth)
-    this.boundingBoxScale = 90
-    store.commit('setBoundingBoxScaleFactor', this.boundingBoxScale)
-    store.commit('setSessionState', TableType.DIFF)
-    store.commit('setCollisionEnabled', true)
+  if (m.type === 'setSheetCutCRS') {
+    sheetCutCRS.value = s.sheetCutCRS
   }
 
-  getMaxValue (track: string): number {
-    switch (track) {
-      case 'Main':
-        return this.trackWidth.intervall_main.max
-      case 'Side':
-        return this.trackWidth.intervall_side.max
-      case 'Other':
-        return this.trackWidth.intervall_other.max
-      case 'Outline':
-        return this.trackWidth.intervall_outline.max
-      default:
-        return 0
-    }
+  if (m.type === 'setCustomPpm') {
+    ppm.value = s.customPpm
   }
+})
+
+onBeforeUnmount(() => {
+  unsubscribe()
+})
+
+watch(viewState, (value: TableType) => {
+  store.commit('setSessionState', value)
+})
+
+watch(mainTrackWidth, (value: number) => {
+  store.commit('setMainTrackWidth', value)
+})
+
+watch(sideTrackWidth, (value: number) => {
+  store.commit('setSideTrackWidth', value)
+})
+
+watch(otherTrackWidth, (value: number) => {
+  store.commit('setOtherTrackWidth', value)
+})
+
+watch(trackOutlineWidth, (value: number) => {
+  store.commit('setTrackOutlineWidth', value)
+})
 
-  getMinValue (track: string): number {
-    switch (track) {
-      case 'Main':
-        return this.trackWidth.intervall_main.min
-      case 'Side':
-        return this.trackWidth.intervall_side.min
-      case 'Other':
-        return this.trackWidth.intervall_other.min
-      case 'Outline':
-        return this.trackWidth.intervall_outline.min
-      default:
-        return 0
-    }
+watch(boundingBoxScale, (value: number) => {
+  if (value >= 1) {
+    store.commit('setBoundingBoxScaleFactor', value)
   }
+})
+
+watch(collisionEnabled, (value: boolean) => {
+  store.commit('setCollisionEnabled', value)
+})
+
+watch(sheetCutCRS, (value: DBRef) => {
+  store.commit('setSheetCutCRS', value)
+})
 
-  getCRSList () {
-    return Object.values(DBRef)
+watch(ppm, (value: number) => {
+  if (value > Configuration.MAX_EXPORT_PPM) {
+    value = Configuration.MAX_EXPORT_PPM
+  } else if (value < Configuration.MIN_EXPORT_PPM) {
+    value = Configuration.MIN_EXPORT_PPM
   }
 
-  isSheetCutAvaiable () {
-    return store.state.isSheetCutAvaiable
+  ppm.value = value
+  store.commit('setCustomPpm', value)
+})
+
+const reset = (): void => {
+  store.commit('defaultTrackWidth', trackWidth)
+  boundingBoxScale.value = 90
+  store.commit('setBoundingBoxScaleFactor', boundingBoxScale.value)
+  store.commit('setSessionState', TableType.DIFF)
+  store.commit('setCollisionEnabled', true)
+}
+
+const getMaxValue = (track: string): number => {
+  switch (track) {
+    case 'Main':
+      return trackWidth.intervall_main.max
+    case 'Side':
+      return trackWidth.intervall_side.max
+    case 'Other':
+      return trackWidth.intervall_other.max
+    case 'Outline':
+      return trackWidth.intervall_outline.max
+    default:
+      return 0
   }
+}
 
-  isDevelopmentMode () {
-    return Configuration.developmentMode()
+const getMinValue = (track: string): number => {
+  switch (track) {
+    case 'Main':
+      return trackWidth.intervall_main.min
+    case 'Side':
+      return trackWidth.intervall_side.min
+    case 'Other':
+      return trackWidth.intervall_other.min
+    case 'Outline':
+      return trackWidth.intervall_outline.min
+    default:
+      return 0
   }
 }
+
+const getCRSList = () => {
+  return Object.values(DBRef)
+}
+
+const isSheetCutAvaiable = () => {
+  return store.state.isSheetCutAvaiable
+}
+
+const isDevelopmentMode = () => {
+  return Configuration.developmentMode()
+}
 </script>
+
 <style scoped>
 #resetButton {
   float: right;
diff --git a/web/siteplan/src/components/popup/EECPopup.vue b/web/siteplan/src/components/popup/EECPopup.vue
index 5cb11cbbab..f3f4f8d63a 100644
--- a/web/siteplan/src/components/popup/EECPopup.vue
+++ b/web/siteplan/src/components/popup/EECPopup.vue
@@ -19,13 +19,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import RouteInfo from '@/components/popup/RouteInfo.vue'
 import { ExternalElementControl } from '@/model/ExternalElementControl'
-import {
-  getFeatureData, getFeatureGUID, getFeatureLabel
-} from '@/feature/FeatureInfo'
+import { getFeatureData, getFeatureGUID, getFeatureLabel } from '@/feature/FeatureInfo'
 import { isPlanningObject } from '@/model/SiteplanModel'
 
 /**
@@ -33,32 +33,15 @@ import { isPlanningObject } from '@/model/SiteplanModel'
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    RouteInfo
-  },
-  props: {
-    feature: Object
-  },
-  computed: {
-    eec: function () {
-      return getFeatureData(this.feature)
-    },
 
-    planningObject: function () {
-      return isPlanningObject(getFeatureGUID(this.feature))
-        ? 'Ja'
-        : 'Nein'
-    },
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
 
-    eccLabel: function () {
-      return getFeatureLabel(this.feature)
-    }
-  }
-})
-export default class EECPopup extends Vue {
-  eec!: ExternalElementControl
-  planningObject!: string
-  eccLabel!: string
-}
+const eec = computed<ExternalElementControl>(() => getFeatureData(props.feature))
+
+const planningObject = computed(() =>
+  isPlanningObject(getFeatureGUID(props.feature)) ? 'Ja' : 'Nein')
+
+const eccLabel = computed(() => getFeatureLabel(props.feature))
 </script>
diff --git a/web/siteplan/src/components/popup/EmptyPopup.vue b/web/siteplan/src/components/popup/EmptyPopup.vue
deleted file mode 100644
index 065d332343..0000000000
--- a/web/siteplan/src/components/popup/EmptyPopup.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
- * Copyright (c) 2022 DB Netz AG and others.
- *
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v2.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v20.html
- -->
-<template>
-  <div>
-    <h2>Leer Popup</h2>
-    <ul>
-      <li>Es gibt keine Infomation über diese Objekt</li>
-    </ul>
-  </div>
-</template>
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-
-/**
- * Popup contents for signal features
- *
- * @author Stuecker
- */
-@Options({
-  props: {
-    feature: Object
-  }
-})
-export default class SignalPopup extends Vue { }
-</script>
diff --git a/web/siteplan/src/components/popup/ErrorPopup.vue b/web/siteplan/src/components/popup/ErrorPopup.vue
index 74a8c0ac40..aea0f723b9 100644
--- a/web/siteplan/src/components/popup/ErrorPopup.vue
+++ b/web/siteplan/src/components/popup/ErrorPopup.vue
@@ -16,8 +16,10 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import Error from '@/model/Error'
 import { getFeatureData } from '@/feature/FeatureInfo'
 
@@ -26,17 +28,10 @@ import { getFeatureData } from '@/feature/FeatureInfo'
  *
  * @author Stuecker
  */
-@Options({
-  props: {
-    feature: Object
-  },
-  computed: {
-    error: function () {
-      return getFeatureData(this.feature)
-    }
-  }
-})
-export default class ErrorPopup extends Vue {
-  error!: Error
-}
+
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
+
+const error = computed<Error>(() => getFeatureData(props.feature))
 </script>
diff --git a/web/siteplan/src/components/popup/JumpMenuPopup.vue b/web/siteplan/src/components/popup/JumpMenuPopup.vue
index 3a87c3f066..06f27f48e7 100644
--- a/web/siteplan/src/components/popup/JumpMenuPopup.vue
+++ b/web/siteplan/src/components/popup/JumpMenuPopup.vue
@@ -19,41 +19,30 @@
     </ul>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import { getFeatureLabel, getFeatureName, getFeatureType } from '@/feature/FeatureInfo'
 import { getFeatureGUIDs } from '@/util/FeatureExtensions'
 import PlanProToolbox from '@/util/PlanProToolbox'
-import { Options, Vue } from 'vue-class-component'
 
 /**
  * Popup contents for signal features
  *
  * @author Stuecker
  */
-@Options({
-  props: {
-    feature: Object
-  },
-  computed: {
-    guid: function () {
-      return getFeatureGUIDs(this.feature)[0]
-    },
-    elementType: function () {
-      return getFeatureName(getFeatureType(this.feature))
-    },
-    elementLabel: function () {
-      return getFeatureLabel(this.feature)
-    }
-  }
-})
-export default class JumpMenuPopup extends Vue {
-  guid!: string
-  elementType!: string
-  elementLabel!: string
 
-  jumpToTextSicht () {
-    PlanProToolbox.jumpToTextView(this.guid)
-  }
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
+
+const guid = computed(() => getFeatureGUIDs(props.feature)[0])
+const elementType = computed(() => getFeatureName(getFeatureType(props.feature)))
+const elementLabel = computed(() => getFeatureLabel(props.feature))
+
+const jumpToTextSicht = () => {
+  PlanProToolbox.jumpToTextView(guid.value)
 }
 </script>
 <style scoped>
diff --git a/web/siteplan/src/components/popup/LockKeyPopup.vue b/web/siteplan/src/components/popup/LockKeyPopup.vue
index 61ecc8da09..658bd8aa8b 100644
--- a/web/siteplan/src/components/popup/LockKeyPopup.vue
+++ b/web/siteplan/src/components/popup/LockKeyPopup.vue
@@ -19,13 +19,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import RouteInfo from '@/components/popup/RouteInfo.vue'
 import LockKey, { LockKeyType } from '@/model/LockKey'
-import {
-  getFeatureData, getFeatureGUID, getFeatureLabel
-} from '@/feature/FeatureInfo'
+import { getFeatureData, getFeatureGUID, getFeatureLabel } from '@/feature/FeatureInfo'
 import { isPlanningObject } from '@/model/SiteplanModel'
 
 /**
@@ -33,42 +33,26 @@ import { isPlanningObject } from '@/model/SiteplanModel'
  *
  * @author Truong
  */
-@Options({
-  components: {
-    RouteInfo
-  },
-  props: {
-    feature: Object
-  },
-  computed: {
-    lockkey: function () {
-      return getFeatureData(this.feature)
-    },
 
-    planningObject: function () {
-      return isPlanningObject(getFeatureGUID(this.feature))
-        ? 'Ja'
-        : 'Nein'
-    },
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
 
-    lockKeyLabel: function () {
-      return getFeatureLabel(this.feature)
-    }
-  }
-})
-export default class LockKeyPopup extends Vue {
-  lockkey!: LockKey
-  planningObject!: string
-  lockKeyLabel!: string
-  getType (lockkey: LockKey) {
-    switch (lockkey.type) {
-      case LockKeyType.Inside:
-        return 'innen'
-      case LockKeyType.Outside:
-        return 'aussen'
-      default:
-        return ''
-    }
+const lockkey = computed<LockKey>(() => getFeatureData(props.feature))
+
+const planningObject = computed(() =>
+  isPlanningObject(getFeatureGUID(props.feature)) ? 'Ja' : 'Nein')
+
+const lockKeyLabel = computed(() => getFeatureLabel(props.feature))
+
+const getType = (lockkey: LockKey) => {
+  switch (lockkey.type) {
+    case LockKeyType.Inside:
+      return 'innen'
+    case LockKeyType.Outside:
+      return 'aussen'
+    default:
+      return ''
   }
 }
 </script>
diff --git a/web/siteplan/src/components/popup/MenuPopup.vue b/web/siteplan/src/components/popup/MenuPopup.vue
index c2091b7a6e..2f4c0e0b7e 100644
--- a/web/siteplan/src/components/popup/MenuPopup.vue
+++ b/web/siteplan/src/components/popup/MenuPopup.vue
@@ -39,11 +39,11 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
 import CantLinePopup from '@/components/popup/CantLinePopup.vue'
 import CantPopup from '@/components/popup/CantPopup.vue'
 import EECPopup from '@/components/popup/EECPopup.vue'
-import EmptyPopup from '@/components/popup/EmptyPopup.vue'
 import ErrorPopup from '@/components/popup/ErrorPopup.vue'
 import JumpMenuPopup from '@/components/popup/JumpMenuPopup.vue'
 import LockKeyPopup from '@/components/popup/LockKeyPopup.vue'
@@ -55,8 +55,11 @@ import TrackSwitchPopup from '@/components/popup/TrackSwitchPopup.vue'
 import UnknownPopup from '@/components/popup/UnknownPopup.vue'
 import {
   createFeature,
-  FeatureType, FlashFeatureData, getFeatureData, getFeatureLabel,
-  getFeatureName,
+  FeatureType,
+  FlashFeatureData,
+  getFeatureData,
+  getFeatureLabel,
+  getFeatureName as getFeatureNameOfType,
   getFeatureType
 } from '@/feature/FeatureInfo'
 import { SignalMount } from '@/model/SignalMount'
@@ -64,171 +67,154 @@ import { LeftRight } from '@/model/SiteplanModel'
 import 'material-design-icons/iconfont/material-icons.css'
 import { Feature } from 'ol'
 import Geometry from 'ol/geom/Geometry'
-import { Options, Vue } from 'vue-class-component'
+import { computed, shallowRef, watch } from 'vue'
 
 /**
  * Menu for select object
  *
  * @author Truong
  */
-@Options({
-  props: {
-    features: Object,
-    mouseButton: String
-  },
-  components: {
-    SignalPopup,
-    TrackSectionPopup,
-    PZBPopup,
-    TrackSwitchPopup,
-    ErrorPopup,
-    EmptyPopup,
-    TrackLockPopup,
-    LockKeyPopup,
-    EECPopup,
-    JumpMenuPopup,
-    CantPopup,
-    CantLinePopup,
-    UnknownPopup
-  },
-  computed: {
-    selectedPopup () {
-      if (this.selectedFeature == null) {
-        return this.$emit('removePopup')
-      }
-
-      if (getFeatureType(this.selectedFeature) === FeatureType.Flash) {
-        this.selectedFeature = (getFeatureData(this.selectedFeature) as FlashFeatureData).refFeature
-      }
-
-      if (this.mouseButton === LeftRight.LEFT) {
-        switch (getFeatureType(this.selectedFeature)) {
-          case FeatureType.Signal:
-            return SignalPopup
-          case FeatureType.PZB:
-          case FeatureType.PZBGU:
-            return PZBPopup
-          case FeatureType.TrackDesignationMarker:
-          case FeatureType.TrackSectionMarker:
-          case FeatureType.Track:
-          case FeatureType.TrackOutline:
-            return TrackSectionPopup
-          case FeatureType.TrackSwitchEndMarker:
-          case FeatureType.TrackSwitch:
-            return TrackSwitchPopup
-          case FeatureType.Error:
-            return ErrorPopup
-          case FeatureType.TrackLock:
-            return TrackLockPopup
-          case FeatureType.LockKey:
-            return LockKeyPopup
-          case FeatureType.ExternalElementControl:
-            return EECPopup
-          case FeatureType.Cant:
-            return CantPopup
-          case FeatureType.CantLine:
-            return CantLinePopup
-          case FeatureType.Unknown:
-            return UnknownPopup
-          default:
-            return this.$emit('removePopup')
-        }
-      } else if (this.mouseButton === LeftRight.RIGHT) {
-        return JumpMenuPopup
-      }
-
-      return this.$emit('removePopup')
-    }
-  },
-  emits: ['removePopup']
-})
 
-export default class MenuPopup extends Vue {
-  features!: Feature<Geometry>[]
-  selectedPopup!: Vue
-  mouseButton!: string
-  selectedFeature: Feature<Geometry> | null = null
+const props = defineProps<{
+  features: Feature<Geometry>[]
+  mouseButton: string
+}>()
 
-  getFeatures (): Feature<Geometry>[] {
-    if (this.features === null || !this.features) {
-      return []
-    }
+const emit = defineEmits(['removePopup'])
 
-    return this.features.filter(ele => {
-      const featureType = getFeatureType(ele)
-      return featureType !== FeatureType.Collision &&
-        featureType !== FeatureType.Flash
-    }).flatMap(ele => {
-      const featureType = getFeatureType(ele)
-      const featureData = getFeatureData(ele)
-      if (featureType === FeatureType.Signal) {
-        return (featureData as SignalMount).attachedSignals.map(signal => createFeature(
-          FeatureType.Signal,
-          signal,
-          undefined,
-          signal.label?.text
-        ))
-      }
-
-      return ele
-    })
-  }
+const selectedFeature = shallowRef<Feature<Geometry> | null>(null)
 
-  getFeatureName (feature: Feature<Geometry>): string {
-    return getFeatureName(getFeatureType(feature))
+watch(selectedFeature, value => {
+  if (value && getFeatureType(value) === FeatureType.Flash) {
+    selectedFeature.value = (getFeatureData(value) as FlashFeatureData).refFeature
   }
+}, { flush: 'sync' })
 
-  getLabel (feature: Feature<Geometry>): string {
-    return getFeatureLabel(feature)
+const selectedPopup = computed(() => {
+  if (selectedFeature.value == null) {
+    return emit('removePopup')
   }
 
-  isMultiFeature (): boolean {
-    const selectedFeatures = this.getFeatures()
-    if (selectedFeatures.length > 1) {
-      return true
+  if (props.mouseButton === LeftRight.LEFT) {
+    switch (getFeatureType(selectedFeature.value)) {
+      case FeatureType.Signal:
+        return SignalPopup
+      case FeatureType.PZB:
+      case FeatureType.PZBGU:
+        return PZBPopup
+      case FeatureType.TrackDesignationMarker:
+      case FeatureType.TrackSectionMarker:
+      case FeatureType.Track:
+      case FeatureType.TrackOutline:
+        return TrackSectionPopup
+      case FeatureType.TrackSwitchEndMarker:
+      case FeatureType.TrackSwitch:
+        return TrackSwitchPopup
+      case FeatureType.Error:
+        return ErrorPopup
+      case FeatureType.TrackLock:
+        return TrackLockPopup
+      case FeatureType.LockKey:
+        return LockKeyPopup
+      case FeatureType.ExternalElementControl:
+        return EECPopup
+      case FeatureType.Cant:
+        return CantPopup
+      case FeatureType.CantLine:
+        return CantLinePopup
+      case FeatureType.Unknown:
+        return UnknownPopup
+      default:
+        return emit('removePopup')
     }
-
-    this.selectedFeature = selectedFeatures[0]
-    return false
+  } else if (props.mouseButton === LeftRight.RIGHT) {
+    return JumpMenuPopup
   }
 
-  backToMenu () {
-    this.selectedFeature = null
-  }
+  return emit('removePopup')
+})
 
-  selectedItem (feature: Feature<Geometry>) {
-    this.selectedFeature = feature
+const getFeatures = (): Feature<Geometry>[] => {
+  if (props.features === null || !props.features) {
+    return []
   }
+
+  return props.features.filter(ele => {
+    const featureType = getFeatureType(ele)
+    return featureType !== FeatureType.Collision &&
+      featureType !== FeatureType.Flash
+  }).flatMap(ele => {
+    const featureType = getFeatureType(ele)
+    const featureData = getFeatureData(ele)
+    if (featureType === FeatureType.Signal) {
+      return (featureData as SignalMount).attachedSignals.map(signal => createFeature(
+        FeatureType.Signal,
+        signal,
+        undefined,
+        signal.label?.text
+      ))
+    }
+
+    return ele
+  })
 }
-</script>
-<style scoped>
-#menu {
-  padding-right: 5px;
-  padding-bottom: 5px;
+
+const getFeatureName = (feature: Feature<Geometry>): string => {
+  return getFeatureNameOfType(getFeatureType(feature))
 }
 
-#menuItem {
-  cursor: pointer;
-  margin-bottom: 5px;
-  border-radius: 10px;
-  background-color: gainsboro;
-  padding-left: 5px;
+const getLabel = (feature: Feature<Geometry>): string => {
+  return getFeatureLabel(feature)
 }
 
-#menuItem:hover {
-  background-color: darkgray;
+const isMultiFeature = (): boolean => {
+  const selectedFeatures = getFeatures()
+  if (selectedFeatures.length > 1) {
+    return true
+  }
+
+  selectedFeature.value = selectedFeatures[0]
+  return false
 }
 
-#popup {
-  min-height: 220px;
+const backToMenu = () => {
+  selectedFeature.value = null
 }
 
-#popup-back {
-  position: absolute;
-  top: 10px;
-  z-index: 200;
-  padding: 5px 10px;
-  font-size: 18px;
-  cursor: pointer;
+const selectedItem = (feature: Feature<Geometry>) => {
+  selectedFeature.value = feature
 }
+
+</script>
+
+<style scoped>
+  #menu {
+    padding-right: 5px;
+    padding-bottom: 5px;
+  }
+
+  #menuItem {
+    cursor: pointer;
+    margin-bottom: 5px;
+    border-radius: 10px;
+    background-color: gainsboro;
+    padding-left: 5px;
+  }
+
+  #menuItem:hover {
+    background-color: darkgray;
+  }
+
+  #popup {
+    min-height: 220px;
+  }
+
+  #popup-back {
+    position: absolute;
+    top: 10px;
+    z-index: 200;
+    padding: 5px 10px;
+    font-size: 18px;
+    cursor: pointer;
+  }
 </style>
diff --git a/web/siteplan/src/components/popup/PZBPopup.vue b/web/siteplan/src/components/popup/PZBPopup.vue
index 6f2e664dc5..83429559b8 100644
--- a/web/siteplan/src/components/popup/PZBPopup.vue
+++ b/web/siteplan/src/components/popup/PZBPopup.vue
@@ -19,13 +19,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import { PZB, PZBElement, PZBType } from '@/model/PZB'
 import RouteInfo from '@/components/popup/RouteInfo.vue'
-import {
-  getFeatureData, getFeatureGUID
-} from '@/feature/FeatureInfo'
+import { getFeatureData, getFeatureGUID } from '@/feature/FeatureInfo'
 import { isPlanningObject } from '@/model/SiteplanModel'
 
 /**
@@ -33,54 +33,41 @@ import { isPlanningObject } from '@/model/SiteplanModel'
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    RouteInfo
-  },
-  props: {
-    feature: Object
-  },
-  computed: {
-    pzb: function () {
-      return getFeatureData(this.feature)
-    },
 
-    planningObject: function () {
-      return isPlanningObject(getFeatureGUID(this.feature))
-        ? 'Ja'
-        : 'Nein'
-    }
-  }
-})
-export default class TrackSectionPopup extends Vue {
-  pzb!: PZB
-  planningObject!: string
-  pzbArtText (): string {
-    switch (this.pzb.element) {
-      case PZBElement.F500Hz:
-        return '500Hz'
-      case PZBElement.F1000Hz:
-        return '1000Hz'
-      case PZBElement.F2000Hz:
-        return '2000Hz'
-      case PZBElement.F1000Hz2000Hz:
-        return '1000Hz & 2000Hz'
-      default:
-        return 'Unbekannt'
-    }
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
+
+const pzb = computed<PZB>(() => getFeatureData(props.feature))
+
+const planningObject = computed(() =>
+  isPlanningObject(getFeatureGUID(props.feature)) ? 'Ja' : 'Nein')
+
+const pzbArtText = (): string => {
+  switch (pzb.value.element) {
+    case PZBElement.F500Hz:
+      return '500Hz'
+    case PZBElement.F1000Hz:
+      return '1000Hz'
+    case PZBElement.F2000Hz:
+      return '2000Hz'
+    case PZBElement.F1000Hz2000Hz:
+      return '1000Hz & 2000Hz'
+    default:
+      return 'Unbekannt'
   }
+}
 
-  pzbTypText (): string {
-    switch (this.pzb.type) {
-      case PZBType.GM:
-        return 'Gleismagnet'
-      case PZBType.GUE_GSA:
-        return 'Ausschaltmagnet'
-      case PZBType.GUE_GSE:
-        return 'Einschaltmagnet'
-      default:
-        return 'Unbekannt'
-    }
+const pzbTypText = (): string => {
+  switch (pzb.value.type) {
+    case PZBType.GM:
+      return 'Gleismagnet'
+    case PZBType.GUE_GSA:
+      return 'Ausschaltmagnet'
+    case PZBType.GUE_GSE:
+      return 'Einschaltmagnet'
+    default:
+      return 'Unbekannt'
   }
 }
 </script>
diff --git a/web/siteplan/src/components/popup/RouteInfo.vue b/web/siteplan/src/components/popup/RouteInfo.vue
index cae88cc0ca..66f1b44b5d 100644
--- a/web/siteplan/src/components/popup/RouteInfo.vue
+++ b/web/siteplan/src/components/popup/RouteInfo.vue
@@ -22,26 +22,19 @@
   </ul>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-import { RouteLocation, RouteObject } from '@/model/RouteObject'
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouteObject } from '@/model/RouteObject'
 
 /**
  * Route info for features
  *
  * @author Stuecker
  */
-@Options({
-  props: {
-    feature: Object
-  },
-  computed: {
-    entries: function () {
-      return (this.feature as RouteObject).routeLocations
-    }
-  }
-})
-export default class RouteInfo extends Vue {
-  entries!: RouteLocation[]
-}
+
+const props = defineProps<{
+  feature: object
+}>()
+
+const entries = computed(() => (props.feature as RouteObject).routeLocations)
 </script>
diff --git a/web/siteplan/src/components/popup/SignalPopup.vue b/web/siteplan/src/components/popup/SignalPopup.vue
index b276b812a2..eec63151ba 100644
--- a/web/siteplan/src/components/popup/SignalPopup.vue
+++ b/web/siteplan/src/components/popup/SignalPopup.vue
@@ -16,49 +16,29 @@
     </ul>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import RouteInfo from '@/components/popup/RouteInfo.vue'
-import {
-  getFeatureData,
-  getFeatureGUID,
-  getFeatureLabel
-} from '@/feature/FeatureInfo'
+import { getFeatureData, getFeatureGUID, getFeatureLabel } from '@/feature/FeatureInfo'
 import { Signal } from '@/model/Signal'
 import { isPlanningObject } from '@/model/SiteplanModel'
-import { Options, Vue } from 'vue-class-component'
 
 /**
  * Popup contents for signal features
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    RouteInfo
-  },
-  props: {
-    feature: Object
-  },
-  computed: {
-    signal: function () {
-      return getFeatureData(this.feature)
-    },
 
-    planningObject: function () {
-      return isPlanningObject(getFeatureGUID(this.feature))
-        ? 'Ja'
-        : 'Nein'
-    },
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
 
-    signalLabel: function () {
-      return getFeatureLabel(this.feature)
-    }
-  }
-})
-export default class SignalPopup extends Vue {
-  static SIGNAL_TABLE = 'org.eclipse.set.feature.table.ssks'
-  signal!: Signal
-  planningObject!: string
-  signalLabel!: string
-}
+const signal = computed<Signal>(() => getFeatureData(props.feature))
+
+const planningObject = computed(() =>
+  isPlanningObject(getFeatureGUID(props.feature)) ? 'Ja' : 'Nein')
+
+const signalLabel = computed(() => getFeatureLabel(props.feature))
 </script>
diff --git a/web/siteplan/src/components/popup/TrackLockPopup.vue b/web/siteplan/src/components/popup/TrackLockPopup.vue
index bd9615acc9..fb90365222 100644
--- a/web/siteplan/src/components/popup/TrackLockPopup.vue
+++ b/web/siteplan/src/components/popup/TrackLockPopup.vue
@@ -11,7 +11,7 @@
     <h2>Gleissperre: {{ trackLockLabel }}</h2>
     <ul>
       <li>GUID: {{ tracklock.guid }}</li>
-      <li>Bezeichung: {{ tracklock.label.text }}</li>
+      <li>Bezeichung: {{ tracklock.label?.text }}</li>
       <li v-if="tracklockType">
         Typ: {{ tracklockType }}
       </li>
@@ -21,72 +21,56 @@
     </ul>
   </div>
 </template>
-<script lang="ts">
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Feature } from 'ol'
+import { Geometry } from 'ol/geom'
 import RouteInfo from '@/components/popup/RouteInfo.vue'
-import {
-  getFeatureData,
-  getFeatureGUID,
-  getFeatureLabel
-} from '@/feature/FeatureInfo'
+import { getFeatureData, getFeatureGUID, getFeatureLabel } from '@/feature/FeatureInfo'
 import { isPlanningObject } from '@/model/SiteplanModel'
 import TrackLock from '@/model/TrackLock'
 import { TurnoutOperatingMode } from '@/model/TrackSwitchComponent'
-import { Options, Vue } from 'vue-class-component'
 
 /**
  * Popup contents for track lock features
  *
  * @author Truong
  */
-@Options({
-  components: {
-    RouteInfo
-  },
-  props: {
-    feature: Object
-  },
-  computed: {
-    tracklock: function () {
-      return getFeatureData(this.feature)
-    },
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
+
+const tracklock = computed(() => {
+  return getFeatureData(props.feature) as TrackLock
+})
 
-    planningObject: function () {
-      return isPlanningObject(getFeatureGUID(this.feature))
-        ? 'Ja'
-        : 'Nein'
-    },
+const planningObject = computed(() => {
+  return isPlanningObject(getFeatureGUID(props.feature)) ? 'Ja' : 'Nein'
+})
 
-    tracklockType: function () {
-      return (getFeatureData(this.feature) as TrackLock).components[0].trackLockSignal
-    },
+const tracklockType = computed(() => {
+  return tracklock.value.components[0].trackLockSignal
+})
 
-    trackLockLabel: function () {
-      return getFeatureLabel(this.feature)
-    }
+const trackLockLabel = computed(() => {
+  return getFeatureLabel(props.feature)
+})
 
+const operatingModeToText = (): string => {
+  if (!tracklock.value) {
+    return 'Unbestimmt'
   }
-})
-export default class TrackLockPopup extends Vue {
-  tracklock!: TrackLock
-  planningObject!: boolean
-  tracklockType!: string
-  trackLockLabel!: string
 
-  operatingModeToText (): string {
-    if (!this.tracklock) {
+  switch (tracklock.value.operatingMode) {
+    case TurnoutOperatingMode.ElectricRemote:
+    case TurnoutOperatingMode.MechanicalRemote:
+      return 'ferngestellt'
+    case TurnoutOperatingMode.ElectricLocal:
+    case TurnoutOperatingMode.MechanicalLocal:
+      return 'ortsgestellt'
+    default:
       return 'Unbestimmt'
-    }
-
-    switch (this.tracklock.operatingMode) {
-      case TurnoutOperatingMode.ElectricRemote:
-      case TurnoutOperatingMode.MechanicalRemote:
-        return 'ferngestellt'
-      case TurnoutOperatingMode.ElectricLocal:
-      case TurnoutOperatingMode.MechanicalLocal:
-        return 'ortsgestellt'
-      default:
-        return 'Unbestimmt'
-    }
   }
 }
 </script>
diff --git a/web/siteplan/src/components/popup/TrackSectionPopup.vue b/web/siteplan/src/components/popup/TrackSectionPopup.vue
index 52145714c9..aa58b38c6d 100644
--- a/web/siteplan/src/components/popup/TrackSectionPopup.vue
+++ b/web/siteplan/src/components/popup/TrackSectionPopup.vue
@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { getFeatureData, getFeatureLabel } from '@/feature/FeatureInfo'
 import { TrackSectionFeatureData } from '@/feature/TrackFeature'
 import TrackSection, { TrackShape } from '@/model/TrackSection'
@@ -28,99 +28,93 @@ import TrackSegment, { TrackType } from '@/model/TrackSegment'
 import Configuration from '@/util/Configuration'
 import { Feature } from 'ol'
 import Geometry from 'ol/geom/Geometry'
-import { Options, Vue } from 'vue-class-component'
+import { computed } from 'vue'
 
 /**
  * Popup contents for track features
  *
  * @author Peters
  */
-@Options({
-  props: {
-    // As TrackSection is an interface, we cannot bind to the intended type
-    feature: Object
-  },
-  computed: {
-    trackSection: function () {
-      return this.getData()?.section
-    },
-    trackSegment: function () {
-      return this.getData()?.segment
-    },
-    trackLabel: function () {
-      return getFeatureLabel(this.feature)
-    },
-    trackGuid: function () {
-      return this.getData()?.guid
-    }
-  }
+
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
+
+const getData = (): TrackSectionFeatureData | undefined => {
+  return getFeatureData(props.feature) as TrackSectionFeatureData | undefined
+}
+
+const trackSection = computed<TrackSection>(() => {
+  return getData()?.section as TrackSection
 })
-export default class TrackSectionPopup extends Vue {
-  trackSection!: TrackSection
-  trackSegment!: TrackSegment
-  feature!: Feature<Geometry>
-  trackLabel!: string
-  trackGuid!: string
-  isDevelopmentMode: boolean = Configuration.developmentMode()
 
-  private getData (): TrackSectionFeatureData | undefined {
-    return getFeatureData(this.feature)
-  }
+const trackSegment = computed<TrackSegment>(() => {
+  return getData()?.segment as TrackSegment
+})
+
+const trackLabel = computed(() => {
+  return getFeatureLabel(props.feature)
+})
+
+const trackGuid = computed(() => {
+  return getData()?.guid as string
+})
+
+const isDevelopmentMode = Configuration.developmentMode()
 
-  trackTrackShapeToText (): string {
-    switch (this.trackSection.shape) {
-      case TrackShape.Straight:
-        return 'Gerade'
-      case TrackShape.Curve:
-        return 'Bogen'
-      case TrackShape.Clothoid:
-        return 'Klothoide'
-      case TrackShape.Blosscurve:
-        return 'Blosskurve'
-      case TrackShape.BlossCurvedSimple:
-        return 'Bloss einfach geschwungen'
-      case TrackShape.Other:
-        return 'Sonstige'
-      case TrackShape.DirectionalStraightKinkEnd:
-        return 'Richtgerade Knick am Ende 200 gon'
-      case TrackShape.KmJump:
-        return 'Kilometersprung'
-      case TrackShape.TransitionCurveSForm:
-        return 'Übergangsbogen S-Form (nicht implementiert)'
-      case TrackShape.SFormSimpleCurved:
-        return 'S-Form einfach geschwungen (nicht implementiert)'
-      default:
-        return 'Unbekannt'
-    }
+const trackTrackShapeToText = (): string => {
+  switch (trackSection.value.shape) {
+    case TrackShape.Straight:
+      return 'Gerade'
+    case TrackShape.Curve:
+      return 'Bogen'
+    case TrackShape.Clothoid:
+      return 'Klothoide'
+    case TrackShape.Blosscurve:
+      return 'Blosskurve'
+    case TrackShape.BlossCurvedSimple:
+      return 'Bloss einfach geschwungen'
+    case TrackShape.Other:
+      return 'Sonstige'
+    case TrackShape.DirectionalStraightKinkEnd:
+      return 'Richtgerade Knick am Ende 200 gon'
+    case TrackShape.KmJump:
+      return 'Kilometersprung'
+    case TrackShape.TransitionCurveSForm:
+      return 'Übergangsbogen S-Form (nicht implementiert)'
+    case TrackShape.SFormSimpleCurved:
+      return 'S-Form einfach geschwungen (nicht implementiert)'
+    default:
+      return 'Unbekannt'
   }
+}
 
-  trackType (): string {
-    if (this.trackSegment.type.length === 0) {
+const trackTypeToText = (type: TrackType): string => {
+  switch (type) {
+    case TrackType.Other:
+      return 'Sonstige'
+    case TrackType.SideTrack:
+      return 'Nebengleis'
+    case TrackType.ConnectingTrack:
+      return 'Anschlussgleis'
+    case TrackType.MainTrack:
+      return 'Hauptgleis'
+    case TrackType.PassingMainTrack:
+      return 'Durchgehendes Hauptgleis'
+    case TrackType.RouteTrack:
+      return 'Streckengleis'
+    default:
       return 'Unbekannt'
-    } else {
-      return this.trackSegment.type
-        .map(type => this.trackTypeToText(type))
-        .join(', ')
-    }
   }
+}
 
-  trackTypeToText (type: TrackType): string {
-    switch (type) {
-      case TrackType.Other:
-        return 'Sonstige'
-      case TrackType.SideTrack:
-        return 'Nebengleis'
-      case TrackType.ConnectingTrack:
-        return 'Anschlussgleis'
-      case TrackType.MainTrack:
-        return 'Hauptgleis'
-      case TrackType.PassingMainTrack:
-        return 'Durchgehendes Hauptgleis'
-      case TrackType.RouteTrack:
-        return 'Streckengleis'
-      default:
-        return 'Unbekannt'
-    }
+const trackType = (): string => {
+  if (trackSegment.value.type.length === 0) {
+    return 'Unbekannt'
   }
+
+  return trackSegment.value.type
+    .map(type => trackTypeToText(type))
+    .join(', ')
 }
 </script>
diff --git a/web/siteplan/src/components/popup/TrackSwitchPopup.vue b/web/siteplan/src/components/popup/TrackSwitchPopup.vue
index 97a5f09905..6666a98f92 100644
--- a/web/siteplan/src/components/popup/TrackSwitchPopup.vue
+++ b/web/siteplan/src/components/popup/TrackSwitchPopup.vue
@@ -24,11 +24,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Options, Vue } from 'vue-class-component'
-import TrackSwitch from '@/model/TrackSwitch'
+<script setup lang="ts">
+import { computed } from 'vue'
 import { Feature } from 'ol'
 import Geometry from 'ol/geom/Geometry'
+import TrackSwitch from '@/model/TrackSwitch'
 import TrackSwitchComponent, {
   TurnoutOperatingMode
 } from '@/model/TrackSwitchComponent'
@@ -46,65 +46,52 @@ import { isPlanningObject } from '@/model/SiteplanModel'
  *
  * @author Stuecker
  */
-@Options({
-  components: {
-    RouteInfo
-  },
-  props: {
-    // As TrackSwitch is an interface, we cannot bind to the intended type
-    feature: Object
-  },
-  computed: {
-    trackSwitch: function () {
-      return this.getData()?.trackSwitch
-    },
-    trackSwitchComponent: function () {
-      return this.getData()?.component
-    },
-    planningObject: function () {
-      return isPlanningObject(getFeatureGUID(this.feature))
-        ? 'Ja'
-        : 'Nein'
-    },
-    trackSwitchLabel: function () {
-      return getFeatureLabel(this.feature)
-    }
-  }
+const props = defineProps<{
+  feature: Feature<Geometry>
+}>()
+
+const getData = (): TrackSwitchFeatureData | undefined => {
+  return getFeatureData(props.feature) as TrackSwitchFeatureData | undefined
+}
+
+const trackSwitch = computed<TrackSwitch>(() => {
+  return getData()?.trackSwitch as TrackSwitch
 })
-export default class TrackSwitchPopup extends Vue {
-  feature!: Feature<Geometry>
-  trackSwitch!: TrackSwitch
-  trackSwitchComponent!: TrackSwitchComponent
-  planningObject!: string
-  trackSwitchLabel!: string
 
-  private getData (): TrackSwitchFeatureData | undefined {
-    return getFeatureData(this.feature)
-  }
+const trackSwitchComponent = computed<TrackSwitchComponent>(() => {
+  return getData()?.component as TrackSwitchComponent
+})
+
+const planningObject = computed(() => {
+  return isPlanningObject(getFeatureGUID(props.feature)) ? 'Ja' : 'Nein'
+})
+
+const trackSwitchLabel = computed(() => {
+  return getFeatureLabel(props.feature)
+})
 
-  operatingModeToText (): string {
-    switch (this.trackSwitchComponent.operatingMode) {
-      case TurnoutOperatingMode.ElectricRemote:
-        return 'elektrisch ferngestellt'
-      case TurnoutOperatingMode.ElectricLocal:
-        return 'elektrisch ortsgestellt'
-      case TurnoutOperatingMode.MechanicalRemote:
-        return 'mechanisch ferngestellt'
-      case TurnoutOperatingMode.MechanicalLocal:
-        return 'mechanisch ortsgestellt'
-      case TurnoutOperatingMode.NonOperational:
-        return 'stillgelegt'
-      case TurnoutOperatingMode.Trailable:
-        return 'Rückfallweiche'
-      case TurnoutOperatingMode.Other:
-        return 'sonstige'
-      case TurnoutOperatingMode.DeadLeft:
-        return 'stillgelegt links'
-      case TurnoutOperatingMode.DeadRight:
-        return 'stillgelegt rechts'
-      default:
-        return 'Unbestimmt'
-    }
+const operatingModeToText = (): string => {
+  switch (trackSwitchComponent.value.operatingMode) {
+    case TurnoutOperatingMode.ElectricRemote:
+      return 'elektrisch ferngestellt'
+    case TurnoutOperatingMode.ElectricLocal:
+      return 'elektrisch ortsgestellt'
+    case TurnoutOperatingMode.MechanicalRemote:
+      return 'mechanisch ferngestellt'
+    case TurnoutOperatingMode.MechanicalLocal:
+      return 'mechanisch ortsgestellt'
+    case TurnoutOperatingMode.NonOperational:
+      return 'stillgelegt'
+    case TurnoutOperatingMode.Trailable:
+      return 'Rückfallweiche'
+    case TurnoutOperatingMode.Other:
+      return 'sonstige'
+    case TurnoutOperatingMode.DeadLeft:
+      return 'stillgelegt links'
+    case TurnoutOperatingMode.DeadRight:
+      return 'stillgelegt rechts'
+    default:
+      return 'Unbestimmt'
   }
 }
 </script>
diff --git a/web/siteplan/src/components/toolbar/KatalogMenuBar.vue b/web/siteplan/src/components/toolbar/KatalogMenuBar.vue
index c5b6678e0c..440cabe2c4 100644
--- a/web/siteplan/src/components/toolbar/KatalogMenuBar.vue
+++ b/web/siteplan/src/components/toolbar/KatalogMenuBar.vue
@@ -11,7 +11,7 @@
     <ul id="katalogMenu">
       <li
         id="katalog"
-        tabIndex="1"
+        tabindex="1"
         class="menuItem"
         @click="onSelected('katalog')"
       >
@@ -19,7 +19,7 @@
       </li>
       <li
         id="einzeln"
-        tabIndex="2"
+        tabindex="2"
         class="menuItem"
         @click="onSelected('einzeln')"
       >
@@ -27,7 +27,7 @@
       </li>
       <li
         id="bruecke"
-        tabIndex="3"
+        tabindex="3"
         class="menuItem"
         @click="onSelected('bruecke')"
       >
@@ -36,30 +36,33 @@
     </ul>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 /**
  * Menu of Catalog Page
  * @author Truong
  */
-import { Vue } from 'vue-class-component'
 
-export default class KatalogMenuBar extends Vue {
-  mounted (): void {
-    const mode = this.$router.currentRoute.value.query.mode
-    if (mode) {
-      const ele = document.getElementById(mode.toString())
-      ele?.focus()
-    }
-  }
+import { onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
 
-  onSelected (value: string): void {
-    this.$router.push({
-      path: '/svg',
-      query: {
-        mode: value
-      }
-    })
+onMounted(() => {
+  const mode = route.query.mode
+  if (mode) {
+    const ele = document.getElementById(mode.toString())
+    ele?.focus()
   }
+})
+
+function onSelected (value: string): void {
+  router.push({
+    path: '/svg',
+    query: {
+      mode: value
+    }
+  })
 }
 </script>
 <style scoped>
diff --git a/web/siteplan/src/components/toolbar/Menubar.vue b/web/siteplan/src/components/toolbar/Menubar.vue
index f3870a85fa..e2e198cbdd 100644
--- a/web/siteplan/src/components/toolbar/Menubar.vue
+++ b/web/siteplan/src/components/toolbar/Menubar.vue
@@ -8,44 +8,15 @@
  -->
 <template>
   <div id="menubar">
-    <KatalogMenuBar v-if="showCatalogMenu" />
+    <KatalogMenuBar v-if="$route.path === '/svg'" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 /**
  * Menu bar
  * @author Truong
  */
-import { Options, Vue } from 'vue-class-component'
 import KatalogMenuBar from './KatalogMenuBar.vue'
-
-@Options({
-  components: {
-    KatalogMenuBar
-  },
-  created () {
-    const currentpath = this.$router.currentRoute.value.path
-    switch (currentpath) {
-      case '/':
-        this.showLageplanMenu = true
-        break
-      case '/svg':
-        this.showCatalogMenu = true
-        break
-      default:
-        break
-    }
-  }
-})
-export default class Menubar extends Vue {
-  showLageplanMenu = false
-  showCatalogMenu = false
-
-  resetState (): void {
-    this.showLageplanMenu = false
-    this.showCatalogMenu = false
-  }
-}
 </script>
 <style scoped>
 #menubar {
diff --git a/web/siteplan/src/components/toolbar/Toolbar.vue b/web/siteplan/src/components/toolbar/Toolbar.vue
index 9c893d7a22..2fa7cec8b2 100644
--- a/web/siteplan/src/components/toolbar/Toolbar.vue
+++ b/web/siteplan/src/components/toolbar/Toolbar.vue
@@ -44,91 +44,81 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import FeatureSearch from '@/components/development/FeatureSearch.vue'
 import Configuration from '@/util/Configuration'
-import { Options, Vue } from 'vue-class-component'
-import { SubscribeOptions } from 'vuex'
+import { onMounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 
 /**
  * Lageplan Toolbar
  * @author Truong
  */
-@Options({
-  props: {
-    model: Object
-  },
-  components: {
-    FeatureSearch
-  },
-  watch: {
-    $route () {
-      this.resetBtnColor()
-      const currentpath = this.$router.currentRoute.value.path
-      switch (currentpath) {
-        case '/':
-          this.homebtncolor = this.onSelectBtnColor
-          break
-        case '/svg':
-          this.symbolbtncolor = this.onSelectBtnColor
-          break
-        default:
-          break
-      }
-    }
-  },
-  emits: ['show-menu']
+const emit = defineEmits(['show-menu'])
+
+const router = useRouter()
+const developmentOptions = ref(false)
+const homeBtnColor = ref('')
+const symbolBtnColor = ref('')
+const menuBtnColor = ref('')
+const onSelectBtnColor = ref('#848484')
+
+onMounted(() => {
+  developmentOptions.value = Configuration.developmentMode()
 })
-export default class Toolbar extends Vue {
-  developmentOptions = false
-  homeBtnColor = ''
-  symbolBtnColor = ''
-  menuBtnColor = ''
-  onSelectBtnColor = '#848484'
-  unsubscribe: SubscribeOptions | undefined
-  mounted (): void {
-    this.developmentOptions = Configuration.developmentMode()
-  }
 
-  toSvgCatalog (): void {
-    this.$emit('show-menu', false)
-    this.menuBtnColor = ''
-    this.$router.push({
-      path: '/svg',
-      query: {
-        mode: 'katalog'
-      }
-    })
+watch(router.currentRoute, currentRoute => {
+  resetBtnColor()
+  switch (currentRoute.path) {
+    case '/':
+      homeBtnColor.value = onSelectBtnColor.value
+      break
+    case '/svg':
+      symbolBtnColor.value = onSelectBtnColor.value
+      break
+    default:
+      break
   }
+})
 
-  isCatalogPage (): boolean {
-    const currentpath = this.$router.currentRoute.value.path
-    return currentpath === '/svg'
-  }
+function toSvgCatalog (): void {
+  emit('show-menu', false)
+  menuBtnColor.value = ''
+  router.push({
+    path: '/svg',
+    query: {
+      mode: 'katalog'
+    }
+  })
+}
 
-  goHome (): void {
-    this.$emit('showMenu', false)
-    this.menuBtnColor = ''
-    this.$router.push('/')
-  }
+function isCatalogPage (): boolean {
+  const currentpath = router.currentRoute.value.path
+  return currentpath === '/svg'
+}
 
-  resetBtnColor (): void {
-    this.homeBtnColor = ''
-    this.symbolBtnColor = ''
-  }
+function goHome (): void {
+  emit('show-menu', false)
+  menuBtnColor.value = ''
+  router.push('/')
+}
 
-  onMenuClick (): void {
-    if (this.menuBtnColor !== this.onSelectBtnColor) {
-      this.menuBtnColor = this.onSelectBtnColor
-      this.$emit('showMenu', true)
-    } else {
-      this.menuBtnColor = ''
-      this.$emit('showMenu', false)
-    }
+function resetBtnColor (): void {
+  homeBtnColor.value = ''
+  symbolBtnColor.value = ''
+}
+
+function onMenuClick (): void {
+  if (menuBtnColor.value !== onSelectBtnColor.value) {
+    menuBtnColor.value = onSelectBtnColor.value
+    emit('show-menu', true)
+  } else {
+    menuBtnColor.value = ''
+    emit('show-menu', false)
   }
 }
 </script>
-<style scope>
+<style scoped>
 .toolbarItem {
   cursor: pointer;
   display: flex;