diff --git a/dashboard/src/components/DomainDialog.vue b/dashboard/src/components/DomainDialog.vue
index 0ab652d63..dc2715cee 100644
--- a/dashboard/src/components/DomainDialog.vue
+++ b/dashboard/src/components/DomainDialog.vue
@@ -116,7 +116,7 @@ defineExpose({
           <TextInput id="domainInput" v-model="domain" placeholder="example.com" :readonly="editing ? true : undefined" required />
         </FormGroup>
 
-        <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" />
+        <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" :show-advanced="showAdvanced" />
 
         <p style="margin-top: 15px" v-show="!showAdvanced" @click="showAdvanced = true" class="actionable">{{ $t('domains.domainDialog.advancedAction') }}</p>
 
@@ -128,13 +128,6 @@ defineExpose({
 
           <Checkbox v-model="customNameservers" :label="$t('domains.domainDialog.customNameservers')" />
 
-          <FormGroup>
-            <label for="tlsProviderInput">{{ $t('domains.domainDialog.certProvider') }} <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 id="tlsProviderInput" v-model="tlsProvider">
-              <option v-for="provider in tlsProviders" :value="provider.value" :key="provider.value">{{ provider.name }}</option>
-            </select>
-          </FormGroup>
-
           <!-- custom certificate -->
           <div v-if="tlsProvider === 'fallback'">
             <label >{{ $t('domains.domainDialog.fallbackCertCustomCert') }}</label>
diff --git a/dashboard/src/components/DomainProviderForm.vue b/dashboard/src/components/DomainProviderForm.vue
index 11c1b9ccf..4523061bb 100644
--- a/dashboard/src/components/DomainProviderForm.vue
+++ b/dashboard/src/components/DomainProviderForm.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { TextInput, FormGroup, Checkbox } from 'pankow';
+import { TextInput, FormGroup, Checkbox, SingleSelect } from 'pankow';
 import { ENDPOINTS_OVH } from '../constants.js';
 
 defineProps({
@@ -8,6 +8,10 @@ defineProps({
     type: String,
     default: '',
   },
+  showAdvanced: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const provider = defineModel('provider');
@@ -39,6 +43,14 @@ const domainProviders = [
   { name: 'No-op (only for development)', value: 'noop' }
 ];
 
+const tlsProviders = [
+  { name: 'Let\'s Encrypt Prod', value: 'letsencrypt-prod' },
+  { name: 'Let\'s Encrypt Prod - Wildcard', value: 'letsencrypt-prod-wildcard' },
+  { name: 'Let\'s Encrypt Staging', value: 'letsencrypt-staging' },
+  { name: 'Let\'s Encrypt Staging - Wildcard', value: 'letsencrypt-staging-wildcard' },
+  { name: 'Self-Signed', value: 'fallback' }, // this is not 'Custom' because we don't allow user to upload certs during setup phase
+];
+
 function needsPort80(dnsProvider, tlsProvider) {
   return ((dnsProvider === 'manual' || dnsProvider === 'noop' || dnsProvider === 'wildcard') &&
     (tlsProvider === 'letsencrypt-prod' || tlsProvider === 'letsencrypt-staging'));
@@ -133,9 +145,7 @@ function onGcdnsFileInputChange(event) {
   <div>
     <FormGroup>
       <label for="providerInput">{{ $t('domains.domainDialog.provider') }} <sup><a href="https://docs.cloudron.io/domains/#dns-providers" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
-      <select id="providerInput" v-model="provider" @change="setDefaultTlsProvider()" required>
-        <option v-for="p in domainProviders" :value="p.value" :key="p.value">{{ p.name }}</option>
-      </select>
+      <SingleSelect v-model="provider" @select="setDefaultTlsProvider()" :options="domainProviders" option-key="value" option-label="name" />
     </FormGroup>
 
     <!-- Route53 -->
@@ -322,6 +332,11 @@ function onGcdnsFileInputChange(event) {
       <TextInput id="inwxPasswordInput" v-model="dnsConfig.password" required />
     </FormGroup>
 
+    <FormGroup v-if="showAdvanced">
+      <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>
+      <SingleSelect v-model="tlsProvider" :options="tlsProviders" option-key="value" option-label="name"/>
+    </FormGroup>
+
     <p class="small text-info text-bold" v-show="provider === 'wildcard'" v-html="$t('domains.domainDialog.wildcardInfo', { domain: domain })"></p>
     <p class="small text-info text-bold" v-show="provider === 'manual'" v-html="$t('domains.domainDialog.manualInfo')"></p>
     <p class="small text-info text-bold" v-show="needsPort80(provider, tlsProvider)" v-html="$t('domains.domainDialog.letsEncryptInfo')"></p>
diff --git a/dashboard/src/models/CloudronModel.js b/dashboard/src/models/CloudronModel.js
index 2297a21d7..c1f63257e 100644
--- a/dashboard/src/models/CloudronModel.js
+++ b/dashboard/src/models/CloudronModel.js
@@ -84,28 +84,6 @@ function create() {
       if (error || result.status !== 200) return [error || result];
       return [null];
     },
-    async provisionStatus() {
-      let error, result;
-      try {
-        result = await fetcher.get(`${API_ORIGIN}/api/v1/provision/status`, {});
-      } catch (e) {
-        error = e;
-      }
-
-      if (error || result.status !== 200) return [error || result];
-      return [null, result.body];
-    },
-    async createAdmin(data) {
-      let error, result;
-      try {
-        result = await fetcher.post(`${API_ORIGIN}/api/v1/provision/activate`, data);
-      } catch (e) {
-        error = e;
-      }
-
-      if (error || result.status !== 201) return [error || result];
-      return [null, result.token];
-    },
   };
 }
 
diff --git a/dashboard/src/models/ProvisionModel.js b/dashboard/src/models/ProvisionModel.js
new file mode 100644
index 000000000..2d5a0af4f
--- /dev/null
+++ b/dashboard/src/models/ProvisionModel.js
@@ -0,0 +1,68 @@
+
+import { fetcher } from 'pankow';
+import { API_ORIGIN } from '../constants.js';
+
+function create() {
+  return {
+    name: 'ProvisionModel',
+    async status() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/provision/status`, {});
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async blockDevices() {
+      let error, result;
+      try {
+        result = await fetcher.get(`${API_ORIGIN}/api/v1/provision/block_devices`);
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async createAdmin(data) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/provision/activate`, data);
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 201) return [error || result];
+      return [null, result.body.token];
+    },
+    async detectIp() {
+      let error, result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/provision/detect_ip`, {});
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null, result.body];
+    },
+    async setup(data) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/provision/setup`, data);
+      } catch (e) {
+        error = e;
+      }
+
+      if (error || result.status !== 200) return [error || result];
+      return [null];
+    },
+  };
+}
+
+export default {
+  create,
+};
diff --git a/dashboard/src/views/ActivationView.vue b/dashboard/src/views/ActivationView.vue
index b351141f2..12a6ab022 100644
--- a/dashboard/src/views/ActivationView.vue
+++ b/dashboard/src/views/ActivationView.vue
@@ -2,10 +2,10 @@
 
 import { ref, computed, onMounted } from 'vue';
 import { Button, FormGroup, TextInput, PasswordInput, EmailInput } from 'pankow';
-import CloudronModel from '../models/CloudronModel.js';
+import ProvisionModel from '../models/ProvisionModel.js';
 import { redirectIfNeeded } from '../utils.js';
 
-const cloudronModel = CloudronModel.create();
+const provisionModel = ProvisionModel.create();
 
 const VIEWS = {
   OWNER: 'owner',
@@ -45,7 +45,7 @@ async function onOwnerSubmit() {
     setupToken: setupToken.value,
   };
 
-  const [error, result] = await cloudronModel.createAdmin(data);
+  const [error, result] = await provisionModel.createAdmin(data);
   if (error) {
     if (error.status === 400) {
       if (error.body.message === 'Invalid email') {
@@ -68,11 +68,11 @@ async function onOwnerSubmit() {
   localStorage.cloudronFirstTimeToken = result;
 
   firstTimeLoginUrl.value = '/openid/auth?client_id=cid-webadmin&scope=openid email profile&response_type=code token&redirect_uri=' + window.location.origin + '/authcallback.html';
-  view.value = VIEWS.FINISHED
+  view.value = VIEWS.FINISHED;
 }
 
 onMounted(async () => {
-  const [error, result] = await cloudronModel.provisionStatus();
+  const [error, result] = await provisionModel.status();
   if (error) return console.error(error);
 
   if (redirectIfNeeded(result, 'activation')) return; // redirected to some other view...
diff --git a/dashboard/src/views/SetupView.vue b/dashboard/src/views/SetupView.vue
index 1983f09d5..bc7303e44 100644
--- a/dashboard/src/views/SetupView.vue
+++ b/dashboard/src/views/SetupView.vue
@@ -1,12 +1,19 @@
 <script setup>
 
-import { ref, computed, onMounted } from 'vue';
-import { Spinner, Button, FormGroup, TextInput } from 'pankow';
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Spinner, Button, SingleSelect, FormGroup, TextInput } from 'pankow';
 import { redirectIfNeeded } from '../utils.js';
-import CloudronModel from '../models/CloudronModel.js';
+import ProvisionModel from '../models/ProvisionModel.js';
 import DomainProviderForm from '../components/DomainProviderForm.vue';
 
-const cloudronModel = CloudronModel.create();
+const provisionModel = ProvisionModel.create();
+
+const ipProviders = [
+  { name: 'Disabled', value: 'noop' },
+  { name: 'Public IP', value: 'generic' },
+  { name: 'Static IP Address', value: 'fixed' },
+  { name: 'Network Interface', value: 'network-interface' }
+];
 
 const formError = ref({});
 const busy = ref(false);
@@ -15,29 +22,114 @@ const waitingForDnsSetup = ref(false);
 const progressMessage = ref('');
 const taskMinutesActive = ref(0);
 const domain = ref('');
+const instanceId = ref('');
+const setupToken = ref('');
 const zoneName = ref('');
 const provider = ref('');
 const dnsConfig = ref({});
-const tlsProvider = ref('');
-const advancedVisible = ref(false);
+const tlsProvider = ref('letsencrypt-prod-wildcard');
+const showAdvanced = ref(false);
+const ipv4Provider = ref('generic');
+const ipv4Address = ref('');
+const ipv4Interface = ref('');
+const ipv6Provider = ref('generic');
+const ipv6Address = ref('');
+const ipv6Interface = ref('');
 
-const isValid = computed(() => {
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  if (!provider.value) return false;
+  isFormValid.value = form.value.checkValidity();
+}
+
+async function waitForDnsSetup () {
+  waitingForDnsSetup.value = true;
+  formError.value = {};
+
+  const [error, result] = await provisionModel.status();
+  if (error) {
+    setTimeout(waitForDnsSetup, 5000);
+    return console.error(error);
+  }
+
+  if (!result.setup.active) {
+    if (!result.adminFqdn || result.setup.errorMessage) { // setup reset or errored. start over
+      formError.value.dnsWait = result.setup.errorMessage;
+      waitingForDnsSetup.value = false;
+    } else { // proceed to activation
+      window.location.href = 'https://' + result.adminFqdn + '/activation.html' + (window.location.search);
+    }
+    return;
+  }
+
+  progressMessage.value = result.setup.message;
+  taskMinutesActive.value = (new Date() - new Date(result.setup.startTime)) / 60000;
+
+  setTimeout(waitForDnsSetup, 5000);
+}
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!isFormValid.value) return;
 
   busy.value = true;
   formError.value = {};
+
+  const data = {
+    domainConfig: {
+      domain: domain.value,
+      zoneName: zoneName.value,
+      provider: provider.value,
+      config: dnsConfig.value,
+      tlsConfig: {
+        provider: tlsProvider.value
+      },
+    },
+    ipv4Config: {
+      provider: ipv4Provider.value,
+      ip: ipv4Provider.value === 'fixed' ? ipv4Address.value : '',
+      ifname: ipv4Provider.value === 'network-interface' ? ipv4Interface.value : '',
+    },
+    ipv6Config: {
+      provider: ipv6Provider.value,
+      ip: ipv6Provider.value === 'fixed' ? ipv6Address.value : '',
+      ifname: ipv6Provider.value === 'network-interface' ? ipv6Interface.value : '',
+    },
+    providerToken: instanceId.value,
+    setupToken: setupToken.value,
+  };
+
+  const [error] = await provisionModel.setup(data);
+  if (error) {
+    if (error.status === 422) {
+      // TODO what is this special error checking for ami doing here?
+      if (provider.value === 'ami') {
+        formError.value.ami = error.message;
+      } else {
+        formError.value.setup = error.message;
+      }
+    } else {
+      formError.value.generic = error.message;
+    }
+
+    busy.value = false;
+    return;
+  }
+
+  waitForDnsSetup();
 }
 
 onMounted(async () => {
-  const [error, result] = await cloudronModel.provisionStatus();
+  const search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+
+  const [error, result] = await provisionModel.status();
   if (error) return console.error(error);
 
   if (redirectIfNeeded(result, 'setup')) return; // redirected to some other view...
 
+  instanceId.value = search.instanceId;
+  setupToken.value = search.setupToken;
+
   ready.value = true;
 });
 
@@ -46,98 +138,88 @@ onMounted(async () => {
 <template>
   <div class="container" v-if="ready">
     <Transition name="slide-fade" mode="out-in">
-      <div class="view" v-if="waitingForDnsSetup">
+      <div class="view" v-if="waitingForDnsSetup" style="text-align: center; max-width: unset;">
         <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/>
+        <div>
+          Please wait while Cloudron is setting up the dashboard.
+          <br/>
+          <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>
+          <br/>
+          <br/>
+          <span v-show="taskMinutesActive >= 4">If setup appears stuck, it can be restarted by running <code>systemctl restart box</code> and reloading this page.</span>
+        </div>
       </div>
 
       <div class="view" v-else>
-        <h1>Domain Setup</h1>
+        <h1>Cloudron Domain Setup</h1>
 
-        <form @submit.prevent="onSubmit()">
+        <div class="text-danger" v-if="formError.dnsWait">{{ formError.dnsWait }}</div>
+        <div class="text-danger" v-if="formError.setup">{{ formError.setup }}</div>
+        <div class="text-danger" v-if="formError.generic">{{ formError.generic }}</div>
+
+        <form ref="form" @submit.prevent="onSubmit()" @input="checkValidity()">
           <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>
+              <div style="padding-top: 6px;">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" />
+            <DomainProviderForm v-model:provider="provider" v-model:dns-config="dnsConfig" v-model:tls-provider="tlsProvider" :domain="domain" :show-advanced="showAdvanced" />
 
-            <div v-show="advancedVisible">
+            <div v-show="showAdvanced">
               <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>
+                <SingleSelect v-model="ipv4Provider" :options="ipProviders" option-key="value" option-label="name" />
               </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 v-if="ipv4Provider === 'fixed'">
+                <label for="ipv4AddressInput">IPv4 Address</label>
+                <TextInput id="ipv4AddressInput" v-model="ipv4Address" required />
               </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 v-if="ipv4Provider === 'network-interface'">
+                <label for="ipv4InterfaceInput">IPv4 Interface Name</label>
+                <TextInput id="ipv4InterfaceInput" v-model="ipv4Interface" required />
               </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>
+                <SingleSelect v-model="ipv6Provider" :options="ipProviders" option-key="value" option-label="name" />
               </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 v-if="ipv6Provider === 'fixed'">
+                <label for="ipv6AddressInput">IPv6 Address</label>
+                <TextInput id="ipv6AddressInput" v-model="ipv6Address" required />
               </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 v-if="ipv6Provider === 'network-interface'">
+                <label for="ipv6InterfaceInpt">IPv6 Interface Name</label>
+                <TextInput id="ipv6InterfaceInpt" v-model="ipv6Interface" required />
               </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>
+            <div class="actionable" @click="showAdvanced = false" v-if="showAdvanced">Hide Advanced settings</div>
+            <div class="actionable" @click="showAdvanced = 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>
+        <Button @click="onSubmit()" style="margin-top: 12px" :disabled="busy || !isFormValid" :loading="busy">Next</Button>
+        <a href="/restore.html" style="margin-left: 10px;">Looking to restore?</a>
       </div>
     </Transition>
   </div>
@@ -150,11 +232,17 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
   height: 100%;
+  overflow: auto;
+}
+
+h1 {
+  margin-top: 0;
 }
 
 .view {
   width: 100%;
   max-width: 500px;
+  max-height: 100%;
 }
 
 </style>