diff --git a/src/pages/record.tsx b/src/pages/record.tsx
index 39e3e5f6..fb468dfb 100644
--- a/src/pages/record.tsx
+++ b/src/pages/record.tsx
@@ -1,422 +1,614 @@
 /* eslint-disable @next/next/no-img-element */
 import Head from "next/head";
-import {withIronSessionSsr} from "iron-session/next";
-import {sessionOptions} from "@/lib/session";
-import {Stat, User} from "@/interfaces/user";
-import {useEffect, useState} from "react";
+import { withIronSessionSsr } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Stat, User } from "@/interfaces/user";
+import { useEffect, useState } from "react";
 import useStats from "@/hooks/useStats";
-import {convertToUserSolutions, groupByDate} from "@/utils/stats";
+import { convertToUserSolutions, groupByDate } from "@/utils/stats";
 import moment from "moment";
 import useUsers from "@/hooks/useUsers";
 import useExamStore from "@/stores/examStore";
-import {Module} from "@/interfaces";
-import {ToastContainer} from "react-toastify";
-import {useRouter} from "next/router";
-import {uniqBy} from "lodash";
-import {getExamById} from "@/utils/exams";
-import {sortByModule} from "@/utils/moduleUtils";
+import { Module } from "@/interfaces";
+import { ToastContainer } from "react-toastify";
+import { useRouter } from "next/router";
+import { uniqBy } from "lodash";
+import { getExamById } from "@/utils/exams";
+import { sortByModule } from "@/utils/moduleUtils";
 import Layout from "@/components/High/Layout";
 import clsx from "clsx";
-import {calculateBandScore} from "@/utils/score";
-import {BsBook, BsClipboard, BsClock, BsHeadphones, BsMegaphone, BsPen, BsPersonDash, BsPersonFillX, BsXCircle} from "react-icons/bs";
+import { calculateBandScore } from "@/utils/score";
+import {
+  BsBook,
+  BsClipboard,
+  BsClock,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsPersonDash,
+  BsPersonFillX,
+  BsXCircle,
+} from "react-icons/bs";
 import Select from "@/components/Low/Select";
 import useGroups from "@/hooks/useGroups";
-import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import useAssignments from "@/hooks/useAssignments";
-import {uuidv4} from "@firebase/util";
-import {usePDFDownload} from "@/hooks/usePDFDownload";
+import { uuidv4 } from "@firebase/util";
+import { usePDFDownload } from "@/hooks/usePDFDownload";
 import useRecordStore from "@/stores/recordStore";
-export const getServerSideProps = withIronSessionSsr(({req, res}) => {
-	const user = req.session.user;
+export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
+  const user = req.session.user;
 
-	if (!user || !user.isVerified) {
-		return {
-			redirect: {
-				destination: "/login",
-				permanent: false,
-			},
-		};
-	}
+  if (!user || !user.isVerified) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
 
-	if (shouldRedirectHome(user)) {
-		return {
-			redirect: {
-				destination: "/",
-				permanent: false,
-			},
-		};
-	}
+  if (shouldRedirectHome(user)) {
+    return {
+      redirect: {
+        destination: "/",
+        permanent: false,
+      },
+    };
+  }
 
-	return {
-		props: {user: req.session.user},
-	};
+  return {
+    props: { user: req.session.user },
+  };
 }, sessionOptions);
 
-export default function History({user}: {user: User}) {
-	const [statsUserId, setStatsUserId] = useRecordStore((state) => [state.selectedUser, state.setSelectedUser]);
-	// const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
-	const [groupedStats, setGroupedStats] = useState<{[key: string]: Stat[]}>();
-	const [filter, setFilter] = useState<"months" | "weeks" | "days" | "assignments">();
-	const {assignments} = useAssignments({});
+const defaultSelectableCorporate = {
+  value: "",
+  label: "All",
+};
 
-	const {users} = useUsers();
-	const {stats, isLoading: isStatsLoading} = useStats(statsUserId);
-	const {groups} = useGroups(user.id);
+export default function History({ user }: { user: User }) {
+  const [statsUserId, setStatsUserId] = useRecordStore((state) => [
+    state.selectedUser,
+    state.setSelectedUser,
+  ]);
+  // const [statsUserId, setStatsUserId] = useState<string | undefined>(user.id);
+  const [groupedStats, setGroupedStats] = useState<{ [key: string]: Stat[] }>();
+  const [filter, setFilter] = useState<
+    "months" | "weeks" | "days" | "assignments"
+  >();
+  const { assignments } = useAssignments({});
 
-	const setExams = useExamStore((state) => state.setExams);
-	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
-	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
-	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
-	const setInactivity = useExamStore((state) => state.setInactivity);
-	const setTimeSpent = useExamStore((state) => state.setTimeSpent);
-	const router = useRouter();
-	const renderPdfIcon = usePDFDownload("stats");
+  const { users } = useUsers();
+  const { stats, isLoading: isStatsLoading } = useStats(statsUserId);
+  const { groups: allGroups } = useGroups();
 
-	useEffect(() => {
-		if (stats && !isStatsLoading) {
-			setGroupedStats(
-				groupByDate(
-					stats.filter((x) => {
-						if (
-							(x.module === "writing" || x.module === "speaking") &&
-							!x.isDisabled &&
-							!x.solutions.every((y) => Object.keys(y).includes("evaluation"))
-						)
-							return false;
-						return true;
-					}),
-				),
-			);
-		}
-	}, [stats, isStatsLoading]);
+  const groups = allGroups.filter((x) => x.admin === user.id);
 
-	useEffect(() => {
-		// just set this initially
-		if(!statsUserId) setStatsUserId(user.id);
-	}, []);
+  const setExams = useExamStore((state) => state.setExams);
+  const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+  const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+  const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+  const setInactivity = useExamStore((state) => state.setInactivity);
+  const setTimeSpent = useExamStore((state) => state.setTimeSpent);
+  const router = useRouter();
+  const renderPdfIcon = usePDFDownload("stats");
 
-	const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
-		setFilter((prev) => (prev === value ? undefined : value));
-	};
+  useEffect(() => {
+    if (stats && !isStatsLoading) {
+      setGroupedStats(
+        groupByDate(
+          stats.filter((x) => {
+            if (
+              (x.module === "writing" || x.module === "speaking") &&
+              !x.isDisabled &&
+              !x.solutions.every((y) => Object.keys(y).includes("evaluation"))
+            )
+              return false;
+            return true;
+          })
+        )
+      );
+    }
+  }, [stats, isStatsLoading]);
 
-	const filterStatsByDate = (stats: {[key: string]: Stat[]}) => {
-		if (filter && filter !== "assignments") {
-			const filterDate = moment()
-				.subtract({[filter as string]: 1})
-				.format("x");
-			const filteredStats: {[key: string]: Stat[]} = {};
+  //   useEffect(() => {
+  //     // just set this initially
+  //     if (!statsUserId) setStatsUserId(user.id);
+  //   }, []);
 
-			Object.keys(stats).forEach((timestamp) => {
-				if (timestamp >= filterDate) filteredStats[timestamp] = stats[timestamp];
-			});
+  const toggleFilter = (value: "months" | "weeks" | "days" | "assignments") => {
+    setFilter((prev) => (prev === value ? undefined : value));
+  };
 
-			return filteredStats;
-		}
+  const filterStatsByDate = (stats: { [key: string]: Stat[] }) => {
+    if (filter && filter !== "assignments") {
+      const filterDate = moment()
+        .subtract({ [filter as string]: 1 })
+        .format("x");
+      const filteredStats: { [key: string]: Stat[] } = {};
 
-		if (filter && filter === "assignments") {
-			const filteredStats: {[key: string]: Stat[]} = {};
+      Object.keys(stats).forEach((timestamp) => {
+        if (timestamp >= filterDate)
+          filteredStats[timestamp] = stats[timestamp];
+      });
 
-			Object.keys(stats).forEach((timestamp) => {
-				if (stats[timestamp].map((s) => s.assignment === undefined).includes(false))
-					filteredStats[timestamp] = [...stats[timestamp].filter((s) => !!s.assignment)];
-			});
+      return filteredStats;
+    }
 
-			return filteredStats;
-		}
+    if (filter && filter === "assignments") {
+      const filteredStats: { [key: string]: Stat[] } = {};
 
-		return stats;
-	};
+      Object.keys(stats).forEach((timestamp) => {
+        if (
+          stats[timestamp]
+            .map((s) => s.assignment === undefined)
+            .includes(false)
+        )
+          filteredStats[timestamp] = [
+            ...stats[timestamp].filter((s) => !!s.assignment),
+          ];
+      });
 
-	const formatTimestamp = (timestamp: string) => {
-		const date = moment(parseInt(timestamp));
-		const formatter = "YYYY/MM/DD - HH:mm";
+      return filteredStats;
+    }
 
-		return date.format(formatter);
-	};
+    return stats;
+  };
 
-	const aggregateScoresByModule = (stats: Stat[]): {module: Module; total: number; missing: number; correct: number}[] => {
-		const scores: {[key in Module]: {total: number; missing: number; correct: number}} = {
-			reading: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			listening: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			writing: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			speaking: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-			level: {
-				total: 0,
-				correct: 0,
-				missing: 0,
-			},
-		};
+  const formatTimestamp = (timestamp: string) => {
+    const date = moment(parseInt(timestamp));
+    const formatter = "YYYY/MM/DD - HH:mm";
 
-		stats.forEach((x) => {
-			scores[x.module!] = {
-				total: scores[x.module!].total + x.score.total,
-				correct: scores[x.module!].correct + x.score.correct,
-				missing: scores[x.module!].missing + x.score.missing,
-			};
-		});
+    return date.format(formatter);
+  };
 
-		return Object.keys(scores)
-			.filter((x) => scores[x as Module].total > 0)
-			.map((x) => ({module: x as Module, ...scores[x as Module]}));
-	};
+  const aggregateScoresByModule = (
+    stats: Stat[]
+  ): { module: Module; total: number; missing: number; correct: number }[] => {
+    const scores: {
+      [key in Module]: { total: number; missing: number; correct: number };
+    } = {
+      reading: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      listening: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      writing: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      speaking: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+      level: {
+        total: 0,
+        correct: 0,
+        missing: 0,
+      },
+    };
 
-	const customContent = (timestamp: string) => {
-		if (!groupedStats) return <></>;
+    stats.forEach((x) => {
+      scores[x.module!] = {
+        total: scores[x.module!].total + x.score.total,
+        correct: scores[x.module!].correct + x.score.correct,
+        missing: scores[x.module!].missing + x.score.missing,
+      };
+    });
 
-		const dateStats = groupedStats[timestamp];
-		const correct = dateStats.reduce((accumulator, current) => accumulator + current.score.correct, 0);
-		const total = dateStats.reduce((accumulator, current) => accumulator + current.score.total, 0);
-		const aggregatedScores = aggregateScoresByModule(dateStats).filter((x) => x.total > 0);
-		const assignmentID = dateStats.reduce((_, current) => current.assignment as any, "");
-		const assignment = assignments.find((a) => a.id === assignmentID);
-		const isDisabled = dateStats.some((x) => x.isDisabled);
+    return Object.keys(scores)
+      .filter((x) => scores[x as Module].total > 0)
+      .map((x) => ({ module: x as Module, ...scores[x as Module] }));
+  };
 
-		const aggregatedLevels = aggregatedScores.map((x) => ({
-			module: x.module,
-			level: calculateBandScore(x.correct, x.total, x.module, user.focus),
-		}));
+  const customContent = (timestamp: string) => {
+    if (!groupedStats) return <></>;
 
-		const {timeSpent, inactivity, session} = dateStats[0];
+    const dateStats = groupedStats[timestamp];
+    const correct = dateStats.reduce(
+      (accumulator, current) => accumulator + current.score.correct,
+      0
+    );
+    const total = dateStats.reduce(
+      (accumulator, current) => accumulator + current.score.total,
+      0
+    );
+    const aggregatedScores = aggregateScoresByModule(dateStats).filter(
+      (x) => x.total > 0
+    );
+    const assignmentID = dateStats.reduce(
+      (_, current) => current.assignment as any,
+      ""
+    );
+    const assignment = assignments.find((a) => a.id === assignmentID);
+    const isDisabled = dateStats.some((x) => x.isDisabled);
 
-		const selectExam = () => {
-			const examPromises = uniqBy(dateStats, "exam").map((stat) => {
-				console.log({stat});
-				return getExamById(stat.module, stat.exam);
-			});
+    const aggregatedLevels = aggregatedScores.map((x) => ({
+      module: x.module,
+      level: calculateBandScore(x.correct, x.total, x.module, user.focus),
+    }));
 
-			Promise.all(examPromises).then((exams) => {
-				if (exams.every((x) => !!x)) {
-					if (!!timeSpent) setTimeSpent(timeSpent);
-					if (!!inactivity) setInactivity(inactivity);
+    const { timeSpent, inactivity, session } = dateStats[0];
 
-					setUserSolutions(convertToUserSolutions(dateStats));
-					setShowSolutions(true);
-					setExams(exams.map((x) => x!).sort(sortByModule));
-					setSelectedModules(
-						exams
-							.map((x) => x!)
-							.sort(sortByModule)
-							.map((x) => x!.module),
-					);
-					router.push("/exercises");
-				}
-			});
-		};
+    const selectExam = () => {
+      const examPromises = uniqBy(dateStats, "exam").map((stat) => {
+        console.log({ stat });
+        return getExamById(stat.module, stat.exam);
+      });
 
-		const textColor = clsx(
-			correct / total >= 0.7 && "text-mti-purple",
-			correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
-			correct / total < 0.3 && "text-mti-rose",
-		);
+      Promise.all(examPromises).then((exams) => {
+        if (exams.every((x) => !!x)) {
+          if (!!timeSpent) setTimeSpent(timeSpent);
+          if (!!inactivity) setInactivity(inactivity);
 
-		const content = (
-			<>
-				<div className="w-full flex justify-between -md:items-center 2xl:items-center">
-					<div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
-						<span className="font-medium">{formatTimestamp(timestamp)}</span>
-						<div className="flex items-center gap-2">
-							{!!timeSpent && (
-								<span className="text-sm flex gap-2 items-center tooltip" data-tip="Time Spent">
-									<BsClock /> {Math.floor(timeSpent / 60)} minutes
-								</span>
-							)}
-							{!!inactivity && (
-								<span className="text-sm flex gap-2 items-center tooltip" data-tip="Inactivity">
-									<BsXCircle /> {Math.floor(inactivity / 60)} minutes
-								</span>
-							)}
-						</div>
-					</div>
-					<div className="flex flex-row gap-2">
-						<span className={textColor}>
-							Level{" "}
-							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
-						</span>
-						{renderPdfIcon(session, textColor, textColor)}
-					</div>
-				</div>
+          setUserSolutions(convertToUserSolutions(dateStats));
+          setShowSolutions(true);
+          setExams(exams.map((x) => x!).sort(sortByModule));
+          setSelectedModules(
+            exams
+              .map((x) => x!)
+              .sort(sortByModule)
+              .map((x) => x!.module)
+          );
+          router.push("/exercises");
+        }
+      });
+    };
 
-				<div className="w-full flex flex-col gap-1">
-					<div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
-						{aggregatedLevels.map(({module, level}) => (
-							<div
-								key={module}
-								className={clsx(
-									"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
-									module === "reading" && "bg-ielts-reading",
-									module === "listening" && "bg-ielts-listening",
-									module === "writing" && "bg-ielts-writing",
-									module === "speaking" && "bg-ielts-speaking",
-									module === "level" && "bg-ielts-level",
-								)}>
-								{module === "reading" && <BsBook className="w-4 h-4" />}
-								{module === "listening" && <BsHeadphones className="w-4 h-4" />}
-								{module === "writing" && <BsPen className="w-4 h-4" />}
-								{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
-								{module === "level" && <BsClipboard className="w-4 h-4" />}
-								<span className="text-sm">{level.toFixed(1)}</span>
-							</div>
-						))}
-					</div>
+    const textColor = clsx(
+      correct / total >= 0.7 && "text-mti-purple",
+      correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
+      correct / total < 0.3 && "text-mti-rose"
+    );
 
-					{assignment && (
-						<span className="font-light text-sm">
-							Assignment: {assignment.name}, Teacher: {users.find((u) => u.id === assignment.assigner)?.name}
-						</span>
-					)}
-				</div>
-			</>
-		);
+    const content = (
+      <>
+        <div className="w-full flex justify-between -md:items-center 2xl:items-center">
+          <div className="flex flex-col md:gap-1 -md:gap-2 2xl:gap-2">
+            <span className="font-medium">{formatTimestamp(timestamp)}</span>
+            <div className="flex items-center gap-2">
+              {!!timeSpent && (
+                <span
+                  className="text-sm flex gap-2 items-center tooltip"
+                  data-tip="Time Spent"
+                >
+                  <BsClock /> {Math.floor(timeSpent / 60)} minutes
+                </span>
+              )}
+              {!!inactivity && (
+                <span
+                  className="text-sm flex gap-2 items-center tooltip"
+                  data-tip="Inactivity"
+                >
+                  <BsXCircle /> {Math.floor(inactivity / 60)} minutes
+                </span>
+              )}
+            </div>
+          </div>
+          <div className="flex flex-row gap-2">
+            <span className={textColor}>
+              Level{" "}
+              {(
+                aggregatedLevels.reduce(
+                  (accumulator, current) => accumulator + current.level,
+                  0
+                ) / aggregatedLevels.length
+              ).toFixed(1)}
+            </span>
+            {renderPdfIcon(session, textColor, textColor)}
+          </div>
+        </div>
 
-		return (
-			<>
-				<div
-					key={uuidv4()}
-					className={clsx(
-						"flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
-						isDisabled && "grayscale tooltip",
-						correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-						correct / total < 0.3 && "hover:border-mti-rose",
-					)}
-					onClick={isDisabled ? () => null : selectExam}
-					data-tip="This exam is still being evaluated..."
-					role="button">
-					{content}
-				</div>
-				<div
-					key={uuidv4()}
-					className={clsx(
-						"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
-						correct / total >= 0.7 && "hover:border-mti-purple",
-						correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
-						correct / total < 0.3 && "hover:border-mti-rose",
-					)}
-					data-tip="Your screen size is too small to view previous exams."
-					role="button">
-					{content}
-				</div>
-			</>
-		);
-	};
+        <div className="w-full flex flex-col gap-1">
+          <div className="grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2">
+            {aggregatedLevels.map(({ module, level }) => (
+              <div
+                key={module}
+                className={clsx(
+                  "flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+                  module === "reading" && "bg-ielts-reading",
+                  module === "listening" && "bg-ielts-listening",
+                  module === "writing" && "bg-ielts-writing",
+                  module === "speaking" && "bg-ielts-speaking",
+                  module === "level" && "bg-ielts-level"
+                )}
+              >
+                {module === "reading" && <BsBook className="w-4 h-4" />}
+                {module === "listening" && <BsHeadphones className="w-4 h-4" />}
+                {module === "writing" && <BsPen className="w-4 h-4" />}
+                {module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+                {module === "level" && <BsClipboard className="w-4 h-4" />}
+                <span className="text-sm">{level.toFixed(1)}</span>
+              </div>
+            ))}
+          </div>
 
-	const selectedUser = users.find((x) => x.id === statsUserId) || user;
-	return (
-		<>
-			<Head>
-				<title>Record | EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			{user && (
-				<Layout user={user}>
-					<div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
-						<div className="xl:w-3/4">
-							{(user.type === "developer" || user.type === "admin") && (
-								<Select
-									options={users.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
-									value={{value: selectedUser.id, label: `${selectedUser.name} - ${selectedUser.email}`}}
-									onChange={(value) => setStatsUserId(value?.value)}
-									styles={{
-										menuPortal: (base) => ({...base, zIndex: 9999}),
-										option: (styles, state) => ({
-											...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-											color: state.isFocused ? "black" : styles.color,
-										}),
-									}}
-								/>
-							)}
-							{(user.type === "corporate" || user.type === "teacher") && groups.length > 0 && (
-								<Select
-									options={users
-										.filter((x) => groups.flatMap((y) => y.participants).includes(x.id))
-										.map((x) => ({value: x.id, label: `${x.name} - ${x.email}`}))}
-									value={{value: selectedUser.id, label: `${selectedUser.name} - ${selectedUser.email}`}}
-									onChange={(value) => setStatsUserId(value?.value)}
-									styles={{
-										menuPortal: (base) => ({...base, zIndex: 9999}),
-										option: (styles, state) => ({
-											...styles,
-											backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
-											color: state.isFocused ? "black" : styles.color,
-										}),
-									}}
-								/>
-							)}
-						</div>
-						<div className="flex gap-4 w-full justify-center xl:justify-end">
-							<button
-								className={clsx(
-									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-									"transition duration-300 ease-in-out",
-									filter === "assignments" && "!bg-mti-purple-light !text-white",
-								)}
-								onClick={() => toggleFilter("assignments")}>
-								Assignments
-							</button>
-							<button
-								className={clsx(
-									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-									"transition duration-300 ease-in-out",
-									filter === "months" && "!bg-mti-purple-light !text-white",
-								)}
-								onClick={() => toggleFilter("months")}>
-								Last month
-							</button>
-							<button
-								className={clsx(
-									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-									"transition duration-300 ease-in-out",
-									filter === "weeks" && "!bg-mti-purple-light !text-white",
-								)}
-								onClick={() => toggleFilter("weeks")}>
-								Last week
-							</button>
-							<button
-								className={clsx(
-									"bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
-									"transition duration-300 ease-in-out",
-									filter === "days" && "!bg-mti-purple-light !text-white",
-								)}
-								onClick={() => toggleFilter("days")}>
-								Last day
-							</button>
-						</div>
-					</div>
-					{groupedStats && Object.keys(groupedStats).length > 0 && !isStatsLoading && (
-						<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
-							{Object.keys(filterStatsByDate(groupedStats))
-								.sort((a, b) => parseInt(b) - parseInt(a))
-								.map(customContent)}
-						</div>
-					)}
-					{groupedStats && Object.keys(groupedStats).length === 0 && !isStatsLoading && (
-						<span className="font-semibold ml-1">No record to display...</span>
-					)}
-				</Layout>
-			)}
-		</>
-	);
+          {assignment && (
+            <span className="font-light text-sm">
+              Assignment: {assignment.name}, Teacher:{" "}
+              {users.find((u) => u.id === assignment.assigner)?.name}
+            </span>
+          )}
+        </div>
+      </>
+    );
+
+    return (
+      <>
+        <div
+          key={uuidv4()}
+          className={clsx(
+            "flex flex-col justify-between gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:hidden",
+            isDisabled && "grayscale tooltip",
+            correct / total >= 0.7 && "hover:border-mti-purple",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
+          )}
+          onClick={isDisabled ? () => null : selectExam}
+          data-tip="This exam is still being evaluated..."
+          role="button"
+        >
+          {content}
+        </div>
+        <div
+          key={uuidv4()}
+          className={clsx(
+            "flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300 -md:tooltip md:hidden",
+            correct / total >= 0.7 && "hover:border-mti-purple",
+            correct / total >= 0.3 &&
+              correct / total < 0.7 &&
+              "hover:border-mti-red",
+            correct / total < 0.3 && "hover:border-mti-rose"
+          )}
+          data-tip="Your screen size is too small to view previous exams."
+          role="button"
+        >
+          {content}
+        </div>
+      </>
+    );
+  };
+
+  const selectableCorporates = [
+    defaultSelectableCorporate,
+    ...users
+      .filter((x) => x.type === "corporate")
+      .map((x) => ({
+        value: x.id,
+        label: `${x.name} - ${x.email}`,
+      })),
+  ];
+
+  const [selectedCorporate, setSelectedCorporate] = useState<string>(
+    defaultSelectableCorporate.value
+  );
+
+  const getUsersList = (): User[] => {
+    if (selectedCorporate) {
+      // get groups for that corporate
+      const selectedCorporateGroups = allGroups.filter(
+        (x) => x.admin === selectedCorporate
+      );
+
+      // get the teacher ids for that group
+      const selectedCorporateGroupsParticipants =
+        selectedCorporateGroups.flatMap((x) => x.participants);
+
+      //   // search for groups for these teachers
+      //   const teacherGroups = allGroups.filter((x) => {
+      //     return selectedCorporateGroupsParticipants.includes(x.admin);
+      //   });
+
+      //   const usersList = [
+      //     ...selectedCorporateGroupsParticipants,
+      //     ...teacherGroups.flatMap((x) => x.participants),
+      //   ];
+      const userListWithUsers = selectedCorporateGroupsParticipants.map((x) =>
+        users.find((y) => y.id === x)
+      ) as User[];
+      return userListWithUsers.filter((x) => x);
+    }
+
+    return users || [];
+  };
+
+  const corporateFilteredUserList = getUsersList();
+
+  const getSelectedUser = () => {
+    if (selectedCorporate) {
+      const userInCorporate = corporateFilteredUserList.find(
+        (x) => x.id === statsUserId
+      );
+      return userInCorporate || corporateFilteredUserList[0];
+    }
+
+    return users.find((x) => x.id === statsUserId) || user;
+  };
+
+  const selectedUser = getSelectedUser();
+  const selectedUserSelectValue = selectedUser
+    ? {
+        value: selectedUser.id,
+        label: `${selectedUser.name} - ${selectedUser.email}`,
+      }
+    : {
+        value: "",
+        label: "",
+      };
+  return (
+    <>
+      <Head>
+        <title>Record | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      {user && (
+        <Layout user={user}>
+          <div className="w-full flex -xl:flex-col -xl:gap-4 justify-between items-center">
+            <div className="xl:w-3/4">
+              {(user.type === "developer" || user.type === "admin") && (
+                <>
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    Corporate
+                  </label>
+
+                  <Select
+                    options={selectableCorporates}
+                    value={selectableCorporates.find(
+                      (x) => x.value === selectedCorporate
+                    )}
+                    onChange={(value) =>
+                      setSelectedCorporate(value?.value || "")
+                    }
+                    styles={{
+                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                      option: (styles, state) => ({
+                        ...styles,
+                        backgroundColor: state.isFocused
+                          ? "#D5D9F0"
+                          : state.isSelected
+                          ? "#7872BF"
+                          : "white",
+                        color: state.isFocused ? "black" : styles.color,
+                      }),
+                    }}
+                  ></Select>
+                  <label className="font-normal text-base text-mti-gray-dim">
+                    User
+                  </label>
+
+                  <Select
+                    options={corporateFilteredUserList.map((x) => ({
+                      value: x.id,
+                      label: `${x.name} - ${x.email}`,
+                    }))}
+                    value={selectedUserSelectValue}
+                    onChange={(value) => setStatsUserId(value?.value)}
+                    styles={{
+                      menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                      option: (styles, state) => ({
+                        ...styles,
+                        backgroundColor: state.isFocused
+                          ? "#D5D9F0"
+                          : state.isSelected
+                          ? "#7872BF"
+                          : "white",
+                        color: state.isFocused ? "black" : styles.color,
+                      }),
+                    }}
+                  />
+                </>
+              )}
+              {(user.type === "corporate" || user.type === "teacher") &&
+                groups.length > 0 && (
+                  <>
+                    <label className="font-normal text-base text-mti-gray-dim">
+                      User
+                    </label>
+
+                    <Select
+                      options={users
+                        .filter((x) =>
+                          groups.flatMap((y) => y.participants).includes(x.id)
+                        )
+                        .map((x) => ({
+                          value: x.id,
+                          label: `${x.name} - ${x.email}`,
+                        }))}
+                      value={selectedUserSelectValue}
+                      onChange={(value) => setStatsUserId(value?.value)}
+                      styles={{
+                        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+                        option: (styles, state) => ({
+                          ...styles,
+                          backgroundColor: state.isFocused
+                            ? "#D5D9F0"
+                            : state.isSelected
+                            ? "#7872BF"
+                            : "white",
+                          color: state.isFocused ? "black" : styles.color,
+                        }),
+                      }}
+                    />
+                  </>
+                )}
+            </div>
+            <div className="flex gap-4 w-full justify-center xl:justify-end">
+              <button
+                className={clsx(
+                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                  "transition duration-300 ease-in-out",
+                  filter === "assignments" && "!bg-mti-purple-light !text-white"
+                )}
+                onClick={() => toggleFilter("assignments")}
+              >
+                Assignments
+              </button>
+              <button
+                className={clsx(
+                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                  "transition duration-300 ease-in-out",
+                  filter === "months" && "!bg-mti-purple-light !text-white"
+                )}
+                onClick={() => toggleFilter("months")}
+              >
+                Last month
+              </button>
+              <button
+                className={clsx(
+                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                  "transition duration-300 ease-in-out",
+                  filter === "weeks" && "!bg-mti-purple-light !text-white"
+                )}
+                onClick={() => toggleFilter("weeks")}
+              >
+                Last week
+              </button>
+              <button
+                className={clsx(
+                  "bg-mti-purple-ultralight text-mti-purple px-4 py-2 rounded-full hover:text-white hover:bg-mti-purple-light",
+                  "transition duration-300 ease-in-out",
+                  filter === "days" && "!bg-mti-purple-light !text-white"
+                )}
+                onClick={() => toggleFilter("days")}
+              >
+                Last day
+              </button>
+            </div>
+          </div>
+          {groupedStats &&
+            Object.keys(groupedStats).length > 0 &&
+            !isStatsLoading && (
+              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 w-full gap-4 xl:gap-6">
+                {Object.keys(filterStatsByDate(groupedStats))
+                  .sort((a, b) => parseInt(b) - parseInt(a))
+                  .map(customContent)}
+              </div>
+            )}
+          {groupedStats &&
+            Object.keys(groupedStats).length === 0 &&
+            !isStatsLoading && (
+              <span className="font-semibold ml-1">
+                No record to display...
+              </span>
+            )}
+        </Layout>
+      )}
+    </>
+  );
 }