diff --git a/front/src/TorrentDetailPage.js b/front/src/TorrentDetailPage.js
index cc2dd24..ab34d98 100644
--- a/front/src/TorrentDetailPage.js
+++ b/front/src/TorrentDetailPage.js
@@ -10,12 +10,13 @@
   const [error, setError] = React.useState(null);
   // 假设你从某个地方获取了 userId（例如登录状态、localStorage 等）
   const [userId] = React.useState('user1550e8400-e29b-41d4-a716-44665544000023'); // 替换为实际的用户 ID
+  const [isFavorite, setIsFavorite] = React.useState(false); // 收藏状态
 
   const handleClick = () => {
     // 构造下载 URL，包含 userId 和 torrentId 参数
     console.log(torrentId)
     const downloadUrl = `${API_BASE_URL}/api/get-torrent?userId=${encodeURIComponent(userId)}&torrentId=${encodeURIComponent(torrentId)}`;
-    
+
     // 发起 GET 请求下载文件
     fetch(downloadUrl)
       .then(response => {
@@ -41,6 +42,11 @@
       });
   };
 
+  // 收藏按钮示例逻辑（仅前端切换）
+  const handleFavorite = () => {
+    setIsFavorite(fav => !fav);
+  };
+
   React.useEffect(() => {
     setLoading(true);
     setError(null);
@@ -64,24 +70,65 @@
   if (!detail) return <div className="container"><h1>未找到详情</h1></div>;
 
   return (
-    <div className="container">
-      <h1>种子详情页</h1>
-      <h2 style={{ fontSize: 'inherit', fontWeight: 'normal', textAlign: 'left' }}>标题: {detail.title || `种子${torrentId}`}</h2>
-      <p style={{ fontSize: 'inherit', textAlign: 'left' }}>简介: {detail.description || `这是种子${torrentId}的详细信息。`}</p>
-      <div style={{ textAlign: 'center', marginTop: '20px' }}>
-        <button 
-          style={{ 
-            padding: '10px 20px', 
-            fontSize: '16px', 
-            cursor: 'pointer', 
-            backgroundColor: '#d3f0ff', 
-            border: 'none', 
-            borderRadius: '4px' 
-          }} 
-          onClick={handleClick}
-        >
-          下载
-        </button>
+    <div className="container" style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
+      <div
+        style={{
+          background: "#fff",
+          borderRadius: 16,
+          boxShadow: "0 4px 24px #e0e7ff",
+          padding: "36px 48px",
+          maxWidth: 540,
+          width: "100%",
+          marginTop: 48,
+        }}
+      >
+        <h1 style={{ color: "#1976d2", fontWeight: 700, marginBottom: 24, fontSize: 28, letterSpacing: 1 }}>种子详情页</h1>
+        <div style={{ marginBottom: 18 }}>
+          <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8, color: "#222" }}>
+            标题：{detail.title || `种子${torrentId}`}
+          </div>
+          <div style={{ fontSize: 16, color: "#555", marginBottom: 8 }}>
+            简介：{detail.description || `这是种子${torrentId}的详细信息。`}
+          </div>
+        </div>
+        <div style={{ display: "flex", gap: 24, marginTop: 32, justifyContent: "center" }}>
+          <button
+            style={{
+              padding: "10px 32px",
+              fontSize: "16px",
+              cursor: "pointer",
+              background: "linear-gradient(90deg, #42a5f5 0%, #1976d2 100%)",
+              color: "#fff",
+              border: "none",
+              borderRadius: "8px",
+              fontWeight: 600,
+              boxShadow: "0 2px 8px #b2d8ea",
+              transition: "background 0.2s",
+            }}
+            onClick={handleClick}
+          >
+            下载
+          </button>
+          <button
+            style={{
+              padding: "10px 32px",
+              fontSize: "16px",
+              cursor: "pointer",
+              background: isFavorite
+                ? "linear-gradient(90deg, #ffb74d 0%, #ff9800 100%)"
+                : "linear-gradient(90deg, #f0f0f0 0%, #bdbdbd 100%)",
+              color: isFavorite ? "#fff" : "#333",
+              border: "none",
+              borderRadius: "8px",
+              fontWeight: 600,
+              boxShadow: isFavorite ? "0 2px 8px #ffe0b2" : "0 2px 8px #e0e7ff",
+              transition: "background 0.2s",
+            }}
+            onClick={handleFavorite}
+          >
+            {isFavorite ? "已收藏" : "收藏"}
+          </button>
+        </div>
       </div>
     </div>
   );