diff --git a/src/app/header/header-popup/login/login.component.css b/src/app/header/header-popup/login/login.component.css
index 862da27..428fbf7 100644
--- a/src/app/header/header-popup/login/login.component.css
+++ b/src/app/header/header-popup/login/login.component.css
@@ -78,13 +78,14 @@
     background-color: #f44336;
     border-radius: 15px;
 }
-.input-div:hover:after {
+.input-div:hover:after,
+.input-div:has(input.form-control:focus):after {
     width: 100%;
     transition: .4s;
     overflow: hidden;
 }
 
-.input-div > .form-control, .input-div > .form-control:focus {
+.input-div > .form-control, .input-div > .form-control:hover{
     border: none;
     border-color: inherit;
     -webkit-box-shadow: none;
@@ -103,12 +104,15 @@
     -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
 }
 
+.input-div:has(input.form-control:focus) > .form-control::placeholder,
 .input-div:hover > .form-control::placeholder,
-.input-div:hover > .input-div-icon {
+.input-div:hover > .input-div-icon,
+.input-div:has(input.form-control:focus) > .input-div-icon {
     color: #D8291C;
     transition: .3s;
 }
-.input-div:hover > .form-control::placeholder {
+.input-div:hover > .form-control::placeholder,
+.input-div:has(input.form-control:focus) > .form-control::placeholder {
     font-weight: 500;
     transition: .3s;
 }
diff --git a/src/app/header/header-popup/signup/signup.component.css b/src/app/header/header-popup/signup/signup.component.css
index 22f2864..a109cf3 100644
--- a/src/app/header/header-popup/signup/signup.component.css
+++ b/src/app/header/header-popup/signup/signup.component.css
@@ -81,7 +81,8 @@
     background-color: #f44336;
     border-radius: 15px;
 }
-.input-div:hover:after {
+.input-div:hover:after,
+.input-div:has(input.form-control:focus):after {
     width: 100%;
     transition: .4s;
     overflow: hidden;
@@ -106,12 +107,15 @@
     -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
 }
 
+.input-div:has(input.form-control:focus) > .form-control::placeholder,
 .input-div:hover > .form-control::placeholder,
-.input-div:hover > .input-div-icon {
+.input-div:hover > .input-div-icon,
+.input-div:has(input.form-control:focus) > .input-div-icon {
     color: #D8291C;
     transition: .3s;
 }
-.input-div:hover > .form-control::placeholder {
+.input-div:hover > .form-control::placeholder,
+.input-div:focus > .form-control::placeholder{
     font-weight: 500;
     transition: .3s;
 }
@@ -121,7 +125,7 @@
     .authentication-container {
         min-width: 630px;
     }
-    
+
     .auth-body {
         all: unset;
         justify-content: space-around;
@@ -148,4 +152,4 @@
         height: 100%;
     }
 
-}
\ No newline at end of file
+}