diff --git a/dashboard/src/components/NewBackupTargetDialog.vue b/dashboard/src/components/NewBackupTargetDialog.vue
index e34f09385..e05351528 100644
--- a/dashboard/src/components/NewBackupTargetDialog.vue
+++ b/dashboard/src/components/NewBackupTargetDialog.vue
@@ -211,6 +211,10 @@ async function getMemory() {
   maxMemoryLimit.value = Math.ceil(result.memory / (1024*1024*1024)) * 1024 * 1024 * 1024;
 }
 
+function onCancel() {
+  dialog.value.close();
+}
+
 defineExpose({
   async open() {
     step.value = 'storage';
@@ -311,7 +315,7 @@ defineExpose({
               <Checkbox v-if="provider !== 'noop'" v-model="useEncryption" label="Use backup encryption"/>
 
               <div style="display: flex; gap: 6px; align-items: end;">
-                <Button secondary :disabled="busy">{{ $t('main.dialog.cancel') }}</Button>
+                <Button secondary :disabled="busy" @click="onCancel()">{{ $t('main.dialog.cancel') }}</Button>
                 <!-- TODO translation -->
                 <Button primary :disabled="busy" :loading="busy" @click="onSubmit()">{{ useEncryption ? 'Next' : $t('main.dialog.save') }}</Button>
               </div>
@@ -344,7 +348,7 @@ defineExpose({
             </FormGroup>
             <Checkbox v-if="format === 'rsync'" v-model="encryptedFilenames" :label="$t('backups.configureBackupStorage.encryptFilenames')"/>
             <div style="display: flex; gap: 6px; align-items: end; justify-content: end; margin-top: 10px;">
-              <Button secondary :disabled="busy">{{ $t('main.dialog.cancel') }}</Button>
+              <Button secondary :disabled="busy" @click="onCancel()">{{ $t('main.dialog.cancel') }}</Button>
               <Button primary :disabled="busy || !isSetupEncryptionFormValid()" :loading="busy" @click="onSetupEncryption()">{{ $t('main.dialog.save') }}</Button>
             </div>
           </fieldset>