Updated the platform colors to the new ones

src/components/Exercises/FillBlanks.tsx

@@ -31,7 +31,7 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
 					isOpen ? "visible opacity-100" : "invisible opacity-0",
 				)}>
 				<div className="w-full flex gap-2">
-					<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-green-light">{blankId}</div>
+					<div className="rounded-full w-6 h-6 flex items-center justify-center text-white bg-mti-purple-light">{blankId}</div>
 					<span> Choose the correct word:</span>
 				</div>
 				<div className="grid grid-cols-6 gap-6">
@@ -41,8 +41,8 @@ function WordsDrawer({words, isOpen, blankId, previouslySelectedWord, onCancel,
 							onClick={() => setSelectedWord((prev) => (prev === word ? undefined : word))}
 							className={clsx(
 								"rounded-full py-3 text-center transition duration-300 ease-in-out",
-								selectedWord === word ? "text-white bg-mti-green-light" : "bg-mti-green-ultralight",
+								selectedWord === word ? "text-white bg-mti-purple-light" : "bg-mti-purple-ultralight",
-								!isDisabled && "hover:text-white hover:bg-mti-green",
+								!isDisabled && "hover:text-white hover:bg-mti-purple",
 								"disabled:cursor-not-allowed disabled:text-mti-gray-dim",
 							)}
 							disabled={isDisabled}>
@@ -101,10 +101,10 @@ export default function FillBlanks({
 					return (
 						<button
 							className={clsx(
-								"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
+								"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
-								!userSolution && "w-6 h-6 text-center text-mti-green-light bg-mti-green-ultralight",
+								!userSolution && "w-6 h-6 text-center text-mti-purple-light bg-mti-purple-ultralight",
-								currentBlankId === id && "text-white !bg-mti-green-light ",
+								currentBlankId === id && "text-white !bg-mti-purple-light ",
-								userSolution && "px-5 py-2 text-center text-white bg-mti-green-light",
+								userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
 							)}
 							onClick={() => setCurrentBlankId(id)}>
 							{userSolution ? userSolution.solution : id}

src/components/Exercises/MatchSentences.tsx

@@ -51,9 +51,9 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 									id={id}
 									onClick={() => setSelectedQuestion((prev) => (prev === id ? undefined : id))}
 									className={clsx(
-										"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
+										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
 										"transition duration-300 ease-in-out",
-										selectedQuestion === id && "!text-white !bg-mti-green",
+										selectedQuestion === id && "!text-white !bg-mti-purple",
 										id,
 									)}>
 									{id}
@@ -68,7 +68,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 									id={id}
 									onClick={() => selectOption(id)}
 									className={clsx(
-										"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
+										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
 										"transition duration-300 ease-in-out",
 										id,
 									)}>

src/components/Exercises/MultipleChoice.tsx

@@ -23,7 +23,7 @@ function Question({
 							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
 							className={clsx(
 								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative",
-								userSolution === option.id && "border-mti-green-light",
+								userSolution === option.id && "border-mti-purple-light",
 							)}>
 							<span className={clsx("text-sm", userSolution !== option.id && "opacity-50")}>{option.id}</span>
 							<img src={option.src!} alt={`Option ${option.id}`} />
@@ -36,7 +36,7 @@ function Question({
 							onClick={() => (onSelectOption ? onSelectOption(option.id) : null)}
 							className={clsx(
 								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-sm",
-								userSolution === option.id && "border-mti-green-light",
+								userSolution === option.id && "border-mti-purple-light",
 							)}>
 							<span className="font-semibold">{option.id}.</span>
 							<span>{option.text}</span>

src/components/Exercises/Speaking.tsx

@@ -103,7 +103,7 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 												setIsRecording(false);
 												stopRecording();
 											}}
-											className="text-mti-green-light w-8 h-8 cursor-pointer"
+											className="text-mti-purple-light w-8 h-8 cursor-pointer"
 										/>
 									</div>
 								</>
@@ -128,14 +128,14 @@ export default function Speaking({id, title, text, type, prompts, onNext, onBack
 												setIsRecording(true);
 												resumeRecording();
 											}}
-											className="text-mti-green-light w-8 h-8 cursor-pointer"
+											className="text-mti-purple-light w-8 h-8 cursor-pointer"
 										/>
 										<BsCheckCircleFill
 											onClick={() => {
 												setIsRecording(false);
 												stopRecording();
 											}}
-											className="text-mti-green-light w-8 h-8 cursor-pointer"
+											className="text-mti-purple-light w-8 h-8 cursor-pointer"
 										/>
 									</div>
 								</>

src/components/Low/AudioPlayer.tsx

@@ -7,7 +7,7 @@ import ProgressBar from "./ProgressBar";
 
 interface Props {
 	src: string;
-	color: "blue" | "orange" | "green" | Module;
+	color: "red" | "rose" | "purple" | Module;
 	autoPlay?: boolean;
 	disabled?: boolean;
 	onEnd?: () => void;

src/components/Low/Button.tsx

@@ -13,14 +13,14 @@ interface Props {
 export default function Button({color = "green", variant = "solid", disabled = false, className, children, onClick}: Props) {
 	const colorClassNames: {[key in typeof color]: {[key in typeof variant]: string}} = {
 		green: {
-			solid: "bg-mti-green-light text-white hover:bg-mti-green disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark",
+			solid: "bg-mti-purple-light text-white hover:bg-mti-purple disabled:text-mti-purple disabled:bg-mti-purple-ultralight selection:bg-mti-purple-dark",
 			outline:
-				"bg-transparent text-mti-green-light border border-mti-green-light hover:bg-mti-green-light disabled:text-mti-green disabled:bg-mti-green-ultralight selection:bg-mti-green-dark hover:text-white selection:text-white",
+				"bg-transparent text-mti-purple-light border border-mti-purple-light hover:bg-mti-purple-light disabled:text-mti-purple disabled:bg-mti-purple-ultralight selection:bg-mti-purple-dark hover:text-white selection:text-white",
 		},
 		blue: {
-			solid: "bg-mti-blue-light text-white hover:bg-mti-blue disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark",
+			solid: "bg-mti-red-light text-white hover:bg-mti-red disabled:text-mti-red disabled:bg-mti-red-ultralight selection:bg-mti-red-dark",
 			outline:
-				"bg-transparent text-mti-blue-light border border-mti-blue-light hover:bg-mti-blue-light disabled:text-mti-blue disabled:bg-mti-blue-ultralight selection:bg-mti-blue-dark hover:text-white selection:text-white",
+				"bg-transparent text-mti-red-light border border-mti-red-light hover:bg-mti-red-light disabled:text-mti-red disabled:bg-mti-red-ultralight selection:bg-mti-red-dark hover:text-white selection:text-white",
 		},
 		orange: {
 			solid: "bg-mti-orange-light text-white hover:bg-mti-orange disabled:text-mti-orange disabled:bg-mti-orange-ultralight selection:bg-mti-orange-dark",

src/components/Low/ProgressBar.tsx

@@ -4,16 +4,16 @@ import clsx from "clsx";
 interface Props {
 	label: string;
 	percentage: number;
-	color: "blue" | "orange" | "green" | Module;
+	color: "red" | "rose" | "purple" | Module;
 	useColor?: boolean;
 	className?: string;
 }
 
 export default function ProgressBar({label, percentage, color, useColor = false, className}: Props) {
 	const progressColorClass: {[key in typeof color]: string} = {
-		blue: "bg-mti-blue-light",
+		red: "bg-mti-red-light",
-		orange: "bg-mti-orange-light",
+		rose: "bg-mti-rose-light",
-		green: "bg-mti-green-light",
+		purple: "bg-mti-purple-light",
 		reading: "bg-ielts-reading",
 		listening: "bg-ielts-listening",
 		writing: "bg-ielts-writing",

src/components/Sidebar.tsx

@@ -24,8 +24,8 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
 	<Link
 		href={keyPath}
 		className={clsx(
-			"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-green-light hover:text-white transition duration-300 ease-in-out",
+			"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-gray-500 hover:bg-mti-purple-light hover:text-white transition duration-300 ease-in-out",
-			path === keyPath && "bg-mti-green-light text-white",
+			path === keyPath && "bg-mti-purple-light text-white",
 		)}>
 		<Icon size={20} />
 		<span className="text-lg font-semibold">{label}</span>

src/components/Solutions/FillBlanks.tsx

@@ -18,7 +18,7 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 						return (
 							<button
 								className={clsx(
-									"rounded-full hover:text-white hover:bg-mti-blue transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-blue-light",
+									"rounded-full hover:text-white hover:bg-mti-red transition duration-300 ease-in-out my-1 px-5 py-2 text-center text-white bg-mti-red-light",
 								)}>
 								{solution.solution}
 							</button>
@@ -29,8 +29,8 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 						return (
 							<button
 								className={clsx(
-									"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
+									"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
-									userSolution && "px-5 py-2 text-center text-white bg-mti-green-light",
+									userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
 								)}>
 								{solution.solution}
 							</button>
@@ -50,8 +50,8 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 
 								<button
 									className={clsx(
-										"rounded-full hover:text-white hover:bg-mti-green transition duration-300 ease-in-out my-1",
+										"rounded-full hover:text-white hover:bg-mti-purple transition duration-300 ease-in-out my-1",
-										userSolution && "px-5 py-2 text-center text-white bg-mti-green-light",
+										userSolution && "px-5 py-2 text-center text-white bg-mti-purple-light",
 									)}>
 									{solution.solution}
 								</button>
@@ -84,11 +84,11 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 				</span>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />
+						<div className="w-4 h-4 rounded-full bg-mti-purple" />
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />
+						<div className="w-4 h-4 rounded-full bg-mti-red" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/components/Solutions/MatchSentences.tsx

@@ -31,8 +31,8 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
 									className={clsx(
 										"w-8 h-8 rounded-full z-10 text-white",
 										"transition duration-300 ease-in-out",
-										!userSolutions.find((x) => x.question === id) && "!bg-mti-blue",
+										!userSolutions.find((x) => x.question === id) && "!bg-mti-red",
-										userSolutions.find((x) => x.question === id)?.option === solution && "bg-mti-green",
+										userSolutions.find((x) => x.question === id)?.option === solution && "bg-mti-purple",
 										userSolutions.find((x) => x.question === id)?.option !== solution && "bg-mti-orange",
 									)}>
 									{id}
@@ -46,7 +46,7 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
 								<button
 									id={id}
 									className={clsx(
-										"bg-mti-green-ultralight text-mti-green hover:text-white hover:bg-mti-green w-8 h-8 rounded-full z-10",
+										"bg-mti-purple-ultralight text-mti-purple hover:text-white hover:bg-mti-purple w-8 h-8 rounded-full z-10",
 										"transition duration-300 ease-in-out",
 									)}>
 									{id}
@@ -73,10 +73,10 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" /> Correct
+						<div className="w-4 h-4 rounded-full bg-mti-purple" /> Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" /> Unanswered
+						<div className="w-4 h-4 rounded-full bg-mti-red" /> Unanswered
 					</div>
 					<div className="flex gap-2 items-center">
 						<div className="w-4 h-4 rounded-full bg-mti-orange" /> Wrong

src/components/Solutions/MultipleChoice.tsx

@@ -14,11 +14,11 @@ function Question({
 }: MultipleChoiceQuestion & {userSolution: string | undefined; onSelectOption?: (option: string) => void; showSolution?: boolean}) {
 	const optionColor = (option: string) => {
 		if (option === solution && !userSolution) {
-			return "!border-mti-blue-light !text-mti-blue-light";
+			return "!border-mti-red-light !text-mti-red-light";
 		}
 
 		if (option === solution) {
-			return "!border-mti-green-light !text-mti-green-light";
+			return "!border-mti-purple-light !text-mti-purple-light";
 		}
 
 		return userSolution === option ? "!border-mti-orange-light !text-mti-orange-light" : "";
@@ -87,11 +87,11 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />
+						<div className="w-4 h-4 rounded-full bg-mti-purple" />
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />
+						<div className="w-4 h-4 rounded-full bg-mti-red" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/components/Solutions/WriteBlanks.tsx

@@ -39,10 +39,10 @@ function Blank({
 
 	const getSolutionStyling = () => {
 		if (!userSolution) {
-			return "bg-mti-blue-ultralight text-mti-blue-light";
+			return "bg-mti-red-ultralight text-mti-red-light";
 		}
 
-		return "bg-mti-green-ultralight text-mti-green-light";
+		return "bg-mti-purple-ultralight text-mti-purple-light";
 	};
 
 	return (
@@ -112,11 +112,11 @@ export default function WriteBlanksSolutions({
 				</span>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-green" />
+						<div className="w-4 h-4 rounded-full bg-mti-purple" />
 						Correct
 					</div>
 					<div className="flex gap-2 items-center">
-						<div className="w-4 h-4 rounded-full bg-mti-blue" />
+						<div className="w-4 h-4 rounded-full bg-mti-red" />
 						Unanswered
 					</div>
 					<div className="flex gap-2 items-center">

src/exams/Finish.tsx

@@ -139,18 +139,18 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 							</div>
 							<div className="flex flex-col gap-5">
 								<div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-blue-light rounded-full mt-1" />
+									<div className="w-3 h-3 bg-mti-red-light rounded-full mt-1" />
 									<div className="flex flex-col">
-										<span className="text-mti-blue-light">
+										<span className="text-mti-red-light">
 											{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
 										</span>
 										<span className="text-lg">Completion</span>
 									</div>
 								</div>
 								<div className="flex gap-2">
-									<div className="w-3 h-3 bg-mti-green-light rounded-full mt-1" />
+									<div className="w-3 h-3 bg-mti-purple-light rounded-full mt-1" />
 									<div className="flex flex-col">
-										<span className="text-mti-green-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
+										<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
 										<span className="text-lg">Correct</span>
 									</div>
 								</div>
@@ -175,7 +175,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 						<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
 							<button
 								onClick={() => window.location.reload()}
-								className="w-11 h-11 rounded-full bg-mti-green-light hover:bg-mti-green flex items-center justify-center transition duration-300 ease-in-out">
+								className="w-11 h-11 rounded-full bg-mti-purple-light hover:bg-mti-purple flex items-center justify-center transition duration-300 ease-in-out">
 								<BsArrowCounterclockwise className="text-white w-7 h-7" />
 							</button>
 							<span>Play Again</span>
@@ -183,7 +183,7 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
 						<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
 							<button
 								onClick={onViewResults}
-								className="w-11 h-11 rounded-full bg-mti-green-light hover:bg-mti-green flex items-center justify-center transition duration-300 ease-in-out">
+								className="w-11 h-11 rounded-full bg-mti-purple-light hover:bg-mti-purple flex items-center justify-center transition duration-300 ease-in-out">
 								<BsEyeFill className="text-white w-7 h-7" />
 							</button>
 							<span>Review Answers</span>

src/exams/Selection.tsx

@@ -40,14 +40,14 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 							<ProgressBar
 								label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
 								percentage={100}
-								color="blue"
+								color="purple"
 								className="max-w-xs w-32 self-end h-10"
 							/>
 						</div>
 						<ProgressBar
 							label=""
 							percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
-							color="blue"
+							color="red"
 							className="w-full h-3 drop-shadow-lg"
 						/>
 						<div className="flex justify-between w-full mt-8">
@@ -104,7 +104,7 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 						onClick={!disableSelection ? () => toggleModule("reading") : undefined}
 						className={clsx(
 							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
-							selectedModules.includes("reading") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
+							selectedModules.includes("reading") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-0 -translate-y-1/2">
 							<BsBook className="text-white w-7 h-7" />
@@ -116,13 +116,15 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 						{!selectedModules.includes("reading") && !disableSelection && (
 							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
 						)}
-						{(selectedModules.includes("reading") || disableSelection) && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
+						{(selectedModules.includes("reading") || disableSelection) && (
+							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
+						)}
 					</div>
 					<div
 						onClick={!disableSelection ? () => toggleModule("listening") : undefined}
 						className={clsx(
 							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
-							selectedModules.includes("listening") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
+							selectedModules.includes("listening") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-0 -translate-y-1/2">
 							<BsHeadphones className="text-white w-7 h-7" />
@@ -135,14 +137,14 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
 						)}
 						{(selectedModules.includes("listening") || disableSelection) && (
-							<BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />
+							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
 						)}
 					</div>
 					<div
 						onClick={!disableSelection ? () => toggleModule("writing") : undefined}
 						className={clsx(
 							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
-							selectedModules.includes("writing") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
+							selectedModules.includes("writing") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-0 -translate-y-1/2">
 							<BsPen className="text-white w-7 h-7" />
@@ -154,13 +156,15 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 						{!selectedModules.includes("writing") && !disableSelection && (
 							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
 						)}
-						{(selectedModules.includes("writing") || disableSelection) && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
+						{(selectedModules.includes("writing") || disableSelection) && (
+							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
+						)}
 					</div>
 					<div
 						onClick={!disableSelection ? () => toggleModule("speaking") : undefined}
 						className={clsx(
 							"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
-							selectedModules.includes("speaking") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
+							selectedModules.includes("speaking") || disableSelection ? "border-mti-purple-light" : "border-mti-gray-platinum",
 						)}>
 						<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-0 -translate-y-1/2">
 							<BsMegaphone className="text-white w-7 h-7" />
@@ -173,7 +177,7 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 							<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
 						)}
 						{(selectedModules.includes("speaking") || disableSelection) && (
-							<BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />
+							<BsCheckCircle className="mt-4 text-mti-purple-light w-8 h-8" />
 						)}
 					</div>
 				</section>

src/pages/index.tsx

@@ -90,20 +90,20 @@ export default function Home() {
 								<ProgressBar
 									label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
 									percentage={100}
-									color="blue"
+									color="purple"
 									className="max-w-xs w-32 self-end h-10"
 								/>
 							</div>
 							<ProgressBar
 								label=""
 								percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
-								color="blue"
+								color="red"
 								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">
-										<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
+										<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
 										<span className="font-bold text-xl">{totalExams(stats)}</span>
@@ -112,7 +112,7 @@ export default function Home() {
 								</div>
 								<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">
-										<BsPencil className="w-8 h-8 text-mti-blue-light" />
+										<BsPencil className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
 										<span className="font-bold text-xl">{stats.length}</span>
@@ -121,7 +121,7 @@ export default function Home() {
 								</div>
 								<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">
-										<BsStar className="w-8 h-8 text-mti-blue-light" />
+										<BsStar className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
 										<span className="font-bold text-xl">{averageScore(stats)}%</span>
@@ -158,7 +158,7 @@ export default function Home() {
 								</div>
 								<div className="pl-14">
 									<ProgressBar
-										color="blue"
+										color="red"
 										label=""
 										percentage={Math.round((user.levels.reading * 100) / user.desiredLevels.reading)}
 										className="w-full h-2"
@@ -179,7 +179,7 @@ export default function Home() {
 								</div>
 								<div className="pl-14">
 									<ProgressBar
-										color="blue"
+										color="red"
 										label=""
 										percentage={Math.round((user.levels.writing * 100) / user.desiredLevels.writing)}
 										className="w-full h-2"
@@ -200,7 +200,7 @@ export default function Home() {
 								</div>
 								<div className="pl-14">
 									<ProgressBar
-										color="blue"
+										color="red"
 										label=""
 										percentage={Math.round((user.levels.listening * 100) / user.desiredLevels.listening)}
 										className="w-full h-2"
@@ -221,7 +221,7 @@ export default function Home() {
 								</div>
 								<div className="pl-14">
 									<ProgressBar
-										color="blue"
+										color="red"
 										label=""
 										percentage={Math.round((user.levels.speaking * 100) / user.desiredLevels.speaking)}
 										className="w-full h-2"

src/pages/login.tsx

@@ -71,15 +71,15 @@ export default function Login() {
 								<input type="checkbox" className="hidden" />
 								<div
 									className={clsx(
-										"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-green-light bg-white",
+										"w-4 h-4 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
 										"transition duration-300 ease-in-out",
-										rememberPassword && "!bg-mti-green-light ",
+										rememberPassword && "!bg-mti-purple-light ",
 									)}>
 									<BsCheck color="white" className="w-full h-full" />
 								</div>
 								<span>Remember my password</span>
 							</div>
-							<Link href="/forgot-password" className="text-mti-green-light text-xs">
+							<Link href="/forgot-password" className="text-mti-purple-light text-xs">
 								Forgot Password?
 							</Link>
 						</div>
@@ -94,7 +94,7 @@ export default function Login() {
 					</form>
 					<span className="text-mti-gray-cool text-sm font-normal mt-8">
 						Don&apos;t have an account?{" "}
-						<Link className="text-mti-green-light" href="/register">
+						<Link className="text-mti-purple-light" href="/register">
 							Sign up
 						</Link>
 					</span>

src/pages/profile.tsx

@@ -119,7 +119,7 @@ export default function Home() {
 									alt={user.name}
 									className="aspect-square h-48 w-48 rounded-full drop-shadow-xl self-end"
 								/>
-								<span className="cursor-pointer text-mti-green-light text-sm">Change picture</span>
+								<span className="cursor-pointer text-mti-purple-light text-sm">Change picture</span>
 							</div>
 						</div>
 						<div className="flex flex-col gap-4 mt-8 mb-20">

src/pages/record.tsx

@@ -162,8 +162,8 @@ export default function History({user}: {user: User}) {
 				key={timestamp}
 				className={clsx(
 					"flex flex-col gap-4 border border-mti-gray-platinum p-4 cursor-pointer rounded-xl transition ease-in-out duration-300",
-					correct / total >= 0.7 && "hover:border-mti-green",
+					correct / total >= 0.7 && "hover:border-mti-purple",
-					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-blue",
+					correct / total >= 0.3 && correct / total < 0.7 && "hover:border-mti-red",
 					correct / total < 0.3 && "hover:border-mti-orange",
 				)}
 				onClick={selectExam}
@@ -172,8 +172,8 @@ export default function History({user}: {user: User}) {
 					<span className="font-medium">{formatTimestamp(timestamp)}</span>
 					<span
 						className={clsx(
-							correct / total >= 0.7 && "text-mti-green",
+							correct / total >= 0.7 && "text-mti-purple",
-							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-blue",
+							correct / total >= 0.3 && correct / total < 0.7 && "text-mti-red",
 							correct / total < 0.3 && "text-mti-orange",
 						)}>
 						Level{" "}
@@ -236,27 +236,27 @@ export default function History({user}: {user: User}) {
 						<div className="flex gap-4">
 							<button
 								className={clsx(
-									"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
+									"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-green-light !text-white",
+									filter === "months" && "!bg-mti-purple-light !text-white",
 								)}
 								onClick={() => toggleFilter("months")}>
 								Last month
 							</button>
 							<button
 								className={clsx(
-									"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
+									"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-green-light !text-white",
+									filter === "weeks" && "!bg-mti-purple-light !text-white",
 								)}
 								onClick={() => toggleFilter("weeks")}>
 								Last week
 							</button>
 							<button
 								className={clsx(
-									"bg-mti-green-ultralight text-mti-green px-4 py-2 rounded-full hover:text-white hover:bg-mti-green-light",
+									"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-green-light !text-white",
+									filter === "days" && "!bg-mti-purple-light !text-white",
 								)}
 								onClick={() => toggleFilter("days")}>
 								Last day

src/pages/register.tsx

@@ -56,7 +56,7 @@ export default function Register() {
 							)}
 						</Button>
 					</form>
-					<Link className="text-mti-green-light text-sm font-normal" href="/login">
+					<Link className="text-mti-purple-light text-sm font-normal" href="/login">
 						Sign in instead
 					</Link>
 				</section>

src/pages/stats.tsx

@@ -79,20 +79,20 @@ export default function Stats() {
 								<ProgressBar
 									label={`Level ${calculateAverageLevel(user.levels).toFixed(1)}`}
 									percentage={100}
-									color="blue"
+									color="red"
 									className="max-w-xs w-32 self-end h-10"
 								/>
 							</div>
 							<ProgressBar
 								label=""
 								percentage={Math.round((calculateAverageLevel(user.levels) * 100) / calculateAverageLevel(user.desiredLevels))}
-								color="blue"
+								color="red"
 								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">
-										<BsFileEarmarkText className="w-8 h-8 text-mti-blue-light" />
+										<BsFileEarmarkText className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
 										<span className="font-bold text-xl">{Object.keys(groupBySession(stats)).length}</span>
@@ -101,7 +101,7 @@ export default function Stats() {
 								</div>
 								<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">
-										<BsPencil className="w-8 h-8 text-mti-blue-light" />
+										<BsPencil className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
 										<span className="font-bold text-xl">{stats.length}</span>
@@ -110,7 +110,7 @@ export default function Stats() {
 								</div>
 								<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">
-										<BsStar className="w-8 h-8 text-mti-blue-light" />
+										<BsStar className="w-8 h-8 text-mti-red-light" />
 									</div>
 									<div className="flex flex-col">
 										<span className="font-bold text-xl">{averageScore(stats)}%</span>

src/pages/test.tsx

@@ -118,7 +118,7 @@ export default function Page() {
 														setIsRecording(false);
 														stopRecording();
 													}}
-													className="text-mti-green-light w-8 h-8 cursor-pointer"
+													className="text-mti-purple-light w-8 h-8 cursor-pointer"
 												/>
 											</div>
 										</>
@@ -143,14 +143,14 @@ export default function Page() {
 														setIsRecording(true);
 														resumeRecording();
 													}}
-													className="text-mti-green-light w-8 h-8 cursor-pointer"
+													className="text-mti-purple-light w-8 h-8 cursor-pointer"
 												/>
 												<BsCheckCircleFill
 													onClick={() => {
 														setIsRecording(false);
 														stopRecording();
 													}}
-													className="text-mti-green-light w-8 h-8 cursor-pointer"
+													className="text-mti-purple-light w-8 h-8 cursor-pointer"
 												/>
 											</div>
 										</>

tailwind.config.js

@@ -7,6 +7,9 @@ module.exports = {
 				mti: {
 					orange: {DEFAULT: "#FF6000", dark: "#cc4402", light: "#ff790a", ultralight: "#ffdaa5"},
 					green: {DEFAULT: "#307912", dark: "#2a6014", light: "#3d9f11", ultralight: "#c6edaf"},
+					purple: {DEFAULT: "#6A5FB1", dark: "#6354A1", light: "#7872BF", ultralight: "#D5D9F0"},
+					red: {DEFAULT: "#BB4747", dark: "#9D3838", light: "#CC5454", ultralight: "#F5D3D3"},
+					rose: {DEFAULT: "#D6352C", dark: "#B42921", light: "#EB5C54", ultralight: "#FCCFCC"},
 					blue: {DEFAULT: "#0696ff", dark: "#007ff8", light: "#1eb3ff", ultralight: "#b5edff"},
 					white: {DEFAULT: "#ffffff", alt: "#FDFDFD"},
 					gray: {