diff --git a/front/src/InfoPage.js b/front/src/InfoPage.js
index cec0b4d..1164816 100644
--- a/front/src/InfoPage.js
+++ b/front/src/InfoPage.js
@@ -1,39 +1,40 @@
 import React, { useState, useEffect } 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";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import ForumIcon from "@mui/icons-material/Forum";
 import HelpIcon from "@mui/icons-material/Help";
-import "./App.css";
+import "./SharedStyles.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
 
 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" },
 ];
 
+// 资料地区标签
 const areaTabs = [
-  { label: "出版物", icon: <MovieIcon fontSize="small" /> },
-  { label: "学习教程", icon: <EmailIcon fontSize="small" /> },
-  { label: "素材模板", icon: <PersonIcon fontSize="small" /> },
-  { label: "演讲交流", icon: <EmojiPeopleIcon fontSize="small" /> },
-  { label: "日常娱乐", icon: <PersonIcon fontSize="small" /> },
+  { label: "出版物", value: "publication" },
+  { label: "学习教程", value: "tutorial" },
+  { label: "素材模板", value: "template" },
+  { label: "演讲交流", value: "speech" },
+  { label: "日常娱乐", value: "entertainment" }
 ];
 
 export default function InfoPage() {
@@ -93,126 +94,209 @@
       })
       .catch(() => setInfoList([]));
   };
-
   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')}>
-          {userInfo.avatar_url ? (
-            <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
-          ) : (
-            <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
-          )}
-        </div>
-        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
-        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
-          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</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>
-        ))}
-      </nav>
-      <div className="search-section card">
-        <input
-          className="search-input"
-          placeholder="输入搜索关键词"
-          value={searchText}
-          onChange={e => setSearchText(e.target.value)}
-        />
-        <button className="search-btn" onClick={handleSearch}>
-          <span role="img" aria-label="search">🔍</span>
-        </button>
+
+      {/* 浮动园林装饰元素 */}
+      <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="area-tabs" style={{ display: 'flex', justifyContent: 'center', gap: 24, margin: '18px 0' }}>
-        {areaTabs.map((tab, idx) => (
-          <div
-            key={tab.label}
-            className={activeTab === idx ? "area-tab active" : "area-tab"}
-            onClick={() => setActiveTab(idx)}
-          >
-            {tab.icon} <span>{tab.label}</span>
-          </div>
-        ))}
-      </div>
-      <div className="table-section">
-        <table className="info-table">
-          <thead>
-            <tr>
-              <th>资料类型</th>
-              <th>标题</th>
-              <th>发布者</th>
-              <th>大小</th>
-              <th>热度</th>
-              <th>折扣倍率</th>
-            </tr>
-          </thead>
-          <tbody>
-            {infoList.length > 0 ? (
-              infoList.map((item, index) => (
-                <tr key={item.id || index}>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.seedtag}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {item.title}
-                    </a>
-                  </td>
-                  <td>{item.username}</td>
-                  <td>{item.seedsize}</td>
-                  <td>{item.downloadtimes}</td>
-                  <td>{item.discount == null ? 1 : item.discount}</td>
-                </tr>
-              ))
+
+      <div className="emerald-content">
+        {/* NeuraFlux用户栏 */}
+        <div className="emerald-user-bar">
+          <div className="emerald-user-avatar" onClick={() => navigate('/user')}>
+            {userInfo.avatar_url ? (
+              <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
             ) : (
-              infoTypes.map((type, index) => (
-                <tr key={type}>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      {type}
-                    </a>
-                  </td>
-                  <td>
-                    <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
-                      种子{index + 1}
-                    </a>
-                  </td>
-                  <td>发布者{index + 1}</td>
-                  <td>--</td>
-                  <td>--</td>
-                  <td>1</td>
-                </tr>
-              ))
+              <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
             )}
-          </tbody>
-        </table>
+          </div>
+          <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">{userPT.magic}</span>
+            </span>
+            <span className="emerald-stat-item">
+              分享率: <span className="emerald-stat-value">{userPT.ratio}</span>
+            </span>
+            <span className="emerald-stat-item">
+              上传: <span className="emerald-stat-value">{userPT.upload}GB</span>
+            </span>
+            <span className="emerald-stat-item">
+              下载: <span className="emerald-stat-value">{userPT.download}GB</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>
+
+        {/* 资料内容区域 */}
+        <div className="emerald-content-section">
+          <h1 className="emerald-page-title">📚 资料资源</h1>
+          <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+            欢迎来到NeuraFlux资料频道，这里有最新最热门的学习和资料资源
+          </p>
+          
+          {/* 搜索栏 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px'
+          }}>
+            <input
+              type="text"
+              placeholder="搜索资料资源..."
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              style={{
+                padding: '12px 20px',
+                borderRadius: '20px',
+                border: '2px solid rgba(144, 238, 144, 0.3)',
+                background: 'rgba(240, 255, 240, 0.5)',
+                fontSize: '16px',
+                width: '300px',
+                fontFamily: 'Lora, serif'
+              }}
+            />
+            <button
+              onClick={handleSearch}
+              style={{
+                padding: '12px 24px',
+                borderRadius: '20px',
+                border: 'none',
+                background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+                color: 'white',
+                fontSize: '16px',
+                cursor: 'pointer',
+                fontFamily: 'Lora, serif'
+              }}
+            >
+              搜索
+            </button>
+          </div>
+
+          {/* 地区分类标签 */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            marginBottom: '30px',
+            gap: '15px',
+            flexWrap: 'wrap'
+          }}>
+            {areaTabs.map((tab, index) => (
+              <button
+                key={tab.value}
+                onClick={() => setActiveTab(index)}
+                style={{
+                  padding: '10px 20px',
+                  borderRadius: '15px',
+                  border: '2px solid rgba(144, 238, 144, 0.3)',
+                  background: activeTab === index 
+                    ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)' 
+                    : 'rgba(240, 255, 240, 0.3)',
+                  color: activeTab === index ? 'white' : '#2d5016',
+                  fontSize: '14px',
+                  cursor: 'pointer',
+                  fontFamily: 'Lora, serif',
+                  transition: 'all 0.3s ease'
+                }}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* 资料列表 */}
+          <div className="emerald-table-section">
+            <table className="emerald-table">
+              <thead>
+                <tr>
+                  <th>资料类型</th>
+                  <th>标题</th>
+                  <th>发布者</th>
+                  <th>大小</th>
+                  <th>热度</th>
+                  <th>折扣倍率</th>
+                </tr>
+              </thead>
+              <tbody>
+                {infoList.length > 0 ? (
+                  infoList.map((item, index) => (
+                    <tr key={item.id || index}>
+                      <td>{item.seedtag}</td>
+                      <td>
+                        <a href={`/torrent/${item.seedid}`}>
+                          {item.title}
+                        </a>
+                      </td>
+                      <td>{item.username}</td>
+                      <td>{item.seedsize}</td>
+                      <td>{item.downloadtimes}</td>
+                      <td>{item.discount == null ? 1 : item.discount}</td>
+                    </tr>
+                  ))
+                ) : (
+                  infoTypes.map((type, index) => (
+                    <tr key={type}>
+                      <td>{type}</td>
+                      <td>
+                        <a href={`/torrent/${type}`}>
+                          种子{index + 1}
+                        </a>
+                      </td>
+                      <td>发布者{index + 1}</td>
+                      <td>--</td>
+                      <td>--</td>
+                      <td>1</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
       </div>
-      <div style={{ height: 32 }} />
-      <Pagination />
     </div>
   );
 }
 
+// Pagination组件暂时不使用
 function Pagination() {
-  const [page, setPage] = React.useState(3);
+  const [page, setPage] = useState(3);
   const total = 5;
   return (
     <div className="pagination">