diff --git a/src/components/Medium/ModuleTitle.tsx b/src/components/Medium/ModuleTitle.tsx
index 4fe6548d..bbbeec32 100644
--- a/src/components/Medium/ModuleTitle.tsx
+++ b/src/components/Medium/ModuleTitle.tsx
@@ -1,10 +1,10 @@
-import { Module } from "@/interfaces";
+import {Module} from "@/interfaces";
 import useExamStore from "@/stores/examStore";
-import { moduleLabels } from "@/utils/moduleUtils";
+import {moduleLabels} from "@/utils/moduleUtils";
 import clsx from "clsx";
-import { motion } from "framer-motion";
-import { ReactNode, useEffect, useState } from "react";
-import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch } from "react-icons/bs";
+import {motion} from "framer-motion";
+import {ReactNode, useEffect, useState} from "react";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch} from "react-icons/bs";
 import ProgressBar from "../Low/ProgressBar";
 import TimerEndedModal from "../TimerEndedModal";
 
@@ -18,15 +18,13 @@ interface Props {
 	partLabel?: string;
 }
 
-export default function ModuleTitle({ 
-	minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel
-}: Props) {
+export default function ModuleTitle({minTimer, module, label, exerciseIndex, totalExercises, disableTimer = false, partLabel}: Props) {
 	const [timer, setTimer] = useState(minTimer * 60);
 	const [showModal, setShowModal] = useState(false);
 	const [warningMode, setWarningMode] = useState(false);
 
 	const setHasExamEnded = useExamStore((state) => state.setHasExamEnded);
-	const { timeSpent } = useExamStore((state) => state);
+	const {timeSpent} = useExamStore((state) => state);
 
 	useEffect(() => setTimer((prev) => prev - timeSpent), [timeSpent]);
 
@@ -48,7 +46,7 @@ export default function ModuleTitle({
 		if (timer < 300 && !warningMode) setWarningMode(true);
 	}, [timer, warningMode]);
 
-	const moduleIcon: { [key in Module]: ReactNode } = {
+	const moduleIcon: {[key in Module]: ReactNode} = {
 		reading: <BsBook className="text-ielts-reading w-6 h-6" />,
 		listening: <BsHeadphones className="text-ielts-listening w-6 h-6" />,
 		writing: <BsPen className="text-ielts-writing w-6 h-6" />,
@@ -70,9 +68,9 @@ export default function ModuleTitle({
 					"absolute top-4 right-6 bg-mti-gray-seasalt px-4 py-3 flex items-center gap-2 rounded-full text-mti-gray-davy",
 					warningMode && !disableTimer && "bg-mti-red-light text-mti-gray-seasalt",
 				)}
-				initial={{ scale: warningMode && !disableTimer ? 0.8 : 1 }}
-				animate={{ scale: warningMode && !disableTimer ? 1.1 : 1 }}
-				transition={{ repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut" }}>
+				initial={{scale: warningMode && !disableTimer ? 0.8 : 1}}
+				animate={{scale: warningMode && !disableTimer ? 1.1 : 1}}
+				transition={{repeat: Infinity, repeatType: "reverse", duration: 0.5, ease: "easeInOut"}}>
 				<BsStopwatch className="w-6 h-6" />
 				<span className="text-base font-semibold w-12">
 					{timer > 0 && (
@@ -90,11 +88,25 @@ export default function ModuleTitle({
 				</span>
 			</motion.div>
 			<div className="w-full">
-				{partLabel && <div className="text-3xl space-y-4">{partLabel.split('\n\n').map((line, index) => {
-					if(index == 0) return <p className="font-bold">{line}</p>
-					else return <p className="text-2xl font-semibold">{line}</p>
-				})}</div>}
-				<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5" )}>
+				{partLabel && (
+					<div className="text-3xl space-y-4">
+						{partLabel.split("\n\n").map((line, index) => {
+							if (index == 0)
+								return (
+									<p key={index} className="font-bold">
+										{line}
+									</p>
+								);
+							else
+								return (
+									<p key={index} className="text-2xl font-semibold">
+										{line}
+									</p>
+								);
+						})}
+					</div>
+				)}
+				<div className={clsx("flex gap-6 w-full h-fit items-center", partLabel ? "mt-10" : "mt-5")}>
 					<div className="w-12 h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg">{moduleIcon[module]}</div>
 					<div className="flex flex-col gap-3 w-full">
 						<div className="w-full flex justify-between">
diff --git a/src/components/TrainingContent/ExerciseWalkthrough.tsx b/src/components/TrainingContent/ExerciseWalkthrough.tsx
index 74c7219f..75a2dbbd 100644
--- a/src/components/TrainingContent/ExerciseWalkthrough.tsx
+++ b/src/components/TrainingContent/ExerciseWalkthrough.tsx
@@ -1,287 +1,280 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { animated } from '@react-spring/web';
-import { FaRegCirclePlay, FaRegCircleStop } from "react-icons/fa6";
-import HighlightContent from '../HighlightContent';
-import { ITrainingTip, SegmentRef, TimelineEvent } from './TrainingInterfaces';
-
+import React, {useState, useEffect, useRef, useCallback} from "react";
+import {animated} from "@react-spring/web";
+import {FaRegCirclePlay, FaRegCircleStop} from "react-icons/fa6";
+import HighlightContent from "../HighlightContent";
+import {ITrainingTip, SegmentRef, TimelineEvent} from "./TrainingInterfaces";
 
 const ExerciseWalkthrough: React.FC<ITrainingTip> = (tip: ITrainingTip) => {
-    const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(false);
-    const [currentTime, setCurrentTime] = useState<number>(0);
-    const [walkthroughHtml, setWalkthroughHtml] = useState<string>('');
-    const [highlightedPhrases, setHighlightedPhrases] = useState<string[]>([]);
-    const [isPlaying, setIsPlaying] = useState<boolean>(false);
-    const timelineRef = useRef<TimelineEvent[]>([]);
-    const animationRef = useRef<number | null>(null);
-    const segmentsRef = useRef<SegmentRef[]>([]);
+	const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(false);
+	const [currentTime, setCurrentTime] = useState<number>(0);
+	const [walkthroughHtml, setWalkthroughHtml] = useState<string>("");
+	const [highlightedPhrases, setHighlightedPhrases] = useState<string[]>([]);
+	const [isPlaying, setIsPlaying] = useState<boolean>(false);
+	const timelineRef = useRef<TimelineEvent[]>([]);
+	const animationRef = useRef<number | null>(null);
+	const segmentsRef = useRef<SegmentRef[]>([]);
 
-    const toggleAutoPlay = useCallback(() => {
-        setIsAutoPlaying((prev) => {
-            if (!prev && currentTime === getMaxTime()) {
-                setCurrentTime(0);
-            }
-            return !prev;
-        });
-    }, [currentTime]);
+	const toggleAutoPlay = useCallback(() => {
+		setIsAutoPlaying((prev) => {
+			if (!prev && currentTime === getMaxTime()) {
+				setCurrentTime(0);
+			}
+			return !prev;
+		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [currentTime]);
 
-    const handleAnimationComplete = useCallback(() => {
-        setIsAutoPlaying(false);
-    }, []);
+	const handleAnimationComplete = useCallback(() => {
+		setIsAutoPlaying(false);
+	}, []);
 
-    const handleResetAnimation = useCallback((newTime: number) => {
-        setCurrentTime(newTime);
-    }, []);
+	const handleResetAnimation = useCallback((newTime: number) => {
+		setCurrentTime(newTime);
+	}, []);
 
-    const getMaxTime = (): number => {
-        return tip.exercise?.segments.reduce((sum, segment) =>
-            sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0
-        ) ?? 0;
-    };
+	const getMaxTime = (): number => {
+		return (
+			tip.exercise?.segments.reduce((sum, segment) => sum + segment.wordDelay * segment.html.split(/\s+/).length + segment.holdDelay, 0) ?? 0
+		);
+	};
 
-    useEffect(() => {
-        const timeline: TimelineEvent[] = [];
-        let currentTimePosition = 0;
-        segmentsRef.current = [];
+	useEffect(() => {
+		const timeline: TimelineEvent[] = [];
+		let currentTimePosition = 0;
+		segmentsRef.current = [];
 
-        tip.exercise?.segments.forEach((segment, index) => {
-            const parser = new DOMParser();
-            const doc = parser.parseFromString(segment.html, 'text/html');
-            const words: string[] = [];
-            const walkTree = (node: Node) => {
-                if (node.nodeType === Node.TEXT_NODE) {
-                    words.push(...(node.textContent?.split(/\s+/).filter(word => word.length > 0) || []));
-                } else if (node.nodeType === Node.ELEMENT_NODE) {
-                    Array.from(node.childNodes).forEach(walkTree);
-                }
-            };
-            walkTree(doc.body);
+		tip.exercise?.segments.forEach((segment, index) => {
+			const parser = new DOMParser();
+			const doc = parser.parseFromString(segment.html, "text/html");
+			const words: string[] = [];
+			const walkTree = (node: Node) => {
+				if (node.nodeType === Node.TEXT_NODE) {
+					words.push(...(node.textContent?.split(/\s+/).filter((word) => word.length > 0) || []));
+				} else if (node.nodeType === Node.ELEMENT_NODE) {
+					Array.from(node.childNodes).forEach(walkTree);
+				}
+			};
+			walkTree(doc.body);
 
-            const textDuration = words.length * segment.wordDelay;
+			const textDuration = words.length * segment.wordDelay;
 
-            segmentsRef.current.push({
-                ...segment,
-                words: words,
-                startTime: currentTimePosition,
-                endTime: currentTimePosition + textDuration
-            });
+			segmentsRef.current.push({
+				...segment,
+				words: words,
+				startTime: currentTimePosition,
+				endTime: currentTimePosition + textDuration,
+			});
 
-            timeline.push({
-                type: 'text',
-                start: currentTimePosition,
-                end: currentTimePosition + textDuration,
-                segmentIndex: index
-            });
+			timeline.push({
+				type: "text",
+				start: currentTimePosition,
+				end: currentTimePosition + textDuration,
+				segmentIndex: index,
+			});
 
-            currentTimePosition += textDuration;
+			currentTimePosition += textDuration;
 
-            timeline.push({
-                type: 'highlight',
-                start: currentTimePosition,
-                end: currentTimePosition + segment.holdDelay,
-                content: segment.highlight,
-                segmentIndex: index
-            });
+			timeline.push({
+				type: "highlight",
+				start: currentTimePosition,
+				end: currentTimePosition + segment.holdDelay,
+				content: segment.highlight,
+				segmentIndex: index,
+			});
 
-            currentTimePosition += segment.holdDelay;
-        });
+			currentTimePosition += segment.holdDelay;
+		});
 
-        timelineRef.current = timeline;
-    }, [tip.exercise?.segments]);
+		timelineRef.current = timeline;
+	}, [tip.exercise?.segments]);
 
-    const updateText = useCallback(() => {
-        const currentEvent = timelineRef.current.find(
-            event => currentTime >= event.start && currentTime < event.end
-        );
+	const updateText = useCallback(() => {
+		const currentEvent = timelineRef.current.find((event) => currentTime >= event.start && currentTime < event.end);
 
-        if (currentEvent) {
-            if (currentEvent.type === 'text') {
-                const segment = segmentsRef.current[currentEvent.segmentIndex];
-                const elapsedTime = currentTime - currentEvent.start;
-                const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);
+		if (currentEvent) {
+			if (currentEvent.type === "text") {
+				const segment = segmentsRef.current[currentEvent.segmentIndex];
+				const elapsedTime = currentTime - currentEvent.start;
+				const wordsToShow = Math.min(Math.floor(elapsedTime / segment.wordDelay), segment.words.length);
 
-                const previousSegmentsHtml = segmentsRef.current
-                    .slice(0, currentEvent.segmentIndex)
-                    .map(seg => seg.html)
-                    .join('');
+				const previousSegmentsHtml = segmentsRef.current
+					.slice(0, currentEvent.segmentIndex)
+					.map((seg) => seg.html)
+					.join("");
 
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(segment.html, 'text/html');
-                let wordCount = 0;
-                const walkTree = (node: Node, action: (node: Node) => void): boolean => {
-                    if (node.nodeType === Node.TEXT_NODE && node.textContent) {
-                        const words = node.textContent.split(/(\s+)/).filter(word => word.length > 0);
-                        if (wordCount + words.filter(w => !/\s+/.test(w)).length <= wordsToShow) {
-                            action(node.cloneNode(true));
-                            wordCount += words.filter(w => !/\s+/.test(w)).length;
-                        } else {
-                            const remainingWords = wordsToShow - wordCount;
-                            const newTextContent = words.reduce((acc, word) => {
-                                if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
-                                    acc.text += word;
-                                    acc.nonSpaceWords++;
-                                } else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
-                                    acc.text += word;
-                                }
-                                return acc;
-                            }, { text: '', nonSpaceWords: 0 }).text;
-                            const newNode = node.cloneNode(false);
-                            newNode.textContent = newTextContent;
-                            action(newNode);
-                            wordCount = wordsToShow;
-                        }
-                    } else if (node.nodeType === Node.ELEMENT_NODE) {
-                        const clone = node.cloneNode(false);
-                        action(clone);
-                        Array.from(node.childNodes).some(child => {
-                            return walkTree(child, childNode => (clone as Node).appendChild(childNode));
-                        });
-                    }
-                    return wordCount >= wordsToShow;
-                };
-                const fragment = document.createDocumentFragment();
-                walkTree(doc.body, node => fragment.appendChild(node));
+				const parser = new DOMParser();
+				const doc = parser.parseFromString(segment.html, "text/html");
+				let wordCount = 0;
+				const walkTree = (node: Node, action: (node: Node) => void): boolean => {
+					if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+						const words = node.textContent.split(/(\s+)/).filter((word) => word.length > 0);
+						if (wordCount + words.filter((w) => !/\s+/.test(w)).length <= wordsToShow) {
+							action(node.cloneNode(true));
+							wordCount += words.filter((w) => !/\s+/.test(w)).length;
+						} else {
+							const remainingWords = wordsToShow - wordCount;
+							const newTextContent = words.reduce(
+								(acc, word) => {
+									if (!/\s+/.test(word) && acc.nonSpaceWords < remainingWords) {
+										acc.text += word;
+										acc.nonSpaceWords++;
+									} else if (/\s+/.test(word) || acc.nonSpaceWords < remainingWords) {
+										acc.text += word;
+									}
+									return acc;
+								},
+								{text: "", nonSpaceWords: 0},
+							).text;
+							const newNode = node.cloneNode(false);
+							newNode.textContent = newTextContent;
+							action(newNode);
+							wordCount = wordsToShow;
+						}
+					} else if (node.nodeType === Node.ELEMENT_NODE) {
+						const clone = node.cloneNode(false);
+						action(clone);
+						Array.from(node.childNodes).some((child) => {
+							return walkTree(child, (childNode) => (clone as Node).appendChild(childNode));
+						});
+					}
+					return wordCount >= wordsToShow;
+				};
+				const fragment = document.createDocumentFragment();
+				walkTree(doc.body, (node) => fragment.appendChild(node));
 
-                const serializer = new XMLSerializer();
-                const currentSegmentHtml = Array.from(fragment.childNodes)
-                    .map(node => serializer.serializeToString(node))
-                    .join('');
-                const newHtml = previousSegmentsHtml + currentSegmentHtml;
+				const serializer = new XMLSerializer();
+				const currentSegmentHtml = Array.from(fragment.childNodes)
+					.map((node) => serializer.serializeToString(node))
+					.join("");
+				const newHtml = previousSegmentsHtml + currentSegmentHtml;
 
-                setWalkthroughHtml(newHtml);
-                setHighlightedPhrases([]);
-            } else if (currentEvent.type === 'highlight') {
-                const newHtml = segmentsRef.current
-                    .slice(0, currentEvent.segmentIndex + 1)
-                    .map(seg => seg.html)
-                    .join('');
-                setWalkthroughHtml(newHtml);
-                setHighlightedPhrases(currentEvent.content || []);
-            }
-        }
-    }, [currentTime]);
+				setWalkthroughHtml(newHtml);
+				setHighlightedPhrases([]);
+			} else if (currentEvent.type === "highlight") {
+				const newHtml = segmentsRef.current
+					.slice(0, currentEvent.segmentIndex + 1)
+					.map((seg) => seg.html)
+					.join("");
+				setWalkthroughHtml(newHtml);
+				setHighlightedPhrases(currentEvent.content || []);
+			}
+		}
+	}, [currentTime]);
 
-    useEffect(() => {
-        updateText();
-    }, [currentTime, updateText]);
+	useEffect(() => {
+		updateText();
+	}, [currentTime, updateText]);
 
-    useEffect(() => {
-        if (isAutoPlaying) {
-            const lastEvent = timelineRef.current[timelineRef.current.length - 1];
-            if (lastEvent && currentTime >= lastEvent.end) {
-                setCurrentTime(0);
-            }
-            setIsPlaying(true);
-        } else {
-            setIsPlaying(false);
-        }
-    }, [isAutoPlaying, currentTime]);
+	useEffect(() => {
+		if (isAutoPlaying) {
+			const lastEvent = timelineRef.current[timelineRef.current.length - 1];
+			if (lastEvent && currentTime >= lastEvent.end) {
+				setCurrentTime(0);
+			}
+			setIsPlaying(true);
+		} else {
+			setIsPlaying(false);
+		}
+	}, [isAutoPlaying, currentTime]);
 
-    useEffect(() => {
-        const animate = () => {
-            if (isPlaying) {
-                setCurrentTime((prevTime) => {
-                    const newTime = prevTime + 50;
-                    const lastEvent = timelineRef.current[timelineRef.current.length - 1];
-                    if (lastEvent && newTime >= lastEvent.end) {
-                        setIsPlaying(false);
-                        handleAnimationComplete();
-                        return lastEvent.end;
-                    }
-                    return newTime;
-                });
-            }
-            animationRef.current = requestAnimationFrame(animate);
-        };
+	useEffect(() => {
+		const animate = () => {
+			if (isPlaying) {
+				setCurrentTime((prevTime) => {
+					const newTime = prevTime + 50;
+					const lastEvent = timelineRef.current[timelineRef.current.length - 1];
+					if (lastEvent && newTime >= lastEvent.end) {
+						setIsPlaying(false);
+						handleAnimationComplete();
+						return lastEvent.end;
+					}
+					return newTime;
+				});
+			}
+			animationRef.current = requestAnimationFrame(animate);
+		};
 
-        animationRef.current = requestAnimationFrame(animate);
+		animationRef.current = requestAnimationFrame(animate);
 
-        return () => {
-            if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-            }
-        };
-    }, [isPlaying, handleAnimationComplete]);
+		return () => {
+			if (animationRef.current) {
+				cancelAnimationFrame(animationRef.current);
+			}
+		};
+	}, [isPlaying, handleAnimationComplete]);
 
-    const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newTime = parseInt(e.target.value, 10);
-        setCurrentTime(newTime);
-        handleResetAnimation(newTime);
-    };
+	const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const newTime = parseInt(e.target.value, 10);
+		setCurrentTime(newTime);
+		handleResetAnimation(newTime);
+	};
 
-    const handleSliderMouseDown = () => {
-        setIsPlaying(false);
-    };
+	const handleSliderMouseDown = () => {
+		setIsPlaying(false);
+	};
 
-    const handleSliderMouseUp = () => {
-        if (isAutoPlaying) {
-            setIsPlaying(true);
-        }
-    };
+	const handleSliderMouseUp = () => {
+		if (isAutoPlaying) {
+			setIsPlaying(true);
+		}
+	};
 
-    if (tip.standalone || !tip.exercise) {
-        return (
-            <div className="container mx-auto">
-                <h1 className='text-xl font-bold text-red-600'>The exercise for this tip is not available yet!</h1>
-                <div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4 mt-10">
-                    <h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
-                    <div className="text-gray-700" dangerouslySetInnerHTML={{ __html: tip.tipHtml }} />
-                </div>
-            </div>
-        );
-    }
+	if (tip.standalone || !tip.exercise) {
+		return (
+			<div className="container mx-auto">
+				<h1 className="text-xl font-bold text-red-600">The exercise for this tip is not available yet!</h1>
+				<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4 mt-10">
+					<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
+					<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
+				</div>
+			</div>
+		);
+	}
 
-
-    return (
-        <div className="container mx-auto">
-            <div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4">
-                <h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
-                <div className="text-gray-700" dangerouslySetInnerHTML={{ __html: tip.tipHtml }} />
-            </div>
-            <div className='flex flex-col space-y-4'>
-                <div className='flex flex-row items-center space-x-4 py-4'>
-                    <button
-                        onClick={toggleAutoPlay}
-                        className="p-2 bg-blue-500 text-white rounded-full transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
-                        aria-label={isAutoPlaying ? 'Pause' : 'Play'}
-                    >
-                        {isAutoPlaying ? (
-                            <FaRegCircleStop className="w-6 h-6" />
-                        ) : (
-                            <FaRegCirclePlay className="w-6 h-6" />
-                        )}
-                    </button>
-                    <input
-                        type="range"
-                        min="0"
-                        max={timelineRef.current.length > 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
-                        value={currentTime}
-                        onChange={handleSliderChange}
-                        onMouseDown={handleSliderMouseDown}
-                        onMouseUp={handleSliderMouseUp}
-                        onTouchStart={handleSliderMouseDown}
-                        onTouchEnd={handleSliderMouseUp}
-                        className='flex-grow'
-                    />
-                </div>
-                <div className='flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4'>
-                    <div className='flex-1 bg-white p-6 rounded-lg shadow'>
-                        {/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
-                        <div className="mb-4" dangerouslySetInnerHTML={{ __html: tip.exercise.question }} />
-                        <HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
-                    </div>
-                    <div className='flex-1'>
-                        <div className='bg-gray-50 rounded-lg shadow'>
-                            <div className='p-6 space-y-4'>
-                                <animated.div
-                                    dangerouslySetInnerHTML={{ __html: walkthroughHtml }}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
+	return (
+		<div className="container mx-auto">
+			<div className="tip-container bg-blue-100 p-4 rounded-lg shadow-md mb-4">
+				<h3 className="text-xl font-semibold text-blue-800 mb-2">{tip.tipCategory}</h3>
+				<div className="text-gray-700" dangerouslySetInnerHTML={{__html: tip.tipHtml}} />
+			</div>
+			<div className="flex flex-col space-y-4">
+				<div className="flex flex-row items-center space-x-4 py-4">
+					<button
+						onClick={toggleAutoPlay}
+						className="p-2 bg-blue-500 text-white rounded-full transition-colors duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+						aria-label={isAutoPlaying ? "Pause" : "Play"}>
+						{isAutoPlaying ? <FaRegCircleStop className="w-6 h-6" /> : <FaRegCirclePlay className="w-6 h-6" />}
+					</button>
+					<input
+						type="range"
+						min="0"
+						max={timelineRef.current.length > 0 ? timelineRef.current[timelineRef.current.length - 1].end : 0}
+						value={currentTime}
+						onChange={handleSliderChange}
+						onMouseDown={handleSliderMouseDown}
+						onMouseUp={handleSliderMouseUp}
+						onTouchStart={handleSliderMouseDown}
+						onTouchEnd={handleSliderMouseUp}
+						className="flex-grow"
+					/>
+				</div>
+				<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
+					<div className="flex-1 bg-white p-6 rounded-lg shadow">
+						{/*<h2 className="text-xl font-bold mb-4">Question</h2>*/}
+						<div className="mb-4" dangerouslySetInnerHTML={{__html: tip.exercise.question}} />
+						<HighlightContent html={tip.exercise.highlightable} highlightPhrases={highlightedPhrases} />
+					</div>
+					<div className="flex-1">
+						<div className="bg-gray-50 rounded-lg shadow">
+							<div className="p-6 space-y-4">
+								<animated.div dangerouslySetInnerHTML={{__html: walkthroughHtml}} />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default ExerciseWalkthrough;
diff --git a/src/exams/Level.tsx b/src/exams/Level.tsx
index a5bdf478..fb4c6ee9 100644
--- a/src/exams/Level.tsx
+++ b/src/exams/Level.tsx
@@ -1,22 +1,32 @@
 import BlankQuestionsModal from "@/components/BlankQuestionsModal";
-import { renderExercise } from "@/components/Exercises";
+import {renderExercise} from "@/components/Exercises";
 import HighlightContent from "@/components/HighlightContent";
 import Button from "@/components/Low/Button";
 import ModuleTitle from "@/components/Medium/ModuleTitle";
-import { renderSolution } from "@/components/Solutions";
-import { infoButtonStyle } from "@/constants/buttonStyles";
-import { Module } from "@/interfaces";
-import { Exercise, FillBlanksExercise, FillBlanksMCOption, LevelExam, LevelPart, MultipleChoiceExercise, ShuffleMap, UserSolution, WritingExam } from "@/interfaces/exam";
+import {renderSolution} from "@/components/Solutions";
+import {infoButtonStyle} from "@/constants/buttonStyles";
+import {Module} from "@/interfaces";
+import {
+	Exercise,
+	FillBlanksExercise,
+	FillBlanksMCOption,
+	LevelExam,
+	LevelPart,
+	MultipleChoiceExercise,
+	ShuffleMap,
+	UserSolution,
+	WritingExam,
+} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
-import { defaultUserSolutions } from "@/utils/exams";
-import { countExercises } from "@/utils/moduleUtils";
-import { mdiArrowRight } from "@mdi/js";
+import {defaultUserSolutions} from "@/utils/exams";
+import {countExercises} from "@/utils/moduleUtils";
+import {mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import { Dispatch, Fragment, SetStateAction, use, useEffect, useMemo, useRef, useState } from "react";
-import { BsChevronDown, BsChevronUp } from "react-icons/bs";
-import { toast } from "react-toastify";
-import { v4 } from "uuid";
+import {Dispatch, Fragment, SetStateAction, use, useEffect, useMemo, useRef, useState} from "react";
+import {BsChevronDown, BsChevronUp} from "react-icons/bs";
+import {toast} from "react-toastify";
+import {v4} from "uuid";
 
 interface Props {
 	exam: LevelExam;
@@ -26,9 +36,13 @@ interface Props {
 }
 
 function TextComponent({
-	part, contextWord, setContextWordLine
+	part,
+	contextWord,
+	setContextWordLine,
 }: {
-	part: LevelPart, contextWord: string | undefined, setContextWordLine: React.Dispatch<React.SetStateAction<number | undefined>>
+	part: LevelPart;
+	contextWord: string | undefined;
+	setContextWordLine: React.Dispatch<React.SetStateAction<number | undefined>>;
 }) {
 	const textRef = useRef<HTMLDivElement>(null);
 	const [lineNumbers, setLineNumbers] = useState<number[]>([]);
@@ -42,21 +56,21 @@ function TextComponent({
 			const containerWidth = textRef.current.clientWidth;
 			setLineHeight(lineHeightValue);
 
-			const offscreenElement = document.createElement('div');
-			offscreenElement.style.position = 'absolute';
-			offscreenElement.style.top = '-9999px';
-			offscreenElement.style.left = '-9999px';
-			offscreenElement.style.whiteSpace = 'pre-wrap';
+			const offscreenElement = document.createElement("div");
+			offscreenElement.style.position = "absolute";
+			offscreenElement.style.top = "-9999px";
+			offscreenElement.style.left = "-9999px";
+			offscreenElement.style.whiteSpace = "pre-wrap";
 			offscreenElement.style.width = `${containerWidth}px`;
 			offscreenElement.style.font = computedStyle.font;
 			offscreenElement.style.lineHeight = computedStyle.lineHeight;
 			offscreenElement.style.textAlign = computedStyle.textAlign as CanvasTextAlign;
 
-			const textContent = textRef.current.textContent || '';
+			const textContent = textRef.current.textContent || "";
 			textContent.split(/(\s+)/).forEach((word: string) => {
-				const span = document.createElement('span');
+				const span = document.createElement("span");
 				span.textContent = word;
-				span.style.display = 'inline-block';
+				span.style.display = "inline-block";
 				span.style.height = `calc(1em + 16px)`;
 				offscreenElement.appendChild(span);
 			});
@@ -73,9 +87,9 @@ function TextComponent({
 				currentLineTop = firstChild.getBoundingClientRect().top;
 			}
 
-			const spans = offscreenElement.querySelectorAll<HTMLSpanElement>('span');
+			const spans = offscreenElement.querySelectorAll<HTMLSpanElement>("span");
 
-			spans.forEach(span => {
+			spans.forEach((span) => {
 				const rect = span.getBoundingClientRect();
 				const top = rect.top;
 
@@ -85,8 +99,7 @@ function TextComponent({
 					lines.push([]);
 				}
 
-				lines[lines.length - 1].push(span.textContent?.trim() || '');
-
+				lines[lines.length - 1].push(span.textContent?.trim() || "");
 
 				if (contextWord && contextWordLine === null && span.textContent?.includes(contextWord)) {
 					contextWordLine = currentLine;
@@ -115,9 +128,11 @@ function TextComponent({
 
 		return () => {
 			if (textRef.current) {
+				// eslint-disable-next-line react-hooks/exhaustive-deps
 				resizeObserver.unobserve(textRef.current);
 			}
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [part.context, part.showContextLines, contextWord]);
 
 	if (typeof part.showContextLines === "undefined") {
@@ -142,8 +157,13 @@ function TextComponent({
 			<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
 			<div className="flex mt-2">
 				<div ref={textRef} className="h-fit ml-2 flex flex-col gap-4">
-					{part.context!.split('\n\n').map((line, index) => {
-						return <p key={`line-${index}`}><span className="mr-6">{index + 1}</span>{line}</p>
+					{part.context!.split("\n\n").map((line, index) => {
+						return (
+							<p key={`line-${index}`}>
+								<span className="mr-6">{index + 1}</span>
+								{line}
+							</p>
+						);
 					})}
 				</div>
 			</div>
@@ -151,22 +171,18 @@ function TextComponent({
 	);
 }
 
-
 const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
-	return Array.isArray(words) && words.every(
-		word => word && typeof word === 'object' && 'id' in word && 'options' in word
-	);
-}
+	return Array.isArray(words) && words.every((word) => word && typeof word === "object" && "id" in word && "options" in word);
+};
 
-
-export default function Level({ exam, showSolutions = false, onFinish, editing = false }: Props) {
-	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{ id: string; amount: number }[]>([]);
+export default function Level({exam, showSolutions = false, onFinish, editing = false}: Props) {
+	const [multipleChoicesDone, setMultipleChoicesDone] = useState<{id: string; amount: number}[]>([]);
 	const [showBlankModal, setShowBlankModal] = useState(false);
 
-	const { userSolutions, setUserSolutions } = useExamStore((state) => state);
-	const { hasExamEnded, setHasExamEnded } = useExamStore((state) => state);
-	const { partIndex, setPartIndex } = useExamStore((state) => state);
-	const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state);
+	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
+	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
+	const {partIndex, setPartIndex} = useExamStore((state) => state);
+	const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
 	const [storeQuestionIndex, setStoreQuestionIndex] = useExamStore((state) => [state.questionIndex, state.setQuestionIndex]);
 	//const [shuffleMaps, setShuffleMaps] = useExamStore((state) => [state.shuffleMaps, state.setShuffleMaps])
 	const [currentExercise, setCurrentExercise] = useState<Exercise>();
@@ -197,7 +213,6 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 		onFinish(userSolutions);
 	};
 
-
 	const getExercise = () => {
 		if (exerciseIndex === -1) {
 			return undefined;
@@ -287,12 +302,10 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 	};
 
 	useEffect(() => {
-		//console.log("Getting another exercise");
-		//setShuffleMaps([]);
 		setCurrentExercise(getExercise());
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [partIndex, exerciseIndex]);
 
-
 	useEffect(() => {
 		const regex = /.*?['"](.*?)['"] in line (\d+)\?$/;
 		if (currentExercise && currentExercise.type === "multipleChoice") {
@@ -307,7 +320,7 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 
 				const updatedPrompt = currentExercise.questions[storeQuestionIndex].prompt.replace(
 					`in line ${originalLineNumber}`,
-					`in line ${contextWordLine || originalLineNumber}`
+					`in line ${contextWordLine || originalLineNumber}`,
 				);
 
 				currentExercise.questions[storeQuestionIndex].prompt = updatedPrompt;
@@ -315,16 +328,20 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 				setContextWord(undefined);
 			}
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [storeQuestionIndex, contextWordLine, exerciseIndex, partIndex]); //, shuffleMaps]);
 
 	const nextExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "level", exam: exam.id }]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
 		}
 
 		if (storeQuestionIndex > 0 || currentExercise?.type == "fillBlanks") {
-			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== currentExercise!.id), { id: currentExercise!.id, amount: currentExercise?.type == "fillBlanks" ? currentExercise.words.length - 1 : storeQuestionIndex }]);
+			setMultipleChoicesDone((prev) => [
+				...prev.filter((x) => x.id !== currentExercise!.id),
+				{id: currentExercise!.id, amount: currentExercise?.type == "fillBlanks" ? currentExercise.words.length - 1 : storeQuestionIndex},
+			]);
 		}
 		setStoreQuestionIndex(0);
 
@@ -355,11 +372,11 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 		setHasExamEnded(false);
 
 		if (solution) {
-			let stat = { ...solution, module: "level" as Module, exam: exam.id }
+			let stat = {...solution, module: "level" as Module, exam: exam.id};
 			/*if (exam.shuffle) {
 				stat.shuffleMaps = shuffleMaps
 			}*/
-			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...stat }]);
+			onFinish([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...stat}]);
 		} else {
 			onFinish(userSolutions);
 		}
@@ -368,11 +385,14 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 	const previousExercise = (solution?: UserSolution) => {
 		scrollToTop();
 		if (solution) {
-			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), { ...solution, module: "level", exam: exam.id }]);
+			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "level", exam: exam.id}]);
 		}
 
 		if (storeQuestionIndex > 0 || currentExercise?.type == "fillBlanks") {
-			setMultipleChoicesDone((prev) => [...prev.filter((x) => x.id !== currentExercise!.id), { id: currentExercise!.id, amount: currentExercise?.type == "fillBlanks" ? currentExercise.words.length - 1 : storeQuestionIndex }]);
+			setMultipleChoicesDone((prev) => [
+				...prev.filter((x) => x.id !== currentExercise!.id),
+				{id: currentExercise!.id, amount: currentExercise?.type == "fillBlanks" ? currentExercise.words.length - 1 : storeQuestionIndex},
+			]);
 		}
 		setStoreQuestionIndex(0);
 
@@ -391,7 +411,9 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 			exercisesDone +
 			(exerciseIndex === -1 ? 0 : exerciseIndex + 1) +
 			storeQuestionIndex +
-			multipleChoicesDone.reduce((acc, curr) => { return acc + curr.amount}, 0)
+			multipleChoicesDone.reduce((acc, curr) => {
+				return acc + curr.amount;
+			}, 0)
 		);
 	};
 
@@ -404,21 +426,21 @@ export default function Level({ exam, showSolutions = false, onFinish, editing =
 					</h4>
 					<span className="text-base">You will be allowed to read the text while doing the exercises</span>
 				</div>
-				<TextComponent
-					part={exam.parts[partIndex]}
-					contextWord={contextWord}
-					setContextWordLine={setContextWordLine}
-				/>
+				<TextComponent part={exam.parts[partIndex]} contextWord={contextWord} setContextWordLine={setContextWordLine} />
 			</>
 		</div>
 	);
 
 	const partLabel = () => {
 		if (currentExercise?.type === "fillBlanks" && typeCheckWordsMC(currentExercise.words))
-			return `Part ${partIndex + 1} (Questions ${currentExercise.words[0].id} - ${currentExercise.words[currentExercise.words.length - 1].id})\n\n${currentExercise.prompt}`
+			return `Part ${partIndex + 1} (Questions ${currentExercise.words[0].id} - ${
+				currentExercise.words[currentExercise.words.length - 1].id
+			})\n\n${currentExercise.prompt}`;
 		if (currentExercise?.type === "multipleChoice")
-			return `Part ${partIndex + 1} (Questions ${currentExercise.questions[0].id} - ${currentExercise.questions[currentExercise.questions.length - 1].id})\n\n${currentExercise.prompt}`
-	}
+			return `Part ${partIndex + 1} (Questions ${currentExercise.questions[0].id} - ${
+				currentExercise.questions[currentExercise.questions.length - 1].id
+			})\n\n${currentExercise.prompt}`;
+	};
 
 	return (
 		<>
diff --git a/src/pages/training/[id]/index.tsx b/src/pages/training/[id]/index.tsx
index 94226995..ae902a29 100644
--- a/src/pages/training/[id]/index.tsx
+++ b/src/pages/training/[id]/index.tsx
@@ -1,357 +1,371 @@
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import axios from 'axios';
-import { Tab } from "@headlessui/react";
-import { AiOutlineFileSearch } from "react-icons/ai";
-import { MdOutlinePlaylistAddCheckCircle, MdOutlineSelfImprovement } from "react-icons/md";
-import { BsChatLeftDots } from "react-icons/bs";
+import {useEffect, useState} from "react";
+import {useRouter} from "next/router";
+import axios from "axios";
+import {Tab} from "@headlessui/react";
+import {AiOutlineFileSearch} from "react-icons/ai";
+import {MdOutlinePlaylistAddCheckCircle, MdOutlineSelfImprovement} from "react-icons/md";
+import {BsChatLeftDots} from "react-icons/bs";
 import Button from "@/components/Low/Button";
 import clsx from "clsx";
 import Exercise from "@/training/Exercise";
 import TrainingScore from "@/training/TrainingScore";
-import { ITrainingContent, ITrainingTip } from "@/training/TrainingInterfaces";
-import { Stat, User } from '@/interfaces/user';
+import {ITrainingContent, ITrainingTip} from "@/training/TrainingInterfaces";
+import {Stat, User} from "@/interfaces/user";
 import Head from "next/head";
 import Layout from "@/components/High/Layout";
-import { ToastContainer } from 'react-toastify';
-import { withIronSessionSsr } from "iron-session/next";
-import { shouldRedirectHome } from "@/utils/navigation.disabled";
-import { sessionOptions } from "@/lib/session";
-import qs from 'qs';
-import StatsGridItem from '@/components/StatGridItem';
+import {ToastContainer} from "react-toastify";
+import {withIronSessionSsr} from "iron-session/next";
+import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import {sessionOptions} from "@/lib/session";
+import qs from "qs";
+import StatsGridItem from "@/components/StatGridItem";
 import useExamStore from "@/stores/examStore";
-import { usePDFDownload } from "@/hooks/usePDFDownload";
-import useAssignments from '@/hooks/useAssignments';
-import useUsers from '@/hooks/useUsers';
+import {usePDFDownload} from "@/hooks/usePDFDownload";
+import useAssignments from "@/hooks/useAssignments";
+import useUsers from "@/hooks/useUsers";
 import Dropdown from "@/components/Dropdown";
-import InfiniteCarousel from '@/components/InfiniteCarousel';
-import { LuExternalLink } from "react-icons/lu";
-import { uniqBy } from 'lodash';
-import { getExamById } from '@/utils/exams';
-import { convertToUserSolutions } from '@/utils/stats';
-import { sortByModule } from '@/utils/moduleUtils';
+import InfiniteCarousel from "@/components/InfiniteCarousel";
+import {LuExternalLink} from "react-icons/lu";
+import {uniqBy} from "lodash";
+import {getExamById} from "@/utils/exams";
+import {convertToUserSolutions} from "@/utils/stats";
+import {sortByModule} from "@/utils/moduleUtils";
 
-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);
 
-const TrainingContent: React.FC<{ user: User }> = ({ user }) => {
-    // Record stuff
-    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 renderPdfIcon = usePDFDownload("stats");
+const TrainingContent: React.FC<{user: User}> = ({user}) => {
+	// Record stuff
+	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 renderPdfIcon = usePDFDownload("stats");
 
-    const [trainingContent, setTrainingContent] = useState<ITrainingContent | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [trainingTips, setTrainingTips] = useState<ITrainingTip[]>([]);
-    const [currentTipIndex, setCurrentTipIndex] = useState(0);
-    const { assignments } = useAssignments({});
-    const { users } = useUsers();
+	const [trainingContent, setTrainingContent] = useState<ITrainingContent | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [trainingTips, setTrainingTips] = useState<ITrainingTip[]>([]);
+	const [currentTipIndex, setCurrentTipIndex] = useState(0);
+	const {assignments} = useAssignments({});
+	const {users} = useUsers();
 
-    const router = useRouter();
-    const { id } = router.query;
+	const router = useRouter();
+	const {id} = router.query;
 
-    useEffect(() => {
-        const fetchTrainingContent = async () => {
-            if (!id || typeof id !== 'string') return;
+	useEffect(() => {
+		const fetchTrainingContent = async () => {
+			if (!id || typeof id !== "string") return;
 
-            try {
-                setLoading(true);
-                const response = await axios.get<ITrainingContent>(`/api/training/${id}`);
-                const trainingContent = response.data;
+			try {
+				setLoading(true);
+				const response = await axios.get<ITrainingContent>(`/api/training/${id}`);
+				const trainingContent = response.data;
 
-                const withExamsStats = {
-                    ...trainingContent,
-                    exams: await Promise.all(trainingContent.exams.map(async (exam) => {
-                        const stats = await Promise.all(exam.stat_ids.map(async (statId) => {
-                            const statResponse = await axios.get<Stat>(`/api/stats/${statId}`);
-                            return statResponse.data;
-                        }));
-                        return { ...exam, stats };
-                    }))
-                };
+				const withExamsStats = {
+					...trainingContent,
+					exams: await Promise.all(
+						trainingContent.exams.map(async (exam) => {
+							const stats = await Promise.all(
+								exam.stat_ids.map(async (statId) => {
+									const statResponse = await axios.get<Stat>(`/api/stats/${statId}`);
+									return statResponse.data;
+								}),
+							);
+							return {...exam, stats};
+						}),
+					),
+				};
 
-                const tips = await axios.get<ITrainingTip[]>('/api/training/walkthrough', {
-                    params: { ids: trainingContent.tip_ids },
-                    paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' })
-                });
-                setTrainingTips(tips.data);
-                setTrainingContent(withExamsStats);
-            } catch (error) {
-                router.push('/training');
-            } finally {
-                setLoading(false);
-            }
-        };
+				const tips = await axios.get<ITrainingTip[]>("/api/training/walkthrough", {
+					params: {ids: trainingContent.tip_ids},
+					paramsSerializer: (params) => qs.stringify(params, {arrayFormat: "repeat"}),
+				});
+				setTrainingTips(tips.data);
+				setTrainingContent(withExamsStats);
+			} catch (error) {
+				router.push("/training");
+			} finally {
+				setLoading(false);
+			}
+		};
 
-        fetchTrainingContent();
-    }, [id]);
+		fetchTrainingContent();
+	}, [id, router]);
 
-    const handleNext = () => {
-        setCurrentTipIndex((prevIndex) => (prevIndex + 1));
-    };
+	const handleNext = () => {
+		setCurrentTipIndex((prevIndex) => prevIndex + 1);
+	};
 
-    const handlePrevious = () => {
-        setCurrentTipIndex((prevIndex) => (prevIndex - 1));
-    };
+	const handlePrevious = () => {
+		setCurrentTipIndex((prevIndex) => prevIndex - 1);
+	};
 
-    const goToExam = (examNumber: number) => {
-        const stats = trainingContent?.exams[examNumber].stats!;
-        const examPromises = uniqBy(stats, "exam").map((stat) => {
-            return getExamById(stat.module, stat.exam);
-        });
+	const goToExam = (examNumber: number) => {
+		const stats = trainingContent?.exams[examNumber].stats!;
+		const examPromises = uniqBy(stats, "exam").map((stat) => {
+			return getExamById(stat.module, stat.exam);
+		});
 
-        const { timeSpent, inactivity } = stats[0];
+		const {timeSpent, inactivity} = stats[0];
 
-        Promise.all(examPromises).then((exams) => {
-            if (exams.every((x) => !!x)) {
-                if (!!timeSpent) setTimeSpent(timeSpent);
-                if (!!inactivity) setInactivity(inactivity);
-                setUserSolutions(convertToUserSolutions(stats));
-                setShowSolutions(true);
-                setExams(exams.map((x) => x!).sort(sortByModule));
-                setSelectedModules(
-                    exams
-                        .map((x) => x!)
-                        .sort(sortByModule)
-                        .map((x) => x!.module),
-                );
-                router.push("/exercises");
-            }
-        });
-    }
+		Promise.all(examPromises).then((exams) => {
+			if (exams.every((x) => !!x)) {
+				if (!!timeSpent) setTimeSpent(timeSpent);
+				if (!!inactivity) setInactivity(inactivity);
+				setUserSolutions(convertToUserSolutions(stats));
+				setShowSolutions(true);
+				setExams(exams.map((x) => x!).sort(sortByModule));
+				setSelectedModules(
+					exams
+						.map((x) => x!)
+						.sort(sortByModule)
+						.map((x) => x!.module),
+				);
+				router.push("/exercises");
+			}
+		});
+	};
 
-    return (
-        <>
-            <Head>
-                <title>Training | 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 />
+	return (
+		<>
+			<Head>
+				<title>Training | 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 />
 
-            <Layout user={user}>
-                {loading ? (
-                    <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
-                        <span className="loading loading-infinity w-32 bg-mti-green-light" />
-                    </div>
-                ) : (trainingContent && (
-                    <div className="flex flex-col gap-8">
-                        <div className="flex flex-row items-center">
-                            <span className="bg-gray-200 text-gray-800 px-3 py-0.5 rounded-full font-semibold text-lg mr-2">{trainingContent.exams.length}</span>
-                            <span>Exams Selected</span>
-                        </div>
-                        <div className='h-[15vh] mb-4'>
-                            <InfiniteCarousel height="150px"
-                                overlay={
-                                    <LuExternalLink size={20} />
-                                }
-                                overlayFunc={goToExam}
-                                overlayClassName='bottom-6 right-5 cursor-pointer'
-                            >
-                                {trainingContent.exams.map((exam, examIndex) => (
-                                    <StatsGridItem
-                                        key={`exam-${examIndex}`}
-                                        width='380px'
-                                        height='150px'
-                                        examNumber={examIndex + 1}
-                                        stats={exam.stats || []}
-                                        timestamp={exam.date}
-                                        user={user}
-                                        assignments={assignments}
-                                        users={users}
-                                        setExams={setExams}
-                                        setShowSolutions={setShowSolutions}
-                                        setUserSolutions={setUserSolutions}
-                                        setSelectedModules={setSelectedModules}
-                                        setInactivity={setInactivity}
-                                        setTimeSpent={setTimeSpent}
-                                        renderPdfIcon={renderPdfIcon}
-                                    />
-                                ))}
-                            </InfiniteCarousel>
-                        </div>
-                        <div className='flex flex-col'>
-                            <div className='flex flex-row gap-10 -md:flex-col h-full'>
-                                <div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full max-h-full">
-                                    <div className="flex flex-row items-center mb-6 gap-1">
-                                        <MdOutlinePlaylistAddCheckCircle color={"#40A1EA"} size={26} />
-                                        <h2 className={`text-xl font-semibold text-[#40A1EA]`}>General Evaluation</h2>
-                                    </div>
-                                    <TrainingScore
-                                        trainingContent={trainingContent}
-                                        gridView={false}
-                                    />
-                                    <div className="w-full h-px bg-[#D9D9D929] my-6"></div>
-                                    <div className="flex flex-row gap-2 items-center mb-6">
-                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                            <mask id="mask0_112_168" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-                                                <rect width="24" height="24" fill="#D9D9D9" />
-                                            </mask>
-                                            <g mask="url(#mask0_112_168)">
-                                                <path d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7H4V19H19V21H4ZM8 17C7.45 17 6.97917 16.8042 6.5875 16.4125C6.19583 16.0208 6 15.55 6 15V3H23V15C23 15.55 22.8042 16.0208 22.4125 16.4125C22.0208 16.8042 21.55 17 21 17H8ZM8 15H21V5H8V15ZM10 12H14V7H10V12ZM15 12H19V10H15V12ZM15 9H19V7H15V9Z" fill="#53B2F9" />
-                                            </g>
-                                        </svg>
-                                        <h3 className="text-xl font-semibold text-[#40A1EA]">Performance Breakdown by Exam:</h3>
-                                    </div>
-                                    <ul className='overflow-auto scrollbar-hide flex-grow'>
-                                        {trainingContent.exams.flatMap((exam, index) => (
-                                            <li key={index} className="flex flex-col mb-2 bg-[#22E1B30F] p-4 rounded-xl border">
-                                                <div className="flex flex-row font-semibold border-b-2 border-[#D9D9D929] text-[#22E1B3] mb-2">
-                                                    <div className='flex items-center border-r-2 border-[#D9D9D929] pr-2'>
-                                                        <span className='mr-1'>Exam</span>
-                                                        <span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm">{index + 1}</span>
-                                                    </div>
-                                                    <span className="pl-2">{exam.score}%</span>
-                                                </div>
-                                                <div className="flex flex-row items-center gap-2">
-                                                    <BsChatLeftDots size={16} />
-                                                    <p className="text-sm">{exam.performance_comment}</p>
-                                                </div>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                </div>
-                                <div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full">
-                                    <div className='flex flex-col'>
-                                        <div className="flex flex-row items-center mb-4 gap-1">
-                                            <AiOutlineFileSearch color="#40A1EA" size={24} />
-                                            <h3 className="text-xl font-semibold text-[#40A1EA]">Identified Weak Areas</h3>
-                                        </div>
-                                        <Tab.Group>
-                                            <div className="flex flex-col gap-4">
-                                                <Tab.List>
-                                                    <div className="flex flex-row gap-6 overflow-x-auto pb-1 training-scrollbar">
-                                                        {trainingContent.weak_areas.map((x, index) => (
-                                                            <Tab
-                                                                key={index}
-                                                                className={({ selected }) =>
-                                                                    clsx(
-                                                                        'text-[#53B2F9] pb-2 border-b-2',
-                                                                        'focus:outline-none',
-                                                                        selected ? 'border-[#1B78BE]' : 'border-[#1B78BE0F]'
-                                                                    )
-                                                                }
-                                                            >
-                                                                {x.area}
-                                                            </Tab>
-                                                        ))}
-                                                    </div>
-                                                </Tab.List>
-                                                <Tab.Panels>
-                                                    {trainingContent.weak_areas.map((x, index) => (
-                                                        <Tab.Panel
-                                                            key={index}
-                                                            className="p-3 bg-[#FBFBFB] rounded-lg border border-[#0000000F]"
-                                                        >
-                                                            <p>{x.comment}</p>
-                                                        </Tab.Panel>
-                                                    ))}
-                                                </Tab.Panels>
-                                            </div>
-                                        </Tab.Group>
-                                    </div>
-                                    <div className="w-full h-px bg-[#D9D9D929] my-6"></div>
-                                    <div className="flex flex-row items-center mb-4 gap-1">
-                                        <MdOutlineSelfImprovement color={"#40A1EA"} size={24} />
-                                        <h2 className={`text-xl font-semibold text-[#40A1EA]`}>Subjects that Need Improvement</h2>
-                                    </div>
+			<Layout user={user}>
+				{loading ? (
+					<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
+						<span className="loading loading-infinity w-32 bg-mti-green-light" />
+					</div>
+				) : (
+					trainingContent && (
+						<div className="flex flex-col gap-8">
+							<div className="flex flex-row items-center">
+								<span className="bg-gray-200 text-gray-800 px-3 py-0.5 rounded-full font-semibold text-lg mr-2">
+									{trainingContent.exams.length}
+								</span>
+								<span>Exams Selected</span>
+							</div>
+							<div className="h-[15vh] mb-4">
+								<InfiniteCarousel
+									height="150px"
+									overlay={<LuExternalLink size={20} />}
+									overlayFunc={goToExam}
+									overlayClassName="bottom-6 right-5 cursor-pointer">
+									{trainingContent.exams.map((exam, examIndex) => (
+										<StatsGridItem
+											key={`exam-${examIndex}`}
+											width="380px"
+											height="150px"
+											examNumber={examIndex + 1}
+											stats={exam.stats || []}
+											timestamp={exam.date}
+											user={user}
+											assignments={assignments}
+											users={users}
+											setExams={setExams}
+											setShowSolutions={setShowSolutions}
+											setUserSolutions={setUserSolutions}
+											setSelectedModules={setSelectedModules}
+											setInactivity={setInactivity}
+											setTimeSpent={setTimeSpent}
+											renderPdfIcon={renderPdfIcon}
+										/>
+									))}
+								</InfiniteCarousel>
+							</div>
+							<div className="flex flex-col">
+								<div className="flex flex-row gap-10 -md:flex-col h-full">
+									<div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full max-h-full">
+										<div className="flex flex-row items-center mb-6 gap-1">
+											<MdOutlinePlaylistAddCheckCircle color={"#40A1EA"} size={26} />
+											<h2 className={`text-xl font-semibold text-[#40A1EA]`}>General Evaluation</h2>
+										</div>
+										<TrainingScore trainingContent={trainingContent} gridView={false} />
+										<div className="w-full h-px bg-[#D9D9D929] my-6"></div>
+										<div className="flex flex-row gap-2 items-center mb-6">
+											<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+												<mask id="mask0_112_168" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+													<rect width="24" height="24" fill="#D9D9D9" />
+												</mask>
+												<g mask="url(#mask0_112_168)">
+													<path
+														d="M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V7H4V19H19V21H4ZM8 17C7.45 17 6.97917 16.8042 6.5875 16.4125C6.19583 16.0208 6 15.55 6 15V3H23V15C23 15.55 22.8042 16.0208 22.4125 16.4125C22.0208 16.8042 21.55 17 21 17H8ZM8 15H21V5H8V15ZM10 12H14V7H10V12ZM15 12H19V10H15V12ZM15 9H19V7H15V9Z"
+														fill="#53B2F9"
+													/>
+												</g>
+											</svg>
+											<h3 className="text-xl font-semibold text-[#40A1EA]">Performance Breakdown by Exam:</h3>
+										</div>
+										<ul className="overflow-auto scrollbar-hide flex-grow">
+											{trainingContent.exams.flatMap((exam, index) => (
+												<li key={index} className="flex flex-col mb-2 bg-[#22E1B30F] p-4 rounded-xl border">
+													<div className="flex flex-row font-semibold border-b-2 border-[#D9D9D929] text-[#22E1B3] mb-2">
+														<div className="flex items-center border-r-2 border-[#D9D9D929] pr-2">
+															<span className="mr-1">Exam</span>
+															<span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm">
+																{index + 1}
+															</span>
+														</div>
+														<span className="pl-2">{exam.score}%</span>
+													</div>
+													<div className="flex flex-row items-center gap-2">
+														<BsChatLeftDots size={16} />
+														<p className="text-sm">{exam.performance_comment}</p>
+													</div>
+												</li>
+											))}
+										</ul>
+									</div>
+									<div className="flex flex-col rounded-3xl p-6 w-1/2 shadow-training-inset -md:w-full">
+										<div className="flex flex-col">
+											<div className="flex flex-row items-center mb-4 gap-1">
+												<AiOutlineFileSearch color="#40A1EA" size={24} />
+												<h3 className="text-xl font-semibold text-[#40A1EA]">Identified Weak Areas</h3>
+											</div>
+											<Tab.Group>
+												<div className="flex flex-col gap-4">
+													<Tab.List>
+														<div className="flex flex-row gap-6 overflow-x-auto pb-1 training-scrollbar">
+															{trainingContent.weak_areas.map((x, index) => (
+																<Tab
+																	key={index}
+																	className={({selected}) =>
+																		clsx(
+																			"text-[#53B2F9] pb-2 border-b-2",
+																			"focus:outline-none",
+																			selected ? "border-[#1B78BE]" : "border-[#1B78BE0F]",
+																		)
+																	}>
+																	{x.area}
+																</Tab>
+															))}
+														</div>
+													</Tab.List>
+													<Tab.Panels>
+														{trainingContent.weak_areas.map((x, index) => (
+															<Tab.Panel key={index} className="p-3 bg-[#FBFBFB] rounded-lg border border-[#0000000F]">
+																<p>{x.comment}</p>
+															</Tab.Panel>
+														))}
+													</Tab.Panels>
+												</div>
+											</Tab.Group>
+										</div>
+										<div className="w-full h-px bg-[#D9D9D929] my-6"></div>
+										<div className="flex flex-row items-center mb-4 gap-1">
+											<MdOutlineSelfImprovement color={"#40A1EA"} size={24} />
+											<h2 className={`text-xl font-semibold text-[#40A1EA]`}>Subjects that Need Improvement</h2>
+										</div>
 
-                                    <div className="flex flex-grow bg-[#FBFBFB] border rounded-xl p-4">
-                                        <div className='flex flex-col'>
-                                            <div className="flex flex-row items-center gap-1 mb-4">
-                                                <div className="flex items-center justify-center w-[48px] h-[48px]">
-                                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                                        <mask id="mask0_112_445" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
-                                                            <rect width="24" height="24" fill="#D9D9D9" />
-                                                        </mask>
-                                                        <g mask="url(#mask0_112_445)">
-                                                            <path d="M6 17H11V15H6V17ZM16 17H18V15H16V17ZM6 13H11V11H6V13ZM16 13H18V7H16V13ZM6 9H11V7H6V9ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19Z" fill="#1C1B1F" />
-                                                        </g>
-                                                    </svg>
-                                                </div>
-                                                <h3 className="text-lg font-semibold">Detailed Breakdown</h3>
-                                            </div>
-                                            <ul className="flex flex-col flex-grow space-y-4 pb-2 overflow-y-auto scrollbar-hide">
-                                                {trainingContent.exams.map((exam, index) => (
-                                                    <li key={index} className="border rounded-lg bg-white">
-                                                        <Dropdown title={
-                                                            <div className='flex flex-row items-center'>
-                                                                <span className="mr-1">Exam</span>
-                                                                <span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm mt-0.5">{index + 1}</span>
-                                                            </div>
-                                                        } open={index == 0}>
-                                                            <span>{exam.detailed_summary}</span>
-                                                        </Dropdown>
-                                                    </li>
-                                                ))}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex -md:hidden">
-                            <div className="rounded-3xl p-6 shadow-training-inset w-full">
-                                <div className="flex flex-col p-10">
-                                    <Exercise key={currentTipIndex} {...trainingTips[currentTipIndex]} />
-                                </div>
-                                <div className="self-end flex justify-between w-full gap-8  bottom-8 left-0 px-8">
-                                    <Button
-                                        color="purple"
-                                        variant="outline"
-                                        onClick={handlePrevious}
-                                        disabled={currentTipIndex == 0}
-                                        className="max-w-[200px] self-end w-full">
-                                        Previous
-                                    </Button>
-                                    <Button
-                                        color="purple"
-                                        disabled={currentTipIndex == (trainingTips.length - 1)}
-                                        onClick={handleNext}
-                                        className="max-w-[200px] self-end w-full">
-                                        Next
-                                    </Button>
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                ))}
-            </Layout>
-        </>
-    );
-}
+										<div className="flex flex-grow bg-[#FBFBFB] border rounded-xl p-4">
+											<div className="flex flex-col">
+												<div className="flex flex-row items-center gap-1 mb-4">
+													<div className="flex items-center justify-center w-[48px] h-[48px]">
+														<svg
+															width="24"
+															height="24"
+															viewBox="0 0 24 24"
+															fill="none"
+															xmlns="http://www.w3.org/2000/svg">
+															<mask id="mask0_112_445" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+																<rect width="24" height="24" fill="#D9D9D9" />
+															</mask>
+															<g mask="url(#mask0_112_445)">
+																<path
+																	d="M6 17H11V15H6V17ZM16 17H18V15H16V17ZM6 13H11V11H6V13ZM16 13H18V7H16V13ZM6 9H11V7H6V9ZM4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19Z"
+																	fill="#1C1B1F"
+																/>
+															</g>
+														</svg>
+													</div>
+													<h3 className="text-lg font-semibold">Detailed Breakdown</h3>
+												</div>
+												<ul className="flex flex-col flex-grow space-y-4 pb-2 overflow-y-auto scrollbar-hide">
+													{trainingContent.exams.map((exam, index) => (
+														<li key={index} className="border rounded-lg bg-white">
+															<Dropdown
+																title={
+																	<div className="flex flex-row items-center">
+																		<span className="mr-1">Exam</span>
+																		<span className="font-semibold bg-gray-200 text-gray-800 px-2 rounded-full text-sm mt-0.5">
+																			{index + 1}
+																		</span>
+																	</div>
+																}
+																open={index == 0}>
+																<span>{exam.detailed_summary}</span>
+															</Dropdown>
+														</li>
+													))}
+												</ul>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+							<div className="flex -md:hidden">
+								<div className="rounded-3xl p-6 shadow-training-inset w-full">
+									<div className="flex flex-col p-10">
+										<Exercise key={currentTipIndex} {...trainingTips[currentTipIndex]} />
+									</div>
+									<div className="self-end flex justify-between w-full gap-8  bottom-8 left-0 px-8">
+										<Button
+											color="purple"
+											variant="outline"
+											onClick={handlePrevious}
+											disabled={currentTipIndex == 0}
+											className="max-w-[200px] self-end w-full">
+											Previous
+										</Button>
+										<Button
+											color="purple"
+											disabled={currentTipIndex == trainingTips.length - 1}
+											onClick={handleNext}
+											className="max-w-[200px] self-end w-full">
+											Next
+										</Button>
+									</div>
+								</div>
+							</div>
+						</div>
+					)
+				)}
+			</Layout>
+		</>
+	);
+};
 
 export default TrainingContent;
-
diff --git a/src/pages/training/index.tsx b/src/pages/training/index.tsx
index c837fd16..30ab8b66 100644
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -84,6 +84,7 @@ const Training: React.FC<{user: User}> = ({user}) => {
 		return () => {
 			router.events.off("routeChangeStart", handleRouteChange);
 		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [router.events, setTrainingStats]);
 
 	useEffect(() => {
@@ -104,6 +105,7 @@ const Training: React.FC<{user: User}> = ({user}) => {
 				}
 			});
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isNewContentLoading]);
 
 	useEffect(() => {