formatted with prettier

48 files changed, 2936 insertions, 1736 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 81589f6..754f5a2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,24 +1,24 @@
-import React from "react";
-import { Routes, Route } from "react-router-dom";
-import { Helmet } from "react-helmet";
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
-import { UserProfile } from "@customTypes/Profile";
-import Sidebar from "./components/Sidebar";
-import "./App.css";
+import { UserProfile } from '@customTypes/Profile';
+import Sidebar from './components/Sidebar';
+import './App.css';
 
-import Profile from "@pages/Profile";
-import Games from "@pages/Games";
-import Maps from "@pages/Maps";
-import User from "@pages/User";
-import Homepage from "@pages/Homepage";
-import UploadRunDialog from "./components/UploadRunDialog";
-import Rules from "@pages/Rules";
-import About from "@pages/About";
-import { Game } from "@customTypes/Game";
-import { API } from "./api/Api";
-import Maplist from "@pages/Maplist";
-import Rankings from "@pages/Rankings";
-import { get_user_id_from_token, get_user_mod_from_token } from "./utils/Jwt";
+import Profile from '@pages/Profile';
+import Games from '@pages/Games';
+import Maps from '@pages/Maps';
+import User from '@pages/User';
+import Homepage from '@pages/Homepage';
+import UploadRunDialog from './components/UploadRunDialog';
+import Rules from '@pages/Rules';
+import About from '@pages/About';
+import { Game } from '@customTypes/Game';
+import { API } from './api/Api';
+import Maplist from '@pages/Maplist';
+import Rankings from '@pages/Rankings';
+import { get_user_id_from_token, get_user_mod_from_token } from './utils/Jwt';
 
 const App: React.FC = () => {
   const [token, setToken] = React.useState<string | undefined>(undefined);
@@ -78,7 +78,7 @@ const App: React.FC = () => {
       <UploadRunDialog
         token={token}
         open={uploadRunDialog}
-        onClose={(updateProfile) => {
+        onClose={updateProfile => {
           setUploadRunDialog(false);
           if (updateProfile) {
             _set_profile(get_user_id_from_token(token));
@@ -118,7 +118,7 @@ const App: React.FC = () => {
         <Route path="/rules" element={<Rules />} />
         <Route path="/about" element={<About />} />
         <Route path="/rankings" element={<Rankings />}></Route>
-        <Route path="*" element={"404"} />
+        <Route path="*" element={'404'} />
       </Routes>
     </>
   );
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 0e1658c..b98dda3 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -1,14 +1,14 @@
-import { MapDiscussionContent, ModMenuContent } from "@customTypes/Content";
-import { delete_token, get_token } from "@api/Auth";
-import { get_user, get_profile, post_profile } from "@api/User";
+import { MapDiscussionContent, ModMenuContent } from '@customTypes/Content';
+import { delete_token, get_token } from '@api/Auth';
+import { get_user, get_profile, post_profile } from '@api/User';
 import {
   get_games,
   get_chapters,
   get_games_chapters,
   get_game_maps,
   get_search,
-} from "@api/Games";
-import { get_official_rankings, get_unofficial_rankings } from "@api/Rankings";
+} from '@api/Games';
+import { get_official_rankings, get_unofficial_rankings } from '@api/Rankings';
 import {
   get_map_summary,
   get_map_leaderboard,
@@ -19,14 +19,14 @@ import {
   delete_map_discussion,
   post_record,
   delete_map_record,
-} from "@api/Maps";
+} from '@api/Maps';
 import {
   delete_map_summary,
   post_map_summary,
   put_map_image,
   put_map_summary,
-} from "@api/Mod";
-import { UploadRunContent } from "@customTypes/Content";
+} from '@api/Mod';
+import { UploadRunContent } from '@customTypes/Content';
 
 // add new api call function entries here
 // example usage: API.get_games();
@@ -91,7 +91,7 @@ export const API = {
     delete_map_summary(token, map_id, route_id),
 };
 
-const BASE_API_URL: string = "/api/v1/";
+const BASE_API_URL: string = '/api/v1/';
 
 export function url(path: string): string {
   return BASE_API_URL + path;
diff --git a/frontend/src/api/Auth.ts b/frontend/src/api/Auth.ts
index 875c7e5..e495d47 100644
--- a/frontend/src/api/Auth.ts
+++ b/frontend/src/api/Auth.ts
@@ -1,8 +1,8 @@
-import axios from "axios";
-import { url } from "@api/Api";
+import axios from 'axios';
+import { url } from '@api/Api';
 
 export const get_token = async (): Promise<string | undefined> => {
-  const response = await axios.get(url(`token`))
+  const response = await axios.get(url(`token`));
   if (!response.data.success) {
     return undefined;
   }
@@ -10,5 +10,5 @@ export const get_token = async (): Promise<string | undefined> => {
 };
 
 export const delete_token = async () => {
-  await axios.delete(url("token"));
+  await axios.delete(url('token'));
 };
diff --git a/frontend/src/api/Games.ts b/frontend/src/api/Games.ts
index 72bb4b3..0e47091 100644
--- a/frontend/src/api/Games.ts
+++ b/frontend/src/api/Games.ts
@@ -1,31 +1,35 @@
-import axios from "axios";
-import { url } from "@api/Api";
-import { GameChapter, GamesChapters } from "@customTypes/Chapters";
-import { Game } from "@customTypes/Game";
-import { Map } from "@customTypes/Map";
-import { Search } from "@customTypes/Search";
+import axios from 'axios';
+import { url } from '@api/Api';
+import { GameChapter, GamesChapters } from '@customTypes/Chapters';
+import { Game } from '@customTypes/Game';
+import { Map } from '@customTypes/Map';
+import { Search } from '@customTypes/Search';
 
 export const get_games = async (): Promise<Game[]> => {
-  const response = await axios.get(url(`games`))
+  const response = await axios.get(url(`games`));
   return response.data.data;
 };
 
-export const get_chapters = async (chapter_id: string): Promise<GameChapter> => {
+export const get_chapters = async (
+  chapter_id: string
+): Promise<GameChapter> => {
   const response = await axios.get(url(`chapters/${chapter_id}`));
   return response.data.data;
-}
+};
 
-export const get_games_chapters = async (game_id: string): Promise<GamesChapters> => {
+export const get_games_chapters = async (
+  game_id: string
+): Promise<GamesChapters> => {
   const response = await axios.get(url(`games/${game_id}`));
   return response.data.data;
 };
 
 export const get_game_maps = async (game_id: string): Promise<Map[]> => {
-  const response = await axios.get(url(`games/${game_id}/maps`))
+  const response = await axios.get(url(`games/${game_id}/maps`));
   return response.data.data.maps;
 };
 
 export const get_search = async (q: string): Promise<Search> => {
-  const response = await axios.get(url(`search?q=${q}`))
+  const response = await axios.get(url(`search?q=${q}`));
   return response.data.data;
 };
diff --git a/frontend/src/api/Maps.ts b/frontend/src/api/Maps.ts
index aa967ce..3a22f88 100644
--- a/frontend/src/api/Maps.ts
+++ b/frontend/src/api/Maps.ts
@@ -1,15 +1,25 @@
-import axios from "axios";
-import { url } from "@api/Api";
-import { MapDiscussionContent, UploadRunContent } from "@customTypes/Content";
-import { MapSummary, MapLeaderboard, MapDiscussions, MapDiscussion } from "@customTypes/Map";
+import axios from 'axios';
+import { url } from '@api/Api';
+import { MapDiscussionContent, UploadRunContent } from '@customTypes/Content';
+import {
+  MapSummary,
+  MapLeaderboard,
+  MapDiscussions,
+  MapDiscussion,
+} from '@customTypes/Map';
 
 export const get_map_summary = async (map_id: string): Promise<MapSummary> => {
-  const response = await axios.get(url(`maps/${map_id}/summary`))
+  const response = await axios.get(url(`maps/${map_id}/summary`));
   return response.data.data;
 };
 
-export const get_map_leaderboard = async (map_id: string, page: string): Promise<MapLeaderboard | undefined> => {
-  const response = await axios.get(url(`maps/${map_id}/leaderboards?page=${page}`));
+export const get_map_leaderboard = async (
+  map_id: string,
+  page: string
+): Promise<MapLeaderboard | undefined> => {
+  const response = await axios.get(
+    url(`maps/${map_id}/leaderboards?page=${page}`)
+  );
   if (!response.data.success) {
     return undefined;
   }
@@ -25,7 +35,9 @@ export const get_map_leaderboard = async (map_id: string, page: string): Promise
   return data;
 };
 
-export const get_map_discussions = async (map_id: string): Promise<MapDiscussions | undefined> => {
+export const get_map_discussions = async (
+  map_id: string
+): Promise<MapDiscussions | undefined> => {
   const response = await axios.get(url(`maps/${map_id}/discussions`));
   if (!response.data.data.discussions) {
     return undefined;
@@ -33,74 +45,122 @@ export const get_map_discussions = async (map_id: string): Promise<MapDiscussion
   return response.data.data;
 };
 
-export const get_map_discussion = async (map_id: string, discussion_id: number): Promise<MapDiscussion | undefined> => {
-  const response = await axios.get(url(`maps/${map_id}/discussions/${discussion_id}`));
+export const get_map_discussion = async (
+  map_id: string,
+  discussion_id: number
+): Promise<MapDiscussion | undefined> => {
+  const response = await axios.get(
+    url(`maps/${map_id}/discussions/${discussion_id}`)
+  );
   if (!response.data.data.discussion) {
     return undefined;
   }
   return response.data.data;
 };
 
-export const post_map_discussion = async (token: string, map_id: string, content: MapDiscussionContent): Promise<boolean> => {
-  const response = await axios.post(url(`maps/${map_id}/discussions`), {
-    "title": content.title,
-    "content": content.content,
-  }, {
-    headers: {
-      "Authorization": token,
+export const post_map_discussion = async (
+  token: string,
+  map_id: string,
+  content: MapDiscussionContent
+): Promise<boolean> => {
+  const response = await axios.post(
+    url(`maps/${map_id}/discussions`),
+    {
+      title: content.title,
+      content: content.content,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
 
-export const post_map_discussion_comment = async (token: string, map_id: string, discussion_id: number, comment: string): Promise<boolean> => {
-  const response = await axios.post(url(`maps/${map_id}/discussions/${discussion_id}`), {
-    "comment": comment,
-  }, {
-    headers: {
-      "Authorization": token,
+export const post_map_discussion_comment = async (
+  token: string,
+  map_id: string,
+  discussion_id: number,
+  comment: string
+): Promise<boolean> => {
+  const response = await axios.post(
+    url(`maps/${map_id}/discussions/${discussion_id}`),
+    {
+      comment: comment,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
 
-export const delete_map_discussion = async (token: string, map_id: string, discussion_id: number): Promise<boolean> => {
-  const response = await axios.delete(url(`maps/${map_id}/discussions/${discussion_id}`), {
-    headers: {
-      "Authorization": token,
+export const delete_map_discussion = async (
+  token: string,
+  map_id: string,
+  discussion_id: number
+): Promise<boolean> => {
+  const response = await axios.delete(
+    url(`maps/${map_id}/discussions/${discussion_id}`),
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
 
-export const post_record = async (token: string, run: UploadRunContent, map_id: number): Promise<[boolean, string]> => {
+export const post_record = async (
+  token: string,
+  run: UploadRunContent,
+  map_id: number
+): Promise<[boolean, string]> => {
   if (run.partner_demo) {
-    const response = await axios.postForm(url(`maps/${map_id}/record`), {
-      "host_demo": run.host_demo,
-      "partner_demo": run.partner_demo,
-    }, {
-      headers: {
-        "Authorization": token,
+    const response = await axios.postForm(
+      url(`maps/${map_id}/record`),
+      {
+        host_demo: run.host_demo,
+        partner_demo: run.partner_demo,
+      },
+      {
+        headers: {
+          Authorization: token,
+        },
       }
-    });
+    );
     return [response.data.success, response.data.message];
   } else {
-    const response = await axios.postForm(url(`maps/${map_id}/record`), {
-      "host_demo": run.host_demo,
-    }, {
-      headers: {
-        "Authorization": token,
+    const response = await axios.postForm(
+      url(`maps/${map_id}/record`),
+      {
+        host_demo: run.host_demo,
+      },
+      {
+        headers: {
+          Authorization: token,
+        },
       }
-    });
+    );
     return [response.data.success, response.data.message];
   }
-}
+};
 
-export const delete_map_record = async (token: string, map_id: number, record_id: number): Promise<boolean> => {
-  const response = await axios.delete(url(`maps/${map_id}/record/${record_id}`), {
-    headers: {
-      "Authorization": token,
+export const delete_map_record = async (
+  token: string,
+  map_id: number,
+  record_id: number
+): Promise<boolean> => {
+  const response = await axios.delete(
+    url(`maps/${map_id}/record/${record_id}`),
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
diff --git a/frontend/src/api/Mod.ts b/frontend/src/api/Mod.ts
index 1511f8b..69e76c5 100644
--- a/frontend/src/api/Mod.ts
+++ b/frontend/src/api/Mod.ts
@@ -1,58 +1,86 @@
-import axios from "axios";
-import { url } from "@api/Api";
-import { ModMenuContent } from "@customTypes/Content";
+import axios from 'axios';
+import { url } from '@api/Api';
+import { ModMenuContent } from '@customTypes/Content';
 
-export const put_map_image = async (token: string, map_id: string, image: string): Promise<boolean> => {
-  const response = await axios.put(url(`maps/${map_id}/image`), {
-    "image": image,
-  }, {
-    headers: {
-      "Authorization": token,
+export const put_map_image = async (
+  token: string,
+  map_id: string,
+  image: string
+): Promise<boolean> => {
+  const response = await axios.put(
+    url(`maps/${map_id}/image`),
+    {
+      image: image,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
 
-export const post_map_summary = async (token: string, map_id: string, content: ModMenuContent): Promise<boolean> => {
-  const response = await axios.post(url(`maps/${map_id}/summary`), {
-    "category_id": content.category_id,
-    "user_name": content.name,
-    "score_count": content.score,
-    "record_date": content.date,
-    "showcase": content.showcase,
-    "description": content.description,
-  }, {
-    headers: {
-      "Authorization": token,
+export const post_map_summary = async (
+  token: string,
+  map_id: string,
+  content: ModMenuContent
+): Promise<boolean> => {
+  const response = await axios.post(
+    url(`maps/${map_id}/summary`),
+    {
+      category_id: content.category_id,
+      user_name: content.name,
+      score_count: content.score,
+      record_date: content.date,
+      showcase: content.showcase,
+      description: content.description,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
 
-export const put_map_summary = async (token: string, map_id: string, content: ModMenuContent): Promise<boolean> => {
-  const response = await axios.put(url(`maps/${map_id}/summary`), {
-    "route_id": content.id,
-    "user_name": content.name,
-    "score_count": content.score,
-    "record_date": content.date,
-    "showcase": content.showcase,
-    "description": content.description,
-  }, {
-    headers: {
-      "Authorization": token,
+export const put_map_summary = async (
+  token: string,
+  map_id: string,
+  content: ModMenuContent
+): Promise<boolean> => {
+  const response = await axios.put(
+    url(`maps/${map_id}/summary`),
+    {
+      route_id: content.id,
+      user_name: content.name,
+      score_count: content.score,
+      record_date: content.date,
+      showcase: content.showcase,
+      description: content.description,
+    },
+    {
+      headers: {
+        Authorization: token,
+      },
     }
-  });
+  );
   return response.data.success;
 };
 
-export const delete_map_summary = async (token: string, map_id: string, route_id: number): Promise<boolean> => {
+export const delete_map_summary = async (
+  token: string,
+  map_id: string,
+  route_id: number
+): Promise<boolean> => {
   const response = await axios.delete(url(`maps/${map_id}/summary`), {
     data: {
-      "route_id": route_id,
+      route_id: route_id,
     },
     headers: {
-      "Authorization": token,
-    }
+      Authorization: token,
+    },
   });
   return response.data.success;
 };
diff --git a/frontend/src/api/Rankings.ts b/frontend/src/api/Rankings.ts
index b8d9bec..9afd999 100644
--- a/frontend/src/api/Rankings.ts
+++ b/frontend/src/api/Rankings.ts
@@ -1,6 +1,6 @@
-import axios from "axios";
-import { url } from "@api/Api";
-import { Ranking, SteamRanking } from "@customTypes/Ranking";
+import axios from 'axios';
+import { url } from '@api/Api';
+import { Ranking, SteamRanking } from '@customTypes/Ranking';
 
 export const get_official_rankings = async (): Promise<Ranking> => {
   const response = await axios.get(url(`rankings/lphub`));
diff --git a/frontend/src/api/User.ts b/frontend/src/api/User.ts
index 004aa22..4ce21e1 100644
--- a/frontend/src/api/User.ts
+++ b/frontend/src/api/User.ts
@@ -1,6 +1,6 @@
-import axios from "axios";
-import { url } from "@api/Api";
-import { UserProfile } from "@customTypes/Profile";
+import axios from 'axios';
+import { url } from '@api/Api';
+import { UserProfile } from '@customTypes/Profile';
 
 export const get_user = async (user_id: string): Promise<UserProfile> => {
   const response = await axios.get(url(`users/${user_id}`));
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 44a653b..925118d 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,31 +1,36 @@
 import React from 'react';
 
-import "@css/Dialog.css"
+import '@css/Dialog.css';
 
 interface ConfirmDialogProps {
-    title: string;
-    subtitle: string;
-    onConfirm: () => void;
-    onCancel: () => void;
-};
+  title: string;
+  subtitle: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
 
-const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ title, subtitle, onConfirm, onCancel }) => {
-    return (
-        <div className='dimmer'>
-            <div className='dialog'>
-                <div className='dialog-element dialog-header'>
-                    <span>{title}</span>
-                </div>
-                <div className='dialog-element dialog-description'>
-                    <span>{subtitle}</span>
-                </div>
-                <div className='dialog-element dialog-btns-container'>
-                    <button onClick={onCancel}>Cancel</button>
-                    <button onClick={onConfirm}>Confirm</button>
-                </div>
-            </div>
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
+  title,
+  subtitle,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <div className="dimmer">
+      <div className="dialog">
+        <div className="dialog-element dialog-header">
+          <span>{title}</span>
+        </div>
+        <div className="dialog-element dialog-description">
+          <span>{subtitle}</span>
+        </div>
+        <div className="dialog-element dialog-btns-container">
+          <button onClick={onCancel}>Cancel</button>
+          <button onClick={onConfirm}>Confirm</button>
         </div>
-    )
+      </div>
+    </div>
+  );
 };
 
 export default ConfirmDialog;
diff --git a/frontend/src/components/Discussions.tsx b/frontend/src/components/Discussions.tsx
index 62a9fc7..994cd8e 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -1,16 +1,16 @@
-import React from "react";
+import React from 'react';
 
 import {
   MapDiscussion,
   MapDiscussions,
   MapDiscussionsDetail,
-} from "@customTypes/Map";
-import { MapDiscussionContent } from "@customTypes/Content";
-import { time_ago } from "@utils/Time";
-import { API } from "@api/Api";
-import "@css/Maps.css";
-import { Link } from "react-router-dom";
-import useConfirm from "@hooks/UseConfirm";
+} from '@customTypes/Map';
+import { MapDiscussionContent } from '@customTypes/Content';
+import { time_ago } from '@utils/Time';
+import { API } from '@api/Api';
+import '@css/Maps.css';
+import { Link } from 'react-router-dom';
+import useConfirm from '@hooks/UseConfirm';
 
 interface DiscussionsProps {
   token?: string;
@@ -32,17 +32,17 @@ const Discussions: React.FC<DiscussionsProps> = ({
   const [discussionThread, setDiscussionThread] = React.useState<
     MapDiscussion | undefined
   >(undefined);
-  const [discussionSearch, setDiscussionSearch] = React.useState<string>("");
+  const [discussionSearch, setDiscussionSearch] = React.useState<string>('');
 
   const [createDiscussion, setCreateDiscussion] =
     React.useState<boolean>(false);
   const [createDiscussionContent, setCreateDiscussionContent] =
     React.useState<MapDiscussionContent>({
-      title: "",
-      content: "",
+      title: '',
+      content: '',
     });
   const [createDiscussionCommentContent, setCreateDiscussionCommentContent] =
-    React.useState<string>("");
+    React.useState<string>('');
 
   const _open_map_discussion = async (discussion_id: number) => {
     const mapDiscussion = await API.get_map_discussion(mapID, discussion_id);
@@ -72,7 +72,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
   const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
     if (
       await confirm(
-        "Delete Map Discussion",
+        'Delete Map Discussion',
         `Are you sure you want to remove post: ${discussion.title}?`
       )
     ) {
@@ -90,8 +90,8 @@ const Discussions: React.FC<DiscussionsProps> = ({
         <input
           type="text"
           value={discussionSearch}
-          placeholder={"Search for posts..."}
-          onChange={(e) => setDiscussionSearch(e.target.value)}
+          placeholder={'Search for posts...'}
+          onChange={e => setDiscussionSearch(e.target.value)}
         />
         <div>
           <button onClick={() => setCreateDiscussion(true)}>New Post</button>
@@ -104,11 +104,11 @@ const Discussions: React.FC<DiscussionsProps> = ({
           <div id="discussion-create">
             <span>Create Post</span>
             <button onClick={() => setCreateDiscussion(false)}>X</button>
-            <div style={{ gridColumn: "1 / span 2" }}>
+            <div style={{ gridColumn: '1 / span 2' }}>
               <input
                 id="discussion-create-title"
                 placeholder="Title..."
-                onChange={(e) =>
+                onChange={e =>
                   setCreateDiscussionContent({
                     ...createDiscussionContent,
                     title: e.target.value,
@@ -118,7 +118,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
               <input
                 id="discussion-create-content"
                 placeholder="Enter the content..."
-                onChange={(e) =>
+                onChange={e =>
                   setCreateDiscussionContent({
                     ...createDiscussionContent,
                     content: e.target.value,
@@ -126,7 +126,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                 }
               />
             </div>
-            <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
+            <div style={{ placeItems: 'end', gridColumn: '1 / span 2' }}>
               <button
                 id="discussion-create-button"
                 onClick={() => _create_map_discussion()}
@@ -157,8 +157,8 @@ const Discussions: React.FC<DiscussionsProps> = ({
                   {time_ago(
                     new Date(
                       discussionThread.discussion.created_at
-                        .replace("T", " ")
-                        .replace("Z", "")
+                        .replace('T', ' ')
+                        .replace('Z', '')
                     )
                   )}
                 </span>
@@ -170,7 +170,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                       (a, b) =>
                         new Date(a.date).getTime() - new Date(b.date).getTime()
                     )
-                    .map((e) => (
+                    .map(e => (
                       <>
                         <Link to={`/users/${e.user.steam_id}`}>
                           <img src={e.user.avatar_link} alt="" />
@@ -180,7 +180,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                           <span>
                             {time_ago(
                               new Date(
-                                e.date.replace("T", " ").replace("Z", "")
+                                e.date.replace('T', ' ').replace('Z', '')
                               )
                             )}
                           </span>
@@ -188,29 +188,29 @@ const Discussions: React.FC<DiscussionsProps> = ({
                         </div>
                       </>
                     ))
-                : ""}
+                : ''}
             </div>
             <div id="discussion-send">
               <input
                 type="text"
                 value={createDiscussionCommentContent}
-                placeholder={"Message"}
-                onKeyDown={(e) =>
-                  e.key === "Enter" &&
+                placeholder={'Message'}
+                onKeyDown={e =>
+                  e.key === 'Enter' &&
                   _create_map_discussion_comment(discussionThread.discussion.id)
                 }
-                onChange={(e) =>
+                onChange={e =>
                   setCreateDiscussionCommentContent(e.target.value)
                 }
               />
               <div>
                 <button
                   onClick={() => {
-                    if (createDiscussionCommentContent !== "") {
+                    if (createDiscussionCommentContent !== '') {
                       _create_map_discussion_comment(
                         discussionThread.discussion.id
                       );
-                      setCreateDiscussionCommentContent("");
+                      setCreateDiscussionCommentContent('');
                     }
                   }}
                 >
@@ -222,7 +222,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
         ) : data ? (
           <>
             {data.discussions
-              .filter((f) => f.title.includes(discussionSearch))
+              .filter(f => f.title.includes(discussionSearch))
               .sort(
                 (a, b) =>
                   new Date(b.updated_at).getTime() -
@@ -234,7 +234,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
                     <span>{e.title}</span>
                     {isModerator ? (
                       <button
-                        onClick={(m) => {
+                        onClick={m => {
                           m.stopPropagation();
                           _delete_map_discussion(e);
                         }}
@@ -248,10 +248,10 @@ const Discussions: React.FC<DiscussionsProps> = ({
                       <b>{e.creator.user_name}:</b> {e.content}
                     </span>
                     <span>
-                      Last Updated:{" "}
+                      Last Updated:{' '}
                       {time_ago(
                         new Date(
-                          e.updated_at.replace("T", " ").replace("Z", "")
+                          e.updated_at.replace('T', ' ').replace('Z', '')
                         )
                       )}
                     </span>
@@ -260,7 +260,7 @@ const Discussions: React.FC<DiscussionsProps> = ({
               ))}
           </>
         ) : (
-          <span style={{ textAlign: "center", display: "block" }}>
+          <span style={{ textAlign: 'center', display: 'block' }}>
             No Discussions...
           </span>
         )
diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index d8879ef..b13be48 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -1,24 +1,31 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
 import { Game, GameCategoryPortals } from '@customTypes/Game';
-import "@css/Games.css"
+import '@css/Games.css';
 
 interface GameCategoryProps {
-    game: Game;
-    cat: GameCategoryPortals;
+  game: Game;
+  cat: GameCategoryPortals;
 }
 
-const GameCategory: React.FC<GameCategoryProps> = ({cat, game}) => {
-    return (
-        <Link className="games-page-item-body-item" to={"/games/" + game.id + "?cat=" + cat.category.id}>
-        <div>
-              <span className='games-page-item-body-item-title'>{cat.category.name}</span>
-              <br />
-              <span className='games-page-item-body-item-num'>{cat.portal_count}</span>
-        </div>
-        </Link>
-    )
-}
+const GameCategory: React.FC<GameCategoryProps> = ({ cat, game }) => {
+  return (
+    <Link
+      className="games-page-item-body-item"
+      to={'/games/' + game.id + '?cat=' + cat.category.id}
+    >
+      <div>
+        <span className="games-page-item-body-item-title">
+          {cat.category.name}
+        </span>
+        <br />
+        <span className="games-page-item-body-item-num">
+          {cat.portal_count}
+        </span>
+      </div>
+    </Link>
+  );
+};
 
 export default GameCategory;
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index 3bd2842..b58bbdd 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
 import { Game, GameCategoryPortals } from '@customTypes/Game';
-import "@css/Games.css"
+import '@css/Games.css';
 
 import GameCategory from '@components/GameCategory';
 
@@ -18,17 +18,26 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
   }, [game.category_portals]);
 
   return (
-    <Link to={"/games/" + game.id}><div className='games-page-item'>
-      <div className='games-page-item-header'>
-        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
-        <span><b>{game.name}</b></span>
+    <Link to={'/games/' + game.id}>
+      <div className="games-page-item">
+        <div className="games-page-item-header">
+          <div
+            style={{ backgroundImage: `url(${game.image})` }}
+            className="games-page-item-header-img"
+          ></div>
+          <span>
+            <b>{game.name}</b>
+          </span>
+        </div>
+        <div id={game.id as any as string} className="games-page-item-body">
+          {catInfo.map((cat, index) => {
+            return (
+              <GameCategory cat={cat} game={game} key={index}></GameCategory>
+            );
+          })}
+        </div>
       </div>
-      <div id={game.id as any as string} className='games-page-item-body'>
-        {catInfo.map((cat, index) => {
-          return <GameCategory cat={cat} game={game} key={index}></GameCategory>
-        })}
-      </div>
-    </div></Link>
+    </Link>
   );
 };
 
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index 05f01d0..fb72f2b 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 
-import { DownloadIcon, ThreedotIcon } from "@images/Images";
-import { MapLeaderboard } from "@customTypes/Map";
-import { ticks_to_time, time_ago } from "@utils/Time";
-import { API } from "@api/Api";
-import useMessage from "@hooks/UseMessage";
-import "@css/Maps.css";
+import { DownloadIcon, ThreedotIcon } from '@images/Images';
+import { MapLeaderboard } from '@customTypes/Map';
+import { ticks_to_time, time_ago } from '@utils/Time';
+import { API } from '@api/Api';
+import useMessage from '@hooks/UseMessage';
+import '@css/Maps.css';
 
 interface LeaderboardsProps {
   mapID: string;
@@ -35,7 +35,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
   if (!data) {
     return (
       <section id="section6" className="summary2">
-        <h1 style={{ textAlign: "center" }}>
+        <h1 style={{ textAlign: 'center' }}>
           Map is not available for competitive boards.
         </h1>
       </section>
@@ -45,7 +45,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
   if (data.records.length === 0) {
     return (
       <section id="section6" className="summary2">
-        <h1 style={{ textAlign: "center" }}>No records found.</h1>
+        <h1 style={{ textAlign: 'center' }}>No records found.</h1>
       </section>
     );
   }
@@ -58,8 +58,8 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
           id="leaderboard-top"
           style={
             data.map.is_coop
-              ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" }
-              : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }
+              ? { gridTemplateColumns: '7.5% 40% 7.5% 15% 15% 15%' }
+              : { gridTemplateColumns: '7.5% 30% 10% 20% 17.5% 15%' }
           }
         >
           <span>Place</span>
@@ -82,13 +82,13 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                 onClick={() =>
                   pageNumber === 1
                     ? null
-                    : setPageNumber((prevPageNumber) => prevPageNumber - 1)
+                    : setPageNumber(prevPageNumber => prevPageNumber - 1)
                 }
               >
                 <i
                   className="triangle"
-                  style={{ position: "relative", left: "-5px" }}
-                ></i>{" "}
+                  style={{ position: 'relative', left: '-5px' }}
+                ></i>{' '}
               </button>
               <span>
                 {data.pagination.current_page}/{data.pagination.total_pages}
@@ -97,17 +97,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                 onClick={() =>
                   pageNumber === data.pagination.total_pages
                     ? null
-                    : setPageNumber((prevPageNumber) => prevPageNumber + 1)
+                    : setPageNumber(prevPageNumber => prevPageNumber + 1)
                 }
               >
                 <i
                   className="triangle"
                   style={{
-                    position: "relative",
-                    left: "5px",
-                    transform: "rotate(180deg)",
+                    position: 'relative',
+                    left: '5px',
+                    transform: 'rotate(180deg)',
                   }}
-                ></i>{" "}
+                ></i>{' '}
               </button>
             </div>
           </div>
@@ -120,33 +120,33 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
               key={index}
               style={
                 data.map.is_coop
-                  ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" }
-                  : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }
+                  ? { gridTemplateColumns: '3% 4.5% 40% 4% 3.5% 15% 15% 14.5%' }
+                  : { gridTemplateColumns: '3% 4.5% 30% 4% 6% 20% 17% 15%' }
               }
             >
               <span>{r.placement}</span>
               <span> </span>
-              {r.kind === "multiplayer" ? (
+              {r.kind === 'multiplayer' ? (
                 <div>
                   <Link to={`/users/${r.host.steam_id}`}>
                     <span>
-                      <img src={r.host.avatar_link} alt="" /> &nbsp;{" "}
+                      <img src={r.host.avatar_link} alt="" /> &nbsp;{' '}
                       {r.host.user_name}
                     </span>
                   </Link>
                   <Link to={`/users/${r.partner.steam_id}`}>
                     <span>
-                      <img src={r.partner.avatar_link} alt="" /> &nbsp;{" "}
+                      <img src={r.partner.avatar_link} alt="" /> &nbsp;{' '}
                       {r.partner.user_name}
                     </span>
                   </Link>
                 </div>
               ) : (
-                r.kind === "singleplayer" && (
+                r.kind === 'singleplayer' && (
                   <div>
                     <Link to={`/users/${r.user.steam_id}`}>
                       <span>
-                        <img src={r.user.avatar_link} alt="" /> &nbsp;{" "}
+                        <img src={r.user.avatar_link} alt="" /> &nbsp;{' '}
                         {r.user.user_name}
                       </span>
                     </Link>
@@ -158,25 +158,25 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
               <span> </span>
               <span
                 className="hover-popup"
-                popup-text={r.score_time + " ticks"}
+                popup-text={r.score_time + ' ticks'}
               >
                 {ticks_to_time(r.score_time)}
               </span>
               <span
                 className="hover-popup"
-                popup-text={r.record_date.replace("T", " ").split(".")[0]}
+                popup-text={r.record_date.replace('T', ' ').split('.')[0]}
               >
                 {time_ago(
-                  new Date(r.record_date.replace("T", " ").replace("Z", ""))
+                  new Date(r.record_date.replace('T', ' ').replace('Z', ''))
                 )}
               </span>
 
-              {r.kind === "multiplayer" ? (
+              {r.kind === 'multiplayer' ? (
                 <span>
                   <button
                     onClick={() => {
                       message(
-                        "Demo Information",
+                        'Demo Information',
                         `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`
                       );
                     }}
@@ -193,7 +193,7 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                       alt="download"
                       style={{
                         filter:
-                          "hue-rotate(160deg) contrast(60%) saturate(1000%)",
+                          'hue-rotate(160deg) contrast(60%) saturate(1000%)',
                       }}
                     />
                   </button>
@@ -207,17 +207,17 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
                       alt="download"
                       style={{
                         filter:
-                          "hue-rotate(300deg) contrast(60%) saturate(1000%)",
+                          'hue-rotate(300deg) contrast(60%) saturate(1000%)',
                       }}
                     />
                   </button>
                 </span>
               ) : (
-                r.kind === "singleplayer" && (
+                r.kind === 'singleplayer' && (
                   <span>
                     <button
                       onClick={() => {
-                        message("Demo Information", `Demo ID: ${r.demo_id}`);
+                        message('Demo Information', `Demo ID: ${r.demo_id}`);
                       }}
                     >
                       <img src={ThreedotIcon} alt="demo_id" />
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index f1628b2..093e406 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -4,77 +4,78 @@ import { Link, useNavigate } from 'react-router-dom';
 import { ExitIcon, UserIcon, LoginIcon } from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
 import { API } from '@api/Api';
-import "@css/Login.css";
+import '@css/Login.css';
 
 interface LoginProps {
   setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
   profile?: UserProfile;
   setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
-};
+}
 
 const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
-
   const navigate = useNavigate();
 
   const _login = () => {
-    window.location.href = "/api/v1/login";
+    window.location.href = '/api/v1/login';
   };
 
   const _logout = () => {
     setProfile(undefined);
     setToken(undefined);
     API.delete_token();
-    navigate("/");
+    navigate('/');
   };
 
   return (
     <>
-      {profile
-        ?
-        (
-          <>
-            {profile.profile ?
-              (
-                <>
-                  <Link to="/profile" tabIndex={-1} className='login'>
-                    <button className='sidebar-button'>
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
-                      <span>{profile.user_name}</span>
-                    </button>
-                    <button className='logout-button' onClick={_logout}>
-                      <img src={ExitIcon} alt="" /><span />
-                    </button>
-                  </Link>
-                </>
-              )
-              :
-              (
-                <>
-                  <Link to="/" tabIndex={-1} className='login'>
-                    <button className='sidebar-button'>
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
-                      <span>Loading Profile...</span>
-                    </button>
-                    <button disabled className='logout-button' onClick={_logout}>
-                      <img src={ExitIcon} alt="" /><span />
-                    </button>
-                  </Link>
-                </>
-              )
-            }
-          </>
-        )
-        :
-        (
-          <Link to="/api/v1/login" tabIndex={-1} className='login' >
-            <button className='sidebar-button' onClick={_login}>
-              <img className="avatar-img" src={UserIcon} alt="" />
-              <span>
-                <img src={LoginIcon} alt="Sign in through Steam" />
-              </span>
-            </button>
-          </Link>
-        )}
+      {profile ? (
+        <>
+          {profile.profile ? (
+            <>
+              <Link to="/profile" tabIndex={-1} className="login">
+                <button className="sidebar-button">
+                  <img
+                    className="avatar-img"
+                    src={profile.avatar_link}
+                    alt=""
+                  />
+                  <span>{profile.user_name}</span>
+                </button>
+                <button className="logout-button" onClick={_logout}>
+                  <img src={ExitIcon} alt="" />
+                  <span />
+                </button>
+              </Link>
+            </>
+          ) : (
+            <>
+              <Link to="/" tabIndex={-1} className="login">
+                <button className="sidebar-button">
+                  <img
+                    className="avatar-img"
+                    src={profile.avatar_link}
+                    alt=""
+                  />
+                  <span>Loading Profile...</span>
+                </button>
+                <button disabled className="logout-button" onClick={_logout}>
+                  <img src={ExitIcon} alt="" />
+                  <span />
+                </button>
+              </Link>
+            </>
+          )}
+        </>
+      ) : (
+        <Link to="/api/v1/login" tabIndex={-1} className="login">
+          <button className="sidebar-button" onClick={_login}>
+            <img className="avatar-img" src={UserIcon} alt="" />
+            <span>
+              <img src={LoginIcon} alt="Sign in through Steam" />
+            </span>
+          </button>
+        </Link>
+      )}
     </>
   );
 };
diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx
index 0f494ad..f1dee5b 100644
--- a/frontend/src/components/MapEntry.tsx
+++ b/frontend/src/components/MapEntry.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
 
 const MapEntry: React.FC = () => {
-    return (
-        <div>
-
-        </div>
-    )
-}
+  return <div></div>;
+};
 
 export default MapEntry;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
index 5c85189..b739ebc 100644
--- a/frontend/src/components/MessageDialog.tsx
+++ b/frontend/src/components/MessageDialog.tsx
@@ -1,29 +1,33 @@
 import React from 'react';
 
-import "@css/Dialog.css"
+import '@css/Dialog.css';
 
 interface MessageDialogProps {
-    title: string;
-    subtitle: string;
-    onClose: () => void;
-};
+  title: string;
+  subtitle: string;
+  onClose: () => void;
+}
 
-const MessageDialog: React.FC<MessageDialogProps> = ({ title, subtitle, onClose }) => {
-    return (
-        <div className='dimmer'>
-            <div className='dialog'>
-                <div className='dialog-element dialog-header'>
-                    <span>{title}</span>
-                </div>
-                <div className='dialog-element dialog-description'>
-                    <span>{subtitle}</span>
-                </div>
-                <div className='dialog-element dialog-btns-container'>
-                    <button onClick={onClose}>Close</button>
-                </div>
-            </div>
+const MessageDialog: React.FC<MessageDialogProps> = ({
+  title,
+  subtitle,
+  onClose,
+}) => {
+  return (
+    <div className="dimmer">
+      <div className="dialog">
+        <div className="dialog-element dialog-header">
+          <span>{title}</span>
         </div>
-    )
-}
+        <div className="dialog-element dialog-description">
+          <span>{subtitle}</span>
+        </div>
+        <div className="dialog-element dialog-btns-container">
+          <button onClick={onClose}>Close</button>
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default MessageDialog;
diff --git a/frontend/src/components/MessageDialogLoad.tsx b/frontend/src/components/MessageDialogLoad.tsx
index 966e064..acea27d 100644
--- a/frontend/src/components/MessageDialogLoad.tsx
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -1,29 +1,31 @@
 import React from 'react';
 
-import "@css/Dialog.css"
+import '@css/Dialog.css';
 
 interface MessageDialogLoadProps {
-    title: string;    
-        onClose: () => void;
-};
+  title: string;
+  onClose: () => void;
+}
 
-const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({ title, onClose }) => {
-    return (
-        <div className='dimmer'>
-            <div className='dialog'>
-                <div className='dialog-element dialog-header'>
-                    <span>{title}</span>
-                </div>
-                <div className='dialog-element dialog-description'>
-                                        <div style={{display: "flex", justifyContent: "center"}}>
-                        <span className="loader"></span>
-                                        </div>
-                </div>
-                <div className='dialog-element dialog-btns-container'>
-                </div>
-            </div>
+const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({
+  title,
+  onClose,
+}) => {
+  return (
+    <div className="dimmer">
+      <div className="dialog">
+        <div className="dialog-element dialog-header">
+          <span>{title}</span>
         </div>
-    )
-}
+        <div className="dialog-element dialog-description">
+          <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <span className="loader"></span>
+          </div>
+        </div>
+        <div className="dialog-element dialog-btns-container"></div>
+      </div>
+    </div>
+  );
+};
 
 export default MessageDialogLoad;
diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index f765cd8..140d6a3 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,12 @@
-import React from "react";
-import ReactMarkdown from "react-markdown";
-import { useNavigate } from "react-router-dom";
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { useNavigate } from 'react-router-dom';
 
-import { MapSummary } from "@customTypes/Map";
-import { ModMenuContent } from "@customTypes/Content";
-import { API } from "@api/Api";
-import "@css/ModMenu.css";
-import useConfirm from "@hooks/UseConfirm";
+import { MapSummary } from '@customTypes/Map';
+import { ModMenuContent } from '@customTypes/Content';
+import { API } from '@api/Api';
+import '@css/ModMenu.css';
+import useConfirm from '@hooks/UseConfirm';
 
 interface ModMenuProps {
   token?: string;
@@ -28,26 +28,26 @@ const ModMenu: React.FC<ModMenuProps> = ({
 
   const [routeContent, setRouteContent] = React.useState<ModMenuContent>({
     id: 0,
-    name: "",
+    name: '',
     score: 0,
-    date: "",
-    showcase: "",
-    description: "No description available.",
+    date: '',
+    showcase: '',
+    description: 'No description available.',
     category_id: 1,
   });
 
-  const [image, setImage] = React.useState<string>("");
-  const [md, setMd] = React.useState<string>("");
+  const [image, setImage] = React.useState<string>('');
+  const [md, setMd] = React.useState<string>('');
 
   const navigate = useNavigate();
 
   function compressImage(file: File): Promise<string> {
     const reader = new FileReader();
     reader.readAsDataURL(file);
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       reader.onload = () => {
         const img = new Image();
-        if (typeof reader.result === "string") {
+        if (typeof reader.result === 'string') {
           img.src = reader.result;
           img.onload = () => {
             let { width, height } = img;
@@ -59,10 +59,10 @@ const ModMenu: React.FC<ModMenuProps> = ({
               width *= 320 / height;
               height = 320;
             }
-            const canvas = document.createElement("canvas");
+            const canvas = document.createElement('canvas');
             canvas.width = width;
             canvas.height = height;
-            canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
+            canvas.getContext('2d')!.drawImage(img, 0, 0, width, height);
             resolve(canvas.toDataURL(file.type, 0.6));
           };
         }
@@ -73,8 +73,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _edit_map_summary_image = async () => {
     if (
       await confirm(
-        "Edit Map Summary Image",
-        "Are you sure you want to submit this to the database?"
+        'Edit Map Summary Image',
+        'Are you sure you want to submit this to the database?'
       )
     ) {
       if (token) {
@@ -82,7 +82,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.");
+          alert('Error. Check logs.');
         }
       }
     }
@@ -91,17 +91,17 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _edit_map_summary_route = async () => {
     if (
       await confirm(
-        "Edit Map Summary Route",
-        "Are you sure you want to submit this to the database?"
+        'Edit Map Summary Route',
+        'Are you sure you want to submit this to the database?'
       )
     ) {
       if (token) {
-        routeContent.date += "T00:00:00Z";
+        routeContent.date += 'T00:00:00Z';
         const success = await API.put_map_summary(token, mapID, routeContent);
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.");
+          alert('Error. Check logs.');
         }
       }
     }
@@ -110,17 +110,17 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _create_map_summary_route = async () => {
     if (
       await confirm(
-        "Create Map Summary Route",
-        "Are you sure you want to submit this to the database?"
+        'Create Map Summary Route',
+        'Are you sure you want to submit this to the database?'
       )
     ) {
       if (token) {
-        routeContent.date += "T00:00:00Z";
+        routeContent.date += 'T00:00:00Z';
         const success = await API.post_map_summary(token, mapID, routeContent);
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.");
+          alert('Error. Check logs.');
         }
       }
     }
@@ -129,7 +129,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
   const _delete_map_summary_route = async () => {
     if (
       await confirm(
-        "Delete Map Summary Route",
+        'Delete Map Summary Route',
         `Are you sure you want to submit this to the database?\n
       ${data.summary.routes[selectedRun].category.name}\n${data.summary.routes[selectedRun].history.score_count} portals\n${data.summary.routes[selectedRun].history.runner_name}`
       )
@@ -143,7 +143,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
         if (success) {
           navigate(0);
         } else {
-          alert("Error. Check logs.");
+          alert('Error. Check logs.');
         }
       }
     }
@@ -154,14 +154,14 @@ const ModMenu: React.FC<ModMenuProps> = ({
       // add route
       setRouteContent({
         id: 0,
-        name: "",
+        name: '',
         score: 0,
-        date: "",
-        showcase: "",
-        description: "No description available.",
+        date: '',
+        showcase: '',
+        description: 'No description available.',
         category_id: 1,
       });
-      setMd("No description available.");
+      setMd('No description available.');
     }
     if (menu === 2) {
       // edit route
@@ -169,7 +169,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
         id: data.summary.routes[selectedRun].route_id,
         name: data.summary.routes[selectedRun].history.runner_name,
         score: data.summary.routes[selectedRun].history.score_count,
-        date: data.summary.routes[selectedRun].history.date.split("T")[0],
+        date: data.summary.routes[selectedRun].history.date.split('T')[0],
         showcase: data.summary.routes[selectedRun].showcase,
         description: data.summary.routes[selectedRun].description,
         category_id: data.summary.routes[selectedRun].category.id,
@@ -179,20 +179,20 @@ const ModMenu: React.FC<ModMenuProps> = ({
   }, [menu, data.summary.routes, selectedRun]);
 
   React.useEffect(() => {
-    const modview = document.querySelector("div#modview") as HTMLElement;
+    const modview = document.querySelector('div#modview') as HTMLElement;
     if (modview) {
       showButton
-        ? (modview.style.transform = "translateY(-68%)")
-        : (modview.style.transform = "translateY(0%)");
+        ? (modview.style.transform = 'translateY(-68%)')
+        : (modview.style.transform = 'translateY(0%)');
     }
 
     const modview_block = document.querySelector(
-      "#modview_block"
+      '#modview_block'
     ) as HTMLElement;
     if (modview_block) {
       showButton
-        ? (modview_block.style.display = "none")
-        : (modview_block.style.display = "block");
+        ? (modview_block.style.display = 'none')
+        : (modview_block.style.display = 'block');
     }
   }, [showButton]);
 
@@ -240,11 +240,9 @@ const ModMenu: React.FC<ModMenuProps> = ({
                   <input
                     type="file"
                     accept="image/*"
-                    onChange={(e) => {
+                    onChange={e => {
                       if (e.target.files) {
-                        compressImage(e.target.files[0]).then((d) =>
-                          setImage(d)
-                        );
+                        compressImage(e.target.files[0]).then(d => setImage(d));
                       }
                     }}
                   />
@@ -275,7 +273,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="text"
                   value={routeContent.name}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       name: e.target.value,
@@ -288,7 +286,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="number"
                   value={routeContent.score}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       score: parseInt(e.target.value),
@@ -301,7 +299,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="date"
                   value={routeContent.date}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       date: e.target.value,
@@ -314,7 +312,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="text"
                   value={routeContent.showcase}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       showcase: e.target.value,
@@ -324,12 +322,12 @@ const ModMenu: React.FC<ModMenuProps> = ({
               </div>
               <div
                 id="modview-route-description"
-                style={{ height: "180px", gridColumn: "1 / span 5" }}
+                style={{ height: '180px', gridColumn: '1 / span 5' }}
               >
                 <span>Description:</span>
                 <textarea
                   value={routeContent.description}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       description: e.target.value,
@@ -339,7 +337,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 />
               </div>
               <button
-                style={{ gridColumn: "2 / span 3", height: "40px" }}
+                style={{ gridColumn: '2 / span 3', height: '40px' }}
                 onClick={_edit_map_summary_route}
               >
                 Apply
@@ -380,7 +378,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
               <div id="modview-route-category">
                 <span>Category:</span>
                 <select
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       category_id: parseInt(e.target.value),
@@ -393,8 +391,8 @@ const ModMenu: React.FC<ModMenuProps> = ({
                   <option value="2" key="2">
                     No SLA
                   </option>
-                  {data.map.game_name === "Portal 2 - Cooperative" ? (
-                    ""
+                  {data.map.game_name === 'Portal 2 - Cooperative' ? (
+                    ''
                   ) : (
                     <option value="3" key="3">
                       Inbounds SLA
@@ -410,7 +408,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="text"
                   value={routeContent.name}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       name: e.target.value,
@@ -423,7 +421,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="number"
                   value={routeContent.score}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       score: parseInt(e.target.value),
@@ -436,7 +434,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="date"
                   value={routeContent.date}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       date: e.target.value,
@@ -449,7 +447,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 <input
                   type="text"
                   value={routeContent.showcase}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       showcase: e.target.value,
@@ -459,12 +457,12 @@ const ModMenu: React.FC<ModMenuProps> = ({
               </div>
               <div
                 id="modview-route-description"
-                style={{ height: "180px", gridColumn: "1 / span 5" }}
+                style={{ height: '180px', gridColumn: '1 / span 5' }}
               >
                 <span>Description:</span>
                 <textarea
                   value={routeContent.description}
-                  onChange={(e) => {
+                  onChange={e => {
                     setRouteContent({
                       ...routeContent,
                       description: e.target.value,
@@ -474,7 +472,7 @@ const ModMenu: React.FC<ModMenuProps> = ({
                 />
               </div>
               <button
-                style={{ gridColumn: "2 / span 3", height: "40px" }}
+                style={{ gridColumn: '2 / span 3', height: '40px' }}
                 onClick={_create_map_summary_route}
               >
                 Apply
diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index b899965..add36ca 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,46 +1,66 @@
 import React from 'react';
-import { Link } from "react-router-dom";
-import { RankingType, SteamRanking, SteamRankingType } from '@customTypes/Ranking';
+import { Link } from 'react-router-dom';
+import {
+  RankingType,
+  SteamRanking,
+  SteamRankingType,
+} from '@customTypes/Ranking';
 
 enum RankingCategories {
-    rankings_overall,
-    rankings_multiplayer,
-    rankings_singleplayer
+  rankings_overall,
+  rankings_multiplayer,
+  rankings_singleplayer,
 }
 
 interface RankingEntryProps {
-    curRankingData: RankingType | SteamRankingType;
-    currentLeaderboardType: RankingCategories
-};
-
-const RankingEntry: React.FC<RankingEntryProps> = (prop) => {
-    if ("placement" in prop.curRankingData) {
-        return (
-            <div className='leaderboard-entry'>
-                <span>{prop.curRankingData.placement}</span>
-                <div>
-                <Link to={`/users/${prop.curRankingData.user.steam_id}`}>           
-                    <img src={prop.curRankingData.user.avatar_link}></img>
-                    <span>{prop.curRankingData.user.user_name}</span>
-                </Link>
-                </div>
-                <span>{prop.curRankingData.total_score}</span>
-            </div>
-        )
-    } else {
-        return (
-            <div className='leaderboard-entry'>
-                <span>{prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_rank : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_rank : prop.curRankingData.overall_rank}</span>
-                <div>
-                <Link to={`/users/${prop.curRankingData.steam_id}`}>           
-                    <img src={prop.curRankingData.avatar_link}></img>
-                    <span>{prop.curRankingData.user_name}</span>
-                </Link>
-                </div>
-                <span>{prop.currentLeaderboardType == RankingCategories.rankings_singleplayer ? prop.curRankingData.sp_score : prop.currentLeaderboardType == RankingCategories.rankings_multiplayer ? prop.curRankingData.mp_score : prop.curRankingData.overall_score}</span>
-            </div>
-        )
-    }
+  curRankingData: RankingType | SteamRankingType;
+  currentLeaderboardType: RankingCategories;
 }
 
+const RankingEntry: React.FC<RankingEntryProps> = prop => {
+  if ('placement' in prop.curRankingData) {
+    return (
+      <div className="leaderboard-entry">
+        <span>{prop.curRankingData.placement}</span>
+        <div>
+          <Link to={`/users/${prop.curRankingData.user.steam_id}`}>
+            <img src={prop.curRankingData.user.avatar_link}></img>
+            <span>{prop.curRankingData.user.user_name}</span>
+          </Link>
+        </div>
+        <span>{prop.curRankingData.total_score}</span>
+      </div>
+    );
+  } else {
+    return (
+      <div className="leaderboard-entry">
+        <span>
+          {prop.currentLeaderboardType ==
+          RankingCategories.rankings_singleplayer
+            ? prop.curRankingData.sp_rank
+            : prop.currentLeaderboardType ==
+                RankingCategories.rankings_multiplayer
+              ? prop.curRankingData.mp_rank
+              : prop.curRankingData.overall_rank}
+        </span>
+        <div>
+          <Link to={`/users/${prop.curRankingData.steam_id}`}>
+            <img src={prop.curRankingData.avatar_link}></img>
+            <span>{prop.curRankingData.user_name}</span>
+          </Link>
+        </div>
+        <span>
+          {prop.currentLeaderboardType ==
+          RankingCategories.rankings_singleplayer
+            ? prop.curRankingData.sp_score
+            : prop.currentLeaderboardType ==
+                RankingCategories.rankings_multiplayer
+              ? prop.curRankingData.mp_score
+              : prop.curRankingData.overall_score}
+        </span>
+      </div>
+    );
+  }
+};
+
 export default RankingEntry;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 67f7f3d..71b79be 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,23 +1,38 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
-import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images';
+import {
+  BookIcon,
+  FlagIcon,
+  HelpIcon,
+  HomeIcon,
+  LogoIcon,
+  PortalIcon,
+  SearchIcon,
+  UploadIcon,
+} from '@images/Images';
 import Login from '@components/Login';
 import { UserProfile } from '@customTypes/Profile';
 import { Search } from '@customTypes/Search';
 import { API } from '@api/Api';
-import "@css/Sidebar.css";
+import '@css/Sidebar.css';
 
 interface SidebarProps {
   setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
   profile?: UserProfile;
   setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
   onUploadRun: () => void;
-};
-
-const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUploadRun }) => {
+}
 
-  const [searchData, setSearchData] = React.useState<Search | undefined>(undefined);
+const Sidebar: React.FC<SidebarProps> = ({
+  setToken,
+  profile,
+  setProfile,
+  onUploadRun,
+}) => {
+  const [searchData, setSearchData] = React.useState<Search | undefined>(
+    undefined
+  );
   const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
   const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(true);
 
@@ -25,71 +40,86 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
   const path = location.pathname;
 
   const handle_sidebar_click = (clicked_sidebar_idx: number) => {
-    const btn = document.querySelectorAll("button.sidebar-button");
-    if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() }
+    const btn = document.querySelectorAll('button.sidebar-button');
+    if (isSidebarOpen) {
+      setSidebarOpen(false);
+      _handle_sidebar_hide();
+    }
     // clusterfuck
     btn.forEach((e, i) => {
-      btn[i].classList.remove("sidebar-button-selected")
-      btn[i].classList.add("sidebar-button-deselected")
-    })
-    btn[clicked_sidebar_idx].classList.add("sidebar-button-selected")
-    btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected")
+      btn[i].classList.remove('sidebar-button-selected');
+      btn[i].classList.add('sidebar-button-deselected');
+    });
+    btn[clicked_sidebar_idx].classList.add('sidebar-button-selected');
+    btn[clicked_sidebar_idx].classList.remove('sidebar-button-deselected');
   };
 
   const _handle_sidebar_hide = () => {
-    var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>
-    const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>
-    const side = document.querySelector("#sidebar-list") as HTMLElement;
-    const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
-    const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement;
-    const uploadRunSpan = document.querySelector("#upload-run>span") as HTMLInputElement;
+    var btn = document.querySelectorAll(
+      'button.sidebar-button'
+    ) as NodeListOf<HTMLElement>;
+    const span = document.querySelectorAll(
+      'button.sidebar-button>span'
+    ) as NodeListOf<HTMLElement>;
+    const side = document.querySelector('#sidebar-list') as HTMLElement;
+    const searchbar = document.querySelector('#searchbar') as HTMLInputElement;
+    const uploadRunBtn = document.querySelector(
+      '#upload-run'
+    ) as HTMLInputElement;
+    const uploadRunSpan = document.querySelector(
+      '#upload-run>span'
+    ) as HTMLInputElement;
 
     if (isSidebarOpen) {
       if (profile) {
-        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
-        login.style.opacity = "1"
-        uploadRunBtn.style.width = "310px"
-        uploadRunBtn.style.padding = "0.4em 0 0 11px"
-        uploadRunSpan.style.opacity = "0"
+        const login = document.querySelectorAll(
+          '.login>button'
+        )[1] as HTMLElement;
+        login.style.opacity = '1';
+        uploadRunBtn.style.width = '310px';
+        uploadRunBtn.style.padding = '0.4em 0 0 11px';
+        uploadRunSpan.style.opacity = '0';
         setTimeout(() => {
-          uploadRunSpan.style.opacity = "1"
-        }, 100)
+          uploadRunSpan.style.opacity = '1';
+        }, 100);
       }
       setSidebarOpen(false);
-      side.style.width = "320px"
+      side.style.width = '320px';
       btn.forEach((e, i) => {
-        e.style.width = "310px"
-        e.style.padding = "0.4em 0 0 11px"
+        e.style.width = '310px';
+        e.style.padding = '0.4em 0 0 11px';
         setTimeout(() => {
-          span[i].style.opacity = "1"
-        }, 100)
+          span[i].style.opacity = '1';
+        }, 100);
       });
-      side.style.zIndex = "2"
+      side.style.zIndex = '2';
     } else {
       if (profile) {
-        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
-        login.style.opacity = "0"
-        uploadRunBtn.style.width = "40px"
-        uploadRunBtn.style.padding = "0.4em 0 0 5px"
-        uploadRunSpan.style.opacity = "0"
+        const login = document.querySelectorAll(
+          '.login>button'
+        )[1] as HTMLElement;
+        login.style.opacity = '0';
+        uploadRunBtn.style.width = '40px';
+        uploadRunBtn.style.padding = '0.4em 0 0 5px';
+        uploadRunSpan.style.opacity = '0';
       }
       setSidebarOpen(true);
-      side.style.width = "40px";
+      side.style.width = '40px';
       searchbar.focus();
       btn.forEach((e, i) => {
-        e.style.width = "40px"
-        e.style.padding = "0.4em 0 0 5px"
-        span[i].style.opacity = "0"
-      })
+        e.style.width = '40px';
+        e.style.padding = '0.4em 0 0 5px';
+        span[i].style.opacity = '0';
+      });
       setTimeout(() => {
-        side.style.zIndex = "0"
+        side.style.zIndex = '0';
       }, 300);
     }
   };
 
   const _handle_sidebar_lock = () => {
     if (!isSidebarLocked) {
-      _handle_sidebar_hide()
+      _handle_sidebar_hide();
       setIsSidebarLocked(true);
       setTimeout(() => setIsSidebarLocked(false), 300);
     }
@@ -101,98 +131,148 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
   };
 
   React.useEffect(() => {
-    if (path === "/") { handle_sidebar_click(1) }
-    else if (path.includes("games")) { handle_sidebar_click(2) }
-    else if (path.includes("rankings")) { handle_sidebar_click(3) }
+    if (path === '/') {
+      handle_sidebar_click(1);
+    } else if (path.includes('games')) {
+      handle_sidebar_click(2);
+    } else if (path.includes('rankings')) {
+      handle_sidebar_click(3);
+    }
     // else if (path.includes("news")) { handle_sidebar_click(4) }
     // else if (path.includes("scorelog")) { handle_sidebar_click(5) }
-    else if (path.includes("profile")) { handle_sidebar_click(4) }
-    else if (path.includes("rules")) { handle_sidebar_click(5) }
-    else if (path.includes("about")) { handle_sidebar_click(6) }
+    else if (path.includes('profile')) {
+      handle_sidebar_click(4);
+    } else if (path.includes('rules')) {
+      handle_sidebar_click(5);
+    } else if (path.includes('about')) {
+      handle_sidebar_click(6);
+    }
   }, [path]);
 
   return (
-    <div id='sidebar'>
+    <div id="sidebar">
       <Link to="/" tabIndex={-1}>
-        <div id='logo'> {/* logo */}
-          <img src={LogoIcon} alt="" height={"80px"} />
-          <div id='logo-text'>
-            <span><b>PORTAL 2</b></span><br />
+        <div id="logo">
+          {' '}
+          {/* logo */}
+          <img src={LogoIcon} alt="" height={'80px'} />
+          <div id="logo-text">
+            <span>
+              <b>PORTAL 2</b>
+            </span>
+            <br />
             <span>Least Portals Hub</span>
           </div>
         </div>
       </Link>
-      <div id='sidebar-list'> {/* List */}
-        <div id='sidebar-toplist'> {/* Top */}
-
-          <button className='sidebar-button' onClick={() => _handle_sidebar_lock()}><img src={SearchIcon} alt="" /><span>Search</span></button>
-
+      <div id="sidebar-list">
+        {' '}
+        {/* List */}
+        <div id="sidebar-toplist">
+          {' '}
+          {/* Top */}
+          <button
+            className="sidebar-button"
+            onClick={() => _handle_sidebar_lock()}
+          >
+            <img src={SearchIcon} alt="" />
+            <span>Search</span>
+          </button>
           <span></span>
-
           <Link to="/" tabIndex={-1}>
-            <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
+            <button className="sidebar-button">
+              <img src={HomeIcon} alt="homepage" />
+              <span>Home&nbsp;Page</span>
+            </button>
           </Link>
-
           <Link to="/games" tabIndex={-1}>
-            <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
+            <button className="sidebar-button">
+              <img src={PortalIcon} alt="games" />
+              <span>Games</span>
+            </button>
           </Link>
-
           <Link to="/rankings" tabIndex={-1}>
-            <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button>
+            <button className="sidebar-button">
+              <img src={FlagIcon} alt="rankings" />
+              <span>Rankings</span>
+            </button>
           </Link>
-
           {/* <Link to="/news" tabIndex={-1}>
             <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
           </Link> */}
-
           {/* <Link to="/scorelog" tabIndex={-1}>
             <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button>
           </Link> */}
         </div>
-        <div id='sidebar-bottomlist'>
+        <div id="sidebar-bottomlist">
           <span></span>
 
-          {
-            profile && profile.profile ?
-              <button id='upload-run' className='submit-run-button' onClick={() => onUploadRun()}><img src={UploadIcon} alt="upload" /><span>Upload&nbsp;Record</span></button>
-              : 
-              <span></span>
-          }
+          {profile && profile.profile ? (
+            <button
+              id="upload-run"
+              className="submit-run-button"
+              onClick={() => onUploadRun()}
+            >
+              <img src={UploadIcon} alt="upload" />
+              <span>Upload&nbsp;Record</span>
+            </button>
+          ) : (
+            <span></span>
+          )}
 
-          <Login setToken={setToken} profile={profile} setProfile={setProfile} />
+          <Login
+            setToken={setToken}
+            profile={profile}
+            setProfile={setProfile}
+          />
 
           <Link to="/rules" tabIndex={-1}>
-            <button className='sidebar-button'><img src={BookIcon} alt="rules" /><span>Leaderboard&nbsp;Rules</span></button>
+            <button className="sidebar-button">
+              <img src={BookIcon} alt="rules" />
+              <span>Leaderboard&nbsp;Rules</span>
+            </button>
           </Link>
 
           <Link to="/about" tabIndex={-1}>
-            <button className='sidebar-button'><img src={HelpIcon} alt="about" /><span>About&nbsp;LPHUB</span></button>
+            <button className="sidebar-button">
+              <img src={HelpIcon} alt="about" />
+              <span>About&nbsp;LPHUB</span>
+            </button>
           </Link>
         </div>
       </div>
       <div>
-        <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={(e) => _handle_search_change(e.target.value)} />
-
-        <div id='search-data'>
+        <input
+          type="text"
+          id="searchbar"
+          placeholder="Search for map or a player..."
+          onChange={e => _handle_search_change(e.target.value)}
+        />
 
+        <div id="search-data">
           {searchData?.maps.map((q, index) => (
-            <Link to={`/maps/${q.id}`} className='search-map' key={index}>
+            <Link to={`/maps/${q.id}`} className="search-map" key={index}>
               <span>{q.game}</span>
               <span>{q.chapter}</span>
               <span>{q.map}</span>
             </Link>
           ))}
-          {searchData?.players.map((q, index) =>
-          (
-            <Link to={
-              profile && q.steam_id === profile.steam_id ? `/profile` :
-                `/users/${q.steam_id}`
-            } className='search-player' key={index}>
-              <img src={q.avatar_link} alt='pfp'></img>
-              <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+          {searchData?.players.map((q, index) => (
+            <Link
+              to={
+                profile && q.steam_id === profile.steam_id
+                  ? `/profile`
+                  : `/users/${q.steam_id}`
+              }
+              className="search-player"
+              key={index}
+            >
+              <img src={q.avatar_link} alt="pfp"></img>
+              <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>
+                {q.user_name}
+              </span>
             </Link>
           ))}
-
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 4bcaa6a..1ba166a 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -2,49 +2,67 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 
 import { MapSummary } from '@customTypes/Map';
-import "@css/Maps.css"
+import '@css/Maps.css';
 
 interface SummaryProps {
-  selectedRun: number
+  selectedRun: number;
   setSelectedRun: (x: number) => void;
   data: MapSummary;
 }
 
-const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data }) => {
-
+const Summary: React.FC<SummaryProps> = ({
+  selectedRun,
+  setSelectedRun,
+  data,
+}) => {
   const [selectedCategory, setSelectedCategory] = React.useState<number>(1);
   const [historySelected, setHistorySelected] = React.useState<boolean>(false);
 
   function _select_run(idx: number, category_id: number) {
-    let r = document.querySelectorAll("button.record");
-    r.forEach(e => (e as HTMLElement).style.backgroundColor = "#2b2e46");
-    (r[idx] as HTMLElement).style.backgroundColor = "#161723"
-
+    let r = document.querySelectorAll('button.record');
+    r.forEach(e => ((e as HTMLElement).style.backgroundColor = '#2b2e46'));
+    (r[idx] as HTMLElement).style.backgroundColor = '#161723';
 
     if (data && data.summary.routes.length !== 0) {
-      idx += data.summary.routes.filter(e => e.category.id < category_id).length // lethimcook
+      idx += data.summary.routes.filter(
+        e => e.category.id < category_id
+      ).length; // lethimcook
       setSelectedRun(idx);
     }
-  };
+  }
 
   function _get_youtube_id(url: string): string {
     const urlArray = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-    return (urlArray[2] !== undefined) ? urlArray[2].split(/[^0-9a-z_-]/i)[0] : urlArray[0];
-  };
+    return urlArray[2] !== undefined
+      ? urlArray[2].split(/[^0-9a-z_-]/i)[0]
+      : urlArray[0];
+  }
 
   function _category_change() {
-    const btn = document.querySelectorAll("#section3 #category span button");
-    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    const btn = document.querySelectorAll('#section3 #category span button');
+    btn.forEach(e => {
+      (e as HTMLElement).style.backgroundColor = '#2b2e46';
+    });
     // heavenly father forgive me for i have sinned. TODO: fix this bullshit with dynamic categories
-    const idx = selectedCategory === 1 ? 0 : data.map.is_coop ? selectedCategory - 3 : selectedCategory - 1;
-    (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
-  };
+    const idx =
+      selectedCategory === 1
+        ? 0
+        : data.map.is_coop
+          ? selectedCategory - 3
+          : selectedCategory - 1;
+    (btn[idx] as HTMLElement).style.backgroundColor = '#202232';
+  }
 
   function _history_change() {
-    const btn = document.querySelectorAll("#section3 #history span button");
-    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
-    (historySelected ? btn[1] as HTMLElement : btn[0] as HTMLElement).style.backgroundColor = "#202232";
-  };
+    const btn = document.querySelectorAll('#section3 #history span button');
+    btn.forEach(e => {
+      (e as HTMLElement).style.backgroundColor = '#2b2e46';
+    });
+    (historySelected
+      ? (btn[1] as HTMLElement)
+      : (btn[0] as HTMLElement)
+    ).style.backgroundColor = '#202232';
+  }
 
   React.useEffect(() => {
     _history_change();
@@ -61,119 +79,188 @@ const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data })
 
   return (
     <>
-      <section id='section3' className='summary1'>
-        <div id='category'
-          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}>
-          <img src={data.map.image} alt="" id='category-image'></img>
-          <p><span className='portal-count'>{data.summary.routes[selectedRun].history.score_count}</span>
-            {data.summary.routes[selectedRun].history.score_count === 1 ? ` portal` : ` portals`}</p>
-          {data.map.is_coop ? // TODO: make this part dynamic
-            (
-              <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
-                <button onClick={() => setSelectedCategory(1)}>CM</button>
-                <button onClick={() => setSelectedCategory(4)}>Any%</button>
-                <button onClick={() => setSelectedCategory(5)}>All Courses</button>
-              </span>
-            )
-            :
-            (
-              <span style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
-
-                <button onClick={() => setSelectedCategory(1)}>CM</button>
-                <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
-                <button onClick={() => setSelectedCategory(3)}>Inbounds SLA</button>
-                <button onClick={() => setSelectedCategory(4)}>Any%</button>
-              </span>
-            )
-          }
-
+      <section id="section3" className="summary1">
+        <div
+          id="category"
+          style={data.map.image === '' ? { backgroundColor: '#202232' } : {}}
+        >
+          <img src={data.map.image} alt="" id="category-image"></img>
+          <p>
+            <span className="portal-count">
+              {data.summary.routes[selectedRun].history.score_count}
+            </span>
+            {data.summary.routes[selectedRun].history.score_count === 1
+              ? ` portal`
+              : ` portals`}
+          </p>
+          {data.map.is_coop ? ( // TODO: make this part dynamic
+            <span style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
+              <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(4)}>Any%</button>
+              <button onClick={() => setSelectedCategory(5)}>
+                All Courses
+              </button>
+            </span>
+          ) : (
+            <span style={{ gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
+              <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
+              <button onClick={() => setSelectedCategory(3)}>
+                Inbounds SLA
+              </button>
+              <button onClick={() => setSelectedCategory(4)}>Any%</button>
+            </span>
+          )}
         </div>
 
-        <div id='history'>
-
-          <div style={{ display: historySelected ? "none" : "block" }}>
-            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
+        <div id="history">
+          <div style={{ display: historySelected ? 'none' : 'block' }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory)
+              .length === 0 ? (
+              <h5>There are no records for this map.</h5>
+            ) : (
               <>
-                <div className='record-top'>
+                <div className="record-top">
                   <span>Date</span>
                   <span>Record</span>
                   <span>First Completion</span>
                 </div>
                 <hr />
-                <div id='records'>
-
+                <div id="records">
                   {data.summary.routes
                     .filter(e => e.category.id === selectedCategory)
                     .map((r, index) => (
-                      <button className='record' key={index} onClick={() => {
-                        _select_run(index, r.category.id);
-                      }}>
-                        <span>{new Date(r.history.date).toLocaleDateString(
-                          "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
-                        )}</span>
+                      <button
+                        className="record"
+                        key={index}
+                        onClick={() => {
+                          _select_run(index, r.category.id);
+                        }}
+                      >
+                        <span>
+                          {new Date(r.history.date).toLocaleDateString(
+                            'en-US',
+                            { month: 'long', day: 'numeric', year: 'numeric' }
+                          )}
+                        </span>
                         <span>{r.history.score_count}</span>
                         <span>{r.history.runner_name}</span>
                       </button>
                     ))}
                 </div>
               </>
-            }
+            )}
           </div>
 
-          <div style={{ display: historySelected ? "block" : "none" }}>
-            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
-              <div id='graph'>
+          <div style={{ display: historySelected ? 'block' : 'none' }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory)
+              .length === 0 ? (
+              <h5>There are no records for this map.</h5>
+            ) : (
+              <div id="graph">
                 {/* <div>{graph(1)}</div>
                 <div>{graph(2)}</div>
                 <div>{graph(3)}</div> */}
               </div>
-            }
+            )}
           </div>
           <span>
             <button onClick={() => setHistorySelected(false)}>List</button>
             <button onClick={() => setHistorySelected(true)}>Graph</button>
           </span>
         </div>
-
-
-      </section >
-      <section id='section4' className='summary1'>
-        <div id='difficulty'>
+      </section>
+      <section id="section4" className="summary1">
+        <div id="difficulty">
           <span>Difficulty</span>
-          {data.summary.routes[selectedRun].rating === 0 && (<span>N/A</span>)}
-          {data.summary.routes[selectedRun].rating === 1 && (<span style={{ color: "lime" }}>Very easy</span>)}
-          {data.summary.routes[selectedRun].rating === 2 && (<span style={{ color: "green" }}>Easy</span>)}
-          {data.summary.routes[selectedRun].rating === 3 && (<span style={{ color: "yellow" }}>Medium</span>)}
-          {data.summary.routes[selectedRun].rating === 4 && (<span style={{ color: "orange" }}>Hard</span>)}
-          {data.summary.routes[selectedRun].rating === 5 && (<span style={{ color: "red" }}>Very hard</span>)}
+          {data.summary.routes[selectedRun].rating === 0 && <span>N/A</span>}
+          {data.summary.routes[selectedRun].rating === 1 && (
+            <span style={{ color: 'lime' }}>Very easy</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 2 && (
+            <span style={{ color: 'green' }}>Easy</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 3 && (
+            <span style={{ color: 'yellow' }}>Medium</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 4 && (
+            <span style={{ color: 'orange' }}>Hard</span>
+          )}
+          {data.summary.routes[selectedRun].rating === 5 && (
+            <span style={{ color: 'red' }}>Very hard</span>
+          )}
           <div>
-            {data.summary.routes[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating === 5 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes[selectedRun].rating === 1 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'lime' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 2 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'green' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 3 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'yellow' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 4 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'orange' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.summary.routes[selectedRun].rating === 5 ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: 'red' }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
           </div>
         </div>
-        <div id='count'>
+        <div id="count">
           <span>Completion Count</span>
           <div>{data.summary.routes[selectedRun].completion_count}</div>
         </div>
       </section>
 
-      <section id='section5' className='summary1'>
-        <div id='description'>
-          {data.summary.routes[selectedRun].showcase !== "" ?
-            <iframe title='Showcase video' src={"https://www.youtube.com/embed/" + _get_youtube_id(data.summary.routes[selectedRun].showcase)}> </iframe>
-            : ""}
+      <section id="section5" className="summary1">
+        <div id="description">
+          {data.summary.routes[selectedRun].showcase !== '' ? (
+            <iframe
+              title="Showcase video"
+              src={
+                'https://www.youtube.com/embed/' +
+                _get_youtube_id(data.summary.routes[selectedRun].showcase)
+              }
+            >
+              {' '}
+            </iframe>
+          ) : (
+            ''
+          )}
           <h3>Route Description</h3>
-          <span id='description-text'>
+          <span id="description-text">
             <ReactMarkdown>
               {data.summary.routes[selectedRun].description}
             </ReactMarkdown>
           </span>
         </div>
       </section>
-
     </>
   );
 };
diff --git a/frontend/src/components/UploadRunDialog.tsx b/frontend/src/components/UploadRunDialog.tsx
index c02fdb8..227a564 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -8,7 +8,7 @@ import { API } from '@api/Api';
 import { useNavigate } from 'react-router-dom';
 import useMessage from '@hooks/UseMessage';
 import useConfirm from '@hooks/UseConfirm';
-import useMessageLoad from "@hooks/UseMessageLoad";
+import useMessageLoad from '@hooks/UseMessageLoad';
 import { MapNames } from '@customTypes/MapNames';
 
 interface UploadRunDialogProps {
@@ -18,21 +18,27 @@ interface UploadRunDialogProps {
   games: Game[];
 }
 
-const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose, games }) => {
-
+const UploadRunDialog: React.FC<UploadRunDialogProps> = ({
+  token,
+  open,
+  onClose,
+  games,
+}) => {
   const { message, MessageDialogComponent } = useMessage();
   const { confirm, ConfirmDialogComponent } = useConfirm();
-  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } =
+    useMessageLoad();
 
   const navigate = useNavigate();
 
-  const [uploadRunContent, setUploadRunContent] = React.useState<UploadRunContent>({
-    host_demo: null,
-    partner_demo: null,
-  });
+  const [uploadRunContent, setUploadRunContent] =
+    React.useState<UploadRunContent>({
+      host_demo: null,
+      partner_demo: null,
+    });
 
   const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
-  const [selectedGameName, setSelectedGameName] = React.useState<string>("");
+  const [selectedGameName, setSelectedGameName] = React.useState<string>('');
 
   // dropdowns
   const [dropdown1Vis, setDropdown1Vis] = React.useState<boolean>(false);
@@ -41,7 +47,8 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
   const [loading, setLoading] = React.useState<boolean>(false);
 
   const [dragHightlight, setDragHighlight] = React.useState<boolean>(false);
-  const [dragHightlightPartner, setDragHighlightPartner] = React.useState<boolean>(false);
+  const [dragHightlightPartner, setDragHighlightPartner] =
+    React.useState<boolean>(false);
 
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const fileInputRefPartner = React.useRef<HTMLInputElement>(null);
@@ -52,9 +59,12 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     } else {
       fileInputRefPartner.current?.click();
     }
-  }
+  };
 
-  const _handle_drag_over = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
+  const _handle_drag_over = (
+    e: React.DragEvent<HTMLDivElement>,
+    host: boolean
+  ) => {
     e.preventDefault();
     e.stopPropagation();
     if (host) {
@@ -62,9 +72,12 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     } else {
       setDragHighlightPartner(true);
     }
-  }
+  };
 
-  const _handle_drag_leave = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
+  const _handle_drag_leave = (
+    e: React.DragEvent<HTMLDivElement>,
+    host: boolean
+  ) => {
     e.preventDefault();
     e.stopPropagation();
     if (host) {
@@ -72,7 +85,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     } else {
       setDragHighlightPartner(false);
     }
-  }
+  };
 
   const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
     e.preventDefault();
@@ -80,7 +93,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     setDragHighlight(true);
 
     _handle_file_change(e.dataTransfer.files, host);
-  }
+  };
 
   const _handle_dropdowns = (dropdown: number) => {
     setDropdown1Vis(false);
@@ -89,9 +102,9 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
       setDropdown1Vis(!dropdown1Vis);
     } else if (dropdown == 2) {
       setDropdown2Vis(!dropdown2Vis);
-      document.querySelector("#dropdown2")?.scrollTo(0, 0);
+      document.querySelector('#dropdown2')?.scrollTo(0, 0);
     }
-  }
+  };
 
   const _handle_game_select = async (game_id: string, game_name: string) => {
     setLoading(true);
@@ -120,62 +133,85 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     if (token) {
       if (games[selectedGameID].is_coop) {
         if (uploadRunContent.host_demo === null) {
-          await message("Error", "You must select a host demo to upload.")
-          return
+          await message('Error', 'You must select a host demo to upload.');
+          return;
         } else if (uploadRunContent.partner_demo === null) {
-          await message("Error", "You must select a partner demo to upload.")
-          return
+          await message('Error', 'You must select a partner demo to upload.');
+          return;
         }
       } else {
         if (uploadRunContent.host_demo === null) {
-          await message("Error", "You must select a demo to upload.")
-          return
+          await message('Error', 'You must select a demo to upload.');
+          return;
         }
       }
       const demo = SourceDemoParser.default()
         .setOptions({ packets: true, header: true })
         .parse(await uploadRunContent.host_demo.arrayBuffer());
-      const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>((msg) => {
-        return msg instanceof NetMessages.SvcUserMessage && msg.userMessage instanceof ScoreboardTempUpdate;
-      })
+      const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>(msg => {
+        return (
+          msg instanceof NetMessages.SvcUserMessage &&
+          msg.userMessage instanceof ScoreboardTempUpdate
+        );
+      });
 
       if (!scoreboard) {
-        await message("Error", "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode.")
-        return
+        await message(
+          'Error',
+          "Error while processing demo: Unable to get scoreboard result. Either there is a demo that is corrupt or haven't been recorded in challenge mode."
+        );
+        return;
       }
 
       if (!demo.mapName || !MapNames[demo.mapName]) {
-        await message("Error", "Error while processing demo: Invalid map name.")
-        return
+        await message(
+          'Error',
+          'Error while processing demo: Invalid map name.'
+        );
+        return;
       }
 
       if (selectedGameID === 0 && MapNames[demo.mapName] > 60) {
-        await message("Error", "Error while processing demo: Invalid cooperative demo in singleplayer submission.")
-        return
+        await message(
+          'Error',
+          'Error while processing demo: Invalid cooperative demo in singleplayer submission.'
+        );
+        return;
       } else if (selectedGameID === 1 && MapNames[demo.mapName] <= 60) {
-        await message("Error", "Error while processing demo: Invalid singleplayer demo in cooperative submission.")
-        return
+        await message(
+          'Error',
+          'Error while processing demo: Invalid singleplayer demo in cooperative submission.'
+        );
+        return;
       }
 
-      const { portalScore, timeScore } = scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
+      const { portalScore, timeScore } =
+        scoreboard.userMessage?.as<ScoreboardTempUpdate>() ?? {};
 
-      const userConfirmed = await confirm("Upload Record", `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`);
+      const userConfirmed = await confirm(
+        'Upload Record',
+        `Map Name: ${demo.mapName}\nPortal Count: ${portalScore}\nTicks: ${timeScore}\n\nAre you sure you want to upload this demo?`
+      );
 
       if (!userConfirmed) {
         return;
       }
 
-      messageLoad("Uploading...");
-      const [success, response] = await API.post_record(token, uploadRunContent, MapNames[demo.mapName]);
+      messageLoad('Uploading...');
+      const [success, response] = await API.post_record(
+        token,
+        uploadRunContent,
+        MapNames[demo.mapName]
+      );
       messageLoadClose();
-      await message("Upload Record", response);
+      await message('Upload Record', response);
       if (success) {
         setUploadRunContent({
           host_demo: null,
           partner_demo: null,
         });
         onClose(success);
-        navigate("/profile");
+        navigate('/profile');
       }
     }
   };
@@ -184,7 +220,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     if (open) {
       setDragHighlightPartner(false);
       setDragHighlight(false);
-      _handle_game_select("1", "Portal 2 - Singleplayer"); // a different approach?.
+      _handle_game_select('1', 'Portal 2 - Singleplayer'); // a different approach?.
     }
   }, [open]);
 
@@ -196,84 +232,191 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
         {MessageDialogLoadComponent}
         {ConfirmDialogComponent}
 
-        <div id='upload-run-menu'>
-          <div id='upload-run-menu-add'>
-            <div id='upload-run-route-category'>
-              <div style={{ padding: "15px 0px" }} className='upload-run-dropdown-container upload-run-item'>
-                <h3 style={{ margin: "0px 0px" }}>Select Game</h3>
-                <div onClick={() => _handle_dropdowns(1)} style={{ display: "flex", alignItems: "center", cursor: "pointer", justifyContent: "space-between", margin: "10px 0px" }}>
-                  <div className='dropdown-cur'>{selectedGameName}</div>
-                  <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
+        <div id="upload-run-menu">
+          <div id="upload-run-menu-add">
+            <div id="upload-run-route-category">
+              <div
+                style={{ padding: '15px 0px' }}
+                className="upload-run-dropdown-container upload-run-item"
+              >
+                <h3 style={{ margin: '0px 0px' }}>Select Game</h3>
+                <div
+                  onClick={() => _handle_dropdowns(1)}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    cursor: 'pointer',
+                    justifyContent: 'space-between',
+                    margin: '10px 0px',
+                  }}
+                >
+                  <div className="dropdown-cur">{selectedGameName}</div>
+                  <i
+                    style={{
+                      rotate: '-90deg',
+                      transform: 'translate(-5px, 10px)',
+                    }}
+                    className="triangle"
+                  ></i>
                 </div>
-                <div style={{ top: "110px" }} className={dropdown1Vis ? "upload-run-dropdown" : "upload-run-dropdown hidden"}>
-                  {games.map((game) => (
-                    <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div>
+                <div
+                  style={{ top: '110px' }}
+                  className={
+                    dropdown1Vis
+                      ? 'upload-run-dropdown'
+                      : 'upload-run-dropdown hidden'
+                  }
+                >
+                  {games.map(game => (
+                    <div
+                      onClick={() => {
+                        _handle_game_select(game.id.toString(), game.name);
+                        _handle_dropdowns(1);
+                      }}
+                      key={game.id}
+                    >
+                      {game.name}
+                    </div>
                   ))}
                 </div>
               </div>
 
-              {
-                !loading &&
-                (
-                  <>
-
-                    <div>
-                      <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
-                      <div onClick={() => { _handle_file_click(true) }} onDragOver={(e) => { _handle_drag_over(e, true) }} onDrop={(e) => { _handle_drop(e, true) }} onDragLeave={(e) => { _handle_drag_leave(e, true) }} className={`upload-run-drag-area ${dragHightlight ? "upload-run-drag-area-highlight" : ""} ${uploadRunContent.host_demo ? "upload-run-drag-area-hidden" : ""}`}>
-                        <input ref={fileInputRef} type="file" name="host_demo" id="host_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, true)} />
-                        {!uploadRunContent.host_demo ?
+              {!loading && (
+                <>
+                  <div>
+                    <h3 style={{ margin: '10px 0px' }}>Host Demo</h3>
+                    <div
+                      onClick={() => {
+                        _handle_file_click(true);
+                      }}
+                      onDragOver={e => {
+                        _handle_drag_over(e, true);
+                      }}
+                      onDrop={e => {
+                        _handle_drop(e, true);
+                      }}
+                      onDragLeave={e => {
+                        _handle_drag_leave(e, true);
+                      }}
+                      className={`upload-run-drag-area ${dragHightlight ? 'upload-run-drag-area-highlight' : ''} ${uploadRunContent.host_demo ? 'upload-run-drag-area-hidden' : ''}`}
+                    >
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        name="host_demo"
+                        id="host_demo"
+                        accept=".dem"
+                        onChange={e =>
+                          _handle_file_change(e.target.files, true)
+                        }
+                      />
+                      {!uploadRunContent.host_demo ? (
+                        <div>
+                          <span>Drag and drop</span>
                           <div>
-                            <span>Drag and drop</span>
-                            <div>
-                              <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br />
-                              <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button>
-                            </div>
+                            <span
+                              style={{
+                                fontFamily: 'BarlowSemiCondensed-Regular',
+                              }}
+                            >
+                              Or click here
+                            </span>
+                            <br />
+                            <button
+                              style={{
+                                borderRadius: '24px',
+                                padding: '5px 8px',
+                                margin: '5px 0px',
+                              }}
+                            >
+                              Upload
+                            </button>
                           </div>
-                          : null}
-
-                        <span className="upload-run-demo-name">{uploadRunContent.host_demo?.name}</span>
-                      </div>
-                      {
-                        games[selectedGameID].is_coop &&
-                        (
-                          <>
-                            <div>
-                              <h3 style={{ margin: "10px 0px" }}>Partner Demo</h3>
-                              <div onClick={() => { _handle_file_click(false) }} onDragOver={(e) => { _handle_drag_over(e, false) }} onDrop={(e) => { _handle_drop(e, false) }} onDragLeave={(e) => { _handle_drag_leave(e, false) }} className={`upload-run-drag-area ${dragHightlightPartner ? "upload-run-drag-area-highlight-partner" : ""} ${uploadRunContent.partner_demo ? "upload-run-drag-area-hidden" : ""}`}>
-                                <input ref={fileInputRefPartner} type="file" name="partner_demo" id="partner_demo" accept=".dem" onChange={(e) => _handle_file_change(e.target.files, false)} />                                                  {!uploadRunContent.partner_demo ?
-                                  <div>
-                                    <span>Drag and drop</span>
-                                    <div>
-                                      <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br />
-                                      <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button>
-                                    </div>
-                                  </div>
-                                  : null}
-
-                                <span className="upload-run-demo-name">{uploadRunContent.partner_demo?.name}</span>
-                              </div>
-                            </div>
-                          </>
-                        )
-                      }
-                    </div>
-                    <div className='search-container'>
+                        </div>
+                      ) : null}
 
+                      <span className="upload-run-demo-name">
+                        {uploadRunContent.host_demo?.name}
+                      </span>
                     </div>
-
-                  </>
-                )
-              }
+                    {games[selectedGameID].is_coop && (
+                      <>
+                        <div>
+                          <h3 style={{ margin: '10px 0px' }}>Partner Demo</h3>
+                          <div
+                            onClick={() => {
+                              _handle_file_click(false);
+                            }}
+                            onDragOver={e => {
+                              _handle_drag_over(e, false);
+                            }}
+                            onDrop={e => {
+                              _handle_drop(e, false);
+                            }}
+                            onDragLeave={e => {
+                              _handle_drag_leave(e, false);
+                            }}
+                            className={`upload-run-drag-area ${dragHightlightPartner ? 'upload-run-drag-area-highlight-partner' : ''} ${uploadRunContent.partner_demo ? 'upload-run-drag-area-hidden' : ''}`}
+                          >
+                            <input
+                              ref={fileInputRefPartner}
+                              type="file"
+                              name="partner_demo"
+                              id="partner_demo"
+                              accept=".dem"
+                              onChange={e =>
+                                _handle_file_change(e.target.files, false)
+                              }
+                            />{' '}
+                            {!uploadRunContent.partner_demo ? (
+                              <div>
+                                <span>Drag and drop</span>
+                                <div>
+                                  <span
+                                    style={{
+                                      fontFamily: 'BarlowSemiCondensed-Regular',
+                                    }}
+                                  >
+                                    Or click here
+                                  </span>
+                                  <br />
+                                  <button
+                                    style={{
+                                      borderRadius: '24px',
+                                      padding: '5px 8px',
+                                      margin: '5px 0px',
+                                    }}
+                                  >
+                                    Upload
+                                  </button>
+                                </div>
+                              </div>
+                            ) : null}
+                            <span className="upload-run-demo-name">
+                              {uploadRunContent.partner_demo?.name}
+                            </span>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  <div className="search-container"></div>
+                </>
+              )}
             </div>
-            <div className='upload-run-buttons-container'>
+            <div className="upload-run-buttons-container">
               <button onClick={_upload_run}>Submit</button>
-              <button onClick={() => {
-                onClose(false);
-                setUploadRunContent({
-                  host_demo: null,
-                  partner_demo: null,
-                });
-              }}>Cancel</button>
+              <button
+                onClick={() => {
+                  onClose(false);
+                  setUploadRunContent({
+                    host_demo: null,
+                    partner_demo: null,
+                  });
+                }}
+              >
+                Cancel
+              </button>
             </div>
           </div>
         </div>
@@ -281,10 +424,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
     );
   }
 
-  return (
-    <></>
-  );
-
+  return <></>;
 };
 
 export default UploadRunDialog;
diff --git a/frontend/src/hooks/UseConfirm.tsx b/frontend/src/hooks/UseConfirm.tsx
index e86d70d..7b4bffa 100644
--- a/frontend/src/hooks/UseConfirm.tsx
+++ b/frontend/src/hooks/UseConfirm.tsx
@@ -2,39 +2,46 @@ import React, { useState } from 'react';
 import ConfirmDialog from '@components/ConfirmDialog';
 
 const useConfirm = () => {
-    const [isOpen, setIsOpen] = useState(false);
-        const [title, setTitle] = useState<string>("");
-        const [subtitle, setSubtitle] = useState<string>("");
-    const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [title, setTitle] = useState<string>('');
+  const [subtitle, setSubtitle] = useState<string>('');
+  const [resolvePromise, setResolvePromise] = useState<
+    ((value: boolean) => void) | null
+  >(null);
 
-    const confirm = ( titleN: string, subtitleN: string ) => {
-        setIsOpen(true);
-                setTitle(titleN);
-                setSubtitle(subtitleN);
-        return new Promise<boolean>((resolve) => {
-            setResolvePromise(() => resolve);
-        });
-    };
+  const confirm = (titleN: string, subtitleN: string) => {
+    setIsOpen(true);
+    setTitle(titleN);
+    setSubtitle(subtitleN);
+    return new Promise<boolean>(resolve => {
+      setResolvePromise(() => resolve);
+    });
+  };
 
-    const handleConfirm = () => {
-        setIsOpen(false);
-        if (resolvePromise) {
-            resolvePromise(true);
-        }
+  const handleConfirm = () => {
+    setIsOpen(false);
+    if (resolvePromise) {
+      resolvePromise(true);
     }
+  };
 
-    const handleCancel = () => {
-        setIsOpen(false);
-        if (resolvePromise) {
-            resolvePromise(false);
-        }
+  const handleCancel = () => {
+    setIsOpen(false);
+    if (resolvePromise) {
+      resolvePromise(false);
     }
+  };
 
-    const ConfirmDialogComponent = isOpen && (
-        <ConfirmDialog title={title} subtitle={subtitle} onConfirm={handleConfirm} onCancel={handleCancel}></ConfirmDialog>
-    );
+  const ConfirmDialogComponent = isOpen && (
+    <ConfirmDialog
+      title={title}
+      subtitle={subtitle}
+      onConfirm={handleConfirm}
+      onCancel={handleCancel}
+    ></ConfirmDialog>
+  );
 
-    return { confirm, ConfirmDialogComponent };
-}
+  return { confirm, ConfirmDialogComponent };
+};
 
 export default useConfirm;
diff --git a/frontend/src/hooks/UseMessage.tsx b/frontend/src/hooks/UseMessage.tsx
index 97ec746..e0afa59 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -1,37 +1,43 @@
 import React, { useState } from 'react';
-import MessageDialog from "@components/MessageDialog";
+import MessageDialog from '@components/MessageDialog';
 
 const useMessage = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-    const [title, setTitle] = useState<string>("");
-    const [subtitle, setSubtitle] = useState<string>("");
-    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+  const [title, setTitle] = useState<string>('');
+  const [subtitle, setSubtitle] = useState<string>('');
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
+    null
+  );
 
-    const message = (title: string, subtitle: string) => {
-        setIsOpen(true);
-        setTitle(title);
-        setSubtitle(subtitle);
-                return new Promise((resolve) => {
-                        setResolvePromise(() => resolve);
-                });
-    };
+  const message = (title: string, subtitle: string) => {
+    setIsOpen(true);
+    setTitle(title);
+    setSubtitle(subtitle);
+    return new Promise(resolve => {
+      setResolvePromise(() => resolve);
+    });
+  };
 
-    const handleClose = () => {
-        setIsOpen(false);
-        if (resolvePromise) {
-            resolvePromise();
-            setResolvePromise(null);
-        }
-    };
+  const handleClose = () => {
+    setIsOpen(false);
+    if (resolvePromise) {
+      resolvePromise();
+      setResolvePromise(null);
+    }
+  };
 
-    const MessageDialogComponent = isOpen && (
-                <div className="dialog-container">
-        <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
-                </div>
-    );
+  const MessageDialogComponent = isOpen && (
+    <div className="dialog-container">
+      <MessageDialog
+        title={title}
+        subtitle={subtitle}
+        onClose={handleClose}
+      ></MessageDialog>
+    </div>
+  );
 
-    return { message, MessageDialogComponent };
-}
+  return { message, MessageDialogComponent };
+};
 
 export default useMessage;
diff --git a/frontend/src/hooks/UseMessageLoad.tsx b/frontend/src/hooks/UseMessageLoad.tsx
index 228c2b4..ea0b5d8 100644
--- a/frontend/src/hooks/UseMessageLoad.tsx
+++ b/frontend/src/hooks/UseMessageLoad.tsx
@@ -1,35 +1,40 @@
 import React, { useState } from 'react';
-import MessageDialogLoad from "@components/MessageDialogLoad";
+import MessageDialogLoad from '@components/MessageDialogLoad';
 
 const useMessageLoad = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-    const [title, setTitle] = useState<string>("");
-    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+  const [title, setTitle] = useState<string>('');
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
+    null
+  );
 
-        const messageLoad = (title: string) => {
-        setIsOpen(true);
-        setTitle(title);
-                return new Promise((resolve) => {
-                        setResolvePromise(() => resolve);
-                });
-    };
+  const messageLoad = (title: string) => {
+    setIsOpen(true);
+    setTitle(title);
+    return new Promise(resolve => {
+      setResolvePromise(() => resolve);
+    });
+  };
 
-    const messageLoadClose = () => {
-        setIsOpen(false);
-        if (resolvePromise) {
-            resolvePromise();
-            setResolvePromise(null);
-        }
-    };
+  const messageLoadClose = () => {
+    setIsOpen(false);
+    if (resolvePromise) {
+      resolvePromise();
+      setResolvePromise(null);
+    }
+  };
 
-    const MessageDialogLoadComponent = isOpen && (
-                <div className="dialog-container">
-        <MessageDialogLoad title={title} onClose={messageLoadClose}></MessageDialogLoad>
-                </div>
-    );
+  const MessageDialogLoadComponent = isOpen && (
+    <div className="dialog-container">
+      <MessageDialogLoad
+        title={title}
+        onClose={messageLoadClose}
+      ></MessageDialogLoad>
+    </div>
+  );
 
-    return { messageLoad, messageLoadClose, MessageDialogLoadComponent };
-}
+  return { messageLoad, messageLoadClose, MessageDialogLoadComponent };
+};
 
 export default useMessageLoad;
diff --git a/frontend/src/images/Images.tsx b/frontend/src/images/Images.tsx
index 198431b..9972662 100644
--- a/frontend/src/images/Images.tsx
+++ b/frontend/src/images/Images.tsx
@@ -1,5 +1,5 @@
-import logo from "./png/logo.png"
-import login from "./png/login.png"
+import logo from './png/logo.png';
+import login from './png/login.png';
 import img1 from './png/1.png';
 import img2 from './png/2.png';
 import img3 from './png/3.png';
@@ -20,7 +20,7 @@ import img17 from './png/17.png';
 import img18 from './png/18.png';
 import img19 from './png/19.png';
 import img20 from './png/20.png';
-import img21 from "./png/21.png";
+import img21 from './png/21.png';
 
 export const LogoIcon = logo;
 export const LoginIcon = login;
@@ -45,4 +45,4 @@ export const SteamIcon = img17;
 export const HistoryIcon = img18;
 export const SortIcon = img19;
 export const UploadIcon = img20;
-export const DeleteIcon = img21;
\ No newline at end of file
+export const DeleteIcon = img21;
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index eec2ff4..2eef1bc 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a8b7826..a5d34f6 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -5,36 +5,34 @@ import { Helmet } from 'react-helmet';
 import '@css/About.css';
 
 const About: React.FC = () => {
+  const [aboutText, setAboutText] = React.useState<string>('');
 
-    const [aboutText, setAboutText] = React.useState<string>("");
+  React.useEffect(() => {
+    const fetchReadme = async () => {
+      try {
+        const response = await fetch(
+          'https://raw.githubusercontent.com/pektezol/lphub/main/README.md'
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch README');
+        }
+        const readmeText = await response.text();
+        setAboutText(readmeText);
+      } catch (error) {
+        console.error('Error fetching README:', error);
+      }
+    };
+    fetchReadme();
+  }, []);
 
-    React.useEffect(() => {
-        const fetchReadme = async () => {
-            try {
-                const response = await fetch(
-                    'https://raw.githubusercontent.com/pektezol/lphub/main/README.md'
-                );
-                if (!response.ok) {
-                    throw new Error('Failed to fetch README');
-                }
-                const readmeText = await response.text();
-                setAboutText(readmeText);
-            } catch (error) {
-                console.error('Error fetching README:', error);
-            }
-        };
-        fetchReadme();
-    }, []);
-
-
-    return (
-        <div id="about">
-            <Helmet>
-                <title>LPHUB | About</title>
-            </Helmet>
-            <ReactMarkdown>{aboutText}</ReactMarkdown>
-        </div>
-    );
+  return (
+    <div id="about">
+      <Helmet>
+        <title>LPHUB | About</title>
+      </Helmet>
+      <ReactMarkdown>{aboutText}</ReactMarkdown>
+    </div>
+  );
 };
 
 export default About;
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 15cc891..ae0a2d6 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -3,44 +3,45 @@ import { Helmet } from 'react-helmet';
 
 import GameEntry from '@components/GameEntry';
 import { Game } from '@customTypes/Game';
-import "@css/Maps.css"
+import '@css/Maps.css';
 
 interface GamesProps {
-    games: Game[];
+  games: Game[];
 }
 
 const Games: React.FC<GamesProps> = ({ games }) => {
+  const _page_load = () => {
+    const loaders = document.querySelectorAll('.loader');
+    loaders.forEach(loader => {
+      (loader as HTMLElement).style.display = 'none';
+    });
+  };
 
-    const _page_load = () => {
-        const loaders = document.querySelectorAll(".loader");
-        loaders.forEach((loader) => {
-            (loader as HTMLElement).style.display = "none";
-        });
-    }
+  React.useEffect(() => {
+    document
+      .querySelectorAll('.games-page-item-body')
+      .forEach((game, index) => {
+        game.innerHTML = '';
+      });
+    _page_load();
+  }, []);
 
-    React.useEffect(() => {
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
-            game.innerHTML = "";
-        });
-        _page_load();
-    }, []);
-
-    return (
-        <div className='games-page'>
-            <Helmet>
-                <title>LPHUB | Games</title>
-            </Helmet>
-            <section>
-                <div className='games-page-content'>
-                    <div className='games-page-item-content'>
-                        {games.map((game, index) => (
-                            <GameEntry game={game} key={index} />
-                        ))}
-                    </div>
-                </div>
-            </section>
+  return (
+    <div className="games-page">
+      <Helmet>
+        <title>LPHUB | Games</title>
+      </Helmet>
+      <section>
+        <div className="games-page-content">
+          <div className="games-page-item-content">
+            {games.map((game, index) => (
+              <GameEntry game={game} key={index} />
+            ))}
+          </div>
         </div>
-    );
+      </section>
+    </div>
+  );
 };
 
 export default Games;
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 4f46af5..859af52 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -2,21 +2,30 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 
 const Homepage: React.FC = () => {
-
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Homepage</title>
-            </Helmet>
-            <section>
-                <p />
-                <h1>Welcome to Least Portals Hub!</h1>
-                <p>At the moment, LPHUB is in beta state. This means that the site has only the core functionalities enabled for providing both collaborative information and competitive leaderboards.</p>
-                <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
-                <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
-            </section>
-        </main>
-    );
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Homepage</title>
+      </Helmet>
+      <section>
+        <p />
+        <h1>Welcome to Least Portals Hub!</h1>
+        <p>
+          At the moment, LPHUB is in beta state. This means that the site has
+          only the core functionalities enabled for providing both collaborative
+          information and competitive leaderboards.
+        </p>
+        <p>
+          The website should feel intuitive to navigate around. For any type of
+          feedback, reach us at LPHUB Discord server.
+        </p>
+        <p>
+          By using LPHUB, you agree that you have read the 'Leaderboard Rules'
+          and the 'About LPHUB' pages.
+        </p>
+      </section>
+    </main>
+  );
 };
 
 export default Homepage;
diff --git a/frontend/src/pages/Maplist.tsx b/frontend/src/pages/Maplist.tsx
index 04938cf..5138964 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
-import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
-import { Helmet } from "react-helmet";
+import React, { useEffect } from 'react';
+import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
-import "@css/Maplist.css";
-import { API } from "@api/Api";
-import { Game } from "@customTypes/Game";
-import { GameChapter, GamesChapters } from "@customTypes/Chapters";
+import '@css/Maplist.css';
+import { API } from '@api/Api';
+import { Game } from '@customTypes/Game';
+import { GameChapter, GamesChapters } from '@customTypes/Chapters';
 
 const Maplist: React.FC = () => {
   const [game, setGame] = React.useState<Game | null>(null);
@@ -19,41 +19,41 @@ const Maplist: React.FC = () => {
   const [curChapter, setCurChapter] = React.useState<GameChapter>();
   const [numChapters, setNumChapters] = React.useState<number>(0);
 
-  const [dropdownActive, setDropdownActive] = React.useState("none");
+  const [dropdownActive, setDropdownActive] = React.useState('none');
 
-  const params = useParams<{ id: string, chapter: string }>();
+  const params = useParams<{ id: string; chapter: string }>();
   const location = useLocation();
   const navigate = useNavigate();
 
   function _update_currently_selected(catNum2: number) {
     setCurrentlySelected(catNum2);
-    navigate("/games/" + game?.id + "?cat=" + catNum2);
+    navigate('/games/' + game?.id + '?cat=' + catNum2);
     setHasClicked(true);
   }
 
   const _fetch_chapters = async (chapter_id: string) => {
     const chapters = await API.get_chapters(chapter_id);
     setCurChapter(chapters);
-  }
+  };
 
   const _handle_dropdown_click = () => {
-    if (dropdownActive == "none") {
-      setDropdownActive("block");
+    if (dropdownActive == 'none') {
+      setDropdownActive('block');
     } else {
-      setDropdownActive("none");
+      setDropdownActive('none');
     }
-  }
+  };
 
   // im sorry but im too lazy to fix this right now
   useEffect(() => {
     // gameID
-    const gameId = parseFloat(params.id || "");
+    const gameId = parseFloat(params.id || '');
     setId(gameId);
 
     // location query params
     const queryParams = new URLSearchParams(location.search);
-    if (queryParams.get("chapter")) {
-      let cat = parseFloat(queryParams.get("chapter") || "");
+    if (queryParams.get('chapter')) {
+      let cat = parseFloat(queryParams.get('chapter') || '');
       if (gameId == 2) {
         cat += 10;
       }
@@ -62,7 +62,7 @@ const Maplist: React.FC = () => {
 
     const _fetch_game = async () => {
       const games = await API.get_games();
-      const foundGame = games.find((game) => game.id === gameId);
+      const foundGame = games.find(game => game.id === gameId);
       // console.log(foundGame)
       if (foundGame) {
         setGame(foundGame);
@@ -74,7 +74,7 @@ const Maplist: React.FC = () => {
       const games_chapters = await API.get_games_chapters(gameId.toString());
       setGameChapters(games_chapters);
       setNumChapters(games_chapters.chapters.length);
-    }
+    };
 
     setLoad(true);
     _fetch_game();
@@ -83,21 +83,19 @@ const Maplist: React.FC = () => {
 
   useEffect(() => {
     const queryParams = new URLSearchParams(location.search);
-    if (gameChapters != undefined && !queryParams.get("chapter")) {
+    if (gameChapters != undefined && !queryParams.get('chapter')) {
       _fetch_chapters(gameChapters!.chapters[0].id.toString());
     }
-  }, [gameChapters])
-
-
+  }, [gameChapters]);
 
   return (
     <main>
       <Helmet>
         <title>LPHUB | Maplist</title>
       </Helmet>
-      <section style={{ marginTop: "20px" }}>
+      <section style={{ marginTop: '20px' }}>
         <Link to="/games">
-          <button className="nav-button" style={{ borderRadius: "20px" }}>
+          <button className="nav-button" style={{ borderRadius: '20px' }}>
             <i className="triangle"></i>
             <span>Games List</span>
           </button>
@@ -117,7 +115,7 @@ const Maplist: React.FC = () => {
                 <h2 className="portal-count">
                   {
                     game?.category_portals.find(
-                      (obj) => obj.category.id === catNum + 1
+                      obj => obj.category.id === catNum + 1
                     )?.portal_count
                   }
                 </h2>
@@ -125,7 +123,19 @@ const Maplist: React.FC = () => {
               </div>
               <div className="game-header-categories">
                 {game?.category_portals.map((cat, index) => (
-                  <button key={index} className={currentlySelected == cat.category.id || cat.category.id - 1 == catNum && !hasClicked ? "game-cat-button selected" : "game-cat-button"} onClick={() => { setCatNum(cat.category.id - 1); _update_currently_selected(cat.category.id) }}>
+                  <button
+                    key={index}
+                    className={
+                      currentlySelected == cat.category.id ||
+                      (cat.category.id - 1 == catNum && !hasClicked)
+                        ? 'game-cat-button selected'
+                        : 'game-cat-button'
+                    }
+                    onClick={() => {
+                      setCatNum(cat.category.id - 1);
+                      _update_currently_selected(cat.category.id);
+                    }}
+                  >
                     <span>{cat.category.name}</span>
                   </button>
                 ))}
@@ -136,45 +146,88 @@ const Maplist: React.FC = () => {
           <div>
             <section className="chapter-select-container">
               <div>
-                <span style={{ fontSize: "18px", transform: "translateY(5px)", display: "block", marginTop: "10px" }}>{curChapter?.chapter.name.split(" - ")[0]}</span>
+                <span
+                  style={{
+                    fontSize: '18px',
+                    transform: 'translateY(5px)',
+                    display: 'block',
+                    marginTop: '10px',
+                  }}
+                >
+                  {curChapter?.chapter.name.split(' - ')[0]}
+                </span>
               </div>
               <div onClick={_handle_dropdown_click} className="dropdown">
-                <span>{curChapter?.chapter.name.split(" - ")[1]}</span>
+                <span>{curChapter?.chapter.name.split(' - ')[1]}</span>
                 <i className="triangle"></i>
               </div>
-              <div className="dropdown-elements" style={{ display: dropdownActive }}>
+              <div
+                className="dropdown-elements"
+                style={{ display: dropdownActive }}
+              >
                 {gameChapters?.chapters.map((chapter, i) => {
-                  return <div className="dropdown-element" onClick={() => { _fetch_chapters(chapter.id.toString()); _handle_dropdown_click() }}>{chapter.name}</div>
-                })
-
-                }
+                  return (
+                    <div
+                      className="dropdown-element"
+                      onClick={() => {
+                        _fetch_chapters(chapter.id.toString());
+                        _handle_dropdown_click();
+                      }}
+                    >
+                      {chapter.name}
+                    </div>
+                  );
+                })}
               </div>
             </section>
             <section className="maplist">
               {curChapter?.maps.map((map, i) => {
-                return <div className="maplist-entry">
-                  <Link to={`/maps/${map.id}`}>
-                    <span>{map.name}</span>
-                    <div className="map-entry-image" style={{ backgroundImage: `url(${map.image})` }}>
-                      <div className="blur map">
-                        <span>{map.is_disabled ? map.category_portals[0].portal_count : map.category_portals.find(
-                          (obj) => obj.category.id === catNum + 1
-                        )?.portal_count}</span>
-                        <span>portals</span>
+                return (
+                  <div className="maplist-entry">
+                    <Link to={`/maps/${map.id}`}>
+                      <span>{map.name}</span>
+                      <div
+                        className="map-entry-image"
+                        style={{ backgroundImage: `url(${map.image})` }}
+                      >
+                        <div className="blur map">
+                          <span>
+                            {map.is_disabled
+                              ? map.category_portals[0].portal_count
+                              : map.category_portals.find(
+                                  obj => obj.category.id === catNum + 1
+                                )?.portal_count}
+                          </span>
+                          <span>portals</span>
+                        </div>
                       </div>
-                    </div>
-                    <div className="difficulty-bar">
-                      {/* <span>Difficulty:</span> */}
-                      <div className={map.difficulty == 0 ? "one" : map.difficulty == 1 ? "two" : map.difficulty == 2 ? "three" : map.difficulty == 3 ? "four" : map.difficulty == 4 ? "five" : "one"}>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
-                        <div className="difficulty-point"></div>
+                      <div className="difficulty-bar">
+                        {/* <span>Difficulty:</span> */}
+                        <div
+                          className={
+                            map.difficulty == 0
+                              ? 'one'
+                              : map.difficulty == 1
+                                ? 'two'
+                                : map.difficulty == 2
+                                  ? 'three'
+                                  : map.difficulty == 3
+                                    ? 'four'
+                                    : map.difficulty == 4
+                                      ? 'five'
+                                      : 'one'
+                          }
+                        >
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                          <div className="difficulty-point"></div>
+                        </div>
                       </div>
-                    </div>
-                  </Link>
-                </div>
+                    </Link>
+                  </div>
+                );
               })}
             </section>
           </div>
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fb13563..51a2020 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -9,26 +9,31 @@ import Discussions from '@components/Discussions';
 import ModMenu from '@components/ModMenu';
 import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
 import { API } from '@api/Api';
-import "@css/Maps.css";
+import '@css/Maps.css';
 
 interface MapProps {
   token?: string;
   isModerator: boolean;
-};
+}
 
 const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
-
   const [selectedRun, setSelectedRun] = React.useState<number>(0);
 
-  const [mapSummaryData, setMapSummaryData] = React.useState<MapSummary | undefined>(undefined);
-  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
-  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(undefined);
+  const [mapSummaryData, setMapSummaryData] = React.useState<
+    MapSummary | undefined
+  >(undefined);
+  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<
+    MapLeaderboard | undefined
+  >(undefined);
+  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<
+    MapDiscussions | undefined
+  >(undefined);
 
   const [navState, setNavState] = React.useState<number>(0);
 
   const location = useLocation();
 
-  const mapID = location.pathname.split("/")[2];
+  const mapID = location.pathname.split('/')[2];
 
   const _fetch_map_summary = async () => {
     const mapSummary = await API.get_map_summary(mapID);
@@ -36,7 +41,7 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
   };
 
   const _fetch_map_leaderboards = async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
+    const mapLeaderboards = await API.get_map_leaderboard(mapID, '1');
     setMapLeaderboardData(mapLeaderboards);
   };
 
@@ -56,19 +61,36 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
     return (
       <>
         <main>
-          <section id='section1' className='summary1'>
+          <section id="section1" className="summary1">
             <div>
-              <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 20px 20px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
+              <Link to="/games">
+                <button
+                  className="nav-button"
+                  style={{ borderRadius: '20px 20px 20px 20px' }}
+                >
+                  <i className="triangle"></i>
+                  <span>Games List</span>
+                </button>
+              </Link>
             </div>
           </section>
 
-          <section id='section2' className='summary1'>
-            <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
-            <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-            <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+          <section id="section2" className="summary1">
+            <button className="nav-button">
+              <img src={PortalIcon} alt="" />
+              <span>Summary</span>
+            </button>
+            <button className="nav-button">
+              <img src={FlagIcon} alt="" />
+              <span>Leaderboards</span>
+            </button>
+            <button className="nav-button">
+              <img src={ChatIcon} alt="" />
+              <span>Discussions</span>
+            </button>
           </section>
 
-          <section id='section6' className='summary2' />
+          <section id="section6" className="summary2" />
         </main>
       </>
     );
@@ -80,29 +102,80 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
         <title>LPHUB | {mapSummaryData.map.map_name}</title>
         <meta name="description" content={mapSummaryData.map.map_name} />
       </Helmet>
-      {isModerator && <ModMenu token={token} data={mapSummaryData} selectedRun={selectedRun} mapID={mapID} />}
-
-      <div id='background-image'>
+      {isModerator && (
+        <ModMenu
+          token={token}
+          data={mapSummaryData}
+          selectedRun={selectedRun}
+          mapID={mapID}
+        />
+      )}
+
+      <div id="background-image">
         <img src={mapSummaryData.map.image} alt="" />
       </div>
       <main>
-        <section id='section1' className='summary1'>
+        <section id="section1" className="summary1">
           <div>
-            <Link to="/games"><button className='nav-button' style={{ borderRadius: "20px 0px 0px 20px" }}><i className='triangle'></i><span>Games List</span></button></Link>
-            <Link to={`/games/${mapSummaryData.map.is_coop ? "2" : "1"}?chapter=${mapSummaryData.map.chapter_name.split(" ")[1]}`}><button className='nav-button' style={{ borderRadius: "0px 20px 20px 0px", marginLeft: "2px" }}><i className='triangle'></i><span>{mapSummaryData.map.chapter_name}</span></button></Link>
-            <br /><span><b>{mapSummaryData.map.map_name}</b></span>
+            <Link to="/games">
+              <button
+                className="nav-button"
+                style={{ borderRadius: '20px 0px 0px 20px' }}
+              >
+                <i className="triangle"></i>
+                <span>Games List</span>
+              </button>
+            </Link>
+            <Link
+              to={`/games/${mapSummaryData.map.is_coop ? '2' : '1'}?chapter=${mapSummaryData.map.chapter_name.split(' ')[1]}`}
+            >
+              <button
+                className="nav-button"
+                style={{ borderRadius: '0px 20px 20px 0px', marginLeft: '2px' }}
+              >
+                <i className="triangle"></i>
+                <span>{mapSummaryData.map.chapter_name}</span>
+              </button>
+            </Link>
+            <br />
+            <span>
+              <b>{mapSummaryData.map.map_name}</b>
+            </span>
           </div>
         </section>
 
-        <section id='section2' className='summary1'>
-          <button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
-          <button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
-          <button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+        <section id="section2" className="summary1">
+          <button className="nav-button" onClick={() => setNavState(0)}>
+            <img src={PortalIcon} alt="" />
+            <span>Summary</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(1)}>
+            <img src={FlagIcon} alt="" />
+            <span>Leaderboards</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(2)}>
+            <img src={ChatIcon} alt="" />
+            <span>Discussions</span>
+          </button>
         </section>
 
-        {navState === 0 && <Summary selectedRun={selectedRun} setSelectedRun={setSelectedRun} data={mapSummaryData} />}
+        {navState === 0 && (
+          <Summary
+            selectedRun={selectedRun}
+            setSelectedRun={setSelectedRun}
+            data={mapSummaryData}
+          />
+        )}
         {navState === 1 && <Leaderboards mapID={mapID} />}
-        {navState === 2 && <Discussions data={mapDiscussionsData} token={token} isModerator={isModerator} mapID={mapID} onRefresh={() => _fetch_map_discussions()} />}
+        {navState === 2 && (
+          <Discussions
+            data={mapDiscussionsData}
+            token={token}
+            isModerator={isModerator}
+            mapID={mapID}
+            onRefresh={() => _fetch_map_discussions()}
+          />
+        )}
       </main>
     </>
   );
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 48233bf..7e3d603 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -2,16 +2,28 @@ import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images';
+import {
+  SteamIcon,
+  TwitchIcon,
+  YouTubeIcon,
+  PortalIcon,
+  FlagIcon,
+  StatisticsIcon,
+  SortIcon,
+  ThreedotIcon,
+  DownloadIcon,
+  HistoryIcon,
+  DeleteIcon,
+} from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
 import { Game, GameChapters } from '@customTypes/Game';
 import { Map } from '@customTypes/Map';
 import { ticks_to_time } from '@utils/Time';
-import "@css/Profile.css";
+import '@css/Profile.css';
 import { API } from '@api/Api';
 import useConfirm from '@hooks/UseConfirm';
 import useMessage from '@hooks/UseMessage';
-import useMessageLoad from "@hooks/UseMessageLoad";
+import useMessageLoad from '@hooks/UseMessageLoad';
 
 interface ProfileProps {
   profile?: UserProfile;
@@ -20,17 +32,25 @@ interface ProfileProps {
   onDeleteRecord: () => void;
 }
 
-const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRecord }) => {
+const Profile: React.FC<ProfileProps> = ({
+  profile,
+  token,
+  gameData,
+  onDeleteRecord,
+}) => {
   const { confirm, ConfirmDialogComponent } = useConfirm();
   const { message, MessageDialogComponent } = useMessage();
-  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } = useMessageLoad();
+  const { messageLoad, messageLoadClose, MessageDialogLoadComponent } =
+    useMessageLoad();
   const [navState, setNavState] = React.useState(0);
   const [pageNumber, setPageNumber] = React.useState(1);
   const [pageMax, setPageMax] = React.useState(0);
 
-  const [game, setGame] = React.useState("0")
-  const [chapter, setChapter] = React.useState("0")
-  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [game, setGame] = React.useState('0');
+  const [chapter, setChapter] = React.useState('0');
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(
+    null
+  );
   const [maps, setMaps] = React.useState<Map[]>([]);
 
   const navigate = useNavigate();
@@ -42,17 +62,17 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   };
 
   const _get_game_chapters = async () => {
-    if (game && game !== "0") {
+    if (game && game !== '0') {
       const gameChapters = await API.get_games_chapters(game);
       setChapterData(gameChapters);
-    } else if (game && game === "0") {
+    } else if (game && game === '0') {
       setPageMax(Math.ceil(profile!.records.length / 20));
       setPageNumber(1);
     }
   };
 
   const _get_game_maps = async () => {
-    if (chapter === "0") {
+    if (chapter === '0') {
       const gameMaps = await API.get_game_maps(game);
       setMaps(gameMaps);
       setPageMax(Math.ceil(gameMaps.length / 20));
@@ -66,28 +86,31 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   };
 
   const _delete_submission = async (map_id: number, record_id: number) => {
-    const userConfirmed = await confirm("Delete Record", "Are you sure you want to delete this record?");
+    const userConfirmed = await confirm(
+      'Delete Record',
+      'Are you sure you want to delete this record?'
+    );
 
     if (!userConfirmed) {
       return;
     }
 
-    messageLoad("Deleting...");
+    messageLoad('Deleting...');
 
     const api_success = await API.delete_map_record(token!, map_id, record_id);
     messageLoadClose();
     if (api_success) {
-      await message("Delete Record", "Successfully deleted record.");
+      await message('Delete Record', 'Successfully deleted record.');
       onDeleteRecord();
     } else {
-      await message("Delete Record", "Could not delete record.");
+      await message('Delete Record', 'Could not delete record.');
     }
   };
 
   React.useEffect(() => {
     if (!profile) {
-      navigate("/");
-    };
+      navigate('/');
+    }
   }, [profile]);
 
   React.useEffect(() => {
@@ -97,16 +120,14 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
   }, [profile, game]);
 
   React.useEffect(() => {
-    if (profile && game !== "0") {
+    if (profile && game !== '0') {
       _get_game_maps();
     }
-  }, [profile, game, chapter, chapterData])
+  }, [profile, game, chapter, chapterData]);
 
   if (!profile) {
-    return (
-      <></>
-    );
-  };
+    return <></>;
+  }
 
   return (
     <div>
@@ -119,230 +140,490 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
       {ConfirmDialogComponent}
 
       <main>
-        <section id='section1' className='profile'>
-
-          {profile.profile
-            ? (
-              <div id='profile-image' onClick={_update_profile}>
-                <img src={profile.avatar_link} alt="profile-image"></img>
-                <span>Refresh</span>
-              </div>
-            ) : (
-              <div>
-                <img src={profile.avatar_link} alt="profile-image"></img>
-              </div>
-            )}
+        <section id="section1" className="profile">
+          {profile.profile ? (
+            <div id="profile-image" onClick={_update_profile}>
+              <img src={profile.avatar_link} alt="profile-image"></img>
+              <span>Refresh</span>
+            </div>
+          ) : (
+            <div>
+              <img src={profile.avatar_link} alt="profile-image"></img>
+            </div>
+          )}
 
-          <div id='profile-top'>
+          <div id="profile-top">
             <div>
               <div>{profile.user_name}</div>
               <div>
-                {profile.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`} alt={profile.country_code} />}
+                {profile.country_code === 'XX' ? (
+                  ''
+                ) : (
+                  <img
+                    src={`https://flagcdn.com/w80/${profile.country_code.toLowerCase()}.jpg`}
+                    alt={profile.country_code}
+                  />
+                )}
               </div>
               <div>
                 {profile.titles.map(e => (
-                  <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                  <span
+                    className="titles"
+                    style={{ backgroundColor: `#${e.color}` }}
+                  >
                     {e.name}
                   </span>
                 ))}
               </div>
             </div>
             <div>
-              {profile.links.steam === "-" ? "" : <a href={profile.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
-              {profile.links.twitch === "-" ? "" : <a href={profile.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
-              {profile.links.youtube === "-" ? "" : <a href={profile.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
-              {profile.links.p2sr === "-" ? "" : <a href={profile.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+              {profile.links.steam === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.steam}>
+                  <img src={SteamIcon} alt="Steam" />
+                </a>
+              )}
+              {profile.links.twitch === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.twitch}>
+                  <img src={TwitchIcon} alt="Twitch" />
+                </a>
+              )}
+              {profile.links.youtube === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.youtube}>
+                  <img src={YouTubeIcon} alt="Youtube" />
+                </a>
+              )}
+              {profile.links.p2sr === '-' ? (
+                ''
+              ) : (
+                <a href={profile.links.p2sr}>
+                  <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} />
+                </a>
+              )}
             </div>
-
           </div>
-          <div id='profile-bottom'>
+          <div id="profile-bottom">
             <div>
               <span>Overall</span>
-              <span>{profile.rankings.overall.rank === 0 ? "N/A " : "#" + profile.rankings.overall.rank + " "}
-                <span>({profile.rankings.overall.completion_count}/{profile.rankings.overall.completion_total})</span>
+              <span>
+                {profile.rankings.overall.rank === 0
+                  ? 'N/A '
+                  : '#' + profile.rankings.overall.rank + ' '}
+                <span>
+                  ({profile.rankings.overall.completion_count}/
+                  {profile.rankings.overall.completion_total})
+                </span>
               </span>
             </div>
             <div>
               <span>Singleplayer</span>
-              <span>{profile.rankings.singleplayer.rank === 0 ? "N/A " : "#" + profile.rankings.singleplayer.rank + " "}
-                <span>({profile.rankings.singleplayer.completion_count}/{profile.rankings.singleplayer.completion_total})</span>
+              <span>
+                {profile.rankings.singleplayer.rank === 0
+                  ? 'N/A '
+                  : '#' + profile.rankings.singleplayer.rank + ' '}
+                <span>
+                  ({profile.rankings.singleplayer.completion_count}/
+                  {profile.rankings.singleplayer.completion_total})
+                </span>
               </span>
             </div>
             <div>
               <span>Cooperative</span>
-              <span>{profile.rankings.cooperative.rank === 0 ? "N/A " : "#" + profile.rankings.cooperative.rank + " "}
-                <span>({profile.rankings.cooperative.completion_count}/{profile.rankings.cooperative.completion_total})</span>
+              <span>
+                {profile.rankings.cooperative.rank === 0
+                  ? 'N/A '
+                  : '#' + profile.rankings.cooperative.rank + ' '}
+                <span>
+                  ({profile.rankings.cooperative.completion_count}/
+                  {profile.rankings.cooperative.completion_total})
+                </span>
               </span>
             </div>
           </div>
         </section>
 
-
-        <section id='section2' className='profile'>
-          <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
-          <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+        <section id="section2" className="profile">
+          <button onClick={() => setNavState(0)}>
+            <img src={FlagIcon} alt="" />
+            &nbsp;Player Records
+          </button>
+          <button onClick={() => setNavState(1)}>
+            <img src={StatisticsIcon} alt="" />
+            &nbsp;Statistics
+          </button>
         </section>
 
-
-
-
-
-        <section id='section3' className='profile1'>
-          <div id='profileboard-nav'>
-            {gameData === null ? <select>error</select> :
-
-              <select id='select-game'
+        <section id="section3" className="profile1">
+          <div id="profileboard-nav">
+            {gameData === null ? (
+              <select>error</select>
+            ) : (
+              <select
+                id="select-game"
                 onChange={() => {
-                  setGame((document.querySelector('#select-game') as HTMLInputElement).value);
-                  setChapter("0");
-                  const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                  setGame(
+                    (document.querySelector('#select-game') as HTMLInputElement)
+                      .value
+                  );
+                  setChapter('0');
+                  const chapterSelect = document.querySelector(
+                    '#select-chapter'
+                  ) as HTMLSelectElement;
                   if (chapterSelect) {
-                    chapterSelect.value = "0";
+                    chapterSelect.value = '0';
                   }
-                }}>
-                <option value={0} key={0}>All Scores</option>
+                }}
+              >
+                <option value={0} key={0}>
+                  All Scores
+                </option>
                 {gameData.map((e, i) => (
-                  <option value={e.id} key={i + 1}>{e.name}</option>
-                ))}</select>
-            }
+                  <option value={e.id} key={i + 1}>
+                    {e.name}
+                  </option>
+                ))}
+              </select>
+            )}
 
-            {game === "0" ?
+            {game === '0' ? (
               <select disabled>
                 <option>All Chapters</option>
               </select>
-              : chapterData === null ? <select></select> :
-
-                <select id='select-chapter'
-                  onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
-                  <option value="0" key="0">All Chapters</option>
-                  {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
-                    <option value={e.id} key={i + 1}>{e.name}</option>
-                  ))}</select>
-            }
+            ) : chapterData === null ? (
+              <select></select>
+            ) : (
+              <select
+                id="select-chapter"
+                onChange={() =>
+                  setChapter(
+                    (
+                      document.querySelector(
+                        '#select-chapter'
+                      ) as HTMLInputElement
+                    ).value
+                  )
+                }
+              >
+                <option value="0" key="0">
+                  All Chapters
+                </option>
+                {chapterData.chapters
+                  .filter(e => e.is_disabled === false)
+                  .map((e, i) => (
+                    <option value={e.id} key={i + 1}>
+                      {e.name}
+                    </option>
+                  ))}
+              </select>
+            )}
           </div>
-          <div id='profileboard-top'>
-            <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
-            <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
-            <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
-            <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+          <div id="profileboard-top">
+            <span>
+              <span>Map Name</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span style={{ justifyContent: 'center' }}>
+              <span>Portals</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span style={{ justifyContent: 'center' }}>
+              <span>WRΔ </span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span style={{ justifyContent: 'center' }}>
+              <span>Time</span>
+              <img src={SortIcon} alt="" />
+            </span>
             <span> </span>
-            <span><span>Rank</span><img src={SortIcon} alt="" /></span>
-            <span><span>Date</span><img src={SortIcon} alt="" /></span>
-            <div id='page-number'>
+            <span>
+              <span>Rank</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span>
+              <span>Date</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <div id="page-number">
               <div>
-                <button onClick={() => {
-                  if (pageNumber !== 1) {
-                    setPageNumber(prevPageNumber => prevPageNumber - 1);
-                    const records = document.querySelectorAll(".profileboard-record");
-                    records.forEach((r) => {
-                      (r as HTMLInputElement).style.height = "44px";
-                    });
-                  }
-                }}
-                ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
-                <span>{pageNumber}/{pageMax}</span>
-                <button onClick={() => {
-                  if (pageNumber !== pageMax) {
-                    setPageNumber(prevPageNumber => prevPageNumber + 1);
-                    const records = document.querySelectorAll(".profileboard-record");
-                    records.forEach((r) => {
-                      (r as HTMLInputElement).style.height = "44px";
-                    });
-                  }
-                }}
-                ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+                <button
+                  onClick={() => {
+                    if (pageNumber !== 1) {
+                      setPageNumber(prevPageNumber => prevPageNumber - 1);
+                      const records = document.querySelectorAll(
+                        '.profileboard-record'
+                      );
+                      records.forEach(r => {
+                        (r as HTMLInputElement).style.height = '44px';
+                      });
+                    }
+                  }}
+                >
+                  <i
+                    className="triangle"
+                    style={{ position: 'relative', left: '-5px' }}
+                  ></i>{' '}
+                </button>
+                <span>
+                  {pageNumber}/{pageMax}
+                </span>
+                <button
+                  onClick={() => {
+                    if (pageNumber !== pageMax) {
+                      setPageNumber(prevPageNumber => prevPageNumber + 1);
+                      const records = document.querySelectorAll(
+                        '.profileboard-record'
+                      );
+                      records.forEach(r => {
+                        (r as HTMLInputElement).style.height = '44px';
+                      });
+                    }
+                  }}
+                >
+                  <i
+                    className="triangle"
+                    style={{
+                      position: 'relative',
+                      left: '5px',
+                      transform: 'rotate(180deg)',
+                    }}
+                  ></i>{' '}
+                </button>
               </div>
             </div>
           </div>
           <hr />
-          <div id='profileboard-records'>
-
-            {game === "0"
-              ? (
-
-                profile.records.sort((a, b) => a.map_id - b.map_id)
-                  .map((r, index) => (
-
-                    Math.ceil((index + 1) / 20) === pageNumber ? (
-                      <button className="profileboard-record" key={index}>
-                        {r.scores.map((e, i) => (<>
-                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
-
-                          <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
-
-                          <span style={{ display: "grid" }}>{e.score_count}</span>
-
-                          <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
-                          <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
-                          <span> </span>
-                          {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
-                          <span>{e.date.split("T")[0]}</span>
-                          <span style={{ flexDirection: "row-reverse" }}>
-
-                            <button style={{ marginRight: "10px" }} onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
-                            <button onClick={() => { _delete_submission(r.map_id, e.record_id) }}><img src={DeleteIcon}></img></button>
-                            <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
-                            {i === 0 && r.scores.length > 1 ? <button onClick={() => {
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${r.scores.length * 46}px` :
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
-                            }
-                            }><img src={HistoryIcon} alt="history" /></button> : ""}
-
+          <div id="profileboard-records">
+            {game === '0' ? (
+              profile.records
+                .sort((a, b) => a.map_id - b.map_id)
+                .map((r, index) =>
+                  Math.ceil((index + 1) / 20) === pageNumber ? (
+                    <button className="profileboard-record" key={index}>
+                      {r.scores.map((e, i) => (
+                        <>
+                          {i !== 0 ? (
+                            <hr style={{ gridColumn: '1 / span 8' }} />
+                          ) : (
+                            ''
+                          )}
+
+                          <Link to={`/maps/${r.map_id}`}>
+                            <span>{r.map_name}</span>
+                          </Link>
+
+                          <span style={{ display: 'grid' }}>
+                            {e.score_count}
                           </span>
-                        </>))}
-
-                      </button>
-                    ) : ""
-                  ))) : maps ?
 
-                maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
-                  .map((r, index) => {
-                    if (Math.ceil((index + 1) / 20) === pageNumber) {
-                      let record = profile.records.find((e) => e.map_id === r.id);
-                      return record === undefined ? (
-                        <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
-                          <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
-                          <span style={{ display: "grid" }}>N/A</span>
-                          <span style={{ display: "grid" }}>N/A</span>
-                          <span>N/A</span>
+                          <span style={{ display: 'grid' }}>
+                            {e.score_count - r.map_wr_count > 0
+                              ? `+${e.score_count - r.map_wr_count}`
+                              : `-`}
+                          </span>
+                          <span style={{ display: 'grid' }}>
+                            {ticks_to_time(e.score_time)}
+                          </span>
                           <span> </span>
-                          <span>N/A</span>
-                          <span>N/A</span>
-                          <span style={{ flexDirection: "row-reverse" }}></span>
-                        </button>
-                      ) : (
-                        <button className="profileboard-record" key={index}>
-                          {record.scores.map((e, i) => (<>
-                            {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
-                            <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
-                            <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
+                          {i === 0 ? (
+                            <span>#{r.placement}</span>
+                          ) : (
                             <span> </span>
-                            {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
-                            <span>{record!.scores[i].date.split("T")[0]}</span>
-                            <span style={{ flexDirection: "row-reverse" }}>
-
-                              <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
-                              <button onClick={() => { _delete_submission(r.id, e.record_id) }}><img src={DeleteIcon}></img></button>
-                              <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
-                              {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
-                                  (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
-                                  (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
-                                  (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                          )}
+                          <span>{e.date.split('T')[0]}</span>
+                          <span style={{ flexDirection: 'row-reverse' }}>
+                            <button
+                              style={{ marginRight: '10px' }}
+                              onClick={() => {
+                                message(
+                                  'Demo Information',
+                                  `Demo ID: ${e.demo_id}`
+                                );
+                              }}
+                            >
+                              <img src={ThreedotIcon} alt="demo_id" />
+                            </button>
+                            <button
+                              onClick={() => {
+                                _delete_submission(r.map_id, e.record_id);
+                              }}
+                            >
+                              <img src={DeleteIcon}></img>
+                            </button>
+                            <button
+                              onClick={() =>
+                                (window.location.href = `/api/v1/demos?uuid=${e.demo_id}`)
                               }
-                              }><img src={HistoryIcon} alt="history" /></button> : ""}
-
+                            >
+                              <img src={DownloadIcon} alt="download" />
+                            </button>
+                            {i === 0 && r.scores.length > 1 ? (
+                              <button
+                                onClick={() => {
+                                  (
+                                    document.querySelectorAll(
+                                      '.profileboard-record'
+                                    )[index % 20] as HTMLInputElement
+                                  ).style.height === '44px' ||
+                                  (
+                                    document.querySelectorAll(
+                                      '.profileboard-record'
+                                    )[index % 20] as HTMLInputElement
+                                  ).style.height === ''
+                                    ? ((
+                                        document.querySelectorAll(
+                                          '.profileboard-record'
+                                        )[index % 20] as HTMLInputElement
+                                      ).style.height =
+                                        `${r.scores.length * 46}px`)
+                                    : ((
+                                        document.querySelectorAll(
+                                          '.profileboard-record'
+                                        )[index % 20] as HTMLInputElement
+                                      ).style.height = '44px');
+                                }}
+                              >
+                                <img src={HistoryIcon} alt="history" />
+                              </button>
+                            ) : (
+                              ''
+                            )}
+                          </span>
+                        </>
+                      ))}
+                    </button>
+                  ) : (
+                    ''
+                  )
+                )
+            ) : maps ? (
+              maps
+                .filter(e => e.is_disabled === false)
+                .sort((a, b) => a.id - b.id)
+                .map((r, index) => {
+                  if (Math.ceil((index + 1) / 20) === pageNumber) {
+                    let record = profile.records.find(e => e.map_id === r.id);
+                    return record === undefined ? (
+                      <button
+                        className="profileboard-record"
+                        key={index}
+                        style={{ backgroundColor: '#1b1b20' }}
+                      >
+                        <Link to={`/maps/${r.id}`}>
+                          <span>{r.name}</span>
+                        </Link>
+                        <span style={{ display: 'grid' }}>N/A</span>
+                        <span style={{ display: 'grid' }}>N/A</span>
+                        <span>N/A</span>
+                        <span> </span>
+                        <span>N/A</span>
+                        <span>N/A</span>
+                        <span style={{ flexDirection: 'row-reverse' }}></span>
+                      </button>
+                    ) : (
+                      <button className="profileboard-record" key={index}>
+                        {record.scores.map((e, i) => (
+                          <>
+                            {i !== 0 ? (
+                              <hr style={{ gridColumn: '1 / span 8' }} />
+                            ) : (
+                              ''
+                            )}
+                            <Link to={`/maps/${r.id}`}>
+                              <span>{r.name}</span>
+                            </Link>
+                            <span style={{ display: 'grid' }}>
+                              {record!.scores[i].score_count}
                             </span>
-                          </>))}
-                        </button>
-
-                      )
-                    } else { return null }
-                  }) : (<>{console.warn(maps)}</>)}
+                            <span style={{ display: 'grid' }}>
+                              {record!.scores[i].score_count -
+                                record!.map_wr_count >
+                              0
+                                ? `+${record!.scores[i].score_count - record!.map_wr_count}`
+                                : `-`}
+                            </span>
+                            <span style={{ display: 'grid' }}>
+                              {ticks_to_time(record!.scores[i].score_time)}
+                            </span>
+                            <span> </span>
+                            {i === 0 ? (
+                              <span>#{record!.placement}</span>
+                            ) : (
+                              <span> </span>
+                            )}
+                            <span>{record!.scores[i].date.split('T')[0]}</span>
+                            <span style={{ flexDirection: 'row-reverse' }}>
+                              <button
+                                onClick={() => {
+                                  message(
+                                    'Demo Information',
+                                    `Demo ID: ${e.demo_id}`
+                                  );
+                                }}
+                              >
+                                <img src={ThreedotIcon} alt="demo_id" />
+                              </button>
+                              <button
+                                onClick={() => {
+                                  _delete_submission(r.id, e.record_id);
+                                }}
+                              >
+                                <img src={DeleteIcon}></img>
+                              </button>
+                              <button
+                                onClick={() =>
+                                  (window.location.href = `/api/v1/demos?uuid=${e.demo_id}`)
+                                }
+                              >
+                                <img src={DownloadIcon} alt="download" />
+                              </button>
+                              {i === 0 && record!.scores.length > 1 ? (
+                                <button
+                                  onClick={() => {
+                                    (
+                                      document.querySelectorAll(
+                                        '.profileboard-record'
+                                      )[index % 20] as HTMLInputElement
+                                    ).style.height === '44px' ||
+                                    (
+                                      document.querySelectorAll(
+                                        '.profileboard-record'
+                                      )[index % 20] as HTMLInputElement
+                                    ).style.height === ''
+                                      ? ((
+                                          document.querySelectorAll(
+                                            '.profileboard-record'
+                                          )[index % 20] as HTMLInputElement
+                                        ).style.height =
+                                          `${record!.scores.length * 46}px`)
+                                      : ((
+                                          document.querySelectorAll(
+                                            '.profileboard-record'
+                                          )[index % 20] as HTMLInputElement
+                                        ).style.height = '44px');
+                                  }}
+                                >
+                                  <img src={HistoryIcon} alt="history" />
+                                </button>
+                              ) : (
+                                ''
+                              )}
+                            </span>
+                          </>
+                        ))}
+                      </button>
+                    );
+                  } else {
+                    return null;
+                  }
+                })
+            ) : (
+              <>{console.warn(maps)}</>
+            )}
           </div>
         </section>
       </main>
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..885638d 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -1,147 +1,200 @@
-import React, { useEffect } from "react";
-import { Helmet } from "react-helmet";
+import React, { useEffect } from 'react';
+import { Helmet } from 'react-helmet';
 
-import RankingEntry from "@components/RankingEntry";
-import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking";
-import { API } from "@api/Api";
+import RankingEntry from '@components/RankingEntry';
+import {
+  Ranking,
+  SteamRanking,
+  RankingType,
+  SteamRankingType,
+} from '@customTypes/Ranking';
+import { API } from '@api/Api';
 
-import "@css/Rankings.css";
+import '@css/Rankings.css';
 
 const Rankings: React.FC = () => {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
-    enum LeaderboardTypes {
-        official,
-        unofficial
+  const [leaderboardData, setLeaderboardData] = React.useState<
+    Ranking | SteamRanking
+  >();
+  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<
+    RankingType[] | SteamRankingType[]
+  >();
+  enum LeaderboardTypes {
+    official,
+    unofficial,
+  }
+  const [currentRankingType, setCurrentRankingType] =
+    React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+
+  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+
+  enum RankingCategories {
+    rankings_overall,
+    rankings_multiplayer,
+    rankings_singleplayer,
+  }
+  const [currentLeaderboardType, setCurrentLeaderboardType] =
+    React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  const [load, setLoad] = React.useState<boolean>(false);
+
+  const _fetch_rankings = async () => {
+    setLeaderboardLoad(false);
+    const rankings = await API.get_official_rankings();
+    setLeaderboardData(rankings);
+    if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(rankings.rankings_singleplayer);
+    } else if (
+      currentLeaderboardType == RankingCategories.rankings_multiplayer
+    ) {
+      setCurrentLeaderboard(rankings.rankings_multiplayer);
+    } else {
+      setCurrentLeaderboard(rankings.rankings_overall);
     }
-    const [currentRankingType, setCurrentRankingType] = React.useState<LeaderboardTypes>(LeaderboardTypes.official);
-
-    const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
-
-    enum RankingCategories {
-        rankings_overall,
-        rankings_multiplayer,
-        rankings_singleplayer
-    }
-    const [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
-    const [load, setLoad] = React.useState<boolean>(false);
-
-    const _fetch_rankings = async () => {
-        setLeaderboardLoad(false);
-        const rankings = await API.get_official_rankings();
-        setLeaderboardData(rankings);
-        if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-            setCurrentLeaderboard(rankings.rankings_singleplayer)
-        } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(rankings.rankings_multiplayer)
-        } else {
-            setCurrentLeaderboard(rankings.rankings_overall)
-        }
-        setLoad(true);
-        setLeaderboardLoad(true);
+    setLoad(true);
+    setLeaderboardLoad(true);
+  };
+
+  const __dev_fetch_unofficial_rankings = async () => {
+    try {
+      setLeaderboardLoad(false);
+      const rankings = await API.get_unofficial_rankings();
+      setLeaderboardData(rankings);
+      if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+        setCurrentLeaderboard(rankings.rankings_singleplayer);
+      } else if (
+        currentLeaderboardType == RankingCategories.rankings_multiplayer
+      ) {
+        setCurrentLeaderboard(rankings.rankings_multiplayer);
+      } else {
+        setCurrentLeaderboard(rankings.rankings_overall);
+      }
+      setLeaderboardLoad(true);
+    } catch (e) {
+      console.log(e);
     }
-
-    const __dev_fetch_unofficial_rankings = async () => {
-        try {
-            setLeaderboardLoad(false);
-            const rankings = await API.get_unofficial_rankings();
-            setLeaderboardData(rankings);
-            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
-                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
-                setCurrentLeaderboard(rankings.rankings_singleplayer)
-            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
-                setCurrentLeaderboard(rankings.rankings_multiplayer)
-            } else {
-                setCurrentLeaderboard(rankings.rankings_overall)
-            }
-            setLeaderboardLoad(true);
-        } catch (e) {
-            console.log(e)
-        }
+  };
+
+  const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
+    if (ranking_cat == RankingCategories.rankings_singleplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
+    } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
+      setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
+    } else {
+      setCurrentLeaderboard(leaderboardData!.rankings_overall);
     }
 
-    const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
-        if (ranking_cat == RankingCategories.rankings_singleplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-        } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
-            setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-        } else {
-            setCurrentLeaderboard(leaderboardData!.rankings_overall);
-        }
+    setCurrentLeaderboardType(ranking_cat);
+  };
 
-        setCurrentLeaderboardType(ranking_cat);
+  const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+    if (leaderboard_type == LeaderboardTypes.official) {
+      _fetch_rankings();
+    } else {
     }
+  };
 
-    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
-        if (leaderboard_type == LeaderboardTypes.official) {
-            _fetch_rankings();
-        } else {
-
-        }
+  useEffect(() => {
+    _fetch_rankings();
+    if (load) {
+      _set_current_leaderboard(RankingCategories.rankings_singleplayer);
     }
-
-    useEffect(() => {
-        _fetch_rankings();
-        if (load) {
-            _set_current_leaderboard(RankingCategories.rankings_singleplayer);
-        }
-    }, [load])
-
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Rankings</title>
-            </Helmet>
-            <section className="nav-container nav-1">
-                <div>
-                    <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
-                        <span>Official (LPHUB)</span>
-                    </button>
-                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
-                        <span>Unofficial (Steam)</span>
-                    </button>
-                </div>
-            </section>
-            <section className="nav-container nav-2">
-                <div>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
-                        <span>Singleplayer</span>
-                    </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
-                        <span>Cooperative</span>
-                    </button>
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
-                        <span>Overall</span>
-                    </button>
-                </div>
-            </section>
-
-            {load ?
-                <section className="rankings-leaderboard">
-                    <div className="ranks-container">
-                        <div className="leaderboard-entry header">
-                            <span>Rank</span>
-                            <span>Player</span>
-                            <span>Portals</span>
-                        </div>
-
-                        <div className="splitter"></div>
-
-                        {leaderboardLoad && currentLeaderboard?.map((curRankingData, i) => {
-                            return <RankingEntry currentLeaderboardType={currentLeaderboardType} curRankingData={curRankingData} key={i}></RankingEntry>
-                        })
-                        }
-
-                        {leaderboardLoad ? null :
-                            <div style={{ display: "flex", justifyContent: "center", margin: "30px 0px" }}>
-                                <span className="loader"></span>
-                            </div>
-                        }
-                    </div>
-                </section>
-                : null}
-        </main>
-    )
-}
+  }, [load]);
+
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Rankings</title>
+      </Helmet>
+      <section className="nav-container nav-1">
+        <div>
+          <button
+            onClick={() => {
+              _fetch_rankings();
+              setCurrentRankingType(LeaderboardTypes.official);
+            }}
+            className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? 'selected' : ''}`}
+          >
+            <span>Official (LPHUB)</span>
+          </button>
+          <button
+            onClick={() => {
+              __dev_fetch_unofficial_rankings();
+              setCurrentRankingType(LeaderboardTypes.unofficial);
+            }}
+            className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? 'selected' : ''}`}
+          >
+            <span>Unofficial (Steam)</span>
+          </button>
+        </div>
+      </section>
+      <section className="nav-container nav-2">
+        <div>
+          <button
+            onClick={() =>
+              _set_current_leaderboard(RankingCategories.rankings_singleplayer)
+            }
+            className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? 'selected' : ''}`}
+          >
+            <span>Singleplayer</span>
+          </button>
+          <button
+            onClick={() =>
+              _set_current_leaderboard(RankingCategories.rankings_multiplayer)
+            }
+            className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? 'selected' : ''}`}
+          >
+            <span>Cooperative</span>
+          </button>
+          <button
+            onClick={() =>
+              _set_current_leaderboard(RankingCategories.rankings_overall)
+            }
+            className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? 'selected' : ''}`}
+          >
+            <span>Overall</span>
+          </button>
+        </div>
+      </section>
+
+      {load ? (
+        <section className="rankings-leaderboard">
+          <div className="ranks-container">
+            <div className="leaderboard-entry header">
+              <span>Rank</span>
+              <span>Player</span>
+              <span>Portals</span>
+            </div>
+
+            <div className="splitter"></div>
+
+            {leaderboardLoad &&
+              currentLeaderboard?.map((curRankingData, i) => {
+                return (
+                  <RankingEntry
+                    currentLeaderboardType={currentLeaderboardType}
+                    curRankingData={curRankingData}
+                    key={i}
+                  ></RankingEntry>
+                );
+              })}
+
+            {leaderboardLoad ? null : (
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  margin: '30px 0px',
+                }}
+              >
+                <span className="loader"></span>
+              </div>
+            )}
+          </div>
+        </section>
+      ) : null}
+    </main>
+  );
+};
 
 export default Rankings;
diff --git a/frontend/src/pages/Rules.tsx b/frontend/src/pages/Rules.tsx
index 9f57b7e..7a774bc 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -5,37 +5,35 @@ import { Helmet } from 'react-helmet';
 import '@css/Rules.css';
 
 const Rules: React.FC = () => {
+  const [rulesText, setRulesText] = React.useState<string>('');
 
-    const [rulesText, setRulesText] = React.useState<string>("");
+  React.useEffect(() => {
+    const fetchRules = async () => {
+      try {
+        const response = await fetch(
+          'https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md'
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch README');
+        }
+        const rulesText = await response.text();
+        setRulesText(rulesText);
+      } catch (error) {
+        console.error('Error fetching Rules:', error);
+      }
+      // setRulesText(rulesText)
+    };
+    fetchRules();
+  }, []);
 
-    React.useEffect(() => {
-        const fetchRules = async () => {
-            try {
-                const response = await fetch(
-                    'https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md'
-                );
-                if (!response.ok) {
-                    throw new Error('Failed to fetch README');
-                }
-                const rulesText = await response.text();
-                setRulesText(rulesText);
-            } catch (error) {
-                console.error('Error fetching Rules:', error);
-            }
-            // setRulesText(rulesText)
-        };
-        fetchRules();
-    }, []);
-
-
-    return (
-        <main>
-            <Helmet>
-                <title>LPHUB | Rules</title>
-            </Helmet>
-            <ReactMarkdown>{rulesText}</ReactMarkdown>
-        </main>
-    );
+  return (
+    <main>
+      <Helmet>
+        <title>LPHUB | Rules</title>
+      </Helmet>
+      <ReactMarkdown>{rulesText}</ReactMarkdown>
+    </main>
+  );
 };
 
 export default Rules;
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index d43c0c6..b6dfbd3 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -2,13 +2,24 @@ import React from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images';
+import {
+  SteamIcon,
+  TwitchIcon,
+  YouTubeIcon,
+  PortalIcon,
+  FlagIcon,
+  StatisticsIcon,
+  SortIcon,
+  ThreedotIcon,
+  DownloadIcon,
+  HistoryIcon,
+} from '@images/Images';
 import { UserProfile } from '@customTypes/Profile';
 import { Game, GameChapters } from '@customTypes/Game';
 import { Map } from '@customTypes/Map';
 import { API } from '@api/Api';
 import { ticks_to_time } from '@utils/Time';
-import "@css/Profile.css";
+import '@css/Profile.css';
 import useMessage from '@hooks/UseMessage';
 
 interface UserProps {
@@ -18,7 +29,6 @@ interface UserProps {
 }
 
 const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
-
   const { message, MessageDialogComponent } = useMessage();
 
   const [user, setUser] = React.useState<UserProfile | undefined>(undefined);
@@ -27,18 +37,20 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
   const [pageNumber, setPageNumber] = React.useState(1);
   const [pageMax, setPageMax] = React.useState(0);
 
-  const [game, setGame] = React.useState("0");
-  const [chapter, setChapter] = React.useState("0");
-  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [game, setGame] = React.useState('0');
+  const [chapter, setChapter] = React.useState('0');
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(
+    null
+  );
   const [maps, setMaps] = React.useState<Map[]>([]);
 
   const location = useLocation();
   const navigate = useNavigate();
 
   const _fetch_user = async () => {
-    const userID = location.pathname.split("/")[2];
+    const userID = location.pathname.split('/')[2];
     if (token && profile && profile.profile && profile.steam_id === userID) {
-      navigate("/profile");
+      navigate('/profile');
       return;
     }
     const userData = await API.get_user(userID);
@@ -46,7 +58,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
   };
 
   const _get_game_chapters = async () => {
-    if (game !== "0") {
+    if (game !== '0') {
       const gameChapters = await API.get_games_chapters(game);
       setChapterData(gameChapters);
     } else {
@@ -56,7 +68,7 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
   };
 
   const _get_game_maps = async () => {
-    if (chapter === "0") {
+    if (chapter === '0') {
       const gameMaps = await API.get_game_maps(game);
       setMaps(gameMaps);
       setPageMax(Math.ceil(gameMaps.length / 20));
@@ -80,16 +92,14 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
   }, [user, game, location]);
 
   React.useEffect(() => {
-    if (user && game !== "0") {
+    if (user && game !== '0') {
       _get_game_maps();
     }
-  }, [user, game, chapter, location])
+  }, [user, game, chapter, location]);
 
   if (!user) {
-    return (
-      <></>
-    );
-  };
+    return <></>;
+  }
 
   return (
     <main>
@@ -98,218 +108,461 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
         <meta name="description" content={user.user_name} />
       </Helmet>
       {MessageDialogComponent}
-      <section id='section1' className='profile'>
+      <section id="section1" className="profile">
         <div>
           <img src={user.avatar_link} alt="profile-image"></img>
         </div>
-        <div id='profile-top'>
+        <div id="profile-top">
           <div>
             <div>{user.user_name}</div>
             <div>
-              {user.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`} alt={user.country_code} />}
+              {user.country_code === 'XX' ? (
+                ''
+              ) : (
+                <img
+                  src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`}
+                  alt={user.country_code}
+                />
+              )}
             </div>
             <div>
               {user.titles.map(e => (
-                <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                <span
+                  className="titles"
+                  style={{ backgroundColor: `#${e.color}` }}
+                >
                   {e.name}
                 </span>
               ))}
             </div>
           </div>
           <div>
-            {user.links.steam === "-" ? "" : <a href={user.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
-            {user.links.twitch === "-" ? "" : <a href={user.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
-            {user.links.youtube === "-" ? "" : <a href={user.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
-            {user.links.p2sr === "-" ? "" : <a href={user.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+            {user.links.steam === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.steam}>
+                <img src={SteamIcon} alt="Steam" />
+              </a>
+            )}
+            {user.links.twitch === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.twitch}>
+                <img src={TwitchIcon} alt="Twitch" />
+              </a>
+            )}
+            {user.links.youtube === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.youtube}>
+                <img src={YouTubeIcon} alt="Youtube" />
+              </a>
+            )}
+            {user.links.p2sr === '-' ? (
+              ''
+            ) : (
+              <a href={user.links.p2sr}>
+                <img src={PortalIcon} alt="P2SR" style={{ padding: '0' }} />
+              </a>
+            )}
           </div>
-
         </div>
-        <div id='profile-bottom'>
+        <div id="profile-bottom">
           <div>
             <span>Overall</span>
-            <span>{user.rankings.overall.rank === 0 ? "N/A " : "#" + user.rankings.overall.rank + " "}
-              <span>({user.rankings.overall.completion_count}/{user.rankings.overall.completion_total})</span>
+            <span>
+              {user.rankings.overall.rank === 0
+                ? 'N/A '
+                : '#' + user.rankings.overall.rank + ' '}
+              <span>
+                ({user.rankings.overall.completion_count}/
+                {user.rankings.overall.completion_total})
+              </span>
             </span>
           </div>
           <div>
             <span>Singleplayer</span>
-            <span>{user.rankings.singleplayer.rank === 0 ? "N/A " : "#" + user.rankings.singleplayer.rank + " "}
-              <span>({user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total})</span>
+            <span>
+              {user.rankings.singleplayer.rank === 0
+                ? 'N/A '
+                : '#' + user.rankings.singleplayer.rank + ' '}
+              <span>
+                ({user.rankings.singleplayer.completion_count}/
+                {user.rankings.singleplayer.completion_total})
+              </span>
             </span>
           </div>
           <div>
             <span>Cooperative</span>
-            <span>{user.rankings.cooperative.rank === 0 ? "N/A " : "#" + user.rankings.cooperative.rank + " "}
-              <span>({user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total})</span>
+            <span>
+              {user.rankings.cooperative.rank === 0
+                ? 'N/A '
+                : '#' + user.rankings.cooperative.rank + ' '}
+              <span>
+                ({user.rankings.cooperative.completion_count}/
+                {user.rankings.cooperative.completion_total})
+              </span>
             </span>
           </div>
         </div>
       </section>
 
-
-      <section id='section2' className='profile'>
-        <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
-        <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+      <section id="section2" className="profile">
+        <button onClick={() => setNavState(0)}>
+          <img src={FlagIcon} alt="" />
+          &nbsp;Player Records
+        </button>
+        <button onClick={() => setNavState(1)}>
+          <img src={StatisticsIcon} alt="" />
+          &nbsp;Statistics
+        </button>
       </section>
 
-
-
-
-
-      <section id='section3' className='profile1'>
-        <div id='profileboard-nav'>
-          {gameData === null ? <select>error</select> :
-
-            <select id='select-game'
+      <section id="section3" className="profile1">
+        <div id="profileboard-nav">
+          {gameData === null ? (
+            <select>error</select>
+          ) : (
+            <select
+              id="select-game"
               onChange={() => {
-                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
-                setChapter("0");
-                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                setGame(
+                  (document.querySelector('#select-game') as HTMLInputElement)
+                    .value
+                );
+                setChapter('0');
+                const chapterSelect = document.querySelector(
+                  '#select-chapter'
+                ) as HTMLSelectElement;
                 if (chapterSelect) {
-                  chapterSelect.value = "0";
+                  chapterSelect.value = '0';
                 }
-              }}>
-              <option value={0} key={0}>All Scores</option>
+              }}
+            >
+              <option value={0} key={0}>
+                All Scores
+              </option>
               {gameData.map((e, i) => (
-                <option value={e.id} key={i + 1}>{e.name}</option>
-              ))}</select>
-          }
+                <option value={e.id} key={i + 1}>
+                  {e.name}
+                </option>
+              ))}
+            </select>
+          )}
 
-          {game === "0" ?
+          {game === '0' ? (
             <select disabled>
               <option>All Chapters</option>
             </select>
-            : chapterData === null ? <select></select> :
-
-              <select id='select-chapter'
-                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
-                <option value="0" key="0">All Chapters</option>
-                {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
-                  <option value={e.id} key={i + 1}>{e.name}</option>
-                ))}</select>
-          }
+          ) : chapterData === null ? (
+            <select></select>
+          ) : (
+            <select
+              id="select-chapter"
+              onChange={() =>
+                setChapter(
+                  (
+                    document.querySelector(
+                      '#select-chapter'
+                    ) as HTMLInputElement
+                  ).value
+                )
+              }
+            >
+              <option value="0" key="0">
+                All Chapters
+              </option>
+              {chapterData.chapters
+                .filter(e => e.is_disabled === false)
+                .map((e, i) => (
+                  <option value={e.id} key={i + 1}>
+                    {e.name}
+                  </option>
+                ))}
+            </select>
+          )}
         </div>
-        <div id='profileboard-top'>
-          <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
-          <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+        <div id="profileboard-top">
+          <span>
+            <span>Map Name</span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span style={{ justifyContent: 'center' }}>
+            <span>Portals</span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span style={{ justifyContent: 'center' }}>
+            <span>WRΔ </span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span style={{ justifyContent: 'center' }}>
+            <span>Time</span>
+            <img src={SortIcon} alt="" />
+          </span>
           <span> </span>
-          <span><span>Rank</span><img src={SortIcon} alt="" /></span>
-          <span><span>Date</span><img src={SortIcon} alt="" /></span>
-          <div id='page-number'>
+          <span>
+            <span>Rank</span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <span>
+            <span>Date</span>
+            <img src={SortIcon} alt="" />
+          </span>
+          <div id="page-number">
             <div>
-              <button onClick={() => {
-                if (pageNumber !== 1) {
-                  setPageNumber(prevPageNumber => prevPageNumber - 1);
-                  const records = document.querySelectorAll(".profileboard-record");
-                  records.forEach((r) => {
-                    (r as HTMLInputElement).style.height = "44px";
-                  });
-                }
-              }}
-              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
-              <span>{pageNumber}/{pageMax}</span>
-              <button onClick={() => {
-                if (pageNumber !== pageMax) {
-                  setPageNumber(prevPageNumber => prevPageNumber + 1);
-                  const records = document.querySelectorAll(".profileboard-record");
-                  records.forEach((r) => {
-                    (r as HTMLInputElement).style.height = "44px";
-                  });
-                }
-              }}
-              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+              <button
+                onClick={() => {
+                  if (pageNumber !== 1) {
+                    setPageNumber(prevPageNumber => prevPageNumber - 1);
+                    const records = document.querySelectorAll(
+                      '.profileboard-record'
+                    );
+                    records.forEach(r => {
+                      (r as HTMLInputElement).style.height = '44px';
+                    });
+                  }
+                }}
+              >
+                <i
+                  className="triangle"
+                  style={{ position: 'relative', left: '-5px' }}
+                ></i>{' '}
+              </button>
+              <span>
+                {pageNumber}/{pageMax}
+              </span>
+              <button
+                onClick={() => {
+                  if (pageNumber !== pageMax) {
+                    setPageNumber(prevPageNumber => prevPageNumber + 1);
+                    const records = document.querySelectorAll(
+                      '.profileboard-record'
+                    );
+                    records.forEach(r => {
+                      (r as HTMLInputElement).style.height = '44px';
+                    });
+                  }
+                }}
+              >
+                <i
+                  className="triangle"
+                  style={{
+                    position: 'relative',
+                    left: '5px',
+                    transform: 'rotate(180deg)',
+                  }}
+                ></i>{' '}
+              </button>
             </div>
           </div>
         </div>
         <hr />
-        <div id='profileboard-records'>
-
-          {game === "0"
-            ? (
-
-              user.records.sort((a, b) => a.map_id - b.map_id)
-                .map((r, index) => (
-
-                  Math.ceil((index + 1) / 20) === pageNumber ? (
-                    <button className="profileboard-record" key={index}>
-                      {r.scores.map((e, i) => (<>
-                        {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
-
-                        <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
-
-                        <span style={{ display: "grid" }}>{e.score_count}</span>
-
-                        <span style={{ display: "grid" }}>{e.score_count - r.map_wr_count > 0 ? `+${e.score_count - r.map_wr_count}` : `-`}</span>
-                        <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
+        <div id="profileboard-records">
+          {game === '0' ? (
+            user.records
+              .sort((a, b) => a.map_id - b.map_id)
+              .map((r, index) =>
+                Math.ceil((index + 1) / 20) === pageNumber ? (
+                  <button className="profileboard-record" key={index}>
+                    {r.scores.map((e, i) => (
+                      <>
+                        {i !== 0 ? (
+                          <hr style={{ gridColumn: '1 / span 8' }} />
+                        ) : (
+                          ''
+                        )}
+
+                        <Link to={`/maps/${r.map_id}`}>
+                          <span>{r.map_name}</span>
+                        </Link>
+
+                        <span style={{ display: 'grid' }}>{e.score_count}</span>
+
+                        <span style={{ display: 'grid' }}>
+                          {e.score_count - r.map_wr_count > 0
+                            ? `+${e.score_count - r.map_wr_count}`
+                            : `-`}
+                        </span>
+                        <span style={{ display: 'grid' }}>
+                          {ticks_to_time(e.score_time)}
+                        </span>
                         <span> </span>
                         {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
-                        <span>{e.date.split("T")[0]}</span>
-                        <span style={{ flexDirection: "row-reverse" }}>
-
-                          <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
-                          <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
-                          {i === 0 && r.scores.length > 1 ? <button onClick={() => {
-                            (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${r.scores.length * 46}px` :
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
-                          }
-                          }><img src={HistoryIcon} alt="history" /></button> : ""}
-
+                        <span>{e.date.split('T')[0]}</span>
+                        <span style={{ flexDirection: 'row-reverse' }}>
+                          <button
+                            onClick={() => {
+                              message(
+                                'Demo Information',
+                                `Demo ID: ${e.demo_id}`
+                              );
+                            }}
+                          >
+                            <img src={ThreedotIcon} alt="demo_id" />
+                          </button>
+                          <button
+                            onClick={() =>
+                              (window.location.href = `/api/v1/demos?uuid=${e.demo_id}`)
+                            }
+                          >
+                            <img src={DownloadIcon} alt="download" />
+                          </button>
+                          {i === 0 && r.scores.length > 1 ? (
+                            <button
+                              onClick={() => {
+                                (
+                                  document.querySelectorAll(
+                                    '.profileboard-record'
+                                  )[index % 20] as HTMLInputElement
+                                ).style.height === '44px' ||
+                                (
+                                  document.querySelectorAll(
+                                    '.profileboard-record'
+                                  )[index % 20] as HTMLInputElement
+                                ).style.height === ''
+                                  ? ((
+                                      document.querySelectorAll(
+                                        '.profileboard-record'
+                                      )[index % 20] as HTMLInputElement
+                                    ).style.height =
+                                      `${r.scores.length * 46}px`)
+                                  : ((
+                                      document.querySelectorAll(
+                                        '.profileboard-record'
+                                      )[index % 20] as HTMLInputElement
+                                    ).style.height = '44px');
+                              }}
+                            >
+                              <img src={HistoryIcon} alt="history" />
+                            </button>
+                          ) : (
+                            ''
+                          )}
                         </span>
-                      </>))}
-
+                      </>
+                    ))}
+                  </button>
+                ) : (
+                  ''
+                )
+              )
+          ) : maps ? (
+            maps
+              .filter(e => e.is_disabled === false)
+              .sort((a, b) => a.id - b.id)
+              .map((r, index) => {
+                if (Math.ceil((index + 1) / 20) === pageNumber) {
+                  let record = user.records.find(e => e.map_id === r.id);
+                  return record === undefined ? (
+                    <button
+                      className="profileboard-record"
+                      key={index}
+                      style={{ backgroundColor: '#1b1b20' }}
+                    >
+                      <Link to={`/maps/${r.id}`}>
+                        <span>{r.name}</span>
+                      </Link>
+                      <span style={{ display: 'grid' }}>N/A</span>
+                      <span style={{ display: 'grid' }}>N/A</span>
+                      <span>N/A</span>
+                      <span> </span>
+                      <span>N/A</span>
+                      <span>N/A</span>
+                      <span style={{ flexDirection: 'row-reverse' }}></span>
                     </button>
-                  ) : ""
-                ))) : maps ?
-
-              maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
-                .map((r, index) => {
-                  if (Math.ceil((index + 1) / 20) === pageNumber) {
-                    let record = user.records.find((e) => e.map_id === r.id);
-                    return record === undefined ? (
-                      <button className="profileboard-record" key={index} style={{ backgroundColor: "#1b1b20" }}>
-                        <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
-                        <span style={{ display: "grid" }}>N/A</span>
-                        <span style={{ display: "grid" }}>N/A</span>
-                        <span>N/A</span>
-                        <span> </span>
-                        <span>N/A</span>
-                        <span>N/A</span>
-                        <span style={{ flexDirection: "row-reverse" }}></span>
-                      </button>
-                    ) : (
-                      <button className="profileboard-record" key={index}>
-                        {record.scores.map((e, i) => (<>
-                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
-                          <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count - record!.map_wr_count > 0 ? `+${record!.scores[i].score_count - record!.map_wr_count}` : `-`}</span>
-                          <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
+                  ) : (
+                    <button className="profileboard-record" key={index}>
+                      {record.scores.map((e, i) => (
+                        <>
+                          {i !== 0 ? (
+                            <hr style={{ gridColumn: '1 / span 8' }} />
+                          ) : (
+                            ''
+                          )}
+                          <Link to={`/maps/${r.id}`}>
+                            <span>{r.name}</span>
+                          </Link>
+                          <span style={{ display: 'grid' }}>
+                            {record!.scores[i].score_count}
+                          </span>
+                          <span style={{ display: 'grid' }}>
+                            {record!.scores[i].score_count -
+                              record!.map_wr_count >
+                            0
+                              ? `+${record!.scores[i].score_count - record!.map_wr_count}`
+                              : `-`}
+                          </span>
+                          <span style={{ display: 'grid' }}>
+                            {ticks_to_time(record!.scores[i].score_time)}
+                          </span>
                           <span> </span>
-                          {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
-                          <span>{record!.scores[i].date.split("T")[0]}</span>
-                          <span style={{ flexDirection: "row-reverse" }}>
-
-                            <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
-                            <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
-                            {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "" ?
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = `${record!.scores.length * 46}px` :
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
-                            }
-                            }><img src={HistoryIcon} alt="history" /></button> : ""}
-
+                          {i === 0 ? (
+                            <span>#{record!.placement}</span>
+                          ) : (
+                            <span> </span>
+                          )}
+                          <span>{record!.scores[i].date.split('T')[0]}</span>
+                          <span style={{ flexDirection: 'row-reverse' }}>
+                            <button
+                              onClick={() => {
+                                message(
+                                  'Demo Information',
+                                  `Demo ID: ${e.demo_id}`
+                                );
+                              }}
+                            >
+                              <img src={ThreedotIcon} alt="demo_id" />
+                            </button>
+                            <button
+                              onClick={() =>
+                                (window.location.href = `/api/v1/demos?uuid=${e.demo_id}`)
+                              }
+                            >
+                              <img src={DownloadIcon} alt="download" />
+                            </button>
+                            {i === 0 && record!.scores.length > 1 ? (
+                              <button
+                                onClick={() => {
+                                  (
+                                    document.querySelectorAll(
+                                      '.profileboard-record'
+                                    )[index % 20] as HTMLInputElement
+                                  ).style.height === '44px' ||
+                                  (
+                                    document.querySelectorAll(
+                                      '.profileboard-record'
+                                    )[index % 20] as HTMLInputElement
+                                  ).style.height === ''
+                                    ? ((
+                                        document.querySelectorAll(
+                                          '.profileboard-record'
+                                        )[index % 20] as HTMLInputElement
+                                      ).style.height =
+                                        `${record!.scores.length * 46}px`)
+                                    : ((
+                                        document.querySelectorAll(
+                                          '.profileboard-record'
+                                        )[index % 20] as HTMLInputElement
+                                      ).style.height = '44px');
+                                }}
+                              >
+                                <img src={HistoryIcon} alt="history" />
+                              </button>
+                            ) : (
+                              ''
+                            )}
                           </span>
-                        </>))}
-                      </button>
-
-                    )
-                  } else { return null }
-                }) : (<>{console.warn(maps)}</>)}
+                        </>
+                      ))}
+                    </button>
+                  );
+                } else {
+                  return null;
+                }
+              })
+          ) : (
+            <>{console.warn(maps)}</>
+          )}
         </div>
       </section>
     </main>
diff --git a/frontend/src/react-app-env.d.ts b/frontend/src/react-app-env.d.ts
index 8265915..9bf083a 100644
--- a/frontend/src/react-app-env.d.ts
+++ b/frontend/src/react-app-env.d.ts
@@ -1,2 +1,2 @@
-declare module "*.png";
-declare module "*.css";
+declare module '*.png';
+declare module '*.css';
diff --git a/frontend/src/types/Chapters.ts b/frontend/src/types/Chapters.ts
index 1d48306..8924b97 100644
--- a/frontend/src/types/Chapters.ts
+++ b/frontend/src/types/Chapters.ts
@@ -1,19 +1,19 @@
-import type { Game } from "@customTypes/Game";
-import type { Map } from "@customTypes/Map";
+import type { Game } from '@customTypes/Game';
+import type { Map } from '@customTypes/Map';
 
 interface Chapter {
-    id: number;
-    name: string;
-    image: string;
-    is_disabled: boolean;
+  id: number;
+  name: string;
+  image: string;
+  is_disabled: boolean;
 }
 
 export interface GameChapter {
-    chapter: Chapter;
-    maps: Map[];
+  chapter: Chapter;
+  maps: Map[];
 }
 
 export interface GamesChapters {
-    game: Game;
-    chapters: Chapter[];
-}
\ No newline at end of file
+  game: Game;
+  chapters: Chapter[];
+}
diff --git a/frontend/src/types/Content.ts b/frontend/src/types/Content.ts
index 775fab4..77b3970 100644
--- a/frontend/src/types/Content.ts
+++ b/frontend/src/types/Content.ts
@@ -6,18 +6,18 @@ export interface ModMenuContent {
   showcase: string;
   description: string;
   category_id: number;
-};
+}
 
 export interface MapDiscussionContent {
   title: string;
   content: string;
-};
+}
 
 export interface MapDiscussionCommentContent {
   comment: string;
-};
+}
 
 export interface UploadRunContent {
   host_demo: File | null;
   partner_demo: File | null;
-};
+}
diff --git a/frontend/src/types/Game.ts b/frontend/src/types/Game.ts
index 1a80341..be2cd73 100644
--- a/frontend/src/types/Game.ts
+++ b/frontend/src/types/Game.ts
@@ -1,37 +1,36 @@
 import type { Map } from '@customTypes/Map';
 
-
 export interface Game {
   id: number;
   name: string;
   image: string;
   is_coop: boolean;
   category_portals: GameCategoryPortals[];
-};
+}
 
 export interface GameChapters {
   game: Game;
   chapters: Chapter[];
-};
+}
 
 export interface GameMaps {
   game: Game;
   maps: Map[];
-};
+}
 
 export interface Category {
   id: number;
   name: string;
-};
+}
 
 interface Chapter {
   id: number;
   name: string;
   image: string;
   is_disabled: boolean;
-};
+}
 
 export interface GameCategoryPortals {
   category: Category;
   portal_count: number;
-};
+}
diff --git a/frontend/src/types/Map.ts b/frontend/src/types/Map.ts
index 89c66d5..6bc6369 100644
--- a/frontend/src/types/Map.ts
+++ b/frontend/src/types/Map.ts
@@ -9,15 +9,15 @@ export interface Map {
   is_disabled: boolean;
   difficulty: number;
   category_portals: GameCategoryPortals[];
-};
+}
 
 export interface MapDiscussion {
   discussion: MapDiscussionsDetail;
-};
+}
 
 export interface MapDiscussions {
   discussions: MapDiscussionsDetail[];
-};
+}
 
 export interface MapDiscussionsDetail {
   id: number;
@@ -27,22 +27,24 @@ export interface MapDiscussionsDetail {
   comments: MapDiscussionDetailComment[];
   created_at: string;
   updated_at: string;
-};
+}
 
 interface MapDiscussionDetailComment {
   comment: string;
   date: string;
   user: UserShort;
-};
+}
 
 export interface MapLeaderboard {
   map: MapSummaryMap;
-  records: MapLeaderboardRecordSingleplayer[] | MapLeaderboardRecordMultiplayer[];
+  records:
+    | MapLeaderboardRecordSingleplayer[]
+    | MapLeaderboardRecordMultiplayer[];
   pagination: Pagination;
-};
+}
 
 export interface MapLeaderboardRecordSingleplayer {
-  kind: "singleplayer";
+  kind: 'singleplayer';
   placement: number;
   record_id: number;
   score_count: number;
@@ -50,10 +52,10 @@ export interface MapLeaderboardRecordSingleplayer {
   user: UserShort;
   demo_id: string;
   record_date: string;
-};
+}
 
 export interface MapLeaderboardRecordMultiplayer {
-  kind: "multiplayer";
+  kind: 'multiplayer';
   placement: number;
   record_id: number;
   score_count: number;
@@ -63,13 +65,12 @@ export interface MapLeaderboardRecordMultiplayer {
   host_demo_id: string;
   partner_demo_id: string;
   record_date: string;
-};
-
+}
 
 export interface MapSummary {
   map: MapSummaryMap;
   summary: MapSummaryDetails;
-};
+}
 
 interface MapSummaryMap {
   id: number;
@@ -79,11 +80,11 @@ interface MapSummaryMap {
   map_name: string;
   is_coop: boolean;
   is_disabled: boolean;
-};
+}
 
 interface MapSummaryDetails {
   routes: MapSummaryDetailsRoute[];
-};
+}
 
 interface MapSummaryDetailsRoute {
   route_id: number;
@@ -93,16 +94,15 @@ interface MapSummaryDetailsRoute {
   completion_count: number;
   description: string;
   showcase: string;
-};
+}
 
 interface MapSummaryDetailsRouteHistory {
   runner_name: string;
   score_count: number;
   date: string;
-};
+}
 
 export interface MapDeleteEndpoint {
   map_id: number;
   record_id: number;
 }
-
diff --git a/frontend/src/types/MapNames.ts b/frontend/src/types/MapNames.ts
index b6313e7..9ea9851 100644
--- a/frontend/src/types/MapNames.ts
+++ b/frontend/src/types/MapNames.ts
@@ -1,127 +1,127 @@
 export const MapNames: { [key: string]: number } = {
-    "sp_a1_intro1": 1,
-    "sp_a1_intro2": 2,
-    "sp_a1_intro3": 3,
-    "sp_a1_intro4": 4,
-    "sp_a1_intro5": 5,
-    "sp_a1_intro6": 6,
-    "sp_a1_intro7": 7,
-    "sp_a1_wakeup": 8,
-    "sp_a2_intro": 9,
+  sp_a1_intro1: 1,
+  sp_a1_intro2: 2,
+  sp_a1_intro3: 3,
+  sp_a1_intro4: 4,
+  sp_a1_intro5: 5,
+  sp_a1_intro6: 6,
+  sp_a1_intro7: 7,
+  sp_a1_wakeup: 8,
+  sp_a2_intro: 9,
 
-    "sp_a2_laser_intro": 10,
-    "sp_a2_laser_stairs": 11,
-    "sp_a2_dual_lasers": 12,
-    "sp_a2_laser_over_goo": 13,
-    "sp_a2_catapult_intro": 14,
-    "sp_a2_trust_fling": 15,
-    "sp_a2_pit_flings": 16,
-    "sp_a2_fizzler_intro": 17,
+  sp_a2_laser_intro: 10,
+  sp_a2_laser_stairs: 11,
+  sp_a2_dual_lasers: 12,
+  sp_a2_laser_over_goo: 13,
+  sp_a2_catapult_intro: 14,
+  sp_a2_trust_fling: 15,
+  sp_a2_pit_flings: 16,
+  sp_a2_fizzler_intro: 17,
 
-    "sp_a2_sphere_peek": 18,
-    "sp_a2_ricochet": 19,
-    "sp_a2_bridge_intro": 20,
-    "sp_a2_bridge_the_gap": 21,
-    "sp_a2_turret_intro": 22,
-    "sp_a2_laser_relays": 23,
-    "sp_a2_turret_blocker": 24,
-    "sp_a2_laser_vs_turret": 25,
-    "sp_a2_pull_the_rug": 26,
+  sp_a2_sphere_peek: 18,
+  sp_a2_ricochet: 19,
+  sp_a2_bridge_intro: 20,
+  sp_a2_bridge_the_gap: 21,
+  sp_a2_turret_intro: 22,
+  sp_a2_laser_relays: 23,
+  sp_a2_turret_blocker: 24,
+  sp_a2_laser_vs_turret: 25,
+  sp_a2_pull_the_rug: 26,
 
-    "sp_a2_column_blocker": 27,
-    "sp_a2_laser_chaining": 28,
-    "sp_a2_triple_laser": 29,
-    "sp_a2_bts1": 30,
-    "sp_a2_bts2": 31,
+  sp_a2_column_blocker: 27,
+  sp_a2_laser_chaining: 28,
+  sp_a2_triple_laser: 29,
+  sp_a2_bts1: 30,
+  sp_a2_bts2: 31,
 
-    "sp_a2_bts3": 32,
-    "sp_a2_bts4": 33,
-    "sp_a2_bts5": 34,
-    "sp_a2_core": 35,
+  sp_a2_bts3: 32,
+  sp_a2_bts4: 33,
+  sp_a2_bts5: 34,
+  sp_a2_core: 35,
 
-    "sp_a3_01": 36,
-    "sp_a3_03": 37,
-    "sp_a3_jump_intro": 38,
-    "sp_a3_bomb_flings": 39,
-    "sp_a3_crazy_box": 40,
-    "sp_a3_transition01": 41,
+  sp_a3_01: 36,
+  sp_a3_03: 37,
+  sp_a3_jump_intro: 38,
+  sp_a3_bomb_flings: 39,
+  sp_a3_crazy_box: 40,
+  sp_a3_transition01: 41,
 
-    "sp_a3_speed_ramp": 42,
-    "sp_a3_speed_flings": 43,
-    "sp_a3_portal_intro": 44,
-    "sp_a3_end": 45,
+  sp_a3_speed_ramp: 42,
+  sp_a3_speed_flings: 43,
+  sp_a3_portal_intro: 44,
+  sp_a3_end: 45,
 
-    "sp_a4_intro": 46,
-    "sp_a4_tb_intro": 47,
-    "sp_a4_tb_trust_drop": 48,
-    "sp_a4_tb_wall_button": 49,
-    "sp_a4_tb_polarity": 50,
-    "sp_a4_tb_catch": 51,
-    "sp_a4_stop_the_box": 52,
-    "sp_a4_laser_catapult": 53,
-    "sp_a4_laser_platform": 54,
-    "sp_a4_speed_tb_catch": 55,
-    "sp_a4_jump_polarity": 56,
+  sp_a4_intro: 46,
+  sp_a4_tb_intro: 47,
+  sp_a4_tb_trust_drop: 48,
+  sp_a4_tb_wall_button: 49,
+  sp_a4_tb_polarity: 50,
+  sp_a4_tb_catch: 51,
+  sp_a4_stop_the_box: 52,
+  sp_a4_laser_catapult: 53,
+  sp_a4_laser_platform: 54,
+  sp_a4_speed_tb_catch: 55,
+  sp_a4_jump_polarity: 56,
 
-    "sp_a4_finale1": 57,
-    "sp_a4_finale2": 58,
-    "sp_a4_finale3": 59,
-    "sp_a4_finale4": 60,
+  sp_a4_finale1: 57,
+  sp_a4_finale2: 58,
+  sp_a4_finale3: 59,
+  sp_a4_finale4: 60,
 
-    "mp_coop_start": 61,
-    "mp_coop_lobby_3": 62,
+  mp_coop_start: 61,
+  mp_coop_lobby_3: 62,
 
-    "mp_coop_doors": 63,
-    "mp_coop_race_2": 64,
-    "mp_coop_laser_2": 65,
-    "mp_coop_rat_maze": 66,
-    "mp_coop_laser_crusher": 67,
-    "mp_coop_teambts": 68,
+  mp_coop_doors: 63,
+  mp_coop_race_2: 64,
+  mp_coop_laser_2: 65,
+  mp_coop_rat_maze: 66,
+  mp_coop_laser_crusher: 67,
+  mp_coop_teambts: 68,
 
-    "mp_coop_fling_3": 69,
-    "mp_coop_infinifling_train": 70,
-    "mp_coop_come_along": 71,
-    "mp_coop_fling_1": 72,
-    "mp_coop_catapult_1": 73,
-    "mp_coop_multifling_1": 74,
-    "mp_coop_fling_crushers": 75,
-    "mp_coop_fan": 76,
+  mp_coop_fling_3: 69,
+  mp_coop_infinifling_train: 70,
+  mp_coop_come_along: 71,
+  mp_coop_fling_1: 72,
+  mp_coop_catapult_1: 73,
+  mp_coop_multifling_1: 74,
+  mp_coop_fling_crushers: 75,
+  mp_coop_fan: 76,
 
-    "mp_coop_wall_intro": 77,
-    "mp_coop_wall_2": 78,
-    "mp_coop_catapult_wall_intro": 79,
-    "mp_coop_wall_block": 80,
-    "mp_coop_catapult_2": 81,
-    "mp_coop_turret_walls": 82,
-    "mp_coop_turret_ball": 83,
-    "mp_coop_wall_5": 84,
+  mp_coop_wall_intro: 77,
+  mp_coop_wall_2: 78,
+  mp_coop_catapult_wall_intro: 79,
+  mp_coop_wall_block: 80,
+  mp_coop_catapult_2: 81,
+  mp_coop_turret_walls: 82,
+  mp_coop_turret_ball: 83,
+  mp_coop_wall_5: 84,
 
-    "mp_coop_tbeam_redirect": 85,
-    "mp_coop_tbeam_drill": 86,
-    "mp_coop_tbeam_catch_grind_1": 87,
-    "mp_coop_tbeam_laser_1": 88,
-    "mp_coop_tbeam_polarity": 89,
-    "mp_coop_tbeam_polarity2": 90,
-    "mp_coop_tbeam_polarity3": 91,
-    "mp_coop_tbeam_maze": 92,
-    "mp_coop_tbeam_end": 93,
+  mp_coop_tbeam_redirect: 85,
+  mp_coop_tbeam_drill: 86,
+  mp_coop_tbeam_catch_grind_1: 87,
+  mp_coop_tbeam_laser_1: 88,
+  mp_coop_tbeam_polarity: 89,
+  mp_coop_tbeam_polarity2: 90,
+  mp_coop_tbeam_polarity3: 91,
+  mp_coop_tbeam_maze: 92,
+  mp_coop_tbeam_end: 93,
 
-    "mp_coop_paint_come_along": 94,
-    "mp_coop_paint_redirect": 95,
-    "mp_coop_paint_bridge": 96,
-    "mp_coop_paint_walljumps": 97,
-    "mp_coop_paint_speed_fling": 98,
-    "mp_coop_paint_red_racer": 99,
-    "mp_coop_paint_speed_catch": 100,
-    "mp_coop_paint_longjump_intro": 101,
+  mp_coop_paint_come_along: 94,
+  mp_coop_paint_redirect: 95,
+  mp_coop_paint_bridge: 96,
+  mp_coop_paint_walljumps: 97,
+  mp_coop_paint_speed_fling: 98,
+  mp_coop_paint_red_racer: 99,
+  mp_coop_paint_speed_catch: 100,
+  mp_coop_paint_longjump_intro: 101,
 
-    "mp_coop_separation_1": 102,
-    "mp_coop_tripleaxis": 103,
-    "mp_coop_catapult_catch": 104,
-    "mp_coop_2paints_1bridge": 105,
-    "mp_coop_paint_conversion": 106,
-    "mp_coop_bridge_catch": 107,
-    "mp_coop_laser_tbeam": 108,
-    "mp_coop_paint_rat_maze": 109,
-    "mp_coop_paint_crazy_box": 110,
+  mp_coop_separation_1: 102,
+  mp_coop_tripleaxis: 103,
+  mp_coop_catapult_catch: 104,
+  mp_coop_2paints_1bridge: 105,
+  mp_coop_paint_conversion: 106,
+  mp_coop_bridge_catch: 107,
+  mp_coop_laser_tbeam: 108,
+  mp_coop_paint_rat_maze: 109,
+  mp_coop_paint_crazy_box: 110,
 };
diff --git a/frontend/src/types/Pagination.ts b/frontend/src/types/Pagination.ts
index ccff04b..18494eb 100644
--- a/frontend/src/types/Pagination.ts
+++ b/frontend/src/types/Pagination.ts
@@ -3,4 +3,4 @@ export interface Pagination {
   total_pages: number;
   current_page: number;
   page_size: number;
-};
+}
diff --git a/frontend/src/types/Profile.ts b/frontend/src/types/Profile.ts
index 42e5c3e..8051ae5 100644
--- a/frontend/src/types/Profile.ts
+++ b/frontend/src/types/Profile.ts
@@ -1,10 +1,10 @@
-import type { Pagination } from "@customTypes/Pagination";
+import type { Pagination } from '@customTypes/Pagination';
 
 export interface UserShort {
   steam_id: string;
   user_name: string;
   avatar_link: string;
-};
+}
 
 export interface UserProfile {
   profile: boolean;
@@ -17,25 +17,25 @@ export interface UserProfile {
   rankings: UserProfileRankings;
   records: UserProfileRecords[];
   pagination: Pagination;
-};
+}
 
 interface UserProfileTitles {
   name: string;
   color: string;
-};
+}
 
 interface UserProfileLinks {
   p2sr: string;
   steam: string;
   youtube: string;
   twitch: string;
-};
+}
 
 interface UserProfileRankings {
   overall: UserProfileRankingsDetail;
   singleplayer: UserProfileRankingsDetail;
   cooperative: UserProfileRankingsDetail;
-};
+}
 
 interface UserProfileRecords {
   game_id: number;
@@ -44,8 +44,8 @@ interface UserProfileRecords {
   map_name: string;
   map_wr_count: number;
   placement: number;
-  scores: UserProfileRecordsScores[]
-};
+  scores: UserProfileRecordsScores[];
+}
 
 interface UserProfileRecordsScores {
   record_id: number;
@@ -53,11 +53,10 @@ interface UserProfileRecordsScores {
   score_count: number;
   score_time: number;
   date: string;
-};
+}
 
 interface UserProfileRankingsDetail {
   rank: number;
   completion_count: number;
   completion_total: number;
-};
-
+}
diff --git a/frontend/src/types/Ranking.ts b/frontend/src/types/Ranking.ts
index a143355..06a5ca4 100644
--- a/frontend/src/types/Ranking.ts
+++ b/frontend/src/types/Ranking.ts
@@ -1,31 +1,31 @@
-import type { UserShort } from "@customTypes/Profile";
+import type { UserShort } from '@customTypes/Profile';
 
 export interface RankingType {
-    placement: number;
-    user: UserShort;
-    total_score: number;
+  placement: number;
+  user: UserShort;
+  total_score: number;
 }
 
 export interface SteamRankingType {
-    user_name: string;
-    avatar_link: string;
-    steam_id: string;
-    sp_score: number;
-    mp_score: number;
-    overall_score: number;
-    sp_rank: number;
-    mp_rank: number;
-    overall_rank: number;
+  user_name: string;
+  avatar_link: string;
+  steam_id: string;
+  sp_score: number;
+  mp_score: number;
+  overall_score: number;
+  sp_rank: number;
+  mp_rank: number;
+  overall_rank: number;
 }
 
 export interface Ranking {
-    rankings_overall: RankingType[];
-    rankings_singleplayer: RankingType[];
-    rankings_multiplayer: RankingType[];
+  rankings_overall: RankingType[];
+  rankings_singleplayer: RankingType[];
+  rankings_multiplayer: RankingType[];
 }
 
 export interface SteamRanking {
-    rankings_overall: SteamRankingType[];
-    rankings_singleplayer: SteamRankingType[];
-    rankings_multiplayer: SteamRankingType[];
-}
\ No newline at end of file
+  rankings_overall: SteamRankingType[];
+  rankings_singleplayer: SteamRankingType[];
+  rankings_multiplayer: SteamRankingType[];
+}
diff --git a/frontend/src/types/Search.ts b/frontend/src/types/Search.ts
index d218806..48b9169 100644
--- a/frontend/src/types/Search.ts
+++ b/frontend/src/types/Search.ts
@@ -1,13 +1,13 @@
-import type { UserShort } from "@customTypes/Profile";
+import type { UserShort } from '@customTypes/Profile';
 
 export interface Search {
   players: UserShort[];
   maps: SearchMap[];
-};
+}
 
 interface SearchMap {
   id: number;
   game: string;
   chapter: string;
   map: string;
-};
+}
diff --git a/frontend/src/utils/Jwt.ts b/frontend/src/utils/Jwt.ts
index ce351fb..affcd36 100644
--- a/frontend/src/utils/Jwt.ts
+++ b/frontend/src/utils/Jwt.ts
@@ -1,5 +1,7 @@
 // llm ahh funcs
-export function get_user_id_from_token(token: string | undefined): string | undefined {
+export function get_user_id_from_token(
+  token: string | undefined
+): string | undefined {
   if (!token) {
     return undefined;
   }
@@ -19,9 +21,11 @@ export function get_user_id_from_token(token: string | undefined): string | unde
       .join('')
   );
   return JSON.parse(jsonPayload).sub;
-};
+}
 
-export function get_user_mod_from_token(token: string | undefined): boolean | undefined {
+export function get_user_mod_from_token(
+  token: string | undefined
+): boolean | undefined {
   if (!token) {
     return undefined;
   }
@@ -41,4 +45,4 @@ export function get_user_mod_from_token(token: string | undefined): boolean | un
       .join('')
   );
   return JSON.parse(jsonPayload).mod;
-};
+}
diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts
index b83a7ed..34830b0 100644
--- a/frontend/src/utils/Time.ts
+++ b/frontend/src/utils/Time.ts
@@ -1,42 +1,62 @@
 export function time_ago(date: any) {
   const now = new Date().getTime();
-  
-  const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
-  const seconds = Math.floor((now - localDate.getTime()) / 1000);    
+
+  const localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+  const seconds = Math.floor((now - localDate.getTime()) / 1000);
 
   let interval = Math.floor(seconds / 31536000);
-  if (interval === 1) {return interval + ' year ago';}
-  if (interval > 1) {return interval + ' years ago';}
+  if (interval === 1) {
+    return interval + ' year ago';
+  }
+  if (interval > 1) {
+    return interval + ' years ago';
+  }
 
   interval = Math.floor(seconds / 2592000);
-  if (interval === 1) {return interval + ' month ago';}
-  if (interval > 1) {return interval + ' months ago';}
+  if (interval === 1) {
+    return interval + ' month ago';
+  }
+  if (interval > 1) {
+    return interval + ' months ago';
+  }
 
   interval = Math.floor(seconds / 86400);
-  if (interval === 1) {return interval + ' day ago';}
-  if (interval > 1) {return interval + ' days ago';}
+  if (interval === 1) {
+    return interval + ' day ago';
+  }
+  if (interval > 1) {
+    return interval + ' days ago';
+  }
 
   interval = Math.floor(seconds / 3600);
-  if (interval === 1) {return interval + ' hour ago';}
-  if (interval > 1) {return interval + ' hours ago';}
+  if (interval === 1) {
+    return interval + ' hour ago';
+  }
+  if (interval > 1) {
+    return interval + ' hours ago';
+  }
 
   interval = Math.floor(seconds / 60);
-  if (interval === 1) {return interval + ' minute ago';}
-  if (interval > 1) {return interval + ' minutes ago';}
+  if (interval === 1) {
+    return interval + ' minute ago';
+  }
+  if (interval > 1) {
+    return interval + ' minutes ago';
+  }
 
-  if(seconds < 10) return 'just now';
+  if (seconds < 10) return 'just now';
 
   return Math.floor(seconds) + ' seconds ago';
-};
+}
 
 export function ticks_to_time(ticks: number) {
-  let seconds = Math.floor(ticks / 60)
-  let minutes = Math.floor(seconds / 60)
-  let hours = Math.floor(minutes / 60)
+  let seconds = Math.floor(ticks / 60);
+  let minutes = Math.floor(seconds / 60);
+  let hours = Math.floor(minutes / 60);
 
-  let milliseconds = Math.floor((ticks % 60) * 1000 / 60)
+  let milliseconds = Math.floor(((ticks % 60) * 1000) / 60);
   seconds = seconds % 60;
   minutes = minutes % 60;
 
-  return `${hours === 0 ? "" : hours + ":"}${minutes === 0 ? "" : hours > 0 ? minutes.toString().padStart(2, '0') + ":" : (minutes + ":")}${minutes > 0 ? seconds.toString().padStart(2, '0') : seconds}.${milliseconds.toString().padStart(3, '0')}`;
-};
\ No newline at end of file
+  return `${hours === 0 ? '' : hours + ':'}${minutes === 0 ? '' : hours > 0 ? minutes.toString().padStart(2, '0') + ':' : minutes + ':'}${minutes > 0 ? seconds.toString().padStart(2, '0') : seconds}.${milliseconds.toString().padStart(3, '0')}`;
+}