diff --git a/dashboard/src/components/DomainProviderForm.vue b/dashboard/src/components/DomainProviderForm.vue
index 3f6fc4ddd..59b56593c 100644
--- a/dashboard/src/components/DomainProviderForm.vue
+++ b/dashboard/src/components/DomainProviderForm.vue
@@ -71,15 +71,78 @@ function needsPort80(dnsProvider, tlsProvider) {
 }
 
 function setDefaultTlsProvider() {
-  const dnsProvider = provider.value;
   // wildcard LE won't work without automated DNS
-  if (dnsProvider === 'manual' || dnsProvider === 'noop' || dnsProvider === 'wildcard') {
+  if (provider.value === 'manual' || provider.value === 'noop' || provider.value === 'wildcard') {
     tlsProvider.value = 'letsencrypt-prod';
   } else {
     tlsProvider.value = 'letsencrypt-prod-wildcard';
   }
 }
 
+function resetFields() {
+  if (provider.value === 'route53') {
+    dnsConfig.value.accessKeyId = '';
+    dnsConfig.value.secretAccessKey = '';
+  } else if (provider.value === 'gcdns') {
+    dnsConfig.value.projectId = '';
+    dnsConfig.value.credentials = {
+      client_email: '',
+      private_key: '',
+    };
+  } else if (provider.value === 'digitalocean') {
+    dnsConfig.value.token = '';
+  } else if (provider.value === 'linode') {
+    dnsConfig.value.token = '';
+  } else if (provider.value === 'bunny') {
+    dnsConfig.value.accessKey = '';
+  } else if (provider.value === 'dnsimple') {
+    dnsConfig.value.accessToken = '';
+  } else if (provider.value === 'hetzner') {
+    dnsConfig.value.token = '';
+  } else if (provider.value === 'vultr') {
+    dnsConfig.value.token = '';
+  } else if (provider.value === 'desec') {
+    dnsConfig.value.token = '';
+  } else if (provider.value === 'gandi') {
+    dnsConfig.value.token = '';
+    dnsConfig.value.tokenType = '';
+  } else if (provider.value === 'godaddy') {
+    dnsConfig.value.apiKey = '';
+    dnsConfig.value.apiSecret = '';
+  } else if (provider.value === 'cloudflare') {
+    dnsConfig.value.token = '';
+    dnsConfig.value.email = '';
+    dnsConfig.value.tokenType = '';
+    dnsConfig.value.defaultProxyStatus = '';
+  } else if (provider.value === 'namecom') {
+    dnsConfig.value.token = '';
+    dnsConfig.value.username = '';
+  } else if (provider.value === 'namecheap') {
+    dnsConfig.value.token = '';
+    dnsConfig.value.username = '';
+  } else if (provider.value === 'inwx') {
+    dnsConfig.value.username = '';
+    dnsConfig.value.password = '';
+  } else if (provider.value === 'netcup') {
+    dnsConfig.value.customerNumber = '';
+    dnsConfig.value.apiKey = '';
+    dnsConfig.value.apiPassword = '';
+  } else if (provider.value === 'ovh') {
+    dnsConfig.value.endpoint = '';
+    dnsConfig.value.consumerKey = '';
+    dnsConfig.value.appKey = '';
+    dnsConfig.value.appSecret = '';;
+  } else if (provider.value === 'porkbun') {
+    dnsConfig.value.apikey = '';
+    dnsConfig.value.secretapikey = '';
+  }
+}
+
+function onProviderChange() {
+  setDefaultTlsProvider();
+  resetFields();
+}
+
 function onGcdnsFileInputChange(event) {
   const reader = new FileReader();
   reader.onload = function (result) {
@@ -94,72 +157,13 @@ function onGcdnsFileInputChange(event) {
   reader.readAsText(event.target.files[0]);
 }
 
-// TODO clear non related fields based on provider when it changes
-  // if (provider.value === 'route53') {
-  //   config.accessKeyId = dnsConfig.value.accessKeyId;
-  //   config.secretAccessKey = dnsConfig.value.secretAccessKey;
-  // } else if (provider.value === 'gcdns') {
-  //   config.projectId = dnsConfig.value.gcdnsProjectId;
-  //   config.credentials = {
-  //     client_email: dnsConfig.value.gcdnsClientEmail,
-  //     private_key: dnsConfig.value.gcdnsPrivateKey,
-  //   };
-  // } else if (provider.value === 'digitalocean') {
-  //   config.token = dnsConfig.value.digitalOceanToken;
-  // } else if (provider.value === 'linode') {
-  //   config.token = dnsConfig.value.linodeToken;
-  // } else if (provider.value === 'bunny') {
-  //   config.accessKey = dnsConfig.value.bunnyAccessKey;
-  // } else if (provider.value === 'dnsimple') {
-  //   config.accessToken = dnsConfig.value.dnsimpleAccessToken;
-  // } else if (provider.value === 'hetzner') {
-  //   config.token = dnsConfig.value.hetznerToken;
-  // } else if (provider.value === 'vultr') {
-  //   config.token = dnsConfig.value.vultrToken;
-  // } else if (provider.value === 'desec') {
-  //   config.token = dnsConfig.value.deSecToken;
-  // } else if (provider.value === 'gandi') {
-  //   config.token = dnsConfig.value.gandiApiKey;
-  //   config.tokenType = dnsConfig.value.gandiTokenType;
-  // } else if (provider.value === 'godaddy') {
-  //   config.apiKey = dnsConfig.value.godaddyApiKey;
-  //   config.apiSecret = dnsConfig.value.godaddyApiSecret;
-  // } else if (provider.value === 'cloudflare') {
-  //   config.token = dnsConfig.value.cloudflareToken;
-  //   config.email = dnsConfig.value.cloudflareEmail;
-  //   config.tokenType = dnsConfig.value.cloudflareTokenType;
-  //   config.defaultProxyStatus = dnsConfig.value.cloudflareDefaultProxyStatus;
-  // } else if (provider.value === 'namecom') {
-  //   config.token = dnsConfig.value.nameComToken;
-  //   config.username = dnsConfig.value.nameComUsername;
-  // } else if (provider.value === 'namecheap') {
-  //   config.token = dnsConfig.value.namecheapApiKey;
-  //   config.username = dnsConfig.value.namecheapUsername;
-  // } else if (provider.value === 'inwx') {
-  //   config.username = dnsConfig.value.inwxUsername;
-  //   config.password = dnsConfig.value.inwxPassword;
-  // } else if (provider.value === 'netcup') {
-  //   config.customerNumber = dnsConfig.value.netcupCustomerNumber;
-  //   config.apiKey = dnsConfig.value.netcupApiKey;
-  //   config.apiPassword = dnsConfig.value.netcupApiPassword;
-  // } else if (provider.value === 'ovh') {
-  //   config.endpoint = dnsConfig.value.ovhEndpoint;
-  //   config.consumerKey = dnsConfig.value.ovhConsumerKey;
-  //   config.appKey = dnsConfig.value.ovhAppKey;
-  //   config.appSecret = dnsConfig.value.ovhAppSecret;
-  // } else if (provider.value === 'porkbun') {
-  //   config.apikey = dnsConfig.value.porkbunApikey;
-  //   config.secretapikey = dnsConfig.value.porkbunSecretapikey;
-  // }
-
-
 </script>
 
 <template>
   <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>
-      <SingleSelect v-model="provider" @select="setDefaultTlsProvider()" :options="domainProviders" option-key="value" option-label="name" />
+      <SingleSelect v-model="provider" @select="onProviderChange()" :options="domainProviders" option-key="value" option-label="name" />
     </FormGroup>
 
     <!-- Route53 -->
@@ -257,7 +261,7 @@ function onGcdnsFileInputChange(event) {
       <label for="cloudflareTokenTypeInput">{{ $t('domains.domainDialog.cloudflareTokenType') }}</label>
       <SingleSelect v-model="dnsConfig.tokenType" :options="cloudflareTokenTypes" option-key="value" option-label="name" />
     </FormGroup>
-    <FormGroup v-if="provider === 'cloudflare'">
+    <FormGroup v-if="provider === 'cloudflare' && dnsConfig.tokenType === 'GlobalApiKey' || dnsConfig.tokenType === 'ApiToken'">
       <label for="cloudflareTokenInput" v-show="dnsConfig.tokenType === 'GlobalApiKey'">{{ $t('domains.domainDialog.cloudflareTokenTypeGlobalApiKey') }}</label>
       <label for="cloudflareTokenInput" v-show="dnsConfig.tokenType === 'ApiToken'">{{ $t('domains.domainDialog.cloudflareTokenTypeApiToken') }}</label>
       <TextInput id="cloudflareTokenInput" v-model="dnsConfig.token" required />
@@ -267,7 +271,7 @@ function onGcdnsFileInputChange(event) {
       <TextInput id="cloudflareEmailInput" type="email" v-model="dnsConfig.email" :required="dnsConfig.tokenType === 'GlobalApiKey'" />
     </FormGroup>
     <div v-if="provider === 'cloudflare'">
-      <Checkbox v-model="dnsConfig.defaultProxyStatus" :label="$t('domains.domainDialog.cloudflareDefaultProxyStatus')" />
+      <Checkbox v-model="dnsConfig.defaultProxyStatus" :label="$t('domains.domainDialog.cloudflareDefaultProxyStatus')" style="display: inline-flex; margin-top: 10px" />
       <sup><a href="https://docs.cloudron.io/domains/#cloudflare-dns" class="help" target="_blank" tabIndex="-1"><i class="fa fa-question-circle"></i></a></sup>
     </div>
 
@@ -326,7 +330,7 @@ function onGcdnsFileInputChange(event) {
       <label for="namecheapApiKeyInput">{{ $t('domains.domainDialog.namecheapApiKey') }}</label>
       <TextInput id="namecheapApiKeyInput" v-model="dnsConfig.token" required />
     </FormGroup>
-    <p class="small text-info text-bold" v-if="provider === 'namecheap'" v-html="$t('domains.domainDialog.namecheapInfo')"></p>
+    <div class="warning-label" v-if="provider === 'namecheap'" v-html="$t('domains.domainDialog.namecheapInfo')"></div>
 
     <!-- INWX -->
     <FormGroup v-if="provider === 'inwx'">
@@ -343,9 +347,9 @@ function onGcdnsFileInputChange(event) {
       <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>
+    <div class="warning-label" v-show="provider === 'wildcard'" v-html="$t('domains.domainDialog.wildcardInfo', { domain: domain })"></div>
+    <div class="warning-label" v-show="provider === 'manual'" v-html="$t('domains.domainDialog.manualInfo')"></div>
+    <div class="warning-label" v-show="needsPort80(provider, tlsProvider)" v-html="$t('domains.domainDialog.letsEncryptInfo')"></div>
 
   </div>
 </template>
\ No newline at end of file