diff --git a/src/components/shared/EditRoleModal.tsx b/src/components/shared/EditRoleModal.tsx
index d71517b..42bb15b 100644
--- a/src/components/shared/EditRoleModal.tsx
+++ b/src/components/shared/EditRoleModal.tsx
@@ -51,6 +51,8 @@ export const EditRoleModal = ({
     setValue,
     watch,
     reset,
+    setError,
+    clearErrors,
     formState: { errors },
   } = useForm<EditRoleFormData>({
     resolver: zodResolver(editRoleSchema),
@@ -65,6 +67,7 @@ export const EditRoleModal = ({
         try {
           setIsLoadingRole(true);
           setLoadError(null);
+          clearErrors();
           const role = await onLoadRole(roleId);
           reset({
             name: role.name,
@@ -87,12 +90,40 @@ export const EditRoleModal = ({
         scope: 'platform',
       });
       setLoadError(null);
+      clearErrors();
     }
-  }, [isOpen, roleId, onLoadRole, reset]);
+  }, [isOpen, roleId, onLoadRole, reset, clearErrors]);
 
   const handleFormSubmit = async (data: EditRoleFormData): Promise<void> => {
-    if (roleId) {
+    if (!roleId) return;
+    
+    clearErrors();
+    try {
       await onSubmit(roleId, data);
+    } catch (error: any) {
+      // Handle validation errors from API
+      if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
+        const validationErrors = error.response.data.details;
+        validationErrors.forEach((detail: { path: string; message: string }) => {
+          if (detail.path === 'name' || detail.path === 'code' || detail.path === 'description' || detail.path === 'scope') {
+            setError(detail.path as keyof EditRoleFormData, {
+              type: 'server',
+              message: detail.message,
+            });
+          }
+        });
+      } else {
+        // Handle general errors
+        const errorMessage = 
+          error?.response?.data?.error || 
+          error?.response?.data?.message || 
+          error?.message || 
+          'Failed to update role. Please try again.';
+        setError('root', {
+          type: 'server',
+          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to update role. Please try again.',
+        });
+      }
     }
   };
 
@@ -139,6 +170,13 @@ export const EditRoleModal = ({
 
       {!isLoadingRole && (
         <form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
+          {/* General Error Display */}
+          {errors.root && (
+            <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+              <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+            </div>
+          )}
+
           {/* Role Name and Role Code Row */}
           <div className="grid grid-cols-2 gap-5 pb-4">
             <FormField
diff --git a/src/components/shared/NewRoleModal.tsx b/src/components/shared/NewRoleModal.tsx
index 2811ee4..4a91af0 100644
--- a/src/components/shared/NewRoleModal.tsx
+++ b/src/components/shared/NewRoleModal.tsx
@@ -43,6 +43,8 @@ export const NewRoleModal = ({
     setValue,
     watch,
     reset,
+    setError,
+    clearErrors,
     formState: { errors },
   } = useForm<NewRoleFormData>({
     resolver: zodResolver(newRoleSchema),
@@ -62,11 +64,39 @@ export const NewRoleModal = ({
         description: '',
         scope: 'platform',
       });
+      clearErrors();
     }
-  }, [isOpen, reset]);
+  }, [isOpen, reset, clearErrors]);
 
   const handleFormSubmit = async (data: NewRoleFormData): Promise<void> => {
-    await onSubmit(data);
+    clearErrors();
+    try {
+      await onSubmit(data);
+    } catch (error: any) {
+      // Handle validation errors from API
+      if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
+        const validationErrors = error.response.data.details;
+        validationErrors.forEach((detail: { path: string; message: string }) => {
+          if (detail.path === 'name' || detail.path === 'code' || detail.path === 'description' || detail.path === 'scope') {
+            setError(detail.path as keyof NewRoleFormData, {
+              type: 'server',
+              message: detail.message,
+            });
+          }
+        });
+      } else {
+        // Handle general errors
+        const errorMessage = 
+          error?.response?.data?.error || 
+          error?.response?.data?.message || 
+          error?.message || 
+          'Failed to create role. Please try again.';
+        setError('root', {
+          type: 'server',
+          message: typeof errorMessage === 'string' ? errorMessage : 'Failed to create role. Please try again.',
+        });
+      }
+    }
   };
 
   return (
@@ -99,6 +129,13 @@ export const NewRoleModal = ({
       }
     >
       <form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
+        {/* General Error Display */}
+        {errors.root && (
+          <div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
+            <p className="text-sm text-[#ef4444]">{errors.root.message}</p>
+          </div>
+        )}
+
         {/* Role Name and Role Code Row */}
         <div className="grid grid-cols-2 gap-5 pb-4">
           <FormField