diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
index 3cc0e90..1eb3541 100644
--- a/src/pages/SeedList/Recommend/Recommend.css
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -1,42 +1,38 @@
-.recommend-page {
+.recommend-wrapper {
   padding: 20px;
-  background-color: #f0f0f0;
-}
-
-.recommend-section {
-  margin-bottom: 30px;
-}
-
-.recommend-section h2 {
-  font-size: 24px;
-  margin-bottom: 10px;
-  color: #333;
-}
-
-.recommend-row {
-  display: flex;
-  overflow-x: scroll;
-  gap: 20px;
-}
-
-.recommend-card {
-  width: 150px;
-  text-align: center;
   background-color: #fff;
-  border-radius: 10px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 10px;
 }
 
-.recommend-image {
+.recommend-section-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 15px;
+}
+
+.recommend-paid-row {
+  display: flex;
+  gap: 20px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.paid-card {
+  width: 200px;
+  flex-shrink: 0;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #f9f9f9;
+  text-align: center;
+}
+
+.paid-cover {
   width: 100%;
-  height: 150px;
+  height: 120px;
   object-fit: cover;
-  border-radius: 5px;
 }
 
-.recommend-title {
-  margin-top: 10px;
+.paid-title {
   font-size: 16px;
-  color: #333;
+  padding: 10px;
 }
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index c33d153..97e702b 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -1,87 +1,51 @@
-import React from 'react';
+// export default Recommend;
+import React, { useEffect, useState } from 'react';
 import './Recommend.css';
 
-// 假数据
-const recommendData = {
-  paidList: [
-    { title: '片单 1', image: 'https://via.placeholder.com/150' },
-    { title: '片单 2', image: 'https://via.placeholder.com/150' },
-    { title: '片单 3', image: 'https://via.placeholder.com/150' },
-  ],
-  nowPlaying: [
-    { title: '电影 1', image: 'https://via.placeholder.com/150' },
-    { title: '电影 2', image: 'https://via.placeholder.com/150' },
-    { title: '电影 3', image: 'https://via.placeholder.com/150' },
-    { title: '电影 4', image: 'https://via.placeholder.com/150' },
-    { title: '电影 5', image: 'https://via.placeholder.com/150' },
-    { title: '电影 6', image: 'https://via.placeholder.com/150' },
-    { title: '电影 7', image: 'https://via.placeholder.com/150' },
-    { title: '电影 8', image: 'https://via.placeholder.com/150' },
-  ],
-  movieRecommendations: [
-    { title: '电影 1', image: 'https://via.placeholder.com/150' },
-    { title: '电影 2', image: 'https://via.placeholder.com/150' },
-    { title: '电影 3', image: 'https://via.placeholder.com/150' },
-    { title: '电影 4', image: 'https://via.placeholder.com/150' },
-  ],
-  tvRecommendations: [
-    { title: '电视剧 1', image: 'https://via.placeholder.com/150' },
-    { title: '电视剧 2', image: 'https://via.placeholder.com/150' },
-    { title: '电视剧 3', image: 'https://via.placeholder.com/150' },
-    { title: '电视剧 4', image: 'https://via.placeholder.com/150' },
-  ]
-};
-
 const Recommend = () => {
+  const [paidLists, setPaidLists] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchPaidLists = async () => {
+      try {
+        const API_BASE = process.env.REACT_APP_API_BASE;
+        const response = await fetch(`${API_BASE}/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();
+  }, []);
+
   return (
-    <div className="recommend-page">
-      <div className="recommend-section">
-        <h2>付费片单</h2>
-        <div className="recommend-row">
-          {recommendData.paidList.map((item, index) => (
-            <div key={index} className="recommend-card">
-              <img src={item.image} alt={item.title} className="recommend-image" />
-              <span className="recommend-title">{item.title}</span>
+    <div className="recommend-wrapper">
+      <h2 className="recommend-section-title">付费片单</h2>
+      {loading ? (
+        <p>加载中...</p>
+      ) : (
+        <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>
-
-      <div className="recommend-section">
-        <h2>正在热映</h2>
-        <div className="recommend-row">
-          {recommendData.nowPlaying.map((item, index) => (
-            <div key={index} className="recommend-card">
-              <img src={item.image} alt={item.title} className="recommend-image" />
-              <span className="recommend-title">{item.title}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="recommend-section">
-        <h2>电影推荐</h2>
-        <div className="recommend-row">
-          {recommendData.movieRecommendations.map((item, index) => (
-            <div key={index} className="recommend-card">
-              <img src={item.image} alt={item.title} className="recommend-image" />
-              <span className="recommend-title">{item.title}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="recommend-section">
-        <h2>电视剧推荐</h2>
-        <div className="recommend-row">
-          {recommendData.tvRecommendations.map((item, index) => (
-            <div key={index} className="recommend-card">
-              <img src={item.image} alt={item.title} className="recommend-image" />
-              <span className="recommend-title">{item.title}</span>
-            </div>
-          ))}
-        </div>
-      </div>
+      )}
     </div>
   );
 };