From dfb3285e180ad1fc9f9083c0f0a4a03cc9cc911e Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sun, 19 Jan 2025 12:00:22 +0100
Subject: [PATCH] Follow upstream recommendation to have html templates below
 script in .vue files

---
 dashboard/src/components/AccessControl.vue    |  65 +++--
 dashboard/src/components/ApiTokens.vue        | 132 +++++------
 dashboard/src/components/AppInstallDialog.vue | 122 +++++-----
 dashboard/src/components/AppPasswords.vue     | 116 ++++-----
 dashboard/src/components/ApplinkDialog.vue    | 143 +++++------
 dashboard/src/components/AppsView.vue         | 194 +++++++--------
 dashboard/src/components/AppstoreView.vue     | 104 ++++----
 dashboard/src/components/FileManager.vue      |  15 +-
 dashboard/src/components/FileViewer.vue       |  24 +-
 dashboard/src/components/FolderView.vue       | 194 +++++++--------
 dashboard/src/components/Index.vue            |  24 +-
 dashboard/src/components/Login.vue            |  96 ++++----
 dashboard/src/components/LogsViewer.vue       |  60 ++---
 dashboard/src/components/PasswordReset.vue    | 139 ++++++-----
 dashboard/src/components/PortBindings.vue     |  27 +--
 dashboard/src/components/PreviewPanel.vue     |  14 +-
 dashboard/src/components/ProfileView.vue      | 175 +++++++-------
 dashboard/src/components/Section.vue          |  21 +-
 dashboard/src/components/SupportView.vue      |  44 ++--
 dashboard/src/components/Terminal.vue         |  96 ++++----
 dashboard/src/components/VolumesView.vue      | 224 +++++++++---------
 21 files changed, 1008 insertions(+), 1021 deletions(-)

diff --git a/dashboard/src/components/AccessControl.vue b/dashboard/src/components/AccessControl.vue
index 562c4475c..ea4f18df9 100644
--- a/dashboard/src/components/AccessControl.vue
+++ b/dashboard/src/components/AccessControl.vue
@@ -1,35 +1,3 @@
-<template>
-  <div>
-    <FormGroup v-show="manifest.addons.email">
-      <label>{{ $t('appstore.installDialog.userManagement') }}</label>
-      <p>
-        {{ $t('appstore.installDialog.userManagementMailbox') }}
-        <span v-html="$t('appstore.installDialog.configuredForCloudronEmail', { emailDocsLink: 'https://docs.cloudron.io/email/' })"></span>
-      </p>
-    </FormGroup>
-
-    <FormGroup>
-      <label v-show="cloudronAuth && !manifest.addons.email">{{ $t('appstore.installDialog.userManagement') }} <sup><a href="https://docs.cloudron.io/apps/#access-restriction" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-      <label v-show="!cloudronAuth || manifest.addons.email">{{ $t('app.accessControl.userManagement.dashboardVisibility') }} <sup><a href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-      <p v-show="!cloudronAuth || manifest.addons.email">{{ $t('appstore.installDialog.userManagementNone') }}</p>
-      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.NOSSO" v-if="optionalSso" :label="$t('appstore.installDialog.userManagementLeaveToApp')"/>
-      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.ANY" :label="cloudronAuth ? $t('appstore.installDialog.userManagementAllUsers') : $t('app.accessControl.userManagement.visibleForAllUsers')"/>
-      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.RESTRICT" :label="cloudronAuth ? $t('appstore.installDialog.userManagementSelectUsers') : $t('app.accessControl.userManagement.visibleForSelected')"/>
-    </FormGroup>
-
-    <div v-if="accessRestrictionOption === OPTIONS.RESTRICT">
-      <div style="margin-left: 20px; display: flex;">
-        <div>
-          {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
-        </div>
-        <div>
-          {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup>
 
 import { ref, reactive, onMounted, watch } from 'vue';
@@ -87,5 +55,34 @@ onMounted(async () => {
 
 </script>
 
-<style scoped>
-</style>
+<template>
+  <div>
+    <FormGroup v-show="manifest.addons.email">
+      <label>{{ $t('appstore.installDialog.userManagement') }}</label>
+      <p>
+        {{ $t('appstore.installDialog.userManagementMailbox') }}
+        <span v-html="$t('appstore.installDialog.configuredForCloudronEmail', { emailDocsLink: 'https://docs.cloudron.io/email/' })"></span>
+      </p>
+    </FormGroup>
+
+    <FormGroup>
+      <label v-show="cloudronAuth && !manifest.addons.email">{{ $t('appstore.installDialog.userManagement') }} <sup><a href="https://docs.cloudron.io/apps/#access-restriction" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <label v-show="!cloudronAuth || manifest.addons.email">{{ $t('app.accessControl.userManagement.dashboardVisibility') }} <sup><a href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+      <p v-show="!cloudronAuth || manifest.addons.email">{{ $t('appstore.installDialog.userManagementNone') }}</p>
+      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.NOSSO" v-if="optionalSso" :label="$t('appstore.installDialog.userManagementLeaveToApp')"/>
+      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.ANY" :label="cloudronAuth ? $t('appstore.installDialog.userManagementAllUsers') : $t('app.accessControl.userManagement.visibleForAllUsers')"/>
+      <Radiobutton v-model="accessRestrictionOption" :value="OPTIONS.RESTRICT" :label="cloudronAuth ? $t('appstore.installDialog.userManagementSelectUsers') : $t('app.accessControl.userManagement.visibleForSelected')"/>
+    </FormGroup>
+
+    <div v-if="accessRestrictionOption === OPTIONS.RESTRICT">
+      <div style="margin-left: 20px; display: flex;">
+        <div>
+          {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
+        </div>
+        <div>
+          {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/dashboard/src/components/ApiTokens.vue b/dashboard/src/components/ApiTokens.vue
index 33c6f9bbd..482312554 100644
--- a/dashboard/src/components/ApiTokens.vue
+++ b/dashboard/src/components/ApiTokens.vue
@@ -1,69 +1,3 @@
-<template>
-  <div>
-    <InputDialog ref="inputDialog" />
-
-    <Dialog ref="newDialog"
-      :title="$t('profile.createApiToken.title')"
-      :confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
-       confirm-style="success"
-      :reject-label="$t('main.dialog.close')"
-      @confirm="onSubmitAddApiToken()"
-      @close="onReset()"
-    >
-      <div>
-        <Transition name="slide-left" mode="out-in">
-          <div v-if="!addedToken">
-            <form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
-              <input style="display: none" type="submit" :disabled="!isValid"/>
-              <FormGroup>
-                <label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
-                <TextInput id="apiTokenName" v-model="tokenName" required/>
-              </FormGroup>
-
-              <FormGroup>
-                <label>{{ $t('profile.createApiToken.access') }}</label>
-                <Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
-                <Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
-              </FormGroup>
-            </form>
-          </div>
-          <div v-else>
-            {{ $t('profile.createApiToken.description') }}
-            <TextInput v-model="addedToken" readonly/>
-            <Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
-            <p>{{ $t('profile.createApiToken.copyNow') }}</p>
-          </div>
-        </Transition>
-      </div>
-    </Dialog>
-
-    <Section :title="$t('profile.apiTokens.title')">
-      <template #header-buttons>
-        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
-      </template>
-
-      <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
-      <br/>
-
-      <TableView :columns="columns" :model="apiTokens">
-        <template #lastUsedTime="slotProps">
-          <span v-if="slotProps.lastUsedTime">{{ prettyLongDate(slotProps.lastUsedTime) }}</span>
-          <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
-        </template>
-        <template #scope="slotProps">
-          <span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
-          <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
-        </template>
-        <template #actions="slotProps">
-          <div class="table-actions">
-            <Button small outline tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
-          </div>
-        </template>
-      </TableView>
-    </Section>
-  </div>
-</template>
-
 <script setup>
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
@@ -168,3 +102,69 @@ onMounted(async () => {
 });
 
 </script>
+
+<template>
+  <div>
+    <InputDialog ref="inputDialog" />
+
+    <Dialog ref="newDialog"
+      :title="$t('profile.createApiToken.title')"
+      :confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
+       confirm-style="success"
+      :reject-label="$t('main.dialog.close')"
+      @confirm="onSubmitAddApiToken()"
+      @close="onReset()"
+    >
+      <div>
+        <Transition name="slide-left" mode="out-in">
+          <div v-if="!addedToken">
+            <form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
+              <input style="display: none" type="submit" :disabled="!isValid"/>
+              <FormGroup>
+                <label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
+                <TextInput id="apiTokenName" v-model="tokenName" required/>
+              </FormGroup>
+
+              <FormGroup>
+                <label>{{ $t('profile.createApiToken.access') }}</label>
+                <Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
+                <Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
+              </FormGroup>
+            </form>
+          </div>
+          <div v-else>
+            {{ $t('profile.createApiToken.description') }}
+            <TextInput v-model="addedToken" readonly/>
+            <Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
+            <p>{{ $t('profile.createApiToken.copyNow') }}</p>
+          </div>
+        </Transition>
+      </div>
+    </Dialog>
+
+    <Section :title="$t('profile.apiTokens.title')">
+      <template #header-buttons>
+        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+      </template>
+
+      <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
+      <br/>
+
+      <TableView :columns="columns" :model="apiTokens">
+        <template #lastUsedTime="slotProps">
+          <span v-if="slotProps.lastUsedTime">{{ prettyLongDate(slotProps.lastUsedTime) }}</span>
+          <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
+        </template>
+        <template #scope="slotProps">
+          <span v-if="slotProps.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
+          <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
+        </template>
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <Button small outline tool danger @click="onRevokeToken(slotProps)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>
diff --git a/dashboard/src/components/AppInstallDialog.vue b/dashboard/src/components/AppInstallDialog.vue
index 9b6fe336a..db43e837e 100644
--- a/dashboard/src/components/AppInstallDialog.vue
+++ b/dashboard/src/components/AppInstallDialog.vue
@@ -1,64 +1,3 @@
-<template>
-  <Dialog ref="dialogHandle" @close="onClose()">
-    <div class="content" :class="{ 'step-detail': step === STEP.DETAILS, 'step-install': step === STEP.INSTALL }">
-      <div class="header">
-        <div class="summary">
-          <div class="title">{{ manifest.title }}</div>
-          <div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
-          <div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
-          <div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
-        </div>
-        <img class="icon" :src="app.iconUrl" />
-      </div>
-      <Transition name="slide-left" mode="out-in">
-        <div v-if="step === STEP.DETAILS">
-          <Button @click="setStep(STEP.INSTALL)" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
-          <div class="screenshots">
-            <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
-          </div>
-          <div class="description" v-html="description"></div>
-        </div>
-        <div v-else-if="step === STEP.INSTALL">
-          <form @submit.prevent="submit()" autocomplete="off">
-            <fieldset :disabled="busy">
-              <input style="display: none;" type="submit" :disabled="!formValid" />
-
-              <FormGroup :class="{ 'has-error': formError.location }">
-                <label for="location">{{ $t('appstore.installDialog.location') }}</label>
-                <div>
-                  <TextInput id="location" ref="locationInput" v-model="location" />
-                  <Dropdown v-model="domain" :options="domains" option-label="domain" />
-                </div>
-              </FormGroup>
-
-              <p class="text-small text-warning" v-show="domain.provider === 'noop' || domain.provider === 'manual'" v-html="$t('appstore.installDialog.manualWarning', { location: ((location ? location + '.' : '') + domain.domain) })"></p>
-
-              <FormGroup v-for="(port, key) in secondaryDomains" :key="key">
-                <label :for="'secondaryDomainInput' + key">{{ port.title }}</label>
-                <small>{{ port.description }}</small>
-                <div>
-                  <TextInput :id="'secondaryDomainInput' + key" v-model="port.value" :placeholder="$t('appstore.installDialog.locationPlaceholder')"/>
-                  <Dropdown v-model="port.domain" :options="domains" option-label="domain" option-key="domain" />
-                </div>
-              </FormGroup>
-
-              <FormGroup :class="{ 'has-error': formError.upstreamUri }" v-show="manifest.id === PROXY_APP_ID">
-                <label for="upstreamUri">Upstream URI</label>
-                <TextInput id="upstreamUri" v-model="upstreamUri" />
-              </FormGroup>
-
-              <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="formError"/>
-              <AccessControl v-model="accessRestriction" :manifest="manifest"/>
-
-              <Button style="margin-top: 15px" @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
-            </fieldset>
-          </form>
-        </div>
-      </Transition>
-    </div>
-  </Dialog>
-</template>
-
 <script setup>
 
 import { ref, computed, useTemplateRef, onMounted } from 'vue';
@@ -212,6 +151,67 @@ defineExpose({
 
 </script>
 
+<template>
+  <Dialog ref="dialogHandle" @close="onClose()">
+    <div class="content" :class="{ 'step-detail': step === STEP.DETAILS, 'step-install': step === STEP.INSTALL }">
+      <div class="header">
+        <div class="summary">
+          <div class="title">{{ manifest.title }}</div>
+          <div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
+          <div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
+          <div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
+        </div>
+        <img class="icon" :src="app.iconUrl" />
+      </div>
+      <Transition name="slide-left" mode="out-in">
+        <div v-if="step === STEP.DETAILS">
+          <Button @click="setStep(STEP.INSTALL)" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
+          <div class="screenshots">
+            <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
+          </div>
+          <div class="description" v-html="description"></div>
+        </div>
+        <div v-else-if="step === STEP.INSTALL">
+          <form @submit.prevent="submit()" autocomplete="off">
+            <fieldset :disabled="busy">
+              <input style="display: none;" type="submit" :disabled="!formValid" />
+
+              <FormGroup :class="{ 'has-error': formError.location }">
+                <label for="location">{{ $t('appstore.installDialog.location') }}</label>
+                <div>
+                  <TextInput id="location" ref="locationInput" v-model="location" />
+                  <Dropdown v-model="domain" :options="domains" option-label="domain" />
+                </div>
+              </FormGroup>
+
+              <p class="text-small text-warning" v-show="domain.provider === 'noop' || domain.provider === 'manual'" v-html="$t('appstore.installDialog.manualWarning', { location: ((location ? location + '.' : '') + domain.domain) })"></p>
+
+              <FormGroup v-for="(port, key) in secondaryDomains" :key="key">
+                <label :for="'secondaryDomainInput' + key">{{ port.title }}</label>
+                <small>{{ port.description }}</small>
+                <div>
+                  <TextInput :id="'secondaryDomainInput' + key" v-model="port.value" :placeholder="$t('appstore.installDialog.locationPlaceholder')"/>
+                  <Dropdown v-model="port.domain" :options="domains" option-label="domain" option-key="domain" />
+                </div>
+              </FormGroup>
+
+              <FormGroup :class="{ 'has-error': formError.upstreamUri }" v-show="manifest.id === PROXY_APP_ID">
+                <label for="upstreamUri">Upstream URI</label>
+                <TextInput id="upstreamUri" v-model="upstreamUri" />
+              </FormGroup>
+
+              <PortBindings v-model:tcp-ports="tcpPorts" v-model:udp-ports="udpPorts" :error="formError"/>
+              <AccessControl v-model="accessRestriction" :manifest="manifest"/>
+
+              <Button style="margin-top: 15px" @click="submit" icon="fa-solid fa-circle-down" :disabled="!formValid" :loading="busy">Install {{ manifest.title }}</Button>
+            </fieldset>
+          </form>
+        </div>
+      </Transition>
+    </div>
+  </Dialog>
+</template>
+
 <style scoped>
 
 .content {
diff --git a/dashboard/src/components/AppPasswords.vue b/dashboard/src/components/AppPasswords.vue
index 6aadee49b..ee62ce2e6 100644
--- a/dashboard/src/components/AppPasswords.vue
+++ b/dashboard/src/components/AppPasswords.vue
@@ -1,61 +1,3 @@
-<template>
-  <div>
-    <InputDialog ref="inputDialog" />
-
-    <Dialog ref="newDialog"
-      :title="$t('profile.createAppPassword.title')"
-      :confirm-label="addedPassword ? '' : $t('profile.createAppPassword.generatePassword')"
-       confirm-style="success"
-      :reject-label="$t('main.dialog.close')"
-      @confirm="onSubmit()"
-      @close="onReset()"
-    >
-      <div>
-        <Transition name="slide-left" mode="out-in">
-          <div v-if="!addedPassword">
-            <form novalidate @submit="onSubmit()" autocomplete="off">
-              <input style="display: none" type="submit" :disabled="!isValid"/>
-              <FormGroup>
-                <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
-                <TextInput id="passwordName" v-model="passwordName" required/>
-              </FormGroup>
-
-              <FormGroup>
-                <label>{{ $t('profile.createAppPassword.app') }}</label>
-                <Dropdown outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" /> {{ dropdownValueWithKey }}
-              </FormGroup>
-            </form>
-          </div>
-          <div v-else>
-            {{ $t('profile.createAppPassword.description') }}
-            <TextInput v-model="addedPassword" readonly/>
-            <Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
-            <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
-          </div>
-        </Transition>
-      </div>
-    </Dialog>
-
-    <Section :title="$t('profile.appPasswords.title')">
-      <template #header-buttons>
-        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
-      </template>
-
-      <p>{{ $t('profile.appPasswords.description') }}</p>
-      <br/>
-
-      <TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
-        <template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
-        <template #actions="slotProps">
-          <div class="table-actions">
-            <Button small outline tool danger @click="onRemove(slotProps.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
-          </div>
-        </template>
-      </TableView>
-    </Section>
-  </div>
-</template>
-
 <script setup>
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
@@ -203,3 +145,61 @@ onMounted(async () => {
 });
 
 </script>
+
+<template>
+  <div>
+    <InputDialog ref="inputDialog" />
+
+    <Dialog ref="newDialog"
+      :title="$t('profile.createAppPassword.title')"
+      :confirm-label="addedPassword ? '' : $t('profile.createAppPassword.generatePassword')"
+       confirm-style="success"
+      :reject-label="$t('main.dialog.close')"
+      @confirm="onSubmit()"
+      @close="onReset()"
+    >
+      <div>
+        <Transition name="slide-left" mode="out-in">
+          <div v-if="!addedPassword">
+            <form novalidate @submit="onSubmit()" autocomplete="off">
+              <input style="display: none" type="submit" :disabled="!isValid"/>
+              <FormGroup>
+                <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
+                <TextInput id="passwordName" v-model="passwordName" required/>
+              </FormGroup>
+
+              <FormGroup>
+                <label>{{ $t('profile.createAppPassword.app') }}</label>
+                <Dropdown outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" /> {{ dropdownValueWithKey }}
+              </FormGroup>
+            </form>
+          </div>
+          <div v-else>
+            {{ $t('profile.createAppPassword.description') }}
+            <TextInput v-model="addedPassword" readonly/>
+            <Button tool @click="onCopyToClipboard(addedPassword)" icon="fa fa-clipboard" />
+            <p>{{ $t('profile.createAppPassword.copyNow') }}</p>
+          </div>
+        </Transition>
+      </div>
+    </Dialog>
+
+    <Section :title="$t('profile.appPasswords.title')">
+      <template #header-buttons>
+        <Button @click="newDialog.open()" icon="fa fa-plus">{{ $t('profile.appPasswords.newPassword') }}</Button>
+      </template>
+
+      <p>{{ $t('profile.appPasswords.description') }}</p>
+      <br/>
+
+      <TableView :columns="columns" :model="passwords" :placeholder="$t('profile.appPasswords.noPasswordsPlaceholder')">
+        <template #creationTime="slotProps">{{ prettyLongDate(slotProps.creationTime) }}</template>
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <Button small outline tool danger @click="onRemove(slotProps.id)" v-tooltip="$t('profile.appPasswords.deletePasswordTooltip')" icon="far fa-trash-alt" />
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>
diff --git a/dashboard/src/components/ApplinkDialog.vue b/dashboard/src/components/ApplinkDialog.vue
index b943d77fb..ba630e4d2 100644
--- a/dashboard/src/components/ApplinkDialog.vue
+++ b/dashboard/src/components/ApplinkDialog.vue
@@ -1,74 +1,3 @@
-<template>
-  <Dialog ref="applinkDialog"
-    :title="mode === 'edit' ? $t('app.editApplinkDialog.title') : $t('app.addApplinkDialog.title')"
-    :alternate-label="mode === 'edit' ? 'Delete' : ''"
-     alternate-style="danger"
-    :reject-label="$t('main.dialog.cancel')"
-    :confirm-label="$t('main.dialog.save')"
-     confirm-style="success"
-    :confirm-active="isValid"
-    :confirm-busy="busy"
-    @confirm="onSubmit()"
-    @alternate="onRemove()"
-  >
-    <InputDialog ref="inputDialog" />
-
-    <form @submit="onSubmit()" autocomplete="off">
-      <fieldset :disabled="busy">
-        <input style="display: none;" type="submit" :disabled="!isValid" />
-
-        <p class="has-error" v-show="error.generic">{{ error.generic }}</p>
-
-        <FormGroup :class="{ 'has-error': error.upstreamUri }">
-          <label for="applinkUpstreamUri">{{ $t('app.applinks.upstreamUri') }}</label>
-          <TextInput id="applinkUpstreamUri" v-model="upstreamUri" required />
-          <span class="text-danger" v-show="error.upstreamUri">{{ error.upstreamUri }}</span>
-        </FormGroup>
-
-        <FormGroup>
-          <label for="applinkLabel">{{ $t('app.applinks.label') }}</label>
-          <TextInput id="applinkLabel" v-model="label" />
-        </FormGroup>
-
-        <div>
-          <div>
-            <label for="previewIcon">{{ $t('app.display.icon') }}</label>
-          </div>
-          <div id="previewIcon" class="app-custom-icon" @click="showCustomIconSelector()">
-            <img :src="iconSrc" />
-            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
-          </div>
-          <span style="cursor: pointer;" @click="resetCustomIcon()">{{ $t('app.applinks.clearIconAction') }}</span> - <span class="text-small">{{ $t('app.applinks.clearIconDescription') }}</span>
-          <input type="file" ref="iconFileInput" style="display: none" accept="image/png" @change="onIconFileInputChanged($event)"/>
-        </div>
-
-        <FormGroup>
-          <label for="applinkTags">{{ $t('app.display.tags') }}</label>
-          <TagInput id="applinkTags" :placeholder="$t('app.display.tagsPlaceholder')" v-model="tags" v-tooltip="$t('app.display.tagsTooltip')" />
-        </FormGroup>
-
-        <FormGroup>
-          <label>{{ $t('app.accessControl.userManagement.dashboardVisibility') }} <sup><a href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-          <Radiobutton v-model="accessRestrictionOption" value="any" :label="$t('app.accessControl.userManagement.visibleForAllUsers')"/>
-          <Radiobutton v-model="accessRestrictionOption" value="groups" :label="$t('app.accessControl.userManagement.visibleForSelected')"/>
-          <!-- <span class="label label-danger"v-show="accessRestrictionOption === 'groups' && !isAccessRestrictionValid(applinkDialogData)">{{ $t('appstore.installDialog.errorUserManagementSelectAtLeastOne') }}</span> -->
-        </FormGroup>
-
-        <div v-if="accessRestrictionOption === 'groups'">
-          <div style="margin-left: 20px; display: flex;">
-            <div>
-              {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
-            </div>
-            <div>
-              {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
-            </div>
-          </div>
-        </div>
-      </fieldset>
-    </form>
-  </Dialog>
-</template>
-
 <script>
 
 import { Dialog, FormGroup, InputDialog, MultiSelect, Radiobutton, TagInput, TextInput } from 'pankow';
@@ -212,6 +141,7 @@ export default {
 
       if (!yes) return;
 
+      // TODO
       console.log('remove', this.id)
       // await volumesModel.remove(volume.id);
       // await this.refresh();
@@ -220,3 +150,74 @@ export default {
 };
 
 </script>
+
+<template>
+  <Dialog ref="applinkDialog"
+    :title="mode === 'edit' ? $t('app.editApplinkDialog.title') : $t('app.addApplinkDialog.title')"
+    :alternate-label="mode === 'edit' ? 'Delete' : ''"
+     alternate-style="danger"
+    :reject-label="$t('main.dialog.cancel')"
+    :confirm-label="$t('main.dialog.save')"
+     confirm-style="success"
+    :confirm-active="isValid"
+    :confirm-busy="busy"
+    @confirm="onSubmit()"
+    @alternate="onRemove()"
+  >
+    <InputDialog ref="inputDialog" />
+
+    <form @submit="onSubmit()" autocomplete="off">
+      <fieldset :disabled="busy">
+        <input style="display: none;" type="submit" :disabled="!isValid" />
+
+        <p class="has-error" v-show="error.generic">{{ error.generic }}</p>
+
+        <FormGroup :class="{ 'has-error': error.upstreamUri }">
+          <label for="applinkUpstreamUri">{{ $t('app.applinks.upstreamUri') }}</label>
+          <TextInput id="applinkUpstreamUri" v-model="upstreamUri" required />
+          <span class="text-danger" v-show="error.upstreamUri">{{ error.upstreamUri }}</span>
+        </FormGroup>
+
+        <FormGroup>
+          <label for="applinkLabel">{{ $t('app.applinks.label') }}</label>
+          <TextInput id="applinkLabel" v-model="label" />
+        </FormGroup>
+
+        <div>
+          <div>
+            <label for="previewIcon">{{ $t('app.display.icon') }}</label>
+          </div>
+          <div id="previewIcon" class="app-custom-icon" @click="showCustomIconSelector()">
+            <img :src="iconSrc" />
+            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
+          </div>
+          <span style="cursor: pointer;" @click="resetCustomIcon()">{{ $t('app.applinks.clearIconAction') }}</span> - <span class="text-small">{{ $t('app.applinks.clearIconDescription') }}</span>
+          <input type="file" ref="iconFileInput" style="display: none" accept="image/png" @change="onIconFileInputChanged($event)"/>
+        </div>
+
+        <FormGroup>
+          <label for="applinkTags">{{ $t('app.display.tags') }}</label>
+          <TagInput id="applinkTags" :placeholder="$t('app.display.tagsPlaceholder')" v-model="tags" v-tooltip="$t('app.display.tagsTooltip')" />
+        </FormGroup>
+
+        <FormGroup>
+          <label>{{ $t('app.accessControl.userManagement.dashboardVisibility') }} <sup><a href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+          <Radiobutton v-model="accessRestrictionOption" value="any" :label="$t('app.accessControl.userManagement.visibleForAllUsers')"/>
+          <Radiobutton v-model="accessRestrictionOption" value="groups" :label="$t('app.accessControl.userManagement.visibleForSelected')"/>
+          <!-- <span class="label label-danger"v-show="accessRestrictionOption === 'groups' && !isAccessRestrictionValid(applinkDialogData)">{{ $t('appstore.installDialog.errorUserManagementSelectAtLeastOne') }}</span> -->
+        </FormGroup>
+
+        <div v-if="accessRestrictionOption === 'groups'">
+          <div style="margin-left: 20px; display: flex;">
+            <div>
+              {{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
+            </div>
+            <div>
+              {{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </form>
+  </Dialog>
+</template>
diff --git a/dashboard/src/components/AppsView.vue b/dashboard/src/components/AppsView.vue
index 3da0db446..14337eda7 100644
--- a/dashboard/src/components/AppsView.vue
+++ b/dashboard/src/components/AppsView.vue
@@ -1,100 +1,3 @@
-<template>
-  <div>
-    <ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
-
-    <h1 class="section-header">
-      {{ $t('apps.title') }}
-      <div>
-        <TextInput v-model="filter" placeholder="Filter ..." />
-        <ButtonGroup>
-          <Dropdown outline tool :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
-          <Dropdown outline tool :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
-          <Dropdown outline tool :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
-        </ButtonGroup>
-        <Button tool @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
-      </div>
-    </h1>
-
-    <div v-show="ready">
-      <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
-        <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
-          <div class="config" v-show="isOperator(app)" @click.prevent="openAppEdit(app)"><Icon icon="fa-solid fa-cog" /></div>
-          <img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
-          <div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
-          <div class="grid-item-task-label">{{ installationStateLabel(app) }}</div>
-          <div class="apps-progress" v-show="isOperator(app)">
-            <div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
-          </div>
-        </a>
-      </TransitionGroup>
-
-      <div class="list" v-if="viewType === VIEW_TYPE.LIST">
-        <TableView :columns="listColumns" :model="filteredApps">
-          <template #icon="slotProps">
-            <a :href="'https://' + slotProps.fqdn" target="_blank">
-              <img class="list-icon" :src="API_ORIGIN + slotProps.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
-            </a>
-          </template>
-          <template #label="slotProps">
-            <a :href="'https://' + slotProps.fqdn" target="_blank" v-tooltip="slotProps.fqdn">
-              {{ slotProps.label || slotProps.subdomain || slotProps.fqdn }}
-            </a>
-          </template>
-          <template #appTitle="slotProps">
-            {{ slotProps.manifest.title }}
-          </template>
-          <template #domain="slotProps">
-            <a :href="'https://' + slotProps.fqdn" target="_blank">
-              {{ slotProps.fqdn }}
-            </a>
-          </template>
-          <template #status="slotProps">
-            <div class="list-status">
-              {{ installationStateLabel(slotProps) }}
-              <div class="apps-progress" v-show="isOperator(slotProps)">
-                <div class="apps-progress-filled" :style="{ width: slotProps.progress+'%' }"></div>
-              </div>
-            </div>
-          </template>
-          <template #sso="slotProps">
-            <div v-show="slotProps.type !== APP_TYPES.LINK">
-              <Icon icon="fa-brands fa-openid" v-show="slotProps.ssoAuth && slotProps.manifest.addons.oidc" v-tooltip="$t('apps.auth.openid')" />
-              <Icon icon="fas fa-user" v-show="slotProps.ssoAuth && (!slotProps.manifest.addons.oidc && !slotProps.manifest.addons.email)" v-tooltip="$t('apps.auth.sso')" />
-              <Icon icon="far fa-user" v-show="!slotProps.ssoAuth && !slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.nosso')" />
-              <Icon icon="fas fa-envelope" v-show="slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.email')" />
-            </div>
-          </template>
-          <template #actions="slotProps">
-            <div class="actions">
-              <ButtonGroup>
-                <Button tool v-if="slotProps.type !== APP_TYPES.LINK" :href="'/logs.html?appId=' + slotProps.id" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fas fa-align-left"></Button>
-                <Button tool v-if="slotProps.type !== APP_TYPES.PROXIED && slotProps.type !== APP_TYPES.LINK" :href="'/terminal.html?id=' + slotProps.id" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal"></Button>
-                <Button tool v-if="slotProps.manifest.addons.localstorage" :href="'/filemanager.html#/home/app/' + slotProps.id" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder"></Button>
-              </ButtonGroup>
-
-              <Button tool @click="openAppEdit(slotProps)" icon="fa-solid fa-cog"></Button>
-            </div>
-          </template>
-        </TableView>
-      </div>
-
-      <div class="empty-placeholder" v-if="apps.length === 0">
-        <!-- for admins -->
-        <div v-if="profile.isAtLeastAdmin">
-          <h4>{{ $t('apps.noApps.title') }}</h4>
-          <h5 v-html="$t('apps.noApps.description', { appStoreLink: '#/appstore' })"></h5>
-        </div>
-
-        <!-- for non-admins -->
-        <div v-if="!profile.isAtLeastAdmin">
-          <h4>{{ $t('apps.noAccess.title') }}</h4>
-          <h5>{{ $t('apps.noAccess.description') }}</h5>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 
 import { Button, ButtonGroup, Dropdown, Icon, TableView, TextInput } from 'pankow';
@@ -294,6 +197,103 @@ export default {
 
 </script>
 
+<template>
+  <div>
+    <ApplinkDialog ref="applinkDialog" @success="refreshApps()"/>
+
+    <h1 class="section-header">
+      {{ $t('apps.title') }}
+      <div>
+        <TextInput v-model="filter" placeholder="Filter ..." />
+        <ButtonGroup>
+          <Dropdown outline tool :options="tagFilterOptions" option-key="id" option-label="name" v-model="tagFilter"></Dropdown>
+          <Dropdown outline tool :options="stateFilterOptions" option-key="id" v-model="stateFilter"></Dropdown>
+          <Dropdown outline tool :options="domainFilterOptions" option-key="id" option-label="domain" v-model="domainFilter"></Dropdown>
+        </ButtonGroup>
+        <Button tool @click="toggleView()" :icon="viewType === VIEW_TYPE.GRID ? 'fas fa-list' : 'fas fa-grip'"></Button>
+      </div>
+    </h1>
+
+    <div v-show="ready">
+      <TransitionGroup name="grid-animation" tag="div" class="grid" v-if="viewType === VIEW_TYPE.GRID">
+        <a v-for="app in filteredApps" :key="app.id" class="grid-item" @click="onOpenApp(app, $event)" :href="'https://' + app.fqdn" target="_blank" v-tooltip="app.fqdn">
+          <div class="config" v-show="isOperator(app)" @click.prevent="openAppEdit(app)"><Icon icon="fa-solid fa-cog" /></div>
+          <img :src="API_ORIGIN + app.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
+          <div class="grid-item-label">{{ app.label || app.subdomain || app.fqdn }}</div>
+          <div class="grid-item-task-label">{{ installationStateLabel(app) }}</div>
+          <div class="apps-progress" v-show="isOperator(app)">
+            <div class="apps-progress-filled" :style="{ width: app.progress+'%' }"></div>
+          </div>
+        </a>
+      </TransitionGroup>
+
+      <div class="list" v-if="viewType === VIEW_TYPE.LIST">
+        <TableView :columns="listColumns" :model="filteredApps">
+          <template #icon="slotProps">
+            <a :href="'https://' + slotProps.fqdn" target="_blank">
+              <img class="list-icon" :src="API_ORIGIN + slotProps.iconUrl" v-fallback-image="API_ORIGIN + '/img/appicon_fallback.png'"/>
+            </a>
+          </template>
+          <template #label="slotProps">
+            <a :href="'https://' + slotProps.fqdn" target="_blank" v-tooltip="slotProps.fqdn">
+              {{ slotProps.label || slotProps.subdomain || slotProps.fqdn }}
+            </a>
+          </template>
+          <template #appTitle="slotProps">
+            {{ slotProps.manifest.title }}
+          </template>
+          <template #domain="slotProps">
+            <a :href="'https://' + slotProps.fqdn" target="_blank">
+              {{ slotProps.fqdn }}
+            </a>
+          </template>
+          <template #status="slotProps">
+            <div class="list-status">
+              {{ installationStateLabel(slotProps) }}
+              <div class="apps-progress" v-show="isOperator(slotProps)">
+                <div class="apps-progress-filled" :style="{ width: slotProps.progress+'%' }"></div>
+              </div>
+            </div>
+          </template>
+          <template #sso="slotProps">
+            <div v-show="slotProps.type !== APP_TYPES.LINK">
+              <Icon icon="fa-brands fa-openid" v-show="slotProps.ssoAuth && slotProps.manifest.addons.oidc" v-tooltip="$t('apps.auth.openid')" />
+              <Icon icon="fas fa-user" v-show="slotProps.ssoAuth && (!slotProps.manifest.addons.oidc && !slotProps.manifest.addons.email)" v-tooltip="$t('apps.auth.sso')" />
+              <Icon icon="far fa-user" v-show="!slotProps.ssoAuth && !slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.nosso')" />
+              <Icon icon="fas fa-envelope" v-show="slotProps.manifest.addons.email" v-tooltip="$t('apps.auth.email')" />
+            </div>
+          </template>
+          <template #actions="slotProps">
+            <div class="actions">
+              <ButtonGroup>
+                <Button tool v-if="slotProps.type !== APP_TYPES.LINK" :href="'/logs.html?appId=' + slotProps.id" target="_blank" v-tooltip="$t('app.logsActionTooltip')" icon="fas fa-align-left"></Button>
+                <Button tool v-if="slotProps.type !== APP_TYPES.PROXIED && slotProps.type !== APP_TYPES.LINK" :href="'/terminal.html?id=' + slotProps.id" target="_blank" v-tooltip="$t('app.terminalActionTooltip')" icon="fa fa-terminal"></Button>
+                <Button tool v-if="slotProps.manifest.addons.localstorage" :href="'/filemanager.html#/home/app/' + slotProps.id" target="_blank" v-tooltip="$t('app.filemanagerActionTooltip')" icon="fas fa-folder"></Button>
+              </ButtonGroup>
+
+              <Button tool @click="openAppEdit(slotProps)" icon="fa-solid fa-cog"></Button>
+            </div>
+          </template>
+        </TableView>
+      </div>
+
+      <div class="empty-placeholder" v-if="apps.length === 0">
+        <!-- for admins -->
+        <div v-if="profile.isAtLeastAdmin">
+          <h4>{{ $t('apps.noApps.title') }}</h4>
+          <h5 v-html="$t('apps.noApps.description', { appStoreLink: '#/appstore' })"></h5>
+        </div>
+
+        <!-- for non-admins -->
+        <div v-if="!profile.isAtLeastAdmin">
+          <h4>{{ $t('apps.noAccess.title') }}</h4>
+          <h5>{{ $t('apps.noAccess.description') }}</h5>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped>
 
 .grid-animation-move,
diff --git a/dashboard/src/components/AppstoreView.vue b/dashboard/src/components/AppstoreView.vue
index 6d0f93d3e..a3a4c5ac1 100644
--- a/dashboard/src/components/AppstoreView.vue
+++ b/dashboard/src/components/AppstoreView.vue
@@ -1,55 +1,3 @@
-<template>
-  <div>
-    <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
-    <ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
-
-    <div class="filter-bar">
-      <div></div>
-      <TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
-      <ButtonGroup>
-        <Button outline icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
-        <Button outline icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
-      </ButtonGroup>
-    </div>
-
-    <div v-if="!search">
-      <h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
-      <TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
-        <div class="item" v-for="app in filteredPopularApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
-          <img class="icon" :src="app.iconUrl" />
-          <div class="description">
-            <div class="title">{{ app.manifest.title }}</div>
-            <div class="tagline">{{ app.manifest.tagline }}</div>
-          </div>
-        </div>
-      </TransitionGroup>
-
-      <h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
-      <TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
-        <div class="item" v-for="app in filteredAllApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
-          <img class="icon" :src="app.iconUrl" />
-          <div class="description">
-            <div class="title">{{ app.manifest.title }}</div>
-            <div class="tagline">{{ app.manifest.tagline }}</div>
-          </div>
-        </div>
-      </TransitionGroup>
-    </div>
-    <div v-else>
-      <TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
-        <div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
-          <img class="icon" :src="app.iconUrl" />
-          <div class="description">
-            <div class="title">{{ app.manifest.title }}</div>
-            <div class="tagline">{{ app.manifest.tagline }}</div>
-          </div>
-        </div>
-      </TransitionGroup>
-    </div>
-
-  </div>
-</template>
-
 <script setup>
 
 import { ref, computed, useTemplateRef, onMounted } from 'vue';
@@ -130,6 +78,58 @@ onMounted(async () => {
 
 </script>
 
+<template>
+  <div>
+    <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
+    <ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
+
+    <div class="filter-bar">
+      <div></div>
+      <TextInput ref="searchInput" @keydown.esc="search = ''" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
+      <ButtonGroup>
+        <Button outline icon="fas fa-exchange-alt" @click="onInstall(proxyApp)">{{ $t('apps.addAppproxyAction') }}</Button>
+        <Button outline icon="fas fa-link" @click="onApplinkDialogOpen()">{{ $t('apps.addApplinkAction') }}</Button>
+      </ButtonGroup>
+    </div>
+
+    <div v-if="!search">
+      <h4 v-show="filteredPopularApps.length">{{ $t('appstore.category.popular') }}</h4>
+      <TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
+        <div class="item" v-for="app in filteredPopularApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
+          <img class="icon" :src="app.iconUrl" />
+          <div class="description">
+            <div class="title">{{ app.manifest.title }}</div>
+            <div class="tagline">{{ app.manifest.tagline }}</div>
+          </div>
+        </div>
+      </TransitionGroup>
+
+      <h4 v-show="filteredAllApps.length">{{ $t('appstore.category.all') }}</h4>
+      <TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
+        <div class="item" v-for="app in filteredAllApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
+          <img class="icon" :src="app.iconUrl" />
+          <div class="description">
+            <div class="title">{{ app.manifest.title }}</div>
+            <div class="tagline">{{ app.manifest.tagline }}</div>
+          </div>
+        </div>
+      </TransitionGroup>
+    </div>
+    <div v-else>
+      <TransitionGroup name="grid-animation" tag="div" class="grid" v-show="ready">
+        <div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
+          <img class="icon" :src="app.iconUrl" />
+          <div class="description">
+            <div class="title">{{ app.manifest.title }}</div>
+            <div class="tagline">{{ app.manifest.tagline }}</div>
+          </div>
+        </div>
+      </TransitionGroup>
+    </div>
+
+  </div>
+</template>
+
 <style scoped>
 
 .grid-animation-move,
diff --git a/dashboard/src/components/FileManager.vue b/dashboard/src/components/FileManager.vue
index 2f2ef0900..a11aec523 100644
--- a/dashboard/src/components/FileManager.vue
+++ b/dashboard/src/components/FileManager.vue
@@ -1,9 +1,3 @@
-<template>
-  <!-- router-view needs some fake node first for some unknown reason -->
-  <span></span>
-  <router-view></router-view>
-</template>
-
 <script>
 
 export default {
@@ -12,11 +6,14 @@ export default {
     };
   },
   mounted() {
-    if (!localStorage.token) console.error('Set localStorage.token')
+    if (!localStorage.token) console.error('Set localStorage.token');
   }
 };
 
 </script>
 
-<style scoped>
-</style>
+<template>
+  <!-- router-view needs some fake node first for some unknown reason -->
+  <span></span>
+  <router-view></router-view>
+</template>
diff --git a/dashboard/src/components/FileViewer.vue b/dashboard/src/components/FileViewer.vue
index 16a0aaab6..516ec6d27 100644
--- a/dashboard/src/components/FileViewer.vue
+++ b/dashboard/src/components/FileViewer.vue
@@ -1,15 +1,3 @@
-<template>
-  <div class="viewer">
-    <TextViewer ref="textEditor"
-      v-show="active === 'textEditor'"
-      :save-handler="saveHandler"
-      @close="onClose"
-      :tr="$t"
-    />
-    <ImageViewer ref="imageViewer" v-show="active === 'imageViewer'" @close="onClose" :navigation-handler="imageViewerNavigationHandler"/>
-  </div>
-</template>
-
 <script>
 
 import { TextViewer, ImageViewer } from 'pankow-viewers';
@@ -85,6 +73,18 @@ export default {
 
 </script>
 
+<template>
+  <div class="viewer">
+    <TextViewer ref="textEditor"
+      v-show="active === 'textEditor'"
+      :save-handler="saveHandler"
+      @close="onClose"
+      :tr="$t"
+    />
+    <ImageViewer ref="imageViewer" v-show="active === 'imageViewer'" @close="onClose" :navigation-handler="imageViewerNavigationHandler"/>
+  </div>
+</template>
+
 <style scoped>
 
 .viewer{
diff --git a/dashboard/src/components/FolderView.vue b/dashboard/src/components/FolderView.vue
index 08d243d5b..2a8cea9d1 100644
--- a/dashboard/src/components/FolderView.vue
+++ b/dashboard/src/components/FolderView.vue
@@ -1,100 +1,3 @@
-<template>
-  <MainLayout>
-    <template #dialogs>
-      <Notification />
-
-      <Dialog ref="fatalErrorDialog" modal title="Error">
-        <p>{{ fatalError }}</p>
-      </Dialog>
-
-      <Dialog ref="extractInProgressDialog" modal :title="$t('filemanager.extractionInProgress')">
-        <div style="text-align: center;">
-          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
-        </div>
-      </Dialog>
-
-      <Dialog ref="pasteInProgressDialog" modal :title="$t('filemanager.pasteInProgress')">
-        <div style="text-align: center;">
-          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
-        </div>
-      </Dialog>
-
-      <Dialog ref="deleteInProgressDialog" modal :title="$t('filemanager.deleteInProgress')">
-        <div style="text-align: center;">
-          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
-        </div>
-      </Dialog>
-
-      <InputDialog ref="inputDialog" />
-    </template>
-    <template #header>
-      <TopBar class="navbar">
-        <template #left>
-          <Button icon="fa-solid fa-arrow-rotate-right" :loading="busyRefresh" @click="onRefresh()" secondary plain tool/>
-          <Breadcrumb :home="breadcrumbHomeItem" :items="breadcrumbItems" :activate-handler="onActivateBreadcrumb"/>
-        </template>
-        <template #right>
-          <Button icon="fa-solid fa-plus" :menu="createMenuModel">{{ $t('filemanager.toolbar.new') }}</Button>
-          <Button icon="fa-solid fa-upload" :menu="uploadMenuModel">{{ $t('filemanager.toolbar.upload') }}</Button>
-
-          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp" v-show="resourceType === 'app'"/>
-          <Button :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
-          <Button :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
-        </template>
-      </TopBar>
-    </template>
-    <template #body>
-      <div class="main-view">
-        <div class="main-view-col">
-          <DirectoryView
-            class="directory-view"
-            :busy="busy"
-            :show-owner="true"
-            :show-size="true"
-            :show-modified="true"
-            @selection-changed="onSelectionChanged"
-            @item-activated="onItemActivated"
-            :delete-handler="deleteHandler"
-            :rename-handler="renameHandler"
-            :change-owner-handler="changeOwnerHandler"
-            :paste-handler="pasteHandler"
-            :download-handler="downloadHandler"
-            :extract-handler="extractHandler"
-            :new-file-handler="onNewFile"
-            :new-folder-handler="onNewFolder"
-            :upload-file-handler="onUploadFile"
-            :upload-folder-handler="onUploadFolder"
-            :drop-handler="onDrop"
-            :items="items"
-            :owners-model="ownersModel"
-            :fallback-icon="fallbackIcon"
-            :tr="$t"
-          />
-        </div>
-        <div class="main-view-col" style="max-width: 300px;">
-          <div class="side-bar-title">
-            <a v-show="appLink" :href="appLink" target="_blank">{{ title }}</a>
-            <span v-show="!appLink">{{ title }}</span>
-          </div>
-          <PreviewPanel :item="activeItem || activeDirectoryItem" :fallback-icon="fallbackIcon"/>
-        </div>
-      </div>
-    </template>
-    <template #footer>
-      <FileUploader
-        ref="fileUploader"
-        :upload-handler="uploadHandler"
-        :cancel-handler="onCancelUpload"
-        @finished="onUploadFinished"
-        :tr="$t"
-      />
-      <BottomBar>
-        <div v-html="footerContent" class="bottom-bar-content"></div>
-      </BottomBar>
-    </template>
-  </MainLayout>
-</template>
-
 <script>
 
 import { marked } from 'marked';
@@ -577,6 +480,103 @@ export default {
 
 </script>
 
+<template>
+  <MainLayout>
+    <template #dialogs>
+      <Notification />
+
+      <Dialog ref="fatalErrorDialog" modal title="Error">
+        <p>{{ fatalError }}</p>
+      </Dialog>
+
+      <Dialog ref="extractInProgressDialog" modal :title="$t('filemanager.extractionInProgress')">
+        <div style="text-align: center;">
+          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
+        </div>
+      </Dialog>
+
+      <Dialog ref="pasteInProgressDialog" modal :title="$t('filemanager.pasteInProgress')">
+        <div style="text-align: center;">
+          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
+        </div>
+      </Dialog>
+
+      <Dialog ref="deleteInProgressDialog" modal :title="$t('filemanager.deleteInProgress')">
+        <div style="text-align: center;">
+          <Spinner style="margin: 10px; width: 50px; height: 50px"/>
+        </div>
+      </Dialog>
+
+      <InputDialog ref="inputDialog" />
+    </template>
+    <template #header>
+      <TopBar class="navbar">
+        <template #left>
+          <Button icon="fa-solid fa-arrow-rotate-right" :loading="busyRefresh" @click="onRefresh()" secondary plain tool/>
+          <Breadcrumb :home="breadcrumbHomeItem" :items="breadcrumbItems" :activate-handler="onActivateBreadcrumb"/>
+        </template>
+        <template #right>
+          <Button icon="fa-solid fa-plus" :menu="createMenuModel">{{ $t('filemanager.toolbar.new') }}</Button>
+          <Button icon="fa-solid fa-upload" :menu="uploadMenuModel">{{ $t('filemanager.toolbar.upload') }}</Button>
+
+          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp" v-show="resourceType === 'app'"/>
+          <Button :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
+          <Button :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
+        </template>
+      </TopBar>
+    </template>
+    <template #body>
+      <div class="main-view">
+        <div class="main-view-col">
+          <DirectoryView
+            class="directory-view"
+            :busy="busy"
+            :show-owner="true"
+            :show-size="true"
+            :show-modified="true"
+            @selection-changed="onSelectionChanged"
+            @item-activated="onItemActivated"
+            :delete-handler="deleteHandler"
+            :rename-handler="renameHandler"
+            :change-owner-handler="changeOwnerHandler"
+            :paste-handler="pasteHandler"
+            :download-handler="downloadHandler"
+            :extract-handler="extractHandler"
+            :new-file-handler="onNewFile"
+            :new-folder-handler="onNewFolder"
+            :upload-file-handler="onUploadFile"
+            :upload-folder-handler="onUploadFolder"
+            :drop-handler="onDrop"
+            :items="items"
+            :owners-model="ownersModel"
+            :fallback-icon="fallbackIcon"
+            :tr="$t"
+          />
+        </div>
+        <div class="main-view-col" style="max-width: 300px;">
+          <div class="side-bar-title">
+            <a v-show="appLink" :href="appLink" target="_blank">{{ title }}</a>
+            <span v-show="!appLink">{{ title }}</span>
+          </div>
+          <PreviewPanel :item="activeItem || activeDirectoryItem" :fallback-icon="fallbackIcon"/>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <FileUploader
+        ref="fileUploader"
+        :upload-handler="uploadHandler"
+        :cancel-handler="onCancelUpload"
+        @finished="onUploadFinished"
+        :tr="$t"
+      />
+      <BottomBar>
+        <div v-html="footerContent" class="bottom-bar-content"></div>
+      </BottomBar>
+    </template>
+  </MainLayout>
+</template>
+
 <style scoped>
 
 .main-view {
diff --git a/dashboard/src/components/Index.vue b/dashboard/src/components/Index.vue
index 9c045ea69..1e328422e 100644
--- a/dashboard/src/components/Index.vue
+++ b/dashboard/src/components/Index.vue
@@ -1,14 +1,3 @@
-<template>
-  <div>
-    <Notification />
-    <AppsView v-if="view === VIEWS.APPS" />
-    <AppstoreView v-if="view === VIEWS.APPSTORE" />
-    <ProfileView v-if="view === VIEWS.PROFILE" />
-    <SupportView v-if="view === VIEWS.SUPPORT" />
-    <VolumesView v-if="view === VIEWS.VOLUMES" />
-  </div>
-</template>
-
 <script>
 
 import { Notification } from 'pankow';
@@ -89,6 +78,13 @@ export default {
 
 </script>
 
-<style>
-
-</style>
+<template>
+  <div>
+    <Notification />
+    <AppsView v-if="view === VIEWS.APPS" />
+    <AppstoreView v-if="view === VIEWS.APPSTORE" />
+    <ProfileView v-if="view === VIEWS.PROFILE" />
+    <SupportView v-if="view === VIEWS.SUPPORT" />
+    <VolumesView v-if="view === VIEWS.VOLUMES" />
+  </div>
+</template>
diff --git a/dashboard/src/components/Login.vue b/dashboard/src/components/Login.vue
index 6c08e5374..d71fabdc2 100644
--- a/dashboard/src/components/Login.vue
+++ b/dashboard/src/components/Login.vue
@@ -1,51 +1,3 @@
-<template>
-  <div class="layout-root" v-show="ready">
-    <div class="layout-left">
-      <img width="128" height="128" class="icon" :src="iconUrl"/>
-    </div>
-    <div class="layout-right">
-      <small>{{ $t('login.loginTo') }}</small>
-      <h1>{{ name }}</h1>
-      <br/>
-      <div :html="note"></div>
-
-      <p class="has-error" v-show="passwordError">{{ $t('login.errorIncorrectCredentials') }}</p>
-      <p class="has-error" v-show="internalError">{{ $t('login.errorInternal') }}</p>
-
-      <form @submit.prevent="onSubmit" v-show="!totpTokenRequired">
-        <input type="submit" style="display: none;"/>
-
-        <div class="form-element">
-          <label for="inputUsername">{{ $t('login.username') }}</label>
-          <TextInput id="inputUsername" v-model="username" autofocus required/>
-        </div>
-
-        <div class="form-element">
-          <label for="inputPassword">{{ $t('login.password') }}</label>
-          <PasswordInput id="inputPassword" v-model="password" required/>
-        </div>
-
-        <Button id="loginSubmitButton" style="margin-top: 12px" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
-        <a href="/passwordreset.html" style="margin-left: 10px;">{{ $t('login.resetPasswordAction') }}</a>
-      </form>
-
-      <form @submit.prevent="onSubmit" v-show="totpTokenRequired">
-        <input type="submit" style="display: none;"/>
-
-        <div class="form-element">
-          <label for="inputTotpToken">{{ $t('login.2faToken') }}</label>
-          <TextInput id="inputTotpToken" v-model="totpToken"/>
-          <p class="has-error" v-show="totpError">{{ $t('login.errorIncorrect2FAToken') }}</p>
-        </div>
-
-        <Button id="totpTokenSubmitButton" style="margin-top: 12px" type="submit" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
-      </form>
-    </div>
-  </div>
-
-  <footer v-show="footer" v-html="footer"></footer>
-</template>
-
 <script>
 
 import { Button, PasswordInput, TextInput, fetcher } from 'pankow';
@@ -139,6 +91,54 @@ export default {
 
 </script>
 
+<template>
+  <div class="layout-root" v-show="ready">
+    <div class="layout-left">
+      <img width="128" height="128" class="icon" :src="iconUrl"/>
+    </div>
+    <div class="layout-right">
+      <small>{{ $t('login.loginTo') }}</small>
+      <h1>{{ name }}</h1>
+      <br/>
+      <div :html="note"></div>
+
+      <p class="has-error" v-show="passwordError">{{ $t('login.errorIncorrectCredentials') }}</p>
+      <p class="has-error" v-show="internalError">{{ $t('login.errorInternal') }}</p>
+
+      <form @submit.prevent="onSubmit" v-show="!totpTokenRequired">
+        <input type="submit" style="display: none;"/>
+
+        <div class="form-element">
+          <label for="inputUsername">{{ $t('login.username') }}</label>
+          <TextInput id="inputUsername" v-model="username" autofocus required/>
+        </div>
+
+        <div class="form-element">
+          <label for="inputPassword">{{ $t('login.password') }}</label>
+          <PasswordInput id="inputPassword" v-model="password" required/>
+        </div>
+
+        <Button id="loginSubmitButton" style="margin-top: 12px" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+        <a href="/passwordreset.html" style="margin-left: 10px;">{{ $t('login.resetPasswordAction') }}</a>
+      </form>
+
+      <form @submit.prevent="onSubmit" v-show="totpTokenRequired">
+        <input type="submit" style="display: none;"/>
+
+        <div class="form-element">
+          <label for="inputTotpToken">{{ $t('login.2faToken') }}</label>
+          <TextInput id="inputTotpToken" v-model="totpToken"/>
+          <p class="has-error" v-show="totpError">{{ $t('login.errorIncorrect2FAToken') }}</p>
+        </div>
+
+        <Button id="totpTokenSubmitButton" style="margin-top: 12px" type="submit" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+      </form>
+    </div>
+  </div>
+
+  <footer v-show="footer" v-html="footer"></footer>
+</template>
+
 <style>
 
 .icon {
diff --git a/dashboard/src/components/LogsViewer.vue b/dashboard/src/components/LogsViewer.vue
index 78d8f112f..e1fd772f3 100644
--- a/dashboard/src/components/LogsViewer.vue
+++ b/dashboard/src/components/LogsViewer.vue
@@ -1,30 +1,3 @@
-<template>
-  <MainLayout>
-    <template #dialogs>
-      <InputDialog ref="inputDialog" />
-    </template>
-    <template #header>
-      <TopBar class="navbar">
-        <template #left>
-          <span class="title">{{ name }}</span>
-        </template>
-        <template #right>
-          <Button icon="fa-solid fa-eraser" @click="onClear()" style="margin-right: 5px">{{ $t('logs.clear') }}</Button>
-          <Button :href="downloadUrl" target="_blank" icon="fa-solid fa-download">{{ $t('logs.download') }}</Button>
-
-          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" v-show="showRestart" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
-          <Button :href="'/terminal.html?id=' + id" target="_blank" v-show="showTerminal" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
-          <Button :href="'/filemanager.html#/home/app/' + id" target="_blank" v-show="showFilemanager" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
-        </template>
-      </TopBar>
-    </template>
-    <template #body>
-      <div ref="linesContainer"></div>
-      <div class="bottom-spacer"></div>
-    </template>
-  </MainLayout>
-</template>
-
 <script>
 
 import { Button, InputDialog, TopBar, MainLayout } from 'pankow';
@@ -149,9 +122,9 @@ export default {
 
     const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
     setInterval(() => {
-      newLogLines = newLogLines.slice(-maxLines)
+      newLogLines = newLogLines.slice(-maxLines);
 
-      for (let line of newLogLines) {
+      for (const line of newLogLines) {
         if (lines < maxLines) ++lines;
         else this.$refs.linesContainer.removeChild(this.$refs.linesContainer.firstChild);
 
@@ -171,12 +144,39 @@ export default {
       newLogLines.push({ time, html });
     }, function (error) {
       newLogLines.push({ time: error.time, html: error.html });
-    })
+    });
   }
 };
 
 </script>
 
+<template>
+  <MainLayout>
+    <template #dialogs>
+      <InputDialog ref="inputDialog" />
+    </template>
+    <template #header>
+      <TopBar class="navbar">
+        <template #left>
+          <span class="title">{{ name }}</span>
+        </template>
+        <template #right>
+          <Button icon="fa-solid fa-eraser" @click="onClear()" style="margin-right: 5px">{{ $t('logs.clear') }}</Button>
+          <Button :href="downloadUrl" target="_blank" icon="fa-solid fa-download">{{ $t('logs.download') }}</Button>
+
+          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" v-show="showRestart" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
+          <Button :href="'/terminal.html?id=' + id" target="_blank" v-show="showTerminal" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
+          <Button :href="'/filemanager.html#/home/app/' + id" target="_blank" v-show="showFilemanager" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
+        </template>
+      </TopBar>
+    </template>
+    <template #body>
+      <div ref="linesContainer"></div>
+      <div class="bottom-spacer"></div>
+    </template>
+  </MainLayout>
+</template>
+
 <style>
 
 body {
diff --git a/dashboard/src/components/PasswordReset.vue b/dashboard/src/components/PasswordReset.vue
index c98530048..b09e273b8 100644
--- a/dashboard/src/components/PasswordReset.vue
+++ b/dashboard/src/components/PasswordReset.vue
@@ -1,73 +1,3 @@
-<template>
-
-  <div class="layout-root">
-    <div class="layout-left">
-      <img width="128" height="128" class="icon" :src="'/api/v1/cloudron/avatar'"/>
-    </div>
-
-    <div class="layout-right">
-
-      <div v-show="mode === 'passwordReset'">
-        <h2>{{ $t('passwordReset.title') }}</h2>
-
-        <form name="passwordResetForm" @submit.prevent="onPasswordReset()">
-          <input type="submit" style="display: none;"/>
-
-          <div class="form-element">
-            <label for="inputPasswordResetIdentifier">{{ $t('passwordReset.usernameOrEmail') }}</label>
-            <TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
-          </div>
-
-          <Button style="margin-top: 12px" @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
-          <a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
-        </form>
-      </div>
-
-      <div v-show="mode === 'passwordResetDone'">
-        <h2 v-show="!error">{{ $t('passwordReset.emailSent.title') }}</h2>
-        <h4 v-show="error" class="has-error">{{ error }}</h4>
-        <Button href="/">{{ $t('passwordReset.backToLoginAction') }}</Button>
-      </div>
-
-      <div v-show="mode === 'newPassword'">
-        <h2>{{ $t('passwordReset.newPassword.title') }}</h2>
-
-        <p class="has-error" v-show="error">{{ error }}</p>
-
-        <form name="newPasswordForm" @submit.prevent="onNewPassword()">
-          <input type="submit" style="display: none;"/>
-          <input type="password" style="display: none;"/>
-
-          <div class="form-element" :class="{'has-error': newPasswordRepeat && newPassword !== newPasswordRepeat}">
-            <label for="inputNewPassword">{{ $t('passwordReset.newPassword.password') }}</label>
-            <PasswordInput id="inputNewPassword" v-model="newPassword" autofocus required />
-          </div>
-
-          <div class="form-element" :class="{'has-error': newPasswordRepeat && newPassword !== newPasswordRepeat}">
-            <label for="inputNewPasswordRepeat">{{ $t('passwordReset.newPassword.passwordRepeat') }}</label>
-            <PasswordInput id="inputNewPasswordRepeat" v-model="newPasswordRepeat" required />
-          </div>
-
-          <div class="form-element">
-            <label for="inputPasswordResetTotpToken">{{ $t('login.2faToken') }}</label>
-            <TextInput id="inputPasswordResetTotpToken" v-model="totpToken" :disabled="busy" />
-          </div>
-
-          <Button style="margin-top: 12px" @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
-          <a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
-        </form>
-      </div>
-
-      <div v-show="mode === 'newPasswordDone'">
-        <h2>{{ $t('passwordReset.success.title') }}</h2>
-        <Button href="/">{{ $t('passwordReset.success.openDashboardAction') }}</Button>
-      </div>
-    </div>
-  </div>
-
-  <footer v-show="footer" v-html="footer"></footer>
-</template>
-
 <script>
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
@@ -169,6 +99,75 @@ export default {
 
 </script>
 
+<template>
+  <div class="layout-root">
+    <div class="layout-left">
+      <img width="128" height="128" class="icon" :src="'/api/v1/cloudron/avatar'"/>
+    </div>
+
+    <div class="layout-right">
+
+      <div v-show="mode === 'passwordReset'">
+        <h2>{{ $t('passwordReset.title') }}</h2>
+
+        <form name="passwordResetForm" @submit.prevent="onPasswordReset()">
+          <input type="submit" style="display: none;"/>
+
+          <div class="form-element">
+            <label for="inputPasswordResetIdentifier">{{ $t('passwordReset.usernameOrEmail') }}</label>
+            <TextInput id="inputPasswordResetIdentifier" name="passwordResetIdentifier" v-model="passwordResetIdentifier" :disabled="busy" autofocus required />
+          </div>
+
+          <Button style="margin-top: 12px" @click="onPasswordReset()" :disabled="busy || !passwordResetIdentifier" :loading="busy">{{ $t('passwordReset.resetAction') }}</Button>
+          <a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
+        </form>
+      </div>
+
+      <div v-show="mode === 'passwordResetDone'">
+        <h2 v-show="!error">{{ $t('passwordReset.emailSent.title') }}</h2>
+        <h4 v-show="error" class="has-error">{{ error }}</h4>
+        <Button href="/">{{ $t('passwordReset.backToLoginAction') }}</Button>
+      </div>
+
+      <div v-show="mode === 'newPassword'">
+        <h2>{{ $t('passwordReset.newPassword.title') }}</h2>
+
+        <p class="has-error" v-show="error">{{ error }}</p>
+
+        <form name="newPasswordForm" @submit.prevent="onNewPassword()">
+          <input type="submit" style="display: none;"/>
+          <input type="password" style="display: none;"/>
+
+          <div class="form-element" :class="{'has-error': newPasswordRepeat && newPassword !== newPasswordRepeat}">
+            <label for="inputNewPassword">{{ $t('passwordReset.newPassword.password') }}</label>
+            <PasswordInput id="inputNewPassword" v-model="newPassword" autofocus required />
+          </div>
+
+          <div class="form-element" :class="{'has-error': newPasswordRepeat && newPassword !== newPasswordRepeat}">
+            <label for="inputNewPasswordRepeat">{{ $t('passwordReset.newPassword.passwordRepeat') }}</label>
+            <PasswordInput id="inputNewPasswordRepeat" v-model="newPasswordRepeat" required />
+          </div>
+
+          <div class="form-element">
+            <label for="inputPasswordResetTotpToken">{{ $t('login.2faToken') }}</label>
+            <TextInput id="inputPasswordResetTotpToken" v-model="totpToken" :disabled="busy" />
+          </div>
+
+          <Button style="margin-top: 12px" @click="onNewPassword()" :disabled="busy || !newPassword || newPassword !== newPasswordRepeat" :loading="busy">{{ $t('passwordReset.passwordChanged.submitAction') }}</Button>
+          <a href="/" style="margin-left: 10px;">{{ $t('passwordReset.backToLoginAction') }}</a>
+        </form>
+      </div>
+
+      <div v-show="mode === 'newPasswordDone'">
+        <h2>{{ $t('passwordReset.success.title') }}</h2>
+        <Button href="/">{{ $t('passwordReset.success.openDashboardAction') }}</Button>
+      </div>
+    </div>
+  </div>
+
+  <footer v-show="footer" v-html="footer"></footer>
+</template>
+
 <style>
 
 .icon {
diff --git a/dashboard/src/components/PortBindings.vue b/dashboard/src/components/PortBindings.vue
index a15e8596c..aea0b3834 100644
--- a/dashboard/src/components/PortBindings.vue
+++ b/dashboard/src/components/PortBindings.vue
@@ -1,16 +1,3 @@
-<template>
-  <div v-for="ports in [ tcpPorts, udpPorts ]" :key="ports">
-    <FormGroup v-for="(port, key) in ports" :key="key">
-      <Checkbox :label="port.title" v-model="port.enabled" />
-      <small>{{ port.description + '.' + (port.portCount >=1 ? (port.portCount + ' ports. ') : '') }}</small>
-      <small v-show="port.readOnly">{{ $t('appstore.installDialog.portReadOnly') }}</small>
-      <small class="has-error" v-show="error.port === port.value">Port already taken</small>
-      <NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
-      <!-- TODO <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p> -->
-    </FormGroup>
-  </div>
-</template>
-
 <script setup>
 
 import { FormGroup, Checkbox, NumberInput } from 'pankow';
@@ -33,5 +20,15 @@ for (const p in props.udpPorts) {
 
 </script>
 
-<style scoped>
-</style>
+<template>
+  <div v-for="ports in [ tcpPorts, udpPorts ]" :key="ports">
+    <FormGroup v-for="(port, key) in ports" :key="key">
+      <Checkbox :label="port.title" v-model="port.enabled" />
+      <small>{{ port.description + '.' + (port.portCount >=1 ? (port.portCount + ' ports. ') : '') }}</small>
+      <small v-show="port.readOnly">{{ $t('appstore.installDialog.portReadOnly') }}</small>
+      <small class="has-error" v-show="error.port === port.value">Port already taken</small>
+      <NumberInput v-model="port.value" :disabled="!port.enabled" :min="1"/>
+      <!-- TODO <p class="text-small text-warning text-bold" ng-show="appInstall.domain.provider === 'cloudflare'">{{ 'appstore.installDialog.cloudflarePortWarning' | tr }} </p> -->
+    </FormGroup>
+  </div>
+</template>
diff --git a/dashboard/src/components/PreviewPanel.vue b/dashboard/src/components/PreviewPanel.vue
index a980d2da6..566d9b5ac 100644
--- a/dashboard/src/components/PreviewPanel.vue
+++ b/dashboard/src/components/PreviewPanel.vue
@@ -1,10 +1,3 @@
-<template>
-  <div class="preview-panel">
-    <img :src="item.previewUrl || item.icon" :alt="item.name" :class="{'shadow': item.previewUrl }" @error="iconError($event)"/>
-    <p>{{ item.name }}</p>
-  </div>
-</template>
-
 <script>
 
 export default {
@@ -22,6 +15,13 @@ export default {
 
 </script>
 
+<template>
+  <div class="preview-panel">
+    <img :src="item.previewUrl || item.icon" :alt="item.name" :class="{'shadow': item.previewUrl }" @error="iconError($event)"/>
+    <p>{{ item.name }}</p>
+  </div>
+</template>
+
 <style scoped>
 
 .preview-panel {
diff --git a/dashboard/src/components/ProfileView.vue b/dashboard/src/components/ProfileView.vue
index 88274d50d..5563c39c9 100644
--- a/dashboard/src/components/ProfileView.vue
+++ b/dashboard/src/components/ProfileView.vue
@@ -1,90 +1,3 @@
-<template>
-  <div class="content">
-    <InputDialog ref="inputDialog" />
-
-    <Dialog ref="twoFADialog"
-      :title="$t('profile.enable2FA.title')">
-      <div style="text-align: center; max-width: 420px">
-        <p v-show="mandatory2FAHelp">{{ $t('profile.enable2FA.description') }}</p>
-        <p v-html="$t('profile.enable2FA.authenticatorAppDescription', { googleAuthenticatorPlayStoreLink: 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2', googleAuthenticatorITunesLink: 'https://itunes.apple.com/us/app/google-authenticator/id388497605', freeOTPPlayStoreLink: 'https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp', freeOTPITunesLink: 'https://itunes.apple.com/us/app/freeotp-authenticator/id872559395'})"></p>
-        <img :src="twoFAQRCode" style="border-radius: 10px; margin-bottom: 10px"/>
-        <small>{{ twoFASecret }}</small>
-        <br/>
-        <br/>
-        <p class="has-error" v-show="twoFAEnableError">{{ twoFAEnableError }} </p>
-        <form @submit.prevent="onTwoFAEnable()">
-          <input type="submit" style="display: none;" :disabled="!twoFATotpToken"/>
-          <FormGroup>
-            <label for="totpTokenInput">{{ $t('profile.enable2FA.token') }}</label>
-            <TextInput v-model="twoFATotpToken" id="totpTokenInput" />
-          </FormGroup>
-          <Button @click="onTwoFAEnable()" :disabled="!twoFATotpToken">{{ $t('profile.enable2FA.enable') }}</Button>
-        </form>
-      </div>
-    </Dialog>
-
-    <Section :title="$t('profile.title')">
-      <template #header-buttons>
-        <Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
-      </template>
-
-      <div style="display: flex;">
-        <div style="width: 150px;">
-          <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
-          <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
-            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
-          </div>
-        </div>
-        <div style="flex-grow: 1;">
-          <table style="width: 100%;">
-            <tbody>
-              <tr>
-                <td class="text-muted">{{ $t('main.username') }}</td>
-                <td style="width: 100px; height: 34px;">{{ user.username }}</td>
-                <td style="width: 32px"></td>
-              </tr>
-              <tr>
-                <td class="text-muted">{{ $t('main.displayName') }}</td>
-                <td style="white-space: nowrap;">{{ user.displayName }}</td>
-                <td><Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
-              </tr>
-              <tr>
-                <td class="text-muted">{{ $t('profile.primaryEmail') }}</td>
-                <td style="white-space: nowrap;">{{ user.email }}</td>
-                <td><Button small tool outline @click="onChangeEmail(user.email)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
-              </tr>
-              <tr>
-                <td class="text-muted">{{ $t('profile.passwordRecoveryEmail') }}</td>
-                <td style="white-space: nowrap;">{{ user.fallbackEmail }}</td>
-                <td><Button small tool outline @click="onChangeFallbackEmail(user.fallbackEmail)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
-              </tr>
-              <tr>
-                <td class="text-muted">{{ $t('profile.language') }}</td>
-                <td colspan="2" class="text-right"><Dropdown small tool outline v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/></td>
-              </tr>
-              <tr v-show="!user.source">
-                <td colspan="3" class="text-right">
-                  <!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
-                  <Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
-                  <Button tool v-show="!user.source && !config.external2FA" @click="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </Section>
-
-    <AppPasswords/>
-    <ApiTokens v-show="user.isAtLeastAdmin"/>
-
-    <Section :title="$t('profile.loginTokens.title')">
-      <p>{{ $t('profile.loginTokens.description', { webadminTokenCount: webadminTokens.length, cliTokenCount: cliTokens.length }) }}</p>
-      <Button danger :loading="revokeTokensBusy" :disabled="revokeTokensBusy" @click="onRevokeAllWebAndCliTokens()">{{ $t('profile.loginTokens.logoutAll') }}</Button>
-    </Section>
-  </div>
-</template>
-
 <script setup>
 
 const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
@@ -312,5 +225,91 @@ onMounted(async () => {
   cliTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_CLI; });
 });
 
-
 </script>
+
+<template>
+  <div class="content">
+    <InputDialog ref="inputDialog" />
+
+    <Dialog ref="twoFADialog"
+      :title="$t('profile.enable2FA.title')">
+      <div style="text-align: center; max-width: 420px">
+        <p v-show="mandatory2FAHelp">{{ $t('profile.enable2FA.description') }}</p>
+        <p v-html="$t('profile.enable2FA.authenticatorAppDescription', { googleAuthenticatorPlayStoreLink: 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2', googleAuthenticatorITunesLink: 'https://itunes.apple.com/us/app/google-authenticator/id388497605', freeOTPPlayStoreLink: 'https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp', freeOTPITunesLink: 'https://itunes.apple.com/us/app/freeotp-authenticator/id872559395'})"></p>
+        <img :src="twoFAQRCode" style="border-radius: 10px; margin-bottom: 10px"/>
+        <small>{{ twoFASecret }}</small>
+        <br/>
+        <br/>
+        <p class="has-error" v-show="twoFAEnableError">{{ twoFAEnableError }} </p>
+        <form @submit.prevent="onTwoFAEnable()">
+          <input type="submit" style="display: none;" :disabled="!twoFATotpToken"/>
+          <FormGroup>
+            <label for="totpTokenInput">{{ $t('profile.enable2FA.token') }}</label>
+            <TextInput v-model="twoFATotpToken" id="totpTokenInput" />
+          </FormGroup>
+          <Button @click="onTwoFAEnable()" :disabled="!twoFATotpToken">{{ $t('profile.enable2FA.enable') }}</Button>
+        </form>
+      </div>
+    </Dialog>
+
+    <Section :title="$t('profile.title')">
+      <template #header-buttons>
+        <Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
+      </template>
+
+      <div style="display: flex;">
+        <div style="width: 150px;">
+          <input type="file" ref="avatarFileInput" style="display: none" accept="image/*" @change="onAvatarChanged()"/>
+          <div class="settings-avatar" :style="`background-image: url('${user.avatarUrl}');`" @click="avatarFileInput.click()">
+            <i class="picture-edit-indicator fa fa-pencil-alt"></i>
+          </div>
+        </div>
+        <div style="flex-grow: 1;">
+          <table style="width: 100%;">
+            <tbody>
+              <tr>
+                <td class="text-muted">{{ $t('main.username') }}</td>
+                <td style="width: 100px; height: 34px;">{{ user.username }}</td>
+                <td style="width: 32px"></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('main.displayName') }}</td>
+                <td style="white-space: nowrap;">{{ user.displayName }}</td>
+                <td><Button small tool outline @click="onChangeDisplayName(user.displayName)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('profile.primaryEmail') }}</td>
+                <td style="white-space: nowrap;">{{ user.email }}</td>
+                <td><Button small tool outline @click="onChangeEmail(user.email)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('profile.passwordRecoveryEmail') }}</td>
+                <td style="white-space: nowrap;">{{ user.fallbackEmail }}</td>
+                <td><Button small tool outline @click="onChangeFallbackEmail(user.fallbackEmail)" v-show="!user.source && !config.profileLocked" icon="fa fa-edit text-small" /></td>
+              </tr>
+              <tr>
+                <td class="text-muted">{{ $t('profile.language') }}</td>
+                <td colspan="2" class="text-right"><Dropdown small tool outline v-model="language" :options="languages" option-label="display" option-key="id" @select="onSelectLanguage"/></td>
+              </tr>
+              <tr v-show="!user.source">
+                <td colspan="3" class="text-right">
+                  <!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
+                  <Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
+                  <Button tool v-show="!user.source && !config.external2FA" @click="user.twoFactorAuthenticationEnabled ? onTwoFADisable() : onOpenTwoFASetupDialog()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Section>
+
+    <AppPasswords/>
+    <ApiTokens v-show="user.isAtLeastAdmin"/>
+
+    <Section :title="$t('profile.loginTokens.title')">
+      <p>{{ $t('profile.loginTokens.description', { webadminTokenCount: webadminTokens.length, cliTokenCount: cliTokens.length }) }}</p>
+      <Button danger :loading="revokeTokensBusy" :disabled="revokeTokensBusy" @click="onRevokeAllWebAndCliTokens()">{{ $t('profile.loginTokens.logoutAll') }}</Button>
+    </Section>
+  </div>
+</template>
diff --git a/dashboard/src/components/Section.vue b/dashboard/src/components/Section.vue
index de5048520..531aaba44 100644
--- a/dashboard/src/components/Section.vue
+++ b/dashboard/src/components/Section.vue
@@ -1,3 +1,14 @@
+<script>
+
+export default {
+  name: 'Section',
+  props: {
+    title: String,
+  }
+};
+
+</script>
+
 <template>
   <div>
     <h2 class="section-header">
@@ -11,16 +22,6 @@
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'Section',
-  props: {
-    title: String,
-  }
-};
-
-</script>
 
 <style scoped>
 
diff --git a/dashboard/src/components/SupportView.vue b/dashboard/src/components/SupportView.vue
index 85e9520df..ca95607a3 100644
--- a/dashboard/src/components/SupportView.vue
+++ b/dashboard/src/components/SupportView.vue
@@ -1,25 +1,3 @@
-<template>
-  <div class="content">
-    <h1 class="section-header">{{ $t('support.title') }}</h1>
-
-    <Section :title="$t('support.help.title')">
-      <div v-html="description"></div>
-    </Section>
-
-    <Section :title="$t('support.remoteSupport.title')">
-      <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>
-    </Section>
-  </div>
-</template>
-
 <script>
 
 import { fetcher, Button } from 'pankow';
@@ -71,3 +49,25 @@ export default {
 };
 
 </script>
+
+<template>
+  <div class="content">
+    <h1 class="section-header">{{ $t('support.title') }}</h1>
+
+    <Section :title="$t('support.help.title')">
+      <div v-html="description"></div>
+    </Section>
+
+    <Section :title="$t('support.remoteSupport.title')">
+      <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>
+    </Section>
+  </div>
+</template>
diff --git a/dashboard/src/components/Terminal.vue b/dashboard/src/components/Terminal.vue
index 25514425e..ce0a4ed9b 100644
--- a/dashboard/src/components/Terminal.vue
+++ b/dashboard/src/components/Terminal.vue
@@ -1,51 +1,3 @@
-<template>
-  <MainLayout :gap="false">
-    <template #dialogs>
-      <Dialog ref="fatalErrorDialog" modal title="Error">
-        <p>{{ fatalError }}</p>
-      </Dialog>
-
-      <InputDialog ref="inputDialog" />
-      <a id="fileDownloadLink" :href="downloadFileDownloadUrl" target="_blank"></a>
-    </template>
-    <template #header>
-      <TopBar class="navbar">
-        <template #left>
-          <span class="title">{{ name }}</span>
-        </template>
-        <template #right>
-          <!-- Scheduler/cron tasks -->
-          <Button success :menu="schedulerMenuModel" v-show="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
-
-          <!-- addon actions -->
-          <Button success @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
-          <Button success @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
-          <Button success @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
-          <Button success @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected">Redis</Button>
-
-          <!-- upload/download actions -->
-          <Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
-          <Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
-
-          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
-          <Button v-show="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
-          <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
-        </template>
-      </TopBar>
-    </template>
-    <template #body>
-      <!-- terminal will be injected here -->
-    </template>
-    <template #footer>
-      <FileUploader
-        ref="fileUploader"
-        :upload-handler="uploadHandler"
-        :tr="$t"
-      />
-    </template>
-  </MainLayout>
-</template>
-
 <script>
 
 import { fetcher, Button, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
@@ -319,6 +271,54 @@ export default {
 
 </script>
 
+<template>
+  <MainLayout :gap="false">
+    <template #dialogs>
+      <Dialog ref="fatalErrorDialog" modal title="Error">
+        <p>{{ fatalError }}</p>
+      </Dialog>
+
+      <InputDialog ref="inputDialog" />
+      <a id="fileDownloadLink" :href="downloadFileDownloadUrl" target="_blank"></a>
+    </template>
+    <template #header>
+      <TopBar class="navbar">
+        <template #left>
+          <span class="title">{{ name }}</span>
+        </template>
+        <template #right>
+          <!-- Scheduler/cron tasks -->
+          <Button success :menu="schedulerMenuModel" v-show="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
+
+          <!-- addon actions -->
+          <Button success @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
+          <Button success @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
+          <Button success @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
+          <Button success @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected">Redis</Button>
+
+          <!-- upload/download actions -->
+          <Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
+          <Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
+
+          <Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
+          <Button v-show="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
+          <Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
+        </template>
+      </TopBar>
+    </template>
+    <template #body>
+      <!-- terminal will be injected here -->
+    </template>
+    <template #footer>
+      <FileUploader
+        ref="fileUploader"
+        :upload-handler="uploadHandler"
+        :tr="$t"
+      />
+    </template>
+  </MainLayout>
+</template>
+
 <style>
 
 body {
diff --git a/dashboard/src/components/VolumesView.vue b/dashboard/src/components/VolumesView.vue
index 474ff78fa..b84897078 100644
--- a/dashboard/src/components/VolumesView.vue
+++ b/dashboard/src/components/VolumesView.vue
@@ -1,115 +1,3 @@
-<template>
-  <div class="content">
-    <InputDialog ref="inputDialog" />
-
-    <Dialog ref="volumeDialog"
-      :title="volumeDialogData.mode === 'edit' ? $t('volumes.editVolumeDialog.title', { name: volumeDialogData.name }) : $t('volumes.addVolumeDialog.title')"
-      :reject-label="$t('main.dialog.cancel')"
-      :confirm-label="$t('main.dialog.save')"
-       confirm-style="success"
-      :confirm-active="volumeDialogValid"
-      :confirm-busy="volumeDialogData.busy"
-      @confirm="submitVolumeDialog()"
-    >
-      <form @submit="submitVolumeDialog()" autocomplete="off">
-        <fieldset :disabled="volumeDialogData.busy">
-          <input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
-
-          <p class="has-error" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</p>
-
-          <FormGroup v-if="volumeDialogData.mode === 'new'">
-            <label for="volumeName">{{ $t('volumes.name') }}</label>
-            <TextInput id="volumeName" v-model="volumeDialogData.name" />
-          </FormGroup>
-
-          <FormGroup>
-            <label for="volumeMountType">{{ $t('volumes.mountType') }}</label>
-            <Dropdown id="volumeMountType" v-model="volumeDialogData.mountType" :options="mountTypeOptions" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
-            <label for="volumeHostPath">{{ $t('volumes.localDirectory') }}</label>
-            <TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" />
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
-            <label for="volumeDiskPath">{{ $t('volumes.addVolumeDialog.diskPath') }}</label>
-            <Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'ext4'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.ext4BlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
-            <Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'xfs'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.xfsBlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
-            <label for="volumeHost">{{ $t('volumes.addVolumeDialog.server') }}</label>
-            <TextInput v-model="volumeDialogData.host" id="volumeHost"/>
-          </FormGroup>
-
-          <Checkbox v-if="volumeDialogData.mountType === 'cifs'" v-model="volumeDialogData.seal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
-
-          <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
-            <label for="volumePort">{{ $t('volumes.addVolumeDialog.port') }}</label>
-            <NumberInput v-model="volumeDialogData.port" id="volumePort" min="0"/>
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
-            <label for="volumeRemoteDir">{{ $t('volumes.addVolumeDialog.remoteDirectory') }}</label>
-            <TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share" />
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
-            <label for="volumeUsername">{{ $t('volumes.addVolumeDialog.username') }}</label>
-            <TextInput v-model="volumeDialogData.username" id="volumeUsername" />
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
-            <label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
-            <PasswordInput v-model="volumeDialogData.password" id="volumePassword" />
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
-            <label for="volumeUser">{{ $t('volumes.addVolumeDialog.user') }}</label>
-            <TextInput v-model="volumeDialogData.user" id="volumeAddUser" />
-          </FormGroup>
-
-          <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
-            <label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
-            <textarea v-model="volumeDialogData.privateKey" id="volumePrivateKey"></textarea>
-          </FormGroup>
-
-        </fieldset>
-      </form>
-    </Dialog>
-
-    <Section :title="$t('volumes.title')">
-      <template #header-buttons>
-        <Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button>
-      </template>
-
-      <div v-html="$t('volumes.description')"></div>
-      <br/>
-      <TableView :columns="columns" :model="volumes" :busy="busy">
-        <template #target="slotProps">
-          {{ (slotProps.mountType === 'mountpoint' || slotProps.mountType === 'filesystem') ? slotProps.hostPath : (slotProps.mountOptions.host || slotProps.mountOptions.diskPath || slotProps.hostPath) + (slotProps.mountOptions.remoteDir || '') }}
-        </template>
-        <template #status="slotProps">
-          <div style="text-align: center;" v-tooltip="slotProps.message">
-            <i class="fa fa-circle" :style="{ color: slotProps.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
-          </div>
-        </template>
-        <template #actions="slotProps">
-          <div class="table-actions">
-            <ButtonGroup>
-              <Button tool secondary outline small icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
-              <Button tool secondary outline small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
-              <Button tool secondary outline small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
-            </ButtonGroup>
-            <Button tool danger outline small icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
-          </div>
-        </template>
-      </TableView>
-    </Section>
-  </div>
-</template>
-
 <script>
 
 import { Button, ButtonGroup, Checkbox, Dialog, Dropdown, FormGroup, InputDialog, NumberInput, PasswordInput, TableView, TextInput } from 'pankow';
@@ -312,3 +200,115 @@ export default {
 };
 
 </script>
+
+<template>
+  <div class="content">
+    <InputDialog ref="inputDialog" />
+
+    <Dialog ref="volumeDialog"
+      :title="volumeDialogData.mode === 'edit' ? $t('volumes.editVolumeDialog.title', { name: volumeDialogData.name }) : $t('volumes.addVolumeDialog.title')"
+      :reject-label="$t('main.dialog.cancel')"
+      :confirm-label="$t('main.dialog.save')"
+       confirm-style="success"
+      :confirm-active="volumeDialogValid"
+      :confirm-busy="volumeDialogData.busy"
+      @confirm="submitVolumeDialog()"
+    >
+      <form @submit="submitVolumeDialog()" autocomplete="off">
+        <fieldset :disabled="volumeDialogData.busy">
+          <input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
+
+          <p class="has-error" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</p>
+
+          <FormGroup v-if="volumeDialogData.mode === 'new'">
+            <label for="volumeName">{{ $t('volumes.name') }}</label>
+            <TextInput id="volumeName" v-model="volumeDialogData.name" />
+          </FormGroup>
+
+          <FormGroup>
+            <label for="volumeMountType">{{ $t('volumes.mountType') }}</label>
+            <Dropdown id="volumeMountType" v-model="volumeDialogData.mountType" :options="mountTypeOptions" option-label="name" option-key="value" :disabled="volumeDialogData.mode === 'edit'"/>
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
+            <label for="volumeHostPath">{{ $t('volumes.localDirectory') }}</label>
+            <TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" />
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
+            <label for="volumeDiskPath">{{ $t('volumes.addVolumeDialog.diskPath') }}</label>
+            <Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'ext4'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.ext4BlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
+            <Dropdown id="volumeMountType" v-if="volumeDialogData.mountType === 'xfs'" v-model="volumeDialogData.diskPath" :options="volumeDialogData.xfsBlockDevices" option-label="label" option-key="path" :disabled="volumeDialogData.mode === 'edit'"/>
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
+            <label for="volumeHost">{{ $t('volumes.addVolumeDialog.server') }}</label>
+            <TextInput v-model="volumeDialogData.host" id="volumeHost"/>
+          </FormGroup>
+
+          <Checkbox v-if="volumeDialogData.mountType === 'cifs'" v-model="volumeDialogData.seal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
+
+          <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
+            <label for="volumePort">{{ $t('volumes.addVolumeDialog.port') }}</label>
+            <NumberInput v-model="volumeDialogData.port" id="volumePort" min="0"/>
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
+            <label for="volumeRemoteDir">{{ $t('volumes.addVolumeDialog.remoteDirectory') }}</label>
+            <TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share" />
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
+            <label for="volumeUsername">{{ $t('volumes.addVolumeDialog.username') }}</label>
+            <TextInput v-model="volumeDialogData.username" id="volumeUsername" />
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'cifs'">
+            <label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
+            <PasswordInput v-model="volumeDialogData.password" id="volumePassword" />
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
+            <label for="volumeUser">{{ $t('volumes.addVolumeDialog.user') }}</label>
+            <TextInput v-model="volumeDialogData.user" id="volumeAddUser" />
+          </FormGroup>
+
+          <FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
+            <label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
+            <textarea v-model="volumeDialogData.privateKey" id="volumePrivateKey"></textarea>
+          </FormGroup>
+
+        </fieldset>
+      </form>
+    </Dialog>
+
+    <Section :title="$t('volumes.title')">
+      <template #header-buttons>
+        <Button @click="openVolumeDialog()" icon="fa fa-plus">{{ $t('volumes.addVolumeAction') }}</Button>
+      </template>
+
+      <div v-html="$t('volumes.description')"></div>
+      <br/>
+      <TableView :columns="columns" :model="volumes" :busy="busy">
+        <template #target="slotProps">
+          {{ (slotProps.mountType === 'mountpoint' || slotProps.mountType === 'filesystem') ? slotProps.hostPath : (slotProps.mountOptions.host || slotProps.mountOptions.diskPath || slotProps.hostPath) + (slotProps.mountOptions.remoteDir || '') }}
+        </template>
+        <template #status="slotProps">
+          <div style="text-align: center;" v-tooltip="slotProps.message">
+            <i class="fa fa-circle" :style="{ color: slotProps.state === 'active' ? '#27CE65' : '#d9534f' }"></i>
+          </div>
+        </template>
+        <template #actions="slotProps">
+          <div class="table-actions">
+            <ButtonGroup>
+              <Button tool secondary outline small icon="fa fa-sync-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs' || slotProps.mountType === 'ext4' || slotProps.mountType === 'xfs'" v-tooltip="$t('volumes.remountActionTooltip')" @click="remount(slotProps)"></Button>
+              <Button tool secondary outline small icon="fa fa-pencil-alt" v-if="slotProps.mountType === 'sshfs' || slotProps.mountType === 'cifs' || slotProps.mountType === 'nfs'" v-tooltip="$t('volumes.editActionTooltip')" @click="openVolumeDialog(slotProps)"></Button>
+              <Button tool secondary outline small icon="fas fa-folder" v-tooltip="$t('volumes.openFileManagerActionTooltip')" :href="'/filemanager.html#/home/volume/' + slotProps.id" target="_blank"></Button>
+            </ButtonGroup>
+            <Button tool danger outline small icon="far fa-trash-alt" v-tooltip="$t('volumes.removeVolumeActionTooltip')" @click="onRemove(slotProps)"></Button>
+          </div>
+        </template>
+      </TableView>
+    </Section>
+  </div>
+</template>