diff --git a/client/src/Booking_page.js b/client/src/Booking_page.js
deleted file mode 100644
index 6b283ce..0000000
--- a/client/src/Booking_page.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useState, useEffect }  from 'react';
-import { TextField, Button } from '@mui/material';
-
-const BookingPage = () => {
-    const [seats, setSeats] = useState([
-      { id: 1, row: 1, col: 1, status: 'available' },
-      { id: 2, row: 1, col: 2, status: 'available' },
-    ]);
-  
-    const handleSeatSelect = (seatId) => {
-      setSeats(prevSeats => prevSeats.map(seat => {
-        if (seat.id === seatId) {
-          return { ...seat, status: seat.status === 'available' ? 'selected' : 'available' };
-        }
-        return seat;
-      }));
-    };
-  
-    const handleConfirm = () => {
-      console.log('Selected seats:', seats.filter(seat => seat.status === 'selected'));
-    };
-  
-    return (
-      <div>
-        <h2>Seat Reservation</h2>
-        <table>
-          <tbody>
-            {seats.map(seat => (
-              <tr key={seat.id}>
-                <td
-                  className={seat.status}
-                  onClick={() => handleSeatSelect(seat.id)}
-                >
-                  {seat.row} - {seat.col}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        <button onClick={handleConfirm}>Confirm</button>
-      </div>
-    );
-};
-
-export default BookingPage;
\ No newline at end of file
diff --git a/client/src/Detial_page.js b/client/src/Detial_page.js
deleted file mode 100644
index 08ee86d..0000000
--- a/client/src/Detial_page.js
+++ /dev/null
@@ -1,87 +0,0 @@
-// ActivityDetails.js
-import React, { useState, useEffect } from 'react';
-import example_img from './example-poster.jpg';
-import sample_text from './sample-text.txt';
-import { TextField, Button } from '@mui/material';
-
-async function fetchActivityDescription() {
-    try{
-        // const response = await fetch('http://localhost:3306/activity-description');
-        // const data = await response.json();
-
-        // 用于测试的假数据
-        const response = await fetch(sample_text);
-        const data = await response.text();
-        return data;
-    } catch (error) {
-        console.error(error);
-    }
-}
-
-function ActivityDetails() {
-    const [activityDescription, setActivityDescription] = React.useState('');//用户文本
-    const [activityTitle, setActivityTitle] = React.useState('');//活动标题
-
-    const redirectToBookingPage = () => {
-        window.location.href = "/booking";
-    };
-
-    useEffect(() => {
-        async function fetchData() {
-            const data = await fetchActivityDescription();
-            setActivityDescription(data);
-        }
-        fetchData();
-        async function fetchTitle() {
-            // const response = await fetch('http://localhost:3306/activity-title');
-            // const data = await response.json();
-
-            // 用于测试的假数据
-            const data = '示例标题';
-            setActivityTitle(data);
-        }
-        fetchTitle();
-    }, []);
-
-    return (
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            <div>
-                <h1 style={{ textAlign: 'center', fontSize: '4rem'  }}>{activityTitle}</h1>
-            </div>
-
-            <div style={{justifyContent: 'space-around', display: 'flex', width: '100%'}}>
-                {/* 图片 */}
-                <img 
-                    src={example_img}
-                    alt="活动海报" 
-                    style={{display: 'flex',width: '50%', height: 'auto' }} 
-                />
-                <div style={{display: 'flex',width: '50%', fontSize: '2rem', flexDirection: 'column'}}>
-                    {/* 活动信息模块 */}
-                    <p>活动时间：2024-04-015 12:00</p>
-                    <p>活动地点：示例地点</p>
-                    <p>活动主办方：示例主办方</p>
-                    <p>活动介绍</p>
-                    <div>
-                        {/* 用户自定义文本模块 */}
-                        {activityDescription}
-                    </div>
-                </div>
-                
-            </div>
-
-            <div style={{ textAlign: 'center', marginTop: '20px', fontSize: '2rem'}}>
-                <div>
-                    <p>剩余座位数：50</p>
-                    <Button variant="contained" onClick={redirectToBookingPage}>预定</Button>
-                </div>
-
-                <div style={{ marginTop: '20px'}}>
-                    {/* 评论区 */}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-export default ActivityDetails;
\ No newline at end of file
diff --git a/client/src/Login.js b/client/src/Login.js
deleted file mode 100644
index a1109f6..0000000
--- a/client/src/Login.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useState } from 'react';
-import axios from 'axios';
-
-function Login() {
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-
-    const handleLogin = async (e) => {
-        e.preventDefault();
-        const res = await axios.post('http://localhost:3001/login', { username, password });
-        console.log(res.data);
-    };
-
-    const handleRegister = async (e) => {
-        e.preventDefault();
-        const res = await axios.post('http://localhost:3001/register', { username, password });
-        console.log(res.data);
-    };
-
-    return (
-        <div>
-            <form onSubmit={handleLogin}>
-                <h1>Login</h1>
-                <input type="text" value={username} onChange={e => setUsername(e.target.value)} placeholder="Username" required />
-                <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" required />
-                <button type="submit">Login</button>
-            </form>
-            <form onSubmit={handleRegister}>
-                <h1>Register</h1>
-                <input type="text" value={username} onChange={e => setUsername(e.target.value)} placeholder="Username" required />
-                <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" required />
-                <button type="submit">Register</button>
-            </form>
-        </div>
-    );
-}
-
-export default Login;
\ No newline at end of file
diff --git a/client/src/booking/Booking_page.js b/client/src/booking/Booking_page.js
new file mode 100644
index 0000000..dd175f6
--- /dev/null
+++ b/client/src/booking/Booking_page.js
@@ -0,0 +1,52 @@
+import React, {useState, useEffect} from 'react';
+import {TextField, Button} from '@mui/material';
+
+const BookingPage = () => {
+  const [seats, setSeats] = useState([
+    {id: 1, row: 1, col: 1, status: 'available'},
+    {id: 2, row: 1, col: 2, status: 'available'},
+  ]);
+
+  const handleSeatSelect = (seatId) => {
+    setSeats((prevSeats) =>
+      prevSeats.map((seat) => {
+        if (seat.id === seatId) {
+          return {
+            ...seat,
+            status: seat.status === 'available' ? 'selected' : 'available',
+          };
+        }
+        return seat;
+      }),
+    );
+  };
+
+  const handleConfirm = () => {
+    console.log(
+      'Selected seats:',
+      seats.filter((seat) => seat.status === 'selected'),
+    );
+  };
+
+  return (
+    <div>
+      <h2>Seat Reservation</h2>
+      <table>
+        <tbody>
+          {seats.map((seat) => (
+            <tr key={seat.id}>
+              <td
+                className={seat.status}
+                onClick={() => handleSeatSelect(seat.id)}>
+                {seat.row} - {seat.col}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <button onClick={handleConfirm}>Confirm</button>
+    </div>
+  );
+};
+
+export default BookingPage;
diff --git a/client/src/Detail_page.css b/client/src/eventDetails/Detail_page.css
similarity index 100%
rename from client/src/Detail_page.css
rename to client/src/eventDetails/Detail_page.css
diff --git a/client/src/eventDetails/Detial_page.js b/client/src/eventDetails/Detial_page.js
new file mode 100644
index 0000000..65a92b6
--- /dev/null
+++ b/client/src/eventDetails/Detial_page.js
@@ -0,0 +1,98 @@
+// ActivityDetails.js
+import React, {useState, useEffect} from 'react';
+import example_img from './example-poster.jpg';
+import sample_text from './sample-text.txt';
+import {TextField, Button} from '@mui/material';
+
+async function fetchActivityDescription() {
+  try {
+    // const response = await fetch('http://localhost:3306/activity-description');
+    // const data = await response.json();
+
+    // 用于测试的假数据
+    const response = await fetch(sample_text);
+    const data = await response.text();
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function ActivityDetails() {
+  const [activityDescription, setActivityDescription] = React.useState(''); //用户文本
+  const [activityTitle, setActivityTitle] = React.useState(''); //活动标题
+
+  const redirectToBookingPage = () => {
+    window.location.href = '/booking';
+  };
+
+  useEffect(() => {
+    async function fetchData() {
+      const data = await fetchActivityDescription();
+      setActivityDescription(data);
+    }
+    fetchData();
+    async function fetchTitle() {
+      // const response = await fetch('http://localhost:3306/activity-title');
+      // const data = await response.json();
+
+      // 用于测试的假数据
+      const data = '示例标题';
+      setActivityTitle(data);
+    }
+    fetchTitle();
+  }, []);
+
+  return (
+    <div
+      style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+      <div>
+        <h1 style={{textAlign: 'center', fontSize: '4rem'}}>{activityTitle}</h1>
+      </div>
+
+      <div
+        style={{
+          justifyContent: 'space-around',
+          display: 'flex',
+          width: '100%',
+        }}>
+        {/* 图片 */}
+        <img
+          src={example_img}
+          alt='活动海报'
+          style={{display: 'flex', width: '50%', height: 'auto'}}
+        />
+        <div
+          style={{
+            display: 'flex',
+            width: '50%',
+            fontSize: '2rem',
+            flexDirection: 'column',
+          }}>
+          {/* 活动信息模块 */}
+          <p>活动时间：2024-04-015 12:00</p>
+          <p>活动地点：示例地点</p>
+          <p>活动主办方：示例主办方</p>
+          <p>活动介绍</p>
+          <div>
+            {/* 用户自定义文本模块 */}
+            {activityDescription}
+          </div>
+        </div>
+      </div>
+
+      <div style={{textAlign: 'center', marginTop: '20px', fontSize: '2rem'}}>
+        <div>
+          <p>剩余座位数：50</p>
+          <Button variant='contained' onClick={redirectToBookingPage}>
+            预定
+          </Button>
+        </div>
+
+        <div style={{marginTop: '20px'}}>{/* 评论区 */}</div>
+      </div>
+    </div>
+  );
+}
+
+export default ActivityDetails;
diff --git a/client/src/example-poster.jpg b/client/src/eventDetails/example-poster.jpg
similarity index 100%
rename from client/src/example-poster.jpg
rename to client/src/eventDetails/example-poster.jpg
diff --git a/client/src/logIn/Login.js b/client/src/logIn/Login.js
new file mode 100644
index 0000000..1907381
--- /dev/null
+++ b/client/src/logIn/Login.js
@@ -0,0 +1,68 @@
+import React, {useState} from 'react';
+import axios from 'axios';
+
+function Login() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    const res = await axios.post('http://localhost:3001/login', {
+      username,
+      password,
+    });
+    console.log(res.data);
+  };
+
+  const handleRegister = async (e) => {
+    e.preventDefault();
+    const res = await axios.post('http://localhost:3001/register', {
+      username,
+      password,
+    });
+    console.log(res.data);
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleLogin}>
+        <h1>Login</h1>
+        <input
+          type='text'
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder='Username'
+          required
+        />
+        <input
+          type='password'
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder='Password'
+          required
+        />
+        <button type='submit'>Login</button>
+      </form>
+      <form onSubmit={handleRegister}>
+        <h1>Register</h1>
+        <input
+          type='text'
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          placeholder='Username'
+          required
+        />
+        <input
+          type='password'
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder='Password'
+          required
+        />
+        <button type='submit'>Register</button>
+      </form>
+    </div>
+  );
+}
+
+export default Login;
diff --git a/client/src/mainpage/DefaultNavbar.js b/client/src/mainpage/mainpageComponents/DefaultNavbar.js
similarity index 100%
rename from client/src/mainpage/DefaultNavbar.js
rename to client/src/mainpage/mainpageComponents/DefaultNavbar.js
diff --git a/client/src/mainpage/DefaultNavbarDropdown.js b/client/src/mainpage/mainpageComponents/DefaultNavbarDropdown.js
similarity index 100%
rename from client/src/mainpage/DefaultNavbarDropdown.js
rename to client/src/mainpage/mainpageComponents/DefaultNavbarDropdown.js
diff --git a/client/src/mainpage/DesignBlocks.js b/client/src/mainpage/mainpageComponents/DesignBlocks.js
similarity index 100%
rename from client/src/mainpage/DesignBlocks.js
rename to client/src/mainpage/mainpageComponents/DesignBlocks.js
diff --git a/client/src/mainpage/TestForm.js b/client/src/mainpage/mainpageComponents/TestForm.js
similarity index 100%
rename from client/src/mainpage/TestForm.js
rename to client/src/mainpage/mainpageComponents/TestForm.js
diff --git a/client/src/mainpage/designBlocksData.js b/client/src/mainpage/mainpageComponents/designBlocksData.js
similarity index 100%
rename from client/src/mainpage/designBlocksData.js
rename to client/src/mainpage/mainpageComponents/designBlocksData.js
diff --git a/client/src/mainpage/DefaultInfoCard.js b/client/src/publicAssets/DefaultInfoCard.js
similarity index 96%
rename from client/src/mainpage/DefaultInfoCard.js
rename to client/src/publicAssets/DefaultInfoCard.js
index a1d7e8e..9c4c6b5 100644
--- a/client/src/mainpage/DefaultInfoCard.js
+++ b/client/src/publicAssets/DefaultInfoCard.js
@@ -17,8 +17,8 @@ Coded by www.creative-tim.com
 import PropTypes from 'prop-types';
 
 // Material Kit 2 React components
-import MKBox from '../components/MKBox';
-import MKTypography from '../components/MKTypography';
+import MKBox from '../../components/MKBox';
+import MKTypography from '../../components/MKTypography';
 
 function DefaultInfoCard({
   title,
diff --git a/client/src/mainpage/routes.js b/client/src/publicAssets/routes.js
similarity index 100%
rename from client/src/mainpage/routes.js
rename to client/src/publicAssets/routes.js