diff --git a/dashboard/setup.html b/dashboard/setup.html
index d95dc1718..e4a323cba 100644
--- a/dashboard/setup.html
+++ b/dashboard/setup.html
@@ -1,408 +1,27 @@
 <!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
+    <meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">
 
-  <title>Cloudron Domain Setup</title>
-  <meta name="description" content="Cloudron Domain Setup">
+    <link rel="icon" id="favicon" href="/api/v1/cloudron/avatar" />
 
-  <link id="favicon" href="/api/v1/cloudron/avatar" rel="icon" type="image/png">
-
-  <!-- contains all thing already using import statement -->
-  <script type="module" src="./src/modules.js"></script>
-
-  <!-- Theme CSS -->
-  <link type="text/css" rel="stylesheet" href="./src/theme.scss">
-
-  <!-- jQuery-->
-  <script type="text/javascript" src="/js/jquery.min.js"></script>
-
-  <!-- async -->
-  <script type="text/javascript" src="/js/async-3.2.0.min.js"></script>
-
-  <!-- Angularjs scripts -->
-  <script type="text/javascript" src="/js/angular.min.js"></script>
-  <script type="text/javascript" src="/js/angular-loader.min.js"></script>
-  <script type="text/javascript" src="/js/angular-cookies.min.js"></script>
-  <script type="text/javascript" src="/js/angular-md5.min.js"></script>
-  <script type="text/javascript" src="/js/angular-ui-notification.js"></script>
-
-  <script type="text/javascript" src="/js/clipboard.min.js"></script>
-
-  <!-- Angular directives for bootstrap https://angular-ui.github.io/bootstrap/ -->
-  <script type="text/javascript" src="/js/ui-bootstrap-tpls-1.3.3.min.js"></script>
-
-  <!-- Angular translate https://angular-translate.github.io/ -->
-  <script type="text/javascript" src="/js/angular-translate.min.js"></script>
-  <script type="text/javascript" src="/js/angular-translate-loader-static-files.min.js"></script>
-  <script type="text/javascript" src="/js/angular-translate-storage-cookie.min.js"></script>
-  <script type="text/javascript" src="/js/angular-translate-storage-local.min.js"></script>
-
-  <!-- Showdown (markdown converter) -->
-  <script type="text/javascript" src="/js/showdown-1.9.1.min.js"></script>
-
-  <!-- Setup Application -->
-  <script type="text/javascript" src="/js/setup.js?%VITE_CACHE_ID%"></script>
-  <script type="text/javascript" src="/js/client.js?%VITE_CACHE_ID%"></script>
-  <script type="text/javascript" src="/js/utils.js?%VITE_CACHE_ID%"></script>
-
-</head>
-
-<body class="setup" ng-app="Application" ng-controller="SetupDNSController">
-
-  <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://docs.cloudron.io/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
-
-  <div class="main-container ng-cloak text-center" ng-show="state === 'waitingForDnsSetup'">
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3 text-center">
-        <i class="fa fa-circle-notch fa-spin fa-5x"></i><br/>
-        <h3>{{ message }} ...</h3>
-        <br/>
-        <br/>
-        <br/>
-        <br/>
-        <br/>
-        <br/>
-        <br/>
-        <br/>
-        <p>
-          Please wait while Cloudron is setting up the dashboard.<br/>
-          You can follow the logs on the server at <code class="clipboard hand" data-clipboard-text="/home/yellowtent/platformdata/logs/box.log" uib-tooltip="{{ clipboardDone ? 'Copied' : 'Click to copy' }}" tooltip-placement="right">/home/yellowtent/platformdata/logs/box.log</code>
-        </p>
-        <br/>
-        <br/>
-        <p ng-show="taskMinutesActive >= 4">
-          If setup appears stuck, it can be restarted by running <code class="clipboard hand" data-clipboard-text="systemctl restart box" uib-tooltip="{{ clipboardDone ? 'Copied' : 'Click to copy' }}" tooltip-placement="right">systemctl restart box</code> and reloading this page.
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div class="main-container ng-cloak" ng-show="state === 'initialized'">
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <div class="card" style="max-width: none; padding: 20px;">
-          <form name="dnsCredentialsForm" role="form" novalidate ng-submit="setDnsCredentials()" autocomplete="off">
-            <div class="row">
-              <div class="col-md-10 col-md-offset-1 text-center">
-                <h1>Domain Setup</h1>
-                <p class="has-error text-center" ng-show="error.setup">{{ error.setup }}</p>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-10 col-md-offset-1">
-                <div class="form-group" style="margin-bottom: 0;" ng-class="{ 'has-error': dnsCredentialsForm.domain.$dirty && dnsCredentialsForm.domain.$invalid }">
-                  <label class="control-label">Domain  <sup><a ng-href="https://docs.cloudron.io/installation/#domain-setup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.domain" name="domain" placeholder="example.com" required autofocus ng-disabled="dnsCredentials.busy">
-                  <div class="text-danger" ng-show="dnsCredentials.domain.indexOf('my.') === 0 && dnsCredentials.domain.length > 3">Are you sure about this domain? The dashboard will be at <b>my.{{ dnsCredentials.domain }}</b></div>
-                  <p style="margin-top: 5px; font-size: 13px;">
-                    Apps will be installed on subdomains of this domain. The dashboard will be available on the <b>my</b> subdomain. You can add more domains later.
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-md-10 col-md-offset-1">
-                <h3 class="text-center">Domain Configuration <sup><a ng-href="https://docs.cloudron.io/domains/#dns-providers" class="help" target="_blank" tabindex="-1"><i class="fa fa-question-circle"></i></a></sup> </h3>
-                <p class="has-error text-center" ng-show="error.dnsCredentials">{{ error.dnsCredentials }}</p>
-
-                <div class="form-group">
-                  <label class="control-label">DNS Provider</label>
-                  <select class="form-control" ng-model="dnsCredentials.provider" ng-options="a.value as a.name for a in dnsProvider" ng-disabled="dnsCredentials.busy" ng-change="setDefaultTlsProvider()"></select>
-                </div>
-
-                <!-- Route53 -->
-                <div ng-if="provider === 'ami'" ng-show="dnsCredentials.provider === 'route53'">
-                  <b class="has-error">This feature is disabled in AWS Marketplace AMI. <a href="https://docs.aws.amazon.com/marketplace/latest/userguide/product-and-ami-policies.html" target="_blank">AWS Marketplace Policy</a> disallows
-                  AMIs from requesting IAM credentials from users to access Route53 hosted domains. Please use the Wildcard or Manual provider instead.</b>
-                </div>
-
-                <div ng-if="provider !== 'ami'" class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.accessKeyId.$dirty && dnsCredentialsForm.accessKeyId.$invalid }" ng-show="dnsCredentials.provider === 'route53'">
-                  <label class="control-label">Access Key Id</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.accessKeyId" name="accessKeyId" placeholder="Access Key Id" ng-minlength="16" ng-maxlength="32" ng-required="dnsCredentials.provider === 'route53'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div ng-if="provider !== 'ami'" class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.secretAccessKey.$dirty && dnsCredentialsForm.secretAccessKey.$invalid }" ng-show="dnsCredentials.provider === 'route53'">
-                  <label class="control-label">Secret Access Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.secretAccessKey" name="secretAccessKey" placeholder="Secret Access Key" ng-required="dnsCredentials.provider === 'route53'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- Google Cloud DNS -->
-                <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'gcdns'">
-                  <label class="control-label">Service Account Key</label>
-                  <div class="input-group">
-                    <input type="file" id="gcdnsKeyFileInput" style="display:none"/>
-                    <input type="text" class="form-control" placeholder="Service Account Key" ng-model="dnsCredentials.gcdnsKey.keyFileName" id="gcdnsKeyInput" name="cert" onclick="getElementById('gcdnsKeyFileInput').click();" style="cursor: pointer;" ng-required="dnsCredentials.provider === 'gcdns'" ng-disabled="dnsCredentials.busy">
-                    <span class="input-group-addon">
-                      <i class="fa fa-upload" onclick="getElementById('gcdnsKeyFileInput').click();"></i>
-                    </span>
-                  </div>
-                </div>
-
-                <!-- DigitalOcean -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.digitalOceanToken.$dirty && dnsCredentialsForm.digitalOceanToken.$invalid }" ng-show="dnsCredentials.provider === 'digitalocean'">
-                  <label class="control-label">DigitalOcean Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.digitalOceanToken" name="digitalOceanToken" placeholder="API Token" ng-required="dnsCredentials.provider === 'digitalocean'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- Gandi -->
-                <div class="form-group" ng-class="{ 'has-error': false }" ng-show="dnsCredentials.provider === 'gandi'">
-                  <label class="control-label">Token Type</label>
-                  <select class="form-control" ng-model="dnsCredentials.gandiTokenType">
-                    <option value="ApiKey">API Key (Deprecated)</option>
-                    <option value="PAT">Personal Access Token (PAT)</option>
-                  </select>
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.gandiApiKey.$dirty && dnsCredentialsForm.gandiApiKey.$invalid }" ng-show="dnsCredentials.provider === 'gandi'">
-                  <label class="control-label">Gandi API Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.gandiApiKey" name="gandiApiKey" placeholder="API Key" ng-required="dnsCredentials.provider === 'gandi'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- GoDaddy -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.godaddyApiKey.$dirty && dnsCredentialsForm.godaddyApiKey.$invalid }" ng-show="dnsCredentials.provider === 'godaddy'">
-                  <label class="control-label">API Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.godaddyApiKey" name="godaddyApiKey" placeholder="API Key" ng-minlength="1" ng-required="dnsCredentials.provider === 'godaddy'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.godaddyApiSecret.$dirty && dnsCredentialsForm.godaddyApiSecret.$invalid }" ng-show="dnsCredentials.provider === 'godaddy'">
-                  <label class="control-label">API Secret</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.godaddyApiSecret" name="godaddyApiSecret" placeholder="API Secret" ng-required="dnsCredentials.provider === 'godaddy'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- Netcup -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.netcupCustomerNumber.$dirty && dnsCredentialsForm.netcupCustomerNumber.$invalid }" ng-show="dnsCredentials.provider === 'netcup'">
-                  <label class="control-label">Customer Number</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.netcupCustomerNumber" name="netcupCustomerNumber" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'netcup'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.netcupApiKey.$dirty && dnsCredentialsForm.netcupApiKey.$invalid }" ng-show="dnsCredentials.provider === 'netcup'">
-                  <label class="control-label">API Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.netcupApiKey" name="netcupApiKey" ng-disabled="dnsCredentials.busy" ng-minlength="1" ng-required="dnsCredentials.provider === 'netcup'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.netcupApiPassword.$dirty && dnsCredentialsForm.netcupApiPassword.$invalid }" ng-show="dnsCredentials.provider === 'netcup'">
-                  <label class="control-label">API Password</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.netcupApiPassword" name="netcupApiPassword" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'netcup'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- Cloudflare -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.cloudflareToken.$dirty && dnsCredentialsForm.cloudflareToken.$invalid }" ng-show="dnsCredentials.provider === 'cloudflare'">
-                  <label class="control-label">Token Type</label>
-                  <select class="form-control" ng-model="dnsCredentials.cloudflareTokenType">
-                    <option value="GlobalApiKey">Global API Key</option>
-                    <option value="ApiToken">API Token</option>
-                  </select>
-                </div>
-
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.cloudflareToken.$dirty && dnsCredentialsForm.cloudflareToken.$invalid }" ng-show="dnsCredentials.provider === 'cloudflare'">
-                  <label class="control-label" ng-show="dnsCredentials.cloudflareTokenType === 'GlobalApiKey'">Global API Key</label>
-                  <label class="control-label" ng-show="dnsCredentials.cloudflareTokenType === 'ApiToken'">API Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.cloudflareToken" name="cloudflareToken" placeholder="API Key/Token" ng-required="dnsCredentials.provider === 'cloudflare'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.cloudflareEmail.$dirty && dnsCredentialsForm.cloudflareEmail.$invalid }" ng-show="dnsCredentials.provider === 'cloudflare' && dnsCredentials.cloudflareTokenType === 'GlobalApiKey'">
-                  <label class="control-label">Cloudflare Email</label>
-                  <input type="email" class="form-control" ng-model="dnsCredentials.cloudflareEmail" name="cloudflareEmail" placeholder="Cloudflare Account Email" ng-required="dnsCredentials.provider === 'cloudflare' && dnsCredentials.cloudflareTokenType === 'GlobalApiKey'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <div class="checkbox" ng-show="dnsCredentials.provider === 'cloudflare'">
-                  <label>
-                    <input type="checkbox" ng-model="dnsCredentials.cloudflareDefaultProxyStatus"> Enable proxying  for new DNS records
-                    <sup><a ng-href="https://docs.cloudron.io/domains/#cloudflare-dns" class="help" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup>
-                  </label>
-                </div>
-
-                <!-- Name.com -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.nameComUsername.$dirty && dnsCredentialsForm.nameComUsername.$invalid }" ng-show="dnsCredentials.provider === 'namecom'">
-                  <label class="control-label">Name.com Username</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.nameComUsername" name="nameComUsername" placeholder="Name.com Username" ng-required="dnsCredentials.provider === 'namecom'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.nameComToken.$dirty && dnsCredentialsForm.nameComToken.$invalid }" ng-show="dnsCredentials.provider === 'namecom'">
-                  <label class="control-label">API Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.nameComToken" name="nameComToken" placeholder="Name.com API Token" ng-required="dnsCredentials.provider === 'namecom'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- Namecheap -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.namecheapUsername.$dirty && dnsCredentialsForm.namecheapUsername.$invalid }" ng-show="dnsCredentials.provider === 'namecheap'">
-                  <label class="control-label">Namecheap Username</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.namecheapUsername" name="namecheapUsername" placeholder="Namecheap Username" ng-required="dnsCredentials.provider === 'namecheap'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.namecheapApiKey.$dirty && dnsCredentialsForm.namecheapApiKey.$invalid }" ng-show="dnsCredentials.provider === 'namecheap'">
-                  <label class="control-label">API Key</label>
-                  <p class="small text-info" ng-show="dnsCredentials.provider === 'namecheap'"><b>The server IP needs to be whitelisted for this API Key.</b></p>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.namecheapApiKey" name="namecheapApiKey" placeholder="Namecheap API Key" ng-required="dnsCredentials.provider === 'namecheap'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- INWX -->
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.inwxUsername.$dirty && dnsCredentialsForm.inwxUsername.$invalid }" ng-show="dnsCredentials.provider === 'inwx'">
-                  <label class="control-label">INWX Username</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.inwxUsername" name="inwxUsername" placeholder="INWX Username" ng-required="dnsCredentials.provider === 'inwx'" ng-disabled="dnsCredentials.busy">
-                </div>
-                <div class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.inwxPassword.$dirty && dnsCredentialsForm.inwxPassword.$invalid }" ng-show="dnsCredentials.provider === 'inwx'">
-                  <label class="control-label">INWX Password</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.inwxPassword" name="inwxPassword" placeholder="INWX Password" ng-required="dnsCredentials.provider === 'inwx'" ng-disabled="dnsCredentials.busy">
-                </div>
-
-                <!-- Linode -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'linode'">
-                  <label class="control-label">API Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.linodeToken" name="linodeToken" ng-required="dnsCredentials.provider === 'linode'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- Bunny -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'bunny'">
-                  <label class="control-label">Access Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.bunnyAccessKey" name="bunnyAccessKey" ng-required="dnsCredentials.provider === 'bunny'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- dnsimple -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'dnsimple'">
-                  <label class="control-label">Access Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.dnsimpleAccessToken" name="dnsimpleAccessToken" ng-required="dnsCredentials.provider === 'dnsimple'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- OVH -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'ovh'">
-                  <label class="control-label" for="inputConfigureOvhEndpoint">Endpoint</label>
-                  <select class="form-control" name="endpoint" id="inputConfigureOvhEndpoint" ng-model="dnsCredentials.ovhEndpoint" ng-options="a.value as a.name for a in ovhEndpoints" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'ovh'"></select>
-                </p>
-                <p class="form-group" ng-show="dnsCredentials.provider === 'ovh'">
-                  <label class="control-label">Consumer Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.ovhConsumerKey" name="ovhConsumerKey" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'ovh'">
-                </p>
-                <p class="form-group" ng-show="dnsCredentials.provider === 'ovh'">
-                  <label class="control-label">Application Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.ovhAppKey" name="ovhAppKey" ng-disabled="dnsCredentials.busy" ng-minlength="1" ng-required="dnsCredentials.provider === 'ovh'">
-                </p>
-                <p class="form-group" ng-show="dnsCredentials.provider === 'ovh'">
-                  <label class="control-label">Application Secret</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.ovhAppSecret" name="ovhAppSecret" ng-disabled="dnsCredentials.busy" ng-required="dnsCredentials.provider === 'ovh'">
-                </p>
-
-                <!-- Porkbun -->
-                <p class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.porkbunApikey.$dirty && dnsCredentialsForm.porkbunApikey.$invalid }" ng-show="dnsCredentials.provider === 'porkbun'">
-                  <label class="control-label">API Key</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.porkbunApikey" name="porkbunApikey" placeholder="API Key" ng-minlength="1" ng-required="dnsCredentials.provider === 'porkbun'" ng-disabled="dnsCredentials.busy">
-                </p>
-                <p class="form-group" ng-class="{ 'has-error': dnsCredentialsForm.porkbunSecretapikey.$dirty && dnsCredentialsForm.porkbunSecretapikey.$invalid }" ng-show="dnsCredentials.provider === 'porkbun'">
-                  <label class="control-label">API Secret</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.porkbunSecretapikey" name="porkbunSecretapikey" placeholder="API Secret" ng-required="dnsCredentials.provider === 'porkbun'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- Hetzner -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'hetzner'">
-                  <label class="control-label">API Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.hetznerToken" name="hetznerToken" ng-required="dnsCredentials.provider === 'hetzner'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- Vultr -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'vultr'">
-                  <label class="control-label">API Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.vultrToken" name="vultrToken" ng-required="dnsCredentials.provider === 'vultr'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- deSEC -->
-                <p class="form-group" ng-show="dnsCredentials.provider === 'desec'">
-                  <label class="control-label">API Token</label>
-                  <input type="text" class="form-control" ng-model="dnsCredentials.deSecToken" name="deSecToken" ng-required="dnsCredentials.provider === 'desec'" ng-disabled="dnsCredentials.busy">
-                </p>
-
-                <!-- Wildcard -->
-                <p class="small text-info" ng-show="dnsCredentials.provider === 'wildcard'">
-                  <span>Set up A records for <b>*.{{ dnsCredentials.domain || 'example.com' }}.</b> and <b>{{ dnsCredentials.domain || 'example.com' }}.</b> to this server's IP.</span>
-                </p>
-
-                <!-- Manual -->
-                <p class="small text-info" ng-show="dnsCredentials.provider === 'manual'">
-                  <span>Set up an A record for <b>my.{{ dnsCredentials.domain || 'example.com' }}.</b> to this server's IP.<br/></span>
-                </p>
-
-                <p class="small text-info" ng-show="needsPort80(dnsCredentials.provider, dnsCredentials.tlsConfig.provider)">Let's Encrypt requires your server to be reachable on port 80</p>
-
-                <div ng-show="provider === 'ami'">
-                  <h3 class="text-center">Owner verification</h3>
-                  <p class="has-error text-center" ng-show="error.ami">{{ error.ami }}</p>
-
-                  <div class="form-group" style="margin-bottom: 0;" ng-class="{ 'has-error': dnsCredentialsForm.instanceId.$dirty && (dnsCredentialsForm.instanceId.$invalid || error.ami) }">
-                    <label class="control-label">EC2 Instance Id</label>
-                    <input type="text" class="form-control" ng-model="instanceId" id="inputInstanceId" name="instanceId" placeholder="i-0123456789abcdefg" ng-minlength="1" ng-required="provider === 'ami'" autocomplete="off">
-                  </div>
-                  <p style="margin-top: 5px; font-size: 13px;">Provide the EC2 instance id to verify you have access to this server.</p>
-                </div>
-
-                <br/>
-                <div uib-collapse="!advancedVisible">
-                  <div class="form-group">
-                    <label class="control-label">DNS Zone Name (Optional) <sup><a ng-href="https://docs.cloudron.io/domains/#zone-name" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-                    <input type="text" class="form-control" ng-model="dnsCredentials.zoneName" name="zoneName" placeholder="Defaults to TLD" ng-disabled="dnsCredentials.busy">
-                  </div>
-
-                  <div class="form-group">
-                    <label class="control-label">Certificate Provider <sup><a ng-href="https://docs.cloudron.io/certificates/#certificate-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-                    <select class="form-control" ng-model="dnsCredentials.tlsConfig.provider" ng-options="a.value as a.name for a in tlsProvider" ng-disabled="dnsCredentials.busy"></select>
-                  </div>
-
-                  <!-- IPv4 provider -->
-                  <div class="form-group">
-                    <label class="control-label">IPv4 Configuration  <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-                    <select class="form-control" ng-model="ipv4Config.provider" ng-options="a.value as a.name for a in ipProviders"></select>
-                  </div>
-
-                  <!-- IPv4 Fixed -->
-                  <div class="form-group" ng-show="ipv4Config.provider === 'fixed'">
-                    <label class="control-label">IPv4 Address</label>
-                    <input type="text" class="form-control" ng-model="ipv4Config.ip" name="ipv4" ng-required="ipv4Config.provider === 'fixed'">
-                  </div>
-
-                  <!-- IPv4 Network Interface -->
-                  <div class="form-group" ng-show="ipv4Config.provider === 'network-interface'">
-                    <label class="control-label">IPv4 Interface Name</label>
-                    <input type="text" class="form-control" ng-model="ipv4Config.ifname" name="ifname4" ng-required="ipv4Config.provider === 'network-interface'">
-                  </div>
-
-                  <!-- IPv6 provider -->
-                  <div class="form-group">
-                    <label class="control-label">IPv6 Configuration  <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-                    <select class="form-control" ng-model="ipv6Config.provider" ng-options="a.value as a.name for a in ipProviders"></select>
-                  </div>
-
-                  <!-- IPv6 Fixed -->
-                  <div class="form-group" ng-show="ipv6Config.provider === 'fixed'">
-                    <label class="control-label">IPv6 Address</label>
-                    <input type="text" class="form-control" ng-model="ipv6Config.ip" name="ipv6" ng-required="ipv6Config.provider === 'fixed'">
-                  </div>
-
-                  <!-- IPv6 Network Interface -->
-                  <div class="form-group" ng-show="ipv6Config.provider === 'network-interface'">
-                    <label class="control-label">IPv6 Interface Name</label>
-                    <input type="text" class="form-control" ng-model="ipv6Config.ifname" name="ifname6" ng-required="ipv6Config.provider === 'network-interface'">
-                  </div>
-
-                </div>
-                <div class="text-center">
-                  <a href="" ng-click="advancedVisible = true" ng-hide="advancedVisible">Advanced settings...</a>
-                  <a href="" ng-click="advancedVisible = false" ng-show="advancedVisible">Hide Advanced settings</a>
-                </div>
-              </div>
-            </div>
-
-            <br/>
-
-            <div class="row">
-              <div class="col-md-12 text-center">
-                <button type="submit" class="btn btn-primary" ng-disabled="dnsCredentialsForm.$invalid"><i class="fa fa-circle-notch fa-spin" ng-show="dnsCredentials.busy"></i> Next</button>
-              </div>
-            </div>
-            <br/>
-            <div class="row">
-              <div class="col-md-12 text-center"><small>Looking to <a ng-href="/restore.html{{ search }}">restore?</a></small></div>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <footer class="text-center" ng-show="state === 'waitingForDnsSetup' || state === 'initialized'">
-    <span class="text-muted">&copy;2022 <a href="https://cloudron.io" target="_blank">Cloudron</a></span>
-    <span class="text-muted"><a href="https://forum.cloudron.io" target="_blank">Forum <i class="fa fa-comments"></i></a></span>
-  </footer>
-
-</body>
+    <title>Cloudron Domain Setup</title>
+    <style>
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: black;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app" style="overflow: hidden; height: 100%;"></div>
+    <script type="module" src="/src/setup.js"></script>
+  </body>
 </html>
diff --git a/dashboard/src/setup.js b/dashboard/src/setup.js
new file mode 100644
index 000000000..e46e2426e
--- /dev/null
+++ b/dashboard/src/setup.js
@@ -0,0 +1,16 @@
+import { createApp } from 'vue';
+
+import '@fontsource/noto-sans';
+
+import i18n from './i18n.js';
+import SetupView from './views/SetupView.vue';
+
+import './style.css';
+
+(async function init() {
+  const app = createApp(SetupView);
+
+  app.use(await i18n());
+
+  app.mount('#app');
+})();
diff --git a/dashboard/src/views/SetupView.vue b/dashboard/src/views/SetupView.vue
new file mode 100644
index 000000000..1983f09d5
--- /dev/null
+++ b/dashboard/src/views/SetupView.vue
@@ -0,0 +1,160 @@
+<script setup>
+
+import { ref, computed, onMounted } from 'vue';
+import { Spinner, Button, FormGroup, TextInput } from 'pankow';
+import { redirectIfNeeded } from '../utils.js';
+import CloudronModel from '../models/CloudronModel.js';
+import DomainProviderForm from '../components/DomainProviderForm.vue';
+
+const cloudronModel = CloudronModel.create();
+
+const formError = ref({});
+const busy = ref(false);
+const ready = ref(false);
+const waitingForDnsSetup = ref(false);
+const progressMessage = ref('');
+const taskMinutesActive = ref(0);
+const domain = ref('');
+const zoneName = ref('');
+const provider = ref('');
+const dnsConfig = ref({});
+const tlsProvider = ref('');
+const advancedVisible = ref(false);
+
+const isValid = computed(() => {
+  return true;
+});
+
+async function onSubmit() {
+  if (!isValid.value) return;
+
+  busy.value = true;
+  formError.value = {};
+}
+
+onMounted(async () => {
+  const [error, result] = await cloudronModel.provisionStatus();
+  if (error) return console.error(error);
+
+  if (redirectIfNeeded(result, 'setup')) return; // redirected to some other view...
+
+  ready.value = true;
+});
+
+</script>
+
+<template>
+  <div class="container" v-if="ready">
+    <Transition name="slide-fade" mode="out-in">
+      <div class="view" v-if="waitingForDnsSetup">
+        <Spinner class="pankow-spinner-large"/>
+        <h3>{{ progressMessage }} ...</h3>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <p>
+          Please wait while Cloudron is setting up the dashboard.<br/>
+          You can follow the logs on the server at <code class="clipboard hand" data-clipboard-text="/home/yellowtent/platformdata/logs/box.log" uib-tooltip="{{ clipboardDone ? 'Copied' : 'Click to copy' }}" tooltip-placement="right">/home/yellowtent/platformdata/logs/box.log</code>
+        </p>
+        <br/>
+        <br/>
+        <p v-show="taskMinutesActive >= 4">
+          If setup appears stuck, it can be restarted by running <code class="clipboard hand" data-clipboard-text="systemctl restart box" uib-tooltip="{{ clipboardDone ? 'Copied' : 'Click to copy' }}" tooltip-placement="right">systemctl restart box</code> and reloading this page.
+        </p>
+      </div>
+
+      <div class="view" v-else>
+        <h1>Domain Setup</h1>
+
+        <form @submit.prevent="onSubmit()">
+          <fieldset :disabled="busy">
+            <FormGroup>
+              <label for="domainInput">Domain  <sup><a href="https://docs.cloudron.io/installation/#domain-setup" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+              <TextInput id="domainInput" v-model="domain" placeholder="example.com" required />
+              <div class="text-danger" v-show="domain.indexOf('my.') === 0 && domain.length > 3">Are you sure about this domain? The dashboard will be at <b>my.{{ domain }}</b></div>
+              <div>Apps will be installed on subdomains of this domain. The dashboard will be available on the <b>my</b> subdomain. You can add more domains later.</div>
+            </FormGroup>
+
+            <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" />
+
+            <div v-show="advancedVisible">
+              <FormGroup>
+                <label for="zoneNameInput">DNS Zone Name (Optional) <sup><a href="https://docs.cloudron.io/domains/#zone-name" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                <TextInput id="zoneNameInput" v-model="zoneName" placeholder="Defaults to TLD" />
+              </FormGroup>
+
+              <FormGroup>
+                <label>Certificate Provider <sup><a href="https://docs.cloudron.io/certificates/#certificate-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                <select class="form-control" ng-model="dnsCredentials.tlsConfig.provider" ng-options="a.value as a.name for a in tlsProvider" ng-disabled="dnsCredentials.busy"></select>
+              </FormGroup>
+
+              <!-- IPv4 provider -->
+              <FormGroup>
+                <label class="control-label">IPv4 Configuration  <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                <select class="form-control" ng-model="ipv4Config.provider" ng-options="a.value as a.name for a in ipProviders"></select>
+              </FormGroup>
+
+              <!-- IPv4 Fixed -->
+              <FormGroup ng-show="ipv4Config.provider === 'fixed'">
+                <label class="control-label">IPv4 Address</label>
+                <input type="text" class="form-control" ng-model="ipv4Config.ip" name="ipv4" ng-required="ipv4Config.provider === 'fixed'">
+              </FormGroup>
+
+              <!-- IPv4 Network Interface -->
+              <FormGroup ng-show="ipv4Config.provider === 'network-interface'">
+                <label class="control-label">IPv4 Interface Name</label>
+                <input type="text" class="form-control" ng-model="ipv4Config.ifname" name="ifname4" ng-required="ipv4Config.provider === 'network-interface'">
+              </FormGroup>
+
+              <!-- IPv6 provider -->
+              <FormGroup>
+                <label class="control-label">IPv6 Configuration  <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
+                <select class="form-control" ng-model="ipv6Config.provider" ng-options="a.value as a.name for a in ipProviders"></select>
+              </FormGroup>
+
+              <!-- IPv6 Fixed -->
+              <FormGroup ng-show="ipv6Config.provider === 'fixed'">
+                <label class="control-label">IPv6 Address</label>
+                <input type="text" class="form-control" ng-model="ipv6Config.ip" name="ipv6" ng-required="ipv6Config.provider === 'fixed'">
+              </FormGroup>
+
+              <!-- IPv6 Network Interface -->
+              <FormGroup ng-show="ipv6Config.provider === 'network-interface'">
+                <label class="control-label">IPv6 Interface Name</label>
+                <input type="text" class="form-control" ng-model="ipv6Config.ifname" name="ifname6" ng-required="ipv6Config.provider === 'network-interface'">
+              </FormGroup>
+            </div>
+
+            <div class="actionable" @click="advancedVisible = false" v-if="advancedVisible">Hide Advanced settings</div>
+            <div class="actionable" @click="advancedVisible = true" v-else>Advanced settings...</div>
+          </fieldset>
+        </form>
+
+        <Button @click="onSubmit()" :disabled="busy" :loading="busy">Next</Button>
+
+        <div class="actionable"><small>Looking to <a href="/restore.html">restore?</a></small></div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.view {
+  width: 100%;
+  max-width: 500px;
+}
+
+</style>
