diff --git a/src/components/Form/ErrorMessage.tsx b/src/components/Form/ErrorMessage.tsx
index 9d08436..739b891 100644
--- a/src/components/Form/ErrorMessage.tsx
+++ b/src/components/Form/ErrorMessage.tsx
@@ -4,15 +4,37 @@ import { CircleAlertIcon } from 'lucide-react';
 
 import { cn } from '@/utils';
 
-export const ErrorMessage: React.FC<{ className?: string; error?: null | string[] }> = ({ className, error }) => {
-  return error ? (
+export const ErrorMessage: React.FC<{ className?: string; error?: null | string[]; hideIconOnWrap?: boolean }> = ({
+  className,
+  error,
+  hideIconOnWrap
+}) => {
+  if (!error) {
+    return null;
+  }
+  return (
     <div className="flex flex-col gap-1.5">
       {error.map((message) => (
-        <div className={cn('text-destructive flex w-full items-center text-sm font-medium', className)} key={message}>
-          <CircleAlertIcon className="mr-1" style={{ strokeWidth: '2px' }} />
-          <span data-testid="error-message-text">{message}</span>
+        <div
+          className={cn(
+            'text-destructive flex w-full items-center text-sm font-medium',
+            hideIconOnWrap && 'flex-wrap',
+            className
+          )}
+          key={message}
+        >
+          <div className="@container/alert mr-1.5 flex min-w-4 shrink-0 flex-grow-[1] items-center justify-start">
+            <div className="h-0 w-0" />
+            <CircleAlertIcon
+              className="@min-[24px]/alert:hidden"
+              style={{ height: '16px', strokeWidth: '2px', width: '16px' }}
+            />
+          </div>
+          <span className="flex-grow-[999]" data-testid="error-message-text">
+            {message}
+          </span>
         </div>
-      )) ?? null}
+      ))}
     </div>
-  ) : null;
+  );
 };
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 2b77e38..ba24147 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -236,7 +236,11 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
           values={values}
         />
       )}
-      {Boolean(rootErrors.length) && <ErrorMessage className="-mt-3" error={rootErrors} />}
+      {Boolean(rootErrors.length) && (
+        <div className="-mt-3">
+          <ErrorMessage hideIconOnWrap error={rootErrors} />
+        </div>
+      )}
       {fieldsFooter}
       <div className="flex w-full gap-3">
         {additionalButtons?.left}