diff --git a/client/core/src/components/textfield/style.scss b/client/core/src/components/textfield/style.scss
index 181ad8d8b..0ba8c87d9 100644
--- a/client/core/src/components/textfield/style.scss
+++ b/client/core/src/components/textfield/style.scss
@@ -1,45 +1,110 @@
+@import "colors";
 vn-textfield {
-    .mdl-chip__action {
-        position: absolute;
-        width: auto; 
-        top: 0px; 
-        right: -6px; 
-        margin: 21px 0px; 
-        background: white;
-        opacity: 1;
-        z-index: 1;
-        color: #aaa;
+    margin: 20px 0!important;
+    display: block;
+
+    .leftIcons, .rightIcons, .suffix{
+        display: inline-flex;
+        color: $secondary-font-color;
+        & .material-icons{
+            font-size: 20px!important
+        }
     }
-    .mdl-textfield {
+    .leftIcons{
+        margin-right: 3px;
+    }
+    .container{
         width: 100%;
+        position: relative;
+        padding-bottom: 2px;
     }
-    .mdl-textfield__error {
+    .textField{
+        width: 100%;
+        display: inline-flex;
+        position: relative;
+        padding: 4px 0;
+    }
+    .infix {
+        position: relative;
+        display: block;
+        flex: auto;
+        width: 100%;
+        min-width: 0;
+    }
+    i.pointer {
+        visibility: hidden
+    }
+    i.visible {
         visibility: visible;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    }
+    label {
+        position: absolute;
+        bottom: 2px;
+        pointer-events: none;
+        color: $secondary-font-color;
+        transition-duration: .2s;
+        transition-timing-function: cubic-bezier(.4,0,.2,1);
+    }
+    input {
+
+        outline: none;
+        border: none;
+        font-family: "Helvetica","Arial",sans-serif;
+        display: block;
+        font-size: 16px;
         width: 100%;
-    }
-    .mdl-textfield.invalid {
-        .mdl-textfield__input {
-            border-color: #d50000;
-            box-shadow: none;
-        }
-        .mdl-textfield__label::after {
-            background-color: #d50000;
+        background: 0 0;
+        color: inherit;
+
+        &[type=number]{
+            -moz-appearance: textfield;
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button{
+                -webkit-appearance: none;
+                margin: 0;
+            }
         }
     }
-    .mdl-textfield--floating-label.invalid .mdl-textfield__label {
-        color: #d50000;
-        font-size: 12px;
-        top: 4px;
+
+    .underline{
+        position: absolute;
+        bottom: 0;
+        height: 1px;
+        content: ' ';
+        pointer-events: none;
+        width: 100%;
+        background-color: rgba(0,0,0,.12);
     }
-    .material-icons {
-        font-size: 18px;  
-        float: right;
-        margin-right: 5px;
+
+    .selected.underline{
+        background-color: rgb(255,152,0);
+        height: 2px;
+        left: 50%;
+        width: 0px!important;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(.4,0,.2,1);
     }
-    .material-icons:hover {
-        color: rgba(0,0,0, .87);
+
+    &.not-empty{
+        & label {
+            bottom: 24px;
+            color: $main-01;
+            font-size: 12px;
+        }
+    }
+
+    div.selected{
+        &.container{
+            border-bottom: 0px;
+        }
+        & label {
+            bottom: 24px;
+            color: $main-01;
+            font-size: 12px;
+        }
+        & .selected.underline{
+            left: 0;
+            width: 100%!important;
+        }
     }
 }
\ 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 fe69149a3..0a899e76c 100644
--- a/client/core/src/components/textfield/textfield.html
+++ b/client/core/src/components/textfield/textfield.html
@@ -1,29 +1,42 @@
-<div
-    class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
+<div class="container"
+    ng-class="{selected: $ctrl.hasFocus}"
     ng-mouseenter="$ctrl.hasMouseIn = true"
-    ng-mouseleave="$ctrl.hasMouseIn = false">
-	<input
-        class="mdl-textfield__input" 
-        type="{{$ctrl.type}}" 
-        name="{{$ctrl.name}}" 
-        ng-model="$ctrl.value" 
-        vn-validation="{{$ctrl.rule}}" 
-        ng-disabled="$ctrl.disabled"
-        ng-readonly="$ctrl.readonly"
-        ng-focus="$ctrl.hasFocus = true"
-        ng-blur="$ctrl.hasFocus = false"
-        tabindex="{{$ctrl.input.tabindex}}"/>
-    <div class="mdl-chip__action">
-        <i class="material-icons"
-            ng-if="$ctrl.hasInfo"
-            vn-tooltip="{{$ctrl.info}}">
-            info_outline
-        </i>
-        <i class="material-icons pointer"
-            ng-show="!$ctrl.disabled && $ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)"
-            ng-click="$ctrl.clear()">
-            clear
-        </i>
+    ng-mouseleave="$ctrl.hasMouseIn = false"
+    style="display: inline-flex"
+>
+    <div class="textField">
+        <div class="leftIcons">
+        </div>
+        
+        <div class=" infix">
+        <input
+            type="{{$ctrl.type}}" 
+            name="{{$ctrl.name}}" 
+            ng-model="$ctrl.value" 
+            vn-validation="{{$ctrl.rule}}" 
+            ng-disabled="$ctrl.disabled"
+            ng-readonly="$ctrl.readonly"
+            ng-focus="$ctrl.hasFocus = true"
+            ng-blur="$ctrl.hasFocus = false"
+            tabindex="{{$ctrl.input.tabindex}}"/>
+
+            <label class="label" translate>{{::$ctrl.label}}</label>
+        </div>
+        <div class="suffix">
+            <i class="material-icons pointer"
+                ng-class="{visible: !$ctrl.disabled && $ctrl.hasValue && ($ctrl.hasFocus || $ctrl.hasMouseIn)}"
+                ng-click="$ctrl.clear()">
+                clear
+            </i>
+            <i class="material-icons"
+                ng-if="$ctrl.hasInfo"
+                vn-tooltip="{{$ctrl.info}}">
+                info_outline
+            </i>
+        </div>
+        <div class="rightIcons"></div>
     </div>
-    <label class="mdl-textfield__label" translate>{{::$ctrl.label}}</label>
+
+    <div class="underline"></div>
+    <div class="selected underline"></div>
 </div>
diff --git a/client/core/src/components/textfield/textfield.js b/client/core/src/components/textfield/textfield.js
index 56fc23955..4747ba39f 100644
--- a/client/core/src/components/textfield/textfield.js
+++ b/client/core/src/components/textfield/textfield.js
@@ -3,7 +3,7 @@ import Input from '../../lib/input';
 import './style.scss';
 
 export default class Textfield extends Input {
-    constructor($element, $scope, $attrs, vnTemplate) {
+    constructor($element, $scope, $attrs, vnTemplate, $transclude) {
         super($element, $scope);
         vnTemplate.normalizeInputAttrs($attrs);
         this._value = null;
@@ -13,35 +13,53 @@ export default class Textfield extends Input {
         this.info = $attrs.info || null;
         this.hasFocus = false;
         this.hasMouseIn = false;
-        componentHandler.upgradeElement($element[0].firstChild);
+
+        if ($transclude) {
+            $transclude($scope.$parent, tClone => {
+                this.leftIcons = tClone[0];
+            }, null, 'leftIcons');
+            $transclude($scope.$parent, tClone => {
+                this.rightIcons = tClone[0];
+            }, null, 'rightIcons');
+        }
     }
-    get value() {
-        return this._value;
+    set leftIcons(value) {
+        for (let i = 0; i < value.children.length; i++) {
+            this.element.querySelector('.leftIcons').appendChild(value);
+        }
+    }
+    set rightIcons(value) {
+        for (let i = 0; i < value.children.length; i++) {
+            this.element.querySelector('.rightIcons').appendChild(value.children[i]);
+        }
     }
     set value(value) {
         this._value = (value === undefined || value === '') ? null : value;
         this.input.value = this._value;
         this.hasValue = Boolean(this._value);
+        if (this.hasValue) this.element.classList.add('not-empty');
+        else this.element.classList.remove('not-empty');
         this.mdlUpdate();
     }
-
+    get value() {
+        return this._value;
+    }
     set vnTabIndex(value) {
         this.input.tabindex = value;
     }
-
     clear() {
         this.value = null;
         this.input.focus();
     }
-    mdlUpdate() {
-        let mdlElement = this.element.firstChild.MaterialTextfield;
-        if (mdlElement) mdlElement.updateClasses_();
-    }
 }
-Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
+Textfield.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];
 
 ngModule.component('vnTextfield', {
     template: require('./textfield.html'),
+    transclude: {
+        leftIcons: '?tLeftIcons',
+        rightIcons: '?tRightIcons'
+    },
     controller: Textfield,
     bindings: {
         value: '=model',
diff --git a/client/core/src/components/textfield/textfield.spec.js b/client/core/src/components/textfield/textfield.spec.js
index 9eea12b0c..73d2ee7de 100644
--- a/client/core/src/components/textfield/textfield.spec.js
+++ b/client/core/src/components/textfield/textfield.spec.js
@@ -18,7 +18,7 @@ describe('Component vnTextfield', () => {
         $attrs = {};
         $timeout = _$timeout_;
         $element = angular.element('<div><input></div>');
-        controller = $componentController('vnTextfield', {$scope, $element, $attrs, $timeout});
+        controller = $componentController('vnTextfield', {$scope, $element, $attrs, $timeout, $transclude: null});
     }));
 
     describe('value() setter', () => {