diff --git a/nextcloud_backup/frontend/src/components/statusBar/BackupStatus.vue b/nextcloud_backup/frontend/src/components/statusBar/BackupStatus.vue
index f6e2451..b1602c5 100644
--- a/nextcloud_backup/frontend/src/components/statusBar/BackupStatus.vue
+++ b/nextcloud_backup/frontend/src/components/statusBar/BackupStatus.vue
@@ -43,7 +43,7 @@
             </v-tooltip>
           </div>
         </v-col>
-        <v-divider vertical class="border-opacity-25 mt-n1"></v-divider>
+        <v-divider vertical :class="dividerClass"></v-divider>
         <v-col xl="6" lg="12" sm="6" cols="12">
           <div class="h-100 d-flex align-center">
             <span class="me-auto">Next</span>
@@ -119,6 +119,10 @@ const nextBackupProps = computed(() => {
   } 
 });
 
+const dividerClass = computed(() => {
+  return `border-opacity-25 ${props.status?.status != States.IDLE ? "mt-n1" : "my-n1"  } d-xl-inline-flex d-sm-inline-flex d-lg-none d-none`
+})
+
 const indeterminate = computed(()=> {
   return props.status?.progress == -1 && props.status.status != States.IDLE
 })
diff --git a/nextcloud_backup/frontend/src/components/statusBar/ConnectionStatus.vue b/nextcloud_backup/frontend/src/components/statusBar/ConnectionStatus.vue
index 4073930..54c8449 100644
--- a/nextcloud_backup/frontend/src/components/statusBar/ConnectionStatus.vue
+++ b/nextcloud_backup/frontend/src/components/statusBar/ConnectionStatus.vue
@@ -31,7 +31,7 @@
             </v-tooltip>
           </div>
         </v-col>
-        <v-divider vertical class="border-opacity-25 my-n1"></v-divider>
+        <v-divider vertical class="border-opacity-25 my-n1 d-xl-inline-flex d-sm-inline-flex d-lg-none d-none"></v-divider>
         <v-col xl="6" lg="12" sm="6" cols="12">
           <div class="h-100 d-flex align-center">
             <span class="me-auto">Cloud</span>