diff --git a/src/app/(auth-pages)/forgot-password/page.tsx b/src/app/(auth-pages)/forgot-password/page.tsx
index d7d5eed..6a3f5a1 100644
--- a/src/app/(auth-pages)/forgot-password/page.tsx
+++ b/src/app/(auth-pages)/forgot-password/page.tsx
@@ -1,35 +1,123 @@
+'use client';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
 import Link from 'next/link';
 import { forgotPassword } from '@/lib/actions';
-import { FormMessage, type Message, SubmitButton } from '@/components/default';
-import { Input, Label } from '@/components/ui';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';
+
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+})
+
+const ForgotPassword = () => {
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+
+  const handleForgotPassword = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData  = new FormData();
+      formData.append('email', values.email);
+      const result = await forgotPassword(formData);
+      if (result?.success) {
+        await refreshUserData();
+        setStatusMessage(result?.data ?? 'Check your email for a link to reset your password.')
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`)
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
+      );
+    }
+  };
 
-const ForgotPassword = async (props: { searchParams: Promise<Message> }) => {
-  const searchParams = await props.searchParams;
   return (
-    <>
-      <form
-        className='flex-1 flex flex-col w-full gap-2 text-foreground
-        [&>input]:mb-6 min-w-64 max-w-64 mx-auto'
-      >
-        <div>
-          <h1 className='text-2xl font-medium'>Reset Password</h1>
-          <p className='text-sm text-secondary-foreground'>
-            Already have an account?{' '}
-            <Link className='text-primary underline' href='/sign-in'>
-              Sign in
+      <Card>
+        <CardHeader>
+          <CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
+          <CardDescription className='text-sm text-foreground'>
+            Don&apos;t have an account?{' '}
+            <Link className='font-medium underline' href='/sign-up'>
+              Sign up
             </Link>
-          </p>
-        </div>
-        <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
-          <Label htmlFor='email'>Email</Label>
-          <Input name='email' placeholder='you@example.com' required />
-          <SubmitButton formAction={forgotPassword}>
-            Reset Password
-          </SubmitButton>
-          <FormMessage message={searchParams} />
-        </div>
-      </form>
-    </>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form} >
+            <form
+              onSubmit={form.handleSubmit(handleForgotPassword)}
+              className='flex flex-col min-w-64 space-y-6'
+            >
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input type='email' placeholder='you@example.com' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <SubmitButton
+                disabled={isLoading}
+                pendingText='Resetting Password...'
+              >
+                Reset Password
+              </SubmitButton>
+              {statusMessage && (
+                statusMessage.includes('Error') ||
+                  statusMessage.includes('error') ||
+                  statusMessage.includes('failed') ||
+                  statusMessage.includes('invalid')
+                  ? <StatusMessage message={{error: statusMessage}} />
+                  : <StatusMessage message={{ success: statusMessage }} />
+              )}
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
   );
 };
 export default ForgotPassword;
diff --git a/src/app/(auth-pages)/profile/page.tsx b/src/app/(auth-pages)/profile/page.tsx
index be7610c..39a6147 100644
--- a/src/app/(auth-pages)/profile/page.tsx
+++ b/src/app/(auth-pages)/profile/page.tsx
@@ -2,7 +2,7 @@
 import { useAuth } from '@/components/context/auth';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
-import { AvatarUpload, ProfileForm, ResetPasswordForm } from '@/components/default/profile';
+import { AvatarUpload, ProfileForm, ResetPasswordForm, SignOut } from '@/components/default/profile';
 import {
   Card,
   CardHeader,
@@ -100,6 +100,8 @@ const ProfilePage = () => {
               <ProfileForm onSubmit={handleProfileSubmit} />
               <Separator />
               <ResetPasswordForm onSubmit={handleResetPasswordSubmit} />
+              <Separator />
+              <SignOut />
             </div>
           )}
       </Card>
diff --git a/src/app/(auth-pages)/sign-in/page.tsx b/src/app/(auth-pages)/sign-in/page.tsx
index 1cb2954..ab1e508 100644
--- a/src/app/(auth-pages)/sign-in/page.tsx
+++ b/src/app/(auth-pages)/sign-in/page.tsx
@@ -4,7 +4,6 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
   Card,
   CardContent,
   CardDescription,
@@ -12,20 +11,18 @@ import {
   CardTitle,
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
   Input,
-  Label,
 } from '@/components/ui';
 import Link from 'next/link';
 import { signIn } from '@/lib/actions';
-import { SubmitButton } from '@/components/default';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/components/context/auth';
 import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';
 
 const formSchema = z.object({
   email: z.string().email({
@@ -58,6 +55,7 @@ const Login = () => {
 
   const handleSignIn = async (values: z.infer<typeof formSchema>) => {
     try {
+      setStatusMessage('');
       const formData  = new FormData();
       formData.append('email', values.email);
       formData.append('password', values.password);
@@ -77,7 +75,7 @@ const Login = () => {
   };
 
   return (
-    <Card>
+    <Card className='min-w-xs md:min-w-sm'>
       <CardHeader>
         <CardTitle className='text-2xl font-medium'>
           Sign In
@@ -131,15 +129,12 @@ const Login = () => {
               )}
             />
             {statusMessage && (
-              <div
-                className={`text-sm text-center ${
-                  statusMessage.includes('Error') || statusMessage.includes('failed')
-                    ? 'text-destructive'
-                    : 'text-green-800'
-                }`}
-              >
-                {statusMessage}
-              </div>
+              statusMessage.includes('Error') ||
+                statusMessage.includes('error') ||
+                statusMessage.includes('failed') ||
+                statusMessage.includes('invalid')
+                ? <StatusMessage message={{error: statusMessage}} />
+                : <StatusMessage message={{ message: statusMessage }} />
             )}
             <SubmitButton
               disabled={isLoading}
diff --git a/src/app/(auth-pages)/sign-up/page.tsx b/src/app/(auth-pages)/sign-up/page.tsx
index f005c36..7719b57 100644
--- a/src/app/(auth-pages)/sign-up/page.tsx
+++ b/src/app/(auth-pages)/sign-up/page.tsx
@@ -1,53 +1,184 @@
+'use client';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import Link from 'next/link';
 import { signUp } from '@/lib/actions';
-import { FormMessage, type Message, SubmitButton } from '@/components/default';
-import { Input, Label } from '@/components/ui';
-import { redirect } from 'next/navigation';
-import { getUser } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+import { useEffect, useState } from 'react';
 
-const SignUp = async (props: { searchParams: Promise<Message> }) => {
-  const searchParams = await props.searchParams;
-  const user = await getUser();
-  if (user.success) redirect('/profile');
-  if ('message' in searchParams) {
-    return (
-      <div
-        className='w-full flex-1 flex items-center h-screen
-        sm:max-w-md justify-center gap-2 p-4'
-      >
-        <FormMessage message={searchParams} />
-      </div>
-    );
-  } else {
-    return (
-      <form className='flex flex-col min-w-64 max-w-64 mx-auto'>
-        <h1 className='text-2xl font-medium'>Sign up</h1>
-        <p className='text-sm text text-foreground'>
+const formSchema = z
+  .object({
+    name: z.string().min(2, {
+      message: 'Name must be at least 2 characters.',
+    }),
+    email: z.string().email({
+      message: 'Please enter a valid email address.',
+    }),
+    password: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+    confirmPassword: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match!',
+    path: ['confirmPassword'],
+  });
+
+const SignUp = () => {
+
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+    },
+    mode: 'onChange',
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+  const handleSignUp = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData  = new FormData();
+      formData.append('name', values.name);
+      formData.append('email', values.email);
+      formData.append('password', values.password);
+      const result = await signUp(formData);
+      if (result?.success) {
+        await refreshUserData();
+        setStatusMessage(
+          result.data ??
+          'Thanks for signing up! Please check your email for a verification link.'
+        );
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`)
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
+      );
+    }
+  };
+
+  return (
+    <Card className='min-w-xs md:min-w-sm'>
+      <CardHeader>
+        <CardTitle className='text-2xl font-medium'>
+          Sign Up
+        </CardTitle>
+        <CardDescription className='text text-foreground'>
           Already have an account?{' '}
           <Link className='text-primary font-medium underline' href='/sign-in'>
             Sign in
           </Link>
-        </p>
-        <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
-          <Label htmlFor='name'>Name</Label>
-          <Input name='name' placeholder='Full Name' required />
-          <Label htmlFor='email'>Email</Label>
-          <Input name='email' placeholder='you@example.com' required />
-          <Label htmlFor='password'>Password</Label>
-          <Input
-            type='password'
-            name='password'
-            placeholder='Your password'
-            minLength={6}
-            required
-          />
-          <SubmitButton formAction={signUp} pendingText='Signing up...'>
-            Sign up
-          </SubmitButton>
-          <FormMessage message={searchParams} />
-        </div>
-      </form>
-    );
-  }
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSignUp)} className='flex flex-col mx-auto space-y-4'>
+            <FormField
+              control={form.control}
+              name='name'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input type='text' placeholder='Full Name' {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type='email' placeholder='you@example.com' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )} 
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' placeholder='Your password' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' placeholder='Confirm password' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage && (
+              statusMessage.includes('Error') ||
+                statusMessage.includes('error') ||
+                statusMessage.includes('failed') ||
+                statusMessage.includes('invalid')
+                ? <StatusMessage message={{error: statusMessage}} />
+                : <StatusMessage message={{ success: statusMessage }} />
+            )}
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Signing Up...'
+            >
+              Sign up
+            </SubmitButton>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
 };
 export default SignUp;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f3c6a1e..80d8fc0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -195,7 +195,10 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
             <main className='min-h-screen flex flex-col items-center'>
               <div className='flex-1 w-full flex flex-col gap-20 items-center'>
                 <Navigation />
-                <div className='flex flex-col gap-20 max-w-5xl p-5 w-full'>
+                <div
+                  className='flex flex-col gap-20 max-w-5xl
+                    p-5 w-full items-center'
+                >
                   {children}
                 </div>
               </div>
diff --git a/src/components/default/footer/index.tsx b/src/components/default/footer/index.tsx
index 84a02ef..7379740 100644
--- a/src/components/default/footer/index.tsx
+++ b/src/components/default/footer/index.tsx
@@ -1,6 +1,6 @@
 'use server';
 
-const FooterTest = () => {
+const Footer = () => {
   return (
     <footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
       <p>
@@ -17,4 +17,4 @@ const FooterTest = () => {
     </footer>
   );
 };
-export default FooterTest;
+export default Footer;
diff --git a/src/components/default/form-message.tsx b/src/components/default/form-message.tsx
deleted file mode 100644
index 42b9a7b..0000000
--- a/src/components/default/form-message.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export const FormMessage = ({ message }: { message: Message }) => {
-  return (
-    <div className='flex flex-col gap-2 w-full max-w-md text-sm'>
-      {'success' in message && (
-        <div className='text-foreground border-l-2 border-foreground px-4'>
-          {message.success}
-        </div>
-      )}
-      {'error' in message && (
-        <div className='text-destructive-foreground border-l-2 border-destructive-foreground px-4'>
-          {message.error}
-        </div>
-      )}
-      {'message' in message && (
-        <div className='text-foreground border-l-2 px-4'>{message.message}</div>
-      )}
-    </div>
-  );
-};
diff --git a/src/components/default/index.tsx b/src/components/default/index.tsx
index 3a200fb..dfb263d 100644
--- a/src/components/default/index.tsx
+++ b/src/components/default/index.tsx
@@ -1,4 +1,2 @@
-import { FormMessage, type Message } from '@/components/default/form-message';
-import { SubmitButton } from '@/components/default/submit-button';
-
-export { FormMessage, type Message, SubmitButton };
+export { StatusMessage, type Message } from '@/components/default/status-message';
+export { SubmitButton } from '@/components/default/submit-button';
diff --git a/src/components/default/profile/ProfileForm.tsx b/src/components/default/profile/ProfileForm.tsx
index dab38ab..aaa7de3 100644
--- a/src/components/default/profile/ProfileForm.tsx
+++ b/src/components/default/profile/ProfileForm.tsx
@@ -2,7 +2,6 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
   CardContent,
   Form,
   FormControl,
@@ -13,9 +12,9 @@ import {
   FormMessage,
   Input,
 } from '@/components/ui';
-import { Loader2 } from 'lucide-react';
 import { useEffect } from 'react';
 import { useAuth } from '@/components/context/auth';
+import { SubmitButton } from '@/components/default';
 
 const formSchema = z.object({
   full_name: z.string().min(5, {
@@ -90,16 +89,12 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
           />
 
           <div className='flex justify-center'>
-            <Button type='submit' disabled={isLoading}>
-              {isLoading ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  Saving...
-                </>
-              ) : (
-                'Save Changes'
-              )}
-            </Button>
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Saving...'
+            >
+              Save Changes
+            </SubmitButton>
           </div>
         </form>
       </Form>
diff --git a/src/components/default/profile/ResetPasswordForm.tsx b/src/components/default/profile/ResetPasswordForm.tsx
index a138088..340fb6d 100644
--- a/src/components/default/profile/ResetPasswordForm.tsx
+++ b/src/components/default/profile/ResetPasswordForm.tsx
@@ -18,7 +18,7 @@ import {
 import { SubmitButton } from '@/components/default';
 import { useState } from 'react';
 import { type Result } from '@/lib/actions';
-import { FormMessage as Pw } from '@/components/default';
+import { StatusMessage } from '@/components/default';
 
 const formSchema = z
   .object({
@@ -85,65 +85,64 @@ export const ResetPasswordForm = ({
         </CardDescription>
       </CardHeader>
       <CardContent>
-
-      <Form {...form}>
-        <form 
-          onSubmit={form.handleSubmit(handleUpdatePassword)}
-          className='space-y-6'
-        >
-          <FormField
-            control={form.control}
-            name='password'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>New Password</FormLabel>
-                <FormControl>
-                  <Input type='password' {...field} />
-                </FormControl>
-                <FormDescription>
-                  Enter your new password. Must be at least 8 characters.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
+        <Form {...form}>
+          <form 
+            onSubmit={form.handleSubmit(handleUpdatePassword)}
+            className='space-y-6'
+          >
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Enter your new password. Must be at least 8 characters.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Please re-enter your new password to confirm.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage && (
+              <div 
+                className={`text-sm text-center ${
+                  statusMessage.includes('Error') || statusMessage.includes('failed') 
+                    ? 'text-destructive' 
+                    : 'text-green-600'
+                }`}
+              >
+                {statusMessage}
+              </div>
             )}
-          />
-          <FormField
-            control={form.control}
-            name='confirmPassword'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Confirm Password</FormLabel>
-                <FormControl>
-                  <Input type='password' {...field} />
-                </FormControl>
-                <FormDescription>
-                  Please re-enter your new password to confirm.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          {statusMessage && (
-            <div 
-              className={`text-sm text-center ${
-                statusMessage.includes('Error') || statusMessage.includes('failed') 
-                  ? 'text-destructive' 
-                  : 'text-green-600'
-              }`}
-            >
-              {statusMessage}
+            <div className='flex justify-center'>
+              <SubmitButton
+                disabled={isLoading}
+                pendingText='Updating Password...'
+              >
+                Update Password
+              </SubmitButton>
             </div>
-          )}
-          <div className='flex justify-center'>
-            <SubmitButton
-              disabled={isLoading}
-              pendingText='Updating Password...'
-            >
-              Update Password
-            </SubmitButton>
-          </div>
-        </form>
-      </Form>
+          </form>
+        </Form>
       </CardContent>
     </div>
   );
diff --git a/src/components/default/profile/SignOut.tsx b/src/components/default/profile/SignOut.tsx
new file mode 100644
index 0000000..b6b6c54
--- /dev/null
+++ b/src/components/default/profile/SignOut.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { CardContent, CardHeader, CardTitle } from '@/components/ui';
+import { SubmitButton } from '@/components/default';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import { signOut } from '@/lib/actions';
+
+export const SignOut = () => {
+  const { isLoading, refreshUserData } = useAuth();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    const result = await signOut();
+    if (result?.success) {
+      await refreshUserData();
+      router.push('/sign-in');
+    }
+  };
+  return (
+    <div className='flex justify-center'>
+      <CardHeader className='md:w-5/6 w-full'>
+        <SubmitButton
+          disabled={isLoading}
+          onClick={handleSignOut}
+        >
+          Sign Out
+        </SubmitButton>
+      </CardHeader>
+    </div>
+  );
+};
diff --git a/src/components/default/profile/index.tsx b/src/components/default/profile/index.tsx
index e598655..a231fb7 100644
--- a/src/components/default/profile/index.tsx
+++ b/src/components/default/profile/index.tsx
@@ -1,3 +1,4 @@
 export * from './AvatarUpload';
 export * from './ProfileForm';
 export * from './ResetPasswordForm';
+export * from './SignOut';
diff --git a/src/components/default/status-message.tsx b/src/components/default/status-message.tsx
new file mode 100644
index 0000000..96e72ec
--- /dev/null
+++ b/src/components/default/status-message.tsx
@@ -0,0 +1,27 @@
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export const StatusMessage = ({ message }: { message: Message }) => {
+  return (
+    <div
+      className='flex flex-col gap-2 w-full max-w-md
+        text-sm bg-accent rounded-md p-2 px-4'
+    >
+      {'success' in message && (
+        <div className='dark:text-green-500 text-green-700'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive'>
+          {message.error}
+        </div>
+      )}
+      {'message' in message && (
+        <div className='text-foreground'>{message.message}</div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/default/submit-button.tsx b/src/components/default/submit-button.tsx
index 22538c3..cf124b5 100644
--- a/src/components/default/submit-button.tsx
+++ b/src/components/default/submit-button.tsx
@@ -19,7 +19,13 @@ export const SubmitButton = ({
   const { pending } = useFormStatus();
 
   return (
-    <Button type='submit' aria-disabled={pending} disabled={disabled} {...props}>
+    <Button
+      className='cursor-pointer'
+      type='submit'
+      aria-disabled={pending}
+      disabled={disabled}
+      {...props}
+    >
       {pending || disabled ? (
         <>
           <Loader2 className='mr-2 h-4 w-4 animate-spin' />
diff --git a/src/lib/actions/auth.ts b/src/lib/actions/auth.ts
index c9e460e..227d1b9 100644
--- a/src/lib/actions/auth.ts
+++ b/src/lib/actions/auth.ts
@@ -4,11 +4,10 @@ import 'server-only';
 import { encodedRedirect } from '@/utils/utils';
 import { createServerClient } from '@/utils/supabase';
 import { headers } from 'next/headers';
-import { redirect } from 'next/navigation';
 import type { User } from '@/utils/supabase';
 import type { Result } from './index';
 
-export const signUp = async (formData: FormData) => {
+export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
   const name = formData.get('name') as string;
   const email = formData.get('email') as string;
   const password = formData.get('password') as string;
@@ -36,13 +35,12 @@ export const signUp = async (formData: FormData) => {
     },
   });
   if (error) {
-    return encodedRedirect('error', '/sign-up', error.message);
+    return { success: false, error: error.message };
   } else {
-    return encodedRedirect(
-      'success',
-      '/sign-up',
-      'Thanks for signing up! Please check your email for a verification link.',
-    );
+    return {
+      success: true,
+      data: 'Thanks for signing up! Please check your email for a verification link.',
+    };
   }
 };
 
@@ -64,14 +62,13 @@ export const signIn = async (
   }
 };
 
-export const forgotPassword = async (formData: FormData) => {
+export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
   const email = formData.get('email') as string;
   const supabase = await createServerClient();
   const origin = (await headers()).get('origin');
-  const callbackUrl = formData.get('callbackUrl') as string;
 
   if (!email) {
-    return encodedRedirect('error', '/forgot-password', 'Email is required');
+    return { success: false, error: 'Email is required' };
   }
 
   const { error } = await supabase.auth.resetPasswordForEmail(email, {
@@ -79,22 +76,9 @@ export const forgotPassword = async (formData: FormData) => {
   });
 
   if (error) {
-    return encodedRedirect(
-      'error',
-      '/forgot-password',
-      'Could not reset password',
-    );
+    return { success: false, error: 'Could not reset password' };
   }
-
-  if (callbackUrl) {
-    return redirect(callbackUrl);
-  }
-
-  return encodedRedirect(
-    'success',
-    '/forgot-password',
-    'Check your email for a link to reset your password.',
-  );
+  return { success: true, data: 'Check your email for a link to reset your password.' };
 };
 
 
diff --git a/src/lib/hooks/auth.ts b/src/lib/hooks/auth.ts
index 884f18f..335db86 100644
--- a/src/lib/hooks/auth.ts
+++ b/src/lib/hooks/auth.ts
@@ -1,11 +1,11 @@
 'use client'
 import { encodedRedirect } from '@/utils/utils';
 import { createClient } from '@/utils/supabase';
-import { redirect } from 'next/navigation';
 import type { User } from '@/utils/supabase';
 import type { Result } from './index';
 
-export const signUp = async (formData: FormData) => {
+
+export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
   const name = formData.get('name') as string;
   const email = formData.get('email') as string;
   const password = formData.get('password') as string;
@@ -33,13 +33,12 @@ export const signUp = async (formData: FormData) => {
     },
   });
   if (error) {
-    return encodedRedirect('error', '/sign-up', error.message);
+    return { success: false, error: error.message };
   } else {
-    return encodedRedirect(
-      'success',
-      '/sign-up',
-      'Thanks for signing up! Please check your email for a verification link.',
-    );
+    return {
+      success: true,
+      data: 'Thanks for signing up! Please check your email for a verification link.',
+    };
   }
 };
 
@@ -61,14 +60,13 @@ export const signIn = async (
   }
 };
 
-export const forgotPassword = async (formData: FormData) => {
+export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
   const email = formData.get('email') as string;
   const supabase = createClient();
   const origin = process.env.NEXT_PUBLIC_SITE_URL!;
-  const callbackUrl = formData.get('callbackUrl') as string;
 
   if (!email) {
-    return encodedRedirect('error', '/forgot-password', 'Email is required');
+    return { success: false, error: 'Email is required' };
   }
 
   const { error } = await supabase.auth.resetPasswordForEmail(email, {
@@ -76,22 +74,9 @@ export const forgotPassword = async (formData: FormData) => {
   });
 
   if (error) {
-    return encodedRedirect(
-      'error',
-      '/forgot-password',
-      'Could not reset password',
-    );
+    return { success: false, error: 'Could not reset password' };
   }
-
-  if (callbackUrl) {
-    return redirect(callbackUrl);
-  }
-
-  return encodedRedirect(
-    'success',
-    '/forgot-password',
-    'Check your email for a link to reset your password.',
-  );
+  return { success: true, data: 'Check your email for a link to reset your password.' };
 };