diff --git a/app/src/config/repos.ts b/app/src/config/repos.ts
index 4178262fd..d486d0225 100644
--- a/app/src/config/repos.ts
+++ b/app/src/config/repos.ts
@@ -369,7 +369,7 @@ ${passwordHTML}
     <span class="fn__space"></span>
     <input type="checkbox" id="useDataRepo"${window.siyuan.config.sync.useDataRepo ? " checked='checked'" : ""} class="b3-switch fn__flex-center">
 </label>
-<div class="b3-label">
+<div class="b3-label${window.siyuan.config.sync.useDataRepo ? " fn__none" : ""}">
     <div class="fn__flex">
         <div class="fn__flex-center">${window.siyuan.languages.cloudSync}</div>
         <div class="fn__flex-1"></div>
@@ -379,7 +379,7 @@ ${passwordHTML}
     </div>
     <div id="reposCloudSyncList" class="fn__none config-repos__sync"><img style="margin: 0 auto;display: block;" src="/stage/loading-pure.svg"></div>
 </div>
-<div id="reposBackup" class="b3-label">${window.siyuan.languages.cloudBackup}</div>
+<div id="reposBackup" class="b3-label${window.siyuan.config.sync.useDataRepo ? " fn__none" : ""}">${window.siyuan.languages.cloudBackup}</div>
 </div>`;
     },
     bindEvent: () => {
@@ -425,6 +425,14 @@ ${passwordHTML}
                     useDataRepoElement.checked = false;
                 } else {
                     window.siyuan.config.sync.useDataRepo = useDataRepoElement.checked;
+                    const reposBackupElement = repos.element.querySelector("#reposBackup") as HTMLElement;
+                    if (useDataRepoElement.checked) {
+                        reposBackupElement.previousElementSibling.classList.add("fn__none")
+                        reposBackupElement.classList.add("fn__none");
+                    } else {
+                        reposBackupElement.previousElementSibling.classList.remove("fn__none")
+                        reposBackupElement.classList.remove("fn__none");
+                    }
                 }
             });
         });