diff --git a/public/index.html b/public/index.html
index 6888252..306a641 100644
--- a/public/index.html
+++ b/public/index.html
@@ -24,11 +24,12 @@ <h1>Publish your passions, your way</h1>
 
   <section>
     <form class="form" action="/login" method="POST">
-      <input type="text" name="name" value="" placeholder="name ...." required>
-      <input type="text" name="password" value="" placeholder="Password ...." required>
+      <input id="name" type="text" name="name" value="" placeholder="Name ....">
+      <span class="errorMsg" id="validName"></span>
+      <input id="password" type="password" name="password" value="" placeholder="Password ....">
+      <span class="errorMsg" id="message"></span>
+      <button id="subLog" type="submit" name="button">Login</button>
       <span><a href="./signup">If you don't have account</a></span>
-
-      <button type="submit">login</button>
     </form>
   </section>
   <script src='./js/request.js'></script>
diff --git a/public/js/index.js b/public/js/index.js
index e69de29..447f656 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -0,0 +1,46 @@
+var username = document.getElementById('name');
+var pass = document.getElementById('password');
+var subLog = document.querySelector('.form');
+var msg = document.getElementById('message');
+var validName = document.getElementById('validName');
+
+function validUsername (username) {
+  if (typeof username.value !== 'string' || username.value === '') {
+    validName.innerHTML = '<span style="color:red">Please enter your username<br>Your name must be a string</span>';
+    username.style = 'border-color:red';
+    username.focus();
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function ValidPass (pass) {
+  if (typeof pass.value !== 'string' || pass.value === '') {
+    msg.innerHTML = '<span style="color:red">Please enter your password<br>Your password must be a string</span>';
+    pass.style = 'border-color:red';
+    pass.focus();
+    return false;
+  } else {
+    return true;
+  }
+}
+
+subLog.addEventListener('submit', function (event) {
+  event.preventDefault();
+  validName.innerHTML = '';
+  msg.innerHTML = '';
+  username.style = 'border:none; border-bottom: 1px solid lightgrey;';
+  pass.style = 'border:none; border-bottom: 1px solid lightgrey;';
+
+  var vn = validUsername(username);
+  var vp = ValidPass(pass);
+  if (vn && vp) {
+    // apiReq('/login', 'POST',  (response, err) => {
+    //   if (err) {
+    //     console.log(err);
+    //   }
+    //   console.log(response);
+    // });
+  }
+});
diff --git a/public/js/sign_up.js b/public/js/sign_up.js
index e69de29..8f039ad 100644
--- a/public/js/sign_up.js
+++ b/public/js/sign_up.js
@@ -0,0 +1,144 @@
+var username = document.getElementById('nameSign');
+var email = document.getElementById('emailSign');
+var pass = document.getElementById('passSign');
+var conf = document.getElementById('confSign');
+var msg = document.getElementById('message');
+var strength = document.getElementById('strength');
+var validName = document.getElementById('validName');
+var validEmail = document.getElementById('validEmail');
+var subSign = document.getElementById('subSign');
+
+function validateUsername (str) {
+  var illegalChars = /\W/; // allow letters, numbers, and underscores
+
+  if (str.value === '') {
+    validName.innerHTML = '<span style="color:red">Please enter your username</span>';
+    str.style = 'border-color:red';
+    str.focus();
+    return false;
+  } else if ((str.value.length < 5) || (str.length > 15)) {
+    validName.innerHTML = '<span style="color:red">Username must have 5-15 characters</span>';
+    str.style = 'border-color:red';
+    str.focus();
+    return false;
+  } else if (illegalChars.test(str.value)) {
+    validName.innerHTML = '<span style="color:red">Please enter valid Username. Use only numbers and alphabets</span>';
+    str.style = 'border-color:red';
+    str.focus();
+    return false;
+  } else {
+    validName.innerHTML = '';
+    return true;
+  }
+}
+
+function ValidatePass (pass, conf) {
+  pass.value.trim();
+  conf.value.trim();
+  if (pass.value.length === 0 && conf.value.length !== 0) {
+    if ((conf.value.length < 6) || (conf.value.length > 15)) {
+      msg.innerHTML = '<span style="color:red">Please enter your password<br>Your confirm password must have length 6-15</span>';
+      pass.style = 'border-color:red';
+      pass.focus();
+      return false;
+    } else {
+      msg.innerHTML = '<span style="color:red">Please enter your password</span>';
+      pass.style = 'border-color:red';
+      pass.focus();
+      return false;
+    }
+  } else if (conf.value.length === 0 && pass.value.length !== 0) {
+    if ((pass.value.length < 6) || (pass.value.length > 15)) {
+      msg.innerHTML = '<span style="color:red">Please confirm your password<br>Your password must have length 6-15</span>';
+      pass.style = 'border-color:red';
+      conf.focus();
+      return false;
+    } else {
+      msg.innerHTML = '<span style="color:red">Please confirm your password</span>';
+      conf.style = 'border-color:red';
+      conf.focus();
+      return false;
+    }
+  } else if (pass.value.length === 0 && conf.value.length === 0) {
+    msg.innerHTML = '<span style="color:red">Enter your password and confirm password</span>';
+    pass.style = 'border-color:red';
+    conf.style = 'border-color:red';
+    pass.focus();
+    return false;
+  } else if (pass.value.length !== 0 && conf.value.length !== 0 && pass.value !== conf.value) {
+    msg.innerHTML = '<span style="color:red">Your password and confirm password should be the same !</span>';
+    pass.style = 'border-color:red';
+    conf.style = 'border-color:red';
+    pass.focus();
+    conf.focus();
+    return false;
+  } else if (pass.value.length !== 0 && pass.value === conf.value) {
+    if ((pass.value.length < 6) || (pass.value.length > 15)) {
+      msg.innerHTML = '<span style="color:red">Your password must have length 6-15</span>';
+      pass.style = 'border-color:red';
+      pass.focus();
+      return false;
+    }
+  } else {
+    return true;
+  }
+}
+
+function ValidateEmail (myEmail) {
+  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
+  if (email.value.match(mailformat)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+function validEmailFun (email) {
+  var result = ValidateEmail(email);
+  if (email.value.length === 0) {
+    validEmail.innerHTML = '<span style="color:red">Please enter your email</span>';
+    email.style = 'border-color:red';
+    email.focus();
+    return false;
+  } else if (!result) {
+    validEmail.innerHTML = '<span style="color:red">Please enter valid email</span>';
+    email.style = 'border-color:red';
+    email.focus();
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function passwordChanged () {
+  var strongRegex = new RegExp('^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$', 'g');
+  var mediumRegex = new RegExp('^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$', 'g');
+  var enoughRegex = new RegExp('(?=.{6,}).*', 'g');
+  if (pass.value.length === 0) {
+    strength.innerHTML = 'Type Password';
+  } else if (enoughRegex.test(pass.value) === false) {
+    strength.innerHTML = 'More Characters';
+  } else if (strongRegex.test(pass.value)) {
+    strength.innerHTML = '<span style="color:green">Strong!</span>';
+  } else if (mediumRegex.test(pass.value)) {
+    strength.innerHTML = '<span style="color:orange">Medium!</span>';
+  } else {
+    strength.innerHTML = '<span style="color:red">Weak!</span>';
+  }
+}
+
+pass.addEventListener('keyup', passwordChanged);
+
+subSign.addEventListener('click', function (event) {
+  validName.innerHTML = '';
+  validEmail.innerHTML = '';
+  msg.innerHTML = '';
+  username.style = 'border:none; border-bottom: 1px solid lightgrey;';
+  email.style = 'border:none; border-bottom: 1px solid lightgrey;';
+  pass.style = 'border:none; border-bottom: 1px solid lightgrey;';
+  conf.style = 'border:none; border-bottom: 1px solid lightgrey;';
+
+  // if (validateUsername(username) && validEmailFun(email) && ValidatePass(pass, conf)) {
+  //   subSign.disabled = false;
+  // }
+});
diff --git a/public/sign_up.html b/public/sign_up.html
index d3f804c..6f05514 100644
--- a/public/sign_up.html
+++ b/public/sign_up.html
@@ -20,14 +20,19 @@ <h1>SIGNUP</h1>
 
   <section>
     <form class="form" action="/sign-up" method="POST">
-      <input type="text" name="name" value="" placeholder="name ...." required>
-      <input type="text" name="email" value="" placeholder="email ...." required>
-      <input type="text" name="password" value="" placeholder="Password ...." required>
-      <input type="text" name="confirm_password" value="" placeholder="Renter Password ...." required>
-      <button type="submit" name="button">signup</button>
-    </form>
+          <input id="nameSign" type="text" name="name" value="" placeholder="Name ....">
+          <span class="errorMsg" id="validName"></span>
+          <input id="emailSign" type="text" name="email" value="" placeholder="Email ....">
+          <span class="errorMsg" id="validEmail"></span>
+          <input id="passSign" type="password" name="password" value="" placeholder="Password ....">
+          <span id="strength">Type Password ^_^</span>
+          <input id="confSign" type="password" name="confirm_password" value="" placeholder="Confirm Password ....">
+          <span class="errorMsg" id="message"></span>
+          <button id="subSign" type="submit" name="button">signup</button>
+        </form>
   </section>
 
+  <script type="text/javascript" src="./js/request.js"></script>
   <script type="text/javascript" src="./js/sign_up.js"></script>
 </body>
 </html>