- Adapted more of the design to be more responsive;

- Revamped some of the UserSolutions;
- Transformed the homepage chart to use actual dynamic values;
- Created an endpoint for the stats;

src/exams/Finish.tsx

@@ -54,11 +54,11 @@ export default function Finish({user, scores, modules, onViewResults}: Props) {
 		<div className="w-full h-full relative">
 			<section className="h-full w-full flex flex-col items-center justify-center gap-4">
 				<ProfileLevel user={user} className="h-1/2" />
-				<div className="h-2/3 w-1/2 flex flex-col items-center gap-4">
-					<div className="rounded-xl p-4 items-center flex justify-center gap-4">
+				<div className="h-2/3 w-2/3 flex flex-col items-center gap-4">
+					<div className="rounded-xl p-2 md:p-4 items-center flex lg:justify-center gap-2 md:gap-4 max-w-[100%] overflow-auto">
 						{modules.map((module) => (
 							<div
-								className={`flex flex-col gap-12 min-w-[176px] items-center justify-center border-2 border-ielts-${module} bg-ielts-${module}-transparent p-4 rounded-xl text-white font-semibold`}
+								className={`flex flex-col gap-12 min-w-[176px] items-center justify-center border-2 border-ielts-${module} bg-ielts-${module}-transparent py-4 px-2 rounded-xl text-white font-semibold`}
 								key={module}>
 								<div className="flex flex-col items-center">
 									<Icon path={ICONS[module]} color="white" size={2} />