Implemented the speaking exercise;

Cleaned up a bit of the code;

src/pages/index.tsx

@@ -15,6 +15,7 @@ import {capitalize} from "lodash";
 import {Module} from "@/interfaces";
 import ProgressBar from "@/components/Low/ProgressBar";
 import Layout from "@/components/High/Layout";
+import {calculateAverageLevel} from "@/utils/score";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -44,10 +45,6 @@ export default function Home() {
 		if (user) setShowDiagnostics(user.isFirstLogin);
 	}, [user]);
 
-	const calculateAverageLevel = () => {
-		return Object.keys(user!.levels).reduce((accumulator, current) => user!.levels[current as Module] + accumulator, 0) / 4;
-	};
-
 	if (user && showDiagnostics) {
 		return (
 			<>
@@ -90,13 +87,18 @@ export default function Home() {
 									<h6 className="font-normal text-base text-mti-gray-taupe">{capitalize(user.type)}</h6>
 								</div>
 								<ProgressBar
-									label={`Level ${calculateAverageLevel().toFixed(1)}`}
-									percentage={Math.round((calculateAverageLevel() * 100) / 9)}
+									label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
+									percentage={100}
 									color="blue"
 									className="max-w-xs w-32 self-end h-10"
 								/>
 							</div>
-							<ProgressBar label="" percentage={70} color="blue" className="w-full h-3 drop-shadow-lg" />
+							<ProgressBar
+								label=""
+								percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
+								color="blue"
+								className="w-full h-3 drop-shadow-lg"
+							/>
 							<div className="flex justify-between w-full mt-8">
 								<div className="flex gap-4 items-center">
 									<div className="w-16 h-16 border border-mti-gray-platinum bg-mti-gray-smoke flex items-center justify-center rounded-xl">