diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx
index b846e4cc..47db3699 100644
--- a/src/components/ProfileCard.tsx
+++ b/src/components/ProfileCard.tsx
@@ -3,6 +3,7 @@ import {User} from "@/interfaces/user";
 import clsx from "clsx";
 import LevelLabel from "./LevelLabel";
 import LevelProgressBar from "./LevelProgressBar";
+import {Avatar} from "primereact/avatar";
 
 interface Props {
 	user: User;
@@ -13,8 +14,11 @@ export default function ProfileCard({user, className}: Props) {
 	return (
 		<div className={clsx("bg-white drop-shadow-xl p-4 md:p-8 rounded-xl w-full flex flex-col gap-6", className)}>
 			<div className="flex w-full items-center gap-8">
-				<div className="w-16 md:w-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
-					<img src={user.profilePicture} alt="Profile picture" className="rounded-full" />
+				<div className="w-16 md:w-24 h-16 md:h-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
+					{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full" />}
+					{user.profilePicture.length === 0 && (
+						<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
+					)}
 				</div>
 				<div className="flex flex-col justify-center">
 					<span className="text-neutral-600 font-bold text-xl lg:text-2xl">{user.name}</span>
diff --git a/src/pages/api/user.ts b/src/pages/api/user.ts
index 6d759c43..a7b28086 100644
--- a/src/pages/api/user.ts
+++ b/src/pages/api/user.ts
@@ -1,10 +1,14 @@
 import {app} from "@/firebase";
+import {User} from "@/interfaces/user";
 import {sessionOptions} from "@/lib/session";
 import {getAuth} from "firebase/auth";
+import {doc, getDoc, getFirestore} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {NextApiRequest, NextApiResponse} from "next";
 
 const auth = getAuth(app);
+const db = getFirestore(app);
+
 export default withIronSessionApiRoute(user, sessionOptions);
 
 async function user(req: NextApiRequest, res: NextApiResponse) {
@@ -14,12 +18,23 @@ async function user(req: NextApiRequest, res: NextApiResponse) {
 			return;
 		}
 
-		if (req.session.user.id === auth.currentUser.uid) {
+		if (req.session.user.id !== auth.currentUser.uid) {
 			res.status(401).json(undefined);
 			return;
 		}
 
-		res.json(req.session.user);
+		const docUser = await getDoc(doc(db, "users", req.session.user.id));
+		if (!docUser.exists()) {
+			res.status(401).json(undefined);
+			return;
+		}
+
+		const user = docUser.data() as User;
+
+		req.session.user = {...user, id: req.session.user.id};
+		await req.session.save();
+
+		res.json({...user, id: req.session.user.id});
 	} else {
 		res.status(401).json(undefined);
 	}
diff --git a/src/pages/exam/index.tsx b/src/pages/exam/index.tsx
index 6579b4d5..f01f19fe 100644
--- a/src/pages/exam/index.tsx
+++ b/src/pages/exam/index.tsx
@@ -17,6 +17,7 @@ import {sessionOptions} from "@/lib/session";
 import {Stat, User} from "@/interfaces/user";
 import Speaking from "@/exams/Speaking";
 import {v4 as uuidv4} from "uuid";
+import useUser from "@/hooks/useUser";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -37,7 +38,7 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Page({user}: {user: User}) {
+export default function Page() {
 	const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
 	const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
@@ -47,6 +48,8 @@ export default function Page({user}: {user: User}) {
 	const [exam, setExam] = useState<Exam>();
 	const [timer, setTimer] = useState(-1);
 
+	const {user} = useUser({redirectTo: "/login"});
+
 	useEffect(() => setSessionId(uuidv4()), []);
 
 	useEffect(() => {
@@ -67,7 +70,7 @@ export default function Page({user}: {user: User}) {
 					session: sessionId,
 					exam: solution.exam!,
 					module: solution.module!,
-					user: user.id,
+					user: user?.id || "",
 				}));
 
 				axios
@@ -126,13 +129,13 @@ export default function Page({user}: {user: User}) {
 
 	const renderScreen = () => {
 		if (selectedModules.length === 0) {
-			return <Selection user={user} onStart={setSelectedModules} />;
+			return <Selection user={user!} onStart={setSelectedModules} />;
 		}
 
 		if (moduleIndex >= selectedModules.length) {
 			return (
 				<Finish
-					user={user}
+					user={user!}
 					modules={selectedModules}
 					onViewResults={() => {
 						setShowSolutions(true);
@@ -184,10 +187,12 @@ export default function Page({user}: {user: User}) {
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
 			<ToastContainer />
-			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">
-				<Navbar profilePicture={user.profilePicture} timer={exam ? timer : undefined} />
-				{renderScreen()}
-			</main>
+			{user && (
+				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black pb-4 gap-4">
+					<Navbar profilePicture={user.profilePicture} timer={exam ? timer : undefined} />
+					{renderScreen()}
+				</main>
+			)}
 		</>
 	);
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b09b47ec..10a05dad 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import {useEffect, useState} from "react";
 import useStats from "@/hooks/useStats";
 import {averageScore, formatModuleTotalStats, totalExams} from "@/utils/stats";
 import {Divider} from "primereact/divider";
+import useUser from "@/hooks/useUser";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -30,10 +31,12 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Home({user}: {user: User}) {
+export default function Home() {
 	const [showEndExam, setShowEndExam] = useState(false);
 	const [windowWidth, setWindowWidth] = useState(0);
+
 	const {stats, isLoading} = useStats();
+	const {user} = useUser({redirectTo: "/login"});
 
 	useEffect(() => setShowEndExam(window.innerWidth <= 960), []);
 	useEffect(() => setWindowWidth(window.innerWidth), []);
@@ -49,34 +52,36 @@ export default function Home({user}: {user: User}) {
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<link rel="icon" href="/favicon.ico" />
 			</Head>
-			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
-				<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
-				<div className="w-full h-full p-4 relative flex flex-col gap-8">
-					<section className="h-full w-full flex lg:gap-8 flex-col lg:flex-row justify-center md:justify-start md:items-start">
-						<section className="w-full h-full flex items-center">
-							<ProfileCard user={user} className="text-black self-start" />
-						</section>
-						{windowWidth <= 960 && <Divider />}
-						<div className="flex flex-col w-full gap-4">
-							<span className="font-bold text-2xl">Statistics</span>
-							{!isLoading && stats && (
-								<div className="text-neutral-600 flex flex-wrap gap-2 md:gap-4 w-full justify-between md:justify-start">
-									<div className="bg-white p-4 rounded-xl drop-shadow-xl flex flex-col gap-2 md:gap-4 w-full">
-										<span className="font-bold text-xl">Exams: {totalExams(stats)}</span>
-										<span className="font-bold text-xl">Exercises: {stats.length}</span>
-										<span className="font-bold text-xl">Average Score: {averageScore(stats)}%</span>
+			{user && (
+				<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-black">
+					<Navbar profilePicture={user.profilePicture} showExamEnd={showEndExam} />
+					<div className="w-full h-full p-4 relative flex flex-col gap-8">
+						<section className="h-full w-full flex lg:gap-8 flex-col lg:flex-row justify-center md:justify-start md:items-start">
+							<section className="w-full h-full flex items-center">
+								<ProfileCard user={user} className="text-black self-start" />
+							</section>
+							{windowWidth <= 960 && <Divider />}
+							<div className="flex flex-col w-full gap-4">
+								<span className="font-bold text-2xl">Statistics</span>
+								{!isLoading && stats && (
+									<div className="text-neutral-600 flex flex-wrap gap-2 md:gap-4 w-full justify-between md:justify-start">
+										<div className="bg-white p-4 rounded-xl drop-shadow-xl flex flex-col gap-2 md:gap-4 w-full">
+											<span className="font-bold text-xl">Exams: {totalExams(stats)}</span>
+											<span className="font-bold text-xl">Exercises: {stats.length}</span>
+											<span className="font-bold text-xl">Average Score: {averageScore(stats)}%</span>
+										</div>
 									</div>
-								</div>
-							)}
-						</div>
-					</section>
-					{!isLoading && stats && (
-						<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
-							<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
+								)}
+							</div>
 						</section>
-					)}
-				</div>
-			</main>
+						{!isLoading && stats && (
+							<section className="w-full lg:w-1/3 h-full flex items-center justify-center">
+								<SingleDatasetChart type="polarArea" data={formatModuleTotalStats(stats)} title="Exams per Module" />
+							</section>
+						)}
+					</div>
+				</main>
+			)}
 		</>
 	);
 }
diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 16ae93a1..b90bdf6b 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -60,15 +60,17 @@ export default function Stats({user}: {user: User}) {
 			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100 text-neutral-600">
 				<Navbar profilePicture={user.profilePicture} />
 				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative gap-8">
-					<AutoComplete
-						value={autocompleteValue}
-						suggestions={items}
-						field="name"
-						onChange={(e) => setAutocompleteValue(e.target.value)}
-						completeMethod={search}
-						onSelect={(e) => setSelectedUser(e.value)}
-						dropdown
-					/>
+					{!isLoading && (
+						<AutoComplete
+							value={autocompleteValue}
+							suggestions={items}
+							field="name"
+							onChange={(e) => setAutocompleteValue(e.target.value)}
+							completeMethod={search}
+							onSelect={(e) => setSelectedUser(e.value)}
+							dropdown
+						/>
+					)}
 
 					<section className="flex flex-col gap-2 md:gap-4 w-full">
 						<div className="flex flex-col">