diff --git a/src/views/forum/index.module.css b/src/views/forum/index.module.css
new file mode 100644
index 0000000..53cf91c
--- /dev/null
+++ b/src/views/forum/index.module.css
@@ -0,0 +1,12 @@
+.selfStatus{
+    width:25%;
+    height:45%;
+    position: absolute;
+    right:0%;
+    top:0%;
+    
+}
+.container{
+    width:100%;
+    height:100%;
+}
\ No newline at end of file
diff --git a/src/views/forum/index.tsx b/src/views/forum/index.tsx
index 6e8ad59..dbceffd 100644
--- a/src/views/forum/index.tsx
+++ b/src/views/forum/index.tsx
@@ -2,14 +2,16 @@
 import { Navigate } from "react-router";
 import SelfStatus from "@/components/selfStatus/selfStatus";
 
+import style from "./index.module.css";
+
 export default function Forum() {
 
 
     return (
-        <div>
-            <SelfStatus/>
-            <h1>Forum</h1>
-            <p>Welcome to the forum!</p>
+        <div className={style.container}>
+            <div className={style.selfStatus}>
+                <SelfStatus />
+            </div>
         </div>
     );
 }
\ No newline at end of file
diff --git a/src/views/login/index.tsx b/src/views/login/index.tsx
deleted file mode 100644
index 4cb66a5..0000000
--- a/src/views/login/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useEffect } from 'react';
-import { useApi } from '@/hooks/request';
-import request from '@/utils/request';
-import { userLogin } from '@/api/user';
-import { useAppDispatch } from '@/hooks/store';
-import { RootState } from '@/store';
-import style from './login.module.css';
-import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router';
-
-const Login: React.FC = () => {
-    const dispatch = useAppDispatch();
-    const { data, loading, error, refresh } = useApi(() => request.post(userLogin), false);
-
-    const nav = useNavigate();
-    const handleLogin = async () => {
-        const res = await refresh();
-        console.log(res);
-        dispatch({ type: "user/login", payload: res });
-        nav('/');
-        
-    };
-    const userName = useSelector((state: RootState) => state.user.userName);
-
-    return (
-
-        <div className={style.form}>
-            <img alt = "logo"></img>
-            <input type="email" className={style.email} placeholder="Enter your email" />
-            <input type="password" className={style.password} placeholder="Enter your password" />
-            <button className={style.submit} onClick={handleLogin}>Login</button>
-            <button>Register</button>
-        </div>
-    );
-};
-
-export default Login;
\ No newline at end of file
diff --git a/src/views/login/login.module.css b/src/views/login/login.module.css
index 7571160..dca1df4 100644
--- a/src/views/login/login.module.css
+++ b/src/views/login/login.module.css
@@ -16,7 +16,11 @@
     box-sizing: border-box; /* Include padding and border in width/height */
     
 }
-
+.form .logo{
+    width: 100px; /* Set a fixed width for the logo */
+    height: auto; /* Maintain aspect ratio */
+    margin-bottom: 20px; /* Space between logo and form */
+}
 
 .form input {
     margin: 5px;
@@ -57,7 +61,7 @@
     background-color: #45a049; /* Darker green */
 }
 
-.form button {
+.form .register {
     margin: 10px;
     padding: 10px;
     border-radius: 5px;
@@ -70,6 +74,20 @@
     max-width: 300px;
 }
 
-.form button:hover {
+.form .register:hover {
     background-color: #0056b3; /* Darker blue */
+}
+
+.form .forget{
+    border: none;
+    text-decoration: underline;
+    align-content: flex-end;
+    
+}
+
+.form .forget:hover{
+    border: none;
+    text-decoration: underline;
+    align-content: flex-end;
+    color: #007BFF; /* Blue */
 }
\ No newline at end of file
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
new file mode 100644
index 0000000..26b7842
--- /dev/null
+++ b/src/views/login/login.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { useApi } from '@/hooks/request';
+import request from '@/utils/request';
+import { postUserLogin} from '@/api/auth';
+import { useAppDispatch } from '@/hooks/store';
+import { RootState } from '@/store';
+import style from './login.module.css';
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router';
+import logo from '&/asserts/logo.png';
+import { getUserInfo } from '@/api/user';
+
+
+const Login: React.FC = () => {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const dispatch = useAppDispatch();
+    const { refresh: postUserLoginRefresh } = useApi(() => request.post(postUserLogin, {}), false);
+    const { refresh: getUserInfoRefresh } = useApi(async () => await request.get(getUserInfo), false);
+
+    const nav = useNavigate();
+    const handleLogin = async () => {
+        try {
+            const res = await postUserLoginRefresh();
+            if (res==null ||(res as any).error) {
+                alert('Login failed. Please check your credentials.');
+                return;
+            }
+            dispatch({ type: "user/login", payload: res });
+            
+            const userInfo = await getUserInfoRefresh();
+            if (userInfo==null || (userInfo as any).error) {
+                alert('Failed to fetch user information.');
+                return;
+            }
+            dispatch({ type: "user/getUserInfo", payload: userInfo });
+            nav('/');
+        } catch (error) {
+            alert('An unexpected error occurred. Please try again later.');
+            if (error instanceof Error) {
+              console.error(error.message); // 明确访问 message 属性
+            } else {
+              console.error('Unknown error occurred');
+            }
+        }
+    };
+
+    return (
+        <div className={style.form}>
+            <img className={style.logo} src={logo} alt="logo"></img>
+            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className={style.email} placeholder="Enter your email" />
+            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className={style.password} placeholder="Enter your password" />
+            <button className={style.submit} onClick={handleLogin}>登录</button>
+            <button className={style.register}>注册</button>
+            <button className={style.forget}> 忘记密码</button>
+        </div>
+    );
+};
+
+export default Login;
\ No newline at end of file