diff --git a/front/src/HomePage.js b/front/src/HomePage.js
index a657a72..026f122 100644
--- a/front/src/HomePage.js
+++ b/front/src/HomePage.js
@@ -1,9 +1,9 @@
 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 TvIcon from "@mui/icons-material/Tv";
 import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import AnimationIcon from "@mui/icons-material/Animation";
 import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
 import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
 import PersonIcon from "@mui/icons-material/Person";
@@ -11,21 +11,21 @@
 import ForumIcon from "@mui/icons-material/Forum";
 import HelpIcon from "@mui/icons-material/Help";
 import { useNavigate } from "react-router-dom";
-import "./App.css";
+import "./HomePage.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" },
+    { label: "首页", icon: <HomeIcon className="emerald-nav-icon" />, path: "/home", type: "home" },
+    { label: "电影", icon: <MovieIcon className="emerald-nav-icon" />, path: "/movie", type: "movie" },
+    { label: "剧集", icon: <TvIcon className="emerald-nav-icon" />, path: "/tv", type: "tv" },
+    { label: "音乐", icon: <MusicNoteIcon className="emerald-nav-icon" />, path: "/music", type: "music" },
+    { label: "动漫", icon: <AnimationIcon className="emerald-nav-icon" />, path: "/anime", type: "anime" },
+    { label: "游戏", icon: <SportsEsportsIcon className="emerald-nav-icon" />, path: "/game", type: "game" },
+    { label: "体育", icon: <SportsMartialArtsIcon className="emerald-nav-icon" />, path: "/sport", type: "sport" },
+    { label: "资料", icon: <PersonIcon className="emerald-nav-icon" />, path: "/info", type: "info" },
+    { label: "论坛", icon: <ForumIcon className="emerald-nav-icon" />, path: "/forum", type: "forum" },
+    { label: "发布", icon: <AccountCircleIcon className="emerald-nav-icon" />, path: "/publish", type: "publish" },
+    { label: "求种", icon: <HelpIcon className="emerald-nav-icon" />, path: "/begseed", type: "help" },
 ];
 
 // 示例种子数据
@@ -64,63 +64,98 @@
     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 className="emerald-home-container">
+            {/* 流星雨背景效果 */}
+            <div className="meteor-shower">
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</div>
+                <div className="meteor">✨</div>
+                <div className="meteor">🌟</div>
+                <div className="meteor">💫</div>
+                <div className="meteor">⭐</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 className="floating-garden-elements">
+                <div className="garden-element">🌿</div>
+                <div className="garden-element">🦋</div>
+                <div className="garden-element">🌺</div>
+                <div className="garden-element">🌸</div>
+            </div>
+
+            <div className="emerald-content">
+                {/* NeuraFlux用户栏 */}
+                <div className="emerald-user-bar">
+                    <div className="emerald-user-avatar" onClick={() => navigate('/user')}>
+                        <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
                     </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>
+                    <div className="emerald-brand-section">
+                        <div className="emerald-brand-icon">⚡</div>
+                        <div className="emerald-user-label">NeuraFlux</div>
+                    </div>
+                    <div className="emerald-user-stats">
+                        <span className="emerald-stat-item">
+                            魔力值: <span className="emerald-stat-value">12,345</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            分享率: <span className="emerald-stat-value">2.56</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            上传: <span className="emerald-stat-value">100GB</span>
+                        </span>
+                        <span className="emerald-stat-item">
+                            下载: <span className="emerald-stat-value">50GB</span>
+                        </span>
+                    </div>
+                </div>
+
+                {/* NeuraFlux导航栏 */}
+                <nav className="emerald-nav-bar">
+                    {navItems.map((item) => (
+                        <div
+                            key={item.label}
+                            className={`emerald-nav-item ${item.label === "首页" ? "active" : ""}`}
+                            data-type={item.type}
+                            onClick={() => navigate(item.path)}
+                        >
+                            {item.icon}
+                            <span className="emerald-nav-label">{item.label}</span>
+                        </div>
+                    ))}
+                </nav>
+
+                {/* NeuraFlux种子列表 */}
+                <div className="emerald-table-section">
+                    <table className="emerald-table">
+                        <thead>
+                            <tr>
+                                <th>分类标签</th>
+                                <th>资源标题</th>
+                                <th>热门指数</th>
+                                <th>发布者</th>
                             </tr>
-                        ))}
-                    </tbody>
-                </table>
+                        </thead>
+                        <tbody>
+                            {exampleSeeds.map((seed) => (
+                                <tr key={seed.id}>
+                                    <td>{seed.tags}</td>
+                                    <td>
+                                        <a href={`/torrent/${seed.id}`}>
+                                            {seed.title}
+                                        </a>
+                                    </td>
+                                    <td>{seed.popularity}</td>
+                                    <td>{seed.user.username}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
             </div>
-            <div style={{ height: 32 }} />
         </div>
     );
 }
\ No newline at end of file