diff --git a/src/blocks/textInput/TextInput.constants.tsx b/src/blocks/textInput/TextInput.constants.tsx
deleted file mode 100644
index 116b86331c..0000000000
--- a/src/blocks/textInput/TextInput.constants.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { TextInputStyles } from './TextInput.types';
-
-const backgroundColor: TextInputStyles = {
-  error: { light: 'red-100', dark: 'gray-800' },
-  success: { light: 'green-100', dark: 'gray-800' },
-  disabled: { light: 'gray-200', dark: 'gray-800' },
-  default: { light: 'white', dark: 'gray-800' },
-};
-
-const borderColor: TextInputStyles = {
-  error: { light: 'red-400', dark: 'red-500' },
-  success: { light: 'green-500', dark: 'green-400' },
-  disabled: { light: 'gray-300', dark: 'gray-900' },
-  default: { light: 'gray-200', dark: 'gray-800' },
-};
-
-const textColor: TextInputStyles = {
-  error: { light: 'gray-1000', dark: 'gray-100' },
-  success: { light: 'gray-1000', dark: 'gray-100' },
-  disabled: { light: 'gray-400', dark: 'gray-700' },
-  default: { light: 'gray-1000', dark: 'gray-100' },
-};
-
-const descriptionColor: TextInputStyles = {
-  error: { light: 'gray-1000', dark: 'gray-100' },
-  success: { light: 'gray-1000', dark: 'gray-100' },
-  disabled: { light: 'gray-400', dark: 'gray-600' },
-  default: { light: 'gray-400', dark: 'gray-600' },
-};
-const iconColor: TextInputStyles = {
-  error: { light: 'red-700', dark: 'red-500' },
-  success: { light: 'green-600', dark: 'green-400' },
-  disabled: { light: 'gray-400', dark: 'gray-700' },
-  default: { light: 'gray-300', dark: 'gray-600' },
-};
-
-export const textInputColor = {
-  backgroundColor: backgroundColor,
-  borderColor: borderColor,
-  textColor: textColor,
-  iconColor: iconColor,
-  descriptionColor: descriptionColor,
-};
diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx
index 33a259eb44..12ddd7e16d 100644
--- a/src/blocks/textInput/TextInput.tsx
+++ b/src/blocks/textInput/TextInput.tsx
@@ -1,187 +1,201 @@
-import { ReactNode, forwardRef } from 'react';
-
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
-
-import { ModeProp } from '../Blocks.types';
-
-import { getTextInputState, getTextInputStateStyles } from './TextInput.utils';
-import { useBlocksTheme } from 'blocks/Blocks.hooks';
-import { Asterisk, CrossFilled } from 'blocks/icons';
-import { Text } from 'blocks/text';
+import { Box } from 'blocks';
+import { Asterisk, CrossFilled } from '../icons';
+import { Text, textVariants } from '../text';
+import React, { ReactNode, forwardRef } from 'react';
+import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
 
 export type TextInputProps = {
-  /* Additional prop from styled components to apply custom css to input field */
   css?: FlattenSimpleInterpolation;
-  /* Render an icon before input field contents */
+  description?: string;
+  disabled?: boolean;
   icon?: ReactNode;
-  /* Handles the change in input value */
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  /* Input value */
-  value?: string;
-  /* Input type value */
+  error?: boolean;
   type?: 'text' | 'password';
-  /* Handles the clearing the entire input value */
-  onClear?: () => void;
-  /* Label for the input field */
+  errorMessage?: string;
   label?: string;
-  /* TotalLength of input value */
-  totalCount?: number;
-  /* Placeholder for input field */
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onClear?: () => void;
   placeholder?: string;
-  /* Sets the input field to be compulsory */
   required?: boolean;
-  /* Sets the input field to error state */
-  error?: boolean;
-  /* Sets the input field to success state */
   success?: boolean;
-  /* Sets button as disabled */
-  disabled?: boolean;
-  /* Description shown below the input field */
-  description?: string;
-  /* Error message shown below the input field */
-  errorMessage?: string;
+  totalCount?: number;
+  value: string;
 };
 
-const StyledTextInput = styled.div<TextInputProps & ModeProp>`
-  /* Common Input field CSS */
+const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  width: inherit;
-  gap: var(--s2);
-  .label-count {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .label {
-    display: flex;
-    gap: var(--s1);
-  }
-  .input-container {
-    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
-    display: flex;
-    align-items: center;
-    font-family: var(--font-family);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    white-space: nowrap;
-    padding: var(--s0) var(--s3);
-    border-radius: var(--r3);
-
-    /* Common icon css added through CSS class */
-    [role='img'] {
-      width: 18px;
-      height: 18px;
-    }
-
-    & input {
-      flex: 1;
-      border: none;
-      background-color: transparent;
-      padding: var(--s3) var(--s0);
-      margin-left: var(--s1);
-      &:focus {
-        outline: none;
+  flex: 1 0 0;
+  gap: var(--spacing-xxs, 8px);
+
+  /* Custom CSS applied via styled component css prop */
+  ${(props) => props.css || ''};
+`;
+
+const StyledTextInput = styled.div<{
+  error?: boolean;
+  success?: boolean;
+  disabled?: boolean;
+}>`
+  ${({ theme, success, error, disabled }) => {
+    const colors = theme?.blocksTheme?.colors;
+    const defaultState = error ? 'danger' : success ? 'success' : disabled ? 'disabled' : 'default';
+    const focusState = error ? 'danger' : success ? 'success' : 'focus';
+    return css`
+      align-self: stretch;
+      justify-content: space-between;
+      align-items: flex-start;
+      border-radius: var(--radius-xs, 12px);
+      border: 1.5px solid
+        var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]});
+      background: var(
+        --components-inputs-background-${defaultState},
+        ${colors[`components-inputs-background-${defaultState}`]}
+      );
+
+      display: flex;
+
+      font-family: var(--font-family);
+      font-size: ${textVariants['bs-regular'].fontSize};
+      font-style: ${textVariants['bs-regular'].fontStyle};
+      font-weight: ${textVariants['bs-regular'].fontWeight};
+      line-height: ${textVariants['bs-regular'].lineHeight};
+
+      gap: var(--spacing-xxs, 8px);
+
+      padding: var(--spacing-xs, 12px);
+      [role='img'] {
+        width: 24px;
+        height: 24px;
+
+        color: var(--components-inputs-icon-${defaultState}, ${colors[`components-inputs-icon-${defaultState}`]});
+      }
+      & input {
+        color: var(--components-inputs-text-${defaultState}, ${colors[`components-inputs-text-${defaultState}`]});
+
+        width: 100%;
+        ::placeholder {
+          color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']});
+        }
+        border: none;
+        background: transparent;
+        &:focus,
+        :disabled {
+          outline: none;
+        }
       }
+
       &:hover {
+        border: 1.5px solid var(--components-inputs-stroke-hover, ${colors['components-inputs-stroke-hover']});
+      }
+
+      &:focus-within {
+        border: 1.5px solid
+          var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]});
         outline: none;
       }
-      :disabled {
-        background-color: transparent;
+
+      &:disabled {
+        border: 1.5px solid var(--components-inputs-stroke-default, ${colors['components-inputs-stroke-default']});
+        background: var(--components-inputs-background-disabled, ${colors['components-inputs-background-disabled']});
+        cursor: not-allowed;
+        color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']});
       }
-    }
-  }
-  /* TextInput type CSS styles */
-  ${({ mode, error, disabled, success }) =>
-    getTextInputStateStyles({
-      mode,
-      state: getTextInputState({ error: !!error, disabled: !!disabled, success: !!success }),
-    })}
+    `;
+  }}
+`;
 
-  /* Custom CSS applied via styled component css prop */
-  ${(props) => props.css || ''}
+const LabelContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
 `;
 
-const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+const LabelTextContainer = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xxxs, 4px);
+`;
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
+      css,
+      description,
       disabled,
       error,
-      success,
-      required,
+      errorMessage,
       label,
-      totalCount,
+      onChange,
+      onClear,
       placeholder,
-      icon,
+      required,
       type = 'text',
-      onChange,
+      icon,
+      success,
+      totalCount,
       value,
-      onClear,
-      description,
-      errorMessage,
-      ...props
     },
     ref
   ) => {
-    const { mode } = useBlocksTheme();
     return (
-      <StyledTextInput
-        disabled={disabled}
-        error={error}
-        success={success}
-        required={required}
-        role="input"
-        mode={mode}
-        ref={ref}
-        {...props}
-      >
-        {(label || totalCount) && (
-          <div className="label-count">
-            {label && (
-              <div className="label">
-                <Text
-                  variant="h6-semibold"
-                  color={{ light: disabled ? 'gray-400' : 'gray-1000', dark: disabled ? 'gray-700' : 'gray-100' }}
-                >
-                  {label}
-                </Text>
-                {!!required && (
-                  <Asterisk
-                    color={{ light: disabled ? 'gray-400' : 'gray-500', dark: disabled ? 'gray-700' : 'gray-500' }}
-                    size={4.6}
-                  />
-                )}
-              </div>
-            )}
-
+      <Container css={css}>
+        {label && (
+          <LabelContainer>
+            <Text
+              variant="h6-semibold"
+              color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-default'}
+            >
+              <LabelTextContainer>
+                {label}
+                {required && <Asterisk size={4.6} />}
+              </LabelTextContainer>
+            </Text>
             {totalCount && (
               <Text
                 variant="c-regular"
-                color={{ light: 'gray-600', dark: 'gray-500' }}
-              >
-                {`${value?.length}/${totalCount}`}
-              </Text>
+                color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-secondary'}
+              >{`${value?.length || 0} / ${totalCount}`}</Text>
             )}
-          </div>
+          </LabelContainer>
         )}
-        <div className="input-container">
-          {icon}
-          <input
-            type={type}
-            disabled={!!disabled}
-            {...(disabled ? { 'aria-disabled': true } : {})}
-            placeholder={placeholder}
-            onChange={onChange}
-            value={value}
-          />
+        <StyledTextInput
+          disabled={disabled}
+          error={error}
+          onChange={onChange}
+          ref={ref}
+          success={success}
+        >
+          <Box
+            display="flex"
+            gap="spacing-xxs"
+            width="100%"
+          >
+            {icon}
+            <input
+              type={type}
+              disabled={!!disabled}
+              {...(disabled ? { 'aria-disabled': true } : {})}
+              placeholder={placeholder}
+              required={required}
+              onChange={onChange}
+              value={value}
+            />
+          </Box>
           {onClear && <CrossFilled onClick={() => onClear?.()} />}
-        </div>
+        </StyledTextInput>
         {description && (
           <Text
             variant="c-regular"
-            color={{ light: 'gray-600', dark: 'gray-600' }}
+            color={
+              success || error
+                ? 'components-inputs-text-default'
+                : disabled
+                ? 'components-inputs-text-disabled'
+                : 'components-inputs-text-placeholder'
+            }
           >
             {description}
           </Text>
@@ -189,16 +203,12 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         {errorMessage && (
           <Text
             variant="c-regular"
-            color={{ light: 'red-700', dark: 'red-700' }}
+            color="components-inputs-text-danger"
           >
             {errorMessage}
           </Text>
         )}
-      </StyledTextInput>
+      </Container>
     );
   }
 );
-
-TextInput.displayName = 'TextInput';
-
-export { TextInput };
diff --git a/src/blocks/textInput/TextInput.types.tsx b/src/blocks/textInput/TextInput.types.tsx
deleted file mode 100644
index 5876495617..0000000000
--- a/src/blocks/textInput/TextInput.types.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import { ThemeModeColors } from 'blocks/Blocks.types';
-
-export type TextInputStates = 'error' | 'disabled' | 'default' | 'success';
-export type TextInputStyles = Record<TextInputStates, ThemeModeColors>;
diff --git a/src/blocks/textInput/TextInput.utils.ts b/src/blocks/textInput/TextInput.utils.ts
deleted file mode 100644
index 3416ece84d..0000000000
--- a/src/blocks/textInput/TextInput.utils.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ThemeMode } from 'blocks/Blocks.types';
-import { getBlocksColor } from 'blocks/Blocks.utils';
-
-import { textInputColor } from './TextInput.constants';
-import { TextInputStates } from './TextInput.types';
-
-export const getTextInputState = ({
-  error,
-  disabled,
-  success,
-}: {
-  error: boolean;
-  disabled: boolean;
-  success: boolean;
-}): TextInputStates => {
-  if (error) {
-    return 'error';
-  } else if (disabled) {
-    return 'disabled';
-  } else if (success) {
-    return 'success';
-  }
-  return 'default';
-};
-
-export const getTextInputStateStyles = ({ mode, state }: { mode: ThemeMode; state: TextInputStates }) => {
-  /*check all dark mode , label ,count and icon and placeholder colors
-  add success state
-  */
-  return `
-  
-  .input-container {
-     background-color:   ${getBlocksColor(mode, textInputColor.backgroundColor[state])};
- 
-     border: 1.5px solid ${getBlocksColor(mode, textInputColor.borderColor[state])};
-
-
-     &:hover {
-          border: 1.5px solid ${getBlocksColor(mode, {
-            light: 'gray-300',
-            dark: 'gray-700',
-          })};
-        };
-   
-     &:focus-within {
-         border: 1.5px solid ${getBlocksColor(
-           mode,
-           state === 'error' ? textInputColor.borderColor.error : { light: 'pink-300', dark: 'pink-300' }
-         )};
-        };
-    
-    [role='img'] {
-         color: ${getBlocksColor(mode, textInputColor.iconColor[state])};
-        };
-    
-    & input{
-         color: ${getBlocksColor(mode, textInputColor.textColor[state])};
-         ::placeholder {
-           color: ${getBlocksColor(mode, {
-             light: 'gray-400',
-             dark: 'gray-600',
-           })};
-
-        };
-  }
-    
-}`;
-};
diff --git a/src/blocks/textarea/TextArea.tsx b/src/blocks/textarea/TextArea.tsx
index 501ef1079d..0bf1bf6197 100644
--- a/src/blocks/textarea/TextArea.tsx
+++ b/src/blocks/textarea/TextArea.tsx
@@ -51,7 +51,7 @@ const StyledTextArea = styled.textarea<{
         ${colors[`components-inputs-background-${defaultState}`]}
       );
 
-      color: var(--components-inputs-text-default, ${colors['components-inputs-text-default']});
+      color: var(--components-inputs-text-${defaultState}, ${colors[`components-inputs-text-${defaultState}`]});
 
       display: flex;
 
@@ -130,7 +130,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           <LabelContainer>
             <Text
               variant="h6-semibold"
-              color="components-inputs-text-default"
+              color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-default'}
             >
               <LabelTextContainer>
                 {label}
@@ -140,7 +140,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
             {totalCount && (
               <Text
                 variant="c-regular"
-                color="components-inputs-text-secondary"
+                color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-secondary'}
               >{`${value?.length || 0} / ${totalCount}`}</Text>
             )}
           </LabelContainer>
diff --git a/src/modules/pointsVault/components/PointsVaultLogin.tsx b/src/modules/pointsVault/components/PointsVaultLogin.tsx
index fd217d7717..ceca2254b1 100644
--- a/src/modules/pointsVault/components/PointsVaultLogin.tsx
+++ b/src/modules/pointsVault/components/PointsVaultLogin.tsx
@@ -110,25 +110,28 @@ const PointsVaultLogin: FC<PointsVaultLoginProps> = ({ handleSetActiveView }) =>
               gap="s3"
               width="100%"
             >
-              <TextInput
-                placeholder="User"
-                value={formik.values.username}
-                disabled={isPending}
-                onChange={formik.handleChange('username')}
-                error={formik.touched.username && Boolean(formik.errors.username)}
-                errorMessage={formik.touched.username ? formik.errors.username : ''}
-              />
-
-              <TextInput
-                type="password"
-                placeholder="Password"
-                disabled={isPending}
-                value={formik.values.password}
-                onChange={formik.handleChange('password')}
-                error={formik.touched.password && Boolean(formik.errors.password)}
-                errorMessage={formik.touched.password ? formik.errors.password : ''}
-              />
+              <Box width="100%">
+                <TextInput
+                  placeholder="User"
+                  value={formik.values.username}
+                  disabled={isPending}
+                  onChange={formik.handleChange('username')}
+                  error={formik.touched.username && Boolean(formik.errors.username)}
+                  errorMessage={formik.touched.username ? formik.errors.username : ''}
+                />
+              </Box>
 
+              <Box width="100%">
+                <TextInput
+                  type="password"
+                  placeholder="Password"
+                  disabled={isPending}
+                  value={formik.values.password}
+                  onChange={formik.handleChange('password')}
+                  error={formik.touched.password && Boolean(formik.errors.password)}
+                  errorMessage={formik.touched.password ? formik.errors.password : ''}
+                />
+              </Box>
               <Box margin="s6 s0 s0 s0">
                 <Button disabled={isPending}>{isPending ? 'Authenticating' : 'Login'}</Button>
               </Box>