diff --git a/src/pages/signup.jsx b/src/pages/signup.jsx
index 39df6ca..05316cc 100644
--- a/src/pages/signup.jsx
+++ b/src/pages/signup.jsx
@@ -1,35 +1,147 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../assets/logo_light_46.png";
 import ReCAPTCHA from "react-google-recaptcha";
+import { IconEyeClosedSolid, IconEyeOpened } from "@douyinfe/semi-icons";
+import { Banner } from "@douyinfe/semi-ui";
 
 export default function SignUp() {
+  const [formValues, setFormValues] = useState({
+    captcha: false,
+    username: "",
+    email: "",
+    password: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showPassCriteria, setShowPassCriteria] = useState(false);
+
+  const handleChange = (e) =>
+    setFormValues((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+
+  const onSubmit = () => console.log(formValues);
+
   useEffect(() => {
     document.title = "Create account | drawDB";
   });
+
   return (
-    <div className="flex h-screen">
-      <div className="bg-indigo-300 w-[50%]"></div>
-      <div className="m-auto">
+    <div className="grid grid-cols-5 h-screen select-none">
+      <div className="bg-indigo-300 col-span-3 overflow-y-hidden"></div>
+      <div className="col-span-2 flex flex-col justify-center items-center my-6">
+        <Link to="/">
+          <img src={logo} alt="logo" className="mx-auto h-[38px]" />
+        </Link>
+        <div className="text-lg my-1.5 text-center font-bold text-slate-600">
+          Create your account today!
+        </div>
         <div>
-          <Link to="/" className="text-center">
-            <img src={logo} alt="logo" className="me-2" />
-          </Link>
-          <div className="text-xl my-2">Create your account</div>
-          <div className="flex items-center justify-center my-2">
-            <hr className="border-slate-400 flex-grow" />
-            <div className="text-sm font-semibold m-2 text-slate-400">or</div>
-            <hr className="border-slate-400 flex-grow" />
+          <label
+            className="mb-0.5 text-sm font-bold text-slate-500"
+            htmlFor="username"
+          >
+            Username
+          </label>
+          <input
+            id="username"
+            name="username"
+            className="py-1.5 px-3 block w-full mb-1 border rounded border-slate-400 hover:shadow focus:outline-blue-500"
+            onChange={handleChange}
+          />
+          <label
+            className="mb-0.5 text-sm font-bold text-slate-500"
+            htmlFor="email"
+          >
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            className="py-1.5 px-3 block w-full mb-1 border rounded border-slate-400 hover:shadow focus:outline-blue-500"
+            onChange={handleChange}
+          />
+          <label
+            className="mb-0.5 text-sm font-bold text-slate-500"
+            htmlFor="password"
+          >
+            Password
+          </label>
+          <div className="flex items-center mb-3">
+            <input
+              id="password"
+              name="password"
+              type={showPassword ? "text" : "password"}
+              className="py-1.5 px-3 block w-full border rounded-l border-slate-400 hover:shadow focus:outline-blue-500"
+              onFocus={() => setShowPassCriteria(true)}
+              onChange={handleChange}
+            />
+            <button
+              className="bg-gray-200 py-1.5 px-2 rounded-r border border-slate-400"
+              onClick={() => {
+                setShowPassword((prev) => !prev);
+              }}
+            >
+              {showPassword ? (
+                <IconEyeOpened style={{ color: "rgb(22 74 110)" }} />
+              ) : (
+                <IconEyeClosedSolid style={{ color: "rgb(22 74 110)" }} />
+              )}
+            </button>
           </div>
-          <input className="py-2 px-3 block w-full my-2 border rounded border-slate-400" />
-          <input className="py-2 px-3 block w-full my-2 border rounded border-slate-400" />
-          <input className="py-2 px-3 block w-full my-2 border rounded border-slate-400" />
+          {showPassCriteria && (
+            <Banner
+              fullMode={false}
+              type="danger"
+              bordered
+              style={{ marginBottom: "12px" }}
+              title={
+                <div className="font-bold text-sm">Password isn't secure</div>
+              }
+              description={
+                <div className="w-[236px]">
+                  <ul className="list-disc">
+                    <li>Contain at least 8 characters</li>
+                    <li>Contain a special character</li>
+                    <li>Contain a number</li>
+                  </ul>
+                </div>
+              }
+              closeIcon={null}
+            ></Banner>
+          )}
           <ReCAPTCHA
             sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY}
-            onChange={() => {}}
+            onChange={() =>
+              setFormValues((prev) => ({ ...prev, captcha: true }))
+            }
           />
-          <button className="px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
-            Submit
+          <button
+            className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold"
+            onClick={onSubmit}
+          >
+            Sign up
+          </button>
+          <div className="text-sm text-center">
+            Already have an account?
+            <Link
+              to=""
+              className="ms-2 font-semibold text-indigo-700 hover:underline"
+            >
+              Log in here.
+            </Link>
+          </div>
+          <div className="flex items-center justify-center my-1">
+            <hr className="border-slate-400 flex-grow" />
+            <div className="text-sm font-semibold mx-2 text-slate-400">or</div>
+            <hr className="border-slate-400 flex-grow" />
+          </div>
+          <button className="w-full px-3 py-2.5 mt-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
+            Google
+          </button>{" "}
+          <button className="w-full px-3 py-2.5 my-2 bg-[#386b8f] hover:bg-[#4e8bb6] rounded text-white text-sm font-semibold">
+            Github
           </button>
         </div>
       </div>