diff --git a/package.json b/package.json
index 2dba20f..541fa5f 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "github-markdown-css": "^5.9.0",
     "js-md5": "^0.8.3",
     "jszip": "^3.10.1",
+    "lucide-react": "^1.19.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-helmet-async": "^2.0.5",
@@ -49,4 +50,4 @@
     "vite": "^7.3.1",
     "vitest": "^4.1.7"
   }
-}
\ No newline at end of file
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9682079..ed0b2ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      lucide-react:
+        specifier: ^1.19.0
+        version: 1.20.0(react@19.2.4)
       react:
         specifier: ^19.2.4
         version: 19.2.4
@@ -758,79 +761,66 @@ packages:
     resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.59.0':
     resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.59.0':
     resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.59.0':
     resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.59.0':
     resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.59.0':
     resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
     cpu: [loong64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.59.0':
     resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.59.0':
     resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.59.0':
     resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.59.0':
     resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.59.0':
     resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.59.0':
     resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.59.0':
     resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.59.0':
     resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
@@ -903,28 +893,24 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
     resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
     resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.1':
     resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.1':
     resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
@@ -1695,28 +1681,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -1755,6 +1737,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.20.0:
+    resolution: {integrity: sha512-jhXLeC/7m0/tjL1nzMdKk6x256zWA6AtbhTVreHOiKPoeX2d6MK4FbyIQPpVq0E6iPWBisyy1TW+pEge/uMEuQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
@@ -3939,6 +3926,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.20.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
diff --git a/public/i18n/en.json b/public/i18n/en.json
index 5f52761..3bdb5a7 100644
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -374,6 +374,7 @@
   "CreateSuccess": "Create successful",
   "CreateFailed": "Create failed",
   "Submit": "Submit",
+  "Tools": "Tools",
   "Manage": "Manage",
   "ExitManage": "Exit Manage",
   "AllCharts": "All Charts",
diff --git a/public/i18n/ja.json b/public/i18n/ja.json
index 1f17712..8d11d4c 100644
--- a/public/i18n/ja.json
+++ b/public/i18n/ja.json
@@ -373,5 +373,6 @@
   "CreateSuccess": "作成に成功しました",
   "CreateFailed": "作成に失敗しました",
   "Submit": "送信",
+  "Tools": "ツール",
   "500UploadErrorAndHint": "アップロードに失敗しました。主サイトに行ってアップロードしてください"
 }
diff --git a/public/i18n/ko.json b/public/i18n/ko.json
index 72d5881..e0945b3 100644
--- a/public/i18n/ko.json
+++ b/public/i18n/ko.json
@@ -373,5 +373,6 @@
   "CreateSuccess": "생성 성공",
   "CreateFailed": "생성 실패",
   "Submit": "제출",
+  "Tools": "도구",
   "500UploadErrorAndHint": "업로드 실패, 주 사이트로 가서 업로드하세요"
 }
diff --git a/public/i18n/zh.json b/public/i18n/zh.json
index ba25172..ef46a34 100644
--- a/public/i18n/zh.json
+++ b/public/i18n/zh.json
@@ -8,7 +8,7 @@
   "Collection": "收藏",
   "ClipboardSuccess": "已复制到剪贴板",
   "Comment": "评论",
-  "CommentCount": "评",
+  "CommentCount": "评论数",
   "Download": "下载",
   "Share": "分享",
   "EmptyComment": "说点什么吧？",
@@ -19,7 +19,7 @@
   "JoinAt": "注册于",
   "LastPage": "上一页",
   "Like": "点赞",
-  "LikeCount": "赞",
+  "LikeCount": "点赞数",
   "Login": "登录",
   "Logout": "登出",
   "MajdataPunchline": "Majdata是使用Simai格式的开源maimai自制谱编辑器。",
@@ -32,7 +32,7 @@
   "NoTags": "暂无标签",
   "PersonalHomePage": "个人主页",
   "Play": "游玩",
-  "PlayCount": "播",
+  "PlayCount": "播放数",
   "Post": "发表",
   "Preview": "预览",
   "PreviewPlaceholder": "预览区域 - 在上方输入内容后点击预览查看效果",
@@ -54,7 +54,7 @@
   "Test": "测试",
   "Upload": "上传",
   "UploadChart": "谱面上传",
-  "UploadDate": "序",
+  "UploadDate": "上传日期",
   "UploadNoticeTerms1": "上传的谱面是你自己写的或合作写的，又或是谱面原作者同意上传；",
   "UploadNoticeTerms2": "此谱面可以公开，自由下载；",
   "UploadNoticeTerms3": "公开这张谱面不会侵害第三方权益；",
@@ -383,5 +383,6 @@
   "CreateSuccess": "创建成功",
   "CreateFailed": "创建失败",
   "Submit": "提交",
+  "Tools": "工具",
   "500UploadErrorAndHint": "上传失败, 请前往主站上传"
 }
diff --git a/public/icons/now_loading.png b/public/icons/now_loading.png
new file mode 100644
index 0000000..6354ae6
Binary files /dev/null and b/public/icons/now_loading.png differ
diff --git a/src/components/collection/CollectionCard.tsx b/src/components/collection/CollectionCard.tsx
index 48d2869..54c5487 100644
--- a/src/components/collection/CollectionCard.tsx
+++ b/src/components/collection/CollectionCard.tsx
@@ -1,14 +1,17 @@
-import { useState, useEffect, memo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { motion, AnimatePresence } from 'framer-motion';
-import useSWR from 'swr';
-import { LazyLoad, CoverPic, LoadingSpinner } from '@/components';
-import { endpoints } from '@/config/api';
-import type { Collection, CollectionSongList } from '@/types';
-import { useLoc, useFavorites } from '@/hooks';
-
-const fetcher = (url: string) => fetch(url, { mode: 'cors', credentials: 'include' }).then((res) => res.json());
+import { useState, useEffect, memo } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { motion, AnimatePresence } from "framer-motion";
+import useSWR from "swr";
+import { LazyLoad, CoverPic, LoadingSpinner } from "@/components";
+import { endpoints } from "@/config/api";
+import type { Collection, CollectionSongList } from "@/types";
+import { useLoc, useFavorites } from "@/hooks";
+
+const fetcher = (url: string) =>
+  fetch(url, { mode: "cors", credentials: "include" }).then((res) =>
+    res.json(),
+  );
 
 interface CollectionCardProps {
   collection: Collection;
@@ -16,184 +19,258 @@ interface CollectionCardProps {
   onDelete?: () => void;
 }
 
-const CollectionCardContent = memo(({ collection, isManaging, onDelete }: CollectionCardProps) => {
-  const loc = useLoc();
-  const navigate = useNavigate();
-  const { favoriteIds, toggleFavorite, isPending } = useFavorites();
-
-  const url = endpoints.collection.songlist(collection.id);
-  const { data, isLoading } = useSWR<CollectionSongList>(url, fetcher, { revalidateOnFocus: false });
-
-  const isFavorited = favoriteIds.has(collection.id);
-  const isFavoriteLoading = isPending(collection.id);
-
-  const [currentCoverIndex, setCurrentCoverIndex] = useState(0);
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  useEffect(() => {
-    if (!isHovered) return;
-    if (!data || !data.items || data.items.length <= 1) return;
-
-    const timer = setInterval(() => {
-      setCurrentCoverIndex((prev) => (prev + 1) % data.items.length);
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [data, isHovered]);
-
-  const handleDelete = async () => {
-    setIsDeleting(true);
-    try {
-      const res = await fetch(endpoints.collection.destroy(collection.id), {
-        method: 'POST',
-        mode: 'cors',
-        credentials: 'include',
-      });
-      if (res.ok) {
-        toast.success(loc('DeleteSuccess', '删除成功'));
-        onDelete?.();
-      } else {
-        toast.error(loc('DeleteFailed', '删除失败'));
+const CollectionCardContent = memo(
+  ({ collection, isManaging, onDelete }: CollectionCardProps) => {
+    const loc = useLoc();
+    const navigate = useNavigate();
+    const { favoriteIds, toggleFavorite, isPending } = useFavorites();
+
+    const url = endpoints.collection.songlist(collection.id);
+    const { data, isLoading } = useSWR<CollectionSongList>(url, fetcher, {
+      revalidateOnFocus: false,
+    });
+
+    const isFavorited = favoriteIds.has(collection.id);
+    const isFavoriteLoading = isPending(collection.id);
+
+    const [currentCoverIndex, setCurrentCoverIndex] = useState(0);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+
+    useEffect(() => {
+      if (!isHovered) return;
+      if (!data || !data.items || data.items.length <= 1) return;
+
+      const timer = setInterval(() => {
+        setCurrentCoverIndex((prev) => (prev + 1) % data.items.length);
+      }, 1000);
+
+      return () => clearInterval(timer);
+    }, [data, isHovered]);
+
+    const handleDelete = async () => {
+      setIsDeleting(true);
+      try {
+        const res = await fetch(endpoints.collection.destroy(collection.id), {
+          method: "POST",
+          mode: "cors",
+          credentials: "include",
+        });
+        if (res.ok) {
+          toast.success(loc("DeleteSuccess", "删除成功"));
+          onDelete?.();
+        } else {
+          toast.error(loc("DeleteFailed", "删除失败"));
+        }
+      } catch {
+        toast.error(loc("DeleteFailed", "删除失败"));
+      } finally {
+        setIsDeleting(false);
       }
-    } catch {
-      toast.error(loc('DeleteFailed', '删除失败'));
-    } finally {
-      setIsDeleting(false);
-    }
-  };
+    };
 
-  return (
-    <div className="relative">
-      <div
-        className={`flex bg-[rgba(20,20,25,0.8)] shadow-lg hover:shadow-xl border rounded-xl w-full h-35 overflow-hidden transition-all ${isManaging ? 'cursor-default border-red-500/30' : 'cursor-pointer border-white/10 hover:-translate-y-1'}`}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => { setIsHovered(false); setCurrentCoverIndex(0); }}
-        onClick={() => {
-          if (isManaging) return;
-          navigate('/collection?id=' + collection.id);
-        }}>
-
-        {/* Left side: Cover */}
-        <div className="relative bg-black/40 w-35 h-35 shrink-0">
-          {isLoading ? (
-            <div className="flex justify-center items-center w-full h-full">
-              <LoadingSpinner size="30px" />
+    return (
+      <div className="relative">
+        <div
+          className={`flex bg-[rgba(20,20,25,0.8)] shadow-lg hover:shadow-xl border rounded-xl w-full h-35 overflow-hidden transition-all ${isManaging ? "cursor-default border-red-500/30" : "cursor-pointer border-white/10 hover:-translate-y-1"}`}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => {
+            setIsHovered(false);
+            setCurrentCoverIndex(0);
+          }}
+          onClick={() => {
+            if (isManaging) return;
+            navigate("/collection?id=" + collection.id);
+          }}
+        >
+          {/* Left side: Cover */}
+          <div className="relative bg-black/40 w-35 h-35 shrink-0">
+            {isLoading ? (
+              <div className="flex justify-center items-center w-full h-full">
+                <LoadingSpinner size="30px" />
+              </div>
+            ) : data && data.items && data.items.length > 0 ? (
+              <CoverPic id={data.items[currentCoverIndex].id} />
+            ) : (
+              <div className="flex flex-col justify-center items-center bg-black/60 w-full h-full text-white/50 text-xs">
+                <span>{loc("NoCover", "无封面")}</span>
+              </div>
+            )}
+          </div>
+
+          {/* Right side: Info */}
+          <div className="flex flex-col flex-1 p-3 overflow-hidden text-sm">
+            <div
+              className="font-bold text-white text-lg truncate"
+              title={collection.name}
+            >
+              {collection.name}
             </div>
-          ) : data && data.items && data.items.length > 0 ? (
-            <CoverPic id={data.items[currentCoverIndex].id} />
-          ) : (
-            <div className="flex flex-col justify-center items-center bg-black/60 w-full h-full text-white/50 text-xs">
-              <span>{loc('NoCover', '无封面')}</span>
+            <div
+              className="flex-1 mt-1 text-gray-400 line-clamp-2"
+              title={collection.description || ""}
+            >
+              {collection.description || loc("NoDescription", "暂无描述")}
+            </div>
+            <div className="mt-1 text-gray-500 truncate">
+              {loc("CreatorLabel", "创建者")}: {collection.createdBy}
+            </div>
+            <div className="mt-1 text-gray-500 truncate">
+              {loc("CountLabel", "数量")}: {collection.count}
             </div>
-          )}
-        </div>
-
-        {/* Right side: Info */}
-        <div className="flex flex-col flex-1 p-3 overflow-hidden text-sm">
-          <div className="font-bold text-white text-lg truncate" title={collection.name}>{collection.name}</div>
-          <div className="flex-1 mt-1 text-gray-400 line-clamp-2" title={collection.description || ''}>
-            {collection.description || loc('NoDescription', '暂无描述')}
           </div>
-          <div className="mt-1 text-gray-500 truncate">{loc('CreatorLabel', '创建者')}: {collection.createdBy}</div>
-          <div className="mt-1 text-gray-500 truncate">{loc('CountLabel', '数量')}: {collection.count}</div>
         </div>
-      </div>
-
-      {/* Favorite button */}
-      {!isManaging && (
-        <motion.button
-          initial={{ opacity: 0, scale: 0.8 }}
-          animate={{ opacity: 1, scale: 1 }}
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.9 }}
-          onClick={(e) => {
-            e.stopPropagation();
-            toggleFavorite(collection.id);
-          }}
-          disabled={isFavoriteLoading}
-          className={`absolute top-2 right-2 z-10 flex justify-center items-center border-none rounded-full w-7 h-7 text-sm cursor-pointer shadow-lg backdrop-blur-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${isFavorited
-            ? 'bg-pink-500/70 hover:bg-pink-500 text-white'
-            : 'bg-black/30 hover:bg-black/50 text-white/60 hover:text-white'
-            }`}
-          title={isFavorited ? loc('Unfavorite', '取消收藏') : loc('Favorite', '收藏')}
-        >
-          {isFavoriteLoading ? (
-            <LoadingSpinner size="14px" />
-          ) : isFavorited ? (
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /></svg>
-          )}
-        </motion.button>
-      )}
 
-      {/* Delete button (management mode) */}
-      <AnimatePresence>
-        {isManaging && !confirmDelete && (
+        {/* Favorite button */}
+        {!isManaging && (
           <motion.button
             initial={{ opacity: 0, scale: 0.8 }}
             animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.8 }}
             whileHover={{ scale: 1.1 }}
             whileTap={{ scale: 0.9 }}
             onClick={(e) => {
               e.stopPropagation();
-              setConfirmDelete(true);
+              toggleFavorite(collection.id);
             }}
-            className="top-2 right-2 z-10 absolute flex justify-center items-center bg-red-500/70 hover:bg-red-500 shadow-lg backdrop-blur-sm border-none rounded-full w-7 h-7 text-white text-sm transition-colors cursor-pointer"
-            title={loc('Delete', '删除')}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /></svg>
-          </motion.button>
-        )}
-      </AnimatePresence>
-
-      {/* Delete confirmation overlay */}
-      <AnimatePresence>
-        {confirmDelete && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.15 }}
-            className="z-20 absolute inset-0 flex flex-col justify-center items-center bg-black/75 backdrop-blur-sm rounded-xl"
+            disabled={isFavoriteLoading}
+            className={`absolute top-2 right-2 z-10 flex justify-center items-center border-none rounded-full w-7 h-7 text-sm cursor-pointer shadow-lg backdrop-blur-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+              isFavorited
+                ? "bg-pink-500/70 hover:bg-pink-500 text-white"
+                : "bg-black/30 hover:bg-black/50 text-white/60 hover:text-white"
+            }`}
+            title={
+              isFavorited
+                ? loc("Unfavorite", "取消收藏")
+                : loc("Favorite", "收藏")
+            }
           >
-            <p className="mb-3 font-medium text-white text-sm">{loc('ConfirmDeleteCollection', '确认删除此歌单？')}</p>
-            <div className="flex gap-2">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleDelete();
-                }}
-                disabled={isDeleting}
-                className="bg-red-500/80 hover:bg-red-500 disabled:opacity-50 px-4 py-1.5 border-none rounded-lg font-medium text-white text-sm transition-colors cursor-pointer disabled:cursor-not-allowed"
+            {isFavoriteLoading ? (
+              <LoadingSpinner size="14px" />
+            ) : isFavorited ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
-                {isDeleting ? '...' : loc('Confirm', '确认')}
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  setConfirmDelete(false);
-                }}
-                disabled={isDeleting}
-                className="bg-white/10 hover:bg-white/20 px-4 py-1.5 border-none rounded-lg text-white text-sm transition-colors cursor-pointer disabled:cursor-not-allowed"
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
               >
-                {loc('Cancel', '取消')}
-              </button>
-            </div>
-          </motion.div>
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+              </svg>
+            )}
+          </motion.button>
         )}
-      </AnimatePresence>
-    </div>
-  );
-});
 
-export default function CollectionCard({ collection, isManaging, onDelete }: CollectionCardProps) {
+        {/* Delete button (management mode) */}
+        <AnimatePresence>
+          {isManaging && !confirmDelete && (
+            <motion.button
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+              onClick={(e) => {
+                e.stopPropagation();
+                setConfirmDelete(true);
+              }}
+              className="top-2 right-2 z-10 absolute flex justify-center items-center bg-red-500/70 hover:bg-red-500 shadow-lg backdrop-blur-sm border-none rounded-full w-7 h-7 text-white text-sm transition-colors cursor-pointer"
+              title={loc("Delete", "删除")}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M3 6h18" />
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                <line x1="10" y1="11" x2="10" y2="17" />
+                <line x1="14" y1="11" x2="14" y2="17" />
+              </svg>
+            </motion.button>
+          )}
+        </AnimatePresence>
+
+        {/* Delete confirmation overlay */}
+        <AnimatePresence>
+          {confirmDelete && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.15 }}
+              className="z-20 absolute inset-0 flex flex-col justify-center items-center bg-black/75 backdrop-blur-sm rounded-xl"
+            >
+              <p className="mb-3 font-medium text-white text-sm">
+                {loc("ConfirmDeleteCollection", "确认删除此歌单？")}
+              </p>
+              <div className="flex gap-2">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleDelete();
+                  }}
+                  disabled={isDeleting}
+                  className="bg-red-500/80 hover:bg-red-500 disabled:opacity-50 px-4 py-1.5 border-none rounded-lg font-medium text-white text-sm transition-colors cursor-pointer disabled:cursor-not-allowed"
+                >
+                  {isDeleting ? "..." : loc("Confirm", "确认")}
+                </button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmDelete(false);
+                  }}
+                  disabled={isDeleting}
+                  className="bg-white/10 hover:bg-white/20 px-4 py-1.5 border-none rounded-lg text-white text-sm transition-colors cursor-pointer disabled:cursor-not-allowed"
+                >
+                  {loc("Cancel", "取消")}
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
+
+export default function CollectionCard({
+  collection,
+  isManaging,
+  onDelete,
+}: CollectionCardProps) {
   return (
     <LazyLoad height={140}>
-      <CollectionCardContent collection={collection} isManaging={isManaging} onDelete={onDelete} />
+      <CollectionCardContent
+        collection={collection}
+        isManaging={isManaging}
+        onDelete={onDelete}
+      />
     </LazyLoad>
   );
 }
diff --git a/src/components/header/AuthSection.tsx b/src/components/header/AuthSection.tsx
index 9844990..004e995 100644
--- a/src/components/header/AuthSection.tsx
+++ b/src/components/header/AuthSection.tsx
@@ -1,9 +1,13 @@
-import { useState } from 'react';
-import { Link } from 'react-router-dom';
-import { AiOutlineUser } from 'react-icons/ai';
-import { useLoc } from '@/hooks';
-import { HAMBURGER_BUTTON_BASE, HAMBURGER_BUTTON_ACTIVE, HAMBURGER_BUTTON_HOVER } from './styles';
-import Dropdown from './Dropdown';
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { AiOutlineUser } from "react-icons/ai";
+import { useLoc } from "@/hooks";
+import {
+  HAMBURGER_BUTTON_BASE,
+  HAMBURGER_BUTTON_ACTIVE,
+  HAMBURGER_BUTTON_HOVER,
+} from "./styles";
+import Dropdown from "./Dropdown";
 
 /**
  * 登录/注册按钮组件（未登录状态）
@@ -14,13 +18,16 @@ export default function AuthSection() {
 
   return (
     <div className="relative">
-      {/* 桌面端：传统链接形式 */}
-      <div className="hidden md:flex items-center gap-2">
-        <Link to="/login" className="flex items-center gap-2 hover:bg-white/10 px-4 py-2 md:py-3 border border-white/10 hover:border-white/30 rounded-[10px] min-h-10 font-medium text-white/85 hover:text-white text-sm no-underline">
-          <span className="text-sm">{loc('Login')}</span>
-        </Link>
-        <Link to="/register" className="flex items-center gap-2 bg-linear-to-br from-[#10b981] hover:from-[#059669] to-[#059669] hover:to-[#047857] px-4 py-2 md:py-3 border border-transparent rounded-[10px] min-h-10 font-medium text-white text-sm no-underline">
-          <span className="text-sm">{loc('Register')}</span>
+      {/* 桌面端：合并登录/注册按钮 */}
+      <div className="hidden md:flex items-center">
+        <Link
+          to="/login"
+          className="flex items-center gap-2 px-5 py-2 md:py-3 min-h-10 font-medium text-white/80 hover:text-white text-sm no-underline transition-all duration-200 hover:scale-105 active:scale-95"
+        >
+          <AiOutlineUser className="text-white text-base" />
+          <span className="text-sm">
+            {loc("Login")} / {loc("Register")}
+          </span>
         </Link>
       </div>
 
@@ -30,16 +37,23 @@ export default function AuthSection() {
           className={`${HAMBURGER_BUTTON_BASE} ${isMobileAuthMenuOpen ? HAMBURGER_BUTTON_ACTIVE : HAMBURGER_BUTTON_HOVER}`}
           onClick={() => setIsMobileAuthMenuOpen(!isMobileAuthMenuOpen)}
         >
-          <AiOutlineUser className="font-medium text-white/85 text-base" />
-          <span className="text-[0.7rem] text-white/60">▼</span>
+          <AiOutlineUser className="font-medium text-gray-500 text-base" />
+          <span className="text-[0.7rem] text-gray-400">▼</span>
         </button>
 
-        <Dropdown isOpen={isMobileAuthMenuOpen} onClose={() => setIsMobileAuthMenuOpen(false)} position="right" className="p-4">
-          <Link to="/login" className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 bg-none hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-white/85 hover:text-white text-sm text-center no-underline cursor-pointer">
-            <span className="flex-1 w-full text-center">{loc('Login')}</span>
-          </Link>
-          <Link to="/register" className="flex justify-center items-center gap-3 bg-linear-to-br from-[rgb(16_185_129/20%)] hover:from-[rgb(16_185_129/30%)] to-[rgb(5_150_105/15%)] hover:to-[rgb(5_150_105/25%)] px-5 py-4 border-none w-full font-semibold text-[#10b981] hover:text-[#34d399] text-sm text-center no-underline cursor-pointer">
-            <span className="flex-1 w-full text-center">{loc('Register')}</span>
+        <Dropdown
+          isOpen={isMobileAuthMenuOpen}
+          onClose={() => setIsMobileAuthMenuOpen(false)}
+          className="p-4"
+        >
+          <Link
+            to="/login"
+            className="flex justify-center items-center gap-3 bg-white hover:bg-gray-50 px-5 py-4 border border-gray-200 rounded-xl w-full font-medium text-gray-700 hover:text-gray-900 text-sm text-center no-underline shadow-sm hover:shadow-md cursor-pointer transition-all duration-200"
+          >
+            <AiOutlineUser className="text-gray-500" />
+            <span className="flex-1 w-full text-center">
+              {loc("Login")} / {loc("Register")}
+            </span>
           </Link>
         </Dropdown>
       </div>
diff --git a/src/components/header/DesktopNav.tsx b/src/components/header/DesktopNav.tsx
index da700f5..e002b01 100644
--- a/src/components/header/DesktopNav.tsx
+++ b/src/components/header/DesktopNav.tsx
@@ -1,83 +1,198 @@
-import { useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { useLoc } from '@/hooks';
-import Dropdown from './Dropdown';
-import { DROPDOWN_ITEM, NAV_LINK } from './styles';
-
+import { useRef, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useLoc } from "@/hooks";
+import Dropdown from "./Dropdown";
+import { DROPDOWN_ITEM, NAV_LINK, DESKTOP_DROPDOWN_ITEM } from "./styles";
+import {
+  Birdhouse,
+  Podium,
+  ChevronDown,
+  Wrench,
+  BookOpenText,
+  LandPlot,
+  Fan,
+  Music4,
+  TrendingUp,
+  Users,
+  Trophy,
+  PenLine,
+  Gamepad2,
+} from "lucide-react";
 /**
  * 桌面端导航栏
  */
 export default function DesktopNav() {
   const loc = useLoc();
+  const { pathname } = useLocation();
   const [isRankingsOpen, setIsRankingsOpen] = useState(false);
   const rankingsContainerRef = useRef<HTMLDivElement>(null);
   const [isToolsOpen, setIsToolsOpen] = useState(false);
   const toolsContainerRef = useRef<HTMLDivElement>(null);
 
+  const isRankingsActive = pathname.startsWith("/ranking");
+  const isToolsActive =
+    pathname.startsWith("/edit") || pathname.startsWith("/play");
+
   return (
-    <div className="hidden xl:flex items-center gap-2 bg-white/5 p-2 border border-white/8 rounded-xl">
+    <div className="hidden xl:flex flex-col gap-1 w-full">
+      <Link
+        to="/"
+        className={`${NAV_LINK} group ${pathname === "/" ? "text-[#5C8DC1]" : ""}`}
+      >
+        <span className="flex items-center gap-2 text-2xl font-black relative">
+          <Birdhouse className="w-8 h-8" />
+          <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            Home
+          </span>
+        </span>
+      </Link>
       <div className="inline-block relative" ref={rankingsContainerRef}>
         <button
-          className={`flex items-center gap-2 px-5 py-3 text-white/85 no-underline rounded-lg font-medium text-sm whitespace-nowrap relative bg-none border-none cursor-pointer ${isRankingsOpen
-            ? 'bg-linear-to-br from-white/12 to-white/8 text-white shadow-[0_4px_12px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset]'
-            : 'hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:text-white hover:shadow-[0_4px_12px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset]'
-            }`}
+          className={`flex items-center gap-2 px-4 py-3 no-underline w-full font-medium text-sm whitespace-nowrap relative bg-none cursor-pointer transition-all duration-300 hover:scale-105 active:scale-95 group ${
+            isRankingsOpen || isRankingsActive
+              ? "text-[#5C8DC1]"
+              : "text-gray-600 hover:text-[#5C8DC1]"
+          }`}
           onClick={() => setIsRankingsOpen(!isRankingsOpen)}
         >
-          <span className="text-sm">{loc('Rankings')}</span>
-          <span className="text-[#a0a0a0] text-[0.7rem]">▼</span>
+          <span className="flex flex-col items-center gap-1 text-2xl font-black relative">
+            <Podium className="w-8 h-8" />
+            <ChevronDown className="w-5 h-5 absolute bottom-0 -right-5" />
+            <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              {loc("Rankings")}
+            </span>
+          </span>
         </button>
 
-        <Dropdown isOpen={isRankingsOpen} onClose={() => setIsRankingsOpen(false)} position="left" className="w-full" containerRef={rankingsContainerRef}>
-          <Link to="/ranking" className={DROPDOWN_ITEM} onClick={() => setIsRankingsOpen(false)}>
-            <span className="text-sm">{loc('Recommend')}</span>
+        <Dropdown
+          isOpen={isRankingsOpen}
+          onClose={() => setIsRankingsOpen(false)}
+          className="w-full"
+          containerRef={rankingsContainerRef}
+        >
+          <Link
+            to="/ranking"
+            className={DESKTOP_DROPDOWN_ITEM}
+            onClick={() => setIsRankingsOpen(false)}
+          >
+            <TrendingUp className="w-8 h-8 text-white" />
+            <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              {loc("Recommend")}
+            </span>
           </Link>
-          <Link to="/ranking/user" className={DROPDOWN_ITEM} onClick={() => setIsRankingsOpen(false)}>
-            <span className="text-sm">{loc('UserRankingTitle')}</span>
+          <Link
+            to="/ranking/user"
+            className={DESKTOP_DROPDOWN_ITEM}
+            onClick={() => setIsRankingsOpen(false)}
+          >
+            <Users className="w-8 h-8 text-white" />
+            <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              {loc("UserRankingTitle")}
+            </span>
           </Link>
-          <Link to="/ranking/mmfc" className={DROPDOWN_ITEM} onClick={() => setIsRankingsOpen(false)}>
-            <span className="text-sm">{loc('MMFCRanking')}</span>
+          <Link
+            to="/ranking/mmfc"
+            className={DESKTOP_DROPDOWN_ITEM}
+            onClick={() => setIsRankingsOpen(false)}
+          >
+            <Trophy className="w-8 h-8 text-white" />
+            <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              {loc("MMFCRanking")}
+            </span>
           </Link>
         </Dropdown>
       </div>
       <div className="inline-block relative" ref={toolsContainerRef}>
         <button
-          className={`flex items-center gap-2 px-5 py-3 text-white/85 no-underline rounded-lg font-medium text-sm whitespace-nowrap relative bg-none border-none cursor-pointer ${isToolsOpen
-            ? 'bg-linear-to-br from-white/12 to-white/8 text-white shadow-[0_4px_12px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset]'
-            : 'hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:text-white hover:shadow-[0_4px_12px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset]'
-            }`}
+          className={`flex items-center gap-2 px-4 py-3 no-underline w-full font-medium text-sm whitespace-nowrap relative bg-none cursor-pointer transition-all duration-300 hover:scale-105 active:scale-95 group ${
+            isToolsOpen || isToolsActive
+              ? "text-[#5C8DC1]"
+              : "text-gray-600 hover:text-[#5C8DC1]"
+          }`}
           onClick={() => setIsToolsOpen(!isToolsOpen)}
         >
-          <span className="text-sm">工具</span>
-          <span className="text-[#a0a0a0] text-[0.7rem]">▼</span>
+          <span className="flex flex-col items-center gap-1 text-2xl font-black relative">
+            <Wrench className="w-8 h-8" />
+            <ChevronDown className="w-5 h-5 absolute bottom-0 -right-5" />
+            <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              {loc("Tools")}
+            </span>
+          </span>
         </button>
 
         <Dropdown
           isOpen={isToolsOpen}
           onClose={() => setIsToolsOpen(false)}
-          position="left"
           className="w-full"
           containerRef={toolsContainerRef}
         >
-          <Link to="/edit" className={DROPDOWN_ITEM} onClick={() => setIsToolsOpen(false)}>
-            <span className="text-sm">{loc('ChartEditor')}</span>
+          <Link
+            to="/edit"
+            className={DESKTOP_DROPDOWN_ITEM}
+            onClick={() => setIsToolsOpen(false)}
+          >
+            <PenLine className="w-8 h-8 text-white" />
+            <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              {loc("ChartEditor")}
+            </span>
           </Link>
-          <Link to="/play" className={DROPDOWN_ITEM} onClick={() => setIsToolsOpen(false)}>
-            <span className="text-sm">MajdataPlay</span>
+          <Link
+            to="/play"
+            className={DESKTOP_DROPDOWN_ITEM}
+            onClick={() => setIsToolsOpen(false)}
+          >
+            <Gamepad2 className="w-8 h-8 text-white" />
+            <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+              MajdataPlay
+            </span>
           </Link>
         </Dropdown>
       </div>
-      <Link to="https://docs.majdata.net" className={NAV_LINK} target="_blank" rel="noopener noreferrer">
-        <span className="text-sm">文档</span>
+      <Link
+        to="https://docs.majdata.net"
+        className={`${NAV_LINK} group`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span className="flex items-center gap-2 text-2xl font-black relative">
+          <BookOpenText className="w-8 h-8" />
+          <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            文档
+          </span>
+        </span>
       </Link>
-      <Link to="/collection/hiroba" className={NAV_LINK}>
-        <span className="text-sm">{loc('CollectionHiroba')}</span>
+      <Link
+        to="/collection/hiroba"
+        className={`${NAV_LINK} group ${pathname.startsWith("/collection/hiroba") ? "text-[#5C8DC1]" : ""}`}
+      >
+        <span className="flex items-center gap-2 text-2xl font-black relative">
+          <LandPlot className="w-8 h-8" />
+          <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("CollectionHiroba")}
+          </span>
+        </span>
       </Link>
-      <Link to="/chart-events" className={NAV_LINK}>
-        <span className="text-sm">{loc('Contest')}</span>
+      <Link
+        to="/chart-events"
+        className={`${NAV_LINK} group ${pathname.startsWith("/chart-events") ? "text-[#5C8DC1]" : ""}`}
+      >
+        <span className="flex items-center gap-2 text-2xl font-black relative">
+          <Fan className="w-8 h-8" />
+          <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("Contest")}
+          </span>
+        </span>
       </Link>
-      <Link to="/eventTag?id=Original" className={NAV_LINK}>
-        <span className="text-sm">{loc('OriginalSongs')}</span>
+      <Link
+        to="/eventTag?id=Original"
+        className={`${NAV_LINK} group ${pathname.startsWith("/eventTag") ? "text-[#5C8DC1]" : ""}`}
+      >
+        <span className="flex items-center gap-2 text-2xl font-black relative">
+          <Music4 className="w-8 h-8" />
+          <span className="absolute left-14 text-2xl font-black text-[#5C8DC1]/50 group-hover:text-[#5C8DC1] [-webkit-text-stroke:0.4px_rgba(92,141,193,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("OriginalSongs")}
+          </span>
+        </span>
       </Link>
     </div>
   );
diff --git a/src/components/header/Dropdown.tsx b/src/components/header/Dropdown.tsx
index 34b4c06..aab0b19 100644
--- a/src/components/header/Dropdown.tsx
+++ b/src/components/header/Dropdown.tsx
@@ -1,49 +1,132 @@
-import { useEffect, useRef } from 'react';
-import type { ReactNode } from 'react';
+import { useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
 
 interface DropdownProps {
   isOpen: boolean;
   onClose: () => void;
   children: ReactNode;
-  position?: 'left' | 'right';
+  variant?: "desktop" | "mobile" | "user" | "auto";
   className?: string;
   containerRef?: React.RefObject<HTMLElement | null>;
 }
 
+const DESKTOP_BREAKPOINT = 1280;
+
+type VariantStyle = {
+  position: string;
+  open: string;
+  closed: string;
+  base: string;
+};
+
+const variantStyles: Record<string, VariantStyle> = {
+  desktop: {
+    position: "fixed left-0 top-0 bottom-0 z-1001",
+    open: "translate-x-0",
+    closed: "-translate-x-full",
+    base: "bg-[#5C8DC1] !w-64 h-full transition-transform duration-300 ease-out flex flex-col items-center justify-center",
+  },
+  mobile: {
+    position: "absolute right-0 top-full mt-2 z-1001",
+    open: "opacity-100 scale-100",
+    closed: "opacity-0 scale-95",
+    base: "bg-white shadow-lg border border-gray-200 rounded-xl min-w-48 transition-all duration-200 ease-out origin-bottom-right",
+  },
+  user: {
+    position: "absolute right-0 bottom-full mb-2 z-1001",
+    open: "opacity-100 scale-100",
+    closed: "opacity-0 scale-95",
+    base: "bg-white shadow-lg border border-gray-200 rounded-xl min-w-48 transition-all duration-200 ease-out origin-bottom-left",
+  },
+};
+
+function getStyle(variant: string, isDesktop: boolean): VariantStyle {
+  if (variant === "user") {
+    return isDesktop ? variantStyles.user : variantStyles.mobile;
+  }
+  return variantStyles[variant] || variantStyles.mobile;
+}
+
 /**
  * 通用下拉菜单组件
- * 处理点击外部关闭逻辑，无动效
+ * 桌面端显示为侧边滑出面板，移动端为弹出菜单
  */
-export default function Dropdown({ isOpen, onClose, children, position = 'left', className = '', containerRef }: DropdownProps) {
+export default function Dropdown({
+  isOpen,
+  onClose,
+  children,
+  variant = "auto",
+  className = "",
+  containerRef,
+}: DropdownProps) {
   const menuRef = useRef<HTMLDivElement>(null);
+  const [render, setRender] = useState(false);
+  const [animateIn, setAnimateIn] = useState(false);
+  const [isDesktop, setIsDesktop] = useState(
+    typeof window !== "undefined" && window.innerWidth >= DESKTOP_BREAKPOINT,
+  );
+
+  useEffect(() => {
+    const check = () => setIsDesktop(window.innerWidth >= DESKTOP_BREAKPOINT);
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      setRender(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimateIn(true));
+      });
+    } else {
+      setAnimateIn(false);
+      const timer = setTimeout(() => setRender(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
 
   useEffect(() => {
     if (!isOpen) return;
 
     function handleClickOutside(event: MouseEvent) {
       const target = event.target as Node;
-      const isOutsideMenu = menuRef.current && !menuRef.current.contains(target);
-      const isOutsideContainer = containerRef?.current && !containerRef.current.contains(target);
-      
-      // 只有当点击既在菜单外部，又在容器外部时才关闭
+      const isOutsideMenu =
+        menuRef.current && !menuRef.current.contains(target);
+      const isOutsideContainer =
+        containerRef?.current && !containerRef.current.contains(target);
+
       if (isOutsideMenu && isOutsideContainer) {
         onClose();
       }
     }
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, onClose, containerRef]);
 
-  if (!isOpen) return null;
+  if (!render) return null;
 
-  const positionClass = position === 'right' ? 'right-0' : 'left-0';
+  const resolved =
+    variant === "auto" ? (isDesktop ? "desktop" : "mobile") : variant;
+  const style = getStyle(resolved, isDesktop);
 
   return (
-    <div 
+    <div
       ref={menuRef}
-      className={`top-[calc(100%+0.75rem)] z-1001 absolute bg-linear-to-br from-[rgb(15_15_20/95%)] to-[rgb(10_12_18/98%)] shadow-[0_20px_60px_rgb(0_0_0/50%),0_4px_20px_rgb(59_130_246/10%),0_1px_0_rgb(255_255_255/10%)_inset] backdrop-blur-xl saturate-180 border border-white/15 rounded-2xl min-w-50 overflow-hidden ${positionClass} ${className}`}
+      className={`${style.position} ${style.base} ${
+        animateIn ? style.open : style.closed
+      } ${className}`}
     >
+      {resolved === "desktop" && (
+        <svg
+          className="absolute -right-20 top-0 h-full pointer-events-none"
+          viewBox="0 0 100 1024"
+          preserveAspectRatio="none"
+          width="80"
+        >
+          <path d="M0 0L99.5 1024L0 1024L0 0Z" fill="#5C8DC1" opacity="1" />
+        </svg>
+      )}
       {children}
     </div>
   );
diff --git a/src/components/header/MajdataLogo.tsx b/src/components/header/MajdataLogo.tsx
index 6bd381a..e56c992 100644
--- a/src/components/header/MajdataLogo.tsx
+++ b/src/components/header/MajdataLogo.tsx
@@ -1,5 +1,5 @@
-import { toast } from 'react-toastify';
-import { useLoc } from '@/hooks';
+import { toast } from "react-toastify";
+import { useLoc } from "@/hooks";
 
 /**
  * Majdata.Net Logo 组件
@@ -7,23 +7,22 @@ import { useLoc } from '@/hooks';
  */
 export default function MajdataLogo() {
   const loc = useLoc();
-  
+
   const handleClick = () => {
-    toast.error(loc('FUCKYOU', 'FUCK YOU'), {
-      position: 'top-center',
+    toast.error(loc("FUCKYOU", "FUCK YOU"), {
+      position: "top-center",
       autoClose: 500,
     });
   };
 
   return (
-    <h1 style={{ fontFamily: 'fantasy' }}>
+    <div className="relative flex flex-row items-center gap-3 cursor-pointer">
       <img
-        className='inline m-2.5 rounded h-12.5'
-        src="../../../salt.webp"
+        className="inline m-2.5 rounded h-12.5 transition-transform hover:scale-105 active:scale-95"
+        src="../../../icons/now_loading.png"
         onClick={handleClick}
         alt="xxlb"
       />
-      Majdata.Net
-    </h1>
+    </div>
   );
 }
diff --git a/src/components/header/MobileNav.tsx b/src/components/header/MobileNav.tsx
index 06439e7..e555ec9 100644
--- a/src/components/header/MobileNav.tsx
+++ b/src/components/header/MobileNav.tsx
@@ -1,8 +1,14 @@
-import { useState, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { useLoc } from '@/hooks';
-import { MOBILE_DROPDOWN_ITEM, HAMBURGER_BUTTON_BASE, HAMBURGER_BUTTON_ACTIVE, HAMBURGER_BUTTON_HOVER } from './styles';
-import Dropdown from './Dropdown';
+import { useState, useRef } from "react";
+import { Link } from "react-router-dom";
+import { Menu, X } from "lucide-react";
+import { useLoc } from "@/hooks";
+import {
+  MOBILE_DROPDOWN_ITEM,
+  HAMBURGER_BUTTON_BASE,
+  HAMBURGER_BUTTON_ACTIVE,
+  HAMBURGER_BUTTON_HOVER,
+} from "./styles";
+import Dropdown from "./Dropdown";
 
 /**
  * 移动端汉堡菜单导航
@@ -20,37 +26,64 @@ export default function MobileNav() {
         className={`${HAMBURGER_BUTTON_BASE} ${isMainNavOpen ? HAMBURGER_BUTTON_ACTIVE : HAMBURGER_BUTTON_HOVER}`}
         onClick={() => setIsMainNavOpen(!isMainNavOpen)}
       >
-        <span className="flex flex-col gap-1.5 w-6 h-4">
-          <span className={`block h-0.5 w-6 bg-[#e5e5e5] rounded-sm transition-transform ${isMainNavOpen ? 'rotate-45 translate-y-1.75' : ''}`}></span>
-          <span className={`block h-0.5 w-6 bg-[#e5e5e5] rounded-sm transition-opacity ${isMainNavOpen ? 'opacity-0' : ''}`}></span>
-          <span className={`block h-0.5 w-6 bg-[#e5e5e5] rounded-sm transition-transform ${isMainNavOpen ? '-rotate-45 -translate-y-1.75' : ''}`}></span>
-        </span>
+        {isMainNavOpen ? (
+          <X className="w-5 h-5 text-gray-600" />
+        ) : (
+          <Menu className="w-5 h-5 text-gray-600" />
+        )}
       </button>
 
-      <Dropdown isOpen={isMainNavOpen} onClose={() => { setIsMainNavOpen(false); setIsMobileRankingsOpen(false); setIsMobileToolsOpen(false); }} position="left" containerRef={containerRef}>
+      <Dropdown
+        isOpen={isMainNavOpen}
+        onClose={() => {
+          setIsMainNavOpen(false);
+          setIsMobileRankingsOpen(false);
+          setIsMobileToolsOpen(false);
+        }}
+        
+        containerRef={containerRef}
+      >
         {/* 榜单项 - 可展开 */}
         <div className="relative">
           <button
-            className={`flex items-center justify-between gap-3 px-5 py-4 text-[#e5e5e5] no-underline text-sm font-medium text-center bg-none border-none cursor-pointer w-full ${isMobileRankingsOpen
-              ? 'bg-linear-to-br from-[rgb(59_130_246/15%)] to-[rgb(59_130_246/8%)] text-[#3b82f6]'
-              : 'hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:text-white hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset]'
-              }`}
+            className={`flex items-center justify-between gap-3 px-5 py-4 no-underline text-sm font-medium text-center bg-none border-none cursor-pointer w-full ${
+              isMobileRankingsOpen
+                ? "bg-linear-to-br from-[#5C8DC1]/15 to-[#5C8DC1]/8 text-[#5C8DC1]"
+                : "text-gray-500 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 hover:text-[#5C8DC1] hover:shadow-[0_2px_8px_rgb(92_141_193/15%),0_1px_0_rgb(92_141_193/10%)_inset]"
+            }`}
             onClick={() => setIsMobileRankingsOpen(!isMobileRankingsOpen)}
           >
-            <span className="w-full text-sm text-center">{loc('Rankings')}</span>
-            <span className={`text-2xl font-light ${isMobileRankingsOpen ? 'text-[#3b82f6]' : 'text-[#a0a0a0]'}`}>›</span>
+            <span className="w-full text-sm text-center">
+              {loc("Rankings")}
+            </span>
+            <span
+              className={`text-2xl font-light ${isMobileRankingsOpen ? "text-[#5C8DC1]" : "text-gray-400"}`}
+            >
+              ›
+            </span>
           </button>
 
           {isMobileRankingsOpen && (
-            <div className="flex flex-col items-center bg-black/40 overflow-hidden">
-              <Link to="/ranking" className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-white/10 hover:to-white/6 ml-2 px-4 py-3.5 border-transparent border-l-2 font-medium text-[#e5e5e5] text-[0.85rem] hover:text-white no-underline">
-                <span className="text-sm text-left">{loc('Recommend')}</span>
+            <div className="flex flex-col items-center bg-gray-100 overflow-hidden">
+              <Link
+                to="/ranking"
+                className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 ml-2 px-4 py-3.5 border-[#5C8DC1]/20 border-l-2 font-medium text-gray-500 text-[0.85rem] hover:text-[#5C8DC1] no-underline"
+              >
+                <span className="text-sm text-left">{loc("Recommend")}</span>
               </Link>
-              <Link to="/ranking/user" className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-white/10 hover:to-white/6 ml-2 px-4 py-3.5 border-transparent border-l-2 font-medium text-[#e5e5e5] text-[0.85rem] hover:text-white no-underline">
-                <span className="text-sm text-left">{loc('UserRankingTitle')}</span>
+              <Link
+                to="/ranking/user"
+                className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 ml-2 px-4 py-3.5 border-[#5C8DC1]/20 border-l-2 font-medium text-gray-500 text-[0.85rem] hover:text-[#5C8DC1] no-underline"
+              >
+                <span className="text-sm text-left">
+                  {loc("UserRankingTitle")}
+                </span>
               </Link>
-              <Link to="/ranking/mmfc" className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-white/10 hover:to-white/6 ml-2 px-4 py-3.5 border-transparent border-l-2 font-medium text-[#e5e5e5] text-[0.85rem] hover:text-white no-underline">
-                <span className="text-sm text-left">{loc('MMFCRanking')}</span>
+              <Link
+                to="/ranking/mmfc"
+                className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 ml-2 px-4 py-3.5 border-[#5C8DC1]/20 border-l-2 font-medium text-gray-500 text-[0.85rem] hover:text-[#5C8DC1] no-underline"
+              >
+                <span className="text-sm text-left">{loc("MMFCRanking")}</span>
               </Link>
             </div>
           )}
@@ -59,39 +92,59 @@ export default function MobileNav() {
         {/* 工具项 - 可展开 */}
         <div className="relative">
           <button
-            className={`flex items-center justify-between gap-3 px-5 py-4 text-[#e5e5e5] no-underline text-sm font-medium text-center bg-none border-none cursor-pointer w-full ${isMobileToolsOpen
-              ? 'bg-linear-to-br from-[rgb(59_130_246/15%)] to-[rgb(59_130_246/8%)] text-[#3b82f6]'
-              : 'hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:text-white hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset]'
-              }`}
+            className={`flex items-center justify-between gap-3 px-5 py-4 no-underline text-sm font-medium text-center bg-none border-none cursor-pointer w-full ${
+              isMobileToolsOpen
+                ? "bg-linear-to-br from-[#5C8DC1]/15 to-[#5C8DC1]/8 text-[#5C8DC1]"
+                : "text-gray-500 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 hover:text-[#5C8DC1] hover:shadow-[0_2px_8px_rgb(92_141_193/15%),0_1px_0_rgb(92_141_193/10%)_inset]"
+            }`}
             onClick={() => setIsMobileToolsOpen(!isMobileToolsOpen)}
           >
             <span className="w-full text-sm text-center">工具</span>
-            <span className={`text-2xl font-light ${isMobileToolsOpen ? 'text-[#3b82f6]' : 'text-[#a0a0a0]'}`}>›</span>
+            <span
+              className={`text-2xl font-light ${isMobileToolsOpen ? "text-[#5C8DC1]" : "text-gray-400"}`}
+            >
+              ›
+            </span>
           </button>
 
           {isMobileToolsOpen && (
-            <div className="flex flex-col items-center bg-black/40 overflow-hidden">
-              <Link to="/edit" className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-white/10 hover:to-white/6 ml-2 px-4 py-3.5 border-transparent border-l-2 font-medium text-[#e5e5e5] text-[0.85rem] hover:text-white no-underline">
-                <span className="text-sm text-left">{loc('ChartEditor')}</span>
+            <div className="flex flex-col items-center bg-gray-100 overflow-hidden">
+              <Link
+                to="/edit"
+                className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 ml-2 px-4 py-3.5 border-[#5C8DC1]/20 border-l-2 font-medium text-gray-500 text-[0.85rem] hover:text-[#5C8DC1] no-underline"
+              >
+                <span className="text-sm text-left">{loc("ChartEditor")}</span>
               </Link>
-              <Link to="/play" className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-white/10 hover:to-white/6 ml-2 px-4 py-3.5 border-transparent border-l-2 font-medium text-[#e5e5e5] text-[0.85rem] hover:text-white no-underline">
+              <Link
+                to="/play"
+                className="flex justify-start items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 ml-2 px-4 py-3.5 border-[#5C8DC1]/20 border-l-2 font-medium text-gray-500 text-[0.85rem] hover:text-[#5C8DC1] no-underline"
+              >
                 <span className="text-sm text-left">MajdataPlay</span>
               </Link>
             </div>
           )}
         </div>
 
-        <Link to="https://docs.majdata.net" className={MOBILE_DROPDOWN_ITEM} target="_blank" rel="noopener noreferrer">
+        <Link
+          to="https://docs.majdata.net"
+          className={MOBILE_DROPDOWN_ITEM}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <span className="w-full text-sm text-center">文档</span>
         </Link>
         <Link to="/collection/hiroba" className={MOBILE_DROPDOWN_ITEM}>
-          <span className="w-full text-sm text-center">{loc('CollectionHiroba')}</span>
+          <span className="w-full text-sm text-center">
+            {loc("CollectionHiroba")}
+          </span>
         </Link>
         <Link to="/chart-events" className={MOBILE_DROPDOWN_ITEM}>
-          <span className="w-full text-sm text-center">{loc('Contest')}</span>
+          <span className="w-full text-sm text-center">{loc("Contest")}</span>
         </Link>
         <Link to="/eventTag?id=Original" className={MOBILE_DROPDOWN_ITEM}>
-          <span className="w-full text-sm text-center">{loc('OriginalSongs')}</span>
+          <span className="w-full text-sm text-center">
+            {loc("OriginalSongs")}
+          </span>
         </Link>
       </Dropdown>
     </nav>
diff --git a/src/components/header/UserMenu.tsx b/src/components/header/UserMenu.tsx
index cbfede6..f80e2b8 100644
--- a/src/components/header/UserMenu.tsx
+++ b/src/components/header/UserMenu.tsx
@@ -1,10 +1,18 @@
-import { useState, useRef } from 'react';
-import { Link } from 'react-router-dom';
-import { useLoc } from '@/hooks';
-import { handleLogout as logoutUtil } from '@/utils';
-import { endpoints } from '@/config/api';
-import { DIVIDER } from './styles';
-import Dropdown from './Dropdown';
+import { useState, useRef } from "react";
+import { Link } from "react-router-dom";
+import { useLoc } from "@/hooks";
+import {
+  User,
+  BarChart3,
+  Music,
+  FolderHeart,
+  Settings,
+  LogOut,
+} from "lucide-react";
+import { handleLogout as logoutUtil } from "@/utils";
+import { endpoints } from "@/config/api";
+import { DIVIDER, DESKTOP_DROPDOWN_ITEM } from "./styles";
+import Dropdown from "./Dropdown";
 
 interface UserMenuProps {
   username: string;
@@ -22,53 +30,84 @@ export default function UserMenu({ username }: UserMenuProps) {
     await logoutUtil(
       () => {
         setIsOpen(false);
-        window.location.href = '/';
+        window.location.href = "/";
       },
       (error) => {
-        console.error(loc('LogoutFailed'), error);
+        console.error(loc("LogoutFailed"), error);
         setIsOpen(false);
-        window.location.href = '/';
-      }
+        window.location.href = "/";
+      },
     );
   };
 
   return (
     <div className="relative" ref={containerRef}>
       <button
-        className={`flex rounded-[10px] items-center gap-2 md:gap-3 px-3 md:px-4 cursor-pointer text-[#e5e5e5] text-sm font-medium h-10 md:h-12 bg-white/5 border border-white/10 backdrop-blur-[10px] ${
-          isOpen
-            ? 'bg-linear-to-br from-white/15 to-white/10 border-white/30 shadow-[0_8px_25px_rgb(0_0_0/25%),0_1px_0_rgb(255_255_255/10%)_inset]'
-            : 'hover:bg-linear-to-br hover:from-white/15 hover:to-white/10 hover:border-white/30 hover:shadow-[0_8px_25px_rgb(0_0_0/25%),0_1px_0_rgb(255_255_255/10%)_inset]'
-        }`}
+        className="cursor-pointer border-none bg-none p-0 transition-transform hover:scale-110 active:scale-95"
         onClick={() => setIsOpen(!isOpen)}
       >
         <img
-          className={`w-7 h-7 md:w-9 md:h-9 rounded-full border-2 object-cover ${isOpen ? 'border-white/60' : 'border-white/30 hover:border-white/60'}`}
+          className={`w-9 h-9 rounded-full object-cover ring-2 ring-offset-1 transition-all ${
+            isOpen
+              ? "ring-[#5C8DC1] ring-offset-[#5C8DC1]/15"
+              : "ring-black/10 ring-offset-transparent hover:ring-[#5C8DC1]/50"
+          }`}
           src={endpoints.account.icon(username)}
           alt={username}
         />
-        <span className="hidden md:inline max-w-30 overflow-hidden font-medium text-ellipsis whitespace-nowrap">{username}</span>
       </button>
 
-      <Dropdown isOpen={isOpen} onClose={() => setIsOpen(false)} position="right" className="w-full" containerRef={containerRef}>
-        <Link to={`/space?id=${username}`} className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 bg-none hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline cursor-pointer">
-          <span className="w-full font-medium text-center">{loc('PersonalHomePage')}</span>
+      <Dropdown
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        variant="auto"
+        className="w-full"
+        containerRef={containerRef}
+      >
+        <div className="hidden xl:flex flex-row items-end gap-1 absolute bottom-4 left-4">
+          <img
+            className="w-20 h-20 rounded-full object-cover ring-2 ring-white border-4 border-[#5C8DC1]"
+            src={endpoints.account.icon(username)}
+            alt={username}
+          />
+          <span className="font-semibold text-white text-6xl">{username}</span>
+        </div>
+        <Link to={`/space?id=${username}`} className={DESKTOP_DROPDOWN_ITEM}>
+          <User className="w-8 h-8 text-white" />
+          <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("PersonalHomePage")}
+          </span>
         </Link>
-        <Link to="/user/scores" className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 bg-none hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline cursor-pointer">
-          <span className="w-full font-medium text-center">{loc('PersonalScores')}</span>
+        <Link to="/user/scores" className={DESKTOP_DROPDOWN_ITEM}>
+          <BarChart3 className="w-8 h-8 text-white" />
+          <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("PersonalScores")}
+          </span>
         </Link>
-        <Link to="/user/charts" className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 bg-none hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline cursor-pointer">
-          <span className="w-full font-medium text-center">{loc('ChartsManagement')}</span>
+        <Link to="/user/charts" className={DESKTOP_DROPDOWN_ITEM}>
+          <Music className="w-8 h-8 text-white" />
+          <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("ChartsManagement")}
+          </span>
         </Link>
-        <Link to="/user/collections" className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 bg-none hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline cursor-pointer">
-          <span className="w-full font-medium text-center">{loc('MyCollections', '我的歌单')}</span>
+        <Link to="/user/collections" className={DESKTOP_DROPDOWN_ITEM}>
+          <FolderHeart className="w-8 h-8 text-white" />
+          <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("MyCollections", "我的歌单")}
+          </span>
         </Link>
-        <Link to="/user/profile" className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 bg-none hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline cursor-pointer">
-          <span className="w-full font-medium text-center">{loc('AccountSetting')}</span>
+        <Link to="/user/profile" className={DESKTOP_DROPDOWN_ITEM}>
+          <Settings className="w-8 h-8 text-white" />
+          <span className="text-2xl font-black text-white/50 group-hover:text-white [-webkit-text-stroke:0.4px_rgba(255,255,255,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("AccountSetting")}
+          </span>
         </Link>
         <div className={DIVIDER}></div>
-        <button onClick={handleLogout} className="flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-[rgb(239_68_68/25%)] hover:to-[rgb(220_38_38/20%)] bg-none hover:shadow-[0_2px_8px_rgb(239_68_68/20%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 border-none w-full font-medium text-[#e5e5e5] hover:text-[#fca5a5] text-sm text-center no-underline cursor-pointer">
-          <span className="w-full font-medium text-center">{loc('Logout')}</span>
+        <button onClick={handleLogout} className={DESKTOP_DROPDOWN_ITEM}>
+          <LogOut className="w-8 h-8 text-red-300" />
+          <span className="text-2xl font-black text-red-300/50 group-hover:text-red-300 [-webkit-text-stroke:0.4px_rgba(252,165,165,0.5)] group-hover:[-webkit-text-stroke:0] transition-all duration-300">
+            {loc("Logout")}
+          </span>
         </button>
       </Dropdown>
     </div>
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 3a3d842..35c27df 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -1,60 +1,82 @@
-import { Link } from 'react-router-dom';
-import { useLoc, useUserContext } from '@/hooks';
-import { LoadingSpinner } from '@/components';
-import MajdataLogo from './MajdataLogo';
-import DesktopNav from './DesktopNav';
-import MobileNav from './MobileNav';
-import UserMenu from './UserMenu';
-import AuthSection from './AuthSection';
+import { Link } from "react-router-dom";
+import { useUserContext } from "@/hooks";
+import { LoadingSpinner } from "@/components";
+import MajdataLogo from "./MajdataLogo";
+import DesktopNav from "./DesktopNav";
+import MobileNav from "./MobileNav";
+import UserMenu from "./UserMenu";
+import AuthSection from "./AuthSection";
 
 /**
  * 统一顶部导航栏组件
  * 包含Logo、导航菜单、用户下拉菜单、登录/注册
  */
 export default function UnifiedHeader() {
-  const loc = useLoc();
   const { user, isLoading, error } = useUserContext();
-  const username = user?.username || '';
+  const username = user?.username || "";
   const isLoggedIn = !!username && !error;
 
   return (
-    <header className="top-0 before:top-0 right-0 before:right-0 left-0 before:left-0 z-1000 fixed before:absolute bg-[rgb(8_10_15/30%)] before:bg-linear-to-r before:from-transparent before:via-[rgb(59_130_246/60%)] before:to-transparent before:opacity-60 shadow-[0_8px_40px_rgb(0_0_0/25%),0_2px_0_rgb(255_255_255/8%)_inset,0_4px_16px_rgb(59_130_246/8%)] backdrop-blur-[28px] backdrop-brightness-120 backdrop-saturate-180 border-white/12 border-b before:h-px before:content-['']">
-      <div className="flex justify-between items-center mx-auto my-2 md:my-4 px-10 max-w-350 h-12 md:h-16">
-        {/* 左侧区域：Logo + 导航 */}
-        <div className="flex flex-1 items-center gap-8">
-          {/* Logo Section */}
-          <div className="hidden md:flex items-center shrink-0">
-            <Link to="/" className="flex items-center no-underline">
-              <MajdataLogo />
-            </Link>
+    <>
+      {/* 移动端：顶部横条 */}
+      <header className="xl:hidden top-0 left-0 right-0 z-1000 fixed px-3 py-3 items-center">
+        <div className="flex items-center justify-between h-12 bg-[rgb(255_255_255/70%)] backdrop-blur-[20px] shadow-xl border border-black/8 rounded-2xl px-3">
+          <Link to="/" className="flex items-center shrink-0">
+            <img
+              className="rounded-[5px] w-8 h-8"
+              src="../../../salt.webp"
+              alt="xxlb"
+            />
+          </Link>
+          <div className="flex items-center gap-2">
+            {isLoading ? (
+              <LoadingSpinner className="animate-pulse" size={20} />
+            ) : isLoggedIn ? (
+              <UserMenu username={username} />
+            ) : (
+              <AuthSection />
+            )}
+            <MobileNav />
+          </div>
+        </div>
+      </header>
+
+      {/* 桌面端：左侧竖栏 */}
+      <header className="hidden xl:block left-0 top-0 bottom-0 z-1000 fixed">
+        <div className="relative flex flex-col h-full gap-1 px-3 py-4">
+          {/* 背景 SVG */}
+          <svg
+            className="absolute inset-0 w-full h-full pointer-events-none"
+            viewBox="0 0 100 1024"
+            preserveAspectRatio="none"
+          >
+            <path d="M0 0L99.5 1024L0 1024L0 0Z" fill="#5C8DC1" opacity="1" />
+          </svg>
+          {/* Logo */}
+          <div className="flex justify-center mb-2">
+            <MajdataLogo />
           </div>
 
-          {/* Main Navigation */}
+          {/* Navigation */}
           <DesktopNav />
-          <MobileNav />
-        </div>
 
-        {/* 移动端中间Logo */}
-        <div className="md:hidden left-1/2 absolute flex items-center h-8 -translate-x-1/2">
-          <Link to="/" className="flex items-center">
-            <img className="rounded-[5px] w-8 h-8" src="../../../salt.webp" alt="xxlb" />
-          </Link>
-        </div>
+          {/* Spacer */}
+          <div className="flex-1" />
 
-        {/* User Section */}
-        <div className="relative flex items-center rounded-[10px] shrink-0">
-          {isLoading ? (
-            <div className="flex items-center gap-2 opacity-70 px-3 md:px-4 py-2 md:py-3 border border-white/10 rounded-[10px] h-10 md:min-h-10 font-medium text-white/85 text-sm no-underline transition-all duration-200 cursor-default pointer-events-none">
-              <LoadingSpinner className="animate-pulse" size={25} />
-              <span className="hidden md:inline text-sm">{loc('Loading')}</span>
-            </div>
-          ) : isLoggedIn ? (
-            <UserMenu username={username} />
-          ) : (
-            <AuthSection />
-          )}
+          {/* User Section */}
+          <div className="flex justify-center">
+            {isLoading ? (
+              <div className="flex items-center gap-2 no-underline transition-all duration-200 cursor-default pointer-events-none">
+                <LoadingSpinner className="animate-pulse" size={20} />
+              </div>
+            ) : isLoggedIn ? (
+              <UserMenu username={username} />
+            ) : (
+              <AuthSection />
+            )}
+          </div>
         </div>
-      </div>
-    </header>
+      </header>
+    </>
   );
 }
diff --git a/src/components/header/styles.ts b/src/components/header/styles.ts
index d5cbc4a..4938582 100644
--- a/src/components/header/styles.ts
+++ b/src/components/header/styles.ts
@@ -3,23 +3,34 @@
  */
 
 // 通用按钮样式
-export const BUTTON_BASE = "flex items-center gap-2 px-4 py-3 rounded-lg font-medium text-sm no-underline";
+export const BUTTON_BASE =
+  "flex items-center gap-2 px-4 py-3 rounded-lg font-medium text-sm no-underline";
 
 // 导航链接样式
-export const NAV_LINK = "relative flex items-center gap-2 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:shadow-[0_4px_12px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-3 rounded-lg font-medium text-white/85 hover:text-white text-sm no-underline whitespace-nowrap";
+export const NAV_LINK =
+  "flex items-center gap-2 w-full px-4 py-3 font-medium text-gray-600 hover:text-[#5C8DC1] text-sm no-underline whitespace-nowrap transition-all duration-300 hover:scale-105 active:scale-95";
 
 // 下拉菜单项样式
-export const DROPDOWN_ITEM = "flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline";
+export const DROPDOWN_ITEM =
+  "flex items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 hover:shadow-[0_2px_8px_rgb(92_141_193/15%),0_1px_0_rgb(92_141_193/10%)_inset] px-5 py-4 font-medium text-gray-500 hover:text-[#5C8DC1] text-sm text-left no-underline";
+
+// 桌面侧边栏下拉菜单项样式
+export const DESKTOP_DROPDOWN_ITEM =
+  "flex flex-col items-center gap-1 px-3 py-3 no-underline font-medium text-sm relative bg-none cursor-pointer transition-all duration-300 hover:scale-105 active:scale-95 group w-full";
 
 // 汉堡菜单按钮样式
-export const HAMBURGER_BUTTON_BASE = "flex items-center justify-center gap-2 px-3 md:px-4 bg-white/5 border border-white/10 rounded-[10px] cursor-pointer text-[#e5e5e5] text-sm font-medium h-10 md:h-12 backdrop-blur-[10px]";
+export const HAMBURGER_BUTTON_BASE =
+  "flex items-center justify-center gap-2 px-3 md:px-4 rounded-[10px] cursor-pointer text-gray-600 text-sm font-medium h-10 md:h-12 backdrop-blur-[10px]";
 
-export const HAMBURGER_BUTTON_ACTIVE = "bg-linear-to-br from-white/15 to-white/10 border-white/30 shadow-[0_8px_25px_rgb(0_0_0/25%),0_1px_0_rgb(255_255_255/10%)_inset]";
+export const HAMBURGER_BUTTON_ACTIVE =
+  "bg-linear-to-br from-[#5C8DC1]/15 to-[#5C8DC1]/8 border-[#5C8DC1]/30 shadow-[0_8px_25px_rgb(0_0_0/10%),0_1px_0_rgb(92_141_193/15%)_inset]";
 
-export const HAMBURGER_BUTTON_HOVER = "hover:bg-linear-to-br hover:from-white/15 hover:to-white/10 hover:border-white/30 hover:shadow-[0_8px_25px_rgb(0_0_0/25%),0_1px_0_rgb(255_255_255/10%)_inset]";
+export const HAMBURGER_BUTTON_HOVER =
+  "hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 hover:border-[#5C8DC1]/20 hover:shadow-[0_8px_25px_rgb(0_0_0/8%),0_1px_0_rgb(92_141_193/10%)_inset]";
 
 // 移动端下拉菜单项样式
-export const MOBILE_DROPDOWN_ITEM = "flex justify-center items-center gap-3 hover:bg-linear-to-br hover:from-white/12 hover:to-white/8 hover:shadow-[0_2px_8px_rgb(255_255_255/10%),0_1px_0_rgb(255_255_255/10%)_inset] px-5 py-4 font-medium text-[#e5e5e5] hover:text-white text-sm text-center no-underline";
+export const MOBILE_DROPDOWN_ITEM =
+  "flex items-center gap-3 hover:bg-linear-to-br hover:from-[#5C8DC1]/10 hover:to-[#5C8DC1]/5 hover:shadow-[0_2px_8px_rgb(92_141_193/15%),0_1px_0_rgb(92_141_193/10%)_inset] px-5 py-4 font-medium text-gray-500 hover:text-[#5C8DC1] text-sm text-left no-underline";
 
 // 分隔线样式
-export const DIVIDER = "bg-white/10 my-2 h-px";
+export const DIVIDER = "bg-black/8 my-2 h-px";
diff --git a/src/components/layout/PageLayout.tsx b/src/components/layout/PageLayout.tsx
index 8f41608..44df28b 100644
--- a/src/components/layout/PageLayout.tsx
+++ b/src/components/layout/PageLayout.tsx
@@ -1,21 +1,20 @@
-import { Link } from 'react-router-dom';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { motion } from 'framer-motion';
-import { loc } from '@/utils';
-import { UnifiedHeader } from '@/components';
-import AmbientBackground from './AmbientBackground';
-import FloatingButtons from './FloatingButtons';
-import type { PageLayoutProps } from '@/types';
-
+import { Link } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { motion } from "framer-motion";
+import { loc } from "@/utils";
+import { UnifiedHeader } from "@/components";
+import AmbientBackground from "./AmbientBackground";
+import FloatingButtons from "./FloatingButtons";
+import type { PageLayoutProps } from "@/types";
 
 export default function PageLayout({
   children,
   showFooter = true,
-  showBackToHome = true,
+  showBackToHome = false,
   title = null,
-  className = '',
-  useAmbientBackground = true,
+  className = "",
+  useAmbientBackground = false,
 }: PageLayoutProps) {
   return (
     <>
@@ -33,15 +32,16 @@ export default function PageLayout({
       {title && (
         <section className="max-w-7xl mx-auto mt-(--content-top-spacing) mb-0 px-4">
           <motion.div
-            className="bg-[rgba(255,255,255,0.05)] shadow-2xl backdrop-blur-md p-8 border border-white/10 rounded-2xl text-center"
+            className="bg-white/80 shadow-2xl backdrop-blur-md p-8 border border-black/8 rounded-2xl text-center"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
           >
             <h1
-              className="m-0 font-bold text-[#e5e5e5] text-[2.5rem]"
+              className="m-0 font-bold text-gray-700 text-[2.5rem]"
               style={{
-                textShadow: '0 0 2px #a78bfa, 0 0 4px #60a5fa'
+                textShadow:
+                  "0 0 2px rgba(92,141,193,0.3), 0 0 4px rgba(92,141,193,0.2)",
               }}
             >
               {title}
@@ -51,15 +51,15 @@ export default function PageLayout({
       )}
 
       {/* Main Content */}
-      <main className={`max-w-7xl mx-auto mt-4 px-4 ${className}`}>{children}</main>
+      <main className={`mx-auto mt-4 px-4 ${className}`}>{children}</main>
 
       {/* Back to Home Section */}
       {showBackToHome && (
-        <section className="my-16 pt-8 border-white/10 border-t text-center">
+        <section className="my-16 pt-8 border-black/8 border-t text-center">
           <div className="mx-auto px-4 max-w-7xl">
             <Link to="/" className="no-underline">
-              <div className="inline-block bg-[rgba(25,25,30,0.9)] hover:bg-[rgba(35,35,40,0.95)] hover:shadow-[0_8px_20px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.2)] px-8 py-4 border border-white/10 hover:border-white/20 rounded-xl font-semibold text-[#e5e5e5] transition-all hover:-translate-y-0.5 duration-300">
-                {loc('BackToHome')}
+              <div className="inline-block bg-white/80 hover:bg-white/95 hover:shadow-[0_8px_20px_rgba(0,0,0,0.08),0_2px_8px_rgba(0,0,0,0.05)] px-8 py-4 border border-black/8 hover:border-[#5C8DC1]/20 rounded-xl font-semibold text-gray-700 transition-all hover:-translate-y-0.5 duration-300">
+                {loc("BackToHome")}
               </div>
             </Link>
           </div>
@@ -68,65 +68,68 @@ export default function PageLayout({
 
       {/* Footer */}
       {showFooter && (
-        <footer className="bg-linear-to-b from-[rgba(20,20,20,0.3)] to-[rgba(10,10,10,0.3)] backdrop-blur-[10px] mt-16 px-4 pt-12 pb-16 border-white/10 border-t text-center">
+        <footer className="mt-16 px-4 pt-12 pb-16 text-center">
           {/* Footer Content */}
           <div className="flex flex-col items-center gap-3 mb-8">
             {/* Copyright */}
-            <div className="font-semibold text-white/90 text-sm text-center">
-              {loc('FooterCopyright')}
+            <div className="font-semibold text-gray-700 text-sm text-center">
+              {loc("FooterCopyright")}
             </div>
 
             {/* Open Source Info */}
-            <div className="text-[0.85rem] text-white/80 text-center">
+            <div className="text-[0.85rem] text-gray-600 text-center">
               <a
                 href="https://github.com/TeamMajdata/MajdataNet"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-400/90 hover:text-blue-400 no-underline transition-all duration-300"
+                className="text-[#5C8DC1] hover:text-[#4A7DAF] no-underline transition-all duration-300"
                 style={{
-                  textShadow: 'none'
+                  textShadow: "none",
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.textShadow = '0 0 8px rgba(59, 130, 246, 0.4)';
+                  e.currentTarget.style.textShadow =
+                    "0 0 8px rgba(92, 141, 193, 0.4)";
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.textShadow = 'none';
+                  e.currentTarget.style.textShadow = "none";
                 }}
               >
                 GitHub
               </a>
-              {' | '}
+              {" | "}
               <a
                 href="https://discord.gg/AcWgZN7j6K"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-400/90 hover:text-blue-400 no-underline transition-all duration-300"
+                className="text-[#5C8DC1] hover:text-[#4A7DAF] no-underline transition-all duration-300"
                 style={{
-                  textShadow: 'none'
+                  textShadow: "none",
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.textShadow = '0 0 8px rgba(59, 130, 246, 0.4)';
+                  e.currentTarget.style.textShadow =
+                    "0 0 8px rgba(92, 141, 193, 0.4)";
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.textShadow = 'none';
+                  e.currentTarget.style.textShadow = "none";
                 }}
               >
                 Discord
               </a>
-              {' | '}
+              {" | "}
               <a
                 href="https://qun.qq.com/universal-share/share?ac=1&authKey=2m%2BXMJ2NrjiomE9CYBVp6ys1K9SjAJ3kl%2B3OCfVEff4ffLj3Z%2BYXJIBXbWJrdGvJ&busi_data=eyJncm91cENvZGUiOiI2Njc2NDQzMzgiLCJ0b2tlbiI6IjV0VTk1STl1Ti9RbmhvR0lHdVdySVVpR09DWFk3Y1JGelY0Qlg2YWFmYkxjYlhWZzZraDFUWTlyNHI5N243cG8iLCJ1aW4iOiIxMzIzMjkxMDk0In0%3D&data=oyLVI6BKjGNDg5-SEEe1Qw_DjQ3EnQSayTWrGQBDgGTxOw0_YffoTI_g4KQ3cJLbkkwkmzUxY3cWDqnRk-NTyw&svctype=4&tempid=h5_group_info"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-blue-400/90 hover:text-blue-400 no-underline transition-all duration-300"
+                className="text-[#5C8DC1] hover:text-[#4A7DAF] no-underline transition-all duration-300"
                 style={{
-                  textShadow: 'none'
+                  textShadow: "none",
                 }}
                 onMouseEnter={(e) => {
-                  e.currentTarget.style.textShadow = '0 0 8px rgba(59, 130, 246, 0.4)';
+                  e.currentTarget.style.textShadow =
+                    "0 0 8px rgba(92, 141, 193, 0.4)";
                 }}
                 onMouseLeave={(e) => {
-                  e.currentTarget.style.textShadow = 'none';
+                  e.currentTarget.style.textShadow = "none";
                 }}
               >
                 QQ
@@ -134,8 +137,8 @@ export default function PageLayout({
             </div>
 
             {/* Community */}
-            <div className="text-white/70 text-xs text-center italic">
-              {loc('FooterCommunity')}
+            <div className="text-gray-500 text-xs text-center italic">
+              {loc("FooterCommunity")}
             </div>
           </div>
 
@@ -145,10 +148,10 @@ export default function PageLayout({
             className="group inline-block relative mt-8 hover:rotate-2 hover:scale-110 transition-all duration-300"
           >
             <img
-              className="group-hover:shadow-[0_8px_20px_rgba(59,130,246,0.3)] rounded-xl w-30 h-auto transition-all duration-300"
+              className="group-hover:shadow-[0_8px_20px_rgba(92,141,193,0.3)] rounded-xl w-30 h-auto transition-all duration-300"
               loading="lazy"
               src="/bee.webp"
-              alt={loc('MiniGame')}
+              alt={loc("MiniGame")}
             />
           </Link>
         </footer>
@@ -168,7 +171,7 @@ export default function PageLayout({
         pauseOnFocusLoss
         draggable
         pauseOnHover
-        theme="dark"
+        theme="light"
       />
     </>
   );
diff --git a/src/components/score/InteractCount.tsx b/src/components/score/InteractCount.tsx
index 0f8de89..7338036 100644
--- a/src/components/score/InteractCount.tsx
+++ b/src/components/score/InteractCount.tsx
@@ -1,6 +1,7 @@
-import useSWR from 'swr';
-import { endpoints } from '@/config/api';
-import type { InteractCountProps, InteractData } from '@/types';
+import useSWR from "swr";
+import { endpoints } from "@/config/api";
+import { Play, ThumbsUp, MessageCircle } from "lucide-react";
+import type { InteractCountProps, InteractData } from "@/types";
 
 const fetcher = async (...args: [RequestInfo, RequestInit?]) =>
   await fetch(...args).then(async (res) => res.json());
@@ -12,7 +13,7 @@ const fetcher = async (...args: [RequestInfo, RequestInit?]) =>
 export default function InteractCount({ songid }: InteractCountProps) {
   const { data, error, isLoading } = useSWR<InteractData>(
     endpoints.maichart.interactsum(songid),
-    fetcher
+    fetcher,
   );
 
   if (error) return <div></div>;
@@ -25,61 +26,47 @@ export default function InteractCount({ songid }: InteractCountProps) {
 
   // 播放数大于1000时显示为 k
   if (playcount > 1000) {
-    playcount = (playcount / 1000).toFixed(1) + 'k';
+    playcount = (playcount / 1000).toFixed(1) + "k";
   }
 
   // 点赞或评论数 >= 5 时高亮显示
-  const likeStyle = likecount >= 5
-    ? { background: 'gold', borderRadius: '5px', fill: 'black' }
-    : { background: 'transparent' };
-
-  const commentStyle = commentcount >= 5
-    ? { background: 'gold', borderRadius: '5px', fill: 'black' }
-    : { background: 'transparent' };
+  const likeHighlight = likecount >= 5;
+  const commentHighlight = commentcount >= 5;
 
   return (
-    <div>
+    <div className="flex items-center gap-2.5">
       {/* 播放次数 */}
-      <div className="float-left mt-2 ml-0.5 w-[1.3rem] h-[1.3rem] text-[0.8rem] text-center">
-        {playcount}
+      <div className="flex items-center gap-0.5 text-[#5C8DC1]">
+        <Play size={12} />
+        <span className="text-[0.75rem] text-gray-500 font-medium">
+          {playcount}
+        </span>
       </div>
 
-      {/* 点赞图标 */}
-      <div className="float-left mt-2 ml-0.5 w-[1.3rem] h-[1.3rem]">
-        <svg
-          className="fill-white stroke-white p-0.5 w-full h-full"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 -960 960 960"
-          width="24"
-          style={likeStyle}
+      {/* 点赞 */}
+      <div className="flex items-center gap-0.5">
+        <ThumbsUp
+          size={12}
+          className={likeHighlight ? "text-yellow-500" : "text-[#5C8DC1]"}
+        />
+        <span
+          className={`text-[0.75rem] font-medium ${likeHighlight ? "text-yellow-600" : "text-gray-500"}`}
         >
-          <path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z" />
-        </svg>
-      </div>
-
-      {/* 点赞数 */}
-      <div className="float-left mt-2 ml-0.5 w-[1.3rem] h-[1.3rem] text-[0.8rem] text-center">
-        {likecount}
+          {likecount}
+        </span>
       </div>
 
-      {/* 评论图标 */}
-      <div className="float-left mt-2 ml-0.5 w-[1.3rem] h-[1.3rem]">
-        <svg
-          className="fill-white stroke-white p-0.5 w-full h-full"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          viewBox="0 -960 960 960"
-          width="24"
-          style={commentStyle}
+      {/* 评论 */}
+      <div className="flex items-center gap-0.5">
+        <MessageCircle
+          size={12}
+          className={commentHighlight ? "text-yellow-500" : "text-[#5C8DC1]"}
+        />
+        <span
+          className={`text-[0.75rem] font-medium ${commentHighlight ? "text-yellow-600" : "text-gray-500"}`}
         >
-          <path d="M80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z" />
-        </svg>
-      </div>
-
-      {/* 评论数 */}
-      <div className="float-left mt-2 ml-0.5 w-[1.3rem] h-[1.3rem] text-[0.8rem] text-center">
-        {commentcount}
+          {commentcount}
+        </span>
       </div>
     </div>
   );
diff --git a/src/components/score/Levels.tsx b/src/components/score/Levels.tsx
index bbce764..4ac1bfb 100644
--- a/src/components/score/Levels.tsx
+++ b/src/components/score/Levels.tsx
@@ -1,45 +1,43 @@
-import { makeLevelClickCallback } from '@/utils/scrollUtils';
-import { renderLevel } from '@/utils/renderLevel';
-import type { LevelsProps } from '@/types';
-import { motion } from 'framer-motion';
+import { makeLevelClickCallback } from "@/utils/scrollUtils";
+import { renderLevel } from "@/utils/renderLevel";
+import type { LevelsProps } from "@/types";
 
-// 难度等级背景色映射
 const levelColors: Record<number, string> = {
-  0: 'bg-[rgb(111_171_250)]', // Easy
-  1: 'bg-[rgb(93_212_93)]',   // Basic
-  2: 'bg-[rgb(202_202_84)]',  // Advanced
-  3: 'bg-[rgb(255_91_91)]',   // Expert
-  4: 'bg-[rgb(134_23_134)]',  // Master
-  5: 'bg-[rgb(189_63_189)]',  // ReMaster
-  6: 'bg-[rgb(255_145_0)]',   // Utage
+  0: "rgba(56,189,248,0.8)",
+  1: "rgba(52,211,153,0.8)",
+  2: "rgba(251,191,36,0.8)",
+  3: "rgba(244,63,94,0.8)",
+  4: "rgba(217,70,239,0.8)",
+  5: "rgba(139,92,246,0.8)",
+  6: "rgba(249,115,22,0.8)",
 };
 
-/**
- * 多难度等级列表组件
- * 显示所有可用的难度等级（最多7个）
- */
-export default function Levels({ levels, songid, isPlayer = false }: LevelsProps) {
-  // 预处理等级数组，将空值替换为 "-"
-  const processedLevels = levels.map((level) => 
-    (level == null || level === '') ? '-' : level
+export default function Levels({
+  levels,
+  songid,
+  isPlayer = false,
+}: LevelsProps) {
+  const processedLevels = levels.map((level) =>
+    level == null || level === "" ? "-" : level,
   );
 
   const levelClickCallback = makeLevelClickCallback(songid, isPlayer);
 
-  // 难度顺序：0=Easy, 1=Basic, 2=Advanced, 3=Expert, 4=Master, 5=ReMaster, 6=Utage
   return (
     <div>
       {processedLevels.map((level, index) => (
-        <motion.div
+        <div
           key={index}
-          className={`float-left text-center rounded-[5px] font-bold m-[0.1rem] w-[1.3rem] h-[1.3rem] text-[0.65rem] leading-[1.2rem] border border-gray-500 overflow-hidden cursor-pointer select-none ${levelColors[index] || ''}`}
-          style={{ display: level === '-' ? 'none' : 'unset' }}
+          className="inline-flex items-center justify-center rounded-full w-8 h-8 cursor-pointer select-none"
+          style={{
+            display: level === "-" ? "none" : "inline-flex",
+            color: "#fff",
+            backgroundColor: levelColors[index] || "rgba(209,213,219,0.8)",
+          }}
           onClick={levelClickCallback}
-          whileHover={{ scale: 1.1, filter: 'brightness(1.2)' }}
-          transition={{ duration: 0.125, ease: 'easeInOut' }}
         >
           {renderLevel(level)}
-        </motion.div>
+        </div>
       ))}
     </div>
   );
diff --git a/src/components/song/SongCard.tsx b/src/components/song/SongCard.tsx
index bf6a260..e605cf6 100644
--- a/src/components/song/SongCard.tsx
+++ b/src/components/song/SongCard.tsx
@@ -2,17 +2,23 @@
  * SongCard 组件 - 单曲卡片
  * 从 SongList 中提取，用于展示单首歌曲信息
  */
-
-import { memo, useCallback } from 'react';
-import { toast } from 'react-toastify';
-import { motion } from 'framer-motion';
-import { CoverPic, InteractCount, Levels, TagManageWidget, LazyLoad, Tooltip } from '@/components';
-import { endpoints } from '@/config/api';
-import { downloadSong } from '@/utils/download';
-import { stripTmpTags, parseTmpRichText } from '@/utils/richTextUtils';
-import type { Song } from '@/types';
-import { Link } from 'react-router-dom';
-
+import { memo, useCallback, useMemo } from "react";
+import { toast } from "react-toastify";
+import { motion } from "framer-motion";
+import {
+  CoverPic,
+  InteractCount,
+  Levels,
+  TagManageWidget,
+  LazyLoad,
+  Tooltip,
+} from "@/components";
+import { endpoints } from "@/config/api";
+import { downloadSong } from "@/utils/download";
+import { stripTmpTags, parseTmpRichText } from "@/utils/richTextUtils";
+import type { Song } from "@/types";
+import { Download, Trash2 } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
 interface SongCardProps {
   song: Song;
   index: number;
@@ -22,132 +28,158 @@ interface SongCardProps {
   disableLink?: boolean;
   onClick?: (song: Song) => void;
 }
-
-const SongCard = memo(function SongCard({ song, index, isRanking, isManage, page, disableLink, onClick }: SongCardProps) {
+const SongCard = memo(function SongCard({
+  song,
+  index,
+  isRanking,
+  isManage,
+  page,
+  disableLink,
+  onClick,
+}: SongCardProps) {
+  const navigate = useNavigate();
   const savePosition = useCallback(() => {
     if (page == null) return;
-    localStorage.setItem('lastclickid', song.id);
-    localStorage.setItem('lastclickpage', page.toString());
+    localStorage.setItem("lastclickid", song.id);
+    localStorage.setItem("lastclickpage", page.toString());
   }, [song.id, page]);
-
   const handleClick = useCallback(() => {
     if (onClick) {
       onClick(song);
-    } else {
+    } else if (!disableLink) {
       savePosition();
+      navigate("/song?id=" + song.id);
     }
-  }, [onClick, song, savePosition]);
-
-  const handleDownload = useCallback(async (e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    await downloadSong({ id: song.id, title: stripTmpTags(song.title), toast });
-  }, [song.id, song.title]);
-
+  }, [onClick, song, savePosition, navigate, disableLink]);
+  const handleDownload = useCallback(
+    async (e?: React.MouseEvent) => {
+      e?.stopPropagation();
+      await downloadSong({
+        id: song.id,
+        title: stripTmpTags(song.title),
+        toast,
+      });
+    },
+    [song.id, song.title],
+  );
+  const titleRotation = useMemo(() => -(1 + (index % 5) * 0.4), [index]);
   const link = (to: string, children: React.ReactNode) =>
-    disableLink || onClick ? <span>{children}</span> : <Link to={to}>{children}</Link>;
-
+    disableLink || onClick ? (
+      <span>{children}</span>
+    ) : (
+      <Link to={to}>{children}</Link>
+    );
   return (
     <div
       id={song.id}
       onClick={handleClick}
-      className="flex max-[480px]:flex-[1_1_100%] max-[768px]:flex-[1_1_150px] justify-center w-full"
+      className="flex justify-center hover:z-1001"
     >
-      <LazyLoad height={165} width={352} offset={300}>
-        <div className="bg-[rgb(var(--background-start)/0.8)] shadow-[0_20px_60px_rgb(0_0_0/40%),0_8px_32px_rgb(0_0_0/20%),0_2px_0_rgb(255_255_255/8%)_inset] m-auto p-[0.8rem] rounded-[10px] w-[20rem] h-40 overflow-hidden transition-transform hover:-translate-y-1.25 duration-250 ease-in-out">
-          {isRanking ? (
-            <CoverPic id={song.id} display={'No.' + (index + 1)} />
-          ) : (
-            <CoverPic id={song.id} />
-          )}
-
-          <div className="ml-[8.9rem]">
+      <LazyLoad height={165} width={165} offset={300}>
+        <div className="flex gap-3 w-68 h-70 overflow-visible transition-transform hover:-translate-y-1.25 duration-250 ease-in-out">
+          <div className="relative shrink-0 w-52 aspect-square">
+            {isRanking ? (
+              <CoverPic id={song.id} display={"No." + (index + 1)} />
+            ) : (
+              <CoverPic id={song.id} />
+            )}
             <Tooltip content={stripTmpTags(song.title)}>
-              <div className="mb-1.25 font-bold text-base truncate" id={song.id}>
-                {link('/song?id=' + song.id, parseTmpRichText(song.title))}
+              <div
+                className="absolute bottom-20 left-1/2 bg-white rounded-full w-64 shadow-md border border-gray-200 px-3 py-1.5 z-11"
+                style={{
+                  transform: `translateX(-50%) rotate(${titleRotation}deg)`,
+                }}
+                id={song.id}
+              >
+                <div className="font-bold text-sm truncate text-center leading-tight">
+                  {parseTmpRichText(song.title)}
+                </div>
               </div>
             </Tooltip>
             <Tooltip content={song.artist}>
-              <div className="mb-[0.3rem] text-[0.8rem] truncate italic">
-                {link('/song?id=' + song.id, song.artist === '' || song.artist == null ? '-' : song.artist)}
+              <div className="absolute bottom-12 left-1/2 -translate-x-1/2 bg-white rounded-full w-56 shadow-md border border-gray-200 px-3 py-1 z-10 rotate-2">
+                <div className="text-xs text-gray-500 truncate text-center leading-tight">
+                  {link(
+                    "/song?id=" + song.id,
+                    song.artist === "" || song.artist == null
+                      ? "-"
+                      : song.artist,
+                  )}
+                </div>
               </div>
             </Tooltip>
-            <Tooltip content={song.uploader + '@' + song.designer}>
-              <div className="mb-2 text-[0.8rem] truncate">
-                {link('/space?id=' + song.uploader, song.uploader + '@' + song.designer)}
+            <Tooltip content={song.uploader + "@" + song.designer}>
+              <div className="absolute bottom-8 left-1/2 -translate-x-1/2 bg-white rounded-full w-48 shadow-md border border-gray-200 px-3 py-0.5 z-10 rotate-1">
+                <div className="text-[10px] text-gray-400 truncate text-center leading-tight">
+                  {link(
+                    "/space?id=" + song.uploader,
+                    song.uploader + "@" + song.designer,
+                  )}
+                </div>
               </div>
             </Tooltip>
-            {isManage ? (
-              <>
-                {' '}
-                <Delbutton songid={song.id} />
-                <TagManageWidget newClassName="mt-[0.1rem]" songid={song.id} />
-              </>
-            ) : (
-              <Levels levels={song.levels} songid={song.id} isPlayer={false} />
-            )}
-
-            <br />
             <motion.div
-              className="float-left m-[0.1rem] mt-2 border border-gray-500 rounded-[5px] w-[1.3rem] h-[1.3rem] overflow-hidden font-bold text-[0.65rem] text-center leading-[1.2rem] cursor-pointer select-none"
+              className="absolute bottom-13 -right-13 z-10 flex items-center justify-center hover:bg-white border border-white/60 hover:border-[#5C8DC1]/30 w-12 h-12 rounded-full cursor-pointer select-none text-[#5C8DC1] hover:text-[#4A7DAF] backdrop-blur-[2px]"
               onClick={handleDownload}
-              whileHover={{ scale: 1.1, filter: 'brightness(1.2)' }}
-              transition={{ duration: 0.125, ease: 'easeInOut' }}
+              whileHover={{ scale: 1.1 }}
+              transition={{ duration: 0.125, ease: "easeInOut" }}
             >
-              <svg
-                className="fill-white stroke-white w-full h-full"
-                xmlns="http://www.w3.org/2000/svg"
-                height="24"
-                viewBox="0 -960 960 960"
-                width="24"
-              >
-                <path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
-              </svg>
+              <Download size={12} />
             </motion.div>
-            <InteractCount songid={song.id} />
+            <div className="absolute -top-4 left-0 -translate-x-1/2 z-10 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 shadow-md border border-gray-200">
+              <InteractCount songid={song.id} />
+            </div>
+            <div className="absolute bottom-26 left-24 w-60 -translate-x-1/2 z-10">
+              {isManage ? (
+                <div className="flex items-center gap-1">
+                  <Delbutton songid={song.id} />
+                  <TagManageWidget
+                    newClassName="mt-[0.1rem]"
+                    songid={song.id}
+                  />
+                </div>
+              ) : (
+                <Levels
+                  levels={song.levels}
+                  songid={song.id}
+                  isPlayer={false}
+                />
+              )}
+            </div>
           </div>
         </div>
       </LazyLoad>
     </div>
   );
 });
-
 export default SongCard;
 
 const Delbutton = memo(function Delbutton({ songid }: { songid: string }) {
   const handleDelete = useCallback(async () => {
-    const ret = confirm('真的要删除吗(不可恢复)\n(没有任何机会)');
+    const ret = confirm("真的要删除吗(不可恢复)\n(没有任何机会)");
     if (!ret) return;
     const response = await fetch(endpoints.maichart.delete(songid), {
-      method: 'POST',
-      mode: 'cors',
-      credentials: 'include',
+      method: "POST",
+      mode: "cors",
+      credentials: "include",
     });
     if (response.status !== 200) {
       alert(await response.text());
       return;
     }
-    alert('删除成功');
-    if (typeof window !== 'undefined') {
+    alert("删除成功");
+    if (typeof window !== "undefined") {
       location.reload();
     }
   }, [songid]);
-
   return (
     <motion.div
-      className="float-left m-[0.1rem] border border-gray-500 rounded-[5px] w-[1.3rem] h-[1.3rem] overflow-hidden font-bold text-[0.65rem] text-center leading-[1.2rem] cursor-pointer select-none"
-      whileHover={{ scale: 1.1, filter: 'brightness(1.2)' }}
-      transition={{ duration: 0.125, ease: 'easeInOut' }}
+      className="float-left m-[0.1rem] flex items-center justify-center border border-gray-200 hover:border-[#5C8DC1]/30 rounded-[5px] w-[1.3rem] h-[1.3rem] cursor-pointer select-none text-[#5C8DC1]"
+      whileHover={{ scale: 1.1 }}
+      transition={{ duration: 0.125, ease: "easeInOut" }}
       onClick={handleDelete}
     >
-      <svg
-        className="fill-white stroke-white p-0.75 w-full h-full"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24"
-        width="24"
-        viewBox="-30 -30 512 512"
-      >
-        <path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z" />
-      </svg>
+      <Trash2 size={12} />
     </motion.div>
   );
 });
diff --git a/src/components/song/SongDifficultyLevels.tsx b/src/components/song/SongDifficultyLevels.tsx
index 6b84e61..38e8eac 100644
--- a/src/components/song/SongDifficultyLevels.tsx
+++ b/src/components/song/SongDifficultyLevels.tsx
@@ -3,22 +3,22 @@
  * 迁移自 legacy/src/app/song/SongDifficultyLevels.jsx
  */
 
-import React from 'react';
-import { renderLevel } from '@/utils/renderLevel';
-import type { SongDifficultyLevelsProps } from '@/types';
+import React from "react";
+import { renderLevel } from "@/utils/renderLevel";
+import type { SongDifficultyLevelsProps } from "@/types";
 
 export default function SongDifficultyLevels({
   levels,
   songid,
-  isPlayer = false
+  isPlayer = false,
 }: SongDifficultyLevelsProps) {
   // 处理空值
   if (!levels || !Array.isArray(levels)) {
     return <div>No difficulty levels available</div>;
   }
   const processedLevels = levels.map((level) => {
-    if (level == null || level === '') {
-      return '-';
+    if (level == null || level === "") {
+      return "-";
     }
     return level;
   });
@@ -31,65 +31,68 @@ export default function SongDifficultyLevels({
 
     // 使用全局的 window.unitySendMessage (Majdata组件会设置)
     if (window.unitySendMessage) {
-      const httpprefix = location.protocol + '//' + location.host;
-      let root = '/api3/api';
-      if (!root.startsWith('http')) {
+      const httpprefix = location.protocol + "//" + location.host;
+      let root = "/api3/api";
+      if (!root.startsWith("http")) {
         root = httpprefix + root;
       }
-      const maichart = root + '/maichart/' + songid;
-      const maidata = maichart + '/chart';
-      const track = maichart + '/track';
-      const bg = maichart + '/image?fullImage=true';
-      const mv = maichart + '/video';
+      const maichart = root + "/maichart/" + songid;
+      const maidata = maichart + "/chart";
+      const track = maichart + "/track";
+      const bg = maichart + "/image?fullImage=true";
+      const mv = maichart + "/video";
       window.unitySendMessage(
-        'HandleJSMessages',
-        'ReceiveMessage',
-        `${maidata}\n${track}\n${bg}\n${mv}\n${id}`
+        "HandleJSMessages",
+        "ReceiveMessage",
+        `${maidata}\n${track}\n${bg}\n${mv}\n${id}`,
       );
     }
   };
 
   // 难度名称映射
   const levelNames = [
-    'Easy',
-    'Basic',
-    'Advanced',
-    'Expert',
-    'Master',
-    'Re:Master',
-    'UTAGE',
+    "Easy",
+    "Basic",
+    "Advanced",
+    "Expert",
+    "Master",
+    "Re:Master",
+    "UTAGE",
   ];
 
-  // 难度渐变背景映射
+  // 难度渐变背景映射（清新亮色）
   const levelGradients = [
-    'linear-gradient(90deg, rgb(59 130 246 / 60%), rgb(59 130 246 / 40%))',
-    'linear-gradient(90deg, rgb(34 197 94 / 60%), rgb(34 197 94 / 40%))',
-    'linear-gradient(90deg, rgb(234 179 8 / 60%), rgb(234 179 8 / 40%))',
-    'linear-gradient(90deg, rgb(239 68 68 / 60%), rgb(239 68 68 / 40%))',
-    'linear-gradient(90deg, rgb(168 85 247 / 60%), rgb(168 85 247 / 40%))',
-    'linear-gradient(90deg, rgb(192 38 211 / 60%), rgb(192 38 211 / 40%))',
-    'linear-gradient(90deg, rgb(139 92 246 / 60%), rgb(139 92 246 / 40%))',
+    "linear-gradient(90deg, rgb(147 197 253 / 50%), rgb(191 219 254 / 30%))",
+    "linear-gradient(90deg, rgb(134 239 172 / 50%), rgb(187 247 208 / 30%))",
+    "linear-gradient(90deg, rgb(253 224 71 / 50%), rgb(254 240 138 / 30%))",
+    "linear-gradient(90deg, rgb(252 165 165 / 50%), rgb(254 202 202 / 30%))",
+    "linear-gradient(90deg, rgb(196 181 253 / 50%), rgb(221 214 254 / 30%))",
+    "linear-gradient(90deg, rgb(244 168 222 / 50%), rgb(249 199 239 / 30%))",
+    "linear-gradient(90deg, rgb(199 210 254 / 50%), rgb(224 231 255 / 30%))",
   ];
 
   return (
     <div className="flex flex-row flex-wrap gap-2 w-auto">
       {processedLevels.map((level, index) => {
-        if (level === '-') return null;
+        if (level === "-") return null;
 
         return (
           <div
             key={index}
-            className={`flex flex-row items-center justify-between gap-3 px-4 py-2 rounded w-40 shrink-0 transition-all duration-200 ease-out min-h-10 ${isPlayer ? 'cursor-pointer hover:translate-x-1 hover:shadow-lg' : ''
-              }`}
+            className={`flex flex-row items-center justify-between gap-3 px-4 py-2 rounded-full w-40 shrink-0 transition-all duration-200 ease-out min-h-10 ${
+              isPlayer
+                ? "cursor-pointer hover:translate-x-1 hover:shadow-lg"
+                : ""
+            }`}
             style={{ background: levelGradients[index] }}
             id={`lv${index}`}
             onClick={levelClickCallback}
             title={`${levelNames[index]} ${level}`}
           >
-            <span className="flex-1 font-semibold text-white text-xs uppercase tracking-wide">
+            <span className="flex-1 font-semibold text-gray-700 text-xs uppercase tracking-wide">
               {levelNames[index]}
             </span>
-            <span className="min-w-8 font-black text-white text-2xl text-right" style={{ textShadow: '0 2px 8px rgb(0 0 0 / 0.4)' }}>
+            <span className="min-w-8 font-bold text-gray-800 text-2xl text-right">
               {renderLevel(level)}
             </span>
           </div>
diff --git a/src/components/song/SongList.tsx b/src/components/song/SongList.tsx
index f2d4829..df79770 100644
--- a/src/components/song/SongList.tsx
+++ b/src/components/song/SongList.tsx
@@ -3,17 +3,25 @@
  * 迁移自 legacy/src/app/widgets/SongList.jsx
  */
 
-import useSWR from 'swr';
-import { useLoc } from '@/hooks';
-import SongCard from './SongCard';
-import { LoadingSpinner } from '@/components';
-import type { Song, SongListProps } from '@/types';
-
+import useSWR from "swr";
+import { useLoc } from "@/hooks";
+import SongCard from "./SongCard";
+import { LoadingSpinner } from "@/components";
+import type { Song, SongListProps } from "@/types";
 
 const fetcher = (url: string) =>
-  fetch(url, { mode: 'cors', credentials: 'include' }).then((res) => res.json());
+  fetch(url, { mode: "cors", credentials: "include" }).then((res) =>
+    res.json(),
+  );
 
-export default function SongList({ url, setMax, page, isRanking, isManage, onDataLoaded }: SongListProps) {
+export default function SongList({
+  url,
+  setMax,
+  page,
+  isRanking,
+  isManage,
+  onDataLoaded,
+}: SongListProps) {
   const loc = useLoc();
 
   const { data, error, isLoading } = useSWR<Song[]>(url, fetcher, {
@@ -23,10 +31,17 @@ export default function SongList({ url, setMax, page, isRanking, isManage, onDat
     },
   });
 
-  if (error) return <div className="m-auto w-full text-[50px] text-center">{loc('ServerError', '服务器错误')}</div>;
+  if (error)
+    return (
+      <div className="m-auto w-full text-[50px] text-center">
+        {loc("ServerError", "服务器错误")}
+      </div>
+    );
   if (isLoading) {
     return (
-      <div className="flex justify-center items-center py-20 w-full"><LoadingSpinner size="50px" /></div>
+      <div className="flex justify-center items-center py-20 w-full">
+        <LoadingSpinner size="50px" />
+      </div>
     );
   }
 
@@ -35,11 +50,15 @@ export default function SongList({ url, setMax, page, isRanking, isManage, onDat
   }
 
   if (!data || !Array.isArray(data) || data.length === 0) {
-    return <div className="m-auto w-full text-[50px] text-center">{loc('EmptyData', '暂无数据')}</div>;
+    return (
+      <div className="m-auto w-full text-[50px] text-center">
+        {loc("EmptyData", "暂无数据")}
+      </div>
+    );
   }
 
   return (
-    <div className="justify-center gap-[0.6rem] grid grid-cols-[repeat(auto-fit,minmax(20rem,20.6rem))] mx-auto p-2 w-full max-w-350">
+    <div className="flex flex-wrap justify-center gap-4 mx-auto p-2 w-full">
       {data.map((song, index) => (
         <SongCard
           key={song.id}
diff --git a/src/components/ui/CoverPic.tsx b/src/components/ui/CoverPic.tsx
index f4d5b6f..31741e4 100644
--- a/src/components/ui/CoverPic.tsx
+++ b/src/components/ui/CoverPic.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
-import { endpoints } from '@/config/api';
-import { PhotoProvider, PhotoView } from 'react-photo-view';
-import 'react-photo-view/dist/react-photo-view.css';
-import type { CoverPicProps } from '@/types';
-import LoadingSpinner from './LoadingSpinner';
+import { useState } from "react";
+import { endpoints } from "@/config/api";
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import "react-photo-view/dist/react-photo-view.css";
+import type { CoverPicProps } from "@/types";
+import LoadingSpinner from "./LoadingSpinner";
 
 /**
  * 谱面封面图片组件
@@ -15,7 +15,11 @@ export default function CoverPic({ id, display }: CoverPicProps) {
   const url = endpoints.maichart.image(id);
   const urlfull = endpoints.maichart.fullImage(id);
 
-  const idDisplay = display ? <div className="z-1 absolute bg-black/80 pr-1 pl-0.75 rounded-tl-[10px] rounded-br-[10px] select-none">{display}</div> : null;
+  const idDisplay = display ? (
+    <div className="z-1 absolute bg-black/80 pr-1 pl-0.75 rounded-tl-[10px] rounded-br-[10px] select-none">
+      {display}
+    </div>
+  ) : null;
 
   return (
     <>
@@ -25,7 +29,7 @@ export default function CoverPic({ id, display }: CoverPicProps) {
       >
         <PhotoView src={urlfull}>
           <img
-            className={`float-left rounded-[10px] h-full aspect-square object-cover cursor-pointer transition-opacity duration-300 ease-in-out ${isLoaded ? 'opacity-100' : 'opacity-0'}`}
+            className={`float-left rounded-full w-full aspect-square object-cover cursor-pointer ring-9 shadow-2xl ring-white transition-opacity duration-300 ease-in-out ${isLoaded ? "opacity-100" : "opacity-0"}`}
             decoding="async"
             loading="lazy"
             src={url}
diff --git a/src/components/ui/Tooltip.tsx b/src/components/ui/Tooltip.tsx
index 39318e0..986bdec 100644
--- a/src/components/ui/Tooltip.tsx
+++ b/src/components/ui/Tooltip.tsx
@@ -2,16 +2,16 @@
  * Tooltip 通用组件 - 基于 Radix UI
  */
 
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { type ReactNode, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type ReactNode, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 export const TooltipProvider = TooltipPrimitive.Provider;
 
 interface TooltipProps extends TooltipPrimitive.TooltipProps {
   content: ReactNode;
   children: ReactNode;
-  side?: 'top' | 'bottom' | 'left' | 'right';
+  side?: "top" | "bottom" | "left" | "right";
   sideOffset?: number;
   /** plain=true 时不添加默认样式，适用于内容本身已有完整样式的场景 */
   plain?: boolean;
@@ -20,7 +20,7 @@ interface TooltipProps extends TooltipPrimitive.TooltipProps {
 export default function Tooltip({
   content,
   children,
-  side = 'top',
+  side = "top",
   sideOffset = 6,
   plain = false,
   ...props
@@ -37,7 +37,7 @@ export default function Tooltip({
       <TooltipPrimitive.Trigger
         asChild
         onClick={() => {
-          setOpen(prev => !prev);
+          setOpen((prev) => !prev);
         }}
         onFocus={() => setOpen(true)}
         onBlur={() => setOpen(false)}
@@ -56,11 +56,11 @@ export default function Tooltip({
                 initial={{ opacity: 0, y: 4, scale: 0.95 }}
                 animate={{ opacity: 1, y: 0, scale: 1 }}
                 exit={{ opacity: 0, y: 4, scale: 0.95 }}
-                transition={{ duration: 0.15, ease: 'easeOut' }}
+                transition={{ duration: 0.15, ease: "easeOut" }}
                 className={
                   plain
-                    ? 'z-9999 origin-(--radix-tooltip-content-transform-origin)'
-                    : 'bg-black/85 backdrop-blur-sm px-3 py-1.5 rounded-lg text-white text-sm shadow-lg z-9999 origin-(--radix-tooltip-content-transform-origin)'
+                    ? "z-9999 origin-(--radix-tooltip-content-transform-origin)"
+                    : "bg-white/95 backdrop-blur-sm px-3 py-1.5 rounded-lg text-gray-700 text-sm shadow-lg border border-gray-200 z-9999 origin-(--radix-tooltip-content-transform-origin)"
                 }
               >
                 {content}
diff --git a/src/index.css b/src/index.css
index ef1a7a9..d9a07b3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,106 +3,126 @@
 @import "./styles/components/events.css";
 
 :root {
-  --foreground-rgb: 255, 255, 255, 100;
-  --background-start: 20, 20, 20;
-  --shadow: #181818;
+    --foreground-rgb: 30, 30, 46;
+    --background-start: 245, 245, 250;
+    --shadow: #d0d0d8;
 
-  /* 统一容器样式 */
-  --container-max-width: 1200px;
-  --container-padding: 0 1rem;
-  --container-margin: 0 auto;
+    /* 统一容器样式 */
+    --container-max-width: 1200px;
+    --container-padding: 0 1rem;
+    --container-margin: 0 auto;
 
-  /* 统一毛玻璃效果 */
-  --glassmorphism-bg-primary: rgb(15 15 20 / 85%);
-  --glassmorphism-bg-secondary: rgb(30 30 30 / 90%);
-  --glassmorphism-backdrop: blur(20px) saturate(180%);
-  --glassmorphism-border: 1px solid rgb(255 255 255 / 12%);
-  --glassmorphism-border-radius: 16px;
-  --glassmorphism-shadow: 0 8px 25px rgb(0 0 0 / 30%);
+    /* 统一毛玻璃效果 */
+    --glassmorphism-bg-primary: rgb(255 255 255 / 85%);
+    --glassmorphism-bg-secondary: rgb(248 248 254 / 90%);
+    --glassmorphism-backdrop: blur(20px) saturate(180%);
+    --glassmorphism-border: 1px solid rgb(0 0 0 / 8%);
+    --glassmorphism-border-radius: 16px;
+    --glassmorphism-shadow: 0 8px 25px rgb(0 0 0 / 10%);
 
-  /* 智能 Header 高度系统 */
-  --header-height-desktop: 70px;
-  --header-height-tablet: 50px;
-  --header-height-mobile: 50px;
-  --header-height-mobile-small: 50px;
+    /* 智能 Header 高度系统 */
+    --header-height-desktop: 70px;
+    --header-height-tablet: 50px;
+    --header-height-mobile: 50px;
+    --header-height-mobile-small: 50px;
 
-  /* 当前生效的 Header 高度（默认桌面端） */
-  --header-height: var(--header-height-desktop);
+    /* 当前生效的 Header 高度（默认桌面端） */
+    --header-height: var(--header-height-desktop);
 
-  /* 智能间距计算 */
-  --content-top-spacing: calc(var(--header-height) + 0.5rem);
-  --content-top-spacing-large: calc(var(--header-height) + 1rem);
+    /* 智能间距计算 */
+    --content-top-spacing: calc(var(--header-height) + 0.5rem);
+    --content-top-spacing-large: calc(var(--header-height) + 1rem);
 
-  /* 其他样式变量 */
-  --glassmorphism-bg: rgb(15 15 20 / 95%);
-  --glassmorphism-bg-scrolled: rgb(10 12 18 / 85%);
-  --glassmorphism-border-scrolled: rgb(255 255 255 / 15%);
+    /* 其他样式变量 */
+    --glassmorphism-bg: rgb(255 255 255 / 95%);
+    --glassmorphism-bg-scrolled: rgb(252 252 255 / 85%);
+    --glassmorphism-border-scrolled: rgb(0 0 0 / 10%);
 
-  scrollbar-color: rgb(50 50 50) rgb(var(--background-start));
-  scrollbar-width: thin;
+    scrollbar-color: rgb(180 180 190) rgb(var(--background-start));
+    scrollbar-width: thin;
 }
 
 /* 基础文本颜色 */
 div {
-  color: rgb(var(--foreground-rgb));
+    color: rgb(var(--foreground-rgb));
 }
 
 /* Body 基础样式 */
 body {
-  caret-color: transparent;
-  color-scheme: only dark;
-  background-color: rgb(var(--background-start));
-  padding-top: var(--content-top-spacing-large);
+    caret-color: transparent;
+    color-scheme: only light;
+    background-color: #ffffff;
+    background-image:
+        repeating-linear-gradient(
+            90deg,
+            rgba(92, 141, 193, 0.1) 0px,
+            rgba(92, 141, 193, 0.1) 1px,
+            transparent 1px,
+            transparent 21px
+        ),
+        repeating-linear-gradient(
+            0deg,
+            rgba(92, 141, 193, 0.1) 0px,
+            rgba(92, 141, 193, 0.1) 1px,
+            transparent 1px,
+            transparent 21px
+        );
+    background-position: 10px 10px;
+    background-size: 21px 21px;
+    padding-left: 0;
+    padding-top: 4.5rem;
+}
+
+@media (width >= 1280px) {
+    body {
+        padding-left: 240px;
+        padding-top: 0.5rem;
+    }
 }
 
 /* 段落样式 */
 p {
-  color: rgb(var(--foreground-rgb));
+    color: rgb(var(--foreground-rgb));
 }
 
 /* 标题样式 */
 h1 {
-  color: whitesmoke;
-  text-align: center;
-  font-size: 2.5rem;
-  font-weight: bold;
-  user-select: text;
+    color: #1e1e2e;
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    user-select: text;
 }
 
 h2 {
-  color: whitesmoke;
-  text-align: center;
-  font-size: 2.5rem;
-  font-weight: bold;
-  user-select: text;
+    color: #1e1e2e;
+    text-align: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    user-select: text;
 }
 
 @media screen and (width <= 500px) {
-  h1 {
-    font-size: 2rem;
-  }
-}
-
-/* 禁用状态样式 */
-*:disabled {
-  background-color: rgb(92 0 0);
+    h1 {
+        font-size: 2rem;
+    }
 }
 
 /* 移除数字输入框的spinner */
 input[type="number"]::-webkit-outer-spin-button,
 input[type="number"]::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
+    appearance: none;
+    margin: 0;
 }
 
 /* Markdown body 样式 (用于 github-markdown-css 扩展) */
 .markdown-body {
-  box-sizing: border-box;
-  min-width: 200px;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 45px;
-  background-color: var(--background-start) !important;
+    box-sizing: border-box;
+    min-width: 200px;
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 45px;
+    background-color: var(--background-start) !important;
 }
 
 /* 覆盖全局 h1/h2 居中，markdown 内标题默认左对齐 */
@@ -112,31 +132,31 @@ input[type="number"]::-webkit-inner-spin-button {
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-  text-align: left !important;
+    text-align: left !important;
 }
 
 .markdown-body ul {
-  display: block;
-  text-align: left;
-  padding-left: 2em;
-  list-style-type: disc;
+    display: block;
+    text-align: left;
+    padding-left: 2em;
+    list-style-type: disc;
 }
 
 .markdown-body ol {
-  display: block;
-  text-align: left;
-  padding-left: 2em;
-  list-style-type: decimal;
+    display: block;
+    text-align: left;
+    padding-left: 2em;
+    list-style-type: decimal;
 }
 
 .markdown-body ul li,
 .markdown-body ol li {
-  margin-bottom: 8px;
+    margin-bottom: 8px;
 }
 
 /* [c]...[/c] 居中块 */
 .markdown-body .md-center {
-  text-align: center !important;
+    text-align: center !important;
 }
 
 .markdown-body .md-center h1,
@@ -145,17 +165,17 @@ input[type="number"]::-webkit-inner-spin-button {
 .markdown-body .md-center h4,
 .markdown-body .md-center h5,
 .markdown-body .md-center h6 {
-  text-align: center !important;
+    text-align: center !important;
 }
 
 .markdown-body .md-center ul,
 .markdown-body .md-center ol {
-  display: inline-block;
-  text-align: left;
+    display: inline-block;
+    text-align: left;
 }
 
 @media (width <= 767px) {
-  .markdown-body {
-    padding: 15px;
-  }
-}
\ No newline at end of file
+    .markdown-body {
+        padding: 15px;
+    }
+}
diff --git a/src/pages/ForginsterPage.tsx b/src/pages/ForginsterPage.tsx
index 4d91af3..4a80ac1 100644
--- a/src/pages/ForginsterPage.tsx
+++ b/src/pages/ForginsterPage.tsx
@@ -1,19 +1,19 @@
-import React, { useEffect, useRef, useState } from 'react';
-import 'react-photo-view/dist/react-photo-view.css';
-import { md5 } from 'js-md5';
-import { endpoints } from '@/config/api';
-import { toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import { setLanguage } from '@/utils/i18n';
-import { useLoc } from '@/hooks';
-import { PageLayout } from '@/components';
-import LoadingSpinner from '@/components/ui/LoadingSpinner';
-import * as retCode from '@/config/apiRetCode';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-import { useUserContext } from '@/hooks';
-import { AnimatePresence, motion } from 'framer-motion';
-
-type TabType = 'login' | 'register' | 'forget';
+import React, { useEffect, useState } from "react";
+import "react-photo-view/dist/react-photo-view.css";
+import { md5 } from "js-md5";
+import { endpoints } from "@/config/api";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import { setLanguage } from "@/utils/i18n";
+import { useLoc } from "@/hooks";
+import { PageLayout } from "@/components";
+import LoadingSpinner from "@/components/ui/LoadingSpinner";
+import * as retCode from "@/config/apiRetCode";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useUserContext } from "@/hooks";
+import { AnimatePresence, motion } from "framer-motion";
+
+type TabType = "login" | "register" | "forget";
 
 const TAB_ORDER: TabType[] = ['login', 'register', 'forget'];
 const AUTH_CARD_CLASSNAME = 'bg-[rgb(30_30_30/90%)] shadow-[0_20px_40px_rgb(0_0_0/40%)] backdrop-blur-[20px] p-8 md:p-12 border border-white/10 rounded-[20px]';
@@ -64,19 +64,19 @@ const tabTransitionVariants = {
     x: direction > 0 ? 64 : -64,
     opacity: 0,
     scale: 0.98,
-    filter: 'blur(8px)',
+    filter: "blur(8px)",
   }),
   center: {
     x: 0,
     opacity: 1,
     scale: 1,
-    filter: 'blur(0px)',
+    filter: "blur(0px)",
   },
   exit: (direction: number) => ({
     x: direction > 0 ? -64 : 64,
     opacity: 0,
     scale: 0.985,
-    filter: 'blur(8px)',
+    filter: "blur(8px)",
   }),
 };
 
@@ -85,14 +85,14 @@ export default function ForginsterPage() {
   const [searchParams] = useSearchParams();
   const [ready, setReady] = useState(false);
 
-  const urlOtp = searchParams.get('otp');
+  const urlOtp = searchParams.get("otp");
 
   const getInitialTab = (): TabType => {
     const path = window.location.pathname;
-    if (path === '/login') return 'login';
-    if (path === '/register') return 'register';
-    if (path === '/forget') return 'forget';
-    return 'login';
+    if (path === "/login") return "login";
+    if (path === "/register") return "register";
+    if (path === "/forget") return "forget";
+    return "login";
   };
 
   const [activeTab, setActiveTab] = useState<TabType>(getInitialTab);
@@ -108,54 +108,64 @@ export default function ForginsterPage() {
   };
 
   useEffect(() => {
-    setLanguage(localStorage.getItem('language') || navigator.language).then(() => {
-      setReady(true);
-    });
+    setLanguage(localStorage.getItem("language") || navigator.language).then(
+      () => {
+        setReady(true);
+      },
+    );
   }, []);
 
   // OTP 部分逻辑
   useEffect(() => {
     if (ready && otp !== null) {
-      if (window.location.pathname === '/login') {
+      if (window.location.pathname === "/login") {
         PostOTP(otp, loc);
-      } else if (window.location.pathname === '/forget') {
+      } else if (window.location.pathname === "/forget") {
         // Handle forget tab OTP logic if needed
       }
     }
   }, [ready, otp, loc, activeTab]);
 
-  if (!ready) return <div className="flex justify-center items-center h-screen"><LoadingSpinner size="50px" /></div>;
+  if (!ready)
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <LoadingSpinner size="50px" />
+      </div>
+    );
 
   return (
     <PageLayout className="flex justify-center items-center min-h-[60vh]">
-      <div className="mx-auto[calc(var(--header-height)+1rem)] px-4 py-8 w-full max-w-md">
-        <div className="flex bg-black/40 mb-6 p-1 rounded-xl">
+      <div className="mx-auto[calc(var(--header-height)+1rem)] px-4 py-8 w-full max-w-2xl">
+        <div className="flex bg-gray-100 mb-6 p-1 rounded-full max-w-md mx-auto">
           <button
-            className={`flex-1 py-3 px-4 rounded-lg font-medium text-sm transition-all ${activeTab === 'login'
-              ? 'bg-blue-600 text-white'
-              : 'text-gray-400 hover:text-white'
-              }`}
-            onClick={() => switchTab('login')}
+            className={`flex-1 py-3 px-4 rounded-full font-medium text-sm transition-all hover:scale-105 active:scale-95 ${
+              activeTab === "login"
+                ? "bg-[#5C8DC1] text-white"
+                : "text-gray-400 hover:text-gray-600"
+            }`}
+            onClick={() => switchTab("login")}
           >
-            {loc('Login', '登录')}
+            {loc("Login", "登录")}
           </button>
           <button
-            className={`flex-1 py-3 px-4 rounded-lg font-medium text-sm transition-all ${activeTab === 'register'
-              ? 'bg-blue-600 text-white'
-              : 'text-gray-400 hover:text-white'
-              }`}
-            onClick={() => switchTab('register')}
+            className={`flex-1 py-3 px-4 rounded-full font-medium text-sm transition-all hover:scale-105 active:scale-95 ${
+              activeTab === "register"
+                ? "bg-[#5C8DC1] text-white"
+                : "text-gray-400 hover:text-gray-600"
+            }`}
+            onClick={() => switchTab("register")}
           >
-            {loc('Register', '注册')}
+            {loc("Register", "注册")}
           </button>
           <button
-            className={`flex-1 py-3 px-4 rounded-lg font-medium text-sm transition-all ${activeTab === 'forget'
-              ? 'bg-blue-600 text-white'
-              : 'text-gray-400 hover:text-white'
-              }`}
-            onClick={() => switchTab('forget')}
+            className={`flex-1 py-3 px-4 rounded-full font-medium text-sm transition-all hover:scale-105 active:scale-95 ${
+              activeTab === "forget"
+                ? "bg-[#5C8DC1] text-white"
+                : "text-gray-400 hover:text-gray-600"
+            }`}
+            onClick={() => switchTab("forget")}
           >
-            {loc('ForgetPassword', '找回密码')}
+            {loc("ForgetPassword", "找回密码")}
           </button>
         </div>
 
@@ -167,11 +177,11 @@ export default function ForginsterPage() {
             initial="enter"
             animate="center"
             exit="exit"
-            transition={{ duration: 0.42, ease: [0.22, 1, 0.36, 1] }}
+            transition={{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }}
           >
-            {activeTab === 'login' && <LoginTab />}
-            {activeTab === 'register' && <RegisterTab />}
-            {activeTab === 'forget' && <ForgetTab otp={otp} />}
+            {activeTab === "login" && <LoginTab />}
+            {activeTab === "register" && <RegisterTab />}
+            {activeTab === "forget" && <ForgetTab otp={otp} />}
           </motion.div>
         </AnimatePresence>
       </div>
@@ -179,19 +189,22 @@ export default function ForginsterPage() {
   );
 }
 
-async function PostOTP(otp: string, loc: (key: string, fallback?: string) => string) {
+async function PostOTP(
+  otp: string,
+  loc: (key: string, fallback?: string) => string,
+) {
   const verifyRsp = await fetch(endpoints.account.verify(otp), {
-    method: 'GET',
-    credentials: 'include',
+    method: "GET",
+    credentials: "include",
   });
   if (verifyRsp.status !== 200) {
     if (verifyRsp.status === 400) {
-      toast.error(loc('InvalidOTP', '无效的验证码'));
+      toast.error(loc("InvalidOTP", "无效的验证码"));
     } else {
-      toast.error(loc('UnknownError', '未知错误'));
+      toast.error(loc("UnknownError", "未知错误"));
     }
   } else {
-    toast.success(loc('AccountActivated', '账户已激活'));
+    toast.success(loc("AccountActivated", "账户已激活"));
   }
 }
 
@@ -208,34 +221,39 @@ function LoginTab() {
 
     try {
       const formData = new FormData(event.currentTarget);
-      if (formData.get('username') === '') {
-        toast.error(loc('NoUsername', '请输入用户名'));
+      if (formData.get("username") === "") {
+        toast.error(loc("NoUsername", "请输入用户名"));
         return;
       }
-      if (formData.get('password') === '') {
-        toast.error(loc('NoPasswd', '请输入密码'));
+      if (formData.get("password") === "") {
+        toast.error(loc("NoPasswd", "请输入密码"));
         return;
       }
-      formData.set('rememberMe', (formData.get('rememberMe') != null).toString());
-      formData.set('password', md5(formData.get('password') as string));
+      formData.set(
+        "rememberMe",
+        (formData.get("rememberMe") != null).toString(),
+      );
+      formData.set("password", md5(formData.get("password") as string));
 
       const response = await fetch(endpoints.account.login, {
-        method: 'POST',
+        method: "POST",
         body: formData,
-        credentials: 'include',
+        credentials: "include",
       });
 
       if (response.status !== 200) {
         const rsp = await response.json();
         switch (rsp.code) {
           case retCode.CODE_INVALID_CREDENTIALS:
-            toast.error(loc('WrongCredential', '用户名或密码错误'));
+            toast.error(loc("WrongCredential", "用户名或密码错误"));
             break;
           case retCode.CODE_LOGIN_FAILED_PENDING_VERIFCATION:
-            toast.error(loc('[Login]PendingVerifcation', '账户尚未激活，请查收邮件'));
+            toast.error(
+              loc("[Login]PendingVerifcation", "账户尚未激活，请查收邮件"),
+            );
             break;
           case retCode.CODE_LOGIN_FAILED_USER_BANNED:
-            toast.error(loc('[Login]UserBanned', '账户已被封禁'));
+            toast.error(loc("[Login]UserBanned", "账户已被封禁"));
             break;
           default:
             toast.error(await response.text());
@@ -244,7 +262,7 @@ function LoginTab() {
         return;
       }
 
-      const redirectPath = searchParams.get('redirect');
+      const redirectPath = searchParams.get("redirect");
 
       // 登录成功，刷新用户状态后再跳转
       await refetch();
@@ -259,7 +277,7 @@ function LoginTab() {
       if (document.referrer && document.referrer !== location.href) {
         history.back();
       } else {
-        navigate('/');
+        navigate("/");
       }
     } finally {
       setIsSubmitting(false);
@@ -267,44 +285,58 @@ function LoginTab() {
   }
 
   return (
-    <div className={AUTH_CARD_CLASSNAME + ' relative'}>
+    <div className={AUTH_CARD_CLASSNAME + " relative"}>
       <div className="mb-8 text-center">
-        <h2 className="m-0 mb-2 font-bold text-[#e5e5e5] text-3xl">{loc('WelcomeBack', '欢迎回来')}</h2>
-        <p className="m-0 text-[#a0a0a0] text-sm">{loc('LoginSubtitle', '登录到你的账户')}</p>
+        <h2 className="m-0 mb-2 font-bold text-gray-800 text-3xl">
+          {loc("WelcomeBack", "欢迎回来")}
+        </h2>
+        <p className="m-0 text-gray-400 text-sm">
+          {loc("LoginSubtitle", "登录到你的账户")}
+        </p>
       </div>
       {isSubmitting && (
-        <div className="z-10 absolute inset-0 flex justify-center items-center bg-[rgb(30_30_30/90%)] backdrop-blur-sm rounded-[20px]">
+        <div className="z-10 absolute inset-0 flex justify-center items-center bg-white/90 backdrop-blur-sm rounded-[20px]">
           <LoadingSpinner size="36px" />
         </div>
       )}
       <form className="flex flex-col gap-6" onSubmit={onSubmit}>
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('Username', '用户名')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("Username", "用户名")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="text"
             name="username"
-            placeholder={loc('EnterUsername', '输入用户名')}
+            placeholder={loc("EnterUsername", "输入用户名")}
             required
           />
         </div>
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('Password', '密码')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("Password", "密码")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="password"
             name="password"
-            placeholder={loc('EnterPassword', '输入密码')}
+            placeholder={loc("EnterPassword", "输入密码")}
             required
           />
         </div>
         <div className="flex flex-row items-center gap-2">
           <input className="w-4 h-4" type="checkbox" name="rememberMe"></input>
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('RememberMe', '记住我')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("RememberMe", "记住我")}
+          </label>
         </div>
 
-        <button className="relative bg-linear-to-r from-blue-500 hover:from-blue-700 to-blue-700 hover:to-blue-800 disabled:opacity-50 hover:shadow-[0_10px_25px_rgb(59_130_246/30%)] mt-2 p-4 border-none rounded-xl overflow-hidden font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0 cursor-pointer disabled:cursor-not-allowed" type="submit" disabled={isSubmitting}>
-          <span className="z-10 relative">{loc('Login', '登录')}</span>
+        <button
+          className="relative bg-linear-to-r from-[#5C8DC1] hover:from-[#4A7DAF] to-[#4A7DAF] hover:to-[#3A6D9F] disabled:opacity-50 hover:shadow-[0_10px_25px_rgb(92_141_193/30%)] mt-2 p-4 border-none rounded-full overflow-hidden font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0 cursor-pointer disabled:cursor-not-allowed"
+          type="submit"
+          disabled={isSubmitting}
+        >
+          <span className="z-10 relative">{loc("Login", "登录")}</span>
         </button>
       </form>
     </div>
@@ -382,10 +414,10 @@ function RegisterTab() {
         toast.error(loc('PasswdNoMatch', '两次密码不匹配'));
         return;
       }
-      formData.set('password', md5(formData.get('password') as string));
+      formData.set("password", md5(formData.get("password") as string));
 
       const response = await fetch(endpoints.account.register, {
-        method: 'POST',
+        method: "POST",
         body: formData,
       });
 
@@ -394,19 +426,21 @@ function RegisterTab() {
         if (response.status === 400) {
           switch (rsp.code) {
             case retCode.CODE_INVALID_INVITE_CODE:
-              toast.error(loc('InvalidInviteCode', '无效的邀请码'));
+              toast.error(loc("InvalidInviteCode", "无效的邀请码"));
               break;
             case retCode.CODE_INVALID_VALUE:
-              toast.error(loc('InvalidUsernameOrPassword', '用户名或密码格式错误'));
+              toast.error(
+                loc("InvalidUsernameOrPassword", "用户名或密码格式错误"),
+              );
               break;
             case retCode.CODE_INVALID_EMAIL_ADDRESS:
-              toast.error(loc('InvalidEmail', '无效的邮箱地址'));
+              toast.error(loc("InvalidEmail", "无效的邮箱地址"));
               break;
             case retCode.CODE_USERNAME_ALREADY_EXISTS:
-              toast.error(loc('UsernameExists', '用户名已存在'));
+              toast.error(loc("UsernameExists", "用户名已存在"));
               break;
             case retCode.CODE_EMAIL_ALREADY_EXISTS:
-              toast.error(loc('EmailExists', '邮箱已被注册'));
+              toast.error(loc("EmailExists", "邮箱已被注册"));
               break;
             default: {
               const message = typeof rsp.message === 'string' ? rsp.message.trim() : '';
@@ -421,7 +455,7 @@ function RegisterTab() {
         toast.error(await response.text());
         return;
       } else {
-        toast.success(loc('[Register]EmailSent', '注册成功！验证邮件已发送'), {
+        toast.success(loc("[Register]EmailSent", "注册成功！验证邮件已发送"), {
           autoClose: false,
         });
       }
@@ -433,55 +467,71 @@ function RegisterTab() {
   return (
     <div className={AUTH_CARD_CLASSNAME}>
       <div className="mb-8 text-center">
-        <h2 className="m-0 mb-2 font-bold text-[#e5e5e5] text-3xl">{loc('CreateAccount', '创建账户')}</h2>
-        <p className="m-0 text-[#a0a0a0] text-sm">{loc('RegisterSubtitle', '注册一个新账户')}</p>
+        <h2 className="m-0 mb-2 font-bold text-gray-800 text-3xl">
+          {loc("CreateAccount", "创建账户")}
+        </h2>
+        <p className="m-0 text-gray-400 text-sm">
+          {loc("RegisterSubtitle", "注册一个新账户")}
+        </p>
       </div>
       <form className="flex flex-col gap-6" onSubmit={onSubmit}>
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('Username', '用户名')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("Username", "用户名")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="text"
             name="username"
-            placeholder={loc('EnterUsername', '输入用户名')}
+            placeholder={loc("EnterUsername", "输入用户名")}
             required
           />
         </div>
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('Password', '密码')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("Password", "密码")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="password"
             name="password"
-            placeholder={loc('EnterPassword', '输入密码')}
+            placeholder={loc("EnterPassword", "输入密码")}
             required
           />
         </div>
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('ConfirmPassword', '确认密码')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("ConfirmPassword", "确认密码")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="password"
             name="password2"
-            placeholder={loc('ReEnterPassword', '再次输入密码')}
+            placeholder={loc("ReEnterPassword", "再次输入密码")}
             required
           />
         </div>
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('E-Mail', '邮箱')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("E-Mail", "邮箱")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="email"
             name="email"
-            placeholder={loc('EnterEmail', '输入邮箱')}
+            placeholder={loc("EnterEmail", "输入邮箱")}
             required
           />
         </div>
         <div className="flex flex-col gap-2 scale-75 md:scale-100 origin-top-left">
           <TurnstileWidget />
         </div>
-        <button className="relative bg-linear-to-r from-blue-500 hover:from-blue-700 to-blue-700 hover:to-blue-800 disabled:opacity-50 hover:shadow-[0_10px_25px_rgb(59_130_246/30%)] mt-2 p-4 border-none rounded-xl overflow-hidden font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0 cursor-pointer disabled:cursor-not-allowed" type="submit" disabled={isPosting}>
-          <span className="z-10 relative">{loc('Register', '注册')}</span>
+        <button
+          className="relative bg-linear-to-r from-[#5C8DC1] hover:from-[#4A7DAF] to-[#4A7DAF] hover:to-[#3A6D9F] disabled:opacity-50 hover:shadow-[0_10px_25px_rgb(92_141_193/30%)] mt-2 p-4 border-none rounded-full overflow-hidden font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0 cursor-pointer disabled:cursor-not-allowed"
+          type="submit"
+          disabled={isPosting}
+        >
+          <span className="z-10 relative">{loc("Register", "注册")}</span>
         </button>
       </form>
     </div>
@@ -490,10 +540,10 @@ function RegisterTab() {
 
 function ForgetTab({ otp }: { otp: string | null }) {
   const loc = useLoc();
-  const [formOtp, setFormOtp] = useState(otp || '');
+  const [formOtp, setFormOtp] = useState(otp || "");
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const hasOtp = formOtp.trim() !== '';
+  const hasOtp = formOtp.trim() !== "";
 
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -503,29 +553,29 @@ function ForgetTab({ otp }: { otp: string | null }) {
       const formData = new FormData(event.currentTarget);
 
       if (!hasOtp) {
-        if (formData.get('username') === '') {
-          toast.error(loc('NoUsername', '请输入用户名'));
+        if (formData.get("username") === "") {
+          toast.error(loc("NoUsername", "请输入用户名"));
           return;
         }
-        if (formData.get('email') === '') {
-          toast.error(loc('InvalidEmail', '无效的邮箱'));
+        if (formData.get("email") === "") {
+          toast.error(loc("InvalidEmail", "无效的邮箱"));
           return;
         }
 
         const response = await fetch(endpoints.account.forget, {
-          method: 'POST',
+          method: "POST",
           body: formData,
-          credentials: 'include',
+          credentials: "include",
         });
 
         if (response.status !== 200) {
           const rsp = await response.json();
           switch (rsp.code) {
             case retCode.CODE_INVALID_VALUE:
-              toast.error(loc('UserNameOrEmailEmpty', '用户名或邮箱为空'));
+              toast.error(loc("UserNameOrEmailEmpty", "用户名或邮箱为空"));
               break;
             case retCode.CODE_NO_SUCH_ITEM:
-              toast.error(loc('NoSuchUser', '用户不存在'));
+              toast.error(loc("NoSuchUser", "用户不存在"));
               break;
             default:
               toast.error(await response.text());
@@ -533,33 +583,38 @@ function ForgetTab({ otp }: { otp: string | null }) {
           }
           return;
         }
-        toast.success(loc('ResetEmailSent', '重置密码邮件已发送'), { autoClose: false });
+        toast.success(loc("ResetEmailSent", "重置密码邮件已发送"), {
+          autoClose: false,
+        });
       } else {
-        if (formData.get('newpassword') === '' || formData.get('repeatpassword') === '') {
-          toast.error(loc('NoPasswd', '请输入密码'));
+        if (
+          formData.get("newpassword") === "" ||
+          formData.get("repeatpassword") === ""
+        ) {
+          toast.error(loc("NoPasswd", "请输入密码"));
           return;
         }
 
-        if (formData.get('newpassword') !== formData.get('repeatpassword')) {
-          toast.error(loc('PasswdNoMatch', '两次密码不匹配'));
+        if (formData.get("newpassword") !== formData.get("repeatpassword")) {
+          toast.error(loc("PasswdNoMatch", "两次密码不匹配"));
           return;
         }
 
-        formData.set('otp', formOtp);
-        formData.set('newpassword', md5(formData.get('newpassword') as string));
-        formData.delete('repeatpassword');
+        formData.set("otp", formOtp);
+        formData.set("newpassword", md5(formData.get("newpassword") as string));
+        formData.delete("repeatpassword");
 
         const response = await fetch(endpoints.account.forget, {
-          method: 'PUT',
+          method: "PUT",
           body: formData,
-          credentials: 'include',
+          credentials: "include",
         });
 
         if (response.status !== 200) {
           const rsp = await response.json();
           switch (rsp.code) {
             case retCode.CODE_INVALID_VALUE:
-              toast.error(loc('OTPExpiredOrEmpty', 'OTP已过期或为空'));
+              toast.error(loc("OTPExpiredOrEmpty", "OTP已过期或为空"));
               break;
             default:
               toast.error(await response.text());
@@ -567,7 +622,9 @@ function ForgetTab({ otp }: { otp: string | null }) {
           }
           return;
         }
-        toast.success(loc('ResetPasswordSuccess', '密码重置成功'), { autoClose: false });
+        toast.success(loc("ResetPasswordSuccess", "密码重置成功"), {
+          autoClose: false,
+        });
       }
     } finally {
       setIsSubmitting(false);
@@ -577,77 +634,97 @@ function ForgetTab({ otp }: { otp: string | null }) {
   return (
     <div className={AUTH_CARD_CLASSNAME}>
       <div className="mb-8 text-center">
-        <h2 className="m-0 mb-2 font-bold text-[#e5e5e5] text-3xl">
-          {hasOtp ? loc('ResetPasswordTitle', '重设密码') : loc('ForgetPasswordTitle', '找回密码')}
+        <h2 className="m-0 mb-2 font-bold text-gray-800 text-3xl">
+          {hasOtp
+            ? loc("ResetPasswordTitle", "重设密码")
+            : loc("ForgetPasswordTitle", "找回密码")}
         </h2>
-        <p className="m-0 text-[#a0a0a0] text-sm">
-          {hasOtp ? loc('ResetPasswordSubtitle', '请输入新的密码') : loc('ForgetPasswordSubtitle', '请输入注册时使用的用户名和邮箱')}
+        <p className="m-0 text-gray-400 text-sm">
+          {hasOtp
+            ? loc("ResetPasswordSubtitle", "请输入新的密码")
+            : loc("ForgetPasswordSubtitle", "请输入注册时使用的用户名和邮箱")}
         </p>
       </div>
       <form className="flex flex-col gap-6" onSubmit={onSubmit}>
-        {hasOtp && (<>
-          <div className="flex flex-col gap-2">
-            <label className="font-medium text-[#e5e5e5] text-sm">{loc('Password', '密码')}</label>
-            <input
-              className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
-              type="password"
-              name="newpassword"
-              placeholder={loc('EnterPassword', '输入密码')}
-              required={hasOtp}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <label className="font-medium text-[#e5e5e5] text-sm">{loc('ConfirmPassword', '确认密码')}</label>
-            <input
-              className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
-              type="password"
-              name="repeatpassword"
-              placeholder={loc('ReEnterPassword', '再次输入密码')}
-              required={hasOtp}
-            />
-          </div>
-        </>)}
-        {!hasOtp && (<>
-          <div className="flex flex-col gap-2">
-            <label className="font-medium text-[#e5e5e5] text-sm">{loc('Username', '用户名')}</label>
-            <input
-              className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
-              type="text"
-              name="username"
-              placeholder={loc('EnterUsername', '输入用户名')}
-              required={!hasOtp}
-            />
-          </div>
-          <div className="flex flex-col gap-2">
-            <label className="font-medium text-[#e5e5e5] text-sm">{loc('E-Mail', '邮箱')}</label>
-            <input
-              className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
-              type="email"
-              name="email"
-              placeholder={loc('EnterEmail', '输入邮箱')}
-              required={!hasOtp}
-            />
-          </div>
-        </>)}
+        {hasOtp && (
+          <>
+            <div className="flex flex-col gap-2">
+              <label className="font-medium text-gray-600 text-sm">
+                {loc("Password", "密码")}
+              </label>
+              <input
+                className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
+                type="password"
+                name="newpassword"
+                placeholder={loc("EnterPassword", "输入密码")}
+                required={hasOtp}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label className="font-medium text-gray-600 text-sm">
+                {loc("ConfirmPassword", "确认密码")}
+              </label>
+              <input
+                className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
+                type="password"
+                name="repeatpassword"
+                placeholder={loc("ReEnterPassword", "再次输入密码")}
+                required={hasOtp}
+              />
+            </div>
+          </>
+        )}
+        {!hasOtp && (
+          <>
+            <div className="flex flex-col gap-2">
+              <label className="font-medium text-gray-600 text-sm">
+                {loc("Username", "用户名")}
+              </label>
+              <input
+                className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
+                type="text"
+                name="username"
+                placeholder={loc("EnterUsername", "输入用户名")}
+                required={!hasOtp}
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label className="font-medium text-gray-600 text-sm">
+                {loc("E-Mail", "邮箱")}
+              </label>
+              <input
+                className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
+                type="email"
+                name="email"
+                placeholder={loc("EnterEmail", "输入邮箱")}
+                required={!hasOtp}
+              />
+            </div>
+          </>
+        )}
         <div className="flex flex-col gap-2">
-          <label className="font-medium text-[#e5e5e5] text-sm">{loc('VerificationCode', '验证码')}</label>
+          <label className="font-medium text-gray-600 text-sm">
+            {loc("VerificationCode", "验证码")}
+          </label>
           <input
-            className="bg-black/60 focus:shadow-[0_0_15px_rgb(59_130_246/20%)] p-4 border-2 border-white/10 focus:border-blue-500 rounded-xl outline-none text-white placeholder:text-white/40 transition-all focus:-translate-y-0.5"
+            className="bg-gray-50 focus:shadow-[0_0_15px_rgb(92_141_193/15%)] p-4 border-2 border-black/10 focus:border-[#5C8DC1] rounded-xl outline-none text-gray-800 placeholder:text-gray-400 transition-all focus:-translate-y-0.5"
             type="text"
             name="otp"
             value={formOtp}
             onChange={(e) => setFormOtp(e.target.value)}
-            placeholder={loc('EnterVerificationCode', '输入验证码')}
+            placeholder={loc("EnterVerificationCode", "输入验证码")}
           />
         </div>
 
         <button
-          className="relative bg-linear-to-r from-blue-500 hover:from-blue-700 to-blue-700 hover:to-blue-800 disabled:opacity-50 hover:shadow-[0_10px_25px_rgb(59_130_246/30%)] mt-2 p-4 border-none rounded-xl overflow-hidden font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0 cursor-pointer disabled:cursor-not-allowed"
+          className="relative bg-linear-to-r from-[#5C8DC1] hover:from-[#4A7DAF] to-[#4A7DAF] hover:to-[#3A6D9F] disabled:opacity-50 hover:shadow-[0_10px_25px_rgb(92_141_193/30%)] mt-2 p-4 border-none rounded-full overflow-hidden font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0 cursor-pointer disabled:cursor-not-allowed"
           type="submit"
           disabled={isSubmitting}
         >
           <span className="z-10 relative">
-            {hasOtp ? loc('ResetPasswordButton', '确认重置密码') : loc('SendVerificationEmail', '发送验证邮件')}
+            {hasOtp
+              ? loc("ResetPasswordButton", "确认重置密码")
+              : loc("SendVerificationEmail", "发送验证邮件")}
           </span>
         </button>
       </form>
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 2b035b5..a8bdc75 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,37 +1,53 @@
-import React, { useEffect, useState, useMemo, useRef, useCallback } from 'react';
-import useSWR from 'swr';
-import { motion, AnimatePresence } from 'framer-motion';
-import { Tooltip } from '@/components';
-import { useDebouncedCallback } from 'use-debounce';
-import { Link, useSearchParams } from 'react-router-dom';
-
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay, Pagination } from 'swiper/modules';
-import 'swiper/swiper-bundle.css';
-
-import { setLanguage } from '@/utils/i18n';
-import { useLoc } from '@/hooks';
-import { PageLayout, SongCard, SongList, LoadingSpinner } from '@/components';
-import { endpoints } from '@/config/api';
+import React, {
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+  useCallback,
+} from "react";
+import useSWR from "swr";
+import { motion, AnimatePresence } from "framer-motion";
+import { Tooltip } from "@/components";
+import { useDebouncedCallback } from "use-debounce";
+import { Link, useSearchParams } from "react-router-dom";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay, Pagination } from "swiper/modules";
+import "swiper/swiper-bundle.css";
+
+import { setLanguage } from "@/utils/i18n";
+import { useLoc } from "@/hooks";
+import { PageLayout, SongCard, SongList, LoadingSpinner } from "@/components";
+import { endpoints } from "@/config/api";
 import {
   getEventStatusClass,
   getEventStatusText,
-  getNonFeaturedEventsCount,
   getActiveEvents,
   getTimeAgo,
   getCategoryTranslation,
-} from '@/utils/eventsData';
-import type { SearchBarProps, Song } from '@/types';
+} from "@/utils/eventsData";
+import {
+  CalendarClock,
+  Calendar,
+  Heart,
+  MessageCircle,
+  Flag,
+  Play,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import type { SearchBarProps, Song } from "@/types";
 
 // 获取用户时区的次日午夜时间戳 (UTC)
 const getNextMidnightTimestamp = (): number => {
   const now = new Date();
   const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-  const formatter = new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
     timeZone: userTimeZone,
   });
 
@@ -44,19 +60,22 @@ const getNextMidnightTimestamp = (): number => {
   const userLocalDate = new Date(
     parseInt(dateObj.year),
     parseInt(dateObj.month) - 1,
-    parseInt(dateObj.day)
+    parseInt(dateObj.day),
   );
 
   const tomorrow = new Date(userLocalDate);
   tomorrow.setDate(tomorrow.getDate() + 1);
 
-  const millisUntilMidnight = tomorrow.getTime() - now.getTime() + (now.getTime() - userLocalDate.getTime());
+  const millisUntilMidnight =
+    tomorrow.getTime() -
+    now.getTime() +
+    (now.getTime() - userLocalDate.getTime());
   return now.getTime() + millisUntilMidnight;
 };
 
 const cachedSongListFetcher = async (url: string): Promise<Song[]> => {
-  const cacheKey = 'homeSongListCache';
-  const cacheExpireTimeKey = 'homeSongListCacheExpireTime';
+  const cacheKey = "homeSongListCache";
+  const cacheExpireTimeKey = "homeSongListCacheExpireTime";
 
   // 1. 尝试从 localStorage 读取缓存
   try {
@@ -75,12 +94,13 @@ const cachedSongListFetcher = async (url: string): Promise<Song[]> => {
       }
     }
   } catch (e) {
-    console.error('缓存读取错误:', e)
+    console.error("缓存读取错误:", e);
   }
 
   // 2. 缓存不存在或已过期，发起请求
-  const data = await fetch(url, { mode: 'cors', credentials: 'include' })
-    .then((res) => res.json());
+  const data = await fetch(url, { mode: "cors", credentials: "include" }).then(
+    (res) => res.json(),
+  );
 
   // 3. 请求成功后存入 localStorage，同时存储时间戳和过期时间
   if (Array.isArray(data) && data.length > 0) {
@@ -90,7 +110,7 @@ const cachedSongListFetcher = async (url: string): Promise<Song[]> => {
       localStorage.setItem(cacheKey, JSON.stringify(data));
       localStorage.setItem(cacheExpireTimeKey, nextMidnightTime.toString());
     } catch (e) {
-      console.error('缓存保存错误:', e)
+      console.error("缓存保存错误:", e);
     }
   }
 
@@ -101,12 +121,19 @@ export default function HomePage() {
   const [ready, setReady] = useState(false);
 
   useEffect(() => {
-    setLanguage(localStorage.getItem('language') || navigator.language).then(() => {
-      setReady(true);
-    });
+    setLanguage(localStorage.getItem("language") || navigator.language).then(
+      () => {
+        setReady(true);
+      },
+    );
   }, []);
 
-  if (!ready) return <div className="flex justify-center items-center h-screen"><LoadingSpinner size="50px" /></div>;
+  if (!ready)
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <LoadingSpinner size="50px" />
+      </div>
+    );
 
   return (
     <PageLayout showBackToHome={false}>
@@ -129,8 +156,8 @@ function EventsCarousel() {
     };
 
     checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
   }, []);
 
   // 移动端和PC端都使用Swiper
@@ -138,131 +165,89 @@ function EventsCarousel() {
 }
 
 function getDateLocale() {
-  const lang = localStorage.getItem('language') || 'zh';
+  const lang = localStorage.getItem("language") || "zh";
   const localeMap: Record<string, string> = {
-    zh: 'zh-CN',
-    en: 'en-US',
-    ja: 'ja-JP',
-    ko: 'ko-KR',
+    zh: "zh-CN",
+    en: "en-US",
+    ja: "ja-JP",
+    ko: "ko-KR",
   };
-  return localeMap[lang] || 'zh-CN';
-};
+  return localeMap[lang] || "zh-CN";
+}
 
 // PC端专用的 Swiper 组件
 function DesktopEventsSwiper() {
-  const loc = useLoc();
-  const remainingEventsCount = getNonFeaturedEventsCount();
-
-  // 获取所有活跃的活动（进行中 + 即将开始）
   const ongoingEvents = useMemo(() => {
     return getActiveEvents().map((event) => ({
       ...event,
       timeAgo: getTimeAgo(event.createDate),
-      createDateFormatted: new Date(event.createDate).toLocaleDateString(getDateLocale(), {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }),
+      createDateFormatted: new Date(event.createDate).toLocaleDateString(
+        getDateLocale(),
+        { year: "numeric", month: "long", day: "numeric" },
+      ),
     }));
   }, []);
 
   return (
-    <section className="mx-auto mt-8 px-4 max-w-7xl">
-      <div className="w-full">
-        <div className="relative w-full">
-          <Swiper
-            modules={[Pagination, Autoplay]}
-            spaceBetween={16}
-            slidesPerView={2}
-            centeredSlides={false}
-            autoplay={{
-              delay: 5000,
-              disableOnInteraction: false,
-            }}
-            pagination={{
-              clickable: true,
-              dynamicBullets: true,
-            }}
-            navigation={false}
-            loop={ongoingEvents.length > 2}
-            breakpoints={{
-              1024: {
-                slidesPerView: 2,
-                spaceBetween: 16,
-              },
-              1280: {
-                slidesPerView: 2,
-                spaceBetween: 20,
-              },
-              1440: {
-                slidesPerView: 2,
-                spaceBetween: 24,
-              },
-            }}
-            className="pb-12 desktop-events-swiper"
-          >
-            {/* 活跃的活动（进行中 + 即将开始） */}
-            {ongoingEvents.map((event) => (
-              <SwiperSlide key={event.id} className="flex h-auto">
-                <div className="relative flex-1 bg-[rgba(20,20,25,0.9)] shadow-[0_8px_32px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.2)] border border-white/10 rounded-xl min-w-0 aspect-1279/372 overflow-hidden">
-                  <Link to={event.href} className="block relative w-full h-full text-inherit no-underline">
-                    <div className="relative w-full h-full overflow-hidden">
-                      <img
-                        className="block w-full h-full object-cover"
-                        src={event.src}
-                        alt={event.alt}
-                        loading="lazy"
-                      />
-                      <div className="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-black/50 via-30% via-black/30 to-black/90 opacity-0 hover:opacity-100 p-4">
-                        <div className="text-left">
-                          <h3 className="m-0 mb-2 font-bold text-white text-xl leading-tight">{event.title}</h3>
-                          <div className="flex flex-wrap items-center gap-2 text-white/90 text-sm">
-                            <span className="whitespace-nowrap">
-                              {getCategoryTranslation(event.category)}
-                            </span>
-                            <span className={`font-semibold text-[0.85rem] px-1.5 py-0.5 rounded inline-block ${getEventStatusClass(event) === 'status-upcoming' ? 'text-[#fbbf24] bg-[rgba(251,191,36,0.15)] border border-[rgba(251,191,36,0.3)]' :
-                              getEventStatusClass(event) === 'status-ongoing' ? 'text-[#10b981] bg-[rgba(16,185,129,0.15)] border border-[rgba(16,185,129,0.3)]' :
-                                'text-[#9ca3af] bg-[rgba(156,163,175,0.15)] border border-[rgba(156,163,175,0.3)]'
-                              }`}>
-                              • {getEventStatusText(event)}
-                            </span>
-                            <span
-                              className="whitespace-nowrap"
-                              title={`${loc('EventCreatedPrefix', '创建于')} ${event.createDateFormatted}`}
-                            >
-                              • {event.timeAgo}
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </Link>
-                </div>
-              </SwiperSlide>
-            ))}
-
-            {/* More 页面作为 Swiper 的最后一页 */}
-            <SwiperSlide className="flex h-auto">
-              <div className="flex flex-col flex-[0.5] justify-stretch self-stretch bg-linear-to-br from-[rgba(100,100,120,0.4)] to-[rgba(80,80,100,0.6)] shadow-[0_8px_32px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.2)] backdrop-blur-lg border border-white/10 rounded-xl min-w-0 aspect-1279/372 overflow-hidden">
-                <Link to="/chart-events" className="block relative w-full h-full text-inherit no-underline">
-                  <div className="flex flex-col justify-center items-center h-full text-white/70">
-                    <div className="mb-2 text-[2rem]">→</div>
-                    <div className="font-semibold text-lg tracking-wider">more</div>
-                  </div>
-                  <div className="absolute inset-0 flex justify-center items-center bg-black/70 opacity-0 hover:opacity-100 backdrop-blur-lg">
-                    <div className="text-white text-center">
-                      <span className="block mb-1 font-semibold text-base">{loc('ViewAllEvents', '查看所有活动')}</span>
-                      <span className="text-white/80 text-sm">
-                        +{remainingEventsCount} {loc('EventsCount', '个活动')}
-                      </span>
-                    </div>
+    <section className="mx-auto mt-8 w-full">
+      <Swiper
+        modules={[Pagination, Autoplay]}
+        spaceBetween={0}
+        slidesPerView={1}
+        centeredSlides={true}
+        autoplay={{ delay: 5000, disableOnInteraction: false }}
+        pagination={{ clickable: true, dynamicBullets: true }}
+        loop={ongoingEvents.length > 2}
+        breakpoints={{
+          768: { slidesPerView: 1, spaceBetween: 0 },
+          1024: { slidesPerView: 1, spaceBetween: 0 },
+        }}
+        className="pb-10"
+      >
+        {ongoingEvents.map((event) => (
+          <SwiperSlide key={event.id}>
+            <Link to={event.href} className="block no-underline group">
+              <div className="relative bg-white shadow-md border border-gray-200 rounded-2xl transition-transform duration-300">
+                <img
+                  className="w-full aspect-[1279/372] object-cover"
+                  src={event.src}
+                  alt={event.alt}
+                  loading="lazy"
+                />
+                <span
+                  className={`absolute top-3 right-3 z-10 flex items-center gap-2 font-semibold bg-white rounded-full px-4 py-2 text-xl leading-none ${
+                    getEventStatusClass(event) === "status-upcoming"
+                      ? "text-[#5C8DC1]"
+                      : getEventStatusClass(event) === "status-ongoing"
+                        ? "text-[#10b981]"
+                        : "text-white"
+                  }`}
+                >
+                  {getEventStatusClass(event) === "status-upcoming" ? (
+                    <CalendarClock size={24} />
+                  ) : getEventStatusClass(event) === "status-ongoing" ? (
+                    <Play size={24} />
+                  ) : (
+                    <Flag size={24} />
+                  )}
+                  {getEventStatusText(event)}
+                </span>
+                <div className="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-transparent to-black/40 p-4">
+                  <h3 className="m-0 mb-1 font-bold text-white text-4xl leading-tight">
+                    {event.title}
+                  </h3>
+                  <div className="flex flex-wrap items-center gap-2 text-white/80 text-xs">
+                    <span className="text-white">
+                      {getCategoryTranslation(event.category)}
+                    </span>
+                    <span className="text-white">{event.timeAgo}</span>
                   </div>
-                </Link>
+                </div>
               </div>
-            </SwiperSlide>
-          </Swiper>
-        </div>
-      </div>
+            </Link>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </section>
   );
 }
@@ -274,96 +259,111 @@ function MobileEventsSwiper() {
     return getActiveEvents().map((event) => ({
       ...event,
       timeAgo: getTimeAgo(event.createDate),
-      createDateFormatted: new Date(event.createDate).toLocaleDateString(getDateLocale(), {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      }),
+      createDateFormatted: new Date(event.createDate).toLocaleDateString(
+        getDateLocale(),
+        {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        },
+      ),
     }));
   }, []);
 
   return (
-    <section className="mx-auto mt-4 px-4 max-w-7xl">
-      <div className="relative w-full">
-        <div className="relative w-full">
-          <Swiper
-            modules={[Pagination, Autoplay]}
-            spaceBetween={16}
-            slidesPerView={1}
-            centeredSlides={true}
-            autoplay={{
-              delay: 5000,
-              disableOnInteraction: false,
-            }}
-            pagination={{
-              clickable: true,
-              dynamicBullets: true,
-            }}
-            navigation={false}
-            loop={ongoingEvents.length > 1}
-            breakpoints={{
-              480: {
-                slidesPerView: 1.2,
-                spaceBetween: 20,
-              },
-              600: {
-                slidesPerView: 1.5,
-                spaceBetween: 24,
-              },
-              768: {
-                slidesPerView: 2,
-                spaceBetween: 24,
-              },
-            }}
-            className="pb-12 overflow-visible mobile-events-swiper"
-          >
-            {/* 活跃的活动（进行中 + 即将开始） */}
-            {ongoingEvents.map((event) => (
-              <SwiperSlide key={event.id} className="flex h-auto">
-                <Link to={event.href} className="block w-full h-full text-inherit no-underline">
-                  <div className="relative bg-[rgba(20,20,25,0.9)] shadow-[0_8px_32px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.2)] backdrop-blur-xl border border-white/10 rounded-xl w-full aspect-1279/372 overflow-hidden">
-                    <div className="relative w-full h-full overflow-hidden">
-                      <img
-                        className="w-full h-full object-cover"
-                        src={event.src}
-                        alt={event.alt}
-                        loading="lazy"
-                      />
-                    </div>
-                  </div>
-                </Link>
-              </SwiperSlide>
-            ))}
-
-            {/* More 页面作为 Swiper 的最后一页 */}
-            <SwiperSlide className="flex h-auto">
-              <div className="flex flex-col flex-[0.5] justify-stretch self-stretch bg-linear-to-br from-[rgba(100,100,120,0.4)] to-[rgba(80,80,100,0.6)] shadow-[0_8px_32px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.2)] backdrop-blur-lg border border-white/10 rounded-xl min-w-0 aspect-1279/372 overflow-hidden">
-                <Link to="/chart-events" className="block relative w-full h-full text-inherit no-underline">
-                  <div className="flex flex-col justify-center items-center h-full text-white/70">
-                    <div className="text-[2rem] leading-none">→</div>
-                    <div className="font-semibold text-lg leading-none tracking-wider">MORE</div>
+    <section className="mx-auto mt-8 w-full">
+      <Swiper
+        modules={[Pagination, Autoplay]}
+        spaceBetween={0}
+        slidesPerView={1}
+        centeredSlides={true}
+        autoplay={{ delay: 5000, disableOnInteraction: false }}
+        pagination={{ clickable: true, dynamicBullets: true }}
+        loop={ongoingEvents.length > 1}
+        breakpoints={{
+          768: { slidesPerView: 1, spaceBetween: 0 },
+          1024: { slidesPerView: 1, spaceBetween: 0 },
+        }}
+        className="pb-10"
+      >
+        {ongoingEvents.map((event) => (
+          <SwiperSlide key={event.id}>
+            <Link to={event.href} className="block no-underline group">
+              <div className="relative bg-white shadow-md border border-gray-200 rounded-2xl transition-transform duration-300">
+                <img
+                  className="w-full aspect-[1279/372] object-cover"
+                  src={event.src}
+                  alt={event.alt}
+                  loading="lazy"
+                />
+                <span
+                  className={`absolute top-3 right-3 z-10 flex items-center gap-2 font-semibold bg-white rounded-full px-4 py-2 text-xl leading-none ${
+                    getEventStatusClass(event) === "status-upcoming"
+                      ? "text-[#5C8DC1]"
+                      : getEventStatusClass(event) === "status-ongoing"
+                        ? "text-[#10b981]"
+                        : "text-white"
+                  }`}
+                >
+                  {getEventStatusClass(event) === "status-upcoming" ? (
+                    <CalendarClock size={24} />
+                  ) : getEventStatusClass(event) === "status-ongoing" ? (
+                    <Play size={24} />
+                  ) : (
+                    <Flag size={24} />
+                  )}
+                  {getEventStatusText(event)}
+                </span>
+                <div className="absolute inset-0 flex flex-col justify-end bg-linear-to-b from-transparent via-transparent to-black/40 p-4">
+                  <h3 className="m-0 mb-1 font-bold text-white text-4xl leading-tight">
+                    {event.title}
+                  </h3>
+                  <div className="flex flex-wrap items-center gap-2 text-white/80 text-xs">
+                    <span className="text-white">
+                      {getCategoryTranslation(event.category)}
+                    </span>
+                    <span className="text-white">{event.timeAgo}</span>
                   </div>
-                </Link>
+                </div>
               </div>
-            </SwiperSlide>
-          </Swiper>
-        </div>
-      </div>
+            </Link>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </section>
   );
 }
 
-function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps) {
+function SearchBar({
+  onChange,
+  initS,
+  sortType,
+  onSortChange,
+}: SearchBarProps) {
   const loc = useLoc();
   const [isMobile, setIsMobile] = useState(false);
   const [currentValue, setCurrentValue] = useState(initS);
+  const [isSortOpen, setIsSortOpen] = useState(false);
+  const sortRef = useRef<HTMLDivElement>(null);
 
+  const sortIcons = [Calendar, Heart, MessageCircle, Play];
+
+  // 点击外部关闭排序下拉
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (sortRef.current && !sortRef.current.contains(e.target as Node)) {
+        setIsSortOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
   const sortOptions = [
-    loc('UploadDate', '上传日期'),
-    loc('LikeCount', '点赞数'),
-    loc('CommentCount', '评论数'),
-    loc('PlayCount', '播放数'),
+    loc("UploadDate", "上传日期"),
+    loc("LikeCount", "点赞数"),
+    loc("CommentCount", "评论数"),
+    loc("PlayCount", "播放数"),
   ];
 
   // 检测是否为移动端
@@ -373,8 +373,8 @@ function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps)
     };
 
     checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
   }, []);
 
   // 更新当前值
@@ -382,8 +382,6 @@ function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps)
     setCurrentValue(initS);
   }, [initS]);
 
-
-
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setCurrentValue(value);
@@ -391,36 +389,48 @@ function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps)
   };
 
   const handleClearSearch = () => {
-    setCurrentValue('');
-    const fakeEvent = { target: { value: '' } } as React.ChangeEvent<HTMLInputElement>;
+    setCurrentValue("");
+    const fakeEvent = {
+      target: { value: "" },
+    } as React.ChangeEvent<HTMLInputElement>;
     onChange(fakeEvent);
   };
 
   // 提示内容组件
   const hintContent = (
-    <div className="bg-linear-to-br from-[rgba(30,30,40,0.98)] to-[rgba(20,20,30,0.98)] shadow-[0_12px_40px_rgba(0,0,0,0.5),0_4px_12px_rgba(0,0,0,0.3)] backdrop-blur-[20px] backdrop-saturate-150 px-5 py-4 border border-white/20 rounded-2xl w-70 md:w-[320px]">
+    <div className="bg-white shadow-[0_8px_30px_rgba(0,0,0,0.08),0_2px_8px_rgba(0,0,0,0.04)] px-5 py-4 border border-[#5C8DC1]/20 rounded-2xl w-70 md:w-[320px]">
       <div className="space-y-2.5 text-left">
-        <p className="m-0 text-[0.85rem] text-white/90 md:text-[0.9rem] leading-normal">{loc('SearchHintID', '按 ID 搜索')}</p>
-        <p className="m-0 text-[0.85rem] text-white/90 md:text-[0.9rem] leading-normal">{loc('SearchHintHash', '按 Hash 搜索')}</p>
-        <p className="m-0 text-[0.85rem] text-white/90 md:text-[0.9rem] leading-normal">{loc('SearchHintTag', '按标签搜索')}</p>
-        <p className="m-0 text-[0.85rem] text-white/90 md:text-[0.9rem] leading-normal">{loc('SearchHintUploader', '按上传者搜索')}</p>
+        <p className="m-0 text-[0.85rem] text-gray-600 md:text-[0.9rem] leading-normal">
+          {loc("SearchHintID", "按 ID 搜索")}
+        </p>
+        <p className="m-0 text-[0.85rem] text-gray-600 md:text-[0.9rem] leading-normal">
+          {loc("SearchHintHash", "按 Hash 搜索")}
+        </p>
+        <p className="m-0 text-[0.85rem] text-gray-600 md:text-[0.9rem] leading-normal">
+          {loc("SearchHintTag", "按标签搜索")}
+        </p>
+        <p className="m-0 text-[0.85rem] text-gray-600 md:text-[0.9rem] leading-normal">
+          {loc("SearchHintUploader", "按上传者搜索")}
+        </p>
       </div>
     </div>
   );
 
   return (
     <div className="mt-4 md:mt-0 mb-4 md:mb-4 px-4 md:px-4 w-full">
-      <div className="relative border border-white/10 rounded-[20px] overflow-visible">
+      <div className="relative overflow-visible">
         <div className="flex flex-row justify-center items-center gap-2 md:gap-6 p-3 md:p-4 w-full">
           <div className="flex-1 min-w-0">
             <div className="relative flex items-center w-full">
               <input
                 type="text"
-                className="bg-[rgba(20,20,25,0.8)] backdrop-blur-[15px] backdrop-saturate-150 px-6 md:px-7 py-3 md:py-4 pr-10 md:pr-14 border-2 border-white/15 focus:border-blue-500/50 rounded-[30px] outline-none w-full h-11 text-white placeholder:text-white/40 text-sm md:text-base transition-colors"
-                placeholder={initS === '' ? loc('SearchPlaceholder', '搜索...') : initS}
+                className="bg-white px-6 md:px-7 py-3 md:py-4 pr-10 md:pr-14 border-2 border-gray-200 focus:border-[#5C8DC1] rounded-[30px] outline-none w-full h-11 text-gray-700 placeholder:text-gray-400 text-sm md:text-base transition-colors"
+                placeholder={
+                  initS === "" ? loc("SearchPlaceholder", "搜索...") : initS
+                }
                 value={currentValue}
                 onChange={handleInputChange}
-                aria-label={loc('SearchPlaceholder', '搜索...')}
+                aria-label={loc("SearchPlaceholder", "搜索...")}
               />
               <AnimatePresence>
                 {currentValue && (
@@ -429,12 +439,23 @@ function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps)
                     animate={{ opacity: 1, scale: 1 }}
                     exit={{ opacity: 0, scale: 0.8 }}
                     transition={{ duration: 0.15 }}
-                    className="top-1/2 right-10 z-2 absolute flex justify-center items-center bg-white/10 hover:bg-white/20 border-none rounded-full w-5 h-5 text-white/60 hover:text-white text-xs leading-none transition-colors -translate-y-1/2 cursor-pointer"
+                    className="top-1/2 right-10 z-2 absolute flex justify-center items-center bg-gray-100 hover:bg-gray-200 border-none rounded-full w-5 h-5 text-gray-400 hover:text-gray-600 text-xs leading-none transition-colors -translate-y-1/2 cursor-pointer"
                     onClick={handleClearSearch}
-                    aria-label={loc('ClearSearch', '清空搜索')}
+                    aria-label={loc("ClearSearch", "清空搜索")}
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="10"
+                      height="10"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="3"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <path d="M18 6 6 18" />
+                      <path d="m6 6 12 12" />
                     </svg>
                   </motion.button>
                 )}
@@ -446,9 +467,9 @@ function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps)
                 plain={true}
               >
                 <div
-                  className="top-1/2 right-3 z-10 absolute flex justify-center items-center bg-white/5 hover:bg-white/15 active:bg-white/20 shadow-[0_2px_8px_rgba(0,0,0,0.2)] border border-white/25 hover:border-white/40 rounded-full w-5 h-5 font-bold text-[10px] text-white/60 hover:text-white leading-none transition-all -translate-y-1/2 duration-200 cursor-pointer"
+                  className="top-1/2 right-3 z-10 absolute flex justify-center items-center bg-gray-100 hover:bg-[#5C8DC1]/10 active:bg-[#5C8DC1]/15 shadow-sm border border-gray-200 hover:border-[#5C8DC1]/30 rounded-full w-5 h-5 font-bold text-[10px] text-[#5C8DC1] hover:text-[#4A7DAF] leading-none transition-all -translate-y-1/2 duration-200 cursor-pointer"
                   role="button"
-                  aria-label='Search Hint Button'
+                  aria-label="Search Hint Button"
                 >
                   ?
                 </div>
@@ -456,28 +477,46 @@ function SearchBar({ onChange, initS, sortType, onSortChange }: SearchBarProps)
             </div>
           </div>
 
-          <div className="shrink-0">
-            <select
-              value={isMobile ? (sortType === undefined ? 'placeholder' : sortType) : sortType}
-              onChange={(e) => {
-                if (e.target.value === 'placeholder') return;
-                const val = parseInt(e.target.value);
-                onSortChange(val);
-              }}
-              className="bg-[rgba(20,20,25,0.8)] backdrop-blur-xl backdrop-saturate-150 px-2 md:px-3 py-1 border border-white/20 rounded-full outline-none w-auto min-w-16 md:min-w-20 h-10 md:h-11.25 overflow-hidden text-white text-xs sm:text-sm text-center whitespace-nowrap appearance-none cursor-pointer"
-              data-mobile-label={loc('SortBy', '排序方式')}
+          <div className="shrink-0 relative" ref={sortRef}>
+            <button
+              onClick={() => setIsSortOpen(!isSortOpen)}
+              className="flex items-center justify-center gap-1.5 bg-white hover:bg-gray-50 px-4 md:px-5 py-2 border border-gray-200 hover:border-[#5C8DC1]/30 rounded-full min-h-10 text-gray-700 hover:text-[#5C8DC1] text-xs sm:text-sm font-medium whitespace-nowrap overflow-visible transition-all duration-200 cursor-pointer"
             >
-              {isMobile && (
-                <option value="placeholder" disabled>
-                  {loc('SortBy', '排序方式')}
-                </option>
-              )}
-              {sortOptions.map((label, i) => (
-                <option key={i} value={i}>
-                  {label}
-                </option>
-              ))}
-            </select>
+              <span className="inline-flex items-center justify-center">
+                {React.createElement(sortIcons[sortType ?? 0], { size: 14 })}
+              </span>
+              <span className="inline-flex items-center">
+                {sortOptions[sortType ?? 0]}
+              </span>
+              <ChevronDown
+                size={12}
+                className={`transition-transform duration-200 ${isSortOpen ? "rotate-180" : ""}`}
+              />
+            </button>
+
+            {isSortOpen && (
+              <div className="top-full right-0 z-20 absolute bg-white shadow-[0_8px_30px_rgba(0,0,0,0.1),0_2px_8px_rgba(0,0,0,0.04)] mt-2 py-1 border border-gray-200 rounded-xl min-w-[140px] overflow-hidden">
+                {sortOptions.map((label, i) => (
+                  <button
+                    key={i}
+                    onClick={() => {
+                      onSortChange(i);
+                      setIsSortOpen(false);
+                    }}
+                    className={`flex items-center gap-2 px-4 py-2.5 w-full text-sm text-left transition-colors ${
+                      (sortType ?? 0) === i
+                        ? "text-[#5C8DC1] bg-[#5C8DC1]/5 font-semibold"
+                        : "text-gray-600 hover:text-[#5C8DC1] hover:bg-gray-50"
+                    }`}
+                  >
+                    <span className="inline-flex items-center justify-center">
+                      {React.createElement(sortIcons[i], { size: 18 })}
+                    </span>
+                    <span className="inline-flex items-center">{label}</span>
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -489,28 +528,33 @@ function MainComp() {
   const loc = useLoc();
   const [searchParams] = useSearchParams();
   const isInitialMount = useRef(true);
-  const [activeTab, setActiveTab] = useState<'all' | 'random'>('all');
+  const [activeTab, setActiveTab] = useState<"all" | "random">(() => {
+    const stored = localStorage.getItem("homeActiveTab");
+    return stored === "random" ? "random" : "all";
+  });
 
   // 从 localStorage 或 URL 参数初始化状态
   const [Search, setSearch] = useState(() => {
-    const urlSearchParam = searchParams.get('search');
-    const initialValue = urlSearchParam || localStorage.getItem('search') || '';
+    const urlSearchParam = searchParams.get("search");
+    const initialValue = urlSearchParam || localStorage.getItem("search") || "";
     // 保存URL参数到localStorage
     if (urlSearchParam) {
-      localStorage.setItem('search', urlSearchParam);
+      localStorage.setItem("search", urlSearchParam);
     }
     return initialValue;
   });
   const [page, setPage] = useState(() => {
-    const stored = localStorage.getItem('lastclickpage');
-    return parseInt(stored || '0');
+    const stored = localStorage.getItem("lastclickpage");
+    return parseInt(stored || "0");
   });
   const [maxpage, setMaxpage] = useState(999999);
   const [sortType, setSortType] = useState(() => {
-    const stored = localStorage.getItem('sort');
+    const stored = localStorage.getItem("sort");
     return stored ? parseInt(stored) : 0;
   });
-  const [randomSeed, setRandomSeed] = useState(() => Math.floor(Math.random() * 1000000));
+  const [randomSeed, setRandomSeed] = useState(() =>
+    Math.floor(Math.random() * 1000000),
+  );
 
   // 处理 URL 参数变化（跳过初始挂载）
   useEffect(() => {
@@ -519,11 +563,11 @@ function MainComp() {
       return;
     }
 
-    const urlSearchParam = searchParams.get('search');
+    const urlSearchParam = searchParams.get("search");
     if (urlSearchParam) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setSearch(urlSearchParam);
-      localStorage.setItem('search', urlSearchParam);
+      localStorage.setItem("search", urlSearchParam);
     }
   }, [searchParams]);
 
@@ -533,49 +577,59 @@ function MainComp() {
       setSearch(value);
       setPage(0);
       setMaxpage(9999999999999);
-      localStorage.setItem('search', value);
-      localStorage.setItem('lastclickpage', '0');
+      localStorage.setItem("search", value);
+      localStorage.setItem("lastclickpage", "0");
     },
     // delay in ms
-    500
+    500,
   );
 
   const onSortChange = (val: number) => {
     setSortType(val);
-    localStorage.setItem('sort', val.toString());
+    localStorage.setItem("sort", val.toString());
     setPage(0);
-    localStorage.setItem('lastclickpage', '0');
+    localStorage.setItem("lastclickpage", "0");
   };
 
-  const sortWords = ['', 'likep', 'commp', 'playp'];
+  const sortWords = ["", "likep", "commp", "playp"];
 
   const refreshRandomBatch = useCallback(() => {
     setRandomSeed((prev) => prev + 1);
   }, []);
 
+  useEffect(() => {
+    localStorage.setItem("homeActiveTab", activeTab);
+  }, [activeTab]);
+
   // 渲染数据
   return (
     <>
       <div className="flex justify-center px-4 pt-2 pb-3">
-        <div className="inline-flex bg-[rgba(20,20,25,0.7)] p-1 border border-white/10 rounded-full">
+        <div className="inline-flex bg-gray-100 p-1 border border-gray-200 rounded-full">
           <button
-            className={`px-4 md:px-5 py-2 rounded-full text-sm md:text-base transition-colors cursor-pointer ${activeTab === 'all' ? 'bg-blue-500/80 text-white' : 'text-white/80 hover:text-white'
-              }`}
-            onClick={() => setActiveTab('all')}
+            className={`px-4 md:px-5 py-2 rounded-full text-sm md:text-base font-medium transition-all duration-200 cursor-pointer hover:scale-105 active:scale-95 ${
+              activeTab === "all"
+                ? "bg-white text-[#5C8DC1] shadow-sm"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+            onClick={() => setActiveTab("all")}
           >
-            {loc('AllCharts', '全部谱面')}
+            {loc("AllCharts", "全部谱面")}
           </button>
           <button
-            className={`px-4 md:px-5 py-2 rounded-full text-sm md:text-base transition-colors cursor-pointer ${activeTab === 'random' ? 'bg-blue-500/80 text-white' : 'text-white/80 hover:text-white'
-              }`}
-            onClick={() => setActiveTab('random')}
+            className={`px-4 md:px-5 py-2 rounded-full text-sm md:text-base font-medium transition-all duration-200 cursor-pointer hover:scale-105 active:scale-95 ${
+              activeTab === "random"
+                ? "bg-white text-[#5C8DC1] shadow-sm"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+            onClick={() => setActiveTab("random")}
           >
-            {loc('RandomRecommend', '随机推荐')}
+            {loc("RandomRecommend", "随机推荐")}
           </button>
         </div>
       </div>
 
-      {activeTab === 'all' ? (
+      {activeTab === "all" ? (
         <>
           <SearchBar
             onChange={(e) => debounced(e.target.value)}
@@ -585,80 +639,78 @@ function MainComp() {
           />
 
           <SongList
-            url={endpoints.maichart.listSearchAndSort(Search, sortWords[sortType], page)}
+            url={endpoints.maichart.listSearchAndSort(
+              Search,
+              sortWords[sortType],
+              page,
+            )}
             page={page}
             setMax={setMaxpage}
           />
 
-          <div className="flex flex-col items-center gap-6 mx-auto mt-12 px-4 max-w-7xl">
-            <div className="flex items-center gap-4 bg-[rgba(20,20,25,0.9)] shadow-[0_8px_32px_rgba(0,0,0,0.3),0_2px_8px_rgba(0,0,0,0.2)] backdrop-blur-xl p-6 border border-white/10 rounded-xl">
+          <div className="flex flex-col items-center gap-4 mx-auto mt-8 px-4">
+            <div className="flex items-center gap-3 p-4">
               <button
-                className={`px-6 py-3 bg-blue-500/80 border-none rounded-lg text-white font-medium cursor-pointer min-w-20 ${page - 1 < 0 ? 'bg-gray-500/50 cursor-not-allowed opacity-60' : ''}`}
+                className={`flex items-center justify-center px-4 py-2.5 text-gray-700 hover:text-[#5C8DC1] font-medium text-sm cursor-pointer min-w-[3rem] transition-all duration-200 hover:scale-105 active:scale-95 ${page - 1 < 0 ? "opacity-20 cursor-not-allowed" : ""}`}
                 disabled={page - 1 < 0}
                 onClick={() => {
                   setPage(page - 1);
                   window.scrollTo(0, 200);
                 }}
               >
-                ←
+                <ChevronLeft size={18} />
               </button>
 
               <div className="flex items-center gap-2">
-                <span className="text-[#ccc] text-sm">{loc('PageOf', '第')}</span>
+                <span className="text-gray-400 text-sm">
+                  {loc("PageOf", "第")}
+                </span>
                 <input
                   type="number"
                   value={page}
-                  className="bg-black/70 focus:shadow-[0_0_8px_rgba(59,130,246,0.3)] p-2 border border-white/20 focus:border-blue-500 rounded-md focus:outline-none w-15 font-medium text-white text-center"
+                  className="bg-gray-50 focus:shadow-[0_0_0_2px_rgba(92,141,193,0.2)] px-3 py-2 border border-gray-200 focus:border-[#5C8DC1] rounded-lg focus:outline-none w-16 font-medium text-gray-700 text-center transition-colors"
                   onChange={(event) => {
-                    if (event.target.value !== '') {
+                    if (event.target.value !== "") {
                       setPage(parseInt(event.target.value));
                     } else setPage(0);
                   }}
                   min="0"
                   step="1"
                 />
-                <span className="text-[#ccc] text-sm">{loc('Page', '页')}</span>
+                <span className="text-gray-400 text-sm">
+                  {loc("Page", "页")}
+                </span>
               </div>
 
               <button
-                className={`px-6 py-3 bg-blue-500/80 border-none rounded-lg text-white font-medium cursor-pointer min-w-20 ${page >= maxpage ? 'bg-gray-500/50 cursor-not-allowed opacity-60' : ''}`}
+                className={`flex items-center justify-center px-4 py-2.5 text-gray-700 hover:text-[#5C8DC1] font-medium text-sm cursor-pointer min-w-[3rem] transition-all duration-200 hover:scale-105 active:scale-95 ${page >= maxpage ? "opacity-20 cursor-not-allowed" : ""}`}
                 disabled={page >= maxpage}
                 onClick={() => {
                   setPage(page + 1);
                   window.scrollTo(0, 200);
                 }}
               >
-                →
+                <ChevronRight size={18} />
               </button>
             </div>
-
-            <button
-              className="bg-white/10 px-6 py-2 border border-white/20 rounded-lg text-white cursor-pointer"
-              onClick={() => {
-                setPage(0);
-                window.scrollTo(0, 200);
-              }}
-            >
-              {loc('FrontPage', '首页')}
-            </button>
-            <IntegratedDownloadTypeSelector isMobile={true} />
+            <IntegratedDownloadTypeSelector />
           </div>
         </>
       ) : (
         <>
-          <div className="flex flex-col items-center gap-4 mx-auto mb-6 px-4 max-w-7xl">
+          <div className="flex justify-center mx-auto mb-6 px-4">
             <button
-              className="bg-blue-500/80 hover:bg-blue-500 px-6 py-2 border-none rounded-lg font-medium text-white cursor-pointer"
+              className="flex items-center gap-2 bg-white hover:bg-gray-50 px-5 py-2.5 border border-gray-200 hover:border-[#5C8DC1]/30 rounded-lg text-gray-700 hover:text-[#5C8DC1] text-sm font-medium transition-all duration-200 cursor-pointer"
               onClick={refreshRandomBatch}
             >
-              {loc('RefreshBatch', '换一批')}
+              {loc("RefreshBatch", "换一批")}
             </button>
           </div>
 
           <RandomRecommendList refreshKey={randomSeed} />
 
           <div className="flex justify-center mt-12 px-4">
-            <IntegratedDownloadTypeSelector isMobile={true} />
+            <IntegratedDownloadTypeSelector />
           </div>
         </>
       )}
@@ -674,7 +726,7 @@ function RandomRecommendList({ refreshKey }: { refreshKey: number }) {
     cachedSongListFetcher,
     {
       revalidateOnFocus: false,
-    }
+    },
   );
 
   const randomSongs = useMemo(() => {
@@ -698,7 +750,11 @@ function RandomRecommendList({ refreshKey }: { refreshKey: number }) {
   }, [data, refreshKey]);
 
   if (error) {
-    return <div className="m-auto w-full text-[50px] text-center">{loc('ServerError', '服务器错误')}</div>;
+    return (
+      <div className="m-auto w-full text-[50px] text-center">
+        {loc("ServerError", "服务器错误")}
+      </div>
+    );
   }
 
   if (isLoading) {
@@ -710,11 +766,15 @@ function RandomRecommendList({ refreshKey }: { refreshKey: number }) {
   }
 
   if (randomSongs.length === 0) {
-    return <div className="m-auto w-full text-[50px] text-center">{loc('EmptyData', '暂无数据')}</div>;
+    return (
+      <div className="m-auto w-full text-[50px] text-center">
+        {loc("EmptyData", "暂无数据")}
+      </div>
+    );
   }
 
   return (
-    <div className="justify-center gap-[0.6rem] grid grid-cols-[repeat(auto-fit,minmax(20rem,20.6rem))] mx-auto p-2 w-full max-w-350">
+    <div className="justify-center gap-[0.6rem] grid grid-cols-[repeat(auto-fit,minmax(20rem,20.6rem))] mx-auto p-2 w-full">
       {randomSongs.map((song, index) => (
         <SongCard key={song.id} song={song} index={index} page={0} />
       ))}
@@ -722,46 +782,46 @@ function RandomRecommendList({ refreshKey }: { refreshKey: number }) {
   );
 }
 
-function IntegratedDownloadTypeSelector({ isMobile }: { isMobile: boolean }) {
-  const loc = useLoc();
+function IntegratedDownloadTypeSelector() {
   const [currentType, setCurrentType] = useState(() => {
-    return localStorage.getItem('DownloadType') || 'zip';
+    return localStorage.getItem("DownloadType") || "zip";
   });
-  const [justChanged, setJustChanged] = useState(false);
-
-  const handleChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newtype = e.target.value;
-    if (newtype === 'placeholder') return;
-    localStorage.setItem('DownloadType', newtype);
-    setCurrentType(newtype);
-
-    setJustChanged(true);
-    setTimeout(() => setJustChanged(false), 2000);
-  };
+  const [setJustChanged] = useState(false);
 
   return (
-    <div className="flex items-center gap-3">
-      {!isMobile && (
-        <label className={`${justChanged ? 'text-[#22c55e]' : ''}`}>
-          {loc('DownloadFormat', '下载格式')}
-          {justChanged && <span className="ml-2 font-semibold text-[#22c55e] text-sm">✓</span>}
-        </label>
-      )}
-      <select
-        value={isMobile ? currentType || 'placeholder' : currentType}
-        onChange={handleChange}
-        className="bg-[rgba(20,20,25,0.8)] backdrop-blur-xl backdrop-saturate-150 px-3 py-1 border border-white/20 rounded-full outline-none w-full md:w-auto min-w-0 md:min-w-20 h-10 md:h-11.25 overflow-hidden text-white text-xs sm:text-sm text-center whitespace-nowrap appearance-none cursor-pointer"
-        data-mobile-label={loc('DownloadFormat', '下载格式')}
-      >
-        {isMobile && (
-          <option value="placeholder" disabled>
-            {loc('DownloadFormat', '下载格式')}
-            {justChanged && ' ✓'}
-          </option>
-        )}
-        <option value="zip">ZIP</option>
-        <option value="adx">ADX</option>
-      </select>
+    <div className="flex flex-col items-center gap-1.5">
+      <div className="flex bg-gray-100 rounded-full p-0.5">
+        <button
+          onClick={() => {
+            localStorage.setItem("DownloadType", "zip");
+            setCurrentType("zip");
+            setJustChanged(true);
+            setTimeout(() => setJustChanged(false), 2000);
+          }}
+          className={`px-3 md:px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium transition-all duration-200 ${
+            currentType === "zip"
+              ? "bg-white text-[#5C8DC1] shadow-sm"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          ZIP
+        </button>
+        <button
+          onClick={() => {
+            localStorage.setItem("DownloadType", "adx");
+            setCurrentType("adx");
+            setJustChanged(true);
+            setTimeout(() => setJustChanged(false), 2000);
+          }}
+          className={`px-3 md:px-4 py-1.5 rounded-full text-xs sm:text-sm font-medium transition-all duration-200 ${
+            currentType === "adx"
+              ? "bg-white text-[#5C8DC1] shadow-sm"
+              : "text-gray-500 hover:text-gray-700"
+          }`}
+        >
+          ADX
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/pages/SongPage.tsx b/src/pages/SongPage.tsx
index 642f051..67377bf 100644
--- a/src/pages/SongPage.tsx
+++ b/src/pages/SongPage.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useState, useRef } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
-import { endpoints } from '@/config/api';
-import { toast } from 'react-toastify';
-import { setLanguage } from '@/utils/i18n';
-import { useLoc } from '@/hooks';
+import { useEffect, useState, useRef } from "react";
+import { Link, useSearchParams } from "react-router-dom";
+import { endpoints } from "@/config/api";
+import { toast } from "react-toastify";
+import { setLanguage } from "@/utils/i18n";
+import { useLoc } from "@/hooks";
 import {
   PageLayout,
   CoverPic,
@@ -18,10 +18,10 @@ import {
   ScoreRanking,
   CollectionModal,
   LoadingSpinner,
-} from '@/components';
-import { downloadSong } from '@/utils/download';
-import { parseTmpRichText } from '@/utils/richTextUtils';
-import type { SongDetailsContainerProps, SongSummary } from '@/types';
+} from "@/components";
+import { downloadSong } from "@/utils/download";
+import { parseTmpRichText } from "@/utils/richTextUtils";
+import type { SongDetailsContainerProps, SongSummary } from "@/types";
 
 export default function SongPage() {
   const loc = useLoc();
@@ -29,20 +29,22 @@ export default function SongPage() {
   const [checkedParam, setCheckedParam] = useState<string | null>(null);
   const [songData, setSongData] = useState<SongSummary | null>(null);
   const [searchParams] = useSearchParams();
-  const param = searchParams.get('id');
+  const param = searchParams.get("id");
 
   useEffect(() => {
-    setLanguage(localStorage.getItem('language') || navigator.language).then(() => {
-      setReady(true);
-    });
+    setLanguage(localStorage.getItem("language") || navigator.language).then(
+      () => {
+        setReady(true);
+      },
+    );
   }, []);
 
   useEffect(() => {
     if (!param) return;
 
     fetch(endpoints.maichart.summary(param!), {
-      mode: 'cors',
-      credentials: 'include'
+      mode: "cors",
+      credentials: "include",
     })
       .then(async (res) => {
         setCheckedParam(param);
@@ -73,7 +75,9 @@ export default function SongPage() {
     return (
       <PageLayout>
         <div className="flex justify-center items-center min-h-[60vh]">
-          <div className="text-white text-2xl">{loc('SongNotFound', '歌曲不存在')}</div>
+          <div className="text-gray-700 text-2xl">
+            {loc("SongNotFound", "歌曲不存在")}
+          </div>
         </div>
       </PageLayout>
     );
@@ -82,7 +86,7 @@ export default function SongPage() {
   return (
     <PageLayout>
       <div
-        className="-z-10 fixed inset-0 bg-cover bg-top-left blur-[20px] brightness-30"
+        className="-z-10 fixed inset-0 bg-cover bg-top-left blur-[10px] brightness-60"
         style={{ backgroundImage: `url(${endpoints.maichart.image(param!)})` }}
       />
 
@@ -96,7 +100,10 @@ export default function SongPage() {
   );
 }
 
-function SongDetailsContainer({ id, data }: SongDetailsContainerProps & { data: SongSummary }) {
+function SongDetailsContainer({
+  id,
+  data,
+}: SongDetailsContainerProps & { data: SongSummary }) {
   return (
     <div className="bg-white/12 shadow-[0_20px_50px_rgb(0_0_0/0.35),inset_0_1px_0_rgb(255_255_255/0.25)] hover:shadow-[0_22px_60px_rgb(0_0_0/0.35),inset_0_1px_0_rgb(255_255_255/0.28)] backdrop-blur-xl backdrop-saturate-160 rounded-xl transition-all">
       <SongInfo id={id} data={data} />
@@ -104,7 +111,6 @@ function SongDetailsContainer({ id, data }: SongDetailsContainerProps & { data:
   );
 }
 
-
 function SongInfo({ data }: { id: string; data: SongSummary }) {
   const loc = useLoc();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -114,40 +120,35 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
 
   const o = data;
 
-  const OnDownloadClick = (params: { id: string; title: string }) => async () => {
-    await downloadSong({ id: params.id, title: params.title, toast: toast });
-  };
+  const OnDownloadClick =
+    (params: { id: string; title: string }) => async () => {
+      await downloadSong({ id: params.id, title: params.title, toast: toast });
+    };
 
   const shareSong = () => async () => {
     await navigator.clipboard.writeText(window.location.href);
-    toast.success(loc('ClipboardSuccess'));
+    toast.success(loc("ClipboardSuccess"));
   };
 
   return (
-    <div className="bg-transparent p-6">
-      <section className="gap-8 grid grid-cols-1 lg:grid-cols-[320px_1fr] mb-10">
+    <div className="bg-transparent p-6 text-white">
+      <section className="gap-8 flex flex-col mb-10">
         <div className="flex justify-center items-start">
-          <div className="shadow-[0_25px_50px_rgb(0_0_0/0.45)] w-48 md:w-64 h-48 md:h-64 hover:scale-105 transition-transform duration-300">
+          <div className="w-48 md:w-64 h-48 md:h-64 hover:scale-105 transition-transform duration-300">
             <CoverPic id={o.id} />
           </div>
         </div>
 
         <div className="flex flex-col justify-between gap-3">
-          <div
-            style={{
-              marginTop: '20px',
-              lineHeight: '5.5',
-              textAlign: 'center',
-            }}
-          >
-            <Tooltip content={loc('SearchForTitle') || '点击搜索该歌曲'}>
+          <div className="flex flex-col gap-1">
+            <Tooltip content={loc("SearchForTitle") || "点击搜索该歌曲"}>
               <h1
-                className="inline-block hover:shadow-lg hover:text-shadow drop-shadow-md px-5 py-2.5 rounded-lg font-black hover:text-white text-4xl md:text-5xl text-center tracking-tight transition-all hover:-translate-y-0.5 duration-300 cursor-pointer hover:transform"
+                className="font-black text-4xl tracking-tight transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
                 id={o.id}
                 onClick={() => {
-                  if (o.title && o.title !== '' && o.title !== null) {
-                    localStorage.setItem('search', o.title);
-                    window.location.href = '/';
+                  if (o.title && o.title !== "" && o.title !== null) {
+                    localStorage.setItem("search", o.title);
+                    window.location.href = "/";
                   }
                 }}
               >
@@ -155,25 +156,27 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
               </h1>
             </Tooltip>
 
-            <Tooltip content={loc('SearchForArtist') || '点击搜索该艺术家'}>
-              <div className="font-medium text-white/80 text-xl md:text-2xl text-center">
+            <Tooltip content={loc("SearchForArtist") || "点击搜索该艺术家"}>
+              <div className="font-medium text-xl tracking-tight text-center transition-all hover:-translate-y-0.5 duration-300 cursor-pointer">
                 <span
-                  className="inline-block hover:bg-white/10 hover:shadow-md px-3 py-1 rounded-md hover:text-white transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
+                  className="transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
                   onClick={() => {
-                    if (o.artist && o.artist !== '' && o.artist !== null) {
-                      localStorage.setItem('search', o.artist);
-                      window.location.href = '/';
+                    if (o.artist && o.artist !== "" && o.artist !== null) {
+                      localStorage.setItem("search", o.artist);
+                      window.location.href = "/";
                     }
                   }}
                 >
-                  Artist: {o.artist === '' || o.artist == null ? '-' : o.artist}
+                  {o.artist === "" || o.artist == null ? "-" : o.artist}
                 </span>
               </div>
             </Tooltip>
           </div>
 
           <div className="flex flex-col items-start gap-3">
-            <h3 className="m-0 font-bold text-white text-sm uppercase tracking-[0.05em]">All Difficulties</h3>
+            <h3 className="m-0 font-bold text-gray-700 text-sm uppercase tracking-[0.05em]">
+              All Difficulties
+            </h3>
             <SongDifficultyLevels
               levels={o.levels}
               songid={o.id}
@@ -187,35 +190,42 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
         <aside className="flex flex-col gap-4">
           {/* 移动端：设计师和标签水平排列 */}
           <div className="flex md:flex-row flex-col lg:flex-col gap-4 md:gap-4 lg:gap-4">
-            <Tooltip content={o.uploader + '@' + o.designer}>
-              <Link to={'/space?id=' + o.uploader} className="inline-flex flex-1 items-center gap-3.5 bg-white/10 hover:bg-white/15 shadow-[0_4px_12px_rgb(0_0_0/0.2),inset_0_1px_0_rgb(255_255_255/0.1)] hover:shadow-[0_6px_16px_rgb(0_0_0/0.3),inset_0_1px_0_rgb(255_255_255/0.15)] backdrop-blur-lg px-3 py-1.5 border border-white/20 hover:border-white/30 rounded-xl text-white/85 hover:text-white no-underline transition-all hover:-translate-y-0.5 duration-300">
+            <Tooltip content={o.uploader + "@" + o.designer}>
+              <Link
+                to={"/space?id=" + o.uploader}
+                className="inline-flex flex-1 items-center gap-3.5 bg-black/5 hover:bg-black/10 shadow-sm border border-gray-200 hover:border-[#5C8DC1]/30 rounded-xl text-gray-700 hover:text-[#5C8DC1] no-underline transition-all hover:-translate-y-0.5 duration-300"
+              >
                 <img
-                  className="shadow-sm border-2 border-white/25 rounded-full w-9 min-w-9 h-9 min-h-9 aspect-square transition-all duration-300 shrink-0"
+                  className="shadow-sm border-2 border-gray-200 rounded-full w-9 min-w-9 h-9 min-h-9 aspect-square transition-all duration-300 shrink-0"
                   src={endpoints.account.icon(o.uploader)}
                   alt={o.uploader}
                 />
                 <div className="flex flex-col items-start gap-1">
-                  <span className="font-semibold text-white/95 text-base leading-[1.3]">{o.uploader}</span>
-                  <span className="font-normal text-white/65 text-sm leading-[1.3]">{o.designer}</span>
+                  <span className="font-semibold text-gray-800 text-base leading-[1.3]">
+                    {o.uploader}
+                  </span>
+                  <span className="font-normal text-gray-500 text-sm leading-[1.3]">
+                    {o.designer}
+                  </span>
                 </div>
               </Link>
             </Tooltip>
 
-            <div className="flex-1 bg-white/8 shadow-[0_4px_15px_rgb(0_0_0/0.2),0_2px_8px_rgb(0_0_0/0.1)] backdrop-blur-[10px] p-5 border border-white/10 rounded-2xl transition-all duration-300">
-              <h3 className="mb-3 font-bold text-white text-sm uppercase tracking-wider">
-                {loc('Tags') || '标签'}
+            <div className="flex-1 bg-white shadow-sm border border-gray-200 p-5 rounded-2xl transition-all duration-300">
+              <h3 className="mb-3 font-bold text-gray-700 text-sm uppercase tracking-wider">
+                {loc("Tags") || "标签"}
               </h3>
               <div className="flex flex-wrap flex-1 gap-2">
                 {(o.tags || o.publicTags) &&
-                  (o.tags.length > 0 || o.publicTags.length > 0) ? (
+                (o.tags.length > 0 || o.publicTags.length > 0) ? (
                   <>
                     {o.tags.map((tag, index) => (
-                      <Tooltip content={loc('SearchForTag')} key={index}>
+                      <Tooltip content={loc("SearchForTag")} key={index}>
                         <span
-                          className="inline-flex items-center bg-[linear-gradient(135deg,rgb(139_69_19/0.3),rgb(101_67_33/0.2))] hover:bg-[linear-gradient(135deg,rgb(139_69_19/0.5),rgb(101_67_33/0.4))] hover:shadow-[0_4px_12px_rgb(139_69_19/0.3)] px-3 py-1 border border-[rgb(139_69_19/0.4)] hover:border-[rgb(139_69_19/0.7)] rounded-full font-medium text-[rgb(255_215_0/0.9)] hover:text-[#ffd700] text-xs transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
+                          className="inline-flex items-center bg-[linear-gradient(135deg,rgb(92_141_193/0.3),rgb(92_141_193/0.2))] hover:bg-[linear-gradient(135deg,rgb(92_141_193/0.5),rgb(92_141_193/0.4))] hover:shadow-[0_4px_12px_rgb(92_141_193/0.3)] px-3 py-1 border border-[rgb(92_141_193/0.4)] hover:border-[rgb(92_141_193/0.7)] rounded-full font-medium text-[rgb(92_141_193/0.9)] hover:text-[#5C8DC1] text-xs transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
                           onClick={() => {
-                            localStorage.setItem('search', tag);
-                            window.location.href = '/';
+                            localStorage.setItem("search", tag);
+                            window.location.href = "/";
                           }}
                         >
                           {tag}
@@ -223,12 +233,12 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
                       </Tooltip>
                     ))}
                     {o.publicTags?.map((tag, index) => (
-                      <Tooltip content={loc('SearchForTag')} key={index}>
+                      <Tooltip content={loc("SearchForTag")} key={index}>
                         <span
-                          className="inline-flex items-center bg-[linear-gradient(135deg,rgb(34_197_94/0.3),rgb(22_163_74/0.2))] hover:bg-[linear-gradient(135deg,rgb(34_197_94/0.5),rgb(22_163_74/0.4))] hover:shadow-[0_4px_12px_rgb(34_197_94/0.3)] px-3 py-1 border border-[rgb(34_197_94/0.4)] hover:border-[rgb(34_197_94/0.7)] rounded-full font-medium text-[rgb(74_222_128/0.9)] hover:text-[#4ade80] text-xs transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
+                          className="inline-flex items-center bg-[linear-gradient(135deg,rgb(92_141_193/0.3),rgb(92_141_193/0.2))] hover:bg-[linear-gradient(135deg,rgb(92_141_193/0.5),rgb(92_141_193/0.4))] hover:shadow-[0_4px_12px_rgb(92_141_193/0.3)] px-3 py-1 border border-[rgb(92_141_193/0.4)] hover:border-[rgb(92_141_193/0.7)] rounded-full font-medium text-[rgb(92_141_193/0.9)] hover:text-[#5C8DC1] text-xs transition-all hover:-translate-y-0.5 duration-300 cursor-pointer"
                           onClick={() => {
-                            localStorage.setItem('search', 'tag:' + tag);
-                            window.location.href = '/';
+                            localStorage.setItem("search", "tag:" + tag);
+                            window.location.href = "/";
                           }}
                         >
                           {tag}
@@ -237,8 +247,8 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
                     ))}
                   </>
                 ) : (
-                  <span className="text-white/40 text-sm italic">
-                    {loc('NoTags') || '暂无标签'}
+                  <span className="text-gray-400 text-sm italic">
+                    {loc("NoTags") || "暂无标签"}
                   </span>
                 )}
                 <TagManageTagLauncher
@@ -250,11 +260,11 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
             </div>
           </div>
 
-          <div className="flex flex-col gap-2 bg-white/8 shadow-[0_4px_15px_rgb(0_0_0/0.2),0_2px_8px_rgb(0_0_0/0.1)] backdrop-blur-[10px] p-5 border border-white/10 rounded-2xl transition-all duration-300">
+          <div className="flex flex-col gap-2 bg-white shadow-sm border border-gray-200 p-5 rounded-2xl transition-all duration-300">
             <button
-              className="bg-white/10 hover:bg-white/20 shadow-lg backdrop-blur-md border border-white/20 rounded-xl w-full h-11 font-bold text-white text-base transition-all"
+              className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-xl w-full h-11 font-bold text-gray-700 text-base transition-all"
               onClick={OnDownloadClick({ id: o.id, title: o.title })}
-              title={loc('Download')}
+              title={loc("Download")}
             >
               <span className="inline-flex justify-center items-center gap-2 w-full">
                 <svg
@@ -266,13 +276,13 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
                 >
                   <path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" />
                 </svg>
-                <span>{loc('Download') || '下载'}</span>
+                <span>{loc("Download") || "下载"}</span>
               </span>
             </button>
             <button
-              className="bg-white/10 hover:bg-white/20 shadow-lg backdrop-blur-md border border-white/20 rounded-xl w-full h-11 font-bold text-white text-base transition-all"
+              className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-xl w-full h-11 font-bold text-gray-700 text-base transition-all"
               onClick={shareSong()}
-              title={loc('Share')}
+              title={loc("Share")}
             >
               <span className="inline-flex justify-center items-center gap-2 w-full">
                 <svg
@@ -284,13 +294,13 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
                 >
                   <path d="M720-80q-50 0-85-35t-35-85q0-7 1-14.5t3-13.5L322-392q-17 15-38 23.5t-44 8.5q-50 0-85-35t-35-85q0-50 35-85t85-35q23 0 44 8.5t38 23.5l282-164q-2-6-3-13.5t-1-14.5q0-50 35-85t85-35q50 0 85 35t35 85q0 50-35 85t-85 35q-23 0-44-8.5T638-672L356-508q2 6 3 13.5t1 14.5q0 7-1 14.5t-3 13.5l282 164q17-15 38-23.5t44-8.5q50 0 85 35t35 85q0 50-35 85t-85 35Zm0-640q17 0 28.5-11.5T760-760q0-17-11.5-28.5T720-800q-17 0-28.5 11.5T680-760q0 17 11.5 28.5T720-720ZM240-440q17 0 28.5-11.5T280-480q0-17-11.5-28.5T240-520q-17 0-28.5 11.5T200-480q0 17 11.5 28.5T240-440Zm480 280q17 0 28.5-11.5T760-200q0-17-11.5-28.5T720-240q-17 0-28.5 11.5T680-200q0 17 11.5 28.5T720-160Zm0-600ZM240-480Zm480 280Z" />
                 </svg>
-                <span>{loc('Share') || '分享'}</span>
+                <span>{loc("Share") || "分享"}</span>
               </span>
             </button>
             <button
-              className="bg-white/10 hover:bg-white/20 shadow-lg backdrop-blur-md border border-white/20 rounded-xl w-full h-11 font-bold text-white text-base transition-all"
+              className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-xl w-full h-11 font-bold text-gray-700 text-base transition-all"
               onClick={() => setIsCollectionModalOpen(true)}
-              title={loc('Collection') || '收藏'}
+              title={loc("Collection") || "收藏"}
             >
               <span className="inline-flex justify-center items-center gap-2 w-full">
                 <svg
@@ -302,52 +312,52 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
                 >
                   <path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z" />
                 </svg>
-                <span>{loc('Collection') || '收藏'}</span>
+                <span>{loc("Collection") || "收藏"}</span>
               </span>
             </button>
-            <div style={{ display: 'none' }}>
+            <div style={{ display: "none" }}>
               <TagManageWidget ref={tagButtonRef} songid={o.id} />
             </div>
           </div>
 
           {/* ID/HASH/点赞面板 */}
-          <div className="relative flex flex-col bg-white/8 shadow-[0_4px_15px_rgb(0_0_0/0.2),0_2px_8px_rgb(0_0_0/0.1)] backdrop-blur-[10px] p-5 border border-white/10 rounded-2xl overflow-hidden transition-all duration-300">
+          <div className="relative flex flex-col bg-white shadow-sm border border-gray-200 p-5 rounded-2xl overflow-hidden transition-all duration-300">
             <div className="gap-y-3 grid grid-cols-[80px_1fr] text-sm">
-              <span className="text-white/40">ID</span>
+              <span className="text-gray-400">ID</span>
               <code
                 className="bg-black/20 px-2 py-0.5 rounded w-fit font-mono text-white/80 text-xs text-center break-all"
-                style={{ cursor: 'pointer' }}
+                style={{ cursor: "pointer" }}
                 title="点击复制"
                 onClick={() => {
                   navigator.clipboard.writeText(o.id);
-                  toast.success(loc('ClipboardSuccess'));
+                  toast.success(loc("ClipboardSuccess"));
                 }}
               >
                 {o.id}
               </code>
 
-              <span className="text-white/40">HASH</span>
+              <span className="text-gray-400">HASH</span>
               <code
-                className="bg-black/20 px-2 py-0.5 rounded w-fit font-mono text-white/80 text-xs text-center break-all"
-                style={{ cursor: 'pointer' }}
+                className="bg-gray-100 px-2 py-0.5 rounded w-fit font-mono text-gray-600 text-xs text-center break-all"
+                style={{ cursor: "pointer" }}
                 title="点击复制"
                 onClick={() => {
                   navigator.clipboard.writeText(o.hash);
-                  toast.success(loc('ClipboardSuccess'));
+                  toast.success(loc("ClipboardSuccess"));
                 }}
               >
                 {o.hash}
               </code>
 
-              <span className="text-white/40 text-xs">
-                {loc('UploadTime') || '上传时间'}
+              <span className="text-gray-400 text-xs">
+                {loc("UploadTime") || "上传时间"}
               </span>
-              <span className="pl-1.75 w-fit text-white/80 text-xs text-center">
+              <span className="pl-1.75 w-fit text-gray-600 text-xs text-center">
                 {new Date(o.timestamp).toLocaleString()}
               </span>
             </div>
 
-            <div className="my-3 border-white/10 border-t"></div>
+            <div className="my-3 border-t border-gray-200"></div>
 
             <LikeSender songid={o.id} />
           </div>
@@ -358,7 +368,7 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
             <MajdataView id={o.id} data={o} />
           ) : (
             <button
-              className="bg-white/10 hover:bg-white/20 shadow-lg backdrop-blur-md p-2.5 border border-white/20 rounded-xl w-full aspect-square font-bold text-base transition-all"
+              className="bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-xl w-full aspect-square font-bold text-base transition-all"
               onClick={() => setIsLoadMajdata(true)}
             >
               <span className="inline-flex justify-center items-center gap-2 w-full">
@@ -367,7 +377,7 @@ function SongInfo({ data }: { id: string; data: SongSummary }) {
                   height="120px"
                   viewBox="0 -960 960 960"
                   width="120px"
-                  fill="#e3e3e3"
+                  fill="#5C8DC1"
                 >
                   <path d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
                 </svg>
@@ -391,7 +401,7 @@ function MajdataView({ data }: { id: string; data: SongSummary }) {
   // 找到最后一个非空的level，从后往前遍历
   let firstNonEmptyIndex = -1;
   for (let i = o.levels.length - 1; i >= 0; i--) {
-    if (o.levels[i] !== '' && o.levels[i] !== null) {
+    if (o.levels[i] !== "" && o.levels[i] !== null) {
       firstNonEmptyIndex = i;
       break;
     }
@@ -399,7 +409,11 @@ function MajdataView({ data }: { id: string; data: SongSummary }) {
 
   return (
     <div className="w-full">
-      <Majdata songid={o.id} chartRoot={endpoints.maichart.prefix('')} level={'lv' + firstNonEmptyIndex} />
+      <Majdata
+        songid={o.id}
+        chartRoot={endpoints.maichart.prefix("")}
+        level={"lv" + firstNonEmptyIndex}
+      />
     </div>
   );
 }