diff --git a/dashboard/index.html b/dashboard/index.html
index cff163d0f..17a5c5114 100644
--- a/dashboard/index.html
+++ b/dashboard/index.html
@@ -21,7 +21,6 @@
   <!-- CSS -->
   <link type="text/css" rel="stylesheet" href="/slick.css"/>
   <link type="text/css" rel="stylesheet" href="/angular-ui-notification.css"/>
-  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
 
   <!-- async -->
   <script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
@@ -94,6 +93,10 @@
 </head>
 
 <body>
+  <script type="module" src="/src/index.js"></script>
+
+  <!-- needs to be here to override the pankow styles partly -->
+  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
 
   <script type="text/ng-template" id="notification.html">
     <div class="ui-notification">
@@ -200,7 +203,10 @@
       </div>
     </nav>
 
-    <div ng-view id="ng-view" class="layout-content"></div>
+    <div style="display: flex; flex-direction: column; flex-grow: 1; overflow: auto;">
+      <div ng-view id="ng-view" class="layout-content"></div>
+      <div id="vueapp" style="background: white;"></div>
+    </div>
 
     <footer class="text-center ng-cloak">
       <span class="text-muted" ng-bind-html="config.footer | markdown2html"></span>
diff --git a/dashboard/public/js/index.js b/dashboard/public/js/index.js
index 8ff16d063..304d689fd 100644
--- a/dashboard/public/js/index.js
+++ b/dashboard/public/js/index.js
@@ -103,8 +103,8 @@ app.config(['$routeProvider', function ($routeProvider) {
         controller: 'EventLogController',
         templateUrl: 'views/eventlog.html?' + window.VITE_CACHE_ID
     }).when('/support', {
-        controller: 'SupportController',
-        templateUrl: 'views/support.html?' + window.VITE_CACHE_ID
+        // controller: 'SupportController',
+        // templateUrl: 'views/support.html?' + window.VITE_CACHE_ID
     }).when('/system', {
         controller: 'SystemController',
         templateUrl: 'views/system.html?' + window.VITE_CACHE_ID
diff --git a/dashboard/src/components/Index.vue b/dashboard/src/components/Index.vue
new file mode 100644
index 000000000..608e7f25e
--- /dev/null
+++ b/dashboard/src/components/Index.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <SupportView v-if="view === VIEWS.SUPPORT"></SupportView>
+  </div>
+</template>
+
+<script>
+
+import SupportView from './SupportView.vue';
+
+const VIEWS = {
+  SUPPORT: 'support'
+};
+
+export default {
+  name: 'Index',
+  components: {
+    SupportView
+  },
+  data() {
+    return {
+      VIEWS,
+      accessToken: localStorage.token,
+      view: ''
+    };
+  },
+  methods: {
+  },
+  async mounted() {
+    if (!localStorage.token) {
+      console.error('Set localStorage.token');
+      return;
+    }
+
+    const that = this;
+    function onHashChange() {
+      const view = location.hash.slice(2);
+
+      if (view === VIEWS.SUPPORT) {
+        that.view = VIEWS.SUPPORT;
+      } else {
+        that.view = '';
+      }
+    }
+
+    window.addEventListener('hashchange', onHashChange);
+    onHashChange();
+
+    console.log('Indexvue mounted')
+  }
+};
+
+</script>
+
+<style>
+
+</style>
diff --git a/dashboard/src/components/SupportView.vue b/dashboard/src/components/SupportView.vue
new file mode 100644
index 000000000..941f5bdf3
--- /dev/null
+++ b/dashboard/src/components/SupportView.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="content">
+    <h1 class="section-header">{{ $t('support.title') }}</h1>
+
+    <h3 class="section-header">{{ $t('support.help.title') }}</h3>
+    <div v-html="description"></div>
+
+    <h3 class="section-header">{{ $t('support.remoteSupport.title') }}</h3>
+    <h2 class="text-center" v-show="!ready"><i class="fa fa-circle-notch fa-spin"></i></h2>
+    <div v-show="ready">
+      <p>{{ $t('support.remoteSupport.description') }}</p>
+      <b>{{ $t('support.remoteSupport.warning') }}</b>
+      <br/>
+      <br/>
+      <b class="pull-left text-danger text-bold" v-show="toggleSshSupportError">{{ toggleSshSupportError }}</b>
+      <Button :danger="sshSupportEnabled ? true : null" @click="toggleSshSupport()">{{ sshSupportEnabled ? $t('support.remoteSupport.disableAction') : $t('support.remoteSupport.enableAction') }}</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { fetcher, Button } from 'pankow';
+import { marked } from 'marked';
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+const accessToken = localStorage.token;
+
+export default {
+  name: 'SupportView',
+  components: {
+    Button
+  },
+  data() {
+    return {
+      ready: false,
+      sshSupportEnabled: false,
+      toggleSshSupportError: ''
+    };
+  },
+  computed: {
+    description() {
+      return marked.parse(this.$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/'
+      }));
+    }
+  },
+  methods: {
+    async toggleSshSupport() {
+        this.toggleSshSupportError = '';
+
+        const res = await fetcher.post(`${API_ORIGIN}/api/v1/support/remote_support`, { enable: !this.sshSupportEnabled }, { access_token: accessToken });
+        if (res.status === 412 || res.status === 417) this.toggleSshSupportError = res.body;
+        else if (res.status !== 202) console.error(res.body);
+
+        this.sshSupportEnabled = !this.sshSupportEnabled;
+    }
+  },
+  async mounted() {
+    const response = await fetcher.get(`${API_ORIGIN}/api/v1/support/remote_support`, { access_token: accessToken });
+    this.sshSupportEnabled = response.body.enabled;
+    this.ready = true;
+  }
+};
+
+</script>
+
+<style>
+
+html {
+  --pankow-border-radius: 20px;
+}
+
+</style>
diff --git a/dashboard/src/index.js b/dashboard/src/index.js
new file mode 100644
index 000000000..0068e52f7
--- /dev/null
+++ b/dashboard/src/index.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import './style.css';
+
+import '@fontsource/noto-sans';
+
+import i18n from './i18n.js';
+import Index from './components/Index.vue';
+
+(async function init() {
+  const app = createApp(Index);
+
+  app.use(await i18n());
+
+  app.mount('#vueapp');
+})();
