diff --git a/dashboard/src/Index.vue b/dashboard/src/Index.vue
index a80e96b8a..0a7ac393c 100644
--- a/dashboard/src/Index.vue
+++ b/dashboard/src/Index.vue
@@ -239,28 +239,30 @@ onMounted(async () => {
         <div style="flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; height: 100%;">
           <Headerbar :config="config" :subscription="subscription" :profile="profile"/>
 
-          <div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px;">
-            <AppsView v-if="view === VIEWS.APPS" />
-            <AppConfigureView v-else-if="view === VIEWS.APP" />
-            <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
-            <BackupsView v-else-if="view === VIEWS.BACKUPS" />
-            <BrandingView v-else-if="view === VIEWS.BRANDING" />
-            <DomainsView v-else-if="view === VIEWS.DOMAINS" />
-            <EmailView v-else-if="view === VIEWS.EMAIL" />
-            <EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
-            <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
-            <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
-            <MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
-            <MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
-            <NetworkView v-else-if="view === VIEWS.NETWORK" />
-            <ProfileView v-else-if="view === VIEWS.PROFILE" />
-            <ServicesView v-else-if="view === VIEWS.SERVICES" />
-            <SettingsView v-else-if="view === VIEWS.SETTINGS" />
-            <SupportView v-else-if="view === VIEWS.SUPPORT" />
-            <SystemView v-else-if="view === VIEWS.SYSTEM" />
-            <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
-            <UsersView v-else-if="view === VIEWS.USERS" />
-            <VolumesView v-else-if="view === VIEWS.VOLUMES" />
+          <div style="display: flex; justify-content: center; overflow: auto; flex-grow: 1; padding: 0 6px; position: relative;">
+            <Transition name="slide-fade">
+              <AppsView v-if="view === VIEWS.APPS" />
+              <AppConfigureView v-else-if="view === VIEWS.APP" />
+              <AppstoreView v-else-if="view === VIEWS.APPSTORE" />
+              <BackupsView v-else-if="view === VIEWS.BACKUPS" />
+              <BrandingView v-else-if="view === VIEWS.BRANDING" />
+              <DomainsView v-else-if="view === VIEWS.DOMAINS" />
+              <EmailView v-else-if="view === VIEWS.EMAIL" />
+              <EmailDomainView v-else-if="view === VIEWS.EMAIL_DOMAIN" />
+              <EmailsEventlogView v-else-if="view === VIEWS.EMAILS_EVENTLOG" />
+              <EventlogView v-else-if="view === VIEWS.EVENTLOG" />
+              <MailboxesView v-else-if="view === VIEWS.EMAILS_MAILBOXES" />
+              <MailinglistsView v-else-if="view === VIEWS.EMAILS_MAILINGLISTS" />
+              <NetworkView v-else-if="view === VIEWS.NETWORK" />
+              <ProfileView v-else-if="view === VIEWS.PROFILE" />
+              <ServicesView v-else-if="view === VIEWS.SERVICES" />
+              <SettingsView v-else-if="view === VIEWS.SETTINGS" />
+              <SupportView v-else-if="view === VIEWS.SUPPORT" />
+              <SystemView v-else-if="view === VIEWS.SYSTEM" />
+              <UserDirectoryView v-else-if="view === VIEWS.USER_DIRECTORY" />
+              <UsersView v-else-if="view === VIEWS.USERS" />
+              <VolumesView v-else-if="view === VIEWS.VOLUMES" />
+            </Transition>
           </div>
         </div>
       </div>
@@ -358,4 +360,19 @@ onMounted(async () => {
   max-height: 0;
 }
 
+.slide-fade-enter-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.1s ease-out;
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+
 </style>
diff --git a/dashboard/src/components/AppArchive.vue b/dashboard/src/components/AppArchive.vue
index 4c47f75f4..3d6db2744 100644
--- a/dashboard/src/components/AppArchive.vue
+++ b/dashboard/src/components/AppArchive.vue
@@ -240,49 +240,49 @@ onMounted(async () => {
 </script>
 
 <template>
-  <InputDialog ref="inputDialog"/>
-  <Dialog ref="restoreDialog"
-    :title="$t('backups.restoreArchiveDialog.title')"
-     reject-style="secondary"
-    :reject-label="restoreBusy ? '' : $t('main.dialog.cancel')"
-    :confirm-label="$t(restoreNeedsOverwrite ? 'backups.restoreArchiveDialog.restoreActionOverwrite' : 'backups.restoreArchiveDialog.restoreAction')"
-    :confirm-busy="restoreBusy"
-    :confirm-active="!restoreBusy"
-    @confirm="onRestoreSubmit()"
-  >
-    <p v-html="$t('backups.restoreArchiveDialog.description', { appId: restoreManifest.id, fqdn: restoreFqdn, creationTime: prettyLongDate(restoreArchive.creationTime) })"></p>
-
-    <div class="text-danger" v-show="restoreError.generic">{{ restoreError.generic }}</div>
-    <div class="text-danger" v-show="restoreError.dnsInUse">{{ restoreError.dnsInUse }}</div>
-    <!-- <div ng-show="archiveRestore.error.location.fqdn === archiveRestore.subdomain + '.' + archiveRestore.domain.domain"><small>{{ archiveRestore.error.location.message }}</small></div> -->
-
-    <form @submit.prevent="onRestoreSubmit()" autocomplete="off">
-      <fieldset>
-        <FormGroup>
-          <label for="locationInput">{{ $t('app.cloneDialog.location') }}</label>
-          <InputGroup>
-            <TextInput id="locationInput" ref="locationInput" v-model="restoreLocation" style="flex-grow: 1;" />
-            <Dropdown v-model="restoreDomain" :options="domains" option-label="domain" option-key="domain" />
-          </InputGroup>
-        </FormGroup>
-
-        <FormGroup v-for="(domain, key) in restoreSecondaryDomains" :key="key">
-          <label :for="'secondaryDomainInput-' + key">{{ domain.title }}</label>
-          <small>{{ domain.description }}</small>
-          <InputGroup>
-            <TextInput :id="'secondaryDomainInput-' + key" v-model="domain.subdomain" :placeholder="$t('appstore.installDialog.locationPlaceholder')" style="flex-grow: 1;" />
-            <Dropdown v-model="domain.domain" :options="domains" option-label="domain" option-key="domain" />
-          </InputGroup>
-        </FormGroup>
-
-       <!-- <p class="text-small text-warning" ng-show="archiveRestore.domain.provider === 'noop' || archiveRestore.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((archiveRestore.subdomain ? archiveRestore.subdomain + '.' : '') + archiveRestore.domain.domain) }"></p> -->
-        <!-- <div class="has-error text-center" ng-show="archiveRestore.error.port">{{ archiveRestore.error.port }}</div> -->
-        <PortBindings v-model:tcp-ports="restoreTcpPorts" v-model:udp-ports="restoreUdpPorts" :error="restoreError"/>
-      </fieldset>
-    </form>
-  </Dialog>
-
   <Section :title="$t('backups.archives.title')">
+    <InputDialog ref="inputDialog"/>
+    <Dialog ref="restoreDialog"
+      :title="$t('backups.restoreArchiveDialog.title')"
+       reject-style="secondary"
+      :reject-label="restoreBusy ? '' : $t('main.dialog.cancel')"
+      :confirm-label="$t(restoreNeedsOverwrite ? 'backups.restoreArchiveDialog.restoreActionOverwrite' : 'backups.restoreArchiveDialog.restoreAction')"
+      :confirm-busy="restoreBusy"
+      :confirm-active="!restoreBusy"
+      @confirm="onRestoreSubmit()"
+    >
+      <p v-html="$t('backups.restoreArchiveDialog.description', { appId: restoreManifest.id, fqdn: restoreFqdn, creationTime: prettyLongDate(restoreArchive.creationTime) })"></p>
+
+      <div class="text-danger" v-show="restoreError.generic">{{ restoreError.generic }}</div>
+      <div class="text-danger" v-show="restoreError.dnsInUse">{{ restoreError.dnsInUse }}</div>
+      <!-- <div ng-show="archiveRestore.error.location.fqdn === archiveRestore.subdomain + '.' + archiveRestore.domain.domain"><small>{{ archiveRestore.error.location.message }}</small></div> -->
+
+      <form @submit.prevent="onRestoreSubmit()" autocomplete="off">
+        <fieldset>
+          <FormGroup>
+            <label for="locationInput">{{ $t('app.cloneDialog.location') }}</label>
+            <InputGroup>
+              <TextInput id="locationInput" ref="locationInput" v-model="restoreLocation" style="flex-grow: 1;" />
+              <Dropdown v-model="restoreDomain" :options="domains" option-label="domain" option-key="domain" />
+            </InputGroup>
+          </FormGroup>
+
+          <FormGroup v-for="(domain, key) in restoreSecondaryDomains" :key="key">
+            <label :for="'secondaryDomainInput-' + key">{{ domain.title }}</label>
+            <small>{{ domain.description }}</small>
+            <InputGroup>
+              <TextInput :id="'secondaryDomainInput-' + key" v-model="domain.subdomain" :placeholder="$t('appstore.installDialog.locationPlaceholder')" style="flex-grow: 1;" />
+              <Dropdown v-model="domain.domain" :options="domains" option-label="domain" option-key="domain" />
+            </InputGroup>
+          </FormGroup>
+
+         <!-- <p class="text-small text-warning" ng-show="archiveRestore.domain.provider === 'noop' || archiveRestore.domain.provider === 'manual'" ng-bind-html="'appstore.installDialog.manualWarning' | tr:{ location: ((archiveRestore.subdomain ? archiveRestore.subdomain + '.' : '') + archiveRestore.domain.domain) }"></p> -->
+          <!-- <div class="has-error text-center" ng-show="archiveRestore.error.port">{{ archiveRestore.error.port }}</div> -->
+          <PortBindings v-model:tcp-ports="restoreTcpPorts" v-model:udp-ports="restoreUdpPorts" :error="restoreError"/>
+        </fieldset>
+      </form>
+    </Dialog>
+
     <p v-html="$t('backups.archive.description')"></p>
 
     <TableView :columns="columns" :model="archives" :busy="busy" @row-click="onInfo">
diff --git a/dashboard/src/components/BackupList.vue b/dashboard/src/components/BackupList.vue
index aa92ebd05..397bedce7 100644
--- a/dashboard/src/components/BackupList.vue
+++ b/dashboard/src/components/BackupList.vue
@@ -25,7 +25,6 @@ const tasksModel = TasksModel.create();
 const dashboardModel = DashboardModel.create();
 
 const columns = {
-  preserveSecs: {}, // archived
   packageVersion: {
     label: t('backups.listing.version'),
     sort: true,
@@ -35,6 +34,7 @@ const columns = {
     label: t('main.table.date'),
     sort: true
   },
+  preserveSecs: {}, // archived
   content: {
     label: t('backups.listing.contents'),
     sort: false,
@@ -211,68 +211,68 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog ref="infoDialog"
-    :title="$t('backups.backupDetails.title')"
-    :reject-label="$t('main.dialog.cancel')"
-  >
-    <div class="info-row">
-      <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
-      <div class="info-value">{{ infoBackup.id }}</div>
-    </div>
-    <div class="info-row">
-      <div class="info-label">{{ $t('backups.backupEdit.label') }}</div>
-      <div class="info-value">{{ infoBackup.label }}</div>
-    </div>
-    <div class="info-row">
-      <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
-      <div class="info-value">{{ infoBackup.remotePath }}</div>
-    </div>
-    <div class="info-row">
-      <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
-      <div class="info-value">{{ prettyLongDate(infoBackup.creationTime) }}</div>
-    </div>
-    <div class="info-row">
-      <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
-      <div class="info-value">{{ infoBackup.packageVersion }}</div>
-    </div>
-    <div class="info-row">
-      <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
-      <div class="info-value">{{ infoBackup.format }}</div>
-    </div>
-
-    <br/>
-
-    <p class="text-muted">{{ $t('backups.backupDetails.list', { appCount: infoBackup.contents.length }) }}:</p>
-    <div v-for="content in infoBackup.contents" :key="content.id">
-      <a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
-      <a v-else :href="`/#/eventlog?search=${content.id}`">{{ content.id }}</a>
-    </div>
-  </Dialog>
-
-  <Dialog ref="editDialog"
-    :title="$t('backups.backupEdit.title')"
-    :reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
-     reject-style="secondary"
-    :confirm-label="$t('main.dialog.save')"
-    :confirm-busy="editBackupBusy"
-    @confirm="onEditSubmit()"
-  >
-    <p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
-
-    <form @submit.prevent="onEditSubmit()" autocomplete="off">
-      <fieldset>
-        <FormGroup>
-          <label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
-          <TextInput id="backupLabelInput" v-model="editBackupLabel" />
-        </FormGroup>
-
-        <Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
-        <!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
-      </fieldset>
-    </form>
-  </Dialog>
-
   <Section :title="$t('backups.listing.title')">
+    <Dialog ref="infoDialog"
+      :title="$t('backups.backupDetails.title')"
+      :reject-label="$t('main.dialog.cancel')"
+    >
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.id') }}</div>
+        <div class="info-value">{{ infoBackup.id }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupEdit.label') }}</div>
+        <div class="info-value">{{ infoBackup.label }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupEdit.remotePath') }}</div>
+        <div class="info-value">{{ infoBackup.remotePath }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.date') }}</div>
+        <div class="info-value">{{ prettyLongDate(infoBackup.creationTime) }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.version') }}</div>
+        <div class="info-value">{{ infoBackup.packageVersion }}</div>
+      </div>
+      <div class="info-row">
+        <div class="info-label">{{ $t('backups.backupDetails.format') }}</div>
+        <div class="info-value">{{ infoBackup.format }}</div>
+      </div>
+
+      <br/>
+
+      <p class="text-muted">{{ $t('backups.backupDetails.list', { appCount: infoBackup.contents.length }) }}:</p>
+      <div v-for="content in infoBackup.contents" :key="content.id">
+        <a v-if="content.fqdn" :href="`/#/app/${content.id}/backups`">{{ content.label || content.fqdn }}</a>
+        <a v-else :href="`/#/eventlog?search=${content.id}`">{{ content.id }}</a>
+      </div>
+    </Dialog>
+
+    <Dialog ref="editDialog"
+      :title="$t('backups.backupEdit.title')"
+      :reject-label="editBackupBusy ? '' : $t('main.dialog.cancel')"
+       reject-style="secondary"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="editBackupBusy"
+      @confirm="onEditSubmit()"
+    >
+      <p class="has-error text-center" v-show="editBackupError">{{ editBackupError }}</p>
+
+      <form @submit.prevent="onEditSubmit()" autocomplete="off">
+        <fieldset>
+          <FormGroup>
+            <label for="backupLabelInput">{{ $t('backups.backupEdit.label') }}</label>
+            <TextInput id="backupLabelInput" v-model="editBackupLabel" />
+          </FormGroup>
+
+          <Checkbox v-model="editBackupPersist" :label="$t('backups.backupEdit.preserved.description')" />
+          <!-- <sup><a popover-placement="top-right" popover-trigger="outsideClick" uib-popover="{{ 'backups.backupEdit.preserved.tooltip' | tr: { appsLength: editBackup.backup.contents.length} }}"><i class="fa fa-question-circle"></i></a></sup> -->
+        </fieldset>
+      </form>
+    </Dialog>
+
     <template #header-buttons>
       <Button tool icon="fas fa-align-left" v-tooltip="$t('settings.updates.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
     </template>
diff --git a/dashboard/src/components/BackupSchedule.vue b/dashboard/src/components/BackupSchedule.vue
index c976c2d2c..cf0f4ae98 100644
--- a/dashboard/src/components/BackupSchedule.vue
+++ b/dashboard/src/components/BackupSchedule.vue
@@ -204,41 +204,41 @@ onMounted(async () => {
 </script>
 
 <template>
-  <InputDialog ref="inputDialog" />
-  <Dialog ref="configureDialog"
-    :title="$t('backups.configureBackupSchedule.title')"
-     reject-style="secondary"
-    :reject-label="configureBusy ? null : $t('main.dialog.cancel')"
-    :confirm-label="$t('main.dialog.save')"
-    :confirm-busy="configureBusy"
-    :confirm-active="isConfigureValid"
-    @confirm="onSubmitConfigure()"
-  >
-    <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
-
-    <form @submit.prevent="onSubmitConfigure()" autocomplete="off">
-      <fieldset>
-        <FormGroup>
-          <label for="daysInput">{{ $t('backups.configureBackupSchedule.schedule') }}</label>
-          <p v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></p>
-
-          <div style="display: flex; gap: 10px;">
-            <div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" v-model="configureDays" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
-            <div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect v-model="configureHours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
-          </div>
-        </FormGroup>
-
-        <FormGroup>
-          <label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
-          <select id="retentionInput" v-model="configureRetention">
-            <option v-for="elem in backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
-          </select>
-        </FormGroup>
-      </fieldset>
-    </form>
-  </Dialog>
-
   <Section :title="$t('backups.schedule.title')">
+    <InputDialog ref="inputDialog" />
+    <Dialog ref="configureDialog"
+      :title="$t('backups.configureBackupSchedule.title')"
+       reject-style="secondary"
+      :reject-label="configureBusy ? null : $t('main.dialog.cancel')"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="configureBusy"
+      :confirm-active="isConfigureValid"
+      @confirm="onSubmitConfigure()"
+    >
+      <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
+
+      <form @submit.prevent="onSubmitConfigure()" autocomplete="off">
+        <fieldset>
+          <FormGroup>
+            <label for="daysInput">{{ $t('backups.configureBackupSchedule.schedule') }}</label>
+            <p v-html="$t('backups.configureBackupSchedule.scheduleDescription')"></p>
+
+            <div style="display: flex; gap: 10px;">
+              <div>{{ $t('backups.configureBackupSchedule.days') }}: <MultiSelect id="daysInput" v-model="configureDays" :options="cronDays" option-key="id" option-label="name"></MultiSelect></div>
+              <div>{{ $t('backups.configureBackupSchedule.hours') }}: <MultiSelect v-model="configureHours" :options="cronHours" option-key="id" option-label="name"></MultiSelect></div>
+            </div>
+          </FormGroup>
+
+          <FormGroup>
+            <label for="retentionInput">{{ $t('backups.configureBackupSchedule.retentionPolicy') }}</label>
+            <select id="retentionInput" v-model="configureRetention">
+              <option v-for="elem in backupRetentions" :key="elem.id" :value="elem.id">{{ elem.name }}</option>
+            </select>
+          </FormGroup>
+        </fieldset>
+      </form>
+    </Dialog>
+
     <template #header-buttons>
       <Button tool icon="fas fa-align-left" v-tooltip="$t('settings.updates.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
     </template>
diff --git a/dashboard/src/components/PrivateRegistry.vue b/dashboard/src/components/PrivateRegistry.vue
index c183c5578..96099c109 100644
--- a/dashboard/src/components/PrivateRegistry.vue
+++ b/dashboard/src/components/PrivateRegistry.vue
@@ -110,50 +110,50 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Dialog ref="dialog"
-    :title="$t('settings.privateDockerRegistryDialog.title')"
-    :confirm-label="$t('main.dialog.save')"
-    :confirm-busy="configureBusy"
-    :confirm-active="!configureBusy && isValid"
-    :reject-label="$t('main.dialog.cancel')"
-     reject-style="secondary"
-    @confirm="onSubmitConfigure()"
-  >
-    <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
-
-    <form novalidate @submit.prevent="onSubmitConfigure()" autocomplete="off">
-      <fieldset :disabled="configureBusy">
-        <input style="display: none" type="submit" :disabled="!isValid"/>
-
-        <FormGroup>
-          <label for="providerInput">{{ $t('settings.registryConfig.provider') }} <sup><a href="https://docs.cloudron.io/settings/#private-docker-registry" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-          <Dropdown id="providerInput" v-model="configureProvider" :options="providers" option-key="value" option-label="name" />
-        </FormGroup>
-
-        <FormGroup v-if="configureProvider !== 'noop'">
-          <label for="serverAddressInput">{{ $t('settings.privateDockerRegistry.server') }}</label>
-          <TextInput id="serverAddressInput" v-model="configureServerAddress" placeholder="docker.io" required />
-        </FormGroup>
-
-        <FormGroup v-if="configureProvider !== 'noop'">
-          <label for="usernameInput">{{ $t('settings.privateDockerRegistry.username') }}</label>
-          <TextInput id="usernameInput" v-model="configureUsername" required />
-        </FormGroup>
-
-        <FormGroup v-if="configureProvider !== 'noop'">
-          <label for="emailInput">{{ $t('settings.privateDockerRegistryDialog.email') }}</label>
-          <TextInput id="emailInput" v-model="configureEmail" />
-        </FormGroup>
-
-        <FormGroup v-if="configureProvider !== 'noop'">
-          <label for="passwordInput">{{ $t('settings.privateDockerRegistryDialog.passwordToken') }}</label>
-          <PasswordInput id="passwordInput" v-model="configurePassword" required />
-        </FormGroup>
-      </fieldset>
-    </form>
-  </Dialog>
-
   <Section :title="$t('settings.privateDockerRegistry.title')">
+    <Dialog ref="dialog"
+      :title="$t('settings.privateDockerRegistryDialog.title')"
+      :confirm-label="$t('main.dialog.save')"
+      :confirm-busy="configureBusy"
+      :confirm-active="!configureBusy && isValid"
+      :reject-label="$t('main.dialog.cancel')"
+       reject-style="secondary"
+      @confirm="onSubmitConfigure()"
+    >
+      <p class="has-error text-center" v-show="configureError">{{ configureError }}</p>
+
+      <form novalidate @submit.prevent="onSubmitConfigure()" autocomplete="off">
+        <fieldset :disabled="configureBusy">
+          <input style="display: none" type="submit" :disabled="!isValid"/>
+
+          <FormGroup>
+            <label for="providerInput">{{ $t('settings.registryConfig.provider') }} <sup><a href="https://docs.cloudron.io/settings/#private-docker-registry" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+            <Dropdown id="providerInput" v-model="configureProvider" :options="providers" option-key="value" option-label="name" />
+          </FormGroup>
+
+          <FormGroup v-if="configureProvider !== 'noop'">
+            <label for="serverAddressInput">{{ $t('settings.privateDockerRegistry.server') }}</label>
+            <TextInput id="serverAddressInput" v-model="configureServerAddress" placeholder="docker.io" required />
+          </FormGroup>
+
+          <FormGroup v-if="configureProvider !== 'noop'">
+            <label for="usernameInput">{{ $t('settings.privateDockerRegistry.username') }}</label>
+            <TextInput id="usernameInput" v-model="configureUsername" required />
+          </FormGroup>
+
+          <FormGroup v-if="configureProvider !== 'noop'">
+            <label for="emailInput">{{ $t('settings.privateDockerRegistryDialog.email') }}</label>
+            <TextInput id="emailInput" v-model="configureEmail" />
+          </FormGroup>
+
+          <FormGroup v-if="configureProvider !== 'noop'">
+            <label for="passwordInput">{{ $t('settings.privateDockerRegistryDialog.passwordToken') }}</label>
+            <PasswordInput id="passwordInput" v-model="configurePassword" required />
+          </FormGroup>
+        </fieldset>
+      </form>
+    </Dialog>
+
     <p v-html="$t('settings.privateDockerRegistry.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></p>
 
     <div class="info-row">
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index bf00b4084..5937e9b5f 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -89,6 +89,7 @@ footer > .p {
 .content {
   max-width: 1280px;
   width: 100%;
+  position: absolute;
 }
 
 .header {
diff --git a/dashboard/src/views/AppstoreView.vue b/dashboard/src/views/AppstoreView.vue
index 60b4a80d7..49df1648a 100644
--- a/dashboard/src/views/AppstoreView.vue
+++ b/dashboard/src/views/AppstoreView.vue
@@ -78,7 +78,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div style="width: 100%;">
+  <div class="content" style="width: 100%;">
     <AppInstallDialog ref="appInstallDialog" @close="onAppInstallDialogClose"/>
     <ApplinkDialog ref="applinkDialog" @success="onApplinkDialogSuccess()"/>
 
diff --git a/dashboard/src/views/BackupsView.vue b/dashboard/src/views/BackupsView.vue
index eb071c285..713d7b916 100644
--- a/dashboard/src/views/BackupsView.vue
+++ b/dashboard/src/views/BackupsView.vue
@@ -63,9 +63,9 @@ onMounted(async () => {
 </script>
 
 <template>
-  <BackupDialog ref="backupDialog" @success="refresh()"/>
-
   <div class="content">
+    <BackupDialog ref="backupDialog" @success="refresh()"/>
+
     <Section :title="$t('backups.title')">
       <p>{{ $t('backups.location.description') }}
         <span v-show="manualBackupApps.length">
diff --git a/dashboard/src/views/ProfileView.vue b/dashboard/src/views/ProfileView.vue
index 6f58d1451..e9c29a792 100644
--- a/dashboard/src/views/ProfileView.vue
+++ b/dashboard/src/views/ProfileView.vue
@@ -254,31 +254,31 @@ onMounted(async () => {
 </script>
 
 <template>
-  <InputDialog ref="inputDialog" />
-
-  <Dialog ref="twoFADialog" :title="$t('profile.enable2FA.title')" :show-x="!twoFAModal" :modal="twoFAModal">
-    <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 style="text-align: left;">
-          <label for="totpTokenInput">{{ $t('profile.enable2FA.token') }}</label>
-          <InputGroup>
-            <TextInput v-model="twoFATotpToken" id="totpTokenInput" style="flex-grow: 1;"/>
-            <Button @click="onTwoFAEnable()" :disabled="!twoFATotpToken">{{ $t('profile.enable2FA.enable') }}</Button>
-          </InputGroup>
-        </FormGroup>
-      </form>
-    </div>
-  </Dialog>
-
   <div class="content">
+    <InputDialog ref="inputDialog" />
+
+    <Dialog ref="twoFADialog" :title="$t('profile.enable2FA.title')" :show-x="!twoFAModal" :modal="twoFAModal">
+      <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 style="text-align: left;">
+            <label for="totpTokenInput">{{ $t('profile.enable2FA.token') }}</label>
+            <InputGroup>
+              <TextInput v-model="twoFATotpToken" id="totpTokenInput" style="flex-grow: 1;"/>
+              <Button @click="onTwoFAEnable()" :disabled="!twoFATotpToken">{{ $t('profile.enable2FA.enable') }}</Button>
+            </InputGroup>
+          </FormGroup>
+        </form>
+      </div>
+    </Dialog>
+
     <Section :title="$t('profile.title')">
       <template #header-buttons>
         <Button @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
diff --git a/dashboard/src/views/UsersView.vue b/dashboard/src/views/UsersView.vue
index 1e0d3aa0c..cbb9d800f 100644
--- a/dashboard/src/views/UsersView.vue
+++ b/dashboard/src/views/UsersView.vue
@@ -213,13 +213,13 @@ onMounted(async () => {
 </script>
 
 <template>
-  <InputDialog ref="inputDialog" />
-  <UserDialog ref="userDialog" @success="refreshUsers()"/>
-  <GroupDialog ref="groupDialog" @success="refreshGroups()"/>
-  <ImpersonateDialog ref="impersonateDialog" />
-  <PasswordResetDialog ref="passwordResetDialog" />
-
   <div class="content">
+    <InputDialog ref="inputDialog" />
+    <UserDialog ref="userDialog" @success="refreshUsers()"/>
+    <GroupDialog ref="groupDialog" @success="refreshGroups()"/>
+    <ImpersonateDialog ref="impersonateDialog" />
+    <PasswordResetDialog ref="passwordResetDialog" />
+
     <Section :title="$t('main.navbar.users')">
       <template #header-buttons>
         <TextInput v-model="search" placeholder="Search ..." />