diff --git a/public/css/passwordindicator.css b/public/css/passwordindicator.css
new file mode 100644
index 00000000..fb8e33db
--- /dev/null
+++ b/public/css/passwordindicator.css
@@ -0,0 +1,83 @@
+
+.password-wrapper {
+ height: 45px;
+ width: 100%;
+ display: flex;
+ position: relative;
+}
+form .password-wrapper .password{
+ width: 100%;
+ height: 100%;
+ border: 1px solid lightgrey;
+ outline: none;
+ border-radius: 5px;
+ font-size: 17px;
+ transition: all 0.3s;
+}
+form .password-wrapper input:focus{
+ border-color: #27ae60;
+ box-shadow: inset 0 0 3px #2fd072;
+}
+form .password-wrapper .showBtn{
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 15px;
+ font-weight: 600;
+ cursor: pointer;
+ display: none;
+ user-select: none;
+}
+form .indicator{
+ height: 10px;
+ margin: 5px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ display: none;
+}
+form .indicator span{
+ position: relative;
+ height: 100%;
+ width: 100%;
+ background: lightgrey;
+ border-radius: 5px;
+}
+form .indicator span:nth-child(2){
+ margin: 0 3px;
+}
+form .indicator span.active:before{
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ border-radius: 5px;
+}
+.indicator span.weak:before{
+ background-color: #ff4757;
+}
+.indicator span.medium:before{
+ background-color: orange;
+}
+.indicator span.strong:before{
+ background-color: #23ad5c;
+}
+form .text{
+ font-size: 20px;
+ font-weight: 500;
+ position: relative;
+ display: none;
+ margin-bottom: -10px;
+}
+form .text.weak{
+ color: #ff4757;
+}
+form .text.medium{
+ color: orange;
+}
+form .text.strong{
+ color: #23ad5c;
+}
diff --git a/public/js/passwordindicator.js b/public/js/passwordindicator.js
new file mode 100644
index 00000000..b0e5bd08
--- /dev/null
+++ b/public/js/passwordindicator.js
@@ -0,0 +1,59 @@
+const indicator = document.querySelector(".indicator");
+const input = document.querySelector(".password");
+const weak = document.querySelector(".weak");
+const medium = document.querySelector(".medium");
+const strong = document.querySelector(".strong");
+const text = document.querySelector(".text");
+const showBtn = document.querySelector(".showBtn");
+let regExpWeak = /[a-z]/;
+let regExpMedium = /\d+/;
+let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
+function trigger(){
+ if(input.value != ""){
+ indicator.style.display = "block";
+ indicator.style.display = "flex";
+ if(input.value.length <= 3 && (input.value.match(regExpWeak) || input.value.match(regExpMedium) || input.value.match(regExpStrong)))no=1;
+ if(input.value.length >= 6 && ((input.value.match(regExpWeak) && input.value.match(regExpMedium)) || (input.value.match(regExpMedium) && input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && input.value.match(regExpStrong))))no=2;
+ if(input.value.length >= 6 && input.value.match(regExpWeak) && input.value.match(regExpMedium) && input.value.match(regExpStrong))no=3;
+ if(no==1){
+ weak.classList.add("active");
+ text.style.display = "block";
+ text.textContent = "Your password is too week";
+ text.classList.add("weak");
+ }
+ if(no==2){
+ medium.classList.add("active");
+ text.textContent = "Your password is medium";
+ text.classList.add("medium");
+ }else{
+ medium.classList.remove("active");
+ text.classList.remove("medium");
+ }
+ if(no==3){
+ weak.classList.add("active");
+ medium.classList.add("active");
+ strong.classList.add("active");
+ text.textContent = "Your password is strong";
+ text.classList.add("strong");
+ }else{
+ strong.classList.remove("active");
+ text.classList.remove("strong");
+ }
+ showBtn.style.display = "block";
+ showBtn.onclick = function(){
+ if(input.type == "password"){
+ input.type = "text";
+ showBtn.textContent = "HIDE";
+ showBtn.style.color = "#23ad5c";
+ }else{
+ input.type = "password";
+ showBtn.textContent = "SHOW";
+ showBtn.style.color = "#000";
+ }
+ }
+ }else{
+ indicator.style.display = "none";
+ text.style.display = "none";
+ showBtn.style.display = "none";
+ }
+}
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 4ebcad7b..8c3def5d 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -8,6 +8,7 @@
+