diff --git a/React-Component/src/pages/home/home.css b/React-Component/src/pages/home/home.css
index 11acbed6..fcf284d1 100644
--- a/React-Component/src/pages/home/home.css
+++ b/React-Component/src/pages/home/home.css
@@ -17,6 +17,7 @@
   display: flex;
   gap: 2em;
   margin-bottom: 50px;
+  background-color: blue;
 }
 
 .info {
@@ -316,4 +317,4 @@ footer {
 
 .buy-now:hover img {
   filter: brightness(0.9);
-}
+}
\ No newline at end of file
diff --git a/React-Component/src/pages/home/home.jsx b/React-Component/src/pages/home/home.jsx
index 7c9d7eca..9686c602 100644
--- a/React-Component/src/pages/home/home.jsx
+++ b/React-Component/src/pages/home/home.jsx
@@ -39,31 +39,25 @@ const Home = () => {
             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.
+            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>
         </div>
-        <div className="pic">
-          <img
-            src={Images.TreesGroup}
-            id="tree-group-img"
-            alt="ystemandchess mascot"
-          ></img>
-        </div>
+
+        <img
+          src={Images.TreesGroup}
+          id="tree-group-img"
+          alt="ystemandchess mascot"
+        />
       </div>
 
-      <img
-        src={Images.LogoLineBr}
-        className="logo-break"
-        alt="line break"
-      ></img>
+      <img src={Images.LogoLineBr} className="logo-break" alt="line break" />
 
       <h1 id="floating-h1">Everyone is included.</h1>
       <h1 id="floating-h1">Everyone is welcomed.</h1>
@@ -160,4 +154,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/React-Component/src/pages/student/student.jsx b/React-Component/src/pages/student/student.jsx
index 203406af..77581754 100644
--- a/React-Component/src/pages/student/student.jsx
+++ b/React-Component/src/pages/student/student.jsx
@@ -1,32 +1,32 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import "./Student.scss";
 import {environment} from "../../environments/environment.js";
 
 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
diff --git a/middlewareNode/src/routes/users.js b/middlewareNode/src/routes/users.js
index aace0966..37a41ab6 100644
--- a/middlewareNode/src/routes/users.js
+++ b/middlewareNode/src/routes/users.js
@@ -17,6 +17,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 Activities = require("../models/activities");
@@ -26,7 +27,7 @@ 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");
 
 // Cache database client to prevent repeated connections
@@ -110,7 +111,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);
@@ -180,7 +180,7 @@ router.post(
       console.error(error.message);
       res.status(500).json("Server error");
     }
-  },
+  }
 );
 
 // @route   POST /user/children
@@ -236,7 +236,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
@@ -289,7 +289,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;
 };
@@ -297,7 +297,7 @@ 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");
@@ -318,21 +318,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 {
@@ -359,23 +366,28 @@ router.put(
     } 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();
@@ -402,4 +414,63 @@ router.get("/getMentorship",
   }
 );
 
-module.exports = router;
+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.login) {
+    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;
\ No newline at end of file
diff --git a/react-ystemandchess/jest.config.js b/react-ystemandchess/jest.config.js
index 286ee3e9..88e122ca 100644
--- a/react-ystemandchess/jest.config.js
+++ b/react-ystemandchess/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   transform: {
-    '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
+    "^.+\\.(ts|tsx|js|jsx)$": "babel-jest",
   },
   moduleNameMapper: {
     '\\.(css|scss|sass)$': 'identity-obj-proxy',
@@ -13,4 +13,4 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   setupFilesAfterEnv: ['@testing-library/jest-dom'],
   moduleDirectories: ['node_modules', 'src'],
-};
+};
\ No newline at end of file
diff --git a/react-ystemandchess/package.json b/react-ystemandchess/package.json
index b2378e86..a0753709 100644
--- a/react-ystemandchess/package.json
+++ b/react-ystemandchess/package.json
@@ -98,4 +98,4 @@
   "volta": {
     "node": "18.20.8"
   }
-}
+}
\ No newline at end of file
diff --git a/react-ystemandchess/src/App.tsx b/react-ystemandchess/src/App.tsx
index aac50eaa..e90ebae8 100644
--- a/react-ystemandchess/src/App.tsx
+++ b/react-ystemandchess/src/App.tsx
@@ -159,4 +159,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/react-ystemandchess/src/Pages/Admin/Admin.tsx b/react-ystemandchess/src/Pages/Admin/Admin.tsx
new file mode 100644
index 00000000..7ba570a5
--- /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";
+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/Admin/admin.test.tsx b/react-ystemandchess/src/Pages/Admin/admin.test.tsx
new file mode 100644
index 00000000..41facd9e
--- /dev/null
+++ b/react-ystemandchess/src/Pages/Admin/admin.test.tsx
@@ -0,0 +1,139 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+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/features/auth/login/Login.tsx b/react-ystemandchess/src/features/auth/login/Login.tsx
index fe5de8d7..1060c33b 100644
--- a/react-ystemandchess/src/features/auth/login/Login.tsx
+++ b/react-ystemandchess/src/features/auth/login/Login.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 // import { Link } from 'react-router-dom';
 import './Login.scss';
 import { useState } from 'react';
@@ -6,10 +6,10 @@ 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);
   const [isLoading, setIsLoading] = useState(false);
@@ -35,7 +35,7 @@ const Login = () => {
     if (passwordFlag === true || usernameFlag === true) {
       setLoginError('Invalid username or password');
     } else {
-      setLoginError('');
+      setLoginError("");
     }
   };
 
@@ -47,9 +47,10 @@ const Login = () => {
       setUsernameFlag(true);
       setPasswordFlag(true);
       setLoginError('Invalid username or password');
+      setIsLoading(false);
       return;
     } else {
-      setLoginError('');
+      setLoginError("");
     }
 
     let url = `${environment.urls.middlewareURL}/auth/login?username=${username}&password=${password}`;
@@ -67,7 +68,7 @@ const Login = () => {
           }
         }
       };
-      xmlHttp.open('POST', theUrl, true);
+      xmlHttp.open("POST", theUrl, true);
       xmlHttp.send(null);
     };
 
@@ -80,28 +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'])
+        switch (payload["role"]) {
+          case "student":
+            window.location.pathname = "/student-profile";
+            console.log(payload["role"]);
             break;
-          case 'parent':
-            window.location.pathname = '/parent';
+          case "parent":
+            window.location.pathname = "/parent";
             break;
-          case 'mentor':
-            window.location.pathname = '/mentor-profile';
+          case "mentor":
+            window.location.pathname = "/mentor-profile";
             break;
-          case 'admin':
-            window.location.pathname = '/admin';
+          case "admin":
+            window.location.pathname = "/admin";
             break;
           default:
-            window.location.pathname = '';
+            window.location.pathname = "";
         }
+        setIsLoading(false);
       }
-      setIsLoading(false);
     }, () => {
       setLoginError('The username or password is incorrect.');
       setIsLoading(false);
@@ -117,10 +118,10 @@ const Login = () => {
         <div className='input-wrapper'>
           <label htmlFor='username' id="username-label">Username</label>
           <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);
@@ -134,10 +135,10 @@ const Login = () => {
         <div className='input-wrapper'>
           <label htmlFor='password' id="password-label">Password</label>
           <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);
@@ -167,4 +168,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default Login;
\ No newline at end of file
diff --git a/react-ystemandchess/src/features/auth/reset-password/Reset-Password/resetPasswordService.ts b/react-ystemandchess/src/features/auth/reset-password/Reset-Password/resetPasswordService.ts
index cff77239..b333dc95 100644
--- a/react-ystemandchess/src/features/auth/reset-password/Reset-Password/resetPasswordService.ts
+++ b/react-ystemandchess/src/features/auth/reset-password/Reset-Password/resetPasswordService.ts
@@ -32,22 +32,25 @@ 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}`,
   };
 
   // Send email and return promise
   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);
+        }
       }
-    });
+    );
   });
 };
 
 module.exports = {
   sendResetPasswordEmail,
-};
+};
\ No newline at end of file
diff --git a/react-ystemandchess/src/features/home/Home.test.tsx b/react-ystemandchess/src/features/home/Home.test.tsx
index 82b694bd..4eb8ebf6 100644
--- a/react-ystemandchess/src/features/home/Home.test.tsx
+++ b/react-ystemandchess/src/features/home/Home.test.tsx
@@ -1,35 +1,37 @@
-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
@@ -47,12 +49,14 @@ it("navigates to the play page when Get Started is clicked", () => {
 
 // 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();
+});
\ No newline at end of file
diff --git a/react-ystemandchess/src/globals.ts b/react-ystemandchess/src/globals.ts
index 9cc4a323..2bde5806 100644
--- a/react-ystemandchess/src/globals.ts
+++ b/react-ystemandchess/src/globals.ts
@@ -104,5 +104,4 @@ export const SetPermissionLevel: SetPermissionLevelType<any> = async (cookies: a
     // No login cookie found - user is not authenticated
     return { error: "User is not logged in" };
   }
-};
-
+};
\ No newline at end of file
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;
+}
diff --git a/react-ystemandchess/src/setupTests.ts b/react-ystemandchess/src/setupTests.ts
index d9f059b1..521400c5 100644
--- a/react-ystemandchess/src/setupTests.ts
+++ b/react-ystemandchess/src/setupTests.ts
@@ -11,4 +11,4 @@ global.console = {
   ...console,
   error: jest.fn(),
   warn: jest.fn(),
-};
+};
\ No newline at end of file