diff --git a/frontend/my-app/src/pages/Home.jsx b/frontend/my-app/src/pages/Home.jsx
index 6bca4b8..e2f7f8e 100644
--- a/frontend/my-app/src/pages/Home.jsx
+++ b/frontend/my-app/src/pages/Home.jsx
@@ -1,12 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import {
   Box, Container, Typography, Paper,
-  List, ListItem, ListItemText, Chip, Stack, CircularProgress, Alert
+  List, ListItem, ListItemText, Chip, Stack, CircularProgress, Alert, Button
 } from '@mui/material';
 import { Link } from 'react-router-dom'; // 假设你已经配置了 React Router
 
-// import '../styles/base/base.css'; // ✅ 引入统一样式 - 我们将尝试用 sx prop 替代
-
 // 模拟从API获取数据
 const fetchTorrents = () => {
   return new Promise((resolve) => {
@@ -63,7 +61,7 @@
 
   return (
     <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 */}
+      <Container maxWidth="md" sx={{ position: 'relative', zIndex: 10 }}>
         <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}>
           🌐 首页 · Mini-Tracker
         </Typography>
@@ -90,36 +88,41 @@
                   key={torrent.id}
                   component={Link} // react-router-dom Link
                   to={`/detail/${torrent.id}`} // 假设的详情页路由
-                  sx={{ 
-                    color: 'white', 
+                  sx={{
+                    color: 'white',
                     textDecoration: 'none',
-                    mb: 1.5, // 增加列表项间距
-                    p: 1.5, // 增加列表项内边距
+                    mb: 1.5,
+                    p: 1.5,
                     borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
                     '&:last-child': {
-                        borderBottom: 'none' // 移除最后一个元素的边框
+                      borderBottom: 'none'
                     },
-                    display: 'flex', // 确保内部元素正确对齐
-                    flexDirection: { xs: 'column', sm: 'row' }, // 响应式布局
+                    display: 'flex',
+                    flexDirection: { xs: 'column', sm: 'row' },
                     alignItems: { xs: 'flex-start', sm: 'center' }
                   }}
-                  divider={false} // 使用自定义边框代替
+                  divider={false}
                 >
                   <ListItemText
                     primary={torrent.title}
                     secondary={`大小: ${torrent.size} · 上传者: ${torrent.uploader}`}
-                    primaryTypographyProps={{ variant: 'h6', component: 'div', sx: { mb: 0.5, color: '#f5f5f5', fontWeight: 500 } }}
+                    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 } }} // 响应式边距
+                    sx={{ flexGrow: 1, mb: { xs: 1, sm: 0 }, mr: { sm: 2 } }}
                   />
-                  <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 0.5 }}> {/* 允许标签换行 */}
+
+                  <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 样式
+                        sx={{
+                          backgroundColor: 'rgba(255, 255, 255, 0.2)',
                           color: 'white',
                           cursor: 'pointer',
                           '&:hover': {
@@ -129,6 +132,29 @@
                       />
                     ))}
                   </Stack>
+
+                  {/* ——— 在此处添加“下载”按钮 —— */}
+                  <Button
+                    variant="outlined"
+                    component="a"
+                    href={`http://localhost:8080/api/downloads/${torrent.id}/${encodeURIComponent(torrent.title)}.torrent`}
+                    download={`${torrent.title}.torrent`}
+                    sx={{
+                      ml: { xs: 0, sm: 2 }, // 小屏幕时居中；大屏幕时与右边距留空
+                      mt: { xs: 1, sm: 0 }, // 小屏时在下方，留一点间距
+                      color: '#4caf50',
+                      borderColor: '#4caf50',
+                      fontSize: '0.85rem',
+                      '&:hover': {
+                        backgroundColor: 'rgba(76, 175, 80, 0.15)',
+                        borderColor: '#388e3c'
+                      }
+                    }}
+                  >
+                    下载
+                  </Button>
+                  {/* ——— 下载按钮结束 ——— */}
+
                 </ListItem>
               ))}
             </List>
@@ -136,7 +162,7 @@
         </Paper>
       </Container>
 
-      {/* 背景泡泡动画复用 - 这些类名 (.bubbles, .bubble) 和 @keyframes rise 应该在全局CSS或者下面的 <style> 标签中定义 */}
+      {/* 背景泡泡动画复用 */}
       <Box className="bubbles" sx={{
          pointerEvents: 'none',
          position: 'fixed',
@@ -145,7 +171,7 @@
          width: '100%',
          height: '100%',
          overflow: 'hidden',
-         zIndex: 1, 
+         zIndex: 1,
       }}>
         {[...Array(40)].map((_, i) => (
           <Box
@@ -153,48 +179,43 @@
             className="bubble"
             sx={{
               position: 'absolute',
-              bottom: '-150px', // 确保从屏幕外开始
-              background: `hsla(${Math.random() * 360}, 70%, 80%, 0.15)`, // 增加颜色多样性
+              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`, // 调整大小范围
+              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, // 初始透明
+              animationDuration: `${15 + Math.random() * 20}s`,
+              animationDelay: `${Math.random() * 10}s`,
+              opacity: 0,
             }}
           />
         ))}
       </Box>
-      {/* 定义动画和其他全局可能需要的样式 */}
       <style>
         {`
-          body { /* 基本重置 */
+          body {
             margin: 0;
-            font-family: 'Roboto', sans-serif; /* 确保字体一致 */
+            font-family: 'Roboto', sans-serif;
           }
 
           @keyframes rise {
             0% {
               transform: translateY(0) scale(0.8);
-              opacity: 0; /* 从透明开始 */
+              opacity: 0;
             }
             10% {
-                opacity: 1; /* 渐显 */
+              opacity: 1;
             }
             90% {
-                opacity: 1; /* 保持可见 */
+              opacity: 1;
             }
             100% {
-              transform: translateY(-130vh) scale(0.3); /* 飘得更高更小 */
-              opacity: 0; /* 渐隐 */
+              transform: translateY(-130vh) scale(0.3);
+              opacity: 0;
             }
           }
-
-          /* 如果 .bubbles 和 .bubble 样式没有在 sx 中完全覆盖，可以在这里补充 */
-          /* .bubbles { ... } */
-          /* .bubble { ... } */
         `}
       </style>
     </Box>
@@ -202,4 +223,3 @@
 }
 
 export default Home;
-
diff --git a/frontend/my-app/src/pages/Login.jsx b/frontend/my-app/src/pages/Login.jsx
new file mode 100644
index 0000000..19f13ca
--- /dev/null
+++ b/frontend/my-app/src/pages/Login.jsx
@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+import {
+  Box, Container, Typography, Paper, TextField, Button, CircularProgress, Alert
+} from '@mui/material';
+// import { useNavigate } from 'react-router-dom'; // 如果需要重定向，请取消注释
+
+function LoginPage() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState(null); // 用于显示成功或错误消息
+  const [messageSeverity, setMessageSeverity] = useState('info'); // 'success', 'error', 'info'
+
+  // const navigate = useNavigate(); // 如果需要重定向，请取消注释
+
+  const handleSubmit = async (event) => {
+    event.preventDefault(); // 阻止表单默认提交行为
+
+    setMessage(null); // 清除之前的消息
+    setLoading(true); // 显示加载指示器
+
+    try {
+      const response = await fetch('http://localhost:8080/api/auth/login', { // 确保这里的URL与您的后端接口一致
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ username, password })
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        // 登录成功
+        setMessage('登录成功！欢迎 ' + data.username);
+        setMessageSeverity('success');
+        console.log('登录成功:', data);
+        // 将 JWT Token 保存到 localStorage
+        localStorage.setItem('jwt_token', data.token);
+        // 可选：登录成功后重定向到其他页面
+        // navigate('/dashboard'); 
+      } else {
+        // 登录失败
+        const errorMessage = data.error || '未知错误';
+        setMessage('登录失败: ' + errorMessage);
+        setMessageSeverity('error');
+        console.error('登录失败:', data);
+      }
+    } catch (error) {
+      // 网络错误或请求发送失败
+      setMessage('网络错误，请稍后再试。');
+      setMessageSeverity('error');
+      console.error('请求发送失败:', error);
+    } finally {
+      setLoading(false); // 隐藏加载指示器
+    }
+  };
+
+  return (
+    <Box sx={{
+      minHeight: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', // 与 Home 组件相同的背景
+      color: 'white',
+      py: 4 // 垂直内边距
+    }}>
+      <Container maxWidth="xs" sx={{ position: 'relative', zIndex: 10 }}>
+        <Typography variant="h4" align="center" sx={{ mb: 4, fontWeight: 'bold' }}>
+          🔐 用户登录
+        </Typography>
+
+        <Paper sx={{
+          p: 4, // 内边距
+          backgroundColor: 'rgba(30, 30, 30, 0.9)', // 半透明深色背景
+          borderRadius: '12px', // 圆角
+          boxShadow: '0 8px 16px rgba(0,0,0,0.3)' // 阴影
+        }}>
+          {message && (
+            <Alert severity={messageSeverity} sx={{ mb: 2, borderRadius: '8px' }}>
+              {message}
+            </Alert>
+          )}
+
+          <form onSubmit={handleSubmit}>
+            <TextField
+              label="用户名"
+              variant="outlined"
+              fullWidth
+              margin="normal"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+              sx={{
+                mb: 2, // 底部外边距
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '8px',
+                  color: 'white', // 输入文字颜色
+                  '& fieldset': { borderColor: 'rgba(255, 255, 255, 0.3)' }, // 边框颜色
+                  '&:hover fieldset': { borderColor: 'rgba(255, 255, 255, 0.5)' },
+                  '&.Mui-focused fieldset': { borderColor: '#8b5cf6' }, // 聚焦时边框颜色
+                },
+                '& .MuiInputLabel-root': { color: '#bbb' }, // 标签颜色
+                '& .MuiInputLabel-root.Mui-focused': { color: '#8b5cf6' }, // 聚焦时标签颜色
+              }}
+            />
+            <TextField
+              label="密码"
+              type="password"
+              variant="outlined"
+              fullWidth
+              margin="normal"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              sx={{
+                mb: 3, // 底部外边距
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: '8px',
+                  color: 'white', // 输入文字颜色
+                  '& fieldset': { borderColor: 'rgba(255, 255, 255, 0.3)' },
+                  '&:hover fieldset': { borderColor: 'rgba(255, 255, 255, 0.5)' },
+                  '&.Mui-focused fieldset': { borderColor: '#8b5cf6' },
+                },
+                '& .MuiInputLabel-root': { color: '#bbb' },
+                '& .MuiInputLabel-root.Mui-focused': { color: '#8b5cf6' },
+              }}
+            />
+            <Button
+              type="submit"
+              variant="contained"
+              fullWidth
+              disabled={loading}
+              sx={{
+                py: '0.75rem', // 垂直内边距
+                backgroundImage: 'linear-gradient(to right, #6366f1, #8b5cf6)', // 渐变背景
+                color: 'white',
+                borderRadius: '0.375rem', // 圆角
+                fontWeight: 600,
+                position: 'relative', // 用于加载指示器定位
+                '&:hover': {
+                  backgroundImage: 'linear-gradient(to right, #4f46e5, #7c3aed)',
+                },
+              }}
+            >
+              {loading ? <CircularProgress size={24} color="inherit" sx={{ position: 'absolute' }} /> : '登录'}
+            </Button>
+          </form>
+        </Paper>
+      </Container>
+
+      {/* 背景泡泡动画 - 复用 Home 组件中的样式 */}
+      <Box className="bubbles" sx={{
+          pointerEvents: 'none',
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          overflow: 'hidden',
+          zIndex: 1, 
+      }}>
+        {[...Array(40)].map((_, 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, // 初始透明
+            }}
+          />
+        ))}
+      </Box>
+      {/* 定义动画和其他全局可能需要的样式 */}
+      <style>
+        {`
+          body { /* 基本重置 */
+            margin: 0;
+            font-family: 'Roboto', sans-serif; /* 确保字体一致 */
+          }
+
+          @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; /* 渐隐 */
+            }
+          }
+        `}
+      </style>
+    </Box>
+  );
+}
+
+export default LoginPage;
\ No newline at end of file
diff --git a/frontend/my-app/src/pages/UploadTorrent.jsx b/frontend/my-app/src/pages/UploadTorrent.jsx
index 493cdce..465afda 100644
--- a/frontend/my-app/src/pages/UploadTorrent.jsx
+++ b/frontend/my-app/src/pages/UploadTorrent.jsx
@@ -4,43 +4,44 @@
   TextField, Button, Stack
 } from '@mui/material';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-// Assuming your base.css is in a relative path like src/styles/base/base.css
-// If your component is in src/components/Upload.js, this path would be ../styles/base/base.css
-// Adjust if your project structure is different.
-// For this example, I'll assume it's correctly linked.
-// import '../styles/base/base.css'; 
+
 
 function Upload() {
   const [title, setTitle] = useState('');
   const [file, setFile] = useState(null);
 
   const handleUpload = () => {
-    const formData = new FormData();
-    if (file) {
-      formData.append('file', file);
-    }
-    formData.append('title', title);
+  const formData = new FormData();
+  if (file) {
+    formData.append('file', file);
+  }
+  formData.append('title', title);
 
-    // Replace with your actual API endpoint and error handling
-    fetch('/api/torrents/upload', {
-      method: 'POST',
-      body: formData
-    })
+  const token = localStorage.getItem('jwt_token'); // 假设你登录后将 token 存在 localStorage
+
+  fetch('http://localhost:8080/api/torrents/upload', {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    body: formData,
+  })
     .then(response => {
       if (response.ok) {
-        // Use a more modern way to show messages, e.g., a Snackbar
-        console.log('上传成功'); 
-        alert('上传成功 (建议使用Snackbar等UI组件替代alert)');
+        console.log('上传成功');
+        alert('上传成功');
       } else {
-        console.error('上传失败');
-        alert('上传失败 (建议使用Snackbar等UI组件替代alert)');
+        return response.text().then(text => {
+          console.error('上传失败:', text);
+          alert('上传失败: ' + text);
+        });
       }
     })
     .catch(error => {
       console.error('上传出错:', error);
-      alert('上传出错 (建议使用Snackbar等UI组件替代alert)');
+      alert('上传出错: ' + error.message);
     });
-  };
+};
 
   return (
     <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}> {/* Moved body styles here for self-containment */}