From 131523d0abadbed7ff0dc91dd1ffcb755d64a9bb Mon Sep 17 00:00:00 2001
From: pedram karimi <pedramkarimi1001@gmail.com>
Date: Fri, 13 Jun 2025 13:56:07 -0400
Subject: [PATCH 1/4] admin page

---
 middlewareNode/routes/auth.js                 |    4 +-
 middlewareNode/routes/users.js                |  144 +-
 react-ystemandchess/src/App.tsx               |   36 +-
 react-ystemandchess/src/AppRoutes.tsx         |  105 +-
 react-ystemandchess/src/Pages/Admin/Admin.tsx |  188 +++
 react-ystemandchess/src/Pages/Login/Login.tsx |  124 +-
 .../Pages/Mentor-Profile/MentorProfile.tsx    | 1471 +++++++++++------
 .../NewMentorProfile/NewMentorProfile.tsx     |  361 ++--
 .../NewStudentProfile/NewStudentProfile.tsx   |  330 ++--
 .../Reset-Password/resetPasswordService.ts    |   23 +-
 .../src/Pages/SignUp/SignUp.tsx               |  211 +--
 .../src/Pages/Student-Profile/UserProfile.tsx |  484 ++++--
 .../src/Pages/Student/Student.tsx             |   54 +-
 .../lesson-overlay/lesson-overlay.test.tsx    |  144 +-
 .../lesson-overlay/lesson-overlay.tsx         | 1252 +++++++-------
 react-ystemandchess/src/globals.ts            |    6 +-
 16 files changed, 3060 insertions(+), 1877 deletions(-)
 create mode 100644 react-ystemandchess/src/Pages/Admin/Admin.tsx

diff --git a/middlewareNode/routes/auth.js b/middlewareNode/routes/auth.js
index c66587e3..18537ea2 100644
--- a/middlewareNode/routes/auth.js
+++ b/middlewareNode/routes/auth.js
@@ -73,7 +73,7 @@ router.post(
         function (err, token) {
           if (err) throw err;
           res.json({ token });
-        },
+        }
       );
 
       return jwt; //Return the encrypted jwt
@@ -81,7 +81,7 @@ router.post(
       console.error(error.message);
       res.status(500).send("Server error");
     }
-  },
+  }
 );
 
 module.exports = router;
diff --git a/middlewareNode/routes/users.js b/middlewareNode/routes/users.js
index 91bea764..197163ac 100644
--- a/middlewareNode/routes/users.js
+++ b/middlewareNode/routes/users.js
@@ -2,6 +2,7 @@ const express = require("express");
 const passport = require("passport");
 const router = express.Router();
 const crypto = require("crypto");
+const jwt = require("jsonwebtoken");
 const { check, validationResult } = require("express-validator");
 const users = require("../models/users");
 const {
@@ -9,14 +10,15 @@ const {
 } = require("../template/changePasswordTemplate");
 const { sendMail } = require("../utils/nodemailer");
 const { validator } = require("../utils/middleware");
-const { MongoClient } = require('mongodb');
+const { MongoClient } = require("mongodb");
 const config = require("config");
 
 let cachedClient = null; // cache db client to prevent repeated connections
 
 // get db client
 async function getDb() {
-  if (!cachedClient) { // if not cached, connect
+  if (!cachedClient) {
+    // if not cached, connect
     cachedClient = new MongoClient(config.get("mongoURI"));
     await cachedClient.connect();
   }
@@ -84,7 +86,6 @@ router.post(
       //Set the account created date for the new user
       const currDate = new Date();
 
-
       //Switch statement for functionality depending on role
       if (role === "parent") {
         let studentsArray = JSON.parse(students);
@@ -118,7 +119,7 @@ router.post(
                 timePlayed: 0,
               });
               await newStudent.save();
-            }),
+            })
           );
         }
       }
@@ -138,7 +139,7 @@ router.post(
       console.error(error.message);
       res.status(500).json("Server error");
     }
-  },
+  }
 );
 
 // @route   POST /user/children
@@ -194,7 +195,7 @@ router.post(
       console.error(error.message);
       res.status(500).json("Server error");
     }
-  },
+  }
 );
 // @route POST /user/sendMail
 // @desc sending the mail based on username and email
@@ -247,7 +248,7 @@ const updatePassword = async (body) => {
   const result = await users.findOneAndUpdate(
     { username: body.username, email: body.email },
     { password: body.password },
-    { new: true },
+    { new: true }
   );
   return result;
 };
@@ -255,17 +256,19 @@ const updatePassword = async (body) => {
 // @route GET /user/mentorless/:keyword
 // @desc for getting the mentorless students whose username matches keyword.
 router.get("/mentorless", async (req, res) => {
-  const keyword = req.query.keyword || ''; // get the keyword
+  const keyword = req.query.keyword || ""; // get the keyword
   try {
     const db = await getDb();
     const users = db.collection("users");
 
-    const userList = await users.find({
-      role: 'student',// get student
-      username: { $regex: keyword, $options: 'i' }, // case-insensitive match for username
-      mentorshipUsername: { $ne: "" }
-    }).toArray();;
-    res.json(userList.map(user => user.username)); // return a list of the usernames
+    const userList = await users
+      .find({
+        role: "student", // get student
+        username: { $regex: keyword, $options: "i" }, // case-insensitive match for username
+        mentorshipUsername: { $ne: "" },
+      })
+      .toArray();
+    res.json(userList.map((user) => user.username)); // return a list of the usernames
   } catch (err) {
     res.status(500).json({ error: err.message }); // error
   }
@@ -276,21 +279,28 @@ router.get("/mentorless", async (req, res) => {
 // @desc if user is mentor, update its student username to the mentorship= query
 // @access  Public with jwt Authentication
 router.put(
-  "/updateMentorship", 
+  "/updateMentorship",
   async (req, res, next) => {
-    passport.authenticate("jwt", { session: false }, async (err, user, info) => {
-      if (!user) {
-        return res.status(401).json({ message: "Unauthorized" });
+    passport.authenticate(
+      "jwt",
+      { session: false },
+      async (err, user, info) => {
+        if (!user) {
+          return res.status(401).json({ message: "Unauthorized" });
+        }
+        req.user = user;
+        next();
       }
-      req.user = user;
-      next();
-    })(req, res, next) // authenticate jwt
-  }, 
+    )(req, res, next); // authenticate jwt
+  },
   async (req, res) => {
     // get the student/mentor username
     const mentorship = req.query.mentorship;
-    if (!mentorship) { // mentorship query is required
-      return res.status(400).json({ message: "Missing mentorship username in query" });
+    if (!mentorship) {
+      // mentorship query is required
+      return res
+        .status(400)
+        .json({ message: "Missing mentorship username in query" });
     }
 
     try {
@@ -305,30 +315,37 @@ router.put(
 
       // if mentorship field is not modified
       if (result.modifiedCount === 0) {
-        return res.status(404).json({ message: "User not found or already has that mentorshipUsername" });
+        return res.status(404).json({
+          message: "User not found or already has that mentorshipUsername",
+        });
       }
 
       res.json({ message: "Mentorship updated successfully" });
     } catch (err) {
       res.status(500).json({ error: err.message }); // error
     }
-    }
+  }
 );
 
 // @route GET /user/getMentorship
 // @desc if user is a student, responds with its mentor's object {username, firstName, lastName}
 // @desc if user is a mentor, responds with its student's object {username, firstName, lastName}
 // @access  Public with jwt Authentication
-router.get("/getMentorship",
+router.get(
+  "/getMentorship",
   async (req, res, next) => {
-    passport.authenticate("jwt", { session: false }, async (err, user, info) => {
-      if (!user) {
-        return res.status(401).json({ message: "Unauthorized" });
+    passport.authenticate(
+      "jwt",
+      { session: false },
+      async (err, user, info) => {
+        if (!user) {
+          return res.status(401).json({ message: "Unauthorized" });
+        }
+        req.user = user;
+        next();
       }
-      req.user = user;
-      next();
-    })(req, res, next) // authenticate jwt
-  }, 
+    )(req, res, next); // authenticate jwt
+  },
   async (req, res) => {
     try {
       const db = await getDb();
@@ -356,4 +373,63 @@ router.get("/getMentorship",
   }
 );
 
+router.get("/getStudent", async (req, res) => {
+  const keyword = req.query.keyword || "";
+
+  try {
+    const db = await getDb();
+    const users = db.collection("users");
+
+    const userList = await users
+      .find({
+        role: "student", // get student
+        username: { $regex: keyword, $options: "i" }, // case-insensitive match for username
+      })
+      .toArray();
+
+    res.json(userList.map((user) => user.username)); // return a list of the usernames
+  } catch (err) {
+    res.status(500).json({ error: err.message }); // error
+  }
+});
+
+// verify role
+
+router.post("/verifyRole", async (req, res) => {
+  const { token } = req.body;
+
+  if (!token) {
+    return res.status(400).json({ error: "Missing token" });
+  }
+
+  const decoded = jwt.verify(token.login, config.get("indexKey"));
+
+  const user = await users
+    .findOne({ username: decoded.username })
+    .select("role");
+
+  if (!user) {
+    return res.status(404).json({ error: "User not found" });
+  }
+  console.log(decoded.role, user.role);
+  if (decoded.role === user.role) {
+    return res.json({ verified: true });
+  } else {
+    return res.status(403).json({ error: "Role mismatch", verified: false });
+  }
+});
+
+router.get("/getUser", async (req, res) => {
+  const username = req.query.username || "";
+  try {
+    const user = await users.findOne({ username }).select("-password");
+    if (!user) {
+      return res.status(404).json({ error: "User not found" });
+    }
+    return res.status(200).json(user);
+  } catch (err) {
+    return res.status(401).json({ error: err });
+  }
+});
+
 module.exports = router;
diff --git a/react-ystemandchess/src/App.tsx b/react-ystemandchess/src/App.tsx
index 4299327d..f584361e 100644
--- a/react-ystemandchess/src/App.tsx
+++ b/react-ystemandchess/src/App.tsx
@@ -1,15 +1,15 @@
 import "./App.css";
 import React, { useEffect } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
-import { environment } from './environments/environment';
-import { useCookies } from 'react-cookie';
-import { SetPermissionLevel } from './globals'; 
+import { environment } from "./environments/environment";
+import { useCookies } from "react-cookie";
+import { SetPermissionLevel } from "./globals";
 import NavBar from "./NavBar/NavBar";
 import Footer from "./Footer/Footer";
 import AppRoutes from "./AppRoutes";
 
 function App() {
-  const [cookies] = useCookies(['login']); // get login info from cookie
+  const [cookies] = useCookies(["login"]); // get login info from cookie
   let username = null;
   let eventID = null;
   let startTime = null;
@@ -19,18 +19,18 @@ function App() {
     const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
 
     // do nothing if the user is not logged in
-    if(uInfo.error) return;
+    if (uInfo.error) return;
     username = uInfo.username; // else record username
 
     // start recording user's time spent browsing the website
     const response = await fetch(
-      `${environment.urls.middlewareURL}/timeTracking/start?username=${username}&eventType=website`, 
+      `${environment.urls.middlewareURL}/timeTracking/start?username=${username}&eventType=website`,
       {
-          method: 'POST',
-          headers: { 'Authorization': `Bearer ${cookies.login}` }
+        method: "POST",
+        headers: { Authorization: `Bearer ${cookies.login}` },
       }
     );
-    if(response.status != 200) console.log(response) // error handling
+    if (response.status != 200) console.log(response); // error handling
 
     // if data is fetched, record for later updates
     const data = await response.json();
@@ -41,22 +41,22 @@ function App() {
   // handler called when user exist the website, complete recording time
   const handleUnload = async () => {
     try {
-      const startDate = new Date(startTime)
+      const startDate = new Date(startTime);
       const endDate = new Date();
       const diffInMs = endDate.getTime() - startDate.getTime(); // time elapsed in milliseconds
       const diffInSeconds = Math.floor(diffInMs / 1000); // time elapsed in seconds
 
       // update the time users spent browsing website
       const response = await fetch(
-        `${environment.urls.middlewareURL}/timeTracking/update?username=${username}&eventType=website&eventId=${eventID}&totalTime=${diffInSeconds}`, 
+        `${environment.urls.middlewareURL}/timeTracking/update?username=${username}&eventType=website&eventId=${eventID}&totalTime=${diffInSeconds}`,
         {
-            method: 'PUT',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
+          method: "PUT",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
       );
-      if(response.status != 200) console.log(response) // error handling
+      if (response.status != 200) console.log(response); // error handling
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
   };
 
@@ -64,12 +64,12 @@ function App() {
     try {
       startRecording(); // start recording
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
 
-    window.addEventListener('beforeunload', handleUnload); // end recording when unloading
+    window.addEventListener("beforeunload", handleUnload); // end recording when unloading
     return () => {
-      window.removeEventListener('beforeunload', handleUnload);
+      window.removeEventListener("beforeunload", handleUnload);
     };
   }, []);
 
diff --git a/react-ystemandchess/src/AppRoutes.tsx b/react-ystemandchess/src/AppRoutes.tsx
index af2b4af9..da1f2047 100644
--- a/react-ystemandchess/src/AppRoutes.tsx
+++ b/react-ystemandchess/src/AppRoutes.tsx
@@ -1,61 +1,63 @@
 // Imports for React Components/Pages
-import React from 'react';
-import { Route, Router, Routes } from 'react-router-dom';
-import Home from './Pages/Home/Home';
-import Programs from './Pages/Programs/Programs';
-import CSBenefitPage from './Pages/About-Us/Benefit-of-CS/CSBenefitPage';
-import ChessBenefitPage from './Pages/About-Us/Benefit-of-Chess/ChessBenefitPage';
-import MathTutBenefitPage from './Pages/About-Us/Benefit-of-Math-tut/MathTutBenefitPage';
-import MentoringBenefitPage from './Pages/About-Us/Benefit-of-Mentoring/MentoringBenefitPage';
-import Lessons from './Pages/Lessons/Lessons';
-import Login from './Pages/Login/Login';
-import SignUp from './Pages/SignUp/SignUp';
-import Mission from './Pages/About-Us/Mission/Mission';
-import SponsorsPartners from './Pages/About-Us/SponsorsPartners/SponsorsPartners';
-import Board from './Pages/About-Us/Board/Board';
-import Mentor from './Pages/Mentor/Mentor';
-import Financial from './Pages/About-Us/Financial/Financial';
-import StudentInventory from './Pages/Student-Inventory/StudentInventory';
-import ResetPassword from './Pages/Reset-Password/reset-password';
-import SetPassword from './Pages/Set-Password/set-password';
-import Student from './Pages/Student/Student';
+import React from "react";
+import { Route, Router, Routes } from "react-router-dom";
+import Home from "./Pages/Home/Home";
+import Programs from "./Pages/Programs/Programs";
+import CSBenefitPage from "./Pages/About-Us/Benefit-of-CS/CSBenefitPage";
+import ChessBenefitPage from "./Pages/About-Us/Benefit-of-Chess/ChessBenefitPage";
+import MathTutBenefitPage from "./Pages/About-Us/Benefit-of-Math-tut/MathTutBenefitPage";
+import MentoringBenefitPage from "./Pages/About-Us/Benefit-of-Mentoring/MentoringBenefitPage";
+import Lessons from "./Pages/Lessons/Lessons";
+import Login from "./Pages/Login/Login";
+import SignUp from "./Pages/SignUp/SignUp";
+import Mission from "./Pages/About-Us/Mission/Mission";
+import SponsorsPartners from "./Pages/About-Us/SponsorsPartners/SponsorsPartners";
+import Board from "./Pages/About-Us/Board/Board";
+import Mentor from "./Pages/Mentor/Mentor";
+import Financial from "./Pages/About-Us/Financial/Financial";
+import StudentInventory from "./Pages/Student-Inventory/StudentInventory";
+import ResetPassword from "./Pages/Reset-Password/reset-password";
+import SetPassword from "./Pages/Set-Password/set-password";
+import Student from "./Pages/Student/Student";
 // import MentorProfile from './Pages/Mentor-Profile/MentorProfile';
-import NewMentorProfile from './Pages/NewMentorProfile/NewMentorProfile';
-import NewStudentProfile from './Pages/NewStudentProfile/NewStudentProfile';
-import AboutUs from './Pages/About-Us/AboutUs/AboutUs';
-import LessonSelection from "./Pages/LessonsSelection/LessonsSelection"
+import NewMentorProfile from "./Pages/NewMentorProfile/NewMentorProfile";
+import NewStudentProfile from "./Pages/NewStudentProfile/NewStudentProfile";
+import AboutUs from "./Pages/About-Us/AboutUs/AboutUs";
+import LessonSelection from "./Pages/LessonsSelection/LessonsSelection";
 import LessonOverlay from "./Pages/piece-lessons/lesson-overlay/lesson-overlay";
 
 // Variables and Mutable Data
-import userPortraitImg from './images/user-portrait-placeholder.svg';
-const userName = 'Nimesh Patel';
+import userPortraitImg from "./images/user-portrait-placeholder.svg";
+import Admin from "./Pages/Admin/Admin";
+const userName = "Nimesh Patel";
 
 const AppRoutes = () => {
   // All components must be wrapped with the '<Route>' tag
   return (
     <Routes>
-      <Route path='/' element={<Home />} />
-      <Route path='/programs' element={<Programs />} />
-      <Route path='/benefit-of-computer-science' element={<CSBenefitPage />} />
-      <Route path='/benefit-of-chess' element={<ChessBenefitPage />} />
+      <Route path="/" element={<Home />} />
+      <Route path="/programs" element={<Programs />} />
+      <Route path="/benefit-of-computer-science" element={<CSBenefitPage />} />
+      <Route path="/benefit-of-chess" element={<ChessBenefitPage />} />
       <Route
-        path='/benefit-of-math-tutoring'
+        path="/benefit-of-math-tutoring"
         element={<MathTutBenefitPage />}
       />
-      <Route path='/benefit-of-mentoring' element={<MentoringBenefitPage />} />
-      <Route path='/login' element={<Login />} />
-      <Route path='/signup' element={<SignUp />} />
-      <Route path='/mission' element={<Mission />} />
-      <Route path='/mentor' element={<Mentor />} />
-      <Route path='/financial' element={<Financial />} />
-      <Route path='/lessons-selection' element={<LessonSelection />} />
-      <Route path='/lessons' element={<LessonOverlay />} />
-      <Route path='/sponsors&partners' element={<SponsorsPartners />} />
-      <Route path='/board' element={<Board />} />
-      <Route path='/reset-password' element={<ResetPassword />} />
-      <Route path='/set-password' element={<SetPassword />} />
+      <Route path="/benefit-of-mentoring" element={<MentoringBenefitPage />} />
+      <Route path="/login" element={<Login />} />
+      <Route path="/signup" element={<SignUp />} />
+      <Route path="/mission" element={<Mission />} />
+      <Route path="/mentor" element={<Mentor />} />
+      <Route path="/financial" element={<Financial />} />
+      <Route path="/lessons-selection" element={<LessonSelection />} />
+      <Route path="/lessons" element={<LessonOverlay />} />
+      <Route path="/sponsors&partners" element={<SponsorsPartners />} />
+      <Route path="/board" element={<Board />} />
+      <Route path="/admin" element={<Admin />} />
+      <Route path="/reset-password" element={<ResetPassword />} />
+      <Route path="/set-password" element={<SetPassword />} />
       <Route
-        path='/student-inventory'
+        path="/student-inventory"
         element={
           <StudentInventory
             userName={userName}
@@ -64,13 +66,16 @@ const AppRoutes = () => {
         }
       />
 
-      <Route path='/student' element={<Student />} />
-      <Route path='/mentor-profile' element={<NewMentorProfile 
-        userPortraitSrc={userPortraitImg} 
-        />} 
+      <Route path="/student" element={<Student />} />
+      <Route
+        path="/mentor-profile"
+        element={<NewMentorProfile userPortraitSrc={userPortraitImg} />}
+      />
+      <Route
+        path="/student-profile"
+        element={<NewStudentProfile userPortraitSrc={userPortraitImg} />}
       />
-      <Route path='/student-profile' element={<NewStudentProfile userPortraitSrc={userPortraitImg}/>} />
-      <Route path='/about-us' element={<AboutUs />} />
+      <Route path="/about-us" element={<AboutUs />} />
 
       <Route path="/learnings" element={<Lessons />} />
     </Routes>
diff --git a/react-ystemandchess/src/Pages/Admin/Admin.tsx b/react-ystemandchess/src/Pages/Admin/Admin.tsx
new file mode 100644
index 00000000..d671587b
--- /dev/null
+++ b/react-ystemandchess/src/Pages/Admin/Admin.tsx
@@ -0,0 +1,188 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCookies } from "react-cookie";
+import { environment } from "../../environments/environment";
+const Admin = () => {
+  const navigate = useNavigate();
+  // verify admin status
+  const [cookies, setCookie] = useCookies(["login"]);
+
+  // search input
+  const [searchInput, setSearchInput] = useState<string>();
+
+  const [error, setError] = useState<any>();
+
+  // students
+  const [studentNames, setStudentNames] = useState<[string] | undefined>();
+
+  // can't find the User type in global.d.ts
+  const [students, setStudents] = useState<any>([]);
+  // temporary
+  const [verified, setVerified] = useState<boolean>(false);
+
+  //.
+  //.
+  useEffect(() => {
+    // server url
+    let url = `${environment.urls.middlewareURL}/user/verifyRole`;
+    const verifyAdmin = async () => {
+      try {
+        const token = cookies; // Read JWT from cookie
+        if (!token) throw new Error("No token");
+
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            token,
+            claimedRole: "admin",
+          }),
+        });
+        const data = await response.json();
+        if (response.ok) {
+          setVerified(data.verified);
+        } else {
+          throw new Error(data.error || "Role verification failed");
+        }
+
+        // User is verified as admin
+      } catch (err) {
+        console.error("Access denied:", err.message);
+        navigate("/");
+      }
+    };
+    verifyAdmin();
+  }, []);
+
+  // search
+  const handleStudentSearch = async () => {
+    if (!verified) {
+      navigate("/");
+      return;
+    }
+    setStudentNames(undefined);
+    setStudents([]);
+    let url = `${environment.urls.middlewareURL}/user/getStudent?keyword=${searchInput}`;
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      // Throws an error if the response status is failure.
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log(data, "--->");
+      setStudentNames(data);
+    } catch {
+      console.error("Search error:", error);
+      // Sets a general error message for signup failure.
+      setError("Search failed");
+    }
+  };
+
+  // get basic info about found students
+  useEffect(() => {
+    if (!studentNames) {
+      return;
+    }
+    for (let i = 0; i < studentNames.length; i++) {
+      let url = `${environment.urls.middlewareURL}/user/getUser?username=${studentNames[i]}`;
+      try {
+        const getUser = async () => {
+          const response = await fetch(url, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+          const data = await response.json();
+          setStudents((prevStudent) => [...prevStudent, data]);
+        };
+        getUser();
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }, [studentNames]);
+  return (
+    <div>
+      <form
+        action="submit"
+        className="flex items-center p-4 w-full border-b border-gray-300"
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleStudentSearch();
+        }}
+      >
+        <input
+          className="border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 w-[100%]"
+          type="text"
+          name="username"
+          // value={searchInput}
+          onChange={(e) => {
+            setSearchInput(e.target.value);
+          }}
+          placeholder="Type student username to search"
+        />
+        <button
+          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
+          type="submit"
+        >
+          Search
+        </button>
+      </form>
+      {/* students searched */}
+      <div>
+        <div className="p-6 bg-gray-50 min-h-screen flex justify-center">
+          <div className="w-full max-w-2xl">
+            <div className="space-y-4">
+              {students.map((student) => (
+                <div
+                  key={student._id}
+                  className="bg-white p-4 border border-gray-300 rounded-lg shadow-sm cursor-pointer hover:bg-gray-100 transition duration-200"
+                  onClick={() => {
+                    // to the student's profile
+                  }}
+                >
+                  <div className="flex justify-between items-center mb-2">
+                    <h2 className="text-lg font-medium text-gray-800">
+                      {student.firstName} {student.lastName}{" "}
+                      <span className="text-sm text-gray-500">
+                        ({student.username})
+                      </span>
+                    </h2>
+                    <span className="text-sm text-gray-500">
+                      Role: {student.role}
+                    </span>
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    Email: {student.email}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    Account Created: {student.accountCreatedAt}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    Lessons Completed: {student.lessonsCompleted.length}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    Time Played: {student.timePlayed} mins
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Admin;
diff --git a/react-ystemandchess/src/Pages/Login/Login.tsx b/react-ystemandchess/src/Pages/Login/Login.tsx
index fd713488..814bca07 100644
--- a/react-ystemandchess/src/Pages/Login/Login.tsx
+++ b/react-ystemandchess/src/Pages/Login/Login.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
 // import { Link } from 'react-router-dom';
-import './Login.scss';
-import { useState } from 'react';
-import { environment } from '../../environments/environment';
-import { useCookies } from 'react-cookie';
+import "./Login.scss";
+import { useState } from "react";
+import { environment } from "../../environments/environment";
+import { useCookies } from "react-cookie";
 
 const Login = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [cookies, setCookie] = useCookies(['login']);
-  const [loginError, setLoginError] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [cookies, setCookie] = useCookies(["login"]);
+  const [loginError, setLoginError] = useState("");
   const [usernameFlag, setUsernameFlag] = useState(false);
   const [passwordFlag, setPasswordFlag] = useState(false);
 
@@ -25,16 +25,16 @@ const Login = () => {
     if (password.length < 8) {
       setPasswordFlag(false);
     } else {
-      console.log('verifying pw')
+      console.log("verifying pw");
       setPasswordFlag(true);
     }
   };
 
   const errorMessages = () => {
     if (passwordFlag === false || usernameFlag === false) {
-      setLoginError('Invalid username or password');
+      setLoginError("Invalid username or password");
     } else {
-      setLoginError('');
+      setLoginError("");
     }
   };
 
@@ -42,10 +42,10 @@ const Login = () => {
     e.preventDefault();
     // errorMessages();
     if (password.length < 8 || username.length <= 2) {
-      setLoginError('Invalid username or password');
+      setLoginError("Invalid username or password");
       return;
     } else {
-      setLoginError('');
+      setLoginError("");
     }
 
     let url = `${environment.urls.middlewareURL}/auth/login?username=${username}&password=${password}`;
@@ -63,56 +63,60 @@ const Login = () => {
           }
         }
       };
-      xmlHttp.open('POST', theUrl, true);
+      xmlHttp.open("POST", theUrl, true);
       xmlHttp.send(null);
     };
 
-    httpGetAsync(url, (response: any) => {
-      if (response === 'The username or password is incorrect.') {
-        setLoginError('The username or password is incorrect.');
-      } else {
-        const expires = new Date();
-        expires.setDate(expires.getDate() + 1);
-        setCookie('login', JSON.parse(response).token, { expires });
+    httpGetAsync(
+      url,
+      (response: any) => {
+        if (response === "The username or password is incorrect.") {
+          setLoginError("The username or password is incorrect.");
+        } else {
+          const expires = new Date();
+          expires.setDate(expires.getDate() + 1);
+          setCookie("login", JSON.parse(response).token, { expires });
 
-        let payload = JSON.parse(atob(response.split('.')[1]));
-        console.log(payload)
+          let payload = JSON.parse(atob(response.split(".")[1]));
+          console.log(payload);
 
-        switch (payload['role']) {
-          case 'student':
-            window.location.pathname = '/student-profile';
-            console.log(payload['role'])
-            break;
-          case 'parent':
-            window.location.pathname = '/parent';
-            break;
-          case 'mentor':
-            window.location.pathname = '/mentor-profile';
-            break;
-          case 'admin':
-            window.location.pathname = '/admin';
-            break;
-          default:
-            window.location.pathname = '';
+          switch (payload["role"]) {
+            case "student":
+              window.location.pathname = "/student-profile";
+              console.log(payload["role"]);
+              break;
+            case "parent":
+              window.location.pathname = "/parent";
+              break;
+            case "mentor":
+              window.location.pathname = "/mentor-profile";
+              break;
+            case "admin":
+              window.location.pathname = "/admin";
+              break;
+            default:
+              window.location.pathname = "";
+          }
         }
+      },
+      () => {
+        setLoginError("The username or password is incorrect.");
       }
-    }, () => {
-      setLoginError('The username or password is incorrect.');
-    });
+    );
   };
 
   return (
     <>
-      <h1 id='login-h1'>Login</h1>
-      {loginError && <h3 id='loginError-h3'>{loginError}</h3>}
+      <h1 id="login-h1">Login</h1>
+      {loginError && <h3 id="loginError-h3">{loginError}</h3>}
 
-      <form className='login-input-container' onSubmit={submitLogin}>
-        <div className='login-input-field'>
+      <form className="login-input-container" onSubmit={submitLogin}>
+        <div className="login-input-field">
           <input
-            type='text'
-            name='username'
-            id='username'
-            placeholder='Username'
+            type="text"
+            name="username"
+            id="username"
+            placeholder="Username"
             value={username}
             onChange={(e) => {
               setUsername(e.target.value);
@@ -121,12 +125,12 @@ const Login = () => {
             required
           />
         </div>
-        <div className='login-input-field'>
+        <div className="login-input-field">
           <input
-            type='password'
-            name='password'
-            placeholder='Password'
-            id='password'
+            type="password"
+            name="password"
+            placeholder="Password"
+            id="password"
             value={password}
             onChange={(e) => {
               setPassword(e.target.value);
@@ -135,16 +139,16 @@ const Login = () => {
             required
           />
         </div>
-        <button id='button-login' type='submit'>
+        <button id="button-login" type="submit">
           Enter
         </button>
       </form>
 
-      <div className='additional-options'>
-        <a href='/signup' className='option'>
+      <div className="additional-options">
+        <a href="/signup" className="option">
           Create a new account
         </a>
-        <a href='/reset-password' className='option'>
+        <a href="/reset-password" className="option">
           Forgot password?
         </a>
       </div>
diff --git a/react-ystemandchess/src/Pages/Mentor-Profile/MentorProfile.tsx b/react-ystemandchess/src/Pages/Mentor-Profile/MentorProfile.tsx
index feda8468..a7b40e34 100644
--- a/react-ystemandchess/src/Pages/Mentor-Profile/MentorProfile.tsx
+++ b/react-ystemandchess/src/Pages/Mentor-Profile/MentorProfile.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { useCookies } from 'react-cookie';
-import './MentorProfile.scss'; // Import the SCSS file for styles
-import { environment } from '../../environments/environment';
-import ViewSDKClient from '../../services/view-sdk.service'; // Adjust the path as necessary
-import { SetPermissionLevel } from '../../globals'; // Adjust the path as necessary
+import React, { useState, useEffect } from "react";
+import { useCookies } from "react-cookie";
+import "./MentorProfile.scss"; // Import the SCSS file for styles
+import { environment } from "../../environments/environment";
+import ViewSDKClient from "../../services/view-sdk.service"; // Adjust the path as necessary
+import { SetPermissionLevel } from "../../globals"; // Adjust the path as necessary
 
 type PdfItem = {
   id: string;
@@ -11,541 +11,972 @@ type PdfItem = {
   FilePath: string;
 };
 
-type Record  = {
+type Record = {
   sid: string;
   meetingId: string;
   meetingStartTime: string;
   [key: string]: any; // This allows any other fields to be added with any type
-}
-
+};
 
 const MentorProfile = () => {
-    const [username, setUsername] = useState('');
-    const [firstName, setFirstName] = useState('');
-    const [lastName, setLastName] = useState('');
-    const [accountCreatedAt, setAccountCreatedAt] = useState('');
-    const [role, setRole] = useState('');
-    const [logged, setLogged] = useState(false);
-    const [recordingList, setRecordingList] = useState([]);
-    const [signedURL, setSignedURL] = useState('');
-    const [showData, setShowData] = useState(false);
-    const [categoryList, setCategoryList] = useState([
-      { id: '1', name: 'Mantra' },
-      { id: '2', name: 'Exercise' },
-      { id: '3', name: 'One Personal Development Lesson' },
-      { id: '4', name: 'Chess Lesson' },
-      { id: '5', name: 'Game' },
-      { id: '6', name: 'Puzzles' },
-    ]);
-    const [sharedPdfList, setSharedPdfList] = useState<PdfItem[]>([]);
-    const [categoryName, setCategoryName] = useState('');
-    const [showPdfListView, setShowPdfListView] = useState(false);
-    const [cookies] = useCookies(['login']);
-  
-    useEffect(() => {
-      ViewSDKClient.ready().then(() => {
-        ViewSDKClient.previewFile(
-          '../../../assets/pdf/mentor/Y_STEM_Chess_Training_Lessons.pdf',
-          'pdf-div',
-          {
-            embedMode: 'SIZED_CONTAINER',
-            dockPageControls: false,
-          }
-        );
-      });
-  
-      const fetchUserInfo = async () => {
-        const uInfo = await SetPermissionLevel(cookies);
-        setUsername(uInfo.username);
-        setFirstName(uInfo.firstName);
-        setLastName(uInfo.lastName);
-        setAccountCreatedAt(uInfo.accountCreatedAt);
-        setRole(uInfo.role);
-  
-        // Wait for the DOM to be fully updated before accessing elements
-        setTimeout(() => {
-          const defaultOpen = document.getElementById('defaultOpen');
-          const student3 = document.getElementById('student3');
-          const defaultOpen2 = document.getElementById('defaultOpen2');
-          const defaultOpenStudent = document.getElementById('defaultOpenStudent');
-  
-          if (defaultOpen) defaultOpen.click();
-          if (student3) student3.click();
-          if (defaultOpen2) defaultOpen2.click();
-          if (defaultOpenStudent) defaultOpenStudent.click();
-        }, 0);
-  
-        if (!uInfo.error) {
-          setLogged(true);
-        }
-  
-        if (uInfo.role === 'mentor') {
-          fetchRecordings();
+  const [username, setUsername] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [accountCreatedAt, setAccountCreatedAt] = useState("");
+  const [role, setRole] = useState("");
+  const [logged, setLogged] = useState(false);
+  const [recordingList, setRecordingList] = useState([]);
+  const [signedURL, setSignedURL] = useState("");
+  const [showData, setShowData] = useState(false);
+  const [categoryList, setCategoryList] = useState([
+    { id: "1", name: "Mantra" },
+    { id: "2", name: "Exercise" },
+    { id: "3", name: "One Personal Development Lesson" },
+    { id: "4", name: "Chess Lesson" },
+    { id: "5", name: "Game" },
+    { id: "6", name: "Puzzles" },
+  ]);
+  const [sharedPdfList, setSharedPdfList] = useState<PdfItem[]>([]);
+  const [categoryName, setCategoryName] = useState("");
+  const [showPdfListView, setShowPdfListView] = useState(false);
+  const [cookies] = useCookies(["login"]);
+
+  useEffect(() => {
+    ViewSDKClient.ready().then(() => {
+      ViewSDKClient.previewFile(
+        "../../../assets/pdf/mentor/Y_STEM_Chess_Training_Lessons.pdf",
+        "pdf-div",
+        {
+          embedMode: "SIZED_CONTAINER",
+          dockPageControls: false,
         }
-      };
-  
-      fetchUserInfo();
-    }, []);
-  
-    const fetchRecordings = () => {
-      const url = `${environment.urls.middlewareURL}/meetings/usersRecordings`;
-      fetch(url, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${cookies.login}`,
-        },
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          setRecordingList(data);
-        });
-    };
-  
-    const openTab = (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>, tabName: string, className: string) => {
-      const tabcontent = document.getElementsByClassName(className);
-      for (let i = 0; i < tabcontent.length; i++) {
-        const element = tabcontent[i] as HTMLElement;
-        element.style.display = 'none';
-      }
-      const tablinks = document.getElementsByClassName('tablinks');
-      for (let i = 0; i < tablinks.length; i++) {
-        tablinks[i].className = tablinks[i].className.replace(' active', '');
+      );
+    });
+
+    const fetchUserInfo = async () => {
+      const uInfo = await SetPermissionLevel(cookies);
+      setUsername(uInfo.username);
+      setFirstName(uInfo.firstName);
+      setLastName(uInfo.lastName);
+      setAccountCreatedAt(uInfo.accountCreatedAt);
+      setRole(uInfo.role);
+
+      // Wait for the DOM to be fully updated before accessing elements
+      setTimeout(() => {
+        const defaultOpen = document.getElementById("defaultOpen");
+        const student3 = document.getElementById("student3");
+        const defaultOpen2 = document.getElementById("defaultOpen2");
+        const defaultOpenStudent =
+          document.getElementById("defaultOpenStudent");
+
+        if (defaultOpen) defaultOpen.click();
+        if (student3) student3.click();
+        if (defaultOpen2) defaultOpen2.click();
+        if (defaultOpenStudent) defaultOpenStudent.click();
+      }, 0);
+
+      if (!uInfo.error) {
+        setLogged(true);
       }
-      document.getElementById(tabName)!.style.display = 'block';
-      evt.currentTarget.className += ' active';
-    };
-  
-    const showSharedSlideShowPdfList = (catId: any, catName: React.SetStateAction<string>) => {
-      setShowPdfListView(true);
-      setCategoryName(catName);
-  
-      let list = [];
-      switch (catId) {
-        case '1':
-          list = [
-            { id: '1', FileName: 'Mantra 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
-        case '2':
-          list = [
-            { id: '1', FileName: 'Exercise 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
-        case '3':
-          list = [
-            { id: '1', FileName: 'One Personal Development Lesson 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
-        case '4':
-          list = [
-            { id: '1', FileName: 'Chess Lesson 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
-        case '5':
-          list = [
-            { id: '1', FileName: 'Game 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
-        case '6':
-          list = [
-            { id: '1', FileName: 'Puzzles 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
-        default:
-          list = [
-            { id: '1', FileName: 'Demo 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-            // Add more files as necessary
-          ];
-          break;
+
+      if (uInfo.role === "mentor") {
+        fetchRecordings();
       }
-  
-      setSharedPdfList(list);
-    };
-  
-    const getPresignURL = (sid: any, meetingId: any) => {
-      const filename = `${sid}_${meetingId}_0.mp4`;
-      const url = `${environment.urls.middlewareURL}/meetings/singleRecording?filename=${filename}`;
-      fetch(url, {
-        method: 'GET',
-        headers: {
-          'Authorization': `Bearer ${cookies.login}`,
-        },
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          setSignedURL(data);
-          if (signedURL !== '') {
-            window.open(signedURL);
-          }
-        });
     };
 
-    return (
-        <div className="userProfileDiv">
-          <header>
-            <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
-            <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
-          </header>
-          <div className="container">
-            <div className="myDiv text-center mb-4">
-              <img className="user-img" src="../../../assets/images/mentor-profile/user.PNG" alt="User" />
-              <h2>Hello, {firstName} {lastName}!</h2>
-            </div>
+    fetchUserInfo();
+  }, []);
+
+  const fetchRecordings = () => {
+    const url = `${environment.urls.middlewareURL}/meetings/usersRecordings`;
+    fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${cookies.login}`,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setRecordingList(data);
+      });
+  };
+
+  const openTab = (
+    evt: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    tabName: string,
+    className: string
+  ) => {
+    const tabcontent = document.getElementsByClassName(className);
+    for (let i = 0; i < tabcontent.length; i++) {
+      const element = tabcontent[i] as HTMLElement;
+      element.style.display = "none";
+    }
+    const tablinks = document.getElementsByClassName("tablinks");
+    for (let i = 0; i < tablinks.length; i++) {
+      tablinks[i].className = tablinks[i].className.replace(" active", "");
+    }
+    document.getElementById(tabName)!.style.display = "block";
+    evt.currentTarget.className += " active";
+  };
+
+  const showSharedSlideShowPdfList = (
+    catId: any,
+    catName: React.SetStateAction<string>
+  ) => {
+    setShowPdfListView(true);
+    setCategoryName(catName);
+
+    let list = [];
+    switch (catId) {
+      case "1":
+        list = [
+          {
+            id: "1",
+            FileName: "Mantra 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+      case "2":
+        list = [
+          {
+            id: "1",
+            FileName: "Exercise 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+      case "3":
+        list = [
+          {
+            id: "1",
+            FileName: "One Personal Development Lesson 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+      case "4":
+        list = [
+          {
+            id: "1",
+            FileName: "Chess Lesson 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+      case "5":
+        list = [
+          {
+            id: "1",
+            FileName: "Game 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+      case "6":
+        list = [
+          {
+            id: "1",
+            FileName: "Puzzles 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+      default:
+        list = [
+          {
+            id: "1",
+            FileName: "Demo 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          // Add more files as necessary
+        ];
+        break;
+    }
+
+    setSharedPdfList(list);
+  };
+
+  const getPresignURL = (sid: any, meetingId: any) => {
+    const filename = `${sid}_${meetingId}_0.mp4`;
+    const url = `${environment.urls.middlewareURL}/meetings/singleRecording?filename=${filename}`;
+    fetch(url, {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${cookies.login}`,
+      },
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setSignedURL(data);
+        if (signedURL !== "") {
+          window.open(signedURL);
+        }
+      });
+  };
+
+  return (
+    <div className="userProfileDiv">
+      <header>
+        <link
+          href="https://fonts.googleapis.com/css?family=Lato"
+          rel="stylesheet"
+        />
+        <link
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+          rel="stylesheet"
+        />
+      </header>
+      <div className="container">
+        <div className="myDiv text-center mb-4">
+          <img
+            className="user-img"
+            src="../../../assets/images/mentor-profile/user.PNG"
+            alt="User"
+          />
+          <h2>
+            Hello, {firstName} {lastName}!
+          </h2>
+        </div>
+      </div>
+
+      <div className="container">
+        <div className="row mentor-section">
+          <div className="student-tab">
+            <button
+              className="tablinks tablinks1"
+              onClick={(e) => openTab(e, "Studentname1", "mainTabcontent")}
+              id="defaultOpenStudent"
+            >
+              Student Name 1
+            </button>
+            <button
+              className="tablinks tablinks2"
+              onClick={(e) => openTab(e, "Studentname2", "mainTabcontent")}
+            >
+              Student Name 2
+            </button>
+            <button
+              className="tablinks tablinks3"
+              onClick={(e) => openTab(e, "Studentname3", "mainTabcontent")}
+            >
+              Student Name 3
+            </button>
           </div>
-      
-          <div className="container">
-            <div className="row mentor-section">
-              <div className="student-tab">
-                <button className="tablinks tablinks1" onClick={(e) => openTab(e, 'Studentname1', 'mainTabcontent')} id="defaultOpenStudent">Student Name 1</button>
-                <button className="tablinks tablinks2" onClick={(e) => openTab(e, 'Studentname2', 'mainTabcontent')}>Student Name 2</button>
-                <button className="tablinks tablinks3" onClick={(e) => openTab(e, 'Studentname3', 'mainTabcontent')}>Student Name 3</button>
-              </div>
-      
-              <div id="Studentname1" className="mainTabcontent">
-                <div className="row mb-3">
-                  <div className="col-7">
-                    <div className="progressInfo">
-                      <img src="../../../assets/images/mentor-profile/student-graph.PNG" alt="Student Graph" />
-                    </div>
-                  </div>
-                  <div className="col-5">
-                    <div className="memberInfo">
-                      <h5 style={{ marginLeft: '-35px' }}><strong>Time Spent:</strong></h5>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Website: <strong>45 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Lesson: <strong>10 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Puzzle: <strong>5 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Playing: <strong>15 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Mentoring: <strong>15 minutes</strong></p>
-                    </div>
-                  </div>
-                </div>
-      
-                <div className="tab">
-                  <button className="tablinks tab1" onClick={(e) => openTab(e, 'Activity', 'tabcontent')} id="defaultOpen">
-                    <img src="../../../assets/images/student/activity_tab.png" className="tab-image" alt="Activity Tab" />
-                  </button>
-                  <button className="tablinks tab2" onClick={(e) => openTab(e, 'Mentor_Session', 'tabcontent')}>
-                    <img src="../../../assets/images/student/mento_tab.PNG" className="tab-image2" alt="Mentor Session Tab" />
-                  </button>
-                  <button className="tablinks tab2" onClick={(e) => openTab(e, 'Professional_Development', 'tabcontent')}>
-                    <img src="../../../assets/images/student/prodev_tab.PNG" className="tab-image2" alt="Professional Development Tab" />
-                  </button>
-                  <button className="tablinks tab2" onClick={(e) => openTab(e, 'Chess_Lession', 'tabcontent')}>
-                    <img src="../../../assets/images/student/chess_tab.PNG" className="tab-image2" alt="Chess Lesson Tab" />
-                  </button>
-                  <button className="tablinks tab2" onClick={(e) => openTab(e, 'Games', 'tabcontent')}>
-                    <img src="../../../assets/images/student/games_tab.PNG" className="tab-image2" alt="Games Tab" />
-                  </button>
-                  <button className="tablinks tab2" onClick={(e) => openTab(e, 'Puzzles', 'tabcontent')}>
-                    <img src="../../../assets/images/student/puzzles_tab.PNG" className="tab-image2" alt="Puzzles Tab" />
-                  </button>
-                  <button className="tablinks tab2" onClick={(e) => openTab(e, 'computer', 'tabcontent')}>
-                    <img src="../../../assets/images/student/play_tab.PNG" className="tab-image2" alt="Computer Tab" />
-                  </button>
-                  <button className="tablinks tab3" onClick={(e) => openTab(e, 'Recordings', 'tabcontent')}>
-                    <img src="../../../assets/images/student/recordings_tab.PNG" className="tab-image3" alt="Recordings Tab" />
-                  </button>
-                </div>
-      
-                <div id="Activity" className="tabcontent">
-                  <div className="rightbox">
-                    <div className="rb-container">
-                      <ul className="rb">
-                        <li className="rb-item">
-                          <div className="timestamp">23rd July 2022<br />7:00 PM</div>
-                          <div className="item-title">Solved 2 tactical puzzles</div>
-                        </li>
-                        <li className="rb-item">
-                          <div className="timestamp">19th July 2022<br />3:00 PM</div>
-                          <div className="item-title">Practiced 7 positions on <a href="/learnings">Piece Checkmates I</a></div>
-                        </li>
-                        <li className="rb-item">
-                          <div className="timestamp">17st July 2022<br />7:00 PM</div>
-                          <div className="item-title">Signed up to <a target="_blank" rel="noopener noreferrer" href="http://ystemandchess.com/">ystemandchess.com</a></div>
-                        </li>
-                      </ul>
-                    </div>
-                  </div>
+
+          <div id="Studentname1" className="mainTabcontent">
+            <div className="row mb-3">
+              <div className="col-7">
+                <div className="progressInfo">
+                  <img
+                    src="../../../assets/images/mentor-profile/student-graph.PNG"
+                    alt="Student Graph"
+                  />
                 </div>
-      
-                <div id="Mentor_Session" className="tabcontent">
-                  <h3>Mentor Session</h3>
-                  <p>The project started in 2018 when someone needed something.</p>
-
-                  <iframe
-                    src="http://127.0.0.1:5500/chessClient/parent.html" // URL of chess parent container
-                    title="My Iframe"
-                    width="600"
-                    height="400"
-                    frameBorder="0"
-                    allowFullScreen
-                  ></iframe>
+              </div>
+              <div className="col-5">
+                <div className="memberInfo">
+                  <h5 style={{ marginLeft: "-35px" }}>
+                    <strong>Time Spent:</strong>
+                  </h5>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Website:{" "}
+                    <strong>45 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Lesson:{" "}
+                    <strong>10 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Puzzle:{" "}
+                    <strong>5 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Playing:{" "}
+                    <strong>15 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Mentoring:{" "}
+                    <strong>15 minutes</strong>
+                  </p>
                 </div>
-      
-                <div id="Professional_Development" className="tabcontent">
-                  <h3>Professional Development</h3>
+              </div>
+            </div>
+
+            <div className="tab">
+              <button
+                className="tablinks tab1"
+                onClick={(e) => openTab(e, "Activity", "tabcontent")}
+                id="defaultOpen"
+              >
+                <img
+                  src="../../../assets/images/student/activity_tab.png"
+                  className="tab-image"
+                  alt="Activity Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Mentor_Session", "tabcontent")}
+              >
+                <img
+                  src="../../../assets/images/student/mento_tab.PNG"
+                  className="tab-image2"
+                  alt="Mentor Session Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) =>
+                  openTab(e, "Professional_Development", "tabcontent")
+                }
+              >
+                <img
+                  src="../../../assets/images/student/prodev_tab.PNG"
+                  className="tab-image2"
+                  alt="Professional Development Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Chess_Lession", "tabcontent")}
+              >
+                <img
+                  src="../../../assets/images/student/chess_tab.PNG"
+                  className="tab-image2"
+                  alt="Chess Lesson Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Games", "tabcontent")}
+              >
+                <img
+                  src="../../../assets/images/student/games_tab.PNG"
+                  className="tab-image2"
+                  alt="Games Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Puzzles", "tabcontent")}
+              >
+                <img
+                  src="../../../assets/images/student/puzzles_tab.PNG"
+                  className="tab-image2"
+                  alt="Puzzles Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "computer", "tabcontent")}
+              >
+                <img
+                  src="../../../assets/images/student/play_tab.PNG"
+                  className="tab-image2"
+                  alt="Computer Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab3"
+                onClick={(e) => openTab(e, "Recordings", "tabcontent")}
+              >
+                <img
+                  src="../../../assets/images/student/recordings_tab.PNG"
+                  className="tab-image3"
+                  alt="Recordings Tab"
+                />
+              </button>
+            </div>
+
+            <div id="Activity" className="tabcontent">
+              <div className="rightbox">
+                <div className="rb-container">
+                  <ul className="rb">
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        23rd July 2022
+                        <br />
+                        7:00 PM
+                      </div>
+                      <div className="item-title">
+                        Solved 2 tactical puzzles
+                      </div>
+                    </li>
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        19th July 2022
+                        <br />
+                        3:00 PM
+                      </div>
+                      <div className="item-title">
+                        Practiced 7 positions on{" "}
+                        <a href="/learnings">Piece Checkmates I</a>
+                      </div>
+                    </li>
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        17st July 2022
+                        <br />
+                        7:00 PM
+                      </div>
+                      <div className="item-title">
+                        Signed up to{" "}
+                        <a
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href="http://ystemandchess.com/"
+                        >
+                          ystemandchess.com
+                        </a>
+                      </div>
+                    </li>
+                  </ul>
                 </div>
-      
-                <div id="Chess_Lession" className="tabcontent">
-                  <h3>Chess Lession</h3>
+              </div>
+            </div>
+
+            <div id="Mentor_Session" className="tabcontent">
+              <h3>Mentor Session</h3>
+              <p>The project started in 2018 when someone needed something.</p>
+
+              <iframe
+                src="http://127.0.0.1:5500/chessClient/parent.html" // URL of chess parent container
+                title="My Iframe"
+                width="600"
+                height="400"
+                frameBorder="0"
+                allowFullScreen
+              ></iframe>
+            </div>
+
+            <div id="Professional_Development" className="tabcontent">
+              <h3>Professional Development</h3>
+            </div>
+
+            <div id="Chess_Lession" className="tabcontent">
+              <h3>Chess Lession</h3>
+            </div>
+
+            <div id="Games" className="tabcontent">
+              <h3>Games</h3>
+            </div>
+
+            <div id="Puzzles" className="tabcontent">
+              <h3>Puzzle</h3>
+            </div>
+
+            <div id="computer" className="tabcontent">
+              <h3>Computer</h3>
+            </div>
+
+            <div id="Recordings" className="tabcontent">
+              <h3>Recording</h3>
+              {recordingList.map((record: Record, index) => (
+                <p key={index}>
+                  <img
+                    src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png"
+                    srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x"
+                    alt="Play Icon"
+                    width="20"
+                  />
+                  &nbsp;
+                  <strong>
+                    <a
+                      style={{ color: "#007bff", cursor: "pointer" }}
+                      title="Click to see the recording"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={() =>
+                        getPresignURL(record.sid, record.meetingId)
+                      }
+                    >
+                      {record.sid}_{record.meetingId}_0.mp4
+                    </a>
+                  </strong>
+                  &nbsp; - {record.meetingStartTime}
+                </p>
+              ))}
+            </div>
+          </div>
+
+          {/* Repeat similar structure for Studentname2 and Studentname3 */}
+          <div id="Studentname2" className="mainTabcontent">
+            <div className="row mb-3">
+              <div className="col-7">
+                <div className="progressInfo">
+                  <img
+                    src="../../../assets/images/mentor-profile/student-graph.PNG"
+                    alt="Student Graph"
+                  />
                 </div>
-      
-                <div id="Games" className="tabcontent">
-                  <h3>Games</h3>
+              </div>
+              <div className="col-5">
+                <div className="memberInfo">
+                  <h5 style={{ marginLeft: "-35px" }}>
+                    <strong>Time Spent:</strong>
+                  </h5>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Website:{" "}
+                    <strong>60 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Lesson:{" "}
+                    <strong>13 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Puzzle:{" "}
+                    <strong>35 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Playing:{" "}
+                    <strong>15 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Mentoring:{" "}
+                    <strong>5 minutes</strong>
+                  </p>
                 </div>
-      
-                <div id="Puzzles" className="tabcontent">
-                  <h3>Puzzle</h3>
+              </div>
+            </div>
+            <div className="tab">
+              <button
+                className="stablinks tab1"
+                onClick={(e) => openTab(e, "Activity2", "tabcontent1")}
+                id="defaultOpen2"
+              >
+                <img
+                  src="../../../assets/images/student/activity_tab.png"
+                  className="tab-image"
+                  alt="Activity Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab2"
+                onClick={(e) => openTab(e, "Mentor_Session2", "tabcontent1")}
+              >
+                <img
+                  src="../../../assets/images/student/mento_tab.PNG"
+                  className="tab-image2"
+                  alt="Mentor Session Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab2"
+                onClick={(e) =>
+                  openTab(e, "Professional_Development2", "tabcontent1")
+                }
+              >
+                <img
+                  src="../../../assets/images/student/prodev_tab.PNG"
+                  className="tab-image2"
+                  alt="Professional Development Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab2"
+                onClick={(e) => openTab(e, "Chess_Lession2", "tabcontent1")}
+              >
+                <img
+                  src="../../../assets/images/student/chess_tab.PNG"
+                  className="tab-image2"
+                  alt="Chess Lesson Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab2"
+                onClick={(e) => openTab(e, "Games2", "tabcontent1")}
+              >
+                <img
+                  src="../../../assets/images/student/games_tab.PNG"
+                  className="tab-image2"
+                  alt="Games Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab2"
+                onClick={(e) => openTab(e, "Puzzles2", "tabcontent1")}
+              >
+                <img
+                  src="../../../assets/images/student/puzzles_tab.PNG"
+                  className="tab-image2"
+                  alt="Puzzles Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab2"
+                onClick={(e) => openTab(e, "computer2", "tabcontent1")}
+              >
+                <img
+                  src="../../../assets/images/student/play_tab.PNG"
+                  className="tab-image2"
+                  alt="Computer Tab"
+                />
+              </button>
+              <button
+                className="stablinks tab3"
+                onClick={(e) => openTab(e, "Recordings2", "tabcontent1")}
+              >
+                <img
+                  src="../../../assets/images/student/recordings_tab.PNG"
+                  className="tab-image3"
+                  alt="Recordings Tab"
+                />
+              </button>
+            </div>
+
+            <div id="Activity2" className="tabcontent1">
+              <div className="rightbox">
+                <div className="rb-container">
+                  <ul className="rb">
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        23rd July 2022
+                        <br />
+                        7:00 PM
+                      </div>
+                      <div className="item-title">
+                        Solved 2 tactical puzzles
+                      </div>
+                    </li>
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        19th July 2022
+                        <br />
+                        3:00 PM
+                      </div>
+                      <div className="item-title">
+                        Practiced 7 positions on{" "}
+                        <a href="/learnings">Piece Checkmates I</a>
+                      </div>
+                    </li>
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        17st July 2022
+                        <br />
+                        7:00 PM
+                      </div>
+                      <div className="item-title">
+                        Signed up to{" "}
+                        <a
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href="http://ystemandchess.com/"
+                        >
+                          ystemandchess.com
+                        </a>
+                      </div>
+                    </li>
+                  </ul>
                 </div>
-      
-                <div id="computer" className="tabcontent">
-                  <h3>Computer</h3>
+              </div>
+            </div>
+
+            <div id="Mentor_Session2" className="tabcontent1">
+              <h3>Mentor Session</h3>
+              <p>The project started in 2018 when someone needed something.</p>
+            </div>
+
+            <div id="Professional_Development2" className="tabcontent1">
+              <h3>Professional Development</h3>
+            </div>
+
+            <div id="Chess_Lession2" className="tabcontent1">
+              <h3>Chess Lession</h3>
+            </div>
+
+            <div id="Games2" className="tabcontent1">
+              <h3>Games</h3>
+            </div>
+
+            <div id="Puzzles2" className="tabcontent1">
+              <h3>Puzzle</h3>
+            </div>
+
+            <div id="computer2" className="tabcontent1">
+              <h3>Computer</h3>
+            </div>
+
+            <div id="Recordings2" className="tabcontent1">
+              <h3>Recording</h3>
+              {recordingList.map((record: Record, index) => (
+                <p key={index}>
+                  <img
+                    src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png"
+                    srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x"
+                    alt="Play Icon"
+                    width="20"
+                  />
+                  &nbsp;
+                  <strong>
+                    <a
+                      style={{ color: "#007bff", cursor: "pointer" }}
+                      title="Click to see the recording"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={() =>
+                        getPresignURL(record.sid, record.meetingId)
+                      }
+                    >
+                      {record.sid}_{record.meetingId}_0.mp4
+                    </a>
+                  </strong>
+                  &nbsp; - {record.meetingStartTime}
+                </p>
+              ))}
+            </div>
+          </div>
+
+          <div id="Studentname3" className="mainTabcontent">
+            <div className="row mb-3">
+              <div className="col-7">
+                <div className="progressInfo">
+                  <img
+                    src="../../../assets/images/mentor-profile/student-graph.PNG"
+                    alt="Student Graph"
+                  />
                 </div>
-      
-                <div id="Recordings" className="tabcontent">
-                  <h3>Recording</h3>
-                  {recordingList.map((record: Record, index) => (
-                    <p key={index}>
-                      <img src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png" srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x" alt="Play Icon" width="20" />&nbsp;
-                      <strong>
-                        <a style={{ color: '#007bff', cursor: 'pointer' }} title="Click to see the recording" target="_blank" rel="noopener noreferrer" onClick={() => getPresignURL(record.sid, record.meetingId)}>
-                          {record.sid}_{record.meetingId}_0.mp4
-                        </a>
-                      </strong>&nbsp; - {record.meetingStartTime}
-                    </p>
-                  ))}
+              </div>
+              <div className="col-5">
+                <div className="memberInfo">
+                  <h5 style={{ marginLeft: "-35px" }}>
+                    <strong>Time Spent:</strong>
+                  </h5>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Website:{" "}
+                    <strong>50 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Lesson:{" "}
+                    <strong>25 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Puzzle:{" "}
+                    <strong>30 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Playing:{" "}
+                    <strong>5 minutes</strong>
+                  </p>
+                  <p className="time-icon">
+                    <span className="website-icon"></span>&nbsp; Mentoring:{" "}
+                    <strong>20 minutes</strong>
+                  </p>
                 </div>
               </div>
-      
-              {/* Repeat similar structure for Studentname2 and Studentname3 */}
-              <div id="Studentname2" className="mainTabcontent">
-                <div className="row mb-3">
-                  <div className="col-7">
-                    <div className="progressInfo">
-                      <img src="../../../assets/images/mentor-profile/student-graph.PNG" alt="Student Graph" />
-                    </div>
-                  </div>
-                  <div className="col-5">
-                    <div className="memberInfo">
-                      <h5 style={{ marginLeft: '-35px' }}><strong>Time Spent:</strong></h5>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Website: <strong>60 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Lesson: <strong>13 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Puzzle: <strong>35 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Playing: <strong>15 minutes</strong></p>
-                      <p className="time-icon"><span className="website-icon"></span>&nbsp; Mentoring: <strong>5 minutes</strong></p>
+            </div>
+
+            <div className="tab">
+              <button
+                className="tablinks tab1"
+                onClick={(e) => openTab(e, "Activity3", "tabcontent2")}
+                id="student3"
+              >
+                <img
+                  src="../../../assets/images/student/activity_tab.png"
+                  className="tab-image"
+                  alt="Activity Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Mentor_Session3", "tabcontent2")}
+              >
+                <img
+                  src="../../../assets/images/student/mento_tab.PNG"
+                  className="tab-image2"
+                  alt="Mentor Session Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) =>
+                  openTab(e, "Professional_Development3", "tabcontent2")
+                }
+              >
+                <img
+                  src="../../../assets/images/student/prodev_tab.PNG"
+                  className="tab-image2"
+                  alt="Professional Development Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Chess_Lession3", "tabcontent2")}
+              >
+                <img
+                  src="../../../assets/images/student/chess_tab.PNG"
+                  className="tab-image2"
+                  alt="Chess Lesson Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Games3", "tabcontent2")}
+              >
+                <img
+                  src="../../../assets/images/student/games_tab.PNG"
+                  className="tab-image2"
+                  alt="Games Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "Puzzles3", "tabcontent2")}
+              >
+                <img
+                  src="../../../assets/images/student/puzzles_tab.PNG"
+                  className="tab-image2"
+                  alt="Puzzles Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab2"
+                onClick={(e) => openTab(e, "computer3", "tabcontent2")}
+              >
+                <img
+                  src="../../../assets/images/student/play_tab.PNG"
+                  className="tab-image2"
+                  alt="Computer Tab"
+                />
+              </button>
+              <button
+                className="tablinks tab3"
+                onClick={(e) => openTab(e, "Recordings3", "tabcontent2")}
+              >
+                <img
+                  src="../../../assets/images/student/recordings_tab.PNG"
+                  className="tab-image3"
+                  alt="Recordings Tab"
+                />
+              </button>
+            </div>
+
+            <div id="Activity3" className="tabcontent2">
+              <div className="rightbox">
+                <div className="rb-container">
+                  <ul className="rb">
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        23rd July 2022
+                        <br />
+                        7:00 PM
+                      </div>
+                      <div className="item-title">
+                        Solved 2 tactical puzzles
+                      </div>
+                    </li>
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        19th July 2022
+                        <br />
+                        3:00 PM
+                      </div>
+                      <div className="item-title">
+                        Practiced 7 positions on{" "}
+                        <a href="/learnings">Piece Checkmates I</a>
                       </div>
-                  </div>
+                    </li>
+                    <li className="rb-item">
+                      <div className="timestamp">
+                        17st July 2022
+                        <br />
+                        7:00 PM
+                      </div>
+                      <div className="item-title">
+                        Signed up to{" "}
+                        <a
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          href="http://ystemandchess.com/"
+                        >
+                          ystemandchess.com
+                        </a>
+                      </div>
+                    </li>
+                  </ul>
                 </div>
-                      <div className="tab">
-                        <button className="stablinks tab1" onClick={(e) => openTab(e, 'Activity2', 'tabcontent1')} id="defaultOpen2">
-                        <img src="../../../assets/images/student/activity_tab.png" className="tab-image" alt="Activity Tab" />
-                        </button>
-                        <button className="stablinks tab2" onClick={(e) => openTab(e, 'Mentor_Session2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/mento_tab.PNG" className="tab-image2" alt="Mentor Session Tab" />
-                        </button>
-                        <button className="stablinks tab2" onClick={(e) => openTab(e, 'Professional_Development2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/prodev_tab.PNG" className="tab-image2" alt="Professional Development Tab" />
-                        </button>
-                        <button className="stablinks tab2" onClick={(e) => openTab(e, 'Chess_Lession2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/chess_tab.PNG" className="tab-image2" alt="Chess Lesson Tab" />
-                        </button>
-                        <button className="stablinks tab2" onClick={(e) => openTab(e, 'Games2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/games_tab.PNG" className="tab-image2" alt="Games Tab" />
-                        </button>
-                        <button className="stablinks tab2" onClick={(e) => openTab(e, 'Puzzles2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/puzzles_tab.PNG" className="tab-image2" alt="Puzzles Tab" />
-                        </button>
-                        <button className="stablinks tab2" onClick={(e) => openTab(e, 'computer2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/play_tab.PNG" className="tab-image2" alt="Computer Tab" />
-                        </button>
-                        <button className="stablinks tab3" onClick={(e) => openTab(e, 'Recordings2', 'tabcontent1')}>
-                        <img src="../../../assets/images/student/recordings_tab.PNG" className="tab-image3" alt="Recordings Tab" />
-                        </button>
-                    </div>
-
-                    <div id="Activity2" className="tabcontent1">
-                        <div className="rightbox">
-                        <div className="rb-container">
-                            <ul className="rb">
-                            <li className="rb-item">
-                                <div className="timestamp">23rd July 2022<br />7:00 PM</div>
-                                <div className="item-title">Solved 2 tactical puzzles</div>
-                            </li>
-                            <li className="rb-item">
-                                <div className="timestamp">19th July 2022<br />3:00 PM</div>
-                                <div className="item-title">Practiced 7 positions on <a href="/learnings">Piece Checkmates I</a></div>
-                            </li>
-                            <li className="rb-item">
-                                <div className="timestamp">17st July 2022<br />7:00 PM</div>
-                                <div className="item-title">Signed up to <a target="_blank" rel="noopener noreferrer" href="http://ystemandchess.com/">ystemandchess.com</a></div>
-                            </li>
-                            </ul>
-                        </div>
-                        </div>
-                    </div>
-
-                    <div id="Mentor_Session2" className="tabcontent1">
-                        <h3>Mentor Session</h3>
-                        <p>The project started in 2018 when someone needed something.</p>
-                    </div>
-
-                    <div id="Professional_Development2" className="tabcontent1">
-                        <h3>Professional Development</h3>
-                    </div>
-
-                    <div id="Chess_Lession2" className="tabcontent1">
-                        <h3>Chess Lession</h3>
-                    </div>
-
-                    <div id="Games2" className="tabcontent1">
-                        <h3>Games</h3>
-                    </div>
-
-                    <div id="Puzzles2" className="tabcontent1">
-                        <h3>Puzzle</h3>
-                    </div>
-
-                    <div id="computer2" className="tabcontent1">
-                        <h3>Computer</h3>
-                    </div>
-
-                    <div id="Recordings2" className="tabcontent1">
-                        <h3>Recording</h3>
-                        {recordingList.map((record: Record, index) => (
-                        <p key={index}>
-                            <img src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png" srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x" alt="Play Icon" width="20" />&nbsp;
-                            <strong>
-                            <a style={{ color: '#007bff', cursor: 'pointer' }} title="Click to see the recording" target="_blank" rel="noopener noreferrer" onClick={() => getPresignURL(record.sid, record.meetingId)}>
-                                {record.sid}_{record.meetingId}_0.mp4
-                            </a>
-                            </strong>&nbsp; - {record.meetingStartTime}
-                        </p>
-                        ))}
-                    </div>
-                    </div>
-
-                    <div id="Studentname3" className="mainTabcontent">
-                        <div className="row mb-3">
-                            <div className="col-7">
-                            <div className="progressInfo">
-                                <img src="../../../assets/images/mentor-profile/student-graph.PNG" alt="Student Graph" />
-                            </div>
-                            </div>
-                            <div className="col-5">
-                            <div className="memberInfo">
-                                <h5 style={{ marginLeft: '-35px' }}><strong>Time Spent:</strong></h5>
-                                <p className="time-icon"><span className="website-icon"></span>&nbsp; Website: <strong>50 minutes</strong></p>
-                                <p className="time-icon"><span className="website-icon"></span>&nbsp; Lesson: <strong>25 minutes</strong></p>
-                                <p className="time-icon"><span className="website-icon"></span>&nbsp; Puzzle: <strong>30 minutes</strong></p>
-                                <p className="time-icon"><span className="website-icon"></span>&nbsp; Playing: <strong>5 minutes</strong></p>
-                                <p className="time-icon"><span className="website-icon"></span>&nbsp; Mentoring: <strong>20 minutes</strong></p>
-                            </div>
-                            </div>
-                        </div>
-
-                        <div className="tab">
-                            <button className="tablinks tab1" onClick={(e) => openTab(e, 'Activity3', 'tabcontent2')} id="student3">
-                            <img src="../../../assets/images/student/activity_tab.png" className="tab-image" alt="Activity Tab" />
-                            </button>
-                            <button className="tablinks tab2" onClick={(e) => openTab(e, 'Mentor_Session3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/mento_tab.PNG" className="tab-image2" alt="Mentor Session Tab" />
-                            </button>
-                            <button className="tablinks tab2" onClick={(e) => openTab(e, 'Professional_Development3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/prodev_tab.PNG" className="tab-image2" alt="Professional Development Tab" />
-                            </button>
-                            <button className="tablinks tab2" onClick={(e) => openTab(e, 'Chess_Lession3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/chess_tab.PNG" className="tab-image2" alt="Chess Lesson Tab" />
-                            </button>
-                            <button className="tablinks tab2" onClick={(e) => openTab(e, 'Games3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/games_tab.PNG" className="tab-image2" alt="Games Tab" />
-                            </button>
-                            <button className="tablinks tab2" onClick={(e) => openTab(e, 'Puzzles3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/puzzles_tab.PNG" className="tab-image2" alt="Puzzles Tab" />
-                            </button>
-                            <button className="tablinks tab2" onClick={(e) => openTab(e, 'computer3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/play_tab.PNG" className="tab-image2" alt="Computer Tab" />
-                            </button>
-                            <button className="tablinks tab3" onClick={(e) => openTab(e, 'Recordings3', 'tabcontent2')}>
-                            <img src="../../../assets/images/student/recordings_tab.PNG" className="tab-image3" alt="Recordings Tab" />
-                            </button>
-                        </div>
-
-                        <div id="Activity3" className="tabcontent2">
-                        <div className="rightbox">
-                                <div className="rb-container">
-                                    <ul className="rb">
-                                    <li className="rb-item">
-                                        <div className="timestamp">23rd July 2022<br />7:00 PM</div>
-                                        <div className="item-title">Solved 2 tactical puzzles</div>
-                                    </li>
-                                    <li className="rb-item">
-                                        <div className="timestamp">19th July 2022<br />3:00 PM</div>
-                                        <div className="item-title">Practiced 7 positions on <a href="/learnings">Piece Checkmates I</a></div>
-                                    </li>
-                                    <li className="rb-item">
-                                        <div className="timestamp">17st July 2022<br />7:00 PM</div>
-                                        <div className="item-title">Signed up to <a target="_blank" rel="noopener noreferrer" href="http://ystemandchess.com/">ystemandchess.com</a></div>
-                                    </li>
-                                    </ul>
-                                </div>
-                                </div>
-                            </div>
-
-                                <div id="Mentor_Session3" className="tabcontent2">
-                            <h3>Mentor Session</h3>
-                            <p>The project started in 2018 when someone needed something.</p>
-                        </div>
-
-                        <div id="Professional_Development3" className="tabcontent2">
-                            <h3>Professional Development</h3>
-                        </div>
-
-                        <div id="Chess_Lession3" className="tabcontent2">
-                            <h3>Chess Lession</h3>
-                        </div>
-
-                        <div id="Games3" className="tabcontent2">
-                            <h3>Games</h3>
-                        </div>
-
-                        <div id="Puzzles3" className="tabcontent2">
-                            <h3>Puzzle</h3>
-                        </div>
-
-                        <div id="computer3" className="tabcontent2">
-                            <h3>Computer</h3>
-                        </div>
-
-                        <div id="Recordings3" className="tabcontent2">
-                            <h3>Recording</h3>
-                            {recordingList.map((record: Record, index) => (
-                            <p key={index}>
-                                <img src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png" srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x" alt="Play Icon" width="20" />&nbsp;
-                                <strong>
-                                <a style={{ color: '#007bff', cursor: 'pointer' }} title="Click to see the recording" target="_blank" rel="noopener noreferrer" onClick={() => getPresignURL(record.sid, record.meetingId)}>
-                                    {record.sid}_{record.meetingId}_0.mp4
-                                </a>
-                                </strong>&nbsp; - {record.meetingStartTime}
-                            </p>
-                            ))}
-                        </div>
-                        </div>
-                    </div>
-
-                    <div className="row" style={{ height: '500px' }}>
-                        <div id="pdf-div" className="pdf-view"></div>
-                    </div>
-                    </div>
-
-                    <footer style={{ marginTop: '16%' }}>
-                    {/* <app-footer></app-footer> */}
-                    </footer>
+              </div>
+            </div>
+
+            <div id="Mentor_Session3" className="tabcontent2">
+              <h3>Mentor Session</h3>
+              <p>The project started in 2018 when someone needed something.</p>
+            </div>
+
+            <div id="Professional_Development3" className="tabcontent2">
+              <h3>Professional Development</h3>
+            </div>
+
+            <div id="Chess_Lession3" className="tabcontent2">
+              <h3>Chess Lession</h3>
+            </div>
+
+            <div id="Games3" className="tabcontent2">
+              <h3>Games</h3>
+            </div>
+
+            <div id="Puzzles3" className="tabcontent2">
+              <h3>Puzzle</h3>
+            </div>
+
+            <div id="computer3" className="tabcontent2">
+              <h3>Computer</h3>
+            </div>
+
+            <div id="Recordings3" className="tabcontent2">
+              <h3>Recording</h3>
+              {recordingList.map((record: Record, index) => (
+                <p key={index}>
+                  <img
+                    src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png"
+                    srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x"
+                    alt="Play Icon"
+                    width="20"
+                  />
+                  &nbsp;
+                  <strong>
+                    <a
+                      style={{ color: "#007bff", cursor: "pointer" }}
+                      title="Click to see the recording"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      onClick={() =>
+                        getPresignURL(record.sid, record.meetingId)
+                      }
+                    >
+                      {record.sid}_{record.meetingId}_0.mp4
+                    </a>
+                  </strong>
+                  &nbsp; - {record.meetingStartTime}
+                </p>
+              ))}
+            </div>
+          </div>
         </div>
-)};
-export default MentorProfile;
\ No newline at end of file
+
+        <div className="row" style={{ height: "500px" }}>
+          <div id="pdf-div" className="pdf-view"></div>
+        </div>
+      </div>
+
+      <footer style={{ marginTop: "16%" }}>
+        {/* <app-footer></app-footer> */}
+      </footer>
+    </div>
+  );
+};
+export default MentorProfile;
diff --git a/react-ystemandchess/src/Pages/NewMentorProfile/NewMentorProfile.tsx b/react-ystemandchess/src/Pages/NewMentorProfile/NewMentorProfile.tsx
index 3a5a9baf..0373b51c 100644
--- a/react-ystemandchess/src/Pages/NewMentorProfile/NewMentorProfile.tsx
+++ b/react-ystemandchess/src/Pages/NewMentorProfile/NewMentorProfile.tsx
@@ -1,9 +1,9 @@
 import React, { useState, useEffect, useRef } from "react";
 import "./NewMentorProfile.scss";
 import Images from "../../images/imageImporter";
-import { SetPermissionLevel } from '../../globals'; 
-import { useCookies } from 'react-cookie';
-import { environment } from '../../environments/environment';
+import { SetPermissionLevel } from "../../globals";
+import { useCookies } from "react-cookie";
+import { environment } from "../../environments/environment";
 import { useNavigate } from "react-router";
 
 interface NewMentorProfileProps {
@@ -17,10 +17,11 @@ interface Student {
   lastName: string;
 }
 
-const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc }) => {
-
+const NewMentorProfile: React.FC<NewMentorProfileProps> = ({
+  userPortraitSrc,
+}) => {
   const [activeTab, setActiveTab] = useState("activity");
-  const [cookies] = useCookies(['login']);
+  const [cookies] = useCookies(["login"]);
   const navigate = useNavigate();
 
   // mentor info
@@ -49,17 +50,18 @@ const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc })
   const containerRef = useRef<HTMLDivElement>(null);
 
   // current date for display
-  const [date, setDate] = useState(() => new Date().toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-  })
-);
+  const [date, setDate] = useState(() =>
+    new Date().toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+    })
+  );
 
-  useEffect(()=>{
-    fetchUserData().catch(err => console.log(err)); // fetch user data when the component mounts
+  useEffect(() => {
+    fetchUserData().catch((err) => console.log(err)); // fetch user data when the component mounts
     setStubStudent("joeyman43"); // set a stub student for testing purposes, setting students should happen outside of this component
-    fetchStudentData().catch(err => console.log(err)); // fetch student data when the component mounts
-  }, [])
+    fetchStudentData().catch((err) => console.log(err)); // fetch student data when the component mounts
+  }, []);
 
   useEffect(() => {
     const el = containerRef.current;
@@ -75,65 +77,73 @@ const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc })
     return () => el.removeEventListener("scroll", handleScroll);
   }, [events, loading]);
 
-
   const fetchUserData = async () => {
-      const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
-      if (uInfo.error) {
-        console.log("Error: user not logged in.") // error if the user is not logged in
-        navigate("/login"); // redirect to login page
-      } else {
-        // record user info
-        setUsername(uInfo.username);
-        setFirstName(uInfo.firstName);
-        setLastName(uInfo.lastName)
-      }
+    const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
+    if (uInfo.error) {
+      console.log("Error: user not logged in."); // error if the user is not logged in
+      navigate("/login"); // redirect to login page
+    } else {
+      // record user info
+      setUsername(uInfo.username);
+      setFirstName(uInfo.firstName);
+      setLastName(uInfo.lastName);
+    }
 
-      // fetch usage time stats
-      const responseStats = await fetch(
-        // fetches student's stats if studentUsername is provided, otherwise fetches mentor's stats
-        `${environment.urls.middlewareURL}/timeTracking/statistics?username=${studentUsername ? studentUsername : uInfo.username}`, 
-        {
-            method: 'GET',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
-        }
-      );
-      const dataStats = await responseStats.json();
-      // update time usage for different events
-      setWebTime(dataStats.website);
-      setLessonTime(dataStats.lesson);
-      setPlayTime(dataStats.play);
-      setMentorTime(dataStats.mentor);
-      setPuzzleTime(dataStats.puzzle);
+    // fetch usage time stats
+    const responseStats = await fetch(
+      // fetches student's stats if studentUsername is provided, otherwise fetches mentor's stats
+      `${environment.urls.middlewareURL}/timeTracking/statistics?username=${
+        studentUsername ? studentUsername : uInfo.username
+      }`,
+      {
+        method: "GET",
+        headers: { Authorization: `Bearer ${cookies.login}` },
+      }
+    );
+    const dataStats = await responseStats.json();
+    // update time usage for different events
+    setWebTime(dataStats.website);
+    setLessonTime(dataStats.lesson);
+    setPlayTime(dataStats.play);
+    setMentorTime(dataStats.mentor);
+    setPuzzleTime(dataStats.puzzle);
 
-      // fetch latest usage history
-      fetchEvents(studentUsername ? studentUsername : uInfo.username)
-  }
+    // fetch latest usage history
+    fetchEvents(studentUsername ? studentUsername : uInfo.username);
+  };
 
   const fetchStudentData = async () => {
     console.log("Fetching student data...");
     fetch(`${environment.urls.middlewareURL}/user/getMentorship`, {
-      method: 'GET',
-      headers: { 'Authorization': `Bearer ${cookies.login}` }
-    }).then(data => data.json())
-      .then(data => {
+      method: "GET",
+      headers: { Authorization: `Bearer ${cookies.login}` },
+    })
+      .then((data) => data.json())
+      .then((data) => {
         setStudentFirstName(data.firstName);
         setStudentLastName(data.lastName);
         setStudentUsername(data.username);
-        setHasStudent(true)
+        setHasStudent(true);
       });
-  }
+  };
 
   const setStubStudent = async (stubStudentUsername) => {
     console.log("Setting stub student:", stubStudentUsername);
-    fetch(`${environment.urls.middlewareURL}/user/updateMentorship?mentorship=${stubStudentUsername}`, {
-      method: 'PUT',
-      headers: { 'Authorization': `Bearer ${cookies.login}`,
-                'Content-Type': 'application/json'}
-    }).then(data => data.json())
-      .then(data => {
+    fetch(
+      `${environment.urls.middlewareURL}/user/updateMentorship?mentorship=${stubStudentUsername}`,
+      {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${cookies.login}`,
+          "Content-Type": "application/json",
+        },
+      }
+    )
+      .then((data) => data.json())
+      .then((data) => {
         console.log("Set student response:", data);
       });
-  }
+  };
 
   // fetch latest usage history
   const fetchEvents = async (username) => {
@@ -147,32 +157,32 @@ const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc })
     try {
       // fetch latest usage history
       const responseLatest = await fetch(
-        `${environment.urls.middlewareURL}/timeTracking/latest?username=${username}&limit=${limit}&skip=${skip}`, 
+        `${environment.urls.middlewareURL}/timeTracking/latest?username=${username}&limit=${limit}&skip=${skip}`,
         {
-            method: 'GET',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
+          method: "GET",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
       );
       const dataLatest = await responseLatest.json();
-      setEvents(prev => [...prev, ...dataLatest]); // append more events to old list
-      setPage(prev => prev + 1); // update pagination number
+      setEvents((prev) => [...prev, ...dataLatest]); // append more events to old list
+      setPage((prev) => prev + 1); // update pagination number
       setHasMore(dataLatest.length === limit && dataLatest.length > 0);
     } catch (err) {
       console.error("Failed to fetch events", err);
     } finally {
       setLoading(false); // stop fetching
     }
-  }
+  };
 
   const handleTabClick = (tab: any) => {
     setActiveTab(tab);
   };
 
   const handleNavigateEvent = (type: string, name: string) => {
-    if(type == "lesson") {
+    if (type == "lesson") {
       navigate("/lessons", { state: { piece: name } });
     }
-  }
+  };
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -188,33 +198,48 @@ const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc })
             </div>
             <div className="inventory-content-line"></div>
             <div className="inventory-content-body" ref={containerRef}>
-              {events && events.map((event, index) => { // render list of usage history
-                const dateObj = new Date(event.startTime);
-                const dateStr = dateObj.toLocaleDateString('en-US', { // date of each history
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric'
-                });
-                const timeStr = dateObj.toLocaleTimeString('en-US', { // time of each history
-                  hour: 'numeric',
-                  minute: '2-digit'
-                });
+              {events &&
+                events.map((event, index) => {
+                  // render list of usage history
+                  const dateObj = new Date(event.startTime);
+                  const dateStr = dateObj.toLocaleDateString("en-US", {
+                    // date of each history
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  });
+                  const timeStr = dateObj.toLocaleTimeString("en-US", {
+                    // time of each history
+                    hour: "numeric",
+                    minute: "2-digit",
+                  });
 
-                return (
-                  <article key={index} className="inventory-content-timecard">
-                    <div className="inventory-content-col1"></div>
-                    <div className="inventory-content-col2">
-                      <p>{dateStr} {timeStr}</p>
-                    </div>
-                    <div className="inventory-content-col3">
-                      <p>
-                        Working on {event.eventType}:{' '}
-                        <strong onClick={() => handleNavigateEvent(event.eventType, event.eventName)}>{event.eventName}</strong>
-                      </p>
-                    </div>
-                  </article>
-                );
-              })}
+                  return (
+                    <article key={index} className="inventory-content-timecard">
+                      <div className="inventory-content-col1"></div>
+                      <div className="inventory-content-col2">
+                        <p>
+                          {dateStr} {timeStr}
+                        </p>
+                      </div>
+                      <div className="inventory-content-col3">
+                        <p>
+                          Working on {event.eventType}:{" "}
+                          <strong
+                            onClick={() =>
+                              handleNavigateEvent(
+                                event.eventType,
+                                event.eventName
+                              )
+                            }
+                          >
+                            {event.eventName}
+                          </strong>
+                        </p>
+                      </div>
+                    </article>
+                  );
+                })}
               {loading && <p>Loading more...</p>}
               {!hasMore && <p>No more activity left!</p>}
             </div>
@@ -222,56 +247,80 @@ const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc })
         );
       case "mentor":
         return (
-          <div id="inventory-content-mentor" className="inventoinventory-content active-contentry-content">
+          <div
+            id="inventory-content-mentor"
+            className="inventoinventory-content active-contentry-content"
+          >
             <h2>Mentor</h2>
             <p>This is the content for the Mentor tab.</p>
           </div>
         );
       case "learning":
         return (
-          <div id="inventory-content-learning" className="inventory-content active-content">
+          <div
+            id="inventory-content-learning"
+            className="inventory-content active-content"
+          >
             <h2>Learning</h2>
             <p>This is the content for the Learning tab.</p>
           </div>
         );
       case "chessLessons":
         return (
-          <div id="inventory-content-lessons" className="inventory-content active-content">
+          <div
+            id="inventory-content-lessons"
+            className="inventory-content active-content"
+          >
             <h2>Chess Lessons</h2>
             <p>This is the content for the Chess Lessons tab.</p>
           </div>
         );
       case "games":
         return (
-          <div id="inventory-content-games" className="inventory-content active-content">
+          <div
+            id="inventory-content-games"
+            className="inventory-content active-content"
+          >
             <h2>Games</h2>
             <p>This is the content for the Games tab.</p>
           </div>
         );
       case "puzzles":
         return (
-          <div id="inventory-content-puzzles" className="inventory-content active-content">
+          <div
+            id="inventory-content-puzzles"
+            className="inventory-content active-content"
+          >
             <h2>Puzzles</h2>
             <p>This is the content for the Puzzles tab.</p>
           </div>
         );
       case "playComputer":
         return (
-          <div id="inventory-content-computer" className="inventory-content active-content">
+          <div
+            id="inventory-content-computer"
+            className="inventory-content active-content"
+          >
             <h2>Play with Computer</h2>
             <p>This is the content for the Play with Computer tab.</p>
           </div>
         );
       case "recordings":
         return (
-          <div id="inventory-content-recordings" className="inventory-content active-content">
+          <div
+            id="inventory-content-recordings"
+            className="inventory-content active-content"
+          >
             <h2>Recordings</h2>
             <p>This is the content for the Recordings tab.</p>
           </div>
         );
       case "backpack":
         return (
-          <div id="inventory-content-backpack" className="inventory-content active-content">
+          <div
+            id="inventory-content-backpack"
+            className="inventory-content active-content"
+          >
             <h2>Backpack</h2>
             <p>This is the content for the Backpack tab.</p>
           </div>
@@ -301,64 +350,98 @@ const NewMentorProfile: React.FC<NewMentorProfileProps> = ({ userPortraitSrc })
           ></img>
         </div>
         <div className="inv-intro-welcome">
-          <h1>Hello, {firstName} {lastName}!</h1>
+          <h1>
+            Hello, {firstName} {lastName}!
+          </h1>
         </div>
       </section>
 
-      { hasStudent ? (
-      <section className="inv-inventory">
-        <div className="inv-inventory-topbar">
-            <h1 className="topbar-greeting">Check in on <strong>{studentFirstName} {studentLastName}'s</strong> progress! </h1>
-        </div>
-        <div className="inv-inventory-analytics">
-          <div className="inv-inventory-analytics-graph">
-            <img src="/placeholder_chart.png"/>
+      {hasStudent ? (
+        <section className="inv-inventory">
+          <div className="inv-inventory-topbar">
+            <h1 className="topbar-greeting">
+              Check in on{" "}
+              <strong>
+                {studentFirstName} {studentLastName}'s
+              </strong>{" "}
+              progress!{" "}
+            </h1>
           </div>
-          <div className="inv-inventory-analytics-metrics">
-            <h3>Time Spent:</h3>
-            <ul>
-              <li>Website: <strong>{webTime} minutes</strong></li>
-              <li>Playing: <strong>{playTime} minutes</strong></li>
-              <li>Lessons: <strong>{lessonTime} minutes</strong></li>
-              <li>Puzzle: <strong>{puzzleTime} minutes</strong></li>
-              <li>Mentoring: <strong>{mentorTime} minutes</strong></li>
-            </ul>
+          <div className="inv-inventory-analytics">
+            <div className="inv-inventory-analytics-graph">
+              <img src="/placeholder_chart.png" />
+            </div>
+            <div className="inv-inventory-analytics-metrics">
+              <h3>Time Spent:</h3>
+              <ul>
+                <li>
+                  Website: <strong>{webTime} minutes</strong>
+                </li>
+                <li>
+                  Playing: <strong>{playTime} minutes</strong>
+                </li>
+                <li>
+                  Lessons: <strong>{lessonTime} minutes</strong>
+                </li>
+                <li>
+                  Puzzle: <strong>{puzzleTime} minutes</strong>
+                </li>
+                <li>
+                  Mentoring: <strong>{mentorTime} minutes</strong>
+                </li>
+              </ul>
+            </div>
           </div>
-        </div>
-        <div className="inv-inventory-content-section">
-          <nav className="inv-inventory-content-tabs">
-            <ul>
-              {["activity", "mentor", "learning",
-                "chessLessons", "games", "puzzles",
-                "playComputer", "recordings", "backpack"].map((tab) => { 
-                    const displayName =
+          <div className="inv-inventory-content-section">
+            <nav className="inv-inventory-content-tabs">
+              <ul>
+                {[
+                  "activity",
+                  "mentor",
+                  "learning",
+                  "chessLessons",
+                  "games",
+                  "puzzles",
+                  "playComputer",
+                  "recordings",
+                  "backpack",
+                ].map((tab) => {
+                  const displayName =
                     tab === "chessLessons"
                       ? "Chess Lessons"
                       : tab === "playComputer"
-                        ? "Play with Computer"
-                        : tab.charAt(0).toUpperCase() + tab.slice(1);
+                      ? "Play with Computer"
+                      : tab.charAt(0).toUpperCase() + tab.slice(1);
 
                   return (
                     <div
                       key={tab}
-                      className={`inventory-tab ${activeTab === tab ? "active-tab" : ""}`}
+                      className={`inventory-tab ${
+                        activeTab === tab ? "active-tab" : ""
+                      }`}
                       onClick={() => handleTabClick(tab)}
                     >
-                      <img src={Images[`${tab}Icon` as keyof typeof Images]} alt={`${tab} icon`} />
+                      <img
+                        src={Images[`${tab}Icon` as keyof typeof Images]}
+                        alt={`${tab} icon`}
+                      />
                       <li>{displayName}</li>
                     </div>
                   );
                 })}
-            </ul>
-          </nav>
+              </ul>
+            </nav>
 
-          <div className="inv-inventory-content-content">{renderTabContent()}</div>
-        </div>
-      </section>) : (
-      <section className="no-student-message">
-        <h1>No Student Selected</h1>
-        <p>Please select a student to view their progress.</p>
-      </section>
+            <div className="inv-inventory-content-content">
+              {renderTabContent()}
+            </div>
+          </div>
+        </section>
+      ) : (
+        <section className="no-student-message">
+          <h1>No Student Selected</h1>
+          <p>Please select a student to view their progress.</p>
+        </section>
       )}
     </main>
   );
diff --git a/react-ystemandchess/src/Pages/NewStudentProfile/NewStudentProfile.tsx b/react-ystemandchess/src/Pages/NewStudentProfile/NewStudentProfile.tsx
index 66563604..831f4186 100644
--- a/react-ystemandchess/src/Pages/NewStudentProfile/NewStudentProfile.tsx
+++ b/react-ystemandchess/src/Pages/NewStudentProfile/NewStudentProfile.tsx
@@ -1,16 +1,15 @@
 import React, { useState, useEffect, useRef } from "react";
 import "./NewStudentProfile.scss";
 import Images from "../../images/imageImporter";
-import { SetPermissionLevel } from '../../globals'; 
-import { useCookies } from 'react-cookie';
-import { environment } from '../../environments/environment';
+import { SetPermissionLevel } from "../../globals";
+import { useCookies } from "react-cookie";
+import { environment } from "../../environments/environment";
 import { useNavigate } from "react-router";
 import { StatsChart } from "./StatsChart";
 
 const NewStudentProfile = ({ userPortraitSrc }: any) => {
-
   const [activeTab, setActiveTab] = useState("activity");
-  const [cookies] = useCookies(['login']);
+  const [cookies] = useCookies(["login"]);
   const navigate = useNavigate();
 
   // user info
@@ -26,8 +25,15 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
   const [mentorTime, setMentorTime] = useState(0);
 
   // data for chart plotting
-  const [displayMonths, setDisplayMonths] = useState(6); // display data from 6 many months back 
-  const [monthAxis, setMonthAxis] = useState(["Jan", "Feb", "Mar", "Apr", "May", "Jun"]);
+  const [displayMonths, setDisplayMonths] = useState(6); // display data from 6 many months back
+  const [monthAxis, setMonthAxis] = useState([
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+  ]);
   const [dataAxis, setDataAxis] = useState([0, 0, 0, 0, 0, 0]); // time spent on events each month
 
   // event tracking for pagination
@@ -38,27 +44,29 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   // current date for display
-  const [date, setDate] = useState(() => new Date().toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-  }));
+  const [date, setDate] = useState(() =>
+    new Date().toLocaleDateString("en-US", {
+      month: "long",
+      day: "numeric",
+    })
+  );
 
-  useEffect(()=>{
+  useEffect(() => {
     try {
       fetchUserData(); // asynchronously fetch user data upon mounting
     } catch (err) {
-      console.log(err)
+      console.log(err);
     }
-  }, [])
+  }, []);
 
   // loading changes, update listener to update handler closures
   useEffect(() => {
-    const el = containerRef.current; // get the activity element 
+    const el = containerRef.current; // get the activity element
     if (!el) return;
 
     const handleScroll = () => {
       // if scrolling within 50px of displayed height
-      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) { 
+      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 50) {
         fetchActivity(username); // fetch new acitivty
       }
     };
@@ -68,42 +76,42 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
   }, [loading]);
 
   const fetchUserData = async () => {
-      const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
-      if (uInfo.error) {
-        navigate("/login") // if user is not logged in, go to login page
-      } else {
-        // record user info
-        setUsername(uInfo.username);
-        setFirstName(uInfo.firstName);
-        setLastName(uInfo.lastName)
-      }
+    const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
+    if (uInfo.error) {
+      navigate("/login"); // if user is not logged in, go to login page
+    } else {
+      // record user info
+      setUsername(uInfo.username);
+      setFirstName(uInfo.firstName);
+      setLastName(uInfo.lastName);
+    }
 
-      // fetch usage time stats to disaply in header
-      fetchUsageTime(uInfo.username)
-      // fetch data for graph plotting
-      fetchGraphData(uInfo.username)
-      // fetch latest usage history to show in Activity tab
-      fetchActivity(uInfo.username)
-  }
+    // fetch usage time stats to disaply in header
+    fetchUsageTime(uInfo.username);
+    // fetch data for graph plotting
+    fetchGraphData(uInfo.username);
+    // fetch latest usage history to show in Activity tab
+    fetchActivity(uInfo.username);
+  };
 
   // fetch usage time stats to display in header
   const fetchUsageTime = async (username) => {
-      // fetch from back end
-      const responseStats = await fetch(
-        `${environment.urls.middlewareURL}/timeTracking/statistics?username=${username}`, 
-        {
-            method: 'GET',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
-        }
-      );
-      const dataStats = await responseStats.json();
-      // update time usage for different events in header display
-      setWebTime(dataStats.website);
-      setLessonTime(dataStats.lesson);
-      setPlayTime(dataStats.play);
-      setMentorTime(dataStats.mentor);
-      setPuzzleTime(dataStats.puzzle);
-  }
+    // fetch from back end
+    const responseStats = await fetch(
+      `${environment.urls.middlewareURL}/timeTracking/statistics?username=${username}`,
+      {
+        method: "GET",
+        headers: { Authorization: `Bearer ${cookies.login}` },
+      }
+    );
+    const dataStats = await responseStats.json();
+    // update time usage for different events in header display
+    setWebTime(dataStats.website);
+    setLessonTime(dataStats.lesson);
+    setPlayTime(dataStats.play);
+    setMentorTime(dataStats.mentor);
+    setPuzzleTime(dataStats.puzzle);
+  };
 
   // fetch latest usage history (Activity Tab)
   const fetchActivity = async (username) => {
@@ -116,45 +124,45 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
     try {
       // fetch another batch of usage history
       const responseLatest = await fetch(
-        `${environment.urls.middlewareURL}/timeTracking/latest?username=${username}&limit=${limit}&skip=${skip}`, 
+        `${environment.urls.middlewareURL}/timeTracking/latest?username=${username}&limit=${limit}&skip=${skip}`,
         {
-            method: 'GET',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
+          method: "GET",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
       );
       const dataLatest = await responseLatest.json();
 
-      setEvents(prev => [...prev, ...dataLatest]); // append more events to old list
-      setPage(prev => prev + 1); // update pagination number
+      setEvents((prev) => [...prev, ...dataLatest]); // append more events to old list
+      setPage((prev) => prev + 1); // update pagination number
       setHasMore(dataLatest.length === limit && dataLatest.length > 0); // if there are more activities
       setLoading(false);
     } catch (err) {
       console.error("Failed to fetch events", err);
     }
-  }
+  };
 
   // fetch data needed for updating graph plot
   const fetchGraphData = async (username) => {
     try {
       // fetch the time spent on the website in the past few months
       const response = await fetch(
-        `${environment.urls.middlewareURL}/timeTracking/graph-data?username=${username}&eventType=website&months=${displayMonths}`, 
+        `${environment.urls.middlewareURL}/timeTracking/graph-data?username=${username}&eventType=website&months=${displayMonths}`,
         {
-            method: 'GET',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
+          method: "GET",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
       );
-      const data = await response.json(); 
-      const months = data.map(item => item.monthText); // month list for ploting
-      const times = data.map(item => item.timeSpent); // timeSpent for plotting
+      const data = await response.json();
+      const months = data.map((item) => item.monthText); // month list for ploting
+      const times = data.map((item) => item.timeSpent); // timeSpent for plotting
 
       // update for graph plotting
       setMonthAxis(months);
-      setDataAxis(times); 
+      setDataAxis(times);
     } catch (err) {
       console.error("Failed to fetch events", err);
     }
-  }
+  };
 
   const handleTabClick = (tab: any) => {
     setActiveTab(tab);
@@ -162,10 +170,11 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
 
   // navigate to previous activities
   const handleNavigateEvent = (type: string, name: string) => {
-    if(type == "lesson") { // if event is a lesson
+    if (type == "lesson") {
+      // if event is a lesson
       navigate("/lessons", { state: { piece: name } });
     }
-  }
+  };
 
   const renderTabContent = () => {
     switch (activeTab) {
@@ -181,33 +190,48 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
             </div>
             <div className="inventory-content-line"></div>
             <div className="inventory-content-body" ref={containerRef}>
-              {events && events.map((event, index) => { // render list of usage history
-                const dateObj = new Date(event.startTime);
-                const dateStr = dateObj.toLocaleDateString('en-US', { // date of each history
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric'
-                });
-                const timeStr = dateObj.toLocaleTimeString('en-US', { // time of each history
-                  hour: 'numeric',
-                  minute: '2-digit'
-                });
+              {events &&
+                events.map((event, index) => {
+                  // render list of usage history
+                  const dateObj = new Date(event.startTime);
+                  const dateStr = dateObj.toLocaleDateString("en-US", {
+                    // date of each history
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  });
+                  const timeStr = dateObj.toLocaleTimeString("en-US", {
+                    // time of each history
+                    hour: "numeric",
+                    minute: "2-digit",
+                  });
 
-                return (
-                  <article key={index} className="inventory-content-timecard">
-                    <div className="inventory-content-col1"></div>
-                    <div className="inventory-content-col2">
-                      <p>{dateStr} {timeStr}</p>
-                    </div>
-                    <div className="inventory-content-col3">
-                      <p>
-                        Working on {event.eventType}:{' '}
-                        <strong onClick={() => handleNavigateEvent(event.eventType, event.eventName)}>{event.eventName}</strong>
-                      </p>
-                    </div>
-                  </article>
-                );
-              })}
+                  return (
+                    <article key={index} className="inventory-content-timecard">
+                      <div className="inventory-content-col1"></div>
+                      <div className="inventory-content-col2">
+                        <p>
+                          {dateStr} {timeStr}
+                        </p>
+                      </div>
+                      <div className="inventory-content-col3">
+                        <p>
+                          Working on {event.eventType}:{" "}
+                          <strong
+                            onClick={() =>
+                              handleNavigateEvent(
+                                event.eventType,
+                                event.eventName
+                              )
+                            }
+                          >
+                            {event.eventName}
+                          </strong>
+                        </p>
+                      </div>
+                    </article>
+                  );
+                })}
               {loading && <p>Loading more...</p>}
               {!hasMore && <p>No more activity left!</p>}
             </div>
@@ -215,56 +239,80 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
         );
       case "mentor":
         return (
-          <div id="inventory-content-mentor" className="inventoinventory-content active-contentry-content">
+          <div
+            id="inventory-content-mentor"
+            className="inventoinventory-content active-contentry-content"
+          >
             <h2>Mentor</h2>
             <p>This is the content for the Mentor tab.</p>
           </div>
         );
       case "learning":
         return (
-          <div id="inventory-content-learning" className="inventory-content active-content">
+          <div
+            id="inventory-content-learning"
+            className="inventory-content active-content"
+          >
             <h2>Learning</h2>
             <p>This is the content for the Learning tab.</p>
           </div>
         );
       case "chessLessons":
         return (
-          <div id="inventory-content-lessons" className="inventory-content active-content">
+          <div
+            id="inventory-content-lessons"
+            className="inventory-content active-content"
+          >
             <h2>Chess Lessons</h2>
             <p>This is the content for the Chess Lessons tab.</p>
           </div>
         );
       case "games":
         return (
-          <div id="inventory-content-games" className="inventory-content active-content">
+          <div
+            id="inventory-content-games"
+            className="inventory-content active-content"
+          >
             <h2>Games</h2>
             <p>This is the content for the Games tab.</p>
           </div>
         );
       case "puzzles":
         return (
-          <div id="inventory-content-puzzles" className="inventory-content active-content">
+          <div
+            id="inventory-content-puzzles"
+            className="inventory-content active-content"
+          >
             <h2>Puzzles</h2>
             <p>This is the content for the Puzzles tab.</p>
           </div>
         );
       case "playComputer":
         return (
-          <div id="inventory-content-computer" className="inventory-content active-content">
+          <div
+            id="inventory-content-computer"
+            className="inventory-content active-content"
+          >
             <h2>Play with Computer</h2>
             <p>This is the content for the Play with Computer tab.</p>
           </div>
         );
       case "recordings":
         return (
-          <div id="inventory-content-recordings" className="inventory-content active-content">
+          <div
+            id="inventory-content-recordings"
+            className="inventory-content active-content"
+          >
             <h2>Recordings</h2>
             <p>This is the content for the Recordings tab.</p>
           </div>
         );
       case "backpack":
         return (
-          <div id="inventory-content-backpack" className="inventory-content active-content">
+          <div
+            id="inventory-content-backpack"
+            className="inventory-content active-content"
+          >
             <h2>Backpack</h2>
             <p>This is the content for the Backpack tab.</p>
           </div>
@@ -294,7 +342,9 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
           ></img>
         </div>
         <div className="inv-intro-welcome">
-          <h1>Hello, {firstName} {lastName}!</h1>
+          <h1>
+            Hello, {firstName} {lastName}!
+          </h1>
         </div>
       </section>
 
@@ -302,46 +352,76 @@ const NewStudentProfile = ({ userPortraitSrc }: any) => {
         <div className="inv-inventory-topbar"></div>
         <div className="inv-inventory-analytics">
           <div className="inv-inventory-analytics-graph">
-            <StatsChart key={dataAxis.join(',')} monthAxis={monthAxis} dataAxis={dataAxis}/>
+            <StatsChart
+              key={dataAxis.join(",")}
+              monthAxis={monthAxis}
+              dataAxis={dataAxis}
+            />
           </div>
           <div className="inv-inventory-analytics-metrics">
             <h3>Time Spent:</h3>
             <ul>
-              <li>Website: <strong>{webTime} minutes</strong></li>
-              <li>Playing: <strong>{playTime} minutes</strong></li>
-              <li>Lessons: <strong>{lessonTime} minutes</strong></li>
-              <li>Puzzle: <strong>{puzzleTime} minutes</strong></li>
-              <li>Mentoring: <strong>{mentorTime} minutes</strong></li>
+              <li>
+                Website: <strong>{webTime} minutes</strong>
+              </li>
+              <li>
+                Playing: <strong>{playTime} minutes</strong>
+              </li>
+              <li>
+                Lessons: <strong>{lessonTime} minutes</strong>
+              </li>
+              <li>
+                Puzzle: <strong>{puzzleTime} minutes</strong>
+              </li>
+              <li>
+                Mentoring: <strong>{mentorTime} minutes</strong>
+              </li>
             </ul>
           </div>
         </div>
         <div className="inv-inventory-content-section">
           <nav className="inv-inventory-content-tabs">
             <ul>
-              {["activity", "mentor", "learning",
-                "chessLessons", "games", "puzzles",
-                "playComputer", "recordings", "backpack"].map((tab) => { const displayName =
-                    tab === "chessLessons"
-                      ? "Chess Lessons"
-                      : tab === "playComputer"
-                        ? "Play with Computer"
-                        : tab.charAt(0).toUpperCase() + tab.slice(1);
+              {[
+                "activity",
+                "mentor",
+                "learning",
+                "chessLessons",
+                "games",
+                "puzzles",
+                "playComputer",
+                "recordings",
+                "backpack",
+              ].map((tab) => {
+                const displayName =
+                  tab === "chessLessons"
+                    ? "Chess Lessons"
+                    : tab === "playComputer"
+                    ? "Play with Computer"
+                    : tab.charAt(0).toUpperCase() + tab.slice(1);
 
-                  return (
-                    <div
-                      key={tab}
-                      className={`inventory-tab ${activeTab === tab ? "active-tab" : ""}`}
-                      onClick={() => handleTabClick(tab)}
-                    >
-                      <img src={Images[`${tab}Icon` as keyof typeof Images]} alt={`${tab} icon`} />
-                      <li>{displayName}</li>
-                    </div>
-                  );
-                })}
+                return (
+                  <div
+                    key={tab}
+                    className={`inventory-tab ${
+                      activeTab === tab ? "active-tab" : ""
+                    }`}
+                    onClick={() => handleTabClick(tab)}
+                  >
+                    <img
+                      src={Images[`${tab}Icon` as keyof typeof Images]}
+                      alt={`${tab} icon`}
+                    />
+                    <li>{displayName}</li>
+                  </div>
+                );
+              })}
             </ul>
           </nav>
 
-          <div className="inv-inventory-content-content">{renderTabContent()}</div>
+          <div className="inv-inventory-content-content">
+            {renderTabContent()}
+          </div>
         </div>
       </section>
     </main>
diff --git a/react-ystemandchess/src/Pages/Reset-Password/resetPasswordService.ts b/react-ystemandchess/src/Pages/Reset-Password/resetPasswordService.ts
index 62cf2173..1a6a15a4 100644
--- a/react-ystemandchess/src/Pages/Reset-Password/resetPasswordService.ts
+++ b/react-ystemandchess/src/Pages/Reset-Password/resetPasswordService.ts
@@ -1,8 +1,8 @@
-import { environment } from '../../environments/environment';
-const nodemailer = require('nodemailer');
+import { environment } from "../../environments/environment";
+const nodemailer = require("nodemailer");
 
 const transporter = nodemailer.createTransport({
-  service: 'Gmail', // Or any other email service
+  service: "Gmail", // Or any other email service
   auth: {
     user: environment.email!.user,
     pass: environment.email!.pass,
@@ -13,18 +13,21 @@ const sendResetPasswordEmail = (email: any, resetLink: any) => {
   const mailOptions = {
     from: environment.email!.user,
     to: email,
-    subject: 'Password Reset',
+    subject: "Password Reset",
     text: `Click the link to reset your password: ${resetLink}`,
   };
 
   return new Promise((resolve, reject) => {
-    transporter.sendMail(mailOptions, (error: any, info: { response: unknown; }) => {
-      if (error) {
-        reject(error);
-      } else {
-        resolve(info.response);
+    transporter.sendMail(
+      mailOptions,
+      (error: any, info: { response: unknown }) => {
+        if (error) {
+          reject(error);
+        } else {
+          resolve(info.response);
+        }
       }
-    });
+    );
   });
 };
 
diff --git a/react-ystemandchess/src/Pages/SignUp/SignUp.tsx b/react-ystemandchess/src/Pages/SignUp/SignUp.tsx
index 64a0b6de..1ef19334 100644
--- a/react-ystemandchess/src/Pages/SignUp/SignUp.tsx
+++ b/react-ystemandchess/src/Pages/SignUp/SignUp.tsx
@@ -1,20 +1,20 @@
-import React, { useState } from 'react';
-import './SignUp.scss'; // Imports the stylesheet for this component.
-import { environment } from '../../environments/environment'; // Imports environment variables, likely containing API URLs.
+import React, { useState } from "react";
+import "./SignUp.scss"; // Imports the stylesheet for this component.
+import { environment } from "../../environments/environment"; // Imports environment variables, likely containing API URLs.
 // Test comment - This is a manual test comment.
 
-console.log('Environment URL:', environment.urls.middlewareURL); // Logs the middleware URL from the environment.
+console.log("Environment URL:", environment.urls.middlewareURL); // Logs the middleware URL from the environment.
 
 const Signup = () => {
   // State to manage the form data for the user.
   const [formData, setFormData] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    username: '',
-    password: '',
-    retypedPassword: '',
-    accountType: 'mentor', // Default account type is set to 'mentor'.
+    firstName: "",
+    lastName: "",
+    email: "",
+    username: "",
+    password: "",
+    retypedPassword: "",
+    accountType: "mentor", // Default account type is set to 'mentor'.
   });
 
   // State flags to track the validity of individual input fields.
@@ -27,12 +27,12 @@ const Signup = () => {
 
   // State to store any validation errors for the form fields.
   const [errors, setErrors] = useState({
-    firstName: '',
-    lastName: '',
-    email: '',
-    username: '',
-    password: '',
-    retypePassword: '',
+    firstName: "",
+    lastName: "",
+    email: "",
+    username: "",
+    password: "",
+    retypePassword: "",
   });
 
   // State to manage the parent account specific UI and data.
@@ -51,22 +51,22 @@ const Signup = () => {
 
     // Performs specific validation based on the input field that changed.
     switch (name) {
-      case 'firstName':
+      case "firstName":
         firstNameVerification(value);
         break;
-      case 'lastName':
+      case "lastName":
         lastNameVerification(value);
         break;
-      case 'email':
+      case "email":
         emailVerification(value);
         break;
-      case 'username':
+      case "username":
         usernameVerification(value);
         break;
-      case 'password':
+      case "password":
         passwordVerification(value);
         break;
-      case 'retypedPassword':
+      case "retypedPassword":
         retypePasswordVerification(value, formData.password);
         break;
       default:
@@ -80,7 +80,7 @@ const Signup = () => {
     setFirstNameFlag(isValid);
     setErrors((prev) => ({
       ...prev,
-      firstName: isValid ? '' : 'Invalid First Name',
+      firstName: isValid ? "" : "Invalid First Name",
     }));
     return isValid;
   };
@@ -91,7 +91,7 @@ const Signup = () => {
     setLastNameFlag(isValid);
     setErrors((prev) => ({
       ...prev,
-      lastName: isValid ? '' : 'Invalid Last Name',
+      lastName: isValid ? "" : "Invalid Last Name",
     }));
     return isValid;
   };
@@ -102,7 +102,7 @@ const Signup = () => {
     setEmailFlag(isValid);
     setErrors((prev) => ({
       ...prev,
-      email: isValid ? '' : 'Invalid Email',
+      email: isValid ? "" : "Invalid Email",
     }));
     return isValid;
   };
@@ -113,7 +113,7 @@ const Signup = () => {
     setUserNameFlag(isValid);
     setErrors((prev) => ({
       ...prev,
-      username: isValid ? '' : 'Invalid Username',
+      username: isValid ? "" : "Invalid Username",
     }));
     return isValid;
   };
@@ -124,25 +124,28 @@ const Signup = () => {
     setPasswordFlag(isValid);
     setErrors((prev) => ({
       ...prev,
-      password: isValid ? '' : 'Password must be at least 8 characters',
+      password: isValid ? "" : "Password must be at least 8 characters",
     }));
     return isValid;
   };
 
   // Verifies if the retyped password matches the original password.
-  const retypePasswordVerification = (retypedPassword: string, password: string) => {
+  const retypePasswordVerification = (
+    retypedPassword: string,
+    password: string
+  ) => {
     const isValid = retypedPassword === password;
     setRetypeFlag(isValid);
     setErrors((prev) => ({
       ...prev,
-      retypePassword: isValid ? '' : 'Passwords do not match',
+      retypePassword: isValid ? "" : "Passwords do not match",
     }));
     return isValid;
   };
 
   // Handles changes to the account type dropdown.
   const handleAccountTypeChange = (e: any) => {
-    const isParent = e.target.value === 'parent';
+    const isParent = e.target.value === "parent";
     setParentAccountFlag(isParent);
     // Updates the accountType in the form data.
     setFormData((prev) => ({
@@ -155,12 +158,12 @@ const Signup = () => {
   const handleAddStudent = () => {
     const newStudent = {
       id: Date.now(),
-      firstName: '',
-      lastName: '',
-      username: '',
-      email: '',
-      password: '',
-      retypedPassword: '',
+      firstName: "",
+      lastName: "",
+      username: "",
+      email: "",
+      password: "",
+      retypedPassword: "",
       errors: {},
     };
     setStudents((prev: any) => [...prev, newStudent]);
@@ -168,7 +171,11 @@ const Signup = () => {
   };
 
   // Handles changes to input fields within a student's form.
-  const handleStudentInputChange = (studentId: any, field: string, value: string) => {
+  const handleStudentInputChange = (
+    studentId: any,
+    field: string,
+    value: string
+  ) => {
     // Updates the specific student's data in the students array.
     setStudents((prev: any) =>
       prev.map((student: any) =>
@@ -180,7 +187,9 @@ const Signup = () => {
   // Removes a student form from the UI.
   const handleRemoveStudent = (studentId: any) => {
     // Filters out the student with the given ID.
-    setStudents((prev: any) => prev.filter((student: any) => student.id !== studentId));
+    setStudents((prev: any) =>
+      prev.filter((student: any) => student.id !== studentId)
+    );
     // Hides the student form if no students are present.
     if (students.length === 1) {
       setShowStudentForm(false);
@@ -189,7 +198,7 @@ const Signup = () => {
 
   // Handles the submission of the signup form.
   const handleSubmit = async () => {
-    console.log('Submit clicked', formData);
+    console.log("Submit clicked", formData);
 
     // Checks if all main form fields are valid based on their flags.
     const isValid =
@@ -200,7 +209,7 @@ const Signup = () => {
       passwordFlag &&
       retypeFlag;
 
-    console.log('Validation status:', {
+    console.log("Validation status:", {
       firstNameFlag,
       lastNameFlag,
       emailFlag,
@@ -211,11 +220,11 @@ const Signup = () => {
 
     // If the main form is not valid, prevents submission.
     if (!isValid) {
-      console.log('Form validation failed');
+      console.log("Form validation failed");
       return;
     }
 
-    let url = '';
+    let url = "";
     // Constructs the API URL based on whether it's a parent account with students.
     if (parentAccountFlag && students.length > 0) {
       // Maps student data into the required format for the API.
@@ -240,18 +249,18 @@ const Signup = () => {
       url = `${environment.urls.middlewareURL}/user/?first=${formData.firstName}&last=${formData.lastName}&email=${formData.email}&password=${formData.password}&username=${formData.username}&role=${formData.accountType}`;
     }
 
-    console.log('Request URL:', url);
+    console.log("Request URL:", url);
 
     try {
       // Sends a POST request to the signup API.
       const response = await fetch(url, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
       });
 
-      console.log('Response status:', response.status);
+      console.log("Response status:", response.status);
 
       // Throws an error if the response status indicates failure.
       if (!response.ok) {
@@ -260,100 +269,100 @@ const Signup = () => {
 
       // Parses the JSON response.
       const data = await response.json();
-      console.log('Response data:', data);
+      console.log("Response data:", data);
 
       // Handles the case where the chosen username is already taken.
-      if (data === 'This username has been taken. Please choose another.') {
+      if (data === "This username has been taken. Please choose another.") {
         setErrors((prev) => ({
           ...prev,
-          username: 'Username already taken',
+          username: "Username already taken",
         }));
       } else {
         // Redirects to the homepage upon successful signup.
-        window.location.href = '/';
+        window.location.href = "/";
       }
     } catch (error) {
-      console.error('Signup error:', error);
+      console.error("Signup error:", error);
       // Sets a general error message for signup failure.
       setErrors((prev) => ({
         ...prev,
-        general: 'Signup failed. Please try again.',
+        general: "Signup failed. Please try again.",
       }));
     }
   };
 
   return (
-    <form className='signupForm' onSubmit={(e) => e.preventDefault()}>
+    <form className="signupForm" onSubmit={(e) => e.preventDefault()}>
       <h2 className="sign-up-title">Sign up</h2>
 
-      <div className='errorMessages'>
+      <div className="errorMessages">
         {/* Maps through the errors object and displays any error messages. */}
         {Object.values(errors).map((error, index) =>
           error ? <h3 key={index}>{error}</h3> : null
         )}
       </div>
 
-      <div className='form-fields'>
+      <div className="form-fields">
         <input
-          type='text'
-          name='firstName'
-          placeholder='First name'
+          type="text"
+          name="firstName"
+          placeholder="First name"
           value={formData.firstName}
           onChange={handleInputChange}
         />
         <input
-          type='text'
-          name='lastName'
-          placeholder='Last name'
+          type="text"
+          name="lastName"
+          placeholder="Last name"
           value={formData.lastName}
           onChange={handleInputChange}
         />
         <input
-          type='text'
-          name='email'
-          placeholder='Email'
+          type="text"
+          name="email"
+          placeholder="Email"
           value={formData.email}
           onChange={handleInputChange}
         />
         <input
-          type='text'
-          name='username'
-          placeholder='Username'
+          type="text"
+          name="username"
+          placeholder="Username"
           value={formData.username}
           onChange={handleInputChange}
         />
         <input
-          type='password'
-          name='password'
-          placeholder='Password'
+          type="password"
+          name="password"
+          placeholder="Password"
           value={formData.password}
           onChange={handleInputChange}
         />
         <input
-          type='password'
-          name='retypedPassword'
-          placeholder='Re-type password'
+          type="password"
+          name="retypedPassword"
+          placeholder="Re-type password"
           value={formData.retypedPassword}
           onChange={handleInputChange}
         />
       </div>
 
-      <div className='account-type'>
+      <div className="account-type">
         <p>Select Account Type</p>
         <select value={formData.accountType} onChange={handleAccountTypeChange}>
-          <option value='mentor'>Mentor</option>
-          <option value='parent'>Parent</option>
+          <option value="mentor">Mentor</option>
+          <option value="parent">Parent</option>
         </select>
       </div>
 
       {/* Conditional rendering of the student section for parent accounts. */}
       {parentAccountFlag && (
-        <div className='student-section'>
+        <div className="student-section">
           {/* Button to add a new student form if the student form is not currently shown. */}
           {!showStudentForm && (
             <button
-              type='button'
-              className='add-student-btn'
+              type="button"
+              className="add-student-btn"
               onClick={handleAddStudent}
             >
               Create Student
@@ -362,80 +371,80 @@ const Signup = () => {
 
           {/* Maps through the students array and renders a form for each student. */}
           {students.map((student: any) => (
-            <div key={student.id} className='student-form'>
+            <div key={student.id} className="student-form">
               {/* Button to remove a student form. */}
               <button
-                type='button'
-                className='remove-student'
+                type="button"
+                className="remove-student"
                 onClick={() => handleRemoveStudent(student.id)}
               >
                 Delete student
               </button>
 
               <input
-                type='text'
+                type="text"
                 placeholder="Student's first name"
                 value={student.firstName}
                 onChange={(e) =>
                   handleStudentInputChange(
                     student.id,
-                    'firstName',
+                    "firstName",
                     e.target.value
                   )
                 }
               />
               <input
-                type='text'
+                type="text"
                 placeholder="Student's last name"
                 value={student.lastName}
                 onChange={(e) =>
                   handleStudentInputChange(
                     student.id,
-                    'lastName',
+                    "lastName",
                     e.target.value
                   )
                 }
               />
               <input
-                type='text'
-                placeholder='Student username'
+                type="text"
+                placeholder="Student username"
                 value={student.username}
                 onChange={(e) =>
                   handleStudentInputChange(
                     student.id,
-                    'username',
+                    "username",
                     e.target.value
                   )
                 }
               />
               <input
-                type='text'
+                type="text"
                 placeholder="Student's email"
                 value={student.email}
                 onChange={(e) =>
-                  handleStudentInputChange(student.id, 'email', e.target.value)
+                  handleStudentInputChange(student.id, "email", e.target.value)
                 }
               />
               <input
-                type='password'
+                type="password"
                 placeholder="Student's password"
                 value={student.password}
                 onChange={(e) =>
                   handleStudentInputChange(
                     student.id,
-                    'password',
+                    "password",
                     e.target.value
                   )
                 }
               />
               <input
-                type='password'
+                type="password"
                 placeholder="Re-type student's password"
                 value={student.retypedPassword}
                 onChange={(e) =>
                   handleStudentInputChange(
                     student.id,
-                    'retypedPassword',
+                    "retypedPassword",
                     e.target.value
                   )
                 }
@@ -445,17 +454,17 @@ const Signup = () => {
         </div>
       )}
 
-      <div className='terms'>
-        <input type='checkbox' id='termsCheckbox' required />
-        <label htmlFor='termsCheckbox'>I accept the terms and conditions</label>
+      <div className="terms">
+        <input type="checkbox" id="termsCheckbox" required />
+        <label htmlFor="termsCheckbox">I accept the terms and conditions</label>
       </div>
 
       {/* Submit button for the signup form. */}
-      <button type='button' className='submit-btn' onClick={handleSubmit}>
+      <button type="button" className="submit-btn" onClick={handleSubmit}>
         Sign up
       </button>
     </form>
   );
 };
 
-export default Signup;
\ No newline at end of file
+export default Signup;
diff --git a/react-ystemandchess/src/Pages/Student-Profile/UserProfile.tsx b/react-ystemandchess/src/Pages/Student-Profile/UserProfile.tsx
index a393d7db..38e46c96 100644
--- a/react-ystemandchess/src/Pages/Student-Profile/UserProfile.tsx
+++ b/react-ystemandchess/src/Pages/Student-Profile/UserProfile.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { SetPermissionLevel } from '../../globals'; 
-import { useCookies } from 'react-cookie';
-import { environment } from '../../environments/environment';
-import './UserProfile.scss';
+import React, { useEffect, useState } from "react";
+import { SetPermissionLevel } from "../../globals";
+import { useCookies } from "react-cookie";
+import { environment } from "../../environments/environment";
+import "./UserProfile.scss";
 
 type PdfItem = {
   id: string;
@@ -10,28 +10,26 @@ type PdfItem = {
   FilePath: string;
 };
 
-type Record  = {
+type Record = {
   sid: string;
   meetingId: string;
   meetingStartTime: string;
   [key: string]: any; // This allows any other fields to be added with any type
-}
-
-
+};
 
 const UserProfile = () => {
-  const [cookies] = useCookies(['login']);
-  const [username, setUsername] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
-  const [accountCreatedAt, setAccountCreatedAt] = useState('');
-  const [role, setRole] = useState('');
+  const [cookies] = useCookies(["login"]);
+  const [username, setUsername] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [accountCreatedAt, setAccountCreatedAt] = useState("");
+  const [role, setRole] = useState("");
   const [recordingList, setRecordingList] = useState([]);
   const [sharedPdfList, setSharedPdfList] = useState<PdfItem[]>([]);
-  const [categoryName, setCategoryName] = useState('');
+  const [categoryName, setCategoryName] = useState("");
   const [showPdfListView, setShowPdfListView] = useState(false);
-  const [signedURL, setSignedURL] = useState('');
-  const [playLink, setPlayLink] = useState('play-nolog');
+  const [signedURL, setSignedURL] = useState("");
+  const [playLink, setPlayLink] = useState("play-nolog");
 
   useEffect(() => {
     async function fetchUserInfo() {
@@ -44,10 +42,11 @@ const UserProfile = () => {
 
       // Wait for the DOM to be fully updated before accessing elements
       setTimeout(() => {
-        const defaultOpen = document.getElementById('defaultOpen');
-        const student3 = document.getElementById('student3');
-        const defaultOpen2 = document.getElementById('defaultOpen2');
-        const defaultOpenStudent = document.getElementById('defaultOpenStudent');
+        const defaultOpen = document.getElementById("defaultOpen");
+        const student3 = document.getElementById("student3");
+        const defaultOpen2 = document.getElementById("defaultOpen2");
+        const defaultOpenStudent =
+          document.getElementById("defaultOpenStudent");
 
         if (defaultOpen) defaultOpen.click();
         if (student3) student3.click();
@@ -55,7 +54,10 @@ const UserProfile = () => {
         if (defaultOpenStudent) defaultOpenStudent.click();
       }, 0);
 
-      if (!uInfo.error && (uInfo.role === 'mentor' || uInfo.role === 'student')) {
+      if (
+        !uInfo.error &&
+        (uInfo.role === "mentor" || uInfo.role === "student")
+      ) {
         fetchRecordings();
       }
     }
@@ -66,9 +68,9 @@ const UserProfile = () => {
   const fetchRecordings = () => {
     const url = `${environment.urls.middlewareURL}/meetings/usersRecordings`;
     fetch(url, {
-      method: 'GET',
+      method: "GET",
       headers: {
-        'Authorization': `Bearer ${cookies.login}`,
+        Authorization: `Bearer ${cookies.login}`,
       },
     })
       .then((response) => response.json())
@@ -77,80 +79,196 @@ const UserProfile = () => {
       });
   };
 
-  const openTab = (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>, tabName: string) => {
+  const openTab = (
+    evt: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+    tabName: string
+  ) => {
     var i, tabcontent, tablinks;
-    tabcontent = document.getElementsByClassName('tabcontent');
+    tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
-      const element = tabcontent[i] as HTMLElement
-      element.style.display = 'none';
+      const element = tabcontent[i] as HTMLElement;
+      element.style.display = "none";
     }
-    tablinks = document.getElementsByClassName('tablinks');
+    tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
-      tablinks[i].className = tablinks[i].className.replace(' active', '');
+      tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     const element = document.getElementById(tabName);
     if (element) {
-      element.style.display = 'block';
+      element.style.display = "block";
     } else {
       console.error(`Element with id ${tabName} not found`);
     }
-    
-    evt.currentTarget.className += ' active';
+
+    evt.currentTarget.className += " active";
   };
 
-  const showSharedSlideShowPdfList = (catId: string, catName: React.SetStateAction<string>) => {
+  const showSharedSlideShowPdfList = (
+    catId: string,
+    catName: React.SetStateAction<string>
+  ) => {
     setShowPdfListView(true);
     setCategoryName(catName);
     let pdfList: PdfItem[] = [];
     switch (catId) {
-      case '1':
+      case "1":
         pdfList = [
-          { id: '1', FileName: 'Mantra 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '2', FileName: 'Mantra 2', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '3', FileName: 'Mantra 3', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '4', FileName: 'Mantra 4', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '5', FileName: 'Mantra 5', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '6', FileName: 'Mantra 6', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "Mantra 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "2",
+            FileName: "Mantra 2",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "3",
+            FileName: "Mantra 3",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "4",
+            FileName: "Mantra 4",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "5",
+            FileName: "Mantra 5",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "6",
+            FileName: "Mantra 6",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
         break;
-      case '2':
+      case "2":
         pdfList = [
-          { id: '1', FileName: 'Exercise 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '2', FileName: 'Exercise 2', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '3', FileName: 'Exercise 3', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '4', FileName: 'Exercise 4', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '5', FileName: 'Exercise 5', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "Exercise 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "2",
+            FileName: "Exercise 2",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "3",
+            FileName: "Exercise 3",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "4",
+            FileName: "Exercise 4",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "5",
+            FileName: "Exercise 5",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
         break;
-      case '3':
+      case "3":
         pdfList = [
-          { id: '1', FileName: 'One Personal Development Lesson 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '2', FileName: 'One Personal Development Lesson 2', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '3', FileName: 'One Personal Development Lesson 3', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '4', FileName: 'One Personal Development Lesson 4', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "One Personal Development Lesson 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "2",
+            FileName: "One Personal Development Lesson 2",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "3",
+            FileName: "One Personal Development Lesson 3",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "4",
+            FileName: "One Personal Development Lesson 4",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
         break;
-      case '4':
+      case "4":
         pdfList = [
-          { id: '1', FileName: 'Chess Lesson 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '2', FileName: 'Chess Lesson 2', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '3', FileName: 'Chess Lesson 3', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "Chess Lesson 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "2",
+            FileName: "Chess Lesson 2",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "3",
+            FileName: "Chess Lesson 3",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
         break;
-      case '5':
+      case "5":
         pdfList = [
-          { id: '1', FileName: 'Game 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
-          { id: '2', FileName: 'Game 2', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "Game 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
+          {
+            id: "2",
+            FileName: "Game 2",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
         break;
-      case '6':
+      case "6":
         pdfList = [
-          { id: '1', FileName: 'Puzzles 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "Puzzles 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
         break;
       default:
         pdfList = [
-          { id: '1', FileName: 'demo 1', FilePath: 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf' },
+          {
+            id: "1",
+            FileName: "demo 1",
+            FilePath:
+              "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf",
+          },
         ];
     }
     setSharedPdfList(pdfList);
@@ -161,7 +279,7 @@ const UserProfile = () => {
   //     console.error("AdobeDC is not defined");
   //     return;
   //   }
-    
+
   //   const adobeDCView = new window.AdobeDC.View({ clientId: "YOUR_CLIENT_ID" });
   //   adobeDCView.previewFile({
   //     content: { location: { url: filePath } },
@@ -178,12 +296,12 @@ const UserProfile = () => {
 
     try {
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'Authorization': `Bearer ${document.cookie}`, // Adjust the way you retrieve the token
+          Authorization: `Bearer ${document.cookie}`, // Adjust the way you retrieve the token
         },
       });
-      
+
       if (response.ok) {
         const data = await response.json();
         setSignedURL(data);
@@ -191,26 +309,33 @@ const UserProfile = () => {
           window.open(data);
         }
       } else {
-        console.error('Failed to fetch pre-signed URL');
+        console.error("Failed to fetch pre-signed URL");
       }
     } catch (error) {
-      console.error('Error fetching pre-signed URL:', error);
+      console.error("Error fetching pre-signed URL:", error);
     }
-};
-
+  };
 
-return (
+  return (
     <div className="userProfileDiv">
       <header>
-        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
-        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" rel="stylesheet" />
+        <link
+          href="https://fonts.googleapis.com/css?family=Lato"
+          rel="stylesheet"
+        />
+        <link
+          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+          rel="stylesheet"
+        />
       </header>
       <div className="container">
         <div className="myDiv">
-          <h2>{firstName} {lastName}</h2>
+          <h2>
+            {firstName} {lastName}
+          </h2>
         </div>
       </div>
-  
+
       <div className="container">
         <div className="row">
           <div className="col-12">
@@ -218,74 +343,173 @@ return (
           </div>
         </div>
         <div className="col-12">
-          <p style={{ fontSize: '24px', marginBottom: '2px' }}><strong>Time Spent :</strong></p>
-          <div className="row" style={{ marginBottom: '20px' }}>
+          <p style={{ fontSize: "24px", marginBottom: "2px" }}>
+            <strong>Time Spent :</strong>
+          </p>
+          <div className="row" style={{ marginBottom: "20px" }}>
             <div className="col-4">
-              <p style={{ marginLeft: '20px' }}> <span className="website-icon"></span>&nbsp; Website: <strong>45 minutes</strong></p>
+              <p style={{ marginLeft: "20px" }}>
+                {" "}
+                <span className="website-icon"></span>&nbsp; Website:{" "}
+                <strong>45 minutes</strong>
+              </p>
             </div>
             <div className="col-4">
-              <p style={{ marginLeft: '20px' }}><span className="lesson"></span>&nbsp; Lesson: <strong>10 minutes</strong></p>
+              <p style={{ marginLeft: "20px" }}>
+                <span className="lesson"></span>&nbsp; Lesson:{" "}
+                <strong>10 minutes</strong>
+              </p>
             </div>
             <div className="col-4">
-              <p style={{ marginLeft: '20px' }}><span className="puzzle"></span> &nbsp; Puzzle: <strong>5 minutes</strong></p>
+              <p style={{ marginLeft: "20px" }}>
+                <span className="puzzle"></span> &nbsp; Puzzle:{" "}
+                <strong>5 minutes</strong>
+              </p>
             </div>
             <div className="col-4">
-              <p style={{ marginLeft: '20px' }}><span className="playing"></span>&nbsp; Playing: <strong>15 minutes</strong></p>
+              <p style={{ marginLeft: "20px" }}>
+                <span className="playing"></span>&nbsp; Playing:{" "}
+                <strong>15 minutes</strong>
+              </p>
             </div>
             <div className="col-4">
-              <p style={{ marginLeft: '20px' }}><span className="mentoring"></span>&nbsp; Mentoring: <strong>15 minutes</strong></p>
+              <p style={{ marginLeft: "20px" }}>
+                <span className="mentoring"></span>&nbsp; Mentoring:{" "}
+                <strong>15 minutes</strong>
+              </p>
             </div>
           </div>
         </div>
-  
+
         <div className="tab">
-          <button className="tablinks tab1" onClick={(e) => openTab(e, 'Activity')} id="defaultOpen">
-            <img src="../../../assets/images/student/activity_tab.png" className="tab-image" alt="Activity Tab" />
+          <button
+            className="tablinks tab1"
+            onClick={(e) => openTab(e, "Activity")}
+            id="defaultOpen"
+          >
+            <img
+              src="../../../assets/images/student/activity_tab.png"
+              className="tab-image"
+              alt="Activity Tab"
+            />
           </button>
-          <button className="tablinks tab2" onClick={(e) => openTab(e, 'Mentor_Session')}>
-            <img src="../../../assets/images/student/mento_tab.PNG" className="tab-image2" alt="Mentor Session Tab" />
+          <button
+            className="tablinks tab2"
+            onClick={(e) => openTab(e, "Mentor_Session")}
+          >
+            <img
+              src="../../../assets/images/student/mento_tab.PNG"
+              className="tab-image2"
+              alt="Mentor Session Tab"
+            />
           </button>
-          <button className="tablinks tab2" onClick={(e) => openTab(e, 'Professional_Development')}>
-            <img src="../../../assets/images/student/prodev_tab.PNG" className="tab-image2" alt="Professional Development Tab" />
+          <button
+            className="tablinks tab2"
+            onClick={(e) => openTab(e, "Professional_Development")}
+          >
+            <img
+              src="../../../assets/images/student/prodev_tab.PNG"
+              className="tab-image2"
+              alt="Professional Development Tab"
+            />
           </button>
-          <button className="tablinks tab2" onClick={(e) => openTab(e, 'Chess_Lession')}>
-            <img src="../../../assets/images/student/chess_tab.PNG" className="tab-image2" alt="Chess Lesson Tab" />
+          <button
+            className="tablinks tab2"
+            onClick={(e) => openTab(e, "Chess_Lession")}
+          >
+            <img
+              src="../../../assets/images/student/chess_tab.PNG"
+              className="tab-image2"
+              alt="Chess Lesson Tab"
+            />
           </button>
-          <button className="tablinks tab2" onClick={(e) => openTab(e, 'Games')}>
-            <img src="../../../assets/images/student/games_tab.PNG" className="tab-image2" alt="Games Tab" />
+          <button
+            className="tablinks tab2"
+            onClick={(e) => openTab(e, "Games")}
+          >
+            <img
+              src="../../../assets/images/student/games_tab.PNG"
+              className="tab-image2"
+              alt="Games Tab"
+            />
           </button>
-          <button className="tablinks tab2" onClick={(e) => openTab(e, 'Puzzles')}>
-            <img src="../../../assets/images/student/puzzles_tab.PNG" className="tab-image2" alt="Puzzles Tab" />
+          <button
+            className="tablinks tab2"
+            onClick={(e) => openTab(e, "Puzzles")}
+          >
+            <img
+              src="../../../assets/images/student/puzzles_tab.PNG"
+              className="tab-image2"
+              alt="Puzzles Tab"
+            />
           </button>
-          <button className="tablinks tab2" onClick={(e) => openTab(e, 'computer')}>
-            <img src="../../../assets/images/student/play_tab.PNG" className="tab-image2" alt="Computer Tab" />
+          <button
+            className="tablinks tab2"
+            onClick={(e) => openTab(e, "computer")}
+          >
+            <img
+              src="../../../assets/images/student/play_tab.PNG"
+              className="tab-image2"
+              alt="Computer Tab"
+            />
           </button>
-          <button className="tablinks tab3" onClick={(e) => openTab(e, 'Recordings')}>
-            <img src="../../../assets/images/student/recordings_tab.PNG" className="tab-image3" alt="Recordings Tab" />
+          <button
+            className="tablinks tab3"
+            onClick={(e) => openTab(e, "Recordings")}
+          >
+            <img
+              src="../../../assets/images/student/recordings_tab.PNG"
+              className="tab-image3"
+              alt="Recordings Tab"
+            />
           </button>
         </div>
-  
+
         <div id="Activity" className="tabcontent">
           <div className="rightbox">
             <div className="rb-container">
               <ul className="rb">
                 <li className="rb-item">
-                  <div className="timestamp">23rd July 2022<br />7:00 PM</div>
+                  <div className="timestamp">
+                    23rd July 2022
+                    <br />
+                    7:00 PM
+                  </div>
                   <div className="item-title">Solved 2 tactical puzzles</div>
                 </li>
                 <li className="rb-item">
-                  <div className="timestamp">19th July 2022<br />3:00 PM</div>
-                  <div className="item-title">Practiced 7 positions on <a href="/learnings">Piece Checkmates I</a></div>
+                  <div className="timestamp">
+                    19th July 2022
+                    <br />
+                    3:00 PM
+                  </div>
+                  <div className="item-title">
+                    Practiced 7 positions on{" "}
+                    <a href="/learnings">Piece Checkmates I</a>
+                  </div>
                 </li>
                 <li className="rb-item">
-                  <div className="timestamp">17st July 2022<br />7:00 PM</div>
-                  <div className="item-title">Signed up to <a target="_blank" rel="noopener noreferrer" href="http://ystemandchess.com/">ystemandchess.com</a></div>
+                  <div className="timestamp">
+                    17st July 2022
+                    <br />
+                    7:00 PM
+                  </div>
+                  <div className="item-title">
+                    Signed up to{" "}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="http://ystemandchess.com/"
+                    >
+                      ystemandchess.com
+                    </a>
+                  </div>
                 </li>
               </ul>
             </div>
           </div>
         </div>
-  
+
         <div id="Mentor_Session" className="tabcontent">
           <h3>Mentor Session</h3>
           <iframe
@@ -297,50 +521,64 @@ return (
             allowFullScreen
           ></iframe>
         </div>
-  
+
         <div id="Professional_Development" className="tabcontent">
           <h3>Professional Development</h3>
         </div>
-  
+
         <div id="Chess_Lession" className="tabcontent">
           <h3>Chess Lession</h3>
         </div>
-  
+
         <div id="Games" className="tabcontent">
           <h3>Games</h3>
         </div>
-  
+
         <div id="Puzzles" className="tabcontent">
           <h3>Puzzles</h3>
         </div>
-  
+
         <div id="computer" className="tabcontent">
           <h3>Computer</h3>
         </div>
-  
+
         <div id="Recordings" className="tabcontent">
           <h3>Recording</h3>
           {recordingList.map((record: Record, index) => (
             <p key={index}>
-              <img src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png" srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x" alt="Play Icon" width="20" />&nbsp;
+              <img
+                src="https://cdn.iconscout.com/icon/free/png-256/play-circle-round-player-music-30547.png"
+                srcSet="https://cdn.iconscout.com/icon/free/png-512/play-circle-round-player-music-30547.png 2x"
+                alt="Play Icon"
+                width="20"
+              />
+              &nbsp;
               <strong>
-                <a style={{ color: '#007bff', cursor: 'pointer' }} title="Click to see the recording" target="_blank" rel="noopener noreferrer" onClick={() => getPresignURL(record.sid, record.meetingId)}>
+                <a
+                  style={{ color: "#007bff", cursor: "pointer" }}
+                  title="Click to see the recording"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => getPresignURL(record.sid, record.meetingId)}
+                >
                   {record.sid}_{record.meetingId}_0.mp4
                 </a>
-              </strong>&nbsp; - {record.meetingStartTime}
+              </strong>
+              &nbsp; - {record.meetingStartTime}
             </p>
           ))}
         </div>
       </div>
-  
-      <div className="row" style={{ height: '500px' }}>
+
+      <div className="row" style={{ height: "500px" }}>
         <div id="pdf-div" className="pdf-view"></div>
       </div>
-  
-      <footer style={{ marginTop: '16%' }}>
+
+      <footer style={{ marginTop: "16%" }}>
         {/* <app-footer></app-footer> */}
       </footer>
     </div>
-  )};
-  
-  export default UserProfile;
\ No newline at end of file
+  );
+};
+
+export default UserProfile;
diff --git a/react-ystemandchess/src/Pages/Student/Student.tsx b/react-ystemandchess/src/Pages/Student/Student.tsx
index 889540c4..381c80d4 100644
--- a/react-ystemandchess/src/Pages/Student/Student.tsx
+++ b/react-ystemandchess/src/Pages/Student/Student.tsx
@@ -1,32 +1,32 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import "./Student.scss";
-import {environment} from "../../environments/environment";
+import { environment } from "../../environments/environment";
 
 const Student = () => {
-    const chessSrc = environment.urls.chessClientURL;
-    const [movesAhead, setMovesAhead] = useState(5);
+  const chessSrc = environment.urls.chessClientURL;
+  const [movesAhead, setMovesAhead] = useState(5);
 
-    return (
-        <div className="chess-body">
-            <br />
-            <br />
-            <br />
-            <iframe src={chessSrc} title="Chessboard" height="500" width="500"/>
-            <br />
-            <br />
-            <br />
-            <button>New Game</button>
-            <button>Play with a computer</button>
-            <button>Undo</button>
-            <br />
-            <p>
-                The computer will think
-                <input type="number" min="1" step="1" max="30" value={movesAhead}/>
-                moves ahead of you
-            </p>
-            <br />
-        </div>
-    )
-}
+  return (
+    <div className="chess-body">
+      <br />
+      <br />
+      <br />
+      <iframe src={chessSrc} title="Chessboard" height="500" width="500" />
+      <br />
+      <br />
+      <br />
+      <button>New Game</button>
+      <button>Play with a computer</button>
+      <button>Undo</button>
+      <br />
+      <p>
+        The computer will think
+        <input type="number" min="1" step="1" max="30" value={movesAhead} />
+        moves ahead of you
+      </p>
+      <br />
+    </div>
+  );
+};
 
-export default Student;
\ No newline at end of file
+export default Student;
diff --git a/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.test.tsx b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.test.tsx
index 057394e5..eae460aa 100644
--- a/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.test.tsx
+++ b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.test.tsx
@@ -1,64 +1,67 @@
-import React, { act } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import LessonOverlay from './lesson-overlay';
-import { MemoryRouter } from 'react-router';
-import { environment } from '../../../environments/environment';
+import React, { act } from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import LessonOverlay from "./lesson-overlay";
+import { MemoryRouter } from "react-router";
+import { environment } from "../../../environments/environment";
 
 // mock lesson fetching from database
 beforeEach(() => {
   global.fetch = jest.fn((url) => {
-    if (url.includes('getCompletedLessonCount')) {
+    if (url.includes("getCompletedLessonCount")) {
       return Promise.resolve({
         json: () => Promise.resolve(1),
       });
     }
 
-    if (url.includes('getLesson') && url.includes('lessonNum=1')) {
+    if (url.includes("getLesson") && url.includes("lessonNum=1")) {
       return Promise.resolve({
-        json: () => Promise.resolve({ 
+        json: () =>
+          Promise.resolve({
             startFen: "8/8/3k4/8/8/4K3/8/Q6R w - - 0 1",
             name: "simple board name",
             info: "simple board info",
-            lessonNum: 1
-        }),
+            lessonNum: 1,
+          }),
       });
     }
 
-    if (url.includes('getLesson') && url.includes('lessonNum=2')) {
+    if (url.includes("getLesson") && url.includes("lessonNum=2")) {
       return Promise.resolve({
-        json: () => Promise.resolve({ 
+        json: () =>
+          Promise.resolve({
             startFen: "8/8/3k4/8/8/4K3/8/Q6R w - - 0 1",
             name: "simple 2 board name",
             info: "simple 2 board info",
-            lessonNum: 2
-        }),
+            lessonNum: 2,
+          }),
       });
     }
 
-    if (url.includes('getLesson') && url.includes('lessonNum=3')) {
+    if (url.includes("getLesson") && url.includes("lessonNum=3")) {
       return Promise.resolve({
-        json: () => Promise.resolve({ 
+        json: () =>
+          Promise.resolve({
             startFen: "8/8/3k4/8/8/4K3/8/Q6R w - - 0 1",
             name: "simple 3 board name",
             info: "simple 3 board info",
-            lessonNum: 3
-        }),
+            lessonNum: 3,
+          }),
       });
     }
 
-    if (url.includes('getTotalPieceLesson')) {
+    if (url.includes("getTotalPieceLesson")) {
       return Promise.resolve({
         json: () => Promise.resolve(3),
       });
     }
 
-    if (url.includes('updateLessonCompletion')) {
+    if (url.includes("updateLessonCompletion")) {
       return Promise.resolve({
         json: () => Promise.resolve(),
       });
     }
 
-    return Promise.reject(new Error('Unhandled fetch request: ' + url));
+    return Promise.reject(new Error("Unhandled fetch request: " + url));
   }) as jest.Mock;
 });
 
@@ -86,22 +89,22 @@ beforeEach(() => {
 });
 
 // mock the environment urls
-jest.mock('../../../environments/environment', () => ({
+jest.mock("../../../environments/environment", () => ({
   environment: {
     urls: {
-      chessClientURL: 'http://localhost:3000',
-      middlewareURL: 'http://localhost:8000',
-    }
-  }
+      chessClientURL: "http://localhost:3000",
+      middlewareURL: "http://localhost:8000",
+    },
+  },
 }));
 
 const startLesson = async () => {
   // Simulate the chess client sending a 'ReadyToRecieve' message
   await act(async () => {
     window.dispatchEvent(
-      new MessageEvent('message', {
-        origin: 'http://localhost:3000',
-        data: 'ReadyToRecieve',
+      new MessageEvent("message", {
+        origin: "http://localhost:3000",
+        data: "ReadyToRecieve",
       })
     );
   });
@@ -109,13 +112,13 @@ const startLesson = async () => {
   // simulate user reading instructions
   const finishedBtn = screen.getByText(/Finished reading!/i);
   fireEvent.click(finishedBtn);
-}
+};
 
 // unit test on content loading popup
-test('renders the loading message', async () => {
+test("renders the loading message", async () => {
   render(
     <MemoryRouter>
-      <LessonOverlay/>
+      <LessonOverlay />
     </MemoryRouter>
   );
   const loadingText = screen.getByText(/Loading lesson/i);
@@ -123,7 +126,7 @@ test('renders the loading message', async () => {
 });
 
 // unit test on fetching & rendering first lesson
-test('triggers ReadyToRecieve message and fetches lessons', async () => {
+test("triggers ReadyToRecieve message and fetches lessons", async () => {
   render(
     <MemoryRouter>
       <LessonOverlay />
@@ -133,9 +136,9 @@ test('triggers ReadyToRecieve message and fetches lessons', async () => {
   // Simulate the chess client sending a 'ReadyToRecieve' message
   await act(async () => {
     window.dispatchEvent(
-      new MessageEvent('message', {
-        origin: 'http://localhost:3000',
-        data: 'ReadyToRecieve',
+      new MessageEvent("message", {
+        origin: "http://localhost:3000",
+        data: "ReadyToRecieve",
       })
     );
   });
@@ -153,7 +156,7 @@ test('triggers ReadyToRecieve message and fetches lessons', async () => {
 });
 
 // test whether front end responds correctly to stockfish & chessClient
-test('interact with stockfish & chessClient', async () => {
+test("interact with stockfish & chessClient", async () => {
   render(
     <MemoryRouter>
       <LessonOverlay />
@@ -164,7 +167,7 @@ test('interact with stockfish & chessClient', async () => {
   await startLesson();
   await act(async () => {
     window.dispatchEvent(
-      new MessageEvent('message', {
+      new MessageEvent("message", {
         origin: environment.urls.chessClientURL,
         data: "8/8/3k4/8/4K3/8/8/Q6R b - - 1 1",
       })
@@ -179,10 +182,10 @@ test('interact with stockfish & chessClient', async () => {
   // black move by stockFish
   const step2 = screen.getByText(/Ke7/i);
   expect(step2).toBeInTheDocument();
-})
+});
 
 // test replaying after failure
-test('failed lesson', async () => {
+test("failed lesson", async () => {
   render(
     <MemoryRouter>
       <LessonOverlay />
@@ -194,7 +197,7 @@ test('failed lesson', async () => {
   // chess client sends restart message
   await act(async () => {
     window.dispatchEvent(
-      new MessageEvent('message', {
+      new MessageEvent("message", {
         origin: environment.urls.chessClientURL,
         data: "restart",
       })
@@ -211,10 +214,10 @@ test('failed lesson', async () => {
   fireEvent.click(okBtn);
   const updatedText = screen.getByText(/Make a move to see it here!/i);
   expect(updatedText).toBeInTheDocument();
-})
+});
 
 // test lesson completion
-test('completed lesson', async () => {
+test("completed lesson", async () => {
   render(
     <MemoryRouter>
       <LessonOverlay />
@@ -226,7 +229,7 @@ test('completed lesson', async () => {
   // chess client sends successful message
   await act(async () => {
     window.dispatchEvent(
-      new MessageEvent('message', {
+      new MessageEvent("message", {
         origin: environment.urls.chessClientURL,
         data: "won:white",
       })
@@ -240,13 +243,13 @@ test('completed lesson', async () => {
   expect(okBtn).toBeInTheDocument();
 
   // consent to complete lesson, check UI update
-  await act(async () => { 
+  await act(async () => {
     fireEvent.click(okBtn);
-  })
+  });
   // read instruction
-  const readBtn = screen.getByText("Finished reading!")
+  const readBtn = screen.getByText("Finished reading!");
   expect(readBtn).toBeInTheDocument();
-  fireEvent.click(readBtn)
+  fireEvent.click(readBtn);
   // check new lessonNum
   const lessonNum3 = screen.getByText("simple 3 board info");
   expect(lessonNum3).toBeInTheDocument();
@@ -254,7 +257,7 @@ test('completed lesson', async () => {
   // finish lesson 3, the last lesson
   await act(async () => {
     window.dispatchEvent(
-      new MessageEvent('message', {
+      new MessageEvent("message", {
         origin: environment.urls.chessClientURL,
         data: "won:white",
       })
@@ -268,10 +271,10 @@ test('completed lesson', async () => {
   // will still be the last lesson, since no more lessons left
   const lessonNum3Again = screen.getByText("simple 3 board info");
   expect(lessonNum3Again).toBeInTheDocument();
-})
+});
 
 // test reset button
-test('reset lesson', async () => {
+test("reset lesson", async () => {
   render(
     <MemoryRouter>
       <LessonOverlay />
@@ -280,17 +283,17 @@ test('reset lesson', async () => {
 
   // start lesson first
   await startLesson();
-  
+
   // reset lesson
   const resetBtn = document.getElementsByClassName("reset-lesson")[0];
   fireEvent.click(resetBtn);
   // check if UI is updated
   const updatedText = screen.getByText(/Make a move to see it here!/i);
   expect(updatedText).toBeInTheDocument();
-})
+});
 
 // test lesson navigation
-test('next & previous lesson', async () => {
+test("next & previous lesson", async () => {
   render(
     <MemoryRouter>
       <LessonOverlay />
@@ -300,48 +303,47 @@ test('next & previous lesson', async () => {
   // start lesson first
   await startLesson();
   // check current lesson number
-  const lessonNum2 = screen.getByText("simple 2 board info")
+  const lessonNum2 = screen.getByText("simple 2 board info");
   expect(lessonNum2).toBeInTheDocument();
 
   // go back one lesson
-  const backBtn = screen.getByText(/Back/i).closest('button');
+  const backBtn = screen.getByText(/Back/i).closest("button");
   expect(backBtn).toBeInTheDocument();
   await act(async () => {
-      fireEvent.click(backBtn);
+    fireEvent.click(backBtn);
   });
   // read description
-  const readBtn = screen.getByText("Finished reading!")
+  const readBtn = screen.getByText("Finished reading!");
   expect(readBtn).toBeInTheDocument();
-  fireEvent.click(readBtn)
+  fireEvent.click(readBtn);
   // check previous lesson number
-  const lessonNum1 = screen.getByText("simple board info")
+  const lessonNum1 = screen.getByText("simple board info");
   expect(lessonNum1).toBeInTheDocument();
 
   // go to next lesson (initial lesson)
-  const nextBtn = screen.getByText(/Next/i).closest('button');
+  const nextBtn = screen.getByText(/Next/i).closest("button");
   expect(nextBtn).toBeInTheDocument();
   await act(async () => {
-      fireEvent.click(nextBtn);
+    fireEvent.click(nextBtn);
   });
   // read description
-  const readBtnAgain = screen.getByText("Finished reading!")
-  fireEvent.click(readBtnAgain)
+  const readBtnAgain = screen.getByText("Finished reading!");
+  fireEvent.click(readBtnAgain);
   // check lesson number to be the same as initial
   const lessonNum2again = screen.getByText("simple 2 board info");
   expect(lessonNum2again).toBeInTheDocument();
 
   // try to go to next lesson
-  const nextBtnAgain = screen.getByText(/Next/i).closest('button');
+  const nextBtnAgain = screen.getByText(/Next/i).closest("button");
   expect(nextBtnAgain).toBeInTheDocument();
   await act(async () => {
-      fireEvent.click(nextBtnAgain);
+    fireEvent.click(nextBtnAgain);
   });
-  // will stay in current lesson, since lesson 3 not activated 
+  // will stay in current lesson, since lesson 3 not activated
   const lessonNum2still = screen.getByText("simple 2 board info");
   expect(lessonNum2still).toBeInTheDocument();
-})
-
+});
 
 test("just testing", () => {
-  console.log('LessonOverlay is:', LessonOverlay);
-})
\ No newline at end of file
+  console.log("LessonOverlay is:", LessonOverlay);
+});
diff --git a/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.tsx b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.tsx
index aa950354..26b2a1a1 100644
--- a/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.tsx
+++ b/react-ystemandchess/src/Pages/piece-lessons/lesson-overlay/lesson-overlay.tsx
@@ -1,632 +1,694 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { useCookies } from 'react-cookie';
-import { environment } from '../../../environments/environment';
-import PlayLesson from '../play-lesson/PlayLesson';
-import './lesson-overlay.scss';
-import { SetPermissionLevel } from "../../../globals"; 
+import React, { useEffect, useState, useRef } from "react";
+import { useCookies } from "react-cookie";
+import { environment } from "../../../environments/environment";
+import PlayLesson from "../play-lesson/PlayLesson";
+import "./lesson-overlay.scss";
+import { SetPermissionLevel } from "../../../globals";
 // @ts-ignore
-import MoveTracker from '../move-tracker/MoveTracker';
-import { Chess } from 'chess.js';
-import { ReactComponent as RedoIcon } from '../../../images/icons/icon_redo.svg';
-import { ReactComponent as BackIcon} from '../../../images/icons/icon_back.svg';
-import { ReactComponent as BackIconInactive} from '../../../images/icons/icon_back_inactive.svg';
-import { ReactComponent as NextIcon } from '../../../images/icons/icon_next.svg';
-import { ReactComponent as NextIconInactive } from '../../../images/icons/icon_next_inactive.svg';
-import { useNavigate, useLocation } from 'react-router';
+import MoveTracker from "../move-tracker/MoveTracker";
+import { Chess } from "chess.js";
+import { ReactComponent as RedoIcon } from "../../../images/icons/icon_redo.svg";
+import { ReactComponent as BackIcon } from "../../../images/icons/icon_back.svg";
+import { ReactComponent as BackIconInactive } from "../../../images/icons/icon_back_inactive.svg";
+import { ReactComponent as NextIcon } from "../../../images/icons/icon_next.svg";
+import { ReactComponent as NextIconInactive } from "../../../images/icons/icon_next_inactive.svg";
+import { useNavigate, useLocation } from "react-router";
 
 const LessonOverlay = () => {
-    const navigate = useNavigate();
-    const location = useLocation();
-    const passedPieceName = location.state?.piece;
-    const passedLessonNumber = location.state?.lessonNum;
-    const [cookies] = useCookies(['login']);
-    const [username, setUsername] = useState(null);
-
-    // info needed for time tracking
-    const [eventID, setEventID] = useState(null);
-    const [startTime, setStartTime] = useState(null);
-
-    let isReady = false; // if chess client is ready to receive
-    let lessonStarted = false; // if lesson has started
-
-    // Information for lesson
-    const [piece, setPiece] = useState("Checkmate Pattern 1 Recognize the patterns"); // which category of lessons
-    const lessonStartFENRef = useRef("");
-    let lessonEndFEN = "";
-    const [lessonNum, setLessonNum] = useState(0); // current lesson number, 0-indexed
-    const [completedNum, setCompletedNum] = useState(0); // # of lessons completed
-    const [totalLessons, setTotalLessons] = useState(0); // # of lessons in the category
-    const [endSquare, setEndSquare] = useState('');
-    const [previousEndSquare, setPreviousEndSquare] = useState('');
-    const turnRef = useRef("white");
-    const [name, setName] = useState(""); // name of lesson
-    const [info, setInfo] = useState(""); // description of lesson
-
-    // Information needed for move tracker
-    const prevFenRef = useRef(null)
-    const currentFenRef = useRef(null);
-    const [moves, setMoves] = useState([])
-    const [level, setLevel] = useState(5);
-
-    // Controlling popups
-    const [showVPopup, setShowVPopup] = useState(false);
-    const [showXPopup, setShowXPopup] = useState(false);
-    const [ShowError, setShowError] = useState(false);
-    const [showLPopup, setShowLPopup] = useState(true);
-    const [showInstruction, setShowInstruction] = useState(false);
-
-    // Use Refs, so functions in event handler can access latest updated variable values
-    const getLessonsCompletedRef = useRef(() => {});
-    const updateCompletionRef = useRef(() => {});
-    const getTotalLessonsRef = useRef(() => {});
-    const getCurrentLessonsRef = useRef<(input: number) => void>(() => {});
-    const handleUnloadRef = useRef(() => {});
-
-    useEffect(() => {
-        startRecording(); // start recording
-        window.addEventListener('beforeunload', handleUnloadRef.current); // when unloaded, end recording
-
-        // configure eventer
-        const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
-        const eventer = window[eventMethod];
-        const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
-
-        const handleMessage = async (e) => {
-            if (e.origin === environment.urls.chessClientURL) {
-                // if client is ready to receive
-                if (e.data === 'ReadyToRecieve') {
-                    isReady = true;
-                    getTotalLessonsRef.current()
-                }
-                // start lesson if not already
-                if (!lessonStarted) {
-                    getLessonsCompletedRef.current();
-                    lessonStarted = true;
-                } else if (e.data === lessonEndFEN ) { 
-                    setShowVPopup(true); // complete lesson
-                } else if (e.data.startsWith("won")) {
-                    if (e.data.split(":")[1] == turnRef.current) setShowVPopup(true); // checkmated, complete lesson
-                    else setShowXPopup(true) // opponent checkmated, restart
-                } else if (e.data.startsWith("restart")){ // game ended without winning
-                    setShowXPopup(true)
-                }  else if (looksLikeFEN(e.data)) { // client sends board fen after user makes a move
-                    // update fens
-                    prevFenRef.current = currentFenRef.current
-                    currentFenRef.current = e.data
-
-                    // process the move for tracking
-                    processMove()
-
-                    const iframe = document.getElementById('chessBd') as HTMLIFrameElement | null;
-                    const chessBoard = iframe?.contentWindow;
-
-                    httpGetAsync( // get the next opponent move from stockfish
-                        `${environment.urls.stockFishURL}/?level=${level}&fen=${e.data}`,
-                        (response) => {
-                            const data = JSON.parse(response)
-                            const message = JSON.stringify({ boardState: data.fen, color: turnRef.current, lessonFlag: false});
-                            // update fens
-                            prevFenRef.current = currentFenRef.current
-                            currentFenRef.current = data.fen
-
-                            // process the move for tracking
-                            processMove()
-
-                            if (isReady) { // sends opponent moved board to client to update UI
-                                chessBoard.postMessage(message, environment.urls.chessClientURL);
-                            }
-                        }
-                    );
-                }
-            }
-        };
-
-        eventer(messageEvent, handleMessage, false); // fire eventer
-
-        // Check if passedPieceName is available
-        if (passedPieceName != null) setPiece(passedPieceName);
-        // Check if passedLessonNumber is available
-        if (passedLessonNumber != null) setLessonNum(passedLessonNumber);
-
-        return () => {
-            window.removeEventListener('message', handleMessage); // remove event listener
-            window.removeEventListener('beforeunload', handleUnloadRef.current); // remove listener when unloading
-            handleUnloadRef.current(); // when navigating away, stop recording time spent
-        };
-    }, []);
-
-    // get # of completed lessons for this category
-    getLessonsCompletedRef.current = async () => {
-        try {
-            // update # of completed lessons
-            const response = await fetch(
-            `${environment.urls.middlewareURL}/lessons/getCompletedLessonCount?piece=${piece}`, 
-            {
-                method: 'GET',
-                headers: { 'Authorization': `Bearer ${cookies.login}` }
-            }
-            );
-            const completedCount = await response.json();
-            setCompletedNum(completedCount);
-
-            if (passedLessonNumber != null) {
-                // if navigated from menu, with specified lesson number
-                getCurrentLessonsRef.current(passedLessonNumber);
-            } else {
-                // if directly navigated, current lesson is the next not completed lesson
-                setLessonNum(completedCount);
-                getCurrentLessonsRef.current(completedCount);
-            }
-        } catch (error) {
-            console.error('Error fetching completed lessons:', error);
-            setShowError(true)
-        }
-    };
-
-    // get the lesson content for a specific number
-    getCurrentLessonsRef.current = async (lessonNumber) => {
-        try {
-            // fetch lesson content
-            setShowLPopup(true) // loading popup to wait for response
-            let timeoutId = setTimeout(() => { // set time out to prevent fetching from taking too long
-                setShowError(true);
-            }, 10000);
-
-            const response = await fetch(
-            `${environment.urls.middlewareURL}/lessons/getLesson?piece=${piece}&lessonNum=${lessonNumber + 1}`,
-            {
-                method: 'GET', 
-                headers: { 'Authorization': `Bearer ${cookies.login}` }
-            }
-            );
-            const lessonData = await response.json();
-            setShowLPopup(false); // disable loading
-            clearTimeout(timeoutId); // clear the timeout if fetch succeeded
-            setShowInstruction(true); // make sure user reads instruction first
-
-            // Update lesson data & info
-            lessonStartFENRef.current = lessonData.startFen
-            currentFenRef.current = lessonData.startFen
-            turnRef.current = getTurnFromFEN(lessonData.startFen)
-            setInfo(lessonData.info)
-            setName(lessonData.name)
-            
-            // Check if we've reached the end of lessons
-            if (!lessonData || lessonData.lessonNum === undefined) {
-                alert('Congratulations! You have completed all lessons for this piece.');
-                return
-            }
-            // if not, let client update board UI 
-            sendLessonToChessBoard();
-
-        } catch (error) {
-            console.error('Error fetching lesson:', error);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const passedPieceName = location.state?.piece;
+  const passedLessonNumber = location.state?.lessonNum;
+  const [cookies] = useCookies(["login"]);
+  const [username, setUsername] = useState(null);
+
+  // info needed for time tracking
+  const [eventID, setEventID] = useState(null);
+  const [startTime, setStartTime] = useState(null);
+
+  let isReady = false; // if chess client is ready to receive
+  let lessonStarted = false; // if lesson has started
+
+  // Information for lesson
+  const [piece, setPiece] = useState(
+    "Checkmate Pattern 1 Recognize the patterns"
+  ); // which category of lessons
+  const lessonStartFENRef = useRef("");
+  let lessonEndFEN = "";
+  const [lessonNum, setLessonNum] = useState(0); // current lesson number, 0-indexed
+  const [completedNum, setCompletedNum] = useState(0); // # of lessons completed
+  const [totalLessons, setTotalLessons] = useState(0); // # of lessons in the category
+  const [endSquare, setEndSquare] = useState("");
+  const [previousEndSquare, setPreviousEndSquare] = useState("");
+  const turnRef = useRef("white");
+  const [name, setName] = useState(""); // name of lesson
+  const [info, setInfo] = useState(""); // description of lesson
+
+  // Information needed for move tracker
+  const prevFenRef = useRef(null);
+  const currentFenRef = useRef(null);
+  const [moves, setMoves] = useState([]);
+  const [level, setLevel] = useState(5);
+
+  // Controlling popups
+  const [showVPopup, setShowVPopup] = useState(false);
+  const [showXPopup, setShowXPopup] = useState(false);
+  const [ShowError, setShowError] = useState(false);
+  const [showLPopup, setShowLPopup] = useState(true);
+  const [showInstruction, setShowInstruction] = useState(false);
+
+  // Use Refs, so functions in event handler can access latest updated variable values
+  const getLessonsCompletedRef = useRef(() => {});
+  const updateCompletionRef = useRef(() => {});
+  const getTotalLessonsRef = useRef(() => {});
+  const getCurrentLessonsRef = useRef<(input: number) => void>(() => {});
+  const handleUnloadRef = useRef(() => {});
+
+  useEffect(() => {
+    startRecording(); // start recording
+    window.addEventListener("beforeunload", handleUnloadRef.current); // when unloaded, end recording
+
+    // configure eventer
+    const eventMethod = window.addEventListener
+      ? "addEventListener"
+      : "attachEvent";
+    const eventer = window[eventMethod];
+    const messageEvent =
+      eventMethod === "attachEvent" ? "onmessage" : "message";
+
+    const handleMessage = async (e) => {
+      if (e.origin === environment.urls.chessClientURL) {
+        // if client is ready to receive
+        if (e.data === "ReadyToRecieve") {
+          isReady = true;
+          getTotalLessonsRef.current();
         }
-    };
-
-    // get total # of lessons for category
-    getTotalLessonsRef.current = async () => {
-        try {
-            // fetch
-            const response = await fetch(
-            `${environment.urls.middlewareURL}/lessons/getTotalPieceLesson?piece=${piece}`,
-            {
-                method: 'GET',
-                headers: { 'Authorization': `Bearer ${cookies.login}` }
+        // start lesson if not already
+        if (!lessonStarted) {
+          getLessonsCompletedRef.current();
+          lessonStarted = true;
+        } else if (e.data === lessonEndFEN) {
+          setShowVPopup(true); // complete lesson
+        } else if (e.data.startsWith("won")) {
+          if (e.data.split(":")[1] == turnRef.current)
+            setShowVPopup(true); // checkmated, complete lesson
+          else setShowXPopup(true); // opponent checkmated, restart
+        } else if (e.data.startsWith("restart")) {
+          // game ended without winning
+          setShowXPopup(true);
+        } else if (looksLikeFEN(e.data)) {
+          // client sends board fen after user makes a move
+          // update fens
+          prevFenRef.current = currentFenRef.current;
+          currentFenRef.current = e.data;
+
+          // process the move for tracking
+          processMove();
+
+          const iframe = document.getElementById(
+            "chessBd"
+          ) as HTMLIFrameElement | null;
+          const chessBoard = iframe?.contentWindow;
+
+          httpGetAsync(
+            // get the next opponent move from stockfish
+            `${environment.urls.stockFishURL}/?level=${level}&fen=${e.data}`,
+            (response) => {
+              const data = JSON.parse(response);
+              const message = JSON.stringify({
+                boardState: data.fen,
+                color: turnRef.current,
+                lessonFlag: false,
+              });
+              // update fens
+              prevFenRef.current = currentFenRef.current;
+              currentFenRef.current = data.fen;
+
+              // process the move for tracking
+              processMove();
+
+              if (isReady) {
+                // sends opponent moved board to client to update UI
+                chessBoard.postMessage(
+                  message,
+                  environment.urls.chessClientURL
+                );
+              }
             }
-            );
-            const total = await response.json();
-            setTotalLessons(total); // update in UI
-        } catch (error) {
-            console.error('Error fetching total lessons:', error);
+          );
         }
+      }
     };
 
-    // Update the user's lesson progress in this category
-    updateCompletionRef.current = async () => {
-        try {      
-            if (lessonNum === completedNum) { // allow back end update only for the first unfinished lesson
-                setCompletedNum(prevNum => prevNum + 1);
-                await fetch(
-                `${environment.urls.middlewareURL}/lessons/updateLessonCompletion?piece=${piece}&lessonNum=${lessonNum}`,
-                {
-                    method: 'GET',
-                    headers: { 'Authorization': `Bearer ${cookies.login}` }
-                })
-            };
-
-            if (lessonNum < totalLessons - 1) {
-                // Move to next lesson if there are any
-                setLessonNum(prevNum => prevNum + 1);
-                getCurrentLessonsRef.current(lessonNum + 1);
-            }
-        } catch (error) {
-            console.error('Error updating lesson completion:', error);
-        }
-    };
+    eventer(messageEvent, handleMessage, false); // fire eventer
 
-    // send data to stock fish
-    const httpGetAsync = (theUrl, callback) => {
-        const xmlHttp = new XMLHttpRequest();
-        xmlHttp.onreadystatechange = function () {
-            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) callback(xmlHttp.responseText);
-        };
-        xmlHttp.open('POST', theUrl, true);
-        xmlHttp.send(null);
-    };
+    // Check if passedPieceName is available
+    if (passedPieceName != null) setPiece(passedPieceName);
+    // Check if passedLessonNumber is available
+    if (passedLessonNumber != null) setLessonNum(passedLessonNumber);
 
-    // send lesson to chess client to update UI
-    const sendLessonToChessBoard = () => {
-        // get board iframe
-        const iframe = document.getElementById('chessBd') as HTMLIFrameElement | null;
-        const chessBoard = iframe?.contentWindow;
-
-        // post message to client
-        const message = JSON.stringify({
-            boardState: lessonStartFENRef.current,
-            endState: lessonEndFEN,
-            lessonFlag: true,
-            endSquare,
-            color: turnRef.current,
-            previousEndSquare,
-            clearhighlight: true
-        });
-        chessBoard.postMessage(message, environment.urls.chessClientURL);
+    return () => {
+      window.removeEventListener("message", handleMessage); // remove event listener
+      window.removeEventListener("beforeunload", handleUnloadRef.current); // remove listener when unloading
+      handleUnloadRef.current(); // when navigating away, stop recording time spent
     };
-
-    // Navigate to previous lesson
-    const previousLesson = () => {
-        if (lessonNum > 0) { // if there is a previous lesson
-            // update and fetch previous lesson
-            setLessonNum(prevNum => prevNum - 1);
-            getCurrentLessonsRef.current(lessonNum - 1);
-
-            // clear move tracker
-            setMoves([])
-            currentFenRef.current = null;
+  }, []);
+
+  // get # of completed lessons for this category
+  getLessonsCompletedRef.current = async () => {
+    try {
+      // update # of completed lessons
+      const response = await fetch(
+        `${environment.urls.middlewareURL}/lessons/getCompletedLessonCount?piece=${piece}`,
+        {
+          method: "GET",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
-    };
-    
-    // Navigate to next lesson
-    const nextLesson = () => {
-        if (lessonNum < completedNum && lessonNum < totalLessons - 1) { // no navigation beyond first uncompleted lesson or last lesson
-            // update and fetch next lesson
-            setLessonNum(prevNum => prevNum + 1);
-            getCurrentLessonsRef.current(lessonNum + 1);
-
-            // clear move tracker
-            setMoves([])
-            currentFenRef.current = null;
+      );
+      const completedCount = await response.json();
+      setCompletedNum(completedCount);
+
+      if (passedLessonNumber != null) {
+        // if navigated from menu, with specified lesson number
+        getCurrentLessonsRef.current(passedLessonNumber);
+      } else {
+        // if directly navigated, current lesson is the next not completed lesson
+        setLessonNum(completedCount);
+        getCurrentLessonsRef.current(completedCount);
+      }
+    } catch (error) {
+      console.error("Error fetching completed lessons:", error);
+      setShowError(true);
+    }
+  };
+
+  // get the lesson content for a specific number
+  getCurrentLessonsRef.current = async (lessonNumber) => {
+    try {
+      // fetch lesson content
+      setShowLPopup(true); // loading popup to wait for response
+      let timeoutId = setTimeout(() => {
+        // set time out to prevent fetching from taking too long
+        setShowError(true);
+      }, 10000);
+
+      const response = await fetch(
+        `${
+          environment.urls.middlewareURL
+        }/lessons/getLesson?piece=${piece}&lessonNum=${lessonNumber + 1}`,
+        {
+          method: "GET",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
-    };
-
-    // reset board to play again
-    function handleReset() {
-        // get chessBoard iframe
-        const iframe = document.getElementById('chessBd') as HTMLIFrameElement | null;
-        const chessBoard = iframe?.contentWindow;
-
-        // for client to reset board
-        const message = JSON.stringify({ boardState: lessonStartFENRef.current, color: turnRef.current, lessonFlag: false, clearhighlight: true});
-        chessBoard.postMessage(message, environment.urls.chessClientURL);
-
-        // clean move tracker
-        setMoves([])
-        currentFenRef.current = lessonStartFENRef.current
+      );
+      const lessonData = await response.json();
+      setShowLPopup(false); // disable loading
+      clearTimeout(timeoutId); // clear the timeout if fetch succeeded
+      setShowInstruction(true); // make sure user reads instruction first
+
+      // Update lesson data & info
+      lessonStartFENRef.current = lessonData.startFen;
+      currentFenRef.current = lessonData.startFen;
+      turnRef.current = getTurnFromFEN(lessonData.startFen);
+      setInfo(lessonData.info);
+      setName(lessonData.name);
+
+      // Check if we've reached the end of lessons
+      if (!lessonData || lessonData.lessonNum === undefined) {
+        alert(
+          "Congratulations! You have completed all lessons for this piece."
+        );
+        return;
+      }
+      // if not, let client update board UI
+      sendLessonToChessBoard();
+    } catch (error) {
+      console.error("Error fetching lesson:", error);
     }
-
-    // user agrees to complete lesson
-    const handleVPopup = () => {
-        setShowVPopup(false); // disable popup
-        setShowLPopup(true) // load next lesson
-        updateCompletionRef.current(); // update # of lessons completed
-
-        // clean move tracker
-        setMoves([])
-        currentFenRef.current = lessonStartFENRef.current
+  };
+
+  // get total # of lessons for category
+  getTotalLessonsRef.current = async () => {
+    try {
+      // fetch
+      const response = await fetch(
+        `${environment.urls.middlewareURL}/lessons/getTotalPieceLesson?piece=${piece}`,
+        {
+          method: "GET",
+          headers: { Authorization: `Bearer ${cookies.login}` },
+        }
+      );
+      const total = await response.json();
+      setTotalLessons(total); // update in UI
+    } catch (error) {
+      console.error("Error fetching total lessons:", error);
     }
-
-    // user agrees to restart lesson after failure
-    const handleXPopup = () => {
-        setShowXPopup(false);
-        handleReset()
+  };
+
+  // Update the user's lesson progress in this category
+  updateCompletionRef.current = async () => {
+    try {
+      if (lessonNum === completedNum) {
+        // allow back end update only for the first unfinished lesson
+        setCompletedNum((prevNum) => prevNum + 1);
+        await fetch(
+          `${environment.urls.middlewareURL}/lessons/updateLessonCompletion?piece=${piece}&lessonNum=${lessonNum}`,
+          {
+            method: "GET",
+            headers: { Authorization: `Bearer ${cookies.login}` },
+          }
+        );
+      }
+
+      if (lessonNum < totalLessons - 1) {
+        // Move to next lesson if there are any
+        setLessonNum((prevNum) => prevNum + 1);
+        getCurrentLessonsRef.current(lessonNum + 1);
+      }
+    } catch (error) {
+      console.error("Error updating lesson completion:", error);
     }
-
-    // user finished instruction reading
-    const handleShowInstruction = () => {
-        setShowInstruction(false);
+  };
+
+  // send data to stock fish
+  const httpGetAsync = (theUrl, callback) => {
+    const xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+      if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
+        callback(xmlHttp.responseText);
+    };
+    xmlHttp.open("POST", theUrl, true);
+    xmlHttp.send(null);
+  };
+
+  // send lesson to chess client to update UI
+  const sendLessonToChessBoard = () => {
+    // get board iframe
+    const iframe = document.getElementById(
+      "chessBd"
+    ) as HTMLIFrameElement | null;
+    const chessBoard = iframe?.contentWindow;
+
+    // post message to client
+    const message = JSON.stringify({
+      boardState: lessonStartFENRef.current,
+      endState: lessonEndFEN,
+      lessonFlag: true,
+      endSquare,
+      color: turnRef.current,
+      previousEndSquare,
+      clearhighlight: true,
+    });
+    chessBoard.postMessage(message, environment.urls.chessClientURL);
+  };
+
+  // Navigate to previous lesson
+  const previousLesson = () => {
+    if (lessonNum > 0) {
+      // if there is a previous lesson
+      // update and fetch previous lesson
+      setLessonNum((prevNum) => prevNum - 1);
+      getCurrentLessonsRef.current(lessonNum - 1);
+
+      // clear move tracker
+      setMoves([]);
+      currentFenRef.current = null;
     }
-
-    // checks if a client message is a fen
-    function looksLikeFEN(str) {
-        return typeof str === 'string' && str.split(' ').length === 6;
+  };
+
+  // Navigate to next lesson
+  const nextLesson = () => {
+    if (lessonNum < completedNum && lessonNum < totalLessons - 1) {
+      // no navigation beyond first uncompleted lesson or last lesson
+      // update and fetch next lesson
+      setLessonNum((prevNum) => prevNum + 1);
+      getCurrentLessonsRef.current(lessonNum + 1);
+
+      // clear move tracker
+      setMoves([]);
+      currentFenRef.current = null;
+    }
+  };
+
+  // reset board to play again
+  function handleReset() {
+    // get chessBoard iframe
+    const iframe = document.getElementById(
+      "chessBd"
+    ) as HTMLIFrameElement | null;
+    const chessBoard = iframe?.contentWindow;
+
+    // for client to reset board
+    const message = JSON.stringify({
+      boardState: lessonStartFENRef.current,
+      color: turnRef.current,
+      lessonFlag: false,
+      clearhighlight: true,
+    });
+    chessBoard.postMessage(message, environment.urls.chessClientURL);
+
+    // clean move tracker
+    setMoves([]);
+    currentFenRef.current = lessonStartFENRef.current;
+  }
+
+  // user agrees to complete lesson
+  const handleVPopup = () => {
+    setShowVPopup(false); // disable popup
+    setShowLPopup(true); // load next lesson
+    updateCompletionRef.current(); // update # of lessons completed
+
+    // clean move tracker
+    setMoves([]);
+    currentFenRef.current = lessonStartFENRef.current;
+  };
+
+  // user agrees to restart lesson after failure
+  const handleXPopup = () => {
+    setShowXPopup(false);
+    handleReset();
+  };
+
+  // user finished instruction reading
+  const handleShowInstruction = () => {
+    setShowInstruction(false);
+  };
+
+  // checks if a client message is a fen
+  function looksLikeFEN(str) {
+    return typeof str === "string" && str.split(" ").length === 6;
+  }
+
+  // calculate which turn is playing , black or white
+  function getTurnFromFEN(fen) {
+    if (!fen || typeof fen !== "string") {
+      throw new Error("Invalid FEN string");
     }
 
-    // calculate which turn is playing , black or white
-    function getTurnFromFEN(fen) {
-        if (!fen || typeof fen !== 'string') {
-            throw new Error('Invalid FEN string');
-        }
-
-        const parts = fen.split(' ');
-        const turn = parts[1];
+    const parts = fen.split(" ");
+    const turn = parts[1];
 
-        if (turn === 'w') return 'white';
-        if (turn === 'b') return 'black';
+    if (turn === "w") return "white";
+    if (turn === "b") return "black";
 
-        throw new Error('Could not determine turn from FEN');
-    }
+    throw new Error("Could not determine turn from FEN");
+  }
 
-    // update the moves for tracking
-    function processMove() {
-        // if previous fen is not set (ie the first move has not been made), do nothing
-        if (prevFenRef.current) {
-            const move = getMoveFromFens(prevFenRef.current, currentFenRef.current)
-            // if the move is not null, update the moves (the move will be null only when the computer makes no move ie checkmate or statemate)
-            if (move) {
-                setMoves(prev => [...prev, move]) // update moves
-            }
-            
-        }
+  // update the moves for tracking
+  function processMove() {
+    // if previous fen is not set (ie the first move has not been made), do nothing
+    if (prevFenRef.current) {
+      const move = getMoveFromFens(prevFenRef.current, currentFenRef.current);
+      // if the move is not null, update the moves (the move will be null only when the computer makes no move ie checkmate or statemate)
+      if (move) {
+        setMoves((prev) => [...prev, move]); // update moves
+      }
     }
+  }
 
-    // Calculate what move is made by board fen before & after the move
-    function getMoveFromFens(prevFEN, currFEN) {
-        const chess = new Chess(prevFEN)
-        const moves = chess.moves({verbose: true})
-
-        for (let i = 0; i < moves.length; i++) {
-            const possibleChess = new Chess(prevFEN)
-            possibleChess.move(moves[i])
-            
-            if (getPositionKey(possibleChess.fen()) === getPositionKey(currFEN)) {
-                return moves[i].san
-            }
-        }
+  // Calculate what move is made by board fen before & after the move
+  function getMoveFromFens(prevFEN, currFEN) {
+    const chess = new Chess(prevFEN);
+    const moves = chess.moves({ verbose: true });
 
-        // move not found
-        return null
-    }
+    for (let i = 0; i < moves.length; i++) {
+      const possibleChess = new Chess(prevFEN);
+      possibleChess.move(moves[i]);
 
-    function getPositionKey(fen) {
-        // only compare the first 4 parts of the FEN (board, active color, castling, en passant)
-        if(!fen) return;
-        return fen.split(" ").slice(0, 3).join(" ")
+      if (getPositionKey(possibleChess.fen()) === getPositionKey(currFEN)) {
+        return moves[i].san;
+      }
     }
 
-    // start recording when users started browsing website
-    async function startRecording() {
-        const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
-
-        // do nothing if the user is not logged in
-        if(uInfo.error) return;
-        setUsername(uInfo.username); // else record username
-
-        // start recording user's time spent browsing the website
-        const response = await fetch(
-        `${environment.urls.middlewareURL}/timeTracking/start?username=${uInfo.username}&eventType=lesson&eventName=${piece}`, 
+    // move not found
+    return null;
+  }
+
+  function getPositionKey(fen) {
+    // only compare the first 4 parts of the FEN (board, active color, castling, en passant)
+    if (!fen) return;
+    return fen.split(" ").slice(0, 3).join(" ");
+  }
+
+  // start recording when users started browsing website
+  async function startRecording() {
+    const uInfo = await SetPermissionLevel(cookies); // get logged-in user info
+
+    // do nothing if the user is not logged in
+    if (uInfo.error) return;
+    setUsername(uInfo.username); // else record username
+
+    // start recording user's time spent browsing the website
+    const response = await fetch(
+      `${environment.urls.middlewareURL}/timeTracking/start?username=${uInfo.username}&eventType=lesson&eventName=${piece}`,
+      {
+        method: "POST",
+        headers: { Authorization: `Bearer ${cookies.login}` },
+      }
+    );
+    if (response.status != 200) console.log(response); // error handling
+
+    // if data is fetched, record for later updates
+    const data = await response.json();
+    setEventID(data.eventId);
+    setStartTime(data.startTime);
+  }
+
+  // handler called when user exist the website, complete recording time
+  handleUnloadRef.current = async () => {
+    try {
+      const startDate = new Date(startTime);
+      const endDate = new Date();
+      const diffInMs = endDate.getTime() - startDate.getTime(); // time elapsed in milliseconds
+      const diffInSeconds = Math.floor(diffInMs / 1000); // time elapsed in seconds
+
+      // update the time users spent browsing website
+      const response = await fetch(
+        `${environment.urls.middlewareURL}/timeTracking/update?username=${username}&eventType=lesson&eventId=${eventID}&totalTime=${diffInSeconds}&eventName=${piece}`,
         {
-            method: 'POST',
-            headers: { 'Authorization': `Bearer ${cookies.login}` }
+          method: "PUT",
+          headers: { Authorization: `Bearer ${cookies.login}` },
         }
-        );
-        if(response.status != 200) console.log(response) // error handling
-
-        // if data is fetched, record for later updates
-        const data = await response.json();
-        setEventID(data.eventId);
-        setStartTime(data.startTime);
+      );
+      console.log("i put in eventname", piece);
+      if (response.status != 200) console.log(response); // error handling
+    } catch (err) {
+      console.log(err);
     }
-
-    // handler called when user exist the website, complete recording time
-    handleUnloadRef.current = async () => {
-        try {
-            const startDate = new Date(startTime)
-            const endDate = new Date();
-            const diffInMs = endDate.getTime() - startDate.getTime(); // time elapsed in milliseconds
-            const diffInSeconds = Math.floor(diffInMs / 1000); // time elapsed in seconds
-
-            // update the time users spent browsing website
-            const response = await fetch(
-                `${environment.urls.middlewareURL}/timeTracking/update?username=${username}&eventType=lesson&eventId=${eventID}&totalTime=${diffInSeconds}&eventName=${piece}`, 
-                {
-                    method: 'PUT',
-                    headers: { 'Authorization': `Bearer ${cookies.login}` }
-                }
-            );
-            console.log("i put in eventname", piece)
-            if(response.status != 200) console.log(response) // error handling
-        } catch (err) {
-            console.log(err)
-        }
-    };
-
-    return (
-        <div id="lesson-container">
-            <div className='left-right-container'>
-                <div className="switchLesson" onClick={() => navigate("/lessons-selection")}>Switch Lesson</div>
+  };
+
+  return (
+    <div id="lesson-container">
+      <div className="left-right-container">
+        <div
+          className="switchLesson"
+          onClick={() => navigate("/lessons-selection")}
+        >
+          Switch Lesson
+        </div>
+      </div>
+      <div id="chess-board">
+        <PlayLesson chessLessonSrc={environment.urls.chessClientURL} />
+      </div>
+      <div className="right-container">
+        {/* Lesson info */}
+        <div className="lesson-header">
+          <h1 className="piece_description">{piece}</h1>
+          <button className="reset-lesson" onClick={handleReset}>
+            <RedoIcon className="reset-icon" />
+          </button>
+        </div>
+        <h1 className="subheading">
+          {lessonNum + 1} / {totalLessons}: {name}
+        </h1>
+        <p className="lesson-description">{info}</p>
+
+        {/* deactivate previous button, if there are no lessons before it*/}
+        <div className="prev-next-button-container">
+          {lessonNum <= 0 ? (
+            <button className="prevNextLessonButton-inactive prev">
+              <BackIconInactive />
+              <p className="button-description">Back</p>
+            </button>
+          ) : (
+            <button
+              className="prevNextLessonButton prev"
+              onClick={previousLesson}
+            >
+              <BackIcon />
+              <p className="button-description">Back</p>
+            </button>
+          )}
+
+          {/* deactivate next button, if it goes beyond first uncompleted, or beyond last available lesson */}
+          {lessonNum >= completedNum || lessonNum >= totalLessons - 1 ? (
+            <button className="prevNextLessonButton-inactive next">
+              <p className="button-description">Next</p>
+              <NextIconInactive />
+            </button>
+          ) : (
+            <button className="prevNextLessonButton next" onClick={nextLesson}>
+              <p className="button-description">Next</p>
+              <NextIcon />
+            </button>
+          )}
+        </div>
+        <MoveTracker moves={moves} />
+      </div>
+
+      {/* connection error popup */}
+      {ShowError && (
+        <div className="popup">
+          <div className="popup-content">
+            <div className="error-cross">
+              <svg width="80" height="80" viewBox="0 0 120 120">
+                <circle
+                  className="circle"
+                  cx="60"
+                  cy="60"
+                  r="54"
+                  fill="none"
+                  stroke="#f57c7c"
+                  strokeWidth="6"
+                ></circle>
+                <path
+                  className="cross-line1"
+                  d="M40 40 L80 80"
+                  fill="none"
+                  stroke="#f57c7c"
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                />
+                <path
+                  className="cross-line2"
+                  d="M80 40 L40 80"
+                  fill="none"
+                  stroke="#f57c7c"
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                />
+              </svg>
             </div>
-            <div id="chess-board">
-                <PlayLesson chessLessonSrc={environment.urls.chessClientURL} />
+            <p className="popup-header">Failed to load content</p>
+            <p className="popup-subheading">Please reload page</p>
+          </div>
+        </div>
+      )}
+
+      {/* lesson completed popup */}
+      {showVPopup && (
+        <div className="popup">
+          <div className="popup-content">
+            <div className="success-checkmark">
+              <svg width="80" height="80" viewBox="0 0 120 120">
+                <circle
+                  className="circle"
+                  cx="60"
+                  cy="60"
+                  r="54"
+                  fill="none"
+                  stroke="#beea8b"
+                  stroke-width="6"
+                ></circle>
+                <path
+                  className="checkmark"
+                  d="M35 60 L55 80 L85 40"
+                  fill="none"
+                  stroke="#beea8b"
+                  stroke-width="8"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
+              </svg>
             </div>
-            <div className='right-container'>
-                {/* Lesson info */}
-                <div className='lesson-header'>
-                <h1 className="piece_description">{piece}</h1>
-                <button className='reset-lesson' onClick={handleReset}>
-                    <RedoIcon className='reset-icon'/>
-                </button>
-                </div>
-                <h1 className='subheading'>{lessonNum + 1} / {totalLessons}: {name}</h1>
-                <p className="lesson-description">{info}</p>
-    
-            
-                {/* deactivate previous button, if there are no lessons before it*/}
-                <div className='prev-next-button-container'>
-                {
-                    lessonNum <= 0? ( 
-                    <button className="prevNextLessonButton-inactive prev">
-                        <BackIconInactive/>
-                        <p className="button-description">Back</p>
-                    </button>
-                    ) : (
-                        
-                    <button className="prevNextLessonButton prev" onClick={previousLesson}>
-                        <BackIcon/>
-                        <p className="button-description">Back</p>
-                    </button>
-                    )
-                }
-    
-                {/* deactivate next button, if it goes beyond first uncompleted, or beyond last available lesson */}
-                {((lessonNum >= completedNum) || (lessonNum >= totalLessons - 1))? (
-                    <button className="prevNextLessonButton-inactive next">
-                        <p className="button-description">Next</p>
-                        <NextIconInactive/>
-                    </button>
-                    ) : (
-                    <button className="prevNextLessonButton next" onClick={nextLesson}>
-                        <p className="button-description">Next</p>
-                        <NextIcon/>
-                    </button>
-                    )
-                }
-                </div>
-                <MoveTracker moves={moves} />
+            <p className="popup-header">Lesson completed</p>
+            <p className="popup-subheading">Good job</p>
+            <button className="popup-button" onClick={handleVPopup}>
+              OK
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* lesson not done yet popup */}
+      {showXPopup && (
+        <div className="popup">
+          <div className="popup-content">
+            <div className="error-cross">
+              <svg width="80" height="80" viewBox="0 0 120 120">
+                <circle
+                  className="circle"
+                  cx="60"
+                  cy="60"
+                  r="54"
+                  fill="none"
+                  stroke="#f57c7c"
+                  strokeWidth="6"
+                ></circle>
+                <path
+                  className="cross-line1"
+                  d="M40 40 L80 80"
+                  fill="none"
+                  stroke="#f57c7c"
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                />
+                <path
+                  className="cross-line2"
+                  d="M80 40 L40 80"
+                  fill="none"
+                  stroke="#f57c7c"
+                  strokeWidth="8"
+                  strokeLinecap="round"
+                />
+              </svg>
             </div>
-
-            {/* connection error popup */}
-            {ShowError && (
-                <div className="popup">
-                    <div className="popup-content">
-                    <div className="error-cross">
-                        <svg width="80" height="80" viewBox="0 0 120 120">
-                        <circle
-                            className="circle"
-                            cx="60"
-                            cy="60"
-                            r="54"
-                            fill="none"
-                            stroke="#f57c7c"
-                            strokeWidth="6"
-                        ></circle>
-                        <path
-                            className="cross-line1"
-                            d="M40 40 L80 80"
-                            fill="none"
-                            stroke="#f57c7c"
-                            strokeWidth="8"
-                            strokeLinecap="round"
-                        />
-                        <path
-                            className="cross-line2"
-                            d="M80 40 L40 80"
-                            fill="none"
-                            stroke="#f57c7c"
-                            strokeWidth="8"
-                            strokeLinecap="round"
-                        />
-                        </svg>
-                    </div>
-                    <p className="popup-header">Failed to load content</p>
-                    <p className="popup-subheading">Please reload page</p>
-                    </div>
-                </div>
-                )}
-            
-            {/* lesson completed popup */}
-            {showVPopup && (
-                <div className="popup">
-                <div className="popup-content">
-                    <div className="success-checkmark">
-                    <svg width="80" height="80" viewBox="0 0 120 120">
-                        <circle className="circle" cx="60" cy="60" r="54" fill="none" stroke="#beea8b" stroke-width="6"></circle>
-                        <path className="checkmark" d="M35 60 L55 80 L85 40" fill="none" stroke="#beea8b" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path>
-                    </svg>
-                    </div>
-                    <p className="popup-header">Lesson completed</p>
-                    <p className="popup-subheading">Good job</p>
-                    <button className="popup-button" onClick={handleVPopup}>OK</button>
-                </div>
-                </div>
-            )}
-
-            {/* lesson not done yet popup */}
-            {showXPopup && (
-                <div className="popup">
-                    <div className="popup-content">
-                    <div className="error-cross">
-                        <svg width="80" height="80" viewBox="0 0 120 120">
-                        <circle
-                            className="circle"
-                            cx="60"
-                            cy="60"
-                            r="54"
-                            fill="none"
-                            stroke="#f57c7c"
-                            strokeWidth="6"
-                        ></circle>
-                        <path
-                            className="cross-line1"
-                            d="M40 40 L80 80"
-                            fill="none"
-                            stroke="#f57c7c"
-                            strokeWidth="8"
-                            strokeLinecap="round"
-                        />
-                        <path
-                            className="cross-line2"
-                            d="M80 40 L40 80"
-                            fill="none"
-                            stroke="#f57c7c"
-                            strokeWidth="8"
-                            strokeLinecap="round"
-                        />
-                        </svg>
-                    </div>
-                    <p className="popup-header">Lesson failed</p>
-                    <p className="popup-subheading">Please try again</p>
-                    <button className="popup-button" onClick={handleXPopup}>OK</button>
-                    </div>
-                </div>
-                )}
-            
-            {/* loading to wait for lesson fetching */}
-            {showLPopup && (
-                <div className="popup">
-                    <div className="popup-content">
-                    <div className="loading-spinner">
-                        <svg width="80" height="80" viewBox="0 0 120 120">
-                        <circle
-                            className="spinner"
-                            cx="60"
-                            cy="60"
-                            r="54"
-                            fill="none"
-                            stroke="#a3d0ff"
-                            strokeWidth="6"
-                        ></circle>
-                        </svg>
-                    </div>
-                    <p className="popup-header">Loading lesson...</p>
-                    <p className="popup-subheading">Please wait</p>
-                    </div>
-                </div>
-            )}
-
-            {/* have users read instructions first */}
-            {showInstruction && (
-                <div className="popup">
-                    <div className="popup-content">
-                    <p className="popup-header">Read this instruction:</p>
-                    <p className="popup-subheading">{info}</p>
-                    <button className="popup-button" onClick={handleShowInstruction}>Finished reading!</button>
-                    </div>
-                </div>
-            )}
-
+            <p className="popup-header">Lesson failed</p>
+            <p className="popup-subheading">Please try again</p>
+            <button className="popup-button" onClick={handleXPopup}>
+              OK
+            </button>
+          </div>
         </div>
-    );
+      )}
+
+      {/* loading to wait for lesson fetching */}
+      {showLPopup && (
+        <div className="popup">
+          <div className="popup-content">
+            <div className="loading-spinner">
+              <svg width="80" height="80" viewBox="0 0 120 120">
+                <circle
+                  className="spinner"
+                  cx="60"
+                  cy="60"
+                  r="54"
+                  fill="none"
+                  stroke="#a3d0ff"
+                  strokeWidth="6"
+                ></circle>
+              </svg>
+            </div>
+            <p className="popup-header">Loading lesson...</p>
+            <p className="popup-subheading">Please wait</p>
+          </div>
+        </div>
+      )}
+
+      {/* have users read instructions first */}
+      {showInstruction && (
+        <div className="popup">
+          <div className="popup-content">
+            <p className="popup-header">Read this instruction:</p>
+            <p className="popup-subheading">{info}</p>
+            <button className="popup-button" onClick={handleShowInstruction}>
+              Finished reading!
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
 
-export default LessonOverlay;
\ No newline at end of file
+export default LessonOverlay;
diff --git a/react-ystemandchess/src/globals.ts b/react-ystemandchess/src/globals.ts
index 414d2632..92a2c46c 100644
--- a/react-ystemandchess/src/globals.ts
+++ b/react-ystemandchess/src/globals.ts
@@ -3,7 +3,10 @@ let information;
 
 type SetPermissionLevelType<T> = (a: any, b?: any) => Promise<T>;
 
-export const SetPermissionLevel: SetPermissionLevelType<any> = async (cookies: any, removeCookie: Function): Promise<any> => {
+export const SetPermissionLevel: SetPermissionLevelType<any> = async (
+  cookies: any,
+  removeCookie: Function
+): Promise<any> => {
   let cookieName = "login";
   if (Object.keys(cookies).includes(cookieName)) {
     let rawData: any;
@@ -34,4 +37,3 @@ export const SetPermissionLevel: SetPermissionLevelType<any> = async (cookies: a
     return { error: "User is not logged in" };
   }
 };
-

From d8a87d2aa01ca1ddb12d9911dd182822f1a26652 Mon Sep 17 00:00:00 2001
From: pedram karimi <pedramkarimi1001@gmail.com>
Date: Tue, 17 Jun 2025 15:01:14 -0400
Subject: [PATCH 2/4] home page UI - neo-brutalist design

---
 middlewareNode/routes/users.js                |    2 +-
 react-ystemandchess/jest.config.js            |   16 +-
 react-ystemandchess/jest.setup.js             |    9 +-
 react-ystemandchess/package-lock.json         | 1539 ++++++++++++++---
 react-ystemandchess/package.json              |    1 +
 .../src/Pages/Admin/admin.test.tsx            |  142 ++
 react-ystemandchess/src/Pages/Home/Home.css   |   15 +-
 .../src/Pages/Home/Home.test.tsx              |   78 +-
 react-ystemandchess/src/Pages/Home/Home.tsx   |  239 ++-
 .../LessonsSelection.test.tsx                 |    4 +-
 react-ystemandchess/src/index.css             |   19 +-
 11 files changed, 1677 insertions(+), 387 deletions(-)
 create mode 100644 react-ystemandchess/src/Pages/Admin/admin.test.tsx

diff --git a/middlewareNode/routes/users.js b/middlewareNode/routes/users.js
index 197163ac..b13556b8 100644
--- a/middlewareNode/routes/users.js
+++ b/middlewareNode/routes/users.js
@@ -398,7 +398,7 @@ router.get("/getStudent", async (req, res) => {
 router.post("/verifyRole", async (req, res) => {
   const { token } = req.body;
 
-  if (!token) {
+  if (!token.login) {
     return res.status(400).json({ error: "Missing token" });
   }
 
diff --git a/react-ystemandchess/jest.config.js b/react-ystemandchess/jest.config.js
index 6f7c0b27..60413e65 100644
--- a/react-ystemandchess/jest.config.js
+++ b/react-ystemandchess/jest.config.js
@@ -1,14 +1,14 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
+    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest",
   },
   moduleNameMapper: {
-    '\\.(css|scss|sass)$': 'identity-obj-proxy',
-    '\\.(jpg|jpeg|png|gif)$': '<rootDir>/__mocks__/fileMock.js',
-    '\\.svg$': '<rootDir>/__mocks__/svgrMock.js',
+    "\\.(css|scss|sass)$": "identity-obj-proxy",
+    "\\.(jpg|jpeg|png|gif)$": "<rootDir>/__mocks__/fileMock.js",
+    "\\.svg$": "<rootDir>/__mocks__/svgrMock.js",
   },
-  testEnvironment: 'jsdom',
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  setupFilesAfterEnv: ['@testing-library/jest-dom', '<rootDir>/jest.setup.js'],
-  moduleDirectories: ['node_modules', 'src'],
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  setupFilesAfterEnv: ["@testing-library/jest-dom", "<rootDir>/jest.setup.js"],
+  moduleDirectories: ["node_modules", "src"],
 };
diff --git a/react-ystemandchess/jest.setup.js b/react-ystemandchess/jest.setup.js
index d3d5221a..9c8945d5 100644
--- a/react-ystemandchess/jest.setup.js
+++ b/react-ystemandchess/jest.setup.js
@@ -1,4 +1,11 @@
-import { TextEncoder, TextDecoder } from 'util';
+import { TextEncoder, TextDecoder } from "util";
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
+
+if (typeof global.TextEncoder === "undefined") {
+  global.TextEncoder = TextEncoder;
+}
+if (typeof global.TextDecoder === "undefined") {
+  global.TextDecoder = TextDecoder;
+}
diff --git a/react-ystemandchess/package-lock.json b/react-ystemandchess/package-lock.json
index abc5c77e..747c1395 100644
--- a/react-ystemandchess/package-lock.json
+++ b/react-ystemandchess/package-lock.json
@@ -53,6 +53,7 @@
         "@types/testing-library__react": "^10.0.1",
         "autoprefixer": "^10.4.20",
         "babel-jest": "^30.0.0-beta.3",
+        "jest-fixed-jsdom": "^0.0.9",
         "postcss": "^8.4.49",
         "sass": "^1.83.1",
         "tailwindcss": "^3.4.17",
@@ -92,6 +93,29 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@asamuzakjp/css-color": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-3.2.0.tgz",
+      "integrity": "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@csstools/css-calc": "^2.1.3",
+        "@csstools/css-color-parser": "^3.0.9",
+        "@csstools/css-parser-algorithms": "^3.0.4",
+        "@csstools/css-tokenizer": "^3.0.3",
+        "lru-cache": "^10.4.3"
+      }
+    },
+    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
@@ -2051,6 +2075,126 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "license": "MIT"
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.2.tgz",
+      "integrity": "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz",
+      "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.10.tgz",
+      "integrity": "sha512-TiJ5Ajr6WRd1r8HSiwJvZBiJOqtH86aHpUjq5aEKWHiII2Qfjqd/HCWKPOW8EP4vcspXbHnXrwIDlu5savQipg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@csstools/color-helpers": "^5.0.2",
+        "@csstools/css-calc": "^2.1.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz",
+      "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^3.0.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+      "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@csstools/normalize.css": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-12.1.1.tgz",
@@ -3028,6 +3172,169 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/@jest/environment-jsdom-abstract": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment-jsdom-abstract/-/environment-jsdom-abstract-30.0.0.tgz",
+      "integrity": "sha512-Fcn1eZbH1JK+bqwUVkUVprlQL3xWUrhvOe/4L0PfDkaJOiAz3HUI1m4s0bgmXBYyCyTVogBuUFZkRpAKMox5Dw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/environment": "30.0.0",
+        "@jest/fake-timers": "30.0.0",
+        "@jest/types": "30.0.0",
+        "@types/jsdom": "^21.1.7",
+        "@types/node": "*",
+        "jest-mock": "30.0.0",
+        "jest-util": "30.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/@jest/environment": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-30.0.0.tgz",
+      "integrity": "sha512-09sFbMMgS5JxYnvgmmtwIHhvoyzvR5fUPrVl8nOCrC5KdzmmErTcAxfWyAhJ2bv3rvHNQaKiS+COSG+O7oNbXw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/fake-timers": "30.0.0",
+        "@jest/types": "30.0.0",
+        "@types/node": "*",
+        "jest-mock": "30.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/@jest/fake-timers": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-30.0.0.tgz",
+      "integrity": "sha512-yzBmJcrMHAMcAEbV2w1kbxmx8WFpEz8Cth3wjLMSkq+LO8VeGKRhpr5+BUp7PPK+x4njq/b6mVnDR8e/tPL5ng==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/types": "30.0.0",
+        "@sinonjs/fake-timers": "^13.0.0",
+        "@types/node": "*",
+        "jest-message-util": "30.0.0",
+        "jest-mock": "30.0.0",
+        "jest-util": "30.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/@sinonjs/fake-timers": {
+      "version": "13.0.5",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz",
+      "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/jest-message-util": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.0.0.tgz",
+      "integrity": "sha512-pV3qcrb4utEsa/U7UI2VayNzSDQcmCllBZLSoIucrESRu0geKThFZOjjh0kACDJFJRAQwsK7GVsmS6SpEceD8w==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.27.1",
+        "@jest/types": "30.0.0",
+        "@types/stack-utils": "^2.0.3",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "micromatch": "^4.0.8",
+        "pretty-format": "30.0.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.6"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/jest-mock": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.0.0.tgz",
+      "integrity": "sha512-W2sRA4ALXILrEetEOh2ooZG6fZ01iwVs0OWMKSSWRcUlaLr4ESHuiKXDNTg+ZVgOq8Ei5445i/Yxrv59VT+XkA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/types": "30.0.0",
+        "@types/node": "*",
+        "jest-util": "30.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/pretty-format": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.0.tgz",
+      "integrity": "sha512-18NAOUr4ZOQiIR+BgI5NhQE7uREdx4ZyV0dyay5izh4yfQ+1T7BSvggxvRGoXocrRyevqW5OhScUjbi9GB8R8Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/schemas": "30.0.0",
+        "ansi-styles": "^5.2.0",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/@jest/environment-jsdom-abstract/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@jest/environment/node_modules/@jest/types": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
@@ -5152,6 +5459,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jsdom": {
+      "version": "21.1.7",
+      "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.7.tgz",
+      "integrity": "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -5521,6 +5841,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+      "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -6075,15 +6403,14 @@
       }
     },
     "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "debug": "4"
-      },
+      "peer": true,
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 14"
       }
     },
     "node_modules/ajv": {
@@ -8135,23 +8462,20 @@
       "license": "MIT"
     },
     "node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.4.0.tgz",
+      "integrity": "sha512-W0Y2HOXlPkb2yaKrCVRjinYKciu/qSLEmK0K9mcfDei3zwlnHFEHAs/Du3cIRwPqY+J4JsiBzUjoHyc8RsJ03A==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "cssom": "~0.3.6"
+        "@asamuzakjp/css-color": "^3.2.0",
+        "rrweb-cssom": "^0.8.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
-    "node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-      "license": "MIT"
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -8165,17 +8489,18 @@
       "license": "BSD-2-Clause"
     },
     "node_modules/data-urls": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
+      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "abab": "^2.0.3",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.0.0"
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/data-view-buffer": {
@@ -10856,15 +11181,17 @@
       }
     },
     "node_modules/html-encoding-sniffer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
+      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "whatwg-encoding": "^1.0.5"
+        "whatwg-encoding": "^3.1.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/html-entities": {
@@ -11013,17 +11340,18 @@
       }
     },
     "node_modules/http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/http-proxy-middleware": {
@@ -11051,16 +11379,18 @@
       }
     },
     "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "agent-base": "6",
+        "agent-base": "^7.1.2",
         "debug": "4"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/human-signals": {
@@ -12379,6 +12709,18 @@
         "@types/yargs-parser": "*"
       }
     },
+    "node_modules/jest-config/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/jest-config/node_modules/babel-jest": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.5.1.tgz",
@@ -12469,6 +12811,92 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
+    "node_modules/jest-config/node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "license": "MIT",
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-config/node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "license": "MIT"
+    },
+    "node_modules/jest-config/node_modules/data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-config/node_modules/form-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.3.tgz",
+      "integrity": "sha512-q5YBMeWy6E2Un0nMGWMgI65MAKtaylxfNJGJxpGh45YDciZB4epbWpaAfImil6CPAPTYB4sh0URQNDRIZG5F2w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-config/node_modules/html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-config/node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-config/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/jest-config/node_modules/istanbul-lib-instrument": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
@@ -12485,6 +12913,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/jest-config/node_modules/jest-environment-jsdom": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
+      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jsdom": "^16.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
     "node_modules/jest-config/node_modules/jest-get-type": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.5.1.tgz",
@@ -12560,6 +13006,70 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jest-config/node_modules/jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "license": "MIT"
+    },
+    "node_modules/jest-config/node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jest-config/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -12584,39 +13094,152 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/jest-config/node_modules/write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "license": "ISC",
+    "node_modules/jest-config/node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/jest-diff": {
-      "version": "29.7.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
-      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
-      "dev": true,
+    "node_modules/jest-config/node_modules/tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
       "license": "MIT",
       "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^29.6.3",
-        "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.7.0"
+        "punycode": "^2.1.1"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-diff/node_modules/@jest/schemas": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
-      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
-      "dev": true,
+    "node_modules/jest-config/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/jest-config/node_modules/w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-config/node_modules/webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=10.4"
+      }
+    },
+    "node_modules/jest-config/node_modules/whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "node_modules/jest-config/node_modules/whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "license": "MIT"
+    },
+    "node_modules/jest-config/node_modules/whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-config/node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/jest-config/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-config/node_modules/xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/jest-diff": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.0.0",
+        "diff-sequences": "^29.6.3",
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-diff/node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@sinclair/typebox": "^0.27.8"
@@ -12762,80 +13385,165 @@
       }
     },
     "node_modules/jest-environment-jsdom": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
-      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-30.0.0.tgz",
+      "integrity": "sha512-IjDRABkSx+HpO7+WGVKPZL5XZajWRsMo2iQIudyiG4BhCi9Uah9HrFluqLUXdjPkIOoox+utUEUl8TDR2kc/Og==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@jest/environment": "^27.5.1",
-        "@jest/fake-timers": "^27.5.1",
-        "@jest/types": "^27.5.1",
+        "@jest/environment": "30.0.0",
+        "@jest/environment-jsdom-abstract": "30.0.0",
+        "@types/jsdom": "^21.1.7",
         "@types/node": "*",
-        "jest-mock": "^27.5.1",
-        "jest-util": "^27.5.1",
-        "jsdom": "^16.6.0"
+        "jsdom": "^26.1.0"
       },
       "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/@jest/types": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
-      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
+    "node_modules/jest-environment-jsdom/node_modules/@jest/environment": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-30.0.0.tgz",
+      "integrity": "sha512-09sFbMMgS5JxYnvgmmtwIHhvoyzvR5fUPrVl8nOCrC5KdzmmErTcAxfWyAhJ2bv3rvHNQaKiS+COSG+O7oNbXw==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
+        "@jest/fake-timers": "30.0.0",
+        "@jest/types": "30.0.0",
         "@types/node": "*",
-        "@types/yargs": "^16.0.0",
-        "chalk": "^4.0.0"
+        "jest-mock": "30.0.0"
       },
       "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/@types/yargs": {
-      "version": "16.0.9",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.9.tgz",
-      "integrity": "sha512-tHhzvkFXZQeTECenFoRljLBYPZJ7jAVxqqtEI0qTLOmuultnFp4I9yKE17vTuhf7BkhCu7I4XuemPgikDVuYqA==",
+    "node_modules/jest-environment-jsdom/node_modules/@jest/fake-timers": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-30.0.0.tgz",
+      "integrity": "sha512-yzBmJcrMHAMcAEbV2w1kbxmx8WFpEz8Cth3wjLMSkq+LO8VeGKRhpr5+BUp7PPK+x4njq/b6mVnDR8e/tPL5ng==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@types/yargs-parser": "*"
+        "@jest/types": "30.0.0",
+        "@sinonjs/fake-timers": "^13.0.0",
+        "@types/node": "*",
+        "jest-message-util": "30.0.0",
+        "jest-mock": "30.0.0",
+        "jest-util": "30.0.0"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/ci-info": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
-      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/sibiraj-s"
-        }
-      ],
+    "node_modules/jest-environment-jsdom/node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+      "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/@sinonjs/fake-timers": {
+      "version": "13.0.5",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz",
+      "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true,
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.1"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/jest-util": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-27.5.1.tgz",
-      "integrity": "sha512-Kv2o/8jNvX1MQ0KGtw480E/w4fBCDOnH6+6DmeKi6LZUIlKA5kwY0YNdlzaWTiVgxqAqik11QyxDOKk543aKXw==",
+    "node_modules/jest-environment-jsdom/node_modules/jest-message-util": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-30.0.0.tgz",
+      "integrity": "sha512-pV3qcrb4utEsa/U7UI2VayNzSDQcmCllBZLSoIucrESRu0geKThFZOjjh0kACDJFJRAQwsK7GVsmS6SpEceD8w==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@jest/types": "^27.5.1",
+        "@babel/code-frame": "^7.27.1",
+        "@jest/types": "30.0.0",
+        "@types/stack-utils": "^2.0.3",
+        "chalk": "^4.1.2",
+        "graceful-fs": "^4.2.11",
+        "micromatch": "^4.0.8",
+        "pretty-format": "30.0.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.6"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/jest-mock": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-30.0.0.tgz",
+      "integrity": "sha512-W2sRA4ALXILrEetEOh2ooZG6fZ01iwVs0OWMKSSWRcUlaLr4ESHuiKXDNTg+ZVgOq8Ei5445i/Yxrv59VT+XkA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/types": "30.0.0",
         "@types/node": "*",
-        "chalk": "^4.0.0",
-        "ci-info": "^3.2.0",
-        "graceful-fs": "^4.2.9",
-        "picomatch": "^2.2.3"
+        "jest-util": "30.0.0"
       },
       "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
+    "node_modules/jest-environment-jsdom/node_modules/pretty-format": {
+      "version": "30.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.0.0.tgz",
+      "integrity": "sha512-18NAOUr4ZOQiIR+BgI5NhQE7uREdx4ZyV0dyay5izh4yfQ+1T7BSvggxvRGoXocrRyevqW5OhScUjbi9GB8R8Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@jest/schemas": "30.0.0",
+        "ansi-styles": "^5.2.0",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
+      }
+    },
+    "node_modules/jest-environment-jsdom/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/jest-environment-node": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.5.1.tgz",
@@ -12910,6 +13618,19 @@
         "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
+    "node_modules/jest-fixed-jsdom": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/jest-fixed-jsdom/-/jest-fixed-jsdom-0.0.9.tgz",
+      "integrity": "sha512-KPfqh2+sn5q2B+7LZktwDcwhCpOpUSue8a1I+BcixWLOQoEVyAjAGfH+IYZGoxZsziNojoHGRTC8xRbB1wDD4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "jest-environment-jsdom": ">=28.0.0"
+      }
+    },
     "node_modules/jest-get-type": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
@@ -13638,6 +14359,18 @@
         "@types/yargs-parser": "*"
       }
     },
+    "node_modules/jest-runner/node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/jest-runner/node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
@@ -13675,6 +14408,92 @@
       "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
       "license": "MIT"
     },
+    "node_modules/jest-runner/node_modules/cssstyle": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+      "license": "MIT",
+      "dependencies": {
+        "cssom": "~0.3.6"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-runner/node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "license": "MIT"
+    },
+    "node_modules/jest-runner/node_modules/data-urls": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
+      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.3",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-runner/node_modules/form-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.3.tgz",
+      "integrity": "sha512-q5YBMeWy6E2Un0nMGWMgI65MAKtaylxfNJGJxpGh45YDciZB4epbWpaAfImil6CPAPTYB4sh0URQNDRIZG5F2w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.35"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-runner/node_modules/html-encoding-sniffer": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
+      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^1.0.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-runner/node_modules/http-proxy-agent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
+      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/once": "1",
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/jest-runner/node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/jest-runner/node_modules/istanbul-lib-instrument": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
@@ -13691,6 +14510,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/jest-runner/node_modules/jest-environment-jsdom": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.5.1.tgz",
+      "integrity": "sha512-TFBvkTC1Hnnnrka/fUb56atfDtJ9VMZ94JkjTbggl1PEpwrYtUBKMezB3inLmWqQsXYLcMwNoDQwoBTAvFfsfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "^27.5.1",
+        "@jest/fake-timers": "^27.5.1",
+        "@jest/types": "^27.5.1",
+        "@types/node": "*",
+        "jest-mock": "^27.5.1",
+        "jest-util": "^27.5.1",
+        "jsdom": "^16.6.0"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
     "node_modules/jest-runner/node_modules/jest-haste-map": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.5.1.tgz",
@@ -13777,6 +14614,70 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/jest-runner/node_modules/jsdom": {
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
+      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "license": "MIT",
+      "dependencies": {
+        "abab": "^2.0.5",
+        "acorn": "^8.2.4",
+        "acorn-globals": "^6.0.0",
+        "cssom": "^0.4.4",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^2.0.0",
+        "decimal.js": "^10.2.1",
+        "domexception": "^2.0.1",
+        "escodegen": "^2.0.0",
+        "form-data": "^3.0.0",
+        "html-encoding-sniffer": "^2.0.1",
+        "http-proxy-agent": "^4.0.1",
+        "https-proxy-agent": "^5.0.0",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.0",
+        "parse5": "6.0.1",
+        "saxes": "^5.0.1",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.0.0",
+        "w3c-hr-time": "^1.0.2",
+        "w3c-xmlserializer": "^2.0.0",
+        "webidl-conversions": "^6.1.0",
+        "whatwg-encoding": "^1.0.5",
+        "whatwg-mimetype": "^2.3.0",
+        "whatwg-url": "^8.5.0",
+        "ws": "^7.4.6",
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-runner/node_modules/parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+      "license": "MIT"
+    },
+    "node_modules/jest-runner/node_modules/saxes": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
+      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "license": "ISC",
+      "dependencies": {
+        "xmlchars": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jest-runner/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -13792,13 +14693,99 @@
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jest-runner/node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jest-runner/node_modules/tr46": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
+      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "license": "MIT",
+      "dependencies": {
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/jest-runner/node_modules/universalify": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/jest-runner/node_modules/w3c-xmlserializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
+      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "license": "MIT",
+      "dependencies": {
+        "xml-name-validator": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/jest-runner/node_modules/webidl-conversions": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
+      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=10.4"
+      }
+    },
+    "node_modules/jest-runner/node_modules/whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "node_modules/jest-runner/node_modules/whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "license": "MIT"
+    },
+    "node_modules/jest-runner/node_modules/whatwg-url": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
+      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.7.0",
+        "tr46": "^2.1.0",
+        "webidl-conversions": "^6.1.0"
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
     "node_modules/jest-runner/node_modules/write-file-atomic": {
@@ -13813,6 +14800,33 @@
         "typedarray-to-buffer": "^3.1.5"
       }
     },
+    "node_modules/jest-runner/node_modules/ws": {
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-runner/node_modules/xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/jest-runtime": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.5.1.tgz",
@@ -14976,44 +15990,39 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz",
-      "integrity": "sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==",
+      "version": "26.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-26.1.0.tgz",
+      "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "abab": "^2.0.5",
-        "acorn": "^8.2.4",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.4.4",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^2.0.0",
-        "decimal.js": "^10.2.1",
-        "domexception": "^2.0.1",
-        "escodegen": "^2.0.0",
-        "form-data": "^3.0.0",
-        "html-encoding-sniffer": "^2.0.1",
-        "http-proxy-agent": "^4.0.1",
-        "https-proxy-agent": "^5.0.0",
+        "cssstyle": "^4.2.1",
+        "data-urls": "^5.0.0",
+        "decimal.js": "^10.5.0",
+        "html-encoding-sniffer": "^4.0.0",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.6",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
+        "nwsapi": "^2.2.16",
+        "parse5": "^7.2.1",
+        "rrweb-cssom": "^0.8.0",
+        "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^2.0.0",
-        "webidl-conversions": "^6.1.0",
-        "whatwg-encoding": "^1.0.5",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.5.0",
-        "ws": "^7.4.6",
-        "xml-name-validator": "^3.0.0"
+        "tough-cookie": "^5.1.1",
+        "w3c-xmlserializer": "^5.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^3.1.1",
+        "whatwg-mimetype": "^4.0.0",
+        "whatwg-url": "^14.1.1",
+        "ws": "^8.18.0",
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       },
       "peerDependencies": {
-        "canvas": "^2.5.0"
+        "canvas": "^3.0.0"
       },
       "peerDependenciesMeta": {
         "canvas": {
@@ -15021,21 +16030,6 @@
         }
       }
     },
-    "node_modules/jsdom/node_modules/form-data": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.3.tgz",
-      "integrity": "sha512-q5YBMeWy6E2Un0nMGWMgI65MAKtaylxfNJGJxpGh45YDciZB4epbWpaAfImil6CPAPTYB4sh0URQNDRIZG5F2w==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "es-set-tostringtag": "^2.1.0",
-        "mime-types": "^2.1.35"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -16235,10 +17229,32 @@
       }
     },
     "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5/node_modules/entities": {
       "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
     },
     "node_modules/parseurl": {
       "version": "1.3.3",
@@ -19533,6 +20549,14 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/rrweb-cssom": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
+      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -19736,15 +20760,17 @@
       "license": "ISC"
     },
     "node_modules/saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+      "dev": true,
       "license": "ISC",
+      "peer": true,
       "dependencies": {
         "xmlchars": "^2.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=v12.22.7"
       }
     },
     "node_modules/scheduler": {
@@ -21262,6 +22288,28 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "license": "MIT"
     },
+    "node_modules/tldts": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.86.tgz",
+      "integrity": "sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tldts-core": "^6.1.86"
+      },
+      "bin": {
+        "tldts": "bin/cli.js"
+      }
+    },
+    "node_modules/tldts-core": {
+      "version": "6.1.86",
+      "resolved": "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.86.tgz",
+      "integrity": "sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -21290,39 +22338,31 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.2.tgz",
+      "integrity": "sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==",
+      "dev": true,
       "license": "BSD-3-Clause",
+      "peer": true,
       "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
+        "tldts": "^6.1.32"
       },
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tough-cookie/node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=16"
       }
     },
     "node_modules/tr46": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+      "integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "punycode": "^2.1.1"
+        "punycode": "^2.3.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
     "node_modules/tryer": {
@@ -21822,15 +22862,17 @@
       }
     },
     "node_modules/w3c-xmlserializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
+      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "xml-name-validator": "^3.0.0"
+        "xml-name-validator": "^5.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/walker": {
@@ -21871,12 +22913,14 @@
       "license": "Apache-2.0"
     },
     "node_modules/webidl-conversions": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+      "dev": true,
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
-        "node": ">=10.4"
+        "node": ">=12"
       }
     },
     "node_modules/webpack": {
@@ -22017,27 +23061,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.18.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
-      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/webpack-manifest-plugin": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/webpack-manifest-plugin/-/webpack-manifest-plugin-4.1.1.tgz",
@@ -22131,12 +23154,31 @@
       }
     },
     "node_modules/whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
+      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "iconv-lite": "0.4.24"
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/whatwg-fetch": {
@@ -22146,23 +23188,29 @@
       "license": "MIT"
     },
     "node_modules/whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
-      "license": "MIT"
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
+      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/whatwg-url": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+      "integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+      "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "lodash": "^4.7.0",
-        "tr46": "^2.1.0",
-        "webidl-conversions": "^6.1.0"
+        "tr46": "^5.1.0",
+        "webidl-conversions": "^7.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/which": {
@@ -22666,16 +23714,16 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.5.10",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
-      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+      "version": "8.18.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.2.tgz",
+      "integrity": "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=8.3.0"
+        "node": ">=10.0.0"
       },
       "peerDependencies": {
         "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
+        "utf-8-validate": ">=5.0.2"
       },
       "peerDependenciesMeta": {
         "bufferutil": {
@@ -22687,10 +23735,15 @@
       }
     },
     "node_modules/xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
-      "license": "Apache-2.0"
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
+      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      }
     },
     "node_modules/xmlchars": {
       "version": "2.2.0",
diff --git a/react-ystemandchess/package.json b/react-ystemandchess/package.json
index ac729a49..aaadcb80 100644
--- a/react-ystemandchess/package.json
+++ b/react-ystemandchess/package.json
@@ -72,6 +72,7 @@
     "@types/testing-library__react": "^10.0.1",
     "autoprefixer": "^10.4.20",
     "babel-jest": "^30.0.0-beta.3",
+    "jest-fixed-jsdom": "^0.0.9",
     "postcss": "^8.4.49",
     "sass": "^1.83.1",
     "tailwindcss": "^3.4.17",
diff --git a/react-ystemandchess/src/Pages/Admin/admin.test.tsx b/react-ystemandchess/src/Pages/Admin/admin.test.tsx
new file mode 100644
index 00000000..6dbe9003
--- /dev/null
+++ b/react-ystemandchess/src/Pages/Admin/admin.test.tsx
@@ -0,0 +1,142 @@
+import { TextEncoder, TextDecoder } from "util";
+Object.assign(global, { TextEncoder, TextDecoder });
+
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { CookiesProvider } from "react-cookie";
+import Admin from "./Admin";
+
+// Mock environment
+jest.mock("../../environments/environment", () => ({
+  environment: {
+    urls: {
+      middlewareURL: "http://mock-api.com",
+    },
+  },
+}));
+
+// Mock navigate
+let mockedNavigate = jest.fn();
+
+jest.mock("react-router", () => {
+  const actual = jest.requireActual("react-router");
+  return {
+    ...actual,
+    useNavigate: () => mockedNavigate,
+  };
+});
+// Mock useCookies
+jest.mock("react-cookie", () => {
+  const actual = jest.requireActual("react-cookie");
+  return {
+    ...actual,
+    useCookies: () => [{ login: "mock-jwt-token" }, jest.fn()],
+  };
+});
+
+// Mock student with 30 completed lessons
+const mockStudent = {
+  _id: "123",
+  firstName: "Test",
+  lastName: "Student",
+  username: "student1",
+  role: "student",
+  email: "test@example.com",
+  accountCreatedAt: "2023-01-01",
+  lessonsCompleted: Array.from({ length: 30 }, (_, i) => ({
+    _id: `lesson-${i}`,
+    piece: `Lesson ${i}`,
+    lessonNumber: i,
+  })),
+  timePlayed: 120,
+};
+
+describe("Admin Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders search input and button", () => {
+    render(
+      <MemoryRouter>
+        <CookiesProvider>
+          <Admin />
+        </CookiesProvider>
+      </MemoryRouter>
+    );
+
+    const input = screen.getByPlaceholderText(
+      "Type student username to search"
+    );
+    const button = screen.getByRole("button", { name: /search/i });
+
+    expect(input).toBeInTheDocument();
+    expect(button).toBeInTheDocument();
+  });
+
+  it("calls student search API and shows student with 30 completed lessons", async () => {
+    global.fetch = jest
+      .fn()
+      // verifyRole API
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ({ verified: true }),
+      } as Response)
+      // getStudent API
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => ["student1"],
+      } as Response)
+      // getUser API
+      .mockResolvedValueOnce({
+        ok: true,
+        json: async () => mockStudent,
+      } as Response);
+
+    render(
+      <MemoryRouter>
+        <CookiesProvider>
+          <Admin />
+        </CookiesProvider>
+      </MemoryRouter>
+    );
+
+    await waitFor(() => expect(global.fetch).toHaveBeenCalled());
+
+    const input = screen.getByPlaceholderText(
+      "Type student username to search"
+    );
+    fireEvent.change(input, { target: { value: "student1" } });
+
+    const button = screen.getByRole("button", { name: /search/i });
+    fireEvent.click(button);
+
+    await waitFor(() =>
+      expect(screen.getByText("Test Student")).toBeInTheDocument()
+    );
+
+    expect(screen.getByText("(student1)")).toBeInTheDocument();
+    expect(screen.getByText("Lessons Completed: 30")).toBeInTheDocument();
+    expect(screen.getByText("Time Played: 120 mins")).toBeInTheDocument();
+  });
+
+  it("redirects to homepage if verification fails", async () => {
+    global.fetch = jest.fn().mockResolvedValueOnce({
+      ok: false,
+      json: async () => ({ error: "Not authorized" }),
+    } as Response);
+
+    render(
+      <MemoryRouter>
+        <CookiesProvider>
+          <Admin />
+        </CookiesProvider>
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(mockedNavigate).toHaveBeenCalledWith("/");
+    });
+  });
+});
diff --git a/react-ystemandchess/src/Pages/Home/Home.css b/react-ystemandchess/src/Pages/Home/Home.css
index 4f23708b..e4c39ef3 100644
--- a/react-ystemandchess/src/Pages/Home/Home.css
+++ b/react-ystemandchess/src/Pages/Home/Home.css
@@ -17,20 +17,23 @@
   display: flex;
   gap: 2rem;
   margin-bottom: 50px;
+  background-color: blue;
 }
 
 .info {
-  width: 50%;
-  height: 100%;
+  width: 10%;
+  height: 460px;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  /* flex: 1; */
+  /* justify-content: center; */
+  /* align-items: center; */
   flex-direction: column;
+  background-color: red;
 }
 
 .donateButton {
   margin-top: 2rem;
-  background-color: #1A1A1A;
+  background-color: #1a1a1a;
   border: solid 0.1rem white;
   color: white;
   border-radius: 1rem;
@@ -240,7 +243,7 @@
   padding-top: 50px;
 }
 
-.home-content4-box button{
+.home-content4-box button {
   margin-top: 0.6rem;
 }
 
diff --git a/react-ystemandchess/src/Pages/Home/Home.test.tsx b/react-ystemandchess/src/Pages/Home/Home.test.tsx
index 6d1ec150..96907b41 100644
--- a/react-ystemandchess/src/Pages/Home/Home.test.tsx
+++ b/react-ystemandchess/src/Pages/Home/Home.test.tsx
@@ -1,58 +1,62 @@
-import React, { act } from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MemoryRouter } from 'react-router';
-import Home from './Home';
+import React, { act } from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router";
+import Home from "./Home";
 
 // mock navigation function
 const mockedNavigate = jest.fn();
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
   useNavigate: () => mockedNavigate,
 }));
 
 // check if the heading is rendered
 it("renders the heading", () => {
-    render(
-        <MemoryRouter>
-            <Home/>
-        </MemoryRouter>
-    );
-    expect(screen.getByText(/Helping your child develop/i)).toBeInTheDocument();
+  render(
+    <MemoryRouter>
+      <Home />
+    </MemoryRouter>
+  );
+  expect(screen.getByText(/Helping your child develop/i)).toBeInTheDocument();
 });
 
 // check if join & subscribe subsections are rendered
 it("renders join & subscribe", () => {
-    render(
-        <MemoryRouter>
-            <Home/>
-        </MemoryRouter>
-    );
-    expect(screen.getByText(/Everyone is included. Everyone is welcome./i)).toBeInTheDocument();
-    expect(screen.getByText(/Start now and sign up later!/i)).toBeInTheDocument();
+  render(
+    <MemoryRouter>
+      <Home />
+    </MemoryRouter>
+  );
+  expect(
+    screen.getByText(/Everyone is included. Everyone is welcome./i)
+  ).toBeInTheDocument();
+  expect(screen.getByText(/Start now and sign up later!/i)).toBeInTheDocument();
 });
 
 // checks correct navigation
 it("navigates to the lessons page when Get Started is clicked", () => {
-    render(
-        <MemoryRouter>
-            <Home/>
-        </MemoryRouter>
-    );
-    // click on lesson start buttin
-    fireEvent.click(screen.getByText("Get Started!"));
-    // check if the page goes to /lessons
-    expect(mockedNavigate).toHaveBeenCalledWith("./lessons");
+  render(
+    <MemoryRouter>
+      <Home />
+    </MemoryRouter>
+  );
+  // click on lesson start buttin
+  fireEvent.click(screen.getByText("Get Started!"));
+  // check if the page goes to /lessons
+  expect(mockedNavigate).toHaveBeenCalledWith("./lessons");
 });
 
 // check if books are being rendered
 it("renders both book titles", () => {
-    render(
-        <MemoryRouter>
-            <Home/>
-        </MemoryRouter>
-    );
-    expect(screen.getByText(/Books by Devin Nakano/i)).toBeInTheDocument();
-    expect(screen.getByText(/How to Start a Tech-Based Nonprofit/i)).toBeInTheDocument();
-    expect(screen.getByText(/The Zero Dollar Workforce/i)).toBeInTheDocument();
+  render(
+    <MemoryRouter>
+      <Home />
+    </MemoryRouter>
+  );
+  expect(screen.getByText(/Books by Devin Nakano/i)).toBeInTheDocument();
+  expect(
+    screen.getByText(/How to Start a Tech-Based Nonprofit/i)
+  ).toBeInTheDocument();
+  expect(screen.getByText(/The Zero Dollar Workforce/i)).toBeInTheDocument();
 });
diff --git a/react-ystemandchess/src/Pages/Home/Home.tsx b/react-ystemandchess/src/Pages/Home/Home.tsx
index ceaeeecb..9002ee0f 100644
--- a/react-ystemandchess/src/Pages/Home/Home.tsx
+++ b/react-ystemandchess/src/Pages/Home/Home.tsx
@@ -22,9 +22,8 @@ const books = [
   },
 ];
 
-
 const Home = () => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   // Sends the user to donat
   // e page, when donate button is clicked
   const handleDonateButton = () => {
@@ -36,117 +35,180 @@ const Home = () => {
     // Handle the Buy Now button click event
     // alert("Buy Now button clicked!");
     if (title === "How to Start a Tech-Based Nonprofit") {
-      window.open("https://www.amazon.com/How-Start-Tech-based-Nonprofit-Opportunity/dp/B0C4MML5WG", "_blank");
+      window.open(
+        "https://www.amazon.com/How-Start-Tech-based-Nonprofit-Opportunity/dp/B0C4MML5WG",
+        "_blank"
+      );
     }
 
     if (title === "The Zero Dollar Workforce") {
-      window.open("https://www.amazon.com/Zero-Dollar-Workforce-Company-Spend/dp/B09NGVLQSS", "_blank");
+      window.open(
+        "https://www.amazon.com/Zero-Dollar-Workforce-Company-Spend/dp/B09NGVLQSS",
+        "_blank"
+      );
     }
-
-
   };
   return (
     <div className="home-container">
-      <div className="home-content1">
-        <div className="info">
-          <h1 id="h1-home">
+      <div className="py-12 px-8 md:px-16 flex flex-col md:flex-row items-center justify-between font-['Sora']">
+        {/* Left Side */}
+        <div className="md:w-1/2 mb-10 md:mb-0 text-left">
+          <h1 className="text-3xl md:text-4xl font-extrabold text-[var(--color-deep-green)] leading-snug mb-4">
             Helping your child develop <br />
             critical thinking skills!
           </h1>
-
-          <p>
-            We are a nonprofit organization empowering <br></br>children to find
-            their own success in STEM through <br></br>Chess, Math and Computer
-            Science.
+          <p className="text-base md:text-lg text-[var(--color-dark-text)] mb-6">
+            We are a nonprofit organization empowering <br />
+            children to find their own success in STEM through <br />
+            Chess, Math and Computer Science.
           </p>
-
-          {/* <button className="donate-button" onClick={handleDonateButton}> */}
-          {/* <strong>Donate</strong> */}
-          {/* </button> */}
-
-          <button className="donateButton">
-              Donate
+          <button className="bg-[var(--color-green)] m-0 text-white px-6 py-3 cursor-pointer transition-all duration-300 ease-in-out hover:bg-[var(--color-green-hover)] hover:-translate-y-1 hover:shadow-[4px_4px_0px_var(--color-deep-green)]">
+            Donate
           </button>
         </div>
-        <div className="pic">
+
+        {/* Right Side */}
+        <div className="md:w-1/2 relative flex justify-center">
+          <div className="w-[200px] h-[200px] bg-[var(--color-bg-accent)] border-4 border-[var(--color-deep-green)] rotate-45 absolute top-2 right-[50%] z-0"></div>
           <img
             src={Images.TreesGroup}
-            id="tree-group-img"
             alt="ystemandchess mascot"
-          ></img>
+            className="relative z-10 w-[340px] h-auto object-contain"
+          />
         </div>
       </div>
 
-      <img
-        src={Images.LogoLineBr}
-        className="logo-break"
-        alt="line break"
-      ></img>
-
-      <h1 id="floating-h1">Everyone is included. Everyone is welcome.</h1>
-
-      <div className="home-content2">
-        <div className="card1">
-          <img src={Images.Heart} alt="heart"></img>
-          <h1 id="h1-home">Free</h1>
-          <p>
-            For students who qualify for <br></br> free and reduced lunch.
-            <br></br>
-            Our lessons are free.
-          </p>
-          <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
-            <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
-            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
+      <img src={Images.LogoLineBr} className="logo-break" alt="line break" />
+
+      {/* Pricing Section */}
+      <div className="bg-[var(--color-bg-main)] py-16 px-8 md:px-16 font-['Sora'] text-left">
+        <h1 className="text-3xl md:text-4xl font-extrabold text-[var(--color-deep-green)] mb-12">
+          Everyone is included. Everyone is welcome.
+        </h1>
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Free Card */}
+          <div className="bg-[var(--color-bg-accent)] border-4 border-black rounded-xl p-6 shadow-[6px_6px_0_var(--color-deep-green)] transition-all hover:bg-[#d8efbb]">
+            <img src={Images.Heart} alt="heart" className="w-12 h-12 mb-4" />
+            <h1 className="text-2xl font-extrabold text-[var(--color-black-solid)] mb-2 uppercase tracking-wide">
+              Free
+            </h1>
+            <p className="text-[var(--color-black-hover)] text-md mb-6 font-medium leading-relaxed">
+              For students who qualify for <br />
+              free and reduced lunch. <br />
+              <span className="font-bold">Our lessons are free.</span>
+            </p>
+            <button className="bg-[var(--color-green)] text-white px-6 py-3 cursor-pointer transition-all duration-300 ease-in-out hover:bg-[var(--color-green-hover)] m-0 hover:shadow-[4px_4px_0px_var(--color-deep-green)]">
               Join Now !
-            </span>
-          </button>
-        </div>
-        <div className="card2">
-          <img src={Images.Gem} alt="gem"></img>
-          <h1 id="h1-home">Premium</h1>
-          <p>
-            For students who don't qualify <br></br> for free and reduced lunch.{" "}
-            <br></br>
-            $25 / Week <br></br> First lesson is FREE. <br></br> Cancel anytime.
-          </p>
-          <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
-            <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
-            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
+            </button>
+          </div>
+
+          {/* Premium Card */}
+          <div className="bg-[var(--color-bg-accent)] border-4 border-black rounded-xl p-6 shadow-[6px_6px_0_var(--color-deep-green)] transition-all hover:bg-[#d8efbb]">
+            <img src={Images.Gem} alt="gem" className="w-12 h-12 mb-4" />
+            <h1 className="text-2xl font-extrabold text-[var(--color-black-solid)] mb-2 uppercase tracking-wide">
+              Premium
+            </h1>
+            <p className="text-[var(--color-black-hover)] text-md mb-6 font-medium leading-relaxed">
+              For students who don't qualify <br />
+              for free and reduced lunch. <br />
+              <span className="font-bold">$25 / Week</span> <br />
+              First lesson is <span className="font-bold">FREE</span>. <br />
+              Cancel anytime.
+            </p>
+            <button className="bg-[var(--color-green)] text-white px-6 py-3 cursor-pointer transition-all duration-300 ease-in-out hover:bg-[var(--color-green-hover)] m-0 hover:shadow-[4px_4px_0px_var(--color-deep-green)]">
               Join Now !
-            </span>
-          </button>
+            </button>
+          </div>
         </div>
       </div>
 
-      <div className="home-content3">
-        <img src={Images.LargeInfo} alt="mission statement"></img>
-      </div>
+      {/* Three Action Cards */}
+      <div className="bg-[var(--color-bg-main)] py-16 px-6 md:px-16 font-['Sora']">
+        <div className="flex flex-col md:flex-row justify-between gap-6">
+          {/* Play */}
+          <div className="flex items-start bg-[var(--color-bg-lightbox)] border-l-8 border-[var(--color-deep-green)] px-6 py-4 cursor-pointer transition-all duration-300 hover:border-l-12 hover:text-[var(--color-green)]">
+            <div className="w-16 h-16 flex items-center justify-center bg-[var(--color-green)] text-white rounded-md mr-6 text-3xl font-bold select-none">
+              🎮
+            </div>
+            <div>
+              <h2 className="text-2xl font-extrabold mb-2 uppercase">Play</h2>
+              <p className="text-[var(--color-dark-text)] leading-relaxed max-w-xs">
+                We strive to empower underserved and at-risk children through
+                mentoring and STEM skills-development to enable them to pursue
+                STEM careers and change their life trajectory.
+              </p>
+            </div>
+          </div>
 
-      <div className="home-video-container">
-        <iframe
-          title="home-video"
-          className="home-video"
-          width="560"
-          height="315"
-          src="https://www.youtube.com/embed/SBr0bGgddIc"
-          style={{ "border": "0" }}
-          allowFullScreen
-        ></iframe>
+          {/* Learn */}
+          <div className="flex items-start bg-[var(--color-bg-lightbox)] border-l-8 border-[var(--color-deep-green)] px-6 py-4 cursor-pointer transition-all duration-300 hover:border-l-12 hover:text-[var(--color-green)]">
+            <div className="w-16 h-16 flex items-center justify-center bg-[var(--color-green)] text-white rounded-md mr-6 text-3xl font-bold select-none">
+              📘
+            </div>
+            <div>
+              <h2 className="text-2xl font-extrabold mb-2 uppercase">Learn</h2>
+              <p className="text-[var(--color-dark-text)] leading-relaxed max-w-xs">
+                We strive to empower underserved and at-risk children through
+                mentoring and STEM skills-development to enable them to pursue
+                STEM careers and change their life trajectory.
+              </p>
+            </div>
+          </div>
+
+          {/* Donate */}
+          <div className="flex items-start bg-[var(--color-bg-lightbox)] border-l-8 border-[var(--color-deep-green)] px-6 py-4 cursor-pointer transition-all duration-300 hover:border-l-12 hover:text-[var(--color-green)]">
+            <div className="w-16 h-16 flex items-center justify-center bg-[var(--color-green)] text-white rounded-md mr-6 text-3xl font-bold select-none">
+              💰
+            </div>
+            <div>
+              <h2 className="text-2xl font-extrabold mb-2 uppercase">Donate</h2>
+              <p className="text-[var(--color-dark-text)] leading-relaxed max-w-xs">
+                The tax deductible donation will be used to scale our program to
+                underserved communities and students. Y STEM and Chess Inc. is a
+                registered tax organization.
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <div className="home-content4">
-        <div className="home-content4-box">
-          <img src={Images.ChessGroup} alt="ChessGroup"></img>
-          <div className="lesson-link-text">
-            Start now and sign up later!
+      {/* YouTube + Box Section */}
+      <div className="bg-[var(--color-bg-main)] py-20 px-6 md:px-20 font-['Sora']">
+        <div className="flex flex-col md:flex-row items-center justify-between gap-12">
+          {/* YouTube */}
+          <div className="w-full md:w-1/2 flex justify-center">
+            <div className="border-4 border-[var(--color-deep-green)] p-3 bg-white">
+              <iframe
+                title="home-video"
+                className="w-[420px] h-[235px] md:w-[440px] md:h-[250px]"
+                src="https://www.youtube.com/embed/SBr0bGgddIc"
+                allowFullScreen
+                style={{ border: "0" }}
+              ></iframe>
+            </div>
+          </div>
+
+          {/* Box Content */}
+          <div className="w-full md:w-1/2 bg-[var(--color-bg-lightbox)] border-4 border-[var(--color-deep-green)] p-8 rounded-md flex flex-col items-center text-center">
+            <img
+              src={Images.ChessGroup}
+              alt="ChessGroup"
+              className="w-28 h-auto mb-6"
+            />
+            <div className="text-2xl font-semibold text-[var(--color-deep-green)] mb-6">
+              Start now and sign up later!
+            </div>
+
+            <button
+              className="relative inline-flex overflow-hidden rounded-full p-[2px] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-[var(--color-bg-main)] focus:ring-[var(--color-green)]"
+              onClick={() => navigate("./lessons")}
+            >
+              <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,var(--color-glow-purple-1)_0%,var(--color-glow-purple-2)_50%,var(--color-glow-purple-1)_100%)]" />
+              <span className="inline-flex items-center justify-center rounded-full bg-slate-950 px-7 py-2.5 text-lg font-semibold text-white backdrop-blur-3xl relative z-10">
+                Get Started!
+              </span>
+            </button>
           </div>
-          <button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50"
-          onClick={() => navigate('./lessons')}>
-            <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
-            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-slate-950 px-5 py-1 text-lg font-medium text-white backdrop-blur-3xl">
-             Get Started!
-            </span>
-          </button>
         </div>
       </div>
 
@@ -166,7 +228,10 @@ const Home = () => {
                 alt={`${book.title} cover`}
                 className="book-image"
               />
-              <button className="buy-now" onClick={() => handleBuyNow(book.title)}>
+              <button
+                className="buy-now"
+                onClick={() => handleBuyNow(book.title)}
+              >
                 <img src={Images.BuyNow} alt="Buy Now" />
               </button>
             </div>
@@ -186,5 +251,3 @@ const Home = () => {
 };
 
 export default Home;
-
-
diff --git a/react-ystemandchess/src/Pages/LessonsSelection/LessonsSelection.test.tsx b/react-ystemandchess/src/Pages/LessonsSelection/LessonsSelection.test.tsx
index 0998fce0..a5616a79 100644
--- a/react-ystemandchess/src/Pages/LessonsSelection/LessonsSelection.test.tsx
+++ b/react-ystemandchess/src/Pages/LessonsSelection/LessonsSelection.test.tsx
@@ -9,7 +9,7 @@ test("renders lesson selection page", () => {
       <LessonSelection />
     </MemoryRouter>
   );
-  
+
   // Check if the lesson selection title is present
   const lessonTitle = screen.getByTestId("title");
   expect(lessonTitle).toBeInTheDocument();
@@ -25,4 +25,4 @@ test("renders lesson selection page", () => {
   expect(goButton).toBeInTheDocument();
 });
 
-// MAYBE: Add more tests to check if later lessons are blocked if you haven't completed the previous ones
\ No newline at end of file
+// MAYBE: Add more tests to check if later lessons are blocked if you haven't completed the previous ones
diff --git a/react-ystemandchess/src/index.css b/react-ystemandchess/src/index.css
index b26551d9..c3b3d894 100644
--- a/react-ystemandchess/src/index.css
+++ b/react-ystemandchess/src/index.css
@@ -2,7 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-html{
+html {
   scroll-behavior: smooth;
   /* overflow-x: hidden;
   overflow-y: hidden; */
@@ -21,3 +21,20 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+:root {
+  --color-bg-main: #dff2c8;
+  --color-bg-accent: #bfd99e;
+  --color-bg-lightbox: #e8f0d9;
+
+  --color-deep-green: #2f4f2f;
+  --color-green: #556b2f;
+  --color-green-hover: #6b8e23;
+
+  --color-black-solid: #101010;
+  --color-black-hover: #1e1e1e;
+  --color-dark-text: #3a3a3a;
+
+  --color-glow-purple-1: #e2cbff;
+  --color-glow-purple-2: #393bb2;
+}

From 1e3ecb829b40cef4b970c7f67374857bb65d5477 Mon Sep 17 00:00:00 2001
From: pedram karimi <pedramkarimi1001@gmail.com>
Date: Wed, 18 Jun 2025 01:10:09 -0400
Subject: [PATCH 3/4] admin page - unit test fixes

---
 react-ystemandchess/jest.setup.js                  | 7 -------
 react-ystemandchess/src/Pages/Admin/Admin.tsx      | 2 +-
 react-ystemandchess/src/Pages/Admin/admin.test.tsx | 5 +----
 react-ystemandchess/src/setupTests.ts              | 6 +++++-
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/react-ystemandchess/jest.setup.js b/react-ystemandchess/jest.setup.js
index 9c8945d5..7bdb5002 100644
--- a/react-ystemandchess/jest.setup.js
+++ b/react-ystemandchess/jest.setup.js
@@ -2,10 +2,3 @@ import { TextEncoder, TextDecoder } from "util";
 
 global.TextEncoder = TextEncoder;
 global.TextDecoder = TextDecoder;
-
-if (typeof global.TextEncoder === "undefined") {
-  global.TextEncoder = TextEncoder;
-}
-if (typeof global.TextDecoder === "undefined") {
-  global.TextDecoder = TextDecoder;
-}
diff --git a/react-ystemandchess/src/Pages/Admin/Admin.tsx b/react-ystemandchess/src/Pages/Admin/Admin.tsx
index d671587b..7ba570a5 100644
--- a/react-ystemandchess/src/Pages/Admin/Admin.tsx
+++ b/react-ystemandchess/src/Pages/Admin/Admin.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { useCookies } from "react-cookie";
 import { environment } from "../../environments/environment";
 const Admin = () => {
diff --git a/react-ystemandchess/src/Pages/Admin/admin.test.tsx b/react-ystemandchess/src/Pages/Admin/admin.test.tsx
index 6dbe9003..41facd9e 100644
--- a/react-ystemandchess/src/Pages/Admin/admin.test.tsx
+++ b/react-ystemandchess/src/Pages/Admin/admin.test.tsx
@@ -1,9 +1,6 @@
-import { TextEncoder, TextDecoder } from "util";
-Object.assign(global, { TextEncoder, TextDecoder });
-
 import React from "react";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter } from "react-router";
 import { CookiesProvider } from "react-cookie";
 import Admin from "./Admin";
 
diff --git a/react-ystemandchess/src/setupTests.ts b/react-ystemandchess/src/setupTests.ts
index adee3c83..ec5534f6 100644
--- a/react-ystemandchess/src/setupTests.ts
+++ b/react-ystemandchess/src/setupTests.ts
@@ -1,2 +1,6 @@
-import '@testing-library/jest-dom';
+import { TextEncoder, TextDecoder } from "util";
 
+import "@testing-library/jest-dom";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

From 9087d33f77021d3784e023eb95a85a46850e8f6c Mon Sep 17 00:00:00 2001
From: Yousif Alrubaye <yousif.alrubaye1994@gmail.com>
Date: Wed, 14 Jan 2026 23:24:16 -0800
Subject: [PATCH 4/4] Fix Login.tsx syntax error

---
 .../src/features/auth/login/Login.tsx         | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/react-ystemandchess/src/features/auth/login/Login.tsx b/react-ystemandchess/src/features/auth/login/Login.tsx
index e8b5654b..1060c33b 100644
--- a/react-ystemandchess/src/features/auth/login/Login.tsx
+++ b/react-ystemandchess/src/features/auth/login/Login.tsx
@@ -47,6 +47,7 @@ const Login = () => {
       setUsernameFlag(true);
       setPasswordFlag(true);
       setLoginError('Invalid username or password');
+      setIsLoading(false);
       return;
     } else {
       setLoginError("");
@@ -80,29 +81,28 @@ const Login = () => {
         expires.setDate(expires.getDate() + 1);
         setCookie('login', JSON.parse(response).token, { expires });
 
-          let payload = JSON.parse(atob(response.split(".")[1]));
-          console.log(payload);
+        let payload = JSON.parse(atob(response.split(".")[1]));
+        console.log(payload);
 
-          switch (payload["role"]) {
-            case "student":
-              window.location.pathname = "/student-profile";
-              console.log(payload["role"]);
-              break;
-            case "parent":
-              window.location.pathname = "/parent";
-              break;
-            case "mentor":
-              window.location.pathname = "/mentor-profile";
-              break;
-            case "admin":
-              window.location.pathname = "/admin";
-              break;
-            default:
-              window.location.pathname = "";
-          }
+        switch (payload["role"]) {
+          case "student":
+            window.location.pathname = "/student-profile";
+            console.log(payload["role"]);
+            break;
+          case "parent":
+            window.location.pathname = "/parent";
+            break;
+          case "mentor":
+            window.location.pathname = "/mentor-profile";
+            break;
+          case "admin":
+            window.location.pathname = "/admin";
+            break;
+          default:
+            window.location.pathname = "";
         }
-      },
-      setIsLoading(false);
+        setIsLoading(false);
+      }
     }, () => {
       setLoginError('The username or password is incorrect.');
       setIsLoading(false);