diff --git a/frontend/my-app/src/pages/Home.jsx b/frontend/my-app/src/pages/Home.jsx
index 1764f5c..6bca4b8 100644
--- a/frontend/my-app/src/pages/Home.jsx
+++ b/frontend/my-app/src/pages/Home.jsx
@@ -1,190 +1,205 @@
-// src/pages/Home.jsx
 import React, { useState, useEffect } from 'react';
 import {
-  Table, TableHead, TableRow, TableCell, TableBody,
-  Typography, Box, Container, Paper, Tooltip, IconButton, Chip
+  Box, Container, Typography, Paper,
+  List, ListItem, ListItemText, Chip, Stack, CircularProgress, Alert
 } from '@mui/material';
-import DownloadIcon from '@mui/icons-material/Download';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { Link } from 'react-router-dom'; // 假设你已经配置了 React Router
+
+// import '../styles/base/base.css'; // ✅ 引入统一样式 - 我们将尝试用 sx prop 替代
+
+// 模拟从API获取数据
+const fetchTorrents = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          title: 'Ubuntu ISO 镜像',
+          tags: ['Linux', '操作系统', 'ISO'],
+          size: '2.1 GB',
+          uploader: 'admin',
+          description: '最新的 Ubuntu Desktop 长期支持版。适用于开发者和普通用户。'
+        },
+        {
+          id: 2,
+          title: '开源电影素材包 - Blender "Sintel"',
+          tags: ['视频', '素材', '开源', 'Blender'],
+          size: '800 MB',
+          uploader: 'user001',
+          description: '来自 Blender Foundation 的开源电影 "Sintel" 的原始素材，可用于学习和创作。'
+        },
+        {
+          id: 3,
+          title: 'React 学习资料大全',
+          tags: ['React', 'JavaScript', '前端开发', '教程'],
+          size: '150 MB',
+          uploader: 'dev_guru',
+          description: '包含 React 官方文档、优秀教程链接和项目示例。'
+        }
+      ]);
+    }, 1500); // 模拟网络延迟
+  });
+};
+
 
 function Home() {
   const [torrents, setTorrents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
 
   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: ['电影', '高清'] },
-    ]);
+    setLoading(true);
+    fetchTorrents()
+      .then(data => {
+        setTorrents(data);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error("Failed to fetch torrents:", err);
+        setError("加载资源失败，请稍后再试。");
+        setLoading(false);
+      });
   }, []);
 
   return (
-    <Box sx={styles.mainContainer}>
-      <Container maxWidth="lg">
-        <Typography variant="h4" sx={styles.title}>
-          🎬 资源列表 · Mini-Tracker
+    <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}>
+      <Container maxWidth="md" sx={{ position: 'relative', zIndex: 10 }}> {/* Changed to md for wider content */}
+        <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}>
+          🌐 首页 · 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} />
+        <Paper sx={{ position: 'relative', zIndex: 20, padding: '2rem', backgroundColor: 'rgba(30, 30, 30, 0.9)', borderRadius: '12px' }}>
+          <Typography variant="h6" gutterBottom sx={{ mb: 2, color: '#eee' }}>
+            最新种子资源
+          </Typography>
+
+          {loading && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
+              <CircularProgress color="inherit" />
+            </Box>
+          )}
+
+          {error && (
+            <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>
+          )}
+
+          {!loading && !error && (
+            <List sx={{ '& .MuiListItem-root:hover': { backgroundColor: 'rgba(255, 255, 255, 0.05)' }}}>
+              {torrents.map(torrent => (
+                <ListItem
+                  key={torrent.id}
+                  component={Link} // react-router-dom Link
+                  to={`/detail/${torrent.id}`} // 假设的详情页路由
+                  sx={{ 
+                    color: 'white', 
+                    textDecoration: 'none',
+                    mb: 1.5, // 增加列表项间距
+                    p: 1.5, // 增加列表项内边距
+                    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
+                    '&:last-child': {
+                        borderBottom: 'none' // 移除最后一个元素的边框
+                    },
+                    display: 'flex', // 确保内部元素正确对齐
+                    flexDirection: { xs: 'column', sm: 'row' }, // 响应式布局
+                    alignItems: { xs: 'flex-start', sm: 'center' }
+                  }}
+                  divider={false} // 使用自定义边框代替
+                >
+                  <ListItemText
+                    primary={torrent.title}
+                    secondary={`大小: ${torrent.size} · 上传者: ${torrent.uploader}`}
+                    primaryTypographyProps={{ variant: 'h6', component: 'div', sx: { mb: 0.5, color: '#f5f5f5', fontWeight: 500 } }}
+                    secondaryTypographyProps={{ sx: { color: '#bbb', fontSize: '0.85rem' } }}
+                    sx={{ flexGrow: 1, mb: { xs: 1, sm: 0 }, mr: { sm: 2 } }} // 响应式边距
+                  />
+                  <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 0.5 }}> {/* 允许标签换行 */}
+                    {torrent.tags.map(tag => (
+                      <Chip
+                        key={tag}
+                        label={tag}
+                        size="small"
+                        sx={{ 
+                          backgroundColor: 'rgba(255, 255, 255, 0.2)', // upload-chip 样式
+                          color: 'white',
+                          cursor: 'pointer',
+                          '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                          }
+                        }}
+                      />
                     ))}
-                  </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>
+                  </Stack>
+                </ListItem>
               ))}
-            </TableBody>
-          </Table>
+            </List>
+          )}
         </Paper>
       </Container>
 
-      {/* 柔和深蓝渐变背景 */}
-      <div style={styles.background}></div>
-
-      {/* 舒缓漂浮的柔和粒子 */}
-      <div style={styles.bubbles}>
+      {/* 背景泡泡动画复用 - 这些类名 (.bubbles, .bubble) 和 @keyframes rise 应该在全局CSS或者下面的 <style> 标签中定义 */}
+      <Box className="bubbles" sx={{
+         pointerEvents: 'none',
+         position: 'fixed',
+         top: 0,
+         left: 0,
+         width: '100%',
+         height: '100%',
+         overflow: 'hidden',
+         zIndex: 1, 
+      }}>
         {[...Array(40)].map((_, i) => (
-          <div key={i} style={{ ...styles.bubble, ...bubbleAnimation(i) }} />
+          <Box
+            key={i}
+            className="bubble"
+            sx={{
+              position: 'absolute',
+              bottom: '-150px', // 确保从屏幕外开始
+              background: `hsla(${Math.random() * 360}, 70%, 80%, 0.15)`, // 增加颜色多样性
+              borderRadius: '50%',
+              animation: 'rise 20s infinite ease-in',
+              width: `${Math.random() * 25 + 10}px`, // 调整大小范围
+              height: `${Math.random() * 25 + 10}px`,
+              left: `${Math.random() * 100}%`,
+              animationDuration: `${15 + Math.random() * 20}s`, // 调整动画时长
+              animationDelay: `${Math.random() * 10}s`, // 调整动画延迟
+              opacity: 0, // 初始透明
+            }}
+          />
         ))}
-      </div>
+      </Box>
+      {/* 定义动画和其他全局可能需要的样式 */}
+      <style>
+        {`
+          body { /* 基本重置 */
+            margin: 0;
+            font-family: 'Roboto', sans-serif; /* 确保字体一致 */
+          }
 
-      {/* 动画 Keyframes */}
-      <style>{animationCSS}</style>
+          @keyframes rise {
+            0% {
+              transform: translateY(0) scale(0.8);
+              opacity: 0; /* 从透明开始 */
+            }
+            10% {
+                opacity: 1; /* 渐显 */
+            }
+            90% {
+                opacity: 1; /* 保持可见 */
+            }
+            100% {
+              transform: translateY(-130vh) scale(0.3); /* 飘得更高更小 */
+              opacity: 0; /* 渐隐 */
+            }
+          }
+
+          /* 如果 .bubbles 和 .bubble 样式没有在 sx 中完全覆盖，可以在这里补充 */
+          /* .bubbles { ... } */
+          /* .bubble { ... } */
+        `}
+      </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`,
-  };
-}