diff --git a/src/main/resources/static/css/regist.css b/src/main/resources/static/css/regist.css
new file mode 100644
index 0000000000000000000000000000000000000000..cc2c87ebd6272d10fd55e668320b312719d01dbf
--- /dev/null
+++ b/src/main/resources/static/css/regist.css
@@ -0,0 +1,302 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;1,500&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "poppins",sans-serif;
+}
+body{
+ /*height: 100vh;*/
+ width: 100%;
+ background: #000;
+
+}
+.background{
+ background: url(../img/backgroud3.jpg) no-repeat;
+ background-position: center;
+ background-size:cover ;
+ height: 100vh;
+ width: 100%;
+ filter: blur(10px);
+}
+
+.header{
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 25px 13%;
+ background: transparent;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ z-index: 100;
+
+}
+.navbar a{
+ position: relative;
+ font-size: 16px;
+ color: black;
+ margin-right: 30px;
+ text-decoration: none;
+}
+.navbar a::after{
+ content: "";
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 2px;
+ background: black;
+ bottom: -5px;
+ border-radius: 5px;
+ transform: translateY(10px);
+ opacity: 0;
+ transition: .5s ease;
+}
+.navbar a:hover:after{
+ transform: translateY(0);
+ opacity: 1;
+}
+.search-bar{
+ width: 250px;
+ height: 45px;
+ background-color: transparent;
+ border: 2px solid #000000;
+ border-radius: 6px;
+ display: flex;
+ align-items: center;
+}
+.search-bar input{
+ width: 100%;
+ background-color: transparent;
+ border: none;
+ outline: none;
+ color: black;
+ font-size: 16px;
+ padding-left: 10px;
+}
+.search-bar button{
+ width: 40px;
+ height: 100%;
+ background: transparent;
+ outline: none;
+ border: none;
+ color:black;
+ cursor: pointer;
+}
+.search-bar input::placeholder{
+ color: black;
+}
+.search-bar button i{
+ font-size: 22px;
+}
+.container{
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
+ width: 75%;
+ height: 550px;
+ margin-top: 20px;
+ background: url(../img/backgroud3.jpg) no-repeat;
+ background-position: center;
+ background-size:cover ;
+ border-radius: 20px;
+ overflow: hidden;
+
+
+}
+.item{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 58%;
+ height: 100%;
+ color: black;
+ background: transparent;
+ padding: 80px;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+
+
+
+}
+.item .logo{
+ color: black;
+ font-size: 30px;
+
+}
+.text-item h2{
+ font-size: 40px;
+ line-height: 1;
+}
+.text-item p{
+ font-size: 16px;
+ margin: 20px 0;
+}
+.social-icon a i{
+ color: black;
+ font-size: 24px;
+ margin-left: 10px;
+ cursor: pointer;
+ transition: .5s ease;
+}
+.social-icon a:hover i{
+ transform: scale(1.2);
+}
+.container .login-section{
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: calc(100% - 58%);
+ height: 100%;
+ color: black;
+ backdrop-filter: blur(10px);
+}
+
+
+.form-box .input-box{
+ width: 340px;
+ height: 50px;
+ border-bottom: 2px solid #000000;
+ margin: 30px 0;
+ position: relative;
+}
+.input-box input{
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ border: none;
+ outline: none;
+ font-size: 16px;
+ padding-right: 28px;
+
+
+}
+.input-box label{
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ font-size: 16px;
+ font-weight: 600px;
+ pointer-events: none;
+ transition: .5s ease;
+
+}
+.input-box .icon{
+ position: absolute;
+ top: 13px;
+ right: 0;
+ font-size: 19px;
+}
+.input-box input:focus~ label,
+.input-box input:valid~ label{
+ top: -5px;
+}
+.remember-password{
+ font-size: 14px;
+ font-weight: 500;
+ margin: -15px 0 15px ;
+ display: flex;
+ justify-content: space-between;
+}
+.remember-password label input{
+ accent-color: black;
+ margin-right: 3px;
+
+}
+.remember-password a{
+ color: black;
+ text-decoration: none;
+}
+.remember-password a:hover{
+ text-decoration: underline;
+}
+.btn{
+ background: black;
+ width: 100%;
+ height: 45px;
+ outline: none;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ background: #84b9db;
+ font-size: 16px;
+ color: black;
+ box-shadow: rgba(0,0,0,0.4);
+
+}
+.create-account{
+ font-size: 14.5px;
+ text-align: center;
+ margin: 25px;
+}
+.create-account p a{
+ color: black;
+ font-weight: 600px;
+ text-decoration: none;
+}
+.create-account p a:hover{
+ text-decoration: underline;
+}
+
+/* Input Box */
+.input-box {
+ width: 340px;
+ height: 50px;
+ border-bottom: 2px solid #000000;
+ margin: 30px 0;
+ position: relative;
+}
+
+.input-box input,
+.input-box select {
+ width: 100%;
+ height: 100%;
+ background: transparent;
+ border: none;
+ outline: none;
+ font-size: 16px;
+ color: black;
+ padding-right: 28px;
+ appearance: none;
+}
+
+.input-box label {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ font-size: 16px;
+ pointer-events: none;
+ transition: .5s ease;
+}
+
+.input-box input:focus ~ label,
+.input-box input:valid ~ label,
+.input-box select:focus ~ label {
+ top: -5px;
+}
+
+.input-box select {
+ cursor: pointer;
+ color: black;
+ font-size: 16px;
+ border-radius: 4px;
+}
+
+.input-box .icon {
+ position: absolute;
+ top: 13px;
+ right: 0;
+ font-size: 19px;
+ color: black;
+}
+.error-message {
+ color: red;
+ font-size: 12px;
+ margin-top: 5px;
+ display: none;
+}
diff --git a/src/main/resources/static/html/regist.html b/src/main/resources/static/html/regist.html
new file mode 100644
index 0000000000000000000000000000000000000000..bb38b07155d3d0375a3f887fb086cd87b345375f
--- /dev/null
+++ b/src/main/resources/static/html/regist.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8"/>
+ <title>Register</title>
+ <link rel="stylesheet" href="../css/regist.css">
+ <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+ <script src="../js/emailValidation.js"></script>
+</head>
+<body>
+<!-- NAVBAR CREATION -->
+<header class="header">
+ <nav class="navbar">
+ <a href="../html/login.html">Home</a>
+ </nav>
+
+</header>
+
+<!-- BACKGROUND AND MAIN CONTAINER -->
+<div class="background"></div>
+<div class="container">
+ <div class="item">
+ <h2 class="logo"><i class='bx bxl-xing'></i>Health & Social Care</h2>
+ <div class="text-item">
+ <h2>Welcome! <br><span>
+ To Our Website
+ </span></h2>
+ <p>Effective communication promotes faster and more efficient placements</p>
+ <div class="social-icon">
+ <a href="#"><i class='bx bxl-facebook'></i></a>
+ <a href="#"><i class='bx bxl-twitter'></i></a>
+ <a href="#"><i class='bx bxl-youtube'></i></a>
+ <a href="#"><i class='bx bxl-instagram'></i></a>
+ <a href="#"><i class='bx bxl-linkedin'></i></a>
+ </div>
+ </div>
+ </div>
+ <div class="login-section" style="overflow: auto">
+ <div class="form-box register" >
+ <form action="" id="registForm">
+ <h2>Sign Up</h2>
+ <!-- Username -->
+ <div class="input-box">
+ <span class="icon"><i class='bx bxs-user'></i></span>
+ <input type="text" id="name" name="name" required>
+ <label>Username</label>
+ <span id="nameError" class="error-message"></span>
+ </div>
+ <!-- Password -->
+ <div class="input-box">
+ <span class="icon"><i class='bx bxs-lock-alt'></i></span>
+ <input type="password" id="password" name="password" required>
+ <label>Password</label>
+ <span id="passwordError" class="error-message"></span>
+ </div>
+ <!-- Email -->
+ <div class="input-box">
+ <span class="icon"><i class='bx bxs-envelope'></i></span>
+ <input type="text" id="email" required>
+ <label>Email</label>
+ <span id="emailError" class="error-message"></span>
+ </div>
+ <!-- Phone -->
+ <div class="input-box">
+ <span class="icon"><i class='bx bxs-phone'></i></span>
+ <input type="tel" id="phone" name="phone" required>
+ <label>Phone</label>
+ <span id="phoneError" class="error-message"></span>
+ </div>
+ <!-- Address -->
+ <div class="input-box">
+ <span class="icon"><i class='bx bxs-map'></i></span>
+ <input type="text"id="address" name="address" required>
+ <label>Address</label>
+ <span id="addressError" class="error-message"></span>
+ </div>
+ <!-- Type (Dropdown) -->
+ <div class="input-box">
+ <span class="icon"><i class='bx bxs-category'></i></span>
+ <select required id="type">
+ <option value="" disabled selected>Select Type</option>
+ <option style="color: black" value="hospital">hospital</option>
+ <option style="color: black" value="patient">patient</option>
+ </select>
+ </div>
+ </form>
+ <button class="btn" onclick="regist()">Sign Up</button>
+ </div>
+ </div>
+</div>
+
+<script>
+ var type;
+ var role;
+ const getType = document.getElementById("type");
+ getType.addEventListener("change", function () {
+ type = getType.value; // Gets the selected value
+ });
+
+ function regist() {
+ if (type === "hospital") {
+ role = "HOSPITAL";
+ } else if (type === "patient") {
+ role = "PATIENT";
+ }
+
+ const url = '/superAdmin/sign';
+ const data = {
+ name: document.getElementsByName("name")[0].value,
+ password: document.getElementsByName("password")[0].value,
+ email: document.getElementById("email").value,
+ phone: document.getElementsByName("phone")[0].value,
+ address: document.getElementsByName("address")[0].value,
+ status: 1,
+ role: role,
+ type: type
+ };
+
+ console.log("Sending data:", data);
+
+ fetch(url, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(data)
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ console.log(data)
+ if (data.code === 1) {
+ console.log(data)
+ window.location.href="login.html"
+ }
+ if(data.code === 0){
+ alert(data.msg);
+ }
+ })
+ }
+
+</script>
+</body>
+</html>
diff --git a/src/main/resources/static/js/emailValidation.js b/src/main/resources/static/js/emailValidation.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c8ef0262beb25aa7e33f90f01dda04a8de043df
--- /dev/null
+++ b/src/main/resources/static/js/emailValidation.js
@@ -0,0 +1,69 @@
+$(document).ready(function () {
+ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // confirm email
+ //Listen for input events using jQuery's on method
+
+ $('#email').on('input', function () {
+ const emailValue = $(this).val();
+ const $emailError = $('#emailError');
+
+ // Check whether the input is empty or does not match the regular expression
+ if (!emailPattern.test(emailValue) && emailValue !== '') {
+ $emailError.text("Please enter a valid email address.");
+ $emailError.show(); // Display error message
+ } else {
+ $emailError.text("");
+ $emailError.hide(); // Hide error message
+ }
+ });
+
+ $('#name').on('mouseleave', function () {
+ const value = $(this).val();
+ const $nameError = $('#nameError');
+
+ if (value == '') {
+ $nameError.text("Please enter data.");
+ $nameError.show();
+ } else {
+ $nameError.text("");
+ $nameError.hide();
+ }
+ });
+
+ $('#password').on('mouseleave', function () {
+ const value = $(this).val();
+ const $passwordError= $('#passwordError');
+
+ if (value == '') {
+ $passwordError.text("Please enter data.");
+ $passwordError.show();
+ } else {
+ $passwordError.text("");
+ $passwordError.hide();
+ }
+ });
+
+ $('#phone').on('mouseleave', function () {
+ const value = $(this).val();
+ const $phoneError= $('#phoneError');
+ // 检查输入是å¦ä¸ºç©ºæˆ–ä¸ç¬¦åˆæ£åˆ™è¡¨è¾¾å¼
+ if (value == '') {
+ $phoneError.text("Please enter data.");
+ $phoneError.show();
+ } else {
+ $phoneError.text("");
+ $phoneError.hide();
+ }
+ });
+ $('#address').on('mouseleave', function () {
+ const value = $(this).val();
+ const $addressError= $('#addressError');
+
+ if (value == '') {
+ $addressError.text("Please enter data.");
+ $addressError.show();
+ } else {
+ $addressError.text("");
+ $addressError.hide();
+ }
+ });
+});
\ No newline at end of file