diff --git a/bundles/org.openhab.ui/web/src/components/item/item.vue b/bundles/org.openhab.ui/web/src/components/item/item.vue
index b0a17d9ea1..b58c97a820 100644
--- a/bundles/org.openhab.ui/web/src/components/item/item.vue
+++ b/bundles/org.openhab.ui/web/src/components/item/item.vue
@@ -8,7 +8,7 @@
     :subtitle="noType ? '' : getItemTypeAndMetaLabel(item)"
     :after="state"
     v-on="$listeners">
-    <oh-icon v-if="!noIcon && item.category" slot="media" :icon="item.category" :state="(noState || item.type === 'Image') ? null : (context.store[item.name].state || item.state)" height="32" width="32" />
+    <oh-icon v-if="!noIcon && item.category" slot="media" :icon="item.category" :state="(noState || item.type === 'Image') ? null : (context?.store[item.name]?.state || item.state)" height="32" width="32" />
     <span v-else-if="!noIcon" slot="media" class="item-initial">{{ item.name[0] }}</span>
     <f7-icon v-if="!item.editable" slot="after-title" f7="lock_fill" size="1rem" color="gray" />
     <slot name="footer" #footer />
diff --git a/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue b/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
index ba0ddc4b99..298cd82c46 100644
--- a/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
@@ -66,7 +66,7 @@
       <f7-block strong class="no-padding" v-if="ready">
         <model-treeview class="model-picker-treeview" :root-nodes="rootNodes"
                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                        :selected-item="selectedItem" @selected="selectItem" @checked="checkItem" />
+                        :selected="selectedItem" @selected="selectItem" @checked="checkItem" />
       </f7-block>
       <f7-block v-else-if="!ready" class="text-align-center">
         <f7-preloader />
@@ -178,7 +178,7 @@ export default {
       this.loadModel().then(() => {
         this.$nextTick(() => {
           this.initSearchbar = true
-          this.applyExpandedOption()
+          this.restoreExpanded()
         })
       })
     },
diff --git a/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue b/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
index 0ab73959f2..4dbd9a7b51 100644
--- a/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/model-treeview.vue
@@ -1,10 +1,14 @@
 <template>
   <f7-treeview class="model-treeview">
-    <model-treeview-item v-for="node in rootNodes"
-                         :key="node.item.name" :model="node"
-                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                         @selected="nodeSelected" :selected="selectedItem"
-                         @checked="(item, check) => $emit('checked', item, check)" />
+    <draggable :disabled="!canDragDrop" :list="children" group="model-treeview" animation="150" fallbackOnBody="true" forceFallback="true" scrollSensitivity="200" delay="400" swapThreshold="0.6"
+               @start="onDragStart" @change="onDragChange" @end="onDragEnd" :move="onDragMove">
+      <model-treeview-item v-for="(node, index) in children"
+                           :key="node.item.name + '_' + index" :model="node" :parentNode="model"
+                           :includeItemName="includeItemName" :includeItemTags="includeItemTags" :canDragDrop="canDragDrop" :moveState="moveState"
+                           @selected="nodeSelected" :selected="selected"
+                           @checked="(item, check) => $emit('checked', item, check)"
+                           @reload="$emit('reload')" />
+    </draggable>
   </f7-treeview>
 </template>
 
@@ -22,12 +26,40 @@
 
 <script>
 import ModelTreeviewItem from '@/components/model/treeview-item.vue'
+import ModelDragDropMixin from '@/pages/settings/model/model-dragdrop-mixin'
+import Draggable from 'vuedraggable'
 
 export default {
-  props: ['rootNodes', 'selectedItem', 'includeItemName', 'includeItemTags'],
+  mixins: [ModelDragDropMixin],
+  props: ['rootNodes', 'selected', 'includeItemName', 'includeItemTags', 'canDragDrop'],
+  emits: ['reload'],
   components: {
+    Draggable,
     ModelTreeviewItem
   },
+  data () {
+    return {
+      moveState: {}
+    }
+  },
+  computed: {
+    model: {
+      get: function () {
+        return {
+          class: '',
+          children: {
+            locations: this.rootNodes.filter(n => n.class.startsWith('Location')),
+            equipment: this.rootNodes.filter(n => n.class.startsWith('Equipment')),
+            points: this.rootNodes.filter(n => n.class.startsWith('Point')),
+            groups: this.rootNodes.filter(n => !n.class && n.item.type === 'Group'),
+            items: this.rootNodes.filter(n => !n.class && n.item.type !== 'Group')
+          },
+          opened: true,
+          item: null
+        }
+      }
+    }
+  },
   methods: {
     nodeSelected (node) {
       this.$emit('selected', node)
diff --git a/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue b/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue
index 3a081861bf..f66b15c0c3 100644
--- a/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/treeview-item.vue
@@ -3,17 +3,21 @@
                     :icon-ios="icon('ios')" :icon-aurora="icon('aurora')" :icon-md="icon('md')"
                     :textColor="iconColor" :color="(model.item.created !== false) ? 'blue' :'orange'"
                     :selected="selected && selected.item.name === model.item.name"
-                    :opened="model.opened"
+                    :opened="model.opened" :toggle="canHaveChildren"
                     @click="select">
-    <model-treeview-item v-for="node in [model.children.locations,
-                                         model.children.equipment, model.children.points,
-                                         model.children.groups, model.children.items].flat()"
-                         :key="node.item.name"
-                         :model="node"
-                         @selected="(event) => $emit('selected', event)"
-                         :selected="selected"
-                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                         @checked="(item, check) => $emit('checked', item, check)" />
+    <draggable :disabled="!canDragDrop || !model.item.editable" :list="children" group="model-treeview" animation="150" fallbackOnBody="true" forceFallback="true" scrollSensitivity="200" delay="400" swapThreshold="0.6"
+               @start="onDragStart" @change="onDragChange" @end="onDragEnd" :move="onDragMove">
+      <model-treeview-item v-for="(node, index) in children"
+                           :key="node.item.name + '_' + index"
+                           :model="node"
+                           :parentNode="model"
+                           @selected="(event) => $emit('selected', event)"
+                           :selected="selected"
+                           :includeItemName="includeItemName" :includeItemTags="includeItemTags"
+                           :canDragDrop="canDragDrop"
+                           :moveState="moveState"
+                           @checked="(item, check) => $emit('checked', item, check)" />
+    </draggable>
     <div slot="label" class="semantic-class">
       {{ className() }}
       <template v-if="includeItemTags">
@@ -34,31 +38,25 @@
 
 <script>
 import ItemMixin from '@/components/item/item-mixin'
+import ModelDragDropMixin from '@/pages/settings/model/model-dragdrop-mixin'
+import Draggable from 'vuedraggable'
 
 export default {
   name: 'model-treeview-item',
-  mixins: [ItemMixin],
-  props: ['model', 'selected', 'includeItemName', 'includeItemTags'],
+  mixins: [ItemMixin, ModelDragDropMixin],
+  props: ['model', 'parentNode', 'selected', 'includeItemName', 'includeItemTags', 'canDragDrop', 'moveState'],
+  emits: ['reload'],
   components: {
+    Draggable,
     ModelTreeviewItem: 'model-treeview-item'
   },
-  computed: {
-    children () {
-      return [this.model.children.locations,
-        this.model.children.equipment, this.model.children.points,
-        this.model.children.groups, this.model.children.items].flat()
-    },
-    iconColor () {
-      return (this.model.item.metadata && this.model.item.metadata.semantics) ? '' : 'gray'
-    }
-  },
   methods: {
     icon (theme) {
-      if (this.model.class.indexOf('Location') === 0) {
+      if (this.model.class?.indexOf('Location') === 0) {
         return (theme === 'md') ? 'material:place' : 'f7:placemark'
-      } else if (this.model.class.indexOf('Equipment') === 0) {
+      } else if (this.model.class?.indexOf('Equipment') === 0) {
         return (theme === 'md') ? 'material:payments' : 'f7:cube_box'
-      } else if (this.model.class.indexOf('Point') === 0) {
+      } else if (this.model.class?.indexOf('Point') === 0) {
         return (theme === 'md') ? 'material:flash_on' : 'f7:bolt_fill'
       } else if (this.model.item.type === 'Group') {
         return (theme === 'md') ? 'material:folder' : 'f7:folder'
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue
index bc923ac0d9..8edb30ea43 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue
@@ -43,7 +43,7 @@
           </f7-block-footer>
           <f7-block class="semantic-tree">
             <model-treeview class="model-picker-treeview" :rootNodes="rootLocations"
-                            :selected-item="selectedItem" @selected="selectItem" @checked="checkItem" />
+                            :selected="selectedItem" @selected="selectItem" @checked="checkItem" />
           </f7-block>
         </f7-block>
       </f7-col>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model-dragdrop-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/model/model-dragdrop-mixin.js
new file mode 100644
index 0000000000..913cd84ea3
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model-dragdrop-mixin.js
@@ -0,0 +1,485 @@
+import cloneDeep from 'lodash/cloneDeep'
+import * as types from '@/assets/item-types.js'
+import ItemMixin from '@/components/item/item-mixin'
+import TagMixin from '@/components/tags/tag-mixin'
+
+export default {
+  mixins: [ItemMixin, TagMixin],
+  watch: {
+    moveState: {
+      handler: function () {
+        if (this.canSave) {
+          this.saveUpdate()
+        } else if (this.canRemove) {
+          this.validateRemove()
+        } else if (this.canAdd) {
+          this.validateAdd()
+        }
+      },
+      deep: true
+    }
+  },
+  computed: {
+    children: {
+      get: function () {
+        return this.nodeChildren()
+      },
+      set: function (nodeList) {
+        this.$set(this.model.children, 'locations', nodeList.filter(n => n.item.metadata?.semantics?.value?.startsWith('Location')))
+        this.$set(this.model.children, 'equipment', nodeList.filter(n => n.item.metadata?.semantics?.value?.startsWith('Equipment')))
+        this.$set(this.model.children, 'points', nodeList.filter(n => n.item.metadata?.semantics?.value?.startsWith('Point')))
+        this.$set(this.model.children, 'groups', nodeList.filter(n => !n.item.metadata?.semantics && n.item.type === 'Group'))
+        this.$set(this.model.children, 'items', nodeList.filter(n => !n.item.metadata?.semantics && n.item.type !== 'Group'))
+      }
+    },
+    iconColor () {
+      return (this.model.item.metadata && this.model.item.metadata.semantics) ? '' : 'gray'
+    },
+    canAdd () {
+      return !this.moveState.cancelled && this.moveState.dragEnd && !this.moveState.dragFinished && this.moveState.canAdd && !this.moveState.adding
+    },
+    canRemove () {
+      return !this.moveState.cancelled && this.moveState.dragEnd && !this.moveState.dragFinished && !this.moveState.canAdd && this.moveState.canRemove && !this.moveState.removing
+    },
+    canSave () {
+      return !this.moveState.cancelled && this.moveState.dragEnd && this.moveState.dragFinished && !this.moveState.canAdd && !this.moveState.canRemove && !this.moveState.saving
+    },
+    canHaveChildren () {
+      return ((this.model.item.type === 'Group') && (this.children.length > 0 || this.moveState.moving)) === true
+    }
+  },
+  methods: {
+    onDragStart (event) {
+      console.debug('Drag start - event:', event)
+      this.$set(this.moveState, 'moving', true)
+      this.$set(this.moveState, 'canAdd', false)
+      this.$set(this.moveState, 'canRemove', false)
+      this.$set(this.moveState, 'dragEnd', false)
+      this.$set(this.moveState, 'dragFinished', false)
+      this.$set(this.moveState, 'saving', false)
+      this.$set(this.moveState, 'cancelled', false)
+      this.$set(this.moveState, 'moveConfirmed', false)
+      this.$set(this.moveState, 'node', this.children[event.oldIndex])
+      console.debug('Drag start - moveState:', cloneDeep(this.moveState))
+    },
+    onDragChange (event) {
+      console.debug('Drag change - event:', event)
+      if (event.added) {
+        this.$set(this.moveState, 'newParent', this.model)
+        this.$set(this.moveState, 'canAdd', true)
+      }
+      if (event.removed) {
+        this.$set(this.moveState, 'oldParent', this.model)
+        this.$set(this.moveState, 'oldIndex', event.removed.oldIndex)
+        this.$set(this.moveState, 'canRemove', true)
+      }
+      console.debug('Drag change - moveState:', cloneDeep(this.moveState))
+    },
+    onDragMove (event) {
+      if (event.relatedContext?.element?.item?.type === 'Group' && !event.relatedContext.element.opened) {
+        event.relatedContext.element.opened = true
+      }
+    },
+    onDragEnd (event) {
+      this.$set(this.moveState, 'moving', false)
+      this.$set(this.moveState, 'dragEnd', true)
+      console.debug('Drag end - event:', event)
+      console.debug('Drag end - moveState:', cloneDeep(this.moveState))
+    },
+    nestedNodes (node, nodes) {
+      nodes = nodes || []
+      const children = [...node.children.locations, ...node.children.equipment, ...node.children.points, ...node.children.groups, ...node.children.items]
+      nodes.push(...children)
+      children.forEach((child) => this.nestedNodes(child, nodes))
+      return nodes
+    },
+    validateAdd () {
+      this.$set(this.moveState, 'adding', true)
+      const node = this.moveState.node
+      const parentNode = this.moveState.newParent
+      const oldParentNode = this.moveState.oldParent
+      if (parentNode.item && node.item.groupNames?.includes(parentNode.item.name)) {
+        const message = 'Group "' + this.itemLabel(parentNode.item) +
+          '" already contains item "' + this.itemLabel(node.item) + '"'
+        console.debug('Add rejected: ' + message)
+        this.$f7.dialog.alert(message).open()
+        this.restoreModelUpdate()
+        return
+      }
+      if (node.item.type === 'Group' && node.class === '') {
+        const semanticNode = this.nestedNodes(node).find((n) => n.class !== '')
+        if (semanticNode) {
+          const message = 'Cannot insert non-semantic group "' + this.itemLabel(node.item) +
+            '" with semantic child "' + this.itemLabel(semanticNode.item) +
+            '" into semantic group "' + this.itemLabel(parentNode.item) + '"'
+          console.debug('Add rejected: ' + message)
+          this.$f7.dialog.alert(message).open()
+          this.restoreModelUpdate()
+          return
+        }
+      }
+      if (node.class !== '' && parentNode.class !== '' && oldParentNode?.class === '') {
+        const message = 'Cannot move semantic item "' + this.itemLabel(node.item) +
+          '" from non-semantic group "' + this.itemLabel(oldParentNode.item) +
+          '" into semantic group "' + this.itemLabel(parentNode.item) + '"'
+        console.debug('Add rejected:' + message)
+        this.$f7.dialog.alert(message).open()
+        this.restoreModelUpdate()
+        return
+      }
+      if (!this.isValidGroupType(node, parentNode)) {
+        this.restoreModelUpdate()
+        return
+      }
+      if (parentNode.class.startsWith('Location')) {
+        this.addIntoLocation(node, parentNode)
+      } else if (parentNode.class.startsWith('Equipment')) {
+        this.addIntoEquipment(node, parentNode)
+      } else if (parentNode.item) {
+        this.addIntoGroup(node, parentNode)
+      } else {
+        this.addIntoRoot(node, parentNode)
+      }
+    },
+    isValidGroupType (node, parentNode) {
+      const groupTypeDef = parentNode.item?.groupType?.split(':')
+      const baseType = groupTypeDef ? groupTypeDef[0] : 'None'
+      if (baseType === 'None') return true
+      const baseDimension = groupTypeDef && groupTypeDef.length > 1 ? groupTypeDef[1] : null
+
+      const typeDef = node.item.type !== 'Group' ? node.item.type?.split(':') : node.item.groupType?.split(':')
+      const type = typeDef ? typeDef[0] : 'None'
+      const dimension = typeDef.length > 1 ? typeDef[1] : null
+      if ((type === 'Number' || type === 'None') && baseType === 'Number') {
+        if (baseDimension && dimension && baseDimension !== dimension) {
+          const message = 'Group dimension "' + baseDimension +
+             '" of group "' + this.itemLabel(parentNode.item) +
+             '" not compatible with "' + (node.item.type === 'Group' ? 'group ' : '') + 'item dimension "' + dimension +
+             '" of "' + (node.item.type === 'Group' ? 'group ' : '') + '" item "' + this.itemLabel(node.item) + '"'
+          console.debug('Add rejected: ' + message)
+          this.$f7.dialog.alert(message).open()
+          return false
+        }
+        if (dimension) {
+          const childWithDifferentDimension = parentNode.children.map((child) => {
+            const childTypeDef = child.item.type !== 'Group' ? child.item.type.split(':') : child.item.groupType?.split(':')
+            return childTypeDef.length > 1 ? { item: child.item, dimension: childTypeDef[1] } : null
+          }).find((child) => { return dimension !== child?.dimension })
+          if (childWithDifferentDimension) {
+            const message = 'Group "' + this.itemLabel(parentNode.item) +
+              '" already contains item "' + this.itemLabel(childWithDifferentDimension.item) +
+              '" with dimension "' + childWithDifferentDimension.dimension +
+              '" different from group dimension "' + dimension + '"'
+            console.debug('Add rejected: ' + message)
+            this.$f7.dialog.alert(message).open()
+            return false
+          }
+        }
+      }
+      const aggregationFunction = parentNode.item?.function?.name
+      if (aggregationFunction && !this.aggregationFunctions(type).includes(aggregationFunction)) {
+        const message = 'Group aggreggation function "' + aggregationFunction +
+          '" for group "' + this.itemLabel(parentNode.item) +
+          '" not compatible with type "' + type +
+          '" of item "' + this.itemLabel(node.item) + '"'
+        console.debug('Add rejected: ' + message)
+        this.$f7.dialog.alert(message).open()
+        return false
+      }
+      return true
+    },
+    aggregationFunctions (type) {
+      const specificAggregationFunctions = (type) => {
+        switch (type) {
+          case 'Dimmer':
+          case 'Rollershutter':
+          case 'Number':
+            return types.ArithmeticFunctions
+          case 'Contact':
+            return types.LogicalOpenClosedFunctions
+          case 'Player':
+            return types.LogicalPlayPauseFunctions
+          case 'DateTime':
+            return types.DateTimeFunctions
+          case 'Switch':
+            return types.LogicalOnOffFunctions
+        }
+        return []
+      }
+      return [...types.CommonFunctions, ...specificAggregationFunctions(type)]
+    },
+    addIntoLocation (node, parentNode) {
+      if (node.class.startsWith('Location')) {
+        this.addLocation(node, parentNode)
+      } else if (node.class.startsWith('Equipment')) {
+        this.addEquipment(node, parentNode)
+      } else if (node.class.startsWith('Point')) {
+        this.addPoint(node, parentNode)
+      } else if (node.item.type === 'Group') {
+        this.$set(this.moveState, 'moveConfirmed', true)
+        this.$f7.dialog.create({
+          text: 'Insert "' + this.itemLabel(node.item) +
+            '" into "' + this.itemLabel(parentNode.item) +
+            '" as',
+          verticalButtons: true,
+          buttons: [
+            { text: 'Cancel', color: 'gray', onClick: () => this.restoreModelUpdate() },
+            { text: 'Location', onClick: () => this.addLocation(node, parentNode) },
+            { text: 'Equipment', onClick: () => this.addEquipment(node, parentNode) }
+          ]
+        }).open()
+      } else {
+        this.$set(this.moveState, 'moveConfirmed', true)
+        this.$f7.dialog.create({
+          text: 'Insert "' + this.itemLabel(node.item) +
+            '" into "' + this.itemLabel(parentNode.item) +
+            '" as',
+          verticalButtons: true,
+          buttons: [
+            { text: 'Cancel', color: 'gray', onClick: () => this.restoreModelUpdate() },
+            { text: 'Equipment', onClick: () => this.addEquipment(node, parentNode) },
+            { text: 'Point', onClick: () => this.addPoint(node, parentNode) }
+          ]
+        }).open()
+      }
+    },
+    addIntoEquipment (node, parentNode) {
+      if (node.class.startsWith('Location')) {
+        this.$f7.dialog.alert(
+          'Cannot move Location "' + this.itemLabel(node.item) +
+          '" into Equipment "' + this.itemLabel(parentNode.item) + '"'
+        ).open()
+        this.restoreModelUpdate()
+      } else if (node.class.startsWith('Equipment')) {
+        this.addEquipment(node, parentNode)
+      } else if (node.class.startsWith('Point')) {
+        this.addPoint(node, parentNode)
+      } else if (node.item.type === 'Group') {
+        this.addEquipment(node, parentNode)
+      } else {
+        this.$set(this.moveState, 'moveConfirmed', true)
+        const dialog = this.$f7.dialog.create({
+          text: 'Insert "' + this.itemLabel(node.item) +
+            '" into "' + this.itemLabel(parentNode.item) +
+            '" as',
+          verticalButtons: true,
+          buttons: [
+            { text: 'Cancel', color: 'gray', onClick: () => this.restoreModelUpdate() },
+            { text: 'Equipment', onClick: () => this.addEquipment(node, parentNode) },
+            { text: 'Point', onClick: () => this.addPoint(node, parentNode) }
+          ]
+        }).open()
+      }
+    },
+    addIntoGroup (node, parentNode) {
+      if (node.class.startsWith('Location')) {
+        this.addLocation(node, parentNode)
+      } else if (node.class.startsWith('Equipment')) {
+        this.addEquipment(node, parentNode)
+      } else if (node.class.startsWith('Point')) {
+        this.addPoint(node, parentNode)
+      } else {
+        this.addNonSemantic(node, parentNode)
+      }
+    },
+    addIntoRoot (node, parentNode) {
+      if (node.class.startsWith('Location')) {
+        this.addLocation(node, parentNode)
+      } else if (node.class.startsWith('Equipment')) {
+        this.addEquipment(node, parentNode)
+      } else if (node.class.startsWith('Point')) {
+        this.addPoint(node, parentNode)
+      } else if (node.item.type === 'Group') {
+        this.$set(this.moveState, 'moveConfirmed', true)
+        this.$f7.dialog.create({
+          text: 'Insert "' + this.itemLabel(node.item) +
+            '" into "' + this.itemLabel(parentNode.item) +
+            '" as',
+          verticalButtons: true,
+          buttons: [
+            { text: 'Cancel', color: 'gray', onClick: () => this.restoreModelUpdate() },
+            { text: 'Location', onClick: () => this.addLocation(node, parentNode) },
+            { text: 'Equipment', onClick: () => this.addEquipment(node, parentNode) },
+            { text: 'Non Semantic', onClick: () => this.addNonSemantic(node, parentNode) }
+          ]
+        }).open()
+      } else {
+        this.$set(this.moveState, 'moveConfirmed', true)
+        this.$f7.dialog.create({
+          text: 'Insert "' + this.itemLabel(node.item) +
+            '" into "' + this.itemLabel(parentNode.item) +
+            '" as',
+          verticalButtons: true,
+          buttons: [
+            { text: 'Cancel', color: 'gray', onClick: () => this.restoreModelUpdate() },
+            { text: 'Equipment', onClick: () => this.addEquipment(node, parentNode) },
+            { text: 'Point', onClick: () => this.addPoint(node, parentNode) },
+            { text: 'Non Semantic', onClick: () => this.addNonSemantic(node, parentNode) }
+          ]
+        }).open()
+      }
+    },
+    addLocation (node, parentNode) {
+      const semantics = { config: {} }
+      semantics.value = node.item?.metadata?.semantics?.value || 'Location'
+      if (parentNode.class.startsWith('Location')) {
+        semantics.config.isPartOf = parentNode.item.name
+      }
+      if (!node.item.tags.includes(semantics.value)) node.item.tags.push(semantics.value)
+      node.class = semantics.value
+      const nodeChildren = this.nodeChildren(node)
+      nodeChildren.forEach((n) => this.addIntoLocation(n, node))
+      this.updateAfterAdd(node, parentNode, semantics)
+    },
+    addEquipment (node, parentNode) {
+      const semantics = { config: {} }
+      semantics.value = node.item?.metadata?.semantics?.value || 'Equipment'
+      if (parentNode.class.startsWith('Location')) {
+        semantics.config.hasLocation = parentNode.item.name
+      } else if (parentNode.class.startsWith('Equipment')) {
+        semantics.config.isPartOf = parentNode.item.name
+      }
+      if (!node.item.tags.includes(semantics.value)) node.item.tags.push(semantics.value)
+      node.class = semantics.value
+      const nodeChildren = this.nodeChildren(node)
+      nodeChildren.forEach((n) => this.addIntoEquipment(n, node))
+      this.updateAfterAdd(node, parentNode, semantics)
+    },
+    addPoint (node, parentNode) {
+      const semantics = { config: {} }
+      semantics.value = node.item?.metadata?.semantics?.value || 'Point'
+      if (parentNode.class.startsWith('Location')) {
+        semantics.config.hasLocation = parentNode.item.name
+      } else if (parentNode.class.startsWith('Equipment')) {
+        semantics.config.isPointOf = parentNode.item.name
+      }
+      if (!node.item.tags.includes(semantics.value)) node.item.tags.push(semantics.value)
+      node.class = semantics.value
+      this.updateAfterAdd(node, parentNode, semantics)
+    },
+    addNonSemantic (node, parentNode) {
+      node.class = ''
+      this.updateAfterAdd(node, parentNode, null)
+    },
+    updateAfterAdd (node, parentNode, semantics) {
+      if (semantics === null) {
+        if (node.item.metadata?.semantics) {
+          node.item.metadata.semantics = null
+        }
+      } else if (node.item.metadata) {
+        node.item.metadata.semantics = semantics
+      } else {
+        node.item.metadata = { semantics }
+      }
+      if (parentNode.item?.type === 'Group' && !node.item.groupNames.includes(parentNode.item.name)) {
+        node.item.groupNames.push(parentNode.item.name)
+      }
+      console.debug('Add - new moveState:', cloneDeep(this.moveState))
+      if (!this.children.some(n => n.item.name === node.item.name)) {
+        // sometimes the list gets updates when dragging, sometimes it is missed so we have to add here
+        this.children.push(node)
+      }
+      const newChildren = this.children
+      this.children = newChildren // force setters to update model
+      this.$set(this.moveState, 'canAdd', false)
+      this.$set(this.moveState, 'adding', false)
+      console.debug('Add - finished, new moveState:', cloneDeep(this.moveState))
+    },
+    validateRemove () {
+      this.$set(this.moveState, 'removing', true)
+      const node = this.moveState.node
+      const parentNode = this.moveState.oldParent
+      const oldIndex = this.moveState.oldIndex
+      console.debug('Remove - new moveState:', cloneDeep(this.moveState))
+      if (parentNode.class !== '' && this.moveState.newParent.class !== '') {
+        // always remove from semantic model groups, unless moving into non-semantic group
+        this.remove(node, parentNode, oldIndex)
+      } else if (!parentNode.item && node.class !== '') {
+        // always remove semantic item from root level when moving into another group
+        this.remove(node, parentNode, oldIndex)
+      } else if (parentNode.item?.type === 'Group') {
+        this.$set(this.moveState, 'moveConfirmed', true)
+        this.$f7.dialog.create({
+          text: 'Item "' + this.itemLabel(node.item) +
+            '" dragged from group "' + this.itemLabel(parentNode.item) +
+            '" into "' + this.itemLabel(this.moveState.newParent.item) +
+            '", keep original?',
+          verticalButtons: true,
+          buttons: [
+            { text: 'Cancel', color: 'gray', onClick: () => this.restoreModelUpdate() },
+            { text: 'Keep', onClick: () => this.updateAfterRemove() },
+            { text: 'Remove', onClick: () => this.remove(node, parentNode, oldIndex) }
+          ]
+        }).open()
+      } else {
+        this.updateAfterRemove()
+      }
+    },
+    remove (node, parentNode, oldIndex) {
+      const groupNameIndex = node.item.groupNames.findIndex(g => g === parentNode.item?.name)
+      if (groupNameIndex >= 0) {
+        node.item.groupNames.splice(groupNameIndex, 1)
+      }
+      const newChildren = this.nodeChildren(parentNode)
+      newChildren.splice(oldIndex, 1)
+      this.children = newChildren
+      if (parentNode.class === '' && parentNode.item?.type === 'Group') {
+        // Moving a semantic item to a non-semantic group, remove semantics
+        if (node.item.metadata) {
+          node.item.metadata.semantics = null
+        }
+      }
+      this.updateAfterRemove()
+      console.debug('Remove - finished, new moveState:', cloneDeep(this.moveState))
+    },
+    updateAfterRemove () {
+      this.$set(this.moveState, 'canRemove', false)
+      this.$set(this.moveState, 'removing', false)
+      this.$set(this.moveState, 'dragFinished', true)
+    },
+    saveUpdate () {
+      this.$set(this.moveState, 'saving', true)
+      const node = this.moveState.node
+      const parentNode = this.moveState.newParent
+      if (!this.moveState.moveConfirmed) {
+        this.$f7.dialog.confirm(
+          'Move "' + this.itemLabel(node.item) + '" into "' + this.itemLabel(parentNode.item) + '"?',
+          () => this.saveModelUpdate(),
+          () => this.restoreModelUpdate()
+        ).open()
+      } else {
+        this.saveModelUpdate()
+      }
+    },
+    saveModelUpdate () {
+      this.$set(this.moveState, 'dragFinished', false)
+      const node = this.moveState.node
+      const nodes = [node, ...this.nestedNodes(node)]
+      nodes.forEach((n) => {
+        const updatedItem = n.item
+        console.debug('Save - updatedItem: ', cloneDeep(updatedItem))
+        this.saveItem(updatedItem)
+      })
+      this.$set(this.moveState, 'saving', false)
+    },
+    restoreModelUpdate () {
+      console.debug('Restore model')
+      this.$set(this.moveState, 'canRemove', false)
+      this.$set(this.moveState, 'canAdd', false)
+      this.$set(this.moveState, 'adding', false)
+      this.$set(this.moveState, 'removing', false)
+      this.$emit('reload')
+    },
+    itemLabel (item) {
+      if (!item) return 'model root'
+      return (item.label ? (this.includeItemName ? item.label + ' (' + item.name + ')' : item.label) : item.name)
+    },
+    nodeChildren (node) {
+      const parentNode = node || this.model
+      if (!parentNode.children) return []
+      return [parentNode.children.locations,
+        parentNode.children.equipment, parentNode.children.points,
+        parentNode.children.groups, parentNode.children.items].flat()
+    }
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js
index e7126940d3..910f889fe2 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js
@@ -1,4 +1,5 @@
 import { compareItems } from '@/components/widgets/widget-order'
+import cloneDeep from 'lodash/cloneDeep'
 
 function compareModelItems (o1, o2) {
   return compareItems(o1.item || o1, o2.item || o2)
@@ -22,12 +23,14 @@ export default {
       links: [],
       locations: [],
       rootLocations: [],
-      equipment: {},
+      equipment: [],
       rootEquipment: [],
       rootPoints: [],
       rootGroups: [],
       rootItems: [],
 
+      expandedTreeviewItems: [],
+
       previousSelection: null,
       selectedItem: null
     }
@@ -39,9 +42,11 @@ export default {
      * @returns {Promise<void>}
      */
     loadModel () {
-      if (this.loading) return
+      if (this.loading) return Promise.resolve()
       this.loading = true
 
+      this.saveExpanded()
+
       const items = this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=.+')
       const links = this.$oh.api.get('/rest/links')
       return Promise.all([items, links]).then((data) => {
@@ -125,7 +130,7 @@ export default {
 
       if (this.includeNonSemantic) {
         parent.children.groups = this.items
-          .filter((i) => i.type === 'Group' && (!i.metadata || (i.metadata && !i.metadata.semantics)) && i.groupNames.indexOf(parent.item.name) >= 0)
+          .filter((i) => i.type === 'Group' && !(parent.item.metadata && parent.item.metadata.semantics) && i.groupNames.indexOf(parent.item.name) >= 0)
           .map(this.modelItem).sort(compareModelItems)
         parent.children.groups.forEach(this.getChildren)
         if (parent.item.metadata && parent.item.metadata.semantics) {
@@ -155,6 +160,20 @@ export default {
           }
         }
       })
+    },
+    saveExpanded () {
+      this.expandedTreeviewItems = [...document.querySelectorAll('.treeview-item-opened')]
+    },
+    restoreExpanded () {
+      const treeviewItems = document.querySelectorAll('.treeview-item')
+
+      treeviewItems.forEach(item => {
+        if (item.classList.contains('treeview-item')) {
+          if (this.expanded || this.expandedTreeviewItems.includes(item)) {
+            item.classList.add('treeview-item-opened')
+          }
+        }
+      })
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
index 66bf32d9fc..42400d2159 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@@ -35,7 +35,7 @@
       </div>
       <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
     </f7-toolbar>
-    <f7-toolbar v-else bottom class="toolbar-details" style="height: calc(50px + var(--f7-safe-area-bottom))">
+    <f7-toolbar v-else bottom class="toolbar-details">
       <f7-link :disabled="selectedItem != null" class="left" @click="selectedItem = null">
         Clear
       </f7-link>
@@ -71,13 +71,9 @@
           </f7-block>
 
           <f7-block v-show="!empty" strong class="semantic-tree" no-gap @click.native="clearSelection">
-            <!-- <empty-state-placeholder v-if="empty" icon="list_bullet_indent" title="model.title" text="model.text" /> -->
-            <f7-treeview>
-              <model-treeview-item v-for="node in [rootLocations, rootEquipment, rootPoints, rootGroups, rootItems].flat()"
-                                   :key="node.item.name" :model="node"
-                                   :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                                   @selected="selectItem" :selected="selectedItem" />
-            </f7-treeview>
+            <model-treeview :rootNodes="[rootLocations, rootEquipment, rootPoints, rootGroups, rootItems].flat()"
+                            :includeItemName="includeItemName" :includeItemTags="includeItemTags" :canDragDrop="true"
+                            @selected="selectItem" :selected="selectedItem" @reload="load" />
           </f7-block>
         </f7-col>
         <f7-col width="100" medium="50" class="details-pane">
@@ -172,20 +168,21 @@
 
 <style lang="stylus">
 .semantic-tree-wrapper
+  user-select: none
   padding 0
-  margin-bottom 0
+  .row
+    height 100%
+    .col-100
+      height 100%
+      overflow auto
+      .semantic-tree
+        min-height 100%
+        margin 0
+        height auto
 .semantic-tree
-  padding 0
+  user-select: none
+  margin 0 !important
   border-right 1px solid var(--f7-block-strong-border-color)
-  .treeview
-    --f7-treeview-item-height 40px
-    .treeview-item-label
-      font-size 10pt
-      white-space nowrap
-      overflow-x hidden
-    .semantic-class
-      font-size 8pt
-      color var(--f7-list-item-footer-text-color)
 .model-details-sheet
   .toolbar
     --f7-theme-color var(--f7-color-blue)
@@ -196,16 +193,8 @@
 
 @media (min-width: 768px)
   .semantic-tree-wrapper
-    height calc(100% - var(--f7-navbar-height))
+    height calc(100% - var(--f7-toolbar-height))
     .row
-      height 100%
-      .col-100
-        height 100%
-        overflow auto
-        .semantic-tree
-          min-height 100%
-          margin 0
-          height auto
       .details-pane
         padding-top 0
         .block
@@ -217,12 +206,22 @@
     visibility hidden !important
 
 @media (max-width: 767px)
+  .semantic-tree-wrapper.block:first-child
+    margin-top 5px
+  .semantic-tree-wrapper
+    height calc(100% - 20px)
+    margin-bottom 5px
   .details-pane
     display none
   .semantic-tree-wrapper.sheet-opened
-    margin-bottom var(--f7-sheet-height)
-  .details-sheet
-    height calc(1.4*var(--f7-sheet-height))
+    height calc(100% - 5px - var(--f7-sheet-height) + var(--f7-page-toolbar-bottom-offset, 0px) + var(--f7-page-content-extra-padding-bottom, 0px))
+    margin-bottom calc(var(--f7-sheet-height) - var(--f7-page-toolbar-bottom-offset, 0px) - var(--f7-page-content-extra-padding-bottom, 0px))
+  .toolbar-details.toolbar.toolbar-bottom
+    height  calc( 50px + var(--f7-safe-area-bottom))
+  .model-details-sheet.sheet-modal.sheet-modal-bottom .block
+    margin-top 0px
+    padding-left 0px
+    padding-right 0px
 
 .expand-button
   margin-right 8px
@@ -234,6 +233,7 @@
 
 <script>
 import ModelDetailsPane from '@/components/model/details-pane.vue'
+import ModelTreeview from '@/components/model/model-treeview.vue'
 import AddFromThing from './add-from-thing.vue'
 import AddFromTemplate from './add-from-template.vue'
 
@@ -241,7 +241,6 @@ import ItemStatePreview from '@/components/item/item-state-preview.vue'
 import ItemDetails from '@/components/model/item-details.vue'
 import MetadataMenu from '@/components/item/metadata/item-metadata-menu.vue'
 import LinkDetails from '@/components/model/link-details.vue'
-import ModelTreeviewItem from '@/components/model/treeview-item.vue'
 
 import ModelMixin from '@/pages/settings/model/model-mixin'
 
@@ -250,11 +249,11 @@ export default {
   components: {
     'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     ModelDetailsPane,
+    ModelTreeview,
     ItemStatePreview,
     ItemDetails,
     MetadataMenu,
-    LinkDetails,
-    ModelTreeviewItem
+    LinkDetails
   },
   data () {
     if (!this.$f7.data.model) this.$f7.data.model = {}
@@ -336,7 +335,7 @@ export default {
             this.$refs.searchbar.f7Searchbar.$inputEl[0].focus()
           }
           this.$refs.searchbar?.f7Searchbar.search(this.$f7.data.lastModelSearchQuery || '')
-          this.applyExpandedOption()
+          this.restoreExpanded()
         })
         if (!this.eventSource) this.startEventSource()
       })
@@ -381,6 +380,7 @@ export default {
     clearSelection (ev) {
       if (ev.target && ev.currentTarget && ev.target === ev.currentTarget) {
         this.selectedItem = null
+        this.detailsOpened = false
       }
     },
     toggleNonSemantic () {