diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
index 99cca105d3..480d47c32b 100644
--- a/bundles/org.openhab.ui/web/package.json
+++ b/bundles/org.openhab.ui/web/package.json
@@ -88,6 +88,7 @@
     "vue": "^2.6.12",
     "vue-async-computed": "^3.9.0",
     "vue-codemirror": "^4.0.6",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-echarts": "^4.1.0",
     "vue-fragment": "^1.5.1",
     "vue-fullscreen": "^2.2.0",
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
index 992c16d3d0..0b21a03c1f 100644
--- a/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
+++ b/bundles/org.openhab.ui/web/src/assets/definitions/widgets/layout/index.js
@@ -67,3 +67,31 @@ export function OhGridLayoutDefinition () {
       pb('showFullscreenIcon', 'Show Fullscreen Icon', 'Show a fullscreen icon on the top right corner (default false)')
     ])
 }
+
+export function OhPlanItemDefinition () {
+  return new WidgetDefinition('oh-plan-item', 'Plan Item', 'Specific attributes to display widgets on a plan.')
+    .paramGroup(pg('appearance', 'Layout Settings'), [
+      pb('notStyled', 'Preserve classic style', 'Preserve classic appearance of widgets as in standard layout pages.'),
+      pb('noPlanShadow', 'No elements shadow', 'Do not shadow inner elements of standard widgets')
+        .v((value, configuration, configDescription, parameters) => { return configuration.notStyled !== true })
+    ])
+}
+
+export function OhPlanLayoutDefinition () {
+  return new WidgetDefinition('oh-plan-layout', 'Plan Layout', 'Position widgets on a plan layout with arbitrary position and size down to pixel resolution')
+    .paramGroup(pg('layout', 'Layout Settings'), [
+      pn('grid', 'Grid size', 'Grid size in pixels used to snap content (default 5)')
+    ])
+    .paramGroup(pg('screenSettings', 'Screen Settings'), [
+      pn('screenWidth', 'Screen Width', 'Screen width in pixels (default 1280)'),
+      pn('screenHeight', 'Screen Height', 'Screen width in pixels (default 720)'),
+      pb('scale', 'Scaling', 'Scale content to screen width (can lead to unexpected styling issues) (default false)'),
+      pt('imageUrl', 'Image URL', 'The URL of the image to display as background').c('url'),
+      pt('imageSrcSet', 'Image Source Set', 'The src-set attribute of background image element to take into account mulitple device resolutions. For example: "/static/floorplans/floor-0.jpg, /static/floorplans/floor-0@2x.jpg 2x"')
+    ])
+    .paramGroup(pg('shadow', 'Plan items shadow'), [
+      pt('boxShadow', 'Box shadow', 'Shadow applied to box elements (box-shadow CSS syntax).').a(),
+      pt('textShadow', 'Text shadow', 'Shadow applied to text elements or font icons (text-shadow CSS syntax)').a(),
+      pt('filterShadow', 'Fitler Shadow', 'Shadow applied to raster or SVG image elements (filter: drop-shadow() CSS syntax)').a()
+    ])
+}
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
index 2bb41c8df0..e5fd5ff0b3 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/index.js
@@ -6,3 +6,5 @@ export { default as OhGridCol } from './oh-grid-col.vue'
 export { default as OhGridCells } from './oh-grid-cells.vue'
 export { default as OhMasonry } from './oh-masonry.vue'
 export { default as OhGridLayout } from './oh-grid-layout.vue'
+export { default as OhPlanLayout } from './oh-plan-layout.vue'
+export { default as OhPlanItem } from './oh-plan-item.vue'
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
index b6e8e52072..802cd9168c 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-layout-page.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <template v-if="config.layoutType !== 'fixed'">
+    <template v-if="config.layoutType === 'responsive'">
       <oh-block v-for="(component, idx) in context.component.slots.default"
                 :key="idx"
                 :context="childContext(component)"
@@ -30,27 +30,31 @@
         </f7-block>
       </template>
     </template>
-    <template v-else>
+    <template v-else-if="config.layoutType === 'fixed'">
       <oh-grid-layout :context="context" />
     </template>
+    <template v-else-if="config.layoutType === 'plan'">
+      <oh-plan-layout :context="context" />
+    </template>
   </div>
 </template>
 
-<style lang="stylus">
-</style>
+<style lang="stylus"></style>
 
 <script>
 import mixin from '../widget-mixin'
 import OhBlock from './oh-block.vue'
 import OhMasonry from './oh-masonry.vue'
 import OhGridLayout from './oh-grid-layout.vue'
+import OhPlanLayout from './oh-plan-layout.vue'
 
 export default {
   mixins: [mixin],
   components: {
     OhBlock,
     OhMasonry,
-    OhGridLayout
+    OhGridLayout,
+    OhPlanLayout
   }
 }
 </script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-plan-item.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-plan-item.vue
new file mode 100644
index 0000000000..7d8118166f
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-plan-item.vue
@@ -0,0 +1,223 @@
+<template>
+  <vue-draggable-resizable
+    :id="'oh-plan-item-vdr-' +id"
+    :key="reloadKey"
+    :x="x"
+    :y="y"
+    :w="w"
+    :h="h"
+    :parent="true"
+    :draggable="!!context.editmode"
+    :resizable="!!context.editmode && !autosize"
+    :class-name="!!context.editmode ? 'oh-plan-item-editmode' : 'oh-plan-item-runmode'"
+    :grid="gridEnable ? [gridPitch,gridPitch] : undefined"
+    v-if="visible" class="oh-plan-item no-margin"
+    @dragging="onDrag"
+    @resizing="onResize"
+    :on-drag-start="onDragStartCallback"
+    :on-resize-start="onResizeStartCallback">
+    <f7-menu v-if="context.editmode" class="configure-plan-menu">
+      <f7-menu-item icon-f7="menu" dropdown icon-only>
+        <f7-menu-dropdown right>
+          <f7-menu-dropdown-item @click="context.editmode.configureWidget(context.component, context.parent)" href="#" text="Configure container" />
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="context.editmode.configureWidget(context.component.slots.default[0], context)" href="#" text="Configure Widget" />
+          <f7-menu-dropdown-item @click="context.editmode.editWidgetCode(context.component, context.parent)" href="#" text="Edit YAML" />
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="toggleAutoSize()" href="#">
+            <span>Auto Size</span>
+            <f7-icon class="margin-left" :f7="autosize ? 'checkmark_square' : 'square'" />
+          </f7-menu-dropdown-item>
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" @click="toggleShadow()" href="#">
+            <span>Shadow</span>
+            <f7-icon class="margin-left" :f7="shadow ? 'checkmark_square' : 'square'" />
+          </f7-menu-dropdown-item>
+          <f7-menu-dropdown-item v-if="context.component.slots.default.length > 0" divider />
+          <f7-menu-dropdown-item @click="context.editmode.copyWidget(context.component, context.parent)" href="#" text="Copy" />
+          <f7-menu-dropdown-item divider />
+          <f7-menu-dropdown-item @click="context.editmode.bringWidgetToFront(context.component, context.parent, 'plan')" href="#" text="Bring to Front" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetDown(context.component, context.parent, 'plan')" href="#" text="Move Up" />
+          <f7-menu-dropdown-item @click="context.editmode.moveWidgetUp(context.component, context.parent, 'plan')" href="#" text="Move Down" />
+          <f7-menu-dropdown-item @click="context.editmode.sendWidgetToBack(context.component, context.parent, 'plan')" href="#" text="Send to Back" />
+          <f7-menu-dropdown-item divider />
+          <f7-menu-dropdown-item @click="context.editmode.removeWidget(context.component, context.parent, 'plan')" href="#" text="Remove Item" />
+        </f7-menu-dropdown>
+      </f7-menu-item>
+    </f7-menu>
+
+    <oh-placeholder-widget v-if="context.editmode && !context.component.slots.default.length" @click="context.editmode.addWidget(context.component, null, context.parent)" class="oh-plan-item-content" />
+    <generic-widget-component v-else-if="context.component.slots.default.length" :context="childContext(context.component.slots.default[0])" @command="onCommand" class="oh-plan-item-content"
+                              :class="{
+                                'oh-plan-item-styled' : styled,
+                                'oh-plan-item-shadow' : styled && shadow
+                              }" />
+
+    <f7-icon v-if="context.editmode" class="drag-handle" f7="move" size="15" color="gray" />
+  </vue-draggable-resizable>
+</template>
+
+<style lang="stylus">
+  .oh-plan-item-editmode
+    outline 1px dashed #F00
+
+  .oh-plan-item
+    position: absolute
+
+    .oh-plan-item-content
+      width 100%
+      height 100%
+      margin 0
+
+    .oh-plan-item-styled        // override background obscuring styles from system widgets
+      &.card                    // apply to card items
+        box-shadow: none
+        background: none
+        .card-content, .card-footer
+          .segmented, .stepper, .toggle
+            background: var(--f7-card-bg-color);
+
+    .oh-plan-item-shadow        // shadow tuned to various card widgets
+      &.card                    // apply to card items
+        .card-content, .card-footer
+          .segmented, .stepper, .toggle
+            box-shadow:  var(--oh-plan-item-box-shadow)
+          .oh-slider
+            .range-bar, .range-knob, .range-knob-label
+              box-shadow:  var(--oh-plan-item-box-shadow)
+          img, svg
+            filter: var(--oh-plan-item-svg-shadow)
+        .label-card-content
+          text-shadow: var(--oh-plan-item-text-shadow)
+
+    .placeholder-widget a
+      height: 100%
+      padding: 0
+      display: flex
+
+    .drag-handle                // show drag handle on upper left corner
+      position: absolute !important
+      top: 0px
+      left: 0px
+      padding: 2px
+      z-index: 1000
+
+    .configure-plan-menu        // show menu icon on upper right corner
+      position: absolute
+      top: 2px
+      right: 2px
+      .menu-inner
+        padding: 0px
+      .menu-inner:after
+        width: 0px
+ </style>
+
+<script>
+import mixin from '../widget-mixin'
+import VueDraggableResizable from 'vue-draggable-resizable'
+import OhPlaceholderWidget from '../layout/oh-placeholder-widget.vue'
+import { OhPlanItemDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhPlanItemDefinition,
+  components: {
+    VueDraggableResizable,
+    OhPlaceholderWidget
+  },
+  props: {
+    gridPitch: Number,
+    gridEnable: Boolean,
+    id: String
+  },
+  data () {
+    return {
+      x: 0,
+      y: 0,
+      w: 0,
+      h: 0,
+      reloadKey: 0,
+      shadow: true,
+      styled: true
+    }
+  },
+  created () {
+    this.x = this.config.x || 20
+    this.y = this.config.y || 20
+    this.w = this.config.w || 100
+    this.h = this.config.h || 100
+    this.shadow = !this.config.noPlanShadow
+    this.styled = !this.config.notStyled
+  },
+  computed: {
+    autosize () {
+      return this.w === 'auto'
+    }
+  },
+  methods: {
+    toggleAutoSize () {
+      if (this.w === 'auto') {
+        const elem = document.getElementById('oh-plan-item-vdr-' + this.id)
+        this.w = this.context.component.config.w = elem.clientWidth
+        this.h = this.context.component.config.h = elem.clientHeight
+      } else {
+        this.w = this.context.component.config.w = 'auto'
+        this.h = this.context.component.config.h = 'auto'
+        this.reloadKey += 1
+      }
+    },
+    toggleShadow () {
+      this.shadow = !this.shadow
+      this.context.component.config.noPlanShadow = !this.shadow
+    },
+    onResize: function (x, y, width, height) {
+      this.x = this.context.component.config.x = x
+      this.y = this.context.component.config.y = y
+      this.w = this.context.component.config.w = width
+      this.h = this.context.component.config.h = height
+    },
+    onDrag: function (x, y) {
+      this.x = this.context.component.config.x = x
+      this.y = this.context.component.config.y = y
+    },
+    onResizeStartCallback (ev) {
+      if (this.w === 'auto' || this.h === 'auto') {
+        return false
+      }
+
+      const posOK = this.onDragStartCallback(ev)
+      if (this.gridEnable) {
+        const snapW = Math.round(this.w / this.gridPitch) * this.gridPitch
+        const snapH = Math.round(this.h / this.gridPitch) * this.gridPitch
+
+        if (this.w === snapW && this.h === snapH) {
+          // Widget already on grid, can continue to resize
+          return true && posOK
+        } else {
+          // Widget was not on grid, snap to grid upon first action
+          this.w = this.context.component.config.w = snapW
+          this.h = this.context.component.config.h = snapH
+          return false
+        }
+      } else {
+        return true
+      }
+    },
+    onDragStartCallback (ev) {
+      if (this.gridEnable) {
+        const snapX = Math.round(this.x / this.gridPitch) * this.gridPitch
+        const snapY = Math.round(this.y / this.gridPitch) * this.gridPitch
+
+        if (this.x === snapX && this.y === snapY) {
+          // Origin on grid, continue dragging action
+          return true
+        } else {
+          // First snap to grid component and stop action
+          this.x = this.context.component.config.x = snapX
+          this.y = this.context.component.config.y = snapY
+          return false
+        }
+      } else {
+        return true
+      }
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-plan-layout.vue b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-plan-layout.vue
new file mode 100644
index 0000000000..fde95f55f3
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/widgets/layout/oh-plan-layout.vue
@@ -0,0 +1,166 @@
+<template>
+  <div ref="ohPlanLayout" class="oh-plan-layout margin-top">
+    <f7-block v-if="context.editmode">
+      <f7-menu class="configure-layout-menu">
+        <f7-menu-item @click="addItem" icon="margin-left" icon-f7="plus" text="Add Item  " />
+        <f7-menu-item v-if="context.clipboardtype" @click="context.editmode.pasteWidget(context.component, context.component.parent, 'plan')" icon-f7="square_on_square" />
+        <f7-menu-item @click="grid.enable = !grid.enable" text="Snap to grid" icon="margin-left" :icon-f7="grid.enable ? 'checkmark_square' : 'square'" style="margin-left: auto" />
+        <f7-menu-item @click="context.editmode.configureWidget(context.component, context.parent, 'oh-plan-layout')" text="Configure Plan Layout" />
+      </f7-menu>
+      <hr>
+    </f7-block>
+    <div ref="planLayoutContainer" class="oh-plan-layout-container"
+         :style="{
+           background: context.editmode ? 'var(--f7-page-master-border-color)' : false,
+           width: style.width + 'px',
+           height: style.height + 'px',
+           transform: `scale(${style.scale})`,
+           textAlign: 'center',
+           position: 'relative',
+           '--oh-plan-item-box-shadow': config.boxShadow ? config.boxShadow : '0px 0px 4px 2px #444',
+           '--oh-plan-item-svg-shadow': config.filterShadow ? config.filterShadow : 'drop-shadow(0px 0px 4px #444)',
+           '--oh-plan-item-text-shadow': config.textShadow ? config.textShadow : '#444 0px 0px 4px'
+         }">
+      <div style="height: inherit; width: inherit; position: absolute; top: 0; left: 0">
+        <img class="oh-plan-background" :src="config.imageUrl" :srcset="config.imageSrcSet">
+      </div>
+      <!-- Grid lines -->
+      <div :style="{
+        height: 'inherit',
+        width: 'inherit',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        backgroundImage: 'linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px)',
+        backgroundSize: `${grid.pitch}px ${grid.pitch}px, ${grid.pitch}px ${grid.pitch}px`,
+        visibility: context.editmode && grid.enable ? 'inherit' : 'hidden'
+      }" />
+      <f7-button v-if="!context.editmode" @click="toggleFullscreen" class="fullscreen-icon" :icon-f7=" fullscreen ? 'arrow_down_right_arrow_up_left' : 'arrow_up_left_arrow_down_right'" />
+      <div v-if="context.editmode" style="opacity: 0.3; padding: 4px; user-select: none; position: absolute; width: 100%">
+        {{ getCurrentScreenResolution() }}
+        <span v-if="isRetina()"><f7-icon tooltip="Screen resolution shown is the fullscreen resolution for websites. Real screen resolution is bigger." f7="info_circle" /></span>
+      </div>
+      <oh-plan-item
+        v-for="obj in layout"
+        :key="obj.id"
+        :id="obj.id"
+        :gridEnable="grid.enable"
+        :gridPitch="grid.pitch"
+        :context="childContext(obj.item)" />
+    </div>
+  </div>
+</template>
+
+<style lang="stylus">
+.oh-plan-layout
+  overflow visible      // prevent widget menus from scrolling page
+  .oh-plan-layout-container
+    margin auto                                             // center layout when smaller than current screen
+    background-color var(--f7-page-bg-color)                // theme bg (for fullscreen)
+    transform-origin top
+  .oh-plan-background
+    height 100%
+    width 100%
+    object-fit contain
+  .fullscreen-icon
+    position absolute
+    top 2px
+    right 2px
+    z-index 1000
+</style>
+
+<script>
+import mixin from '../widget-mixin'
+import OhPlanItem from './oh-plan-item'
+import { OhPlanLayoutDefinition } from '@/assets/definitions/widgets/layout'
+
+export default {
+  mixins: [mixin],
+  widget: OhPlanLayoutDefinition,
+  components: {
+    OhPlanItem: OhPlanItem
+  },
+  data () {
+    return {
+      layout: [],
+      screenWidth: Number,
+      screenHeight: Number,
+      fullscreen: this.$fullscreen.getState(),
+      navbarHidden: false,
+      style: {
+        width: Number,
+        height: Number,
+        scale: 1.0
+      },
+      grid: {
+        pitch: Number,
+        enable: false
+      }
+    }
+  },
+  created () {
+    if (this.config.layoutType === 'plan') {
+      this.style.width = this.screenWidth = this.config.screenWidth || 1280
+      this.style.height = this.screenHeight = this.config.screenHeight || 720
+      this.grid.pitch = this.config.grid || 5
+      this.grid.enable = this.config.gridEnable || false
+
+      if (!this.context.editmode) {
+        window.addEventListener('resize', this.setDimensions)
+      }
+    }
+
+    this.planLayoutStyle()
+    this.computeLayout()
+  },
+  mounted () {
+    // Chrome reports a wrong size in fullscreen, store initial resolution and use non-dynamically.
+    this.windowWidth = window.screen.width
+    this.windowHeight = window.screen.height
+  },
+  methods: {
+    isRetina () {
+      return window.devicePixelRatio > 1
+    },
+    getCurrentScreenResolution () {
+      return 'Layout Size: ' + this.screenWidth + ' x ' + this.screenHeight + ' (Current Screen: ' + this.windowWidth + ' x ' + this.windowHeight + ')'
+    },
+    addItem () {
+      this.context.component.slots['plan'].push({
+        component: 'oh-plan-item',
+        config: { x: 20, y: 20, h: 150, w: 200 },
+        slots: { default: [] }
+      })
+      this.computeLayout()
+    },
+    toggleFullscreen () {
+      this.$fullscreen.toggle(this.$refs.ohPlanLayout, {
+        wrap: false,
+        callback: (fullscreen) => {
+          this.planLayoutStyle()
+          this.fullscreen = fullscreen
+        }
+      })
+    },
+    planLayoutStyle: function () {
+      if (this.config.scale && !this.context.editmode) {
+        this.style.scale = parent.innerWidth / this.screenWidth
+      } else {
+        this.style.scale = 1.0
+      }
+    },
+    computeLayout () {
+      let layout = []
+      if (this.context.component.slots?.plan) {
+        this.context.component.slots.plan.forEach((item) => {
+          layout.push({
+            item: item,
+            id: Math.random().toString(36).substring(2)
+          })
+        })
+      }
+      this.layout = layout
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/js/app.js b/bundles/org.openhab.ui/web/src/js/app.js
index 8d2306d17b..67e59f5a67 100644
--- a/bundles/org.openhab.ui/web/src/js/app.js
+++ b/bundles/org.openhab.ui/web/src/js/app.js
@@ -58,6 +58,11 @@ Vue.use(Trend)
 // Import Fulscreen Plugin
 import fullscreen from 'vue-fullscreen'
 Vue.use(fullscreen)
+// Import Vue Draggable Resizable
+import VueDraggableResizable from 'vue-draggable-resizable'
+// optionally import default styles
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
+Vue.component('vue-draggable-resizable', VueDraggableResizable)
 
 // Extend prototype with the openHAB API interface
 Vue.prototype.$oh = openhab
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
index 74c5949f15..cef0278f7b 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/layout/layout-edit.vue
@@ -36,13 +36,14 @@
                     !(context.component.slots.default && context.component.slots.default.length) &&
                     !(context.component.slots.masonry && context.component.slots.masonry.length) &&
                     !(context.component.slots.grid && context.component.slots.grid.length) &&
-                    !['responsive', 'fixed'].includes(page.config.layoutType)"
+                    !(context.component.slots.plan && context.component.slots.plan.length) &&
+                    !['responsive', 'fixed', 'plan'].includes(page.config.layoutType)"
                   class="block-narrow margin-bottom" inset>
           <f7-block-title class="margin text-align-center">
             Choose a layout style
           </f7-block-title>
           <f7-row class="text-align-center align-items-stretch">
-            <f7-col width="50" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
+            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
               <f7-link @click="setLayoutType('responsive')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
                 <f7-icon size="70px" f7="rectangle_3_offgrid" />
                 <div class="margin-bottom">
@@ -53,7 +54,7 @@
                 </div>
               </f7-link>
             </f7-col>
-            <f7-col width="50" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
+            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
               <f7-link @click="setLayoutType('fixed')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
                 <f7-icon size="70px" f7="grid" />
                 <div class="margin-bottom">
@@ -64,13 +65,25 @@
                 </div>
               </f7-link>
             </f7-col>
+            <f7-col width="30" class="elevation-2 elevation-hover-6 elevation-pressed-1" style="background-color: var(--f7-card-bg-color)">
+              <f7-link @click="setLayoutType('plan')" class="flex-direction-column padding" style="color: var(--f7-theme-color-text-color)">
+                <f7-icon size="70px" f7="square_stack_3d_up" />
+                <div class="margin-bottom">
+                  Floorplan
+                </div>
+                <div class="margin-top">
+                  Create a plan-like page for a specific screen size, with pixel positionning of widgets. Suitable for e.g. wall mounted tablets.
+                </div>
+              </f7-link>
+            </f7-col>
           </f7-row>
         </f7-block>
 
         <oh-layout-page class="layout-page" v-else-if="ready" :context="context" :key="pageKey" :style="page.config.style"
                         @add-block="addBlock"
                         @add-masonry="addMasonry"
-                        @add-grid-item="addGridItem" />
+                        @add-grid-item="addGridItem"
+                        @add-plan-item="addPlanItem" />
       </f7-tab>
       <f7-tab id="code" @tab:show="() => { this.currentTab = 'code' }" :tab-active="currentTab === 'code'">
         <editor v-if="currentTab === 'code'" :style="{ opacity: previewMode ? '0' : '' }" class="page-code-editor" mode="application/vnd.openhab.uicomponent+yaml?type=layout" :value="pageYaml" @input="onEditorInput" />
@@ -148,7 +161,8 @@ export default {
         config: {},
         slots: {
           default: [],
-          grid: []
+          grid: [],
+          plan: []
         }
       },
       addFromModelContext: {},
@@ -277,8 +291,10 @@ export default {
       this.page.config.layoutType = layoutType
       if (layoutType === 'responsive') {
         this.page.slots.default = []
-      } else {
+      } else if (layoutType === 'fixed') {
         this.page.slots.grid = []
+      } else {
+        this.page.slots.plan = []
       }
       this.forceUpdate()
     },
@@ -300,7 +316,13 @@ export default {
     addGridItem (component) {
       component.slots['grid'].push({
         component: 'oh-grid-item',
-        config: { x: 5, y: 3, h: 2, w: 2 },
+        config: { x: 5, y: 3, h: 2, w: 2 }
+      })
+    },
+    addPlanItem (component) {
+      component.slots['plan'].push({
+        component: 'oh-plan-item',
+        config: { x: 10, y: 10, h: 50, w: 50 },
         slots: { default: [] }
       })
       this.forceUpdate()
@@ -316,21 +338,24 @@ export default {
         config: this.page.config,
         blocks: this.page.slots.default,
         masonry: this.page.slots.masonry,
-        grid: this.page.slots.grid
+        grid: this.page.slots.grid,
+        plan: this.page.slots.plan
       })
     },
     fromYaml () {
       try {
         const updatedPage = YAML.parse(this.pageYaml)
-        if (updatedPage.config && updatedPage.config.layoutType && updatedPage.config.layoutType === 'fixed' &&
+        if (updatedPage.config && updatedPage.config.layoutType &&
+            (updatedPage.config.layoutType === 'fixed' || updatedPage.config.layoutType === 'plan') &&
            ((updatedPage.blocks && updatedPage.blocks.length) || (updatedPage.masonry && updatedPage.masonry.length))) {
-          throw new Error('Using blocks and masonry in fixed-size layouts is not possible')
+          throw new Error('Using blocks and masonry in fixed-size or plan layouts is not possible')
         }
 
         this.$set(this.page, 'config', updatedPage.config)
         this.$set(this.page.slots, 'default', updatedPage.blocks)
         this.$set(this.page.slots, 'masonry', updatedPage.masonry)
         this.$set(this.page.slots, 'grid', updatedPage.grid)
+        this.$set(this.page.slots, 'plan', updatedPage.plan)
         this.forceUpdate()
         return true
       } catch (e) {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
index e935277f08..96b43e54cb 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/pagedesigner-mixin.js
@@ -43,6 +43,8 @@ export default {
           pasteWidget: this.pasteWidget,
           moveWidgetUp: this.moveWidgetUp,
           moveWidgetDown: this.moveWidgetDown,
+          sendWidgetToBack: this.sendWidgetToBack,
+          bringWidgetToFront: this.bringWidgetToFront,
           removeWidget: this.removeWidget
         } : null,
         clipboardtype: this.clipboardType
@@ -285,18 +287,25 @@ export default {
     },
     moveWidgetUp (component, parentContext, slot = 'default') {
       let siblings = parentContext.component.slots[slot]
-      let pos = siblings.indexOf(component)
-      if (pos <= 0) return
-      siblings.splice(pos, 1)
-      siblings.splice(pos - 1, 0, component)
-      this.forceUpdate()
+      this.moveWidget(component, parentContext, slot, siblings.indexOf(component) - 1)
     },
     moveWidgetDown (component, parentContext, slot = 'default') {
+      let siblings = parentContext.component.slots[slot]
+      this.moveWidget(component, parentContext, slot, siblings.indexOf(component) + 1)
+    },
+    bringWidgetToFront (component, parentContext, slot = 'default') {
+      this.moveWidget(component, parentContext, slot, parentContext.component.slots[slot].length)
+    },
+    sendWidgetToBack (component, parentContext, slot = 'default') {
+      this.moveWidget(component, parentContext, slot, 0)
+    },
+    moveWidget (component, parentContext, slot = 'default', newPos) {
       let siblings = parentContext.component.slots[slot]
       let pos = siblings.indexOf(component)
-      if (pos >= siblings.length - 1) return
+      newPos = Math.max(0, Math.min(siblings.length, newPos))
+      if (pos === newPos) return
       siblings.splice(pos, 1)
-      siblings.splice(pos + 1, 0, component)
+      siblings.splice(newPos, 0, component)
       this.forceUpdate()
     },
     removeWidget (component, parentContext, slot = 'default') {