diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
index 4a5eaab83f..9f46cd24ff 100644
--- a/bundles/org.openhab.ui/web/src/components/app.vue
+++ b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -100,8 +100,8 @@
                             :class="{ currentsection: currentUrl.indexOf('/developer/api-explorer') === 0 }">
                 <f7-icon slot="media" f7="burn" color="gray" />
               </f7-list-item>
-              <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperSidebar')" title="Sidebar" view=".view-main" panel-close :animate="false" no-chevron>
-                <f7-icon slot="media" :f7="$store.state.developerSidebar ? 'wrench_fill' : 'wrench'" color="gray" />
+              <!-- <f7-list-item link="" @click="$f7.emit('toggleDeveloperDock')" title="Dock" view=".view-main" panel-close :animate="false" no-chevron>
+                <f7-icon slot="media" :f7="$store.state.developerDock ? 'wrench_fill' : 'wrench'" color="gray" />
               </f7-list-item> -->
             </ul>
           </li>
@@ -140,8 +140,8 @@
     <!-- <f7-view url="/panel-right/"></f7-view> -->
     </f7-panel>
 
-    <f7-panel v-if="showDeveloperSidebar" right :visible-breakpoint="1280" resizable>
-      <developer-sidebar />
+    <f7-panel v-if="showDeveloperDock" right :visible-breakpoint="1280" resizable>
+      <developer-dock :dock="activeDock" :helpTab="activeHelpTab" :toolTab="activeToolTab" />
     </f7-panel>
 
     <f7-block v-if="!ready && communicationFailureMsg" class="block-narrow">
@@ -248,7 +248,7 @@ import Framework7 from 'framework7/framework7-lite.esm.bundle.js'
 import cordovaApp from '../js/cordova-app.js'
 import routes from '../js/routes.js'
 import PanelRight from '../pages/panel-right.vue'
-import DeveloperSidebar from './developer/developer-sidebar.vue'
+import DeveloperDock from './developer/developer-dock.vue'
 import EmptyStatePlaceholder from '@/components/empty-state-placeholder.vue'
 
 import { loadLocaleMessages } from '@/js/i18n'
@@ -266,7 +266,7 @@ export default {
   components: {
     EmptyStatePlaceholder,
     PanelRight,
-    DeveloperSidebar
+    DeveloperDock
   },
   data () {
     let theme = localStorage.getItem('openhab.ui:theme')
@@ -370,7 +370,11 @@ export default {
 
       showSettingsSubmenu: false,
       showDeveloperSubmenu: false,
-      showDeveloperSidebar: false,
+      showDeveloperDock: false,
+      activeDock: 'tools',
+      activeToolTab: 'pin',
+      activeHelpTab: 'current',
+      quickStartShow: true,
       currentUrl: ''
     }
   },
@@ -501,6 +505,12 @@ export default {
 
           if (data[2]) dayjs.locale(data[2].key)
 
+          const page = data[0].find((p) => p.uid === 'overview')
+          if ((!page) || (page.component !== 'oh-layout-page') || (!page.slots || (!page.slots.default.length && !page.slots.masonry && !page.slots.canvas && !page.slots.grid))) {
+            if (this.quickStartShow) this.selectDeveloperDock({ 'dock': 'help', 'helpTab': 'quick' })
+            this.quickStartShow = false
+          }
+
           // finished with loading
           this.ready = true
           return Promise.resolve()
@@ -586,11 +596,19 @@ export default {
         this.$nextTick(() => this.$f7.panel.get('left').disableVisibleBreakpoint())
       }
     },
-    toggleDeveloperSidebar () {
+    toggleDeveloperDock () {
       if (!this.$store.getters.isAdmin) return
-      this.showDeveloperSidebar = !this.showDeveloperSidebar
-      if (this.showDeveloperSidebar) this.$store.dispatch('startTrackingStates')
-      this.$store.commit('setDeveloperSidebar', this.showDeveloperSidebar)
+      this.showDeveloperDock = !this.showDeveloperDock
+      if (this.showDeveloperDock) this.$store.dispatch('startTrackingStates')
+      this.$store.commit('setDeveloperDock', this.showDeveloperDock)
+    },
+    selectDeveloperDock (dockOpts) {
+      if (dockOpts) {
+        if (dockOpts.dock) this.activeDock = dockOpts.dock
+        if (dockOpts.helpTab) this.activeHelpTab = dockOpts.helpTab
+        if (dockOpts.toolTab) this.activeToolTab = dockOpts.toolTab
+      }
+      if (!this.showDeveloperDock) this.toggleDeveloperDock()
     },
     toggleVisibleBreakpoint () {
       this.$f7.panel.get('left').toggleVisibleBreakpoint()
@@ -599,7 +617,7 @@ export default {
     },
     keyDown (ev) {
       if (ev.keyCode === 68 && ev.shiftKey && ev.altKey) {
-        this.toggleDeveloperSidebar()
+        this.toggleDeveloperDock()
         ev.stopPropagation()
         ev.preventDefault()
       }
@@ -671,6 +689,7 @@ export default {
           this.showSettingsSubmenu = page.route.url.indexOf('/settings/') === 0 || page.route.url.indexOf('/settings/addons/') === 0
           this.showDeveloperSubmenu = page.route.url.indexOf('/developer/') === 0
           this.currentUrl = page.route.url
+          this.$store.commit('setPagePath', this.currentUrl)
         }
       })
 
@@ -690,8 +709,12 @@ export default {
         this.updateThemeOptions()
       })
 
-      this.$f7.on('toggleDeveloperSidebar', () => {
-        this.toggleDeveloperSidebar()
+      this.$f7.on('toggleDeveloperDock', () => {
+        this.toggleDeveloperDock()
+      })
+
+      this.$f7.on('selectDeveloperDock', (opts) => {
+        this.selectDeveloperDock(opts)
       })
 
       this.$f7.on('smartSelectOpened', (smartSelect) => {
diff --git a/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue b/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue
new file mode 100644
index 0000000000..5c48621370
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/developer-dock.vue
@@ -0,0 +1,67 @@
+<template>
+  <f7-page class="developer-dock">
+    <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" style="width: 100%" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'" />
+    <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 5px; margin-bottom: 5px">
+      <f7-button :active="dockView === 'tools'" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools'})">
+        Tools
+      </f7-button>
+      <f7-button :active="dockView === 'help'" @click="$f7.emit('selectDeveloperDock',{'dock': 'help'})">
+        Help
+      </f7-button>
+    </f7-segmented>
+    <f7-segmented v-if="dockView === 'tools'" strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0">
+      <f7-button :active="activeToolTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'pin'})" />
+      <f7-button :active="activeToolTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'events'})" />
+      <f7-button :active="activeToolTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'scripting'})" />
+      <f7-button :active="activeToolTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'tools','toolTab': 'tools'})" />
+    </f7-segmented>
+    <f7-segmented v-if="dockView === 'help'" strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left)); margin-top: 0">
+      <f7-button :active="activeHelpTab === 'current'" icon-f7="doc_richtext" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'current'})" />
+      <f7-button :active="activeHelpTab === 'binding'" icon-f7="bag_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'binding'})" />
+      <f7-button :active="activeHelpTab === 'faq'" icon-f7="question_diamond_fill" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'faq'})" />
+      <f7-button :active="activeHelpTab === 'quick'" icon-f7="cursor_rays" icon-size="18" @click="$f7.emit('selectDeveloperDock',{'dock': 'help','helpTab': 'quick'})" />
+    </f7-segmented>
+    <developer-sidebar v-if="dockView === 'tools'" :activeToolTab="activeToolTab" />
+    <help-sidebar v-if="dockView === 'help'" :activeHelpTab="activeHelpTab" />
+  </f7-page>
+</template>
+
+<style lang="stylus">
+.panel-right.panel-in-breakpoint:before
+  position absolute
+  left 0
+  top 0
+  height 100%
+  width 1px
+  background rgba(0,0,0,0.1)
+  content ''
+  z-index 6000
+
+.developer-dock
+  scrollbar-width none /* Firefox */
+  -ms-overflow-style none  /* IE 10+ */
+</style>
+
+<script>
+import DeveloperSidebar from './developer-sidebar.vue'
+import HelpSidebar from './help-sidebar.vue'
+
+export default {
+  components: {
+    DeveloperSidebar,
+    HelpSidebar
+  },
+  props: ['dock', 'helpTab', 'toolTab'],
+  computed: {
+    dockView () {
+      return this.dock
+    },
+    activeHelpTab () {
+      return (this.helpTab || 'current')
+    },
+    activeToolTab () {
+      return (this.toolTab || 'pin')
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue b/bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue
index dce6a849b4..99c06fafcf 100644
--- a/bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue
+++ b/bundles/org.openhab.ui/web/src/components/developer/developer-sidebar.vue
@@ -1,21 +1,13 @@
 <template>
-  <f7-page class="developer-sidebar">
-    <f7-navbar title="Developer Sidebar" subtitle="(Shift+Alt+D)" :color="$f7.data.themeOptions.dark === 'dark' ? '' : 'black'">
-      <f7-subnavbar :inner="false" v-if="!$theme.md">
-        <f7-searchbar custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
-      </f7-subnavbar>
-    </f7-navbar>
-    <f7-subnavbar :inner="false" v-if="$theme.md">
+  <f7-block class="developer-sidebar">
+    <f7-row :inner="false" v-if="!$theme.md">
+      <f7-searchbar style="width: 100%" custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
+    </f7-row>
+    <f7-row style="width: 100%" :inner="false" v-if="$theme.md">
       <f7-searchbar custom-search placeholder="Search and Pin" :backdrop="false" @searchbar:search="search" @searchbar:clear="clearSearch" />
-    </f7-subnavbar>
+    </f7-row>
     <div v-if="!searching" class="developer-sidebar-content">
-      <f7-segmented strong tag="p" style="margin-right: calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)); margin-left: calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))">
-        <f7-button :active="activeTab === 'pin'" icon-f7="pin_fill" icon-size="18" @click="activeTab = 'pin'" />
-        <f7-button :active="activeTab === 'events'" icon-f7="bolt_horizontal_fill" icon-size="18" @click="activeTab = 'events'" />
-        <f7-button :active="activeTab === 'scripting'" icon-f7="pencil_ellipsis_rectangle" icon-size="18" @click="activeTab = 'scripting'" />
-        <f7-button :active="activeTab === 'tools'" icon-f7="rectangle_stack_badge_plus" icon-size="18" @click="activeTab = 'tools'" />
-      </f7-segmented>
-      <div v-if="activeTab === 'pin'">
+      <div v-if="activeToolTab === 'pin'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
             Pinned Objects
@@ -196,7 +188,7 @@
         </f7-block>
       </div>
 
-      <div v-else-if="activeTab === 'events'">
+      <div v-else-if="activeToolTab === 'events'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal display-flex" medium>
             <span>Event Monitor</span>
@@ -222,7 +214,7 @@
         </f7-block>
       </div>
 
-      <div v-else-if="activeTab === 'scripting'">
+      <div v-else-if="activeToolTab === 'scripting'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
             Code Tools
@@ -241,7 +233,7 @@
         </f7-block>
       </div>
 
-      <div v-else-if="activeTab === 'tools'">
+      <div v-else-if="activeToolTab === 'tools'">
         <f7-block class="no-margin no-padding">
           <f7-block-title class="padding-horizontal" medium>
             Create Shortcuts
@@ -311,26 +303,19 @@
       <item-standalone-control v-if="openedItem" :item="openedItem" :context="context" :no-border="true" />
     </f7-popover>
     <search-results v-if="searching" :searchResults="searchResults" :pinnedObjects="pinnedObjects" @pin="pin" @unpin="unpin" :cachedObjects="cachedObjects" :loading="searchResultsLoading" />
-  </f7-page>
+  </f7-block>
 </template>
 
 <style lang="stylus">
-.panel-right.panel-in-breakpoint:before
-  position absolute
-  left 0
-  top 0
-  height 100%
-  width 1px
-  background rgba(0,0,0,0.1)
-  content ''
-  z-index 6000
-
 .developer-sidebar
   scrollbar-width none /* Firefox */
   -ms-overflow-style none  /* IE 10+ */
+  margin 0 !important
+  padding 0
+  padding-top 0.3rem
+  width 100%
 
   .developer-sidebar-content
-    margin-top var(--f7-subnavbar-height)
     padding-top 0.3rem
 
   &.page
@@ -364,12 +349,12 @@ export default {
     SearchResults,
     ExpressionTester
   },
+  props: ['activeToolTab'],
   data () {
     return {
       searchQuery: '',
       searchResultsLoading: false,
       searching: false,
-      activeTab: 'pin',
       monitoredItems: [],
       sseClient: null,
       eventTopicFilter: '',
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help-sidebar.vue b/bundles/org.openhab.ui/web/src/components/developer/help-sidebar.vue
new file mode 100644
index 0000000000..f4d58940b5
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help-sidebar.vue
@@ -0,0 +1,195 @@
+<template>
+  <f7-block class="help-sidebar">
+    <div class="help-sidebar-content">
+      <div v-if="activeHelpTab === 'quick'">
+        <f7-block class="no-margin no-padding">
+          <f7-block-title class="padding-horizontal" medium>
+            Quick Start
+          </f7-block-title>
+        </f7-block>
+        <f7-block class="no-margin no-padding">
+          <f7-list accordion-list>
+            <f7-list-item v-for="instruct in qstart" :key="instruct.title" accordion-item :accordion-item-opened="instruct.opened" :title="instruct.title">
+              <f7-accordion-content>
+                <f7-list media-list>
+                  <f7-list-item v-for="step in instruct.steps" :key="step.title" :link="step.link" :title="step.title">
+                    <div class="item-text" v-html="step.text" />
+                  </f7-list-item>
+                  <f7-list-button v-if="instruct.button" :external="true" :title="instruct.button.title" :href="documentationLinkPrefix + instruct.button.link" target="_blank" />
+                </f7-list>
+              </f7-accordion-content>
+            </f7-list-item>
+          </f7-list>
+        </f7-block>
+      </div>
+
+      <div v-else-if="activeHelpTab === 'faq'">
+        <f7-block class="no-margin no-padding">
+          <f7-block-title class="padding-horizontal display-flex" medium>
+            <span>How do I...</span>
+          </f7-block-title>
+        </f7-block>
+        <f7-block class="no-margin no-padding">
+          <f7-list accordion-list>
+            <f7-list-item class="faq-title" accordion-item v-for="faq in faqs" :key="faq.title" :title="faq.title">
+              <f7-accordion-content>
+                <f7-block>
+                  <p v-if="faq.goto">
+                    In the left panel go to <f7-link :href="faq.goto.target">
+                      {{ faq.goto.text }}
+                    </f7-link>
+                  </p>
+                  <p v-html="faq.text" />
+                  <p v-if="faq.doclink">
+                    <f7-link external target="_blank" :href="documentationLinkPrefix+faq.doclink">
+                      Full Help Docs
+                    </f7-link>
+                  </p>
+                </f7-block>
+              </f7-accordion-content>
+            </f7-list-item>
+          </f7-list>
+        </f7-block>
+      </div>
+
+      <div v-else-if="activeHelpTab === 'binding'">
+        <f7-block class="no-margin no-padding">
+          <f7-block-title class="padding-horizontal" medium>
+            Add-on Docs
+          </f7-block-title>
+        </f7-block>
+        <f7-block class="no-margin no-padding">
+          <f7-list media-list>
+            <f7-list-item v-for="addon in addons" :key="addon.uid" :link="addon.link" :external="true" target="_blank" :title="addon.label.replaceAll(/Binding|Transformation|Persistence/gi,'')" :text="addon.type" />
+          </f7-list>
+        </f7-block>
+      </div>
+
+      <div v-else-if="activeHelpTab === 'current'">
+        <f7-block class="no-margin no-padding">
+          <f7-block-title class="padding-horizontal" medium>
+            Page Help
+          </f7-block-title>
+        </f7-block>
+
+        <thing-context v-if="($store.state.pagePath).indexOf('things') >= 0" />
+        <item-context v-else-if="($store.state.pagePath).indexOf('items') >= 0" />
+        <model-context v-else-if="($store.state.pagePath).indexOf('model') >= 0" />
+        <page-context v-else-if="($store.state.pagePath).indexOf('pages') >= 0" />
+        <rule-context v-else-if="($store.state.pagePath).indexOf('rules') >= 0 || ($store.state.pagePath).indexOf('schedule') >= 0" type="Rules" />
+        <rule-context v-else-if="($store.state.pagePath).indexOf('scenes') >= 0" type="Scenes" />
+        <rule-context v-else-if="($store.state.pagePath).indexOf('scripts') >= 0" type="Scripts" />
+        <widget-context v-else-if="($store.state.pagePath).indexOf('widgets') >= 0" />
+        <transform-context v-else-if="($store.state.pagePath).indexOf('transformations') >= 0" />
+        <addon-context v-else-if="($store.state.pagePath).indexOf('addons') >= 0" />
+        <default-context v-else style="width: 100%" />
+
+        <f7-block class="no-padding no-margin">
+          <f7-block-title class="padding-horizontal" medium>
+            More Help
+          </f7-block-title>
+        </f7-block>
+        <f7-block>
+          You can find many more details and help at these resources:
+          <ul>
+            <li><f7-link external target="_blank" href="https://www.openhab.org/" v-t="'about.homePage'" /></li>
+            <li><f7-link external target="_blank" :href="`${documentationLinkPrefix}link/docs`" v-t="'about.documentation'" /></li>
+            <li><f7-link external :href="`${documentationLinkPrefix}link/tutorial`" target="_blank" v-t="'home.overview.button.tutorial'" /></li>
+            <li><f7-link external target="_blank" href="https://community.openhab.org/" v-t="'about.communityForum'" /></li>
+          </ul>
+        </f7-block>
+      </div>
+    </div>
+  </f7-block>
+</template>
+
+<style lang="stylus">
+.help-sidebar
+  scrollbar-width none /* Firefox */
+  -ms-overflow-style none  /* IE 10+ */
+  margin 0 !important
+  padding 0
+  width 100%
+  --f7-list-item-text-max-lines 4
+
+  .help-sidebar-content
+    padding-top 0.3rem
+
+  &.page
+    background #e7e7e7 !important
+
+  .page-content
+    overflow-x hidden
+.md .help-sidebar-content
+  margin-top 0
+.theme-dark
+  .help-sidebar
+    &.page
+      background #232323 !important
+
+.add-button-icon
+  color: #2196f3
+
+.link-item-icon
+  color: #4cd964
+
+.chevron-icon
+  color: #2196f3
+
+.faq-title .item-title
+  white-space: normal !important
+</style>
+
+<script>
+import { loadLocaleMessages } from '@/js/i18n'
+import ThingContext from './help/thing-context.vue'
+import ItemContext from './help/item-context.vue'
+import ModelContext from './help/model-context.vue'
+import PageContext from './help/page-context.vue'
+import RuleContext from './help/rule-context.vue'
+import WidgetContext from './help/widget-context.vue'
+import AddonContext from './help/addon-context.vue'
+import TransformContext from './help/transform-context.vue'
+import DefaultContext from './help/default-context.vue'
+
+export default {
+  components: {
+    ThingContext,
+    ItemContext,
+    ModelContext,
+    PageContext,
+    RuleContext,
+    WidgetContext,
+    AddonContext,
+    TransformContext,
+    DefaultContext
+  },
+  props: ['activeHelpTab'],
+  data () {
+    return {
+      addons: [],
+      faqs: require('./help/help-faq-defs.json'),
+      qstart: require('./help/help-qstart-defs.json')
+    }
+  },
+  computed: {
+    documentationLinkPrefix () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/`
+    }
+  },
+  created () {
+    this.$oh.api.get('/rest/addons').then(data => {
+      this.addons = data.filter(addon => addon.installed).sort((a, b) => a.label.toUpperCase().localeCompare(b.label.toUpperCase()))
+    }).catch((err) => {
+      // sometimes we get 502 errors ('Jersey is not ready yet!'), keep trying
+      if (err === 'Bad Gateway' || err === 502) {
+        console.log('Error while accessing the API, retrying every 5 seconds: ', err)
+        setTimeout(this.load, 5000)
+      }
+    })
+  },
+  i18n: {
+    messages: loadLocaleMessages(require.context('@/assets/i18n/about'))
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue
new file mode 100644
index 0000000000..928cd49416
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/addon-context.vue
@@ -0,0 +1,29 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Add-ons</strong> grow openHAB's functionality.
+      <br><br>
+      The Add-on Store allows you to install and remove many different types of add-ons.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Bindings">
+        Communication functions between openHAB and different services or devices
+      </f7-list-item>
+      <f7-list-item title="Automation">
+        Scripting languages, pre-made rule template, and new Blockly functions
+      </f7-list-item>
+      <f7-list-item title="UI">
+        Pre-made UI widgets and other available UIs that work with openHAB
+      </f7-list-item>
+      <f7-list-item title="Other">
+        Full IoT ecosystem integration, data persistence services, item state transformations, and voice and speech.
+      </f7-list-item>
+    </f7-list>
+    </p>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/default-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/default-context.vue
new file mode 100644
index 0000000000..4a846f0ca7
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/default-context.vue
@@ -0,0 +1,48 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      Welcome to help for openHAB's MainUI. This user interface is the primary system for management of your openHAB system as well as one of the available standard UIs.
+      <br><br>
+      Users with an Administrator role can use the left panel menus to manage:
+    </f7-block>
+    <f7-list media-list style="width: 100%">
+      <f7-list-item title="Things">
+        Your IoT devices and services
+      </f7-list-item>
+      <f7-list-item title="Model">
+        Semantically enhanced representation of the user facing aspects of your system
+      </f7-list-item>
+      <f7-list-item title="Items">
+        Basic units of openHAB control and information
+      </f7-list-item>
+      <f7-list-item title="Pages">
+        MainUI custom interfaces
+      </f7-list-item>
+      <f7-list-item title="Rules">
+        All general automation actions
+      </f7-list-item>
+      <f7-list-item title="Scenes">
+        Special rules for specific combinations of settings
+      </f7-list-item>
+      <f7-list-item title="Scripts">
+        Special rules without automatic triggers
+      </f7-list-item>
+      <f7-list-item title="Schedule">
+        Special rules with triggers at sepcificed times
+      </f7-list-item>
+      <f7-list-item title="Add-on Store">
+        Manage all add-ons for connecting to difference devices and services
+      </f7-list-item>
+      <f7-list-item title="Developer Tools">
+        Special functions including creation of custom widgets and block libraries
+      </f7-list-item>
+    </f7-list>
+  </f7-block>
+  </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json b/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json
new file mode 100644
index 0000000000..d5e61bdd01
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/help-faq-defs.json
@@ -0,0 +1,74 @@
+[
+  {
+    "title" : "Access openHAB from a remote network",
+    "goto" : {
+      "target" : "/addons/misc-openhabcloud",
+      "text" : "the openHAB Cloud Connector"
+    },
+    "text" : "The most secure ways to enable remote access to your openHAB instance are through a VPN or a service such as <a class=\"external\" target=\"_blank\" href=\"https://myopenhab.org/\">myopenhab.org</a> with the openHAB Cloud Connector. <strong>DO NOT</strong> expose your openHAB instance directly to the internet, that is insecure",
+    "doclink" : "addons/integrations/openhabcloud/"
+  },
+  {
+    "title" : "Change the UID of a configuration",
+    "text" : "Once a configuration is created you cannot change its UID.  You can delete the configuration and create a new one that is identical except for the UID, but beware of potential consequeces of other configurations that may rely on the deleted UID."
+  },
+  {
+    "title" : "Create a new configuration",
+    "goto" : {
+        "target" : "/settings/",
+        "text" : "Settings"
+    },
+    "text" : "Use the Settings page to go to the listing page for the type of configuration you want to create then click on the <i class=\"f7-icons size-22 add-button-icon\">plus_circle_fill</i> in the lower right corner to add a new configuration of that type.",
+    "doclink" : "docs/configuration/"
+  },
+  {
+    "title" : "Delete a configuration",
+    "goto" : {
+      "target" : "/settings/",
+      "text" : "Settings"
+    },
+    "text" : "Use the Settings page to go to the listing page for the type of configuration you want to delete and then goto the details page of that configuration. Click on the <span style=\"color: red\">Remove</span> button at the bottom of the page (you may have to expand the bottom bar of the configuration window by clicking on the <i class=\"f7-icons size-22 chevron-icon\">chevron_up</i> button in the bottom right corner)."
+  },
+  {
+    "title" : "Delete multiple configurations",
+    "goto" : {
+      "target" : "/settings/",
+      "text" : "Settings"
+    },
+    "text" : "Use the Settings page to go to the listing page for the type of configurations you want to delete and then click on Select in the upper-right corner (or Ctrl + Click on any listing).  Select all configurations to be deleted using the checkboxes and then click on the <span style=\"color: red\">Remove</span> button at the bottom of the screen."
+  },
+  {
+    "title" : "Find available icons",
+    "text" : "OpenHAB specific icons can be found at the docs page linked below. F7 icons are listed in the <a class=\"external\" target=\"_blank\" href=\"https://framework7.io/icons/\">F7 docs</a>. Material icons can be found <a class=\"external\" target=\"_blank\" href=\"https://jossef.github.io/material-design-icons-iconfont/\">here</a>. The entire <a class=\"external\" target=\"_blank\" href=\"https://icon-sets.iconify.design/\">Iconify library</a> is also available for use.",
+    "doclink" : "docs/configuration/iconsets/classic/"
+  },
+  {
+    "title" : "Get involved in openHAB",
+    "text" : "openHAB only grows with contributions from volunteers. You can answer questions in the community forum, help with language translations, or even contribute your own code.",
+    "doclink" : "docs/developer/contributing.html"
+  },
+  {
+    "title" : "Get openHAB notifications",
+    "goto" : {
+      "target" : "/addons/misc-openhabcloud",
+      "text" : "the openHAB Cloud Connector"
+    },
+    "text" : "There are many different add-ons that will allow you to send messages from openHAB to other devices. One easy and secure method is to use <a class=\"external\" target=\"_blank\" href=\"https://myopenhab.org/\">myopenhab.org</a> with the openHAB Cloud Connector.",
+    "doclink" : "addons/integrations/openhabcloud/"
+  },
+  {
+    "title" : "See openHAB logs",
+    "text" : "If you have installed openHAB using openaHABian, then you can use the openHABian config <strong>Optional Components</strong> menu to install a web based log viewer.  Otherwise the location of the log files will depend on your installation method so use the link below to find out more.",
+    "doclink" : "docs/administration/logging.html"
+  },
+  {
+    "title" : "View openHAB on an Android device",
+    "text" : "openHAB UIs can all be viewed via any web browser, desktop or mobile.  There is also an Android app that can connect to your openHAB instance and give you better integration with the mobile device.",
+    "doclink" : "docs/apps/android.html"
+  },
+  {
+    "title" : "View openHAB on an iOS device",
+    "text" : "openHAB UIs can all be viewed via any web browser, desktop or mobile.  There is also an iOS app that can connect to your openHAB instance and give you better integration with the mobile device.",
+    "doclink" : "docs/apps/ios.html"
+  }
+]
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/help-qstart-defs.json b/bundles/org.openhab.ui/web/src/components/developer/help/help-qstart-defs.json
new file mode 100644
index 0000000000..dc1eaea9f3
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/help-qstart-defs.json
@@ -0,0 +1,147 @@
+[
+  {
+    "opened": true,
+    "title": "1. Install a Binding (Add-on)",
+    "steps": [
+      {
+        "link": "/settings/addons",
+        "title": "Addon-Store",
+        "text": "Left panel > Settings > Add-on Store or click here <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
+      },
+      {
+        "title": "Install",
+        "text": "Scroll to the Binding you need and click the <span style=\"background: var(--f7-list-item-border-color); border-radius: 20% / 100%; color: #2196f3; padding: 0 5px 0 5px\">INSTALL</span> button"
+      }
+    ],
+    "button": {
+      "title": "More help on Bindings",
+      "link": "docs/configuration/addons.html"
+    }
+  },
+  {
+    "title": "2. Add a Thing",
+    "steps": [
+      {
+        "link": "/settings/things/inbox",
+        "title": "Thing Inbox",
+        "text": "Left panel > Settings > Things > Inbox or click here <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
+      },
+      {
+        "link": "/settings/things/add",
+        "title": "New Thing",
+        "text": "Click on the <i class=\"f7-icons size-22 add-button-icon\">plus_circle_fill</i> in the lower-right corner"
+      },
+      {
+        "title": "Choose Binding",
+        "text": "Click on the listing of the Binding for the Thing you want to add to openHAB"
+      },
+      {
+        "title": "Scan",
+        "text": "Click the <span style=\"background: #2196f3; border-radius: 3px; color: white; padding: 0 5px 0 5px\">Scan</span> button to automatically search for related devices"
+      },
+      {
+        "title": "Add Thing",
+        "text": "Select the device from the list of Discovered Things and Click OK to add the Thing"
+      }
+    ],
+    "button": {
+      "title": "More help on Things",
+      "link": "docs/tutorial/things_intermediate.html"
+    }
+  },
+  {
+    "title": "3. Configure the Thing",
+    "steps": [
+      {
+        "link": "/settings/things/",
+        "title": "Thing List",
+        "text": "Left panel > Settings > Things or click here <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
+      },
+      {
+        "title": "Select Thing",
+        "text": "Click on the listing for the Thing you want to configure"
+      },
+      {
+        "title": "Configuration",
+        "text": "Follow the documentation for the Thing's Binding to add configuration then click Save in upper right-hand corner"
+      }
+    ],
+    "button": {
+      "title": "Binding Documentation",
+      "link": "addons/"
+    }
+  },
+  {
+    "title": "4. Create an Item",
+    "steps": [
+      {
+        "link": "/settings/things/",
+        "title": "Thing List",
+        "text": "Left panel > Settings > Things or click here <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
+      },
+      {
+        "title": "Select Thing",
+        "text": "Click on the listing for the Thing you want to interface with"
+      },
+      {
+        "title": "Channels",
+        "text": "Click on the Channels tab in the center at the top of the Thing Page"
+      },
+      {
+        "title": "Select Channel",
+        "text": "Click to expand the Channel you will control and then click <i class=\"f7-icons size-22 link-item-icon\">plus_circle_fill</i> Add Link to Item"
+      },
+      {
+        "title": "New Item",
+        "text": "Select the Create a new Item option"
+      },
+      {
+        "title": "Add Item",
+        "text": "Click the blue Link button at the bottom of the page"
+      }
+    ],
+    "button": {
+      "title": "More help on Items",
+      "link": "docs/configuration/items.html"
+    }
+  },
+  {
+    "title": "5. Display Item in UI",
+    "steps": [
+      {
+        "link": "/settings/pages/layout/overview",
+        "title": "Select Page from Page List",
+        "text": "Left panel > Settings > Pages > Overview or click here <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
+      },
+      {
+        "title": "Add Block, Row, and Column",
+        "text": "Click on the Add Block, Add Row, and Add Column buttons in the editor"
+      },
+      {
+        "title": "Add Widget",
+        "text": "Click the gray rectangle and select a card appropriate for the intended item (for example, a toggle card for a switch item)"
+      },
+      {
+        "title": "Configure Widget",
+        "text": "Click the black menu button above the right corner of the widget and select Configure Widget"
+      },
+      {
+        "title": "Select Item",
+        "text": "Click on the Item field and select an appropriate item from the list then click Done"
+      },
+      {
+        "title": "Save Page",
+        "text": "Click Save in the upper right corner of the editor"
+      },
+      {
+        "link": "/",
+        "title": "View Home Page",
+        "text": "Click here to return to the Home Overview Page <i class=\"f7-icons size-22 add-button-icon\">arrow_right</i>"
+      }
+    ],
+    "button": {
+      "title": "More help on UI pages",
+      "link": "docs/tutorial/pages_intro.html"
+    }
+  }
+]
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue
new file mode 100644
index 0000000000..26bcefb718
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/item-context.vue
@@ -0,0 +1,33 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Items</strong> are openHAB's information storage and control structures.  Items can be Linked to the channels of a Thing to control and read data from a device or service. Items can also be used to store information that is just used by your openHAB system itself.
+      <br><br>
+      On these pages you can manage all the Items you have added to your system.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Add new Items">
+        Add individual Items using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button and, if needed, manually link them to Channel
+      </f7-list-item>
+      <f7-list-item title="Configure Items">
+        Click on any Item in the main list to see it's configuration page
+      </f7-list-item>
+      <f7-list-item title="Delete Items">
+        Select multiple Items using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom or use the <span style="color: red">Remove Item</span> button on the individual Item pages
+      </f7-list-item>
+    </f7-list>
+    <f7-block>
+      <f7-link external :href="documentationLink" target="_blank" text="Open full documentation" color="blue" />
+    </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/items`
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue
new file mode 100644
index 0000000000..3af5051c6a
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/model-context.vue
@@ -0,0 +1,38 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      The <strong>Semantic Model</strong> is a way for you to group and categorize your openHAB Items to provide additional real-world relationships and information about them.  openHAB can use this information to automatically generate the location, equipment, and properties tabs of the home page.
+      <br><br>
+      Every semantic model object (location, equipment, or point) is just a regular openHAB item with semantic tags and arranged in semantic groups. It is important to note that not all of your items need to be included in the semantic model.  For most systems it only makes sence to inlcude those items that users will interact with.
+      <br><br>
+      On this page you can manage your system's semantic model.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Add new locations">
+        Add group items with semantic group tags to represent physical locations in and around your home
+      </f7-list-item>
+      <f7-list-item title="Add new equipment">
+        Add group items with semantic equipment tags to represent devices of interest to users in specific locations
+      </f7-list-item>
+      <f7-list-item title="Add new points">
+        Add items with semantic class and property tags to represent the actual information and interactions that users will need
+      </f7-list-item>
+      <f7-list-item title="Bulk creation of points">
+        Create equipement directly from your Things with the desired items for rapid building of a semantic model
+      </f7-list-item>
+    </f7-list>
+    <f7-block>
+      <f7-link external :href="documentationLink" target="_blank" text="Open full documentation" color="blue" />
+    </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/docs/tutorial/model`
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue
new file mode 100644
index 0000000000..ba4df865c1
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/page-context.vue
@@ -0,0 +1,36 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Pages</strong> are the different MainUI presentations that you can make to present users with control over home system. The location, equipment, and properties tabs of the home page are automatically generated if you have a semantic model. All other pages, you must create for yourself.
+      <br><br>
+      On these pages you can manage all the Pages you have added to your system.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Add new Pages">
+        Add individual Pages of all the different types using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button
+      </f7-list-item>
+      <f7-list-item title="Configure Pages">
+        Click on any Page in the main list to see a graphical editor and a yaml code editor for that page
+      </f7-list-item>
+      <f7-list-item title="Delete Pages">
+        Select multiple Pages using the top <strong>Select</strong> button and use the <strong>Remove</strong> buttons at the bottom
+      </f7-list-item>
+      <f7-list-item title="Test Pages">
+        See your changes and test the page functions using the <strong>Run</strong> option in the editor
+      </f7-list-item>
+    </f7-list>
+    <f7-block>
+      <f7-link external :href="documentationLink" target="_blank" text="Open full documentation" color="blue" />
+    </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/pages`
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue
new file mode 100644
index 0000000000..98cfb632a4
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/rule-context.vue
@@ -0,0 +1,58 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Rules</strong> are the heart of home automation.  <span v-if="type === 'Rules'">They allow openHAB to respond to different events with automatic reactions. Rules can be a simple as a directive to turn on a single light at a given time but full scripting languages also allow for more complex reactions. </span><span v-else><strong> {{ type }}</strong> are special types of rules.</span>
+      <p v-if="(type === 'Rules' && ($store.state.pagePath).indexOf('schedule')<0)">
+        Community made Rule Templates can also be added to your system from the <strong>Automation</strong> tab of the Add-on Store.
+      </p>
+      <p v-else-if="(type === 'Rules' && ($store.state.pagePath).indexOf('schedule') >= 0)">
+        The schedule page shows you a calendar layout of all Rules that have the
+        <f7-chip text="Schedule" media-bg-color="blue">
+          <f7-icon slot="media" f7="tag_fill" />
+        </f7-chip>
+        tag and trigger at one or more defined times.
+      </p>
+      On these pages you can manage all the basic {{ type }} you have added to your system.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item :title="`Add new ${type}`">
+        Add {{ type }} using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button
+      </f7-list-item>
+      <f7-list-item v-if="(type === 'Rules')" title="Configure Rules">
+        Click on any Rule in the main list to configure the rule or write a script action for the rule
+      </f7-list-item>
+      <f7-list-item v-else-if="(type === 'Scripts')" title="Edit Scripts">
+        Click on any Script in the main list to edit the action of the script
+      </f7-list-item>
+      <f7-list-item v-else-if="(type === 'Scenes')" title="Edit Scenes">
+        Click on any Scene in the main list to edit scene's item commands
+      </f7-list-item>
+      <f7-list-item :title="`Delete ${type}`">
+        Select multiple {{ type }} using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom or use the <span style="color: red">Remove {{ type }}</span> button on the individual {{ type.slice(0,-1).toLowerCase() }} pages
+      </f7-list-item>
+      <f7-list-item v-if="(type === 'Rules' || type === 'Scripts')" :title="`Enable/Disable ${type}`">
+        Select multiple {{ type }} using the top <strong>Select</strong> button and use the <strong>Enable</strong> or <strong>Disable</strong> buttons at the bottom or use the <i class="f7-icons size-22">play_circle</i> and <i class="f7-icons size-22">pause_circle</i> buttons on the individual {{ type.slice(0,-1).toLowerCase() }} pages
+      </f7-list-item>
+      <f7-list-item v-else title="Enable/Disable Scenes">
+        Use the <i class="f7-icons size-22">play_circle</i> and <i class="f7-icons size-22">pause_circle</i> buttons on the individual scene pages
+      </f7-list-item>
+      <f7-list-item :title="`Manually run ${type}`">
+        Use the <i class="f7-icons size-22">play</i> button on the individual {{ type.slice(0,-1) }} pages to have the {{ type.slice(0,-1).toLowerCase() }} run <span v-if="(type === 'Rules')">all actions</span> immediately
+      </f7-list-item>
+    </f7-list>
+    <f7-block>
+      <f7-link external :href="documentationLink" target="_blank" text="Open full documentation" color="blue" />
+    </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  props: ['type'],
+  computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/${this.type.toLowerCase()}`
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/thing-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/thing-context.vue
new file mode 100644
index 0000000000..e99375eb7f
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/thing-context.vue
@@ -0,0 +1,36 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Things</strong> are the openHAB structures that represent individual devices or services.  The Things that you can add to your system are determined by the bindings that you have installed.
+      <br><br>
+      On these pages you can manage all the Things you have added to your system.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Add new Things">
+        Use the Thing Inbox to scan for available things or manually add ones that cannot be found automatically
+      </f7-list-item>
+      <f7-list-item title="Configure Things">
+        Click on any Thing in the main list to see it's configuration page
+      </f7-list-item>
+      <f7-list-item title="Delete Things">
+        Select multiple Things using the top <strong>Select</strong> button and use the <strong>Remove</strong> buttons at the bottom or use the <span style="color: red">Delete Thing</span> button on the individual Things pages
+      </f7-list-item>
+      <f7-list-item title="Enable/Disable Things">
+        Select multiple Things using the top <strong>Select</strong> button and use the <strong>Enable</strong> or <strong>Disable</strong> buttons at the bottom or use the <i class="f7-icons size-22">play_circle</i> and <i class="f7-icons size-22">pause_circle</i> buttons on the individual Things pages
+      </f7-list-item>
+    </f7-list>
+    <f7-block>
+      <f7-link external :href="documentationLink" target="_blank" text="Open full documentation" color="blue" />
+    </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/thing`
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/transform-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/transform-context.vue
new file mode 100644
index 0000000000..23ea26f980
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/transform-context.vue
@@ -0,0 +1,38 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Transformations</strong> are openHAB objects that convert a value or item state into different value or state.  Transformations can be used in many different instances including Links betweens Channels and Items, Rule scripts, and some Thing configurations.
+      <br><br>
+      The different available Transformation methods must be individually installed via the <strong>Other</strong> tab of the
+      <f7-link href="/addons/">
+        Add-on Store
+      </f7-link>.
+      <br><br>
+      On these pages you can manage all the Transformations you have added to your system.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Add new Transformations">
+        Add individual Transformations using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button.
+      </f7-list-item>
+      <f7-list-item title="Configure Items">
+        Click on any Transformation in the main list to see it's configuration page
+      </f7-list-item>
+      <f7-list-item title="Delete Items">
+        Select multiple Transformations using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom or use the <span style="color: red">Remove Transform</span> button on the individual Transformation pages
+      </f7-list-item>
+    </f7-list>
+    <f7-block>
+      <f7-link external :href="documentationLink" target="_blank" text="Open full documentation" color="blue" />
+    </f7-block>
+  </f7-block>
+</template>
+
+<script>
+export default {
+  computed: {
+    documentationLink () {
+      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/transformations`
+    }
+  }
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue b/bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue
new file mode 100644
index 0000000000..1d70757ef4
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/components/developer/help/widget-context.vue
@@ -0,0 +1,27 @@
+<template>
+  <f7-block class="no-margin no-padding">
+    <f7-block>
+      <strong>Widgets</strong> are interactive elements that can be placed on pages.
+      <br><br>
+      Community made Widgets can also be added to your system from the <strong>UI</strong> tab of the Add-on Store.
+      <br><br>
+      On these pages you can manage all the custom Widgets you have added to your system.
+    </f7-block>
+    <f7-list media-list>
+      <f7-list-item title="Add new Rules">
+        Add Widgets using the <i class="f7-icons size-22 add-button-icon">plus_circle_fill</i> button
+      </f7-list-item>
+      <f7-list-item title="Edit Widgets">
+        Click on any Widget in the main list to open a code editor and graphical test space for the widget
+      </f7-list-item>
+      <f7-list-item title="Delete Widgets">
+        Select multiple Widgets using the top <strong>Select</strong> button and use the <strong>Remove</strong> button at the bottom
+      </f7-list-item>
+    </f7-list>
+  </f7-block>
+</template>
+
+<script>
+export default {
+}
+</script>
diff --git a/bundles/org.openhab.ui/web/src/js/store/index.js b/bundles/org.openhab.ui/web/src/js/store/index.js
index 91bc8c85ae..a7c5da56e1 100644
--- a/bundles/org.openhab.ui/web/src/js/store/index.js
+++ b/bundles/org.openhab.ui/web/src/js/store/index.js
@@ -23,7 +23,8 @@ const store = new Vuex.Store({
     apiEndpoints: null,
     locale: null,
     runtimeInfo: null,
-    developerSidebar: false
+    developerDock: false,
+    pagePath: null
   },
   getters: {
     apiEndpoint: (state) => (type) => (!state.apiEndpoints) ? null : state.apiEndpoints.find((e) => e.type === type),
@@ -38,9 +39,12 @@ const store = new Vuex.Store({
     setLocale (state, locale) {
       state.locale = locale
     },
-    setDeveloperSidebar (state, value) {
-      state.developerSidebar = value
+    setDeveloperDock (state, value) {
+      state.developerDock = value
       state.states.keepConnectionOpen = value
+    },
+    setPagePath (state, value) {
+      state.pagePath = value
     }
   },
   actions: {
diff --git a/bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue b/bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue
index ffa3ecbb5e..daa542a9e5 100644
--- a/bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue
+++ b/bundles/org.openhab.ui/web/src/pages/developer/developer-tools.vue
@@ -32,10 +32,10 @@
             <f7-col width="100" medium="50">
               <f7-block-title>Maintenance Tools</f7-block-title>
               <f7-list media-item>
-                <f7-list-item media-item title="Developer Sidebar" class="developer-sidebar-toggle" footer="Show a panel with various tools" link="" no-chevron @click="$f7.emit('toggleDeveloperSidebar')">
+                <f7-list-item media-item title="Developer Sidebar" class="developer-sidebar-toggle" footer="Show a panel with various tools and help" link="" no-chevron @click="$f7.emit('toggleDeveloperDock')">
                   <f7-icon slot="media" f7="wrench" color="gray" />
                   <div slot="header" style="height: 100%; height: 32px" class="display-flex float-right flex-direction-column justify-content-center">
-                    <f7-toggle color="blue" :checked="$store.state.developerSidebar" />
+                    <f7-toggle color="blue" :checked="$store.state.developerDock" />
                   </div>
                 </f7-list-item>
                 <f7-list-item media-item title="API Explorer" footer="Discover and access the REST API directly" link="api-explorer">
diff --git a/bundles/org.openhab.ui/web/src/pages/home.vue b/bundles/org.openhab.ui/web/src/pages/home.vue
index 2cbf318c00..c2f77fa77b 100644
--- a/bundles/org.openhab.ui/web/src/pages/home.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home.vue
@@ -12,6 +12,8 @@
         {{ title }}
       </f7-nav-title>
       <f7-nav-right>
+        <f7-link v-if="(this.$store.getters.isAdmin && $store.state.developerDock && $f7.width >= 1280)" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="(this.$store.getters.isAdmin && !$store.state.developerDock && $f7.width >= 1280)" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link v-if="this.$store.getters.isAdmin" icon-ios="f7:pencil" icon-aurora="f7:pencil" icon-md="material:edit" :tooltip="$t('home.editHome')" :href="(homePageComponent) ? '/settings/pages/home/home' : '/settings/pages/home/add'" />
         <f7-link v-if="showPinToHome" icon-ios="f7:pin_fill" icon-aurora="f7:pin_fill" icon-md="material:add_location" :tooltip="$t('home.pinToHome')" @click="pinToHome" />
         <f7-link v-if="showExitToApp" icon-ios="f7:square_arrow_right" icon-aurora="f7:square_arrow_right" icon-md="material:exit_to_app" :tooltip="$t('home.exitToApp')" @click="exitToApp" />
diff --git a/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue b/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
index c6109709b0..d97e1db190 100644
--- a/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
+++ b/bundles/org.openhab.ui/web/src/pages/home/overview-tab.vue
@@ -15,7 +15,7 @@
     <component :is="overviewPage.component" v-if="overviewPage" v-show="!inChatSession" :context="overviewPageContext" :class="{notready: !ready}" @command="onCommand" />
     <div class="empty-overview" v-else-if="!inChatSession">
       <empty-state-placeholder icon="house" title="overview.title" text="overview.text" />
-      <f7-row class="display-flex justify-content-center">
+      <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external href="https://openhab.org/link/docs" target="_blank" v-t="'home.overview.button.documentation'" />
         <span style="width: 8px" />
         <f7-button large color="blue" external href="https://openhab.org/link/tutorial" target="_blank" v-t="'home.overview.button.tutorial'" />
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
index 34ecbf4a11..e58f98459f 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/items/items-list-vlist.vue
@@ -2,6 +2,8 @@
   <f7-page @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut">
     <f7-navbar title="Items" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
+        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
@@ -54,8 +56,7 @@
 
       <f7-col v-show="ready && items.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ items.length }} Items -
-          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
+          {{ items.length }} Items
         </f7-block-title>
         <f7-list
           v-show="items.length > 0"
@@ -99,7 +100,7 @@
 
     <f7-block v-if="ready && !items.length" class="service-config block-narrow">
       <empty-state-placeholder icon="square_on_circle" title="items.title" text="items.text" />
-      <f7-row class="display-flex justify-content-center">
+      <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
       </f7-row>
     </f7-block>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
index 6e894baf19..47fdfd2be5 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@@ -1,6 +1,10 @@
 <template>
   <f7-page name="Model" :stacked="true" @page:afterin="onPageAfterIn" @page:beforeout="onPageBeforeOut" @click="selectItem(null)">
     <f7-navbar title="Semantic Model" back-link="Settings" back-link-url="/settings/" back-link-force>
+      <f7-nav-right v-if="$f7.width >= 1280">
+        <f7-link v-if="$store.state.developerDock" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
+      </f7-nav-right>
       <f7-subnavbar :inner="false" v-show="initSearchbar">
         <f7-searchbar
           v-if="initSearchbar"
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
index 016dcbb43a..ac87e15d9d 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/pages/pages-list.vue
@@ -2,6 +2,8 @@
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
     <f7-navbar title="Pages" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
+        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
@@ -66,8 +68,7 @@
 
       <f7-col v-else>
         <f7-block-title class="searchbar-hide-on-search">
-          {{ pages.length }} pages -
-          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
+          {{ pages.length }} pages
         </f7-block-title>
         <div class="padding-left padding-right searchbar-found" v-show="!ready || pages.length > 0">
           <f7-segmented strong tag="p">
@@ -170,9 +171,6 @@ export default {
     }
   },
   computed: {
-    documentationLink () {
-      return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/pages`
-    },
     indexedPages () {
       if (this.groupBy === 'alphabetical') {
         return this.pages.reduce((prev, page, i, pages) => {
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index b6c27ba681..3c0121e9fc 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -2,6 +2,8 @@
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
     <f7-navbar :title="type" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
+        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
@@ -74,8 +76,7 @@
 
       <f7-col v-else-if="rules.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ rules.length }} {{ type.toLowerCase() }} -
-          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
+          {{ rules.length }} {{ type.toLowerCase() }}
         </f7-block-title>
 
         <f7-list
@@ -118,7 +119,7 @@
       <empty-state-placeholder v-if="showScripts" icon="doc_plaintext" title="scripts.title" text="scripts.text" />
       <empty-state-placeholder v-else-if="showScenes" icon="film" title="scenes.title" text="scenes.text" />
       <empty-state-placeholder v-else icon="wand_stars" title="rules.title" text="rules.text" />
-      <f7-row class="display-flex justify-content-center">
+      <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
       </f7-row>
     </f7-block>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue b/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
index 0cd934ed2a..3e44fe2197 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/schedule/schedule.vue
@@ -2,6 +2,8 @@
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
     <f7-navbar title="Schedule" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
+        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
index a42f0cb5d3..9215b87ded 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/things/things-list.vue
@@ -2,6 +2,8 @@
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="stopEventSource">
     <f7-navbar title="Things" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
+        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
@@ -69,8 +71,7 @@
 
       <f7-col v-else-if="things.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ things.length }} Things -
-          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
+          {{ things.length }} Things
         </f7-block-title>
         <div class="searchbar-found padding-left padding-right">
           <f7-segmented strong tag="p">
@@ -121,7 +122,7 @@
 
     <f7-block v-if="ready && !things.length" class="block-narrow">
       <empty-state-placeholder icon="lightbulb" title="things.title" text="things.text" />
-      <f7-row class="display-flex justify-content-center">
+      <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
       </f7-row>
     </f7-block>
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
index 5d48b71d96..8fa13fa1c4 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/transformations/transformations-list.vue
@@ -2,6 +2,8 @@
   <f7-page @page:afterin="onPageAfterIn" @page:afterout="onPageAfterOut">
     <f7-navbar title="Transformations" back-link="Settings" back-link-url="/settings/" back-link-force>
       <f7-nav-right>
+        <f7-link v-if="$store.state.developerDock && $f7.width >= 1280" icon-f7="question_circle_fill" @click="$f7.emit('toggleDeveloperDock')" />
+        <f7-link v-else-if="$f7.width >= 1280" icon-f7="question_circle" @click="$f7.emit('selectDeveloperDock',{'dock':'help','helpTab':'current'})" />
         <f7-link icon-md="material:done_all" @click="toggleCheck()"
                  :text="(!$theme.md) ? ((showCheckboxes) ? 'Done' : 'Select') : ''" />
       </f7-nav-right>
@@ -62,8 +64,7 @@
 
       <f7-col v-else-if="transformations.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ transformations.length }} transformations -
-          <f7-link external :href="documentationLink" target="_blank" text="Open documentation" color="blue" />
+          {{ transformations.length }} transformations
         </f7-block-title>
         <div class="padding-left padding-right searchbar-found">
           <f7-segmented strong tag="p">
@@ -105,7 +106,7 @@
 
     <f7-block v-if="ready && !transformations.length" class="service-config block-narrow">
       <empty-state-placeholder icon="arrow_2_squarepath" title="transformations.title" text="transformations.text" />
-      <f7-row class="display-flex justify-content-center">
+      <f7-row v-if="$f7.width < 1280" class="display-flex justify-content-center">
         <f7-button large fill color="blue" external :href="documentationLink" target="_blank" v-t="'home.overview.button.documentation'" />
       </f7-row>
     </f7-block>