diff --git a/resources/js/components/automation-rules/automation-rule-form.tsx b/resources/js/components/automation-rules/automation-rule-form.tsx
index 17b71348..37ad3c03 100644
--- a/resources/js/components/automation-rules/automation-rule-form.tsx
+++ b/resources/js/components/automation-rules/automation-rule-form.tsx
@@ -3,6 +3,7 @@ import {
     update,
 } from '@/actions/App/Http/Controllers/Settings/AutomationRuleController';
 import { RuleBuilder } from '@/components/automation-rules/rule-builder';
+import InputError from '@/components/input-error';
 import { CategoryCombobox } from '@/components/shared/category-combobox';
 import { LabelCombobox } from '@/components/shared/label-combobox';
 import { Button } from '@/components/ui/button';
@@ -170,9 +171,7 @@ export function AutomationRuleForm({
                     required
                 />
 
-                {errors.title && (
-                    <p className="text-sm text-red-500">{errors.title}</p>
-                )}
+                <InputError message={errors.title} />
             </div>
 
             <RuleBuilder
@@ -220,9 +219,7 @@ export function AutomationRuleForm({
                     />
                 </div>
 
-                {actionError && (
-                    <p className="text-sm text-red-500">{actionError}</p>
-                )}
+                <InputError message={actionError} />
             </div>
 
             <div className="flex justify-end gap-2">
diff --git a/resources/js/components/automation-rules/rule-builder.tsx b/resources/js/components/automation-rules/rule-builder.tsx
index d630bcef..38cf861d 100644
--- a/resources/js/components/automation-rules/rule-builder.tsx
+++ b/resources/js/components/automation-rules/rule-builder.tsx
@@ -1,3 +1,4 @@
+import InputError from '@/components/input-error';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
@@ -225,7 +226,7 @@ export function RuleBuilder({ value, onChange, error }: RuleBuilderProps) {
                 {__('Add Group')}
             </Button>
 
-            {error && <p className="text-sm text-red-500">{error}</p>}
+            <InputError message={error} />
         </div>
     );
 }
diff --git a/resources/js/components/categories/create-category-dialog.tsx b/resources/js/components/categories/create-category-dialog.tsx
index d052f953..92468d7d 100644
--- a/resources/js/components/categories/create-category-dialog.tsx
+++ b/resources/js/components/categories/create-category-dialog.tsx
@@ -1,5 +1,6 @@
 import { store } from '@/actions/App/Http/Controllers/Settings/CategoryController';
 import { CategoryCashflowDirectionFields } from '@/components/categories/category-cashflow-direction-fields';
+import InputError from '@/components/input-error';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { CreateButton } from '@/components/ui/create-button';
@@ -74,11 +75,7 @@ export function CreateCategoryDialog({
                                     required
                                 />
 
-                                {errors.name && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.name}
-                                    </p>
-                                )}
+                                <InputError message={errors.name} />
                             </div>
 
                             <div className="space-y-2">
@@ -108,11 +105,7 @@ export function CreateCategoryDialog({
                                         })}
                                     </SelectContent>
                                 </Select>
-                                {errors.icon && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.icon}
-                                    </p>
-                                )}
+                                <InputError message={errors.icon} />
                             </div>
 
                             <div className="space-y-2">
@@ -144,11 +137,7 @@ export function CreateCategoryDialog({
                                         })}
                                     </SelectContent>
                                 </Select>
-                                {errors.color && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.color}
-                                    </p>
-                                )}
+                                <InputError message={errors.color} />
                             </div>
 
                             <div className="space-y-2">
@@ -173,11 +162,7 @@ export function CreateCategoryDialog({
                                         ))}
                                     </SelectContent>
                                 </Select>
-                                {errors.type && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.type}
-                                    </p>
-                                )}
+                                <InputError message={errors.type} />
                             </div>
 
                             <CategoryCashflowDirectionFields
diff --git a/resources/js/components/categories/edit-category-dialog.tsx b/resources/js/components/categories/edit-category-dialog.tsx
index ee09c1f1..ff6688f9 100644
--- a/resources/js/components/categories/edit-category-dialog.tsx
+++ b/resources/js/components/categories/edit-category-dialog.tsx
@@ -1,5 +1,6 @@
 import { update } from '@/actions/App/Http/Controllers/Settings/CategoryController';
 import { CategoryCashflowDirectionFields } from '@/components/categories/category-cashflow-direction-fields';
+import InputError from '@/components/input-error';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -78,11 +79,7 @@ export function EditCategoryDialog({
                                     required
                                 />
 
-                                {errors.name && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.name}
-                                    </p>
-                                )}
+                                <InputError message={errors.name} />
                             </div>
 
                             <div className="space-y-2">
@@ -116,11 +113,7 @@ export function EditCategoryDialog({
                                         })}
                                     </SelectContent>
                                 </Select>
-                                {errors.icon && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.icon}
-                                    </p>
-                                )}
+                                <InputError message={errors.icon} />
                             </div>
 
                             <div className="space-y-2">
@@ -156,11 +149,7 @@ export function EditCategoryDialog({
                                         })}
                                     </SelectContent>
                                 </Select>
-                                {errors.color && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.color}
-                                    </p>
-                                )}
+                                <InputError message={errors.color} />
                             </div>
 
                             <div className="space-y-2">
@@ -186,11 +175,7 @@ export function EditCategoryDialog({
                                         ))}
                                     </SelectContent>
                                 </Select>
-                                {errors.type && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.type}
-                                    </p>
-                                )}
+                                <InputError message={errors.type} />
                             </div>
 
                             <CategoryCashflowDirectionFields
diff --git a/resources/js/components/labels/create-label-dialog.tsx b/resources/js/components/labels/create-label-dialog.tsx
index 2fdbd6b5..ff10a9b7 100644
--- a/resources/js/components/labels/create-label-dialog.tsx
+++ b/resources/js/components/labels/create-label-dialog.tsx
@@ -1,4 +1,5 @@
 import { store } from '@/actions/App/Http/Controllers/Settings/LabelController';
+import InputError from '@/components/input-error';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { CreateButton } from '@/components/ui/create-button';
@@ -58,11 +59,7 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                                     required
                                 />
 
-                                {errors.name && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.name}
-                                    </p>
-                                )}
+                                <InputError message={errors.name} />
                             </div>
 
                             <div className="space-y-2">
@@ -94,11 +91,7 @@ export function CreateLabelDialog({ onSuccess }: { onSuccess?: () => void }) {
                                         })}
                                     </SelectContent>
                                 </Select>
-                                {errors.color && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.color}
-                                    </p>
-                                )}
+                                <InputError message={errors.color} />
                             </div>
 
                             <div className="flex justify-end gap-2">
diff --git a/resources/js/components/labels/edit-label-dialog.tsx b/resources/js/components/labels/edit-label-dialog.tsx
index 5984d633..da18cb43 100644
--- a/resources/js/components/labels/edit-label-dialog.tsx
+++ b/resources/js/components/labels/edit-label-dialog.tsx
@@ -1,4 +1,5 @@
 import { update } from '@/actions/App/Http/Controllers/Settings/LabelController';
+import InputError from '@/components/input-error';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -67,11 +68,7 @@ export function EditLabelDialog({
                                     required
                                 />
 
-                                {errors.name && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.name}
-                                    </p>
-                                )}
+                                <InputError message={errors.name} />
                             </div>
 
                             <div className="space-y-2">
@@ -107,11 +104,7 @@ export function EditLabelDialog({
                                         })}
                                     </SelectContent>
                                 </Select>
-                                {errors.color && (
-                                    <p className="text-sm text-red-500">
-                                        {errors.color}
-                                    </p>
-                                )}
+                                <InputError message={errors.color} />
                             </div>
 
                             <div className="flex justify-end gap-2">