diff --git a/packages/ theme_neumorphism/src/sass/lib.scss b/packages/ theme_neumorphism/src/sass/lib.scss
index c9b278a7..389f4567 100644
--- a/packages/ theme_neumorphism/src/sass/lib.scss	
+++ b/packages/ theme_neumorphism/src/sass/lib.scss	
@@ -65,7 +65,7 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
       sys: (
         'color': (
           'content-tertiary': '',
-          'content-secondary': '',
+          'content-secondary': #A19A9D,
           'content-primary': '',
           'content-quaternary': '',
           'on-disabled': '',
@@ -101,6 +101,14 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
               'text-color-active': token-as-var('ref.color.common.color-theme-accent'),
             )
           ),
+          'textfield': (
+            'background-color': #FAF4F8,
+            'background-color-hover': #FAF4F8,
+            'border-color': #F7F3F4,
+            'label-color': #D5CDD0,
+            'counter-color': #909399,
+            'outline-color': rgba(0, 0, 0, 0.5),
+          ),
           'util': (
             'overlay': '',
           ),
diff --git a/packages/theme/src/sass/lib.scss b/packages/theme/src/sass/lib.scss
index e16fdd0a..1965f86f 100644
--- a/packages/theme/src/sass/lib.scss
+++ b/packages/theme/src/sass/lib.scss
@@ -93,6 +93,14 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
               'text-color-active': '',
             )
           ),
+          'textfield': (
+            'background-color': #F5F7F8,
+            'background-color-hover': #ECEFF0,
+            'border-color': #DDE0E1,
+            'label-color': #75787B,
+            'counter-color': #75787B,
+            'outline-color': '',
+          ),
           'util': (
             'overlay': rgba(0, 0, 0, 0.45),
           ),
diff --git a/packages/theme/src/sass/tokens.scss b/packages/theme/src/sass/tokens.scss
index 07d97ab1..25712ade 100644
--- a/packages/theme/src/sass/tokens.scss
+++ b/packages/theme/src/sass/tokens.scss
@@ -59,6 +59,14 @@ $tokens: (
           'text-color-active': null,
         ),
       ),
+      'textfield': (
+        'background-color': null,
+        'background-color-hover': null,
+        'border-color': null,
+        'label-color': null,
+        'counter-color': null,
+        'outline-color': null,
+      ),
       'util': (
         'overlay': null,
       ),
diff --git a/packages/ui/src/components/TextField/STextField.vue b/packages/ui/src/components/TextField/STextField.vue
index b76ee814..484587c1 100644
--- a/packages/ui/src/components/TextField/STextField.vue
+++ b/packages/ui/src/components/TextField/STextField.vue
@@ -153,9 +153,8 @@ function onInput(e: Event) {
 
 const isValueEmpty = computed(() => !model.value)
 const isFocused = ref(false)
-const labelTypographyClass = computed(() =>
-  !(props.filledState || isFocused.value) && isValueEmpty.value ? 'sora-tpg-p3' : 'sora-tpg-p4',
-)
+const labelTypographyClass = computed(() => 'sora-tpg-p3');
+
 
 const inputRef = ref<MaybeElementRef>(null)
 
@@ -284,6 +283,7 @@ const shouldShowValidationsList = computed(
       @mousedown="handleInputWrapperMouseDown"
     >
       <label
+        v-if="isValueEmpty"
         :for="id"
         :class="labelTypographyClass"
       >
@@ -382,55 +382,88 @@ const shouldShowValidationsList = computed(
 </template>
 
 <style lang="scss">
-@use '@/theme';
+@use 'sass:meta';
+@use '@/theme_neumorphism' as theme_neumorphism;
+@use '@/theme' as theme;
+@import '../../themes.scss';
+
 
 $height: 56px;
-$input-padding: 24px 16px 6px 16px;
+$input-padding: 15px;
 $label-top-primary: 16px;
 $label-top-secondary: 6px;
 $message-icon-alignment-fix: -1px;
 
-$theme-bg: theme.token-as-var('ref.color.common.color-base-content-tertiary');
-$theme-bg-hover: theme.token-as-var('ref.color.common.color-base-content-secondary');
-$theme-border-primary: theme.token-as-var('ref.color.common.color-utility-surface');
-$theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
+@mixin apply-theme-text-field($theme) {
+  &__input-wrapper {
+    background-color: theme-token($theme,'sys.color.textfield.background-color');
+    box-shadow: theme-token($theme,'ref.color.shadow.shadow-element');
+    &:hover:not(:focus-within) {
+      background-color: theme-token($theme,'sys.color.textfield.background-color-hover');
+    }
+    &:focus-within {
+      border-color: theme-token($theme,'sys.color.textfield.border-color');
+      background-color: theme-token($theme,'sys.color.textfield.background-color');
+      outline: 1px solid theme-token($theme,'sys.color.textfield.outline-color');
+    }
+    label {
+      color: theme-token($theme,'sys.color.textfield.label-color');
+    }
+  }
+  &__counter {
+    color: theme-token($theme,'sys.color.textfield.counter-color');
+  }
+  &__eye,
+  &__append svg {
+    color: theme-token($theme,'sys.color.content-secondary');
+    fill: theme-token($theme,'sys.color.content-secondary');
+  }
+
+}
+
+@mixin apply-theme($theme-name, $theme-variable) {
+  .s-text-field {
+    @include apply-theme-text-field($theme: $theme-variable);
+  }
+}
+
+@each $theme-name, $theme-variable in $themes {
+  [theme="#{$theme-name}"] {
+    @include apply-theme($theme-name, $theme-variable);
+  }
+}
 
 .s-text-field {
   $root: &;
 
   &_disabled &__input-wrapper {
     @apply pointer-events-none opacity-75;
-    // todo
   }
 
+  &_disabled:hover {
+    cursor: not-allowed;
+  }
   &:not(&_empty),
   &_filled-state,
   &:focus-within {
     label {
-      transform: translateY(#{$label-top-secondary});
-      // @apply s-ty-p4;
+      transform: translateY(#{$label-top-primary});
     }
   }
 
   &__input-wrapper {
-    background: $theme-bg;
     @apply rounded border border-transparent;
     @apply relative flex;
     @apply transition-all;
 
     min-height: $height;
 
-    &:hover:not(:focus-within) {
-      background: $theme-bg-hover;
-    }
-
     &:focus-within {
-      border-color: $theme-border-primary;
       @apply bg-transparent;
     }
 
     label {
-      color: $theme-content-tertiary;
+
       @apply pointer-events-none;
       @apply absolute top-0 left-4;
       @apply transition-all;
@@ -458,10 +491,6 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
     @apply flex items-center space-x-4 pr-4;
   }
 
-  &__counter {
-    color: $theme-content-tertiary;
-  }
-
   @each $status in 'success', 'warning', 'error' {
     $col: theme.token-as-var('sys.color.status.#{$status}');
     $bg: theme.token-as-var('sys.color.status.#{$status}-background');
@@ -525,6 +554,7 @@ $theme-content-tertiary: theme.token-as-var('sys.color.content-tertiary');
   &__eye {
     cursor: pointer;
     position: relative;
+    
 
     // icon size
     // approximately, not strict by design system