diff --git a/src/pages/stats.tsx b/src/pages/stats.tsx
index 3acce51b..e5172ddf 100644
--- a/src/pages/stats.tsx
+++ b/src/pages/stats.tsx
@@ -168,118 +168,127 @@ export default function Stats() {
 							</div>
 						</div>
 					</section>
-					<section className="flex flex-col gap-3">
-						<div className="flex gap-4 flex-wrap">
-							{/* Exams per module */}
-							<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
-								<span className="text-sm font-bold">Exams per Module</span>
-								<div className="flex flex-col gap-4">
-									<div className="flex flex-col gap-2">
-										<div className="flex justify-between items-end">
-											<span className="text-xs">
-												<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
-												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-											</span>
-											<span className="text-xs">Reading</span>
+					{stats.length > 0 && (
+						<section className="flex flex-col gap-3">
+							<div className="flex gap-4 flex-wrap">
+								{/* Exams per module */}
+								<div className="flex flex-col gap-12 border w-full h-fit max-w-xs border-mti-gray-platinum p-4 pb-12 rounded-xl">
+									<span className="text-sm font-bold">Exams per Module</span>
+									<div className="flex flex-col gap-4">
+										<div className="flex flex-col gap-2">
+											<div className="flex justify-between items-end">
+												<span className="text-xs">
+													<span className="font-medium">{totalExamsByModule(stats, "reading")}</span> of{" "}
+													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
+												</span>
+												<span className="text-xs">Reading</span>
+											</div>
+											<ProgressBar
+												color="reading"
+												percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
+												label=""
+												className="h-1"
+											/>
 										</div>
-										<ProgressBar
-											color="reading"
-											percentage={(totalExamsByModule(stats, "reading") * 100) / Object.keys(groupBySession(stats)).length}
-											label=""
-											className="h-1"
-										/>
-									</div>
-									<div className="flex flex-col gap-2">
-										<div className="flex justify-between items-end">
-											<span className="text-xs">
-												<span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "}
-												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-											</span>
-											<span className="text-xs">Listening</span>
+										<div className="flex flex-col gap-2">
+											<div className="flex justify-between items-end">
+												<span className="text-xs">
+													<span className="font-medium">{totalExamsByModule(stats, "listening")}</span> of{" "}
+													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
+												</span>
+												<span className="text-xs">Listening</span>
+											</div>
+											<ProgressBar
+												color="listening"
+												percentage={
+													(totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length
+												}
+												label=""
+												className="h-1"
+											/>
 										</div>
-										<ProgressBar
-											color="listening"
-											percentage={(totalExamsByModule(stats, "listening") * 100) / Object.keys(groupBySession(stats)).length}
-											label=""
-											className="h-1"
-										/>
-									</div>
-									<div className="flex flex-col gap-2">
-										<div className="flex justify-between items-end">
-											<span className="text-xs">
-												<span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "}
-												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-											</span>
-											<span className="text-xs">Writing</span>
+										<div className="flex flex-col gap-2">
+											<div className="flex justify-between items-end">
+												<span className="text-xs">
+													<span className="font-medium">{totalExamsByModule(stats, "writing")}</span> of{" "}
+													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
+												</span>
+												<span className="text-xs">Writing</span>
+											</div>
+											<ProgressBar
+												color="writing"
+												percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length}
+												label=""
+												className="h-1"
+											/>
 										</div>
-										<ProgressBar
-											color="writing"
-											percentage={(totalExamsByModule(stats, "writing") * 100) / Object.keys(groupBySession(stats)).length}
-											label=""
-											className="h-1"
-										/>
-									</div>
-									<div className="flex flex-col gap-2">
-										<div className="flex justify-between items-end">
-											<span className="text-xs">
-												<span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "}
-												<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
-											</span>
-											<span className="text-xs">Speaking</span>
+										<div className="flex flex-col gap-2">
+											<div className="flex justify-between items-end">
+												<span className="text-xs">
+													<span className="font-medium">{totalExamsByModule(stats, "speaking")}</span> of{" "}
+													<span className="font-medium">{Object.keys(groupBySession(stats)).length}</span>
+												</span>
+												<span className="text-xs">Speaking</span>
+											</div>
+											<ProgressBar
+												color="speaking"
+												percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
+												label=""
+												className="h-1"
+											/>
 										</div>
-										<ProgressBar
-											color="speaking"
-											percentage={(totalExamsByModule(stats, "speaking") * 100) / Object.keys(groupBySession(stats)).length}
-											label=""
-											className="h-1"
-										/>
 									</div>
 								</div>
-							</div>
 
-							<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
-								<span className="text-sm font-bold">Total Score Band per Session</span>
-								<Chart
-									type="line"
-									data={{
-										labels: Object.keys(groupBySession(stats)).map((_, index) => index),
-										datasets: [
-											{
-												type: "line",
-												label: "Total",
-												fill: false,
-												borderColor: "#6A5FB1",
-												backgroundColor: "#7872BF",
-												borderWidth: 2,
-												spanGaps: true,
-												data: calculateTotalScorePerSession(),
-											},
-										],
-									}}
-								/>
-							</div>
+								<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
+									<span className="text-sm font-bold">Total Score Band per Session</span>
+									<Chart
+										type="line"
+										data={{
+											labels: Object.keys(groupBySession(stats)).map((_, index) => index),
+											datasets: [
+												{
+													type: "line",
+													label: "Total",
+													fill: false,
+													borderColor: "#6A5FB1",
+													backgroundColor: "#7872BF",
+													borderWidth: 2,
+													spanGaps: true,
+													data: calculateTotalScorePerSession(),
+												},
+											],
+										}}
+									/>
+								</div>
 
-							<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
-								<span className="text-sm font-bold">Module Score Band per Session</span>
-								<Chart
-									type="line"
-									data={{
-										labels: Object.keys(groupBySession(stats)).map((_, index) => index),
-										datasets: [
-											...MODULE_ARRAY.map((module, index) => ({
-												type: "line" as const,
-												label: capitalize(module),
-												borderColor: COLORS[index],
-												backgroundColor: COLORS[index],
-												borderWidth: 2,
-												data: calculateModularScorePerSession(module),
-											})),
-										],
-									}}
-								/>
+								<div className="w-full max-w-3xl border border-mti-gray-platinum p-4 pb-12 rounded-xl">
+									<span className="text-sm font-bold">Module Score Band per Session</span>
+									<Chart
+										type="line"
+										data={{
+											labels: Object.keys(groupBySession(stats)).map((_, index) => index),
+											datasets: [
+												...MODULE_ARRAY.map((module, index) => ({
+													type: "line" as const,
+													label: capitalize(module),
+													borderColor: COLORS[index],
+													backgroundColor: COLORS[index],
+													borderWidth: 2,
+													data: calculateModularScorePerSession(module),
+												})),
+											],
+										}}
+									/>
+								</div>
 							</div>
-						</div>
-					</section>
+						</section>
+					)}
+					{stats.length === 0 && (
+						<section className="flex flex-col gap-3">
+							<span className="font-semibold ml-1">No stats to display...</span>
+						</section>
+					)}
 				</Layout>
 			)}
 		</>