diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index 80a1249..5a50cd4 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -114,6 +114,7 @@ const FormControl = React.forwardRef<
           : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
+      className="relative"
       id={formItemId}
       ref={ref}
       {...props}
@@ -152,7 +153,7 @@ const FormMessage = React.forwardRef<
 
   return (
     <p
-      className={cn('!mt-1 ml-4 text-xs text-bright-red', className)}
+      className={cn('!mt-1 ml-4 text-xs text-bright-red absolute', className)}
       id={formMessageId}
       ref={ref}
       {...props}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 6e1b644..cd7d191 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -20,7 +20,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               type={type}
               {...props}
             />
-            <span className="absolute z-0 top-1/2 peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];">
+            <span className="absolute z-0 top-1/2 pointer-events-none peer-focus:top-[0.375rem] left-4 -translate-y-1/2 peer-focus:translate-y-0 peer-focus:text-[0.6875rem] peer-focus:leading-[0.8125rem] text-base-gray-5 transition-all peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];">
               {placeholder}
             </span>
           </div>