diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss
index bb8e3b410..16240ae47 100644
--- a/app/src/assets/scss/business/_config.scss
+++ b/app/src/assets/scss/business/_config.scss
@@ -49,15 +49,6 @@
     }
   }
 
-  &-repos__sync {
-    margin: 0 0 -16px 16px;
-    overflow: hidden;
-    max-height: 180px;
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 16px;
-  }
-
   &-account {
     height: 100%;
 
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 886959432..96fd74d40 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -188,15 +188,6 @@
     }
   }
 
-  .config-repos__sync {
-    margin: 0 auto -16px;
-    overflow: hidden;
-    max-height: 180px;
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 16px;
-  }
-
   .config-account {
     &__bg {
       position: relative;
diff --git a/app/src/config/repos.ts b/app/src/config/repos.ts
index de50929c6..192a4fab0 100644
--- a/app/src/config/repos.ts
+++ b/app/src/config/repos.ts
@@ -162,7 +162,7 @@ const bindProviderEvent = () => {
     <div class="fn__flex-1">
         ${window.siyuan.languages.cloudStorage}
         <div class="fn__hr"></div>
-        <ul class="b3-list">
+        <ul class="b3-list" style="margin-left: 12px">
             <li class="b3-list-item" style="cursor: auto;">${window.siyuan.languages.sync}<span class="b3-list-item__meta">${response.data.sync ? response.data.sync.hSize : "0B"}</span></li>
             <li class="b3-list-item" style="cursor: auto;">${window.siyuan.languages.backup}<span class="b3-list-item__meta">${response.data.backup ? response.data.backup.hSize : "0B"}</span></li>
             <li class="b3-list-item" style="cursor: auto;"><a href="${getCloudURL("settings/file?type=3")}" target="_blank">${window.siyuan.languages.cdn}</a><span class="b3-list-item__meta">${response.data.hAssetSize}</span></li>
@@ -174,7 +174,7 @@ const bindProviderEvent = () => {
     <div class="fn__flex-1">
         ${window.siyuan.languages.trafficStat}
         <div class="fn__hr"></div>
-        <ul class="b3-list">
+        <ul class="b3-list" style="margin-left: 12px">
             <li class="b3-list-item" style="cursor: auto;">${window.siyuan.languages.upload}<span class="fn__space"></span><span class="ft__on-surface">${response.data.hTrafficUploadSize}</span></li>
             <li class="b3-list-item" style="cursor: auto;">${window.siyuan.languages.download}<span class="fn__space"></span><span class="ft__on-surface">${response.data.hTrafficDownloadSize}</span></li>
             <li class="b3-list-item" style="cursor: auto;">API GET<span class="fn__space"></span><span class="ft__on-surface">${response.data.hTrafficAPIGet}</span></li>
@@ -296,26 +296,28 @@ export const repos = {
     <span class="fn__space"></span>
     <input type="checkbox" id="generateConflictDoc"${window.siyuan.config.sync.generateConflictDoc ? " checked='checked'" : ""} class="b3-switch fn__flex-center">
 </label>
-<label class="fn__flex b3-label config__item">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.syncMode}
-        <div class="b3-label__text">${window.siyuan.languages.syncModeTip}</div>
+<div class="b3-label">
+    <div class="fn__flex config__item">
+        <div class="fn__flex-1">
+            ${window.siyuan.languages.syncMode}
+            <div class="b3-label__text">${window.siyuan.languages.syncModeTip}</div>
+        </div>
+        <span class="fn__space"></span>
+        <select id="syncMode" class="b3-select fn__flex-center fn__size200">
+            <option value="1" ${window.siyuan.config.sync.mode === 1 ? "selected" : ""}>${window.siyuan.languages.syncMode1}</option>
+            <option value="2" ${window.siyuan.config.sync.mode === 2 ? "selected" : ""}>${window.siyuan.languages.syncMode2}</option>
+            <option value="3" ${window.siyuan.config.sync.mode === 3 ? "selected" : ""}>${window.siyuan.languages.syncMode3}</option>
+        </select>
     </div>
-    <span class="fn__space"></span>
-    <select id="syncMode" class="b3-select fn__flex-center fn__size200">
-        <option value="1" ${window.siyuan.config.sync.mode === 1 ? "selected" : ""}>${window.siyuan.languages.syncMode1}</option>
-        <option value="2" ${window.siyuan.config.sync.mode === 2 ? "selected" : ""}>${window.siyuan.languages.syncMode2}</option>
-        <option value="3" ${window.siyuan.config.sync.mode === 3 ? "selected" : ""}>${window.siyuan.languages.syncMode3}</option>
-    </select>
-</label>
-<label class="fn__flex b3-label${(window.siyuan.config.sync.mode !== 1 || window.siyuan.config.system.container === "docker") ? " fn__none" : ""}">
-    <div class="fn__flex-1">
-        ${window.siyuan.languages.syncPerception}
-        <div class="b3-label__text">${window.siyuan.languages.syncPerceptionTip}</div>
-    </div>
-    <span class="fn__space"></span>
-    <input type="checkbox" id="syncPerception"${window.siyuan.config.sync.perception ? " checked='checked'" : ""} class="b3-switch fn__flex-center">
-</label>
+    <label class="fn__flex b3-label${(window.siyuan.config.sync.mode !== 1 || window.siyuan.config.system.container === "docker" || window.siyuan.config.sync.provider !== 0) ? " fn__none" : ""}">
+        <div class="fn__flex-1">
+            ${window.siyuan.languages.syncPerception}
+            <div class="b3-label__text">${window.siyuan.languages.syncPerceptionTip}</div>
+        </div>
+        <span class="fn__space"></span>
+        <input type="checkbox" id="syncPerception"${window.siyuan.config.sync.perception ? " checked='checked'" : ""} class="b3-switch fn__flex-center">
+    </label>
+</div>
 <div class="b3-label">
     <label class="fn__flex config__item">
         <div class="fn__flex-center">${window.siyuan.languages.cloudSyncDir}</div>
@@ -324,7 +326,7 @@ export const repos = {
             <svg><use xlink:href="#iconSettings"></use></svg>${window.siyuan.languages.config}
         </button>
     </label>
-    <div id="reposCloudSyncList" class="fn__none config-repos__sync"><img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg"></div>
+    <div id="reposCloudSyncList" class="fn__none b3-label"><img style="margin: 0 auto;display: block;width: 64px;height: 100%" src="/stage/loading-pure.svg"></div>
 </div>
 <div class="b3-label fn__flex">
     <div class="fn__flex-center">${window.siyuan.languages.cloudBackup}</div>
@@ -362,7 +364,7 @@ export const repos = {
         const syncModeElement = repos.element.querySelector("#syncMode") as HTMLSelectElement;
         syncModeElement.addEventListener("change", () => {
             fetchPost("/api/sync/setSyncMode", {mode: parseInt(syncModeElement.value, 10)}, () => {
-                if (syncModeElement.value === "1") {
+                if (syncModeElement.value === "1" && window.siyuan.config.sync.provider === 0 && window.siyuan.config.system.container !== "docker") {
                     syncPerceptionElement.parentElement.classList.remove("fn__none");
                 } else {
                     syncPerceptionElement.parentElement.classList.add("fn__none");
@@ -384,6 +386,12 @@ export const repos = {
                 repos.element.querySelector("#syncProviderPanel").innerHTML = renderProvider(window.siyuan.config.sync.provider);
                 bindProviderEvent();
                 syncConfigElement.innerHTML = "";
+                syncConfigElement.classList.add("fn__none");
+                if (window.siyuan.config.sync.mode !== 1 || window.siyuan.config.system.container === "docker" || window.siyuan.config.sync.provider !== 0) {
+                    syncPerceptionElement.parentElement.classList.add("fn__none");
+                } else {
+                    syncPerceptionElement.parentElement.classList.remove("fn__none");
+                }
             });
         });
         const loadingElement = repos.element.querySelector("#reposLoading") as HTMLElement;