diff --git a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
index 98d6b143d..3c0a336ce 100644
--- a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
         Search by label
       </label>
       <div
-        class="MuiFormControl-root MuiTextField-root css-1rjsjzb-MuiFormControl-root-MuiTextField-root"
+        class="MuiFormControl-root MuiTextField-root css-1gkuvuu-MuiFormControl-root-MuiTextField-root"
       >
         <div
           class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root"
diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts
index c71f40a1d..4c6b9b2da 100644
--- a/packages/components/src/core/InputSearch/style.ts
+++ b/packages/components/src/core/InputSearch/style.ts
@@ -33,7 +33,7 @@ const rounded = (props: InputSearchExtraProps): SerializedStyles => {
   const borders = getBorders(props);
 
   return css`
-    .${outlinedInputClasses.notchedOutline} {
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
       border-radius: ${corners?.l}px;
       border: ${borders?.gray[400]};
     }
@@ -42,21 +42,89 @@ const rounded = (props: InputSearchExtraProps): SerializedStyles => {
 
 const error = (props: InputSearchExtraProps): SerializedStyles => {
   const borders = getBorders(props);
+  const colors = getColors(props);
 
   return css`
-    .${outlinedInputClasses.notchedOutline} {
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
+      border: ${borders?.error[400]};
+    }
+
+    .${outlinedInputClasses.root}:hover
+      .${outlinedInputClasses.notchedOutline} {
       border: ${borders?.error[400]};
     }
+
+    .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
+      .${outlinedInputClasses.notchedOutline} {
+        border: ${borders?.error[400]};
+      }
+
+      .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
+        cursor: default;
+        svg {
+          color: ${colors?.gray[500]};
+        }
+      }
+    }
   `;
 };
 
 const warning = (props: InputSearchExtraProps): SerializedStyles => {
   const borders = getBorders(props);
+  const colors = getColors(props);
 
   return css`
-    .${outlinedInputClasses.notchedOutline} {
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
+      border: ${borders?.warning[400]};
+    }
+
+    .${outlinedInputClasses.root}:hover
+      .${outlinedInputClasses.notchedOutline} {
       border: ${borders?.warning[400]};
     }
+
+    .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
+      .${outlinedInputClasses.notchedOutline} {
+        border: ${borders?.warning[400]};
+      }
+
+      .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
+        cursor: default;
+        svg {
+          color: ${colors?.gray[500]};
+        }
+      }
+    }
+  `;
+};
+
+const userInput = (props: InputSearchExtraProps): SerializedStyles => {
+  const { intent } = props;
+  const colors = getColors(props);
+  const borders = getBorders(props);
+
+  const border =
+    intent === "error"
+      ? borders?.error[400]
+      : intent === "warning"
+      ? borders?.warning[400]
+      : borders?.primary[400];
+
+  const color = intent === "default" ? colors?.primary[400] : colors?.gray[500];
+
+  return css`
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
+      border: ${border};
+    }
+
+    .${outlinedInputClasses.root}:hover
+      .${outlinedInputClasses.notchedOutline} {
+      border: ${border};
+    }
+
+    .${inputAdornmentClasses.root} svg {
+      color: ${color};
+    }
   `;
 };
 
@@ -65,18 +133,23 @@ const disabledStyled = (props: InputSearchExtraProps): SerializedStyles => {
   const colors = getColors(props);
 
   return css`
-    .Mui-disabled {
+    .${outlinedInputClasses.disabled} {
       .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.gray[300]};
       }
 
-      .MuiInputAdornment-root svg {
+      .${inputAdornmentClasses.root} svg {
         color: ${colors?.gray[300]};
       }
 
       &:hover .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.gray[300]};
       }
+
+      &::placeholder {
+        color: ${colors?.gray[300]};
+        opacity: 1;
+      }
     }
   `;
 };
@@ -86,6 +159,7 @@ export const StyledLabel = styled("label")`
   ${(props) => {
     const typography = getTypography(props);
     const spacings = getSpaces(props);
+
     return `
       font-family: ${typography?.fontFamily};
       margin-bottom: ${spacings?.xxs}px;
@@ -107,7 +181,7 @@ export const StyledSearchBase = styled(TextField, {
   },
 })`
   ${(props: InputSearchExtraProps) => {
-    const { intent, disabled, sdsStyle, value } = props;
+    const { intent, disabled, sdsStyle, sdsStage, value } = props;
     const spacings = getSpaces(props);
     const borders = getBorders(props);
     const colors = getColors(props);
@@ -152,7 +226,7 @@ export const StyledSearchBase = styled(TextField, {
         border: ${borders?.gray[500]};
       }
 
-      .${outlinedInputClasses.root}.Mui-focused {
+      .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
         .${outlinedInputClasses.notchedOutline} {
           border: ${borders?.primary[400]};
         }
@@ -169,6 +243,7 @@ export const StyledSearchBase = styled(TextField, {
       ${intent === "error" && error(props)}
       ${intent === "warning" && warning(props)}
       ${disabled && disabledStyled(props)}
+      ${sdsStage === "userInput" && userInput(props)}
     `;
   }}
 `;
diff --git a/packages/components/src/core/InputText/index.stories.tsx b/packages/components/src/core/InputText/index.stories.tsx
index ec071216c..6e31e732d 100644
--- a/packages/components/src/core/InputText/index.stories.tsx
+++ b/packages/components/src/core/InputText/index.stories.tsx
@@ -4,18 +4,28 @@ import React from "react";
 import RawInputText from "./index";
 
 const InputText = (props: Args): JSX.Element => {
-  const { id, intent, disabled, hideLabel, placeholder, label, sdsType } =
-    props;
+  const {
+    id,
+    intent,
+    disabled,
+    hideLabel,
+    placeholder,
+    label,
+    sdsType,
+    sdsStage,
+  } = props;
   return (
     <RawInputText
       id={id}
       sdsType={sdsType}
+      sdsStage={sdsStage}
       label={label}
       placeholder={placeholder}
       intent={intent}
       hideLabel={hideLabel}
       disabled={disabled}
       name="input-text-name"
+      autoComplete="off"
     />
   );
 };
diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts
index 0892765b7..49e03504a 100644
--- a/packages/components/src/core/InputText/style.ts
+++ b/packages/components/src/core/InputText/style.ts
@@ -1,10 +1,16 @@
 import { css, SerializedStyles } from "@emotion/react";
-import { TextField } from "@mui/material";
+import {
+  buttonBaseClasses,
+  inputAdornmentClasses,
+  outlinedInputClasses,
+  TextField,
+} from "@mui/material";
 import { styled } from "@mui/material/styles";
 import {
   CommonThemeProps,
   fontBodyS,
   getBorders,
+  getColors,
   getCorners,
   getSpaces,
   getTypography,
@@ -22,45 +28,94 @@ const sdsPropNames = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
 
 const error = (props: InputTextExtraProps): SerializedStyles => {
   const borders = getBorders(props);
+  const colors = getColors(props);
 
   return css`
-    .MuiOutlinedInput-notchedOutline {
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
       border: ${borders?.error[400]};
     }
+
+    .${outlinedInputClasses.root}:hover
+      .${outlinedInputClasses.notchedOutline} {
+      border: ${borders?.error[400]};
+    }
+
+    .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
+      .${outlinedInputClasses.notchedOutline} {
+        border: ${borders?.error[400]};
+      }
+
+      .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
+        cursor: default;
+        svg {
+          color: ${colors?.gray[500]};
+        }
+      }
+    }
   `;
 };
 
 const warning = (props: InputTextExtraProps): SerializedStyles => {
   const borders = getBorders(props);
+  const colors = getColors(props);
 
   return css`
-    .MuiOutlinedInput-notchedOutline {
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
       border: ${borders?.warning[400]};
     }
+
+    .${outlinedInputClasses.root}:hover
+      .${outlinedInputClasses.notchedOutline} {
+      border: ${borders?.warning[400]};
+    }
+
+    .${outlinedInputClasses.root}.${outlinedInputClasses.focused} {
+      .${outlinedInputClasses.notchedOutline} {
+        border: ${borders?.warning[400]};
+      }
+
+      .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type {
+        cursor: default;
+        svg {
+          color: ${colors?.gray[500]};
+        }
+      }
+    }
   `;
 };
 
 const disabledStyled = (props: InputTextExtraProps): SerializedStyles => {
   const borders = getBorders(props);
+  const colors = getColors(props);
 
   return css`
-    .Mui-disabled {
-      .MuiOutlinedInput-notchedOutline {
+    .${outlinedInputClasses.disabled} {
+      .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.gray[300]};
       }
-      &:hover .MuiOutlinedInput-notchedOutline {
+
+      &:hover .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.gray[300]};
       }
+
+      &::placeholder {
+        color: ${colors?.gray[300]};
+        opacity: 1;
+      }
     }
   `;
 };
 
 const textArea = (props: InputTextExtraProps): SerializedStyles => {
   const spacings = getSpaces(props);
+  console.log(outlinedInputClasses.multiline);
+  console.log(outlinedInputClasses.inputMultiline);
+
   return css`
-    .MuiInputBase-multiline {
+    .${outlinedInputClasses.multiline} {
       padding: ${spacings?.xxs}px;
-      > .MuiInputBase-inputMultiline {
+
+      > .${outlinedInputClasses.inputMultiline} {
         padding: ${spacings?.xxs}px ${spacings?.m}px ${spacings?.m}px;
         resize: both;
       }
@@ -68,6 +123,29 @@ const textArea = (props: InputTextExtraProps): SerializedStyles => {
   `;
 };
 
+const userInput = (props: InputTextExtraProps): SerializedStyles => {
+  const { intent } = props;
+  const borders = getBorders(props);
+
+  const border =
+    intent === "error"
+      ? borders?.error[400]
+      : intent === "warning"
+      ? borders?.warning[400]
+      : borders?.primary[400];
+
+  return css`
+    .${outlinedInputClasses.root} .${outlinedInputClasses.notchedOutline} {
+      border: ${border};
+    }
+
+    .${outlinedInputClasses.root}:hover
+      .${outlinedInputClasses.notchedOutline} {
+      border: ${border};
+    }
+  `;
+};
+
 export const StyledLabel = styled("label")`
   display: block;
   ${fontBodyS}
@@ -89,7 +167,8 @@ export const StyledInputBase = styled(TextField, {
   },
 })`
   ${(props: InputTextExtraProps) => {
-    const { intent, sdsType, disabled } = props;
+    const { intent, sdsType, sdsStage, disabled } = props;
+
     const spacings = getSpaces(props);
     const borders = getBorders(props);
     const corners = getCorners(props);
@@ -100,23 +179,25 @@ export const StyledInputBase = styled(TextField, {
       min-width: 160px;
       display: block;
 
-      .MuiInputBase-inputSizeSmall {
+      .${outlinedInputClasses.inputSizeSmall} {
         padding: ${spacings?.xs}px ${spacings?.l}px;
         height: 34px;
         box-sizing: border-box;
         background-color: #fff;
 
-        .MuiOutlinedInput-notchedOutline {
+        .${outlinedInputClasses.notchedOutline} {
           border-radius: ${corners?.m}px;
           border: ${borders?.gray[400]};
         }
       }
 
-      .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+      .${outlinedInputClasses.root}:hover
+        .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.gray[500]};
       }
 
-      .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+      .${outlinedInputClasses.root}.${outlinedInputClasses.focused}
+        .${outlinedInputClasses.notchedOutline} {
         border: ${borders?.primary[400]};
       }
 
@@ -124,6 +205,7 @@ export const StyledInputBase = styled(TextField, {
       ${intent === "error" && error(props)}
       ${intent === "warning" && warning(props)}
       ${disabled && disabledStyled(props)}
+      ${sdsStage === "userInput" && userInput(props)}
     `;
   }}
 `;