diff --git a/bundles/org.openhab.ui/doc/components/index.md b/bundles/org.openhab.ui/doc/components/index.md
index ac84314c61..eb173f1646 100644
--- a/bundles/org.openhab.ui/doc/components/index.md
+++ b/bundles/org.openhab.ui/doc/components/index.md
@@ -143,7 +143,7 @@ source: https://github.com/openhab/openhab-webui/edit/main/bundles/org.openhab.u
 | Component | Name | Description |
 |--------|------|-------------|
 | [`oh-location-card`](./oh-location-card.html) |  [Location Card](./oh-location-card.html) | A card showing model items in a certain location |
-| [`oh-equipment-card`](./oh-equipment-card.html) |  [Equipment Class Card](./oh-equipment-card.html) | A card showing model items belonging to a certain equipment class |
+| [`oh-equipment-card`](./oh-equipment-card.html) |  [Equipment Card](./oh-equipment-card.html) | A card showing model items belonging to a certain equipment class |
 | [`oh-property-card`](./oh-property-card.html) |  [Property Card](./oh-property-card.html) | A card showing model items related to a certain property |
 
 
diff --git a/bundles/org.openhab.ui/doc/components/oh-equipment-card.md b/bundles/org.openhab.ui/doc/components/oh-equipment-card.md
index 3063ba2cb6..37ee92abd2 100644
--- a/bundles/org.openhab.ui/doc/components/oh-equipment-card.md
+++ b/bundles/org.openhab.ui/doc/components/oh-equipment-card.md
@@ -29,6 +29,13 @@ A card showing model items belonging to a certain equipment class
 <div class="props">
 <PropGroup name="card" label="Model Card">
   General settings for this card
+<PropBlock type="TEXT" name="item" label="Item">
+  <PropDescription>
+    Equipment class to display
+  </PropDescription>
+  <PropOptions>
+  </PropOptions>
+</PropBlock>
 <PropBlock type="TEXT" name="title" label="Title">
   <PropDescription>
     Title of the card
diff --git a/bundles/org.openhab.ui/doc/components/oh-location-card.md b/bundles/org.openhab.ui/doc/components/oh-location-card.md
index 72ca005f05..6216fb5f2b 100644
--- a/bundles/org.openhab.ui/doc/components/oh-location-card.md
+++ b/bundles/org.openhab.ui/doc/components/oh-location-card.md
@@ -29,6 +29,11 @@ A card showing model items in a certain location
 <div class="props">
 <PropGroup name="card" label="Model Card">
   General settings for this card
+<PropBlock type="TEXT" name="item" label="Item" context="item">
+  <PropDescription>
+    Location to display
+  </PropDescription>
+</PropBlock>
 <PropBlock type="TEXT" name="title" label="Title">
   <PropDescription>
     Title of the card
diff --git a/bundles/org.openhab.ui/doc/components/oh-property-card.md b/bundles/org.openhab.ui/doc/components/oh-property-card.md
index c9793b9c6b..3e98c1d200 100644
--- a/bundles/org.openhab.ui/doc/components/oh-property-card.md
+++ b/bundles/org.openhab.ui/doc/components/oh-property-card.md
@@ -29,6 +29,13 @@ A card showing model items related to a certain property
 <div class="props">
 <PropGroup name="card" label="Model Card">
   General settings for this card
+<PropBlock type="TEXT" name="item" label="Item">
+  <PropDescription>
+    Property to display
+  </PropDescription>
+  <PropOptions>
+  </PropOptions>
+</PropBlock>
 <PropBlock type="TEXT" name="title" label="Title">
   <PropDescription>
     Title of the card
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js
index 04acc23ac4..45fba56a7c 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/home/index.js
@@ -96,7 +96,7 @@ const ModelCardParameters = () => [
 ]
 
 export const OhLocationCardParameters = () => new WidgetDefinition('oh-location-card', 'Location Card', 'A card showing model items in a certain location')
-  .paramGroup(ModelCardParameterGroup(), ModelCardParameters())
+  .paramGroup(ModelCardParameterGroup(), [pi('item', 'Item', 'Location to display')].concat(ModelCardParameters()))
   .paramGroup(pg('glance', 'Card at-a-glance badges'), [
     pb('disableBadges', 'Disable badges', 'Do not examine items to display badges - can help with performance if you don\'t need them.'),
     pt('badges', 'Enabled badges', 'Select the badges you wish to show in the header of the card. Display all if none are selected.')
@@ -120,8 +120,14 @@ export const OhLocationCardParameters = () => new WidgetDefinition('oh-location-
       ], true, true)
   ])
 
-export const OhEquipmentCardParameters = () => new WidgetDefinition('oh-equipment-card', 'Equipment Class Card', 'A card showing model items belonging to a certain equipment class')
-  .paramGroup(ModelCardParameterGroup(), ModelCardParameters())
+export const OhEquipmentCardParameters = () => new WidgetDefinition('oh-equipment-card', 'Equipment Card', 'A card showing model items belonging to a certain equipment class')
+  .paramGroup(ModelCardParameterGroup(), [
+    pt('item', 'Item', 'Equipment class to display')
+      .o([]) // inject semantic equipment tags at runtime
+  ].concat(ModelCardParameters()))
 
 export const OhPropertyCardParameters = () => new WidgetDefinition('oh-property-card', 'Property Card', 'A card showing model items related to a certain property')
-  .paramGroup(ModelCardParameterGroup(), ModelCardParameters())
+  .paramGroup(ModelCardParameterGroup(), [
+    pt('item', 'Item', 'Property to display')
+      .o([]) // inject semantic property tags at runtime
+  ].concat(ModelCardParameters()))
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index 151e7f2891..fcd9751220 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -479,6 +479,7 @@ export default {
             dayjsLocalePromise = (dayjsLocale) ? import('dayjs/locale/' + dayjsLocale.key + '.js').then(() => Promise.resolve(dayjsLocale)) : Promise.resolve(null)
           }
           // load the pages & widgets, only if the 'ui' endpoint exists (or empty arrays otherwise)
+          // load the semantic tags
           return Promise.all([
             ...this.$store.getters.apiEndpoint('ui')
               ? [this.$oh.api.get('/rest/ui/components/ui:page'), this.$oh.api.get('/rest/ui/components/ui:widget')]
@@ -499,6 +500,9 @@ export default {
 
           if (data[2]) dayjs.locale(data[2].key)
 
+          // load & build the semantic model
+          return this.$store.dispatch('loadSemanticModel')
+        }).then(() => {
           // finished with loading
           this.ready = true
           return Promise.resolve()
diff --git a/bundles/org.openhab.ui/web/src/components/cards/equipment-card.vue b/bundles/org.openhab.ui/web/src/components/cards/equipment-card.vue
index a405cc8001..9d277338b3 100644
--- a/bundles/org.openhab.ui/web/src/components/cards/equipment-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/cards/equipment-card.vue
@@ -15,7 +15,7 @@
   </model-card>
 </template>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .equipment-card
   height 150px
 .equipment-stats
diff --git a/bundles/org.openhab.ui/web/src/components/cards/location-card.vue b/bundles/org.openhab.ui/web/src/components/cards/location-card.vue
index fd37e5d45e..95b4639fdc 100644
--- a/bundles/org.openhab.ui/web/src/components/cards/location-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/cards/location-card.vue
@@ -34,7 +34,7 @@
   </model-card>
 </template>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .location-card
   height 200px
 .location-stats
diff --git a/bundles/org.openhab.ui/web/src/components/cards/property-card.vue b/bundles/org.openhab.ui/web/src/components/cards/property-card.vue
index b8a45ec7ae..78851ad30d 100644
--- a/bundles/org.openhab.ui/web/src/components/cards/property-card.vue
+++ b/bundles/org.openhab.ui/web/src/components/cards/property-card.vue
@@ -20,7 +20,7 @@
   </model-card>
 </template>
 
-<style lang="stylus">
+<style lang="stylus" scoped>
 .property-card
   height 150px
 .property-stats
diff --git a/bundles/org.openhab.ui/web/src/components/sse-events-mixin.js b/bundles/org.openhab.ui/web/src/components/sse-events-mixin.js
index a1f6a1f74d..a84c8351df 100644
--- a/bundles/org.openhab.ui/web/src/components/sse-events-mixin.js
+++ b/bundles/org.openhab.ui/web/src/components/sse-events-mixin.js
@@ -12,10 +12,11 @@ export default {
   },
   methods: {
     startEventSource () {
+      const topicItems = 'openhab/items/*/added,openhab/items/*/removed,openhab/items/*/updated'
       const topicAudio = 'openhab/webaudio/playurl'
       const commandItem = localStorage.getItem('openhab.ui:commandItem')
       const topicCommand = `openhab/items/${commandItem || ''}/command`
-      let topics = null
+      let topics = topicItems
       if (localStorage.getItem('openhab.ui:webaudio.enable') === 'enabled') {
         topics = topicAudio
       }
@@ -38,6 +39,13 @@ export default {
             const payload = JSON.parse(event.payload)
             this.handleCommand(payload.value)
             break
+          default:
+            if (event.topic.startsWith('openhab/items/')) {
+              console.info('Item SSE event received, reloading semantic model ...')
+              this.$store.dispatch('loadSemanticModel')
+              break
+            }
+            console.warn('Unhandled SSE event: ' + JSON.stringify(event))
         }
       })
     },
diff --git a/bundles/org.openhab.ui/web/src/components/tabs/equipment-tab.vue b/bundles/org.openhab.ui/web/src/components/tabs/equipment-tab.vue
new file mode 100644
index 0000000000..295216b547
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/tabs/equipment-tab.vue
@@ -0,0 +1,12 @@
+<template>
+  <model-tab type="equipment" :page="context" />
+</template>
+
+<script>
+import ModelTab from '@/pages/home/model-tab.vue'
+
+export default {
+  props: ['context'],
+  components: { ModelTab }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/tabs/locations-tab.vue b/bundles/org.openhab.ui/web/src/components/tabs/locations-tab.vue
new file mode 100644
index 0000000000..f9b995a1d6
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/tabs/locations-tab.vue
@@ -0,0 +1,12 @@
+<template>
+  <model-tab type="locations" :page="context" />
+</template>
+
+<script>
+import ModelTab from '@/pages/home/model-tab.vue'
+
+export default {
+  props: ['context'],
+  components: { ModelTab }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/tabs/properties-tab.vue b/bundles/org.openhab.ui/web/src/components/tabs/properties-tab.vue
new file mode 100644
index 0000000000..06615d53f8
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/tabs/properties-tab.vue
@@ -0,0 +1,12 @@
+<template>
+  <model-tab type="properties" :page="context" />
+</template>
+
+<script>
+import ModelTab from '@/pages/home/model-tab.vue'
+
+export default {
+  props: ['context'],
+  components: { ModelTab }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js b/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js
index c1697f7d0a..43ce05dd31 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/index.js
@@ -1,11 +1,14 @@
 /* Add any new widget to this file - the name of the export should be "OhSomething" */
 
+export { default as OhEquipmentCard } from './oh-equipment-card.vue'
 export { default as OhLabelCard } from './oh-label-card.vue'
 export { default as OhToggleCard } from './oh-toggle-card.vue'
 export { default as OhRollershutterCard } from './oh-rollershutter-card.vue'
 export { default as OhColorpickerCard } from './oh-colorpicker-card.vue'
 export { default as OhGaugeCard } from './oh-gauge-card.vue'
 export { default as OhKnobCard } from './oh-knob-card.vue'
+export { default as OhLocationCard } from './oh-location-card.vue'
+export { default as OhPropertyCard } from './oh-property-card.vue'
 export { default as OhSliderCard } from './oh-slider-card.vue'
 export { default as OhImageCard } from './oh-image-card.vue'
 export { default as OhVideoCard } from './oh-video-card.vue'
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-equipment-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-equipment-card.vue
new file mode 100644
index 0000000000..e4c0598405
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-equipment-card.vue
@@ -0,0 +1,26 @@
+<template>
+  <equipment-card :element="element" :context="context" :tab-context="config" />
+</template>
+
+<script>
+import mixin from '../widget-mixin'
+import store from '@/js/store'
+import { OhEquipmentCardParameters } from '@/assets/definitions/widgets/home'
+import EquipmentCard from '@/components/cards/equipment-card.vue'
+
+export default {
+  components: { EquipmentCard },
+  mixins: [mixin],
+  computed: {
+    element () {
+      return this.$store.getters.semanticModelElement(this.config.item, 'equipment') ||
+        { defaultTitle: 'Equipment Card', item: { equipment: [], metadata: { semantics: { value: '' } } }, equipment: [], properties: [] }
+    }
+  },
+  widget: () => {
+    const widget = OhEquipmentCardParameters()
+    widget.props.parameters.find(p => p.name === 'item').options = store.state.semantics.Equipment.map(p => { return { name: p, label: store.state.semantics.Labels[p] } })
+    return widget
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-location-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-location-card.vue
new file mode 100644
index 0000000000..2998ef0e63
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-location-card.vue
@@ -0,0 +1,24 @@
+<template>
+  <location-card :element="element" :context="context" :tab-context="config" :parent-location="parentLocationName" />
+</template>
+
+<script>
+import LocationCard from '@/components/cards/location-card.vue'
+import mixin from '../widget-mixin'
+import { OhLocationCardParameters } from '@/assets/definitions/widgets/home'
+
+export default {
+  components: { LocationCard },
+  mixins: [mixin],
+  computed: {
+    element () {
+      return this.$store.getters.semanticModelElement(this.config.item, 'location') ||
+        { defaultTitle: 'Location Card', item: { equipment: [], metadata: { semantics: { value: '' } } }, equipment: [], properties: [] }
+    },
+    parentLocationName () {
+      return this.element && this.element.parent ? this.element.parent.label || this.element.parent.name : ''
+    }
+  },
+  widget: OhLocationCardParameters
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-property-card.vue b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-property-card.vue
new file mode 100644
index 0000000000..a2c1924ae6
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/standard/oh-property-card.vue
@@ -0,0 +1,26 @@
+<template>
+  <property-card :element="element" :context="context" :tab-context="config" />
+</template>
+
+<script>
+import mixin from '../widget-mixin'
+import store from '@/js/store'
+import { OhPropertyCardParameters } from '@/assets/definitions/widgets/home'
+import PropertyCard from '@/components/cards/property-card.vue'
+
+export default {
+  components: { PropertyCard },
+  mixins: [mixin],
+  computed: {
+    element () {
+      return this.$store.getters.semanticModelElement(this.config.item, 'property') ||
+        { defaultTitle: 'Property Card', item: { equipment: [], metadata: { semantics: { value: '' } } }, equipment: [], properties: [], points: [] }
+    }
+  },
+  widget: () => {
+    const widget = OhPropertyCardParameters()
+    widget.props.parameters.find(p => p.name === 'item').options = store.state.semantics.Properties.map(p => { return { name: p, label: store.state.semantics.Labels[p] } })
+    return widget
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/js/store/index.js b/bundles/org.openhab.ui/web/src/js/store/index.js
index a06f9bd61b..0631b320a3 100644
--- a/bundles/org.openhab.ui/web/src/js/store/index.js
+++ b/bundles/org.openhab.ui/web/src/js/store/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import components from './modules/components'
+import model from './modules/model'
 import states from './modules/states'
 import semantics from './modules/semantics'
 import user from './modules/user'
@@ -14,6 +15,7 @@ Vue.use(Vuex)
 const store = new Vuex.Store({
   modules: {
     components,
+    model,
     semantics,
     states,
     user
diff --git a/bundles/org.openhab.ui/web/src/js/store/modules/model.js b/bundles/org.openhab.ui/web/src/js/store/modules/model.js
new file mode 100644
index 0000000000..f501471661
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/js/store/modules/model.js
@@ -0,0 +1,209 @@
+import api from '@/js/openhab/api'
+import { authorize } from '@/js/openhab/auth'
+import i18n from '@/js/i18n'
+import { compareItems } from '@/components/widgets/widget-order'
+
+function compareObjects (o1, o2) {
+  return compareItems(o1.item || o1, o2.item || o2)
+}
+
+function buildModelCard (type, source, key) {
+  switch (type) {
+    case 'location':
+      let defaultLocationTitle = source.item.label || source.item.name
+      return Object.assign(source, {
+        key,
+        defaultTitle: defaultLocationTitle
+      })
+    case 'equipment':
+      let defaultEquipmentTitle = i18n.t(key)
+      return {
+        key,
+        defaultTitle: defaultEquipmentTitle,
+        equipment: source
+      }
+    case 'property':
+      let defaultPropertyTitle = i18n.t(key)
+      return {
+        key,
+        defaultTitle: defaultPropertyTitle,
+        points: source
+      }
+  }
+}
+
+// Recursively builds path in model (sorted array of relations to ancestors, either Equipment or Location) for an item
+// that has semantics configuration and returns it.
+// At the same time, adds all items not already processed to the filteredItems property depending on their semantic type.
+function buildPathInModel (item, items, filteredItems) {
+  if (!item.metadata || !item.metadata.semantics) return
+  if (item.modelPath) return item.modelPath
+  let parent = null
+  if (item.metadata.semantics.config && item.metadata.semantics.config.hasLocation) {
+    parent = (items.find((i) => i.name === item.metadata.semantics.config.hasLocation))
+  } else if (item.metadata.semantics.config && item.metadata.semantics.config.isPointOf) {
+    parent = (items.find((i) => i.name === item.metadata.semantics.config.isPointOf))
+  } else if (item.metadata.semantics.config && item.metadata.semantics.config.isPartOf) {
+    parent = (items.find((i) => i.name === item.metadata.semantics.config.isPartOf))
+  }
+  if (parent && parent.semanticLoopDetector) {
+    throw new Error(`A a loop has been detected in the semantic model: ${parent.name} is both descendant and parent of ${item.name}`)
+  }
+  item.parent = parent ? { name: parent.name, label: parent.label, metadata: parent.metadata } : null
+
+  item.semanticLoopDetector = true
+  item.modelPath = parent ? [...(buildPathInModel(parent, items, filteredItems)), item.parent] : []
+  delete item.semanticLoopDetector
+  item.children = []
+  item.locations = []
+  item.points = []
+  item.properties = []
+  item.equipment = []
+  item.equipmentOrPoints = []
+
+  if (parent) parent.children.push(item)
+
+  if (item.metadata.semantics.value.startsWith('Location')) {
+    if (parent) parent.locations.push(item)
+    filteredItems.locations.push(item)
+  }
+
+  if (item.metadata.semantics.value.startsWith('Point')) {
+    if (parent) {
+      parent.points.push(item)
+      parent.equipmentOrPoints.push(item)
+    }
+  }
+
+  if (item.metadata.semantics.config && item.metadata.semantics.config.relatesTo) {
+    if (parent) parent.properties.push(item)
+    filteredItems.properties.push(item)
+  }
+
+  if (item.metadata.semantics.value.startsWith('Equipment')) {
+    if (parent) {
+      parent.equipment.push(item)
+      parent.equipmentOrPoints.push(item)
+    }
+    filteredItems.equipment.push(item)
+  }
+
+  return item.modelPath
+}
+
+function sortModel (item) {
+  item.children = item.children.sort(compareItems)
+  item.locations = item.locations.sort(compareItems)
+  item.points = item.points.sort(compareItems)
+  item.properties = item.properties.sort(compareItems)
+  item.equipment = item.equipment.sort(compareItems)
+  item.equipmentOrPoints = item.equipmentOrPoints.sort(compareItems)
+
+  item.children.forEach(child => sortModel(child))
+}
+
+const state = {
+  semanticModel: null,
+  error: null
+}
+
+const getters = {
+  semanticModel: (state) => {
+    return state.semanticModel
+  },
+  semanticModelElement: (state) => (key, type) => {
+    if (state.semanticModel == null) {
+      return null
+    }
+    return state.semanticModel[type === 'location' ? 'locations' : type === 'equipment' ? 'equipment' : 'properties']?.find(e => e.key === key)
+  }
+}
+
+const mutations = {
+  setSemanticModel (state, model) {
+    state.semanticModel = model
+  },
+  setError (state, error) {
+    state.error = error
+  }
+}
+
+const actions = {
+  loadSemanticModel (context) {
+    console.debug('Loading semantic model and building semantic homepages ...')
+    api.get('/rest/items?staticDataOnly=true&metadata=semantics,listWidget,widgetOrder')
+      .then((data) => {
+        const items = data
+        let filteredItems = {
+          equipment: [],
+          properties: [],
+          locations: []
+        }
+
+        // build model path for all model items
+        data.forEach((item) => {
+          if (item.metadata && item.metadata.semantics) buildPathInModel(item, items, filteredItems)
+        })
+
+        // Sort each semantic model item children arrays (start at top-level nodes)
+        data.filter((item) => item.modelPath && item.modelPath.length === 0)
+          .forEach((item) => sortModel(item))
+
+        // get the location items
+        const locations = filteredItems.locations.sort(compareObjects).map((l) => {
+          return {
+            item: l,
+            properties: l.points,
+            equipment: l.equipment.map((item) => {
+              return {
+                item: item,
+                points: item.points,
+                equipment: item.equipment
+              }
+            })
+          }
+        })
+
+        // get the equipment items
+        const equipment = filteredItems.equipment.sort(compareObjects).reduce((prev, item, i, properties) => {
+          const equipmentType = item.metadata.semantics.value.substring(item.metadata.semantics.value.lastIndexOf('_')).replace('_', '')
+          if (!prev[equipmentType]) prev[equipmentType] = []
+          prev[equipmentType].push(item)
+          return prev
+        }, {})
+
+        // get the property items
+        const properties = filteredItems.properties.sort(compareObjects).reduce((prev, item, i, properties) => {
+          const property = item.metadata.semantics.config.relatesTo.split('_')[1]
+          if (!prev[property]) prev[property] = []
+          prev[property].push(item)
+          return prev
+        }, {})
+
+        const model = {}
+        model.locations = locations.map(l => buildModelCard('location', l, l.item.name))
+        model.equipment = Object.keys(equipment).sort((a, b) => i18n.t(a).localeCompare(i18n.t(b))).map(k => buildModelCard('equipment', equipment[k], k))
+        model.properties = Object.keys(properties).sort((a, b) => i18n.t(a).localeCompare(i18n.t(b))).map(k => buildModelCard('property', properties[k], k))
+
+        // console.log('model', model)
+        context.commit('setSemanticModel', model)
+        return Promise.resolve()
+      })
+      .catch((e) => {
+        console.error('Error while loading model:')
+        console.error(e)
+        if (e === 'Unauthorized' || e === 401) {
+          authorize()
+        }
+        context.commit('setError', e)
+        Promise.reject('Failed to load semantic model: ' + e)
+      })
+  }
+}
+
+export default {
+  state,
+  getters,
+  mutations,
+  actions
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/home.vue b/bundles/org.openhab.ui/web/src/pages/home.vue
index 44083cbfe9..bb1a4ef031 100644
--- a/bundles/org.openhab.ui/web/src/pages/home.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home.vue
@@ -43,13 +43,13 @@
         <overview-tab v-if="currentTab === 'overview'" :context="context" :key="overviewPageKey" :allow-chat="allowChat" />
       </f7-tab>
       <f7-tab id="tab-locations" :tab-active="currentTab === 'locations'" @tab:show="() => this.currentTab = 'locations'">
-        <model-tab v-if="currentTab === 'locations'" :context="context" type="locations" :model="model" :page="homePageComponent" />
+        <model-tab v-if="currentTab === 'locations'" :context="context" type="locations" :page="homePageComponent" />
       </f7-tab>
       <f7-tab id="tab-equipment" :tab-active="currentTab === 'equipment'" @tab:show="() => this.currentTab = 'equipment'">
-        <model-tab v-if="currentTab === 'equipment'" :context="context" type="equipment" :model="model" :page="homePageComponent" />
+        <model-tab v-if="currentTab === 'equipment'" :context="context" type="equipment" :page="homePageComponent" />
       </f7-tab>
       <f7-tab id="tab-properties" :tab-active="currentTab === 'properties'" @tab:show="() => this.currentTab = 'properties'">
-        <model-tab v-if="currentTab === 'properties'" :context="context" type="properties" :model="model" :page="homePageComponent" />
+        <model-tab v-if="currentTab === 'properties'" :context="context" type="properties" :page="homePageComponent" />
       </f7-tab>
     </f7-tabs>
   </f7-page>
@@ -101,8 +101,7 @@ export default {
       showPinToHome: false,
       showExitToApp: false,
       currentTab: this.initialTab || 'overview',
-      overviewPageKey: this.$utils.id(),
-      items: []
+      overviewPageKey: this.$utils.id()
     }
   },
   computed: {
@@ -175,7 +174,6 @@ export default {
     },
     onPageAfterIn () {
       if (this.ready) {
-        this.loadModel()
         this.$store.dispatch('startTrackingStates')
       }
     },
@@ -183,12 +181,6 @@ export default {
       this.$store.dispatch('stopTrackingStates')
     },
     onPageInit () {
-      this.$store.subscribe((mutation, state) => {
-        if (mutation.type === 'setSemantics') {
-          this.loadModel()
-        }
-      })
-
       if (window.OHApp) {
         if (window.OHApp.pinToHome) this.showPinToHome = true
         if (window.OHApp.exitToApp) this.showExitToApp = true
diff --git a/bundles/org.openhab.ui/web/src/pages/home/homecards-mixin.js b/bundles/org.openhab.ui/web/src/pages/home/homecards-mixin.js
index ddf87e1261..72796024a1 100644
--- a/bundles/org.openhab.ui/web/src/pages/home/homecards-mixin.js
+++ b/bundles/org.openhab.ui/web/src/pages/home/homecards-mixin.js
@@ -1,181 +1,15 @@
 import cardGroups from './homecards-grouping'
-import { compareItems } from '@/components/widgets/widget-order'
-import { authorize } from '@/js/openhab/auth'
+import { mapState } from 'vuex'
 
 export default {
-  data () {
-    return {
-      model: {},
-      modelReady: false,
-      loopError: null
-    }
-  },
+  computed: mapState({
+    model: state => state.model.semanticModel,
+    modelReady: state => state.model.semanticModel != null,
+    loopError: state => state.model.error
+  }),
   methods: {
     cardGroups (type, page) {
       return cardGroups(this.model, type, page)
-    },
-    compareObjects (o1, o2) {
-      return compareItems(o1.item || o1, o2.item || o2)
-    },
-    buildModelCard (type, source, key, page) {
-      const card = (page && page.slots && page.slots[type] && page.slots[type][0] && page.slots[type][0].slots && page.slots[type][0].slots[key]) ? page.slots[type][0].slots[key][0] : null
-      switch (type) {
-        case 'location':
-          let defaultLocationTitle = source.item.label || source.item.name
-          return Object.assign(source, {
-            key,
-            card,
-            defaultTitle: defaultLocationTitle
-          })
-        case 'equipment':
-          let defaultEquipmentTitle = this.$t(key)
-          return {
-            key,
-            card,
-            defaultTitle: defaultEquipmentTitle,
-            equipment: source
-          }
-        case 'property':
-          let defaultPropertyTitle = this.$t(key)
-          return {
-            key,
-            card,
-            defaultTitle: defaultPropertyTitle,
-            points: source
-          }
-      }
-    },
-    // Recursively builds path in model (sorted array of relations to ancestors, either Equipment or Location) for an item
-    // that has semantics configuration and returns it.
-    // At the same time, adds all items not already processed to the filteredItems property depending on their semantic type.
-    buildPathInModel (item, filteredItems) {
-      if (!item.metadata || !item.metadata.semantics) return
-      if (item.modelPath) return item.modelPath
-      let parent = null
-      if (item.metadata.semantics.config && item.metadata.semantics.config.hasLocation) {
-        parent = (this.items.find((i) => i.name === item.metadata.semantics.config.hasLocation))
-      } else if (item.metadata.semantics.config && item.metadata.semantics.config.isPointOf) {
-        parent = (this.items.find((i) => i.name === item.metadata.semantics.config.isPointOf))
-      } else if (item.metadata.semantics.config && item.metadata.semantics.config.isPartOf) {
-        parent = (this.items.find((i) => i.name === item.metadata.semantics.config.isPartOf))
-      }
-      if (parent && parent.semanticLoopDetector) {
-        this.loopError = `A a loop has been detected in the semantic model: ${parent.name} is both descendant and parent of ${item.name}`
-        throw this.loopError
-      }
-      item.semanticLoopDetector = true
-      item.modelPath = parent ? [...(this.buildPathInModel(parent, filteredItems)), parent] : []
-      delete item.semanticLoopDetector
-      item.parent = parent
-      item.children = []
-      item.locations = []
-      item.points = []
-      item.properties = []
-      item.equipment = []
-      item.equipmentOrPoints = []
-
-      if (parent) parent.children.push(item)
-
-      if (item.metadata.semantics.value.startsWith('Location')) {
-        if (parent) parent.locations.push(item)
-        filteredItems.locations.push(item)
-      }
-
-      if (item.metadata.semantics.value.startsWith('Point')) {
-        if (parent) {
-          parent.points.push(item)
-          parent.equipmentOrPoints.push(item)
-        }
-      }
-
-      if (item.metadata.semantics.config && item.metadata.semantics.config.relatesTo) {
-        if (parent) parent.properties.push(item)
-        filteredItems.properties.push(item)
-      }
-
-      if (item.metadata.semantics.value.startsWith('Equipment')) {
-        if (parent) {
-          parent.equipment.push(item)
-          parent.equipmentOrPoints.push(item)
-        }
-        filteredItems.equipment.push(item)
-      }
-
-      return item.modelPath
-    },
-    sortModel (item) {
-      item.children = item.children.sort(compareItems)
-      item.locations = item.locations.sort(compareItems)
-      item.points = item.points.sort(compareItems)
-      item.properties = item.properties.sort(compareItems)
-      item.equipment = item.equipment.sort(compareItems)
-      item.equipmentOrPoints = item.equipmentOrPoints.sort(compareItems)
-
-      item.children.forEach(child => this.sortModel(child))
-    },
-    loadModel (page) {
-      console.debug('Loading semantic model and building semantic homepages ...')
-      this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=semantics,listWidget,widgetOrder')
-        .then((data) => {
-          this.items = data
-          let filteredItems = {
-            equipment: [],
-            properties: [],
-            locations: []
-          }
-
-          // build model path for all model items
-          data.forEach((item) => {
-            if (item.metadata && item.metadata.semantics) this.buildPathInModel(item, filteredItems)
-          })
-
-          // Sort each semantic model item children arrays (start at top-level nodes)
-          data.filter((item) => item.modelPath && item.modelPath.length === 0)
-            .forEach((item) => this.sortModel(item))
-
-          // get the location items
-          const locations = filteredItems.locations.sort(this.compareObjects).map((l) => {
-            return {
-              item: l,
-              properties: l.points,
-              equipment: l.equipment.map((item) => {
-                return {
-                  item: item,
-                  points: item.points,
-                  equipment: item.equipment
-                }
-              })
-            }
-          })
-
-          // get the equipment items
-          const equipment = filteredItems.equipment.sort(this.compareObjects).reduce((prev, item, i, properties) => {
-            const equipmentType = item.metadata.semantics.value.substring(item.metadata.semantics.value.lastIndexOf('_')).replace('_', '')
-            if (!prev[equipmentType]) prev[equipmentType] = []
-            prev[equipmentType].push(item)
-            return prev
-          }, {})
-
-          // get the property items
-          const properties = filteredItems.properties.sort(this.compareObjects).reduce((prev, item, i, properties) => {
-            const property = item.metadata.semantics.config.relatesTo.split('_')[1]
-            if (!prev[property]) prev[property] = []
-            prev[property].push(item)
-            return prev
-          }, {})
-
-          this.model.locations = locations.map(l => this.buildModelCard('location', l, l.item.name, page))
-          this.model.equipment = Object.keys(equipment).sort((a, b) => this.$t(a).localeCompare(this.$t(b))).map(k => this.buildModelCard('equipment', equipment[k], k, page))
-          this.model.properties = Object.keys(properties).sort((a, b) => this.$t(a).localeCompare(this.$t(b))).map(k => this.buildModelCard('property', properties[k], k, page))
-          this.modelReady = true
-          console.debug('Successfully loaded semantic model and build semantic homepages.')
-        })
-        .catch((err) => {
-          console.log('Error while loading model: ' + err)
-          if (err === 'Unauthorized' || err === 401) {
-            authorize()
-          }
-        })
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/pages/home/model-tab.vue b/bundles/org.openhab.ui/web/src/pages/home/model-tab.vue
index 54641e588e..89240fa027 100644
--- a/bundles/org.openhab.ui/web/src/pages/home/model-tab.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home/model-tab.vue
@@ -81,19 +81,20 @@ import cardGroups from './homecards-grouping'
 import LocationCard from '../../components/cards/location-card.vue'
 import EquipmentCard from '../../components/cards/equipment-card.vue'
 import PropertyCard from '../../components/cards/property-card.vue'
+import { mapState } from 'vuex'
 
 export default {
-  props: ['type', 'model', 'page'],
+  props: ['type', 'page'],
   components: {
     LocationCard,
     EquipmentCard,
     PropertyCard
   },
-  computed: {
-    groups () {
-      return cardGroups(this.model, this.type, this.page)
+  computed: mapState({
+    groups (state) {
+      return cardGroups(state.model.semanticModel, this.type, this.page)
     }
-  },
+  }),
   methods: {
     isCardExcluded (card) {
       if (!card.key) return
diff --git a/bundles/org.openhab.ui/web/src/pages/page/page-view.vue b/bundles/org.openhab.ui/web/src/pages/page/page-view.vue
index 4546a372ec..42d4cd647e 100644
--- a/bundles/org.openhab.ui/web/src/pages/page/page-view.vue
+++ b/bundles/org.openhab.ui/web/src/pages/page/page-view.vue
@@ -57,7 +57,10 @@ export default {
     'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     'oh-map-page': () => import(/* webpackChunkName: "map-page" */ '@/components/widgets/map/oh-map-page.vue'),
     'oh-plan-page': () => import(/* webpackChunkName: "plan-page" */ '@/components/widgets/plan/oh-plan-page.vue'),
-    'oh-chart-page': () => import(/* webpackChunkName: "chart-page" */ '@/components/widgets/chart/oh-chart-page.vue')
+    'oh-chart-page': () => import(/* webpackChunkName: "chart-page" */ '@/components/widgets/chart/oh-chart-page.vue'),
+    'oh-locations-tab': () => import('@/components/tabs/locations-tab.vue'),
+    'oh-equipment-tab': () => import('@/components/tabs/equipment-tab.vue'),
+    'oh-properties-tab': () => import('@/components/tabs/properties-tab.vue')
   },
   props: ['uid', 'initialTab', 'deep', 'defineVars'],
   data () {
@@ -146,16 +149,29 @@ export default {
       this.$store.dispatch('sendCommand', { itemName, command })
     },
     tabContext (tab) {
-      const page = this.$store.getters.page(tab.config.page.replace('page:', ''))
-      return {
+      const page = tab.config.page ? this.$store.getters.page(tab.config.page.replace('page:', '')) : tab.component
+      const context = {
         component: page,
         tab: tab,
         vars: this.vars,
         props: tab.config.pageConfig,
         store: this.$store.getters.trackedItems
       }
+      // mock some slots so that it works with current homecard-grouping implementation
+      if (tab.component === 'oh-locations-tab') {
+        context.slots = { locations: [tab] }
+      } else if (tab.component === 'oh-equipment-tab') {
+        context.slots = { equipment: [tab] }
+      } else if (tab.component === 'oh-properties-tab') {
+        context.slots = { properties: [tab] }
+      }
+      return context
     },
     tabComponent (tab) {
+      if (tab.component === 'oh-locations-tab' || tab.component === 'oh-equipment-tab' || tab.component === 'oh-properties-tab') {
+        return tab.component
+      }
+
       const page = this.$store.getters.page(tab.config.page.replace('page:', ''))
       return page.component
     },
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
index 51b4b072dc..92b33689fa 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/home/home-edit.vue
@@ -116,7 +116,7 @@
         </div>
 
         <div v-else :context="context" :key="pageKey">
-          <model-tab style="margin-bottom: 4rem" :context="context" :type="currentModelTab" :model="model" :page="page" />
+          <model-tab style="margin-bottom: 4rem" :context="context" :type="currentModelTab" :page="page" />
         </div>
       </f7-tab>
 
@@ -124,7 +124,7 @@
         <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml;type=home" :value="pageYaml" @input="onEditorInput" />
         <!-- <pre class="yaml-message padding-horizontal" :class="[yamlError === 'OK' ? 'text-color-green' : 'text-color-red']">{{yamlError}}</pre> -->
         <div v-if="ready && previewMode" :context="context" :key="pageKey">
-          <model-tab style="margin-bottom: 4rem" :context="context" :type="currentModelTab" :model="model" :page="page" />
+          <model-tab style="margin-bottom: 4rem" :context="context" :type="currentModelTab" :page="page" />
         </div>
       </f7-tab>
     </f7-tabs>
@@ -206,7 +206,6 @@ export default {
           { value: 'equipment', label: this.$t('home.equipment.tab') },
           { value: 'properties', label: this.$t('home.properties.tab') }
         ])
-        this.loadModel(this.page)
       }
     }
   },