diff --git a/README.md b/README.md
index 1e28293..06b5b33 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,12 @@
 # Autograder
 
-## Big Picture ##
+## Big Picture
+
 1. Front end is written in React, which is a Typescript framework. Vite is the front-end build tool.
 2. Database will be Postgres. Database migrations are managed using Goose.
 3. Backend is Go with the Echo framework.
-   
-## How to setup the development environment 
+
+## How to setup the development environment
 
 ### On Linux/Mac
 
@@ -14,21 +15,25 @@
 3. On the terminal, run `chmod +x ./dev.sh` to modify permissions
 4. On the terminal, run `cd web && yarn && yarn run dev` to install the React dependencies. Once you see the `build in <time>ms` message, you can exit out of the command using `Ctrl+C`
 5. Add the following to `~/.bashrc` on Linux or `~/.zshrc` on Mac.
+
 ```
 export GOROOT=/usr/local/go
 export GOPATH=$HOME/go
 export GOBIN=$GOPATH/bin
 export PATH=$GOPATH/bin:$GOROOT/bin:$PATH
 ```
+
 Then, run `source ~/.bashrc` on Linux or `source ~/.zshrc` on Mac.
 
 6. Install `air` (live-reload for go applications) and `goose` (database migration tool) by running
+
 ```
 go install github.com/air-verse/air@latest
 go install github.com/pressly/goose/v3/cmd/goose@latest
 ```
+
 7. [Install postgres](#how-to-install-postgres) and create a database named `autograder`. Make sure you postgres is up and running. You can download [Beekeeper Studio](https://www.beekeeperstudio.io/get-community) as a database explorer if you don't already have one.
-8. Run `source .envrc` to export the variables of `.envrc` on your local machine. Run `goose up` to run all the required database migrations. 
+8. Run `source .envrc` to export the variables of `.envrc` on your local machine. Run `goose up` to run all the required database migrations.
 9. Open http://localhost:8080/ to access the web app.
 
 ### On Windows w/o WSL
@@ -54,6 +59,7 @@ go install github.com/pressly/goose/v3/cmd/goose@latest
 ## How to install postgres
 
 ### Mac (option 1)
+
 1. Download the most recent version of postgres via their [installer](https://www.enterprisedb.com/downloads/postgres-postgresql-downloads) under the column "Mac OS X"
 2. Go through the steps in the installer. When it prompts you to set up your database admin make the username `postgres` and password `postgres`.
 3. After the install is finished, open pgAdmin which will prompt you to type in your password (`postgres`) to connect to your local server that's been setup via the installation.
@@ -61,6 +67,7 @@ go install github.com/pressly/goose/v3/cmd/goose@latest
 5. Name it `autograder` and click Save.
 
 ### Mac (option 2)
+
 1. Install postgres using `brew install postgresql`.
 2. Start postgres using `brew services start postgresql`.
 3. Run `psql postgres`.
@@ -71,16 +78,19 @@ go install github.com/pressly/goose/v3/cmd/goose@latest
 ## How to build the binary
 
 **Note:** Before building the binary for deployment, please do the following:
-1. Set up a Postgres database. Update the credentials in `config.yaml` with the database's credentials. 
-2. Chanage the default JWT Secret in `config.yaml` to be a long and secure sequence of charaters. 
+
+1. Set up a Postgres database. Update the credentials in `config.yaml` with the database's credentials.
+2. Chanage the default JWT Secret in `config.yaml` to be a long and secure sequence of charaters.
 3. TODO (Setting up Email stuff)
 
 ### For Linux / Mac
-Run `go build main.go` on the terminal. This will create a new binary file. 
+
+Run `go build main.go` on the terminal. This will create a new binary file.
 
 You can now run the binary using `./main` on the terminal.
 
 ### For Windows
+
 Run `env GOOS=windows GOARCH=arm64 go build main.go` on the terminal.
 
 If the above doesn't generate a binary or generates a binary that doesn't run on your computer, change the `GOARCH` value from `arm64` to the correct one for your CPU. You can find the list for valid `GOARCH` values [here](https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63#goarch-values).
@@ -88,7 +98,8 @@ If the above doesn't generate a binary or generates a binary that doesn't run on
 You can now run the using `main.exe`
 
 ## The Three-Layered Architecture
-The backend for this project makes use of a slightly modified version of the Three-Layered Architecture. The incoming requests are parsed into the correspoding entity (defined inside `models`) by the `handler` layer. A valid request passes from the `handler` into the `service` layer, where all the business logic is performed. The next step after the `service` layer is the `datastore` layer, where the necessary database operation is performed. 
+
+The backend for this project makes use of a slightly modified version of the Three-Layered Architecture. The incoming requests are parsed into the correspoding entity (defined inside `models`) by the `handler` layer. A valid request passes from the `handler` into the `service` layer, where all the business logic is performed. The next step after the `service` layer is the `datastore` layer, where the necessary database operation is performed.
 
 Such an architecture allows one layer to be modified and tested independently of other operations in addition to providing all the benefits of modularity.
 
@@ -97,15 +108,17 @@ Such an architecture allows one layer to be modified and tested independently of
 You can use Postman to test the APIs.
 
 Register:
+
 ```
-POST 
+POST
 URL: 'http://localhost:8080/api/auth/register/<id>?token=<token>'
 Raw JSON: {"first_name": "New", "last_name": "User", "password": "Hello123$%"}
 ```
 
-From the returned Set-Cookie value, take the token's value and set it as the Bearer Token value inside Authorization. 
+From the returned Set-Cookie value, take the token's value and set it as the Bearer Token value inside Authorization.
 
 Create Invite (need token):
+
 ```
 POST
 URL: 'http://localhost:8080/api/auth/invite'
@@ -113,55 +126,63 @@ Raw JSON: {"email": "testing@gmail.com", "user_role": "student"}
 ```
 
 Create Classroom (need token):
+
 ```
-POST 
+POST
 URL: 'http://localhost:8080/api/classroom'
 Raw JSON: {"name":"Joe"}
 ```
 
 Add user to classroom / alter the roles of existing users in classroom:
+
 ```
 PUT
 URL: http://localhost:8080/api/auth/<classroomId>/user
-Raw JSON: 
+Raw JSON:
 {
     "users": [{"email": "test@udallas.edu", "role": "student"}]
 }
 ```
 
 Change the name of a classroom:
+
 ```
 PATCH
-URL: http://localhost:8080/api/classroom/edit/<classroomId>
+URL: http://localhost:8080/api/classroom/<classroomId>
 Raw JSON: {"name": "New Name"}
 ```
 
 Delete a classroom:
+
 ```
 DELETE
-URL: http://localhost:8080/api/classroom/delete/<classroomId>
+URL: http://localhost:8080/api/classroom/<classroomId>
 ```
 
 Get 'view mode' assignments
+
 ```
 GET
 URL: http://localhost:8080/api/classroom/<classroomId>/view_assignments
 ```
 
 Login:
+
 ```
-POST 
+POST
 URL: 'http://localhost:8080/api/auth/login'
 Raw JSON: {"email":"test@udallas.edu", "password":"Hello123$%"}
 ```
 
 Logout:
+
 ```
 POST
 URL: 'http://localhost:8080/api/auth/logout/<sessionId>'
 ```
 
 Password Reset Request:
+
 ```
 POST
 URL: 'http://localhost:8080/api/auth/password'
@@ -169,6 +190,7 @@ Raw JSON: {"email":"test@udallas.edu"}
 ```
 
 Password Reset:
+
 ```
 POST
 URL: 'http://localhost:8080/api/auth/reset_password/<requestId>?token=<token>'
@@ -176,12 +198,14 @@ Raw JSON: {"password":"TryingThis123!"}
 ```
 
 Refresh Access Token:
+
 ```
 POST
 URL: 'http://localhost:8080/api/auth/refresh'
 ```
 
 Change User Info:
+
 ```
 PUT
 URL: 'http://localhost:8080/api/auth/user_info
@@ -194,12 +218,16 @@ Raw JSON:
 }
 
 ```
+
 Is Login Valid:
+
 ```
 GET
 URL: 'http://localhost:8080/api/auth/valid_login
 ```
+
 Get user's first and last name:
+
 ```
 GET
 URL: 'http://localhost:8080/api/auth/user_name'
diff --git a/handler/router.go b/handler/router.go
index ad2ee15..ca394f2 100644
--- a/handler/router.go
+++ b/handler/router.go
@@ -96,8 +96,8 @@ func (router *HttpRouter) SetupRoutes() {
 	classroom.GET("/all", router.GetClassroomsOfUser)
 	classroom.POST("", router.CreateClassroom)
 	classroom.GET("/:room_id", router.GetClassroom)
-	classroom.PATCH("/edit/:room_id", router.EditClassroom)
-	classroom.DELETE("/delete/:room_id", router.DeleteClassroom)
+	classroom.PATCH("/:room_id", router.EditClassroom)
+	classroom.DELETE("/:room_id", router.DeleteClassroom)
 	classroom.GET("/:room_id/view_assignments", router.GetViewAssignments)
 	classroom.GET("/:room_id/verbose_assignments", router.GetVerboseAssignments)
 	classroom.POST("/:room_id/verbose_assignments", router.SetVerboseAssignments)
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..a5d176c
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-router-dom": "^7.9.1"
+  }
+}
diff --git a/web/src/index.html b/web/index.html
similarity index 61%
rename from web/src/index.html
rename to web/index.html
index 9b1afba..c42a334 100644
--- a/web/src/index.html
+++ b/web/index.html
@@ -3,18 +3,16 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@100..900&display=swap" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="./reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
+    <title>Autograder</title>
   </head>
   <body>
     <div id="root">
-      <script type="module" src="./Index.tsx"></script>
+      <script type="module" src="./src/main.tsx"></script>
     </div>
   </body>
 </html>
diff --git a/web/package.json b/web/package.json
index 00daa45..fa7bba6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -13,8 +13,9 @@
     "@monaco-editor/react": "^4.7.0",
     "@tailwindcss/vite": "^4.0.3",
     "clsx": "^2.1.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.1",
     "react-select": "^5.10.0",
     "react-switch": "^7.1.0",
     "styled-components": "^6.1.14",
diff --git a/web/src/App.tsx b/web/src/App.tsx
new file mode 100644
index 0000000..553de5c
--- /dev/null
+++ b/web/src/App.tsx
@@ -0,0 +1,35 @@
+import { Routes, Route, Navigate } from "react-router";
+import Home from "./home/Home";
+import NavBar from "./components/navbar/Navbar";
+import Login from "./login/Login";
+import Signup from "./signup/Signup";
+import About from "./about/About";
+import Assignment from "./assignment/Assignment";
+import Account from "./account/AccountSettings";
+import Classroom from "./classroom/Classroom";
+import Dashboard from "./dashboard/Dashboard";
+import Faq from "./faq/FAQ";
+import ResetPassword from "./resetpassword/Resetpassword";
+
+function App() {
+  return (
+    <div className="app">
+      <NavBar />
+      <Routes>
+        <Route path="/i" element={<Home />} />
+        <Route path="/i/about" element={<About />} />
+        <Route path="/i/account" element={<Account />} />
+        <Route path="/i/assignment" element={<Assignment />} />
+        <Route path="/i/classroom" element={<Classroom />} />
+        <Route path="/i/dashboard" element={<Dashboard />} />
+        <Route path="/i/faq" element={<Faq />} />
+        <Route path="/i/login" element={<Login />} />
+        <Route path="/i/reset" element={<ResetPassword />} />
+        <Route path="/i/signup" element={<Signup />} />
+        <Route path="*" element={<Navigate to="/i" />} />
+      </Routes>
+    </div>
+  );
+}
+
+export default App;
diff --git a/web/src/FAQ/FAQ.css b/web/src/FAQ/FAQ.css
index ee1b763..574e25d 100644
--- a/web/src/FAQ/FAQ.css
+++ b/web/src/FAQ/FAQ.css
@@ -1,16 +1,3 @@
-@import url(..//reset.css);
-@import "tailwindcss";
-
-* {
-    overscroll-behavior: none;
-}
-
-body {
-    font-family: "Azeret Mono";
-    margin: 0;
-    overflow: hidden;
-}
-
 #notication-text {
     font-family: "Monomaniac One";
     font-size: 96px;
diff --git a/web/src/FAQ/FAQ.html b/web/src/FAQ/FAQ.html
deleted file mode 100644
index a1d8bbc..0000000
--- a/web/src/FAQ/FAQ.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./login.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./FAQ.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/FAQ/FAQ.tsx b/web/src/FAQ/FAQ.tsx
index 9321711..a286213 100644
--- a/web/src/FAQ/FAQ.tsx
+++ b/web/src/FAQ/FAQ.tsx
@@ -1,14 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Navbar from "../components/navbar/Navbar"
-import './FAQ.css'
+import "./FAQ.css";
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Navbar />
-    <div className="bottom-page">
-        <h1 id="notication-text">Page under development</h1>
-        <a href="/test" id="page">Test page</a>
-    </div>
-  </StrictMode>,
-)
\ No newline at end of file
+function Faq() {
+  return (
+    <>
+      <h1 id="notication-text">Page under development</h1>
+      Test page
+    </>
+  );
+}
+
+export default Faq;
diff --git a/web/src/Index.tsx b/web/src/Index.tsx
deleted file mode 100644
index a4fed86..0000000
--- a/web/src/Index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Navbar from "./components/navbar/Navbar"
-import Logo from "./components/logo/Logo"
-import './index.css'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Navbar />
-    <div className="bottom-page">
-      <h1 id="welcome-text">Welcome to</h1>
-      <div id="logo-main">
-        <Logo />
-      </div>
-      <a href="/test" id="page">Test page</a>
-    </div>
-  </StrictMode>,
-)
diff --git a/web/src/about/About.tsx b/web/src/about/About.tsx
index c2f3aff..bf159ca 100644
--- a/web/src/about/About.tsx
+++ b/web/src/about/About.tsx
@@ -1,14 +1,11 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Navbar from "../components/navbar/Navbar"
-import './about.css'
+import "./About.css";
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Navbar />
-    <div className="bottom-page">
-        <h1 id="notication-text">Page under development</h1>
-        <a href="/test" id="page">Test page</a>
-    </div>
-  </StrictMode>,
-)
\ No newline at end of file
+function About() {
+  return (
+    <>
+      <h1 id="notication-text">Page under development</h1>
+    </>
+  );
+}
+
+export default About;
diff --git a/web/src/about/about.css b/web/src/about/about.css
index ee1b763..574e25d 100644
--- a/web/src/about/about.css
+++ b/web/src/about/about.css
@@ -1,16 +1,3 @@
-@import url(..//reset.css);
-@import "tailwindcss";
-
-* {
-    overscroll-behavior: none;
-}
-
-body {
-    font-family: "Azeret Mono";
-    margin: 0;
-    overflow: hidden;
-}
-
 #notication-text {
     font-family: "Monomaniac One";
     font-size: 96px;
diff --git a/web/src/about/about.html b/web/src/about/about.html
deleted file mode 100644
index 1fba6a6..0000000
--- a/web/src/about/about.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./about.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./About.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/account/AccountSettings.tsx b/web/src/account/AccountSettings.tsx
index a327743..c0066b1 100644
--- a/web/src/account/AccountSettings.tsx
+++ b/web/src/account/AccountSettings.tsx
@@ -2,182 +2,220 @@ import { useEffect, useState } from "react";
 import BlueButton from "../components/buttons/BlueButton";
 import TextField from "../components/textfield/Textfield";
 import ToggleSwitch from "../components/toggleswitch/ToggleSwitch";
+import "./Account.css";
 
+function Account() {
+  enum ButtonState {
+    Idle,
+    Error,
+    Success,
+    Waiting,
+  }
+  const [isLoggedIn, setIsLoggedIn] = useState(true);
+  const [passwordMessage, setPasswordMessage] = useState("");
+  const [passwordButtonDisabled, setPasswordButtonDisabled] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [submitState, setSubmitState] = useState(ButtonState.Idle);
 
-function AccountSettings() {
-    enum ButtonState {
-        Idle,
-        Error,
-        Success,
-        Waiting
-    }
-    const [isLoggedIn, setIsLoggedIn] = useState(true);
-    const [passwordMessage, setPasswordMessage] = useState("");
-    const [passwordButtonDisabled, setPasswordButtonDisabled] = useState(false);
-    const [loaded, setLoaded] = useState(false);
-    const [submitState, setSubmitState] = useState(ButtonState.Idle);
-
-    const [firstName, setFirstName] = useState("");
-    const [lastName, setLastName] = useState("");
-
-    useEffect(() => {
-        const redirectToLogin = () => {
-            setTimeout(() => {
-                window.location.href = "/login"
-            }, 3000);
-        }
-        const getIsLoggedIn = async () => {
-            if(!loaded) {
-                try {
-                    var response = await fetch('/api/auth/valid_login');
-                    if (response.ok) {
-                        var json = await response.json();
-                        var loggedIn = json['message'] == 'true';
-                        if (!loggedIn) {
-                            setIsLoggedIn(false);
-                            redirectToLogin();
-                        }
-                    }
-                } catch (err){
-                    setIsLoggedIn(false);
-                    redirectToLogin();
-                }
-            }
-        };
-        const getUserName =async () => {
-            if (!loaded) {
-                try {
-                    var response = await fetch('/api/auth/user_name');
-                    if (response.ok) {
-                        var json = await response.json();
-                        var firstName = json['FirstName'];
-                        var lastName = json['LastName'];
-                        setFirstName(firstName);
-                        setLastName(lastName);
-                    } else {
-                        console.log(response);
-                    }
-                } catch (err){
-                    console.log(err);
-                }
-            }
-        };
-        getIsLoggedIn().then(getUserName).then(() => {
-            setLoaded(true);
-        });
-    });
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
 
-    const onResetButtonPressed = async () => {
-        setSubmitState(ButtonState.Waiting);
+  useEffect(() => {
+    const redirectToLogin = () => {
+      setTimeout(() => {
+        window.location.href = "/login";
+      }, 3000);
+    };
+    const getIsLoggedIn = async () => {
+      if (!loaded) {
         try {
-            var response = await fetch('/api/auth/password', {method: "POST"});
-            if (response.ok) {
-                setPasswordButtonDisabled(true);
-                setPasswordMessage("Password reset link sent!")
-            } else {
-                console.log(response.status)
-                setPasswordMessage("Password reset link failed to send.")
+          const response = await fetch("/api/auth/valid_login");
+          if (response.ok) {
+            const json = await response.json();
+            const loggedIn = json["message"] == "true";
+            if (!loggedIn) {
+              setIsLoggedIn(false);
+              redirectToLogin();
             }
+          }
+        } catch {
+          setIsLoggedIn(false);
+          redirectToLogin();
+        }
+      }
+    };
+    const getUserName = async () => {
+      if (!loaded) {
+        try {
+          const response = await fetch("/api/auth/user_name");
+          if (response.ok) {
+            const json = await response.json();
+            const firstName = json["FirstName"];
+            const lastName = json["LastName"];
+            setFirstName(firstName);
+            setLastName(lastName);
+          } else {
+            console.log(response);
+          }
         } catch (err) {
-            setPasswordMessage("Password reset link failed to send.");
+          console.log(err);
         }
+      }
+    };
+    getIsLoggedIn()
+      .then(getUserName)
+      .then(() => {
+        setLoaded(true);
+      });
+  });
+
+  const onResetButtonPressed = async () => {
+    setSubmitState(ButtonState.Waiting);
+    try {
+      const response = await fetch("/api/auth/password", { method: "POST" });
+      if (response.ok) {
+        setPasswordButtonDisabled(true);
+        setPasswordMessage("Password reset link sent!");
+      } else {
+        console.log(response.status);
+        setPasswordMessage("Password reset link failed to send.");
+      }
+    } catch {
+      setPasswordMessage("Password reset link failed to send.");
     }
+  };
 
-    const ChangeUserInfo = async () => {
-        if (firstName == '' || lastName == '') {
-            setSubmitState(ButtonState.Error);
-        } else {
-            try {
-                var response = await fetch('/api/auth/user_info', {
-                    method:"PUT",
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        "first_name": firstName,
-                        "last_name": lastName
-                    })
-                });
-                if (response.ok) {
-                    setSubmitState(ButtonState.Success);
-                }
-            } catch (err) {
-                setSubmitState(ButtonState.Error);
-            }
+  const ChangeUserInfo = async () => {
+    if (firstName == "" || lastName == "") {
+      setSubmitState(ButtonState.Error);
+    } else {
+      try {
+        const response = await fetch("/api/auth/user_info", {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            first_name: firstName,
+            last_name: lastName,
+          }),
+        });
+        if (response.ok) {
+          setSubmitState(ButtonState.Success);
         }
+      } catch {
+        setSubmitState(ButtonState.Error);
+      }
     }
+  };
 
-    return <> 
-
-        <div id="accountRoot">
-        {isLoggedIn ? 
-            <>
-                <h1 className="header">Account Settings</h1>
-                <table id="fieldsTable">
-                    <tr>
-                        <td align="right" className="labelTd">
-                            <div className="label">First Name:</div>
-                        </td>
-                        <td>
-
-                            <TextField onChange={(data: {value: string, isValid: boolean, error: string}) => {
-                                setFirstName(data.value);
-                                setSubmitState(ButtonState.Idle);
-                            }} className="nameField input" id="firstName" label="" value={firstName} />
-                        </td>
-                        <td align="right" className="labelTd">
-                            <div className="label">Last Name:</div>
-                        </td>
-                        <td>
-                            <TextField onChange={(data: {value: string, isValid: boolean, error: string}) => {
-                                setLastName(data.value);
-                                setSubmitState(ButtonState.Idle);
-                            }} className="nameField input" id="lastName" label="" value={lastName} />
-                        </td>
-                    </tr>
-                    <tr>
-                        <td align="right" className="labelTd">
-                            <div className="label">Password:</div>
-                        </td>
-                        <td colSpan={2}>
-                            <div className="lastUpdated">last updated September 1st 2024</div>
-                        </td>
-                        <td>
-                            <BlueButton disabled={passwordButtonDisabled} onClick={onResetButtonPressed}>Reset Password</BlueButton>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td align="right" className="labelTd">
-                            <div className="label">Light Mode</div>
-                        </td>
-                        <td colSpan={2} align="left" style={{ paddingRight: "1%" }}>
-                            <div className="colorTheme">
-                                <ToggleSwitch />
-                                <div className="label" style={{ marginLeft: "1%" }}>Dark Mode</div>
-                            </div>
-                        </td>
-                        <td id='linkSentParent'>
-                            <div id="linkSent">
-                                {passwordMessage}
-                            </div>
-                        </td>
-                    </tr>
-                </table>
-                <BlueButton id='submit' style={(submitState == ButtonState.Error) ? {color: 'red'} : {}} onClick={ChangeUserInfo}>
-                    {submitState == ButtonState.Error 
-                        ? ((firstName == '' || lastName == '') ? "Name Cannot be Blank" : "An Error Occurred")
-                    : submitState == ButtonState.Success ? "Profile Successfully Updated" : "Submit Changes"}
-                </BlueButton>
-            </>
-        : 
-        <>
-            <h1 className="header" style={{marginBottom: "4%"}}>You have to be logged in to view account settings</h1>
+  return (
+    <>
+      <div id="accountRoot">
+        {isLoggedIn ? (
+          <>
+            <h1 className="header">Account Settings</h1>
+            <table id="fieldsTable">
+              <tr>
+                <td align="right" className="labelTd">
+                  <div className="label">First Name:</div>
+                </td>
+                <td>
+                  <TextField
+                    onChange={(data: {
+                      value: string;
+                      isValid: boolean;
+                      error: string;
+                    }) => {
+                      setFirstName(data.value);
+                      setSubmitState(ButtonState.Idle);
+                    }}
+                    className="nameField input"
+                    id="firstName"
+                    label=""
+                    value={firstName}
+                  />
+                </td>
+                <td align="right" className="labelTd">
+                  <div className="label">Last Name:</div>
+                </td>
+                <td>
+                  <TextField
+                    onChange={(data: {
+                      value: string;
+                      isValid: boolean;
+                      error: string;
+                    }) => {
+                      setLastName(data.value);
+                      setSubmitState(ButtonState.Idle);
+                    }}
+                    className="nameField input"
+                    id="lastName"
+                    label=""
+                    value={lastName}
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td align="right" className="labelTd">
+                  <div className="label">Password:</div>
+                </td>
+                <td colSpan={2}>
+                  <div className="lastUpdated">
+                    last updated September 1st 2024
+                  </div>
+                </td>
+                <td>
+                  <BlueButton
+                    disabled={passwordButtonDisabled}
+                    onClick={onResetButtonPressed}
+                  >
+                    Reset Password
+                  </BlueButton>
+                </td>
+              </tr>
+              <tr>
+                <td align="right" className="labelTd">
+                  <div className="label">Light Mode</div>
+                </td>
+                <td colSpan={2} align="left" style={{ paddingRight: "1%" }}>
+                  <div className="colorTheme">
+                    <ToggleSwitch />
+                    <div className="label" style={{ marginLeft: "1%" }}>
+                      Dark Mode
+                    </div>
+                  </div>
+                </td>
+                <td id="linkSentParent">
+                  <div id="linkSent">{passwordMessage}</div>
+                </td>
+              </tr>
+            </table>
+            <BlueButton
+              id="submit"
+              style={submitState == ButtonState.Error ? { color: "red" } : {}}
+              onClick={ChangeUserInfo}
+            >
+              {submitState == ButtonState.Error
+                ? firstName == "" || lastName == ""
+                  ? "Name Cannot be Blank"
+                  : "An Error Occurred"
+                : submitState == ButtonState.Success
+                ? "Profile Successfully Updated"
+                : "Submit Changes"}
+            </BlueButton>
+          </>
+        ) : (
+          <>
+            <h1 className="header" style={{ marginBottom: "4%" }}>
+              You have to be logged in to view account settings
+            </h1>
             <div className="label">Redirecting to login...</div>
-        </>}
-    </div>
-    
+          </>
+        )}
+      </div>
     </>
-    
+  );
 }
 
-export default AccountSettings;
\ No newline at end of file
+export default Account;
diff --git a/web/src/account/account.css b/web/src/account/account.css
index b6a6fc6..4bba429 100644
--- a/web/src/account/account.css
+++ b/web/src/account/account.css
@@ -1,16 +1,13 @@
 body {
-    background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%);
+    background: var(--color-bg-primary);
 }
 
 .header {
     font-family: 'Monomaniac One';
     font-size: 4em;
     text-transform: uppercase;
-	background: linear-gradient(to right, var(--color-raisin-black) 0%, var(--color-process-cyan) 50%);
+	color: var(--color-raisin-black);
 	text-decoration: none;
-    background-clip: text;
-    -webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
 }
 
 #accountRoot {
@@ -22,14 +19,13 @@ body {
     margin-bottom: 1%;
     margin-top: 3%;
     margin-left: 5%;
-    border: 4px solid black;
+    border: 4px solid var(--color-black);
     border-radius: 25px;
     padding-top: 4%;
     padding-left: 4%;
     padding-right: 4%;
     padding-bottom: 2%;
-    background: #fff;
-    box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25);
+    background: var(--color-white);
 }
 
 .blueButton {
@@ -52,18 +48,18 @@ tr {
 }
 
 .input {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 125%;
     width: 95%;
 }
 
 .label {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 150%;
 }
 
 .lastUpdated {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-weight: lighter;
     font-size: 150%;
 }
@@ -100,9 +96,9 @@ tr {
 }
 
 #linkSent {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 90%;
     width: 100%;
-    color: red;
+    color: var(--color-red);
     text-align: center;
 }
\ No newline at end of file
diff --git a/web/src/account/account.html b/web/src/account/account.html
deleted file mode 100644
index 8fdf71e..0000000
--- a/web/src/account/account.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./about.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>Account Settings</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./account.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/account/account.tsx b/web/src/account/account.tsx
deleted file mode 100644
index 1abe8d3..0000000
--- a/web/src/account/account.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { createRoot } from "react-dom/client";
-import Navbar from "../components/navbar/Navbar";
-import './account.css'
-import AccountSettings from "./AccountSettings";
-
-
-createRoot(document.getElementById('root')!).render(<div>
-    <Navbar />
-    <AccountSettings />
-</div>)
\ No newline at end of file
diff --git a/web/src/assets/react.svg b/web/src/assets/react.svg
deleted file mode 100644
index 6c87de9..0000000
--- a/web/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/web/src/assignment/AssignmentBody.tsx b/web/src/assignment/AssignmentBody.tsx
deleted file mode 100644
index b4e1209..0000000
--- a/web/src/assignment/AssignmentBody.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useEffect, useState } from "react";
-import AssignmentPanel from "../components/assignment/AssignmentPanel";
-import Navbar from "../components/navbar/Navbar";
-
-function AssignmentBody() {
-    const [loading, setLoading] = useState(true);
-    const [errorMessage, setErrorMessage] = useState("");
-    const [assignmentInfo, setAssignmentInfo] = useState({});
-    const urlParams = new URLSearchParams(window.location.search);
-    const assignmentId = urlParams.get('id');
-
-    useEffect(() => {
-        var isError = false;
-        const getAssignment = async () => {
-            var response = await fetch(`/api/classroom/assignment/${assignmentId}`);
-            if (response.ok) {
-                var json = await response.json();
-                setAssignmentInfo(json);
-            } else {
-                setErrorMessage("Error getting the assignment. Either the assignment does not exist or you do not have the permissions to see it.");
-            }
-        }
-        const verifyLogin = async () => {
-            try {
-                var response = await fetch('/api/auth/valid_login');
-                if (response.ok) {
-                    var json = await response.json();
-                    if (json['message'] != 'true') {
-                        isError = true;
-                        setErrorMessage("You need to be logged in to view assignments");
-                        stopLoading();
-                    }
-                } else {
-                    isError = true;
-                    setErrorMessage("You need to be logged in to view assignments");
-                    stopLoading();
-                }
-            } catch (err){
-                console.error("Fetch error: ", err);
-            }
-        }
-        const stopLoading = () => {
-            setLoading(false);
-        }
-        (async function () {
-            if (loading) {
-                await verifyLogin();
-                if (isError) return;
-                await getAssignment();
-                stopLoading();
-            } else if (errorMessage === "") {
-                const hash = window.location.hash.substring(1);
-                if (hash) {
-                    const el = document.getElementById(hash);
-                    if (el) {
-                        el.scrollIntoView({ behavior: "smooth" });
-                    }
-                }
-            }
-        })();
-    });
-
-    return <>
-        {!loading ?
-            <div>
-                <Navbar />
-                <div className="panelParent">
-                    {errorMessage === "" ?
-                        <AssignmentPanel info={assignmentInfo}/>
-                        : 
-                        <div className="error">{errorMessage}</div>
-                    }   
-                </div>
-            </div>
-        : <></>}
-    </>
-}
-export default AssignmentBody;
\ No newline at end of file
diff --git a/web/src/assignment/assignment.css b/web/src/assignment/assignment.css
index 81c785b..21318bf 100644
--- a/web/src/assignment/assignment.css
+++ b/web/src/assignment/assignment.css
@@ -1,5 +1,5 @@
 body {
-    background: linear-gradient(90deg, #0CAADC -40%, #ffffff 120%);
+    background: var(--color-bg-primary);
 }
 .panelParent {
     display: flex;
@@ -12,14 +12,14 @@ body {
     align-items: center;
     justify-content: center;
     text-align: center;
-    color: red;
-    font-family: "Azeret Mono";
+    color: var(--color-red);
+    font-family: "Roboto";
     font-size: 150%;
     padding: 2%;
     width: 50%;
-    border: 2px solid black;
+    border: 2px solid var(--color-black);
     border-radius: 25px;
-    background: white;
+    background: var(--color-white);
     line-height: 1.5;
     min-height: 20vh;
 }
\ No newline at end of file
diff --git a/web/src/assignment/assignment.html b/web/src/assignment/assignment.html
deleted file mode 100644
index e2c4b9a..0000000
--- a/web/src/assignment/assignment.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./assignment.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>Assignment</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./assignment.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/assignment/assignment.tsx b/web/src/assignment/assignment.tsx
index 64596bd..b7f0a07 100644
--- a/web/src/assignment/assignment.tsx
+++ b/web/src/assignment/assignment.tsx
@@ -1,6 +1,85 @@
-import { createRoot } from "react-dom/client";
-import AssignmentBody from "./AssignmentBody";
+import { useEffect, useState } from "react";
+import AssignmentPanel from "../components/assignment/AssignmentPanel";
+import Navbar from "../components/navbar/Navbar";
+import "./Assignment.css";
 
-createRoot(document.getElementById('root')!).render(
-    <AssignmentBody />
-)
\ No newline at end of file
+function Assignment() {
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [assignmentInfo, setAssignmentInfo] = useState({});
+  const urlParams = new URLSearchParams(window.location.search);
+  const assignmentId = urlParams.get("id");
+
+  useEffect(() => {
+    let isError = false;
+    const getAssignment = async () => {
+      const response = await fetch(`/api/classroom/assignment/${assignmentId}`);
+      if (response.ok) {
+        const json = await response.json();
+        setAssignmentInfo(json);
+      } else {
+        setErrorMessage(
+          "Error getting the assignment. Either the assignment does not exist or you do not have the permissions to see it."
+        );
+      }
+    };
+    const verifyLogin = async () => {
+      try {
+        const response = await fetch("/api/auth/valid_login");
+        if (response.ok) {
+          const json = await response.json();
+          if (json["message"] != "true") {
+            isError = true;
+            setErrorMessage("You need to be logged in to view assignments");
+            stopLoading();
+          }
+        } else {
+          isError = true;
+          setErrorMessage("You need to be logged in to view assignments");
+          stopLoading();
+        }
+      } catch (err) {
+        console.error("Fetch error: ", err);
+      }
+    };
+    const stopLoading = () => {
+      setLoading(false);
+    };
+    (async function () {
+      if (loading) {
+        await verifyLogin();
+        if (isError) return;
+        await getAssignment();
+        stopLoading();
+      } else if (errorMessage === "") {
+        const hash = window.location.hash.substring(1);
+        if (hash) {
+          const el = document.getElementById(hash);
+          if (el) {
+            el.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      }
+    })();
+  });
+
+  return (
+    <>
+      {!loading ? (
+        <div>
+          <Navbar />
+          <div className="panelParent">
+            {errorMessage === "" ? (
+              <AssignmentPanel info={assignmentInfo} />
+            ) : (
+              <div className="error">{errorMessage}</div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}
+export default Assignment;
diff --git a/web/src/classroom/ClassroomBody.tsx b/web/src/classroom/ClassroomBody.tsx
deleted file mode 100644
index c39555a..0000000
--- a/web/src/classroom/ClassroomBody.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { useEffect, useState } from "react";
-import AssignmentDropdown from "../components/assignment/AssignmentDropdown";
-import QuestionBulletPoint, { CompletionState } from "../components/question/QuestionBulletPoint";
-import HomeworkAssignment from "../components/homework/HomeworkAssignment";
-import HomeworkSidebar from "../components/homework/HomeworkSidebar";
-import Navbar from "../components/navbar/Navbar";
-import TitleBanner from "../components/titlebanner/TitleBanner";
-import BlueButton from "../components/buttons/BlueButton";
-
-function ClassroomBody() {
-    
-    const msInTwoWeeks = 2 * 7 * 24 * 60 * 60 * 1000;
-
-    const [errorMsg, setErrorMsg] = useState("");
-
-    const [loading, setLoading] = useState(true);
-    const [classroomName, setClassroomName] = useState("");
-    const [assignments, setAssignments] = useState([]);
-    const urlParams = new URLSearchParams(window.location.search);
-    const classroomId = urlParams.get('id');
-
-    const questionsJSONToReact = (questions: any[], assignmentId: string) => {
-        if (questions) {
-            return questions.map((q) => {
-                const points = q["points"];
-                const score = q["score"];
-                const name = q["header"];
-                const questionId = q["id"];
-                var state: CompletionState = "none";
-                if (score >= points) {
-                    state = "full";
-                } else if (score > 0) {
-                    state = "partial";
-                }
-                return <QuestionBulletPoint completionState={state} questionId={questionId} assignmentId={assignmentId}>
-                    {name}
-                </QuestionBulletPoint>
-            });
-        }
-        return [];
-    }
-
-    const assignmentsJSONToReact = () => {
-        if (!assignments) return [];
-        return assignments.map((a) => {
-            return <AssignmentDropdown id={a['id']} name={a['name']}>
-                {...questionsJSONToReact(a["questions"], a["id"])}
-            </AssignmentDropdown>
-        });
-    }
-
-    const homeworkFromJSON = () => {
-        if (!assignments) return [];
-        return assignments.filter((a) => {
-            var dueDate = new Date(a["due_at"]);
-            var now = new Date();
-            var timeDifference = dueDate.getTime() - now.getTime();
-            return timeDifference <= msInTwoWeeks; 
-        }).map(a => 
-            <HomeworkAssignment name={a['name']} dueDate={new Date(a["due_at"])} assignmentId={a['id']} />
-        )
-    }
-
-    const reRoute = () => {
-        window.location.href = `/classroom/manage/?id=${classroomId}`;
-    }
-
-    useEffect(() => {
-        var isError = false;
-        const verifyLogin = async () => {
-            try {
-                var response = await fetch('/api/auth/valid_login');
-                if (response.ok) {
-                    var json = await response.json();
-                    if (json['message'] != 'true') {
-                        isError = true;
-                        setErrorMsg("You need to be logged in to view classrooms");
-                        stopLoading();
-                    }
-                } else {
-                    isError = true;
-                    setErrorMsg("You need to be logged in to view classrooms");
-                    stopLoading();
-                }
-            } catch (err){
-                console.error("Fetch error: ", err);
-            }
-        };
-        const getClassroomName = async () => {
-            var response = await fetch(`/api/classroom/${classroomId}`);
-            if (response.ok) {
-                var json = await response.json();
-                setClassroomName(json["name"]);
-            } else {
-                isError = true;
-                setErrorMsg("Either the classroom does not exist or you are not part of this classroom");
-                stopLoading();
-            }
-        }
-        const getAssignments = async () => {
-            var response = await fetch(`/api/classroom/${classroomId}/view_assignments`);
-            if (response.ok) {
-                var json = await response.json();
-                setAssignments(json['assignments']);
-            } else {
-                console.error(response.statusText);
-            }
-        };
-        const stopLoading = () => {
-            setLoading(false);
-        }
-        // const getUserRole = async () => {
-        //     var response = await fetch(`api/classroom/${classroomId}/`)
-        // }
-
-        if (loading) {
-            verifyLogin().then(() => {
-                    if (!isError) {
-                        getClassroomName().then(() => {
-                            if (!isError) {
-                                getAssignments().then(stopLoading);
-                            }
-                        });
-                    }
-                }
-            )
-        } 
-    });
-
-    return (<>
-        {!loading?
-            <>
-                <Navbar />
-                {(errorMsg == "")?
-                    <>
-                        <TitleBanner>{classroomName}</TitleBanner>
-                        <div id='classroomBody'>
-                            <div id="assignments">
-                                {...assignmentsJSONToReact()}
-                            </div>
-                            <div id="sidebar">
-                                {/* {role == ("admin" || "teacher") ?  */}
-                                <div id="manage_button">
-                                        <BlueButton onClick={reRoute}>
-                                            Manage Classroom
-                                        </BlueButton>
-                                </div>
-                                {/* } */}
-                                <div id="homework">
-                                    <HomeworkSidebar>
-                                        {...homeworkFromJSON()}
-                                    </HomeworkSidebar>
-                                </div>
-                            </div>
-                        </div>
-                    </>
-                :<div className="errorMsg">{errorMsg}</div>}
-            </>
-        : <></>}
-    </>);
-}
-
-export default ClassroomBody;
\ No newline at end of file
diff --git a/web/src/classroom/classroom.css b/web/src/classroom/classroom.css
index e00effd..cc80b4b 100644
--- a/web/src/classroom/classroom.css
+++ b/web/src/classroom/classroom.css
@@ -30,6 +30,6 @@
     margin-top: 3%;
     font-size: 200%;
     color: red;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     text-align: center;
 }
\ No newline at end of file
diff --git a/web/src/classroom/classroom.html b/web/src/classroom/classroom.html
deleted file mode 100644
index 21a5431..0000000
--- a/web/src/classroom/classroom.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./classroom.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>Classroom Home</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./classroom.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/classroom/classroom.tsx b/web/src/classroom/classroom.tsx
index 9a35faf..a7f61fb 100644
--- a/web/src/classroom/classroom.tsx
+++ b/web/src/classroom/classroom.tsx
@@ -1,8 +1,184 @@
-import { createRoot } from "react-dom/client";
-import './classroom.css'
-import ClassroomBody from "./ClassroomBody";
+import { useEffect, useState } from "react";
+import AssignmentDropdown from "../components/assignment/AssignmentDropdown";
+import QuestionBulletPoint, {
+  CompletionState,
+} from "../components/question/QuestionBulletPoint";
+import HomeworkAssignment from "../components/homework/HomeworkAssignment";
+import HomeworkSidebar from "../components/homework/HomeworkSidebar";
+import Navbar from "../components/navbar/Navbar";
+import TitleBanner from "../components/titlebanner/TitleBanner";
+import BlueButton from "../components/buttons/BlueButton";
+import "./Classroom.css";
 
+function Classroom() {
+  const msInTwoWeeks = 2 * 7 * 24 * 60 * 60 * 1000;
 
-createRoot(document.getElementById('root')!).render(<div>
-    <ClassroomBody />
-</div>)
\ No newline at end of file
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const [loading, setLoading] = useState(true);
+  const [classroomName, setClassroomName] = useState("");
+  const [assignments, setAssignments] = useState([]);
+  const urlParams = new URLSearchParams(window.location.search);
+  const classroomId = urlParams.get("id");
+
+  const questionsJSONToReact = (questions: any[], assignmentId: string) => {
+    if (questions) {
+      return questions.map((q) => {
+        const points = q["points"];
+        const score = q["score"];
+        const name = q["header"];
+        const questionId = q["id"];
+
+        let state: CompletionState = "none";
+
+        if (score >= points) {
+          state = "full";
+        } else if (score > 0) {
+          state = "partial";
+        }
+        return (
+          <QuestionBulletPoint
+            completionState={state}
+            questionId={questionId}
+            assignmentId={assignmentId}
+          >
+            {name}
+          </QuestionBulletPoint>
+        );
+      });
+    }
+    return [];
+  };
+
+  const assignmentsJSONToReact = () => {
+    if (!assignments) return [];
+    return assignments.map((a) => {
+      return (
+        <AssignmentDropdown id={a["id"]} name={a["name"]}>
+          {...questionsJSONToReact(a["questions"], a["id"])}
+        </AssignmentDropdown>
+      );
+    });
+  };
+
+  const homeworkFromJSON = () => {
+    if (!assignments) return [];
+    return assignments
+      .filter((a) => {
+        const dueDate = new Date(a["due_at"]);
+        const now = new Date();
+        const timeDifference = dueDate.getTime() - now.getTime();
+        return timeDifference <= msInTwoWeeks;
+      })
+      .map((a) => (
+        <HomeworkAssignment
+          name={a["name"]}
+          dueDate={new Date(a["due_at"])}
+          assignmentId={a["id"]}
+        />
+      ));
+  };
+
+  const reRoute = () => {
+    window.location.href = `/classroom/manage/?id=${classroomId}`;
+  };
+
+  useEffect(() => {
+    let isError = false;
+    const verifyLogin = async () => {
+      try {
+        const response = await fetch("/api/auth/valid_login");
+        if (response.ok) {
+          const json = await response.json();
+          if (json["message"] != "true") {
+            isError = true;
+            setErrorMsg("You need to be logged in to view classrooms");
+            stopLoading();
+          }
+        } else {
+          isError = true;
+          setErrorMsg("You need to be logged in to view classrooms");
+          stopLoading();
+        }
+      } catch (err) {
+        console.error("Fetch error: ", err);
+      }
+    };
+    const getClassroomName = async () => {
+      const response = await fetch(`/api/classroom/${classroomId}`);
+      if (response.ok) {
+        const json = await response.json();
+        setClassroomName(json["name"]);
+      } else {
+        isError = true;
+        setErrorMsg(
+          "Either the classroom does not exist or you are not part of this classroom"
+        );
+        stopLoading();
+      }
+    };
+    const getAssignments = async () => {
+      const response = await fetch(
+        `/api/classroom/${classroomId}/view_assignments`
+      );
+      if (response.ok) {
+        const json = await response.json();
+        setAssignments(json["assignments"]);
+      } else {
+        console.error(response.statusText);
+      }
+    };
+    const stopLoading = () => {
+      setLoading(false);
+    };
+    // const getUserRole = async () => {
+    //     var response = await fetch(`api/classroom/${classroomId}/`)
+    // }
+
+    if (loading) {
+      verifyLogin().then(() => {
+        if (!isError) {
+          getClassroomName().then(() => {
+            if (!isError) {
+              getAssignments().then(stopLoading);
+            }
+          });
+        }
+      });
+    }
+  });
+
+  return (
+    <>
+      {!loading ? (
+        <>
+          <Navbar />
+          {errorMsg == "" ? (
+            <>
+              <TitleBanner>{classroomName}</TitleBanner>
+              <div id="classroomBody">
+                <div id="assignments">{...assignmentsJSONToReact()}</div>
+                <div id="sidebar">
+                  {/* {role == ("admin" || "teacher") ?  */}
+                  <div id="manage_button">
+                    <BlueButton onClick={reRoute}>Manage Classroom</BlueButton>
+                  </div>
+                  {/* } */}
+                  <div id="homework">
+                    <HomeworkSidebar>{...homeworkFromJSON()}</HomeworkSidebar>
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="errorMsg">{errorMsg}</div>
+          )}
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}
+
+export default Classroom;
diff --git a/web/src/colors.css b/web/src/colors.css
index db17d71..34b6050 100644
--- a/web/src/colors.css
+++ b/web/src/colors.css
@@ -1,7 +1,33 @@
 :root {
+    /* Primary Colors */
     --color-raisin-black: #1E212B;
     --color-NCS-blue: #1481ba;
     --color-aero-blue: #11b5e4;
     --color-process-cyan: #0caadc;
+    --color-aqua-light: #b3e5fc;
     --color-white: #ffffff;
-}
\ No newline at end of file
+    --color-black: #000000;
+    
+    /* Grays */
+    --color-gray-light: #eee;
+    --color-gray-medium: #ccc;
+    --color-gray-dark: #999;
+    --color-gray-darker: #595959;
+    --color-gray-darkest: #333;
+    --color-gray-text: #222;
+    
+    /* Status Colors */
+    --color-success: #1DFF38;
+    --color-warning: #FFD902;
+    --color-error: #FF1D21;
+    --color-danger: #dc3545;
+    --color-red: #e00;
+    
+    /* Backgrounds */
+    --color-bg-primary: #ffffff;
+    --color-bg-light: #f5f5f5;
+    --color-bg-sidebar: #cacaca;
+    --color-bg-dropdown: #d9d9d9;
+    --color-bg-dropdown-dark: #9a9a9a;
+    --color-bg-navbar: #b3e5fc;
+}
diff --git a/web/src/components/assignment/AssignmentDropdown.css b/web/src/components/assignment/AssignmentDropdown.css
index 02ad3a4..a969941 100644
--- a/web/src/components/assignment/AssignmentDropdown.css
+++ b/web/src/components/assignment/AssignmentDropdown.css
@@ -1,6 +1,6 @@
 .assignmentDropdown {
     width: 100%;
-    border: 1.5px solid black;
+    border: 1.5px solid var(--color-black);
     box-sizing: border-box;
 }
 
@@ -10,20 +10,20 @@
     align-items: center;
     box-sizing: border-box;
     width: 100%;
-    background-color: #9a9a9a;
-    color: white;
+    background-color: var(--color-bg-dropdown-dark);
+    color: var(--color-white);
     font-weight: bold;
     user-select: none;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     text-align: left;
     font-size: 150%;
     padding: 1%;
 }
 
 .openAssignment {
-    background: #d9d9d9;
-    color: black;
-    font-family: "Azeret Mono";
+    background: var(--color-bg-dropdown);
+    color: var(--color-black);
+    font-family: "Roboto";
     padding: .5%;
     font-size: 85%;
     border-radius: 15px;
@@ -33,7 +33,7 @@
     display: flex;
     flex-direction: column;
     gap: 2rem;
-    background-color: #595959;
-    color: black;
+    background-color: var(--color-gray-darker);
+    color: var(--color-black);
     padding: 2.5%;
 }
\ No newline at end of file
diff --git a/web/src/components/assignment/AssignmentDropdown.tsx b/web/src/components/assignment/AssignmentDropdown.tsx
index 6773821..f56b295 100644
--- a/web/src/components/assignment/AssignmentDropdown.tsx
+++ b/web/src/components/assignment/AssignmentDropdown.tsx
@@ -1,32 +1,35 @@
 import { useState } from "react";
-import "./AssignmentDropdown.css"
+import "./AssignmentDropdown.css";
+import { Link } from "react-router-dom";
 
 interface AssignmentDropdownProps {
-    name: string;
-    children: React.ReactNode;
-    id: string;
+  name: string;
+  children: React.ReactNode;
+  id: string;
 }
 
-function AssignmentDropdown({name, children, id}: AssignmentDropdownProps) {
-    const [selected, setSelected] = useState(false);
-    const triangle = () => {
-        return selected ? "▲" : "▼"; 
-    }
-    return (
-        <div className="assignmentDropdown">
-            <div className="revealButton" onClick={() => setSelected(!selected)}>
-                {name} {triangle()}
-                <a href={`/assignment?id=${id}`}>
-                    <button onClick={(e: React.MouseEvent) => {e.stopPropagation()}} className="openAssignment">Open Assignment</button>
-                </a>
-            </div>
-            {selected? 
-                <div className="assignmentBody">
-                    
-                    {children}
-                </div>
-            :<></>}
-        </div>
-    );
+function AssignmentDropdown({ name, children, id }: AssignmentDropdownProps) {
+  const [selected, setSelected] = useState(false);
+  const triangle = () => {
+    return selected ? "▲" : "▼";
+  };
+  return (
+    <div className="assignmentDropdown">
+      <div className="revealButton" onClick={() => setSelected(!selected)}>
+        {name} {triangle()}
+        <Link to={`/i/assignment?id=${id}`}>
+          <button
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation();
+            }}
+            className="openAssignment"
+          >
+            Open Assignment
+          </button>
+        </Link>
+      </div>
+      {selected ? <div className="assignmentBody">{children}</div> : <></>}
+    </div>
+  );
 }
-export default AssignmentDropdown;
\ No newline at end of file
+export default AssignmentDropdown;
diff --git a/web/src/components/assignment/AssignmentPanel.css b/web/src/components/assignment/AssignmentPanel.css
index f52ddf9..34bef45 100644
--- a/web/src/components/assignment/AssignmentPanel.css
+++ b/web/src/components/assignment/AssignmentPanel.css
@@ -7,18 +7,16 @@
     border-radius: 20px;
     width: 75%;
     padding: 2%;
-    box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25);
 }
 
 .assignmentTitle {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 225%;
     font-weight: bold;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .assignmentDescription {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-weight: lighter;
     font-size: 125%;
 }
\ No newline at end of file
diff --git a/web/src/components/assignment/ConsoleOutput.css b/web/src/components/assignment/ConsoleOutput.css
index 92bba10..3658160 100644
--- a/web/src/components/assignment/ConsoleOutput.css
+++ b/web/src/components/assignment/ConsoleOutput.css
@@ -3,7 +3,7 @@
     flex-direction: row;
     background: black;
     color: white;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     word-break: break-all;
     padding: 1%;
     box-sizing: border-box;
diff --git a/web/src/components/buttons/BlueButton.css b/web/src/components/buttons/BlueButton.css
index 2932e92..92d5633 100644
--- a/web/src/components/buttons/BlueButton.css
+++ b/web/src/components/buttons/BlueButton.css
@@ -1,5 +1,5 @@
 .blueButton {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     color: white;
     border-radius: 20px;
     background-color: var(--color-process-cyan);
diff --git a/web/src/components/buttons/ColorButton.css b/web/src/components/buttons/ColorButton.css
index 7cff4e6..a35c6e6 100644
--- a/web/src/components/buttons/ColorButton.css
+++ b/web/src/components/buttons/ColorButton.css
@@ -1,5 +1,5 @@
 .color-button {
-    background-color: var(--bg-color, #333);
+    background-color: var(--bg-color, var(--color-gray-darkest));
     border: none;
     cursor: pointer;
     transition: background-color 0.2s ease;
diff --git a/web/src/components/calendar-input/CalendarInput.css b/web/src/components/calendar-input/CalendarInput.css
index 73f9ecd..f20a24f 100644
--- a/web/src/components/calendar-input/CalendarInput.css
+++ b/web/src/components/calendar-input/CalendarInput.css
@@ -1,6 +1,6 @@
 .calendar-input {
     font-size: 100%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     padding: .75%;
     border: 2px solid black;
     border-radius: 10px;
diff --git a/web/src/components/classroom-widget/ClassroomWidget.tsx b/web/src/components/classroom-widget/ClassroomWidget.tsx
index b01d91b..44633d1 100644
--- a/web/src/components/classroom-widget/ClassroomWidget.tsx
+++ b/web/src/components/classroom-widget/ClassroomWidget.tsx
@@ -1,5 +1,6 @@
-import './classroomwidget.css';
-import Classroompic from './Classroompic.png'
+import "./classroomwidget.css";
+import Classroompic from "./Classroompic.png";
+import { Link } from "react-router-dom";
 
 interface ClassroomWidgetProps {
   name?: string;
@@ -7,34 +8,34 @@ interface ClassroomWidgetProps {
   start_date?: string;
   end_date?: string;
   id?: string;
-};
+}
 
-const ClassroomWidget = ({ 
-    name,
-    course_code,
-    start_date,
-    end_date,
-    id
+const ClassroomWidget = ({
+  name,
+  course_code,
+  start_date,
+  end_date,
+  id,
 }: ClassroomWidgetProps) => {
   return (
-    <a className="course-card" href={`/classroom?id=${id}`}>
+    <Link className="course-card" to={`/i/classroom?id=${id}`}>
       <img
-        src= {Classroompic}
+        src={Classroompic}
         alt="Course background"
         className="course-card-image"
       />
       <div className="course-card-overlay" />
       <div className="course-card-text">
-        <p className='course-card-name'>{name}</p>
+        <p className="course-card-name">{name}</p>
         <p className="course-card-code">{course_code}</p>
         <p className="course-card-date">
-          Start:{start_date} 
+          Start:{start_date}
           <br />
           End: {end_date}
         </p>
       </div>
-    </a>
+    </Link>
   );
 };
 
-export default ClassroomWidget;
\ No newline at end of file
+export default ClassroomWidget;
diff --git a/web/src/components/classroom-widget/classroomwidget.css b/web/src/components/classroom-widget/classroomwidget.css
index 608d1ac..2120187 100644
--- a/web/src/components/classroom-widget/classroomwidget.css
+++ b/web/src/components/classroom-widget/classroomwidget.css
@@ -1,5 +1,3 @@
-@import url(../../colors.css);
-
 .course-card {
   position: relative;
   width: 15%;
@@ -9,11 +7,10 @@
   max-height: 400px;
   min-height: 250px;
   margin: 0 auto;
-  background: white;
+  background: var(--color-white);
   border-radius: 0.625rem;
-  box-shadow: 0 0.3125rem 0.625rem 0.3125rem rgba(0, 0, 0, 0.25);
   overflow: hidden;
-  outline: 0.15625rem solid black;
+  outline: 0.15625rem solid var(--color-black);
 }
 
 .course-card-image {
@@ -25,7 +22,6 @@
   object-fit: cover;
   left: -27.16%;
   top: -3.5%;
-  box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
 }
 
 .course-card-overlay {
@@ -42,9 +38,9 @@
   bottom: 7%;
   left: 5%;
   width: 90%;
-  color: white;
+  color: var(--color-white);
   line-height: 1.25;
-  font-family: 'Azeret Mono', monospace;
+  font-family: 'Roboto', sans-serif;
   font-weight: 700;
 }
 
@@ -62,8 +58,8 @@
 
 .course-card-date {
   width: 100%;
-  color: white;
-  font-family: 'Azeret Mono', monospace;
+  color: var(--color-white);
+  font-family: 'Roboto', sans-serif;
   font-weight: 700;
   font-size: clamp(0.4rem, 0.8vw, 0.875rem);
   text-align: right;
diff --git a/web/src/components/font-size-input/FontSizeInput.css b/web/src/components/font-size-input/FontSizeInput.css
index 9633ffa..4dd5c82 100644
--- a/web/src/components/font-size-input/FontSizeInput.css
+++ b/web/src/components/font-size-input/FontSizeInput.css
@@ -5,13 +5,13 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 80%;
 }
 .fontsize-number {
     width: 50%;
     text-align: center;
     font-size: 120%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-weight: bold;
 }
\ No newline at end of file
diff --git a/web/src/components/homework/HomeworkAssignment.css b/web/src/components/homework/HomeworkAssignment.css
index 683a650..701fc0f 100644
--- a/web/src/components/homework/HomeworkAssignment.css
+++ b/web/src/components/homework/HomeworkAssignment.css
@@ -6,7 +6,7 @@
     border-top: 2px solid black;
     padding: 2%;
     box-sizing: border-box;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     word-break: break-all;
     overflow-wrap: break-word;
     line-height: 30px;
diff --git a/web/src/components/homework/HomeworkAssignment.tsx b/web/src/components/homework/HomeworkAssignment.tsx
index f009357..a4d957d 100644
--- a/web/src/components/homework/HomeworkAssignment.tsx
+++ b/web/src/components/homework/HomeworkAssignment.tsx
@@ -1,27 +1,35 @@
-import "./HomeworkAssignment.css"
+import { Link } from "react-router-dom";
+import "./HomeworkAssignment.css";
 
 interface HomeworkAssignmentProps {
-    name: string;
-    dueDate: Date;
-    assignmentId: string;
+  name: string;
+  dueDate: Date;
+  assignmentId: string;
 }
 
-function HomeworkAssignment({name, dueDate, assignmentId}: HomeworkAssignmentProps) {
-    const isLate = dueDate.getTime() < new Date().getTime();
-    const formatDate = (date: Date): string => {
-        const mm = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
-        const dd = String(date.getDate()).padStart(2, '0');
-        const yyyy = date.getFullYear();
+function HomeworkAssignment({
+  name,
+  dueDate,
+  assignmentId,
+}: HomeworkAssignmentProps) {
+  const isLate = dueDate.getTime() < new Date().getTime();
+  const formatDate = (date: Date): string => {
+    const mm = String(date.getMonth() + 1).padStart(2, "0"); // Months are 0-indexed
+    const dd = String(date.getDate()).padStart(2, "0");
+    const yyyy = date.getFullYear();
 
-        return `${mm}/${dd}/${yyyy}`;
-    }
-    return (
-        <a className={`homeworkAssignment${isLate ? ' late' : ''}`} href={`/assignment?id=${assignmentId}`}>
-            {name} 
-            <br />
-            Due on: {formatDate(dueDate)}
-        </a>
-    );
+    return `${mm}/${dd}/${yyyy}`;
+  };
+  return (
+    <Link
+      className={`homeworkAssignment${isLate ? " late" : ""}`}
+      to={`/i/assignment?id=${assignmentId}`}
+    >
+      {name}
+      <br />
+      Due on: {formatDate(dueDate)}
+    </Link>
+  );
 }
 
-export default HomeworkAssignment;
\ No newline at end of file
+export default HomeworkAssignment;
diff --git a/web/src/components/homework/HomeworkSidebar.css b/web/src/components/homework/HomeworkSidebar.css
index 3c8beb8..9dc0761 100644
--- a/web/src/components/homework/HomeworkSidebar.css
+++ b/web/src/components/homework/HomeworkSidebar.css
@@ -1,16 +1,16 @@
 .homeworkSidebar {
     border-radius: 15px;
-    border: 1.5px solid black;
-    background: #cacaca;
-    color: white;
+    border: 1.5px solid var(--color-black);
+    background: var(--color-bg-sidebar);
+    color: var(--color-white);
     min-height: 50vh;
 }
 
 .homeworkHeader {
-    color: white;
-    border-bottom: 2px solid black;
+    color: var(--color-white);
+    border-bottom: 2px solid var(--color-black);
     padding: 5%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 175%;
     word-break: break-all;
 }
\ No newline at end of file
diff --git a/web/src/components/logo/Logo.css b/web/src/components/logo/Logo.css
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/components/logo/Logo.tsx b/web/src/components/logo/Logo.tsx
index 863929c..a613540 100644
--- a/web/src/components/logo/Logo.tsx
+++ b/web/src/components/logo/Logo.tsx
@@ -1,99 +1,275 @@
-import './Logo.css'
-
 const Logo = () => {
-    return (
-        <div data-svg-wrapper>
-            <svg width="1372" height="173" viewBox="0 0 1372 173" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <g clip-path="url(#clip0_303_80)">
-                <path d="M3.05176e-05 161.383L37.4126 26.0291L46.6687 30.6401L57.3711 30.1503L66.6054 24.6171L103.251 161.383H83.8915L73.8084 121.065H29.241L18.9563 161.383H3.05176e-05ZM33.0726 106.17H70.1785L56.0621 49.5657C55.3899 46.7851 54.7849 44.2694 54.2472 42.0185C53.7094 39.6352 53.3061 37.5167 53.0372 35.663C52.7682 33.6769 52.4994 31.8894 52.2305 30.3005H51.4239C51.1549 31.8894 50.8189 33.6769 50.4156 35.663C50.1466 37.5167 49.7434 39.6352 49.2056 42.0185C48.6678 44.2694 48.0628 46.7851 47.3906 49.5657L33.0726 106.17ZM187.986 141.024C185.266 141.024 182.796 148.648 180.32 148.362C178.038 148.098 180.539 162.292 178.465 161.785C171.328 160.043 165.416 156.864 160.728 152.247C153.2 144.832 149.435 134.637 149.435 121.661V18.3839H167.585V121.661C167.585 129.606 169.736 135.895 174.038 140.529C175.664 142.28 177.568 143.701 179.75 144.79C181.344 145.586 179.387 144.301 181.279 144.743C183.65 145.298 189.846 138.938 192.684 138.938C195.765 138.938 197.919 143.605 200.452 142.929C202.23 142.454 204.636 145.349 206.143 144.54C206.328 144.441 206.511 144.339 206.692 144.235C208.432 143.232 209.983 141.997 211.346 140.529C215.782 135.895 218.001 129.605 218.001 121.661V18.3837H236.15V121.661C236.15 134.769 232.386 145.031 224.857 152.446C220.326 156.828 214.651 159.892 207.831 161.637C205.903 162.131 207.693 144.562 205.583 144.845C202.753 145.224 199.343 139.82 196.202 140.153L187.986 141.024ZM282.536 18.3839H319.678L322.198 38.3474L334.243 41.9119L346.098 38.0622L348.178 18.3839H385.384V34.0741H349.339L346.488 35.7852L343.236 40.9838V161.383H324.684V40.8051L322.345 35.4431L318.696 34.0741H282.536V18.3839ZM448.911 120.668C448.911 121.352 448.928 122.023 448.96 122.684C449.044 124.389 455.222 126.815 455.523 128.367C456.508 133.436 454.196 131.971 457.499 135.41C458.58 136.535 458.23 142.445 459.505 143.301C463.703 146.116 468.94 147.481 475.127 147.481C483.194 147.481 489.58 145.097 494.285 140.331C498.991 135.431 501.343 128.877 501.343 120.668V59.099C501.343 57.0175 498.664 57.3037 498.362 55.4436C497.665 51.1596 495.173 52.0668 492.872 48.9566C492.231 48.0911 493.741 42.9376 492.976 42.163C492.133 41.3093 492.551 38.0001 491.611 37.2922C487.227 33.9913 481.769 32.2866 475.127 32.2866C467.061 32.2866 460.675 34.7361 455.969 39.6352C451.264 44.4018 448.911 50.8898 448.911 59.099V120.668ZM430.762 59.099C430.762 52.6111 431.77 46.7189 433.786 41.4226C435.938 36.1264 438.895 31.6246 442.66 27.9171C446.558 24.2098 451.197 21.363 456.574 19.3769C462.086 17.3909 468.271 16.3978 475.127 16.3978C481.984 16.3978 488.101 17.3909 493.479 19.3769C498.464 21.1732 502.734 23.6734 506.29 26.8776C506.666 27.2163 507.033 27.5628 507.393 27.9171C509.147 29.5845 494.369 33.0376 495.742 35.0264C497.422 37.4596 492.181 46.2724 493.29 49.1867C494.067 51.2259 501.988 54.9186 502.5 57.1123C503.089 59.6386 519.198 52.9284 519.381 55.6814C519.455 56.8006 519.493 57.9396 519.493 59.099V120.668C519.493 127.156 518.417 133.048 516.266 138.344C514.25 143.508 511.292 147.944 507.393 151.651C503.629 155.359 498.991 158.272 493.478 160.39C487.966 162.376 481.849 163.369 475.127 163.369C468.271 163.369 462.086 162.376 456.574 160.39C452.598 158.922 449.025 156.982 445.857 154.572C444.741 153.723 459.829 140.638 458.813 139.672C457.997 138.869 459.044 135.342 458.296 134.467C455.595 131.304 455.13 132.155 453.537 127.97C453.066 126.731 448.925 125.926 448.564 124.621C447.959 122.441 431.482 130.077 431.187 127.714C430.903 125.449 430.762 123.101 430.762 120.668L430.762 59.099ZM613.068 87.8975H637.7L636.226 103.724L642.847 109.683L650.152 112.806L660.66 111.652V120.668C660.66 127.156 659.585 133.048 657.434 138.344C655.417 143.641 652.459 148.143 648.56 151.85C644.796 155.557 640.158 158.404 634.646 160.39C629.268 162.376 623.151 163.369 616.294 163.369C609.572 163.369 603.455 162.376 597.943 160.39C592.431 158.404 587.726 155.557 583.827 151.85C580.062 148.143 577.105 143.641 574.954 138.344C572.937 133.048 571.929 127.156 571.929 120.668V59.099C571.929 52.7434 573.004 46.9175 575.155 41.6213C577.306 36.325 580.264 31.8231 584.029 28.1158C587.927 24.4084 592.633 21.5616 598.145 19.5755C603.657 17.457 609.707 16.3978 616.294 16.3978C628.529 16.3978 638.545 19.4431 646.342 25.5339C654.14 31.6246 659.249 40.4958 661.668 52.1476H643.116C641.771 45.9245 638.746 41.0916 634.041 37.6491C629.335 34.0741 623.42 32.2866 616.294 32.2866C608.228 32.2866 601.842 34.6699 597.137 39.4366C592.431 44.2032 590.078 50.7574 590.078 59.099V120.668C590.078 129.01 592.431 135.564 597.137 140.331C601.842 145.097 608.228 147.481 616.294 147.481C624.361 147.481 630.747 145.097 635.452 140.331C640.158 135.564 642.511 129.01 642.511 120.668V112.421L637.961 108.015L635.009 103.786H613.068V87.8975ZM761.495 18.3839C768.083 18.3839 774.065 19.3769 779.443 21.363C784.821 23.3491 789.392 26.1959 793.156 29.9033C797.055 33.6107 800.012 38.0463 802.029 43.2101C804.18 48.2416 805.256 53.8689 805.256 60.092C805.256 70.0225 802.634 78.4966 797.391 85.5141C793.626 90.5886 788.838 94.5123 783.028 97.2853C780.955 98.2747 783.47 100.939 781.137 101.635L779.556 106.076L807.272 161.383H785.896L762.567 112.149L757.663 107.761L751.087 101.8H733.262V161.383H715.113V40.5474L732.142 39.0207L736.004 37.321L738.332 22.9086L738.352 18.3839H761.495ZM733.262 85.9113H753.532L754.375 106.277C755.922 106.277 765.421 111.182 771.507 109.436C777.718 107.655 780.514 99.2184 781.822 98.829C783.945 98.1968 774.132 83.2314 775.894 82.0807C777.251 81.1943 778.501 80.1541 779.645 78.96C784.212 74.1895 786.501 67.904 786.501 60.092C786.501 52.28 784.216 46.0569 779.645 41.4226C775.074 36.656 769.024 34.2727 761.495 34.2727H739.252L735.196 35.7124L733.262 41.2988V85.9113ZM847.003 161.383L884.396 26.1029L891.428 28.3543L898.438 30.7921L907.904 28.0085L913.713 25.0054L950.255 161.383H930.895L920.812 121.065H876.244L865.96 161.383H847.003ZM880.076 106.17H917.182L903.066 49.5657C902.393 46.7851 901.788 44.2694 901.251 42.0185C900.713 39.6352 900.309 37.5167 900.041 35.663C899.992 35.3013 899.943 34.9463 899.894 34.5978C899.674 33.0325 899.454 31.6 899.234 30.3005H898.427C898.212 31.5723 897.954 32.9714 897.652 34.4978C897.577 34.8783 897.499 35.2667 897.419 35.663C897.15 37.5167 896.747 39.6352 896.209 42.0185C895.671 44.2694 895.066 46.7851 894.394 49.5657L880.076 106.17ZM1037.58 145.494C1046.05 145.494 1052.84 142.979 1057.95 137.947C1063.19 132.783 1065.81 126.031 1065.81 117.689V61.8795C1065.81 53.5379 1063.19 46.8514 1057.95 41.8199C1052.84 36.7884 1046.05 34.2727 1037.58 34.2727H1015.19V137.76L1018.02 141.509L1021.72 145.494H1037.58ZM1017.41 141.402L1009.61 138.591L997.044 137.926V18.3839H1037.58C1044.57 18.3839 1050.89 19.4431 1056.53 21.5616C1062.32 23.6801 1067.22 26.6593 1071.26 30.4991C1075.42 34.2065 1078.58 38.7745 1080.73 44.2032C1083.02 49.4995 1084.16 55.3916 1084.16 61.8795V117.689C1084.16 124.177 1083.02 130.135 1080.73 135.564C1078.58 140.993 1075.42 145.627 1071.26 149.467C1067.22 153.174 1062.32 156.087 1056.53 158.205C1050.89 160.324 1044.57 161.383 1037.58 161.383H1020L1021.28 154.797L1017.41 141.402ZM1326.16 18.3839C1332.75 18.3839 1338.73 19.3769 1344.11 21.363C1349.49 23.3491 1354.06 26.1959 1357.82 29.9033C1361.72 33.6107 1364.68 38.0463 1366.7 43.2101C1368.85 48.2416 1369.92 53.8689 1369.92 60.092C1369.92 70.0225 1367.3 78.4966 1362.06 85.5141C1358.3 90.5798 1353.52 94.4986 1347.73 97.2707C1345.65 98.2664 1347.61 99.4577 1345.27 100.158L1344.23 106.081L1371.94 161.383H1350.57L1327.02 111.695L1319.76 105.006L1315.73 101.8H1297.93V161.383H1279.78V41.0255L1284.07 40.8996L1292.34 40.2191L1303.67 33.2867L1301.01 23.7789L1303.21 18.3841L1326.16 18.3839ZM1297.93 85.9113H1317.68L1317.45 98.5627L1322.5 107.035C1323.35 108.463 1331.41 110.626 1337.18 108.441C1342.38 106.471 1345.32 100.216 1346.56 99.842C1348.76 99.1758 1339.04 83.1151 1340.86 81.8858C1342.1 81.0429 1343.25 80.0676 1344.31 78.96C1348.88 74.1933 1351.17 67.904 1351.17 60.092C1351.17 52.28 1348.88 46.0569 1344.31 41.4226C1339.74 36.656 1333.69 34.2727 1326.16 34.2727H1304.2L1300.58 37.1125L1297.93 41.1518V85.9113Z" fill="url(#paint0_linear_303_80)"/>
-                <path d="M1138.83 144.314H1226.13V162.163H1138.83V144.314Z" fill="url(#paint1_linear_303_80)"/>
-                <path d="M1138.83 17.5988H1226.13V35.447H1138.83V17.5988Z" fill="url(#paint2_linear_303_80)"/>
-                <path d="M1138.84 78.7558H1226.13V96.604H1138.84V78.7558Z" fill="url(#paint3_linear_303_80)"/>
-                <path d="M1345.81 95.5873C1345.81 97.4875 1345.43 99.3691 1344.7 101.125C1343.98 102.88 1342.91 104.475 1341.57 105.819C1340.22 107.163 1338.63 108.228 1336.87 108.956C1335.12 109.683 1333.24 110.057 1331.34 110.057C1329.44 110.057 1327.55 109.683 1325.8 108.956C1324.04 108.228 1322.45 107.163 1321.1 105.819C1319.76 104.475 1318.69 102.88 1317.97 101.125C1317.24 99.3691 1316.87 97.4875 1316.87 95.5873C1316.87 93.6871 1317.24 91.8055 1317.97 90.0499C1318.69 88.2943 1319.76 86.6992 1321.1 85.3556C1322.45 84.0119 1324.04 82.9461 1325.8 82.2189C1327.55 81.4917 1329.44 81.1174 1331.34 81.1174C1333.24 81.1174 1335.12 81.4917 1336.87 82.2189C1338.63 82.9461 1340.22 84.0119 1341.57 85.3556C1342.91 86.6992 1343.98 88.2943 1344.7 90.0499C1345.43 91.8055 1345.81 93.6871 1345.81 95.5873Z" stroke="url(#paint4_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M665.088 97.8497C665.088 99.7499 664.714 101.632 663.986 103.387C663.259 105.143 662.193 106.738 660.85 108.081C659.506 109.425 657.911 110.491 656.155 111.218C654.4 111.945 652.518 112.32 650.618 112.32C648.718 112.32 646.836 111.945 645.081 111.218C643.325 110.491 641.73 109.425 640.386 108.081C639.043 106.738 637.977 105.143 637.25 103.387C636.522 101.632 636.148 99.7499 636.148 97.8497C636.148 95.9495 636.522 94.0679 637.25 92.3123C637.977 90.5568 639.043 88.9617 640.386 87.618C641.73 86.2744 643.325 85.2085 645.081 84.4813C646.836 83.7542 648.718 83.3799 650.618 83.3799C652.518 83.3799 654.4 83.7542 656.155 84.4813C657.911 85.2085 659.506 86.2744 660.85 87.618C662.193 88.9617 663.259 90.5568 663.986 92.3123C664.714 94.0679 665.088 95.9495 665.088 97.8497Z" stroke="url(#paint5_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M348.448 27.0761C348.448 28.9763 348.073 30.8579 347.346 32.6135C346.619 34.369 345.553 35.9642 344.21 37.3078C342.866 38.6514 341.271 39.7173 339.515 40.4445C337.76 41.1717 335.878 41.5459 333.978 41.5459C330.14 41.5459 326.46 40.0214 323.746 37.3078C321.033 34.5942 319.508 30.9137 319.508 27.0761C319.508 25.1759 319.882 23.2943 320.61 21.5387C321.337 19.7832 322.403 18.188 323.746 16.8444C325.09 15.5007 326.685 14.4349 328.441 13.7077C330.196 12.9805 332.078 12.6063 333.978 12.6063C335.878 12.6063 337.76 12.9805 339.515 13.7077C341.271 14.4349 342.866 15.5007 344.21 16.8444C345.553 18.188 346.619 19.7832 347.346 21.5387C348.073 23.2943 348.448 25.1759 348.448 27.0761Z" stroke="url(#paint6_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M522.018 43.6191C522.018 45.5193 521.644 47.4009 520.917 49.1565C520.189 50.912 519.124 52.5072 517.78 53.8508C516.436 55.1945 514.841 56.2603 513.086 56.9875C511.33 57.7147 509.448 58.0889 507.548 58.0889C503.711 58.0889 500.03 56.5645 497.316 53.8508C494.603 51.1372 493.078 47.4568 493.078 43.6191C493.078 39.7815 494.603 36.101 497.316 33.3874C500.03 30.6738 503.711 29.1493 507.548 29.1493C509.448 29.1493 511.33 29.5236 513.086 30.2507C514.841 30.9779 516.436 32.0438 517.78 33.3874C519.124 34.731 520.189 36.3262 520.917 38.0818C521.644 39.8373 522.018 41.7189 522.018 43.6191Z" stroke="url(#paint7_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M458.114 138.2C458.114 140.1 457.739 141.982 457.012 143.738C456.285 145.493 455.219 147.088 453.875 148.432C452.532 149.776 450.937 150.841 449.181 151.569C447.426 152.296 445.544 152.67 443.644 152.67C441.744 152.67 439.862 152.296 438.106 151.569C436.351 150.841 434.756 149.776 433.412 148.432C432.068 147.088 431.003 145.493 430.275 143.738C429.548 141.982 429.174 140.1 429.174 138.2C429.174 136.3 429.548 134.418 430.275 132.663C431.003 130.907 432.068 129.312 433.412 127.969C434.756 126.625 436.351 125.559 438.106 124.832C439.862 124.105 441.744 123.73 443.644 123.73C445.544 123.73 447.426 124.105 449.181 124.832C450.937 125.559 452.532 126.625 453.875 127.969C455.219 129.312 456.285 130.907 457.012 132.663C457.739 134.418 458.114 136.3 458.114 138.2Z" stroke="url(#paint8_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M738.68 27.3546C738.68 29.2548 738.306 31.1364 737.578 32.892C736.851 34.6476 735.785 36.2427 734.442 37.5863C733.098 38.93 731.503 39.9958 729.747 40.723C727.992 41.4502 726.11 41.8245 724.21 41.8245C722.31 41.8245 720.428 41.4502 718.673 40.723C716.917 39.9958 715.322 38.93 713.978 37.5863C712.635 36.2427 711.569 34.6476 710.842 32.892C710.114 31.1364 709.74 29.2548 709.74 27.3546C709.74 25.4544 710.114 23.5728 710.842 21.8173C711.569 20.0617 712.635 18.4666 713.978 17.1229C715.322 15.7793 716.917 14.7134 718.673 13.9863C720.428 13.2591 722.31 12.8848 724.21 12.8848C726.11 12.8848 727.992 13.2591 729.747 13.9863C731.503 14.7134 733.098 15.7793 734.442 17.1229C735.785 18.4666 736.851 20.0617 737.578 21.8173C738.306 23.5728 738.68 25.4544 738.68 27.3546Z" stroke="url(#paint9_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M781.077 95.8598C781.077 97.76 780.703 99.6416 779.975 101.397C779.248 103.153 778.182 104.748 776.839 106.091C775.495 107.435 773.9 108.501 772.144 109.228C770.389 109.955 768.507 110.33 766.607 110.33C764.707 110.33 762.825 109.955 761.07 109.228C759.314 108.501 757.719 107.435 756.375 106.091C755.032 104.748 753.966 103.153 753.239 101.397C752.511 99.6416 752.137 97.76 752.137 95.8598C752.137 93.9596 752.511 92.078 753.239 90.3224C753.966 88.5669 755.032 86.9717 756.375 85.628C757.719 84.2844 759.314 83.2185 761.07 82.4914C762.825 81.7642 764.707 81.39 766.607 81.39C768.507 81.39 770.389 81.7642 772.144 82.4914C773.9 83.2185 775.495 84.2844 776.839 85.628C778.182 86.9717 779.248 88.5669 779.975 90.3224C780.703 92.078 781.077 93.9596 781.077 95.8598Z" stroke="url(#paint10_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M1020.73 152.021C1020.73 153.921 1020.35 155.803 1019.62 157.558C1018.9 159.314 1017.83 160.909 1016.49 162.253C1015.14 163.596 1013.55 164.662 1011.79 165.389C1010.04 166.117 1008.16 166.491 1006.26 166.491C1004.36 166.491 1002.47 166.117 1000.72 165.389C998.962 164.662 997.367 163.596 996.023 162.253C994.68 160.909 993.614 159.314 992.887 157.558C992.16 155.803 991.785 153.921 991.785 152.021C991.785 150.121 992.16 148.239 992.887 146.484C993.614 144.728 994.68 143.133 996.023 141.789C997.367 140.446 998.962 139.38 1000.72 138.653C1002.47 137.925 1004.36 137.551 1006.26 137.551C1008.16 137.551 1010.04 137.925 1011.79 138.653C1013.55 139.38 1015.14 140.446 1016.49 141.789C1017.83 143.133 1018.9 144.728 1019.62 146.484C1020.35 148.239 1020.73 150.121 1020.73 152.021Z" stroke="url(#paint11_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M1303.41 27.0821C1303.41 28.9823 1303.03 30.8639 1302.31 32.6195C1301.58 34.375 1300.51 35.9701 1299.17 37.3138C1297.83 38.6574 1296.23 39.7233 1294.48 40.4505C1292.72 41.1776 1290.84 41.5519 1288.94 41.5519C1287.04 41.5519 1285.16 41.1776 1283.4 40.4505C1281.65 39.7233 1280.05 38.6574 1278.71 37.3138C1277.36 35.9701 1276.3 34.375 1275.57 32.6195C1274.84 30.8639 1274.47 28.9823 1274.47 27.0821C1274.47 25.1819 1274.84 23.3003 1275.57 21.5447C1276.3 19.7891 1277.36 18.194 1278.71 16.8504C1280.05 15.5067 1281.65 14.4409 1283.4 13.7137C1285.16 12.9865 1287.04 12.6122 1288.94 12.6122C1290.84 12.6122 1292.72 12.9865 1294.48 13.7137C1296.23 14.4409 1297.83 15.5067 1299.17 16.8504C1300.51 18.194 1301.58 19.7891 1302.31 21.5447C1303.03 23.3003 1303.41 25.1819 1303.41 27.0821Z" stroke="url(#paint12_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M66.2141 17.3826C66.2141 21.2202 64.6896 24.9007 61.976 27.6143C59.2624 30.3279 55.5819 31.8525 51.7443 31.8525C49.8441 31.8525 47.9625 31.4782 46.2069 30.751C44.4514 30.0238 42.8562 28.958 41.5126 27.6143C40.1689 26.2707 39.1031 24.6756 38.3759 22.92C37.6487 21.1644 37.2745 19.2828 37.2745 17.3826C37.2745 15.4824 37.6487 13.6008 38.3759 11.8452C39.1031 10.0897 40.1689 8.49454 41.5126 7.15089C42.8562 5.80724 44.4514 4.74142 46.2069 4.01424C47.9625 3.28706 49.8441 2.91278 51.7443 2.91278C55.5819 2.91278 59.2624 4.43727 61.976 7.15089C64.6896 9.86451 66.2141 13.545 66.2141 17.3826Z" stroke="url(#paint13_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M913.232 17.3826C913.232 19.2828 912.857 21.1644 912.13 22.92C911.403 24.6756 910.337 26.2707 908.994 27.6143C907.65 28.958 906.055 30.0238 904.299 30.751C902.544 31.4782 900.662 31.8525 898.762 31.8525C896.862 31.8525 894.98 31.4782 893.224 30.751C891.469 30.0238 889.874 28.958 888.53 27.6143C887.186 26.2707 886.121 24.6756 885.393 22.92C884.666 21.1644 884.292 19.2828 884.292 17.3826C884.292 15.4824 884.666 13.6008 885.393 11.8452C886.121 10.0897 887.186 8.49454 888.53 7.15089C889.874 5.80724 891.469 4.74142 893.224 4.01424C894.98 3.28706 896.862 2.91278 898.762 2.91278C900.662 2.91278 902.544 3.28706 904.299 4.01424C906.055 4.74142 907.65 5.80724 908.994 7.15089C910.337 8.49454 911.403 10.0897 912.13 11.8452C912.857 13.6008 913.232 15.4824 913.232 17.3826Z" stroke="url(#paint14_linear_303_80)" stroke-width="5.82549"/>
-                <path d="M207.674 154.662C207.674 158.5 206.149 162.18 203.435 164.894C200.722 167.607 197.041 169.132 193.204 169.132C191.304 169.132 189.422 168.758 187.666 168.03C185.911 167.303 184.316 166.237 182.972 164.894C181.628 163.55 180.563 161.955 179.835 160.199C179.108 158.444 178.734 156.562 178.734 154.662C178.734 152.762 179.108 150.88 179.835 149.125C180.563 147.369 181.628 145.774 182.972 144.43C184.316 143.087 185.911 142.021 187.666 141.294C189.422 140.566 191.304 140.192 193.204 140.192C197.041 140.192 200.722 141.717 203.435 144.43C206.149 147.144 207.674 150.824 207.674 154.662Z" stroke="url(#paint15_linear_303_80)" stroke-width="5.82549"/>
-                </g>
-                <defs>
-                    <linearGradient id="paint0_linear_303_80" x1="1422.25" y1="86.2687" x2="-69.8572" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint1_linear_303_80" x1="1422.25" y1="86.2686" x2="-69.858" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint2_linear_303_80" x1="1422.25" y1="86.2687" x2="-69.8567" y2="88.018" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint3_linear_303_80" x1="1422.25" y1="86.2686" x2="-69.8573" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint4_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3579" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint5_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3585" y2="88.0178" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint6_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3589" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint7_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3591" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint8_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3587" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint9_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3584" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint10_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3591" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint11_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3583" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint12_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3582" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint13_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3588" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint14_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3582" y2="88.0178" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <linearGradient id="paint15_linear_303_80" x1="1418.75" y1="86.2686" x2="-66.3589" y2="88.0179" gradientUnits="userSpaceOnUse">
-                    <stop stop-color="#0CAADC"/>
-                    <stop offset="1" stop-color="#1E222B"/>
-                    </linearGradient>
-                    <clipPath id="clip0_303_80">
-                    <rect width="1371.94" height="172.044" fill="white"/>
-                    </clipPath>
-                </defs>
-            </svg>
-        </div>
-    );
-  };
-  
-  export default Logo;
\ No newline at end of file
+  return (
+    <div data-svg-wrapper>
+      <svg
+        width="1372"
+        height="173"
+        viewBox="0 0 1372 173"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_303_80)">
+          <path
+            d="M3.05176e-05 161.383L37.4126 26.0291L46.6687 30.6401L57.3711 30.1503L66.6054 24.6171L103.251 161.383H83.8915L73.8084 121.065H29.241L18.9563 161.383H3.05176e-05ZM33.0726 106.17H70.1785L56.0621 49.5657C55.3899 46.7851 54.7849 44.2694 54.2472 42.0185C53.7094 39.6352 53.3061 37.5167 53.0372 35.663C52.7682 33.6769 52.4994 31.8894 52.2305 30.3005H51.4239C51.1549 31.8894 50.8189 33.6769 50.4156 35.663C50.1466 37.5167 49.7434 39.6352 49.2056 42.0185C48.6678 44.2694 48.0628 46.7851 47.3906 49.5657L33.0726 106.17ZM187.986 141.024C185.266 141.024 182.796 148.648 180.32 148.362C178.038 148.098 180.539 162.292 178.465 161.785C171.328 160.043 165.416 156.864 160.728 152.247C153.2 144.832 149.435 134.637 149.435 121.661V18.3839H167.585V121.661C167.585 129.606 169.736 135.895 174.038 140.529C175.664 142.28 177.568 143.701 179.75 144.79C181.344 145.586 179.387 144.301 181.279 144.743C183.65 145.298 189.846 138.938 192.684 138.938C195.765 138.938 197.919 143.605 200.452 142.929C202.23 142.454 204.636 145.349 206.143 144.54C206.328 144.441 206.511 144.339 206.692 144.235C208.432 143.232 209.983 141.997 211.346 140.529C215.782 135.895 218.001 129.605 218.001 121.661V18.3837H236.15V121.661C236.15 134.769 232.386 145.031 224.857 152.446C220.326 156.828 214.651 159.892 207.831 161.637C205.903 162.131 207.693 144.562 205.583 144.845C202.753 145.224 199.343 139.82 196.202 140.153L187.986 141.024ZM282.536 18.3839H319.678L322.198 38.3474L334.243 41.9119L346.098 38.0622L348.178 18.3839H385.384V34.0741H349.339L346.488 35.7852L343.236 40.9838V161.383H324.684V40.8051L322.345 35.4431L318.696 34.0741H282.536V18.3839ZM448.911 120.668C448.911 121.352 448.928 122.023 448.96 122.684C449.044 124.389 455.222 126.815 455.523 128.367C456.508 133.436 454.196 131.971 457.499 135.41C458.58 136.535 458.23 142.445 459.505 143.301C463.703 146.116 468.94 147.481 475.127 147.481C483.194 147.481 489.58 145.097 494.285 140.331C498.991 135.431 501.343 128.877 501.343 120.668V59.099C501.343 57.0175 498.664 57.3037 498.362 55.4436C497.665 51.1596 495.173 52.0668 492.872 48.9566C492.231 48.0911 493.741 42.9376 492.976 42.163C492.133 41.3093 492.551 38.0001 491.611 37.2922C487.227 33.9913 481.769 32.2866 475.127 32.2866C467.061 32.2866 460.675 34.7361 455.969 39.6352C451.264 44.4018 448.911 50.8898 448.911 59.099V120.668ZM430.762 59.099C430.762 52.6111 431.77 46.7189 433.786 41.4226C435.938 36.1264 438.895 31.6246 442.66 27.9171C446.558 24.2098 451.197 21.363 456.574 19.3769C462.086 17.3909 468.271 16.3978 475.127 16.3978C481.984 16.3978 488.101 17.3909 493.479 19.3769C498.464 21.1732 502.734 23.6734 506.29 26.8776C506.666 27.2163 507.033 27.5628 507.393 27.9171C509.147 29.5845 494.369 33.0376 495.742 35.0264C497.422 37.4596 492.181 46.2724 493.29 49.1867C494.067 51.2259 501.988 54.9186 502.5 57.1123C503.089 59.6386 519.198 52.9284 519.381 55.6814C519.455 56.8006 519.493 57.9396 519.493 59.099V120.668C519.493 127.156 518.417 133.048 516.266 138.344C514.25 143.508 511.292 147.944 507.393 151.651C503.629 155.359 498.991 158.272 493.478 160.39C487.966 162.376 481.849 163.369 475.127 163.369C468.271 163.369 462.086 162.376 456.574 160.39C452.598 158.922 449.025 156.982 445.857 154.572C444.741 153.723 459.829 140.638 458.813 139.672C457.997 138.869 459.044 135.342 458.296 134.467C455.595 131.304 455.13 132.155 453.537 127.97C453.066 126.731 448.925 125.926 448.564 124.621C447.959 122.441 431.482 130.077 431.187 127.714C430.903 125.449 430.762 123.101 430.762 120.668L430.762 59.099ZM613.068 87.8975H637.7L636.226 103.724L642.847 109.683L650.152 112.806L660.66 111.652V120.668C660.66 127.156 659.585 133.048 657.434 138.344C655.417 143.641 652.459 148.143 648.56 151.85C644.796 155.557 640.158 158.404 634.646 160.39C629.268 162.376 623.151 163.369 616.294 163.369C609.572 163.369 603.455 162.376 597.943 160.39C592.431 158.404 587.726 155.557 583.827 151.85C580.062 148.143 577.105 143.641 574.954 138.344C572.937 133.048 571.929 127.156 571.929 120.668V59.099C571.929 52.7434 573.004 46.9175 575.155 41.6213C577.306 36.325 580.264 31.8231 584.029 28.1158C587.927 24.4084 592.633 21.5616 598.145 19.5755C603.657 17.457 609.707 16.3978 616.294 16.3978C628.529 16.3978 638.545 19.4431 646.342 25.5339C654.14 31.6246 659.249 40.4958 661.668 52.1476H643.116C641.771 45.9245 638.746 41.0916 634.041 37.6491C629.335 34.0741 623.42 32.2866 616.294 32.2866C608.228 32.2866 601.842 34.6699 597.137 39.4366C592.431 44.2032 590.078 50.7574 590.078 59.099V120.668C590.078 129.01 592.431 135.564 597.137 140.331C601.842 145.097 608.228 147.481 616.294 147.481C624.361 147.481 630.747 145.097 635.452 140.331C640.158 135.564 642.511 129.01 642.511 120.668V112.421L637.961 108.015L635.009 103.786H613.068V87.8975ZM761.495 18.3839C768.083 18.3839 774.065 19.3769 779.443 21.363C784.821 23.3491 789.392 26.1959 793.156 29.9033C797.055 33.6107 800.012 38.0463 802.029 43.2101C804.18 48.2416 805.256 53.8689 805.256 60.092C805.256 70.0225 802.634 78.4966 797.391 85.5141C793.626 90.5886 788.838 94.5123 783.028 97.2853C780.955 98.2747 783.47 100.939 781.137 101.635L779.556 106.076L807.272 161.383H785.896L762.567 112.149L757.663 107.761L751.087 101.8H733.262V161.383H715.113V40.5474L732.142 39.0207L736.004 37.321L738.332 22.9086L738.352 18.3839H761.495ZM733.262 85.9113H753.532L754.375 106.277C755.922 106.277 765.421 111.182 771.507 109.436C777.718 107.655 780.514 99.2184 781.822 98.829C783.945 98.1968 774.132 83.2314 775.894 82.0807C777.251 81.1943 778.501 80.1541 779.645 78.96C784.212 74.1895 786.501 67.904 786.501 60.092C786.501 52.28 784.216 46.0569 779.645 41.4226C775.074 36.656 769.024 34.2727 761.495 34.2727H739.252L735.196 35.7124L733.262 41.2988V85.9113ZM847.003 161.383L884.396 26.1029L891.428 28.3543L898.438 30.7921L907.904 28.0085L913.713 25.0054L950.255 161.383H930.895L920.812 121.065H876.244L865.96 161.383H847.003ZM880.076 106.17H917.182L903.066 49.5657C902.393 46.7851 901.788 44.2694 901.251 42.0185C900.713 39.6352 900.309 37.5167 900.041 35.663C899.992 35.3013 899.943 34.9463 899.894 34.5978C899.674 33.0325 899.454 31.6 899.234 30.3005H898.427C898.212 31.5723 897.954 32.9714 897.652 34.4978C897.577 34.8783 897.499 35.2667 897.419 35.663C897.15 37.5167 896.747 39.6352 896.209 42.0185C895.671 44.2694 895.066 46.7851 894.394 49.5657L880.076 106.17ZM1037.58 145.494C1046.05 145.494 1052.84 142.979 1057.95 137.947C1063.19 132.783 1065.81 126.031 1065.81 117.689V61.8795C1065.81 53.5379 1063.19 46.8514 1057.95 41.8199C1052.84 36.7884 1046.05 34.2727 1037.58 34.2727H1015.19V137.76L1018.02 141.509L1021.72 145.494H1037.58ZM1017.41 141.402L1009.61 138.591L997.044 137.926V18.3839H1037.58C1044.57 18.3839 1050.89 19.4431 1056.53 21.5616C1062.32 23.6801 1067.22 26.6593 1071.26 30.4991C1075.42 34.2065 1078.58 38.7745 1080.73 44.2032C1083.02 49.4995 1084.16 55.3916 1084.16 61.8795V117.689C1084.16 124.177 1083.02 130.135 1080.73 135.564C1078.58 140.993 1075.42 145.627 1071.26 149.467C1067.22 153.174 1062.32 156.087 1056.53 158.205C1050.89 160.324 1044.57 161.383 1037.58 161.383H1020L1021.28 154.797L1017.41 141.402ZM1326.16 18.3839C1332.75 18.3839 1338.73 19.3769 1344.11 21.363C1349.49 23.3491 1354.06 26.1959 1357.82 29.9033C1361.72 33.6107 1364.68 38.0463 1366.7 43.2101C1368.85 48.2416 1369.92 53.8689 1369.92 60.092C1369.92 70.0225 1367.3 78.4966 1362.06 85.5141C1358.3 90.5798 1353.52 94.4986 1347.73 97.2707C1345.65 98.2664 1347.61 99.4577 1345.27 100.158L1344.23 106.081L1371.94 161.383H1350.57L1327.02 111.695L1319.76 105.006L1315.73 101.8H1297.93V161.383H1279.78V41.0255L1284.07 40.8996L1292.34 40.2191L1303.67 33.2867L1301.01 23.7789L1303.21 18.3841L1326.16 18.3839ZM1297.93 85.9113H1317.68L1317.45 98.5627L1322.5 107.035C1323.35 108.463 1331.41 110.626 1337.18 108.441C1342.38 106.471 1345.32 100.216 1346.56 99.842C1348.76 99.1758 1339.04 83.1151 1340.86 81.8858C1342.1 81.0429 1343.25 80.0676 1344.31 78.96C1348.88 74.1933 1351.17 67.904 1351.17 60.092C1351.17 52.28 1348.88 46.0569 1344.31 41.4226C1339.74 36.656 1333.69 34.2727 1326.16 34.2727H1304.2L1300.58 37.1125L1297.93 41.1518V85.9113Z"
+            fill="url(#paint0_linear_303_80)"
+          />
+          <path
+            d="M1138.83 144.314H1226.13V162.163H1138.83V144.314Z"
+            fill="url(#paint1_linear_303_80)"
+          />
+          <path
+            d="M1138.83 17.5988H1226.13V35.447H1138.83V17.5988Z"
+            fill="url(#paint2_linear_303_80)"
+          />
+          <path
+            d="M1138.84 78.7558H1226.13V96.604H1138.84V78.7558Z"
+            fill="url(#paint3_linear_303_80)"
+          />
+          <path
+            d="M1345.81 95.5873C1345.81 97.4875 1345.43 99.3691 1344.7 101.125C1343.98 102.88 1342.91 104.475 1341.57 105.819C1340.22 107.163 1338.63 108.228 1336.87 108.956C1335.12 109.683 1333.24 110.057 1331.34 110.057C1329.44 110.057 1327.55 109.683 1325.8 108.956C1324.04 108.228 1322.45 107.163 1321.1 105.819C1319.76 104.475 1318.69 102.88 1317.97 101.125C1317.24 99.3691 1316.87 97.4875 1316.87 95.5873C1316.87 93.6871 1317.24 91.8055 1317.97 90.0499C1318.69 88.2943 1319.76 86.6992 1321.1 85.3556C1322.45 84.0119 1324.04 82.9461 1325.8 82.2189C1327.55 81.4917 1329.44 81.1174 1331.34 81.1174C1333.24 81.1174 1335.12 81.4917 1336.87 82.2189C1338.63 82.9461 1340.22 84.0119 1341.57 85.3556C1342.91 86.6992 1343.98 88.2943 1344.7 90.0499C1345.43 91.8055 1345.81 93.6871 1345.81 95.5873Z"
+            stroke="url(#paint4_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M665.088 97.8497C665.088 99.7499 664.714 101.632 663.986 103.387C663.259 105.143 662.193 106.738 660.85 108.081C659.506 109.425 657.911 110.491 656.155 111.218C654.4 111.945 652.518 112.32 650.618 112.32C648.718 112.32 646.836 111.945 645.081 111.218C643.325 110.491 641.73 109.425 640.386 108.081C639.043 106.738 637.977 105.143 637.25 103.387C636.522 101.632 636.148 99.7499 636.148 97.8497C636.148 95.9495 636.522 94.0679 637.25 92.3123C637.977 90.5568 639.043 88.9617 640.386 87.618C641.73 86.2744 643.325 85.2085 645.081 84.4813C646.836 83.7542 648.718 83.3799 650.618 83.3799C652.518 83.3799 654.4 83.7542 656.155 84.4813C657.911 85.2085 659.506 86.2744 660.85 87.618C662.193 88.9617 663.259 90.5568 663.986 92.3123C664.714 94.0679 665.088 95.9495 665.088 97.8497Z"
+            stroke="url(#paint5_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M348.448 27.0761C348.448 28.9763 348.073 30.8579 347.346 32.6135C346.619 34.369 345.553 35.9642 344.21 37.3078C342.866 38.6514 341.271 39.7173 339.515 40.4445C337.76 41.1717 335.878 41.5459 333.978 41.5459C330.14 41.5459 326.46 40.0214 323.746 37.3078C321.033 34.5942 319.508 30.9137 319.508 27.0761C319.508 25.1759 319.882 23.2943 320.61 21.5387C321.337 19.7832 322.403 18.188 323.746 16.8444C325.09 15.5007 326.685 14.4349 328.441 13.7077C330.196 12.9805 332.078 12.6063 333.978 12.6063C335.878 12.6063 337.76 12.9805 339.515 13.7077C341.271 14.4349 342.866 15.5007 344.21 16.8444C345.553 18.188 346.619 19.7832 347.346 21.5387C348.073 23.2943 348.448 25.1759 348.448 27.0761Z"
+            stroke="url(#paint6_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M522.018 43.6191C522.018 45.5193 521.644 47.4009 520.917 49.1565C520.189 50.912 519.124 52.5072 517.78 53.8508C516.436 55.1945 514.841 56.2603 513.086 56.9875C511.33 57.7147 509.448 58.0889 507.548 58.0889C503.711 58.0889 500.03 56.5645 497.316 53.8508C494.603 51.1372 493.078 47.4568 493.078 43.6191C493.078 39.7815 494.603 36.101 497.316 33.3874C500.03 30.6738 503.711 29.1493 507.548 29.1493C509.448 29.1493 511.33 29.5236 513.086 30.2507C514.841 30.9779 516.436 32.0438 517.78 33.3874C519.124 34.731 520.189 36.3262 520.917 38.0818C521.644 39.8373 522.018 41.7189 522.018 43.6191Z"
+            stroke="url(#paint7_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M458.114 138.2C458.114 140.1 457.739 141.982 457.012 143.738C456.285 145.493 455.219 147.088 453.875 148.432C452.532 149.776 450.937 150.841 449.181 151.569C447.426 152.296 445.544 152.67 443.644 152.67C441.744 152.67 439.862 152.296 438.106 151.569C436.351 150.841 434.756 149.776 433.412 148.432C432.068 147.088 431.003 145.493 430.275 143.738C429.548 141.982 429.174 140.1 429.174 138.2C429.174 136.3 429.548 134.418 430.275 132.663C431.003 130.907 432.068 129.312 433.412 127.969C434.756 126.625 436.351 125.559 438.106 124.832C439.862 124.105 441.744 123.73 443.644 123.73C445.544 123.73 447.426 124.105 449.181 124.832C450.937 125.559 452.532 126.625 453.875 127.969C455.219 129.312 456.285 130.907 457.012 132.663C457.739 134.418 458.114 136.3 458.114 138.2Z"
+            stroke="url(#paint8_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M738.68 27.3546C738.68 29.2548 738.306 31.1364 737.578 32.892C736.851 34.6476 735.785 36.2427 734.442 37.5863C733.098 38.93 731.503 39.9958 729.747 40.723C727.992 41.4502 726.11 41.8245 724.21 41.8245C722.31 41.8245 720.428 41.4502 718.673 40.723C716.917 39.9958 715.322 38.93 713.978 37.5863C712.635 36.2427 711.569 34.6476 710.842 32.892C710.114 31.1364 709.74 29.2548 709.74 27.3546C709.74 25.4544 710.114 23.5728 710.842 21.8173C711.569 20.0617 712.635 18.4666 713.978 17.1229C715.322 15.7793 716.917 14.7134 718.673 13.9863C720.428 13.2591 722.31 12.8848 724.21 12.8848C726.11 12.8848 727.992 13.2591 729.747 13.9863C731.503 14.7134 733.098 15.7793 734.442 17.1229C735.785 18.4666 736.851 20.0617 737.578 21.8173C738.306 23.5728 738.68 25.4544 738.68 27.3546Z"
+            stroke="url(#paint9_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M781.077 95.8598C781.077 97.76 780.703 99.6416 779.975 101.397C779.248 103.153 778.182 104.748 776.839 106.091C775.495 107.435 773.9 108.501 772.144 109.228C770.389 109.955 768.507 110.33 766.607 110.33C764.707 110.33 762.825 109.955 761.07 109.228C759.314 108.501 757.719 107.435 756.375 106.091C755.032 104.748 753.966 103.153 753.239 101.397C752.511 99.6416 752.137 97.76 752.137 95.8598C752.137 93.9596 752.511 92.078 753.239 90.3224C753.966 88.5669 755.032 86.9717 756.375 85.628C757.719 84.2844 759.314 83.2185 761.07 82.4914C762.825 81.7642 764.707 81.39 766.607 81.39C768.507 81.39 770.389 81.7642 772.144 82.4914C773.9 83.2185 775.495 84.2844 776.839 85.628C778.182 86.9717 779.248 88.5669 779.975 90.3224C780.703 92.078 781.077 93.9596 781.077 95.8598Z"
+            stroke="url(#paint10_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M1020.73 152.021C1020.73 153.921 1020.35 155.803 1019.62 157.558C1018.9 159.314 1017.83 160.909 1016.49 162.253C1015.14 163.596 1013.55 164.662 1011.79 165.389C1010.04 166.117 1008.16 166.491 1006.26 166.491C1004.36 166.491 1002.47 166.117 1000.72 165.389C998.962 164.662 997.367 163.596 996.023 162.253C994.68 160.909 993.614 159.314 992.887 157.558C992.16 155.803 991.785 153.921 991.785 152.021C991.785 150.121 992.16 148.239 992.887 146.484C993.614 144.728 994.68 143.133 996.023 141.789C997.367 140.446 998.962 139.38 1000.72 138.653C1002.47 137.925 1004.36 137.551 1006.26 137.551C1008.16 137.551 1010.04 137.925 1011.79 138.653C1013.55 139.38 1015.14 140.446 1016.49 141.789C1017.83 143.133 1018.9 144.728 1019.62 146.484C1020.35 148.239 1020.73 150.121 1020.73 152.021Z"
+            stroke="url(#paint11_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M1303.41 27.0821C1303.41 28.9823 1303.03 30.8639 1302.31 32.6195C1301.58 34.375 1300.51 35.9701 1299.17 37.3138C1297.83 38.6574 1296.23 39.7233 1294.48 40.4505C1292.72 41.1776 1290.84 41.5519 1288.94 41.5519C1287.04 41.5519 1285.16 41.1776 1283.4 40.4505C1281.65 39.7233 1280.05 38.6574 1278.71 37.3138C1277.36 35.9701 1276.3 34.375 1275.57 32.6195C1274.84 30.8639 1274.47 28.9823 1274.47 27.0821C1274.47 25.1819 1274.84 23.3003 1275.57 21.5447C1276.3 19.7891 1277.36 18.194 1278.71 16.8504C1280.05 15.5067 1281.65 14.4409 1283.4 13.7137C1285.16 12.9865 1287.04 12.6122 1288.94 12.6122C1290.84 12.6122 1292.72 12.9865 1294.48 13.7137C1296.23 14.4409 1297.83 15.5067 1299.17 16.8504C1300.51 18.194 1301.58 19.7891 1302.31 21.5447C1303.03 23.3003 1303.41 25.1819 1303.41 27.0821Z"
+            stroke="url(#paint12_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M66.2141 17.3826C66.2141 21.2202 64.6896 24.9007 61.976 27.6143C59.2624 30.3279 55.5819 31.8525 51.7443 31.8525C49.8441 31.8525 47.9625 31.4782 46.2069 30.751C44.4514 30.0238 42.8562 28.958 41.5126 27.6143C40.1689 26.2707 39.1031 24.6756 38.3759 22.92C37.6487 21.1644 37.2745 19.2828 37.2745 17.3826C37.2745 15.4824 37.6487 13.6008 38.3759 11.8452C39.1031 10.0897 40.1689 8.49454 41.5126 7.15089C42.8562 5.80724 44.4514 4.74142 46.2069 4.01424C47.9625 3.28706 49.8441 2.91278 51.7443 2.91278C55.5819 2.91278 59.2624 4.43727 61.976 7.15089C64.6896 9.86451 66.2141 13.545 66.2141 17.3826Z"
+            stroke="url(#paint13_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M913.232 17.3826C913.232 19.2828 912.857 21.1644 912.13 22.92C911.403 24.6756 910.337 26.2707 908.994 27.6143C907.65 28.958 906.055 30.0238 904.299 30.751C902.544 31.4782 900.662 31.8525 898.762 31.8525C896.862 31.8525 894.98 31.4782 893.224 30.751C891.469 30.0238 889.874 28.958 888.53 27.6143C887.186 26.2707 886.121 24.6756 885.393 22.92C884.666 21.1644 884.292 19.2828 884.292 17.3826C884.292 15.4824 884.666 13.6008 885.393 11.8452C886.121 10.0897 887.186 8.49454 888.53 7.15089C889.874 5.80724 891.469 4.74142 893.224 4.01424C894.98 3.28706 896.862 2.91278 898.762 2.91278C900.662 2.91278 902.544 3.28706 904.299 4.01424C906.055 4.74142 907.65 5.80724 908.994 7.15089C910.337 8.49454 911.403 10.0897 912.13 11.8452C912.857 13.6008 913.232 15.4824 913.232 17.3826Z"
+            stroke="url(#paint14_linear_303_80)"
+            stroke-width="5.82549"
+          />
+          <path
+            d="M207.674 154.662C207.674 158.5 206.149 162.18 203.435 164.894C200.722 167.607 197.041 169.132 193.204 169.132C191.304 169.132 189.422 168.758 187.666 168.03C185.911 167.303 184.316 166.237 182.972 164.894C181.628 163.55 180.563 161.955 179.835 160.199C179.108 158.444 178.734 156.562 178.734 154.662C178.734 152.762 179.108 150.88 179.835 149.125C180.563 147.369 181.628 145.774 182.972 144.43C184.316 143.087 185.911 142.021 187.666 141.294C189.422 140.566 191.304 140.192 193.204 140.192C197.041 140.192 200.722 141.717 203.435 144.43C206.149 147.144 207.674 150.824 207.674 154.662Z"
+            stroke="url(#paint15_linear_303_80)"
+            stroke-width="5.82549"
+          />
+        </g>
+        <defs>
+          <linearGradient
+            id="paint0_linear_303_80"
+            x1="1422.25"
+            y1="86.2687"
+            x2="-69.8572"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_303_80"
+            x1="1422.25"
+            y1="86.2686"
+            x2="-69.858"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint2_linear_303_80"
+            x1="1422.25"
+            y1="86.2687"
+            x2="-69.8567"
+            y2="88.018"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint3_linear_303_80"
+            x1="1422.25"
+            y1="86.2686"
+            x2="-69.8573"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint4_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3579"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint5_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3585"
+            y2="88.0178"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint6_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3589"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint7_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3591"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint8_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3587"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint9_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3584"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint10_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3591"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint11_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3583"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint12_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3582"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint13_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3588"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint14_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3582"
+            y2="88.0178"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <linearGradient
+            id="paint15_linear_303_80"
+            x1="1418.75"
+            y1="86.2686"
+            x2="-66.3589"
+            y2="88.0179"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="#0CAADC" />
+            <stop offset="1" stop-color="#1E222B" />
+          </linearGradient>
+          <clipPath id="clip0_303_80">
+            <rect width="1371.94" height="172.044" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default Logo;
diff --git a/web/src/components/navbar/AnimatedLogo.tsx b/web/src/components/navbar/AnimatedLogo.tsx
index 5cb4335..87be21c 100644
--- a/web/src/components/navbar/AnimatedLogo.tsx
+++ b/web/src/components/navbar/AnimatedLogo.tsx
@@ -1,112 +1,119 @@
 import { useEffect, useState } from "react";
+import { Link } from "react-router";
 
 function AnimatedLogo() {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [isAbbreviated, setIsAbbreviated] = useState(true);
 
-    const [isAnimating, setIsAnimating] = useState(false)
-    const [isHovering, setIsHovering] = useState(false)
-    const [isAbbreviated, setIsAbbreviated] = useState(true)
-    
-    const [isLoggedIn, setLoggedIn] = useState(false);
+  const [isLoggedIn, setLoggedIn] = useState(false);
 
-    useEffect(() => {
-        const getIsLoggedIn = async () => {
-            try {
-                var response = await fetch('/api/auth/valid_login');
-                if (response.ok) {
-                    var json = await response.json();
-                    setLoggedIn(json['message'] == 'true');
-                }
-            } catch (err){
-                console.error("Fetch error: ", err);
-            }
-        };
-        getIsLoggedIn();
-    });
-    
-    const animateLogo = () => {
-        var chars = ["U", "T", "O", "R", "A", "D", "E", "R"]
-        let logo = document.getElementById("logo")!;
-        for (var i = 0; i < 8; i++) {
-            if(i <= 2){
-                (function(i){
-                    window.setTimeout(function(){
-                        logo.innerHTML = logo.innerHTML.substring(0, logo.innerHTML.length - 1) + chars[i] + logo.innerHTML.substring(logo.innerHTML.length - 1);
-                    }, 200 + i*35);
-                
-                }(i));
-            } else if(i > 2){
-                (function(i){
-                    window.setTimeout(function(){
-                        if (i == 7) {
-                            setIsAnimating(false)
-                            setIsAbbreviated(false)
-                            logo.innerHTML = "AUTOGRADER"
-                        } else {
-                            logo.innerHTML = logo.innerHTML + chars[i];
+  useEffect(() => {
+    const getIsLoggedIn = async () => {
+      try {
+        const response = await fetch("/api/auth/valid_login");
+        if (response.ok) {
+          const json = await response.json();
+          setLoggedIn(json["message"] == "true");
+        }
+      } catch (err) {
+        console.error("Fetch error: ", err);
+      }
+    };
+    getIsLoggedIn();
+  });
 
-                        }
-                    }, 200 + i*35);
-                
-                  }(i));
+  const animateLogo = () => {
+    const chars = ["U", "T", "O", "R", "A", "D", "E", "R"];
+    const logo = document.getElementById("logo")!;
+    for (let i = 0; i < 8; i++) {
+      if (i <= 2) {
+        (function (i) {
+          window.setTimeout(function () {
+            logo.innerHTML =
+              logo.innerHTML.substring(0, logo.innerHTML.length - 1) +
+              chars[i] +
+              logo.innerHTML.substring(logo.innerHTML.length - 1);
+          }, 200 + i * 35);
+        })(i);
+      } else if (i > 2) {
+        (function (i) {
+          window.setTimeout(function () {
+            if (i == 7) {
+              setIsAnimating(false);
+              setIsAbbreviated(false);
+              logo.innerHTML = "AUTOGRADER";
+            } else {
+              logo.innerHTML = logo.innerHTML + chars[i];
             }
-        }
-        
+          }, 200 + i * 35);
+        })(i);
+      }
     }
-    
-    const removeLogoAnimation = () => {
-        let logo = document.getElementById("logo")!;
-        for (var i = 0; i < 8; i++) {
-            if(i < 6){
-                (function(i){
-                    window.setTimeout(function(){
-                        logo.innerHTML = logo.innerHTML.substring(0, logo.innerHTML.length - 1);
-                    }, 200 + i*35);
-                
-                }(i));
-            } else if(i >= 6){
-                (function(i){
-                    
-                    window.setTimeout(function(){
-                        if (i == 7) {
-                            logo.innerHTML = "AG"
-                            setIsAnimating(false)
-                            setIsAbbreviated(true)
-                        } else {
-                            logo.innerHTML = logo.innerHTML.substring(0, logo.innerHTML.length - 2) + "G";
+  };
 
-                        }
-                    }, 200 + i*35);
-                  }(i));
+  const removeLogoAnimation = () => {
+    const logo = document.getElementById("logo")!;
+    for (let i = 0; i < 8; i++) {
+      if (i < 6) {
+        (function (i) {
+          window.setTimeout(function () {
+            logo.innerHTML = logo.innerHTML.substring(
+              0,
+              logo.innerHTML.length - 1
+            );
+          }, 200 + i * 35);
+        })(i);
+      } else if (i >= 6) {
+        (function (i) {
+          window.setTimeout(function () {
+            if (i == 7) {
+              logo.innerHTML = "AG";
+              setIsAnimating(false);
+              setIsAbbreviated(true);
+            } else {
+              logo.innerHTML =
+                logo.innerHTML.substring(0, logo.innerHTML.length - 2) + "G";
             }
-        }
+          }, 200 + i * 35);
+        })(i);
+      }
     }
+  };
 
-    const whenHoverIn = () => {
-        setIsHovering(true)
-        if (!isAnimating) {
-            setIsAnimating(true)
-            animateLogo()
-        }
+  const whenHoverIn = () => {
+    setIsHovering(true);
+    if (!isAnimating) {
+      setIsAnimating(true);
+      animateLogo();
     }
+  };
 
-    const whenHoverOut = () => {
-        setIsHovering(false)
-        if (!isAnimating) {
-            setIsAnimating(true)
-            removeLogoAnimation()
-        }
+  const whenHoverOut = () => {
+    setIsHovering(false);
+    if (!isAnimating) {
+      setIsAnimating(true);
+      removeLogoAnimation();
     }
+  };
 
-    useEffect(() => {
-        if (!isAnimating && !isAbbreviated != isHovering) {
-            if (isHovering) whenHoverIn();
-            else whenHoverOut();
-        }
-    })
+  useEffect(() => {
+    if (!isAnimating && !isAbbreviated != isHovering) {
+      if (isHovering) whenHoverIn();
+      else whenHoverOut();
+    }
+  });
 
-    return <a id="logo" 
-            onMouseOver={whenHoverIn} 
-            onMouseOut={whenHoverOut} href={!isLoggedIn ? "/" : "/dashboard"}>AG</a>
+  return (
+    <Link
+      id="logo"
+      onMouseOver={whenHoverIn}
+      onMouseOut={whenHoverOut}
+      to={!isLoggedIn ? "/i" : "/i/dashboard"}
+    >
+      AG
+    </Link>
+  );
 }
 
-export default AnimatedLogo;
\ No newline at end of file
+export default AnimatedLogo;
diff --git a/web/src/components/navbar/Navbar.css b/web/src/components/navbar/Navbar.css
index c1c5f21..1cab2e5 100644
--- a/web/src/components/navbar/Navbar.css
+++ b/web/src/components/navbar/Navbar.css
@@ -1,12 +1,10 @@
-@import url(../../colors.css);
-
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 1vh;
     padding-bottom: 1vh;
-    background: #fff;
+    background: var(--color-bg-navbar);
 }
 
 .nav-left {
@@ -18,7 +16,7 @@
 }
 
 .nav-item {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto', sans-serif;
     text-transform: uppercase;
     text-decoration: none;
     color: var(--color-NCS-blue);
@@ -29,9 +27,6 @@
     font-family: 'Monomaniac One';
     font-size: 2em;
     text-transform: uppercase;
-	background: linear-gradient(to right, var(--color-raisin-black) 0%, var(--color-process-cyan) 100%);
+	color: var(--color-raisin-black);
 	text-decoration: none;
-    background-clip: text;
-    -webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
 }
\ No newline at end of file
diff --git a/web/src/components/navbar/Navbar.tsx b/web/src/components/navbar/Navbar.tsx
index e516114..a51682c 100644
--- a/web/src/components/navbar/Navbar.tsx
+++ b/web/src/components/navbar/Navbar.tsx
@@ -1,49 +1,56 @@
-import { useEffect, useState } from 'react';
-import './Navbar.css'
-import '/global.css'
-import AnimatedLogo from './AnimatedLogo';
+import { useEffect, useState } from "react";
+import AnimatedLogo from "./AnimatedLogo";
+import { Link } from "react-router";
+import "./Navbar.css";
 
+// TODO: The text within the navbar is somehow not centered vertically. This is a problem to fix later
+function Navbar() {
+  const [isLoggedIn, setLoggedIn] = useState(false);
 
-// The text within the navbar is somehow not centered vertically. This is a problem to fix later
-function Navbar(){
+  useEffect(() => {
+    const getIsLoggedIn = async () => {
+      try {
+        const response = await fetch("/api/auth/valid_login");
+        if (response.ok) {
+          const json = await response.json();
+          setLoggedIn(json["message"] == "true");
+        }
+      } catch (err) {
+        console.error("Fetch error: ", err);
+      }
+    };
+    getIsLoggedIn();
+  });
 
-    const [isLoggedIn, setLoggedIn] = useState(false);
-
-
-    useEffect(() => {
-        const getIsLoggedIn = async () => {
-            try {
-                var response = await fetch('/api/auth/valid_login');
-                if (response.ok) {
-                    var json = await response.json();
-                    setLoggedIn(json['message'] == 'true');
-                }
-            } catch (err){
-                console.error("Fetch error: ", err);
-            }
-        };
-        getIsLoggedIn();
-    });
-
-    return (
-        <nav className="navbar drop-shadow">
-            <div className="nav-left">
-                <AnimatedLogo />
-            </div>
-            <div className= "nav-right">
-                <a className="nav-item" href="/about">About Us</a>
-                <a className= "nav-item" href="/faq">Help/FAQ</a>
-                {!isLoggedIn ? 
-                    <a className= "nav-item" href="/login">Login</a>
-                    :
-                    <> 
-                        <a className="nav-item" href="/dashboard">Dashboard</a>
-                        <a className= "nav-item" href="/account">Account</a>
-                    </>
-                }
-            </div>
-        </nav>
-    );
+  return (
+    <nav className="navbar drop-shadow">
+      <div className="nav-left">
+        <AnimatedLogo />
+      </div>
+      <div className="nav-right">
+        <Link className="nav-item" to="/i/about">
+          About Us
+        </Link>
+        <Link className="nav-item" to="/i/faq">
+          Help/FAQ
+        </Link>
+        {!isLoggedIn ? (
+          <Link className="nav-item" to="/i/login">
+            Login
+          </Link>
+        ) : (
+          <>
+            <Link className="nav-item" to="/i/dashboard">
+              Dashboard
+            </Link>
+            <Link className="nav-item" to="/i/account">
+              Account
+            </Link>
+          </>
+        )}
+      </div>
+    </nav>
+  );
 }
 
-export default Navbar;
\ No newline at end of file
+export default Navbar;
diff --git a/web/src/components/popup/NewFilePopup.css b/web/src/components/popup/NewFilePopup.css
index 034e7b9..5d62e59 100644
--- a/web/src/components/popup/NewFilePopup.css
+++ b/web/src/components/popup/NewFilePopup.css
@@ -7,11 +7,11 @@
 }
 .popup-title {
     font-size: 150%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     word-wrap: break-word;
 }
 .popup-textfield {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 100%;
     margin: 0;
 }
@@ -30,7 +30,7 @@
     font-size: 125%;
     width: 75%;
     padding: 1.5%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     border-radius: 15px;
 }
@@ -38,12 +38,12 @@
     font-size: 125%;
     width: 75%;
     padding: 1.5%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     border-radius: 15px;
 }
 .popup-error {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 85%;
     color: red;
 }
\ No newline at end of file
diff --git a/web/src/components/popup/NewTestCasePopup.css b/web/src/components/popup/NewTestCasePopup.css
index 6ef9efe..ed5fe80 100644
--- a/web/src/components/popup/NewTestCasePopup.css
+++ b/web/src/components/popup/NewTestCasePopup.css
@@ -7,15 +7,15 @@
 }
 .popup-title {
     font-size: 150%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
 }
 .popup-textfield {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 100%;
     margin: 0;
 }
 .create-button {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     padding: 1%;
     font-size: 125%;
@@ -26,12 +26,12 @@
     flex-direction: column;
 }
 .test-type-label {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     margin-bottom: 0.5rem;
     font-size: 1rem;
     font-weight: 500;
 }
 .test-type {
-    border: 1px solid #ccc;
+    border: 1px solid var(--color-gray-medium);
     border-radius: 5px;
 }
\ No newline at end of file
diff --git a/web/src/components/popup/Popup.css b/web/src/components/popup/Popup.css
index cd674e6..969fc6d 100644
--- a/web/src/components/popup/Popup.css
+++ b/web/src/components/popup/Popup.css
@@ -12,9 +12,8 @@
 }
 
 .popup-content {
-  background-color: white;
+  background-color: var(--color-white);
   padding: 2rem;
   border-radius: 8px;
   z-index: 1001;
-  box-shadow: 0px 10px 13.9px -6px rgba(0, 0, 0, 0.25);
 }
diff --git a/web/src/components/question/QuestionBulletPoint.css b/web/src/components/question/QuestionBulletPoint.css
index 6dc4dcd..bebbb65 100644
--- a/web/src/components/question/QuestionBulletPoint.css
+++ b/web/src/components/question/QuestionBulletPoint.css
@@ -1,7 +1,7 @@
 .assignmentQuestion {
     display: flex;
     align-items: center;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     font-size: 150%;
     text-decoration: underline;
diff --git a/web/src/components/question/QuestionBulletPoint.tsx b/web/src/components/question/QuestionBulletPoint.tsx
index 6a14cb2..79275d0 100644
--- a/web/src/components/question/QuestionBulletPoint.tsx
+++ b/web/src/components/question/QuestionBulletPoint.tsx
@@ -1,25 +1,34 @@
-import "./QuestionBulletPoint.css"
+import { Link } from "react-router";
+import "./QuestionBulletPoint.css";
 
 export type CompletionState = "none" | "partial" | "full";
 
 interface QuestionBulletPointProps {
-    completionState?: CompletionState;
-    children: React.ReactNode;
-    assignmentId: string;
-    questionId: string;
+  completionState?: CompletionState;
+  children: React.ReactNode;
+  assignmentId: string;
+  questionId: string;
 }
 
-function QuestionBulletPoint({completionState="none", children, assignmentId, questionId}: QuestionBulletPointProps) {
-    const stateImage = {
-        "none": "/public/svg/XMark.svg",
-        "partial": "/public/svg/HalfFull.svg",
-        "full": "/public/svg/CheckMark.svg"
-    };
-    return (
-        <a href={`/assignment?id=${assignmentId}#${questionId}`} className="assignmentQuestion">
-            <img className="completionIndicator" src={stateImage[completionState]}/>
-            {children}
-        </a>
-    );
+function QuestionBulletPoint({
+  completionState = "none",
+  children,
+  assignmentId,
+  questionId,
+}: QuestionBulletPointProps) {
+  const stateImage = {
+    none: "/public/svg/XMark.svg",
+    partial: "/public/svg/HalfFull.svg",
+    full: "/public/svg/CheckMark.svg",
+  };
+  return (
+    <Link
+      to={`/i/assignment?id=${assignmentId}#${questionId}`}
+      className="assignmentQuestion"
+    >
+      <img className="completionIndicator" src={stateImage[completionState]} />
+      {children}
+    </Link>
+  );
 }
-export default QuestionBulletPoint;
\ No newline at end of file
+export default QuestionBulletPoint;
diff --git a/web/src/components/question/QuestionPanel.css b/web/src/components/question/QuestionPanel.css
index 99e7653..3f1bc41 100644
--- a/web/src/components/question/QuestionPanel.css
+++ b/web/src/components/question/QuestionPanel.css
@@ -1,19 +1,18 @@
 .questionPanel {
     border-radius: 20px;
-    box-shadow: 0 0 13.9px -6px rgba(0, 0, 0, 0.25);
-    background: white;
+    background: var(--color-white);
     padding: 2%;
     width: 100%;
     box-sizing: border-box;
 }
 .questionTitle {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 150%;   
     margin-bottom: 4%;
 }
 .questionDescription {
     font-size: 100%;
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
 }
 .resetStarterCodeParent {
     display: flex;
@@ -23,11 +22,11 @@
     width: 100%;
 }
 .resetStarterCode {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 100%;
     padding: .75%;
     background: var(--color-NCS-blue);
-    color: white;
+    color: var(--color-white);
     border-radius: 20px;
 }
 .resetStarterCode:active {
diff --git a/web/src/components/question/QuestionScore.css b/web/src/components/question/QuestionScore.css
index ae5e6c3..74eab9d 100644
--- a/web/src/components/question/QuestionScore.css
+++ b/web/src/components/question/QuestionScore.css
@@ -6,17 +6,17 @@
     gap: 1rem;
 }
 .score {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 125%;
 }
 .green {
-    color: #1DFF38;
+    color: var(--color-success);
 }
 .yellow {
-    color: #FFD902;
+    color: var(--color-warning);
 }
 .red {
-    color: #FF1D21;
+    color: var(--color-error);
 }
 .completionIndicator {
     width: 40px;
diff --git a/web/src/components/select-dropdown/SelectDropdown.css b/web/src/components/select-dropdown/SelectDropdown.css
index 9bb21c8..a7e614f 100644
--- a/web/src/components/select-dropdown/SelectDropdown.css
+++ b/web/src/components/select-dropdown/SelectDropdown.css
@@ -1,6 +1,6 @@
 .select-dropdown {
     font-size: 100%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     padding: 1%;
     border-radius: 10px;
     border: 2px solid black;
diff --git a/web/src/components/textarea/TextArea.css b/web/src/components/textarea/TextArea.css
index b8f898e..04e8a91 100644
--- a/web/src/components/textarea/TextArea.css
+++ b/web/src/components/textarea/TextArea.css
@@ -1,7 +1,7 @@
 .textarea {
   border: 2px solid black;
   padding: 0.5%;
-  font-family: "Azeret Mono";
+  font-family: "Roboto";
   font-size: 100%;
   border-radius: 10px;
   resize: none;
diff --git a/web/src/components/textfield/EmailField.tsx b/web/src/components/textfield/EmailField.tsx
new file mode 100644
index 0000000..fa9d993
--- /dev/null
+++ b/web/src/components/textfield/EmailField.tsx
@@ -0,0 +1,76 @@
+import React, { useState, ChangeEvent, InputHTMLAttributes } from "react";
+import "./Textfield.css";
+
+export type EmailFieldInput = {
+  value: string;
+  isValid: boolean;
+  error: string;
+};
+
+type EmailFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onChange" | "type"
+> & {
+  initialValue?: string;
+  label?: string;
+  onChange?: (data: EmailFieldInput) => void;
+};
+
+const EmailField: React.FC<EmailFieldProps> = ({
+  initialValue = "",
+  label = "",
+  onChange,
+  className = "",
+  ...props
+}) => {
+  const [value, setValue] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  // Email validation regex
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  const validateEmail = (emailValue: string): string => {
+    if (!emailValue) {
+      return "Email is required";
+    }
+    if (!emailRegex.test(emailValue)) {
+      return "Please enter a valid email address";
+    }
+    return "";
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+
+    // Validate email
+    const validationError = validateEmail(newValue);
+    setError(validationError);
+
+    // Call onChange if it exists
+    if (onChange) {
+      onChange({
+        value: newValue,
+        isValid: !validationError,
+        error: validationError,
+      });
+    }
+  };
+
+  return (
+    <div className={`textfield-container ${className}`}>
+      {label && <label className="textfield-label">{label}</label>}
+      <input
+        type="email"
+        value={value}
+        onChange={handleChange}
+        className={`textfield-input ${error ? "error" : ""}`}
+        placeholder={initialValue || "Email"}
+        {...props}
+      />
+      {error && <span className="error-message">{error}</span>}
+    </div>
+  );
+};
+
+export default EmailField;
diff --git a/web/src/components/textfield/PasswordField.tsx b/web/src/components/textfield/PasswordField.tsx
new file mode 100644
index 0000000..f0140bc
--- /dev/null
+++ b/web/src/components/textfield/PasswordField.tsx
@@ -0,0 +1,57 @@
+import React, { useState, ChangeEvent, InputHTMLAttributes } from "react";
+import "./Textfield.css";
+
+export type PasswordFieldInput = {
+  value: string;
+  isValid: boolean;
+  error: string;
+};
+
+type PasswordFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onChange" | "type"
+> & {
+  initialValue?: string;
+  label?: string;
+  onChange?: (data: PasswordFieldInput) => void;
+};
+
+const PasswordField: React.FC<PasswordFieldProps> = ({
+  initialValue = "",
+  label = "",
+  onChange,
+  className = "",
+  ...props
+}) => {
+  const [value, setValue] = useState<string>("");
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+
+    // Call onChange if it exists
+    if (onChange) {
+      onChange({
+        value: newValue,
+        isValid: true, // Passwords don't have validation requirements here
+        error: "",
+      });
+    }
+  };
+
+  return (
+    <div className={`textfield-container ${className}`}>
+      {label && <label className="textfield-label">{label}</label>}
+      <input
+        type="password"
+        value={value}
+        onChange={handleChange}
+        className="textfield-input"
+        placeholder={initialValue || "Password"}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default PasswordField;
diff --git a/web/src/components/textfield/Textfield.css b/web/src/components/textfield/Textfield.css
index ca39881..49c8be7 100644
--- a/web/src/components/textfield/Textfield.css
+++ b/web/src/components/textfield/Textfield.css
@@ -14,22 +14,22 @@
 .textfield-input {
     padding: 0.5rem;
     font-size: 1rem;
-    border: 1px solid #ccc;
+    border: 1px solid var(--color-gray-medium);
     border-radius: 5px;
     outline: none;
     transition: border-color 0.2s;
 }
 
 .textfield-input:focus {
-    border-color: #0CAADC;
+    border-color: var(--color-process-cyan);
 }
 
 .textfield-input.error {
-    border-color: #dc3545;
+    border-color: var(--color-danger);
 }
 
 .error-message {
-    color: #dc3545;
+    color: var(--color-danger);
     font-size: 0.875rem;
     margin-top: 0.25rem;
 }
\ No newline at end of file
diff --git a/web/src/components/textfield/Textfield.tsx b/web/src/components/textfield/Textfield.tsx
index 23dc320..56f666a 100644
--- a/web/src/components/textfield/Textfield.tsx
+++ b/web/src/components/textfield/Textfield.tsx
@@ -1,21 +1,27 @@
-import React, { useState, ChangeEvent, InputHTMLAttributes, useEffect} from 'react';
-import './Textfield.css';
+import React, {
+  useState,
+  ChangeEvent,
+  InputHTMLAttributes,
+  useEffect,
+} from "react";
+import "./Textfield.css";
 
 export type TextFieldInput = {
   value: string;
-  isValid: boolean;
-  error: string;
-}
+};
 // Define props interface
-type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+type TextFieldProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onChange"
+> & {
   initialValue?: string;
   label?: string;
   onChange?: (data: TextFieldInput) => void;
-}
+};
 
 const TextField: React.FC<TextFieldProps> = ({
-  initialValue = '',
-  label = 'Input',
+  initialValue = "",
+  label = "Input",
   type,
   onChange,
   className,
@@ -23,47 +29,23 @@ const TextField: React.FC<TextFieldProps> = ({
   ...props
 }) => {
   const [value, setValue] = useState<string>("");
-  const [error, setError] = useState<string>('');
 
   const [startedChange, setStartedChange] = useState(false);
 
-  // Email validation regex
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-  const validateInput = (newValue: string): string => {
-    if (type == "email") {
-      if (!newValue) {
-        return 'Email is required';
-      }
-      if (!emailRegex.test(newValue)) {
-        return 'Please enter a valid email address';
-      }
-    }
-    return '';
-  };
-
-  var email = type === "email";
-  var password = type === "password";
-
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    var newValue = e.target.value;
-    if (maxLength && newValue.length > maxLength) newValue = newValue.substring(0, maxLength);
+    let newValue = e.target.value;
+    if (maxLength && newValue.length > maxLength)
+      newValue = newValue.substring(0, maxLength);
     setValue(newValue);
-    
-    // Validate input if email checking is enabled
-    const validationError = validateInput(newValue);
-    setError(validationError);
 
     if (!startedChange) {
       setStartedChange(true);
     }
-    
+
     // Only call onChange if it exists
     if (onChange) {
       onChange({
         value: newValue,
-        isValid: !validationError,
-        error: validationError,
       });
     }
     //Add a check to see if a possword if being entered, and thus make the characters dots instead of the entered characters
@@ -71,9 +53,9 @@ const TextField: React.FC<TextFieldProps> = ({
 
   useEffect(() => {
     if (!startedChange) {
-      setValue(props.value && value == '' ? props.value.toString() : value);
+      setValue(props.value && value == "" ? props.value.toString() : value);
     }
-  })
+  }, [startedChange, props.value, value]);
 
   return (
     <div className={`textfield-container ${className}`} {...props}>
@@ -82,13 +64,11 @@ const TextField: React.FC<TextFieldProps> = ({
         type={type}
         value={value}
         onChange={handleChange}
-        className={`textfield-input ${error ? 'error' : ''} ${className}`}
-        placeholder={initialValue ? initialValue : email ? "Email" : password ? "Password" : "Enter Text Here"}
+        className={`textfield-input ${className}`}
+        placeholder={initialValue ?? "Enter Text Here"}
       />
-      {error && <span className="error-message">{error}</span>}
     </div>
   );
 };
 
-
-export default TextField;
\ No newline at end of file
+export default TextField;
diff --git a/web/src/components/title-input/TitleInput.css b/web/src/components/title-input/TitleInput.css
index 4872883..493ab85 100644
--- a/web/src/components/title-input/TitleInput.css
+++ b/web/src/components/title-input/TitleInput.css
@@ -1,5 +1,5 @@
 .title-input {
-    font-family: 'Azeret Mono';  
+    font-family: 'Roboto';  
     font-size: 100%;
     width: 100%;
     border: none;
diff --git a/web/src/components/titlebanner/TitleBanner.css b/web/src/components/titlebanner/TitleBanner.css
index b19fd8b..a6f7ecc 100644
--- a/web/src/components/titlebanner/TitleBanner.css
+++ b/web/src/components/titlebanner/TitleBanner.css
@@ -12,7 +12,6 @@
 .title {
     position: absolute;
     color: white;
-    text-shadow: -2px -2px 0 #00000077, 2px -2px 0 #00000077, -2px 2px 0 #00000077, 2px 2px 0 #00000077;
     top:50%;           
     left: 20%;          
     transform: translate(0, -50%); 
diff --git a/web/src/dashboard/Dashboard.tsx b/web/src/dashboard/Dashboard.tsx
index 18a45c1..51dc818 100644
--- a/web/src/dashboard/Dashboard.tsx
+++ b/web/src/dashboard/Dashboard.tsx
@@ -1,10 +1,129 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './dashboard.css'
-import DashboardBody from './DashboardBody'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <DashboardBody />
-  </StrictMode>,
-)
\ No newline at end of file
+import { useEffect, useState } from "react";
+import Navbar from "../components/navbar/Navbar";
+import DashboardSection from "./DashboardSection";
+import "./Dashboard.css";
+
+function Dashboard() {
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  const [enrolledClasses, setEnrolledClasses] = useState<object[]>([]);
+  const [activeClasses, setActiveClasses] = useState<object[]>([]);
+  const [expiredClasses, setExpiredClasses] = useState<object[]>([]);
+  const [noClasses, setNoClasses] = useState(false);
+
+  useEffect(() => {
+    let isError = false;
+    const parseDateString = (dateString: string) => {
+      const parts = dateString
+        .split("-")
+        .map((p, i) => Number(p) - Number(i == 1));
+      return new Date(parts[0], parts[1], parts[2]);
+    };
+    const verifyLogin = async () => {
+      try {
+        const response = await fetch("/api/auth/valid_login");
+        if (response.ok) {
+          const json = await response.json();
+          if (json["message"] != "true") {
+            isError = true;
+            setErrorMessage("You need to be logged in to view assignments");
+            stopLoading();
+          }
+        } else {
+          isError = true;
+          setErrorMessage("You need to be logged in to view assignments");
+          stopLoading();
+        }
+      } catch (err) {
+        console.error("Fetch error: ", err);
+      }
+    };
+    const getClassrooms = async () => {
+      const request = await fetch("/api/classroom/all");
+
+      const currentEnrolledClasses: object[] = [];
+      const currentActiveClasses: object[] = [];
+      const currentExpiredClasses: object[] = [];
+
+      if (request.ok) {
+        const json = await request.json();
+        const classrooms = json["classrooms"];
+        if (classrooms != null) {
+          const now = new Date().getTime();
+          for (const classroom of classrooms) {
+            const classStart = parseDateString(classroom.start_date).getTime();
+            const classExpire = parseDateString(classroom.end_date).getTime();
+            if (now > classExpire) {
+              currentExpiredClasses.push(classroom);
+            } else if (now < classStart) {
+              currentEnrolledClasses.push(classroom);
+            } else {
+              currentActiveClasses.push(classroom);
+            }
+          }
+          setEnrolledClasses(currentEnrolledClasses);
+          setActiveClasses(currentActiveClasses);
+          setExpiredClasses(currentExpiredClasses);
+        } else {
+          setNoClasses(true);
+        }
+      } else {
+        setErrorMessage("Error retrieving the classrooms");
+      }
+    };
+    const stopLoading = () => {
+      setLoading(false);
+    };
+    if (loading) {
+      (async function () {
+        await verifyLogin();
+        if (isError) return;
+        await getClassrooms();
+        stopLoading();
+      })();
+    }
+  });
+  return (
+    <>
+      {loading ? (
+        <></>
+      ) : (
+        <>
+          <Navbar />
+          {errorMessage === "" ? (
+            <>
+              {!noClasses ? (
+                <>
+                  <DashboardSection
+                    title="Enrolled Classes"
+                    classes={enrolledClasses}
+                  />
+                  <DashboardSection
+                    title="Active Classes"
+                    classes={activeClasses}
+                  />
+                  <DashboardSection
+                    title="Expired Classes"
+                    classes={expiredClasses}
+                  />
+                </>
+              ) : (
+                <div className="errorParent">
+                  <div className="error">
+                    You are not part of any classrooms
+                  </div>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="errorParent">
+              <div className="error">{errorMessage}</div>
+            </div>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+export default Dashboard;
diff --git a/web/src/dashboard/DashboardBody.tsx b/web/src/dashboard/DashboardBody.tsx
deleted file mode 100644
index 27b856d..0000000
--- a/web/src/dashboard/DashboardBody.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useEffect, useState } from "react";
-import Navbar from "../components/navbar/Navbar";
-import DashboardSection from "./DashboardSection";
-import { parseDateString } from "../utils/classroom";
-
-function DashboardBody() {
-    const [loading, setLoading] = useState(true);
-    const [errorMessage, setErrorMessage] = useState<string>("");
-
-    const [enrolledClasses, setEnrolledClasses] = useState<any[]>([]);
-    const [activeClasses, setActiveClasses] = useState<any[]>([]);
-    const [expiredClasses, setExpiredClasses] = useState<any[]>([]);
-    const [noClasses, setNoClasses] = useState(false);
-    
-    useEffect(() => {
-        var isError = false;
-        
-        const verifyLogin = async () => {
-            try {
-                var response = await fetch('/api/auth/valid_login');
-                if (response.ok) {
-                    var json = await response.json();
-                    if (json['message'] != 'true') {
-                        isError = true;
-                        setErrorMessage("You need to be logged in to view assignments");
-                        stopLoading();
-                    }
-                } else {
-                    isError = true;
-                    setErrorMessage("You need to be logged in to view assignments");
-                    stopLoading();
-                }
-            } catch (err){
-                console.error("Fetch error: ", err);
-            }
-        }
-        const getClassrooms = async () => {
-            var request = await fetch('/api/classroom/all');
-            
-            var currentEnrolledClasses = [];
-            var currentActiveClasses = [];
-            var currentExpiredClasses = []
-            
-            if (request.ok) {
-                var json = await request.json();
-                var classrooms = json['classrooms'];
-                if (classrooms != null) {
-                    var now = new Date().getTime();
-                    for (let classroom of classrooms) {
-                        let classStart = parseDateString(classroom.start_date).getTime();
-                        let classExpire = parseDateString(classroom.end_date).getTime();
-                        if (now > classExpire) {
-                            currentExpiredClasses.push(classroom);
-                        } else if (now < classStart) {
-                            currentEnrolledClasses.push(classroom);
-                        } else {
-                            currentActiveClasses.push(classroom);
-                        }
-                    }
-                    setEnrolledClasses(currentEnrolledClasses);
-                    setActiveClasses(currentActiveClasses);
-                    setExpiredClasses(currentExpiredClasses);
-                } else {
-                    setNoClasses(true);
-                }
-            } else {
-                setErrorMessage("Error retrieving the classrooms")
-            }
-        }
-        const stopLoading = () => {
-            setLoading(false);
-        }
-        if (loading) {
-            (async function () {
-                await verifyLogin();
-                if (isError) return;
-                await getClassrooms();
-                stopLoading();
-            })();
-        }
-    })
-    return <>
-        {loading? <></> : <>
-            <Navbar />
-            {errorMessage === "" ? 
-            <>
-                {!noClasses ? 
-                <>
-                    <DashboardSection title="Enrolled Classes" classes={enrolledClasses}/>
-                    <DashboardSection title="Active Classes" classes={activeClasses} />
-                    <DashboardSection title="Expired Classes" classes={expiredClasses} />
-                </>
-                :
-                <div className="errorParent">
-                    <div className="error">
-                        You are not part of any classrooms
-                    </div>
-                </div>
-                }
-            </>
-            : 
-            <div className="errorParent">
-                <div className="error">
-                    {errorMessage}
-                </div>
-            </div>
-            }
-        </>}
-      </>
-}
-export default DashboardBody;
\ No newline at end of file
diff --git a/web/src/dashboard/dashboard.css b/web/src/dashboard/dashboard.css
index c4b2edc..e27dda9 100644
--- a/web/src/dashboard/dashboard.css
+++ b/web/src/dashboard/dashboard.css
@@ -1,10 +1,5 @@
-@import url(..//reset.css);
-@import "tailwindcss";
-
 body {
-    font-family: "Azeret Mono";
-    margin: 0;
-    background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%);
+    background: var(--color-bg-primary);
 }
 
 .card-grid {
@@ -14,12 +9,11 @@ body {
     align-items: stretch;     /* Makes all cards equal height */
 }
 .section-title {
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto', sans-serif;
     font-size: 200%;
     margin-bottom: 1%;
     margin-left: 2%;
     font-weight: bold;
-    text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);
 }
 .section {
     margin-top: 1%;
@@ -37,17 +31,16 @@ body {
     width: 100%;
 }
 .error {
-    background: white;
+    background: var(--color-white);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 150%;
     margin-top: 2%;
     padding: 2%;
-    border: 2px solid black;
+    border: 2px solid var(--color-black);
     border-radius: 25px;
-    box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25);
-    color: red;
+    color: var(--color-red);
     min-height: 30vh;
 }
\ No newline at end of file
diff --git a/web/src/dashboard/dashboard.html b/web/src/dashboard/dashboard.html
deleted file mode 100644
index df5f3a3..0000000
--- a/web/src/dashboard/dashboard.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./dashboard.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>Dashboard</title>
-  </head>
-  <body>
-    <div id="root">
-      
-    </div>
-    <script type="module" src="./Dashboard.tsx"></script>
-  </body>
-</html>
diff --git a/web/src/global.css b/web/src/global.css
deleted file mode 100644
index c6e53d9..0000000
--- a/web/src/global.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.drop-shadow {
-    box-shadow: 0 0 15px 2.5px #2f2f2f;
-    -moz-box-shadow: 0 0 15px 2.5px #2f2f2f;
-    -webkit-box-shadow: 0 0 15px 2.5px #2f2f2f;
-}
-
-
-/* For dynamically drop-shadowed navbar */
-@keyframes fadeInDown {
-    0% {
-      opacity: 0;
-      transform: translateY(-20px);
-    }
-    100% {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  
-  .sticky {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    animation-duration: 0.5s;
-    animation-name: fadeInDown;
-    animation-timing-function: ease-out;
-  }
\ No newline at end of file
diff --git a/web/src/home/Home.tsx b/web/src/home/Home.tsx
new file mode 100644
index 0000000..fe413c7
--- /dev/null
+++ b/web/src/home/Home.tsx
@@ -0,0 +1,14 @@
+import Logo from "../components/logo/Logo";
+
+function Home() {
+  return (
+    <>
+      <h1 id="welcome-text">Welcome to</h1>
+      <div id="logo-main">
+        <Logo />
+      </div>
+    </>
+  );
+}
+
+export default Home;
diff --git a/web/src/index.css b/web/src/index.css
index 0cd5aa5..4d360d9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -5,9 +5,8 @@
 }
 
 body {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     margin: 0;
-    overflow: hidden;
 }
 
 #welcome-text {
diff --git a/web/src/login/Login.tsx b/web/src/login/Login.tsx
index 1b329dd..e10aaf3 100644
--- a/web/src/login/Login.tsx
+++ b/web/src/login/Login.tsx
@@ -1,12 +1,75 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import Navbar from "../components/navbar/Navbar"
-import './login.css';
-import LoginInputs from "./LoginInputs";
-
-
-createRoot(document.getElementById("root")!).render(
-<StrictMode>
-    <Navbar />
-    <LoginInputs />
-</StrictMode>)
\ No newline at end of file
+import { useCallback, useEffect, useState } from "react";
+import EmailField from "../components/textfield/EmailField";
+import PasswordField from "../components/textfield/PasswordField";
+import "./Login.css";
+import { Link } from "react-router";
+
+interface FormData {
+  value: string;
+  isValid: boolean;
+  error: string;
+}
+
+function Login() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const login = useCallback(async () => {
+    try {
+      const response = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email: username, password: password }),
+      });
+      if (!response.ok) {
+        alert("Invalid Username or Password");
+      } else {
+        window.location.href = "/dashboard";
+      }
+    } catch (error) {
+      console.error("Error: ", error);
+    }
+  }, [username, password]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Enter") {
+        login();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [login]);
+
+  return (
+    <div className="signin-page">
+      <div className="signin-card">
+        <h1 className="signin-title">Sign In</h1>
+        <div className="input-container">
+          <EmailField
+            onChange={(data: FormData): void => {
+              setUsername(data.value);
+            }}
+          />
+          <PasswordField
+            onChange={(data: FormData) => {
+              setPassword(data.value);
+            }}
+          />
+        </div>
+        <Link to="/i/reset" className="forgot-pw">
+          Forgot Password?
+        </Link>
+        <button className="submit-button" onClick={login}>
+          Sign In
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Login;
diff --git a/web/src/login/LoginInputs.tsx b/web/src/login/LoginInputs.tsx
deleted file mode 100644
index 8796a2a..0000000
--- a/web/src/login/LoginInputs.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import {useEffect, useState } from "react";
-import TextField from "../components/textfield/Textfield";
-
-interface FormData {
-    value: string;
-    isValid: boolean;
-    error: string;
-}
-
-function LoginInputs() {
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    
-    const login = async () => {
-
-        try {
-            const response = await fetch("/api/auth/login", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({"email": username, "password": password})
-            })
-            if (!response.ok) {
-                alert("Invalid Username or Password")
-            }
-            else {
-                window.location.href="/dashboard"
-            }
-        } catch (error) {
-            console.error("Error: ", error)
-        }
-
-    }
-
-    useEffect(() => {
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === "Enter") {
-                login();
-            }
-        };
-
-        document.addEventListener("keydown", handleKeyDown);
-
-        return () => {
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-    }, [login]);
-
-    
-    return <div className="signin-page">
-        <div className="signin-card">
-            <h1 className="signin-title">Sign In</h1>
-            <div className="input-container">
-                <TextField
-                    initialValue=""
-                    label=""
-                    type="email"
-                    onChange={(data: FormData): void => {
-                        setUsername(data.value)
-                    }}/>
-                <TextField 
-                    initialValue=""
-                    label=""
-                    type="password"
-                    onChange={(data: FormData) => {
-                        setPassword(data.value)
-                    }}/>
-            </div>       
-            <a href="/reset-password" className="forgot-pw">Forgot Password?</a>
-            <button className="submit-button" onClick={login}>Sign In</button>
-        </div>
-    </div>
-}
-
-export default LoginInputs;
\ No newline at end of file
diff --git a/web/src/login/login.css b/web/src/login/login.css
index 44005b9..9918ff3 100644
--- a/web/src/login/login.css
+++ b/web/src/login/login.css
@@ -1,16 +1,8 @@
-@import url(../reset.css);
-@import "tailwindcss";
-
-* {
-    overscroll-behavior: none;
-    overflow: hidden;
-}
-
 .signin-page {
-    font-family: 'Azeret Mono', monospace;
+    font-family: 'Roboto', sans-serif;
     width: 100vw;
     height: 94.5vh;
-    background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%);
+    background: var(--color-bg-primary);
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -21,11 +13,10 @@
 .signin-card {
     width: max(40%, 300px);
     height: 57.5%;
-    background: white;
-    box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25);
+    background: var(--color-white);
     border-radius: 25px;
     overflow: hidden;
-    border: 4px solid #1E212B;
+    border: 4px solid var(--color-raisin-black);
 }
 
 .signin-card > * {
@@ -37,7 +28,7 @@
     height: 12.5%;
     position: relative;
     margin-top: 5%;
-    color: black;
+    color: var(--color-black);
     font-size: 42px;
     font-weight: 700;
     word-wrap: break-word;
@@ -47,15 +38,37 @@
     margin-top: 2.5%;
 }
 
-.input-container input{
+.input-container .textfield-container {
+    margin: 0;
+    margin-top: 5%;
+}
+
+.input-container .textfield-input {
     font-size: 24px;
-    border-color: #000000;
+    border-color: var(--color-black);
     border-width: 1.5px;
-    margin-top: 5%;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 0.5rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.input-container .textfield-input::placeholder {
+    color: var(--color-gray-dark);
+    opacity: 1;
+}
+
+.input-container .textfield-input.error {
+    border-color: var(--color-black);  /* Keep black border even on error */
+}
+
+.input-container .error-message {
+    display: none;  /* Hide validation errors on login page */
 }
 
 .forgot-pw {
-    color: #1481BA;
+    color: var(--color-NCS-blue);
     font-size: 18px;
 }
 
@@ -66,21 +79,21 @@
     justify-content: flex-end;
     border-radius: 20px;
     font-size: 36px;
-    color: #ffffff;
-    background-color: #0CAADC;
+    color: var(--color-white);
+    background-color: var(--color-process-cyan);
     padding-top: 12.5px;
     padding-bottom: 12.5px;
     transition: background-color 0.2s;
 }
 
 .submit-button:hover {
-    background-color: #1481BA;
+    background-color: var(--color-NCS-blue);
 }
 
 .submit-button:active {
-    background-color: #1E212B;
+    background-color: var(--color-raisin-black);
 }
 
 .submit-button:focus {
-    background-color: #1E212B;
+    background-color: var(--color-raisin-black);
 }
\ No newline at end of file
diff --git a/web/src/login/login.html b/web/src/login/login.html
deleted file mode 100644
index 50f199b..0000000
--- a/web/src/login/login.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./login.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./Login.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..8e97c56
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,16 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import { BrowserRouter, Routes, Route } from "react-router";
+import "./index.css";
+import "./Colors.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <Routes>
+        <Route path="*" element={<App />}></Route>
+      </Routes>
+    </BrowserRouter>
+  </StrictMode>
+);
diff --git a/web/src/manageclassroom/ClassroomManager.tsx b/web/src/manageclassroom/ClassroomManager.tsx
index 11b75bf..e28fc03 100644
--- a/web/src/manageclassroom/ClassroomManager.tsx
+++ b/web/src/manageclassroom/ClassroomManager.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import Navbar from "../components/navbar/Navbar";
-import ClassroomSidebar, { ClassroomSidebarSelected } from "./components/ClassroomSidebar";
+import ClassroomSidebar, {
+  ClassroomSidebarSelected,
+} from "./components/ClassroomSidebar";
 import AssignmentsSubpage from "./subpages/AssignmentsSubpage";
 import DetailsSubpage from "./subpages/DetailsSubpage";
 import GradesSubpage from "./subpages/GradesSubpage";
@@ -8,100 +10,107 @@ import StudentsSubpage from "./subpages/StudentsSubpage";
 import { Classroom } from "../models/classroom";
 
 function ClassroomManager() {
-    
-    const [loading, setLoading] = useState(true);
-    const [selected, setSelected] = useState<ClassroomSidebarSelected>("details");
-    const [classroomInfo, setClassroomInfo] = useState<Classroom>({});
-    const [classroomName, setClassroomName] = useState("");
-    const [errorMessage, setErrorMessage] = useState("");
-    const urlParams = new URLSearchParams(window.location.search);
-    const classroomId = urlParams.get('id');
-    const onChange = (newState: ClassroomSidebarSelected) => {
-        setSelected(newState);
-    }
+  const [loading, setLoading] = useState(true);
+  const [selected, setSelected] = useState<ClassroomSidebarSelected>("details");
+  const [classroomInfo, setClassroomInfo] = useState<Classroom>({});
+  const [classroomName, setClassroomName] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const urlParams = new URLSearchParams(window.location.search);
+  const classroomId = urlParams.get("id");
+  const onChange = (newState: ClassroomSidebarSelected) => {
+    setSelected(newState);
+  };
 
-    useEffect(() => {
-        const stopLoading = () => {
-            setLoading(false);
+  useEffect(() => {
+    const stopLoading = () => {
+      setLoading(false);
+    };
+    let isError = false;
+    const verifyLogin = async () => {
+      try {
+        const response = await fetch("/api/auth/valid_login");
+        if (response.ok) {
+          const json = await response.json();
+          if (json["message"] != "true") {
+            isError = true;
+            setErrorMessage("You need to be logged in to manage classrooms");
+            stopLoading();
+          }
+        } else {
+          isError = true;
+          setErrorMessage("You need to be logged in to manage classrooms");
+          stopLoading();
         }
-        var isError = false;
-        const verifyLogin = async () => {
-            try {
-                var response = await fetch('/api/auth/valid_login');
-                if (response.ok) {
-                    var json = await response.json();
-                    if (json['message'] != 'true') {
-                        isError = true;
-                        setErrorMessage("You need to be logged in to manage classrooms");
-                        stopLoading();
-                    }
-                } else {
-                    isError = true;
-                    setErrorMessage("You need to be logged in to manage classrooms");
-                    stopLoading();
-                }
-            } catch (err){
-                console.error("Fetch error: ", err);
-            }
-        }
-        const getClassroomInfo = async () => {
-            var response = await fetch(`/api/classroom/${classroomId}`);
-            if (response.ok) {
-                var json = await response.json();
-                setClassroomInfo(json);
-                setClassroomName(json["name"]);
-            } else {
-                isError = true;
-                setErrorMessage("Either the classroom does not exist or you are not part of this classroom");
-                stopLoading();
-            }
-        }
-        (async function () {
-            if (loading) {
-                await verifyLogin();
-                if (isError) return;
-                await getClassroomInfo();
-                if (isError) return;
-                stopLoading();
-            }
-        })();
-    });
+      } catch (err) {
+        console.error("Fetch error: ", err);
+      }
+    };
+    const getClassroomInfo = async () => {
+      const response = await fetch(`/api/classroom/${classroomId}`);
+      if (response.ok) {
+        const json = await response.json();
+        setClassroomInfo(json);
+        setClassroomName(json["name"]);
+      } else {
+        isError = true;
+        setErrorMessage(
+          "Either the classroom does not exist or you are not part of this classroom"
+        );
+        stopLoading();
+      }
+    };
+    (async function () {
+      if (loading) {
+        await verifyLogin();
+        if (isError) return;
+        await getClassroomInfo();
+        if (isError) return;
+        stopLoading();
+      }
+    })();
+  });
 
-    return (<>
-        {!loading ?
+  return (
+    <>
+      {!loading ? (
         <>
-            <Navbar />
-            {errorMessage === "" ?
-                <div id="main">
-                    <h1 className="classroomName">{classroomName}</h1>
-                    <div id="content">
-                        <ClassroomSidebar onChange={onChange}/>
-                        <div id="body">
-                            <div className={`${selected === "assignments" ? "" : "hidden"}`}>
-                                <AssignmentsSubpage classroomInfo={classroomInfo} />
-                            </div>
-                            <div className={`${selected === "details" ? "" : "hidden"}`}>
-                                <DetailsSubpage changeClassroomTitle={setClassroomName} classroomInfo={classroomInfo} />
-                            </div>
-                            <div className={`${selected === "grades" ? "" : "hidden"}`}>
-                                <GradesSubpage classroomInfo={classroomInfo} />
-                            </div>
-                            <div className={`${selected === "students" ? "" : "hidden"}`}>
-                                <StudentsSubpage classroomInfo={classroomInfo} />
-                            </div>
-                        </div>
-                    </div>
-                </div> 
-            : 
-                <div className="errorParent">
-                    <div className="error">
-                        {errorMessage}
-                    </div>
+          <Navbar />
+          {errorMessage === "" ? (
+            <div id="main">
+              <h1 className="classroomName">{classroomName}</h1>
+              <div id="content">
+                <ClassroomSidebar onChange={onChange} />
+                <div id="body">
+                  <div
+                    className={`${selected === "assignments" ? "" : "hidden"}`}
+                  >
+                    <AssignmentsSubpage classroomInfo={classroomInfo} />
+                  </div>
+                  <div className={`${selected === "details" ? "" : "hidden"}`}>
+                    <DetailsSubpage
+                      changeClassroomTitle={setClassroomName}
+                      classroomInfo={classroomInfo}
+                    />
+                  </div>
+                  <div className={`${selected === "grades" ? "" : "hidden"}`}>
+                    <GradesSubpage classroomInfo={classroomInfo} />
+                  </div>
+                  <div className={`${selected === "students" ? "" : "hidden"}`}>
+                    <StudentsSubpage classroomInfo={classroomInfo} />
+                  </div>
                 </div>
-            }
-        </>:<></>
-        }
+              </div>
+            </div>
+          ) : (
+            <div className="errorParent">
+              <div className="error">{errorMessage}</div>
+            </div>
+          )}
         </>
-    );
+      ) : (
+        <></>
+      )}
+    </>
+  );
 }
-export default ClassroomManager;
\ No newline at end of file
+export default ClassroomManager;
diff --git a/web/src/manageclassroom/css/AssignmentEditor.css b/web/src/manageclassroom/css/AssignmentEditor.css
index a8056df..cba3d40 100644
--- a/web/src/manageclassroom/css/AssignmentEditor.css
+++ b/web/src/manageclassroom/css/AssignmentEditor.css
@@ -6,7 +6,6 @@
     flex-direction: column;
     background: white;
     border-radius: 20px;
-    box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.25);
     box-sizing: border-box;
 }
 .da-tabs-parent {
@@ -67,7 +66,7 @@
     gap: 2rem;
 }
 .label {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 100%;
 }
 .description {
@@ -83,7 +82,7 @@
 }
 .create-new-question {
     font-size: 150%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     padding: 1%;
     width: 100%;
diff --git a/web/src/manageclassroom/css/AssignmentsSubpage.css b/web/src/manageclassroom/css/AssignmentsSubpage.css
index 960b469..65df190 100644
--- a/web/src/manageclassroom/css/AssignmentsSubpage.css
+++ b/web/src/manageclassroom/css/AssignmentsSubpage.css
@@ -7,7 +7,7 @@
 .new-assignment-button {
     width: 100%;
     padding: 1%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     font-size: 150%;
     border-radius: 25px;
diff --git a/web/src/manageclassroom/css/BashTestCasePanel.css b/web/src/manageclassroom/css/BashTestCasePanel.css
index 60d8bc8..f8b4596 100644
--- a/web/src/manageclassroom/css/BashTestCasePanel.css
+++ b/web/src/manageclassroom/css/BashTestCasePanel.css
@@ -36,5 +36,5 @@
 }
 .testcase-label {
     font-size: 100%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
 }
\ No newline at end of file
diff --git a/web/src/manageclassroom/css/ClassroomSidebar.css b/web/src/manageclassroom/css/ClassroomSidebar.css
index 89f9eb0..c24bc75 100644
--- a/web/src/manageclassroom/css/ClassroomSidebar.css
+++ b/web/src/manageclassroom/css/ClassroomSidebar.css
@@ -11,7 +11,7 @@
 }
 .sidebarItem {
     padding: 2.5rem;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 125%;
     color: black;
     cursor: pointer;
diff --git a/web/src/manageclassroom/css/DetailsSubpage.css b/web/src/manageclassroom/css/DetailsSubpage.css
index fb56cc6..b2762c0 100644
--- a/web/src/manageclassroom/css/DetailsSubpage.css
+++ b/web/src/manageclassroom/css/DetailsSubpage.css
@@ -1,5 +1,5 @@
 #classroom-name-text {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-weight: 700;
     font-size: 125%;
     word-wrap: none;
@@ -43,13 +43,13 @@
 }
 
 .details-title-fonts {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-weight: 700;
     font-size: 125%;
 }
 
 .popup-style {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     text-align: center;
 }
 
@@ -62,7 +62,7 @@
 }
 
 .classroom-name-field {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     flex: 8;
 }
 
@@ -74,7 +74,7 @@
 
 .classroom-code-field {
     flex: 4;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
 }
 
 .classroom-code-sub-parent{
@@ -91,7 +91,7 @@
 }
 
 .date-set-parent {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     display: flex;
     padding-top: 2%;
     width: 100%;
@@ -99,7 +99,7 @@
 }
 
 .course-description-parent {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     display: flex;
     padding-top: 2%;
     width: 100;
diff --git a/web/src/manageclassroom/css/FileTabs.css b/web/src/manageclassroom/css/FileTabs.css
index 3c21b09..76179ab 100644
--- a/web/src/manageclassroom/css/FileTabs.css
+++ b/web/src/manageclassroom/css/FileTabs.css
@@ -1,7 +1,7 @@
 .file-tabs {
   display: inline-block;
-  background-color: #eee;
-  border-bottom: 1px solid #333;
+  background-color: var(--color-gray-light);
+  border-bottom: 1px solid var(--color-gray-darkest);
   overflow-x: auto;
   white-space: nowrap;
   width: 100%;
@@ -9,23 +9,23 @@
 
 .file-tab {
   display: inline-block;
-  font-family: "Azeret Mono";
+  font-family: "Roboto";
   align-items: center;
   padding: .5%;
-  color: #222;
+  color: var(--color-gray-text);
   cursor: pointer;
   user-select: none;
-  border-left: 1px solid black;
-  border-right: 1px solid black;
+  border-left: 1px solid var(--color-black);
+  border-right: 1px solid var(--color-black);
 }
 
 .file-tab.active {
-  background-color: #fff;
-  color: black;
+  background-color: var(--color-white);
+  color: var(--color-black);
 }
 
 .file-tab:hover {
-  background-color: #ccc;
+  background-color: var(--color-gray-medium);
 }
 
 .tab-name {
@@ -35,11 +35,11 @@
 .close-btn {
   background: none;
   border: none;
-  color: black;
+  color: var(--color-black);
   cursor: pointer;
   font-size: 14px;
 }
 
 .close-btn:hover {
-  color: black;
+  color: var(--color-black);
 }
diff --git a/web/src/manageclassroom/css/PointsProgress.css b/web/src/manageclassroom/css/PointsProgress.css
index aaae6fb..fc1056c 100644
--- a/web/src/manageclassroom/css/PointsProgress.css
+++ b/web/src/manageclassroom/css/PointsProgress.css
@@ -5,26 +5,26 @@
     width: 100%;
     padding: 1%;
     gap: 1rem;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
 }
 .points-progress-bar {
     width: 100%;
     height: 10px;
-    background: red;
+    background: var(--color-red);
 }
 .points-progress-bar::-webkit-progress-bar {
-  background-color: red;
+  background-color: var(--color-red);
 }
 
 .points-progress-bar::-webkit-progress-value {
-  background-color: #0f0;
+  background-color: var(--color-success);
 }
 
 .points-progress-bar::-moz-progress-bar {
-  background-color: #0f0;
+  background-color: var(--color-success);
 }
 .progress-text {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 100%;
 }
 .progress-text-parent {
@@ -33,10 +33,10 @@
     gap: 1rem;
 }
 .redtext {
-    color: red;
+    color: var(--color-red);
 }
 .greentext {
-    color: lime;
+    color: var(--color-success);
 }
 .total-points {
     flex: 1;
diff --git a/web/src/manageclassroom/css/QuestionEditor.css b/web/src/manageclassroom/css/QuestionEditor.css
index 8a4165c..be7c681 100644
--- a/web/src/manageclassroom/css/QuestionEditor.css
+++ b/web/src/manageclassroom/css/QuestionEditor.css
@@ -7,7 +7,6 @@
     background: white;
     border-radius: 20px;
     padding: 2%;
-    box-shadow: 0 10px 15px 0px rgba(0, 0, 0, 0.25);
 }
 .question-body {
     display: flex;
diff --git a/web/src/manageclassroom/css/TestCaseButton.css b/web/src/manageclassroom/css/TestCaseButton.css
index b5df322..06fe424 100644
--- a/web/src/manageclassroom/css/TestCaseButton.css
+++ b/web/src/manageclassroom/css/TestCaseButton.css
@@ -20,7 +20,7 @@
     justify-content: center;
     align-items: center;
     padding: 3%;
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     color: white;
     white-space: normal;
     word-wrap: break-word;
@@ -32,7 +32,7 @@
     justify-content: center;
     align-items: center;
     padding: 6%;
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     background-color: white;
     white-space: normal;
     word-wrap: break-word;
diff --git a/web/src/manageclassroom/css/TestCaseExpand.css b/web/src/manageclassroom/css/TestCaseExpand.css
index 464229c..04efd00 100644
--- a/web/src/manageclassroom/css/TestCaseExpand.css
+++ b/web/src/manageclassroom/css/TestCaseExpand.css
@@ -12,7 +12,7 @@
     width: 100%;
 }
 .testcase-expand-label {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 125%;
 }
 .testcase-expand-points {
diff --git a/web/src/manageclassroom/css/TestCasesEditor.css b/web/src/manageclassroom/css/TestCasesEditor.css
index 8dd1fdf..553fb00 100644
--- a/web/src/manageclassroom/css/TestCasesEditor.css
+++ b/web/src/manageclassroom/css/TestCasesEditor.css
@@ -22,7 +22,7 @@
     font-size: 100%;
     box-sizing: border-box;
     color: white;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     margin-bottom: 2vh;
 }
 .hidden {
diff --git a/web/src/manageclassroom/css/TestCasesTabs.css b/web/src/manageclassroom/css/TestCasesTabs.css
index 819ac3b..828ae36 100644
--- a/web/src/manageclassroom/css/TestCasesTabs.css
+++ b/web/src/manageclassroom/css/TestCasesTabs.css
@@ -1,12 +1,12 @@
 .testcases-tabs {
     width: 100%;
     box-sizing: border-box;
-    background: #eee;
+    background: var(--color-gray-light);
 }
 .tabs {
     display: flex;
     align-items: center;
-    border-bottom: 1px solid black;
+    border-bottom: 1px solid var(--color-black);
     width: 100%;
     box-sizing: border-box;
 }
@@ -31,7 +31,7 @@
 .tab {
     padding: 1.5%;
     height: 100%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     user-select: none;
     font-size: 100%;
 }
diff --git a/web/src/manageclassroom/css/TextTestCase.css b/web/src/manageclassroom/css/TextTestCase.css
index 19f4d42..2ef7091 100644
--- a/web/src/manageclassroom/css/TextTestCase.css
+++ b/web/src/manageclassroom/css/TextTestCase.css
@@ -12,7 +12,7 @@
     gap: 1rem;
 }
 .textarea-label {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 100%;
 }
 .textarea-half {    
@@ -35,7 +35,7 @@
     justify-content: center;
     align-items: center;
     gap: .5rem;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     color: white;
     font-size: 125%;
     border-radius: 20px;
@@ -50,7 +50,7 @@
     display: flex;
     justify-content: start;
     flex: 1;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     font-size: 125%;
 }
 .delete-visibility {
diff --git a/web/src/manageclassroom/css/TextTestCasePanel.css b/web/src/manageclassroom/css/TextTestCasePanel.css
index c326c79..a858cc6 100644
--- a/web/src/manageclassroom/css/TextTestCasePanel.css
+++ b/web/src/manageclassroom/css/TextTestCasePanel.css
@@ -31,7 +31,7 @@
     font-family: "Monomaniac One";
 }
 .run-test-button {
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
     padding: 6%;
     box-sizing: border-box;
     font-size: 100%;
@@ -43,7 +43,7 @@
     gap: 1rem;
 }
 .test-case-textfield {
-    font-family: "Azeret Mono"
+    font-family: "Roboto"
 }
 .text-testcases {
     display: flex;
@@ -54,7 +54,7 @@
 }
 .testcases-title {
     font-size: 150%;
-    font-family: "Azeret Mono";
+    font-family: "Roboto";
 }
 .new-text-test-case {
     font-size: 175%;
diff --git a/web/src/manageclassroom/manageclassroom.css b/web/src/manageclassroom/manageclassroom.css
index a7b56e8..33e4167 100644
--- a/web/src/manageclassroom/manageclassroom.css
+++ b/web/src/manageclassroom/manageclassroom.css
@@ -32,18 +32,17 @@
     width: 100%;
 }
 .error {
-    background: white;
+    background: var(--color-white);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 150%;
     margin-top: 2%;
     padding: 2%;
-    border: 2px solid black;
+    border: 2px solid var(--color-black);
     border-radius: 25px;
-    box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25);
-    color: red;
+    color: var(--color-red);
     min-height: 30vh;
 }
 .edit-buttons {
@@ -62,8 +61,8 @@
 }
 .edit-button {
     width: 50%;
-    font-family: 'Azeret Mono';
-    color: white;
+    font-family: 'Roboto';
+    color: var(--color-white);
     border-radius: 20px;
     padding: 1.5%;
     font-size: 150%;
@@ -83,15 +82,15 @@ button.save-button:active {
 }
 
 .delete-button {
-    background-color: red;
+    background-color: var(--color-red);
 }
 
 .delete-button:hover {
-    background-color: #e00;
+    background-color: var(--color-danger);
 }
 
 button.delete-button:active {
-    background-color: darkred;
+    background-color: var(--color-error);
 }
 
 .edit-button:disabled {
diff --git a/web/src/resetpassword/Resetpassword.tsx b/web/src/resetpassword/Resetpassword.tsx
index 2c23d0a..1634b58 100644
--- a/web/src/resetpassword/Resetpassword.tsx
+++ b/web/src/resetpassword/Resetpassword.tsx
@@ -1,14 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Navbar from "../components/navbar/Navbar"
-import './resetpassword.css'
+import "./ResetPassword.css";
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <Navbar />
-    <div className="bottom-page">
-        <h1 id="notication-text">Page under development</h1>
-        <a href="/test" id="page">Test page</a>
-    </div>
-  </StrictMode>,
-)
\ No newline at end of file
+function ResetPassword() {
+  return (
+    <>
+      <h1 id="notication-text">Page under development</h1>
+      Test page
+    </>
+  );
+}
+
+export default ResetPassword;
diff --git a/web/src/resetpassword/resetpassword.css b/web/src/resetpassword/resetpassword.css
index fd0aca5..574e25d 100644
--- a/web/src/resetpassword/resetpassword.css
+++ b/web/src/resetpassword/resetpassword.css
@@ -1,15 +1,3 @@
-@import url(..//reset.css);
-
-* {
-    overscroll-behavior: none;
-}
-
-body {
-    font-family: "Azeret Mono";
-    margin: 0;
-    overflow: hidden;
-}
-
 #notication-text {
     font-family: "Monomaniac One";
     font-size: 96px;
diff --git a/web/src/resetpassword/resetpassword.html b/web/src/resetpassword/resetpassword.html
deleted file mode 100644
index 3380d05..0000000
--- a/web/src/resetpassword/resetpassword.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./resetpassword.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./Resetpassword.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/signup/Signup.tsx b/web/src/signup/Signup.tsx
index fa267f8..be175fa 100644
--- a/web/src/signup/Signup.tsx
+++ b/web/src/signup/Signup.tsx
@@ -1,14 +1,26 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import Navbar from "../components/navbar/Navbar"
-import './signup.css';
-import SignupPanel from "./SignupPanel";
+import TextField from "../components/textfield/Textfield";
+import PasswordField from "../components/textfield/PasswordField";
+import "./Signup.css";
+import { Link } from "react-router";
 
+function Signup() {
+  return (
+    <div className="signup-page">
+      <div className="signup-card">
+        <h1 className="signup-title">Sign Up</h1>
+        <div className="input-container">
+          <TextField initialValue="First Name" />
+          <TextField initialValue="Last Name" />
+          <PasswordField initialValue="Create Password" />
+          <PasswordField initialValue="Re-Type Password" />
+        </div>
+        <Link to="/i/faq" className="why-am-i-here">
+          Why am I here?
+        </Link>
+        <button className="submit-button">Sign Up</button>
+      </div>
+    </div>
+  );
+}
 
-
-
-createRoot(document.getElementById("root")!).render(
-<StrictMode>
-    <Navbar />
-    <SignupPanel />
-</StrictMode>)
\ No newline at end of file
+export default Signup;
diff --git a/web/src/signup/SignupPanel.tsx b/web/src/signup/SignupPanel.tsx
deleted file mode 100644
index 6875c45..0000000
--- a/web/src/signup/SignupPanel.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import { useEffect, useState } from "react";
-import TextField, { TextFieldInput } from "../components/textfield/Textfield";
-
-function SignupPanel() {
-    const [error, setError] = useState("");
-    const [loading, setLoading] = useState(true);
-
-    const [firstName, setFirstName] = useState("");
-    const [lastName, setLastName] = useState("");
-    const [password1, setPassword1] = useState("");
-    const [password2, setPassword2] = useState("");
-
-    const alterStateFromTextfield = (alterState: (newValue: string) => void) => {
-        return (data: TextFieldInput) => alterState(data.value);
-    }
-
-    const urlParams = new URLSearchParams(window.location.search);
-
-    const inviteId = urlParams.get('id');
-    const token = urlParams.get('token');
-    const verifyInvite = async () => {
-        var response = await fetch(`/api/auth/invite/${inviteId}/valid?token=${token}`)
-        if (response.ok) {
-            var json = await response.json();
-            if (json['message'] !== 'true') {
-                setError("Invalid invite");
-            }
-            console.log("valid invite");
-        } else {
-            setError("Invalid invite");
-        }
-        setLoading(false);
-    }
-    const registerUser = async () => {
-        if (firstName === "") {
-            alert("First Name cannot be empty")
-        } else if (lastName === "") {
-            alert("Last Name cannot be empty")
-        } else if (password1 !== password2) {
-            alert("Passwords do not match")
-        } else {
-            var response = await fetch(`/api/auth/register/${inviteId}?token=${token}`, {
-                method: "POST",
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    first_name: firstName,
-                    last_name: lastName,
-                    password: password1
-                })
-            });
-            if (!response.ok) {
-                var json = await response.json();
-                alert(json.error);
-            } else {
-                redirectToDashboard();
-            }
-        }
-    }
-    const redirectToDashboard = () => {
-        window.location.href = "/dashboard"
-    }
-    useEffect(() => { 
-        if (loading) {
-            verifyInvite();
-        }
-    })
-
-
-    return (
-        <>
-            {error 
-            ?
-            <div className="errorParent">
-                <div className="error">
-                    {error}
-                </div>
-            </div>
-            :
-            <div className="signup-page">
-                <div className="signup-card">
-                    <h1 className="signup-title">Sign Up</h1>
-                    <div className="input-container">
-                        <TextField
-                            initialValue="First Name"
-                            label=""
-                            onChange={alterStateFromTextfield(setFirstName)}/>
-                        <TextField
-                            initialValue="Last Name"
-                            label=""
-                            onChange={alterStateFromTextfield(setLastName)}/>    
-                        <TextField 
-                            initialValue="Create Password"
-                            label=""
-                            type="password"
-                            onChange={alterStateFromTextfield(setPassword1)}/>
-                        <TextField 
-                            initialValue="Re-Type Password"
-                            label=""
-                            type="password"
-                            onChange={alterStateFromTextfield(setPassword2)}/>
-                    </div>       
-                    <a href="/faq" className="why-am-i-here">Why am I here?</a>
-                    <button className="submit-button" onClick={registerUser}>Sign Up</button>
-                </div>
-            </div>
-            }
-        </>
-    )
-}
-export default SignupPanel;
\ No newline at end of file
diff --git a/web/src/signup/signup.css b/web/src/signup/signup.css
index 47c5bf5..eea202a 100644
--- a/web/src/signup/signup.css
+++ b/web/src/signup/signup.css
@@ -7,10 +7,10 @@
 }
 
 .signup-page {
-    font-family: 'Azeret Mono', monospace;
+    font-family: 'Roboto', sans-serif;
     width: 100vw;
     height: 94.5vh;
-    background: linear-gradient(90deg, #0CAADC -20%, #ffffff 120%);
+    background: var(--color-bg-primary);
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -20,12 +20,11 @@
 
 .signup-card {
     width: max(40%, 300px);
-    height: 85%;
-    background: white;
-    box-shadow: 33px 35px 13.9px -6px rgba(0, 0, 0, 0.25);
+    height: 70%;
+    background: var(--color-white);
     border-radius: 25px;
     overflow: hidden;
-    border: 4px solid #1E212B;
+    border: 4px solid var(--color-raisin-black);
 }
 
 .signup-card > * {
@@ -37,7 +36,7 @@
     height: 10%;
     position: relative;
     margin-top: 5%;
-    color: black;
+    color: var(--color-black);
     font-size: 42px;
     font-weight: 700;
     word-wrap: break-word;
@@ -49,13 +48,13 @@
 
 .input-container input{
     font-size: 24px;
-    border-color: #000000;
+    border-color: var(--color-black);
     border-width: 1.5px;
     margin-top: 5%;
 }
 
 .why-am-i-here {
-    color: #1481BA;
+    color: var(--color-NCS-blue);
     font-size: 18px;
 }
 
@@ -66,23 +65,23 @@
     justify-content: flex-end;
     border-radius: 20px;
     font-size: 36px;
-    color: #ffffff;
-    background-color: #0CAADC;
+    color: var(--color-white);
+    background-color: var(--color-process-cyan);
     padding-top: 12.5px;
     padding-bottom: 12.5px;
     transition: background-color 0.2s;
 }
 
 .submit-button:hover {
-    background-color: #1481BA;
+    background-color: var(--color-NCS-blue);
 }
 
 .submit-button:active {
-    background-color: #1E212B;
+    background-color: var(--color-raisin-black);
 }
 
 .submit-button:focus {
-    background-color: #1E212B;
+    background-color: var(--color-raisin-black);
 }
 
 .errorParent {
@@ -92,17 +91,16 @@
     width: 100%;
 }
 .error {
-    background: white;
+    background: var(--color-white);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'Azeret Mono';
+    font-family: 'Roboto';
     font-size: 150%;
     margin-top: 2%;
     padding: 2%;
-    border: 2px solid black;
+    border: 2px solid var(--color-black);
     border-radius: 25px;
-    box-shadow: 25px 25px 13.9px -6px rgba(0, 0, 0, 0.25);
-    color: red;
+    color: var(--color-red);
     min-height: 30vh;
 }
\ No newline at end of file
diff --git a/web/src/signup/signup.html b/web/src/signup/signup.html
deleted file mode 100644
index 0974b23..0000000
--- a/web/src/signup/signup.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./signup.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./Signup.tsx"></script>
-  </body>
-</html>
\ No newline at end of file
diff --git a/web/src/test/Test.tsx b/web/src/test/Test.tsx
deleted file mode 100644
index 4d97f16..0000000
--- a/web/src/test/Test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client'
-import styled from "styled-components"
-import Select from 'react-select'
-import Navbar from "../components/navbar/Navbar"
-import './test.css'
-
-const Button = styled.button`
-  background-color: black;
-  color: white;
-  font-size: 20px;
-  padding: 10px 60px;
-  border-radius: 5px;
-  margin: 10px 0px;
-  cursor: pointer;
-
-  &:disabled {
-    color: grey;
-    opacity: 0.7;
-    cursor: default;
-  }
-`;
-
-const roleOptions = [
-    {value: "student", label: "Student"},
-    {value: "assistant", label: "Assistant"},
-    {value: "instructor", label: "Instructor"},
-];
-
-const logout = async () => {
-  try {
-    const res = await fetch("/api/auth/logout", {method:"post"});
-    if (!res.ok) {
-      console.log("Logout not successful")
-    } else {
-      console.log("logout successful")
-    }
-  } catch (e) {
-    console.log("Bruh");
-  }
-};
-
-createRoot(document.getElementById('root')!).render(
-    <StrictMode>
-      <Navbar />
-        <div className="addStudentFields">
-            <input placeholder="Enter an email"/>
-            <Select options={roleOptions} placeholder="Select a role" id="dropdown"/>
-        </div>
-        <Button id="sendButton">Send Email</Button>
-        <Button onClick={logout}>Log out</Button>
-    </StrictMode>
-  )
\ No newline at end of file
diff --git a/web/src/test/test.css b/web/src/test/test.css
deleted file mode 100644
index cbb5451..0000000
--- a/web/src/test/test.css
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-#root {
-    text-align: center;
-}
-
-#sendButton {
-    margin-top: 5rem;
-}
-
-.addStudentFields {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: row;
-}
-
-.addStudentFields * {
-    margin-left: 1vh;
-    margin-right: 1vh;
-}
\ No newline at end of file
diff --git a/web/src/test/test.html b/web/src/test/test.html
deleted file mode 100644
index ebc45b0..0000000
--- a/web/src/test/test.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <link rel="stylesheet" href="./test.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
-    <link href='https://fonts.googleapis.com/css?family=Monomaniac One' rel='stylesheet'>
-    <link href="../reset.css" rel="stylesheet">
-    <title>UDCS Autograder</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./Test.tsx"></script>
-  </body>
-</html>
diff --git a/web/src/utils/classroom.ts b/web/src/utils/classroom.ts
index 3ea5b9c..9474450 100644
--- a/web/src/utils/classroom.ts
+++ b/web/src/utils/classroom.ts
@@ -1,65 +1,65 @@
 import { Assignment, Question } from "../models/classroom";
 
 export const parseDateString = (dateString: string) => {
-    let parts = dateString.split("-").map((p, i) => Number(p) - Number(i == 1));
-    return new Date(parts[0], parts[1], parts[2]);
-}
+  const parts = dateString.split("-").map((p, i) => Number(p) - Number(i == 1));
+  return new Date(parts[0], parts[1], parts[2]);
+};
 export const dateToString = (date: Date) => {
-    if (typeof date !== 'object') date = new Date(date);
-    let day = date.getDate();
-    let month = date.getMonth() + 1;
-    return `${date.getFullYear()}-${month <= 9 ? "0" : ""}${month}-${day <= 9 ? "0" : ""}${day}`;
-}
+  if (typeof date !== "object") date = new Date(date);
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  return `${date.getFullYear()}-${month <= 9 ? "0" : ""}${month}-${
+    day <= 9 ? "0" : ""
+  }${day}`;
+};
 export const createBlankQuestion = (assignmentId: string): Question => {
-    const questionId = crypto.randomUUID();
-    const questionPoints = 10;
-    const testcaseId = crypto.randomUUID();
-    const testcaseTimeout = 10;
-    const testcasePoints = 10;
-    return {
-        id: questionId,
-        assignment_id: assignmentId,
-        header: "",
-        body: "",
-        points: questionPoints,
-        sort_index: 0,
-        default_code: "",
-        solution_code: "",
-        prog_lang: "python",
-        test_cases: [
-            {
-                id: testcaseId,
-                name: "Test case 1",
-                timeoutSeconds: testcaseTimeout,
-                type: "text",
-                points: testcasePoints,
-                body: {
-                    inputs: "",
-                    outputs: "",
-                    hidden: true,
-                }
-            },
-        ]
-    }
-}
+  const questionId = crypto.randomUUID();
+  const questionPoints = 10;
+  const testcaseId = crypto.randomUUID();
+  const testcaseTimeout = 10;
+  const testcasePoints = 10;
+  return {
+    id: questionId,
+    assignment_id: assignmentId,
+    header: "",
+    body: "",
+    points: questionPoints,
+    sort_index: 0,
+    default_code: "",
+    solution_code: "",
+    prog_lang: "python",
+    test_cases: [
+      {
+        id: testcaseId,
+        name: "Test case 1",
+        timeoutSeconds: testcaseTimeout,
+        type: "text",
+        points: testcasePoints,
+        body: {
+          inputs: "",
+          outputs: "",
+          hidden: true,
+        },
+      },
+    ],
+  };
+};
 export const createBlankAssignment = (classroomId: string): Assignment => {
-    const today = new Date();
-    const nextWeek = new Date(today);
-    nextWeek.setDate(today.getDate() + 7);
+  const today = new Date();
+  const nextWeek = new Date(today);
+  nextWeek.setDate(today.getDate() + 7);
 
-    const assignmentId = crypto.randomUUID();
-    return {
-        id: assignmentId,
-        classroom_id: classroomId,
-        name: "",
-        description: "",
-        assignment_mode: "draft",
-        due_at: nextWeek,
-        created_at: today,
-        updated_at: today,
-        sort_index: 0,
-        questions: [
-            createBlankQuestion(assignmentId)
-        ]
-    }
-}
\ No newline at end of file
+  const assignmentId = crypto.randomUUID();
+  return {
+    id: assignmentId,
+    classroom_id: classroomId,
+    name: "",
+    description: "",
+    assignment_mode: "draft",
+    due_at: nextWeek,
+    created_at: today,
+    updated_at: today,
+    sort_index: 0,
+    questions: [createBlankQuestion(assignmentId)],
+  };
+};
diff --git a/web/tsconfig.app.tsbuildinfo b/web/tsconfig.app.tsbuildinfo
index e2e45ee..092d69a 100644
--- a/web/tsconfig.app.tsbuildinfo
+++ b/web/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/index.tsx","./src/vite-env.d.ts","./src/faq/faq.tsx","./src/about/about.tsx","./src/account/accountsettings.tsx","./src/account/account.tsx","./src/assignment/assignmentbody.tsx","./src/assignment/assignment.tsx","./src/classroom/classroombody.tsx","./src/classroom/classroom.tsx","./src/components/assignment/assignmentdropdown.tsx","./src/components/assignment/assignmentpanel.tsx","./src/components/assignment/consoleoutput.tsx","./src/components/buttons/bluebutton.tsx","./src/components/buttons/colorbutton.tsx","./src/components/buttons/darkbluebutton.tsx","./src/components/buttons/greybutton.tsx","./src/components/buttons/redbutton.tsx","./src/components/calendar-input/calendarinput.tsx","./src/components/classroom-widget/classroomwidget.tsx","./src/components/editor/codeeditor.tsx","./src/components/font-size-input/fontsizeinput.tsx","./src/components/homework/homeworkassignment.tsx","./src/components/homework/homeworksidebar.tsx","./src/components/logo/logo.tsx","./src/components/navbar/animatedlogo.tsx","./src/components/navbar/navbar.tsx","./src/components/popup/copytestcasepopup.tsx","./src/components/popup/deletefilepopup.tsx","./src/components/popup/deletepopup.tsx","./src/components/popup/deletetestcasepopup.tsx","./src/components/popup/newfilepopup.tsx","./src/components/popup/newtestcasepopup.tsx","./src/components/popup/popup.tsx","./src/components/popup/renamefilepopup.tsx","./src/components/question/questionbulletpoint.tsx","./src/components/question/questionpanel.tsx","./src/components/question/questionscore.tsx","./src/components/select-dropdown/selectdropdown.tsx","./src/components/textarea/textarea.tsx","./src/components/textfield/textfield.tsx","./src/components/title-input/titleinput.tsx","./src/components/titlebanner/titlebanner.tsx","./src/components/toggleswitch/toggleswitch.tsx","./src/dashboard/dashboard.tsx","./src/dashboard/dashboardbody.tsx","./src/dashboard/dashboardsection.tsx","./src/login/login.tsx","./src/login/logininputs.tsx","./src/manageclassroom/classroommanager.tsx","./src/manageclassroom/manageclassroom.tsx","./src/manageclassroom/components/assignmenteditor.tsx","./src/manageclassroom/components/bashtestcasepanel.tsx","./src/manageclassroom/components/classroomsidebar.tsx","./src/manageclassroom/components/editorwithtabs.tsx","./src/manageclassroom/components/filetabs.tsx","./src/manageclassroom/components/pointsprogress.tsx","./src/manageclassroom/components/questioneditor.tsx","./src/manageclassroom/components/testcasebutton.tsx","./src/manageclassroom/components/testcaseexpand.tsx","./src/manageclassroom/components/testcaseseditor.tsx","./src/manageclassroom/components/testcasestabs.tsx","./src/manageclassroom/components/testrunresults.tsx","./src/manageclassroom/components/texttestcase.tsx","./src/manageclassroom/components/texttestcasepanel.tsx","./src/manageclassroom/subpages/assignmentssubpage.tsx","./src/manageclassroom/subpages/detailssubpage.tsx","./src/manageclassroom/subpages/gradessubpage.tsx","./src/manageclassroom/subpages/studentssubpage.tsx","./src/models/classroom.ts","./src/models/testcases.ts","./src/resetpassword/resetpassword.tsx","./src/signup/signup.tsx","./src/test/test.tsx","./src/utils/classroom.ts","./src/utils/editor.ts"],"version":"5.6.2"}
\ No newline at end of file
+{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/about/about.tsx","./src/account/accountsettings.tsx","./src/assignment/assignment.tsx","./src/classroom/classroom.tsx","./src/components/assignment/assignmentdropdown.tsx","./src/components/assignment/assignmentpanel.tsx","./src/components/assignment/consoleoutput.tsx","./src/components/buttons/bluebutton.tsx","./src/components/buttons/colorbutton.tsx","./src/components/buttons/darkbluebutton.tsx","./src/components/buttons/greybutton.tsx","./src/components/buttons/redbutton.tsx","./src/components/calendar-input/calendarinput.tsx","./src/components/classroom-widget/classroomwidget.tsx","./src/components/editor/codeeditor.tsx","./src/components/font-size-input/fontsizeinput.tsx","./src/components/homework/homeworkassignment.tsx","./src/components/homework/homeworksidebar.tsx","./src/components/logo/logo.tsx","./src/components/navbar/animatedlogo.tsx","./src/components/navbar/navbar.tsx","./src/components/popup/copytestcasepopup.tsx","./src/components/popup/deletefilepopup.tsx","./src/components/popup/deletepopup.tsx","./src/components/popup/deletetestcasepopup.tsx","./src/components/popup/newfilepopup.tsx","./src/components/popup/newtestcasepopup.tsx","./src/components/popup/popup.tsx","./src/components/popup/renamefilepopup.tsx","./src/components/question/questionbulletpoint.tsx","./src/components/question/questionpanel.tsx","./src/components/question/questionscore.tsx","./src/components/select-dropdown/selectdropdown.tsx","./src/components/spinner/spinner.tsx","./src/components/textarea/textarea.tsx","./src/components/textfield/textfield.tsx","./src/components/title-input/titleinput.tsx","./src/components/titlebanner/titlebanner.tsx","./src/components/toggleswitch/toggleswitch.tsx","./src/dashboard/dashboard.tsx","./src/dashboard/dashboardsection.tsx","./src/faq/faq.tsx","./src/home/home.tsx","./src/login/login.tsx","./src/manageclassroom/classroommanager.tsx","./src/manageclassroom/manageclassroom.tsx","./src/manageclassroom/components/assignmenteditor.tsx","./src/manageclassroom/components/bashtestcasepanel.tsx","./src/manageclassroom/components/classroomsidebar.tsx","./src/manageclassroom/components/editorwithtabs.tsx","./src/manageclassroom/components/filetabs.tsx","./src/manageclassroom/components/pointsprogress.tsx","./src/manageclassroom/components/questioneditor.tsx","./src/manageclassroom/components/testcasebutton.tsx","./src/manageclassroom/components/testcaseexpand.tsx","./src/manageclassroom/components/testcaseseditor.tsx","./src/manageclassroom/components/testcasestabs.tsx","./src/manageclassroom/components/testrunresults.tsx","./src/manageclassroom/components/texttestcase.tsx","./src/manageclassroom/components/texttestcasepanel.tsx","./src/manageclassroom/subpages/assignmentssubpage.tsx","./src/manageclassroom/subpages/detailssubpage.tsx","./src/manageclassroom/subpages/gradessubpage.tsx","./src/manageclassroom/subpages/studentssubpage.tsx","./src/models/classroom.ts","./src/models/testcases.ts","./src/resetpassword/resetpassword.tsx","./src/signup/signup.tsx","./src/utils/classroom.ts","./src/utils/editor.ts"],"version":"5.6.2"}
\ No newline at end of file
diff --git a/web/vite.config.ts b/web/vite.config.ts
index f8b3011..f961a45 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,36 +1,8 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import tailwindcss from "@tailwindcss/vite";
 
-const root = resolve(__dirname, 'src')
-const outDir = resolve(__dirname, 'dist')
-
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
-  resolve: {
-    preserveSymlinks: false
-  },
-  root,
   plugins: [react(), tailwindcss()],
-  build: {
-    outDir,
-    emptyOutDir: true,
-    rollupOptions: {
-      input: {
-        main: resolve(root, 'index.html'),
-        test: resolve(root, 'test', 'test.html'),
-        login: resolve(root, 'login', 'login.html'),
-        about: resolve(root, 'about', 'about.html'),
-        FAQ: resolve(root, 'FAQ', 'FAQ.html'),
-        resetPW: resolve(root, 'resetpassword', 'resetpassword.html'),
-        dashboard: resolve(root, "dashboard", "dashboard.html"),
-        signup: resolve(root, 'signup', 'signup.html'),
-        account: resolve(root, 'account', 'account.html'),
-        classroom: resolve(root, 'classroom', 'classroom.html'),
-        classroomManager: resolve(root, 'manageclassroom', 'manageclassroom.html'),
-        assignment: resolve(root, 'assignment', 'assignment.html')
-      }
-    }
-  }
-})
+});
diff --git a/web/web.go b/web/web.go
index a21391b..0d0c134 100644
--- a/web/web.go
+++ b/web/web.go
@@ -9,66 +9,15 @@ import (
 var (
 	//go:embed all:dist
 	dist embed.FS
+
 	//go:embed dist/index.html
 	indexHTML embed.FS
-	//go:embed dist/test/test.html
-	testHTML embed.FS
-	//go:embed dist/login/login.html
-	loginHTML embed.FS
-	//go:embed dist/about/about.html
-	aboutHTML embed.FS
-	//go:embed dist/FAQ/FAQ.html
-	FAQHTML embed.FS
-	//go:embed dist/resetpassword/resetpassword.html
-	resetpasswordHTML embed.FS
-	//go:embed dist/signup/signup.html
-	signupHTML embed.FS
-	//go:embed dist/dashboard/dashboard.html
-	dashboardHTML embed.FS
-	//go:embed dist/account/account.html
-	accountHTML embed.FS
-	//go:embed dist/classroom/classroom.html
-	classroomHTML embed.FS
-	//go:embed dist/manageclassroom/manageclassroom.html
-	classroomManagerHTML embed.FS
-
-	//go:embed dist/assignment/assignment.html
-	assignmentHTML embed.FS
-
-	//go:embed public
-	publicDir embed.FS
-
-	distDirFS                = echo.MustSubFS(dist, "dist")
-	distIndexHTML            = echo.MustSubFS(indexHTML, "dist")
-	distTestHTML             = echo.MustSubFS(testHTML, "dist/test")
-	distLoginHTML            = echo.MustSubFS(loginHTML, "dist/login")
-	distAboutHTML            = echo.MustSubFS(aboutHTML, "dist/about")
-	distFAQHTML              = echo.MustSubFS(FAQHTML, "dist/FAQ")
-	distResetpasswordHTML    = echo.MustSubFS(resetpasswordHTML, "dist/resetpassword")
-	distSignupHTML           = echo.MustSubFS(signupHTML, "dist/signup")
-	distAccountHTML          = echo.MustSubFS(accountHTML, "dist/account")
-	distDashboardHTML        = echo.MustSubFS(dashboardHTML, "dist/dashboard")
-	distClassroomHTML        = echo.MustSubFS(classroomHTML, "dist/classroom")
-	distAssignmentHTML       = echo.MustSubFS(assignmentHTML, "dist/assignment")
-	distClassroomManagerHTML = echo.MustSubFS(classroomManagerHTML, "dist/manageclassroom")
 
-	distPublicDir = echo.MustSubFS(publicDir, "public")
+	distDirFS     = echo.MustSubFS(dist, "dist")
+	distIndexHtml = echo.MustSubFS(indexHTML, "dist")
 )
 
-// RegisterHandlers registers the web handlers to serve the frontend
 func RegisterHandlers(e *echo.Echo) {
-	e.FileFS("/", "index.html", distIndexHTML)
-	e.FileFS("/test", "test.html", distTestHTML)
-	e.FileFS("/login", "login.html", distLoginHTML)
-	e.FileFS("/about", "about.html", distAboutHTML)
-	e.FileFS("/faq", "FAQ.html", distFAQHTML)
-	e.FileFS("/resetpassword", "resetpassword.html", distResetpasswordHTML)
-	e.FileFS("/signup", "signup.html", distSignupHTML)
-	e.FileFS("/dashboard", "dashboard.html", distDashboardHTML)
-	e.FileFS("/account", "account.html", distAccountHTML)
-	e.FileFS("/classroom", "classroom.html", distClassroomHTML)
-	e.FileFS("/classroom/manage", "manageclassroom.html", distClassroomManagerHTML)
-	e.FileFS("/assignment", "assignment.html", distAssignmentHTML)
-	e.StaticFS("/public", distPublicDir)
+	e.FileFS("/i*", "index.html", distIndexHtml)
 	e.StaticFS("/", distDirFS)
 }
diff --git a/web/yarn.lock b/web/yarn.lock
index a059f71..e2e7b89 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -959,6 +959,11 @@ convert-source-map@^1.5.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
 cosmiconfig@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -1513,7 +1518,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1697,19 +1702,33 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-react-dom@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+react-dom@^19.1.1:
+  version "19.1.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.1.tgz#2daa9ff7f3ae384aeb30e76d5ee38c046dc89893"
+  integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==
   dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
+    scheduler "^0.26.0"
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-router-dom@^7.9.1:
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.9.1.tgz#48044923701773da6362f9003ec46f308f293f15"
+  integrity sha512-U9WBQssBE9B1vmRjo9qTM7YRzfZ3lUxESIZnsf4VjR/lXYz9MHjvOxHzr/aUm4efpktbVOrF09rL/y4VHa8RMw==
+  dependencies:
+    react-router "7.9.1"
+
+react-router@7.9.1:
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.9.1.tgz#b227410c31f24dd416c939ca5d0f8d5c8a1404d4"
+  integrity sha512-pfAByjcTpX55mqSDGwGnY9vDCpxqBLASg0BMNAuMmpSGESo/TaOUG6BllhAtAkCGx8Rnohik/XtaqiYUJtgW2g==
+  dependencies:
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+
 react-select@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.10.0.tgz#9b5f4544cfecdfc744184b87651468ee0fb6e172"
@@ -1742,12 +1761,10 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
-  dependencies:
-    loose-envify "^1.1.0"
+react@^19.1.1:
+  version "19.1.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.1.1.tgz#06d9149ec5e083a67f9a1e39ce97b06a03b644af"
+  integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==
 
 regenerator-runtime@^0.14.0:
   version "0.14.1"
@@ -1805,18 +1822,21 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-scheduler@^0.23.2:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
-  dependencies:
-    loose-envify "^1.1.0"
+scheduler@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337"
+  integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==
 
 semver@^7.6.0:
   version "7.6.3"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
+set-cookie-parser@^2.6.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
+  integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==
+
 shallowequal@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..ca5e5a5
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,28 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-1.0.2.tgz#27360701532116bd3f1f9416929d176afe1e4610"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
+react-router-dom@^7.9.1:
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-7.9.1.tgz#48044923701773da6362f9003ec46f308f293f15"
+  integrity sha512-U9WBQssBE9B1vmRjo9qTM7YRzfZ3lUxESIZnsf4VjR/lXYz9MHjvOxHzr/aUm4efpktbVOrF09rL/y4VHa8RMw==
+  dependencies:
+    react-router "7.9.1"
+
+react-router@7.9.1:
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-7.9.1.tgz#b227410c31f24dd416c939ca5d0f8d5c8a1404d4"
+  integrity sha512-pfAByjcTpX55mqSDGwGnY9vDCpxqBLASg0BMNAuMmpSGESo/TaOUG6BllhAtAkCGx8Rnohik/XtaqiYUJtgW2g==
+  dependencies:
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+
+set-cookie-parser@^2.6.0:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz#3016f150072202dfbe90fadee053573cc89d2943"
+  integrity sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==