diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
index e5dde2be5f..eb071589ce 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/thing-picker.vue
@@ -27,7 +27,25 @@ export default {
         searchbar: true,
         searchbarPlaceholder: this.$t('dialogs.search.things'),
         virtualList: true,
-        virtualListHeight: (this.$theme.aurora) ? 32 : undefined
+        virtualListHeight: (this.$theme.aurora) ? 32 : undefined,
+
+        renderItem: (item, index) => {
+          let after = (index > 0) ? this.things[index - 1].location
+            ? this.things[index - 1].location + '<i class="icon f7-icons color-gray" style="width: 16px; height: 16px; font-size: 16px;">placemark</i>'
+            : '' : ''
+          return `
+                <li class="media-item">
+                  <label class="item-${item.radio ? 'radio' : 'checkbox'} item-content">
+                    <input type="${item.radio ? 'radio' : 'checkbox'}" name="${item.inputName}" value="${item.value}" ${item.selected ? 'checked' : ''}>
+                    <i class="icon icon-${item.radio ? 'radio' : 'checkbox'}"></i>
+                    <div class="item-inner">
+                      <div class="text">${item.text}</div>
+                      <div class="item-footer">${after}</div>
+                    </div>
+                  </label>
+                </li>
+              `
+        }
       }
     }
   },
diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue b/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue
index b3ec4b52cc..f2c53c867d 100644
--- a/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue
+++ b/bundles/org.openhab.ui/web/src/components/config/controls/triggerchannel-picker.vue
@@ -27,7 +27,40 @@ export default {
         view: this.$f7.view.main,
         openIn: 'popup',
         searchbar: true,
-        searchbarPlaceholder: 'Search channels'
+        searchbarPlaceholder: 'Search channels',
+        renderItem: (item, index) => {
+          let html, value, thing, channel, description
+          if (index > 0 && !item.isLabel) {
+            value = item.value.substring(0, item.value.lastIndexOf(':'))
+            thing = (index > 0) ? this.things.find((th) => th.UID === value) : ''
+            channel = (thing && thing.triggerChannels.length > 0)
+              ? thing.triggerChannels.find((ch) => ch.uid === item.value) : undefined
+          }
+
+          if (item.isLabel) {
+            html = `
+                      <li class="item-divider">
+                      ${item.groupLabel}
+                      </li>
+                    `
+          } else {
+            description = (channel !== undefined) ? channel.description : ''
+            html = `
+                <li class="media-item">
+                  <label class="item-radio item-content">
+                    <input type="radio" name="${item.inputName}" value="${item.value}" ${item.selected ? 'checked' : ''}>
+                    <i class="icon icon-radio"></i>
+                    <div class="item-inner">
+                      <div class="text">${item.text}</div>
+                      <div class="item-footer">${description}</div>
+                    </div>
+                  </label>
+                </li>
+              `
+          }
+
+          return html
+        }
       }
     }
   },