diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
new file mode 100644
index 0000000..3cc0e90
--- /dev/null
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -0,0 +1,42 @@
+.recommend-page {
+  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 {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.recommend-title {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #333;
+}
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
new file mode 100644
index 0000000..c33d153
--- /dev/null
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -0,0 +1,89 @@
+import React 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 = () => {
+  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>
+          ))}
+        </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>
+  );
+};
+
+export default Recommend;
diff --git a/src/pages/SeedList/SeedList.css b/src/pages/SeedList/SeedList.css
new file mode 100644
index 0000000..5d17275
--- /dev/null
+++ b/src/pages/SeedList/SeedList.css
@@ -0,0 +1,173 @@
+ .main-page {
+    background-color: #5c3f31;
+    color: white;
+  }
+  
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+  
+  .logo-and-name {
+    display: flex;
+    align-items: center;
+  }
+  
+  .logo {
+    height: 30px;
+    margin-right: 10px;
+  }
+  
+  .site-name {
+    font-size: 24px;
+  }
+  
+  .user-and-message {
+    display: flex;
+    align-items: center;
+  }
+  
+  .user-avatar {
+    height: 40px;
+    margin-right: 10px;
+  }
+  
+  .message-center {
+    font-size: 16px;
+  }
+  
+  .nav {
+    background-color: #b38867;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .nav-item {
+    color: white;
+    text-decoration: none;
+    padding: 10px 20px;
+  }
+  
+  .active {
+    background-color: #996633;
+  }
+  
+  /* 搜索、排序控件 */
+  .controls {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    padding: 10px 20px;
+    background-color: #704c3b;
+  }
+  
+  .search-input {
+    padding: 6px 10px;
+    border-radius: 6px;
+    border: none;
+    width: 200px;
+  }
+  
+  .sort-select {
+    padding: 6px;
+    border-radius: 6px;
+    border: none;
+  }
+  
+  /* 标签过滤 */
+  .tag-filters {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px;
+  }
+  
+  .tag-button {
+    background-color: #b38867;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    padding: 6px 12px;
+    cursor: pointer;
+  }
+  
+  .active-tag {
+    background-color: #d17c4f;
+  }
+  
+  /* 卡片展示 */
+  .seed-list-content {
+    padding: 20px;
+  }
+  
+  .seed-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+  }
+  
+  .seed-card {
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #333;
+    transition: transform 0.2s ease;
+  }
+  
+  .seed-card:hover {
+    transform: translateY(-5px);
+  }
+  
+  .seed-card-header h3 {
+    font-size: 1.2rem;
+    margin-bottom: 10px;
+    color: #333;
+  }
+  
+  .seed-card-body p {
+    margin: 4px 0;
+    font-size: 0.95rem;
+    color: #666;
+  }
+  
+  .seed-card-actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 12px;
+  }
+  
+  .btn-primary,
+  .btn-secondary,
+  .btn-outline {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.9rem;
+  }
+  
+  .btn-primary {
+    background-color: #007bff;
+    color: white;
+  }
+  
+  .btn-secondary {
+    background-color: #28a745;
+    color: white;
+    text-decoration: none;
+    text-align: center;
+  }
+  
+  .btn-outline {
+    background-color: transparent;
+    border: 1px solid #ccc;
+    color: #333;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedList.jsx b/src/pages/SeedList/SeedList.jsx
new file mode 100644
index 0000000..0e9badf
--- /dev/null
+++ b/src/pages/SeedList/SeedList.jsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Link } from 'wouter';
+import logo from '../../assets/logo.png';
+import Recommend from './Recommend/Recommend'; // 导入Recommend组件
+import './SeedList.css';
+
+const SeedList = () => {
+    const [seeds, setSeeds] = useState([]);
+    const [filteredSeeds, setFilteredSeeds] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [selectedTag, setSelectedTag] = useState('全部');
+    const [sortOption, setSortOption] = useState('最新');
+    const [activeTab, setActiveTab] = useState('种子列表'); // 用于控制激活的标签
+
+    const TAGS = ['猜你喜欢', '电影', '电视剧','动漫','音乐', '游戏','综艺', '软件', '体育','学习','纪录片','其他'];
+
+    useEffect(() => {
+        const fetchSeeds = async () => {
+            try {
+                const response = await axios.get('/echo/seeds');
+                setSeeds(response.data);
+                setFilteredSeeds(response.data);
+            } catch (error) {
+                console.error('获取种子列表失败:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchSeeds();
+    }, []);
+
+    useEffect(() => {
+        let filtered = seeds;
+
+        if (searchTerm) {
+            filtered = filtered.filter(seed =>
+                seed.name.toLowerCase().includes(searchTerm.toLowerCase())
+            );
+        }
+
+        if (selectedTag !== '全部') {
+            filtered = filtered.filter(seed =>
+                seed.tags && seed.tags.includes(selectedTag)
+            );
+        }
+
+        switch (sortOption) {
+            case '最新':
+                filtered.sort((a, b) => new Date(b.uploadTime) - new Date(a.uploadTime));
+                break;
+            case '最热':
+                filtered.sort((a, b) => (b.downloadCount || 0) - (a.downloadCount || 0));
+                break;
+            case '文件大小':
+                filtered.sort((a, b) => (b.size || 0) - (a.size || 0));
+                break;
+            default:
+                break;
+        }
+
+        setFilteredSeeds([...filtered]);
+    }, [searchTerm, selectedTag, sortOption, seeds]);
+
+    return (
+        <div className="main-page">
+            <header className="header">
+                <div className="logo-and-name">
+                    <img src={logo} alt="网站logo" className="logo" />
+                    <span className="site-name">Echo</span>
+                </div>
+                <div className="user-and-message">
+                    <img src="user-avatar.png" alt="用户头像" className="user-avatar" />
+                    <span className="message-center">消息</span>
+                </div>
+            </header>
+
+            <nav className="nav">
+                <Link to="/friend-moments" className="nav-item">好友动态</Link>
+                <Link to="/forum" className="nav-item">论坛</Link>
+                <Link to="/interest-groups" className="nav-item">兴趣小组</Link>
+                <Link to="/seed-list" className="nav-item active">种子列表</Link>
+                <Link to="/publish-seed" className="nav-item">发布种子</Link>
+            </nav>
+
+            {/* 导航部分：点击不同标签时改变 activeTab */}
+            <div className="controls">
+                <input
+                    type="text"
+                    placeholder="搜索种子..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="search-input"
+                />
+                <select value={sortOption} onChange={(e) => setSortOption(e.target.value)} className="sort-select">
+                    <option value="最新">最新</option>
+                    <option value="最热">最热</option>
+                    <option value="文件大小">文件大小</option>
+                </select>
+            </div>
+
+            <div className="tag-filters">
+                {TAGS.map((tag) => (
+                    <button
+                        key={tag}
+                        className={`tag-button ${selectedTag === tag ? 'active-tag' : ''}`}
+                        onClick={() => {
+                            setSelectedTag(tag);
+                            setActiveTab(tag); // 添加这一行来更新 activeTab 状态
+                        }}
+                    >
+                        {tag}
+                    </button>
+                ))}
+            </div>
+
+            {/* 显示不同页面，根据activeTab */}
+            <div className="seed-list-content">
+                {activeTab === '猜你喜欢' ? (
+                    <Recommend /> // 显示推荐页面
+                ) : loading ? (
+                    <p>加载中...</p>
+                ) : filteredSeeds.length === 0 ? (
+                    <p>未找到符合条件的种子。</p>
+                ) : (
+                    <div className="seed-cards">
+                        {filteredSeeds.map((seed, index) => (
+                            <div key={index} className="seed-card">
+                                <div className="seed-card-header">
+                                    <h3>{seed.name}</h3>
+                                </div>
+                                <div className="seed-card-body">
+                                    <p><strong>大小:</strong> {seed.size || '未知'}</p>
+                                    <p><strong>上传者:</strong> {seed.uploader || '匿名'}</p>
+                                    <p><strong>时间:</strong> {seed.uploadTime || '未知'}</p>
+                                    <p><strong>下载数:</strong> {seed.downloadCount ?? 0}</p>
+                                </div>
+                                <div className="seed-card-actions">
+                                    <button className="btn-primary">下载</button>
+                                    <Link href={`/seed/${seed.id}`} className="btn-secondary">详情</Link>
+                                    <button className="btn-outline">收藏</button>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default SeedList;