diff --git a/src/components/credentials-sign-in.tsx b/src/components/credentials-sign-in-form.tsx
similarity index 89%
rename from src/components/credentials-sign-in.tsx
rename to src/components/credentials-sign-in-form.tsx
index 4213154..0706abd 100644
--- a/src/components/credentials-sign-in.tsx
+++ b/src/components/credentials-sign-in-form.tsx
@@ -18,8 +18,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { signInWithCredentials } from "@/app/actions/auth";
 import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
 
-export function CredentialsSignIn() {
-  const form = useForm<z.infer<typeof authSchema>>({
+export type CredentialsSignInFormValues = z.infer<typeof authSchema>;
+
+export function CredentialsSignInForm() {
+  const form = useForm<CredentialsSignInFormValues>({
     resolver: zodResolver(authSchema),
     defaultValues: {
       email: "",
@@ -28,15 +30,15 @@ export function CredentialsSignIn() {
   });
 
   const [isVisible, setIsVisible] = useState<boolean>(false);
-
   const toggleVisibility = () => setIsVisible((prevState) => !prevState);
 
+  const onSubmit = async (data: CredentialsSignInFormValues) => {
+    await signInWithCredentials(data);
+  };
+
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit((data) => signInWithCredentials(data))}
-        className="grid gap-6"
-      >
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
         <FormField
           control={form.control}
           name="email"
diff --git a/src/components/credentials-sign-up.tsx b/src/components/credentials-sign-up-form.tsx
similarity index 89%
rename from src/components/credentials-sign-up.tsx
rename to src/components/credentials-sign-up-form.tsx
index d939290..72185aa 100644
--- a/src/components/credentials-sign-up.tsx
+++ b/src/components/credentials-sign-up-form.tsx
@@ -18,8 +18,10 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { signUpWithCredentials } from "@/app/actions/auth";
 import { EyeIcon, EyeOffIcon, MailIcon } from "lucide-react";
 
-export function CredentialsSignUp() {
-  const form = useForm<z.infer<typeof authSchema>>({
+export type CredentialsSignUpFormValues = z.infer<typeof authSchema>;
+
+export function CredentialsSignUpForm() {
+  const form = useForm<CredentialsSignUpFormValues>({
     resolver: zodResolver(authSchema),
     defaultValues: {
       email: "",
@@ -28,15 +30,15 @@ export function CredentialsSignUp() {
   });
 
   const [isVisible, setIsVisible] = useState<boolean>(false);
-
   const toggleVisibility = () => setIsVisible((prevState) => !prevState);
 
+  const onSubmit = async (data: CredentialsSignUpFormValues) => {
+    await signUpWithCredentials(data);
+  };
+
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit((data) => signUpWithCredentials(data))}
-        className="grid gap-6"
-      >
+      <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
         <FormField
           control={form.control}
           name="email"
diff --git a/src/components/github-sign-in.tsx b/src/components/github-sign-in-form.tsx
similarity index 96%
rename from src/components/github-sign-in.tsx
rename to src/components/github-sign-in-form.tsx
index 85cd0dd..6f8ca0e 100644
--- a/src/components/github-sign-in.tsx
+++ b/src/components/github-sign-in-form.tsx
@@ -1,7 +1,7 @@
 import { signIn } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
 
-export function GithubSignIn() {
+export function GithubSignInForm() {
   return (
     <form
       action={async () => {
diff --git a/src/components/sign-in-form.tsx b/src/components/sign-in-form.tsx
index 8a3e946..e4f2250 100644
--- a/src/components/sign-in-form.tsx
+++ b/src/components/sign-in-form.tsx
@@ -1,5 +1,5 @@
-import { GithubSignIn } from "@/components/github-sign-in";
-import { CredentialsSignIn } from "@/components/credentials-sign-in";
+import { GithubSignInForm } from "@/components/github-sign-in-form";
+import { CredentialsSignInForm } from "@/components/credentials-sign-in-form";
 
 export function SignInForm() {
   return (
@@ -10,13 +10,13 @@ export function SignInForm() {
           Enter your email below to sign in to your account
         </p>
       </div>
-      <CredentialsSignIn />
+      <CredentialsSignInForm />
       <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
         <span className="relative z-10 bg-background px-2 text-muted-foreground">
           Or
         </span>
       </div>
-      <GithubSignIn />
+      <GithubSignInForm />
       <div className="text-center text-sm">
         Don&apos;t have an account?{" "}
         <a href="/sign-up" className="underline underline-offset-4">
@@ -24,5 +24,5 @@ export function SignInForm() {
         </a>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/sign-up-form.tsx b/src/components/sign-up-form.tsx
index 10e18ce..265e3a7 100644
--- a/src/components/sign-up-form.tsx
+++ b/src/components/sign-up-form.tsx
@@ -1,5 +1,5 @@
-import { GithubSignIn } from "@/components/github-sign-in";
-import { CredentialsSignUp } from "@/components/credentials-sign-up";
+import { GithubSignInForm } from "@/components/github-sign-in-form";
+import { CredentialsSignUpForm } from "@/components/credentials-sign-up-form";
 
 export function SignUpForm() {
   return (
@@ -10,19 +10,19 @@ export function SignUpForm() {
           Enter your email below to sign up to your account
         </p>
       </div>
-      <CredentialsSignUp />
+      <CredentialsSignUpForm />
       <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
         <span className="relative z-10 bg-background px-2 text-muted-foreground">
           Or
         </span>
       </div>
-      <GithubSignIn />
+      <GithubSignInForm />
       <div className="text-center text-sm">
-        Already have an account? {" "}
+        Already have an account?{" "}
         <a href="/sign-in" className="underline underline-offset-4">
           Sign in
         </a>
       </div>
     </div>
-  )
+  );
 }