diff --git a/public/index.html b/public/index.html
index 71f32d0..12f4393 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,14 +8,24 @@
       Do you like manifest, google? Here you are '<link rel="manifest" href="%PUBLIC_URL%/fucku.json" />'
     -->
     <title>Charmless Yggdrasil</title>
-
+    <link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" > 
     <style>
+      @font-face {
+        font-family: "OPPO Sans";
+        src: url(https://code.oppo.com/content/dam/oppo/common/fonts/font2/new-font/OPPOSansOS2-5000-Medium.woff2);
+      }
       body {
-        width: 100%;
-        height: 100%;
+          width: 100%;
+          height: 100%;
+          font-family: "OPPO Sans" !important;
+      }
+      div.rootPanel {
+          background-image: url("charmlessbg.png");
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: cover;
       }
     </style>
-    <link rel="stylesheet" ref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> 
   </head>
   <body>
     <script type="text/javascript" src="noie.js" />
diff --git a/src/index.tsx b/src/index.tsx
index 78323fb..f4ac328 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,6 +4,7 @@ import { createTheme } from '@mui/material/styles'
 import { PageLogin } from './pages/login'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { PageNotFound } from './pages/notfound'
+import { PageRegister } from './pages/register'
 
 const API_BASE_ADDRESS = "http://127.0.0.1:30"
 
@@ -39,6 +40,7 @@ const LSPYggdrasilWebApp = () => {
     return <BrowserRouter>
         <Routes>
             <Route path="/" element={ <PageLogin /> } />
+            <Route path="/register" element={ <PageRegister /> } />
             <Route path="*" element={ <PageNotFound /> } />
         </Routes>
     </BrowserRouter>
diff --git a/src/pages/custom.css b/src/pages/custom.css
new file mode 100644
index 0000000..1ea6cb4
--- /dev/null
+++ b/src/pages/custom.css
@@ -0,0 +1,37 @@
+.MuiBox-root {
+    min-width: 100%;
+    min-height: 100%;
+    display: flex;
+}
+.MuiGrid-item {
+    min-width: 100%;
+    min-height: 100%;
+}
+
+.MuiButton-root {
+    min-width: 100% !important;
+    border-radius: 18px !important;
+}
+.MuiAlert-root,.MuiOutlinedInput-root {
+    border-radius: 8px !important;
+}
+.MuiLink-root {
+    text-align: center;
+    min-width: 100%;
+}
+.MuiAlert-message,.MuiInputLabel-root,.MuiButton-contained {
+    font-family: "OPPO Sans" !important;
+}
+
+div.title {
+    font-size: 1.8rem !important;
+    min-width: unset;
+}
+div.inlineBox {
+    background-color: #0009;
+    padding: 2.6em;
+    border-radius: 30px;
+    min-width: 430px;
+    min-height: 330px;
+    max-width: 500px;
+}
\ No newline at end of file
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 09807a2..2ac8614 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"
 import { api, theme } from '../index'
 import axios from "axios"
 import { useRef, useState } from "react"
+import "./custom.css"
 
 export const PageLogin = () => {
     const navigate = useNavigate()
@@ -33,48 +34,41 @@ export const PageLogin = () => {
     return <ThemeProvider theme={theme}>
         <CssBaseline />
 
-        <div style={{ 
-            backgroundImage: 'url("charmlessbg.png")', // wtf with this error? but however it worked somehow lol.
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover'
-        }}>  { /* The error mentioned above have been fixed by adding this 'as any' */ }
-            
+        <div className="rootPanel">  
 
-            <Box style={{ 'minWidth': '100%', 'minHeight': '100%', 'display': 'flex' }}>
+            <Box>
                 <Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
-                    <Paper style={{minWidth: '430px', minHeight: '330px', borderRadius: '30px'} as any} elevation={3}>
+                    <Paper elevation={3} className="inlineBox">
                         <Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
-                            <Grid style={{ minWidth: '80%', minHeight: '100%', marginTop: '5%' }} item>
+                            <Grid item className="title">
                                 <Typography variant="h5">
                                     登录到世界树
                                 </Typography>
                             </Grid>
 
-                            <Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
+                            <Grid item>
                                 <Collapse in={illegal}>
                                     <Alert severity="error">
-                                        用户名或密码不可以为空
+                                        无效的用户名或密码
                                     </Alert>
                                 </Collapse>
-
                             </Grid>
 
-                            <Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
+                            <Grid item>
                                 <TextField fullWidth required label="用户名" type="text" autoComplete="current-username" inputRef={usernameInput} onInput={() => setIllegal(false)} />
                             </Grid>
 
-                            <Grid style={{ minWidth: '80%', minHeight: '100%' }} item>
+                            <Grid item>
                                 <TextField fullWidth required label="密码" type="password" autoComplete="current-password" inputRef={passwordInput} onInput={() => setIllegal(false)} />
                             </Grid>
 
-                            <Grid style={{ minWidth: '80%',minHeight: '100%' }} item>
-                                <Button onClick={handleLogin} style={{ minWidth: '100%', minHeight: '100%' }} variant="contained" color="primary" > 
+                            <Grid item>
+                                <Button onClick={handleLogin} variant="contained" color="primary" > 
                                     登录
                                 </Button>
                             </Grid>
 
-                            <Grid style={{ marginBottom: "2%" }} item>
+                            <Grid item>
                                 <Link onClick={() => { navigate("/register") }} underline="always"> 没有账号? 点击注册 </Link>
                             </Grid>
                         </Grid>
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
new file mode 100644
index 0000000..e876896
--- /dev/null
+++ b/src/pages/register.tsx
@@ -0,0 +1,82 @@
+import { Box, Button, CssBaseline, Grid, Paper, TextField, ThemeProvider, Typography, Alert, Collapse } from "@mui/material"
+import { useNavigate } from "react-router-dom"
+import { api, theme } from '../index'
+import axios from "axios"
+import { useRef, useState } from "react"
+import "./custom.css"
+
+export const PageRegister = () => {
+    const navigate = useNavigate()
+    const [illegal1, setIllegal1] = useState(false)
+    const [illegal2, setIllegal2] = useState(false)
+    const [illegal3, setIllegal3] = useState(false)
+
+    //TODO
+
+    return <ThemeProvider theme={theme}>
+        <CssBaseline />
+
+        <div className="rootPanel">
+
+            <Box>
+                <Grid container direction="column" justifyContent="center" alignItems="center" spacing={1}>
+                    <Paper elevation={3} className="inlineBox">
+                        <Grid container direction="column" justifyContent="center" alignItems="center" spacing={2}>
+                            <Grid item className="title">
+                                <Typography variant="h5">
+                                    注册账户
+                                </Typography>
+
+                            </Grid>
+                            <Grid container spacing={2}>
+                                <Grid item><Collapse in={illegal1}>
+                                    <Alert severity="error">
+                                        无效的用户名、密码或邮箱
+                                    </Alert>
+                                </Collapse></Grid>
+                                
+                                <Grid item><Collapse in={illegal2}>
+                                    <Alert severity="error">
+                                        无效的邀请码
+                                    </Alert>
+                                </Collapse></Grid>
+                                
+                                <Grid item><Collapse in={illegal3}>
+                                    <Alert severity="error">
+                                        无效的邀请码
+                                    </Alert>
+                                </Collapse></Grid>
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="用户名" type="text" /* inputRef={usernameInput} */ onInput={() => setIllegal1(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="密码" type="password" /* inputRef={passwordInput} */ onInput={() => setIllegal1(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="邮箱" type="text" /* inputRef={emailInput} */ onInput={() => setIllegal1(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth required label="校验码" type="text" /* inputRef={validationCodeInput} */ onInput={() => setIllegal2(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <TextField fullWidth label="邀请码" type="text" /* inputRef={invitationCodeInput} */ onInput={() => setIllegal3(false)} />
+                            </Grid>
+
+                            <Grid item>
+                                <Button /* onClick={handleRegister} */ variant="contained" color="primary" >
+                                    注册
+                                </Button>
+                            </Grid>
+                        </Grid>
+                    </Paper>
+                </Grid>
+            </Box>
+        </div>
+    </ThemeProvider>
+}
\ No newline at end of file
