diff --git a/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx b/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx
index 0d33241aa..bd82b6fb4 100644
--- a/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx
+++ b/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/index.tsx
@@ -88,6 +88,7 @@ export const GeneralAppSettings: React.FC<Props> = async ({ appId }) => {
         title="Profile Picture"
         action={updateApp}
         defaultValues={{ profilePictureUrl: app.profilePictureUrl ?? '' }}
+        validationMode="onChange"
       >
         <FormCard
           title="Profile Picture"
diff --git a/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/profile-picture.tsx b/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/profile-picture.tsx
index cc460d614..b382dc2ca 100644
--- a/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/profile-picture.tsx
+++ b/packages/app/control/src/app/(app)/app/[id]/settings/(general)/_components/profile-picture.tsx
@@ -18,12 +18,13 @@ export const AppProfilePicture = () => {
 
   const { mutate: uploadImage, isPending: isUploading } =
     api.upload.image.useMutation({
-      onSuccess: ({ url }) =>
+      onSuccess: ({ url }) => {
         form.setValue('profilePictureUrl', url, {
           shouldValidate: true,
           shouldDirty: true,
           shouldTouch: true,
-        }),
+        });
+      },
     });
 
   return (
diff --git a/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx b/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx
index 893722d92..b213900f0 100644
--- a/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx
+++ b/packages/app/control/src/app/(app)/app/[id]/settings/_components/form/button.tsx
@@ -3,12 +3,17 @@
 import { useFormState } from 'react-hook-form';
 
 import { Button } from '@/components/ui/button';
+import { useMemo } from 'react';
 
 export const FormButton = () => {
-  const form = useFormState();
+  const { isValid, isDirty } = useFormState();
+
+  const disabled = useMemo(() => {
+    return !isValid || !isDirty;
+  }, [isValid, isDirty]);
 
   return (
-    <Button type="submit" disabled={!form.isValid || !form.isDirty}>
+    <Button type="submit" disabled={disabled}>
       Save
     </Button>
   );