diff --git a/packages/design-system/src/components/TextField/TextField.style.ts b/packages/design-system/src/components/TextField/TextField.style.ts
index ba32c423..d2cd4806 100644
--- a/packages/design-system/src/components/TextField/TextField.style.ts
+++ b/packages/design-system/src/components/TextField/TextField.style.ts
@@ -83,6 +83,9 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
     "&.Mui-focused fieldset": {
       border: `1px solid ${lunit_token.core.focused}`,
     },
+    "&.Mui-error.Mui-focused fieldset": {
+      border: `2px solid ${lunit_token.component.textfield_border_error}`,
+    },
     "&.Mui-disabled": {
       opacity: 0.38,
       "&:hover::before": {
@@ -110,7 +113,6 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       },
     },
     background: lunit_token.component.textfield_bg,
-    overflow: "hidden",
     color: lunit_token.core.text_normal,
     "&:hover": {
       position: "relative",
diff --git a/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx b/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx
index 87e30350..18f26de2 100644
--- a/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx
+++ b/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx
@@ -107,6 +107,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -123,6 +126,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} multiline focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} multiline error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} multiline disabled />
         </TableCell>
diff --git a/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx b/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx
index 0ccd2560..840d696a 100644
--- a/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx
+++ b/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx
@@ -99,6 +99,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -115,6 +118,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled />
         </TableCell>
@@ -137,6 +143,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -156,6 +165,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused leftIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused leftIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled leftIcon={<Bell />} />
         </TableCell>
@@ -173,6 +185,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused rightIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused rightIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled rightIcon={<Bell />} />
         </TableCell>
@@ -195,6 +210,15 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
             rightIcon={<Bell />}
           />
         </TableCell>
+        <TableCell>
+          <TextField
+            {...args}
+            error
+            focused
+            leftIcon={<Bell />}
+            rightIcon={<Bell />}
+          />
+        </TableCell>
         <TableCell>
           <TextField
             {...args}