diff --git a/public/defaultAvatar.png b/public/defaultAvatar.png
new file mode 100644
index 00000000..2f907dab
Binary files /dev/null and b/public/defaultAvatar.png differ
diff --git a/src/pages/api/register.ts b/src/pages/api/register.ts
new file mode 100644
index 00000000..cbdecb50
--- /dev/null
+++ b/src/pages/api/register.ts
@@ -0,0 +1,48 @@
+import {NextApiRequest, NextApiResponse} from "next";
+import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
+import {app} from "@/firebase";
+import {sessionOptions} from "@/lib/session";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {getFirestore, getDoc, doc, setDoc} from "firebase/firestore";
+
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(login, sessionOptions);
+
+const DEFAULT_DESIRED_LEVELS = {
+	reading: 9,
+	listening: 9,
+	writing: 9,
+	speaking: 9,
+};
+
+const DEFAULT_LEVELS = {
+	reading: 0,
+	listening: 0,
+	writing: 0,
+	speaking: 0,
+};
+
+async function login(req: NextApiRequest, res: NextApiResponse) {
+	const {email, password} = req.body as {email: string; password: string};
+
+	createUserWithEmailAndPassword(auth, email, password)
+		.then(async (userCredentials) => {
+			const userId = userCredentials.user.uid;
+			delete req.body.password;
+
+			const user = {...req.body, desiredLevels: DEFAULT_DESIRED_LEVELS, levels: DEFAULT_LEVELS, bio: "", isFirstLogin: true};
+
+			await setDoc(doc(db, "users", userId), user);
+
+			req.session.user = {...user, id: userId};
+			await req.session.save();
+
+			res.status(200).json({user: {...user, id: userId}});
+		})
+		.catch((error) => {
+			console.log(error);
+			res.status(401).json({error});
+		});
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6dda4e1b..0a3cdec6 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -124,7 +124,7 @@ export default function Home() {
 										<BsStar className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
-										<span className="font-bold text-xl">{averageScore(stats)}%</span>
+										<span className="font-bold text-xl">{stats.length > 0 ? averageScore(stats) : 0}%</span>
 										<span className="font-normal text-base text-mti-gray-dim">Average Score</span>
 									</div>
 								</div>
@@ -133,7 +133,9 @@ export default function Home() {
 					</section>
 					<section className="flex flex-col gap-3">
 						<span className="font-bold text-lg">Bio</span>
-						<span className="text-mti-gray-taupe">{user.bio || "Your bio will appear here..."}</span>
+						<span className="text-mti-gray-taupe">
+							{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
+						</span>
 					</section>
 					<section className="flex flex-col gap-3">
 						<span className="font-bold text-lg">Score History</span>
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index c9dfb3a0..243e34c7 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
-import {ToastContainer} from "react-toastify";
+import {toast, ToastContainer} from "react-toastify";
 import {useState} from "react";
 import Head from "next/head";
 import useUser from "@/hooks/useUser";
@@ -7,6 +7,7 @@ import Button from "@/components/Low/Button";
 import {BsArrowRepeat} from "react-icons/bs";
 import Link from "next/link";
 import Input from "@/components/Low/Input";
+import axios from "axios";
 
 export default function Register() {
 	const [name, setName] = useState("");
@@ -20,6 +21,30 @@ export default function Register() {
 		redirectIfFound: true,
 	});
 
+	const register = (e: any) => {
+		e.preventDefault();
+
+		if (confirmPassword !== password) {
+			toast.error("Your passwords do not match!", {toastId: "password-not-match"});
+			return;
+		}
+
+		setIsLoading(true);
+		axios
+			.post("/api/register", {name, email, password, profilePicture: "/defaultAvatar.png"})
+			.then((response) => mutateUser(response.data.user))
+			.catch((error) => {
+				console.log(error.response.data);
+
+				if (error.response.status === 401) {
+					toast.error("There is already a user with that e-mail!");
+					return;
+				}
+				toast.error("There was something wrong, please try again!");
+			})
+			.finally(() => setIsLoading(false));
+	};
+
 	return (
 		<>
 			<Head>
@@ -36,7 +61,7 @@ export default function Register() {
 				</section>
 				<section className="h-full w-full flex flex-col items-center justify-center gap-12">
 					<h1 className="font-bold text-4xl">Create new account</h1>
-					<form className="flex flex-col items-center gap-6 w-1/2">
+					<form className="flex flex-col items-center gap-6 w-1/2" onSubmit={register}>
 						<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" required />
 						<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" required />
 						<Input type="password" name="password" onChange={(e) => setPassword(e)} placeholder="Enter your password" required />