diff --git a/apps/web/src/components/discussion/discussion.tsx b/apps/web/src/components/discussion/discussion.tsx
index 7160c12e9..d1eacb75b 100644
--- a/apps/web/src/components/discussion/discussion.tsx
+++ b/apps/web/src/components/discussion/discussion.tsx
@@ -166,7 +166,9 @@ const Discussion: React.FunctionComponent = () => {
                 key={session.user?.id}
                 control={control}
                 rules={{ validate: requiredString }}
-                render={({ field }) => <NameInput {...field} />}
+                render={({ field }) => (
+                  <NameInput error={!!formState.errors.authorName} {...field} />
+                )}
               />
             </div>
             <div className="flex justify-between gap-2">
diff --git a/apps/web/src/components/name-input.tsx b/apps/web/src/components/name-input.tsx
index ad1d84e3a..0bc189efe 100644
--- a/apps/web/src/components/name-input.tsx
+++ b/apps/web/src/components/name-input.tsx
@@ -1,4 +1,4 @@
-import clsx from "clsx";
+import { cn } from "@rallly/ui";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 
@@ -11,12 +11,13 @@ interface NameInputProps
   > {
   value?: string;
   defaultValue?: string;
+  error?: boolean;
 }
 
 const NameInput: React.ForwardRefRenderFunction<
   HTMLInputElement,
   NameInputProps
-> = ({ value, defaultValue, className, ...forwardProps }, ref) => {
+> = ({ value, defaultValue, className, error, ...forwardProps }, ref) => {
   const { t } = useTranslation();
   return (
     <div className="relative flex items-center">
@@ -28,10 +29,11 @@ const NameInput: React.ForwardRefRenderFunction<
       ) : null}
       <input
         ref={ref}
-        className={clsx(
+        className={cn(
           "input",
           {
             "pl-9": value || defaultValue,
+            "ring-destructive ring-1": error,
           },
           className,
         )}