diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
index 1eb3541..cf46b86 100644
--- a/src/pages/SeedList/Recommend/Recommend.css
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -1,4 +1,4 @@
-.recommend-wrapper {
+/* .recommend-wrapper {
   padding: 20px;
   background-color: #fff;
 }
@@ -35,4 +35,56 @@
 .paid-title {
   font-size: 16px;
   padding: 10px;
+} */
+
+
+.recommendation-page {
+  padding: 20px;
+  background-color: #f8f9fa;
+}
+
+.recommendation-page h2 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.seed-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.seed-card {
+  width: 160px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: transform 0.2s ease;
+  cursor: pointer;
+}
+
+.seed-card:hover {
+  transform: translateY(-4px);
+}
+
+.seed-card img {
+  width: 100%;
+  height: 220px;
+  object-fit: cover;
+}
+
+.seed-card .title {
+  padding: 8px;
+  font-size: 0.95rem;
+  text-align: center;
+  color: #333;
+}
+
+.login-reminder {
+  font-size: 1rem;
+  color: #888;
+  padding: 10px;
 }
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index dd38184..8270145 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -1,50 +1,48 @@
-// export default Recommend;
 import React, { useEffect, useState } from 'react';
+import axios from 'axios';
 import './Recommend.css';
+import { useUser } from '../../../context/UserContext';
 
 const Recommend = () => {
-  const [paidLists, setPaidLists] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const { user } = useUser();
+  const [popularSeeds, setPopularSeeds] = useState([]);
+  const [recommendedSeeds, setRecommendedSeeds] = useState([]);
 
   useEffect(() => {
-    const fetchPaidLists = async () => {
-      try {
-        
-        const response = await fetch(`/echo/recommendations/paid?user_id=1`);
-        console.log('请求地址:', `${process.env.REACT_APP_API_BASE}/echo/recommendations/paid?user_id=1`);
-
-
-        // const response = await fetch('/echo/recommendations/paid?user_id=1');
-        const data = await response.json();
-        if (data.status === 'success') {
-          setPaidLists(data.paid_recommendations);
-        } else {
-          console.warn('获取付费片单失败');
-        }
-      } catch (error) {
-        console.error('请求出错:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchPaidLists();
+    // 获取热门资源
+    axios
+      .get('/echo/recommendation/popular', { params: { limit: 16 } })
+      .then((res) => setPopularSeeds(res.data))
+      .catch((err) => console.error('获取热门资源失败', err));
   }, []);
 
+  useEffect(() => {
+    // 获取个性化推荐
+    if (user && user.userId) {
+      axios
+        .get(`/echo/recommendation/seeds/${user.userId}`)
+        .then((res) => setRecommendedSeeds(res.data))
+        .catch((err) => console.error('获取个性化推荐失败', err));
+    }
+  }, [user]);
+
+  const renderSeedCard = (seed) => (
+    <div className="seed-card" key={seed.id}>
+      <img src={seed.coverUrl || '/default-cover.jpg'} alt={seed.title} />
+      <div className="title">{seed.title}</div>
+    </div>
+  );
+
   return (
-    <div className="recommend-wrapper">
-      <h2 className="recommend-section-title">付费片单</h2>
-      {loading ? (
-        <p>加载中...</p>
+    <div className="recommendation-page">
+      <h2>🎬 正在热映</h2>
+      <div className="seed-list">{popularSeeds.map(renderSeedCard)}</div>
+
+      <h2>🎯 个性化推荐</h2>
+      {user ? (
+        <div className="seed-list">{recommendedSeeds.map(renderSeedCard)}</div>
       ) : (
-        <div className="recommend-paid-row">
-          {paidLists.map((item) => (
-            <div className="paid-card" key={item.group_id}>
-              <img src={item.image_url} alt={item.group_name} className="paid-cover" />
-              <div className="paid-title">{item.group_name}</div>
-            </div>
-          ))}
-        </div>
+        <div className="login-reminder">请登录以获取个性化推荐</div>
       )}
     </div>
   );