diff --git a/frontend/my-app/src/pages/Home.jsx b/frontend/my-app/src/pages/Home.jsx
new file mode 100644
index 0000000..1764f5c
--- /dev/null
+++ b/frontend/my-app/src/pages/Home.jsx
@@ -0,0 +1,190 @@
+// src/pages/Home.jsx
+import React, { useState, useEffect } from 'react';
+import {
+  Table, TableHead, TableRow, TableCell, TableBody,
+  Typography, Box, Container, Paper, Tooltip, IconButton, Chip
+} from '@mui/material';
+import DownloadIcon from '@mui/icons-material/Download';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+
+function Home() {
+  const [torrents, setTorrents] = useState([]);
+
+  useEffect(() => {
+    setTorrents([
+      { title: 'Ubuntu 22.04 LTS', size: '3.2 GB', seeders: 1200, leechers: 300, date: '2025-04-01', tags: ['Linux', 'ISO'] },
+      { title: 'LibreOffice 7.5.2', size: '320 MB', seeders: 450, leechers: 50, date: '2025-03-28', tags: ['办公'] },
+      { title: 'Movie.Title.1080p.BluRay', size: '2.5 GB', seeders: 900, leechers: 200, date: '2025-04-05', tags: ['电影', '高清'] },
+    ]);
+  }, []);
+
+  return (
+    <Box sx={styles.mainContainer}>
+      <Container maxWidth="lg">
+        <Typography variant="h4" sx={styles.title}>
+          🎬 资源列表 · Mini-Tracker
+        </Typography>
+
+        <Paper sx={styles.paper}>
+          <Table size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell sx={styles.header}>名称</TableCell>
+                <TableCell sx={styles.header}>标签</TableCell>
+                <TableCell sx={styles.header}>大小</TableCell>
+                <TableCell sx={styles.header}>做种者</TableCell>
+                <TableCell sx={styles.header}>下载者</TableCell>
+                <TableCell sx={styles.header}>上传时间</TableCell>
+                <TableCell sx={styles.header}>操作</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {torrents.map((t, i) => (
+                <TableRow key={i} sx={styles.row}>
+                  <TableCell sx={styles.cell}>{t.title}</TableCell>
+                  <TableCell sx={styles.cell}>
+                    {t.tags.map(tag => (
+                      <Chip key={tag} label={tag} size="small" sx={styles.chip} />
+                    ))}
+                  </TableCell>
+                  <TableCell sx={styles.cell}>{t.size}</TableCell>
+                  <TableCell sx={styles.cell}>{t.seeders}</TableCell>
+                  <TableCell sx={styles.cell}>{t.leechers}</TableCell>
+                  <TableCell sx={styles.cell}>{t.date}</TableCell>
+                  <TableCell sx={styles.cell}>
+                    <Tooltip title="下载种子">
+                      <IconButton color="success" size="small">
+                        <DownloadIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="收藏">
+                      <IconButton color="warning" size="small">
+                        <StarBorderIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Paper>
+      </Container>
+
+      {/* 柔和深蓝渐变背景 */}
+      <div style={styles.background}></div>
+
+      {/* 舒缓漂浮的柔和粒子 */}
+      <div style={styles.bubbles}>
+        {[...Array(40)].map((_, i) => (
+          <div key={i} style={{ ...styles.bubble, ...bubbleAnimation(i) }} />
+        ))}
+      </div>
+
+      {/* 动画 Keyframes */}
+      <style>{animationCSS}</style>
+    </Box>
+  );
+}
+
+export default Home;
+
+// 样式对象
+const styles = {
+  mainContainer: {
+    minHeight: '100vh',
+    bgcolor: '#0d1b2a',
+    color: '#e0e0e0',
+    py: 5,
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  title: {
+    mb: 3,
+    fontFamily: '"Fira Code", monospace',
+    color: '#a3cef1',
+    textAlign: 'center',
+    fontSize: '2rem',
+    fontWeight: 'bold',
+  },
+  paper: {
+    bgcolor: '#1b263b',
+    p: 2,
+    borderRadius: 3,
+    boxShadow: 3,
+    backdropFilter: 'blur(6px)',
+    border: '1px solid rgba(255, 255, 255, 0.08)',
+  },
+  header: {
+    fontWeight: 'bold',
+    color: '#b0ccee',
+    fontFamily: '"Fira Code", monospace',
+    borderBottom: '1px solid #3a4a6b',
+  },
+  cell: {
+    fontFamily: '"Fira Code", monospace',
+    color: '#e0e0e0',
+    fontSize: '0.85rem',
+    padding: '8px 12px',
+  },
+  chip: {
+    mr: 0.5,
+    backgroundColor: '#2e3b53',
+    color: '#81c784',
+    fontSize: '0.75rem',
+  },
+  row: {
+    '&:nth-of-type(odd)': { bgcolor: '#19263e' },
+    '&:hover': { bgcolor: '#26354f' },
+  },
+  background: {
+    position: 'absolute',
+    top: 0, left: 0,
+    width: '100%', height: '100%',
+    background: 'linear-gradient(45deg, #0d1b2a, #122b44, rgb(28, 102, 158))',
+    backgroundSize: '400% 400%',
+    animation: 'bgShift 30s ease infinite',    
+    zIndex: -1,
+  },
+  bubbles: {
+    position: 'absolute',
+    top: 0, left: 0,
+    width: '100%', height: '100%',
+    zIndex: 0,
+    overflow: 'hidden',
+  },
+  bubble: {
+    position: 'absolute',
+    width: '6px',
+    height: '6px',
+    borderRadius: '50%',
+    backgroundColor: 'rgba(163, 206, 241, 0.4)',
+    animation: 'bubbleFloat 8s ease-in-out infinite',
+  },
+};
+
+const animationCSS = `
+@keyframes bgShift {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+@keyframes bubbleFloat {
+  0% { transform: translateY(100%); opacity: 0; }
+  50% { opacity: 0.5; }
+  100% { transform: translateY(-100%); opacity: 0; }
+}
+`;
+
+function bubbleAnimation(i) {
+  const delay = Math.random() * 6;
+  const left = Math.random() * 100;
+  const size = 4 + Math.random() * 8;
+  const top = Math.random() * 100;
+  return {
+    left: `${left}%`,
+    top: `${top}%`,
+    width: `${size}px`,
+    height: `${size}px`,
+    animationDelay: `${delay}s`,
+  };
+}
diff --git a/frontend/my-app/src/pages/UserProfile.jsx b/frontend/my-app/src/pages/UserProfile.jsx
new file mode 100644
index 0000000..0465994
--- /dev/null
+++ b/frontend/my-app/src/pages/UserProfile.jsx
@@ -0,0 +1,42 @@
+// src/pages/UserProfile.js
+import React from 'react';
+
+const UserProfile = () => {
+  // 假设用户信息保存在 state 或 context 中
+  const user = {
+    avatar: 'path/to/avatar.jpg',  // 用户头像
+    username: 'WaldenBlues',  // 用户名
+    email: 'waldenblues@example.com',  // 用户邮箱
+    bio: '这是用户的个人简介',  // 个人简介
+    uploads: 12,  // 上传的资源数量
+    downloads: 34,  // 下载的资源数量
+    comments: 5  // 用户评论的数量
+  };
+
+  return (
+    <div className="user-profile">
+      <div className="user-info">
+        <img src={user.avatar} alt="User Avatar" className="avatar" />
+        <h2>{user.username}</h2>
+        <p>{user.bio}</p>
+        <p>Email: {user.email}</p>
+      </div>
+
+      <div className="user-stats">
+        <h3>统计信息</h3>
+        <ul>
+          <li>上传的资源: {user.uploads}</li>
+          <li>下载的资源: {user.downloads}</li>
+          <li>评论的资源: {user.comments}</li>
+        </ul>
+      </div>
+
+      <div className="user-actions">
+        <button>Edit Profile</button>
+        <button>Change Password</button>
+      </div>
+    </div>
+  );
+}
+
+export default UserProfile;