diff --git a/dashboard/src/components/app/Backups.vue b/dashboard/src/components/app/Backups.vue
index 0031c331e..c2002ffd6 100644
--- a/dashboard/src/components/app/Backups.vue
+++ b/dashboard/src/components/app/Backups.vue
@@ -114,7 +114,8 @@ const taskLogsMenu = ref([]);
 const lastTask = ref({});
 const startBackupBusy = ref(false);
 const stopBackupBusy = ref(false);
-let backupSites = [];
+const backupSitesMenu = ref([]);
+const backupSites = ref([]);
 
 async function onChangeAutoBackups(value) {
   const [error] = await appsModel.configure(props.app.id, 'automatic_backup', { enable: value });
@@ -162,10 +163,10 @@ async function refreshTasks() {
   if (lastTask.value.active) waitForTask();
 }
 
-async function onStartBackup() {
+async function onStartBackup(backupSiteId) {
   startBackupBusy.value = true;
 
-  const [error] = await appsModel.backup(props.app.id);
+  const [error] = await appsModel.backup(props.app.id, backupSiteId);
   if (error) return console.error(error);
 
   await refreshTasks();
@@ -270,7 +271,7 @@ async function refreshBackupList() {
   if (error) return console.error(error);
 
   result.forEach(backup => {
-    backup.site = backupSites.find(t => t.id === backup.siteId);
+    backup.site = backupSites.value.find(t => t.id === backup.siteId);
   });
   backups.value = result;
 }
@@ -281,7 +282,13 @@ onMounted(async () => {
   const [error, result] = await backupSitesModel.list();
   if (error) return console.error(error);
 
-  backupSites = result;
+  backupSites.value = result;
+  backupSitesMenu.value = result.map(site => {
+    return {
+      label: site.name,
+      action: onStartBackup.bind(null, site.id),
+    };
+  });
 
   await refreshBackupList();
   await refreshTasks();
@@ -414,14 +421,17 @@ onMounted(async () => {
     <br/>
 
     <div v-if="lastTask.active">
-      <ProgressBar :value="lastTask.percent" :busy="true" />
+      <ProgressBar :value="lastTask.percent" :show-label="false" :busy="true" :mode="lastTask.percent <= 0 ? 'indeterminate' : ''"/>
       <div>{{ lastTask.message }}</div>
       <br/>
     </div>
 
     <div class="button-bar">
       <Button danger @click="onStopBackup()" v-if="lastTask.active" :loading="stopBackupBusy" :disabled="stopBackupBusy">{{ $t('backups.listing.stopTask') }}</Button>
-      <Button @click="onStartBackup()" v-else :loading="startBackupBusy" :disabled="app.runState === RSTATES.STOPPED || startBackupBusy || !!app.error">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+      <div v-else>
+        <Button v-if="backupSites.length <= 1" @click="onStartBackup(backupSites[0].id)" :loading="startBackupBusy" :disabled="!backupSites.length || app.runState === RSTATES.STOPPED || startBackupBusy || !!app.error">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+        <Button v-else :menu="backupSitesMenu" :loading="startBackupBusy" :disabled="app.runState === RSTATES.STOPPED || startBackupBusy || !!app.error">{{ $t('app.backups.backups.createBackupAction') }}</Button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/dashboard/src/models/AppsModel.js b/dashboard/src/models/AppsModel.js
index 6bb15820b..02b2e6a81 100644
--- a/dashboard/src/models/AppsModel.js
+++ b/dashboard/src/models/AppsModel.js
@@ -356,10 +356,10 @@ function create() {
       if (result.status !== 200) return [result];
       return [null, result.body.backups];
     },
-    async backup(id) {
+    async backup(id, backupSiteId) {
       let result;
       try {
-        result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${id}/backup`, {}, { access_token: accessToken });
+        result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${id}/backup`, { backupSiteId }, { access_token: accessToken });
       } catch (e) {
         return [e];
       }