diff --git a/dashboard/src/components/app/Backups.vue b/dashboard/src/components/app/Backups.vue
index cdbf01e61..108f70ab3 100644
--- a/dashboard/src/components/app/Backups.vue
+++ b/dashboard/src/components/app/Backups.vue
@@ -397,6 +397,22 @@ onMounted(async () => {
 
     <div class="error-label" v-if="errorMessage">{{ errorMessage }}</div>
 
+    <div v-if="lastTask.active">
+      <div style="margin-top: 10px; display: flex; align-items: center; gap: 10px; overflow: hidden;">
+        <div style="flex-grow: 1; overflow: hidden;">
+          <ProgressBar :value="lastTask.percent" :show-label="false" :busy="true" :mode="lastTask.percent <= 0 ? 'indeterminate' : ''"/>
+          <a :href="`/logs.html?taskId=${lastTask.id}`" target="_blank" style="display: block; margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ lastTask.percent }}% {{ lastTask.message }}</a>
+        </div>
+        <Button danger plain tool icon="fa-solid fa-xmark" @click="onStopBackup()" :loading="stopBackupBusy" :disabled="stopBackupBusy"></Button>
+      </div>
+    </div>
+    <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>
+
+    <br/>
+
     <TableView :model="backups" :columns="columns" :busy="busy" :placeholder="$t('backups.listing.noBackups')" style="max-height: 400px;" >
       <template #preserveSecs="backup">
         <Icon icon="fa-solid fa-archive" v-show="backup.preserveSecs === -1" />
@@ -416,19 +432,5 @@ onMounted(async () => {
         </div>
       </template>
     </TableView>
-
-    <div v-if="lastTask.active">
-      <div style="margin-top: 10px; display: flex; align-items: center; gap: 10px; overflow: hidden;">
-        <div style="flex-grow: 1; overflow: hidden;">
-          <ProgressBar :value="lastTask.percent" :show-label="false" :busy="true" :mode="lastTask.percent <= 0 ? 'indeterminate' : ''"/>
-          <a :href="`/logs.html?taskId=${lastTask.id}`" target="_blank" style="display: block; margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{ lastTask.percent }}% {{ lastTask.message }}</a>
-        </div>
-        <Button danger plain tool icon="fa-solid fa-xmark" @click="onStopBackup()" :loading="stopBackupBusy" :disabled="stopBackupBusy"></Button>
-      </div>
-    </div>
-    <div v-else class="button-bar">
-      <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>
 </template>