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 88dac9fc64..f9f81e5332 100644
--- a/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
+++ b/bundles/org.openhab.ui/web/src/assets/sitemap-lexer.nearley
@@ -9,15 +9,16 @@
     item:             'item=',
     staticIcon:       'staticIcon=',
     icon:             'icon=',
-    widgetattr:       ['url=', 'refresh=', 'service=', 'period=', 'height=', 'minValue=', 'maxValue=', 'step=', 'encoding=', 'yAxisDecimalPattern=', 'inputHint='],
+    widgetattr:       ['url=', 'refresh=', 'service=', 'period=', 'height=', 'minValue=', 'maxValue=', 'step=', 'encoding=', 'yAxisDecimalPattern=', 'inputHint=', 'columns='],
     widgetboolattr:   ['legend='],
     widgetfreqattr:   'sendFrequency=',
     widgetfrcitmattr: 'forceasitem=',
     widgetmapattr:    'mappings=',
+    widgetbuttonattr: 'buttons=',
     widgetvisiattr:   'visibility=',
     widgetcolorattr:  ['labelcolor=', 'valuecolor=', 'iconcolor='],
     widgetswitchattr: 'switchSupport',
-    nlwidget:         ['Switch ', 'Selection ', 'Slider ', 'Setpoint ', 'Input ', 'Video ', 'Chart ', 'Webview ', 'Colorpicker ', 'Mapview ', 'Default '],
+    nlwidget:         ['Switch ', 'Selection ', 'Slider ', 'Setpoint ', 'Input ', 'Video ', 'Chart ', 'Webview ', 'Colorpicker ', 'Mapview ', 'Buttongrid ', 'Default '],
     lwidget:          ['Text ', 'Group ', 'Image ', 'Frame '],
     lparen:           '(',
     rparen:           ')',
@@ -118,6 +119,7 @@ WidgetAttr -> %widgetswitchattr
   | %staticIcon _ WidgetIconAttrValue                                             {% (d) => [d[0].value, d[2].join("")] %}
   | WidgetAttrName _ WidgetAttrValue                                              {% (d) => [d[0][0].value, d[2]] %}
   | WidgetMappingsAttrName WidgetMappingsAttrValue                                {% (d) => [d[0][0].value, d[1]] %}
+  | WidgetButtonsAttrName WidgetButtonsAttrValue                                  {% (d) => [d[0][0].value, d[1]] %}
   | WidgetVisibilityAttrName WidgetVisibilityAttrValue                            {% (d) => [d[0][0].value, d[1]] %}
   | WidgetColorAttrName WidgetColorAttrValue                                      {% (d) => [d[0][0].value, d[1]] %}
 WidgetAttrName -> %item | %label | %widgetattr
@@ -135,6 +137,8 @@ WidgetAttrValue -> %number
   | %string                                                                       {% (d) => d[0].value %}
 WidgetMappingsAttrName -> %widgetmapattr
 WidgetMappingsAttrValue -> %lbracket _ Mappings _ %rbracket                       {% (d) => d[2] %}
+WidgetButtonsAttrName -> %widgetbuttonattr
+WidgetButtonsAttrValue -> %lbracket _ Buttons _ %rbracket                         {% (d) => d[2] %}
 WidgetVisibilityAttrName -> %widgetvisiattr
 WidgetVisibilityAttrValue -> %lbracket _ Visibilities _ %rbracket                 {% (d) => d[2] %}
 WidgetColorAttrName -> %widgetcolorattr
@@ -142,10 +146,17 @@ WidgetColorAttrValue -> %lbracket _ Colors _ %rbracket
 
 Mappings -> Mapping                                                               {% (d) => [d[0]] %}
   | Mappings _ %comma _ Mapping                                                   {% (d) => d[0].concat([d[4]]) %}
-Mapping -> MappingCommand _ %equals _ MappingLabel                                {% (d) => d[0][0].value + '=' + d[4][0].value %}
-  |  MappingCommand _ %equals _ MappingLabel _ %equals _ WidgetIconAttrValue      {% (d) => d[0][0].value + '=' + d[4][0].value + '=' + d[8].join("") %}
-MappingCommand -> %number | %identifier | %string
-MappingLabel -> %number | %identifier | %string
+Mapping -> Command _ %equals _ Label                                              {% (d) => d[0][0].value + '=' + d[4][0].value %}
+  |  Command _ %equals _ Label _ %equals _ WidgetIconAttrValue                    {% (d) => d[0][0].value + '=' + d[4][0].value + '=' + 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] } } %}
+ButtonValue -> Command _ %equals _ Label                                          {% (d) => d[0][0].value + '=' + d[4][0].value %}
+  | Command _ %equals _ Label _ %equals _ WidgetIconAttrValue                     {% (d) => d[0][0].value + '=' + d[4][0].value + '=' + d[8].join("") %}
+
+Command -> %number | %identifier | %string
+Label -> %number | %identifier | %string
 
 Visibilities -> Conditions                                                        {% (d) => d[0] %}
   | Visibilities _ %comma _ Conditions                                            {% (d) => d[0].concat(d[4]) %}
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 096e7502d7..a1abd54205 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
@@ -120,7 +120,26 @@ describe('dslUtil', () => {
       ]
     })
     const sitemap = dslUtil.toDsl(component).split('\n')
-    expect(sitemap[1]).toEqual('    Selection item=Scene_General mappings=[1=Morning,2=Evening,10="Cinéma",11=TV,3="Bed time",4=Night=moon]')
+    expect(sitemap[1]).toEqual('    Selection item=Scene_General mappings=[1=Morning, 2=Evening, 10="Cinéma", 11=TV, 3="Bed time", 4=Night=moon]')
+  })
+
+  it('renders a Buttongrid widget correctly', () => {
+    const component = createSitemapComponent('test', 'Test')
+    const widget = {
+    }
+    addWidget(component, 'Buttongrid', {
+      item: 'Scene_General',
+      buttons: [
+        { row: 1, column: 1, command: '1=Morning' },
+        { row: 1, column: 2, command: '2=Evening' },
+        { row: 1, column: 3, command: '10=Cinéma' },
+        { row: 2, column: 1, command: '11=TV' },
+        { row: 2, column: 2, command: '3=Bed time' },
+        { row: 2, column: 3, command: '4=Night=moon' }
+      ]
+    })
+    const sitemap = dslUtil.toDsl(component).split('\n')
+    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 widget with mappings and string keys correctly', () => {
@@ -136,7 +155,7 @@ describe('dslUtil', () => {
       ]
     })
     const sitemap = dslUtil.toDsl(component).split('\n')
-    expect(sitemap[1]).toEqual('    Selection item=Echos mappings=[EchoDot1="Echo 1",EchoDot2="Echo 2","EchoDot1,EchoDot2"=Alle]')
+    expect(sitemap[1]).toEqual('    Selection item=Echos mappings=[EchoDot1="Echo 1", EchoDot2="Echo 2", "EchoDot1,EchoDot2"=Alle]')
   })
 
   it('renders a widget with 0 value parameter correctly', () => {
@@ -166,7 +185,7 @@ describe('dslUtil', () => {
       ]
     })
     const sitemap = dslUtil.toDsl(component).split('\n')
-    expect(sitemap[1]).toEqual('    Text item=Test visibility=[Battery<30,Battery>50,Battery_Level>=20]')
+    expect(sitemap[1]).toEqual('    Text item=Test visibility=[Battery<30, Battery>50, Battery_Level>=20]')
   })
 
   it('renders widget with visibility and text condition correctly', () => {
@@ -181,7 +200,7 @@ describe('dslUtil', () => {
       ]
     })
     const sitemap = dslUtil.toDsl(component).split('\n')
-    expect(sitemap[1]).toEqual('    Switch item=Test visibility=[Day_Time=="Morning Time",Temperature>19]')
+    expect(sitemap[1]).toEqual('    Switch item=Test visibility=[Day_Time=="Morning Time", Temperature>19]')
   })
 
   it('renders widget with valuecolor correctly', () => {
@@ -199,7 +218,7 @@ describe('dslUtil', () => {
       ]
     })
     const sitemap = dslUtil.toDsl(component).split('\n')
-    expect(sitemap[1]).toEqual('    Text item=Temperature valuecolor=[Last_Update==Uninitialized="gray",>=25="orange",==15="green",0="white","blue"]')
+    expect(sitemap[1]).toEqual('    Text item=Temperature valuecolor=[Last_Update==Uninitialized="gray", >=25="orange", ==15="green", 0="white", "blue"]')
   })
 
   it('renders widget with valuecolor and text condition correctly', () => {
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 2cf8e1b844..14ec623e25 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
@@ -188,6 +188,47 @@ describe('SitemapCode', () => {
     })
   })
 
+  it('parses a Buttongrid component correctly', async () => {
+    expect(wrapper.vm.sitemapDsl).toBeDefined()
+    // simulate updating the sitemap in code
+    const sitemap = [
+      'sitemap test label="Test" {',
+      '    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]',
+      '}',
+      ''
+    ].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: {
+        item: 'Scene_General',
+        buttons: [
+          { row: 1, column: 1, command: '1=Morning' },
+          { row: 1, column: 2, command: '2=Evening' },
+          { row: 1, column: 3, command: '10=Cinéma' },
+          { row: 2, column: 1, command: '11=TV' },
+          { row: 2, column: 2, command: '3=Bed time' },
+          { row: 2, column: 3, command: '4=Night=moon' }
+        ]
+      }
+    })
+  })
+
   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/attribute-details.vue b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/attribute-details.vue
index fb25f00512..4de9401ad5 100644
--- a/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/attribute-details.vue
+++ b/bundles/org.openhab.ui/web/src/components/pagedesigner/sitemap/attribute-details.vue
@@ -2,8 +2,19 @@
   <f7-card v-if="widget">
     <f7-card-content v-if="attributes.length">
       <f7-list inline-labels sortable sortable-opposite sortable-enabled @sortable:sort="onSort">
-        <f7-list-input v-for="(attr, idx) in attributes" :key="attr.key"
-                       type="text" :placeholder="placeholder" :value="attr.value" @change="updateAttribute(idx, $event)" clear-button />
+        <f7-list-item v-for="(attr, idx) in attributes" :key="attr.key">
+          <f7-input v-if="!fields" type="text" :placeholder="placeholder" :value="attr.value" @change="updateAttribute($event, idx, attr)" />
+          <f7-input v-for="(field, fieldidx) in fieldDefs" :key="JSON.stringify(field)"
+                    :style="fieldStyle(field, fieldidx)"
+                    :inputStyle="inputFieldStyle(field, fieldidx)"
+                    :type="fieldProp(field, 'type')"
+                    :min="fieldProp(field, 'min')"
+                    :max="fieldProp(field, 'max')"
+                    :placeholder="fieldProp(field, 'placeholder')"
+                    :value="attr.value[Object.keys(field)[0]]"
+                    validate @change="updateAttribute($event, idx, attr, Object.keys(field)[0])" />
+          <f7-button text="" icon-material="clear" small @click="removeAttribute(idx)" />
+        </f7-list-item>
       </f7-list>
     </f7-card-content>
     <f7-card-footer key="item-card-buttons-edit-mode" v-if="widget.component !== 'Sitemap'">
@@ -14,25 +25,77 @@
   </f7-card>
 </template>
 
+<style lang="stylus">
+.button
+  padding-left 5px
+  padding-right 0px
+.input
+  width inherit
+</style>
+
 <script>
 export default {
-  props: ['widget', 'attribute', 'placeholder'],
+  props: ['widget', 'attribute', 'placeholder', 'fields'],
+  data () {
+    return {
+      fieldDefaults: {
+        type: 'text'
+      }
+    }
+  },
   computed: {
+    fieldDefs () {
+      return this.fields ? JSON.parse(this.fields) : []
+    },
     attributes () {
       if (this.widget && this.widget.config && this.widget.config[this.attribute]) {
-        return this.widget.config[this.attribute].map((attr, idx) => ({ key: idx + ': ' + attr, value: attr }))
+        return this.widget.config[this.attribute].map((attr, idx) => ({ key: idx + ': ' + JSON.stringify(attr), value: attr }))
       }
       return []
     }
   },
   methods: {
-    updateAttribute (idx, $event) {
-      const value = $event.target.value
+    fieldProp (field, prop) {
+      const fieldProps = field[Object.keys(field)[0]]
+      if (fieldProps[prop] !== undefined) {
+        return fieldProps[prop]
+      }
+      if (prop === 'placeholder') {
+        return this.placeholder
+      }
+      return this.fieldDefaults[prop]
+    },
+    fieldStyle (field, fieldidx) {
+      let style = {}
+      if (this.fieldProp(field, 'width') !== undefined) {
+        style.width = this.fieldProp(field, 'width')
+      }
+      if (fieldidx > 0) {
+        style.paddingLeft = '5px'
+      }
+      return style
+    },
+    inputFieldStyle (field, fieldidx) {
+      let style = {}
+      if (this.fieldProp(field, 'type') === 'number') {
+        style.textAlign = 'end'
+      }
+      return style
+    },
+    updateAttribute ($event, idx, attr, field) {
+      let value = $event.target.value
       if (!value) {
-        this.widget.config[this.attribute].splice(idx, 1)
-      } else {
-        this.$set(this.widget.config[this.attribute], idx, value)
+        this.removeAttribute(idx)
+        return
       }
+      if (field) {
+        value = attr.value ? attr.value : {}
+        value[field] = $event.target.value
+      }
+      this.$set(this.widget.config[this.attribute], idx, value)
+    },
+    removeAttribute (idx) {
+      this.widget.config[this.attribute].splice(idx, 1)
     },
     addAttribute () {
       if (this.widget && this.widget.config && this.widget.config[this.attribute]) {
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 678ad8df2d..2790cb138d 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
@@ -26,20 +26,21 @@ function writeWidget (widget, indent) {
         if (key === 'item' || key === 'period' || key === 'legend' || Number.isFinite(widget.config[key])) {
           dsl += widget.config[key]
         } else if (key === 'mappings') {
-          dsl += '['
-          dsl += widget.config[key].filter(Boolean).map(mapping => {
-            return mapping.split('=').map(value => {
-              if (/^.*\W.*$/.test(value) && /^[^"'].*[^"']$/.test(value)) {
-                return '"' + value + '"'
-              }
-              return value
-            }).join('=')
-          }).join(',')
-          dsl += ']'
+          dsl += '[' + widget.config[key].filter(Boolean).map(mapping => {
+            return writeCommand(mapping)
+          }).join(', ') + ']'
+        } else if (key === 'buttons') {
+          dsl += '[' + widget.config[key].filter(Boolean).map(button => {
+            return button.row + ':' + button.column + ':' + writeCommand(button.command)
+          }).join(', ') + ']'
         } else if (key === 'visibility') {
-          dsl += '[' + writeConditions(widget.config[key]) + ']'
+          dsl += '[' + widget.config[key].filter(Boolean).map(rule => {
+            return writeCondition(rule)
+          }).join(', ') + ']'
         } else if (['valuecolor', 'labelcolor', 'iconcolor', 'iconrules'].includes(key)) {
-          dsl += '[' + writeConditions(widget.config[key], true) + ']'
+          dsl += '[' + widget.config[key].filter(Boolean).map(rule => {
+            return writeCondition(rule, true)
+          }).join(', ') + ']'
         } else {
           dsl += '"' + widget.config[key] + '"'
         }
@@ -58,28 +59,35 @@ function writeWidget (widget, indent) {
   return dsl
 }
 
-function writeConditions (value, hasArgument = false) {
-  return value.filter(Boolean).map(rule => {
-    let argument = ''
-    let conditions = rule
-    if (hasArgument) {
-      let index = rule.lastIndexOf('=') + 1
-      argument = rule.substring(index).trim()
-      if (!/^(".*")|('.*')$/.test(argument)) {
-        argument = '"' + argument + '"'
-      }
-      argument = (index > 0 ? '=' + argument : argument)
-      conditions = rule.substring(0, index - 1)
+function writeCommand (command) {
+  return command.split('=').map(value => {
+    if (/^.*\W.*$/.test(value) && /^[^"'].*[^"']$/.test(value)) {
+      return '"' + value + '"'
     }
-    return conditions.split(' AND ').map(condition => {
-      let index = Math.max(condition.lastIndexOf('='), condition.lastIndexOf('>'), condition.lastIndexOf('<')) + 1
-      let conditionValue = condition.substring(index).trim()
-      if (/^.*\W.*$/.test(conditionValue) && /^[^"'].*[^"']$/.test(conditionValue)) {
-        conditionValue = '"' + conditionValue + '"'
-      }
-      return condition.substring(0, index) + conditionValue
-    }).join(' AND ') + argument
-  }).join(',')
+    return value
+  }).join('=')
+}
+
+function writeCondition (rule, hasArgument = false) {
+  let argument = ''
+  let conditions = rule
+  if (hasArgument) {
+    let index = rule.lastIndexOf('=') + 1
+    argument = rule.substring(index).trim()
+    if (!/^(".*")|('.*')$/.test(argument)) {
+      argument = '"' + argument + '"'
+    }
+    argument = (index > 0 ? '=' + argument : argument)
+    conditions = rule.substring(0, index - 1)
+  }
+  return conditions.split(' AND ').map(condition => {
+    let index = Math.max(condition.lastIndexOf('='), condition.lastIndexOf('>'), condition.lastIndexOf('<')) + 1
+    let conditionValue = condition.substring(index).trim()
+    if (/^.*\W.*$/.test(conditionValue) && /^[^"'].*[^"']$/.test(conditionValue)) {
+      conditionValue = '"' + conditionValue + '"'
+    }
+    return condition.substring(0, index) + conditionValue
+  }).join(' AND ') + argument
 }
 
 export default {
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 424a09eac5..257d3dce21 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
@@ -42,6 +42,8 @@ export default {
           return 'f7:drop'
         case 'Mapview':
           return 'f7:map'
+        case 'Buttongrid':
+          return 'f7:square_grid_3x2'
         case 'Default':
           return 'f7:rectangle'
         case 'Text':
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 543ac6fcd9..3699d0a832 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
@@ -326,6 +326,82 @@ describe('SitemapEdit', () => {
     expect(lastDialogConfig).toBeFalsy()
   })
 
+  it('validates buttons', 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, 'item', 'Item1')
+    localVue.set(wrapper.vm.selectedWidget.config, 'label', 'Buttongrid Test')
+
+    // should not validate as no buttons defined
+    lastDialogConfig = null
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    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()
+    localVue.set(wrapper.vm.selectedWidget.config, 'buttons', [
+      { column: 1, command: '1=Morning' }
+    ])
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Buttongrid widget Buttongrid Test, invalid row configured: undefined/)
+
+    // configure a correct row, should not validate as wrong column set
+    lastDialogConfig = null
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'buttons', [
+      { row: 1, column: 'column', command: '1=Morning' }
+    ])
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Buttongrid widget Buttongrid Test, invalid column configured: column/)
+
+    // configure a correct column, should not validate as wrong command set
+    lastDialogConfig = null
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'buttons', [
+      { row: 1, column: 2, command: 'Morning' }
+    ])
+    wrapper.vm.validateWidgets()
+    expect(lastDialogConfig).toBeTruthy()
+    expect(lastDialogConfig.content).toMatch(/Buttongrid widget Buttongrid Test, syntax error in button command: Morning/)
+
+    // configure correct commands, should not validate as duplicate positions
+    lastDialogConfig = null
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'buttons', [
+      { row: 1, column: 1, command: '1=Morning' },
+      { row: 1, column: 1, command: '2=Evening' }
+    ])
+    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
+    wrapper.vm.selectWidget([wrapper.vm.sitemap.slots.widgets[0], wrapper.vm.sitemap])
+    await wrapper.vm.$nextTick()
+    localVue.set(wrapper.vm.selectedWidget.config, 'buttons', [
+      { row: 1, column: 1, command: '1=Morning' },
+      { row: 1, column: 3, command: '2=Evening' },
+      { row: 2, column: 1, command: '10=Cinéma' },
+      { row: 2, column: 2, command: '11=TV' },
+      { row: 2, column: 3, command: '3=Bed time' },
+      { row: 3, column: 2, command: '4=night=moon' }
+    ])
+    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 4c22765e80..b89cf775cf 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
@@ -20,7 +20,7 @@
       <f7-link :disabled="selectedWidget != null" class="left" @click="selectedWidget = null">
         Clear
       </f7-link>
-      <f7-link class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
+      <f7-link v-if="selectedWidget" class="right details-link padding-right" ref="detailsLink" @click="detailsOpened = true" icon-f7="chevron_up" />
     </f7-toolbar>
     <f7-tabs class="sitemap-editor-tabs">
       <f7-tab class="design" id="tree" @tab:show="() => this.currentTab = 'tree'" :tab-active="currentTab === 'tree'">
@@ -50,6 +50,21 @@
                 <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'">
+                <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'}},
+                                                            {column: {width: '10%', type: 'number', min: 1, placeholder: 'col'}},
+                                                            {command: {}}])" />
+              </f7-block>
+              <f7-block v-if="selectedWidget && ['Switch', 'Selection'].indexOf(selectedWidget.component) >= 0">
+                <div><f7-block-title>Mappings</f7-block-title></div>
+                <attribute-details :widget="selectedWidget" attribute="mappings" placeholder="command = label = icon" />
+              </f7-block>
+              <f7-block v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
+                <div><f7-block-title>Icon Rules</f7-block-title></div>
+                <attribute-details :widget="selectedWidget" attribute="iconrules" placeholder="item_name operator value = icon" />
+              </f7-block>
               <f7-block v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
                 <div><f7-block-title>Label Color</f7-block-title></div>
                 <attribute-details :widget="selectedWidget" attribute="labelcolor" placeholder="item_name operator value = color" />
@@ -62,14 +77,6 @@
                 <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 && selectedWidget.component !== 'Sitemap'">
-                <div><f7-block-title>Icon Rules</f7-block-title></div>
-                <attribute-details :widget="selectedWidget" attribute="iconrules" placeholder="item_name operator value = icon" />
-              </f7-block>
-              <f7-block v-if="selectedWidget && ['Switch', 'Selection'].indexOf(selectedWidget.component) >= 0">
-                <div><f7-block-title>Mappings</f7-block-title></div>
-                <attribute-details :widget="selectedWidget" attribute="mappings" placeholder="command = label = icon" />
-              </f7-block>
               <f7-block v-if="selectedWidget && canAddChildren">
                 <div><f7-block-title>Add Child Widget</f7-block-title></div>
                 <f7-card>
@@ -98,20 +105,32 @@
       </f7-tab>
     </f7-tabs>
 
-    <f7-fab class="add-to-sitemap-fab" v-if="canAddChildren" position="right-bottom" slot="fixed" color="blue" @click="$refs.widgetTypeSelection.open()">
+    <f7-fab class="add-to-sitemap-fab" v-if="canAddChildren" 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-sheet class="sitemap-details-sheet" :backdrop="false" :close-on-escape="true" :opened="detailsOpened" @sheet:closed="detailsOpened = false">
+    <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>
+        <f7-toolbar tabbar bottom scrollable>
           <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'widget'" @click="detailsTab = 'widget'">
             Widget
           </f7-link>
-          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'mappings'" @click="detailsTab = 'mappings'">
+          <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'">
+            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">
             Mappings
           </f7-link>
+          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'icons'" @click="detailsTab = 'icons'" v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
+            Icons
+          </f7-link>
+          <f7-link class="padding-left padding-right" :tab-link-active="detailsTab === 'colors'" @click="detailsTab = 'colors'" v-if="selectedWidget && selectedWidget.component !== 'Sitemap'">
+            Colors
+          </f7-link>
           <div class="right">
             <f7-link sheet-close class="padding-right">
               <f7-icon f7="chevron_down" />
@@ -121,20 +140,28 @@
         <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'widget'">
           <widget-details :widget="selectedWidget" :createMode="createMode" @remove="removeWidget" @movedown="moveWidgetDown" @moveup="moveWidgetUp" />
         </f7-block>
-        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'visibility' && selectedWidget.component !== 'Sitemap'">
+        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'visibility'">
           <attribute-details :widget="selectedWidget" attribute="visibility" placeholder="item_name operator value" />
         </f7-block>
-        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'labelcolor' && selectedWidget.component !== 'Sitemap'">
-          <attribute-details :widget="selectedWidget" attribute="labelcolor" placeholder="item_name operator value = color" />
+        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'buttons'">
+          <attribute-details :widget="selectedWidget" attribute="buttons" placeholder="command = label = icon"
+                             :fields="JSON.stringify([{row: {width: '10%', type: 'number', min: 1, placeholder: 'row'}},
+                                                      {column: {width: '10%', type: 'number', min: 1, placeholder: 'col'}},
+                                                      {command: {}}])" />
         </f7-block>
-        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'valuecolor' && selectedWidget.component !== 'Sitemap'">
-          <attribute-details :widget="selectedWidget" attribute="valuecolor" placeholder="item_name operator value = color" />
+        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'mappings'">
+          <attribute-details :widget="selectedWidget" attribute="mappings" placeholder="command = label = icon" />
         </f7-block>
-        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'iconcolor' && selectedWidget.component === 'Image'">
-          <attribute-details :widget="selectedWidget" attribute="iconcolor" placeholder="item_name operator value = color" />
+        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'icons'">
+          <attribute-details :widget="selectedWidget" attribute="iconrules" placeholder="item_name operator value = icon" />
         </f7-block>
-        <f7-block style="margin-bottom: 6rem" v-if="selectedWidget && detailsTab === 'mappings' && ['Switch', 'Selection'].indexOf(selectedWidget.component) >= 0">
-          <attribute-details :widget="selectedWidget" attribute="mappings" placeholder="command = label" />
+        <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><f7-block-title>Icon Color</f7-block-title></div>
+          <attribute-details :widget="selectedWidget" attribute="iconcolor" placeholder="item_name operator value = color" />
         </f7-block>
       </f7-page>
     </f7-sheet>
@@ -190,6 +217,8 @@
         padding-top 0
         .block
           margin-top 0
+  .sitemap-details-sheet
+    visibility hidden !important
   .toolbar-details
     .details-link
       visibility hidden !important
@@ -247,6 +276,7 @@ export default {
         { type: 'Frame', icon: 'macwindow' },
         { type: 'Setpoint', icon: 'plus_slash_minus' },
         { type: 'Input', icon: 'text_cursor' },
+        { type: 'Buttongrid', icon: 'square_grid_3x2' },
         { type: 'Default', icon: 'rectangle' },
         { type: 'Group', icon: 'square_stack_3d_down_right' },
         { type: 'Chart', icon: 'chart_bar_square' },
@@ -257,7 +287,7 @@ export default {
         { type: 'Video', icon: 'videocam' }
       ],
       linkableWidgetTypes: ['Sitemap', 'Text', 'Frame', 'Group', 'Image'],
-      widgetTypesRequiringItem: ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input', 'Colorpicker', 'Default']
+      widgetTypesRequiringItem: ['Group', 'Chart', 'Switch', 'Mapview', 'Slider', 'Selection', 'Setpoint', 'Input', 'Colorpicker', 'Buttongrid', 'Default']
     }
   },
   created () {
@@ -327,7 +357,8 @@ export default {
         this.ready = true
       } else {
         this.$oh.api.get('/rest/ui/components/system:sitemap/' + this.uid).then((data) => {
-          this.$set(this, 'sitemap', data)
+          const sitemap = this.preProcessSitemapLoad(data)
+          this.$set(this, 'sitemap', sitemap)
           this.$nextTick(() => {
             this.ready = true
             this.loading = false
@@ -352,9 +383,11 @@ export default {
 
       if (!force && !this.validateWidgets(stay)) return
 
+      const sitemap = this.preProcessSitemapSave(this.sitemap)
+
       const promise = (this.createMode)
-        ? this.$oh.api.postPlain('/rest/ui/components/system:sitemap', JSON.stringify(this.sitemap), 'text/plain', 'application/json')
-        : this.$oh.api.put('/rest/ui/components/system:sitemap/' + this.sitemap.uid, this.sitemap)
+        ? this.$oh.api.postPlain('/rest/ui/components/system:sitemap', JSON.stringify(sitemap), 'text/plain', 'application/json')
+        : this.$oh.api.put('/rest/ui/components/system:sitemap/' + sitemap.uid, sitemap)
       promise.then((data) => {
         this.dirty = false
         if (this.createMode) {
@@ -364,7 +397,7 @@ export default {
             closeTimeout: 2000
           }).open()
           this.load()
-          this.$f7router.navigate(this.$f7route.url.replace('/add', '/' + this.sitemap.uid), { reloadCurrent: true })
+          this.$f7router.navigate(this.$f7route.url.replace('/add', '/' + sitemap.uid), { reloadCurrent: true })
         } else {
           this.$f7.toast.create({
             text: 'Sitemap updated',
@@ -448,16 +481,46 @@ export default {
             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'
+            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)
+            )
+          }
+        })
         widgetList.forEach(widget => {
           if (widget.config) {
-            Object.keys(widget.config).filter(attr => ['mappings', 'visibility', 'valuecolor', 'labelcolor', 'iconcolor', 'iconrules'].includes(attr)).forEach(attr => {
+            let label = widget.config && widget.config.label ? widget.config.label : 'without label'
+            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') && !(/^\s*("[^\n"]*"|[^\n="]+)\s*=\s*("[^\n"]*"|[^\n="]+)\s*(=\s*("[^\n"]*"|[^\n="]+))?$/u.test(param))) ||
+                if (((attr === 'mappings') && !this.validateMapping(param)) ||
                     ((attr === 'visibility') && !this.validateRule(param)) ||
                     ((['valuecolor', 'labelcolor', 'iconcolor', 'iconrules'].includes(attr)) && !this.validateRule(param, true))) {
-                  let label = widget.config && widget.config.label ? widget.config.label : 'without label'
                   validationWarnings.push(widget.component + ' widget ' + label + ', syntax error in ' + attr + ': ' + param)
                 }
+                if (attr === 'buttons') {
+                  if (!param.row || isNaN(param.row)) {
+                    validationWarnings.push(widget.component + ' widget ' + label + ', invalid row configured: ' + param.row)
+                  }
+                  if (!param.column || isNaN(param.column)) {
+                    validationWarnings.push(widget.component + ' widget ' + label + ', invalid column configured: ' + param.column)
+                  }
+                  if (!this.validateMapping(param.command)) {
+                    validationWarnings.push(widget.component + ' widget ' + label + ', syntax error in button command: ' + param.command)
+                  }
+                }
               })
             })
           }
@@ -479,6 +542,9 @@ export default {
         return true
       }
     },
+    validateMapping (mapping) {
+      return /^\s*("[^\n"]*"|[^\n="]+)\s*=\s*("[^\n"]*"|[^\n="]+)\s*(=\s*("[^\n"]*"|[^\n="]+))?$/u.test(mapping)
+    },
     validateRule (rule, hasArgument = false) {
       let conditions = rule
       if (hasArgument) {
@@ -494,7 +560,11 @@ export default {
         for (let key in widget.config) {
           if (widget.config[key] && Array.isArray(widget.config[key])) {
             widget.config[key] = widget.config[key].filter(Boolean)
-            if (['mappings', 'visibility', 'valuecolor', 'labelcolor', 'iconcolor'].includes(key)) {
+            if (key === 'buttons') {
+              widget.config[key].sort((value1, value2) => (value1.row - value2.row) || (value1.column - value2.column))
+              widget.config[key].forEach(value => this.removeQuotes(value.command))
+            }
+            if (['mappings', 'visibility', 'valuecolor', 'labelcolor', 'iconcolor', 'iconrules'].includes(key)) {
               widget.config[key].forEach(this.removeQuotes)
             }
           }
@@ -508,7 +578,63 @@ export default {
       }
     },
     removeQuotes (value) {
-      value = value.replace(/"|'/g, '')
+      if (value) {
+        if (typeof value === 'string') {
+          value = value.replace(/"|'/g, '')
+          return
+        } else if (typeof value === 'number') {
+          return
+        }
+        Object.keys(value).forEach(k => this.removeQuotes(value[k]))
+      }
+    },
+    preProcessSitemapLoad (sitemap) {
+      const processed = JSON.parse(JSON.stringify(sitemap))
+      if (processed.slots && processed.slots.widgets) {
+        processed.slots.widgets.forEach(this.preProcessWidgetLoad)
+      }
+      return processed
+    },
+    preProcessWidgetLoad (widget) {
+      if (widget.config) {
+        for (let key in widget.config) {
+          if (widget.config[key] && Array.isArray(widget.config[key])) {
+            if (key === 'buttons') {
+              widget.config[key].forEach((value, index) => {
+                const vArray = value.split(':')
+                const row = vArray[0]
+                const column = vArray[1]
+                const command = vArray.slice(2).join(':')
+                widget.config[key][index] = { 'row': row, 'column': column, 'command': command }
+              })
+            }
+          }
+        }
+      }
+      if (widget.slots && widget.slots.widgets) {
+        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)
+      }
+      return processed
+    },
+    preProcessWidgetSave (widget) {
+      if (widget.config) {
+        for (let key in widget.config) {
+          if (widget.config[key] && Array.isArray(widget.config[key])) {
+            if (key === 'buttons') {
+              widget.config[key].forEach((value, index) => { widget.config[key][index] = value.row + ':' + value.column + ':' + value.command })
+            }
+          }
+        }
+      }
+      if (widget.slots && widget.slots.widgets) {
+        widget.slots.widgets.forEach(this.preProcessWidgetSave)
+      }
     },
     update (value) {
       this.selectedWidget = null
@@ -552,11 +678,14 @@ export default {
       this.$nextTick(() => {
         this.selectedWidget = widget
         this.selectedWidgetParent = parentWidget
-        const detailsLink = this.$refs.detailsLink
-        const visibility = window.getComputedStyle(detailsLink.$el).visibility
-        if (!visibility || visibility !== 'hidden') {
-          this.detailsOpened = true
-        }
+        this.detailsTab = 'widget'
+        this.$nextTick(() => {
+          const detailsLink = this.$refs.detailsLink
+          const visibility = window.getComputedStyle(detailsLink.$el).visibility
+          if (!visibility || visibility !== 'hidden') {
+            this.detailsOpened = true
+          }
+        })
       })
     },
     clearSelection (ev) {