diff --git a/packages/web/app/src/pages/auth-sign-in.tsx b/packages/web/app/src/pages/auth-sign-in.tsx
index e313b028e..df3e9b7d6 100644
--- a/packages/web/app/src/pages/auth-sign-in.tsx
+++ b/packages/web/app/src/pages/auth-sign-in.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaRegUserCircle } from 'react-icons/fa';
 import { SiGithub, SiGoogle, SiOkta } from 'react-icons/si';
@@ -81,6 +81,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
   const [lastAuthMethod, setLastAuthMethod] = useLastAuthMethod();
   const router = useRouter();
   const { toast } = useToast();
+
   const emailPasswordSignIn = useMutation({
     mutationFn: superEmailPasswordSignIn,
     onSuccess(data) {
@@ -133,6 +134,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
       });
     },
   });
+
   const thirdPartySignIn = useMutation({
     async mutationFn(provider: 'github' | 'google' | 'okta') {
       await startAuthFlowForProvider(provider, props.redirectToPath);
@@ -146,7 +148,9 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
       });
     },
   });
+
   const isPending = emailPasswordSignIn.isPending || thirdPartySignIn.isPending;
+
   const form = useForm({
     mode: 'onSubmit',
     resolver: zodResolver(SignInFormSchema),
@@ -157,6 +161,12 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
     disabled: isPending,
   });
 
+  useEffect(() => {
+    if (emailPasswordSignIn.isPending === false) {
+      form.setFocus('email', { shouldSelect: true });
+    }
+  }, [emailPasswordSignIn.isPending]);
+
   const onSubmit = useCallback(
     (data: SignInFormValues) => {
       emailPasswordSignIn.reset();
@@ -199,11 +209,15 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
                   <FormField
                     control={form.control}
                     name="email"
-                    render={({ field }) => (
+                    render={() => (
                       <FormItem>
                         <FormLabel>Email</FormLabel>
                         <FormControl>
-                          <Input placeholder="m@example.com" type="email" {...field} />
+                          <Input
+                            placeholder="m@example.com"
+                            type="email"
+                            {...form.register('email')}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -212,7 +226,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
                   <FormField
                     control={form.control}
                     name="password"
-                    render={({ field }) => (
+                    render={() => (
                       <FormItem>
                         <div className="flex items-center">
                           <FormLabel>Password</FormLabel>
@@ -229,7 +243,7 @@ export function AuthSignInPage(props: { redirectToPath: string }) {
                           </Link>
                         </div>
                         <FormControl>
-                          <Input type="password" {...field} />
+                          <Input type="password" {...form.register('password')} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
diff --git a/packages/web/app/src/pages/auth-sign-up.tsx b/packages/web/app/src/pages/auth-sign-up.tsx
index fbff5cb7a..0c5c8f2ac 100644
--- a/packages/web/app/src/pages/auth-sign-up.tsx
+++ b/packages/web/app/src/pages/auth-sign-up.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaRegUserCircle } from 'react-icons/fa';
 import { SiGithub, SiGoogle, SiOkta } from 'react-icons/si';
@@ -150,6 +150,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
     },
     disabled: isPending,
   });
+
+  useEffect(() => {
+    form.setFocus('firstName', { shouldSelect: true });
+  }, [signUp.isPending]);
+
   const { toast } = useToast();
 
   const onSubmit = useCallback(
@@ -210,11 +215,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
                     <FormField
                       control={form.control}
                       name="firstName"
-                      render={({ field }) => (
+                      render={() => (
                         <FormItem>
                           <FormLabel>First name</FormLabel>
                           <FormControl>
-                            <Input placeholder="Max" {...field} />
+                            <Input placeholder="Max" {...form.register('firstName')} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -223,11 +228,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
                     <FormField
                       control={form.control}
                       name="lastName"
-                      render={({ field }) => (
+                      render={() => (
                         <FormItem>
                           <FormLabel>Last name</FormLabel>
                           <FormControl>
-                            <Input placeholder="Robinson" {...field} />
+                            <Input placeholder="Robinson" {...form.register('lastName')} />
                           </FormControl>
                           <FormMessage />
                         </FormItem>
@@ -237,11 +242,15 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
                   <FormField
                     control={form.control}
                     name="email"
-                    render={({ field }) => (
+                    render={() => (
                       <FormItem>
                         <FormLabel>Email</FormLabel>
                         <FormControl>
-                          <Input placeholder="m@example.com" type="email" {...field} />
+                          <Input
+                            placeholder="m@example.com"
+                            type="email"
+                            {...form.register('email')}
+                          />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
@@ -250,11 +259,11 @@ export function AuthSignUpPage(props: { redirectToPath: string }) {
                   <FormField
                     control={form.control}
                     name="password"
-                    render={({ field }) => (
+                    render={() => (
                       <FormItem>
                         <FormLabel>Password</FormLabel>
                         <FormControl>
-                          <Input type="password" {...field} />
+                          <Input type="password" {...form.register('password')} />
                         </FormControl>
                         <FormMessage />
                       </FormItem>