diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index 9b1b755..579a047 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -1,82 +1,111 @@
 "use client"
 import Link from 'next/link'
-import { emit } from 'process'
-import React, { useState } from 'react'
+import React, { use, useState } from 'react'
+import { EyeOutlined } from '@ant-design/icons';
 
 export default function SignUp() {
 
-  const [email, setEmail] = useState("")
+  const [mssv, setMssv] = useState("")
   const [password, setPassword] = useState("")
-  const [classnameE, setClassnameE] = useState("border hover:border-sky-500 w-full h-14 rounded px-2")
-  const [classnameP, setClassnameP] = useState("border hover:border-sky-500 w-full h-14 rounded px-2")
+  const [classnameE, setClassnameE] = useState("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
+  const [classnameP, setClassnameP] = useState("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
   const [note, setNote] = useState("")
+  const [type, setType] = useState("password")
+  const [eye, setEye] = useState("relative top-10 left-72 text-balck")
+  const [nlink, setNlink] = useState("")
+  const [check, setCheck] = useState("false")
+
+  function changeStatus() {
+    if(type == "password") {
+      setType("text");
+      setEye("relative top-10 left-72 text-sky-300")
+    }
+    else {
+      setType("password")
+      setEye("relative top-10 left-72 text-balck")
+    }
+  }
 
   function handleClick() {
-    if(email.length == 0) {
-      setClassnameE("border border-red-600 hover:border-sky-500 w-full h-14 rounded px-2")
-      setNote("You must enter your email")
+    if(mssv.length == 0) {
+      setClassnameE("border border-red-600 hover:border-sky-500 w-full h-14 rounded-lg px-2")
+      setNote("Bạn phải nhập MSSV")
+      setCheck("false")
+      setNlink("")
     }
     else {
-      setClassnameE("border hover:border-sky-500 w-full h-14 rounded px-2")
+      setClassnameE("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
     }
 
     if(password.length == 0) {
-      setClassnameP("border border-red-600 hover:border-sky-500 w-full h-14 rounded px-2")
-      setNote("You must enter your password")
+      setClassnameP("border border-red-600 hover:border-sky-500 w-full h-14 rounded-lg px-2")
+      setNote("Bạn phải nhập mật khẩu")
+      setCheck("false")
+      setNlink("")
     }
     else {
-      setClassnameP("border hover:border-sky-500 w-full h-14 rounded px-2")
+      setClassnameP("border hover:border-sky-500 w-full h-14 rounded-lg px-2")
     }
 
-    if(email.length == 0 && password.length == 0) {
-      setNote("You must enter your email and password")
+    if(mssv.length == 0 && password.length == 0) {
+      setNote("Bạn phải nhập MSSV và mật khẩu")
+      setCheck("false")
+      setNlink("")
     }
-    if(email.length > 0 && password.length > 0) {
+    if(mssv.length > 0 && password.length > 0) {
       setNote("")
+      setCheck("true")
+      setNlink("/signin")
     }
   }
 
   return (
-    <main className="bg-white py-10 font-sans">
+    <div className="bg-white py-10 font-sans">
 
-      <div className="mx-auto bg-white max-w-sm max-h-max border shadow-lg py-7 rounded-3xl">
+      <div className="mx-auto bg-white max-w-sm max-h-max border shadow-lg py-7 rounded-lg">
 
         <div className="flex flex-col justify-center items-center">
           <div className="text-blue-600 text-3xl font-bold">UETable</div> <br />
-          <div className="font-bold text-3xl">Register with email</div> <br />
+          <div className="font-bold text-3xl">Đăng ký</div> <br />
         </div>
 
-        <div className="mx-auto w-4/5 flex flex-col justify-center">
+        <div className="mx-auto w-5/6 flex flex-col justify-center">
 
-          <div className="relative top-2 left-2 w-12">
-            <div className="absolute bg-white w-full px-1">
-              <label htmlFor="email" className="text-xs text-red-600 w-full font-medium">EMAIL*</label>
+          <div className="relative top-2 left-1 w-16">
+            <div className="absolute bg-white w-full px-2">
+              <label htmlFor="mssv" className="text-xs w-full text-red-600 font-medium">*  </label>
+              <label htmlFor="mssv" className="text-xs text-gray-400 w-full font-medium">MSSV</label>
             </div>
-          </div> <br />
-
-          <input className={classnameE} type="email" id = "email" placeholder='Enter your email address' value={email} onChange={(evt) => setEmail(evt.target.value)} /> <br />
-
-          <div className="relative top-2 left-2 w-20">
-            <div className="absolute bg-white w-full px-1">
-              <label htmlFor="password" className="text-xs text-red-600 w-full font-medium">PASSWORD*</label>
+          </div> <br /> 
+
+          <input className={classnameE} type="text" id = "mssv" placeholder='Nhập mã số sinh viên' value={mssv} onChange={(evt) => setMssv(evt.target.value)} /> <br />
+          
+          <div className="relative top-2 left-1 w-20">
+            <div className="absolute bg-white w-full px-2">
+              <label htmlFor="mssv" className="text-xs w-full text-red-600 font-medium">*  </label>
+              <label htmlFor="mssv" className="text-xs text-gray-400 w-full font-medium">Mật khẩu</label>
             </div>
-          </div> <br />
+          </div>
+        
+          <div>
+            <EyeOutlined className={eye} onClick={changeStatus} />
+          </div>
 
-            <input className={classnameP} type="password" id = "password" placeholder='Enter password' value={password} onChange={(evt) => setPassword(evt.target.value)} /> <br />
+          <input className={classnameP} type={type} maxLength={32} id = "password" placeholder='Nhập mật khẩu' value={password} onChange={(evt) => setPassword(evt.target.value)} />  <br />
 
-          <div className="relative top-2 left-2 w-20">
-            <div className="absolute bg-white w-full px-1">
-              <label htmlFor="Full Name" className="text-xs text-gray-400 w-full font-medium">FULL NAME</label>
+          <div className="relative top-2 left-1 w-20">
+            <div className="absolute bg-white w-full px-2">
+              <label htmlFor="Full Name" className="text-xs text-gray-400 w-full font-medium">Họ và tên</label>
             </div>
-          </div> <br />
-            <input className="border hover:border-sky-500 w-full h-14 rounded px-2" type="text" id = "Full Name" placeholder='Enter your full name' /> <br />
+          </div> <br /> 
+            <input className="border hover:border-sky-500 w-full h-14 rounded-lg px-2" type="text" id = "Full Name" placeholder='Nhập họ và tên' /> <br />
 
-            <div className="relative top-2 left-2 w-24">
-            <div className="absolute bg-white w-full px-1">
-            <label htmlFor="student code" className="text-xs text-gray-400 w-full font-medium">STUDENT CODE</label>
+            <div className="relative top-2 left-1 w-12">
+            <div className="absolute bg-white w-full px-2">
+            <label htmlFor="email" className="text-xs text-gray-400 w-full font-medium"> Email</label>
             </div>
-          </div> <br />
-            <input className="border hover:border-sky-500 w-full h-14 rounded px-2" type="text" id = "student code" placeholder='Enter your student code' /> <br />
+          </div> <br /> 
+            <input className="border hover:border-sky-500 w-full h-14 rounded-lg px-2" type="text" id = "email" placeholder='Nhập email' /> <br />
 
           <div className="text-sm text-red-600 w-full font-medium italic">{note}</div> <br />
 
@@ -87,12 +116,12 @@ export default function SignUp() {
           <Link href="/">Back</Link>
           </button>
 
-          <button className="font-bold bg-black hover:bg-sky-300 text-white rounded-2xl w-28 h-10"
-          onClick={() => handleClick()}>Next</button>
+          <button className="font-bold bg-black hover:bg-sky-300 text-white rounded-2xl w-28 h-10" 
+          onClick={() => handleClick()}> <Link href = {nlink}>Next</Link> </button>
         </div>
 
       </div>
-
-    </main>
+      
+    </div>
   )
 }
diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
index f098359..8169919 100644
--- a/components/layouts/Header.tsx
+++ b/components/layouts/Header.tsx
@@ -149,4 +149,4 @@ export default function Header() {
       }
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2867c84..4e67f7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@types/node": "20.6.2",
         "@types/react": "18.2.22",
         "@types/react-dom": "18.2.7",
-        "antd": "^5.10.1",
+        "antd": "^5.10.2",
         "eslint": "8.49.0",
         "eslint-config-next": "13.4.19",
         "invert-color": "^2.0.0",
@@ -561,9 +561,9 @@
       }
     },
     "node_modules/@rc-component/trigger": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.17.1.tgz",
-      "integrity": "sha512-ocD6GlyrPMtWfSdGmfURpudj6ZQqykG/+GH9QVhziG/0EtpPqK5FUbptwXDJGBJwvKhk4Z6jhxJE7utH464SgQ==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.0.tgz",
+      "integrity": "sha512-vloGnWpeTmt7DBw0OHnG9poQ8h1WFh0hebq6fpgVjGYSxm6JU8rLH+kNwVNNvhL6Rg5He4ESjOk6O7uF9dJhxA==",
       "dependencies": {
         "@babel/runtime": "^7.23.2",
         "@rc-component/portal": "^1.1.0",
@@ -828,9 +828,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.10.1",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-5.10.1.tgz",
-      "integrity": "sha512-alcBmeH4oAdmEdBs6EORH3onRFRjGYRkWtVjPyJxlTIfLILb/+S5Y+ZqisV3AobC8mlj6T3RV8aKG9ic6PgtzQ==",
+      "version": "5.10.2",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.10.2.tgz",
+      "integrity": "sha512-0kV6PmlJi7vhPmYH9GCAlU62ZhiuLF+gE3REJ/9MZTo++/3i5q6SALNoRgHLMsa+rX50U3RO3wJVY+fPib594Q==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/cssinjs": "^1.17.2",
@@ -841,7 +841,7 @@
         "@rc-component/color-picker": "~1.4.1",
         "@rc-component/mutate-observer": "^1.1.0",
         "@rc-component/tour": "~1.10.0",
-        "@rc-component/trigger": "^1.17.0",
+        "@rc-component/trigger": "^1.17.2",
         "classnames": "^2.2.6",
         "copy-to-clipboard": "^3.2.0",
         "dayjs": "^1.11.1",
@@ -849,7 +849,7 @@
         "rc-cascader": "~3.18.1",
         "rc-checkbox": "~3.1.0",
         "rc-collapse": "~3.7.1",
-        "rc-dialog": "~9.3.3",
+        "rc-dialog": "~9.3.4",
         "rc-drawer": "~6.5.2",
         "rc-dropdown": "~4.1.0",
         "rc-field-form": "~1.39.0",
@@ -864,10 +864,10 @@
         "rc-picker": "~3.14.5",
         "rc-progress": "~3.5.1",
         "rc-rate": "~2.12.0",
-        "rc-resize-observer": "^1.3.1",
+        "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.2.2",
-        "rc-select": "~14.9.1",
-        "rc-slider": "~10.3.0",
+        "rc-select": "~14.9.2",
+        "rc-slider": "~10.3.1",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
         "rc-table": "~7.34.4",
@@ -3627,9 +3627,9 @@
       }
     },
     "node_modules/rc-dialog": {
-      "version": "9.3.3",
-      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.3.tgz",
-      "integrity": "sha512-OpgzE0wq55ebN8TL/ZPc+MLY6qXswEuZg2/3uX3+lqjxUnVaH78PyntpJwqY+3BJdQkDj28XeXYRVY6gXQ8fNg==",
+      "version": "9.3.4",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz",
+      "integrity": "sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/portal": "^1.0.0-8",
@@ -3901,13 +3901,13 @@
       }
     },
     "node_modules/rc-resize-observer": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.3.1.tgz",
-      "integrity": "sha512-iFUdt3NNhflbY3mwySv5CA1TC06zdJ+pfo0oc27xpf4PIOvfZwZGtD9Kz41wGYqC4SLio93RVAirSSpYlV/uYg==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz",
+      "integrity": "sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==",
       "dependencies": {
         "@babel/runtime": "^7.20.7",
         "classnames": "^2.2.1",
-        "rc-util": "^5.27.0",
+        "rc-util": "^5.38.0",
         "resize-observer-polyfill": "^1.5.1"
       },
       "peerDependencies": {
@@ -3931,9 +3931,9 @@
       }
     },
     "node_modules/rc-select": {
-      "version": "14.9.1",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.9.1.tgz",
-      "integrity": "sha512-vORdRgOXOIHLanzYi+vpDGydk6eyXT/XZS21PpRlhBTMaieK4JhkGQX2RO8QwFv/gFMjv0QInIgyM+0zmUeIjw==",
+      "version": "14.9.2",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.9.2.tgz",
+      "integrity": "sha512-VQ15sRFgPURHb8ZcZNSDtb2rAw3+C9xlL0nDziwNHTEW1KvEpZ8y+0v5w24X/Bpl9b3cW1BOyW1F5UqSAq+7Dg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/trigger": "^1.5.0",
diff --git a/package.json b/package.json
index 748550a..14a0724 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@types/node": "20.6.2",
     "@types/react": "18.2.22",
     "@types/react-dom": "18.2.7",
-    "antd": "^5.10.1",
+    "antd": "^5.10.2",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "invert-color": "^2.0.0",