diff --git a/components/AuthSubmitButton.tsx b/components/AuthSubmitButton.tsx
new file mode 100644
index 0000000..434d0af
--- /dev/null
+++ b/components/AuthSubmitButton.tsx
@@ -0,0 +1,35 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
+type Props = {
+  onClick?: Function;
+  icon?: IconProp;
+  label: string;
+  loading: boolean;
+  className?: string;
+};
+
+export default function AuthSubmitButton({
+  onClick,
+  icon,
+  label,
+  loading,
+  className,
+}: Props) {
+  return (
+    <button
+      type="submit"
+      className={`text-white flex items-center gap-2 py-2 px-5 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
+        loading
+          ? "bg-sky-600 cursor-auto"
+          : "bg-sky-700 hover:bg-sky-600 cursor-pointer"
+      } ${className}`}
+      onClick={() => {
+        if (!loading && onClick) onClick();
+      }}
+    >
+      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
+      <p className="text-center w-full">{label}</p>
+    </button>
+  );
+}
diff --git a/pages/login.tsx b/pages/login.tsx
index f6968cc..3c39284 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -3,8 +3,9 @@ import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
-import { useState } from "react";
+import { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
+import AuthSubmitButton from "@/components/AuthSubmitButton";
 
 interface FormData {
   username: string;
@@ -21,7 +22,9 @@ export default function Login() {
     password: "",
   });
 
-  async function loginUser() {
+  async function loginUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
     if (form.username !== "" && form.password !== "") {
       setSubmitLoader(true);
 
@@ -47,67 +50,69 @@ export default function Login() {
 
   return (
     <CenteredForm text="Sign in to your account">
-      <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
-        <p className="text-2xl text-black dark:text-white text-center font-bold">
-          Enter your credentials
-        </p>
-
-        <div>
-          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-            Username
-            {emailEnabled ? " or Email" : undefined}
+      <form onSubmit={loginUser}>
+        <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+          <p className="text-2xl text-black dark:text-white text-center font-bold">
+            Enter your credentials
           </p>
 
-          <TextInput
-            placeholder="johnny"
-            value={form.username}
-            className="bg-white"
-            onChange={(e) => setForm({ ...form, username: e.target.value })}
-          />
-        </div>
+          <div>
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Username
+              {emailEnabled ? " or Email" : undefined}
+            </p>
 
-        <div>
-          <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
-            Password
-          </p>
+            <TextInput
+              autoFocus={true}
+              placeholder="johnny"
+              value={form.username}
+              className="bg-white"
+              onChange={(e) => setForm({ ...form, username: e.target.value })}
+            />
+          </div>
 
-          <TextInput
-            type="password"
-            placeholder="••••••••••••••"
-            value={form.password}
-            className="bg-white"
-            onChange={(e) => setForm({ ...form, password: e.target.value })}
+          <div>
+            <p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
+              Password
+            </p>
+
+            <TextInput
+              type="password"
+              placeholder="••••••••••••••"
+              value={form.password}
+              className="bg-white"
+              onChange={(e) => setForm({ ...form, password: e.target.value })}
+            />
+            {emailEnabled && (
+              <div className="w-fit ml-auto mt-1">
+                <Link
+                  href={"/forgot"}
+                  className="text-gray-500 dark:text-gray-400 font-semibold"
+                >
+                  Forgot Password?
+                </Link>
+              </div>
+            )}
+          </div>
+
+          <AuthSubmitButton
+            label="Login"
+            className=" w-full text-center"
+            loading={submitLoader}
           />
-          {emailEnabled && (
-            <div className="w-fit ml-auto mt-1">
+          {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? undefined : (
+            <div className="flex items-baseline gap-1 justify-center">
+              <p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
               <Link
-                href={"/forgot"}
-                className="text-gray-500 dark:text-gray-400 font-semibold"
+                href={"/register"}
+                className="block text-black dark:text-white font-semibold"
               >
-                Forgot Password?
+                Sign Up
               </Link>
             </div>
           )}
         </div>
-
-        <SubmitButton
-          onClick={loginUser}
-          label="Login"
-          className=" w-full text-center"
-          loading={submitLoader}
-        />
-        {process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? undefined : (
-          <div className="flex items-baseline gap-1 justify-center">
-            <p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
-            <Link
-              href={"/register"}
-              className="block text-black dark:text-white font-semibold"
-            >
-              Sign Up
-            </Link>
-          </div>
-        )}
-      </div>
+      </form>
     </CenteredForm>
   );
 }
diff --git a/pages/register.tsx b/pages/register.tsx
index 75ba525..a681c01 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -1,11 +1,12 @@
 import Link from "next/link";
-import { useState } from "react";
+import { useState, FormEvent } from "react";
 import { toast } from "react-hot-toast";
 import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import TextInput from "@/components/TextInput";
+import AuthSubmitButton from "@/components/AuthSubmitButton";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -29,7 +30,9 @@ export default function Register() {
     passwordConfirmation: "",
   });
 
-  async function registerUser() {
+  async function registerUser(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
     const checkFields = () => {
       if (emailEnabled) {
         return (
@@ -107,7 +110,8 @@ export default function Register() {
           </p>
         </div>
       ) : (
-        <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
+        <form onSubmit={registerUser}>
+          <div className="p-4 flex flex-col gap-3 justify-between sm:w-[30rem] w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700">
           <p className="text-2xl text-black dark:text-white text-center font-bold">
             Enter your details
           </p>
@@ -117,6 +121,7 @@ export default function Register() {
             </p>
 
             <TextInput
+              autoFocus={true}
               placeholder="Johnny"
               value={form.name}
               className="bg-white"
@@ -217,8 +222,7 @@ export default function Register() {
             </div>
           ) : undefined}
 
-          <SubmitButton
-            onClick={registerUser}
+          <AuthSubmitButton
             label="Sign Up"
             className="mt-2 w-full text-center"
             loading={submitLoader}
@@ -235,6 +239,7 @@ export default function Register() {
             </Link>
           </div>
         </div>
+        </form>
       )}
     </CenteredForm>
   );