diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 6f664dd78..d1fb8881b 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -198,6 +198,11 @@ progressLoading: 400
       background-color: var(--b3-theme-background-light);
     }
 
+    &--sync {
+      background-color: var(--b3-theme-primary);
+      color: var(--b3-theme-on-primary);
+    }
+
     svg {
       height: 14px;
       width: 14px;
diff --git a/app/src/index.ts b/app/src/index.ts
index 88e1b9fe7..ce60cf858 100644
--- a/app/src/index.ts
+++ b/app/src/index.ts
@@ -9,7 +9,6 @@ import {addScript, addScriptSync} from "./protyle/util/addScript";
 import {genUUID} from "./util/genID";
 import {fetchGet, fetchPost} from "./util/fetch";
 import {addBaseURL, setNoteBook} from "./util/pathName";
-import {repos} from "./config/repos";
 import {openFileById} from "./editor/util";
 import {
     bootSync,
@@ -57,13 +56,9 @@ class App {
                                 break;
                             case"syncing":
                                 if (data.code === 0) {
-                                    document.querySelector("#barSync svg").classList.add("fn__rotate");
-                                    document.querySelector("#barSync").classList.add("toolbar__item--active");
-                                    repos.element?.querySelector('[data-type="sync"] svg')?.classList.add("fn__rotate");
+                                    document.querySelector("#barSync").classList.add("toolbar__item--sync");
                                 } else {
-                                    document.querySelector("#barSync svg").classList.remove("fn__rotate");
-                                    document.querySelector("#barSync").classList.remove("toolbar__item--active");
-                                    repos.element?.querySelector('[data-type="sync"] svg')?.classList.remove("fn__rotate");
+                                    document.querySelector("#barSync").classList.remove("toolbar__item--sync");
                                 }
                                 document.querySelector("#barSync").setAttribute("aria-label", data.msg);
                                 break;
diff --git a/app/src/sync/syncGuide.ts b/app/src/sync/syncGuide.ts
index aa421f31a..6f602d72b 100644
--- a/app/src/sync/syncGuide.ts
+++ b/app/src/sync/syncGuide.ts
@@ -112,7 +112,7 @@ export const getSyncCloudList = (cloudPanelElement: Element, reload = false, cb?
 };
 
 export const syncGuide = (element?: Element) => {
-    if (element && element.classList.contains("fn__rotate")) {
+    if (element && element.classList.contains("toolbar__item--sync")) {
         return;
     }
     if (isMobile()) {
diff --git a/app/src/util/globalShortcut.ts b/app/src/util/globalShortcut.ts
index 3a2638322..243205ab3 100644
--- a/app/src/util/globalShortcut.ts
+++ b/app/src/util/globalShortcut.ts
@@ -378,7 +378,7 @@ export const globalShortcut = () => {
         if (matchHotKey(window.siyuan.config.keymap.general.syncNow.custom, event)) {
             event.preventDefault();
             event.stopPropagation();
-            syncGuide(document.querySelector("#barSync svg"));
+            syncGuide(document.querySelector("#barSync"));
             return;
         }
         if (matchHotKey(window.siyuan.config.keymap.general.lockScreen.custom, event)) {
diff --git a/app/src/util/onGetConfig.ts b/app/src/util/onGetConfig.ts
index f36e99c73..5923679b7 100644
--- a/app/src/util/onGetConfig.ts
+++ b/app/src/util/onGetConfig.ts
@@ -91,7 +91,7 @@ export const setProxy = () => {
     /// #endif
 };
 
-export const onGetConfig = (isStart:boolean) => {
+export const onGetConfig = (isStart: boolean) => {
     const matchKeymap1 = matchKeymap(Constants.SIYUAN_KEYMAP.general, "general");
     const matchKeymap2 = matchKeymap(Constants.SIYUAN_KEYMAP.editor.general, "editor", "general");
     const matchKeymap3 = matchKeymap(Constants.SIYUAN_KEYMAP.editor.insert, "editor", "insert");
@@ -182,7 +182,7 @@ const initBar = () => {
     </svg>
 </div>
 <div id="barSync" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.config.sync.stat || (window.siyuan.languages.syncNow + " " + updateHotkeyTip(window.siyuan.config.keymap.general.syncNow.custom))}">
-    <svg><use xlink:href="#iconRefresh"></use></svg>
+    <svg><use xlink:href="#iconCloud"></use></svg>
 </div>
 <button id="barBack" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
     <svg>
@@ -204,7 +204,7 @@ const initBar = () => {
                 event.stopPropagation();
                 break;
             } else if (target.id === "barSync") {
-               syncGuide(target.firstElementChild);
+                syncGuide(target);
                 event.stopPropagation();
                 break;
             } else if (target.id === "barForward") {