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>
   );
diff --git a/templates/authjs/package.json b/templates/authjs/package.json
index a035ca7a8..f6ea64724 100644
--- a/templates/authjs/package.json
+++ b/templates/authjs/package.json
@@ -14,7 +14,7 @@
     "@merit-systems/echo-next-sdk": "^0.0.30",
     "@merit-systems/echo-typescript-sdk": "^1.0.23",
     "ai": "^5.0.82",
-    "next": "16.0.1",
+    "next": "16.0.7",
     "next-auth": "5.0.0-beta.30",
     "react": "19.2.0",
     "react-dom": "19.2.0"