diff --git a/src/components/AbandonPopup.tsx b/src/components/AbandonPopup.tsx
index c1267e13..50eec5bf 100644
--- a/src/components/AbandonPopup.tsx
+++ b/src/components/AbandonPopup.tsx
@@ -3,60 +3,53 @@ import {Fragment} from "react";
 import Button from "./Low/Button";
 
 interface Props {
-    isOpen: boolean;
+	isOpen: boolean;
 	abandonPopupTitle: string;
 	abandonPopupDescription: string;
 	abandonConfirmButtonText: string;
-	onAbandon: Function;
-    onCancel: Function;
+	onAbandon: () => void;
+	onCancel: () => void;
 }
 
-export default function AbandonPopup({
-    isOpen,
-    abandonPopupTitle,
-	abandonPopupDescription,
-	abandonConfirmButtonText,
-	onAbandon,
-    onCancel,
-}: Props) {
-        return (
-            <Transition show={isOpen} as={Fragment}>
-                <Dialog onClose={onCancel} className="relative z-50">
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0"
-                        enterTo="opacity-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100"
-                        leaveTo="opacity-0">
-                        <div className="fixed inset-0 bg-black/30" />
-                    </Transition.Child>
-    
-                    <Transition.Child
-                        as={Fragment}
-                        enter="ease-out duration-300"
-                        enterFrom="opacity-0 scale-95"
-                        enterTo="opacity-100 scale-100"
-                        leave="ease-in duration-200"
-                        leaveFrom="opacity-100 scale-100"
-                        leaveTo="opacity-0 scale-95">
-                        <div className="fixed inset-0 flex items-center justify-center p-4">
-                            <Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
-                                <Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
-                                <span>{abandonPopupDescription}</span>
-                                <div className="w-full flex justify-between mt-8">
-                                    <Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
-                                        Cancel
-                                    </Button>
-                                    <Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
-                                        {abandonConfirmButtonText}
-                                    </Button>
-                                </div>
-                            </Dialog.Panel>
-                        </div>
-                    </Transition.Child>
-                </Dialog>
-            </Transition>
-    );
-}
\ No newline at end of file
+export default function AbandonPopup({isOpen, abandonPopupTitle, abandonPopupDescription, abandonConfirmButtonText, onAbandon, onCancel}: Props) {
+	return (
+		<Transition show={isOpen} as={Fragment}>
+			<Dialog onClose={onCancel} className="relative z-50">
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0">
+					<div className="fixed inset-0 bg-black/30" />
+				</Transition.Child>
+
+				<Transition.Child
+					as={Fragment}
+					enter="ease-out duration-300"
+					enterFrom="opacity-0 scale-95"
+					enterTo="opacity-100 scale-100"
+					leave="ease-in duration-200"
+					leaveFrom="opacity-100 scale-100"
+					leaveTo="opacity-0 scale-95">
+					<div className="fixed inset-0 flex items-center justify-center p-4">
+						<Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
+							<Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
+							<span>{abandonPopupDescription}</span>
+							<div className="w-full flex justify-between mt-8">
+								<Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
+									Cancel
+								</Button>
+								<Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
+									{abandonConfirmButtonText}
+								</Button>
+							</div>
+						</Dialog.Panel>
+					</div>
+				</Transition.Child>
+			</Dialog>
+		</Transition>
+	);
+}
diff --git a/src/components/Diagnostic.tsx b/src/components/Diagnostic.tsx
index 8a5a7983..dfa892ba 100644
--- a/src/components/Diagnostic.tsx
+++ b/src/components/Diagnostic.tsx
@@ -10,7 +10,7 @@ import axios from "axios";
 import clsx from "clsx";
 import {capitalize} from "lodash";
 import {useRouter} from "next/router";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {BsBook, BsChevronDown, BsHeadphones, BsMegaphone, BsPen, BsQuestionSquare} from "react-icons/bs";
 import {toast} from "react-toastify";
 import Button from "./Low/Button";
@@ -23,7 +23,7 @@ interface Props {
 const DIAGNOSTIC_EXAMS = [
 	["reading", "CurQtQoxWmHaJHeN0JW2"],
 	["listening", "Y6cMao8kUcVnPQOo6teV"],
-	["writing", "hbueuDaEZXV37EW7I12A"],
+	["writing", "B1J90R4Lmdn2dwjdHEwj"],
 	["speaking", "QVFm4pdcziJQZN2iUTDo"],
 ];
 
@@ -49,7 +49,7 @@ export default function Diagnostic({onFinish}: Props) {
 			if (exams.every((x) => !!x)) {
 				setExams(exams.map((x) => x!));
 				setSelectedModules(exams.map((x) => x!.module));
-				router.push("/exam");
+				router.push("/exercises");
 			}
 		});
 	};
@@ -58,7 +58,7 @@ export default function Diagnostic({onFinish}: Props) {
 		axios
 			.patch("/api/users/update", {
 				focus,
-				levels: Object.values(levels).includes(-1) ? {reading: -1, listening: -1, writing: -1, speaking: -1} : levels,
+				levels: Object.values(levels).includes(-1) ? {reading: 0, listening: 0, writing: 0, speaking: 0} : levels,
 				desiredLevels,
 				isFirstLogin: false,
 			})
diff --git a/src/components/FocusLayer.tsx b/src/components/FocusLayer.tsx
index 9b9c39cf..af231876 100644
--- a/src/components/FocusLayer.tsx
+++ b/src/components/FocusLayer.tsx
@@ -1,13 +1,9 @@
 import {useEffect, useState} from "react";
 
 interface Props {
-	onFocusLayerMouseEnter: Function,
+	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function FocusLayer({
-	onFocusLayerMouseEnter,
-}: Props) {
-	return (
-		<div className="bg-gray-700 bg-opacity-30 absolute top-0 left-0 bottom-0 right-0" onMouseEnter={onFocusLayerMouseEnter}/>
-	);
+export default function FocusLayer({onFocusLayerMouseEnter}: Props) {
+	return <div className="absolute top-0 left-0 bottom-0 right-0" onMouseDown={onFocusLayerMouseEnter} />;
 }
diff --git a/src/components/High/Layout.tsx b/src/components/High/Layout.tsx
index 78774e65..cd2d5214 100644
--- a/src/components/High/Layout.tsx
+++ b/src/components/High/Layout.tsx
@@ -9,18 +9,18 @@ interface Props {
 	children: React.ReactNode;
 	className?: string;
 	navDisabled?: boolean;
-	focusMode?: boolean
-	onFocusLayerMouseEnter?: Function;
+	focusMode?: boolean;
+	onFocusLayerMouseEnter?: () => void;
 }
 
-export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter }: Props) {
+export default function Layout({user, children, className, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
 	const router = useRouter();
 
 	return (
 		<main className="w-full min-h-full h-screen flex flex-col bg-mti-gray-smoke">
 			<Navbar user={user} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
 			<div className="h-full w-full flex gap-2">
-				<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>
+				<Sidebar path={router.pathname} navDisabled={navDisabled} focusMode={focusMode} onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
 				<div
 					className={clsx(
 						"w-5/6 min-h-full h-fit mr-8 bg-white shadow-md rounded-2xl p-12 pb-8 flex flex-col gap-12 relative overflow-hidden mt-2",
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd8189b1..7eb2482c 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,15 +1,14 @@
 import {User} from "@/interfaces/user";
 import Link from "next/link";
 import {Avatar} from "primereact/avatar";
-import FocusLayer from '@/components/FocusLayer';
-import { preventNavigation } from "@/utils/navigation.disabled";
-
+import FocusLayer from "@/components/FocusLayer";
+import {preventNavigation} from "@/utils/navigation.disabled";
 
 interface Props {
 	user: User;
 	navDisabled?: boolean;
 	focusMode?: boolean;
-	onFocusLayerMouseEnter?: Function;
+	onFocusLayerMouseEnter?: () => void;
 }
 
 /* eslint-disable @next/next/no-img-element */
@@ -26,7 +25,7 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
 					<span className="text-right">{user.name}</span>
 				</Link>
 			</div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter}/>}
+			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
 		</header>
 	);
 }
diff --git a/src/pages/exam.tsx b/src/pages/exam.tsx
index a531b8b3..b44c7465 100644
--- a/src/pages/exam.tsx
+++ b/src/pages/exam.tsx
@@ -321,25 +321,22 @@ export default function Page() {
 					user={user}
 					className="justify-between"
 					focusMode={selectedModules.length !== 0}
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
-					>
-						<>
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
+					<>
 						{renderScreen()}
 						<AbandonPopup
 							isOpen={showAbandonPopup}
-							abandonPopupTitle="Leave Exam"
-							abandonPopupDescription="Are you sure you want to leave the exam? You will lose all your progress."
+							abandonPopupTitle="Leave Exercise"
+							abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
 							abandonConfirmButtonText="Confirm"
 							onAbandon={() => {
-								console.log('TODO: Handle Abandon');
 								setExam(undefined);
 								setSelectedModules([]);
-								setShowAbandonPopup(false)
-								return true;
+								setShowAbandonPopup(false);
 							}}
 							onCancel={() => setShowAbandonPopup(false)}
 						/>
-						</>
+					</>
 				</Layout>
 			)}
 		</>
diff --git a/src/pages/exercises.tsx b/src/pages/exercises.tsx
index c5a8975e..2dd0c862 100644
--- a/src/pages/exercises.tsx
+++ b/src/pages/exercises.tsx
@@ -323,25 +323,22 @@ export default function Page() {
 					user={user}
 					className="justify-between"
 					focusMode={selectedModules.length !== 0}
-					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
-				>
+					onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
 					<>
 						{renderScreen()}
-							<AbandonPopup
-								isOpen={showAbandonPopup}
-
-								abandonPopupTitle="Leave Exercise"
-								abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
-								abandonConfirmButtonText="Confirm"
-								onAbandon={() => {
-									setExam(undefined);
-									setSelectedModules([]);
-									setShowAbandonPopup(false)
-									return true;
-								}}
-								onCancel={() => setShowAbandonPopup(false)}
-							/>
-						</>
+						<AbandonPopup
+							isOpen={showAbandonPopup}
+							abandonPopupTitle="Leave Exercise"
+							abandonPopupDescription="Are you sure you want to leave the exercise? You will lose all your progress."
+							abandonConfirmButtonText="Confirm"
+							onAbandon={() => {
+								setExam(undefined);
+								setSelectedModules([]);
+								setShowAbandonPopup(false);
+							}}
+							onCancel={() => setShowAbandonPopup(false)}
+						/>
+					</>
 				</Layout>
 			)}
 		</>