diff --git a/index.html b/index.html
index 1c4bca4..1c4e866 100644
--- a/index.html
+++ b/index.html
@@ -366,6 +366,24 @@
         );
 
         const SideDrawer = ({ isOpen, onClose, view, setView, quality, setQuality, onClearCache, syncToken, setSyncToken, onSyncNow }) => {
+            const [isSyncing, setIsSyncing] = useState(false);
+            const [syncMsg, setSyncMsg] = useState('');
+
+            const handleSyncClick = async () => {
+                if (!syncToken || isSyncing) return;
+                setIsSyncing(true);
+                setSyncMsg('');
+                try {
+                    await onSyncNow();
+                    setSyncMsg('同步完成');
+                    setTimeout(() => setSyncMsg(''), 3000);
+                } catch (e) {
+                    setSyncMsg('同步失败');
+                } finally {
+                    setIsSyncing(false);
+                }
+            };
+
             if (!isOpen) return null;
 
             return (
@@ -423,13 +441,18 @@
                                         className="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-sm text-white w-full focus:outline-none focus:border-primary"
                                     />
                                     <button
-                                        onClick={onSyncNow}
-                                        className="bg-primary text-black px-3 py-2 rounded-lg text-sm font-bold whitespace-nowrap"
+                                        onClick={handleSyncClick}
+                                        disabled={isSyncing}
+                                        className="bg-primary text-black px-3 py-2 rounded-lg text-sm font-bold whitespace-nowrap flex items-center gap-2 disabled:opacity-50"
                                     >
-                                        同步
+                                        <Icon name="rotate" className={isSyncing ? "animate-spin" : ""} />
+                                        {isSyncing ? '同步中' : '同步'}
                                     </button>
                                 </div>
-                                <p className="text-xs text-gray-500 mt-1">使用相同的密钥在多端同步收藏列表</p>
+                                <div className="flex justify-between items-center mt-1">
+                                    <p className="text-xs text-gray-500">使用相同的密钥在多端同步收藏列表</p>
+                                    {syncMsg && <span className="text-xs text-primary font-bold animate-[fadeIn_0.3s]">{syncMsg}</span>}
+                                </div>
                             </div>
 
                              <div className="px-4 py-2 mt-2">