diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
index 8e1d591893..25dbecd5d3 100644
--- a/bundles/org.openhab.ui/web/package-lock.json
+++ b/bundles/org.openhab.ui/web/package-lock.json
@@ -89,6 +89,7 @@
         "jest-serializer-vue": "^2.0.2",
         "jest-transform-stub": "^2.0.0",
         "jest-vue-preprocessor": "^1.7.1",
+        "marked": "^3.0.2",
         "mini-css-extract-plugin": "^0.5.0",
         "nearley-loader": "^2.0.0",
         "optimize-css-assets-webpack-plugin": "^5.0.4",
@@ -14207,6 +14208,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/marked": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-3.0.2.tgz",
+      "integrity": "sha512-TMJQQ79Z0e3rJYazY0tIoMsFzteUGw9fB3FD+gzuIT3zLuG9L9ckIvUfF51apdJkcqc208jJN2KbtPbOvXtbjA==",
+      "dev": true,
+      "bin": {
+        "marked": "bin/marked"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -35347,6 +35360,12 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-3.0.2.tgz",
+      "integrity": "sha512-TMJQQ79Z0e3rJYazY0tIoMsFzteUGw9fB3FD+gzuIT3zLuG9L9ckIvUfF51apdJkcqc208jJN2KbtPbOvXtbjA==",
+      "dev": true
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
index ad553b5f8d..cbff3656a8 100644
--- a/bundles/org.openhab.ui/web/package.json
+++ b/bundles/org.openhab.ui/web/package.json
@@ -141,6 +141,7 @@
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
     "jest-vue-preprocessor": "^1.7.1",
+    "marked": "^3.0.2",
     "mini-css-extract-plugin": "^0.5.0",
     "nearley-loader": "^2.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
diff --git a/bundles/org.openhab.ui/web/src/assets/addon-store.js b/bundles/org.openhab.ui/web/src/assets/addon-store.js
new file mode 100644
index 0000000000..bc1b4a228a
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/assets/addon-store.js
@@ -0,0 +1,66 @@
+export const AddonIcons = {
+  automation: 'wand_stars',
+  binding: 'circle_grid_hex_fill',
+  persistence: 'download_circle',
+  transformation: 'function',
+  misc: 'rectangle_3_offgrid',
+  ui: 'play_rectangle',
+  voice: 'chat_bubble_2_fill'
+}
+
+export const ContentTypes = {
+  'application/java-archive': 'Java Archive',
+  'application/vnd.openhab.bundle': 'OSGi Bundle',
+  'application/vnd.openhab.feature;type=karaf': 'Karaf Feature',
+  'application/vnd.openhab.ruletemplate': 'Rule Template',
+  'application/vnd.openhab.uicomponent;type=widget': 'UI Component - Widget'
+}
+
+export const Formats = {
+  'yaml_content': 'Inline YAML Code',
+  'json_content': 'Inline JSON Code',
+  'yaml_download_url': 'Linked YAML File',
+  'json_download_url': 'Linked JSON File',
+  'jar_download_url': 'Linked JAR file',
+  'kar_download_url': 'Linked KAR file',
+  'karaf': 'Karaf'
+}
+
+export const AddonStoreTabShortcuts = [
+  {
+    id: 'bindings',
+    label: 'Bindings',
+    icon: 'circle_grid_hex',
+    subtitle: 'Connect and control hardware and online services'
+  },
+  {
+    id: 'automation',
+    label: 'Automation',
+    icon: 'sparkles',
+    subtitle: 'Scripting languages, templates and module types'
+  },
+  {
+    id: 'ui',
+    label: 'User Interfaces',
+    icon: 'play_rectangle',
+    subtitle: 'Community widgets & alternative frontends'
+  },
+  {
+    id: 'other',
+    label: 'Other Add-ons',
+    icon: 'ellipsis',
+    subtitle: 'System integrations, persistence, voice & more'
+  }
+]
+
+export function compareAddons (a1, a2) {
+  if (a1.installed && !a2.installed) return -1
+  if (a2.installed && !a1.installed) return 1
+  if (a1.verifiedAuthor && !a2.verifiedAuthor) return -1
+  if (a2.verifiedAuthor && !a1.verifiedAuthor) return 1
+  if (a1.properties && a2.properties && a1.properties.like_count >= 0 && a2.properties.like_count >= 0) return (a1.properties.like_count > a2.properties.like_count) ? 1 : -1
+  if (a1.properties && a2.properties && a1.properties.views >= 0 && a2.properties.views >= 0) return (a1.properties.views > a2.properties.views) ? 1 : -1
+  const nameOrId1 = a1.label || a1.id
+  const nameOrId2 = a2.label || a2.name
+  return nameOrId1.localeCompare(nameOrId2)
+}
diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
new file mode 100644
index 0000000000..3bd465a29d
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/addons/addon-card.vue
@@ -0,0 +1,148 @@
+<template>
+  <f7-link
+    v-if="addon"
+    class="addon-card padding-right-half" :href="addon.id">
+    <div class="addon-card-headline">
+      <div>{{ headline || autoHeadline }}</div>
+    </div>
+    <div class="addon-card-title">
+      <div class="addon-card-title-after">
+        <f7-preloader v-if="addon.pending" color="blue" />
+        <f7-button v-else-if="addon.installed" class="install-button prevent-active-state-propagation" text="Remove" color="red" round small @click="buttonClicked" />
+        <f7-button v-else class="install-button prevent-active-state-propagation" text="Install" color="blue" round small @click="buttonClicked" />
+      </div>
+      <div class="addon-card-label">
+        {{ addon.label }}
+      </div>
+      <div class="addon-card-author">
+        {{ addon.author }}
+        <f7-icon v-if="addon.verifiedAuthor" size="15" :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill" style="margin-top: -3px;" />
+      </div>
+    </div>
+    <div class="logo-square">
+      <f7-icon v-show="!logoLoaded" size="150" color="gray" :f7="addonIcon" class="card-default-icon" />
+      <img v-if="!logoError" class="lazy logo" :style="{ visibility: logoLoaded ? 'visible': 'hidden' }" ref="logo" :data-src="imageUrl">
+    </div>
+  </f7-link>
+</template>
+
+<style lang="stylus">
+.addon-card
+  display flex
+  flex-direction column
+  align-items flex-start
+  align-content flex-end
+  color inherit
+  scroll-snap-align center center
+  padding 5px 0px 0px
+  position relative
+  margin-bottom 1rem
+  .install-button
+    // --f7-button-bg-color var(--f7-color-gray)
+    --f7-button-text-transform uppercase
+    --f7-button-bg-color var(--f7-list-item-border-color)
+  .addon-card-headline
+    text-transform uppercase
+    color var(--f7-theme-color)
+    font-size 11px
+    font-weight 500
+  .addon-card-title
+    height 3.4rem
+    width 100%
+    /* display flex
+    justify-content space-between
+    box-sizing border-box */
+    font-size var(--f7-timeline-item-title-font-size) // 21px
+    font-weight var(--f7-list-media-item-title-font-weight)
+    line-height 1.75
+    .addon-card-label
+      text-overflow ellipsis
+      overflow hidden
+      white-space nowrap
+      width calc(100% - 5rem)
+    .addon-card-title-after
+      .preloader-inner .preloader-inner-left, .preloader-inner .preloader-inner-right, .preloader-inner .preloader-inner-line
+        margin-left inherit !important
+      display flex
+      float right
+      align-self top
+      min-width 70px
+      justify-content center
+      height var(--f7-button-small-height)
+      --f7-preloader-size var(--f7-button-small-height)
+  .addon-card-author
+    color var(--f7-list-item-after-text-color)
+    font-size var(--f7-list-item-subtitle-font-size) // 21px
+    font-weight var(--f7-list-item-subtitle-font-weight)
+    line-height 1.75
+    &:after
+      content ' '
+      display inline-block
+  .logo-square
+    position relative
+    background #fff
+    width 100%
+    margin-top 5px
+    // height 220px
+    border 1px solid var(--f7-list-item-border-color)
+    border-radius 5px
+    display flex
+    justify-content center
+    align-items center
+    &:after
+      content ' '
+      display block
+      padding-bottom 100%
+  .card-default-icon
+    opacity 0.2
+    position absolute
+  .logo
+    position absolute
+    top 3px
+    left 3px
+    width calc(100% - 6px)
+    height calc(100% - 6px)
+    object-fit contain
+</style>
+
+<script>
+import { AddonIcons } from '@/assets/addon-store'
+
+export default {
+  props: ['addon', 'headline'],
+  data () {
+    return {
+      logoLoaded: false,
+      logoError: false,
+      addonIcon: null
+    }
+  },
+  computed: {
+    autoHeadline () {
+      if (this.addon.properties && this.addon.properties.like_count && this.addon.properties.like_count >= 20) return 'Top'
+      if (this.addon.properties && this.addon.properties.views && this.addon.properties.views >= 1000) return 'Popular'
+      if (this.addon.properties && this.addon.properties.posts_count && this.addon.properties.posts_count >= 15) return 'Hot'
+      return ''
+    },
+    imageUrl () {
+      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
+      return 'https://www.openhab.org/logos/' + this.addon.id.substring(this.addon.id.indexOf('-') + 1) + '.png'
+    }
+  },
+  mounted () {
+    this.addonIcon = AddonIcons[this.addon.type]
+    this.$$(this.$refs.logo).once('lazy:loaded', (e) => {
+      console.log(this.addon.id + ' logo lazy loaded')
+      this.logoLoaded = true
+    })
+    this.$$(this.$refs.logo).once('lazy:error', (e) => {
+      this.logoError = true
+    })
+  },
+  methods: {
+    buttonClicked () {
+      this.$emit('addonButtonClick', this.addon)
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue b/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue
new file mode 100644
index 0000000000..c75ab67633
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/addons/addon-list-item.vue
@@ -0,0 +1,87 @@
+<template>
+  <f7-list-item
+    v-if="addon"
+    class="addon-list-item padding-right-half"
+    :title="addon.label"
+    :link="addon.id"
+    :subtitle="addon.author">
+    <f7-icon v-if="addon.verifiedAuthor" slot="subtitle" size="15" :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill" style="margin-top: -3px; margin-left: 3px" />
+    <f7-icon v-show="!logoLoaded" slot="media" size="64" color="gray" :f7="addonIcon" class="item-default-icon" />
+    <div class="item-logo" slot="media">
+      <img v-if="!logoError" class="lazy" :style="{ visibility: logoLoaded ? 'visible': 'hidden' }" ref="logo" width="54" :data-src="imageUrl">
+    </div>
+    <div slot="after">
+      <f7-preloader v-if="addon.pending" color="blue" />
+      <f7-button v-else-if="addon.installed" class="install-button prevent-active-state-propagation" text="Remove" color="red" round small @click="buttonClicked" />
+      <f7-button v-else class="install-button prevent-active-state-propagation" text="Install" color="blue" round small @click="buttonClicked" />
+    </div>
+  </f7-list-item>
+</template>
+
+<style lang="stylus">
+.addon-list-item
+  --f7-list-item-subtitle-text-color var(--f7-list-item-after-text-color)
+  .item-inner
+    padding-right 3px !important
+  .item-logo
+    display flex
+    justify-content center
+    align-items center
+    margin-left 3px
+    width 64px
+    height 64px
+    background white
+    border-radius 5px
+    img
+      max-height 54px
+  .item-default-icon
+    opacity 0.2
+    position absolute
+  .item-media i
+    padding-left 3px
+  .item-after
+    min-width 70px
+    justify-content center
+    height var(--f7-button-small-height)
+    --f7-preloader-size var(--f7-button-small-height)
+  .install-button
+    // --f7-button-bg-color var(--f7-color-gray)
+    --f7-button-text-transform uppercase
+    --f7-button-bg-color var(--f7-list-item-border-color)
+</style>
+
+<script>
+import { AddonIcons } from '@/assets/addon-store'
+
+export default {
+  props: ['addon'],
+  data () {
+    return {
+      logoLoaded: false,
+      logoError: false,
+      addonIcon: null
+    }
+  },
+  computed: {
+    imageUrl () {
+      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
+      return 'https://www.openhab.org/logos/' + this.addon.id.substring(this.addon.id.indexOf('-') + 1) + '.png'
+    }
+  },
+  mounted () {
+    this.addonIcon = AddonIcons[this.addon.type]
+    this.$$(this.$refs.logo).once('lazy:loaded', (e) => {
+      console.log(this.addon.id + ' logo lazy loaded')
+      this.logoLoaded = true
+    })
+    this.$$(this.$refs.logo).once('lazy:error', (e) => {
+      this.logoError = true
+    })
+  },
+  methods: {
+    buttonClicked () {
+      this.$emit('addonButtonClick', this.addon)
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/addons/addons-section.vue b/bundles/org.openhab.ui/web/src/components/addons/addons-section.vue
new file mode 100644
index 0000000000..8bd51ece9a
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/addons/addons-section.vue
@@ -0,0 +1,147 @@
+<template>
+  <f7-block class="addons-section" ref="addongroup">
+    <f7-block-title medium>
+      {{ title }}
+      <f7-link v-if="canExpand" color="blue" class="see-all-button margin-right" @click="expand">
+        See All
+      </f7-link>
+    </f7-block-title>
+    <f7-block-footer v-if="subtitle">
+      {{ subtitle }}
+    </f7-block-footer>
+    <div class="addons-cards">
+      <addon-card v-for="addon in featuredAddons" :key="addon.id" :addon="addon" :headline="'Featured'" @addonButtonClick="addonButtonClick" />
+    </div>
+    <div v-if="showAsCards" class="addons-cards">
+      <addon-card v-for="addon in addonsList" :key="addon.id" :addon="addon" @addonButtonClick="addonButtonClick" />
+    </div>
+    <f7-list v-else media-list ref="addonlist" class="addons-table-list" no-chevron no-hairlines>
+      <addon-list-item v-for="addon in addonsList" :key="addon.id" :addon="addon" @addonButtonClick="addonButtonClick" />
+    </f7-list>
+  </f7-block>
+</template>
+
+<style lang="stylus">
+.addons-section
+  margin-top 2rem
+  .see-all-button
+    float right
+    font-size 16px
+    font-weight normal
+    padding-top 8px
+    vertical-align baseline
+.addons-table-list
+  --f7-list-bg-color transparent
+  --f7-list-item-title-white-space normal
+  --f7-list-item-text-max-lines 1
+  --f7-list-item-text-font-size 13px
+  --f7-list-link-pressed-bg-color transparent
+  --f7-list-item-title-line-height 1.2
+  .item-link .item-inner
+    padding-right 0
+  .item-content
+    padding-left 0px
+  ul
+    display flex
+    flex-shrink 0
+    flex-direction row
+    align-content flex-start
+    flex-wrap wrap
+    overflow auto
+    padding-left calc(var(--f7-safe-area-left) + var(--f7-list-item-padding-horizontal))
+    scroll-snap-type x mandatory
+    scrollbar-width none
+    &::-webkit-scrollbar
+      display none
+      opacity 0
+    @media (min-width 768px)
+      scroll-padding-left calc(20px + var(--f7-safe-area-left))
+    li
+      width 100%
+      @media (min-width 768px)
+        width 50%
+      @media (min-width 1281px)
+        width 33.333%
+      @media (min-width 1601px)
+        width 25%
+.addons-cards
+    margin-top 1rem
+    display flex
+    flex-shrink 0
+    flex-direction row
+    align-content flex-start
+    align-items flex-end
+    flex-wrap wrap
+    padding-left calc(var(--f7-safe-area-left) + var(--f7-list-item-padding-horizontal))
+    .addon-card
+      width 100%
+      @media (min-width: 481px)
+        width 50%
+      @media (min-width: 768px)
+        width 33.333%
+      @media (min-width: 1281px)
+        width 25%
+      @media (min-width: 1601px)
+        width 20%
+</style>
+
+<script>
+import AddonListItem from './addon-list-item.vue'
+import AddonCard from './addon-card.vue'
+import { compareAddons } from '@/assets/addon-store'
+
+export default {
+  props: ['addons', 'title', 'subtitle', 'showAll', 'featured', 'showAsCards'],
+  components: {
+    AddonListItem,
+    AddonCard
+  },
+  data () {
+    return {
+      collapsed: true
+    }
+  },
+  computed: {
+    featuredAddons () {
+      if (this.featured) {
+        return this.addons.filter(a => this.featured.indexOf(a.id) >= 0).sort(compareAddons)
+      }
+      return null
+    },
+    notFeaturedAddons () {
+      return (this.featuredAddons && this.featuredAddons.length)
+        ? this.addons.filter(a => this.featuredAddons.indexOf(a) < 0).sort(compareAddons)
+        : [...this.addons].sort(compareAddons)
+    },
+    addonCollapsedLimit () {
+      const installedCount = this.notFeaturedAddons.filter(a => a.installed).length
+      if (installedCount >= 22) return 36
+      if (installedCount >= 10) return 24
+      return 12
+    },
+    addonsList () {
+      if (this.collapsed) return this.notFeaturedAddons.slice(0, this.addonCollapsedLimit)
+      return this.notFeaturedAddons
+    },
+    canExpand () {
+      if (!this.collapsed) return false
+      if (this.addons.length < this.addonCollapsedLimit) return false
+      return true
+    }
+  },
+  methods: {
+    expand () {
+      this.collapsed = false
+      setTimeout(() => {
+        this.$f7.lazy.create('.page-addon-store')
+      }, 100)
+    },
+    addonButtonClick (addon) {
+      this.$emit('addonButtonClick', addon)
+    }
+  },
+  mounted () {
+    if (this.showAll) this.expand()
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index af75efaa2d..1e764f5f01 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -13,7 +13,6 @@
             <img src="@/images/openhab-logo.svg" type="image/svg+xml" width="196px">
           </div>
         </f7-link>
-        </f7-link>
         <f7-list v-if="ready">
           <f7-list-item v-if="$store.getters.apiEndpoint('ui') && (!pages || !pages.length)">
             <span><em>{{ $t('sidebar.noPages') }}</em></span>
diff --git a/bundles/org.openhab.ui/web/src/css/app.styl b/bundles/org.openhab.ui/web/src/css/app.styl
index 37d74e9931..b2c344127a 100644
--- a/bundles/org.openhab.ui/web/src/css/app.styl
+++ b/bundles/org.openhab.ui/web/src/css/app.styl
@@ -255,6 +255,8 @@ html
 
 #framework7-root:not(.theme-dark) .page-home:not(.standard-background),
 #framework7-root:not(.theme-dark) .page-about:not(.standard-background),
+#framework7-root:not(.theme-dark) .page-addon-store:not(.standard-background),
+#framework7-root:not(.theme-dark) .page-addon-details:not(.standard-background),
 //#framework7-root:not(.theme-dark) .page-settings
   --f7-page-bg-color #fff
 
diff --git a/bundles/org.openhab.ui/web/src/js/routes.js b/bundles/org.openhab.ui/web/src/js/routes.js
index 5734e8dd35..48e5d461d2 100644
--- a/bundles/org.openhab.ui/web/src/js/routes.js
+++ b/bundles/org.openhab.ui/web/src/js/routes.js
@@ -11,6 +11,8 @@ const ServiceSettingsPage = () => import(/* webpackChunkName: "admin-base" */ '.
 const AddonsListPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-list.vue')
 const AddonsAddPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-add.vue')
 const AddonsConfigureBindingPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/binding-config.vue')
+const AddonsStorePage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addons-store.vue')
+const AddonDetailsPage = () => import(/* webpackChunkName: "admin-base" */ '../pages/settings/addons/addon-details.vue')
 
 const ItemsListPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/items-list-vlist.vue')
 const ItemDetailsPage = () => import(/* webpackChunkName: "admin-config" */ '../pages/settings/items/item-details.vue')
@@ -231,12 +233,12 @@ export default [
         ]
       },
       {
-        path: 'addons/:addonType',
-        async: loadAsync(AddonsListPage),
+        path: 'addons',
+        async: loadAsync(AddonsStorePage),
         routes: [
           {
-            path: 'add',
-            async: loadAsync(AddonsAddPage)
+            path: ':addonId',
+            async: loadAsync(AddonDetailsPage)
           },
           {
             path: ':bindingId/config',
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details-sheet.vue b/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details-sheet.vue
index cac92ac229..49c49da888 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details-sheet.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details-sheet.vue
@@ -30,8 +30,8 @@
       </f7-block>
       <f7-block>
         <f7-list>
-          <f7-list-item v-if="bindingInfo.author" title="Author" :after="bindingInfo.author" />
-          <f7-list-item title="Version" :after="addon.version" />
+          <f7-list-item v-if="addon.author" title="Author" :after="addon.author" />
+          <f7-list-item v-if="addon.version" title="Version" :after="addon.version" />
         </f7-list>
         <f7-list>
           <f7-list-button v-if="bindingInfo.configDescriptionURI" color="blue" :href="bindingInfo.id + '/config'" title="Configure" />
@@ -93,7 +93,7 @@
 
 <script>
 export default {
-  props: ['addonId', 'opened'],
+  props: ['addonId', 'serviceId', 'opened'],
   data () {
     return {
       addon: {},
@@ -110,7 +110,7 @@ export default {
           return
         }
         self.$f7.preloader.show()
-        this.$oh.api.get('/rest/addons/' + this.addonId).then(data => {
+        this.$oh.api.get('/rest/addons/' + this.addonId + (this.serviceId ? '?serviceId=' + this.serviceId : '')).then(data => {
           this.addon = data
 
           if (this.addon.type === 'binding' && this.addon.installed) {
@@ -148,12 +148,12 @@ export default {
       self.$refs.sheet.f7Sheet.stepToggle('.demo-sheet-swipe-to-step')
     },
     install () {
-      this.$oh.api.post('/rest/addons/' + this.addonId + '/install', {}, 'text').then((data) => {
+      this.$oh.api.post('/rest/addons/' + this.addonId + '/install' + (this.serviceId ? '?serviceId=' + this.serviceId : ''), {}, 'text').then((data) => {
         this.$emit('install', this.addon)
       })
     },
     uninstall () {
-      this.$oh.api.post('/rest/addons/' + this.addonId + '/uninstall', {}, 'text').then((data) => {
+      this.$oh.api.post('/rest/addons/' + this.addonId + '/uninstall' + (this.serviceId ? '?serviceId=' + this.serviceId : ''), {}, 'text').then((data) => {
         this.$emit('uninstall', this.addon)
       })
     }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details.vue b/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details.vue
new file mode 100644
index 0000000000..a501b3830a
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-details.vue
@@ -0,0 +1,457 @@
+<template>
+  <f7-page @page:beforein="onPageBeforeIn" @page:beforeout="onPageBeforeOut" ref="addondetails" class="page-addon-details">
+    <f7-navbar :transparent="true" back-link="Back" class="addon-details-nav">
+      <f7-nav-title v-if="addon">
+        {{ addon.label }}
+      </f7-nav-title>
+    </f7-navbar>
+    <f7-block class="block-narrow addon-details" v-if="ready && addon">
+      <f7-row>
+        <f7-col class="margin-left">
+          <div class="addon-header">
+            <div class="logo-container">
+              <f7-icon v-show="!logoLoaded" size="100" color="gray" :f7="addonIcon" style="opacity: 0.2; position: absolute;" />
+              <img v-if="!logoError" class="logo lazy" :style="{ visibility: logoLoaded ? 'visible': 'hidden' }" ref="logo" :data-src="imageUrl">
+            </div>
+            <div class="addon-header-content">
+              <div class="addon-header-title">
+                {{ addon.label }}
+              </div>
+              <div class="addon-header-author">
+                {{ addon.author }}
+                <f7-icon v-if="addon.verifiedAuthor" :color="$f7.data.themeOptions.dark === 'dark' ? 'white' : 'blue'" f7="checkmark_seal_fill" />
+              </div>
+              <div class="addon-header-actions">
+                <f7-preloader v-if="isPending(addon)" color="blue" />
+                <f7-button v-else-if="addon.installed" class="install-button prevent-active-state-propagation" text="Remove" color="red" round small fill @click="openAddonPopup" />
+                <f7-button v-else class="install-button prevent-active-state-propagation" text="Install" color="blue" round small fill @click="openAddonPopup" />
+              </div>
+            </div>
+          </div>
+          <div v-if="addon.properties" class="addon-header-stats padding margin-top">
+            <f7-link v-if="addon.properties.like_count >= 0" :href="addon.link" target="_blank" external class="addon-header-stat">
+              <f7-icon f7="heart_fill" size="24" />
+              {{ addon.properties.like_count }}
+              <div class="addon-header-stat-sub">
+                Likes
+              </div>
+            </f7-link>
+            <f7-link v-if="addon.properties.views >= 0" :href="addon.link" target="_blank" external class="addon-header-stat">
+              <f7-icon f7="eye_fill" size="24" />
+              {{ addon.properties.views }}
+              <div class="addon-header-stat-sub">
+                Views
+              </div>
+            </f7-link>
+            <f7-link v-if="addon.properties.posts_count >= 0" :href="addon.link" target="_blank" external class="addon-header-stat">
+              <f7-icon f7="chat_bubble_fill" size="24" />
+              {{ addon.properties.posts_count }}
+              <div class="addon-header-stat-sub">
+                Posts
+              </div>
+            </f7-link>
+          </div>
+        </f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col>
+          <f7-block strong class="addon-description" v-if="descriptionReady">
+            <div v-show="descriptionExpanded" v-html="parsedDescription" class="addon-description-text" />
+            <div v-show="!descriptionExpanded" v-html="addonDescription" class="addon-description-text" />
+            <div v-show="!descriptionExpanded" class="text-align-right">
+              <f7-link @click="descriptionExpanded = true">
+                more
+              </f7-link>
+            </div>
+          </f7-block>
+          <f7-block v-else class="skeleton-text skeleton-effect-blink">
+            <p>
+              Lorem ipsum dolor sit amet, an labore inermis est.
+              Mel ut dicant tamquam commune, duo id accumsan eleifend tractatos, ius purto vitae fabulas cu.
+              Te his vide omnis qualisque, in duo soluta persecuti instructior. Ex dicit detraxit voluptaria est. Aperiri reformidans comprehensam in vis.
+            </p>
+            <p>
+              Quo quas rebum dicta ad, in erant eruditi vim.
+              Mel no primis everti voluptatum, id utamur voluptatibus mea.
+              Nam deseruisse expetendis cotidieque at, vis oratio utroque cu.
+              Eu duo quod fuisset, ne fabulas hendrerit argumentum pro.
+              Errem dictas his ea, eos interesset efficiantur ei.
+            </p>
+          </f7-block>
+        </f7-col>
+      </f7-row>
+      <f7-row>
+        <f7-col>
+          <f7-block-title class="margin-left margin-bottom-half" medium>
+            Information
+          </f7-block-title>
+          <f7-list v-if="ready && information.length > 0" class="information-table">
+            <f7-list-item v-for="line in information" :key="line.id"
+                          :title="line.title" :after="line.value"
+                          :link="line.linkUrl" external no-chevron target="_blank">
+              <f7-icon slot="after" v-if="line.linkIcon" :f7="line.linkIcon" />
+            </f7-list-item>
+          </f7-list>
+        </f7-col>
+      </f7-row>
+    </f7-block>
+    <addon-details-sheet
+      v-if="ready"
+      :addon-id="realAddonId"
+      :service-id="serviceId"
+      :opened="addonPopupOpened"
+      @closed="addonPopupOpened = false"
+      @install="installAddon"
+      @uninstall="uninstallAddon" />
+  </f7-page>
+</template>
+
+<style lang="stylus">
+.theme-filled .addon-details-nav.navbar:not(.navbar-transparent-visible) .link
+  color var(--f7-theme-color)
+  transition color 0.3s
+.theme-filled .addon-details-nav.navbar.navbar-transparent-visible .link
+  color var(--f7-navbar-link-color)
+  transition color 0.3s
+.addon-details
+  width calc(100%)
+  .addon-header
+    display flex
+    align-items stretch
+    .logo-container
+      display flex
+      justify-content center
+      align-items center
+      width 118px
+      height 118px
+      border-radius 22%
+      margin-right var(--f7-block-padding-horizontal)
+      flex-shrink 0
+      background white
+      border 1px solid rgba(0, 0, 0, 0.1)
+      .logo
+        max-width 100px
+        max-height 100px
+    @media (min-width 768px)
+      .logo-container
+        width 191px
+        height 191px
+        .logo
+          max-width 165px
+          max-height 165px
+    .addon-header-content
+      display flex
+      flex-direction column
+      width calc(100% - 2*var(--f7-block-padding-horizontal))
+      flex-shrink 10
+      min-width 0
+      line-height 27px
+      .addon-header-title
+        font-size 22px
+        font-weight 600
+      @media (min-width 768px)
+        .addon-header-title
+          font-size 27px
+          line-height normal
+      .addon-header-author
+        font-size 16px
+        font-weight 600
+        color var(--f7-list-item-after-text-color)
+        i
+          font-size 16px
+      @media (min-width 768px)
+        .addon-header-author
+          font-size 20px
+          i
+            font-size 20px
+    .addon-header-actions
+      display flex
+      justify-content space-between
+      margin-top auto
+      margin-bottom auto
+      .install-button
+        --f7-button-text-transform uppercase
+        min-width 100px
+        font-size 16px
+  .addon-header-stats
+    width calc(100% - 2*var(--f7-block-padding-horizontal))
+    justify-content center
+    display flex
+    opacity 0.55
+    align-items center
+    position relative
+    --f7-theme-color var(--f7-color-gray)
+    .addon-header-stat
+      display flex
+      flex-direction column
+      align-items center
+      font-size 18px
+      font-weight bold
+      margin-right 4px
+      min-width 90px
+      .addon-header-stat-sub
+        font-size 10px
+        text-transform uppercase
+  .addon-description
+    --f7-block-strong-bg-color transparent
+    width calc(100%)
+    --f7-theme-color var(--f7-color-blue)
+  .addon-description-text
+    overflow-x clip
+    .emoji
+      height 1rem
+    .lightbox-wrapper .meta
+      display none
+    pre
+      overflow auto
+      width calc(100% - 2*var(--f7-block-padding-horizontal-half))
+      max-height 70vh
+      color var(--f7-block-footer-text-color)
+    img
+      max-width calc(100%)
+      height auto
+  .information-table
+    --f7-list-bg-color transparent
+    --f7-theme-color var(--f7-color-blue)
+    .item-link
+      --f7-list-item-title-text-color var(--f7-theme-color)
+      --f7-list-item-after-text-color: var(--f7-theme-color)
+</style>
+
+<script>
+import AddonStoreMixin from './addon-store-mixin'
+import { AddonIcons, ContentTypes, Formats } from '@/assets/addon-store'
+import dayjs from 'dayjs'
+
+export default {
+  mixins: [AddonStoreMixin],
+  props: ['addonId'],
+  data () {
+    return {
+      addon: null,
+      ready: false,
+      logoLoaded: false,
+      logoError: false,
+      addonIcon: null,
+      descriptionReady: false,
+      parsedDescription: '',
+      descriptionExpanded: false
+    }
+  },
+  computed: {
+    realAddonId () {
+      if (!this.addon) return null
+      return (this.addon.id.indexOf(':') > 0) ? this.addon.id.substring(this.addon.id.indexOf(':') + 1) : this.addon.id
+    },
+    serviceId () {
+      if (!this.addon) return null
+      return (this.addon.id.indexOf(':') > 0) ? this.addon.id.substring(0, this.addon.id.indexOf(':')) : undefined
+    },
+    imageUrl () {
+      if (!this.addon) return null
+      if (this.addon.imageLink) return this.addon.imageLink.replace(/^\/\//, 'https://')
+      return 'https://www.openhab.org/logos/' + this.addon.id.substring(this.addon.id.indexOf('-') + 1) + '.png'
+    },
+    addonDescription () {
+      if (!this.descriptionReady) return null
+      if (!this.addon) return null
+      if (this.addon.description) return this.addon.description
+      if (this.parsedDescription) {
+        const firstHeading = this.parsedDescription.match(/<h\d/m)
+        if (firstHeading && firstHeading.index > 0) return this.parsedDescription.substring(0, firstHeading.index)
+        return this.parsedDescription
+      }
+      return 'No description found'
+    },
+    information () {
+      let info = []
+      if (!this.ready || !this.addon) return info
+      const marketplace = this.addon.id.indexOf('marketplace:') === 0
+
+      info.push({
+        id: 'provider',
+        title: 'Provided By',
+        value: (marketplace) ? 'Community Marketplace' : 'openHAB Distribution'
+      })
+
+      if (this.addon.version) {
+        info.push({
+          id: 'version',
+          title: 'Version',
+          value: this.addon.version
+        })
+      }
+
+      info.push({
+        id: 'type',
+        title: 'Type',
+        value: this.addon.type
+      })
+
+      info.push({
+        id: 'contentType',
+        title: 'Content Type',
+        value: ContentTypes[this.addon.contentType] || this.addon.contentType
+      })
+
+      let format = Formats.karaf
+      if (marketplace && Object.keys(this.addon.properties).length > 0) {
+        for (const property in this.addon.properties) {
+          if (Formats[property]) format = Formats[property]
+        }
+      }
+
+      info.push({
+        id: 'format',
+        title: 'Provisioned With',
+        value: format
+      })
+
+      if (this.addon.properties && this.addon.properties.created_at) {
+        info.push({
+          id: 'createdAt',
+          title: 'Created At',
+          value: this.addon.properties.created_at
+        })
+      }
+
+      if (this.addon.properties && this.addon.properties.updated_at) {
+        info.push({
+          id: 'updated',
+          title: 'Updated At',
+          value: this.addon.properties.updated_at
+        })
+      }
+
+      if (marketplace) {
+        info.push({
+          id: 'communityTopicLink',
+          title: 'Community Topic',
+          linkIcon: 'chat_bubble_2_fill',
+          linkUrl: this.addon.link
+        })
+      } else {
+        info.push({
+          id: 'documentationLink',
+          title: 'Documentation',
+          linkIcon: 'question_circle_fill',
+          linkUrl: `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/addons/${this.addon.type.replace('misc', 'integrations').replace('binding', 'bindings').replace('transformation', 'transformations')}/${this.addon.id.substring(this.addon.id.indexOf('-') + 1)}` // this.addon.link
+        })
+        info.push({
+          id: 'issuesLink',
+          title: 'Issues',
+          linkIcon: 'exclamationmark_bubble_fill',
+          linkUrl: 'https://github.com/openhab/openhab-addons/issues?q=is%3Aopen+' + this.addon.id.substring(this.addon.id.indexOf('-') + 1)
+        })
+        info.push({
+          id: 'discussionsLink',
+          title: 'Community Discussions',
+          linkIcon: 'chat_bubble_2_fill',
+          linkUrl: 'https://community.openhab.org/search?q=' + this.addon.id.substring(this.addon.id.indexOf('-') + 1)
+        })
+      }
+
+      return info
+    }
+  },
+  methods: {
+    onPageBeforeIn () {
+      if (this.ready) return
+      this.load()
+    },
+    onPageBeforeOut () {
+      this.stopEventSource()
+    },
+    load () {
+      this.stopEventSource()
+      let addonId = this.addonId
+      let serviceId = null
+      if (addonId.indexOf('marketplace:') === 0) {
+        serviceId = 'marketplace'
+        addonId = addonId.substring(addonId.indexOf(':') + 1)
+      }
+      this.$oh.api.get('/rest/addons/' + addonId + (serviceId ? '?serviceId=' + serviceId : '')).then((data) => {
+        this.resetPending()
+        this.$set(this, 'addon', data)
+        this.addonIcon = AddonIcons[this.addon.type]
+        this.ready = true
+        this.processDescription()
+        this.startEventSource()
+
+        setTimeout(() => {
+          this.$$(this.$refs.logo).once('lazy:loaded', (e) => {
+            console.log(this.addon.id + ' logo lazy loaded')
+            this.logoLoaded = true
+          })
+          this.$$(this.$refs.logo).once('lazy:error', (e) => {
+            this.logoError = true
+          })
+          this.$f7.lazy.create('.page-addon-details')
+        })
+      })
+    },
+    processDescription () {
+      if (!this.addon.description && this.addon.author === 'openHAB') {
+        // assuming the add-on is an official one (distribution), try to fetch the documentation from GitHub
+        let docsBranch = 'final'
+        if (this.$store.state.runtimeInfo.buildString === 'Release Build') docsBranch = 'final-stable'
+        let addonTypeFolder = '_addons_' + this.addon.type
+        if (this.addon.type === 'misc') addonTypeFolder = '_addons_io'
+        if (this.addon.type !== 'automation') addonTypeFolder += 's'
+        let addonId = this.addon.id.substring(this.addon.id.indexOf('-') + 1)
+        let docUrl = (this.$store.state.runtimeInfo.buildString === 'Release Build') ? 'https://www.openhab.org' : 'https://next.openhab.org'
+        docUrl += `/addons/${this.addon.type}/${addonId}`
+        let docSrcUrl = `https://raw.githubusercontent.com/openhab/openhab-docs/${docsBranch}/${addonTypeFolder}/${addonId}`
+
+        fetch(docSrcUrl + '/readme.md').then((readme) => {
+          readme.text().then((text) => {
+            import('marked').then((marked) => {
+              const frontmatterSeparators = [...text.matchAll(/^---$/gm)]
+              let body
+
+              if (frontmatterSeparators.length !== 2) {
+                body = '<p>The description is not available for this add-on.</p><h3>Debug Information</h3><blockquote>' + text + '</blockquote>'
+              } else {
+                const frontmatter = text.substring(4, frontmatterSeparators[1].index)
+                body = marked.default(text.substring(frontmatterSeparators[1].index + 4))
+
+                // perform a few replaces on HTML body for Markdown readmes on GitHub
+                body = body.replace(/<p>{% include base.html %}<\/p>\n/gm, '')
+                body = body.replace(/<h1 .*$/gm, '')
+                body = body.replace(/<pre>/gm, '<div class="block block-strong no-padding"><pre class="padding-half">')
+                body = body.replace(/<\/pre>/gm, '</pre></div>')
+                body = body.replace(/<table>/gm, '<div class="data-table"><table>')
+                body = body.replace(/<\/table>/gm, '</table></div>')
+                body = body.replace(/<a href="http/gm, '<a class="external" target="_blank" href="http')
+                body = body.replace(/<img src="doc/gm, '<img class="lazy lazy-fade-in" data-src="' + docSrcUrl + '/doc')
+                body = body.replace(/<img src="contrib/gm, '<img class="lazy lazy-fade-in" data-src="' + docSrcUrl + '/contrib')
+              }
+
+              this.parsedDescription = body
+              this.descriptionReady = true
+              setTimeout(() => { this.$f7.lazy.create('.addon-description-text') })
+            })
+          })
+        }).catch((err) => {
+          this.parsedDescription = '<p>The description is unavailable for this add-on.</p><h3>Debug Information</h3><blockquote>' + err + '</blockquote>'
+          this.descriptionReady = true
+          setTimeout(() => { this.$f7.lazy.create('.addon-description-text') })
+        })
+      } else {
+        // perform a few replaces for Discourse "cooked" HTML
+        let body = this.addon.detailedDescription
+        if (!body) return
+        body = body.replace(/<pre>/gm, '<div class="block block-strong no-padding"><pre class="padding-half">')
+        body = body.replace(/<\/pre>/gm, '</pre></div>')
+        body = body.replace(/<table>/gm, '<div class="data-table"><table>')
+        body = body.replace(/<\/table>/gm, '</table></div>')
+        body = body.replace(/<a class="lightbox" href="/gm, '<a class="external" target="_blank" href="')
+        body = body.replace(/<img src="\/\/community-openhab-org/gm, '<img class="lazy lazy-fade-in" data-src="//community-openhab-org')
+        this.parsedDescription = body
+        this.descriptionReady = true
+        setTimeout(() => { this.$f7.lazy.create('.addon-description-text') })
+      }
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-store-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-store-mixin.js
new file mode 100644
index 0000000000..83a4c47e55
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/addons/addon-store-mixin.js
@@ -0,0 +1,84 @@
+import AddonDetailsSheet from './addon-details-sheet.vue'
+
+export default {
+  components: {
+    AddonDetailsSheet
+  },
+  data () {
+    return {
+      addons: {},
+      currentAddon: null,
+      currentAddonId: null,
+      currentServiceId: null,
+      ready: false,
+      initSearchbar: false,
+      addonPopupOpened: false,
+      currentlyInstalling: [],
+      currentlyUninstalling: []
+    }
+  },
+  methods: {
+    openAddonPopup (addonId, serviceId, addon) {
+      this.currentAddonId = addonId
+      this.currentServiceId = serviceId
+      if (addon) this.currentAddon = addon
+      this.addonPopupOpened = true
+    },
+    installAddon (addon) {
+      this.addonPopupOpened = false
+      this.currentlyInstalling.push(addon.id)
+      if (this.currentAddon) this.$set(this.currentAddon, 'pending', 'INSTALL')
+    },
+    uninstallAddon (addon) {
+      this.addonPopupOpened = false
+      this.currentlyUninstalling.push(addon.id)
+      if (this.currentAddon) this.$set(this.currentAddon, 'pending', 'UNINSTALL')
+    },
+    isInstalling (addon) {
+      return this.currentlyInstalling.indexOf(addon.id) >= 0
+    },
+    isUninstalling (addon) {
+      return this.currentlyUninstalling.indexOf(addon.id) >= 0
+    },
+    isPending (addon) {
+      return this.isInstalling(addon) || this.isUninstalling(addon)
+    },
+    resetPending () {
+      this.$set(this, 'currentlyInstalling', [])
+      this.$set(this, 'currentlyUninstalling', [])
+      this.$set(this, 'currentAddon', null)
+      this.currentAddonId = null
+      this.currentServiceId = null
+    },
+    startEventSource () {
+      this.eventSource = this.$oh.sse.connect('/rest/events?topics=openhab/addons/*/*', null, (event) => {
+        const topicParts = event.topic.split('/')
+        switch (topicParts[3]) {
+          case 'installed':
+          case 'uninstalled':
+            this.stopEventSource()
+            this.load()
+            this.$f7.emit('addonChange', null)
+            break
+          case 'failed':
+            this.$f7.toast.create({
+              text: `Installation of add-on ${topicParts[2]} failed`,
+              closeButton: true,
+              destroyOnClose: true
+            }).open()
+            this.stopEventSource()
+            this.load()
+            break
+        }
+      }, () => {
+        // in case of error, maybe the SSE connection was closed by the add-ons change itself - try reloading to refresh
+        this.stopEventSource()
+        this.load()
+      })
+    },
+    stopEventSource () {
+      this.$oh.sse.close(this.eventSource)
+      this.eventSource = null
+    }
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-store.vue b/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-store.vue
new file mode 100644
index 0000000000..7b870e51fe
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/addons/addons-store.vue
@@ -0,0 +1,230 @@
+<template>
+  <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" ref="addonstore" class="page-addon-store">
+    <f7-navbar large :large-transparent="true" back-link="Back" back-link-url="/settings/" back-link-force class="store-nav">
+      <f7-nav-title-large class="store-title-large">
+        <span v-if="currentTab === 'bindings'">Bindings</span>
+        <span v-if="currentTab === 'automation'">Automation</span>
+        <span v-if="currentTab === 'ui'">User Interfaces</span>
+        <span v-if="currentTab === 'other'">Other Add-ons</span>
+        <span v-if="currentTab === 'search'">Search</span>
+      </f7-nav-title-large>
+      <f7-nav-title>
+        <span v-if="currentTab === 'bindings'">Bindings</span>
+        <span v-if="currentTab === 'automation'">Automation</span>
+        <span v-if="currentTab === 'ui'">User Interfaces</span>
+        <span v-if="currentTab === 'other'">Other Add-ons</span>
+        <span v-if="currentTab === 'search'">Search</span>
+      </f7-nav-title>
+      <f7-nav-right>
+        <f7-link
+          v-show="currentTab === 'search'"
+          class="searchbar-enable"
+          data-searchbar=".searchbar-store"
+          icon-ios="f7:search_strong"
+          icon-aurora="f7:search_strong"
+          icon-md="material:search" />
+      </f7-nav-right>
+      <f7-searchbar
+        ref="storeSearchbar"
+        class="searchbar-store"
+        placeholder="Search add-ons"
+        expandable
+        custom-search
+        search-in=".item-title"
+        :disable-button="!$theme.aurora"
+        @searchbar:search="search" @searchbar:clear="clearSearch" />
+    </f7-navbar>
+    <f7-toolbar tabbar labels bottom>
+      <f7-link tab-link @click="switchTab('bindings')" :tab-link-active="currentTab === 'bindings'" icon-ios="f7:circle_grid_hex_fill" icon-aurora="f7:circle_grid_hex_fill" icon-md="f7:circle_grid_hex_fill" text="Bindings" />
+      <f7-link tab-link @click="switchTab('automation')" :tab-link-active="currentTab === 'automation'" icon-ios="f7:sparkles" icon-aurora="f7:sparkles" icon-md="f7:sparkles" text="Automation" />
+      <f7-link tab-link @click="switchTab('ui')" :tab-link-active="currentTab === 'ui'" icon-ios="f7:play_rectangle_fill" icon-aurora="f7:play_rectangle_fill" icon-md="f7:play_rectangle_fill" text="UI" />
+      <f7-link tab-link @click="switchTab('other')" :tab-link-active="currentTab === 'other'" icon-ios="f7:ellipsis" icon-aurora="f7:ellipsis" icon-md="f7:ellipsis" text="Other" />
+      <f7-link tab-link @click="switchTab('search')" :tab-link-active="currentTab === 'search'" icon-ios="f7:search" icon-aurora="f7:search" icon-md="f7:search" text="Search" />
+    </f7-toolbar>
+    <f7-block v-if="!ready" class="text-align-center">
+      <f7-block-title>
+        <f7-preloader />
+        <div>Loading...</div>
+      </f7-block-title>
+    </f7-block>
+    <div v-show="currentTab === 'bindings'">
+      <addons-section
+        v-if="addons && addons.karaf"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.karaf.filter((a) => a.type === 'binding')"
+        :title="'openHAB Distribution'"
+        :subtitle="'Official bindings maintained by the openHAB project'" />
+      <addons-section
+        v-if="addons && addons.marketplace"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.marketplace.filter((a) => a.type === 'binding')"
+        :title="'Community Marketplace'"
+        :subtitle="'Bindings independently released by the community'" />
+    </div>
+    <div v-show="currentTab === 'automation'">
+      <addons-section
+        v-if="addons && addons.marketplace"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.marketplace.filter((a) => a.type === 'automation')"
+        :title="'Rule Templates'"
+        :subtitle="'Shared by the community to bootstrap your automation'" />
+      <addons-section
+        v-if="addons && addons.karaf"
+        :addons="addons.karaf.filter((a) => a.type === 'automation')"
+        :title="'Automation Add-ons'"
+        :subtitle="'Add functionality with add-ons from the distribution'" />
+    </div>
+    <div v-show="currentTab === 'ui'">
+      <addons-section
+        v-if="addons && addons.marketplace" v-show="currentTab === 'ui'"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.marketplace.filter((a) => a.type === 'ui' && a.contentType === 'application/vnd.openhab.uicomponent;type=widget')"
+        :show-as-cards="true"
+        :title="'Widgets for the Main UI'"
+        :subtitle="'Extend your pages with these community-designed widgets'" />
+      <addons-section
+        v-if="addons && addons.karaf" v-show="currentTab === 'ui'" :show-all="true"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.karaf.filter((a) => a.type === 'ui')"
+        :title="'Other User Interfaces'"
+        :subtitle="'Official add-ons from the distribution'" />
+    </div>
+    <div v-show="currentTab === 'other'">
+      <addons-section
+        v-if="addons && addons.karaf" :show-all="true"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.karaf.filter((a) => a.type === 'misc')"
+        :title="'System Integrations'"
+        :featured="['misc-openhabcloud', 'misc-homekit', 'misc-metrics']"
+        :subtitle="'Integrate openHAB with external systems'" />
+      <addons-section
+        v-if="addons && addons.karaf"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.karaf.filter((a) => a.type === 'persistence')" :show-all="true"
+        :title="'Persistence Services'"
+        :subtitle="'Backend connectors to store historical data'" />
+      <addons-section
+        v-if="addons && addons.karaf"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.karaf.filter((a) => a.type === 'transformation')" :show-all="true"
+        :title="'Transformation Add-ons'"
+        :subtitle="'Backend connectors to store historical data'" />
+      <addons-section
+        v-if="addons && addons.karaf" :show-all="true"
+        @addonButtonClick="addonButtonClick"
+        :addons="addons.karaf.filter((a) => a.type === 'voice')"
+        :title="'Voice &amp; Speech'"
+        :subtitle="'Convert between text and speech, interpret human language queries'" />
+    </div>
+    <div v-show="currentTab === 'search'" style="padding-top: 2rem">
+      <addons-section
+        v-if="addons && searchResults.length"
+        :show-as-cards="searchResults.length <= 3"
+        @addonButtonClick="addonButtonClick"
+        :title="searchResults.length + ' result' + ((searchResults.length === 1) ? '' : 's')"
+        :addons="searchResults" />
+    </div>
+    <addon-details-sheet
+      v-if="ready"
+      :addon-id="currentAddonId"
+      :service-id="currentServiceId"
+      :opened="addonPopupOpened"
+      @closed="addonPopupOpened = false"
+      @install="installAddon"
+      @uninstall="uninstallAddon" />
+  </f7-page>
+</template>
+
+<style lang="stylus">
+.theme-filled .store-nav .store-title-large .title-large-text
+  color var(--f7-text-color)
+.theme-filled .store-nav.navbar-large:not(.navbar-large-collapsed) .link
+  color var(--f7-theme-color)
+  transition color 0.3s
+.theme-filled .store-nav.navbar-large.navbar-large-collapsed .link
+  color var(--f7-navbar-link-color)
+  transition color 0.3s
+</style>
+
+<script>
+import AddonStoreMixin from './addon-store-mixin'
+import AddonsSection from '@/components/addons/addons-section.vue'
+
+export default {
+  mixins: [AddonStoreMixin],
+  props: ['initialTab'],
+  components: {
+    AddonsSection
+  },
+  data () {
+    return {
+      currentTab: this.initialTab || 'bindings',
+      services: null,
+      ready: false,
+      searchResults: []
+    }
+  },
+  methods: {
+    onPageAfterIn () {
+      this.load()
+    },
+    onPageBeforeOut () {
+      this.stopEventSource()
+    },
+    load () {
+      this.stopEventSource()
+      this.$oh.api.get('/rest/addons/services').then((data) => {
+        this.services = data
+        Promise.all(this.services.map((s) => this.$oh.api.get('/rest/addons?serviceId=' + s.id))).then((data2) => {
+          data2.forEach((addons, idx) => {
+            this.$set(this.addons, data[idx].id, data2[idx])
+          })
+          console.log(this.addons)
+          this.ready = true
+          this.startEventSource()
+          setTimeout(() => {
+            this.$f7.lazy.create('.page-addon-store')
+          }, 100)
+          if (this.currentTab === 'search') {
+            const searchbar = this.$refs.storeSearchbar.f7Searchbar
+            const filterQuery = searchbar.query
+            this.search(this.$refs.storeSearchbar.$el, filterQuery)
+          }
+        })
+      })
+    },
+    switchTab (tab) {
+      this.currentTab = tab
+      this.$f7.lazy.create('.page-addon-store')
+      if (this.currentTab === 'search') {
+        this.$refs.storeSearchbar.enable()
+        setTimeout(() => {
+          this.$refs.storeSearchbar.f7Searchbar.$inputEl.focus()
+        }, 500)
+      } else {
+        this.$refs.storeSearchbar.disable()
+      }
+    },
+    addonButtonClick (addon) {
+      const realAddonId = (addon.id.indexOf(':') > 0) ? addon.id.substring(addon.id.indexOf(':') + 1) : addon.id
+      const serviceId = (addon.id.indexOf(':') > 0) ? addon.id.substring(0, addon.id.indexOf(':')) : undefined
+      this.openAddonPopup(realAddonId, serviceId, addon)
+    },
+    search (searchbar, query, previousQuery) {
+      let results = []
+      if (query) {
+        for (const service in this.addons) {
+          results = results.concat(this.addons[service].filter((a) => a.label.toLowerCase().indexOf(query.toLowerCase()) >= 0))
+        }
+      }
+      this.$set(this, 'searchResults', results)
+      setTimeout(() => {
+        this.$f7.lazy.create('.page-addon-store')
+      }, 100)
+    },
+    clearSearch () {
+
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
index d3ccbae26f..6a9ce42f4a 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/settings-menu.vue
@@ -16,7 +16,7 @@
         search-in=".item-title"
         :disable-button="!$theme.aurora" />
     </f7-navbar>
-    <f7-block class="block-narrow after-big-title settings-menu" v-show="addonsLoaded && servicesLoaded">
+    <f7-block class="block-narrow after-big-title settings-menu" v-show="servicesLoaded">
       <f7-row>
         <f7-col width="100" medium="50">
           <f7-block-title>Configuration</f7-block-title>
@@ -90,19 +90,20 @@
               <f7-icon slot="media" f7="calendar" color="gray" />
             </f7-list-item>
           </f7-list>
-          <f7-block-title v-if="$store.getters.apiEndpoint('addons') && addonsLoaded">
+          <f7-block-title v-if="$store.getters.apiEndpoint('addons')">
             Add-ons
           </f7-block-title>
           <f7-list media-list class="search-list"
                    v-if="$store.getters.apiEndpoint('addons')">
             <f7-list-item
               media-item
-              v-for="type in addonTypes"
-              :key="type.id"
-              :link="'addons/' + type.id"
-              :title="type.label"
-              :footer="addonsSubtitles[type.id]">
-              <f7-icon slot="media" :f7="addonsIcons[type.id]" color="gray" />
+              v-for="shortcut in addonStoreTabShortcuts"
+              :key="shortcut.id"
+              :link="true"
+              @click="navigateToStore(shortcut.id)"
+              :title="shortcut.label"
+              :footer="shortcut.subtitle">
+              <f7-icon slot="media" :f7="shortcut.icon" color="gray" />
             </f7-list-item>
           </f7-list>
         </f7-col>
@@ -133,12 +134,14 @@
 </template>
 
 <script>
+import { AddonStoreTabShortcuts } from '@/assets/addon-store'
+
 export default {
   data () {
     return {
       addonsLoaded: false,
       servicesLoaded: false,
-      addonTypes: {},
+      addonStoreTabShortcuts: AddonStoreTabShortcuts,
       systemServices: [],
       otherServices: [],
       objectsSubtitles: {
@@ -150,24 +153,6 @@ export default {
         scripts: 'Rules dedicated to running code',
         schedule: 'View upcoming time-based rules'
       },
-      addonsSubtitles: {
-        automation: 'Scripting languages and module types for rules',
-        binding: 'Connect and control hardware and online services',
-        persistence: 'Backend connectors to store historical data',
-        transformation: 'Translate between technical and human-readable values',
-        misc: 'Integrations to external systems and more',
-        ui: 'Alternative frontends for user interaction',
-        voice: 'Convert between text and speech, interpret human language queries'
-      },
-      addonsIcons: {
-        automation: 'sparkles',
-        binding: 'circle_grid_hex',
-        persistence: 'download_circle',
-        transformation: 'function',
-        misc: 'rectangle_3_offgrid',
-        ui: 'play_rectangle',
-        voice: 'chat_bubble_2'
-      },
       inboxCount: '',
       thingsCount: '',
       itemsCount: '',
@@ -198,14 +183,6 @@ export default {
         this.otherServices = data.filter(s => s.category !== 'system')
         this.servicesLoaded = true
       })
-      addonsPromise.then((data) => {
-        this.addonTypes = data
-        this.addonsLoaded = true
-      }).catch((err) => {
-        console.warn('Add-on types not loaded: ' + err)
-        this.addonTypes = []
-        this.addonsLoaded = true
-      })
     },
     loadCounters () {
       if (!this.apiEndpoints) return
@@ -214,6 +191,9 @@ export default {
       if (this.$store.getters.apiEndpoint('items')) this.$oh.api.get('/rest/items').then((data) => { this.itemsCount = data.length.toString() })
       if (this.$store.getters.apiEndpoint('ui')) this.$oh.api.get('/rest/ui/components/system:sitemap?summary=true').then((data) => { this.sitemapsCount = data.length })
     },
+    navigateToStore (tab) {
+      this.$f7.views.main.router.navigate('addons', { props: { initialTab: tab } })
+    },
     onPageInit () {
       this.loadMenu()
     },
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
index 89dba10c82..19beab976e 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/add/choose-binding.vue
@@ -41,7 +41,7 @@
             badge-color="red"
             :footer="(binding.description && binding.description.indexOf('<br>') >= 0) ?
               binding.description.split('<br>')[0] : binding.description">
-            <f7-link slot="after" v-if="binding.configDescriptionURI" :href="`/settings/addons/bindings/${binding.id}/config`" class="margin-left" icon-size="20" icon-f7="gear_alt" color="gray" tooltip="Configure Binding" />
+            <f7-link slot="after" v-if="binding.configDescriptionURI" :href="`/settings/addons/${binding.id}/config`" class="margin-left" icon-size="20" icon-f7="gear_alt" color="gray" tooltip="Configure Binding" />
           </f7-list-item>
         </f7-list>
       </f7-col>