diff --git a/client/core/src/components/textfield/style.scss b/client/core/src/components/textfield/style.scss
index 0ba8c87d9..ae614b1b7 100644
--- a/client/core/src/components/textfield/style.scss
+++ b/client/core/src/components/textfield/style.scss
@@ -107,4 +107,22 @@ vn-textfield {
             width: 100%!important;
         }
     }
+
+    & > div.container > div.textField > div.infix.invalid{
+        @extend div.selected;
+
+        & > span.mdl-textfield__error{
+            visibility: visible;
+            margin-top: 9px;
+        }
+        & > label{
+            color: #d50000;
+        }
+    }
+
+    .infix.invalid + .underline {
+        &{
+            background-color: #d50000;
+        }
+    }
 }
\ No newline at end of file
diff --git a/client/core/src/components/textfield/textfield.html b/client/core/src/components/textfield/textfield.html
index 0a899e76c..0b019b545 100644
--- a/client/core/src/components/textfield/textfield.html
+++ b/client/core/src/components/textfield/textfield.html
@@ -22,6 +22,8 @@
 
             <label class="label" translate>{{::$ctrl.label}}</label>
         </div>
+        <div class="underline"></div>
+        <div class="selected underline"></div>
         <div class="suffix">
             <i class="material-icons pointer"
                 ng-class="{visible: !$ctrl.disabled && $ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)}"
@@ -36,7 +38,4 @@
         </div>
         <div class="rightIcons"></div>
     </div>
-
-    <div class="underline"></div>
-    <div class="selected underline"></div>
 </div>