diff --git a/src/exams/Selection.tsx b/src/exams/Selection.tsx
index b33ea752..95169e27 100644
--- a/src/exams/Selection.tsx
+++ b/src/exams/Selection.tsx
@@ -1,442 +1,310 @@
 /* eslint-disable @next/next/no-img-element */
-import { useState } from "react";
-import { Module } from "@/interfaces";
+import {useState} from "react";
+import {Module} from "@/interfaces";
 import clsx from "clsx";
-import { User } from "@/interfaces/user";
+import {User} from "@/interfaces/user";
 import ProgressBar from "@/components/Low/ProgressBar";
-import {
-  BsArrowRepeat,
-  BsBook,
-  BsCheck,
-  BsCheckCircle,
-  BsClipboard,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-  BsXCircle,
-} from "react-icons/bs";
-import { totalExamsByModule } from "@/utils/stats";
+import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
+import {totalExamsByModule} from "@/utils/stats";
 import useStats from "@/hooks/useStats";
 import Button from "@/components/Low/Button";
-import { calculateAverageLevel } from "@/utils/score";
-import { sortByModuleName } from "@/utils/moduleUtils";
-import { capitalize } from "lodash";
+import {calculateAverageLevel} from "@/utils/score";
+import {sortByModuleName} from "@/utils/moduleUtils";
+import {capitalize} from "lodash";
 import ProfileSummary from "@/components/ProfileSummary";
-import { Variant } from "@/interfaces/exam";
-import useSessions, { Session } from "@/hooks/useSessions";
+import {Variant} from "@/interfaces/exam";
+import useSessions, {Session} from "@/hooks/useSessions";
 import SessionCard from "@/components/Medium/SessionCard";
 import useExamStore from "@/stores/examStore";
 import moment from "moment";
 
 interface Props {
-  user: User;
-  page: "exercises" | "exams";
-  onStart: (
-    modules: Module[],
-    avoidRepeated: boolean,
-    variant: Variant,
-  ) => void;
-  disableSelection?: boolean;
+	user: User;
+	page: "exercises" | "exams";
+	onStart: (modules: Module[], avoidRepeated: boolean, variant: Variant) => void;
+	disableSelection?: boolean;
 }
 
-export default function Selection({
-  user,
-  page,
-  onStart,
-  disableSelection = false,
-}: Props) {
-  const [selectedModules, setSelectedModules] = useState<Module[]>([]);
-  const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
-  const [variant, setVariant] = useState<Variant>("full");
+export default function Selection({user, page, onStart, disableSelection = false}: Props) {
+	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
+	const [variant, setVariant] = useState<Variant>("full");
 
-  const { stats } = useStats(user?.id);
-  const { sessions, isLoading, reload } = useSessions(user.id);
+	const {stats} = useStats(user?.id);
+	const {sessions, isLoading, reload} = useSessions(user.id);
 
-  const state = useExamStore((state) => state);
+	const state = useExamStore((state) => state);
 
-  const toggleModule = (module: Module) => {
-    const modules = selectedModules.filter((x) => x !== module);
-    setSelectedModules((prev) =>
-      prev.includes(module) ? modules : [...modules, module],
-    );
-  };
+	const toggleModule = (module: Module) => {
+		const modules = selectedModules.filter((x) => x !== module);
+		setSelectedModules((prev) => (prev.includes(module) ? modules : [...modules, module]));
+	};
 
-  const loadSession = async (session: Session) => {
-    state.setSelectedModules(session.selectedModules);
-    state.setExam(session.exam);
-    state.setExams(session.exams);
-    state.setSessionId(session.sessionId);
-    state.setAssignment(session.assignment);
-    state.setExerciseIndex(session.exerciseIndex);
-    state.setPartIndex(session.partIndex);
-    state.setModuleIndex(session.moduleIndex);
-    state.setTimeSpent(session.timeSpent);
-    state.setUserSolutions(session.userSolutions);
-    state.setShowSolutions(false);
-    state.setQuestionIndex(session.questionIndex);
-  };
+	const loadSession = async (session: Session) => {
+		state.setSelectedModules(session.selectedModules);
+		state.setExam(session.exam);
+		state.setExams(session.exams);
+		state.setSessionId(session.sessionId);
+		state.setAssignment(session.assignment);
+		state.setExerciseIndex(session.exerciseIndex);
+		state.setPartIndex(session.partIndex);
+		state.setModuleIndex(session.moduleIndex);
+		state.setTimeSpent(session.timeSpent);
+		state.setUserSolutions(session.userSolutions);
+		state.setShowSolutions(false);
+		state.setQuestionIndex(session.questionIndex);
+	};
 
-  return (
-    <>
-      <div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
-        {user && (
-          <ProfileSummary
-            user={user}
-            items={[
-              {
-                icon: (
-                  <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />
-                ),
-                label: "Reading",
-                value: totalExamsByModule(stats, "reading"),
-                tooltip: "The amount of reading exams performed.",
-              },
-              {
-                icon: (
-                  <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />
-                ),
-                label: "Listening",
-                value: totalExamsByModule(stats, "listening"),
-                tooltip: "The amount of listening exams performed.",
-              },
-              {
-                icon: (
-                  <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />
-                ),
-                label: "Writing",
-                value: totalExamsByModule(stats, "writing"),
-                tooltip: "The amount of writing exams performed.",
-              },
-              {
-                icon: (
-                  <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />
-                ),
-                label: "Speaking",
-                value: totalExamsByModule(stats, "speaking"),
-                tooltip: "The amount of speaking exams performed.",
-              },
-              {
-                icon: (
-                  <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />
-                ),
-                label: "Level",
-                value: totalExamsByModule(stats, "level"),
-                tooltip: "The amount of level exams performed.",
-              },
-            ]}
-          />
-        )}
+	return (
+		<>
+			<div className="relative flex h-full w-full flex-col gap-8 md:gap-16">
+				{user && (
+					<ProfileSummary
+						user={user}
+						items={[
+							{
+								icon: <BsBook className="text-ielts-reading h-6 w-6 md:h-8 md:w-8" />,
+								label: "Reading",
+								value: totalExamsByModule(stats, "reading"),
+								tooltip: "The amount of reading exams performed.",
+							},
+							{
+								icon: <BsHeadphones className="text-ielts-listening h-6 w-6 md:h-8 md:w-8" />,
+								label: "Listening",
+								value: totalExamsByModule(stats, "listening"),
+								tooltip: "The amount of listening exams performed.",
+							},
+							{
+								icon: <BsPen className="text-ielts-writing h-6 w-6 md:h-8 md:w-8" />,
+								label: "Writing",
+								value: totalExamsByModule(stats, "writing"),
+								tooltip: "The amount of writing exams performed.",
+							},
+							{
+								icon: <BsMegaphone className="text-ielts-speaking h-6 w-6 md:h-8 md:w-8" />,
+								label: "Speaking",
+								value: totalExamsByModule(stats, "speaking"),
+								tooltip: "The amount of speaking exams performed.",
+							},
+							{
+								icon: <BsClipboard className="text-ielts-level h-6 w-6 md:h-8 md:w-8" />,
+								label: "Level",
+								value: totalExamsByModule(stats, "level"),
+								tooltip: "The amount of level exams performed.",
+							},
+						]}
+					/>
+				)}
 
-        <section className="flex flex-col gap-3">
-          <span className="text-lg font-bold">About {capitalize(page)}</span>
-          <span className="text-mti-gray-taupe">
-            {page === "exercises" && (
-              <>
-                In the realm of language acquisition, practice makes perfect,
-                and our exercises are the key to unlocking your full potential.
-                Dive into a world of interactive and engaging exercises that
-                cater to diverse learning styles. From grammar drills that build
-                a strong foundation to vocabulary challenges that broaden your
-                lexicon, our exercises are carefully designed to make learning
-                English both enjoyable and effective. Whether you&apos;re
-                looking to reinforce specific skills or embark on a holistic
-                language journey, our exercises are your companions in the
-                pursuit of excellence. Embrace the joy of learning as you
-                navigate through a variety of activities that cater to every
-                facet of language acquisition. Your linguistic adventure starts
-                here!
-              </>
-            )}
-            {page === "exams" && (
-              <>
-                Welcome to the heart of success on your English language
-                journey! Our exams are crafted with precision to assess and
-                enhance your language skills. Each test is a passport to your
-                linguistic prowess, designed to challenge and elevate your
-                abilities. Whether you&apos;re a beginner or a seasoned learner,
-                our exams cater to all levels, providing a comprehensive
-                evaluation of your reading, writing, speaking, and listening
-                skills. Prepare to embark on a journey of self-discovery and
-                language mastery as you navigate through our thoughtfully
-                curated exams. Your success is not just a destination; it&apos;s
-                a testament to your dedication and our commitment to empowering
-                you with the English language.
-              </>
-            )}
-          </span>
-        </section>
+				<section className="flex flex-col gap-3">
+					<span className="text-lg font-bold">About {capitalize(page)}</span>
+					<span className="text-mti-gray-taupe">
+						{page === "exercises" && (
+							<>
+								In the realm of language acquisition, practice makes perfect, and our exercises are the key to unlocking your full
+								potential. Dive into a world of interactive and engaging exercises that cater to diverse learning styles. From grammar
+								drills that build a strong foundation to vocabulary challenges that broaden your lexicon, our exercises are carefully
+								designed to make learning English both enjoyable and effective. Whether you&apos;re looking to reinforce specific
+								skills or embark on a holistic language journey, our exercises are your companions in the pursuit of excellence.
+								Embrace the joy of learning as you navigate through a variety of activities that cater to every facet of language
+								acquisition. Your linguistic adventure starts here!
+							</>
+						)}
+						{page === "exams" && (
+							<>
+								Welcome to the heart of success on your English language journey! Our exams are crafted with precision to assess and
+								enhance your language skills. Each test is a passport to your linguistic prowess, designed to challenge and elevate
+								your abilities. Whether you&apos;re a beginner or a seasoned learner, our exams cater to all levels, providing a
+								comprehensive evaluation of your reading, writing, speaking, and listening skills. Prepare to embark on a journey of
+								self-discovery and language mastery as you navigate through our thoughtfully curated exams. Your success is not just a
+								destination; it&apos;s a testament to your dedication and our commitment to empowering you with the English language.
+							</>
+						)}
+					</span>
+				</section>
 
-        {sessions.length > 0 && (
-          <section className="flex flex-col gap-3 md:gap-3">
-            <div className="flex items-center gap-4">
-              <div
-                onClick={reload}
-                className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
-              >
-                <span className="text-mti-black text-lg font-bold">
-                  Unfinished Sessions
-                </span>
-                <BsArrowRepeat
-                  className={clsx("text-xl", isLoading && "animate-spin")}
-                />
-              </div>
-            </div>
-            <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
-              {sessions
-                .sort((a, b) => moment(b.date).diff(moment(a.date)))
-                .map((session) => (
-                  <SessionCard
-                    session={session}
-                    key={session.sessionId}
-                    reload={reload}
-                    loadSession={loadSession}
-                  />
-                ))}
-            </span>
-          </section>
-        )}
+				{sessions.length > 0 && (
+					<section className="flex flex-col gap-3 md:gap-3">
+						<div className="flex items-center gap-4">
+							<div
+								onClick={reload}
+								className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out">
+								<span className="text-mti-black text-lg font-bold">Unfinished Sessions</span>
+								<BsArrowRepeat className={clsx("text-xl", isLoading && "animate-spin")} />
+							</div>
+						</div>
+						<span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+							{sessions
+								.sort((a, b) => moment(b.date).diff(moment(a.date)))
+								.map((session) => (
+									<SessionCard session={session} key={session.sessionId} reload={reload} loadSession={loadSession} />
+								))}
+						</span>
+					</section>
+				)}
 
-        <section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
-          <div
-            onClick={
-              !disableSelection && !selectedModules.includes("level")
-                ? () => toggleModule("reading")
-                : undefined
-            }
-            className={clsx(
-              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-              selectedModules.includes("reading") || disableSelection
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum",
-            )}
-          >
-            <div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-              <BsBook className="h-7 w-7 text-white" />
-            </div>
-            <span className="font-semibold">Reading:</span>
-            <p className="text-left text-xs">
-              Expand your vocabulary, improve your reading comprehension and
-              improve your ability to interpret texts in English.
-            </p>
-            {!selectedModules.includes("reading") &&
-              !selectedModules.includes("level") &&
-              !disableSelection && (
-                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-              )}
-            {(selectedModules.includes("reading") || disableSelection) && (
-              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-            )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              !disableSelection && !selectedModules.includes("level")
-                ? () => toggleModule("listening")
-                : undefined
-            }
-            className={clsx(
-              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-              selectedModules.includes("listening") || disableSelection
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum",
-            )}
-          >
-            <div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-              <BsHeadphones className="h-7 w-7 text-white" />
-            </div>
-            <span className="font-semibold">Listening:</span>
-            <p className="text-left text-xs">
-              Improve your ability to follow conversations in English and your
-              ability to understand different accents and intonations.
-            </p>
-            {!selectedModules.includes("listening") &&
-              !selectedModules.includes("level") &&
-              !disableSelection && (
-                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-              )}
-            {(selectedModules.includes("listening") || disableSelection) && (
-              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-            )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              !disableSelection && !selectedModules.includes("level")
-                ? () => toggleModule("writing")
-                : undefined
-            }
-            className={clsx(
-              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-              selectedModules.includes("writing") || disableSelection
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum",
-            )}
-          >
-            <div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-              <BsPen className="h-7 w-7 text-white" />
-            </div>
-            <span className="font-semibold">Writing:</span>
-            <p className="text-left text-xs">
-              Allow you to practice writing in a variety of formats, from simple
-              paragraphs to complex essays.
-            </p>
-            {!selectedModules.includes("writing") &&
-              !selectedModules.includes("level") &&
-              !disableSelection && (
-                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-              )}
-            {(selectedModules.includes("writing") || disableSelection) && (
-              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-            )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-            )}
-          </div>
-          <div
-            onClick={
-              !disableSelection && !selectedModules.includes("level")
-                ? () => toggleModule("speaking")
-                : undefined
-            }
-            className={clsx(
-              "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-              selectedModules.includes("speaking") || disableSelection
-                ? "border-mti-purple-light"
-                : "border-mti-gray-platinum",
-            )}
-          >
-            <div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-              <BsMegaphone className="h-7 w-7 text-white" />
-            </div>
-            <span className="font-semibold">Speaking:</span>
-            <p className="text-left text-xs">
-              You&apos;ll have access to interactive dialogs, pronunciation
-              exercises and speech recordings.
-            </p>
-            {!selectedModules.includes("speaking") &&
-              !selectedModules.includes("level") &&
-              !disableSelection && (
-                <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-              )}
-            {(selectedModules.includes("speaking") || disableSelection) && (
-              <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-            )}
-            {selectedModules.includes("level") && (
-              <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-            )}
-          </div>
-          {!disableSelection && (
-            <div
-              onClick={
-                selectedModules.length === 0 ||
-                selectedModules.includes("level")
-                  ? () => toggleModule("level")
-                  : undefined
-              }
-              className={clsx(
-                "bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
-                selectedModules.includes("level") || disableSelection
-                  ? "border-mti-purple-light"
-                  : "border-mti-gray-platinum",
-              )}
-            >
-              <div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
-                <BsClipboard className="h-7 w-7 text-white" />
-              </div>
-              <span className="font-semibold">Level:</span>
-              <p className="text-left text-xs">
-                You&apos;ll be able to test your english level with multiple
-                choice questions.
-              </p>
-              {!selectedModules.includes("level") &&
-                selectedModules.length === 0 &&
-                !disableSelection && (
-                  <div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
-                )}
-              {(selectedModules.includes("level") || disableSelection) && (
-                <BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
-              )}
-              {!selectedModules.includes("level") &&
-                selectedModules.length > 0 && (
-                  <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
-                )}
-            </div>
-          )}
-        </section>
-        <div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
-          <div className="flex w-full flex-col items-center gap-3">
-            <div
-              className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
-              onClick={() => setAvoidRepeatedExams((prev) => !prev)}
-            >
-              <input type="checkbox" className="hidden" />
-              <div
-                className={clsx(
-                  "border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
-                  "transition duration-300 ease-in-out",
-                  avoidRepeatedExams && "!bg-mti-purple-light ",
-                )}
-              >
-                <BsCheck color="white" className="h-full w-full" />
-              </div>
-              <span
-                className="tooltip"
-                data-tip="If possible, the platform will choose exams not yet done."
-              >
-                Avoid Repeated Questions
-              </span>
-            </div>
-            <div
-              className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
-              // onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
-            >
-              <input type="checkbox" className="hidden" disabled />
-              <div
-                className={clsx(
-                  "border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
-                  "transition duration-300 ease-in-out",
-                  variant === "full" && "!bg-mti-purple-light ",
-                )}
-              >
-                <BsCheck color="white" className="h-full w-full" />
-              </div>
-              <span>Full length exams</span>
-            </div>
-          </div>
-          <div
-            className="tooltip w-full"
-            data-tip={`Your screen size is too small to do ${page}`}
-          >
-            <Button
-              color="purple"
-              className="w-full max-w-xs px-12 md:hidden"
-              disabled
-            >
-              Start Exam
-            </Button>
-          </div>
-          <Button
-            onClick={() =>
-              onStart(
-                !disableSelection
-                  ? selectedModules.sort(sortByModuleName)
-                  : ["reading", "listening", "writing", "speaking"],
-                avoidRepeatedExams,
-                variant,
-              )
-            }
-            color="purple"
-            className="-md:hidden w-full max-w-xs px-12 md:self-end"
-            disabled={selectedModules.length === 0 && !disableSelection}
-          >
-            Start Exam
-          </Button>
-        </div>
-      </div>
-    </>
-  );
+				<section className="-lg:flex-col -lg:items-center -lg:gap-12 mt-4 flex w-full justify-between gap-8">
+					<div
+						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("reading") : undefined}
+						className={clsx(
+							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="bg-ielts-reading absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+							<BsBook className="h-7 w-7 text-white" />
+						</div>
+						<span className="font-semibold">Reading:</span>
+						<p className="text-left text-xs">
+							Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
+						</p>
+						{!selectedModules.includes("reading") && !selectedModules.includes("level") && !disableSelection && (
+							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+						)}
+						{(selectedModules.includes("reading") || disableSelection) && (
+							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
+					</div>
+					<div
+						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("listening") : undefined}
+						className={clsx(
+							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="bg-ielts-listening absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+							<BsHeadphones className="h-7 w-7 text-white" />
+						</div>
+						<span className="font-semibold">Listening:</span>
+						<p className="text-left text-xs">
+							Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
+						</p>
+						{!selectedModules.includes("listening") && !selectedModules.includes("level") && !disableSelection && (
+							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+						)}
+						{(selectedModules.includes("listening") || disableSelection) && (
+							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
+					</div>
+					<div
+						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("writing") : undefined}
+						className={clsx(
+							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="bg-ielts-writing absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+							<BsPen className="h-7 w-7 text-white" />
+						</div>
+						<span className="font-semibold">Writing:</span>
+						<p className="text-left text-xs">
+							Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
+						</p>
+						{!selectedModules.includes("writing") && !selectedModules.includes("level") && !disableSelection && (
+							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+						)}
+						{(selectedModules.includes("writing") || disableSelection) && (
+							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
+					</div>
+					<div
+						onClick={!disableSelection && !selectedModules.includes("level") ? () => toggleModule("speaking") : undefined}
+						className={clsx(
+							"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+						)}>
+						<div className="bg-ielts-speaking absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+							<BsMegaphone className="h-7 w-7 text-white" />
+						</div>
+						<span className="font-semibold">Speaking:</span>
+						<p className="text-left text-xs">
+							You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
+						</p>
+						{!selectedModules.includes("speaking") && !selectedModules.includes("level") && !disableSelection && (
+							<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+						)}
+						{(selectedModules.includes("speaking") || disableSelection) && (
+							<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+						)}
+						{selectedModules.includes("level") && <BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />}
+					</div>
+					{!disableSelection && (
+						<div
+							onClick={selectedModules.length === 0 || selectedModules.includes("level") ? () => toggleModule("level") : undefined}
+							className={clsx(
+								"bg-mti-white-alt relative flex w-64 max-w-xs cursor-pointer flex-col items-center gap-2 rounded-xl border p-5 pt-12 transition duration-300 ease-in-out",
+								selectedModules.includes("level") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
+							)}>
+							<div className="bg-ielts-level absolute top-0 flex h-16 w-16 -translate-y-1/2 items-center justify-center rounded-full">
+								<BsClipboard className="h-7 w-7 text-white" />
+							</div>
+							<span className="font-semibold">Level:</span>
+							<p className="text-left text-xs">You&apos;ll be able to test your english level with multiple choice questions.</p>
+							{!selectedModules.includes("level") && selectedModules.length === 0 && !disableSelection && (
+								<div className="border-mti-gray-platinum mt-4 h-8 w-8 rounded-full border" />
+							)}
+							{(selectedModules.includes("level") || disableSelection) && (
+								<BsCheckCircle className="text-mti-purple-light mt-4 h-8 w-8" />
+							)}
+							{!selectedModules.includes("level") && selectedModules.length > 0 && (
+								<BsXCircle className="text-mti-red-light mt-4 h-8 w-8" />
+							)}
+						</div>
+					)}
+				</section>
+				<div className="-md:flex-col -md:gap-4 -md:justify-center flex w-full items-center md:justify-between">
+					<div className="flex w-full flex-col items-center gap-3">
+						<div
+							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center gap-3 text-sm"
+							onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
+							<input type="checkbox" className="hidden" />
+							<div
+								className={clsx(
+									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
+									"transition duration-300 ease-in-out",
+									avoidRepeatedExams && "!bg-mti-purple-light ",
+								)}>
+								<BsCheck color="white" className="h-full w-full" />
+							</div>
+							<span className="tooltip" data-tip="If possible, the platform will choose exams not yet done.">
+								Avoid Repeated Questions
+							</span>
+						</div>
+						<div
+							className="text-mti-gray-dim -md:justify-center flex w-full cursor-pointer items-center  gap-3 text-sm"
+							onClick={() => setVariant((prev) => (prev === "full" ? "partial" : "full"))}>
+							<input type="checkbox" className="hidden" />
+							<div
+								className={clsx(
+									"border-mti-purple-light flex h-6 w-6 items-center justify-center rounded-md border bg-white",
+									"transition duration-300 ease-in-out",
+									variant === "full" && "!bg-mti-purple-light ",
+								)}>
+								<BsCheck color="white" className="h-full w-full" />
+							</div>
+							<span>Full length exams</span>
+						</div>
+					</div>
+					<div className="tooltip w-full" data-tip={`Your screen size is too small to do ${page}`}>
+						<Button color="purple" className="w-full max-w-xs px-12 md:hidden" disabled>
+							Start Exam
+						</Button>
+					</div>
+					<Button
+						onClick={() =>
+							onStart(
+								!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"],
+								avoidRepeatedExams,
+								variant,
+							)
+						}
+						color="purple"
+						className="-md:hidden w-full max-w-xs px-12 md:self-end"
+						disabled={selectedModules.length === 0 && !disableSelection}>
+						Start Exam
+					</Button>
+				</div>
+			</div>
+		</>
+	);
 }