diff --git a/front/src/HomePage.js b/front/src/HomePage.js
new file mode 100644
index 0000000..a657a72
--- /dev/null
+++ b/front/src/HomePage.js
@@ -0,0 +1,126 @@
+import React from "react";
+import HomeIcon from "@mui/icons-material/Home";
+import MovieIcon from "@mui/icons-material/Movie";
+import EmailIcon from "@mui/icons-material/Email";
+import MusicNoteIcon from "@mui/icons-material/MusicNote";
+import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
+import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
+import PersonIcon from "@mui/icons-material/Person";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import ForumIcon from "@mui/icons-material/Forum";
+import HelpIcon from "@mui/icons-material/Help";
+import { useNavigate } from "react-router-dom";
+import "./App.css";
+
+// 导航栏
+const navItems = [
+    { label: "首页", icon: <HomeIcon />, path: "/home" },
+    { label: "电影", icon: <MovieIcon />, path: "/movie" },
+    { label: "剧集", icon: <EmailIcon />, path: "/tv" },
+    { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
+    { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
+    { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
+    { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
+    { label: "资料", icon: <PersonIcon />, path: "/info" },
+    { label: "论坛", icon: <ForumIcon />, path: "/forum" },
+    { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
+    { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+];
+
+// 示例种子数据
+const exampleSeeds = [
+    {
+        id: 1,
+        tags: "电影,科幻",
+        title: "三体 1080P 蓝光",
+        popularity: 123,
+        user: { username: "Alice" },
+    },
+    {
+        id: 2,
+        tags: "动漫,热血",
+        title: "灌篮高手 国语配音",
+        popularity: 88,
+        user: { username: "Bob" },
+    },
+    {
+        id: 3,
+        tags: "音乐,流行",
+        title: "周杰伦-稻香",
+        popularity: 56,
+        user: { username: "Jay" },
+    },
+    {
+        id: 4,
+        tags: "剧集,悬疑",
+        title: "隐秘的角落",
+        popularity: 77,
+        user: { username: "小明" },
+    },
+];
+
+export default function HomePage() {
+    const navigate = useNavigate();
+
+    return (
+        <div className="container">
+            {/* 顶部空白与电影界面一致 */}
+            <div style={{ height: 80 }} />
+            {/* 用户栏 */}
+            <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
+                <div style={{ cursor: 'pointer', marginRight: 16 }} onClick={() => navigate('/user')}>
+                    <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
+                </div>
+                <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>用户栏</div>
+                <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
+                    <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>12345</b></span>
+                    <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>2.56</b></span>
+                    <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>100GB</b></span>
+                    <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>50GB</b></span>
+                </div>
+            </div>
+            {/* 下方内容整体下移，留出与电影界面一致的间距 */}
+            <div style={{ height: 32 }} />
+            <nav className="nav-bar card">
+                {navItems.map((item) => (
+                    <div
+                        key={item.label}
+                        className={item.label === "首页" ? "nav-item active" : "nav-item"}
+                        onClick={() => navigate(item.path)}
+                    >
+                        {item.icon}
+                        <span>{item.label}</span>
+                    </div>
+                ))}
+            </nav>
+            <div className="table-section card">
+                <table className="movie-table">
+                    <thead>
+                        <tr>
+                            <th>标签</th>
+                            <th>标题</th>
+                            <th>热度</th>
+                            <th>发布者</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {exampleSeeds.map((seed) => (
+                            <tr key={seed.id}>
+                                <td>{seed.tags}</td>
+                                <td>
+                                    <a href={`/torrent/${seed.id}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
+                                        {seed.title}
+                                    </a>
+                                </td>
+                                <td>{seed.popularity}</td>
+                                <td>{seed.user.username}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+            <div style={{ height: 32 }} />
+        </div>
+    );
+}
\ No newline at end of file