diff --git a/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley b/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
index 792ea9ae2e..387e7e8aa2 100644
--- a/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
+++ b/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
@@ -9,18 +9,21 @@
     item:             'item=',
     staticIcon:       'staticIcon=',
     icon:             'icon=',
-    widgetattr:       ['url=', 'refresh=', 'service=', 'height=', 'minValue=', 'maxValue=', 'step=', 'encoding=', 'yAxisDecimalPattern=', 'inputHint=', 'columns='],
+    widgetattr:       ['url=', 'refresh=', 'service=', 'height=', 'minValue=', 'maxValue=', 'step=', 'encoding=', 'yAxisDecimalPattern=', 'inputHint=', 'columns=', 'row=', 'column='],
     widgetboolattr:   ['legend='],
     widgetfrcitmattr: 'forceasitem=',
     widgetmapattr:    'mappings=',
-    widgetbuttonattr: 'buttons=',
+    widgetbuttonsattr:'buttons=',
     widgetvisiattr:   'visibility=',
     widgetcolorattr:  ['labelcolor=', 'valuecolor=', 'iconcolor='],
     widgetswitchattr: 'switchSupport',
     widgetronlyattr:  'releaseOnly',
+    widgetstatelattr: 'stateless',
+    widgetclickattr:  'click=',
+    widgetreleaseattr:'release=',
     widgetperiodattr: 'period=',
-    nlwidget:         ['Switch ', 'Selection ', 'Slider ', 'Setpoint ', 'Input ', 'Video ', 'Chart ', 'Webview ', 'Colorpicker ', 'Mapview ', 'Buttongrid ', 'Default '],
-    lwidget:          ['Text ', 'Group ', 'Image ', 'Frame '],
+    nlwidget:         ['Switch ', 'Selection ', 'Slider ', 'Setpoint ', 'Input ', 'Video ', 'Chart ', 'Webview ', 'Colorpicker ', 'Mapview ', 'Button ', 'Default '],
+    lwidget:          ['Text ', 'Group ', 'Image ', 'Frame ', 'Buttongrid '],
     lparen:           '(',
     rparen:           ')',
     lbrace:           '{',
@@ -46,7 +49,7 @@
     number:           /[+-]?[0-9]+(?:\.[0-9]*)?/,
     string:           { match: /"(?:\\["\\]|[^\n"\\])*"/, value: x => x.slice(1, -1) }
   })
-  const requiresItem = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input ', 'Colorpicker', 'Default']
+  const requiresItem = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input ', 'Colorpicker', 'Button', 'Default']
 
   function getSitemap(d) {
     return {
@@ -75,7 +78,7 @@
       }
     }
 
-    // if icon exists remove staticIcon, if not set icon to staticIcon and make saticIcon=true
+    // if icon exists remove staticIcon, if not set icon to staticIcon and make staticIcon=true
     if (widget.config.icon) {
      delete widget.config.staticIcon
     }
@@ -83,12 +86,6 @@
       widget.config.icon = widget.config.staticIcon
       widget.config.staticIcon = true
     }
-
-    // reject widgets with missing parameters
-    if (requiresItem.includes(widget.component) && !widget.config.item) return reject
-    if ((widget.component === 'Video' || widget.component === 'Webview') && !widget.config.url) return reject
-    if (widget.component === 'Chart' && !widget.config.period) return reject
-
     return widget
   }
 %}
@@ -113,9 +110,12 @@ WidgetAttrs -> WidgetAttr
   | WidgetAttrs _ WidgetAttr                                                      {% (d) => d[0].concat([d[2]]) %}
 WidgetAttr -> %widgetswitchattr                                                   {% (d) => ['switchEnabled', true] %}
   | %widgetronlyattr                                                              {% (d) => ['releaseOnly', true] %}
+  | %widgetstatelattr                                                             {% (d) => ['stateless', true] %}
   | %widgetfrcitmattr _ WidgetBooleanAttrValue                                    {% (d) => ['forceAsItem', d[2]] %}
   | %widgetboolattr _ WidgetBooleanAttrValue                                      {% (d) => [d[0].value, d[2]] %}
   | %widgetperiodattr _ WidgetPeriodAttrValue                                     {% (d) => ['period', d[2]] %}
+  | %widgetclickattr _ WidgetAttrValue                                            {% (d) => ['cmd', d[2]] %}
+  | %widgetreleaseattr _ WidgetAttrValue                                          {% (d) => ['releaseCmd', d[2]] %}
   | %icon _ WidgetIconRulesAttrValue                                              {% (d) => ['iconrules', d[2]] %}
   | %icon _ WidgetIconAttrValue                                                   {% (d) => [d[0].value, d[2].join("")] %}
   | %staticIcon _ WidgetIconAttrValue                                             {% (d) => [d[0].value, d[2].join("")] %}
@@ -143,7 +143,7 @@ WidgetAttrValue -> %number
   | %string                                                                       {% (d) => d[0].value %}
 WidgetMappingsAttrName -> %widgetmapattr
 WidgetMappingsAttrValue -> %lbracket _ Mappings _ %rbracket                       {% (d) => d[2] %}
-WidgetButtonsAttrName -> %widgetbuttonattr
+WidgetButtonsAttrName -> %widgetbuttonsattr
 WidgetButtonsAttrValue -> %lbracket _ Buttons _ %rbracket                         {% (d) => d[2] %}
 WidgetVisibilityAttrName -> %widgetvisiattr
 WidgetVisibilityAttrValue -> %lbracket _ Visibilities _ %rbracket                 {% (d) => d[2] %}
@@ -157,9 +157,9 @@ Mapping -> Command _ %colon _ Command _ %equals _ Label
   | Command _ %colon _ Command _ %equals _ Label _ %equals _ WidgetIconAttrValue  {% (d) => d[0] + ':' + d[4] + '=' + d[8] + '=' + d[12].join("") %}
   | Command _ %equals _ Label _ %equals _ WidgetIconAttrValue                     {% (d) => d[0] + '=' + d[4] + '=' + d[8].join("") %}
 
-Buttons -> Button                                                                 {% (d) => [d[0]] %}
-  | Buttons _ %comma _ Button                                                     {% (d) => d[0].concat([d[4]]) %}
-Button -> %number _ %colon _ %number _ %colon _ ButtonValue                       {% (d) => { return { 'row':  parseInt(d[0].value), 'column': parseInt(d[4].value), 'command': d[8] } } %}
+Buttons -> ButtonDef                                                              {% (d) => [d[0]] %}
+  | Buttons _ %comma _ ButtonDef                                                  {% (d) => d[0].concat([d[4]]) %}
+ButtonDef -> %number _ %colon _ %number _ %colon _ ButtonValue                    {% (d) => { return { 'row':  parseInt(d[0].value), 'column': parseInt(d[4].value), 'command': d[8] } } %}
 ButtonValue -> Command _ %equals _ Label                                          {% (d) => d[0] + '=' + d[4] %}
   | Command _ %equals _ Label _ %equals _ WidgetIconAttrValue                     {% (d) => d[0] + '=' + d[4] + '=' + d[8].join("") %}
 
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/dslUtil_jest.spec.js b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/dslUtil_jest.spec.js
index 8560285f3c..4ea8fc80a2 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/dslUtil_jest.spec.js
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/dslUtil_jest.spec.js
@@ -35,8 +35,6 @@ describe('dslUtil', () => {
 
   it('renders a single simple widget correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Switch', {
       item: 'TestItem',
       label: 'Test Switch'
@@ -52,8 +50,6 @@ describe('dslUtil', () => {
 
   it('renders a widget with icon correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Switch', {
       item: 'TestItem',
       label: 'Test Switch',
@@ -70,8 +66,6 @@ describe('dslUtil', () => {
 
   it('renders a widget with static icon correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Switch', {
       item: 'TestItem',
       label: 'Test Switch',
@@ -106,8 +100,6 @@ describe('dslUtil', () => {
 
   it('renders a widget with mappings correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Selection', {
       item: 'Scene_General',
       mappings: [
@@ -125,8 +117,6 @@ describe('dslUtil', () => {
 
   it('renders a Buttongrid widget correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Buttongrid', {
       item: 'Scene_General',
       buttons: [
@@ -142,10 +132,37 @@ describe('dslUtil', () => {
     expect(sitemap[1]).toEqual('    Buttongrid item=Scene_General buttons=[1:1:1=Morning, 1:2:2=Evening, 1:3:10="Cinéma", 2:1:11=TV, 2:2:3="Bed time", 2:3:4=Night=moon]')
   })
 
+  it('renders a Buttongrid with Buttons widget correctly', () => {
+    const component = createSitemapComponent('test', 'Test')
+    const widget = addWidget(component, 'Buttongrid', {
+      label: 'Scenes',
+      staticIcon: true,
+      icon: 'screen'
+    })
+    addWidget(widget, 'Button', {
+      row: 1,
+      column: 1,
+      item: 'Scene_General',
+      label: 'Morning',
+      stateless: true,
+      cmd: 1
+    })
+    addWidget(widget, 'Button', {
+      row: 1,
+      column: 2,
+      item: 'Scene_General',
+      label: 'Cinéma',
+      cmd: '10',
+      releaseCmd: 'test 11'
+    })
+    const sitemap = dslUtil.toDsl(component).split('\n')
+    expect(sitemap[1]).toEqual('    Buttongrid label="Scenes" staticIcon=screen {')
+    expect(sitemap[2]).toEqual('        Button row=1 column=1 item=Scene_General label="Morning" stateless click=1')
+    expect(sitemap[3]).toEqual('        Button row=1 column=2 item=Scene_General label="Cinéma" click="10" release="test 11"')
+  })
+
   it('renders a widget with mappings and string keys correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Selection', {
       item: 'Echos',
       mappings: [
@@ -160,8 +177,6 @@ describe('dslUtil', () => {
 
   it('renders a widget with mappings and release command correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Switch', {
       item: 'pressAndRelease',
       mappings: ['ON:OFF=ON']
@@ -172,8 +187,6 @@ describe('dslUtil', () => {
 
   it('renders a widget with mappings and release command and string commands correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Switch', {
       item: 'pressAndRelease',
       mappings: ['"ON command":"OFF command"="ON"']
@@ -184,8 +197,6 @@ describe('dslUtil', () => {
 
   it('renders a widget with 0 value parameter correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Slider', {
       item: 'Dimmer1',
       minValue: 0,
@@ -198,8 +209,6 @@ describe('dslUtil', () => {
 
   it('renders widget with visibility correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Text', {
       item: 'Test',
       visibility: [
@@ -214,8 +223,6 @@ describe('dslUtil', () => {
 
   it('renders widget with visibility and text condition correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Switch', {
       item: 'Test',
       visibility: [
@@ -229,8 +236,6 @@ describe('dslUtil', () => {
 
   it('renders widget with valuecolor correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Text', {
       item: 'Temperature',
       valuecolor: [
@@ -247,8 +252,6 @@ describe('dslUtil', () => {
 
   it('renders widget with valuecolor and text condition correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Text', {
       item: 'Temperature',
       valuecolor: [
@@ -261,8 +264,6 @@ describe('dslUtil', () => {
 
   it('renders widget with valuecolor and AND condition correctly', () => {
     const component = createSitemapComponent('test', 'Test')
-    const widget = {
-    }
     addWidget(component, 'Text', {
       item: 'Temperature',
       valuecolor: [
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/sitemap-code_jest.spec.js b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/sitemap-code_jest.spec.js
index e15adeb7fc..a193d68fc2 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/sitemap-code_jest.spec.js
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/__tests__/sitemap-code_jest.spec.js
@@ -229,6 +229,67 @@ describe('SitemapCode', () => {
     })
   })
 
+  it('parses a Buttongrid with Button components correctly', async () => {
+    expect(wrapper.vm.sitemapDsl).toBeDefined()
+    // simulate updating the sitemap in code
+    const sitemap = [
+      'sitemap test label="Test" {',
+      '    Buttongrid label="Scenes" staticIcon=screen {',
+      '        Button row=1 column=1 item=Scene_General label=Morning stateless click=1',
+      '        Button row=1 column=2 item=Scene_General label="Cinéma" click="10" release="11"',
+      '    }',
+      '}',
+      ''
+    ].join('\n')
+    wrapper.vm.updateSitemap(sitemap)
+    expect(wrapper.vm.sitemapDsl).toMatch(/^sitemap test label="Test"/)
+    expect(wrapper.vm.parsedSitemap.error).toBeFalsy()
+
+    await wrapper.vm.$nextTick()
+
+    // check whether an 'updated' event was emitted and its payload
+    // (should contain the parsing result for the new sitemap definition)
+    const events = wrapper.emitted().updated
+    expect(events).toBeTruthy()
+    expect(events.length).toBe(1)
+    const payload = events[0][0]
+    expect(payload.slots).toBeDefined()
+    expect(payload.slots.widgets).toBeDefined()
+    expect(payload.slots.widgets.length).toBe(1)
+    expect(payload.slots.widgets[0]).toEqual({
+      component: 'Buttongrid',
+      config: {
+        label: 'Scenes',
+        staticIcon: true,
+        icon: 'screen'
+      },
+      slots: {
+        widgets: [{
+          component: 'Button',
+          config: {
+            row: 1,
+            column: 1,
+            item: 'Scene_General',
+            label: 'Morning',
+            stateless: true,
+            cmd: 1
+          }
+        },
+        {
+          component: 'Button',
+          config: {
+            row: 1,
+            column: 2,
+            item: 'Scene_General',
+            label: 'Cinéma',
+            cmd: '10',
+            releaseCmd: '11'
+          }
+        }]
+      }
+    })
+  })
+
   it('parses a mapping code back to a mapping on a component', async () => {
     expect(wrapper.vm.sitemapDsl).toBeDefined()
     // simulate updating the sitemap in code
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/dslUtil.js b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/dslUtil.js
index dd5c057dc1..8a8922804f 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/dslUtil.js
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/dslUtil.js
@@ -11,6 +11,8 @@ function writeWidget (widget, indent) {
         dsl += ' releaseOnly'
       } else if (key === 'forceAsItem') {
         dsl += ' forceasitem=' + widget.config[key]
+      } else if (key === 'stateless') {
+        dsl += ' stateless'
       } else if (key === 'icon') {
         if (widget.config.staticIcon) {
           dsl += ' staticIcon=' + widget.config[key]
@@ -20,6 +22,10 @@ function writeWidget (widget, indent) {
       } else if (key !== 'staticIcon') {
         if (key === 'iconrules') {
           dsl += ' icon='
+        } else if (key === 'cmd') {
+          dsl += ' click='
+        } else if (key === 'releaseCmd') {
+          dsl += ' release='
         } else {
           dsl += ` ${key}=`
         }
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
index 257d3dce21..999cc185cb 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/treeview-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <f7-treeview-item selectable :label="widget.config.label"
+  <f7-treeview-item selectable :label="widget.config.label ? widget.config.label : ((widget.component === 'Button') ? widget.config.cmd : '')"
                     :icon-ios="icon('ios')" :icon-aurora="icon('aurora')" :icon-md="icon('md')"
                     :textColor="iconColor" :color="'blue'"
                     :selected="selected && selected === widget"
@@ -44,6 +44,8 @@ export default {
           return 'f7:map'
         case 'Buttongrid':
           return 'f7:square_grid_3x2'
+        case 'Button':
+          return 'f7:square_fill_line_vertical_square'
         case 'Default':
           return 'f7:rectangle'
         case 'Text':
@@ -59,7 +61,8 @@ export default {
       }
     },
     subtitle () {
-      return this.widget.component + ((this.widget.config && this.widget.config.item) ? ': ' + this.widget.config.item : '')
+      const buttonPosition = this.widget.component === 'Button' ? ' (' + (this.widget.config?.row ?? '-') + ',' + (this.widget.config?.column ?? '-') + ')' : ''
+      return this.widget.component + ((this.widget.config && this.widget.config.item) ? ': ' + this.widget.config.item : '') + buttonPosition
     },
     select (event) {
       let self = this
diff --git a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
index 4aa8b113fb..649925b1a7 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/widget-details.vue
@@ -41,6 +41,13 @@
                          placeholder="##0.0"
                          validate pattern="^(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?(?:';'|[^;])*(?:;(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?.*)?$"
                          :value="widget.config.yAxisDecimalPattern" @input="updateParameter('yAxisDecimalPattern', $event)" clear-button />
+          <f7-list-input v-if="supports('row')" label="Row" type="number" required validate min="1" :value="widget.config.row" @input="updateParameter('row', $event)" clear-button />
+          <f7-list-input v-if="supports('column')" label="Column" type="number" required validate min="1" max="12" :value="widget.config.column" @input="updateParameter('column', $event)" clear-button />
+          <f7-list-input v-if="supports('cmd')" label="Click command" type="text" required validate :value="widget.config.cmd" @input="updateParameter('cmd', $event)" clear-button />
+          <f7-list-input v-if="supports('releaseCmd')" label="Release command" type="text" :value="widget.config.releaseCmd" @input="updateParameter('releaseCmd', $event)" clear-button />
+          <f7-list-item v-if="supports('stateless')" title="Stateless">
+            <f7-toggle slot="after" :checked="widget.config.stateless" @toggle:change="widget.config.stateless = $event" />
+          </f7-list-item>
           <f7-list-item v-if="supports('switchEnabled')" title="Switch enabled">
             <f7-toggle slot="after" :checked="widget.config.switchEnabled" @toggle:change="widget.config.switchEnabled = $event" />
           </f7-list-item>
@@ -113,6 +120,7 @@ export default {
       Slider: ['switchEnabled', 'releaseOnly', 'minValue', 'maxValue', 'step'],
       Setpoint: ['minValue', 'maxValue', 'step'],
       Input: ['inputHint'],
+      Button: ['row', 'column', 'stateless', 'cmd', 'releaseCmd'],
       Default: ['height']
     }
     this.ENCODING_DEFS = [
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
index da246abd08..6e55b8fe97 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/__tests__/sitemap-edit_jest.spec.js
@@ -400,7 +400,7 @@ describe('SitemapEdit', () => {
     expect(lastDialogConfig).toBeFalsy()
   })
 
-  it('validates buttons', async () => {
+  it('validates a buttongrid with buttons argument', async () => {
     wrapper.vm.selectWidget([wrapper.vm.sitemap, null])
     await wrapper.vm.$nextTick()
     wrapper.vm.addWidget('Buttongrid')
@@ -476,6 +476,99 @@ describe('SitemapEdit', () => {
     expect(lastDialogConfig).toBeFalsy()
   })
 
+  it('validates a buttongrid with button components', async () => {
+    wrapper.vm.selectWidget([wrapper.vm.sitemap, null])
+    await wrapper.vm.$nextTick()
+    wrapper.vm.addWidget('Buttongrid')
+    await wrapper.vm.$nextTick()
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'label', 'Buttongrid Test')
+    await wrapper.vm.$nextTick()
+
+    // should not validate as no item and buttons defined
+    lastDialogConfig = null
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Buttongrid widget Buttongrid Test, no item configured/)
+    expect(lastDialogConfig.content).toMatch(/Buttongrid widget Buttongrid Test, no buttons defined/)
+
+    // add button, should not validate as the button has no row defined
+    lastDialogConfig = null
+    await wrapper.vm.$nextTick()
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    wrapper.vm.addWidget('Button')
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'label', 'Morning')
+    localVue.set(wrapper.vm.selectedWidget.config, 'column', 1)
+    await wrapper.vm.$nextTick()
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Button widget Morning, invalid row configured: undefined/)
+
+    // configure a correct row, should not validate as wrong column set
+    lastDialogConfig = null
+    localVue.set(wrapper.vm.selectedWidget.config, 'row', 1)
+    localVue.set(wrapper.vm.selectedWidget.config, 'column', 'column')
+    await wrapper.vm.$nextTick()
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Button widget Morning, invalid column configured: column/)
+
+    // configure a correct column, should not validate as no item set
+    lastDialogConfig = null
+    localVue.set(wrapper.vm.selectedWidget.config, 'column', 1)
+    await wrapper.vm.$nextTick()
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Button widget Morning, no item configured/)
+
+    // configure an item, should not validate as no command set
+    lastDialogConfig = null
+    localVue.set(wrapper.vm.selectedWidget.config, 'item', 'Item1')
+    await wrapper.vm.$nextTick()
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Button widget Morning, no click command defined/)
+
+    // configure correct commands, should not validate as duplicate positions
+    lastDialogConfig = null
+    localVue.set(wrapper.vm.selectedWidget.config, 'cmd', 1)
+    await wrapper.vm.$nextTick()
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    wrapper.vm.addWidget('Button')
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'label', 'Evening')
+    localVue.set(wrapper.vm.selectedWidget.config, 'item', 'Item1')
+    localVue.set(wrapper.vm.selectedWidget.config, 'row', 1)
+    localVue.set(wrapper.vm.selectedWidget.config, 'column', 1)
+    localVue.set(wrapper.vm.selectedWidget.config, 'cmd', 2)
+    await wrapper.vm.$nextTick()
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Buttongrid widget Buttongrid Test, duplicate button position : row 1 column 1/)
+
+    // configure a correct command and check that there are no validation errors anymore
+    lastDialogConfig = null
+    localVue.set(wrapper.vm.selectedWidget.config, 'row', 1)
+    localVue.set(wrapper.vm.selectedWidget.config, 'column', 3)
+    await wrapper.vm.$nextTick()
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    wrapper.vm.addWidget('Button')
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'label', 'Cinéma')
+    localVue.set(wrapper.vm.selectedWidget.config, 'item', 'Item1')
+    localVue.set(wrapper.vm.selectedWidget.config, 'row', 2)
+    localVue.set(wrapper.vm.selectedWidget.config, 'column', 1)
+    localVue.set(wrapper.vm.selectedWidget.config, 'cmd', 10)
+    await wrapper.vm.$nextTick()
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeFalsy()
+  })
+
   it('validates visibility', async () => {
     wrapper.vm.selectWidget([wrapper.vm.sitemap, null])
     await wrapper.vm.$nextTick()
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
index db8bcf5d9f..df430c4f06 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/sitemap/sitemap-edit.vue
@@ -51,7 +51,7 @@
                 <div><f7-block-title>Visibility</f7-block-title></div>
                 <attribute-details :widget="selectedWidget" attribute="visibility" placeholder="item_name operator value" />
               </f7-block>
-              <f7-block v-if="selectedWidget && selectedWidget.component === 'Buttongrid'">
+              <f7-block v-if="selectedWidget && selectedWidget.component === 'Buttongrid' && !hasChildren">
                 <div><f7-block-title>Buttons</f7-block-title></div>
                 <attribute-details :widget="selectedWidget" attribute="buttons" placeholder="command = label = icon"
                                    :fields="JSON.stringify([{row: {width: '10%', type: 'number', min: 1, placeholder: 'row'}},
@@ -74,7 +74,7 @@
                 <div><f7-block-title>Label Color</f7-block-title></div>
                 <attribute-details :widget="selectedWidget" attribute="labelcolor" placeholder="item_name operator value = color" />
               </f7-block>
-              <f7-block v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
+              <f7-block v-if="selectedWidget && canShowValue">
                 <div><f7-block-title>Value Color</f7-block-title></div>
                 <attribute-details :widget="selectedWidget" attribute="valuecolor" placeholder="item_name operator value = color" />
               </f7-block>
@@ -82,7 +82,7 @@
                 <div><f7-block-title>Icon Color</f7-block-title></div>
                 <attribute-details :widget="selectedWidget" attribute="iconcolor" placeholder="item_name operator value = color" />
               </f7-block>
-              <f7-block v-if="selectedWidget && canAddChildren">
+              <f7-block v-if="selectedWidget && canAddChildren && selectedWidget.component !== 'Buttongrid'">
                 <div><f7-block-title>Add Child Widget</f7-block-title></div>
                 <f7-card>
                   <f7-card-content>
@@ -92,6 +92,18 @@
                   </f7-card-content>
                 </f7-card>
               </f7-block>
+              <f7-block v-if="selectedWidget && canAddChildren && selectedWidget.component === 'Buttongrid'">
+                <div><f7-block-title>Add Button Widget</f7-block-title></div>
+                <f7-card>
+                  <f7-card-content>
+                    <f7-list>
+                      <f7-list-button color="blue" @click="addWidget('Button')">
+                        Insert Button Widget Inside Buttongrid
+                      </f7-list-button>
+                    </f7-list>
+                  </f7-card-content>
+                </f7-card>
+              </f7-block>
             </f7-col>
           </f7-row>
         </f7-block>
@@ -110,11 +122,14 @@
       </f7-tab>
     </f7-tabs>
 
-    <f7-fab class="add-to-sitemap-fab" v-if="canAddChildren" position="right-center" slot="fixed" color="blue" @click="$refs.widgetTypeSelection.open()">
+    <f7-fab class="add-to-sitemap-fab" v-if="canAddChildren && selectedWidget.component !== 'Buttongrid'" position="right-center" slot="fixed" color="blue" @click="$refs.widgetTypeSelection.open()">
+      <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
+      <f7-icon ios="f7:multiply" md="material:close" aurora="f7:multiply" />
+    </f7-fab>
+    <f7-fab class="add-to-sitemap-fab" v-if="canAddChildren && selectedWidget.component === 'Buttongrid'" position="right-center" slot="fixed" color="blue" @click="addWidget('Button')">
       <f7-icon ios="f7:plus" md="material:add" aurora="f7:plus" />
       <f7-icon ios="f7:multiply" md="material:close" aurora="f7:multiply" />
     </f7-fab>
-
     <f7-sheet v-if="currentTab === 'tree'" class="sitemap-details-sheet" :backdrop="false" :close-on-escape="true" :opened="detailsOpened" @sheet:closed="detailsOpened = false">
       <f7-page>
         <f7-toolbar tabbar bottom scrollable>
@@ -129,10 +144,11 @@
           <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'visibility'" @click="detailsTab = 'visibility'" v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
             Visibility
           </f7-link>
-          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'buttons'" @click="detailsTab = 'buttons'" v-if="selectedWidget && selectedWidget.component === 'Buttongrid'">
+          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'buttons'" @click="detailsTab = 'buttons'"
+                   v-if="selectedWidget && selectedWidget.component === 'Buttongrid' && !hasChildren">
             Buttons
           </f7-link>
-          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'mappings'" @click="detailsTab = 'mappings'" v-if="selectedWidget && ['Switch', 'Selection'].indexOf(selectedWidget.component) >= 0">
+          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'mappings'" @click="detailsTab = 'mappings'" v-if="selectedWidget && ['Switch', 'Selection'].includes(selectedWidget.component) >= 0">
             Mappings
           </f7-link>
           <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'icons'" @click="detailsTab = 'icons'" v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
@@ -164,8 +180,10 @@
         <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'colors'">
           <div><f7-block-title>Label Color</f7-block-title></div>
           <attribute-details :widget="selectedWidget" attribute="labelcolor" placeholder="item_name operator value = color" />
-          <div><f7-block-title>Value Color</f7-block-title></div>
-          <attribute-details :widget="selectedWidget" attribute="valuecolor" placeholder="item_name operator value = color" />
+          <div v-if="canShowValue">
+            <f7-block-title>Value Color</f7-block-title>
+          </div>
+          <attribute-details v-if="canShowValue" :widget="selectedWidget" attribute="valuecolor" placeholder="item_name operator value = color" />
           <div><f7-block-title>Icon Color</f7-block-title></div>
           <attribute-details :widget="selectedWidget" attribute="iconcolor" placeholder="item_name operator value = color" />
         </f7-block>
@@ -289,6 +307,7 @@ export default {
       { type: 'Setpoint', icon: 'plus_slash_minus' },
       { type: 'Input', icon: 'text_cursor' },
       { type: 'Buttongrid', icon: 'square_grid_3x2' },
+      { type: 'Button', icon: 'square_fill_line_vertical_square' },
       { type: 'Default', icon: 'rectangle' },
       { type: 'Group', icon: 'square_stack_3d_down_right' },
       { type: 'Chart', icon: 'chart_bar_square' },
@@ -298,8 +317,9 @@ export default {
       { type: 'Image', icon: 'photo' },
       { type: 'Video', icon: 'videocam' }
     ]
-    this.LINKABLE_WIDGET_TYPES = ['Sitemap', 'Text', 'Frame', 'Group', 'Image']
-    this.WIDGET_TYPES_REQUIRING_ITEM = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input', 'Colorpicker', 'Buttongrid', 'Default']
+    this.LINKABLE_WIDGET_TYPES = ['Sitemap', 'Text', 'Frame', 'Group', 'Image', 'Buttongrid']
+    this.WIDGET_TYPES_REQUIRING_ITEM = ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input', 'Colorpicker', 'Default']
+    this.WIDGET_TYPES_SHOWING_VALUE = ['Text', 'Switch', 'Selection', 'Slider', 'Setpoint', 'Input', 'Default', 'Group']
     this.REGEX_PERIOD = /^((P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?|\d*[YMWDh])-)?-?(P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?|\d*[YMWDh])$/
     this.REGEX_DECIMAL_PATTERN = /^(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?(?:';'|[^;])*(?:;(?:'[0#.,;E]?'|[^0#.,;E'])*((#[,#]*|0)[,0]*)(\.(0+#*|#+))?(?:E0+)?.*)?$/
     this.REGEX_MAPPING = /^\s*("[^\n"]*"|\w+)\s*=\s*("[^\n"]*"|\w+)\s*(=\s*("[^\n"]*"|\w+))?$/u
@@ -308,28 +328,40 @@ export default {
     this.REGEX_RULE = /^(((\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*AND)*\s*((\w+\s*)?(==|>=|<=|!=|>|<)\s*)?("[^\n"]*"|\w+)\s*)?\s*=)?\s*("#?(\w|:|-)+"|#?(\w|:|-)+)$/u
   },
   computed: {
+    hasChildren () {
+      if (!this.selectedWidget) return false
+      return (Array.isArray(this.selectedWidget.slots?.widgets) && this.selectedWidget.slots.widgets.length)
+    },
     canAddChildren () {
       if (!this.selectedWidget) return false
-      if (this.LINKABLE_WIDGET_TYPES.indexOf(this.selectedWidget.component) < 0) return false
-      return true
+      if (this.selectedWidget.component === 'Buttongrid') {
+        const buttons = this.selectedWidget.config.buttons
+        if (Array.isArray(buttons) && buttons.length) return false
+      }
+      return this.LINKABLE_WIDGET_TYPES.includes(this.selectedWidget.component)
+    },
+    canShowValue () {
+      if (!this.selectedWidget) return false
+      return this.WIDGET_TYPES_SHOWING_VALUE.includes(this.selectedWidget.component)
     },
     addableWidgetTypes () {
       if (!this.selectedWidget) return
+      if (this.selectedWidget.component === 'Buttongrid') return this.WIDGET_TYPES.filter(w => w.type === 'Button')
+      // Button only allowed inside Buttongrid
+      let types = this.WIDGET_TYPES.filter(w => w.type !== 'Button')
       // No frames in frame
-      if (this.selectedWidget.component === 'Frame') return this.WIDGET_TYPES.filter(w => w.type !== 'Frame')
+      if (this.selectedWidget.component === 'Frame') return types.filter(w => w.type !== 'Frame')
       // Linkable widget types only contain frames or none at all
       if (this.LINKABLE_WIDGET_TYPES.includes(this.selectedWidget.component)) {
-        if (this.selectedWidget.slots && this.selectedWidget.slots.widgets && this.selectedWidget.slots.widgets.length > 0) {
+        if (this.selectedWidget.slots?.widgets?.length > 0) {
           if (this.selectedWidget.slots.widgets.find(w => w.component === 'Frame')) {
-            return this.WIDGET_TYPES.filter(w => w.type === 'Frame')
+            return types.filter(w => w.type === 'Frame')
           } else {
-            return this.WIDGET_TYPES.filter(w => w.type !== 'Frame')
+            return types.filter(w => w.type !== 'Frame')
           }
-        } else {
-          return this.WIDGET_TYPES
         }
       }
-      return this.WIDGET_TYPES
+      return types
     }
   },
   watch: {
@@ -430,11 +462,12 @@ export default {
       })
     },
     validateWidgets (stay) {
-      if (this.sitemap.slots && Array.isArray(this.sitemap.slots.widgets)) {
+      let scope = this
+      if (Array.isArray(this.sitemap.slots?.widgets) && this.sitemap.slots.widgets.length) {
         let validationWarnings = []
         const widgetList = this.sitemap.slots.widgets.reduce(function iter (widgets, widget) {
           widgets.push(widget)
-          if (widget.slots && Array.isArray(widget.slots.widgets)) {
+          if (Array.isArray(widget.slots?.widgets)) {
             return widget.slots.widgets.reduce(iter, widgets)
           }
           return widgets
@@ -442,18 +475,17 @@ export default {
         let isFrame = [false]
         let siblingIsFrame = [undefined]
         this.sitemap.slots.widgets.forEach(function iter (widget) {
+          let label = scope.widgetErrorLabel(widget.config)
           if (isFrame[isFrame.length - 1] && widget.component === 'Frame') {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
             validationWarnings.push('Frame widget ' + label + ', frame not allowed in frame')
           }
           if (siblingIsFrame[siblingIsFrame.length - 1] !== undefined) {
             if ((siblingIsFrame[siblingIsFrame.length - 1] && (widget.component !== 'Frame')) || (!siblingIsFrame[siblingIsFrame.length - 1] && (widget.component === 'Frame'))) {
-              let label = widget.config && widget.config.label ? widget.config.label : 'without label'
               validationWarnings.push('Widget ' + label + ', only frames or no frames at all allowed in linkable widget')
             }
           }
           siblingIsFrame.push(siblingIsFrame.pop() || widget.component === 'Frame')
-          if (widget.slots && Array.isArray(widget.slots.widgets)) {
+          if (Array.isArray(widget.slots?.widgets)) {
             isFrame.push(widget.component === 'Frame')
             siblingIsFrame.push(undefined)
             widget.slots.widgets.forEach(iter)
@@ -462,65 +494,95 @@ export default {
           }
         })
         widgetList.filter(widget => this.WIDGET_TYPES_REQUIRING_ITEM.includes(widget.component)).forEach(widget => {
-          if (!(widget.config && widget.config.item)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+          if (!widget.config?.item) {
+            let label = scope.widgetErrorLabel(widget.config)
             validationWarnings.push(widget.component + ' widget ' + label + ', no item configured')
           }
         })
         widgetList.filter(widget => widget.component === 'Video' || widget.component === 'Webview').forEach(widget => {
-          if (!(widget.config && widget.config.url)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+          if (!widget.config?.url) {
+            let label = scope.widgetErrorLabel(widget.config)
             validationWarnings.push(widget.component + ' widget ' + label + ', no url configured')
           }
         })
         widgetList.filter(widget => widget.component === 'Chart').forEach(widget => {
-          if (!(widget.config && widget.config.period && this.REGEX_PERIOD.test(widget.config.period))) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
-            validationWarnings.push(widget.component + ' widget ' + label + ', invalid period configured: ' + widget.config.period)
+          if (!(widget.config?.period && this.REGEX_PERIOD.test(widget.config.period))) {
+            let label = scope.widgetErrorLabel(widget.config)
+            validationWarnings.push(widget.component + ' widget ' + label + ', invalid period configured: ' + widget.config?.period)
           }
-          if (widget.config && widget.config.yAxisDecimalPattern && !this.REGEX_DECIMAL_PATTERN.test(widget.config.yAxisDecimalPattern)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
-            validationWarnings.push(widget.component + ' widget ' + label + ', invalid Y-axis decimal pattern configured: ' + widget.config.yAxisDecimalPattern)
+          if (widget.config?.yAxisDecimalPattern && !this.REGEX_DECIMAL_PATTERN.test(widget.config.yAxisDecimalPattern)) {
+            let label = scope.widgetErrorLabel(widget.config)
+            validationWarnings.push(widget.component + ' widget ' + label + ', invalid Y-axis decimal pattern configured: ' + widget.config?.yAxisDecimalPattern)
           }
         })
         widgetList.filter(widget => widget.component === 'Input').forEach(widget => {
-          if (widget.config && widget.config.inputHint && !['text', 'number', 'date', 'time', 'datetime'].includes(widget.config.inputHint)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
-            validationWarnings.push(widget.component + ' widget ' + label + ', invalid inputHint configured: ' + widget.config.inputHint)
+          if (widget.config?.inputHint && !['text', 'number', 'date', 'time', 'datetime'].includes(widget.config.inputHint)) {
+            let label = scope.widgetErrorLabel(widget.config)
+            validationWarnings.push(widget.component + ' widget ' + label + ', invalid inputHint configured: ' + widget.config?.inputHint)
           }
         })
         widgetList.filter(widget => widget.component === 'Slider' || widget.component === 'Setpoint').forEach(widget => {
-          if (widget.config && (widget.config.step !== undefined) && (widget.config.step <= 0)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+          let label = scope.widgetErrorLabel(widget.config)
+          if (widget.config?.step <= 0) {
             validationWarnings.push(widget.component + ' widget ' + label + ', step size cannot be 0 or negative: ' + widget.config.step)
           }
-          if (widget.config && (widget.config.minValue !== undefined) && (widget.config.maxValue !== undefined) && (widget.config.minValue > widget.config.maxValue)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+          if (widget.config?.minValue > widget.config?.maxValue) {
             validationWarnings.push(widget.component + ' widget ' + label + ', minValue must be less than or equal maxValue: ' + widget.config.minValue + ' > ' + widget.config.maxValue)
           }
         })
         widgetList.filter(widget => widget.component === 'Buttongrid').forEach(widget => {
-          if (widget.config && (!widget.config.buttons || widget.config.buttons.length === 0)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+          let label = scope.widgetErrorLabel(widget.config)
+          if (!widget.config?.item && !widget.slots?.widgets?.length) {
+            validationWarnings.push(widget.component + ' widget ' + label + ', no item configured')
+          }
+          if (!(widget.config?.buttons?.length || widget.slots?.widgets?.length)) {
             validationWarnings.push(widget.component + ' widget ' + label + ', no buttons defined')
           }
-          if (widget.config && (widget.config.buttons !== undefined)) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
-            let occurrences = {}
-            const duplicates = widget.config.buttons.map(param => { return { row: param.row, column: param.column } }).filter(pos => {
-              const jsonpos = JSON.stringify(pos)
-              if (occurrences[jsonpos]) return true
-              occurrences[jsonpos] = true
-              return false
-            })
-            duplicates.forEach(duplicate =>
-              validationWarnings.push(widget.component + ' widget ' + label + ', duplicate button position : row ' + duplicate.row + ' column ' + duplicate.column)
-            )
+          let positions = []
+          if (widget.config?.buttons?.length) {
+            positions = widget.config.buttons.map(param => { return { row: param.row, column: param.column } })
+          } else if (widget.slots?.widgets?.length) {
+            positions = widget.slots.widgets.filter(widget => widget.config).map(widget => { return { row: widget.config.row, column: widget.config.column } })
+          }
+          let occurrences = {}
+          const duplicates = positions.filter(pos => {
+            const jsonpos = JSON.stringify(pos)
+            if (occurrences[jsonpos]) return true
+            occurrences[jsonpos] = true
+            return false
+          })
+          duplicates.forEach(duplicate =>
+            validationWarnings.push(widget.component + ' widget ' + label + ', duplicate button position : row ' + duplicate.row + ' column ' + duplicate.column)
+          )
+        })
+        widgetList.filter(widget => widget.component === 'Button').forEach(widget => {
+          let label = scope.widgetErrorLabel(widget.config)
+          let parentWidget = widgetList.find(w => {
+            if (w.slots?.widgets?.includes(widget)) return w
+            return undefined
+          })
+          if (!(parentWidget?.component === 'Buttongrid')) {
+            validationWarnings.push(widget.component + ' widget ' + label + ', can only be defined inside a Buttongrid component')
+          }
+          if (!(widget.config?.item)) {
+            // if there is an item configured on the Buttongrid level, we will use that when saving
+            if (!((parentWidget?.component === 'Buttongrid') && parentWidget?.config?.item)) {
+              validationWarnings.push(widget.component + ' widget ' + label + ', no item configured')
+            }
+          }
+          if (!(widget.config?.row) || isNaN(widget.config?.row) || (widget.config?.row <= 0) || (widget.config?.row > 12)) {
+            validationWarnings.push(widget.component + ' widget ' + label + ', invalid row configured: ' + widget.config.row)
+          }
+          if (!(widget.config?.column) || isNaN(widget.config?.column) || (widget.config?.column <= 0)) {
+            validationWarnings.push(widget.component + ' widget ' + label + ', invalid column configured: ' + widget.config.column)
+          }
+          if (!(widget.config?.cmd)) {
+            validationWarnings.push(widget.component + ' widget ' + label + ', no click command defined')
           }
         })
         widgetList.forEach(widget => {
           if (widget.config) {
-            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+            let label = scope.widgetErrorLabel(widget.config)
             Object.keys(widget.config).filter(attr => ['buttons', 'mappings', 'visibility', 'valuecolor', 'labelcolor', 'iconcolor', 'iconrules'].includes(attr)).forEach(attr => {
               widget.config[attr].forEach(param => {
                 if (((attr === 'mappings') && !this.validateMapping(widget.component, param)) ||
@@ -528,10 +590,10 @@ export default {
                   validationWarnings.push(widget.component + ' widget ' + label + ', syntax error in ' + attr + ': ' + param)
                 }
                 if (attr === 'buttons') {
-                  if (!param.row || isNaN(param.row)) {
+                  if (!param.row || isNaN(param.row) || (param.row <= 0) || (param.row > 12)) {
                     validationWarnings.push(widget.component + ' widget ' + label + ', invalid row configured: ' + param.row)
                   }
-                  if (!param.column || isNaN(param.column)) {
+                  if (!param.column || isNaN(param.column) || (param.column <= 0)) {
                     validationWarnings.push(widget.component + ' widget ' + label + ', invalid column configured: ' + param.column)
                   }
                   if (!this.validateMapping(widget.component, param.command)) {
@@ -556,8 +618,11 @@ export default {
           }).open()
           return false
         }
-        return true
       }
+      return true
+    },
+    widgetErrorLabel (config) {
+      return config?.label ?? (config?.item ? 'for item ' + config.item : 'without label')
     },
     validateMapping (component, mapping) {
       if (component === 'Switch') {
@@ -586,9 +651,10 @@ export default {
           }
         }
       }
-      if (widget.slots && widget.slots.widgets) {
-        widget.slots.widgets.forEach(this.cleanConfig)
+      if (widget.component === 'Buttongrid') {
+        widget.slots?.widgets?.sort((button1, button2) => ((button1.config?.row ?? 0) - (button2.config?.row ?? 0)) || ((button1.config?.column ?? 0) - (button2.config?.column ?? 0)))
       }
+      widget.slots?.widgets?.forEach(this.cleanConfig)
     },
     preProcessSitemapLoad (sitemap) {
       const processed = JSON.parse(JSON.stringify(sitemap))
@@ -613,15 +679,11 @@ export default {
           }
         }
       }
-      if (widget.slots && widget.slots.widgets) {
-        widget.slots.widgets.forEach(this.preProcessWidgetLoad)
-      }
+      widget.slots?.widgets?.forEach(this.preProcessWidgetLoad)
     },
     preProcessSitemapSave (sitemap) {
       const processed = JSON.parse(JSON.stringify(sitemap))
-      if (processed.slots && processed.slots.widgets) {
-        processed.slots.widgets.forEach(this.preProcessWidgetSave)
-      }
+      processed.slots?.widgets?.forEach(this.preProcessWidgetSave)
       return processed
     },
     preProcessWidgetSave (widget) {
@@ -634,9 +696,16 @@ export default {
           }
         }
       }
-      if (widget.slots && widget.slots.widgets) {
-        widget.slots.widgets.forEach(this.preProcessWidgetSave)
+      if ((widget.component === 'Buttongrid') && widget.config?.item) {
+        if (!widget.config.buttons && widget.slots?.widgets) {
+          widget.slots.widgets.forEach(w => {
+            if (!w.config) w.config = {}
+            if (!w.config.item) w.config.item = widget.config.item
+          })
+          delete widget.config.item
+        }
       }
+      widget.slots?.widgets?.forEach(this.preProcessWidgetSave)
     },
     update (value) {
       this.selectedWidget = null