diff --git a/app/_components/search-form.tsx b/app/_components/search-form.tsx
index e5f07d8..3313687 100644
--- a/app/_components/search-form.tsx
+++ b/app/_components/search-form.tsx
@@ -326,10 +326,8 @@ export const SearchForm: FC<SearchFormProps> = (props) => {
         <Input
           ref={inputRef}
           name="domain"
-          className={cn('w-full !pl-9', {
-            'focus-visible:ring-destructive [&:not(:focus-visible)]:border-destructive':
-              isInvalid,
-          })}
+          className="w-full !pl-9"
+          data-invalid={isInvalid ? '' : undefined}
           type="text"
           required
           autoComplete="off"
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index fc7ced3..71b7dc6 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -17,7 +17,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           'relative block w-full',
           'before:absolute before:inset-px before:rounded-[calc(theme(borderRadius.lg)-1px)] before:bg-white before:shadow',
           'dark:before:hidden',
-          'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500',
+          'after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-inset after:ring-transparent sm:after:focus-within:ring-2 sm:after:focus-within:ring-blue-500 sm:after:focus-within:has-[[data-invalid]]:ring-red-500',
           'has-[[data-disabled]]:opacity-50 before:has-[[data-disabled]]:bg-zinc-950/5 before:has-[[data-disabled]]:shadow-none',
           'before:has-[[data-invalid]]:shadow-red-500/10',
         ])}