diff --git a/dashboard/src/views/BackupListView.vue b/dashboard/src/views/BackupListView.vue
index 689b3e9b6..b9bf30728 100644
--- a/dashboard/src/views/BackupListView.vue
+++ b/dashboard/src/views/BackupListView.vue
@@ -358,7 +358,7 @@ onMounted(async () => {
       </Dialog>
 
       <template #header-buttons>
-        <Button v-if="sites.length === 1" @click="onBackup(sites[0].id)" :loading="backupBusy" :disabled="backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
+        <Button v-if="sites.length <= 1" @click="onBackup(sites[0].id)" :loading="backupBusy" :disabled="sites.length || backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
         <Button v-else :menu="sitesMenu" :loading="backupBusy" :disabled="backupBusy">{{ $t('backups.listing.backupNow') }}</Button>
         <Button tool secondary :menu="taskLogsMenu" :disabled="!taskLogsMenu.length">{{ $t('main.action.logs') }}</Button>
       </template>
diff --git a/dashboard/src/views/BackupSitesView.vue b/dashboard/src/views/BackupSitesView.vue
index 5755d0b0b..444503751 100644
--- a/dashboard/src/views/BackupSitesView.vue
+++ b/dashboard/src/views/BackupSitesView.vue
@@ -228,18 +228,19 @@ onMounted(async () => {
       <div>
         <ProgressBar mode="indeterminate" v-if="busy" slim :show-label="false" />
         <div class="backup-site" v-for="site in sites" :key="site.id">
-          <div style="display: flex; align-items: center; gap: 10px">
+          <div style="display: flex; align-items: center;">
             <StateLED :busy="site.status.busy" :state="site.status.state"/>
-            <div class="backup-site-details">
-              <div><b style="font-size: 16px">{{ site.name }}</b><i v-if="site.primary" style="padding-left: 5px" class="fa-solid fa-star"></i></div>
-              <div>
-                {{ $t('backups.configureBackupStorage.provider') }}: <b>{{ site.provider }}</b> - {{ $t('backups.configureBackupStorage.format') }}: <b>{{ site.format }}</b> <i v-if="site.encrypted" class="fa-solid fa-lock"></i></div>
-              <div class="backup-site-task">
-                <div v-if="site.task && site.task.success">Last backup: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
-                <div v-if="site.task && site.task.error">Error: <b>{{ site.task.error }}</b></div>
-                <div v-else-if="site.task && site.task.running">
-                  <ProgressBar :value="site.task.percent" /> {{ site.task.message }}
-                </div>
+          </div>
+          <div class="backup-site-details">
+            <div><b style="font-size: 16px">{{ site.name }}</b><i v-if="site.primary" style="padding-left: 5px" class="fa-solid fa-star"></i></div>
+            <div>
+              {{ $t('backups.configureBackupStorage.provider') }}: <b>{{ site.provider }}</b> - {{ $t('backups.configureBackupStorage.format') }}: <b>{{ site.format }}</b> <i v-if="site.encrypted" class="fa-solid fa-lock"></i></div>
+            <div class="backup-site-task">
+              <div v-if="site.task && site.task.success">Last backup: <b>{{ prettyLongDate(site.task.ts) }}</b></div>
+              <div v-if="site.task && site.task.error">Error: <b>{{ site.task.error }}</b></div>
+              <div v-if="site.task && site.task.running">
+                <ProgressBar :busy="true" :show-label="false" :value="site.task.percent" :mode="site.task.percent <= 0 ? 'indeterminate' : null" />
+                <div style="margin-top: 3px; max-width: 100%; text-overflow: ellipsis; white-space: nowrap;">{{ site.task.percent }}% {{ site.task.message }}</div>
               </div>
             </div>
           </div>
@@ -258,6 +259,7 @@ onMounted(async () => {
   display: flex;
   border-radius: var(--pankow-border-radius);
   padding: 10px;
+  gap: 10px;
   margin-bottom: 10px;
   justify-content: space-between;
 }
@@ -270,6 +272,8 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  flex-grow: 1;
+  overflow: hidden;
 }
 
 .backup-site-action {