diff --git a/dashboard/src/components/Headerbar.vue b/dashboard/src/components/Headerbar.vue
index 510e1ebc9..0b382f6fd 100644
--- a/dashboard/src/components/Headerbar.vue
+++ b/dashboard/src/components/Headerbar.vue
@@ -1,5 +1,9 @@
 <script setup>
 
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
 import { onMounted, ref, useTemplateRef, inject } from 'vue';
 import { marked } from 'marked';
 import { eachLimit } from 'async';
@@ -8,6 +12,13 @@ import NotificationsModel from '../models/NotificationsModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
 
+const helpButton = useTemplateRef('helpButton');
+const helpPopover = useTemplateRef('helpPopover');
+
+function onOpenHelp(popover, event, elem) {
+  popover.open(event, elem);
+}
+
 const notificationModel = NotificationsModel.create();
 const notificationButton = useTemplateRef('notificationButton');
 const notificationPopover = useTemplateRef('notificationPopover');
@@ -62,6 +73,12 @@ onMounted(async () => {
   if (props.profile.isAtLeastAdmin) await refresh();
 });
 
+const description = marked.parse(t('support.help.description', {
+  docsLink: 'https://docs.cloudron.io/?support_view',
+  packagingLink: 'https://docs.cloudron.io/custom-apps/tutorial/?support_view',
+  forumLink: 'https://forum.cloudron.io/'
+}));
+
 </script>
 
 <template>
@@ -87,6 +104,13 @@ onMounted(async () => {
       </div>
     </Popover>
 
+    <Popover ref="helpPopover" :width="'min(80%, 400px)'" :height="'min(80%, 600px)'">
+      <div style="padding: 10px; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
+        <h1 class="help-title">{{ $t('support.help.title') }}</h1>
+        <div v-html="description"></div>
+      </div>
+    </Popover>
+
     <div v-if="!profile.isAtLeastUserManager">
       <a href="#/" class="headerbar-action">
         <img :src="`https://${config.adminFqdn}/api/v1/cloudron/avatar`"/> {{ config.cloudronName || 'Cloudron' }}
@@ -99,7 +123,8 @@ onMounted(async () => {
     <div v-if="profile.isAtLeastOwner && subscription.plan.id === 'expired'" class="headerbar-action subscription-expired" style="gap: 6px" @click="onSubscriptionRequired()">Subscription Expired</div>
 
     <div class="headerbar-action" style="gap: 6px" v-if="profile.isAtLeastAdmin" ref="notificationButton" @click="onOpenNotifications(notificationPopover, $event, notificationButton)"><Icon :icon="notifications.length ? 'fas fa-bell' : 'far fa-bell'"/> {{ notifications.length > 99 ? '99+' : notifications.length }}</div>
-    <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a>
+    <div class="headerbar-action" style="gap: 6px" v-if="profile.isAtLeastAdmin" ref="helpButton" @click="onOpenHelp(helpPopover, $event, helpButton)"><Icon icon="fa fa-question"/></div>
+    <!-- <a class="headerbar-action"  v-if="profile.isAtLeastAdmin" href="#/support"><Icon icon="fa fa-question"/></a> -->
     <a class="headerbar-action" href="#/profile"><img :src="profile.avatarUrl" /> {{ profile.username }}</a>
   </div>
 </template>
@@ -132,6 +157,13 @@ onMounted(async () => {
   color: var(--pankow-color-primary-hover);
 }
 
+.help-title {
+  font-size: 20px;
+  padding-bottom: 10px;
+  margin: 0;
+  border-bottom: 1px solid var(--pankow-input-border-color);
+}
+
 .notification-item {
   margin-bottom: 10px;
   padding-bottom: 10px;