diff --git a/packages/types/lib/invitations/api.ts b/packages/types/lib/invitations/api.ts
index 7cebca88cb9..7e5e5fa7bd2 100644
--- a/packages/types/lib/invitations/api.ts
+++ b/packages/types/lib/invitations/api.ts
@@ -1,4 +1,4 @@
-import type { Endpoint } from '../api.js';
+import type { ApiError, Endpoint } from '../api.js';
 import type { ApiInvitation, ApiTeam } from '../team/api.js';
 import type { ApiUser } from '../user/api.js';
 
@@ -34,6 +34,7 @@ export type GetInvite = Endpoint<{
             newTeamUsers: number;
         };
     };
+    Errors: ApiError<'not_found'>;
 }>;
 
 export type AcceptInvite = Endpoint<{
diff --git a/packages/webapp/src/App.tsx b/packages/webapp/src/App.tsx
index 0cc2ab790ce..b6d20642231 100644
--- a/packages/webapp/src/App.tsx
+++ b/packages/webapp/src/App.tsx
@@ -13,7 +13,7 @@ import { EmailVerified } from './pages/Account/EmailVerified';
 import ForgotPassword from './pages/Account/ForgotPassword';
 import { InviteSignup } from './pages/Account/InviteSignup';
 import ResetPassword from './pages/Account/ResetPassword';
-import Signin from './pages/Account/Signin';
+import { Signin } from './pages/Account/Signin';
 import { Signup } from './pages/Account/Signup';
 import { VerifyEmail } from './pages/Account/VerifyEmail';
 import { VerifyEmailByExpiredToken } from './pages/Account/VerifyEmailByExpiredToken';
diff --git a/packages/webapp/src/components/ui/button/Auth/Google.tsx b/packages/webapp/src/components/ui/button/Auth/Google.tsx
index b65af9a8d7b..9d008b685cd 100644
--- a/packages/webapp/src/components/ui/button/Auth/Google.tsx
+++ b/packages/webapp/src/components/ui/button/Auth/Google.tsx
@@ -29,7 +29,7 @@ export default function GoogleButton({ text, setServerErrorMessage, token }: Pro
         <button
             onClick={googleLogin}
             type="button"
-            className="flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-xs w-full text-sm font-medium text-white bg-dark-600 hover:bg-gray-700"
+            className="flex items-center justify-center gap-2.5 p-3 bg-white text-gray-1000 font-roboto font-medium text-sm rounded w-full"
         >
             <svg xmlns="http://www.w3.org/2000/svg" width="18px" className="inline" viewBox="0 0 512 512">
                 <path
diff --git a/packages/webapp/src/hooks/useAuth.tsx b/packages/webapp/src/hooks/useAuth.tsx
new file mode 100644
index 00000000000..7b514265edf
--- /dev/null
+++ b/packages/webapp/src/hooks/useAuth.tsx
@@ -0,0 +1,294 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+
+import { APIError, apiFetch } from '@/utils/api';
+
+import type {
+    GetEmailByUuid,
+    GetOnboardingHearAboutUs,
+    PostForgotPassword,
+    PostOnboardingHearAboutUs,
+    PostSignin,
+    PostSignup,
+    PutResetPassword,
+    ResendVerificationEmailByEmail,
+    ResendVerificationEmailByUuid
+} from '@nangohq/types';
+
+export function useSigninAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostSignin['Success'];
+          }
+        | {
+              status: 401 | 400;
+              json: PostSignin['Errors'];
+          },
+        APIError,
+        { email: string; password: string }
+    >({
+        mutationFn: async ({ email, password }) => {
+            const res = await apiFetch('/api/v1/account/signin', {
+                method: 'POST',
+                body: JSON.stringify({ email, password })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignin['Success']
+                };
+            }
+
+            if (res.status === 401 || res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignin['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useResendVerificationEmail() {
+    return useMutation<ResendVerificationEmailByEmail['Success'], APIError, { email: string }>({
+        mutationFn: async ({ email }) => {
+            const res = await apiFetch('/api/v1/account/resend-verification-email/by-email', {
+                method: 'POST',
+                body: JSON.stringify({ email })
+            });
+
+            if (res.status === 200) {
+                return (await res.json()) as ResendVerificationEmailByEmail['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useResendVerificationEmailByUuid() {
+    return useMutation<ResendVerificationEmailByUuid['Success'], APIError, { uuid: string }>({
+        mutationFn: async ({ uuid }) => {
+            const res = await apiFetch('/api/v1/account/resend-verification-email/by-uuid', {
+                method: 'POST',
+                body: JSON.stringify({ uuid })
+            });
+
+            if (res.status === 200) {
+                return (await res.json()) as ResendVerificationEmailByUuid['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useLogoutAPI() {
+    return useMutation<undefined, APIError>({
+        mutationFn: async () => {
+            const res = await apiFetch('/api/v1/account/logout', { method: 'POST' });
+
+            if (res.status === 200) {
+                return undefined;
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useSignupAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostSignup['Success'];
+          }
+        | {
+              status: 400;
+              json: PostSignup['Errors'];
+          },
+        APIError,
+        { name: string; email: string; password: string; token?: string }
+    >({
+        mutationFn: async ({ name, email, password, token }) => {
+            const res = await apiFetch('/api/v1/account/signup', {
+                method: 'POST',
+                body: JSON.stringify({ name, email, password, token })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignup['Success']
+                };
+            }
+
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostSignup['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useRequestPasswordResetAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostForgotPassword['Success'];
+          }
+        | {
+              status: 400;
+              json: PostForgotPassword['Errors'];
+          },
+        APIError,
+        { email: string }
+    >({
+        mutationFn: async ({ email }) => {
+            const res = await apiFetch('/api/v1/account/forgot-password', {
+                method: 'POST',
+                body: JSON.stringify({ email })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostForgotPassword['Success']
+                };
+            }
+
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostForgotPassword['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useResetPasswordAPI() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PutResetPassword['Success'];
+          }
+        | {
+              status: 400;
+              json: PutResetPassword['Errors'];
+          },
+        APIError,
+        { token: string; password: string }
+    >({
+        mutationFn: async ({ token, password }) => {
+            const res = await apiFetch('/api/v1/account/reset-password', {
+                method: 'PUT',
+                body: JSON.stringify({ token, password })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PutResetPassword['Success']
+                };
+            }
+
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PutResetPassword['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function useEmailByUuid(uuid: string | undefined) {
+    return useQuery<GetEmailByUuid['Success'], APIError>({
+        queryKey: ['account', 'email', uuid],
+        queryFn: async () => {
+            const res = await apiFetch(`/api/v1/account/email/${uuid}`);
+
+            if (res.status === 200) {
+                return (await res.json()) as GetEmailByUuid['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        },
+        enabled: !!uuid
+    });
+}
+
+export function useOnboardingHearAboutUs() {
+    return useQuery<GetOnboardingHearAboutUs['Success'], APIError>({
+        queryKey: ['account', 'onboarding', 'hear-about-us'],
+        queryFn: async () => {
+            const res = await apiFetch('/api/v1/account/onboarding/hear-about-us');
+
+            if (res.status === 200) {
+                return (await res.json()) as GetOnboardingHearAboutUs['Success'];
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
+
+export function usePostOnboardingHearAboutUs() {
+    return useMutation<
+        | {
+              status: 200;
+              json: PostOnboardingHearAboutUs['Success'];
+          }
+        | {
+              status: 401 | 403;
+              json: PostOnboardingHearAboutUs['Errors'];
+          },
+        APIError,
+        { source: PostOnboardingHearAboutUs['Body']['source'] }
+    >({
+        mutationFn: async ({ source }) => {
+            const res = await apiFetch('/api/v1/account/onboarding/hear-about-us', {
+                method: 'POST',
+                body: JSON.stringify({ source })
+            });
+
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostOnboardingHearAboutUs['Success']
+                };
+            }
+
+            if (res.status === 401 || res.status === 403) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as PostOnboardingHearAboutUs['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        }
+    });
+}
diff --git a/packages/webapp/src/hooks/useInvite.tsx b/packages/webapp/src/hooks/useInvite.tsx
index 8212b1079e0..d09f09f8bbb 100644
--- a/packages/webapp/src/hooks/useInvite.tsx
+++ b/packages/webapp/src/hooks/useInvite.tsx
@@ -1,21 +1,44 @@
-import useSWR from 'swr';
+import { useQuery } from '@tanstack/react-query';
 
-import { apiFetch, swrFetcher } from '../utils/api';
+import { APIError, apiFetch } from '../utils/api';
 
-import type { SWRError } from '../utils/api';
 import type { AcceptInvite, DeclineInvite, DeleteInvite, GetInvite, PostInvite } from '@nangohq/types';
 
 export function useInvite(token: string | undefined) {
-    const { data, error, mutate } = useSWR<GetInvite['Success'], SWRError<GetInvite['Errors']>>(token ? `/api/v1/invite/${token}` : null, swrFetcher);
+    return useQuery<
+        | {
+              status: 200;
+              json: GetInvite['Success'];
+          }
+        | {
+              status: 400;
+              json: GetInvite['Errors'];
+          },
+        APIError
+    >({
+        queryKey: ['invite', token],
+        queryFn: async () => {
+            const res = await apiFetch(`/api/v1/invite/${token}`);
 
-    const loading = !data && !error;
+            if (res.status === 200) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as GetInvite['Success']
+                };
+            }
 
-    return {
-        loading,
-        error: error?.json,
-        data: data?.data,
-        mutate
-    };
+            if (res.status === 400) {
+                return {
+                    status: res.status,
+                    json: (await res.json()) as GetInvite['Errors']
+                };
+            }
+
+            const json = (await res.json()) as Record<string, unknown>;
+            throw new APIError({ res, json });
+        },
+        enabled: !!token
+    });
 }
 
 export async function apiPostInvite(env: string, body: PostInvite['Body']) {
diff --git a/packages/webapp/src/index.css b/packages/webapp/src/index.css
index 231aa23aa04..0370254edfe 100644
--- a/packages/webapp/src/index.css
+++ b/packages/webapp/src/index.css
@@ -613,6 +613,12 @@
     font-weight: 600;
 }
 
+@utility text-body-small-light {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 300;
+}
+
 @utility text-body-small-regular {
     font-size: 12px;
     line-height: 16px;
diff --git a/packages/webapp/src/layout/DefaultLayout.tsx b/packages/webapp/src/layout/DefaultLayout.tsx
index a5e9b0c2eec..5288747d3df 100644
--- a/packages/webapp/src/layout/DefaultLayout.tsx
+++ b/packages/webapp/src/layout/DefaultLayout.tsx
@@ -1,15 +1,18 @@
+import { LogoInverted } from '@/assets/LogoInverted';
+import { cn } from '@/utils/utils';
+
 interface DefaultLayoutI {
     children: React.ReactNode;
+    className?: string;
 }
 
-export default function DefaultLayout({ children }: DefaultLayoutI) {
+export default function DefaultLayout({ children, className }: DefaultLayoutI) {
     return (
-        <div className="flex min-h-full flex-col justify-center py-10 sm:px-6 lg:px-8">
-            <div className="flex flex-col bg-bg-elevated border border-border-disabled p-[60px] mx-auto">
-                <div className="pb-[20px]">
-                    <img className="mx-auto h-14 w-auto" src="/logo-light.svg" alt="Nango" />
-                </div>
-                {children}
+        <div className="w-full h-full flex justify-center items-center py-22">
+            {/* Card */}
+            <div className="w-[485px] min-w-[385px] p-15 flex flex-col items-center gap-5 bg-bg-elevated border-border-disabled rounded">
+                <LogoInverted className="size-12.5 text-text-primary" />
+                <div className={cn('w-full flex flex-col items-center', className)}>{children}</div>
             </div>
         </div>
     );
diff --git a/packages/webapp/src/pages/Account/ForgotPassword.tsx b/packages/webapp/src/pages/Account/ForgotPassword.tsx
index 409b982004b..b00ba1099d0 100644
--- a/packages/webapp/src/pages/Account/ForgotPassword.tsx
+++ b/packages/webapp/src/pages/Account/ForgotPassword.tsx
@@ -1,73 +1,101 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CircleX } from 'lucide-react';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { toast } from 'react-toastify';
+import { useForm } from 'react-hook-form';
+import z from 'zod';
 
-import { Button } from '../../components/ui/button/Button';
-import { Input } from '../../components/ui/input/Input';
+import { useRequestPasswordResetAPI } from '../../hooks/useAuth';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useRequestPasswordResetAPI } from '../../utils/api';
+import { Alert, AlertDescription } from '@/components-v2/ui/alert';
+import { Button } from '@/components-v2/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components-v2/ui/form';
+import { InputGroup, InputGroupInput } from '@/components-v2/ui/input-group';
+import { useToast } from '@/hooks/useToast';
+
+const forgotPasswordSchema = z.object({
+    email: z.string().email('Please enter a valid email address')
+});
+
+type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
 
 export default function Signin() {
-    const requestPasswordResetAPI = useRequestPasswordResetAPI();
+    const form = useForm<ForgotPasswordFormData>({
+        resolver: zodResolver(forgotPasswordSchema),
+        mode: 'onTouched'
+    });
+
+    const { toast } = useToast();
+    const { mutateAsync: requestPasswordReset, isPending } = useRequestPasswordResetAPI();
 
     const [serverErrorMessage, setServerErrorMessage] = useState('');
-    const [email, setEmail] = useState('');
-    const [loading, setLoading] = useState(false);
     const [done, setDone] = useState(false);
 
-    const handleSubmit = async (e: React.SyntheticEvent) => {
-        e.preventDefault();
+    const onSubmit = async (data: ForgotPasswordFormData) => {
         setServerErrorMessage('');
-        setLoading(true);
 
-        const res = await requestPasswordResetAPI(email);
+        try {
+            const result = await requestPasswordReset({ email: data.email });
 
-        if (res?.status === 200) {
-            toast.success('Email sent!', { position: toast.POSITION.BOTTOM_CENTER });
-            setDone(true);
-        } else if (res?.status === 400) {
-            setServerErrorMessage('No user matching this email.');
-        } else {
-            setServerErrorMessage('Unknown error...');
+            if (result.status === 200) {
+                toast({
+                    title: 'Email sent!',
+                    variant: 'success'
+                });
+                setDone(true);
+            } else {
+                setServerErrorMessage('No user matching this email.');
+            }
+        } catch {
+            setServerErrorMessage('Issue sending password reset email. Please try again.');
         }
-        setLoading(false);
     };
 
     return (
-        <DefaultLayout>
+        <DefaultLayout className="gap-5">
             <Helmet>
                 <title>Forgot Password - Nango</title>
             </Helmet>
-            <div className="flex flex-col justify-center">
-                <div className="w-80 flex flex-col gap-6">
-                    <h2 className="mt-4 text-center text-[20px] text-white">Request password reset</h2>
-                    {!done ? (
-                        <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
-                            <Input
-                                id="email"
-                                name="email"
-                                type="email"
-                                autoFocus
-                                placeholder="Email"
-                                autoComplete="email"
-                                required
-                                inputSize="lg"
-                                onChange={(e) => setEmail(e.target.value)}
-                                className="border-border-gray bg-dark-600"
-                            />
 
-                            <div className="grid">
-                                <Button type="submit" className="justify-center" size={'lg'} isLoading={loading}>
-                                    Send password reset email
-                                </Button>
-                                {serverErrorMessage && <p className="place-self-center text-sm text-red-600">{serverErrorMessage}</p>}
-                            </div>
-                        </form>
-                    ) : (
-                        <div className="text-text-light-gray text-sm text-center">Email sent to {email}</div>
-                    )}
-                </div>
-            </div>
+            <h2 className="text-title-group text-text-primary">Request password reset</h2>
+
+            {serverErrorMessage && (
+                <Alert variant="error">
+                    <CircleX />
+                    <AlertDescription>{serverErrorMessage}</AlertDescription>
+                </Alert>
+            )}
+
+            {!done && (
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)} className="w-full flex flex-col gap-5">
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormControl>
+                                        <InputGroup className="h-11">
+                                            <InputGroupInput placeholder="Email" {...field} />
+                                        </InputGroup>
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <Button type="submit" className="w-full" size={'lg'} loading={isPending} disabled={!form.formState.isValid}>
+                            Send password reset email
+                        </Button>
+                    </form>
+                </Form>
+            )}
+
+            {done && (
+                <span className="text-body-medium-regular text-text-tertiary text-center text-wrap">
+                    We&apos;ve sent a password reset email to <span className="text-text-primary">{form.getValues('email')}</span>.
+                </span>
+            )}
         </DefaultLayout>
     );
 }
diff --git a/packages/webapp/src/pages/Account/InviteSignup.tsx b/packages/webapp/src/pages/Account/InviteSignup.tsx
index 7e013f2d02f..e1288759146 100644
--- a/packages/webapp/src/pages/Account/InviteSignup.tsx
+++ b/packages/webapp/src/pages/Account/InviteSignup.tsx
@@ -1,16 +1,16 @@
-import { ExitIcon } from '@radix-ui/react-icons';
+import { LogOut } from 'lucide-react';
 import { useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { SignupForm } from './components/SignupForm';
-import { Info } from '../../components/Info';
-import { Skeleton } from '../../components/ui/Skeleton';
-import { Button, ButtonLink } from '../../components/ui/button/Button';
 import { apiAcceptInvite, apiDeclineInvite, useInvite } from '../../hooks/useInvite';
 import { useToast } from '../../hooks/useToast';
 import { useUser } from '../../hooks/useUser';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { useSignout } from '../../utils/user';
+import { StyledLink } from '@/components-v2/StyledLink';
+import { Button, ButtonLink } from '@/components-v2/ui/button';
 
 export const InviteSignup: React.FC = () => {
     const { token } = useParams();
@@ -19,7 +19,7 @@ export const InviteSignup: React.FC = () => {
     const signout = useSignout();
 
     const { user: isLogged } = useUser(true, { onError: () => null });
-    const { data, error, loading } = useInvite(token);
+    const { data: inviteResponse, error: inviteError, isPending: _isInvitePending } = useInvite(token);
     const [loadingDecline, setLoadingDecline] = useState(false);
     const [loadingAccept, setLoadingAccept] = useState(false);
 
@@ -48,106 +48,119 @@ export const InviteSignup: React.FC = () => {
         setLoadingDecline(false);
     };
 
-    if (loading) {
+    if (inviteError) {
         return (
-            <DefaultLayout>
-                <div className="flex flex-col justify-center">
-                    <div className="flex flex-col justify-center w-80 mt-4">
-                        <Skeleton className="w-100%" />
-                    </div>
-                </div>
+            <DefaultLayout className="gap-5">
+                <Helmet>
+                    <title>Invitation Error - Nango</title>
+                </Helmet>
+
+                <h2 className="text-title-group text-text-primary">Invitation error</h2>
+
+                <p className="text-text-secondary text-body-medium-regular">
+                    An error occurred, refresh your page or reach out to the support.
+                    {inviteError.json.error.code === 'generic_error_support' && (
+                        <>
+                            (id: <span className="select-all">{inviteError.json.error.payload as string}</span>)
+                        </>
+                    )}
+                </p>
             </DefaultLayout>
         );
     }
 
-    if (error) {
+    if (!inviteResponse) {
+        return null;
+    }
+
+    if (inviteResponse.status === 400) {
         return (
-            <DefaultLayout>
-                <div className="flex flex-col justify-center">
-                    <div className="flex flex-col justify-center items-center w-80 mt-4 gap-8">
-                        {error.error.code === 'not_found' ? (
-                            <>
-                                <div>
-                                    <h2 className="text-3xl font-semibold text-white text-center">Invitation Error</h2>
-                                    <div className="text-text-light-gray text-sm">This invitation no longer exists or is expired.</div>
-                                </div>
-                                <div className="w-full">
-                                    <ButtonLink to={'/signup'} className="w-full justify-center" size={'lg'}>
-                                        Back to signup
-                                    </ButtonLink>
-                                </div>
-                            </>
-                        ) : (
-                            <Info variant={'destructive'}>
-                                An error occurred, refresh your page or reach out to the support.{' '}
-                                {error.error.code === 'generic_error_support' && (
-                                    <>
-                                        (id: <span className="select-all">{error.error.payload}</span>)
-                                    </>
-                                )}
-                            </Info>
-                        )}
-                    </div>
+            <DefaultLayout className="gap-10">
+                <Helmet>
+                    <title>Invitation Error - Nango</title>
+                </Helmet>
+
+                <div className="flex flex-col gap-5 items-center">
+                    <h2 className="text-title-group text-text-primary">Invitation error</h2>
+
+                    <p className="text-text-secondary text-body-medium-regular">This invitation no longer exists or is expired.</p>
                 </div>
+
+                <ButtonLink to={'/signup'} variant="secondary" className="w-full" size="lg">
+                    Back to signup
+                </ButtonLink>
             </DefaultLayout>
         );
     }
-    if (!data) {
-        return null;
-    }
 
-    if (isLogged && isLogged.email !== data.invitation.email) {
+    const inviteData = inviteResponse.json.data;
+
+    if (isLogged && isLogged.email !== inviteData.invitation.email) {
         return (
-            <DefaultLayout>
-                <div className="flex flex-col justify-center">
-                    <div className="flex flex-col justify-center items-center w-80 mt-4 gap-8">
-                        <div>
-                            <h2 className="text-3xl font-semibold text-white text-center">Invitation Error</h2>
-                            <div className="text-text-light-gray text-sm text-center">
-                                This invitation was sent to a different email. Please logout and use the correct account
-                            </div>
-                        </div>
-
-                        <div className="flex gap-2 justify-center">
-                            <Link to="/">
-                                <Button variant={'emptyFaded'}>Back to home</Button>
-                            </Link>
-                            <Button onClick={async () => await signout()}>
-                                <ExitIcon className="h-5 w-5 mr-2" />
-                                <span>Log Out</span>
-                            </Button>
-                        </div>
-                    </div>
+            <DefaultLayout className="gap-10">
+                <Helmet>
+                    <title>Invitation Error - Nango</title>
+                </Helmet>
+
+                <div className="flex flex-col gap-5 items-center">
+                    <h2 className="text-title-group text-text-primary">Invitation error</h2>
+
+                    <p className="text-text-secondary text-body-medium-regular text-center">
+                        This invitation was sent to a different email. Please logout and use the correct account.
+                    </p>
+                </div>
+
+                <div className="flex gap-2 items-center justify-center">
+                    <ButtonLink to={'/'} variant="secondary" size="lg">
+                        Back to home
+                    </ButtonLink>
+                    <Button onClick={signout} variant="primary" size="lg">
+                        <LogOut />
+                        Log out
+                    </Button>
                 </div>
             </DefaultLayout>
         );
     }
 
     return (
-        <DefaultLayout>
-            <div className="flex flex-col justify-center">
-                <div className="flex flex-col justify-center mx-4 gap-4">
-                    <h2 className="text-3xl font-semibold text-white text-center">{isLogged ? 'Request to join a different team' : 'Join a team'}</h2>
-                    <div className="text-text-light-gray text-sm text-center">
-                        <p>
-                            {data.invitedBy.name} has invited you to transfer to a new team: <strong className="text-white">{data.newTeam.name}</strong> (
-                            {data.newTeamUsers} {data.newTeamUsers > 1 ? 'members' : 'member'})
-                        </p>{' '}
-                        {isLogged && <p>If you accept, you will permanently lose access to your existing team.</p>}
-                    </div>
-                    {isLogged && (
-                        <div className="flex gap-2 mt-6 items-center justify-center">
-                            <Button variant={'zinc'} onClick={onDecline} disabled={loadingAccept} isLoading={loadingDecline}>
-                                Decline
-                            </Button>
-                            <Button variant={'danger'} onClick={onAccept} disabled={loadingDecline} isLoading={loadingAccept}>
-                                Join a different team
-                            </Button>
-                        </div>
-                    )}
-                    <div className="w-80 mx-auto">{!isLogged && <SignupForm invitation={data.invitation} token={token} />}</div>
+        <DefaultLayout className="gap-10">
+            <Helmet>
+                <title>Invitation Error - Nango</title>
+            </Helmet>
+
+            <div className="flex flex-col gap-5 items-center">
+                <h2 className="text-title-group text-text-primary">{isLogged ? 'Request to join a different team' : 'Join a team'}</h2>
+
+                <div className="flex flex-col gap-2 text-text-secondary text-body-medium-regular text-center">
+                    <span>
+                        {inviteData.invitedBy.name} has invited you to join their team:
+                        <br />
+                        <strong className="text-text-primary">{inviteData.newTeam.name}</strong> ({inviteData.newTeamUsers}
+                        {inviteData.newTeamUsers > 1 ? ' members' : ' member'})
+                    </span>
+
+                    {isLogged && <span> If you accept, you will permanently lose access to your existing team.</span>}
                 </div>
             </div>
+
+            {isLogged ? (
+                <div className="flex gap-2 items-center justify-center">
+                    <Button variant="secondary" size="lg" onClick={onDecline} disabled={loadingAccept} loading={loadingDecline}>
+                        Decline
+                    </Button>
+                    <Button variant="destructive" size="lg" onClick={onAccept} disabled={loadingDecline} loading={loadingAccept}>
+                        Join a different team
+                    </Button>
+                </div>
+            ) : (
+                <div className="flex flex-col gap-4 items-center w-full">
+                    <SignupForm invitation={inviteData.invitation} token={token} />
+                    <span className="text-body-medium-regular text-text-tertiary">
+                        Already have an account? <StyledLink to="/signin">Log in.</StyledLink>
+                    </span>
+                </div>
+            )}
         </DefaultLayout>
     );
 };
diff --git a/packages/webapp/src/pages/Account/ResetPassword.tsx b/packages/webapp/src/pages/Account/ResetPassword.tsx
index f5e51dfb8cc..6ba6ea7a180 100644
--- a/packages/webapp/src/pages/Account/ResetPassword.tsx
+++ b/packages/webapp/src/pages/Account/ResetPassword.tsx
@@ -1,70 +1,86 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CircleX } from 'lucide-react';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
+import z from 'zod';
 
-import { Password } from './components/Password';
-import { Button } from '../../components/ui/button/Button';
+import { Password, passwordSchema } from './components/Password';
+import { useResetPasswordAPI } from '../../hooks/useAuth';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { useResetPasswordAPI } from '../../utils/api';
+import { Alert, AlertDescription } from '@/components-v2/ui/alert';
+import { Button } from '@/components-v2/ui/button';
+import { Form, FormField } from '@/components-v2/ui/form';
+import { useToast } from '@/hooks/useToast';
+
+const resetPasswordSchema = z.object({
+    password: passwordSchema
+});
+
+type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
 
 export default function ResetPassword() {
-    const resetPasswordAPI = useResetPasswordAPI();
+    const form = useForm<ResetPasswordFormData>({
+        resolver: zodResolver(resetPasswordSchema),
+        mode: 'onTouched'
+    });
+    const { mutateAsync: resetPassword, isPending } = useResetPasswordAPI();
+
     const navigate = useNavigate();
+    const { toast } = useToast();
     const [serverErrorMessage, setServerErrorMessage] = useState('');
     const { token } = useParams();
-    const [password, setPassword] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [passwordStrength, setPasswordStrength] = useState(false);
 
-    const handleSubmit = async (e: React.SyntheticEvent) => {
-        e.preventDefault();
+    if (!token) {
+        // Route doesn't exist without token, so just satisfy the type checker
+        return null;
+    }
+
+    const onSubmit = async (data: ResetPasswordFormData) => {
         setServerErrorMessage('');
-        setLoading(true);
 
-        const res = await resetPasswordAPI(token!, password);
+        try {
+            const result = await resetPassword({ token: token, password: data.password });
 
-        if (res?.status === 200) {
-            toast.success('Password updated!', { position: toast.POSITION.BOTTOM_CENTER });
-            navigate('/');
-        } else if (res?.status === 400) {
-            setServerErrorMessage('Your reset token is invalid or expired.');
-        } else {
-            setServerErrorMessage('Unkown error...');
+            if (result.status === 200) {
+                toast({ title: 'Password updated!', variant: 'success' });
+                navigate('/signin');
+            } else {
+                setServerErrorMessage('Your reset token is invalid or expired.');
+            }
+        } catch {
+            setServerErrorMessage('Issue resetting password. Please try again.');
         }
-        setLoading(false);
     };
 
-    if (!token) {
-        return null;
-    }
-
     return (
-        <DefaultLayout>
+        <DefaultLayout className="gap-5">
             <Helmet>
                 <title>Reset Password - Nango</title>
             </Helmet>
-            <div className="flex flex-col justify-center">
-                <div className="w-80 flex flex-col gap-4">
-                    <h2 className="text-center text-[20px] text-white">Reset password</h2>
-                    <form className="flex flex-col gap-6" onSubmit={handleSubmit}>
-                        <Password
-                            setPassword={(tmpPass, tmpStrength) => {
-                                setPassword(tmpPass);
-                                setPasswordStrength(tmpStrength);
-                            }}
-                            autoFocus
-                        />
+            <h2 className="text-title-group text-text-primary">Reset password</h2>
+
+            {serverErrorMessage && (
+                <Alert variant="error">
+                    <CircleX />
+                    <AlertDescription>{serverErrorMessage}</AlertDescription>
+                </Alert>
+            )}
+
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)} className="w-full flex flex-col gap-5">
+                    <FormField
+                        control={form.control}
+                        name="password"
+                        render={() => <Password placeholder="New password" autoFocus autoComplete="new-password" />}
+                    />
 
-                        <div className="grid">
-                            <Button type="submit" size={'lg'} className="justify-center" disabled={!password || !passwordStrength} isLoading={loading}>
-                                Reset
-                            </Button>
-                            {serverErrorMessage && <p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>}
-                        </div>
-                    </form>
-                </div>
-            </div>
+                    <Button type="submit" className="w-full" size={'lg'} loading={isPending} disabled={!form.formState.isValid}>
+                        Reset password
+                    </Button>
+                </form>
+            </Form>
         </DefaultLayout>
     );
 }
diff --git a/packages/webapp/src/pages/Account/Signin.tsx b/packages/webapp/src/pages/Account/Signin.tsx
index d8345eb73fd..4632ab9c3ac 100644
--- a/packages/webapp/src/pages/Account/Signin.tsx
+++ b/packages/webapp/src/pages/Account/Signin.tsx
@@ -1,173 +1,204 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CircleX, ExternalLink, Loader2, TriangleAlert } from 'lucide-react';
 import { useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { Link, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import z from 'zod';
 
-import GoogleButton from '../../components/ui/button/Auth/Google';
-import { Button } from '../../components/ui/button/Button';
-import DefaultLayout from '../../layout/DefaultLayout';
-import { apiFetch, useSigninAPI } from '../../utils/api';
-import { globalEnv } from '../../utils/env';
-import { useSignin } from '../../utils/user';
+import GoogleButton from '@/components/ui/button/Auth/Google';
+import { StyledLink } from '@/components-v2/StyledLink';
+import { Alert, AlertActions, AlertButton, AlertDescription, AlertTitle } from '@/components-v2/ui/alert';
+import { Button } from '@/components-v2/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components-v2/ui/form';
+import { InputGroup, InputGroupInput } from '@/components-v2/ui/input-group';
+import { useResendVerificationEmail, useSigninAPI } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/useToast';
+import DefaultLayout from '@/layout/DefaultLayout';
+import { globalEnv } from '@/utils/env';
+import { useSignin } from '@/utils/user';
 
-import type { ApiUser, PostSignin } from '@nangohq/types';
+import type { ApiUser } from '@nangohq/types';
 
-export default function Signin() {
-    const [serverErrorMessage, setServerErrorMessage] = useState('');
-    const [showResendEmail, setShowResendEmail] = useState(false);
-    const [email, setEmail] = useState('');
-    const navigate = useNavigate();
+const signinSchema = z.object({
+    email: z.string().email('Please enter a valid email address'),
+    password: z.string().min(1, 'Password is required')
+});
+
+type SigninFormData = z.infer<typeof signinSchema>;
+
+export const Signin: React.FC = () => {
+    const { mutateAsync: signinMutation, isPending } = useSigninAPI();
+    const { mutateAsync: resendVerificationEmailMutation, isPending: isResendingEmail } = useResendVerificationEmail();
     const signin = useSignin();
-    const signinAPI = useSigninAPI();
+    const navigate = useNavigate();
+    const { toast } = useToast();
+
+    const [errorMessage, setServerErrorMessage] = useState('');
+    const [showResendEmail, setShowResendEmail] = useState(false);
+
+    const form = useForm<SigninFormData>({
+        resolver: zodResolver(signinSchema),
+        mode: 'onTouched'
+    });
 
-    const handleSubmit = async (e: React.SyntheticEvent) => {
-        e.preventDefault();
+    const onSubmitForm = async (data: SigninFormData) => {
         setServerErrorMessage('');
-        setShowResendEmail(false);
-
-        const target = e.target as typeof e.target & {
-            email: { value: string };
-            password: { value: string };
-        };
-
-        const res = await signinAPI(target.email.value, target.password.value);
-
-        if (res?.status === 200) {
-            const data = await res.json();
-            const user: ApiUser = data['user'];
-            signin(user);
-            navigate('/');
-        } else if (res?.status === 401) {
-            setServerErrorMessage('Invalid email or password.');
-        } else if (res?.status === 400) {
-            const errorResponse: PostSignin['Errors'] = (await res.json()) as PostSignin['Errors'];
-            if (errorResponse.error.code === 'email_not_verified') {
-                setShowResendEmail(true);
-                setEmail(target.email.value);
-                setServerErrorMessage('Please verify your email before logging in.');
-            } else {
-                setServerErrorMessage('Issue logging in. Please try again.');
+        try {
+            const res = await signinMutation({ email: data.email, password: data.password });
+
+            if (res.status === 200) {
+                const user: ApiUser = res.json.user;
+                signin(user);
+                navigate('/');
+            } else if (res.status === 401) {
+                setServerErrorMessage('Invalid email or password.');
+                form.resetField('password', { defaultValue: '' });
+                form.setFocus('password');
+            } else if (res.status === 400) {
+                if (res.json.error.code === 'email_not_verified') {
+                    setShowResendEmail(true);
+                    setServerErrorMessage('Please verify your email before logging in.');
+                } else {
+                    setServerErrorMessage('Issue logging in. Please try again.');
+                }
             }
+        } catch {
+            setServerErrorMessage('Issue logging in. Please try again.');
         }
     };
 
     const resendVerificationEmail = async () => {
-        setShowResendEmail(false);
         setServerErrorMessage('');
 
-        const res = await apiFetch('/api/v1/account/resend-verification-email/by-email', {
-            method: 'POST',
-            body: JSON.stringify({
-                email
-            })
-        });
+        const email = form.getValues('email');
 
-        if (res?.status === 200) {
-            setServerErrorMessage('Verification email sent.');
-        } else {
+        try {
+            await resendVerificationEmailMutation({ email });
+            toast({
+                title: 'Verification email sent.',
+                variant: 'success'
+            });
+            setShowResendEmail(false);
+        } catch {
             setServerErrorMessage('Issue sending verification email. Please try again.');
         }
     };
 
     return (
-        <DefaultLayout>
+        <DefaultLayout className="gap-10">
             <Helmet>
-                <title>Login - Nango</title>
+                <title>Sign in - Nango</title>
             </Helmet>
-            <div className="flex flex-col justify-center">
-                <div className="flex flex-col justify-center w-80 mx-4">
-                    <h2 className="text-center text-title-group text-text-primary">Log in to Nango</h2>
-                    <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-                        <div>
-                            <div className="mt-1">
-                                <input
-                                    id="email"
-                                    placeholder="Email"
-                                    name="email"
-                                    type="email"
-                                    autoComplete="email"
-                                    required
-                                    className="border-border-gray bg-dark-600 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-xs focus:outline-hidden"
-                                />
-                            </div>
-                        </div>
 
-                        <div>
-                            <div className="flex justify-end">
-                                <div className="flex flex-end text-sm">
-                                    <Link to="/forgot-password" className="text-dark-500 text-xs ml-1">
-                                        Forgot your password?
-                                    </Link>
-                                </div>
-                            </div>
-                            <div className="mt-2">
-                                <input
-                                    id="password"
+            <div className="flex flex-col items-center gap-5 w-full">
+                <div className="flex flex-col gap-3 items-center">
+                    <h2 className="text-title-group text-text-primary">Log in to Nango</h2>
+                    <span className="text-body-medium-regular text-text-tertiary">
+                        Don&apos;t have an account? <StyledLink to="/signup">Sign up.</StyledLink>
+                    </span>
+                </div>
+
+                {errorMessage && !showResendEmail && (
+                    <Alert variant="error">
+                        <CircleX />
+                        <AlertDescription>{errorMessage}</AlertDescription>
+                    </Alert>
+                )}
+
+                {showResendEmail && (
+                    <Alert variant="warning">
+                        <TriangleAlert />
+                        <AlertTitle>Please verify your email</AlertTitle>
+                        <AlertDescription>We&apos;ve sent a verification email to {form.getValues('email')}.</AlertDescription>
+                        <AlertActions>
+                            <AlertButton onClick={resendVerificationEmail} variant="warning" disabled={isResendingEmail}>
+                                Resend
+                                {isResendingEmail ? <Loader2 className="animate-spin" /> : <ExternalLink />}
+                            </AlertButton>
+                        </AlertActions>
+                    </Alert>
+                )}
+
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmitForm)} className="w-full flex flex-col gap-5">
+                        <div className="w-full flex flex-col gap-2.5">
+                            <FormField
+                                control={form.control}
+                                name="email"
+                                render={({ field, fieldState }) => (
+                                    <FormItem>
+                                        <FormControl>
+                                            <InputGroup className="h-11">
+                                                <InputGroupInput placeholder="Email" {...field} aria-invalid={!!fieldState.error} />
+                                            </InputGroup>
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+
+                            <div className="order-3">
+                                <FormField
+                                    control={form.control}
                                     name="password"
-                                    type="password"
-                                    placeholder="Password"
-                                    autoComplete="current-password"
-                                    required
-                                    className="border-border-gray bg-dark-600 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-xs focus:outline-hidden"
+                                    render={({ field, fieldState }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <InputGroup className="h-11">
+                                                    <InputGroupInput
+                                                        placeholder="Password"
+                                                        type="password"
+                                                        autoComplete="current-password"
+                                                        {...field}
+                                                        aria-invalid={!!fieldState.error}
+                                                    />
+                                                </InputGroup>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
                                 />
                             </div>
-                        </div>
 
-                        <div className="grid">
-                            <button
-                                type="submit"
-                                className="bg-white mt-4 flex h-11 justify-center rounded-md border px-4 pt-3 text-[14px] text-black shadow-sm hover:border-2 active:ring-2 active:ring-offset-2"
-                            >
-                                Log in
-                            </button>
-                            {serverErrorMessage && (
-                                <>
-                                    <p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>
-                                    {showResendEmail && (
-                                        <Button onClick={resendVerificationEmail} className="flex justify-center mt-2 text-light-gray" variant="danger">
-                                            Resend verification email
-                                        </Button>
-                                    )}
-                                </>
-                            )}
+                            {/* Using `order` to show this above the password input, but tabbing from email input goes to password input first*/}
+                            <StyledLink to="/forgot-password" className="text-body-small-light text-text-tertiary self-end order-2">
+                                Forgot your password?
+                            </StyledLink>
                         </div>
 
-                        {globalEnv.features.managedAuth && (
-                            <>
-                                <div className="flex items-center justify-center my-4 text-xs">
-                                    <div className="border-t border-gray-600 grow mr-7"></div>
-                                    <span className="text-dark-500">or continue with</span>
-                                    <div className="border-t border-gray-600 grow ml-7"></div>
-                                </div>
-
-                                <GoogleButton text="Sign in with Google" setServerErrorMessage={setServerErrorMessage} />
-                            </>
-                        )}
+                        <Button type="submit" size="lg" className="w-full" loading={isPending} disabled={!form.formState.isValid}>
+                            {isPending ? 'Logging in...' : 'Log in'}
+                        </Button>
                     </form>
-                </div>
-                <div className="grid text-xs">
-                    <div className="mt-7 flex place-self-center">
-                        <p className="text-dark-500">Don&apos;t have an account?</p>
-                        <Link to="/signup" className="text-white ml-1">
-                            Sign up.
-                        </Link>
-                    </div>
-                </div>
-                <div className="grid w-full">
-                    <div className="mt-8 flex text-xs">
-                        <p className="text-dark-500">
-                            By signing in, you agree to our
-                            <a href="https://www.nango.dev/terms" target="_blank" rel="noreferrer" className="text-white ml-1">
-                                Terms of Service
-                            </a>
-                            <span className="text-dark-500 ml-1">and</span>
-                            <a href="https://www.nango.dev/privacy-policy" target="_blank" rel="noreferrer" className="text-white ml-1">
-                                Privacy Policy
-                            </a>
-                            <span className="text-dark-500">.</span>
-                        </p>
+                </Form>
+            </div>
+
+            <div className="flex flex-col gap-10 w-full">
+                {globalEnv.features.managedAuth && (
+                    <div className="flex flex-col gap-5 items-center w-full">
+                        <div className="flex items-center justify-center gap-3 w-full">
+                            <div className="border-t-[0.5px] border-border-strong w-full"></div>
+                            <span className="text-body-medium-regular text-text-secondary shrink-0">or continue with</span>
+                            <div className="border-t-[0.5px] border-border-strong w-full"></div>
+                        </div>
+
+                        <GoogleButton text="Sign in with Google" setServerErrorMessage={setServerErrorMessage} />
                     </div>
-                </div>
+                )}
+
+                <span className="text-center w-full text-body-medium-regular text-text-tertiary">
+                    By signing in, you agree to our <br />{' '}
+                    <StyledLink type="external" to="https://www.nango.dev/terms" className="text-text-secondary text-body-medium-regular">
+                        Terms of Service
+                    </StyledLink>{' '}
+                    and{' '}
+                    <StyledLink type="external" to="https://www.nango.dev/privacy-policy" className="text-text-secondary text-body-medium-regular">
+                        Privacy Policy
+                    </StyledLink>
+                    .
+                </span>
             </div>
         </DefaultLayout>
     );
-}
+};
diff --git a/packages/webapp/src/pages/Account/Signup.tsx b/packages/webapp/src/pages/Account/Signup.tsx
index ef4caf28030..c21824fe8a7 100644
--- a/packages/webapp/src/pages/Account/Signup.tsx
+++ b/packages/webapp/src/pages/Account/Signup.tsx
@@ -2,18 +2,23 @@ import { Helmet } from 'react-helmet';
 
 import { SignupForm } from './components/SignupForm';
 import DefaultLayout from '../../layout/DefaultLayout';
+import { StyledLink } from '@/components-v2/StyledLink';
 
 export const Signup: React.FC = () => {
     return (
-        <DefaultLayout>
+        <DefaultLayout className="gap-5">
             <Helmet>
-                <title>Signup - Nango</title>
+                <title>Sign up - Nango</title>
             </Helmet>
-            <div className="flex flex-col justify-center">
-                <div className="w-80">
-                    <SignupForm />
-                </div>
+
+            <div className="flex flex-col gap-3 items-center">
+                <h2 className="text-title-group text-text-primary">Sign up to Nango</h2>
+                <span className="text-body-medium-regular text-text-tertiary">
+                    Already have an account? <StyledLink to="/signin">Log in.</StyledLink>
+                </span>
             </div>
+
+            <SignupForm />
         </DefaultLayout>
     );
 };
diff --git a/packages/webapp/src/pages/Account/VerifyEmail.tsx b/packages/webapp/src/pages/Account/VerifyEmail.tsx
index e34990801b0..baa77283ae4 100644
--- a/packages/webapp/src/pages/Account/VerifyEmail.tsx
+++ b/packages/webapp/src/pages/Account/VerifyEmail.tsx
@@ -1,96 +1,81 @@
-import { Loading } from '@geist-ui/core';
+import { CircleX } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 import { useNavigate, useParams } from 'react-router-dom';
-import { toast } from 'react-toastify';
 
+import { useEmailByUuid, useResendVerificationEmailByUuid } from '../../hooks/useAuth';
 import DefaultLayout from '../../layout/DefaultLayout';
-import { apiFetch } from '../../utils/api';
-
-import type { GetEmailByUuid, ResendVerificationEmailByUuid } from '@nangohq/types';
+import { APIError } from '../../utils/api';
+import { StyledLink } from '@/components-v2/StyledLink';
+import { Alert, AlertDescription } from '@/components-v2/ui/alert';
+import { Button } from '@/components-v2/ui/button';
+import { useToast } from '@/hooks/useToast';
 
 export function VerifyEmail() {
     const [serverErrorMessage, setServerErrorMessage] = useState('');
-    const [email, setEmail] = useState('');
-    const [loaded, setLoaded] = useState(false);
     const navigate = useNavigate();
-
+    const { toast } = useToast();
     const { uuid } = useParams();
 
+    const { data, error } = useEmailByUuid(uuid);
+    const { mutateAsync: resendVerificationEmailByUuid, isPending: isResendingVerificationEmailByUuid } = useResendVerificationEmailByUuid();
+
     useEffect(() => {
-        if (!uuid) {
-            navigate('/');
+        if (data?.verified) {
+            toast({ title: 'Email already verified. Routing to the login page', variant: 'success' });
+            navigate('/signin');
         }
-    }, [uuid, navigate]);
+    }, [data?.verified, navigate, toast]);
 
     useEffect(() => {
-        const getEmail = async () => {
-            const res = await apiFetch(`/api/v1/account/email/${uuid}`);
+        if (error instanceof APIError && error.json && typeof error.json === 'object' && 'error' in error.json) {
+            const err = error.json as { error: { message?: string } };
+            setServerErrorMessage(err.error?.message ?? 'Issue verifying email. Please try again.');
+        }
+    }, [error]);
 
-            if (res?.status === 200) {
-                const response: GetEmailByUuid['Success'] = (await res.json()) as GetEmailByUuid['Success'];
-                const { email, verified } = response;
+    if (!uuid) {
+        // The route doesn't exist without a uuid, so just satisfy the type checker
+        return null;
+    }
 
-                if (verified) {
-                    toast.success('Email already verified. Routing to the login page', { position: toast.POSITION.BOTTOM_CENTER });
-                    navigate('/signin');
-                }
-                setEmail(email);
-            } else {
-                const errorResponse: GetEmailByUuid['Errors'] = (await res.json()) as GetEmailByUuid['Errors'];
-                setServerErrorMessage(errorResponse.error.message || 'Issue verifying email. Please try again.');
+    const handleResendEmail = async () => {
+        setServerErrorMessage('');
+        try {
+            const res = await resendVerificationEmailByUuid({ uuid: uuid });
+            if (res.success) {
+                toast({ title: 'Verification email sent again!', variant: 'success' });
             }
-            setLoaded(true);
-        };
-
-        if (!loaded) {
-            getEmail();
+        } catch {
+            setServerErrorMessage('Issue sending verification email. Please try again.');
         }
-    }, [uuid, loaded, setLoaded, navigate]);
+    };
 
-    const resendEmail = async (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        setServerErrorMessage('');
+    return (
+        <DefaultLayout className="gap-10">
+            <Helmet>
+                <title>Verify Email - Nango</title>
+            </Helmet>
 
-        const res = await apiFetch('/api/v1/account/resend-verification-email/by-uuid', {
-            method: 'POST',
-            body: JSON.stringify({
-                uuid
-            })
-        });
+            <div className="flex flex-col items-center gap-3">
+                <h2 className="text-title-group text-text-primary">Verify your email</h2>
 
-        if (res?.status === 200) {
-            toast.success('Verification email sent again!', { position: toast.POSITION.BOTTOM_CENTER });
-        } else {
-            const response: ResendVerificationEmailByUuid['Errors'] = await res.json();
-            setServerErrorMessage(response.error.message || 'Unkown error...');
-        }
-    };
+                {serverErrorMessage && (
+                    <Alert variant="error">
+                        <CircleX />
+                        <AlertDescription>{serverErrorMessage}</AlertDescription>
+                    </Alert>
+                )}
 
-    if (!loaded) {
-        return <Loading spaceRatio={2.5} className="-top-36" />;
-    }
-    return (
-        <>
-            <DefaultLayout>
-                <div className="flex flex-col justify-center items-center">
-                    <div className="py-3">
-                        <h2 className="mt-4 text-center text-[20px] text-white">Verify your email</h2>
-                        {email ? (
-                            <form className="mt-6 flex flex-col gap-6" onSubmit={resendEmail}>
-                                <span className="text-text-light-gray text-[14px]">Check {email} to verify your account and get started.</span>
-                                <div className="flex justify-center">
-                                    <button className="min-w-8 bg-white flex h-11 justify-center rounded-md border px-4 pt-3 text-[14px] text-black shadow-sm active:ring-2 active:ring-offset-2">
-                                        Resend verification email
-                                    </button>
-                                </div>
-                            </form>
-                        ) : (
-                            <span className="flex text-text-light-gray mb-4 text-[14px] mt-6">Invalid user id. Please try and signup again.</span>
-                        )}
-                        {serverErrorMessage && <p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>}
-                    </div>
-                </div>
-            </DefaultLayout>
-        </>
+                <span className="text-body-medium-regular text-text-secondary text-center">
+                    Check {data?.email || 'your email'} to verify your account and get started. If you verified your email from a different device,{' '}
+                    <StyledLink to="/signin">sign in here</StyledLink>.
+                </span>
+            </div>
+
+            <Button onClick={handleResendEmail} size="lg" className="w-full" loading={isResendingVerificationEmailByUuid}>
+                Resend email
+            </Button>
+        </DefaultLayout>
     );
 }
diff --git a/packages/webapp/src/pages/Account/components/Password.tsx b/packages/webapp/src/pages/Account/components/Password.tsx
index 1da7f928c14..eb2c15ebaf9 100644
--- a/packages/webapp/src/pages/Account/components/Password.tsx
+++ b/packages/webapp/src/pages/Account/components/Password.tsx
@@ -1,69 +1,82 @@
-import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons';
-import { useEffect, useMemo, useState } from 'react';
+import { CheckIcon, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useController, useFormContext } from 'react-hook-form';
+import z from 'zod';
 
-import { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger } from '../../../components/ui/HoverCard';
-import { Input } from '../../../components/ui/input/Input';
-import { cn } from '../../../utils/utils';
+import { FormControl, FormItem, FormMessage, useFormField } from '@/components-v2/ui/form';
+import { InputGroup, InputGroupInput } from '@/components-v2/ui/input-group';
+import { cn } from '@/utils/utils';
+
+export const passwordSchema = z
+    .string()
+    .min(8, 'Password must be at least 8 characters')
+    .refine((value) => /[A-Z]/.test(value), 'Password must contain at least one uppercase letter')
+    .refine((value) => /[0-9]/.test(value), 'Password must contain at least one number')
+    .refine((value) => /[^a-zA-Z0-9]/.test(value), 'Password must contain at least one special character');
+
+export const Password: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = (props) => {
+    const { name } = useFormField();
+    const { control } = useFormContext();
+    const { field, fieldState } = useController({ name, control });
 
-export const Password: React.FC<{ setPassword: (password: string, good: boolean) => void } & React.InputHTMLAttributes<HTMLInputElement>> = ({
-    setPassword,
-    ...props
-}) => {
-    const [local, setLocal] = useState('');
     const [open, setOpen] = useState(false);
-    const checks = useMemo(() => {
-        return {
-            length: local.length >= 8,
-            uppercase: local.match(/[A-Z]/) !== null,
-            number: local.match(/[0-9]/) !== null,
-            special: local.match(/[^a-zA-Z0-9]/) !== null
-        };
-    }, [local]);
 
-    useEffect(() => {
-        setPassword(local, checks.length && checks.uppercase && checks.number && checks.special);
-    }, [checks, local]);
+    const value = String(field.value ?? '');
+
+    const checks = useMemo(
+        () => ({
+            length: value.length >= 8,
+            uppercase: value.match(/[A-Z]/) !== null,
+            number: value.match(/[0-9]/) !== null,
+            special: value.match(/[^a-zA-Z0-9]/) !== null
+        }),
+        [value]
+    );
 
     return (
-        <HoverCard openDelay={0} open={open}>
-            <HoverCardTrigger>
-                <div className="flex flex-col gap-2">
-                    <Input
-                        id="password"
-                        name="password"
+        <FormItem>
+            <FormControl>
+                <InputGroup className="h-11">
+                    <InputGroupInput
+                        {...field}
+                        id={field.name}
                         type="password"
-                        autoComplete="new-password"
                         placeholder="Password"
-                        minLength={8}
-                        maxLength={64}
-                        inputSize="lg"
-                        value={local}
-                        required
-                        onChange={(e) => setLocal(e.target.value)}
-                        className="border-border-gray bg-dark-600"
-                        onFocus={() => setOpen(true)}
-                        onBlur={() => setOpen(false)}
+                        aria-invalid={!!fieldState.error}
+                        aria-describedby="password-requirements"
+                        onFocus={() => {
+                            setOpen(true);
+                        }}
                         {...props}
                     />
-                </div>
-            </HoverCardTrigger>
-            <HoverCardContent align="start" side="right" sideOffset={10} arrowPadding={2}>
-                <HoverCardArrow className="fill-active-gray" />
-                <div className="text-xs text-gray-400 flex flex-col gap-2">
-                    <div className={cn('flex gap-2 items-center', checks.length && 'text-green-base')}>
-                        {checks.length ? <CheckCircledIcon /> : <CrossCircledIcon />} At least 8 characters
-                    </div>
-                    <div className={cn('flex gap-2 items-center', checks.uppercase && 'text-green-base')}>
-                        {checks.uppercase ? <CheckCircledIcon /> : <CrossCircledIcon />} 1 uppercase letter
-                    </div>
-                    <div className={cn('flex gap-2 items-center', checks.number && 'text-green-base')}>
-                        {checks.number ? <CheckCircledIcon /> : <CrossCircledIcon />} 1 number
-                    </div>
-                    <div className={cn('flex gap-2 items-center', checks.special && 'text-green-base')}>
-                        {checks.special ? <CheckCircledIcon /> : <CrossCircledIcon />} 1 special character
-                    </div>
-                </div>
-            </HoverCardContent>
-        </HoverCard>
+                </InputGroup>
+            </FormControl>
+            <FormMessage />
+
+            <div
+                id="password-requirements"
+                className={cn('flex flex-col gap-1.5 overflow-hidden transition-[max-height] duration-200 ease-out', open ? 'max-h-40' : 'max-h-0 absolute')}
+            >
+                <span className="text-body-small-regular text-text-primary">Password must contain:</span>
+                <Requirement text="At least 8 characters" check={checks.length} />
+                <Requirement text="At least one uppercase letter" check={checks.uppercase} />
+                <Requirement text="At least one number" check={checks.number} />
+                <Requirement text="At least one special character" check={checks.special} />
+            </div>
+        </FormItem>
+    );
+};
+
+const Requirement: React.FC<{ text: string; check: boolean }> = ({ text, check }) => {
+    return (
+        <span
+            className={cn(
+                'inline-flex items-center gap-1 !text-body-small-regular text-text-primary',
+                check ? 'text-feedback-success-fg' : 'text-text-tertiary'
+            )}
+        >
+            {check ? <CheckIcon className="size-4" /> : <X className="size-4" />}
+            {text}
+        </span>
     );
 };
diff --git a/packages/webapp/src/pages/Account/components/SignupForm.tsx b/packages/webapp/src/pages/Account/components/SignupForm.tsx
index 5f1b139bc2b..64126bcfe10 100644
--- a/packages/webapp/src/pages/Account/components/SignupForm.tsx
+++ b/packages/webapp/src/pages/Account/components/SignupForm.tsx
@@ -1,159 +1,188 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { CircleX, ExternalLink, Loader2, TriangleAlert } from 'lucide-react';
 import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import z from 'zod';
 
-import { Password } from './Password';
-import GoogleButton from '../../../components/ui/button/Auth/Google';
-import { Button } from '../../../components/ui/button/Button';
-import { Input } from '../../../components/ui/input/Input';
-import { apiFetch, useSignupAPI } from '../../../utils/api';
-import { globalEnv } from '../../../utils/env';
+import GoogleButton from '@/components/ui/button/Auth/Google';
+import { StyledLink } from '@/components-v2/StyledLink';
+import { Alert, AlertActions, AlertButton, AlertDescription, AlertTitle } from '@/components-v2/ui/alert';
+import { Button } from '@/components-v2/ui/button';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components-v2/ui/form';
+import { InputGroup, InputGroupInput } from '@/components-v2/ui/input-group';
+import { useResendVerificationEmail, useSignupAPI } from '@/hooks/useAuth';
+import { useToast } from '@/hooks/useToast';
+import { Password, passwordSchema } from '@/pages/Account/components/Password';
+import { APIError } from '@/utils/api';
+import { globalEnv } from '@/utils/env';
 
-import type { ApiInvitation, PostSignup } from '@nangohq/types';
+import type { ApiInvitation } from '@nangohq/types';
+
+const signupSchema = z.object({
+    name: z.string().min(1, 'Name is required'),
+    email: z.string().email('Please enter a valid email address'),
+    password: passwordSchema
+});
+
+type SignupFormData = z.infer<typeof signupSchema>;
 
 export const SignupForm: React.FC<{ invitation?: ApiInvitation; token?: string }> = ({ invitation, token }) => {
+    const form = useForm<SignupFormData>({
+        resolver: zodResolver(signupSchema),
+        defaultValues: {
+            name: '',
+            email: invitation?.email || '',
+            password: ''
+        },
+        mode: 'onTouched'
+    });
+
     const navigate = useNavigate();
-    const signupAPI = useSignupAPI();
+    const { toast } = useToast();
+
+    const { mutateAsync: signupMutation, isPending } = useSignupAPI();
+    const { mutateAsync: resendVerificationEmailMutation, isPending: isResendingEmail } = useResendVerificationEmail();
 
     const [serverErrorMessage, setServerErrorMessage] = useState('');
     const [showResendEmail, setShowResendEmail] = useState(false);
-    const [email, setEmail] = useState(() => invitation?.email || '');
-    const [name, setName] = useState('');
-    const [password, setPassword] = useState('');
-    const [passwordStrength, setPasswordStrength] = useState(false);
-    const [loading, setLoading] = useState(false);
-
-    const handleSubmit = async (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        setServerErrorMessage('');
-        setShowResendEmail(false);
-        setLoading(true);
-
-        const res = await signupAPI({ name, email, password, token });
-
-        if (res?.status === 200) {
-            const response: PostSignup['Success'] = await res.json();
-            const {
-                data: { uuid, verified }
-            } = response;
 
-            if (!verified) {
-                navigate(`/verify-email/${uuid}`);
-            } else {
-                navigate('/');
+    const onSubmitForm = async (data: SignupFormData) => {
+        setServerErrorMessage('');
+        try {
+            const res = await signupMutation(token ? { ...data, token } : data);
+            if (res.status === 200) {
+                const { uuid, verified } = res.json.data;
+                if (!verified) {
+                    navigate(`/verify-email/${uuid}`);
+                } else {
+                    navigate('/');
+                    if (invitation) {
+                        toast({ title: 'You are now a member of the team', variant: 'success' });
+                    }
+                }
+                return;
             }
-        } else {
-            const errorResponse: PostSignup['Errors'] = await res?.json();
-            if (errorResponse.error.code === 'email_not_verified') {
+
+            setServerErrorMessage(res.json.error.message || 'Issue signing up. Please try again.');
+            if (res.json.error.code === 'email_not_verified') {
                 setShowResendEmail(true);
             }
-            setServerErrorMessage(errorResponse?.error?.message || 'Issue signing up. Please try again.');
+        } catch {
+            setServerErrorMessage('Issue signing up. Please try again.');
         }
-        setLoading(false);
     };
 
     const resendVerificationEmail = async () => {
-        setShowResendEmail(false);
         setServerErrorMessage('');
 
-        const res = await apiFetch('/api/v1/account/resend-verification-email/by-email', {
-            method: 'POST',
-            body: JSON.stringify({
-                email
-            })
-        });
-
-        if (res?.status === 200) {
-            setServerErrorMessage('Verification email sent.');
-        } else {
-            setServerErrorMessage('Issue sending verification email. Please try again.');
+        const email = form.getValues('email');
+
+        try {
+            await resendVerificationEmailMutation({ email });
+            toast({
+                title: 'Verification email sent.',
+                variant: 'success'
+            });
+        } catch (err) {
+            if (err instanceof APIError && err.json?.error?.message) {
+                setServerErrorMessage(err.json.error.message);
+            } else {
+                setServerErrorMessage('Issue sending verification email. Please try again.');
+            }
         }
+        setShowResendEmail(false);
     };
 
     return (
-        <>
-            <div className="flex flex-col justify-center">
-                <h2 className="mt-4 text-center text-[20px] text-white">Sign up to Nango</h2>
-                <form className="mt-6 flex flex-col gap-6" onSubmit={handleSubmit}>
-                    <div className="flex flex-col gap-6">
-                        <Input
-                            id="name"
+        <div className="flex flex-col gap-10 w-full">
+            <div className="flex flex-col gap-5 w-full">
+                {serverErrorMessage && !showResendEmail && (
+                    <Alert variant="error">
+                        <CircleX />
+                        <AlertDescription>{serverErrorMessage}</AlertDescription>
+                    </Alert>
+                )}
+
+                {showResendEmail && (
+                    <Alert variant="warning">
+                        <TriangleAlert />
+                        <AlertTitle>Please verify your email</AlertTitle>
+                        <AlertDescription>We&apos;ve sent a verification email to {form.getValues('email')}.</AlertDescription>
+                        <AlertActions>
+                            <AlertButton onClick={resendVerificationEmail} variant="warning" disabled={isResendingEmail}>
+                                Resend
+                                {isResendingEmail ? <Loader2 className="animate-spin" /> : <ExternalLink />}
+                            </AlertButton>
+                        </AlertActions>
+                    </Alert>
+                )}
+
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmitForm)} className="w-full flex flex-col gap-5">
+                        <FormField
+                            control={form.control}
                             name="name"
-                            type="text"
-                            autoComplete="name"
-                            autoFocus
-                            minLength={1}
-                            placeholder="Name"
-                            maxLength={100}
-                            inputSize="lg"
-                            value={name}
-                            required
-                            onChange={(e) => setName(e.target.value)}
-                            className="border-border-gray bg-dark-600"
+                            render={({ field, fieldState }) => (
+                                <FormItem>
+                                    <FormControl>
+                                        <InputGroup className="h-11">
+                                            <InputGroupInput placeholder="Name" {...field} aria-invalid={!!fieldState.error} />
+                                        </InputGroup>
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
                         />
-
-                        <Input
-                            id="email"
+                        <FormField
+                            control={form.control}
                             name="email"
-                            type="email"
-                            autoComplete="email"
-                            placeholder="Email"
-                            inputSize="lg"
-                            value={email}
-                            required
-                            onChange={(e) => setEmail(e.target.value)}
-                            disabled={Boolean(invitation?.email)}
-                            className="border-border-gray bg-dark-600"
+                            render={({ field, fieldState }) => (
+                                <FormItem>
+                                    <FormControl>
+                                        <InputGroup className="h-11">
+                                            <InputGroupInput disabled={!!invitation?.email} placeholder="Email" {...field} aria-invalid={!!fieldState.error} />
+                                        </InputGroup>
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
                         />
 
-                        <Password
-                            setPassword={(tmpPass, tmpStrength) => {
-                                setPassword(tmpPass);
-                                setPasswordStrength(tmpStrength);
-                            }}
-                        />
-                    </div>
+                        <FormField control={form.control} name="password" render={() => <Password autoComplete="new-password" />} />
 
-                    <div className="grid">
-                        <Button
-                            type="submit"
-                            size={'lg'}
-                            className="justify-center disabled:bg-dark-700"
-                            disabled={!name || !email || !password || !passwordStrength}
-                            isLoading={loading}
-                        >
-                            Sign up
+                        <Button type="submit" size="lg" className="w-full" loading={isPending} disabled={!form.formState.isValid}>
+                            {isPending ? 'Signing up...' : 'Sign up'}
                         </Button>
-                        {serverErrorMessage && (
-                            <>
-                                <p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>
-                                {showResendEmail && (
-                                    <Button onClick={resendVerificationEmail} className="flex justify-center mt-2 text-light-gray" variant="danger">
-                                        Resend verification email
-                                    </Button>
-                                )}
-                            </>
-                        )}
-                    </div>
-                </form>
+                    </form>
+                </Form>
+            </div>
+
+            <div className="flex flex-col gap-10 w-full">
                 {globalEnv.features.managedAuth && (
-                    <>
-                        <div className="flex items-center justify-center my-4 text-xs">
-                            <div className="border-t border-gray-600 grow mr-7"></div>
-                            <span className="text-dark-500">or continue with</span>
-                            <div className="border-t border-gray-600 grow ml-7"></div>
+                    <div className="flex flex-col gap-5 items-center w-full">
+                        <div className="flex items-center justify-center gap-3 w-full">
+                            <div className="border-t-[0.5px] border-border-strong w-full"></div>
+                            <span className="text-body-medium-regular text-text-secondary shrink-0">or continue with</span>
+                            <div className="border-t-[0.5px] border-border-strong w-full"></div>
                         </div>
-                        <GoogleButton text="Sign up with Google" setServerErrorMessage={setServerErrorMessage} token={token} />
-                    </>
+
+                        <GoogleButton text="Sign up with Google" setServerErrorMessage={setServerErrorMessage} />
+                    </div>
                 )}
+
+                <span className="text-center w-full text-body-medium-regular text-text-tertiary">
+                    By signing up, you agree to our <br />{' '}
+                    <StyledLink type="external" to="https://www.nango.dev/terms" className="text-text-secondary text-body-medium-regular">
+                        Terms of Service
+                    </StyledLink>{' '}
+                    and{' '}
+                    <StyledLink type="external" to="https://www.nango.dev/privacy-policy" className="text-text-secondary text-body-medium-regular">
+                        Privacy Policy
+                    </StyledLink>
+                    .
+                </span>
             </div>
-            <div className="grid text-xs">
-                <div className="mt-7 flex place-self-center">
-                    <p className="text-dark-500">Already have an account?</p>
-                    <Link to="/signin" className="text-white ml-1">
-                        Sign in.
-                    </Link>
-                </div>
-            </div>
-        </>
+        </div>
     );
 };
diff --git a/packages/webapp/src/pages/Onboarding/HearAboutUs.tsx b/packages/webapp/src/pages/Onboarding/HearAboutUs.tsx
index ad661d36928..2ed442e0f44 100644
--- a/packages/webapp/src/pages/Onboarding/HearAboutUs.tsx
+++ b/packages/webapp/src/pages/Onboarding/HearAboutUs.tsx
@@ -1,15 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate } from 'react-router-dom';
 
+import { useOnboardingHearAboutUs, usePostOnboardingHearAboutUs } from '../../hooks/useAuth';
 import DefaultLayout from '../../layout/DefaultLayout';
 import { useAnalyticsTrack } from '../../utils/analytics';
-import { apiFetch } from '../../utils/api';
 import { Button } from '@/components-v2/ui/button';
 import { Skeleton } from '@/components-v2/ui/skeleton';
-import { useToast } from '@/hooks/useToast';
 
-import type { GetOnboardingHearAboutUs, PostOnboardingHearAboutUs } from '@nangohq/types';
+import type { PostOnboardingHearAboutUs } from '@nangohq/types';
 
 const HEAR_ABOUT_OPTIONS: { label: string; value: PostOnboardingHearAboutUs['Body']['source'] }[] = [
     { label: 'My team is already using Nango', value: 'my_team_already_using' },
@@ -24,100 +23,78 @@ const HEAR_ABOUT_OPTIONS: { label: string; value: PostOnboardingHearAboutUs['Bod
 export const HearAboutUs: React.FC = () => {
     const navigate = useNavigate();
     const analyticsTrack = useAnalyticsTrack();
-    const { toast } = useToast();
-    const [loading, setLoading] = useState(true);
-    const [submitting, setSubmitting] = useState(false);
+
+    const { data, isLoading, error } = useOnboardingHearAboutUs();
+    const { mutateAsync: postHearAboutUs, isPending } = usePostOnboardingHearAboutUs();
 
     useEffect(() => {
-        if (sessionStorage.getItem('show-email-verified-toast') !== 'true') {
+        if (error) {
+            navigate('/', { replace: true });
             return;
         }
-
-        sessionStorage.removeItem('show-email-verified-toast');
-        toast({ title: 'Email verified successfully!', variant: 'success' });
-    }, [toast]);
-
-    useEffect(() => {
-        const check = async () => {
-            const res = await apiFetch('/api/v1/account/onboarding/hear-about-us');
-            if (res.status !== 200) {
-                navigate('/', { replace: true });
-                return;
-            }
-            const data = (await res.json()) as GetOnboardingHearAboutUs['Success'];
-            if (!data.data.showHearAboutUs) {
-                navigate('/', { replace: true });
-                return;
-            }
-            setLoading(false);
-        };
-        void check();
-    }, [navigate]);
+        if (data && !data.data.showHearAboutUs) {
+            navigate('/', { replace: true });
+        }
+    }, [data, error, navigate]);
 
     const submit = async (source: PostOnboardingHearAboutUs['Body']['source']) => {
-        setSubmitting(true);
         analyticsTrack('signup_hear_about', { source });
         try {
-            const res = await apiFetch('/api/v1/account/onboarding/hear-about-us', {
-                method: 'POST',
-                body: JSON.stringify({ source })
-            });
-            if (res.status === 200) {
-                navigate('/', { replace: true });
-            }
+            await postHearAboutUs({ source });
         } finally {
-            setSubmitting(false);
+            // Don't block on errors as this is not critical
+            navigate('/', { replace: true });
         }
     };
 
-    if (loading) {
+    if (isLoading) {
         return (
-            <DefaultLayout>
+            <DefaultLayout className="gap-10">
                 <Helmet>
                     <title>How did you hear about Nango? - Nango</title>
                 </Helmet>
-                <div className="mt-4 flex flex-col items-center justify-center">
-                    <Skeleton className="h-8 w-80 bg-bg-subtle" />
-                    <div className="mt-10 flex w-full flex-col gap-4">
-                        {Array.from({ length: HEAR_ABOUT_OPTIONS.length }).map((_, index) => (
-                            <Skeleton key={index} className="h-12 w-full bg-bg-subtle" />
-                        ))}
-                    </div>
-                    <Skeleton className="mt-6 h-5 w-16 bg-bg-subtle" />
+
+                <Skeleton className="h-6 w-80 bg-bg-subtle" />
+
+                <div className="flex w-full flex-col gap-4">
+                    {Array.from({ length: HEAR_ABOUT_OPTIONS.length }).map((_, index) => (
+                        <Skeleton key={index} className="h-12 w-full bg-bg-subtle" />
+                    ))}
                 </div>
+
+                <Skeleton className="h-5 w-32 bg-bg-subtle" />
             </DefaultLayout>
         );
     }
 
     return (
-        <DefaultLayout>
+        <DefaultLayout className="gap-10">
             <Helmet>
                 <title>How did you hear about Nango? - Nango</title>
             </Helmet>
-            <div className="mt-4 flex flex-col justify-center items-center">
-                <h2 className="text-center text-title-group text-text-primary mb-4">How did you hear about Nango?</h2>
-                <div className="mt-6 flex w-full flex-col gap-4">
-                    {HEAR_ABOUT_OPTIONS.map(({ label, value }) => (
-                        <Button
-                            variant="secondary"
-                            key={value}
-                            disabled={submitting}
-                            onClick={() => submit(value)}
-                            className="w-full bg-bg-subtle p-[12px] h-auto justify-start"
-                        >
-                            {label}
-                        </Button>
-                    ))}
-                </div>
-                <Button
-                    variant="ghost"
-                    onClick={() => submit('skipped')}
-                    disabled={submitting}
-                    className="mt-6 text-text-tertiary underline hover:text-text-secondary"
-                >
-                    Skip
-                </Button>
+
+            <h2 className="text-center text-title-group text-text-primary">How did you hear about Nango?</h2>
+
+            <div className="flex w-full flex-col gap-4">
+                {HEAR_ABOUT_OPTIONS.map(({ label, value }) => (
+                    <Button
+                        variant="secondary"
+                        key={value}
+                        loading={isPending}
+                        onClick={() => submit(value)}
+                        className="w-full bg-bg-subtle p-3 h-auto justify-start"
+                    >
+                        {label}
+                    </Button>
+                ))}
             </div>
+
+            <span className="text-body-medium-regular text-text-tertiary">
+                Not sure?{' '}
+                <span className="text-text-primary underline hover:text-text-secondary cursor-pointer" onClick={() => submit('skipped')}>
+                    Skip for now
+                </span>
+            </span>
         </DefaultLayout>
     );
 };
diff --git a/packages/webapp/src/utils/api.tsx b/packages/webapp/src/utils/api.tsx
index 1a97413d3da..50b93538c94 100644
--- a/packages/webapp/src/utils/api.tsx
+++ b/packages/webapp/src/utils/api.tsx
@@ -2,7 +2,7 @@ import { toast } from 'react-toastify';
 
 import { globalEnv } from './env';
 
-import type { ApiError, PostSignup } from '@nangohq/types';
+import type { ApiError } from '@nangohq/types';
 
 export async function apiFetch(input: string | URL | Request, init?: RequestInit) {
     return await fetch(new URL(input as string, globalEnv.apiUrl), {
@@ -63,53 +63,6 @@ function serverErrorToast() {
     toast.error('Server error...', { position: toast.POSITION.BOTTOM_CENTER });
 }
 
-export function useLogoutAPI() {
-    return async () => {
-        const options = {
-            method: 'POST'
-        };
-
-        await apiFetch('/api/v1/account/logout', options);
-    };
-}
-
-export function useSignupAPI() {
-    return async (body: PostSignup['Body']) => {
-        try {
-            const options = {
-                method: 'POST',
-                body: JSON.stringify(body)
-            };
-
-            return await apiFetch('/api/v1/account/signup', options);
-        } catch {
-            requestErrorToast();
-        }
-    };
-}
-
-export function useSigninAPI() {
-    return async (email: string, password: string) => {
-        try {
-            const options = {
-                method: 'POST',
-                body: JSON.stringify({ email: email, password: password })
-            };
-
-            const res = await apiFetch('/api/v1/account/signin', options);
-
-            if (res.status !== 200 && res.status !== 401 && res.status !== 400) {
-                serverErrorToast();
-                return;
-            }
-
-            return res;
-        } catch {
-            requestErrorToast();
-        }
-    };
-}
-
 export function useHostedSigninAPI() {
     return async () => {
         try {
@@ -127,36 +80,6 @@ export function useHostedSigninAPI() {
     };
 }
 
-export function useRequestPasswordResetAPI() {
-    return async (email: string) => {
-        try {
-            const res = await apiFetch(`/api/v1/account/forgot-password`, {
-                method: 'POST',
-                body: JSON.stringify({ email: email })
-            });
-
-            return res;
-        } catch {
-            requestErrorToast();
-        }
-    };
-}
-
-export function useResetPasswordAPI() {
-    return async (token: string, password: string) => {
-        try {
-            const res = await apiFetch(`/api/v1/account/reset-password`, {
-                method: 'PUT',
-                body: JSON.stringify({ password: password, token: token })
-            });
-
-            return res;
-        } catch {
-            requestErrorToast();
-        }
-    };
-}
-
 export function useGetHmacAPI(env: string) {
     return async (providerConfigKey: string, connectionId: string) => {
         try {
diff --git a/packages/webapp/src/utils/user.tsx b/packages/webapp/src/utils/user.tsx
index 9c26c24546c..f8d289da310 100644
--- a/packages/webapp/src/utils/user.tsx
+++ b/packages/webapp/src/utils/user.tsx
@@ -1,7 +1,8 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useSWRConfig } from 'swr';
 
 import { useAnalyticsIdentify, useAnalyticsReset } from './analytics';
-import { useLogoutAPI } from '../utils/api';
+import { useLogoutAPI } from '../hooks/useAuth';
 import storage, { LocalStorageKeys } from '../utils/local-storage';
 
 import type { ApiUser } from '@nangohq/types';
@@ -21,9 +22,9 @@ export function useSignin() {
 
 export function useSignout() {
     const analyticsReset = useAnalyticsReset();
-    //const nav = useNavigate();
     const { mutate, cache } = useSWRConfig();
-    const logoutAPI = useLogoutAPI();
+    const queryClient = useQueryClient();
+    const { mutateAsync: logoutAPI } = useLogoutAPI();
 
     return async () => {
         storage.clear();
@@ -31,6 +32,8 @@ export function useSignout() {
         await logoutAPI(); // Destroy server session.
 
         await mutate(() => true, undefined, { revalidate: false }); // clean all cache
+        await queryClient.cancelQueries();
+        queryClient.clear();
 
         // swr/infinite doesn't currently support clearing cache keys with the
         // default mechanism. see https://github.com/vercel/swr/issues/2497