diff --git a/src/views/login/login.module.css b/src/views/login/login.module.css
index a7fc6f4..8866d78 100644
--- a/src/views/login/login.module.css
+++ b/src/views/login/login.module.css
@@ -3,7 +3,7 @@
     flex-direction: column;
     align-items: center; /* Center items horizontally */
     justify-content: center; /* Center items vertically */
-    height: 40%; /* Occupy 40% of the viewport height */
+    height: 50%; /* Occupy 40% of the viewport height */
     width:25%;
     background-color: #f0f8ff; /* Light blue background */
     box-shadow: 3px 3px 5px 6px #ccc;
diff --git a/src/views/login/login.tsx b/src/views/login/login.tsx
index 70b5573..1bc18c2 100644
--- a/src/views/login/login.tsx
+++ b/src/views/login/login.tsx
@@ -21,6 +21,7 @@
     const [codeBtnDisabled, setCodeBtnDisabled] = useState(false);
     const [codeBtnText, setCodeBtnText] = useState('发送验证码');
     const [codeTimer, setCodeTimer] = useState<NodeJS.Timeout | null>(null);
+    const [userName, setUserName] = useState('');
 
     const dispatch = useAppDispatch();
     const [messageApi, contextHolder] = message.useMessage();
@@ -141,6 +142,13 @@
             ) : (
                 <>
                     <input
+                        type='text'
+                        value={userName}
+                        onChange={(e)=>setUserName(e.target.value)}
+                        className={style.invite}
+                        placeholder="用户名"
+                    />
+                    <input
                         type="text"
                         value={inviteCode}
                         onChange={(e) => setInviteCode(e.target.value)}