diff --git a/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoBackup.vue b/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoBackup.vue
index 9be64d8..9f39032 100644
--- a/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoBackup.vue
+++ b/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoBackup.vue
@@ -25,7 +25,7 @@
             <template v-slot:default="{ expanded }">
               {{ CronModeFriendly[cron.mode] }}
               <v-spacer></v-spacer>
-              <v-fade-transition leave-absolute>
+              <v-fade-transition>
                 <v-chip
                   v-if="!expanded && cron.monthDay != undefined"
                   append-icon="mdi-calendar"
@@ -34,7 +34,7 @@
                   {{ cron.monthDay }}
                 </v-chip>
               </v-fade-transition>
-              <v-fade-transition leave-absolute>
+              <v-fade-transition>
                 <v-chip
                   v-if="!expanded && cron.weekday != undefined"
                   append-icon="mdi-calendar"
@@ -44,7 +44,7 @@
                   {{ weekdayFriendly[cron.weekday] }}
                 </v-chip>
               </v-fade-transition>
-              <v-fade-transition leave-absolute>
+              <v-fade-transition>
                 <v-chip
                   v-if="!expanded && cron.hour"
                   append-icon="mdi-clock"
@@ -54,7 +54,7 @@
                   {{ cron.hour }}
                 </v-chip>
               </v-fade-transition>
-              <v-fade-transition leave-absolute>
+              <v-fade-transition>
                 <v-chip
                   v-if="!expanded && cron.custom"
                   append-icon="mdi-clock-edit"
@@ -163,6 +163,12 @@
             </v-row>
           </v-expansion-panel-text>
         </v-expansion-panel>
+        <div
+          v-if="data.cron?.length == 0"
+          class="my-3 text-subtitle-2 text-medium-emphasis"
+        >
+          No auto backup configured
+        </div>
       </v-expansion-panels>
     </v-card-text>
   </v-card>
diff --git a/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoClean.vue b/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoClean.vue
new file mode 100644
index 0000000..484c067
--- /dev/null
+++ b/nextcloud_backup/frontend/src/components/settings/BackupConfig/BackupConfigAutoClean.vue
@@ -0,0 +1,85 @@
+<template>
+  <v-card variant="elevated" elevation="7">
+    <v-card-title class="bg-light-blue-darken-4 text-center">
+      Auto Clean
+    </v-card-title>
+    <v-card-text>
+      <v-row class="mt-0" v-if="!loading">
+        <v-col class="" cols="12" md="6">
+          <v-row dense>
+            <v-col>
+              <v-switch
+                label="Auto clean Home Assistant Backups"
+                v-model="data.autoClean.homeAssistant.enabled"
+                hide-details="auto"
+                density="compact"
+                inset
+                :loading="loading"
+                color="orange"
+              ></v-switch>
+            </v-col>
+          </v-row>
+          <v-fade-transition>
+            <v-row dense v-if="data.autoClean.homeAssistant.enabled">
+              <v-col>
+                <div class="text-subtitle-1 text-medium-emphasis">
+                  Number of backup to keep
+                </div>
+                <v-text-field
+                  v-model="data.autoClean.homeAssistant.nbrToKeep"
+                  type="number"
+                  hide-details="auto"
+                  density="compact"
+                  variant="outlined"
+                  color="orange"
+                  min="1"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-fade-transition>
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-row dense>
+            <v-col>
+              <v-switch
+                label="Auto clean Cloud Backups"
+                v-model="data.autoClean.webdav.enabled"
+                hide-details="auto"
+                density="compact"
+                inset
+                :loading="loading"
+                color="orange"
+              ></v-switch>
+            </v-col>
+          </v-row>
+          <v-fade-transition>
+            <v-row dense v-if="data.autoClean.webdav.enabled">
+              <v-col>
+                <div class="text-subtitle-1 text-medium-emphasis">
+                  Number of backup to keep
+                </div>
+                <v-text-field
+                  v-model="data.autoClean.webdav.nbrToKeep"
+                  type="number"
+                  hide-details="auto"
+                  density="compact"
+                  variant="outlined"
+                  color="orange"
+                  min="1"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </v-fade-transition>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+<script setup lang="ts">
+import { useBackupConfigStore } from "@/stores/backupConfig";
+import { storeToRefs } from "pinia";
+
+defineProps<{ loading: boolean }>();
+const backupConfigStore = useBackupConfigStore();
+const { data } = storeToRefs(backupConfigStore);
+</script>
diff --git a/nextcloud_backup/frontend/src/components/settings/BackupConfigForm.vue b/nextcloud_backup/frontend/src/components/settings/BackupConfigForm.vue
index 768c7c0..7bc226d 100644
--- a/nextcloud_backup/frontend/src/components/settings/BackupConfigForm.vue
+++ b/nextcloud_backup/frontend/src/components/settings/BackupConfigForm.vue
@@ -45,11 +45,16 @@
         </v-sheet>
       </v-col>
     </v-row>
-    <v-row>
+    <v-row dense>
       <v-col>
         <BackupConfigAutoBackup :loading="loading"></BackupConfigAutoBackup>
       </v-col>
     </v-row>
+    <v-row dense>
+      <v-col>
+        <BackupConfigAutoClean :loading="loading"></BackupConfigAutoClean>
+      </v-col>
+    </v-row>
   </v-form>
 </template>
 <script setup lang="ts">
@@ -62,6 +67,7 @@ import { storeToRefs } from "pinia";
 import BackupConfigAddon from "./BackupConfig/BackupConfigAddon.vue";
 import BackupConfigAutoBackup from "./BackupConfig/BackupConfigAutoBackup.vue";
 import BackupConfigFolder from "./BackupConfig/BackupConfigFolder.vue";
+import BackupConfigAutoClean from "./BackupConfig/BackupConfigAutoClean.vue";
 
 const backupConfigStore = useBackupConfigStore();
 const { data } = storeToRefs(backupConfigStore);
diff --git a/nextcloud_backup/frontend/src/services/configService.ts b/nextcloud_backup/frontend/src/services/configService.ts
index b81598f..72b13b6 100644
--- a/nextcloud_backup/frontend/src/services/configService.ts
+++ b/nextcloud_backup/frontend/src/services/configService.ts
@@ -21,7 +21,17 @@ export function getBackupConfig() {
 export function saveBackupConfig(config: BackupConfig) {
   return kyClient
     .put("config/backup", {
-      json: config,
+      json: cleanupConfig(config),
     })
     .json();
 }
+
+function cleanupConfig(config: BackupConfig) {
+  if (!config.autoClean.homeAssistant.enabled) {
+    config.autoClean.homeAssistant.nbrToKeep = undefined;
+  }
+  if (!config.autoClean.webdav.enabled) {
+    config.autoClean.webdav.nbrToKeep = undefined;
+  }
+  return config;
+}