diff --git a/front/src/AnimePage.js b/front/src/AnimePage.js
index 118d8fb..3cf5ac9 100644
--- a/front/src/AnimePage.js
+++ b/front/src/AnimePage.js
@@ -10,6 +10,7 @@
 import "./App.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import ForumIcon from "@mui/icons-material/Forum";
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];
 
diff --git a/front/src/App.js b/front/src/App.js
index 52f3a83..2f85943 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -24,7 +24,7 @@
 import PostDetailPage from "./PostDetailPage";
 import LoginPage from './LoginPage';
 import RegisterPage from './RegisterPage';
-
+import RequireAuth from './RequireAuth';
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -150,18 +150,21 @@
         <Route path="/login" element={<LoginPage />} />
         <Route path="/register" element={<RegisterPage />} />
         <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route path="/movie" element={<MoviePage />} />
-        <Route path="/tv" element={<TVPage />} />
-        <Route path="/music" element={<MusicPage />} />
-        <Route path="/anime" element={<AnimePage />} />
-        <Route path="/game" element={<GamePage />} />
-        <Route path="/sport" element={<SportPage />} />
-        <Route path="/forum" element={<ForumPage />} />
-        <Route path="/forum/:postId" element={<PostDetailPage />} />
-        <Route path="/info" element={<InfoPage />} />
-        <Route path="/user" element={<UserProfile />} />
-        <Route path="/publish" element={<PublishPage />} />
-        <Route path="/torrent/:torrentId" element={<TorrentDetailPage />} />
+        {/* Protected routes */}
+        <Route element={<RequireAuth />}>
+          <Route path="/movie" element={<MoviePage />} />
+          <Route path="/tv" element={<TVPage />} />
+          <Route path="/music" element={<MusicPage />} />
+          <Route path="/anime" element={<AnimePage />} />
+          <Route path="/game" element={<GamePage />} />
+          <Route path="/sport" element={<SportPage />} />
+          <Route path="/forum" element={<ForumPage />} />
+          <Route path="/forum/:postId" element={<PostDetailPage />} />
+          <Route path="/info" element={<InfoPage />} />
+          <Route path="/user" element={<UserProfile />} />
+          <Route path="/publish" element={<PublishPage />} />
+          <Route path="/torrent/:torrentId" element={<TorrentDetailPage />} />
+        </Route>
       </Routes>
     </Router>
   );
diff --git a/front/src/ForumPage.js b/front/src/ForumPage.js
index ed94e0f..abcba7d 100644
--- a/front/src/ForumPage.js
+++ b/front/src/ForumPage.js
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import { API_BASE_URL } from "./config";
 
 // 示例数据
 const posts = [
@@ -27,6 +28,20 @@
 
 export default function ForumPage() {
     const navigate = useNavigate();
+    const [posts, setPosts] = useState([]);
+
+    useEffect(() => {
+        // get userId from cookie
+        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
+        const userId = match ? match[2] : null;
+        console.log("User ID from cookie:", userId);
+        if (!userId) return;
+        fetch(`${API_BASE_URL}/api/forum`)
+            .then(res => res.json())
+            .then(data => setPosts(data))
+            .catch(() => setPosts([]));
+    }, []);
+
     return (
         <div style={{ maxWidth: 700, margin: "40px auto" }}>
             <div style={{ display: "flex", alignItems: "center", marginBottom: 24 }}>
diff --git a/front/src/GamePage.js b/front/src/GamePage.js
index 1de4d30..c1ce231 100644
--- a/front/src/GamePage.js
+++ b/front/src/GamePage.js
@@ -10,6 +10,7 @@
 import "./App.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import ForumIcon from "@mui/icons-material/Forum";
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];
 
diff --git a/front/src/InfoPage.js b/front/src/InfoPage.js
index 0ed6ade..90dc449 100644
--- a/front/src/InfoPage.js
+++ b/front/src/InfoPage.js
@@ -10,6 +10,7 @@
 import "./App.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import ForumIcon from "@mui/icons-material/Forum";
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];
 
diff --git a/front/src/LoginPage.js b/front/src/LoginPage.js
index acbde03..5bb3603 100644
--- a/front/src/LoginPage.js
+++ b/front/src/LoginPage.js
@@ -2,6 +2,7 @@
 import { useNavigate } from 'react-router-dom';
 import { Input } from 'antd';
 import './App.css';
+import { API_BASE_URL } from './config';
 
 const LoginPage = () => {
   const [formData, setFormData] = useState({ username: '', password: '' });
@@ -13,15 +14,38 @@
     setFormData({ ...formData, [name]: value });
   };
 
-  const handleLogin = () => {
+  const handleLogin = async () => {
     if (formData.password.length < 8) {
       setErrorMessage('密码必须至少包含八位字符！');
       return;
     }
 
-    // Simulate successful login
-    setErrorMessage('');
-    navigate('/movie');
+    // send login request to backend
+    try {
+      // console.log('登录信息:', formData);
+      const response = await fetch(`${API_BASE_URL}/api/login`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: formData.username, password: formData.password })
+      });
+      console.log(response);
+      const data = await response.json();
+      if (!response.ok) {
+        setErrorMessage(data.message || '登录失败，请检查账号密码');
+        return;
+      }
+      // store returned userId in cookie
+      const userId = data.userId || data.userid || data.id;
+      if (!userId) {
+        setErrorMessage('登录失败，未返回用户ID');
+        return;
+      }
+      document.cookie = `userId=${userId}; path=/`;
+      setErrorMessage('');
+      navigate('/movie');
+    } catch (error) {
+      setErrorMessage('网络错误，请稍后重试');
+    }
   };
 
   const handleRegister = () => {
@@ -46,9 +70,9 @@
         <h1 style={{ textAlign: 'center', marginBottom: 32, color: '#222', fontWeight: 700, fontSize: 32, letterSpacing: 2 }}>欢迎登录</h1>
         <form className="login-form">
           <div className="form-row" style={{ marginBottom: 24 }}>
-            <label htmlFor="username" style={{ display: 'block', marginBottom: 8, color: '#333', fontWeight: 500, fontSize: 16 }}>用户名</label>
+            <label htmlFor="username" style={{ display: 'block', marginBottom: 8, color: '#333', fontWeight: 500, fontSize: 16 }}>邮箱</label>
             <Input
-              placeholder="请输入用户名"
+              placeholder="请输入邮箱"
               id="username"
               name="username"
               value={formData.username}
diff --git a/front/src/MoviePage.js b/front/src/MoviePage.js
index 83ccad1..faef3bd 100644
--- a/front/src/MoviePage.js
+++ b/front/src/MoviePage.js
@@ -7,6 +7,7 @@
 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 { useNavigate } from "react-router-dom";
 import "./App.css";
 import { API_BASE_URL } from "./config";
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];
 
diff --git a/front/src/MusicPage.js b/front/src/MusicPage.js
index fb03fe1..d244629 100644
--- a/front/src/MusicPage.js
+++ b/front/src/MusicPage.js
@@ -10,6 +10,7 @@
 import "./App.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import ForumIcon from "@mui/icons-material/Forum";
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];
 
diff --git a/front/src/RegisterPage.js b/front/src/RegisterPage.js
index ffd11a4..a527850 100644
--- a/front/src/RegisterPage.js
+++ b/front/src/RegisterPage.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Input } from 'antd';
+import { API_BASE_URL } from './config';
 import './App.css';
 
 const RegisterPage = () => {
@@ -13,7 +14,7 @@
     setFormData({ ...formData, [name]: value });
   };
 
-  const handleRegister = () => {
+  const handleRegister = async () => {
     if (formData.password.length !== 8) {
       setErrorMessage('密码必须为八位字符！');
       return;
@@ -24,12 +25,25 @@
       return;
     }
 
-    // Simulate successful registration
-    setErrorMessage('');
-    // 存储注册信息到 sessionStorage
-    sessionStorage.setItem('registeredUser', JSON.stringify({ username: formData.username, password: formData.password }));
-    alert('注册成功！');
-    navigate('/login');
+    // send registration request to backend
+    try {
+      console.log('注册信息:', formData);
+      const response = await fetch(`${API_BASE_URL}/api/register`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: formData.username, password: formData.password, invite_email: formData.inviteCode })
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        setErrorMessage(data.message || '注册失败，请重试');
+        return;
+      }
+      setErrorMessage('');
+      navigate('/login');
+      alert('注册成功！');
+    } catch (error) {
+      setErrorMessage('网络错误，请稍后重试');
+    }
   };
 
   return (
diff --git a/front/src/RequireAuth.js b/front/src/RequireAuth.js
new file mode 100644
index 0000000..77cde56
--- /dev/null
+++ b/front/src/RequireAuth.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+
+// Component to protect routes that require authentication
+const RequireAuth = () => {
+  // Check if userId cookie exists
+  const getCookie = (name) => {
+    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+    return match ? match[2] : null;
+  };
+
+  const userId = getCookie('userId');
+  // If not authenticated, redirect to login
+  return userId ? <Outlet /> : <Navigate to="/login" replace />;
+};
+
+export default RequireAuth;
diff --git a/front/src/SportPage.js b/front/src/SportPage.js
index 4c9d17d..a221c09 100644
--- a/front/src/SportPage.js
+++ b/front/src/SportPage.js
@@ -10,6 +10,7 @@
 import "./App.css";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import ForumIcon from "@mui/icons-material/Forum";
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];
 
diff --git a/front/src/TVPage.js b/front/src/TVPage.js
index 216dfcc..1bc9a07 100644
--- a/front/src/TVPage.js
+++ b/front/src/TVPage.js
@@ -10,6 +10,7 @@
 import { useNavigate } from "react-router-dom";
 import "./App.css";
 import { API_BASE_URL } from "./config";
+import ForumIcon from "@mui/icons-material/Forum";
 
 const navItems = [
   { label: "电影", icon: <MovieIcon />, path: "/movie" },
@@ -19,6 +20,7 @@
   { 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" }, // Added Publish option
 ];