diff --git a/dashboard/src/components/DomainDialog.vue b/dashboard/src/components/DomainDialog.vue
index 5ff18ca64..54f5b4a49 100644
--- a/dashboard/src/components/DomainDialog.vue
+++ b/dashboard/src/components/DomainDialog.vue
@@ -1,7 +1,8 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, TextInput, FormGroup, Checkbox } from '@cloudron/pankow';
+import { Dialog, TextInput, InputGroup, FormGroup, Checkbox, Button } from '@cloudron/pankow';
+import { getTextFromFile } from '../utils.js';
 import DomainsModel from '../models/DomainsModel.js';
 import DomainProviderForm from './DomainProviderForm.vue';
 
@@ -10,6 +11,8 @@ const emit = defineEmits([ 'success' ]);
 const domainsModel = DomainsModel.create();
 
 const dialog = useTemplateRef('dialog');
+const keyFileInput = useTemplateRef('keyFileInput');
+const certificateFileInput = useTemplateRef('certificateFileInput');
 
 const busy = ref(false);
 const errorMessage = ref('');
@@ -20,6 +23,8 @@ const provider = ref('');
 const tlsProvider = ref('letsencrypt-prod-wildcard');
 const showAdvanced = ref(false);
 const customNameservers = ref(false);
+const certificateFileName = ref('');
+const keyFileName = ref('');
 
 const dnsConfig = ref(DomainsModel.createEmptyConfig());
 
@@ -49,8 +54,27 @@ async function onSubmit() {
     tlsConfig.wildcard = true;
   }
 
+  let fallbackCertificate = null;
+  if (tlsConfig.provider === 'fallback') {
+    const certFile = certificateFileInput.value.files[0] || null;
+    const keyFile = keyFileInput.value.files[0] ||  null;
+
+    if ((!certFile && keyFile) || (certFile && !keyFile)) {
+      errorMessage.value = 'Both certificate and key file need to be provided';
+      busy.value = false;
+      return;
+    } else if (certFile && keyFile) {
+      fallbackCertificate = {
+        cert: await getTextFromFile(certFile),
+        key: await getTextFromFile(keyFile),
+      };
+    } else {
+      // unchanged
+    }
+  }
+
   const func = editing.value ? domainsModel.update : domainsModel.add;
-  const [error] = await func(domain.value, zoneName.value, provider.value, config, null, tlsConfig);
+  const [error] = await func(domain.value, zoneName.value, provider.value, config, fallbackCertificate, tlsConfig);
   if (error) {
     errorMessage.value = error.body ? error.body.message : 'Internal error';
     busy.value = false;
@@ -61,6 +85,20 @@ async function onSubmit() {
   dialog.value.close();
 }
 
+function onCertificateFileChange() {
+  const file = certificateFileInput.value.files[0] || '';
+  if (!file) return;
+
+  certificateFileName.value = file ? file.name : '';
+}
+
+function onKeyFileChange() {
+  const file = keyFileInput.value.files[0] || '';
+  if (!file) return;
+
+  keyFileName.value = file ? file.name : '';
+}
+
 defineExpose({
   open(d) {
     d = d ? JSON.parse(JSON.stringify(d)) : { config: {}, tlsConfig: { provider: 'letsencrypt-prod', wildcard: true } }; // make a copy
@@ -79,8 +117,9 @@ defineExpose({
     editing.value = !!d.domain;
     domain.value = d.domain || '';
     zoneName.value = d.zoneName || '';
-
     customNameservers.value = d.config.customNameservers;
+    certificateFileName.value = d.tlsConfig?.provider === 'fallback' ? String.fromCharCode(0x25CF).repeat(8) : '';
+    keyFileName.value = d.tlsConfig?.provider === 'fallback' ? String.fromCharCode(0x25CF).repeat(8) : '';
 
     dialog.value.open();
 
@@ -119,24 +158,27 @@ defineExpose({
 
           <!-- custom certificate -->
           <div v-if="tlsProvider === 'fallback'">
-            <label >{{ $t('domains.domainDialog.fallbackCertCustomCert') }}</label>
+            <label>{{ $t('domains.domainDialog.fallbackCertCustomCert') }}</label>
             <p v-html="$t('domains.domainDialog.fallbackCertCustomCertInfo', { customCertLink: 'https://docs.cloudron.io/certificates/#custom-certificates' })"></p>
           </div>
 
-          <FormGroup v-if="tlsProvider === 'fallback'">
-            <div class="input-group">
-              <input type="file" id="fallbackCertFileInput" style="display:none"/>
-              <input type="text" class="form-control" :placeholder="$t('domains.domainDialog.fallbackCertCertificatePlaceholder')" ng-model="domainConfigure.fallbackCert.certificateFileName" name="cert" onclick="getElementById('fallbackCertFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy">
-              <span class="input-group-addon"><i class="fa fa-upload" onclick="getElementById('fallbackCertFileInput').click();"></i></span>
+          <div v-if="tlsProvider === 'fallback'">
+            <input type="file" ref="certificateFileInput" style="display: none" @change="onCertificateFileChange"/>
+            <input type="file" ref="keyFileInput" style="display: none" @change="onKeyFileChange"/>
+
+            <div style="display: grid; grid-template-columns: auto 1fr; gap: 5px 10px">
+              <label>{{ $t('domains.domainDialog.fallbackCertCertificatePlaceholder') }}</label>
+              <InputGroup>
+                <TextInput v-model="certificateFileName" @click="certificateFileInput.click()" style="cursor: pointer; flex-grow: 1;" :disabled="busy" />
+                <Button tool secondary icon="fa-solid fa-upload" @click="certificateFileInput.click()"></Button>
+              </InputGroup>
+              <label>{{ $t('domains.domainDialog.fallbackCertKeyPlaceholder') }}</label>
+              <InputGroup>
+                <TextInput v-model="keyFileName" @click="keyFileInput.click()" style="cursor: pointer; flex-grow: 1;" :disabled="busy" />
+                <Button tool secondary icon="fa-solid fa-upload" @click="keyFileInput.click()"></Button>
+              </InputGroup>
             </div>
-          </FormGroup>
-          <FormGroup v-if="tlsProvider === 'fallback'">
-            <div class="input-group">
-              <input type="file" id="fallbackKeyFileInput" style="display:none"/>
-              <input type="text" class="form-control" :placeholder="$t('domains.domainDialog.fallbackCertKeyPlaceholder')" ng-model="domainConfigure.fallbackCert.keyFileName" id="fallbackKeyInput" name="key" onclick="getElementById('fallbackKeyFileInput').click();" style="cursor: pointer;" ng-disabled="domainConfigure.busy">
-              <span class="input-group-addon"><i class="fa fa-upload" onclick="getElementById('fallbackKeyFileInput').click();"></i></span>
-            </div>
-          </FormGroup>
+          </div>
         </div>
 
         <div v-if="!showAdvanced" style="margin-top: 15px" class="actionable" @click="showAdvanced = true">{{ $t('domains.domainDialog.advancedAction') }}</div>
diff --git a/dashboard/src/utils.js b/dashboard/src/utils.js
index d83327c4c..1083e49d1 100644
--- a/dashboard/src/utils.js
+++ b/dashboard/src/utils.js
@@ -648,6 +648,15 @@ function getDataURLFromFile(file) {
   });
 }
 
+function getTextFromFile(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => resolve(e.target.result);
+    reader.onerror = (e) => reject(e);
+    reader.readAsText(file);
+  });
+}
+
 // values correspond to cron days
 const cronDays = [
   { id: 0, name: 'Sunday' },
@@ -675,6 +684,7 @@ export {
   redirectIfNeeded,
   stripSsoInfo,
   getDataURLFromFile,
+  getTextFromFile,
   cronDays,
   cronHours
 };
@@ -692,6 +702,7 @@ export default {
   redirectIfNeeded,
   stripSsoInfo,
   getDataURLFromFile,
+  getTextFromFile,
   cronDays,
   cronHours
 };