diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
new file mode 100644
index 0000000..a638d1a
--- /dev/null
+++ b/src/components/common/Input/Input.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { cva, VariantProps } from 'class-variance-authority'
+
+const InputVariants = cva(
+  'typo-body3 border p-4 rounded-sm outline-none placeholder-assistive text-secondary',
+  {
+    variants: {
+      variant: {
+        default: 'border-assist-line',
+        focused: 'border-secondary',
+        error: 'border-error',
+        disabled: 'border-assist-line bg-disabled-fill cursor-not-allowed text-disabled',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    VariantProps<typeof InputVariants> {
+  error?: boolean
+}
+
+const Input = ({ className, variant, type, disabled, error, ...props }: InputProps) => {
+  const [isFocused, setIsFocused] = React.useState(false)
+
+  let currentState = variant
+  if (disabled) {
+    currentState = 'disabled'
+  } else if (isFocused) {
+    currentState = 'focused'
+  } else if (error) {
+    currentState = 'error'
+  }
+
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(InputVariants({ variant: currentState }), '', className)}
+      disabled={disabled}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/src/components/common/Textarea/Textarea.tsx b/src/components/common/Textarea/Textarea.tsx
new file mode 100644
index 0000000..8e16c07
--- /dev/null
+++ b/src/components/common/Textarea/Textarea.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { cva, VariantProps } from 'class-variance-authority'
+
+const TextareaVariants = cva(
+  'typo-body3 border p-4 rounded-sm outline-none placeholder-assistive text-secondary resize-none custom-scrollbar',
+  {
+    variants: {
+      variant: {
+        default: 'border-assist-line',
+        focused: 'border-secondary',
+        error: 'border-error',
+        disabled: 'border-assist-line bg-disabled-fill cursor-not-allowed text-disabled',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof TextareaVariants> {
+  error?: boolean
+}
+
+const Textarea = ({ className, variant, disabled, error, ...props }: TextareaProps) => {
+  const [isFocused, setIsFocused] = React.useState(false)
+
+  let currentState = variant
+  if (disabled) {
+    currentState = 'disabled'
+  } else if (isFocused) {
+    currentState = 'focused'
+  } else if (error) {
+    currentState = 'error'
+  }
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(TextareaVariants({ variant: currentState }), '', className)}
+      disabled={disabled}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
deleted file mode 100644
index c08b54c..0000000
--- a/src/components/ui/input.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5ff32e3..cf716e2 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -147,6 +147,20 @@
   }
 }
 
+@layer base {
+  ::-webkit-scrollbar {
+    @apply w-[5px];
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-border-alter;
+  }
+}
+
 @theme inline {
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;