48 files changed, 3918 insertions, 2231 deletions
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 14a9972..464b759 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,42 +1,76 @@
-main {
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-    overflow: auto;
+@import "tailwindcss";
-    overflow-x: hidden;
-    position: relative;
-    width: calc(100% - 380px); 
+@theme {
-    height: 100vh;
+  --color-rosewater: #f2d5cf;
-    left: 350px;
+  --color-flamingo: #eebebe;
+  --color-pink: #f4b8e4;
+  --color-mauve: #ca9ee6;
+  --color-red: #e78284;
+  --color-maroon: #ea999c;
+  --color-peach: #ef9f76;
+  --color-yellow: #e5c890;
+  --color-green: #a6d189;
+  --color-teal: #81c8be;
+  --color-sky: #99d1db;
+  --color-sapphire: #85c1dc;
+  --color-blue: #8caaee;
+  --color-lavender: #babbf1;
+  --color-text: #c6d0f5;
+  --color-subtext1: #b5bfe2;
+  --color-subtext0: #a5adce;
+  --color-overlay2: #949cbb;
+  --color-overlay1: #838ba7;
+  --color-overlay0: #737994;
+  --color-surface2: #626880;
+  --color-surface1: #51576d;
+  --color-surface0: #414559;
+  --color-base: #303446;
+  --color-mantle: #292c3c;
+  --color-crust: #232634;
-    padding-right: 30px;
+  --color-primary: var(--color-mauve);
+  --color-secondary: var(--color-blue);
-    font-size: 40px;
+  --color-accent: var(--color-peach);
-    font-family: BarlowSemiCondensed-Regular;
+  --color-background: var(--color-base);
-    color: #cdcfdf;
+  --color-surface: var(--color-surface0);
+  --color-muted: var(--color-overlay0);
+  --color-border: var(--color-surface2);
+  --color-input: var(--color-surface1);
+  --color-foreground: var(--color-text);
+  --color-success: var(--color-green);
+  --color-warning: var(--color-yellow);
+  --color-error: var(--color-red);
+  --color-info: var(--color-blue);
+  --font-barlow-condensed-regular: 'BarlowCondensed-Regular';
+  --font-barlow-condensed-bold: 'BarlowCondensed-Bold';
+  --font-barlow-semicondensed-regular: 'BarlowSemiCondensed-Regular';
+  --font-barlow-semicondensed-semibold: 'BarlowSemiCondensed-SemiBold';
 }
 a {
    color: inherit;
-    width: fit-content;
 }
 body {
    overflow: hidden;
-    background-color: #141520;
+    background-color: var(--color-crust);
    margin: 0;
 }
 .loader {
    animation: loader 1.2s ease infinite;
    background-size: 400% 300%;
-    background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%);
+    background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
    user-select: none;
 }
 .loader-text {
    animation: loader 1.2s ease infinite;
    background-size: 400% 300%;
-    background-image: linear-gradient(-90deg, #202232 0%, #202232 25%, #2a2c41 50%, #202232 75%, #202232 100%);
+    background-image: linear-gradient(-90deg, var(--color-mantle) 0%, var(--color-mantle) 25%, var(--color-surface1) 50%, var(--color-mantle) 75%, var(--color-mantle) 100%);
    user-select: none;
    color: #00000000;
    border-radius: 1000px;
@@ -76,6 +110,173 @@ body {
    }
 }
+/* Custom Tailwind utilities for Catppuccin Frappe theme */
+@layer utilities {
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  
+  .bg-secondary {
+    background-color: var(--color-secondary);
+  }
+  
+  .bg-accent {
+    background-color: var(--color-accent);
+  }
+  
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
+  
+  .bg-muted {
+    background-color: var(--color-muted);
+  }
+  
+  .text-primary {
+    color: var(--color-primary);
+  }
+  
+  .text-secondary {
+    color: var(--color-secondary);
+  }
+  
+  .text-accent {
+    color: var(--color-accent);
+  }
+  
+  .text-foreground {
+    color: var(--color-foreground);
+  }
+  
+  .text-muted {
+    color: var(--color-muted);
+  }
+  
+  .border-primary {
+    border-color: var(--color-primary);
+  }
+  
+  .border-secondary {
+    border-color: var(--color-secondary);
+  }
+  
+  .border-muted {
+    border-color: var(--color-border);
+  }
+  
+  .hover\:bg-primary:hover {
+    background-color: var(--color-primary);
+  }
+  
+  .hover\:bg-secondary:hover {
+    background-color: var(--color-secondary);
+  }
+  
+  .hover\:bg-surface:hover {
+    background-color: var(--color-surface);
+  }
+  
+  .hover\:text-primary:hover {
+    color: var(--color-primary);
+  }
+  
+  .focus\:ring-primary:focus {
+    --tw-ring-color: var(--color-primary);
+  }
+  
+  .triangle {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 8px solid var(--color-foreground);
+    display: inline-block;
+  }
+  
+  .sidebar-button-selected {
+    background-color: var(--color-primary) !important;
+    color: var(--color-background) !important;
+  }
+  
+  .sidebar-button-deselected {
+    background-color: var(--color-surface) !important;
+    color: var(--color-foreground) !important;
+  }
+  
+  .profileboard-record {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
+  }
+  
+  .profileboard-record:hover {
+    background-color: var(--color-surface1);
+  }
+  
+  .difficulty-rating {
+    width: 20px;
+    height: 20px;
+    background-color: var(--color-muted);
+    border-radius: 50%;
+    margin: 0 2px;
+    display: inline-block;
+  }
+  
+  .nav-button {
+    background-color: var(--color-surface);
+    color: var(--color-foreground);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+  }
+  
+  .nav-button:hover {
+    background-color: var(--color-surface1);
+  }
+  
+  .record {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    margin: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .record:hover {
+    background-color: var(--color-surface1);
+  }
+  
+  .portal-count {
+    font-size: 3rem;
+    font-weight: bold;
+    color: var(--color-primary);
+  }
+  
+  .titles {
+    background-color: var(--color-accent);
+    color: var(--color-background);
+    padding: 0.25rem 0.5rem;
+    border-radius: 1rem;
+    font-size: 0.875rem;
+    margin-right: 0.5rem;
+    display: inline-block;
+  }
+}
 @font-face {
    font-family: 'BarlowCondensed-Bold';
    src: local('BarlowCondensed-Bold'), url(./fonts/BarlowCondensed-Bold.ttf) format('truetype');
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bdd3adc..fbfa59f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,32 +1,32 @@
-import React from 'react';
+import React, { useCallback } from "react";
 import { Routes, Route } from "react-router-dom";
 import { Helmet } from "react-helmet";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import Sidebar from './components/Sidebar';
+import Sidebar from "./components/Sidebar";
 import "./App.css";
-import Profile from '@pages/Profile';
+import Profile from "@pages/Profile";
-import Games from '@pages/Games';
+import Games from "@pages/Games";
-import Maps from '@pages/Maps';
+import Maps from "@pages/Maps";
-import User from '@pages/User';
+import User from "@pages/User";
-import Homepage from '@pages/Homepage';
+import Homepage from "@pages/Homepage";
-import UploadRunDialog from './components/UploadRunDialog';
+import UploadRunDialog from "./components/UploadRunDialog";
-import Rules from '@pages/Rules';
+import Rules from "@pages/Rules";
-import About from '@pages/About';
+import About from "@pages/About";
-import { Game } from '@customTypes/Game';
+import { Game } from "@customTypes/Game";
-import { API } from './api/Api';
+import { API } from "./api/Api";
-import Maplist from '@pages/Maplist';
+import Maplist from "@pages/Maplist";
-import Rankings from '@pages/Rankings';
+import Rankings from "@pages/Rankings";
-import { get_user_id_from_token, get_user_mod_from_token } from './utils/Jwt';
+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);
-  const [profile, setProfile] = React.useState<UserProfile | undefined>(undefined);
+  const [profile, setProfile] = React.useState<UserProfile | undefined>(
+    undefined
+  );
  const [isModerator, setIsModerator] = React.useState<boolean>(false);
  const [games, setGames] = React.useState<Game[]>([]);
  const [uploadRunDialog, setUploadRunDialog] = React.useState<boolean>(false);
  const _fetch_token = async () => {
@@ -39,12 +39,15 @@ const App: React.FC = () => {
    setGames(games);
  };
-  const _set_profile = async (user_id?: string) => {
+  const _set_profile = useCallback(
-    if (user_id && token) {
+    async (user_id?: string) => {
-      const user = await API.get_profile(token);
+      if (user_id && token) {
-      setProfile(user);
+        const user = await API.get_profile(token);
-    }
+        setProfile(user);
-  };
+      }
+    },
+    [token]
+  );
  React.useEffect(() => {
    if (token === undefined) {
@@ -52,15 +55,15 @@ const App: React.FC = () => {
      setIsModerator(false);
    } else {
      setProfile({} as UserProfile); // placeholder before we call actual user profile
-      _set_profile(get_user_id_from_token(token))
+      _set_profile(get_user_id_from_token(token));
-      const modStatus = get_user_mod_from_token(token)
+      const modStatus = get_user_mod_from_token(token);
      if (modStatus) {
        setIsModerator(true);
      } else {
        setIsModerator(false);
      }
    }
-  }, [token]);
+  }, [token, _set_profile]);
  React.useEffect(() => {
    _fetch_token();
@@ -73,23 +76,49 @@ const App: React.FC = () => {
        <title>LPHUB</title>
        <meta name="description" content="Least Portals Hub" />
      </Helmet>
-      <UploadRunDialog token={token} open={uploadRunDialog} onClose={(updateProfile) => {
+      <UploadRunDialog
-        setUploadRunDialog(false);
+        token={token}
-        if (updateProfile) {
+        open={uploadRunDialog}
-          _set_profile(get_user_id_from_token(token));
+        onClose={updateProfile => {
-        }
+          setUploadRunDialog(false);
-      }} games={games} />
+          if (updateProfile) {
-      <Sidebar setToken={setToken} profile={profile} setProfile={setProfile} onUploadRun={() => setUploadRunDialog(true)} />
+            _set_profile(get_user_id_from_token(token));
+          }
+        }}
+        games={games}
+      />
+      <Sidebar
+        setToken={setToken}
+        profile={profile}
+        setProfile={setProfile}
+        onUploadRun={() => setUploadRunDialog(true)}
+      />
      <Routes>
        <Route path="/" element={<Homepage />} />
-        <Route path="/profile" element={<Profile profile={profile} token={token} gameData={games} onDeleteRecord={() => _set_profile(get_user_id_from_token(token))} />} />
+        <Route
-        <Route path="/users/*" element={<User profile={profile} token={token} gameData={games} />} />
+          path="/profile"
+          element={
+            <Profile
+              profile={profile}
+              token={token}
+              gameData={games}
+              onDeleteRecord={() => _set_profile(get_user_id_from_token(token))}
+            />
+          }
+        />
+        <Route
+          path="/users/*"
+          element={<User profile={profile} token={token} gameData={games} />}
+        />
        <Route path="/games" element={<Games games={games} />} />
-        <Route path='/games/:id' element={<Maplist />}></Route>
+        <Route path="/games/:id" element={<Maplist />}></Route>
-        <Route path="/maps/*" element={<Maps token={token} isModerator={isModerator} />} />
+        <Route
+          path="/maps/*"
+          element={<Maps token={token} isModerator={isModerator} />}
+        />
        <Route path="/rules" element={<Rules />} />
        <Route path="/about" element={<About />} />
-        <Route path='/rankings' element={<Rankings />}></Route>
+        <Route path="/rankings" element={<Rankings />}></Route>
        <Route path="*" element={"404"} />
      </Routes>
    </>
diff --git a/frontend/src/api/Api.ts b/frontend/src/api/Api.ts
index 862e688..b782d17 100644
--- a/frontend/src/api/Api.ts
+++ b/frontend/src/api/Api.ts
@@ -1,18 +1,39 @@
-import { MapDiscussionCommentContent, MapDiscussionContent, ModMenuContent } from '@customTypes/Content';
+import { MapDiscussionContent, ModMenuContent } from "@customTypes/Content";
-import { delete_token, get_token } from '@api/Auth';
+import { delete_token, get_token } from "@api/Auth";
-import { get_user, get_profile, post_profile } from '@api/User';
+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 {
-import { get_official_rankings, get_unofficial_rankings } from '@api/Rankings';
+  get_games,
-import { get_map_summary, get_map_leaderboard, get_map_discussions, get_map_discussion, post_map_discussion, post_map_discussion_comment, delete_map_discussion, post_record, delete_map_record } from '@api/Maps';
+  get_chapters,
-import { delete_map_summary, post_map_summary, put_map_image, put_map_summary } from '@api/Mod';
+  get_games_chapters,
-import { UploadRunContent } from '@customTypes/Content';
+  get_game_maps,
+  get_search,
+} from "@api/Games";
+import { get_official_rankings, get_unofficial_rankings } from "@api/Rankings";
+import {
+  get_map_summary,
+  get_map_leaderboard,
+  get_map_discussions,
+  get_map_discussion,
+  post_map_discussion,
+  post_map_discussion_comment,
+  delete_map_discussion,
+  post_record,
+  delete_map_record,
+} from "@api/Maps";
+import {
+  delete_map_summary,
+  post_map_summary,
+  put_map_image,
+  put_map_summary,
+} from "@api/Mod";
+import { UploadRunContent } from "@customTypes/Content";
 // add new api call function entries here
 // example usage: API.get_games();
 export const API = {
  // Auth
  get_token: () => get_token(),
-  
  delete_token: () => delete_token(),
  // User
  get_user: (user_id: string) => get_user(user_id),
@@ -29,28 +50,49 @@ export const API = {
  get_unofficial_rankings: () => get_unofficial_rankings(),
  // Maps
  get_map_summary: (map_id: string) => get_map_summary(map_id),
-  get_map_leaderboard: (map_id: string, page: string) => get_map_leaderboard(map_id, page),
+  get_map_leaderboard: (map_id: string, page: string) =>
+    get_map_leaderboard(map_id, page),
  get_map_discussions: (map_id: string) => get_map_discussions(map_id),
-  get_map_discussion: (map_id: string, discussion_id: number) => get_map_discussion(map_id, discussion_id),
+  get_map_discussion: (map_id: string, discussion_id: number) =>
+    get_map_discussion(map_id, discussion_id),
-  post_map_discussion: (token: string, map_id: string, content: MapDiscussionContent) => post_map_discussion(token, map_id, content),
+  post_map_discussion: (
-  post_map_discussion_comment: (token: string, map_id: string, discussion_id: number, comment: string) => post_map_discussion_comment(token, map_id, discussion_id, comment),
+    token: string,
-  post_record: (token: string, run: UploadRunContent, map_id: number) => post_record(token, run, map_id),
+    map_id: string,
+    content: MapDiscussionContent
+  ) => post_map_discussion(token, map_id, content),
+  post_map_discussion_comment: (
+    token: string,
+    map_id: string,
+    discussion_id: number,
+    comment: string
+  ) => post_map_discussion_comment(token, map_id, discussion_id, comment),
+  post_record: (token: string, run: UploadRunContent, map_id: number) =>
+    post_record(token, run, map_id),
-  delete_map_discussion: (token: string, map_id: string, discussion_id: number) => delete_map_discussion(token, map_id, discussion_id),
+  delete_map_discussion: (
+    token: string,
+    map_id: string,
+    discussion_id: number
+  ) => delete_map_discussion(token, map_id, discussion_id),
-  delete_map_record: (token: string, map_id: number, record_id: number) => delete_map_record(token, map_id, record_id),
+  delete_map_record: (token: string, map_id: number, record_id: number) =>
+    delete_map_record(token, map_id, record_id),
  // Mod
-  post_map_summary: (token: string, map_id: string, content: ModMenuContent) => post_map_summary(token, map_id, content),
+  post_map_summary: (token: string, map_id: string, content: ModMenuContent) =>
-  
+    post_map_summary(token, map_id, content),
-  put_map_image: (token: string, map_id: string, image: string) => put_map_image(token, map_id, image),
-  put_map_summary: (token: string, map_id: string, content: ModMenuContent) => put_map_summary(token, map_id, content),
+  put_map_image: (token: string, map_id: string, image: string) =>
-  
+    put_map_image(token, map_id, image),
-  delete_map_summary: (token: string, map_id: string, route_id: number) => delete_map_summary(token, map_id, route_id),
+  put_map_summary: (token: string, map_id: string, content: ModMenuContent) =>
+    put_map_summary(token, map_id, content),
+  delete_map_summary: (token: string, map_id: string, route_id: number) =>
+    delete_map_summary(token, map_id, route_id),
 };
-const BASE_API_URL: string = "/api/v1/"
+const BASE_API_URL: string = "https://lp.portal2.sr/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..98c6d36 100644
--- a/frontend/src/api/Auth.ts
+++ b/frontend/src/api/Auth.ts
@@ -2,7 +2,7 @@ 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;
  }
diff --git a/frontend/src/api/Games.ts b/frontend/src/api/Games.ts
index 72bb4b3..b739f80 100644
--- a/frontend/src/api/Games.ts
+++ b/frontend/src/api/Games.ts
@@ -6,26 +6,30 @@ 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..2485941 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 {
+  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> => {
+export const get_map_leaderboard = async (
-  const response = await axios.get(url(`maps/${map_id}/leaderboards?page=${page}`));
+  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;
  }
@@ -17,15 +27,17 @@ export const get_map_leaderboard = async (map_id: string, page: string): Promise
  // map the kind of leaderboard
  data.records = data.records.map((record: any) => {
    if (record.host && record.partner) {
-      return { ...record, kind: 'multiplayer' };
+      return { ...record, kind: "multiplayer" };
    } else {
-      return { ...record, kind: 'singleplayer' };
+      return { ...record, kind: "singleplayer" };
    }
  });
  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> => {
+export const get_map_discussion = async (
-  const response = await axios.get(url(`maps/${map_id}/discussions/${discussion_id}`));
+  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> => {
+export const post_map_discussion = async (
-  const response = await axios.post(url(`maps/${map_id}/discussions`), {
+  token: string,
-    "title": content.title,
+  map_id: string,
-    "content": content.content,
+  content: MapDiscussionContent
-  }, {
+): Promise<boolean> => {
-    headers: {
+  const response = await axios.post(
-      "Authorization": token,
+    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> => {
+export const post_map_discussion_comment = async (
-  const response = await axios.post(url(`maps/${map_id}/discussions/${discussion_id}`), {
+  token: string,
-    "comment": comment,
+  map_id: string,
-  }, {
+  discussion_id: number,
-    headers: {
+  comment: string
-      "Authorization": token,
+): 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> => {
+export const delete_map_discussion = async (
-  const response = await axios.delete(url(`maps/${map_id}/discussions/${discussion_id}`), {
+  token: string,
-    headers: {
+  map_id: string,
-      "Authorization": token,
+  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`), {
+    const response = await axios.postForm(
-      "host_demo": run.host_demo,
+      url(`maps/${map_id}/record`),
-      "partner_demo": run.partner_demo,
+      {
-    }, {
+        host_demo: run.host_demo,
-      headers: {
+        partner_demo: run.partner_demo,
-        "Authorization": token,
+      },
+      {
+        headers: {
+          Authorization: token,
+        },
      }
-    });
+    );
    return [response.data.success, response.data.message];
  } else {
-    const response = await axios.postForm(url(`maps/${map_id}/record`), {
+    const response = await axios.postForm(
-      "host_demo": run.host_demo,
+      url(`maps/${map_id}/record`),
-    }, {
+      {
-      headers: {
+        host_demo: run.host_demo,
-        "Authorization": token,
+      },
+      {
+        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> => {
+export const delete_map_record = async (
-  const response = await axios.delete(url(`maps/${map_id}/record/${record_id}`), {
+  token: string,
-    headers: {
+  map_id: number,
-      "Authorization": token,
+  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..d682f1a 100644
--- a/frontend/src/api/Mod.ts
+++ b/frontend/src/api/Mod.ts
@@ -2,57 +2,85 @@ 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> => {
+export const put_map_image = async (
-  const response = await axios.put(url(`maps/${map_id}/image`), {
+  token: string,
-    "image": image,
+  map_id: string,
-  }, {
+  image: string
-    headers: {
+): Promise<boolean> => {
-      "Authorization": token,
+  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> => {
+export const post_map_summary = async (
-  const response = await axios.post(url(`maps/${map_id}/summary`), {
+  token: string,
-    "category_id": content.category_id,
+  map_id: string,
-    "user_name": content.name,
+  content: ModMenuContent
-    "score_count": content.score,
+): Promise<boolean> => {
-    "record_date": content.date,
+  const response = await axios.post(
-    "showcase": content.showcase,
+    url(`maps/${map_id}/summary`),
-    "description": content.description,
+    {
-  }, {
+      category_id: content.category_id,
-    headers: {
+      user_name: content.name,
-      "Authorization": token,
+      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> => {
+export const put_map_summary = async (
-  const response = await axios.put(url(`maps/${map_id}/summary`), {
+  token: string,
-    "route_id": content.id,
+  map_id: string,
-    "user_name": content.name,
+  content: ModMenuContent
-    "score_count": content.score,
+): Promise<boolean> => {
-    "record_date": content.date,
+  const response = await axios.put(
-    "showcase": content.showcase,
+    url(`maps/${map_id}/summary`),
-    "description": content.description,
+    {
-  }, {
+      route_id: content.id,
-    headers: {
+      user_name: content.name,
-      "Authorization": token,
+      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/User.ts b/frontend/src/api/User.ts
index 88da0f2..004aa22 100644
--- a/frontend/src/api/User.ts
+++ b/frontend/src/api/User.ts
@@ -10,16 +10,20 @@ export const get_user = async (user_id: string): Promise<UserProfile> => {
 export const get_profile = async (token: string): Promise<UserProfile> => {
  const response = await axios.get(url(`profile`), {
    headers: {
-      "Authorization": token,
+      Authorization: token,
-    }
+    },
  });
  return response.data.data;
 };
-export const post_profile = async (token: string) => {
+export const post_profile = async (token: string): Promise<void> => {
-  const _ = await axios.post(url(`profile`), {}, {
+  await axios.post(
-    headers: {
+    url(`profile`),
-      "Authorization": token,
+    {},
+    {
+      headers: {
+        Authorization: token,
+      },
    }
-  });
+  );
 };
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 44a653b..8f2ce7a 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,31 +1,34 @@
-import React from 'react';
+import React from "react";
-import "@css/Dialog.css"
 interface ConfirmDialogProps {
-    title: string;
+  title: string;
-    subtitle: string;
+  subtitle: string;
-    onConfirm: () => void;
+  onConfirm: () => void;
-    onCancel: () => void;
+  onCancel: () => void;
-};
+}
-const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ title, subtitle, onConfirm, onCancel }) => {
+const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
-    return (
+  title,
-        <div className='dimmer'>
+  subtitle,
-            <div className='dialog'>
+  onConfirm,
-                <div className='dialog-element dialog-header'>
+  onCancel,
-                    <span>{title}</span>
+}) => {
-                </div>
+  return (
-                <div className='dialog-element dialog-description'>
+    <div className="fixed w-[200%] h-full bg-black bg-opacity-50 z-[4]">
-                    <span>{subtitle}</span>
+      <div className="fixed z-[4] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-surface rounded-3xl overflow-hidden min-w-[350px] border border-border animate-[dialog_in_0.2s_cubic-bezier(0.075,0.82,0.165,1.1)] text-foreground font-[--font-barlow-semicondensed-regular]">
-                </div>
+        <div className="p-2 text-2xl bg-mantle">
-                <div className='dialog-element dialog-btns-container'>
+          <span>{title}</span>
-                    <button onClick={onCancel}>Cancel</button>
+        </div>
-                    <button onClick={onConfirm}>Confirm</button>
+        <div className="p-2">
-                </div>
+          <span>{subtitle}</span>
-            </div>
+        </div>
+        <div className="p-2 flex justify-end border-t-2 border-border bg-mantle">
+          <button className="mr-2 px-4 py-2 bg-muted text-foreground rounded hover:bg-overlay1 transition-colors" onClick={onCancel}>Cancel</button>
+          <button className="px-4 py-2 bg-primary text-background rounded hover:bg-mauve transition-colors" 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 17ae586..7aa8901 100644
--- a/frontend/src/components/Discussions.tsx
+++ b/frontend/src/components/Discussions.tsx
@@ -1,34 +1,48 @@
-import React from 'react';
+import React from "react";
-import { MapDiscussion, MapDiscussions, MapDiscussionsDetail } from '@customTypes/Map';
+import {
-import { MapDiscussionCommentContent, MapDiscussionContent } from '@customTypes/Content';
+  MapDiscussion,
-import { time_ago } from '@utils/Time';
+  MapDiscussions,
-import { API } from '@api/Api';
+  MapDiscussionsDetail,
-import "@css/Maps.css"
+} from "@customTypes/Map";
-import { Link } from 'react-router-dom';
+import { MapDiscussionContent } from "@customTypes/Content";
-import useConfirm from '@hooks/UseConfirm';
+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
+  token?: string;
  data?: MapDiscussions;
  isModerator: boolean;
  mapID: string;
  onRefresh: () => void;
 }
-const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, mapID, onRefresh }) => {
+const Discussions: React.FC<DiscussionsProps> = ({
+  token,
+  data,
+  isModerator,
+  mapID,
+  onRefresh,
+}) => {
  const { confirm, ConfirmDialogComponent } = useConfirm();
-  const [discussionThread, setDiscussionThread] = React.useState<MapDiscussion | undefined>(undefined);
+  const [discussionThread, setDiscussionThread] = React.useState<
+    MapDiscussion | undefined
+  >(undefined);
  const [discussionSearch, setDiscussionSearch] = React.useState<string>("");
-  const [createDiscussion, setCreateDiscussion] = React.useState<boolean>(false);
+  const [createDiscussion, setCreateDiscussion] =
-  const [createDiscussionContent, setCreateDiscussionContent] = React.useState<MapDiscussionContent>({
+    React.useState<boolean>(false);
-    title: "",
+  const [createDiscussionContent, setCreateDiscussionContent] =
-    content: "",
+    React.useState<MapDiscussionContent>({
-  });
+      title: "",
-  const [createDiscussionCommentContent, setCreateDiscussionCommentContent] = React.useState<string>("");
+      content: "",
+    });
+  const [createDiscussionCommentContent, setCreateDiscussionCommentContent] =
+    React.useState<string>("");
  const _open_map_discussion = async (discussion_id: number) => {
    const mapDiscussion = await API.get_map_discussion(mapID, discussion_id);
@@ -45,13 +59,23 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
  const _create_map_discussion_comment = async (discussion_id: number) => {
    if (token) {
-      await API.post_map_discussion_comment(token, mapID, discussion_id, createDiscussionCommentContent);
+      await API.post_map_discussion_comment(
+        token,
+        mapID,
+        discussion_id,
+        createDiscussionCommentContent
+      );
      await _open_map_discussion(discussion_id);
    }
  };
  const _delete_map_discussion = async (discussion: MapDiscussionsDetail) => {
-    if (await confirm("Delete Map Discussion", `Are you sure you want to remove post: ${discussion.title}?`)) {
+    if (
+      await confirm(
+        "Delete Map Discussion",
+        `Are you sure you want to remove post: ${discussion.title}?`
+      )
+    ) {
      if (token) {
        await API.delete_map_discussion(token, mapID, discussion.id);
        onRefresh();
@@ -60,107 +84,186 @@ const Discussions: React.FC<DiscussionsProps> = ({ token, data, isModerator, map
  };
  return (
-    <section id='section7' className='summary3'>
+    <section id="section7" className="summary3">
      {ConfirmDialogComponent}
-      <div id='discussion-search'>
+      <div id="discussion-search">
-        <input type="text" value={discussionSearch} placeholder={"Search for posts..."} onChange={(e) => setDiscussionSearch(e.target.value)} />
+        <input
-        <div><button onClick={() => setCreateDiscussion(true)}>New Post</button></div>
+          type="text"
+          value={discussionSearch}
+          placeholder={"Search for posts..."}
+          onChange={e => setDiscussionSearch(e.target.value)}
+        />
+        <div>
+          <button onClick={() => setCreateDiscussion(true)}>New Post</button>
+        </div>
      </div>
-      { // janky ternary operators here, could divide them to more components?
+      {
-        createDiscussion ?
+        // janky ternary operators here, could divide them to more components?
-          (
+        createDiscussion ? (
-            <div id='discussion-create'>
+          <div id="discussion-create">
-              <span>Create Post</span>
+            <span>Create Post</span>
-              <button onClick={() => setCreateDiscussion(false)}>X</button>
+            <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) => setCreateDiscussionContent({
+              <input
-                  ...createDiscussionContent,
+                id="discussion-create-title"
-                  title: e.target.value,
+                placeholder="Title..."
-                })} />
+                onChange={e =>
-                <input id='discussion-create-content' placeholder='Enter the content...' onChange={(e) => setCreateDiscussionContent({
+                  setCreateDiscussionContent({
-                  ...createDiscussionContent,
+                    ...createDiscussionContent,
-                  content: e.target.value,
+                    title: e.target.value,
-                })} />
+                  })
-              </div>
+                }
-              <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
+              />
-                <button id='discussion-create-button' onClick={() => _create_map_discussion()}>Post</button>
+              <input
-              </div>
+                id="discussion-create-content"
+                placeholder="Enter the content..."
+                onChange={e =>
+                  setCreateDiscussionContent({
+                    ...createDiscussionContent,
+                    content: e.target.value,
+                  })
+                }
+              />
+            </div>
+            <div style={{ placeItems: "end", gridColumn: "1 / span 2" }}>
+              <button
+                id="discussion-create-button"
+                onClick={() => _create_map_discussion()}
+              >
+                Post
+              </button>
+            </div>
+          </div>
+        ) : discussionThread ? (
+          <div id="discussion-thread">
+            <div>
+              <span>{discussionThread.discussion.title}</span>
+              <button onClick={() => setDiscussionThread(undefined)}>X</button>
            </div>
-          )
-          :
-          discussionThread ?
-            (
-              <div id='discussion-thread'>
-                <div>
-                  <span>{discussionThread.discussion.title}</span>
-                  <button onClick={() => setDiscussionThread(undefined)}>X</button>
-                </div>
-                <div>
+            <div>
-                  <Link to={`/users/${discussionThread.discussion.creator.steam_id}`}>
+              <Link
-                    <img src={discussionThread.discussion.creator.avatar_link} alt="" />
+                to={`/users/${discussionThread.discussion.creator.steam_id}`}
-                  </Link>
+              >
-                  <div>
+                <img
-                    <span>{discussionThread.discussion.creator.user_name}</span>
+                  src={discussionThread.discussion.creator.avatar_link}
-                    <span>{time_ago(new Date(discussionThread.discussion.created_at.replace("T", " ").replace("Z", "")))}</span>
+                  alt=""
-                    <span>{discussionThread.discussion.content}</span>
+                />
-                  </div>
+              </Link>
-                  {discussionThread.discussion.comments ?
+              <div>
-                    discussionThread.discussion.comments.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
+                <span>{discussionThread.discussion.creator.user_name}</span>
-                      .map(e => (
+                <span>
-                        <>
+                  {time_ago(
-                          <Link to={`/users/${e.user.steam_id}`}>
+                    new Date(
-                            <img src={e.user.avatar_link} alt="" />
+                      discussionThread.discussion.created_at
-                          </Link>
+                        .replace("T", " ")
-                          <div>
+                        .replace("Z", "")
-                            <span>{e.user.user_name}</span>
+                    )
-                            <span>{time_ago(new Date(e.date.replace("T", " ").replace("Z", "")))}</span>
+                  )}
-                            <span>{e.comment}</span>
+                </span>
-                          </div>
+                <span>{discussionThread.discussion.content}</span>
-                        </>
+              </div>
-                      )) : ""
+              {discussionThread.discussion.comments
-                  }
+                ? discussionThread.discussion.comments
-                </div>
+                    .sort(
-                <div id='discussion-send'>
+                      (a, b) =>
-                  <input type="text" value={createDiscussionCommentContent} placeholder={"Message"}
+                        new Date(a.date).getTime() - new Date(b.date).getTime()
-                    onKeyDown={(e) => e.key === "Enter" && _create_map_discussion_comment(discussionThread.discussion.id)}
+                    )
-                    onChange={(e) => setCreateDiscussionCommentContent(e.target.value)} />
+                    .map(e => (
-                  <div><button onClick={() => {
+                      <>
+                        <Link to={`/users/${e.user.steam_id}`}>
+                          <img src={e.user.avatar_link} alt="" />
+                        </Link>
+                        <div>
+                          <span>{e.user.user_name}</span>
+                          <span>
+                            {time_ago(
+                              new Date(
+                                e.date.replace("T", " ").replace("Z", "")
+                              )
+                            )}
+                          </span>
+                          <span>{e.comment}</span>
+                        </div>
+                      </>
+                    ))
+                : ""}
+            </div>
+            <div id="discussion-send">
+              <input
+                type="text"
+                value={createDiscussionCommentContent}
+                placeholder={"Message"}
+                onKeyDown={e =>
+                  e.key === "Enter" &&
+                  _create_map_discussion_comment(discussionThread.discussion.id)
+                }
+                onChange={e =>
+                  setCreateDiscussionCommentContent(e.target.value)
+                }
+              />
+              <div>
+                <button
+                  onClick={() => {
                    if (createDiscussionCommentContent !== "") {
-                      _create_map_discussion_comment(discussionThread.discussion.id);
+                      _create_map_discussion_comment(
+                        discussionThread.discussion.id
+                      );
                      setCreateDiscussionCommentContent("");
                    }
-                  }}>Send</button></div>
+                  }}
-                </div>
+                >
+                  Send
+                </button>
              </div>
-            )
+            </div>
-            :
+          </div>
-            (
+        ) : data ? (
-              data ?
+          <>
-                (<>
+            {data.discussions
-                  {data.discussions.filter(f => f.title.includes(discussionSearch)).sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
+              .filter(f => f.title.includes(discussionSearch))
-                    .map((e, i) => (
+              .sort(
-                      <div id='discussion-post'>
+                (a, b) =>
-                        <button key={e.id} onClick={() => _open_map_discussion(e.id)}>
+                  new Date(b.updated_at).getTime() -
-                          <span>{e.title}</span>
+                  new Date(a.updated_at).getTime()
-                          {isModerator ?
+              )
-                            <button onClick={(m) => {
+              .map((e, i) => (
-                              m.stopPropagation();
+                <div id="discussion-post">
-                              _delete_map_discussion(e);
+                  <button key={e.id} onClick={() => _open_map_discussion(e.id)}>
-                            }}>Delete Post</button>
+                    <span>{e.title}</span>
-                            : <span></span>
+                    {isModerator ? (
-                          }
+                      <button
-                          <span><b>{e.creator.user_name}:</b> {e.content}</span>
+                        onClick={m => {
-                          <span>Last Updated: {time_ago(new Date(e.updated_at.replace("T", " ").replace("Z", "")))}</span>
+                          m.stopPropagation();
-                        </button>
+                          _delete_map_discussion(e);
-                      </div>
+                        }}
-                    ))}
+                      >
-                </>)
+                        Delete Post
-                :
+                      </button>
-                (<span style={{ textAlign: "center", display: "block" }}>No Discussions...</span>)
+                    ) : (
-            )
+                      <span></span>
+                    )}
+                    <span>
+                      <b>{e.creator.user_name}:</b> {e.content}
+                    </span>
+                    <span>
+                      Last Updated:{" "}
+                      {time_ago(
+                        new Date(
+                          e.updated_at.replace("T", " ").replace("Z", "")
+                        )
+                      )}
+                    </span>
+                  </button>
+                </div>
+              ))}
+          </>
+        ) : (
+          <span style={{ textAlign: "center", display: "block" }}>
+            No Discussions...
+          </span>
+        )
      }
    </section>
  );
diff --git a/frontend/src/components/GameCategory.tsx b/frontend/src/components/GameCategory.tsx
index d8879ef..b18c9d9 100644
--- a/frontend/src/components/GameCategory.tsx
+++ b/frontend/src/components/GameCategory.tsx
@@ -1,24 +1,24 @@
-import React from 'react';
+import React from "react";
 import { Link } from "react-router-dom";
-import { Game, GameCategoryPortals } from '@customTypes/Game';
+import { Game, GameCategoryPortals } from "@customTypes/Game";
-import "@css/Games.css"
 interface GameCategoryProps {
-    game: Game;
+  game: Game;
-    cat: GameCategoryPortals;
+  cat: GameCategoryPortals;
 }
-const GameCategory: React.FC<GameCategoryProps> = ({cat, game}) => {
+const GameCategory: React.FC<GameCategoryProps> = ({ cat, game }) => {
-    return (
+  return (
-        <Link className="games-page-item-body-item" to={"/games/" + game.id + "?cat=" + cat.category.id}>
+    <Link
-        <div>
+      className="bg-surface text-center w-full h-[100px] rounded-3xl text-foreground m-3 hover:bg-surface1 transition-colors flex flex-col justify-between p-4"
-              <span className='games-page-item-body-item-title'>{cat.category.name}</span>
+      to={"/games/" + game.id + "?cat=" + cat.category.id}
-              <br />
+    >
-              <span className='games-page-item-body-item-num'>{cat.portal_count}</span>
+      <p className="text-3xl font-semibold">{cat.category.name}</p>
-        </div>
+      <br />
-        </Link>
+      <p className="font-bold text-4xl">{cat.portal_count}</p>
-    )
+    </Link>
-}
+  );
+};
 export default GameCategory;
diff --git a/frontend/src/components/GameEntry.tsx b/frontend/src/components/GameEntry.tsx
index 3bd2842..f8fd179 100644
--- a/frontend/src/components/GameEntry.tsx
+++ b/frontend/src/components/GameEntry.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
+import React from "react";
 import { Link } from "react-router-dom";
-import { Game, GameCategoryPortals } from '@customTypes/Game';
+import { Game, GameCategoryPortals } from "@customTypes/Game";
-import "@css/Games.css"
-import GameCategory from '@components/GameCategory';
+import GameCategory from "@components/GameCategory";
 interface GameEntryProps {
  game: Game;
@@ -18,17 +17,28 @@ const GameEntry: React.FC<GameEntryProps> = ({ game }) => {
  }, [game.category_portals]);
  return (
-    <Link to={"/games/" + game.id}><div className='games-page-item'>
+    <Link to={"/games/" + game.id} className="w-full">
-      <div className='games-page-item-header'>
+      <div className="w-full h-64 bg-mantle rounded-3xl overflow-hidden my-6">
-        <div style={{ backgroundImage: `url(${game.image})` }} className='games-page-item-header-img'></div>
+        <div className="w-full h-1/2 bg-cover overflow-hidden relative">
-        <span><b>{game.name}</b></span>
+          <div
+            style={{ backgroundImage: `url(${game.image})` }}
+            className="w-full h-full backdrop-blur-sm blur-sm bg-cover"
+          ></div>
+          <span className="absolute inset-0 flex justify-center items-center">
+            <b className="text-[56px] font-[--font-barlow-condensed-bold] text-white">{game.name}</b>
+          </span>
+        </div>
+        <div className="flex justify-center items-center h-1/2">
+          <div className="flex flex-row justify-between w-full">
+            {catInfo.map((cat, index) => {
+              return (
+                <GameCategory key={index} cat={cat} game={game} />
+              );
+            })}
+          </div>
+        </div>
      </div>
-      <div id={game.id as any as string} className='games-page-item-body'>
+    </Link>
-        {catInfo.map((cat, index) => {
-          return <GameCategory cat={cat} game={game} key={index}></GameCategory>
-        })}
-      </div>
-    </div></Link>
  );
 };
diff --git a/frontend/src/components/Leaderboards.tsx b/frontend/src/components/Leaderboards.tsx
index fb614fa..1de9b08 100644
--- a/frontend/src/components/Leaderboards.tsx
+++ b/frontend/src/components/Leaderboards.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
+import React, { useCallback } from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { DownloadIcon, ThreedotIcon } from '@images/Images';
+import { DownloadIcon, ThreedotIcon } from "@images/Images";
-import { MapLeaderboard } from '@customTypes/Map';
+import { MapLeaderboard } from "@customTypes/Map";
-import { ticks_to_time, time_ago } from '@utils/Time';
+import { ticks_to_time, time_ago } from "@utils/Time";
 import { API } from "@api/Api";
 import useMessage from "@hooks/UseMessage";
-import "@css/Maps.css"
+import "@css/Maps.css";
 interface LeaderboardsProps {
-        mapID: string;
+  mapID: string;
 }
 const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
@@ -17,109 +17,228 @@ const Leaderboards: React.FC<LeaderboardsProps> = ({ mapID }) => {
  const [data, setData] = React.useState<MapLeaderboard | undefined>(undefined);
  const [pageNumber, setPageNumber] = React.useState<number>(1);
-  const _fetch_map_leaderboards = async () => {
+  const _fetch_map_leaderboards = useCallback(async () => {
-    const mapLeaderboards = await API.get_map_leaderboard(mapID, pageNumber.toString());
+    const mapLeaderboards = await API.get_map_leaderboard(
+      mapID,
+      pageNumber.toString()
+    );
    setData(mapLeaderboards);
-  };
+  }, [mapID, pageNumber]);
  const { message, MessageDialogComponent } = useMessage();
  React.useEffect(() => {
-          _fetch_map_leaderboards();
+    _fetch_map_leaderboards();
-          console.log(data);
+    console.log(data);
-  }, [pageNumber, navigate])
+  }, [pageNumber, navigate, _fetch_map_leaderboards, data]);
  if (!data) {
    return (
-      <section id='section6' className='summary2'>
+      <section id="section6" className="summary2">
-        <h1 style={{ textAlign: "center" }}>Map is not available for competitive boards.</h1>
+        <h1 style={{ textAlign: "center" }}>
+          Loading...
+        </h1>
      </section>
    );
-  };
+  }
  if (data.records.length === 0) {
    return (
-      <section id='section6' className='summary2'>
+      <section id="section6" className="summary2">
        <h1 style={{ textAlign: "center" }}>No records found.</h1>
      </section>
    );
-  };
+  }
  return (
-  <div>
+    <div className="text-foreground">
-        {MessageDialogComponent}
+      {MessageDialogComponent}
-    <section id='section6' className='summary2'>
+      <section id="section6" className="summary2">
+        <div
-      <div id='leaderboard-top'
+          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%" }}
+          style={
-      >
+            data.map.is_coop
-        <span>Place</span>
+              ? { gridTemplateColumns: "7.5% 40% 7.5% 15% 15% 15%" }
+              : { gridTemplateColumns: "7.5% 30% 10% 20% 17.5% 15%" }
-        {data.map.is_coop ? (
+          }
-          <div id='runner'>
+        >
-            <span>Blue</span>
+          <span>Place</span>
-            <span>Orange</span>
-          </div>
+          {data.map.is_coop ? (
-        ) : (
+            <div id="runner">
-          <span>Runner</span>
+              <span>Blue</span>
-        )}
+              <span>Orange</span>
+            </div>
-        <span>Portals</span>
+          ) : (
-        <span>Time</span>
+            <span>Runner</span>
-        <span>Date</span>
+          )}
-        <div id='page-number'>
-          <div>
+          <span>Portals</span>
+          <span>Time</span>
-            <button onClick={() => pageNumber === 1 ? null : setPageNumber(prevPageNumber => prevPageNumber - 1)}
+          <span>Date</span>
-            ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+          <div id="page-number">
-            <span>{data.pagination.current_page}/{data.pagination.total_pages}</span>
+            <div>
-            <button onClick={() => pageNumber === data.pagination.total_pages ? null : setPageNumber(prevPageNumber => prevPageNumber + 1)}
+              <button
-            ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+                onClick={() =>
+                  pageNumber === 1
+                    ? null
+                    : setPageNumber(prevPageNumber => prevPageNumber - 1)
+                }
+              >
+                <i
+                  className="triangle"
+                  style={{ position: "relative", left: "-5px" }}
+                ></i>{" "}
+              </button>
+              <span>
+                {data.pagination.current_page}/{data.pagination.total_pages}
+              </span>
+              <button
+                onClick={() =>
+                  pageNumber === data.pagination.total_pages
+                    ? null
+                    : setPageNumber(prevPageNumber => prevPageNumber + 1)
+                }
+              >
+                <i
+                  className="triangle"
+                  style={{
+                    position: "relative",
+                    left: "5px",
+                    transform: "rotate(180deg)",
+                  }}
+                ></i>{" "}
+              </button>
+            </div>
          </div>
        </div>
-      </div>
+        <hr />
-      <hr />
+        <div id="leaderboard-records">
-      <div id='leaderboard-records'>
+          {data.records.map((r, index) => (
-        {data.records.map((r, index) => (
+            <span
-          <span className='leaderboard-record' key={index}
+              className="leaderboard-record"
-            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%" }}
+              key={index}
-          >
+              style={
-            <span>{r.placement}</span>
+                data.map.is_coop
-            <span> </span>
+                  ? { gridTemplateColumns: "3% 4.5% 40% 4% 3.5% 15% 15% 14.5%" }
-            {r.kind === "multiplayer" ? (
+                  : { gridTemplateColumns: "3% 4.5% 30% 4% 6% 20% 17% 15%" }
-              <div>
+              }
-                  <Link to={`/users/${r.host.steam_id}`}><span><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; {r.partner.user_name}</span></Link>
+              <span>{r.placement}</span>
-              </div>
+              <span> </span>
-            ) : r.kind === "singleplayer" && (
+              {r.kind === "multiplayer" ? (
-              <div>
+                <div>
-                  <Link to={`/users/${r.user.steam_id}`}><span><img src={r.user.avatar_link} alt='' /> &nbsp; {r.user.user_name}</span></Link>
+                  <Link to={`/users/${r.host.steam_id}`}>
-              </div>
+                    <span>
-            )}
+                      <img src={r.host.avatar_link} alt="" /> &nbsp;{" "}
+                      {r.host.user_name}
-            <span>{r.score_count}</span>
+                    </span>
-            <span> </span>
+                  </Link>
-            <span className='hover-popup' popup-text={(r.score_time) + " ticks"}>{ticks_to_time(r.score_time)}</span>
+                  <Link to={`/users/${r.partner.steam_id}`}>
-            <span className='hover-popup' popup-text={r.record_date.replace("T", ' ').split(".")[0]}>{time_ago(new Date(r.record_date.replace("T", " ").replace("Z", "")))}</span>
+                    <span>
+                      <img src={r.partner.avatar_link} alt="" /> &nbsp;{" "}
-            {r.kind === "multiplayer" ? (
+                      {r.partner.user_name}
-              <span>
+                    </span>
-                <button onClick={() => { message("Demo Information", `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                  </Link>
-                <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(160deg) contrast(60%) saturate(1000%)" }} /></button>
+                </div>
-                <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`}><img src={DownloadIcon} alt="download" style={{ filter: "hue-rotate(300deg) contrast(60%) saturate(1000%)" }} /></button>
+              ) : (
+                r.kind === "singleplayer" && (
+                  <div>
+                    <Link to={`/users/${r.user.steam_id}`}>
+                      <span>
+                        <img src={r.user.avatar_link} alt="" /> &nbsp;{" "}
+                        {r.user.user_name}
+                      </span>
+                    </Link>
+                  </div>
+                )
+              )}
+              <span>{r.score_count}</span>
+              <span> </span>
+              <span
+                className="hover-popup"
+                popup-text={r.score_time + " ticks"}
+              >
+                {ticks_to_time(r.score_time)}
              </span>
-            ) : r.kind === "singleplayer" && (
+              <span
+                className="hover-popup"
-              <span>
+                popup-text={r.record_date.replace("T", " ").split(".")[0]}
-                <button onClick={() => { message("Demo Information", `Demo ID: ${r.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+              >
-                <button onClick={() => window.location.href = `/api/v1/demos?uuid=${r.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                {time_ago(
+                  new Date(r.record_date.replace("T", " ").replace("Z", ""))
+                )}
              </span>
-            )}
-          </span>
+              {r.kind === "multiplayer" ? (
-        ))}
+                <span>
-      </div>
+                  <button
-    </section>
+                    onClick={() => {
-        </div>
+                      message(
+                        "Demo Information",
+                        `Host Demo ID: ${r.host_demo_id} \nParnter Demo ID: ${r.partner_demo_id}`
+                      );
+                    }}
+                  >
+                    <img src={ThreedotIcon} alt="demo_id" />
+                  </button>
+                  <button
+                    onClick={() =>
+                      (window.location.href = `/api/v1/demos?uuid=${r.partner_demo_id}`)
+                    }
+                  >
+                    <img
+                      src={DownloadIcon}
+                      alt="download"
+                      style={{
+                        filter:
+                          "hue-rotate(160deg) contrast(60%) saturate(1000%)",
+                      }}
+                      className="w-6 h-6 mx-4"
+                    />
+                  </button>
+                  <button
+                    onClick={() =>
+                      (window.location.href = `/api/v1/demos?uuid=${r.host_demo_id}`)
+                    }
+                  >
+                    <img
+                      src={DownloadIcon}
+                      alt="download"
+                      style={{
+                        filter:
+                          "hue-rotate(300deg) contrast(60%) saturate(1000%)",
+                      }}
+                      className="w-6 h-6"
+                    />
+                  </button>
+                </span>
+              ) : (
+                r.kind === "singleplayer" && (
+                  <span>
+                    <button
+                      onClick={() => {
+                        message("Demo Information", `Demo ID: ${r.demo_id}`);
+                      }}
+                    >
+                      <img src={ThreedotIcon} alt="demo_id" />
+                    </button>
+                    <button
+                      onClick={() =>
+                        (window.location.href = `/api/v1/demos?uuid=${r.demo_id}`)
+                      }
+                    >
+                      <img src={DownloadIcon} alt="download" className="w-6 h-6 mr-4" />
+                    </button>
+                  </span>
+                )
+              )}
+            </span>
+          ))}
+        </div>
+      </section>
+    </div>
  );
 };
diff --git a/frontend/src/components/Login.tsx b/frontend/src/components/Login.tsx
index f1628b2..ba85aeb 100644
--- a/frontend/src/components/Login.tsx
+++ b/frontend/src/components/Login.tsx
@@ -1,19 +1,18 @@
-import React from 'react';
+import React from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { ExitIcon, UserIcon, LoginIcon } from '@images/Images';
+import { ExitIcon, UserIcon, LoginIcon } from "../images/Images";
-import { UserProfile } from '@customTypes/Profile';
+import { UserProfile } from "@customTypes/Profile";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import "@css/Login.css";
 interface LoginProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
  profile?: UserProfile;
  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
-};
+  isOpen: boolean; 
+}
-const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
+const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile, isOpen }) => {
  const navigate = useNavigate();
  const _login = () => {
@@ -29,52 +28,71 @@ const Login: React.FC<LoginProps> = ({ setToken, profile, setProfile }) => {
  return (
    <>
-      {profile
+      {profile ? (
-        ?
+        <>
-        (
+          {profile.profile ? (
-          <>
+            <>
-            {profile.profile ?
+              <Link to="/profile" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
-              (
+                <button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
-                <>
+                  <img
-                  <Link to="/profile" tabIndex={-1} className='login'>
+                    className="rounded-[50px]"
-                    <button className='sidebar-button'>
+                    src={profile.avatar_link}
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
+                    alt=""
-                      <span>{profile.user_name}</span>
+                  />
-                    </button>
+                  <span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">{profile.user_name}</span>
-                    <button className='logout-button' onClick={_logout}>
+                </button>
-                      <img src={ExitIcon} alt="" /><span />
+                <button className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent" onClick={_logout}>
-                    </button>
+                  <img src={ExitIcon} alt="" />
-                  </Link>
+                  <span />
-                </>
+                </button>
-              )
+              </Link>
-              :
+            </>
-              (
+          ) : (
-                <>
+            <>
-                  <Link to="/" tabIndex={-1} className='login'>
+              <Link to="/" tabIndex={-1} className="grid grid-cols-[50px_auto_200px]">
-                    <button className='sidebar-button'>
+                <button className="grid grid-cols-[50px_auto] place-items-start text-left bg-inherit cursor-pointer border-none w-[310px] h-10 rounded-[20px] py-[0.3em] px-0 pl-[11px] transition-all duration-300">
-                      <img className="avatar-img" src={profile.avatar_link} alt="" />
+                  <img
-                      <span>Loading Profile...</span>
+                    className="rounded-[50px]"
-                    </button>
+                    src={profile.avatar_link}
-                    <button disabled className='logout-button' onClick={_logout}>
+                    alt=""
-                      <img src={ExitIcon} alt="" /><span />
+                  />
-                    </button>
+                  <span className="font-[--font-barlow-semicondensed-regular] text-lg text-foreground h-8 leading-7 transition-opacity duration-100 max-w-[22ch] overflow-hidden">Loading Profile...</span>
-                  </Link>
+                </button>
-                </>
+                <button disabled className="relative left-[210px] w-[50px] !pl-[10px] !bg-transparent hidden" 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="" />
+        <Link to="/api/v1/login" tabIndex={-1}>
-              <span>
+          <button
-                <img src={LoginIcon} alt="Sign in through Steam" />
+            className={`${
-              </span>
+              isOpen
-            </button>
+                ? "grid grid-cols-[50px_auto] place-items-start pl-[11px]"
-          </Link>
+                : "flex items-center justify-center"
-        )}
+            } text-left bg-inherit cursor-pointer border-none w-[310px] h-16 rounded-[20px] py-[0.3em] px-0 transition-all duration-300 ${isOpen ? "text-white" : "text-gray-400"}`}
+            onClick={_login}
+          >
+            <span className={`font-[--font-barlow-semicondensed-regular] text-lg h-12 leading-7 transition-opacity duration-100 ${isOpen ? " overflow-hidden" : ""}`}>
+              {isOpen ? (
+                <div className="bg-neutral-800 p-2 rounded-lg w-64 flex flex-row items-center justifyt-start gap-2 font-semibold">
+                  <LoginIcon />
+                  <span>
+                    Login with Steam
+                  </span>
+                </div>
+              ) : (
+                <div className="bg-neutral-800 p-2 rounded-lg w-">
+                  <LoginIcon />
+                </div>
+              )}
+            </span>
+          </button>
+        </Link>
+      )}
    </>
  );
 };
diff --git a/frontend/src/components/MapEntry.tsx b/frontend/src/components/MapEntry.tsx
index 0f494ad..985e806 100644
--- a/frontend/src/components/MapEntry.tsx
+++ b/frontend/src/components/MapEntry.tsx
@@ -1,12 +1,8 @@
-import React from 'react';
+import React from "react";
 import { Link } from "react-router-dom";
 const MapEntry: React.FC = () => {
-    return (
+  return <div></div>;
-        <div>
+};
-        </div>
-    )
-}
 export default MapEntry;
diff --git a/frontend/src/components/MessageDialog.tsx b/frontend/src/components/MessageDialog.tsx
index 5c85189..fcf4d8d 100644
--- a/frontend/src/components/MessageDialog.tsx
+++ b/frontend/src/components/MessageDialog.tsx
@@ -1,29 +1,33 @@
-import React from 'react';
+import React from "react";
-import "@css/Dialog.css"
+import "@css/Dialog.css";
 interface MessageDialogProps {
-    title: string;
+  title: string;
-    subtitle: string;
+  subtitle: string;
-    onClose: () => void;
+  onClose: () => void;
-};
+}
-const MessageDialog: React.FC<MessageDialogProps> = ({ title, subtitle, onClose }) => {
+const MessageDialog: React.FC<MessageDialogProps> = ({
-    return (
+  title,
-        <div className='dimmer'>
+  subtitle,
-            <div className='dialog'>
+  onClose,
-                <div className='dialog-element dialog-header'>
+}) => {
-                    <span>{title}</span>
+  return (
-                </div>
+    <div className="dimmer">
-                <div className='dialog-element dialog-description'>
+      <div className="dialog">
-                    <span>{subtitle}</span>
+        <div className="dialog-element dialog-header">
-                </div>
+          <span>{title}</span>
-                <div className='dialog-element dialog-btns-container'>
-                    <button onClick={onClose}>Close</button>
-                </div>
-            </div>
        </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..64cdd29 100644
--- a/frontend/src/components/MessageDialogLoad.tsx
+++ b/frontend/src/components/MessageDialogLoad.tsx
@@ -1,29 +1,31 @@
-import React from 'react';
+import React from "react";
-import "@css/Dialog.css"
+import "@css/Dialog.css";
 interface MessageDialogLoadProps {
-    title: string;    
+  title: string;
-        onClose: () => void;
+  onClose: () => void;
-};
+}
-const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({ title, onClose }) => {
+const MessageDialogLoad: React.FC<MessageDialogLoadProps> = ({
-    return (
+  title,
-        <div className='dimmer'>
+  onClose,
-            <div className='dialog'>
+}) => {
-                <div className='dialog-element dialog-header'>
+  return (
-                    <span>{title}</span>
+    <div className="dimmer">
-                </div>
+      <div className="dialog">
-                <div className='dialog-element dialog-description'>
+        <div className="dialog-element dialog-header">
-                                        <div style={{display: "flex", justifyContent: "center"}}>
+          <span>{title}</span>
-                        <span className="loader"></span>
-                                        </div>
-                </div>
-                <div className='dialog-element dialog-btns-container'>
-                </div>
-            </div>
        </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 925b8a8..a0d7eb7 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -1,12 +1,11 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { MapSummary } from '@customTypes/Map';
+import { MapSummary } from "@customTypes/Map";
-import { ModMenuContent } from '@customTypes/Content';
+import { ModMenuContent } from "@customTypes/Content";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-import "@css/ModMenu.css"
+import useConfirm from "@hooks/UseConfirm";
-import useConfirm from '@hooks/UseConfirm';
 interface ModMenuProps {
  token?: string;
@@ -15,8 +14,12 @@ interface ModMenuProps {
  mapID: string;
 }
-const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) => {
+const ModMenu: React.FC<ModMenuProps> = ({
+  token,
+  data,
+  selectedRun,
+  mapID,
+}) => {
  const { confirm, ConfirmDialogComponent } = useConfirm();
  const [menu, setMenu] = React.useState<number>(0);
@@ -55,74 +58,99 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
              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));
          };
        }
      };
    });
-  };
+  }
  const _edit_map_summary_image = async () => {
-    if (await confirm("Edit Map Summary Image", "Are you sure you want to submit this to the database?")) {
+    if (
+      await confirm(
+        "Edit Map Summary Image",
+        "Are you sure you want to submit this to the database?"
+      )
+    ) {
      if (token) {
        const success = await API.put_map_image(token, mapID, image);
        if (success) {
          navigate(0);
        } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
        }
      }
    }
  };
  const _edit_map_summary_route = async () => {
-    if (await confirm("Edit Map Summary Route", "Are you sure you want to submit this to the database?")) {
+    if (
+      await confirm(
+        "Edit Map Summary Route",
+        "Are you sure you want to submit this to the database?"
+      )
+    ) {
      if (token) {
        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.");
        }
      }
    }
  };
  const _create_map_summary_route = async () => {
-    if (await confirm("Create Map Summary Route", "Are you sure you want to submit this to the database?")) {
+    if (
+      await confirm(
+        "Create Map Summary Route",
+        "Are you sure you want to submit this to the database?"
+      )
+    ) {
      if (token) {
        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.");
        }
      }
    }
  };
  const _delete_map_summary_route = async () => {
-    if (await confirm("Delete Map Summary Route", `Are you sure you want to submit this to the database?\n
+    if (
-      ${data.summary.routes[selectedRun].category.name}\n${data.summary.routes[selectedRun].history.score_count} portals\n${data.summary.routes[selectedRun].history.runner_name}`)) {
+      await confirm(
+        "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}`
+      )
+    ) {
      if (token) {
-        const success = await API.delete_map_summary(token, mapID, data.summary.routes[selectedRun].route_id);
+        const success = await API.delete_map_summary(
+          token,
+          mapID,
+          data.summary.routes[selectedRun].route_id
+        );
        if (success) {
          navigate(0);
        } else {
-          alert("Error. Check logs.")
+          alert("Error. Check logs.");
        }
      }
    }
  };
  React.useEffect(() => {
-    if (menu === 3) { // add route
+    if (menu === 3) {
+      // add route
      setRouteContent({
        id: 0,
        name: "",
@@ -134,7 +162,8 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
      });
      setMd("No description available.");
    }
-    if (menu === 2) { // edit route
+    if (menu === 2) {
+      // edit route
      setRouteContent({
        id: data.summary.routes[selectedRun].route_id,
        name: data.summary.routes[selectedRun].history.runner_name,
@@ -146,207 +175,335 @@ const ModMenu: React.FC<ModMenuProps> = ({ token, data, selectedRun, mapID }) =>
      });
      setMd(data.summary.routes[selectedRun].description);
    }
-  }, [menu]);
+  }, [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%)"
+      showButton
-        : modview.style.transform = "translateY(0%)"
+        ? (modview.style.transform = "translateY(-68%)")
+        : (modview.style.transform = "translateY(0%)");
    }
-    const modview_block = document.querySelector("#modview_block") as HTMLElement
+    const modview_block = document.querySelector(
+      "#modview_block"
+    ) as HTMLElement;
    if (modview_block) {
-      showButton ? modview_block.style.display = "none" : modview_block.style.display = "block"
+      showButton
+        ? (modview_block.style.display = "none")
+        : (modview_block.style.display = "block");
    }
-  }, [showButton])
+  }, [showButton]);
  return (
    <>
      {ConfirmDialogComponent}
      <div id="modview_block" />
-      <div id='modview'>
+      <div id="modview">
        <div>
          <button onClick={() => setMenu(1)}>Edit Image</button>
          <button onClick={() => setMenu(2)}>Edit Selected Route</button>
          <button onClick={() => setMenu(3)}>Add New Route</button>
-          <button onClick={() => _delete_map_summary_route()}>Delete Selected Route</button>
+          <button onClick={() => _delete_map_summary_route()}>
+            Delete Selected Route
+          </button>
        </div>
        <div>
          {showButton ? (
            <button onClick={() => setShowButton(false)}>Show</button>
          ) : (
-            <button onClick={() => { setShowButton(true); setMenu(0); }}>Hide</button>
+            <button
+              onClick={() => {
+                setShowButton(true);
+                setMenu(0);
+              }}
+            >
+              Hide
+            </button>
          )}
        </div>
-      </div><div id='modview-menu'>
+      </div>
-        {// Edit Image
+      <div id="modview-menu">
+        {
+          // Edit Image
          menu === 1 && (
-            <div id='modview-menu-image'>
+            <div id="modview-menu-image">
              <div>
                <span>Current Image:</span>
                <img src={data.map.image} alt="missing" />
              </div>
              <div>
-                <span>New Image:
+                <span>
-                  <input type="file" accept='image/*' onChange={e => {
+                  New Image:
-                    if (e.target.files) {
+                  <input
-                      compressImage(e.target.files[0])
+                    type="file"
-                        .then(d => setImage(d));
+                    accept="image/*"
-                    }
+                    onChange={e => {
-                  }} /></span>
+                      if (e.target.files) {
-                {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>}
+                        compressImage(e.target.files[0]).then(d => setImage(d));
-                <img src={image} alt="" id='modview-menu-image-file' />
+                      }
+                    }}
+                  />
+                </span>
+                {image ? (
+                  <button onClick={() => _edit_map_summary_image()}>
+                    upload
+                  </button>
+                ) : (
+                  <span></span>
+                )}
+                <img src={image} alt="" id="modview-menu-image-file" />
              </div>
            </div>
-          )}
+          )
+        }
-        {// Edit Route
+        {
+          // Edit Route
          menu === 2 && (
-            <div id='modview-menu-edit'>
+            <div id="modview-menu-edit">
-              <div id='modview-route-id'>
+              <div id="modview-route-id">
                <span>Route ID:</span>
                <input type="number" value={routeContent.id} disabled />
              </div>
-              <div id='modview-route-name'>
+              <div id="modview-route-name">
                <span>Runner Name:</span>
-                <input type="text" value={routeContent.name} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="text"
-                    ...routeContent,
+                  value={routeContent.name}
-                    name: e.target.value,
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      name: e.target.value,
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-score'>
+              <div id="modview-route-score">
                <span>Score:</span>
-                <input type="number" value={routeContent.score} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="number"
-                    ...routeContent,
+                  value={routeContent.score}
-                    score: parseInt(e.target.value),
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      score: parseInt(e.target.value),
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-date'>
+              <div id="modview-route-date">
                <span>Date:</span>
-                <input type="date" value={routeContent.date} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="date"
-                    ...routeContent,
+                  value={routeContent.date}
-                    date: e.target.value,
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      date: e.target.value,
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-showcase'>
+              <div id="modview-route-showcase">
                <span>Showcase Video:</span>
-                <input type="text" value={routeContent.showcase} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="text"
-                    ...routeContent,
+                  value={routeContent.showcase}
-                    showcase: e.target.value,
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      showcase: e.target.value,
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-description' style={{ height: "180px", gridColumn: "1 / span 5" }}>
+              <div
+                id="modview-route-description"
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
+              >
                <span>Description:</span>
-                <textarea value={routeContent.description} onChange={(e) => {
+                <textarea
-                  setRouteContent({
+                  value={routeContent.description}
-                    ...routeContent,
+                  onChange={e => {
-                    description: e.target.value,
+                    setRouteContent({
-                  });
+                      ...routeContent,
-                  setMd(routeContent.description);
+                      description: e.target.value,
-                }} />
+                    });
+                    setMd(routeContent.description);
+                  }}
+                />
              </div>
-              <button style={{ gridColumn: "2 / span 3", height: "40px" }} onClick={_edit_map_summary_route}>Apply</button>
+              <button
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
+                onClick={_edit_map_summary_route}
+              >
+                Apply
+              </button>
-              <div id='modview-md'>
+              <div id="modview-md">
                <span>Markdown Preview</span>
-                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>Documentation</a></span>
+                <span>
-                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>Demo</a></span>
+                  <a
+                    href="https://commonmark.org/help/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Documentation
+                  </a>
+                </span>
+                <span>
+                  <a
+                    href="https://remarkjs.github.io/react-markdown/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Demo
+                  </a>
+                </span>
                <p>
-                  <ReactMarkdown>{md}
+                  <ReactMarkdown>{md}</ReactMarkdown>
-                  </ReactMarkdown>
                </p>
              </div>
            </div>
-          )}
+          )
+        }
-        {// Add Route
+        {
+          // Add Route
          menu === 3 && (
-            <div id='modview-menu-add'>
+            <div id="modview-menu-add">
-              <div id='modview-route-category'>
+              <div id="modview-route-category">
                <span>Category:</span>
-                <select onChange={(e) => {
+                <select
-                  setRouteContent({
+                  onChange={e => {
-                    ...routeContent,
+                    setRouteContent({
-                    category_id: parseInt(e.target.value),
+                      ...routeContent,
-                  });
+                      category_id: parseInt(e.target.value),
-                }}>
+                    });
-                  <option value="1" key="1">CM</option>
+                  }}
-                  <option value="2" key="2">No SLA</option>
+                >
-                  {data.map.game_name === "Portal 2 - Cooperative" ? "" : (
+                  <option value="1" key="1">
-                    <option value="3" key="3">Inbounds SLA</option>)}
+                    CM
-                  <option value="4" key="4">Any%</option>
+                  </option>
+                  <option value="2" key="2">
+                    No SLA
+                  </option>
+                  {data.map.game_name === "Portal 2 - Cooperative" ? (
+                    ""
+                  ) : (
+                    <option value="3" key="3">
+                      Inbounds SLA
+                    </option>
+                  )}
+                  <option value="4" key="4">
+                    Any%
+                  </option>
                </select>
              </div>
-              <div id='modview-route-name'>
+              <div id="modview-route-name">
                <span>Runner Name:</span>
-                <input type="text" value={routeContent.name} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="text"
-                    ...routeContent,
+                  value={routeContent.name}
-                    name: e.target.value,
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      name: e.target.value,
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-score'>
+              <div id="modview-route-score">
                <span>Score:</span>
-                <input type="number" value={routeContent.score} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="number"
-                    ...routeContent,
+                  value={routeContent.score}
-                    score: parseInt(e.target.value),
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      score: parseInt(e.target.value),
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-date'>
+              <div id="modview-route-date">
                <span>Date:</span>
-                <input type="date" value={routeContent.date} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="date"
-                    ...routeContent,
+                  value={routeContent.date}
-                    date: e.target.value,
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      date: e.target.value,
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-showcase'>
+              <div id="modview-route-showcase">
                <span>Showcase Video:</span>
-                <input type="text" value={routeContent.showcase} onChange={(e) => {
+                <input
-                  setRouteContent({
+                  type="text"
-                    ...routeContent,
+                  value={routeContent.showcase}
-                    showcase: e.target.value,
+                  onChange={e => {
-                  });
+                    setRouteContent({
-                }} />
+                      ...routeContent,
+                      showcase: e.target.value,
+                    });
+                  }}
+                />
              </div>
-              <div id='modview-route-description' style={{ height: "180px", gridColumn: "1 / span 5" }}>
+              <div
+                id="modview-route-description"
+                style={{ height: "180px", gridColumn: "1 / span 5" }}
+              >
                <span>Description:</span>
-                <textarea value={routeContent.description} onChange={(e) => {
+                <textarea
-                  setRouteContent({
+                  value={routeContent.description}
-                    ...routeContent,
+                  onChange={e => {
-                    description: e.target.value,
+                    setRouteContent({
-                  });
+                      ...routeContent,
-                  setMd(routeContent.description);
+                      description: e.target.value,
-                }} />
+                    });
+                    setMd(routeContent.description);
+                  }}
+                />
              </div>
-              <button style={{ gridColumn: "2 / span 3", height: "40px" }} onClick={_create_map_summary_route}>Apply</button>
+              <button
+                style={{ gridColumn: "2 / span 3", height: "40px" }}
+                onClick={_create_map_summary_route}
+              >
+                Apply
+              </button>
-              <div id='modview-md'>
+              <div id="modview-md">
                <span>Markdown preview</span>
-                <span><a href="https://commonmark.org/help/" rel="noreferrer" target='_blank'>documentation</a></span>
+                <span>
-                <span><a href="https://remarkjs.github.io/react-markdown/" rel="noreferrer" target='_blank'>demo</a></span>
+                  <a
+                    href="https://commonmark.org/help/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    documentation
+                  </a>
+                </span>
+                <span>
+                  <a
+                    href="https://remarkjs.github.io/react-markdown/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    demo
+                  </a>
+                </span>
                <p>
-                  <ReactMarkdown>{md}
+                  <ReactMarkdown>{md}</ReactMarkdown>
-                  </ReactMarkdown>
                </p>
              </div>
            </div>
-          )}
+          )
+        }
      </div>
    </>
  );
diff --git a/frontend/src/components/RankingEntry.tsx b/frontend/src/components/RankingEntry.tsx
index b899965..f28eabf 100644
--- a/frontend/src/components/RankingEntry.tsx
+++ b/frontend/src/components/RankingEntry.tsx
@@ -1,46 +1,65 @@
-import React from 'react';
+import React from "react";
 import { Link } from "react-router-dom";
-import { RankingType, SteamRanking, SteamRankingType } from '@customTypes/Ranking';
+import { RankingType, SteamRankingType } from "@customTypes/Ranking";
 enum RankingCategories {
-    rankings_overall,
+  rankings_overall,
-    rankings_multiplayer,
+  rankings_multiplayer,
-    rankings_singleplayer
+  rankings_singleplayer,
 }
 interface RankingEntryProps {
-    curRankingData: RankingType | SteamRankingType;
+  curRankingData: RankingType | SteamRankingType;
-    currentLeaderboardType: RankingCategories
+  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>
-        )
-    }
 }
+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}
+              alt={`${prop.curRankingData.user.user_name}'s Avatar`}
+            ></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..88a5297 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,99 +1,80 @@
-import React from 'react';
+import React, { useCallback, useRef } from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
-import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images';
+import {
-import Login from '@components/Login';
+  BookIcon,
-import { UserProfile } from '@customTypes/Profile';
+  FlagIcon,
-import { Search } from '@customTypes/Search';
+  HelpIcon,
-import { API } from '@api/Api';
+  HomeIcon,
-import "@css/Sidebar.css";
+  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";
 interface SidebarProps {
  setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
  profile?: UserProfile;
  setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
  onUploadRun: () => void;
-};
+}
+function OpenSidebarIcon(){
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-panel-right-close-icon lucide-panel-right-close"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m8 9 3 3-3 3"/></svg>
+  )
+}
-const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUploadRun }) => {
+function ClosedSidebarIcon(){
+  return (
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-panel-right-open-icon lucide-panel-right-open"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/><path d="m10 15-3-3 3-3"/></svg>  )
+}
-  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);
+  const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(false);
+  const [selectedButtonIndex, setSelectedButtonIndex] = React.useState<number>(1);
  const location = useLocation();
  const path = location.pathname;
-  const handle_sidebar_click = (clicked_sidebar_idx: number) => {
+  const sidebarRef = useRef<HTMLDivElement>(null);
-    const btn = document.querySelectorAll("button.sidebar-button");
+  const searchbarRef = useRef<HTMLInputElement>(null);
-    if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() }
+  const uploadRunRef = useRef<HTMLButtonElement>(null);
-    // clusterfuck
+  const sidebarButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);
-    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")
-  };
-  const _handle_sidebar_hide = () => {
+  const _handle_sidebar_toggle = useCallback(() => {
-    var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>
+    if (!sidebarRef.current) return;
-    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"
-        setTimeout(() => {
-          uploadRunSpan.style.opacity = "1"
-        }, 100)
-      }
      setSidebarOpen(false);
-      side.style.width = "320px"
-      btn.forEach((e, i) => {
-        e.style.width = "310px"
-        e.style.padding = "0.4em 0 0 11px"
-        setTimeout(() => {
-          span[i].style.opacity = "1"
-        }, 100)
-      });
-      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"
-      }
      setSidebarOpen(true);
-      side.style.width = "40px";
+      searchbarRef.current?.focus();
-      searchbar.focus();
-      btn.forEach((e, i) => {
-        e.style.width = "40px"
-        e.style.padding = "0.4em 0 0 5px"
-        span[i].style.opacity = "0"
-      })
-      setTimeout(() => {
-        side.style.zIndex = "0"
-      }, 300);
    }
-  };
+  }, [isSidebarOpen]);
-  const _handle_sidebar_lock = () => {
+  const handle_sidebar_click = useCallback(
-    if (!isSidebarLocked) {
+    (clicked_sidebar_idx: number) => {
-      _handle_sidebar_hide()
+      setSelectedButtonIndex(clicked_sidebar_idx);
-      setIsSidebarLocked(true);
+      if (isSidebarOpen) {
-      setTimeout(() => setIsSidebarLocked(false), 300);
+        setSidebarOpen(false);
-    }
+      }
-  };
+    },
+    [isSidebarOpen]
+  );
  const _handle_search_change = async (q: string) => {
    const searchResponse = await API.get_search(q);
@@ -101,100 +82,200 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
  };
  React.useEffect(() => {
-    if (path === "/") { handle_sidebar_click(1) }
+    if (path === "/") {
-    else if (path.includes("games")) { handle_sidebar_click(2) }
+      setSelectedButtonIndex(1);
-    else if (path.includes("rankings")) { handle_sidebar_click(3) }
+    } else if (path.includes("games")) {
-    // else if (path.includes("news")) { handle_sidebar_click(4) }
+      setSelectedButtonIndex(2);
-    // else if (path.includes("scorelog")) { handle_sidebar_click(5) }
+    } else if (path.includes("rankings")) {
-    else if (path.includes("profile")) { handle_sidebar_click(4) }
+      setSelectedButtonIndex(3);
-    else if (path.includes("rules")) { handle_sidebar_click(5) }
+    } else if (path.includes("profile")) {
-    else if (path.includes("about")) { handle_sidebar_click(6) }
+      setSelectedButtonIndex(4);
+    } else if (path.includes("rules")) {
+      setSelectedButtonIndex(5);
+    } else if (path.includes("about")) {
+      setSelectedButtonIndex(6);
+    }
  }, [path]);
-  return (
+  const getButtonClasses = (buttonIndex: number) => {
-    <div id='sidebar'>
+    const baseClasses = "flex items-center gap-3 w-full text-left bg-inherit cursor-pointer border-none rounded-lg py-3 px-3 transition-all duration-300 hover:bg-surface1";
-      <Link to="/" tabIndex={-1}>
+    const selectedClasses = selectedButtonIndex === buttonIndex ? "bg-primary text-background" : "bg-transparent text-foreground";
-        <div id='logo'> {/* logo */}
+    
-          <img src={LogoIcon} alt="" height={"80px"} />
+    return `${baseClasses} ${selectedClasses}`;
-          <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>
-          <span></span>
-          <Link to="/" tabIndex={-1}>
+  const iconClasses = "w-6 h-6 flex-shrink-0";
-            <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
-          </Link>
-          <Link to="/games" tabIndex={-1}>
+  return (
-            <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
+    <div className={`fixed top-0 left-0 h-screen bg-surface border-r border-border transition-all duration-300 z-10 overflow-hidden ${
-          </Link>
+      isSidebarOpen ? 'w-80' : 'w-20'
+    }`}>
+      <div className="flex items-center h-20 px-4 border-b border-border">
+        <Link to="/" tabIndex={-1} className="flex items-center flex-1 cursor-pointer select-none min-w-0">
+          <img src={LogoIcon} alt="Logo" className="w-12 h-12 flex-shrink-0" />
+          {isSidebarOpen && (
+            <div className="ml-3 font-[--font-barlow-condensed-regular] text-white min-w-0 overflow-hidden">
+              <div className="font-[--font-barlow-condensed-bold] text-2xl leading-6 truncate">
+                PORTAL 2
+              </div>
+              <div className="text-sm leading-4 truncate">
+                Least Portals Hub
+              </div>
+            </div>
+          )}
+        </Link>
+        
+        <button
+          onClick={_handle_sidebar_toggle}
+          className="ml-2 p-2 rounded-lg hover:bg-surface1 transition-colors text-foreground"
+          title={isSidebarOpen ? "Close sidebar" : "Open sidebar"}
+        >
+          {isSidebarOpen ? <ClosedSidebarIcon /> : <OpenSidebarIcon />}
+        </button>
+      </div>
-          <Link to="/rankings" tabIndex={-1}>
+      {/* Sidebar Content */}
-            <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button>
+      <div 
-          </Link>
+        ref={sidebarRef}
+        className="flex flex-col h-[calc(100vh-80px)] overflow-y-auto overflow-x-hidden"
+      >
+        {isSidebarOpen && (
+          <div className="p-4 border-b border-border min-w-0">
+            <div className="flex items-center gap-3 mb-3">
+              <img src={SearchIcon} alt="Search" className={iconClasses} />
+              <span className="text-white font-[--font-barlow-semicondensed-regular] truncate">Search</span>
+            </div>
+            
+            <div className="min-w-0">
+              <input
+                ref={searchbarRef}
+                type="text"
+                id="searchbar"
+                placeholder="Search for map or a player..."
+                onChange={e => _handle_search_change(e.target.value)}
+                className="w-full p-2 bg-input text-foreground border border-border rounded-lg text-sm min-w-0"
+              />
-          {/* <Link to="/news" tabIndex={-1}>
+              {searchData && (
-            <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
+                <div className="mt-2 max-h-40 overflow-y-auto min-w-0">
-          </Link> */}
+                  {searchData?.maps.map((q, index) => (
+                    <Link to={`/maps/${q.id}`} className="block p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0" key={index}>
+                      <span className="block text-xs text-subtext1 truncate">{q.game}</span>
+                      <span className="block text-xs text-subtext1 truncate">{q.chapter}</span>
+                      <span className="block text-sm text-foreground truncate">{q.map}</span>
+                    </Link>
+                  ))}
+                  {searchData?.players.map((q, index) => (
+                    <Link
+                      to={
+                        profile && q.steam_id === profile.steam_id
+                          ? `/profile`
+                          : `/users/${q.steam_id}`
+                      }
+                      className="flex items-center p-2 mb-1 bg-surface1 rounded hover:bg-surface2 transition-colors min-w-0"
+                      key={index}
+                    >
+                      <img src={q.avatar_link} alt="pfp" className="w-6 h-6 rounded-full mr-2 flex-shrink-0" />
+                      <span className="text-sm text-foreground truncate">
+                        {q.user_name}
+                      </span>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
-          {/* <Link to="/scorelog" tabIndex={-1}>
+        <div className="flex-1 p-4 min-w-0">
-            <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button>
+          <nav className="space-y-2">
-          </Link> */}
+            {[
+              {
+                to: "/",
+                refIndex: 1,
+                icon: HomeIcon,
+                alt: "Home",
+                label: "Home Page",
+              },
+              {
+                to: "/games",
+                refIndex: 2,
+                icon: PortalIcon,
+                alt: "Games",
+                label: "Games",
+              },
+              {
+                to: "/rankings",
+                refIndex: 3,
+                icon: FlagIcon,
+                alt: "Rankings",
+                label: "Rankings",
+              },
+            ].map(({ to, refIndex, icon, alt, label }) => (
+              <Link to={to} tabIndex={-1} key={refIndex}>
+                <button
+                  ref={el => sidebarButtonRefs.current[refIndex] = el}
+                  className={getButtonClasses(refIndex)}
+                  onClick={() => handle_sidebar_click(refIndex)}
+                >
+                  <img src={icon} alt={alt} className={iconClasses} />
+                  {isSidebarOpen && (
+                    <span className="text-white font-[--font-barlow-semicondensed-regular] truncate">
+                      {label}
+                    </span>
+                  )}
+                </button>
+              </Link>
+            ))}
+          </nav>
        </div>
-        <div id='sidebar-bottomlist'>
-          <span></span>
-          {
+        {/* Bottom Section */}
-            profile && profile.profile ?
+        <div className="p-4 border-t border-border space-y-2 min-w-0">
-              <button id='upload-run' className='submit-run-button' onClick={() => onUploadRun()}><img src={UploadIcon} alt="upload" /><span>Upload&nbsp;Record</span></button>
+          {profile && profile.profile && (
-              : 
+            <button
-              <span></span>
+              ref={uploadRunRef}
-          }
+              id="upload-run"
+              className={getButtonClasses(-1)}
+              onClick={() => onUploadRun()}
+            >
+              <img src={UploadIcon} alt="Upload" className={iconClasses} />
+              {isSidebarOpen && <span className="font-[--font-barlow-semicondensed-regular] truncate">Upload Record</span>}
+            </button>
+          )}
-          <Login setToken={setToken} profile={profile} setProfile={setProfile} />
+          <div className={isSidebarOpen ? 'min-w-0' : 'flex justify-center'}>
+            <Login
+              setToken={setToken}
+              profile={profile}
+              setProfile={setProfile}
+              isOpen={isSidebarOpen}
+            />
+          </div>
          <Link to="/rules" tabIndex={-1}>
-            <button className='sidebar-button'><img src={BookIcon} alt="rules" /><span>Leaderboard&nbsp;Rules</span></button>
+            <button 
+              ref={el => sidebarButtonRefs.current[5] = el}
+              className={getButtonClasses(5)}
+              onClick={() => handle_sidebar_click(5)}
+            >
+              <img src={BookIcon} alt="Rules" className={iconClasses} />
+              {isSidebarOpen && <span className="font-[--font-barlow-semicondensed-regular] truncate">Leaderboard 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 
+              ref={el => sidebarButtonRefs.current[6] = el}
+              className={getButtonClasses(6)}
+              onClick={() => handle_sidebar_click(6)}
+            >
+              <img src={HelpIcon} alt="About" className={iconClasses} />
+              {isSidebarOpen && <span className="font-[--font-barlow-semicondensed-regular] truncate">About 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'>
-          {searchData?.maps.map((q, 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>
-            </Link>
-          ))}
-        </div>
-      </div>
    </div>
  );
 };
diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 7da2f1e..ba91f57 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -1,193 +1,267 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { MapSummary } from '@customTypes/Map';
+import { MapSummary } from "@customTypes/Map";
-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) {
+  const _select_run = React.useCallback(
-    let r = document.querySelectorAll("button.record");
+    (idx: number, category_id: number) => {
-    r.forEach(e => (e as HTMLElement).style.backgroundColor = "#2b2e46");
+      let r = document.querySelectorAll("button.record");
-    (r[idx] as HTMLElement).style.backgroundColor = "#161723"
+      r.forEach(e => ((e as HTMLElement).style.backgroundColor = "#2b2e46"));
+      (r[idx] as HTMLElement).style.backgroundColor = "#161723";
-    if (data && data.summary.routes.length !== 0) {
+      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(
-      setSelectedRun(idx);
+          e => e.category.id < category_id
-    }
+        ).length; // lethimcook
-  };
+        setSelectedRun(idx);
+      }
+    },
+    [data, setSelectedRun]
+  );
  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 _category_change = React.useCallback(() => {
    const btn = document.querySelectorAll("#section3 #category span button");
-    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    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;
+    const idx =
+      selectedCategory === 1
+        ? 0
+        : data.map.is_coop
+          ? selectedCategory - 3
+          : selectedCategory - 1;
    (btn[idx] as HTMLElement).style.backgroundColor = "#202232";
-  };
+  }, [selectedCategory, data.map.is_coop]);
-  function _history_change() {
+  const _history_change = React.useCallback(() => {
    const btn = document.querySelectorAll("#section3 #history span button");
-    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    btn.forEach(e => {
-    (historySelected ? btn[1] as HTMLElement : btn[0] as HTMLElement).style.backgroundColor = "#202232";
+      (e as HTMLElement).style.backgroundColor = "#2b2e46";
-  };
+    });
+    (historySelected
+      ? (btn[1] as HTMLElement)
+      : (btn[0] as HTMLElement)
+    ).style.backgroundColor = "#202232";
+  }, [historySelected]);
  React.useEffect(() => {
    _history_change();
-  }, [historySelected]);
+  }, [historySelected, _history_change]);
  React.useEffect(() => {
    _category_change();
    _select_run(0, selectedCategory);
-  }, [selectedCategory]);
+  }, [selectedCategory, _category_change, _select_run]);
  React.useEffect(() => {
    _select_run(0, selectedCategory);
-  }, []);
+  }, [_select_run, selectedCategory]);
  return (
    <>
-      <section id='section3' className='summary1'>
+      <section id="section3" className="summary1 text-foreground">
-        <div id='category'
+        <div
-          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}>
+          id="category"
-          <img src={data.map.image} alt="" id='category-image'></img>
+          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}
-          <p><span className='portal-count'>{data.summary.routes[selectedRun].history.score_count}</span>
+        >
-            {data.summary.routes[selectedRun].history.score_count === 1 ? ` portal` : ` portals`}</p>
+          <img src={data.map.image} alt="" id="category-image"></img>
-          {data.map.is_coop ? // TODO: make this part dynamic
+          <p>
-            (
+            <span className="portal-count">
-              <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
+              {data.summary.routes[selectedRun].history.score_count}
-                <button onClick={() => setSelectedCategory(1)}>CM</button>
+            </span>
-                <button onClick={() => setSelectedCategory(4)}>Any%</button>
+            {data.summary.routes[selectedRun].history.score_count === 1
-                <button onClick={() => setSelectedCategory(5)}>All Courses</button>
+              ? ` portal`
-              </span>
+              : ` portals`}
-            )
+          </p>
-            :
+          {data.map.is_coop ? ( // TODO: make this part dynamic
-            (
+            <span style={{ gridTemplateColumns: "1fr 1fr 1fr" }}>
-              <span style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}>
+              <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(4)}>Any%</button>
-                <button onClick={() => setSelectedCategory(1)}>CM</button>
+              <button onClick={() => setSelectedCategory(5)}>
-                <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
+                All Courses
-                <button onClick={() => setSelectedCategory(3)}>Inbounds SLA</button>
+              </button>
-                <button onClick={() => setSelectedCategory(4)}>Any%</button>
+            </span>
-              </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 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> :
+            {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={() => {
+                      <button
-                        _select_run(index, r.category.id);
+                        className="record"
-                      }}>
+                        key={index}
-                        <span>{new Date(r.history.date).toLocaleDateString(
+                        onClick={() => {
-                          "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
+                          _select_run(index, r.category.id);
-                        )}</span>
+                        }}
+                      >
+                        <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> :
+            {data.summary.routes.filter(e => e.category.id === selectedCategory)
-              <div id='graph'>
+              .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">
-      </section >
+        <div id="difficulty">
-      <section id='section4' className='summary1'>
+          <span className="">Difficulty</span>
-        <div id='difficulty'>
+          {data.map.difficulty <= 2 && (
-          <span>Difficulty</span>
+            <span style={{ color: "lime" }}>Very Easy</span>
-          {data.map.difficulty <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          )}
-          {data.map.difficulty > 2 && data.map.difficulty <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
+          {data.map.difficulty > 2 && data.map.difficulty <= 4 && (
-          {data.map.difficulty > 4 && data.map.difficulty <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
+            <span style={{ color: "green" }}>Easy</span>
-          {data.map.difficulty > 6 && data.map.difficulty <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
+          )}
-          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (<span style={{ color: "red" }}>Very hard</span>)}
+          {data.map.difficulty > 4 && data.map.difficulty <= 6 && (
+            <span style={{ color: "yellow" }}>Medium</span>
+          )}
+          {data.map.difficulty > 6 && data.map.difficulty <= 8 && (
+            <span style={{ color: "orange" }}>Hard</span>
+          )}
+          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (
+            <span style={{ color: "red" }}>Very Hard</span>
+          )}
          <div>
-            {data.map.difficulty <= 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.map.difficulty <= 2 && ? (
-            {data.map.difficulty > 2 && data.map.difficulty <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+              <div
-            {data.map.difficulty > 4 && data.map.difficulty <= 6 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+                className="difficulty-rating"
-            {data.map.difficulty > 6 && data.map.difficulty <= 8 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+                style={{ backgroundColor: "lime" }}
-            {data.map.difficulty > 8 && data.map.difficulty <= 10 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.map.difficulty > 2 && data.map.difficulty <= 4 && ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: "green" }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.map.difficulty > 4 && data.map.difficulty <= 6 && ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: "yellow" }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.map.difficulty > 6 && data.map.difficulty <= 8 && ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: "orange" }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
+            {data.map.difficulty > 8 && data.map.difficulty <= 10 && ? (
+              <div
+                className="difficulty-rating"
+                style={{ backgroundColor: "red" }}
+              ></div>
+            ) : (
+              <div className="difficulty-rating"></div>
+            )}
          </div>
        </div>
-        {/* <div id='difficulty'>
+        <div id="count">
-          <span>Difficulty</span>
-          {data.summary.routes[selectedRun].rating <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
-          {data.summary.routes[selectedRun].rating > 2 && data.summary.routes[selectedRun].rating <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
-          {data.summary.routes[selectedRun].rating > 4 && data.summary.routes[selectedRun].rating <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
-          {data.summary.routes[selectedRun].rating > 6 && data.summary.routes[selectedRun].rating <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
-          {data.summary.routes[selectedRun].rating > 8 && data.summary.routes[selectedRun].rating <= 10 && (<span style={{ color: "red" }}>Very hard</span>)}
-          <div>
-            {data.summary.routes[selectedRun].rating <= 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating > 2 && data.summary.routes[selectedRun].rating <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating > 4 && data.summary.routes[selectedRun].rating <= 6 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating > 6 && data.summary.routes[selectedRun].rating <= 8 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
-            {data.summary.routes[selectedRun].rating > 8 && data.summary.routes[selectedRun].rating <= 10 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
-          </div>
-        </div> */}
-        <div id='count'>
          <span>Completion Count</span>
          <div>{data.summary.routes[selectedRun].completion_count}</div>
        </div>
      </section>
-      <section id='section5' className='summary1'>
+      <section id="section5" className="summary1">
-        <div id='description'>
+        <div id="description">
-          {data.summary.routes[selectedRun].showcase !== "" ?
+          {data.summary.routes[selectedRun].showcase !== "" ? (
-            <iframe title='Showcase video' src={"https://www.youtube.com/embed/" + _get_youtube_id(data.summary.routes[selectedRun].showcase)}> </iframe>
+            <iframe
-            : ""}
+              title="Showcase video"
-          <h3>Route Description</h3>
+              src={
-          <span id='description-text'>
+                "https://www.youtube.com/embed/" +
-            <ReactMarkdown>
+                _get_youtube_id(data.summary.routes[selectedRun].showcase)
+              }
+            >
+              {" "}
+            </iframe>
+          ) : (
+            ""
+          )}
+          <h3 className="font-semibold">Route Description</h3>
+          <span id="description-text">
+            <ReactMarkdown className="text-foreground">
              {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..0034019 100644
--- a/frontend/src/components/UploadRunDialog.tsx
+++ b/frontend/src/components/UploadRunDialog.tsx
@@ -1,15 +1,14 @@
-import React from 'react';
+import React from "react";
-import { UploadRunContent } from '@customTypes/Content';
+import { UploadRunContent } from "@customTypes/Content";
-import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from '@nekz/sdp';
+import { ScoreboardTempUpdate, SourceDemoParser, NetMessages } from "@nekz/sdp";
-import '@css/UploadRunDialog.css';
+import { Game } from "@customTypes/Game";
-import { Game } from '@customTypes/Game';
+import { API } from "@api/Api";
-import { API } from '@api/Api';
+import { useNavigate } from "react-router-dom";
-import { useNavigate } from 'react-router-dom';
+import useMessage from "@hooks/UseMessage";
-import useMessage from '@hooks/UseMessage';
+import useConfirm from "@hooks/UseConfirm";
-import useConfirm from '@hooks/UseConfirm';
 import useMessageLoad from "@hooks/UseMessageLoad";
-import { MapNames } from '@customTypes/MapNames';
+import { MapNames } from "@customTypes/MapNames";
 interface UploadRunDialogProps {
  token?: string;
@@ -18,18 +17,24 @@ 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>({
+  const [uploadRunContent, setUploadRunContent] =
-    host_demo: null,
+    React.useState<UploadRunContent>({
-    partner_demo: null,
+      host_demo: null,
-  });
+      partner_demo: null,
+    });
  const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
  const [selectedGameName, setSelectedGameName] = React.useState<string>("");
@@ -41,7 +46,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 +58,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 +71,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 +84,7 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
    } else {
      setDragHighlightPartner(false);
    }
-  }
+  };
  const _handle_drop = (e: React.DragEvent<HTMLDivElement>, host: boolean) => {
    e.preventDefault();
@@ -80,18 +92,18 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
    setDragHighlight(true);
    _handle_file_change(e.dataTransfer.files, host);
-  }
+  };
  const _handle_dropdowns = (dropdown: number) => {
    setDropdown1Vis(false);
    setDropdown2Vis(false);
-    if (dropdown == 1) {
+    if (dropdown === 1) {
      setDropdown1Vis(!dropdown1Vis);
-    } else if (dropdown == 2) {
+    } else if (dropdown === 2) {
      setDropdown2Vis(!dropdown2Vis);
      document.querySelector("#dropdown2")?.scrollTo(0, 0);
    }
-  }
+  };
  const _handle_game_select = async (game_id: string, game_name: string) => {
    setLoading(true);
@@ -120,53 +132,76 @@ 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.")
+          await message("Error", "You must select a host demo to upload.");
-          return
+          return;
        } else if (uploadRunContent.partner_demo === null) {
-          await message("Error", "You must select a partner demo to upload.")
+          await message("Error", "You must select a partner demo to upload.");
-          return
+          return;
        }
      } else {
        if (uploadRunContent.host_demo === null) {
-          await message("Error", "You must select a demo to upload.")
+          await message("Error", "You must select a demo to upload.");
-          return
+          return;
        }
      }
      const demo = SourceDemoParser.default()
        .setOptions({ packets: true, header: true })
        .parse(await uploadRunContent.host_demo.arrayBuffer());
-      const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>((msg) => {
+      const scoreboard = demo.findPacket<NetMessages.SvcUserMessage>(msg => {
-        return msg instanceof NetMessages.SvcUserMessage && msg.userMessage instanceof ScoreboardTempUpdate;
+        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.")
+        await message(
-        return
+          "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.")
+        await message(
-        return
+          "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.")
+        await message(
-        return
+          "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.")
+        await message(
-        return
+          "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]);
+      const [success, response] = await API.post_record(
+        token,
+        uploadRunContent,
+        MapNames[demo.mapName]
+      );
      messageLoadClose();
      await message("Upload Record", response);
      if (success) {
@@ -196,84 +231,191 @@ const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ token, open, onClose,
        {MessageDialogLoadComponent}
        {ConfirmDialogComponent}
-        <div id='upload-run-menu'>
+        <div id="upload-run-menu">
-          <div id='upload-run-menu-add'>
+          <div id="upload-run-menu-add">
-            <div id='upload-run-route-category'>
+            <div id="upload-run-route-category">
-              <div style={{ padding: "15px 0px" }} className='upload-run-dropdown-container upload-run-item'>
+              <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
-                  <div className='dropdown-cur'>{selectedGameName}</div>
+                  onClick={() => _handle_dropdowns(1)}
-                  <i style={{ rotate: "-90deg", transform: "translate(-5px, 10px)" }} className="triangle"></i>
+                  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"}>
+                <div
-                  {games.map((game) => (
+                  style={{ top: "110px" }}
-                    <div onClick={() => { _handle_game_select(game.id.toString(), game.name); _handle_dropdowns(1) }} key={game.id}>{game.name}</div>
+                  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 && (
-                !loading &&
+                <>
-                (
+                  <div>
-                  <>
+                    <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
+                    <div
-                    <div>
+                      onClick={() => {
-                      <h3 style={{ margin: "10px 0px" }}>Host Demo</h3>
+                        _handle_file_click(true);
-                      <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)} />
+                      onDragOver={e => {
-                        {!uploadRunContent.host_demo ?
+                        _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>
+                            <span
-                            <div>
+                              style={{
-                              <span style={{ fontFamily: "BarlowSemiCondensed-Regular" }}>Or click here</span><br />
+                                fontFamily: "BarlowSemiCondensed-Regular",
-                              <button style={{ borderRadius: "24px", padding: "5px 8px", margin: "5px 0px" }}>Upload</button>
+                              }}
-                            </div>
+                            >
+                              Or click here
+                            </span>
+                            <br />
+                            <button
+                              style={{
+                                borderRadius: "24px",
+                                padding: "5px 8px",
+                                margin: "5px 0px",
+                              }}
+                            >
+                              Upload
+                            </button>
                          </div>
-                          : null}
+                        </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'>
+                      <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={() => {
+              <button
-                onClose(false);
+                onClick={() => {
-                setUploadRunContent({
+                  onClose(false);
-                  host_demo: null,
+                  setUploadRunContent({
-                  partner_demo: null,
+                    host_demo: null,
-                });
+                    partner_demo: null,
-              }}>Cancel</button>
+                  });
+                }}
+              >
+                Cancel
+              </button>
            </div>
          </div>
        </div>
@@ -281,10 +423,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..4692d53 100644
--- a/frontend/src/hooks/UseConfirm.tsx
+++ b/frontend/src/hooks/UseConfirm.tsx
@@ -1,40 +1,47 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import ConfirmDialog from '@components/ConfirmDialog';
+import ConfirmDialog from "@components/ConfirmDialog";
 const useConfirm = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-        const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
-        const [subtitle, setSubtitle] = useState<string>("");
+  const [subtitle, setSubtitle] = useState<string>("");
-    const [resolvePromise, setResolvePromise] = useState<((value: boolean) => void) | null>(null);
+  const [resolvePromise, setResolvePromise] = useState<
+    ((value: boolean) => void) | null
+  >(null);
-    const confirm = ( titleN: string, subtitleN: string ) => {
+  const confirm = (titleN: string, subtitleN: string) => {
-        setIsOpen(true);
+    setIsOpen(true);
-                setTitle(titleN);
+    setTitle(titleN);
-                setSubtitle(subtitleN);
+    setSubtitle(subtitleN);
-        return new Promise<boolean>((resolve) => {
+    return new Promise<boolean>(resolve => {
-            setResolvePromise(() => resolve);
+      setResolvePromise(() => resolve);
-        });
+    });
-    };
+  };
-    const handleConfirm = () => {
+  const handleConfirm = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise(true);
+      resolvePromise(true);
-        }
    }
+  };
-    const handleCancel = () => {
+  const handleCancel = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise(false);
+      resolvePromise(false);
-        }
    }
+  };
-    const ConfirmDialogComponent = isOpen && (
+  const ConfirmDialogComponent = isOpen && (
-        <ConfirmDialog title={title} subtitle={subtitle} onConfirm={handleConfirm} onCancel={handleCancel}></ConfirmDialog>
+    <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..b639fac 100644
--- a/frontend/src/hooks/UseMessage.tsx
+++ b/frontend/src/hooks/UseMessage.tsx
@@ -1,37 +1,43 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import MessageDialog from "@components/MessageDialog";
 const useMessage = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-    const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
-    const [subtitle, setSubtitle] = useState<string>("");
+  const [subtitle, setSubtitle] = useState<string>("");
-    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
+    null
+  );
-    const message = (title: string, subtitle: string) => {
+  const message = (title: string, subtitle: string) => {
-        setIsOpen(true);
+    setIsOpen(true);
-        setTitle(title);
+    setTitle(title);
-        setSubtitle(subtitle);
+    setSubtitle(subtitle);
-                return new Promise((resolve) => {
+    return new Promise(resolve => {
-                        setResolvePromise(() => resolve);
+      setResolvePromise(() => resolve);
-                });
+    });
-    };
+  };
-    const handleClose = () => {
+  const handleClose = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise();
+      resolvePromise();
-            setResolvePromise(null);
+      setResolvePromise(null);
-        }
+    }
-    };
+  };
-    const MessageDialogComponent = isOpen && (
+  const MessageDialogComponent = isOpen && (
-                <div className="dialog-container">
+    <div className="dialog-container">
-        <MessageDialog title={title} subtitle={subtitle} onClose={handleClose}></MessageDialog>
+      <MessageDialog
-                </div>
+        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..4cbd0f7 100644
--- a/frontend/src/hooks/UseMessageLoad.tsx
+++ b/frontend/src/hooks/UseMessageLoad.tsx
@@ -1,35 +1,40 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import MessageDialogLoad from "@components/MessageDialogLoad";
 const useMessageLoad = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
-    const [title, setTitle] = useState<string>("");
+  const [title, setTitle] = useState<string>("");
-    const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(null);
+  const [resolvePromise, setResolvePromise] = useState<(() => void) | null>(
+    null
+  );
-        const messageLoad = (title: string) => {
+  const messageLoad = (title: string) => {
-        setIsOpen(true);
+    setIsOpen(true);
-        setTitle(title);
+    setTitle(title);
-                return new Promise((resolve) => {
+    return new Promise(resolve => {
-                        setResolvePromise(() => resolve);
+      setResolvePromise(() => resolve);
-                });
+    });
-    };
+  };
-    const messageLoadClose = () => {
+  const messageLoadClose = () => {
-        setIsOpen(false);
+    setIsOpen(false);
-        if (resolvePromise) {
+    if (resolvePromise) {
-            resolvePromise();
+      resolvePromise();
-            setResolvePromise(null);
+      setResolvePromise(null);
-        }
+    }
-    };
+  };
-    const MessageDialogLoadComponent = isOpen && (
+  const MessageDialogLoadComponent = isOpen && (
-                <div className="dialog-container">
+    <div className="dialog-container">
-        <MessageDialogLoad title={title} onClose={messageLoadClose}></MessageDialogLoad>
+      <MessageDialogLoad
-                </div>
+        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..6b46893 100644
--- a/frontend/src/images/Images.tsx
+++ b/frontend/src/images/Images.tsx
@@ -1,29 +1,29 @@
-import logo from "./png/logo.png"
+import logo from "./png/logo.png";
-import login from "./png/login.png"
+import { LoginIcon as Login } from "./svgs/steam.tsx";
-import img1 from './png/1.png';
+import img1 from "./png/1.png";
-import img2 from './png/2.png';
+import img2 from "./png/2.png";
-import img3 from './png/3.png';
+import img3 from "./png/3.png";
-import img4 from './png/4.png';
+import img4 from "./png/4.png";
-import img5 from './png/5.png';
+import img5 from "./png/5.png";
-import img6 from './png/6.png';
+import img6 from "./png/6.png";
-import img7 from './png/7.png';
+import img7 from "./png/7.png";
-import img8 from './png/8.png';
+import img8 from "./png/8.png";
-import img9 from './png/9.png';
+import img9 from "./png/9.png";
-import img10 from './png/10.png';
+import img10 from "./png/10.png";
-import img11 from './png/11.png';
+import img11 from "./png/11.png";
-import img12 from './png/12.png';
+import img12 from "./png/12.png";
-import img13 from './png/13.png';
+import img13 from "./png/13.png";
-import img14 from './png/14.png';
+import img14 from "./png/14.png";
-import img15 from './png/15.png';
+import img15 from "./png/15.png";
-import img16 from './png/16.png';
+import img16 from "./png/16.png";
-import img17 from './png/17.png';
+import img17 from "./png/17.png";
-import img18 from './png/18.png';
+import img18 from "./png/18.png";
-import img19 from './png/19.png';
+import img19 from "./png/19.png";
-import img20 from './png/20.png';
+import img20 from "./png/20.png";
 import img21 from "./png/21.png";
 export const LogoIcon = logo;
-export const LoginIcon = login;
+export const LoginIcon = Login;
 export const SearchIcon = img1;
 export const HomeIcon = img2;
@@ -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/images/svgs/steam.tsx b/frontend/src/images/svgs/steam.tsx
new file mode 100644
index 0000000..0dc9a04
--- /dev/null
+++ b/frontend/src/images/svgs/steam.tsx
@@ -0,0 +1,7 @@
+export function LoginIcon(){
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="text-white" height={32} width={32}>
+            <path d="M504 256c0 137-111.2 248-248.4 248-113.8 0-209.6-76.3-239-180.4l95.2 39.3c6.4 32.1 34.9 56.4 68.9 56.4 39.2 0 71.9-32.4 70.2-73.5l84.5-60.2c52.1 1.3 95.8-40.9 95.8-93.5 0-51.6-42-93.5-93.7-93.5s-93.7 42-93.7 93.5l0 1.2-59.2 85.7c-15.5-.9-30.7 3.4-43.5 12.1L8 236.1C18.2 108.4 125.1 8 255.6 8 392.8 8 504 119 504 256zM163.7 384.3l-30.5-12.6c5.6 11.6 15.3 20.8 27.2 25.8 26.9 11.2 57.8-1.6 69-28.4 5.4-13 5.5-27.3 .1-40.3S214 305.6 201 300.2c-12.9-5.4-26.7-5.2-38.9-.6l31.5 13c19.8 8.2 29.2 30.9 20.9 50.7-8.3 19.9-31 29.2-50.8 21zM337.5 129.8a62.3 62.3 0 1 1 0 124.6 62.3 62.3 0 1 1 0-124.6zm.1 109a46.8 46.8 0 1 0 0-93.6 46.8 46.8 0 1 0 0 93.6z" fill="currentColor"/>
+        </svg>
+    )
+}
+\ No newline at end of file
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index eec2ff4..13d180c 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
-import App from './App';
+import App from "./App";
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx
index a8b7826..7802d75 100644
--- a/frontend/src/pages/About.tsx
+++ b/frontend/src/pages/About.tsx
@@ -1,40 +1,36 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { Helmet } from 'react-helmet';
+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 () => {
-    React.useEffect(() => {
+      try {
-        const fetchReadme = async () => {
+        const response = await fetch(
-            try {
+          "https://raw.githubusercontent.com/pektezol/lphub/main/README.md"
-                const response = await fetch(
+        );
-                    'https://raw.githubusercontent.com/pektezol/lphub/main/README.md'
+        if (!response.ok) {
-                );
+          throw new Error("Failed to fetch README");
-                if (!response.ok) {
+        }
-                    throw new Error('Failed to fetch README');
+        const readmeText = await response.text();
-                }
+        setAboutText(readmeText);
-                const readmeText = await response.text();
+      } catch (error) {
-                setAboutText(readmeText);
+        console.error("Error fetching README:", error);
-            } catch (error) {
+      }
-                console.error('Error fetching README:', error);
+    };
-            }
+    fetchReadme();
-        };
+  }, []);
-        fetchReadme();
-    }, []);
-    return (
+  return (
-        <div id="about">
+    <div className="ml-16 p-8 text-foreground font-[--font-barlow-semicondensed-regular] prose prose-invert max-w-none">
-            <Helmet>
+      <Helmet>
-                <title>LPHUB | About</title>
+        <title>LPHUB | About</title>
-            </Helmet>
+      </Helmet>
-            <ReactMarkdown>{aboutText}</ReactMarkdown>
+      <ReactMarkdown className={"overflow-auto"}>{aboutText}</ReactMarkdown>
-        </div>
+    </div>
-    );
+  );
 };
 export default About;
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index 15cc891..8587635 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -1,46 +1,29 @@
-import React from 'react';
+import React from "react";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import GameEntry from '@components/GameEntry';
+import GameEntry from "@components/GameEntry";
-import { Game } from '@customTypes/Game';
+import { Game } from "@customTypes/Game";
-import "@css/Maps.css"
 interface GamesProps {
-    games: Game[];
+  games: Game[];
 }
 const Games: React.FC<GamesProps> = ({ games }) => {
+  return (
-    const _page_load = () => {
+    <div className="ml-20 min-h-screen text-foreground font-[--font-barlow-semicondensed-regular] overflow-y-auto scrollbar-thin">
-        const loaders = document.querySelectorAll(".loader");
+      <Helmet>
-        loaders.forEach((loader) => {
+        <title>LPHUB | Games</title>
-            (loader as HTMLElement).style.display = "none";
+      </Helmet>
-        });
+      <section className="py-12 px-12 w-full">
-    }
+        <h1 className="text-3xl font-bold mb-8">Games</h1>
+        <div className="flex flex-col w-full">
-    React.useEffect(() => {
+          {games.map((game, index) => (
-        document.querySelectorAll(".games-page-item-body").forEach((game, index) => {
+            <GameEntry game={game} key={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>
        </div>
-    );
+      </section>
+    </div>
+  );
 };
 export default Games;
diff --git a/frontend/src/pages/Homepage.tsx b/frontend/src/pages/Homepage.tsx
index 4f46af5..b4ac3b0 100644
--- a/frontend/src/pages/Homepage.tsx
+++ b/frontend/src/pages/Homepage.tsx
@@ -1,22 +1,31 @@
-import React from 'react';
+import React from "react";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
 const Homepage: React.FC = () => {
+  return (
-    return (
+    <main className="ml-12 relative left-0 w-fullmin-h-screen p-4 sm:p-8 text-foreground font-[--font-barlow-semicondensed-regular]">
-        <main>
+      <Helmet>
-            <Helmet>
+        <title>LPHUB | Homepage</title>
-                <title>LPHUB | Homepage</title>
+      </Helmet>
-            </Helmet>
+      <section className="p-8">
-            <section>
+        <p />
-                <p />
+        <h1 className="text-5xl font-[--font-barlow-condensed-bold] mb-6 text-primary">Welcome to Least Portals Hub!</h1>
-                <h1>Welcome to Least Portals Hub!</h1>
+        <p className="text-lg mb-4 leading-relaxed">
-                <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>
+          At the moment, LPHUB is in beta state. This means that the site has
-                <p>The website should feel intuitive to navigate around. For any type of feedback, reach us at LPHUB Discord server.</p>
+          only the core functionalities enabled for providing both collaborative
-                <p>By using LPHUB, you agree that you have read the 'Leaderboard Rules' and the 'About LPHUB' pages.</p>
+          information and competitive leaderboards.
-            </section>
+        </p>
-        </main>
+        <p className="text-lg mb-4 leading-relaxed">
-    );
+          The website should feel intuitive to navigate around. For any type of
+          feedback, reach us at LPHUB Discord server.
+        </p>
+        <p className="text-lg mb-4 leading-relaxed">
+          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 76f9a52..2f0491e 100644
--- a/frontend/src/pages/Maplist.tsx
+++ b/frontend/src/pages/Maplist.tsx
@@ -2,7 +2,6 @@ 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";
@@ -11,7 +10,6 @@ const Maplist: React.FC = () => {
  const [game, setGame] = React.useState<Game | null>(null);
  const [catNum, setCatNum] = React.useState(0);
  const [id, setId] = React.useState(0);
-  const [category, setCategory] = React.useState(0);
  const [load, setLoad] = React.useState(false);
  const [currentlySelected, setCurrentlySelected] = React.useState<number>(0);
  const [hasClicked, setHasClicked] = React.useState(false);
@@ -21,7 +19,7 @@ const Maplist: React.FC = () => {
  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();
@@ -34,15 +32,15 @@ const Maplist: React.FC = () => {
  const _fetch_chapters = async (chapter_id: string) => {
    const chapters = await API.get_chapters(chapter_id);
    setCurChapter(chapters);
-  }
+  };
  const _handle_dropdown_click = () => {
-    if (dropdownActive == "none") {
+    if (dropdownActive === "none") {
      setDropdownActive("block");
    } else {
      setDropdownActive("none");
    }
-  }
+  };
  // im sorry but im too lazy to fix this right now
  useEffect(() => {
@@ -54,7 +52,7 @@ const Maplist: React.FC = () => {
    const queryParams = new URLSearchParams(location.search);
    if (queryParams.get("chapter")) {
      let cat = parseFloat(queryParams.get("chapter") || "");
-      if (gameId == 2) {
+      if (gameId === 2) {
        cat += 10;
      }
      _fetch_chapters(cat.toString());
@@ -62,7 +60,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,111 +72,175 @@ 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();
    _fetch_game_chapters();
-  }, []);
+  }, [location.search]);
  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, location.search]);
  return (
-    <main>
+    <main className="*:text-foreground w-[calc(100vw-80px)] relative left-0 ml-20 min-h-screen p-4 sm:p-8">
      <Helmet>
-        <title>LPHUB | Maplist</title>
+      <title>LPHUB | Maplist</title>
      </Helmet>
-      <section style={{ marginTop: "20px" }}>
+      
-        <Link to="/games">
+      <section className="mt-5">
-          <button className="nav-button" style={{ borderRadius: "20px" }}>
+      <Link to="/games">
-            <i className="triangle"></i>
+        <button className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2">
-            <span>Games List</span>
+        <i className="triangle mr-2"></i>
-          </button>
+        <span className="px-2">Games List</span>
-        </Link>
+        </button>
+      </Link>
      </section>
      {load ? (
-        <div></div>
+      <div></div>
      ) : (
+      <section>
+        <h1 className="font-[--font-barlow-condensed-bold] text-3xl sm:text-6xl my-0 text-foreground">
+        {game?.name}
+        </h1>
+        <div
+        className="text-center rounded-3xl overflow-hidden bg-cover bg-[25%] mt-3 relative"
+        style={{ backgroundImage: `url(${game?.image})` }}
+        >
+        <div className="backdrop-blur-sm flex flex-col w-full">
+          <div className="h-full flex flex-col justify-center items-center py-6">
+          <h2 className="my-5 font-[--font-barlow-semicondensed-semibold] text-4xl sm:text-8xl text-foreground">
+            {
+            game?.category_portals.find(
+              obj => obj.category.id === catNum + 1
+            )?.portal_count
+            }
+          </h2>
+          <h3 className="font-[--font-barlow-semicondensed-regular] mx-2.5 text-2xl sm:text-4xl my-0 text-foreground">
+            portals
+          </h3>
+          </div>
+          <div className="flex h-12 bg-surface gap-0.5">
+          {game?.category_portals.map((cat, index) => (
+            <button
+            key={index}
+            className={`border-0 text-foreground font-[--font-barlow-semicondensed-regular] text-sm sm:text-xl cursor-pointer transition-all duration-100 w-full ${
+              currentlySelected === cat.category.id ||
+              (cat.category.id - 1 === catNum && !hasClicked)
+              ? "bg-surface"
+              : "bg-surface1 hover:bg-surface"
+            }`}
+            onClick={() => {
+              setCatNum(cat.category.id - 1);
+              _update_currently_selected(cat.category.id);
+            }}
+            >
+            <span className="truncate">{cat.category.name}</span>
+            </button>
+          ))}
+          </div>
+        </div>
+        </div>
+        <div>
        <section>
-          <h1>{game?.name}</h1>
+          <div>
+          <span className="text-lg sm:text-lg translate-y-1.5 block mt-2.5 text-foreground">
+            {curChapter?.chapter.name.split(" - ")[0]}
+          </span>
+          </div>
+          <div 
+          onClick={_handle_dropdown_click} 
+          className="cursor-pointer select-none flex w-fit items-center"
+          >
+          <span className="text-foreground text-base sm:text-2xl">
+            {curChapter?.chapter.name.split(" - ")[1]}
+          </span>
+          <i className="triangle translate-x-1.5 translate-y-2 -rotate-90"></i>
+          </div>
+          \
          <div
-            style={{ backgroundImage: `url(${game?.image})` }}
+          className={`absolute z-[1000] bg-surface1 rounded-2xl overflow-hidden p-1 animate-in fade-in duration-100 ${
-            className="game-header"
+            dropdownActive === "none" ? "hidden" : "block"
+          }`}
          >
-            <div className="blur">
+          {gameChapters?.chapters.map((chapter, i) => {
-              <div className="game-header-portal-count">
+            return (
-                <h2 className="portal-count">
+            <div
-                  {
+              key={i}
-                    game?.category_portals.find(
+              className="cursor-pointer text-base sm:text-xl rounded-[2000px] p-1 hover:bg-surface text-foreground"
-                      (obj) => obj.category.id === catNum + 1
+              onClick={() => {
-                    )?.portal_count
+              _fetch_chapters(chapter.id.toString());
-                  }
+              _handle_dropdown_click();
-                </h2>
+              }}
-                <h3>portals</h3>
+            >
-              </div>
+              {chapter.name}
-              <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) }}>
-                    <span>{cat.category.name}</span>
-                  </button>
-                ))}
-              </div>
            </div>
+            );
+          })}
          </div>
+        </section>
-          <div>
+        <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 my-5">
-            <section className="chapter-select-container">
+          {curChapter?.maps.map((map, i) => {
-              <div>
+          return (
-                <span style={{ fontSize: "18px", transform: "translateY(5px)", display: "block", marginTop: "10px" }}>{curChapter?.chapter.name.split(" - ")[0]}</span>
+            <div key={i} className="bg-surface rounded-3xl overflow-hidden">
+            <Link to={`/maps/${map.id}`}>
+              <span className="text-center text-base sm:text-xl w-full block my-1.5 text-foreground truncate">
+              {map.name}
+              </span>
+              <div
+              className="flex h-40 sm:h-48 bg-cover relative"
+              style={{ backgroundImage: `url(${map.image})` }}
+              >
+              <div className="backdrop-blur-sm w-full flex items-center justify-center">
+                <span className="text-2xl sm:text-4xl font-[--font-barlow-semicondensed-semibold] text-white mr-1.5">
+                {map.is_disabled
+                  ? map.category_portals[0].portal_count
+                  : map.category_portals.find(
+                    obj => obj.category.id === catNum + 1
+                  )?.portal_count}
+                </span>
+                <span className="text-2xl sm:text-4xl font-[--font-barlow-semicondensed-regular] text-white">
+                portals
+                </span>
              </div>
-              <div onClick={_handle_dropdown_click} className="dropdown">
-                <span>{curChapter?.chapter.name.split(" - ")[1]}</span>
-                <i className="triangle"></i>
              </div>
-              <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>
-                })
-                }
+              <div className="flex mx-2.5 my-4">
+              <div className="flex w-full items-center justify-center gap-1.5 rounded-[2000px] ml-0.5 translate-y-px">
+                {[1, 2, 3, 4, 5].map((point) => (
+                <div
+                  key={point}
+                  className={`flex h-0.5 w-full rounded-3xl ${
+                  point <= (map.difficulty + 1)
+                    ? map.difficulty === 0
+                    ? "bg-green-500"
+                    : map.difficulty === 1 || map.difficulty === 2
+                    ? "bg-lime-500"
+                    : map.difficulty === 3
+                    ? "bg-red-400"
+                    : "bg-red-600"
+                    : "bg-surface1"
+                  }`}
+                />
+                ))}
              </div>
-            </section>
+              </div>
-            <section className="maplist">
+            </Link>
-              {curChapter?.maps.map((map, i) => {
+            </div>
-                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 className="difficulty-bar">
-                      {/* <span>Difficulty:</span> */}
-                      <div className={map.difficulty <= 2 ? "one" : map.difficulty <= 4 ? "two" : map.difficulty <= 6 ? "three" : map.difficulty <= 8 ? "four" : map.difficulty <= 10 ? "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>
-                  </Link>
-                </div>
-              })}
-            </section>
-          </div>
        </section>
+        </div>
+      </section>
      )}
    </main>
  );
diff --git a/frontend/src/pages/Maps.tsx b/frontend/src/pages/Maps.tsx
index fb13563..50fe03b 100644
--- a/frontend/src/pages/Maps.tsx
+++ b/frontend/src/pages/Maps.tsx
@@ -1,28 +1,32 @@
-import React from 'react';
+import React from "react";
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import { PortalIcon, FlagIcon, ChatIcon } from '@images/Images';
+import { PortalIcon, FlagIcon, ChatIcon } from "../images/Images";
-import Summary from '@components/Summary';
+import Summary from "@components/Summary";
-import Leaderboards from '@components/Leaderboards';
+import Leaderboards from "@components/Leaderboards";
-import Discussions from '@components/Discussions';
+import Discussions from "@components/Discussions";
-import ModMenu from '@components/ModMenu';
+import ModMenu from "@components/ModMenu";
-import { MapDiscussions, MapLeaderboard, MapSummary } from '@customTypes/Map';
+import { MapDiscussions, MapLeaderboard, MapSummary } from "@customTypes/Map";
-import { API } from '@api/Api';
+import { API } from "@api/Api";
-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 [mapSummaryData, setMapSummaryData] = React.useState<
-  const [mapLeaderboardData, setMapLeaderboardData] = React.useState<MapLeaderboard | undefined>(undefined);
+    MapSummary | undefined
-  const [mapDiscussionsData, setMapDiscussionsData] = React.useState<MapDiscussions | undefined>(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);
@@ -30,45 +34,66 @@ const Maps: React.FC<MapProps> = ({ token, isModerator }) => {
  const mapID = location.pathname.split("/")[2];
-  const _fetch_map_summary = async () => {
+  const _fetch_map_summary = React.useCallback(async () => {
    const mapSummary = await API.get_map_summary(mapID);
    setMapSummaryData(mapSummary);
-  };
+  }, [mapID]);
-  const _fetch_map_leaderboards = async () => {
+  const _fetch_map_leaderboards = React.useCallback(async () => {
    const mapLeaderboards = await API.get_map_leaderboard(mapID, "1");
    setMapLeaderboardData(mapLeaderboards);
-  };
+  }, [mapID]);
-  const _fetch_map_discussions = async () => {
+  const _fetch_map_discussions = React.useCallback(async () => {
    const mapDiscussions = await API.get_map_discussions(mapID);
    setMapDiscussionsData(mapDiscussions);
-  };
+  }, [mapID]);
  React.useEffect(() => {
    _fetch_map_summary();
    _fetch_map_leaderboards();
    _fetch_map_discussions();
-  }, [mapID]);
+  }, [
+    mapID,
+    _fetch_map_discussions,
+    _fetch_map_leaderboards,
+    _fetch_map_summary,
+  ]);
  if (!mapSummaryData) {
    // loading placeholder
    return (
      <>
-        <main>
+        <main className="*:text-foreground relative left-0 w-[calc(100%-20rem)] min-h-screen p-4 sm:p-8">
-          <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 rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
+                >
+                  <i className="triangle"></i>
+                  <span className="px-2">Games List</span>
+                </button>
+              </Link>
            </div>
          </section>
-          <section id='section2' className='summary1'>
+          <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-            <button className='nav-button'><img src={PortalIcon} alt="" /><span>Summary</span></button>
+            <button className="nav-button">
-            <button className='nav-button'><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+              <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-            <button className='nav-button'><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+              <span>Summary</span>
+            </button>
+            <button className="nav-button">
+              <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Leaderboards</span>
+            </button>
+            <button className="nav-button">
+              <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+              <span>Discussions</span>
+            </button>
          </section>
-          <section id='section6' className='summary2' />
+          <section id="section6" className="summary2 mt-4" />
        </main>
      </>
    );
@@ -80,29 +105,78 @@ 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} />}
+      {isModerator && (
+        <ModMenu
-      <div id='background-image'>
+          token={token}
+          data={mapSummaryData}
+          selectedRun={selectedRun}
+          mapID={mapID}
+        />
+      )}
+      <div id="background-image">
        <img src={mapSummaryData.map.image} alt="" />
      </div>
-      <main>
+      <main className="relative left-0 w-full sm:ml-80 sm:w-[calc(100%-20rem)] min-h-screen max-h-screen overflow-y-auto p-4 sm:p-8 scrollbar-thin scrollbar-track-surface scrollbar-thumb-muted hover:scrollbar-thumb-surface1">
-        <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">
-            <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>
+              <button
-            <br /><span><b>{mapSummaryData.map.map_name}</b></span>
+                className="nav-button rounded-[20px] h-10 bg-surface border-0 text-foreground text-lg font-[--font-barlow-semicondensed-regular] transition-colors duration-100 hover:bg-surface2 flex items-center px-2"
+              >
+                <i className="triangle"></i>
+                <span className="px-2">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 ml-2"
+              >
+                <i className="triangle"></i>
+                <span className="px-2">{mapSummaryData.map.chapter_name}</span>
+              </button>
+            </Link>
+            <br />
+            <span className="block mt-2 text-lg sm:text-xl text-foreground">
+              <b>{mapSummaryData.map.map_name}</b>
+            </span>
          </div>
        </section>
-        <section id='section2' className='summary1'>
+        <section id="section2" className="summary1 mt-4 flex gap-2 flex-wrap">
-          <button className='nav-button' onClick={() => setNavState(0)}><img src={PortalIcon} alt="" /><span>Summary</span></button>
+          <button className="nav-button" onClick={() => setNavState(0)}>
-          <button className='nav-button' onClick={() => setNavState(1)}><img src={FlagIcon} alt="" /><span>Leaderboards</span></button>
+            <img src={PortalIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
-          <button className='nav-button' onClick={() => setNavState(2)}><img src={ChatIcon} alt="" /><span>Discussions</span></button>
+            <span>Summary</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(1)}>
+            <img src={FlagIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+            <span>Leaderboards</span>
+          </button>
+          <button className="nav-button" onClick={() => setNavState(2)}>
+            <img src={ChatIcon} alt="" className="w-5 h-5 sm:w-6 sm:h-6" />
+            <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..f44f587 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,16 +1,27 @@
-import React from 'react';
+import React from "react";
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from "react-router-dom";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon, DeleteIcon } from '@images/Images';
+import {
-import { UserProfile } from '@customTypes/Profile';
+  SteamIcon,
-import { Game, GameChapters } from '@customTypes/Game';
+  TwitchIcon,
-import { Map } from '@customTypes/Map';
+  YouTubeIcon,
-import { ticks_to_time } from '@utils/Time';
+  PortalIcon,
-import "@css/Profile.css";
+  FlagIcon,
-import { API } from '@api/Api';
+  StatisticsIcon,
-import useConfirm from '@hooks/UseConfirm';
+  SortIcon,
-import useMessage from '@hooks/UseMessage';
+  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 { API } from "@api/Api";
+import useConfirm from "@hooks/UseConfirm";
+import useMessage from "@hooks/UseMessage";
 import useMessageLoad from "@hooks/UseMessageLoad";
 interface ProfileProps {
@@ -20,17 +31,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 [game, setGame] = React.useState("0");
-  const [chapter, setChapter] = React.useState("0")
+  const [chapter, setChapter] = React.useState("0");
-  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  const [chapterData, setChapterData] = React.useState<GameChapters | null>(
+    null
+  );
  const [maps, setMaps] = React.useState<Map[]>([]);
  const navigate = useNavigate();
@@ -41,7 +60,7 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
    }
  };
-  const _get_game_chapters = async () => {
+  const _get_game_chapters = React.useCallback(async () => {
    if (game && game !== "0") {
      const gameChapters = await API.get_games_chapters(game);
      setChapterData(gameChapters);
@@ -49,9 +68,9 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
      setPageMax(Math.ceil(profile!.records.length / 20));
      setPageNumber(1);
    }
-  };
+  }, [game, profile]);
-  const _get_game_maps = async () => {
+  const _get_game_maps = React.useCallback(async () => {
    if (chapter === "0") {
      const gameMaps = await API.get_game_maps(game);
      setMaps(gameMaps);
@@ -63,10 +82,13 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
      setPageMax(Math.ceil(gameChapters.maps.length / 20));
      setPageNumber(1);
    }
-  };
+  }, [chapter, game]);
  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;
@@ -87,26 +109,24 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
  React.useEffect(() => {
    if (!profile) {
      navigate("/");
-    };
+    }
-  }, [profile]);
+  }, [profile, navigate]);
  React.useEffect(() => {
    if (profile) {
      _get_game_chapters();
    }
-  }, [profile, game]);
+  }, [profile, game, _get_game_chapters]);
  React.useEffect(() => {
    if (profile && game !== "0") {
      _get_game_maps();
    }
-  }, [profile, game, chapter, chapterData])
+  }, [profile, game, chapter, chapterData, _get_game_maps]);
  if (!profile) {
-    return (
+    return <></>;
-      <></>
+  }
-    );
-  };
  return (
    <div>
@@ -119,230 +139,490 @@ const Profile: React.FC<ProfileProps> = ({ profile, token, gameData, onDeleteRec
      {ConfirmDialogComponent}
      <main>
-        <section id='section1' className='profile'>
+        <section id="section1" className="profile">
+          {profile.profile ? (
-          {profile.profile
+            <div id="profile-image" onClick={_update_profile}>
-            ? (
+              <img src={profile.avatar_link} alt="profile-image"></img>
-              <div id='profile-image' onClick={_update_profile}>
+              <span>Refresh</span>
-                <img src={profile.avatar_link} alt="profile-image"></img>
+            </div>
-                <span>Refresh</span>
+          ) : (
-              </div>
+            <div>
-            ) : (
+              <img src={profile.avatar_link} alt="profile-image"></img>
-              <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.steam === "-" ? (
-              {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>}
+                <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>
-                <span>({profile.rankings.overall.completion_count}/{profile.rankings.overall.completion_total})</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>
-                <span>({profile.rankings.singleplayer.completion_count}/{profile.rankings.singleplayer.completion_total})</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>
-                <span>({profile.rankings.cooperative.completion_count}/{profile.rankings.cooperative.completion_total})</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">
-        <section id='section2' className='profile'>
+          <button onClick={() => setNavState(0)}>
-          <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
+            <img src={FlagIcon} alt="" />
-          <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+            &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>
-        <section id='section3' className='profile1'>
+            ) : (
-          <div id='profileboard-nav'>
+              <select
-            {gameData === null ? <select>error</select> :
+                id="select-game"
-              <select id='select-game'
                onChange={() => {
-                  setGame((document.querySelector('#select-game') as HTMLInputElement).value);
+                  setGame(
+                    (document.querySelector("#select-game") as HTMLInputElement)
+                      .value
+                  );
                  setChapter("0");
-                  const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+                  const chapterSelect = document.querySelector(
+                    "#select-chapter"
+                  ) as HTMLSelectElement;
                  if (chapterSelect) {
                    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>
+                  <option value={e.id} key={i + 1}>
-                ))}</select>
+                    {e.name}
-            }
+                  </option>
+                ))}
+              </select>
+            )}
-            {game === "0" ?
+            {game === "0" ? (
              <select disabled>
                <option>All Chapters</option>
              </select>
-              : chapterData === null ? <select></select> :
+            ) : chapterData === null ? (
+              <select></select>
-                <select id='select-chapter'
+            ) : (
-                  onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+              <select
-                  <option value="0" key="0">All Chapters</option>
+                id="select-chapter"
-                  {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
+                onChange={() =>
-                    <option value={e.id} key={i + 1}>{e.name}</option>
+                  setChapter(
-                  ))}</select>
+                    (
-            }
+                      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'>
+          <div id="profileboard-top">
-            <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
+            <span>
-            <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+              <span>Map Name</span>
-            <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+              <img src={SortIcon} alt="" />
-            <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+            </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><span>Date</span><img src={SortIcon} alt="" /></span>
+              <span>Rank</span>
-            <div id='page-number'>
+              <img src={SortIcon} alt="" />
+            </span>
+            <span>
+              <span>Date</span>
+              <img src={SortIcon} alt="" />
+            </span>
+            <div id="page-number">
              <div>
-                <button onClick={() => {
+                <button
-                  if (pageNumber !== 1) {
+                  onClick={() => {
-                    setPageNumber(prevPageNumber => prevPageNumber - 1);
+                    if (pageNumber !== 1) {
-                    const records = document.querySelectorAll(".profileboard-record");
+                      setPageNumber(prevPageNumber => prevPageNumber - 1);
-                    records.forEach((r) => {
+                      const records = document.querySelectorAll(
-                      (r as HTMLInputElement).style.height = "44px";
+                        ".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);
+                  <i
-                    const records = document.querySelectorAll(".profileboard-record");
+                    className="triangle"
-                    records.forEach((r) => {
+                    style={{ position: "relative", left: "-5px" }}
-                      (r as HTMLInputElement).style.height = "44px";
+                  ></i>{" "}
-                    });
+                </button>
-                  }
+                <span>
-                }}
+                  {pageNumber}/{pageMax}
-                ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+                </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'>
+          <div id="profileboard-records">
+            {game === "0" ? (
-            {game === "0"
+              profile.records
-              ? (
+                .sort((a, b) => a.map_id - b.map_id)
+                .map((r, index) =>
-                profile.records.sort((a, b) => a.map_id - b.map_id)
+                  Math.ceil((index + 1) / 20) === pageNumber ? (
-                  .map((r, index) => (
+                    <button className="profileboard-record" key={index}>
+                      {r.scores.map((e, i) => (
-                    Math.ceil((index + 1) / 20) === pageNumber ? (
+                        <>
-                      <button className="profileboard-record" key={index}>
+                          {i !== 0 ? (
-                        {r.scores.map((e, i) => (<>
+                            <hr style={{ gridColumn: "1 / span 8" }} />
-                          {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>
+                          <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" }}>
-                          <span style={{ display: "grid" }}>{ticks_to_time(e.score_time)}</span>
+                            {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>}
+                          {i === 0 ? (
+                            <span>#{r.placement}</span>
+                          ) : (
+                            <span> </span>
+                          )}
                          <span>{e.date.split("T")[0]}</span>
                          <span style={{ flexDirection: "row-reverse" }}>
+                            <button
-                            <button style={{ marginRight: "10px" }} onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                              style={{ marginRight: "10px" }}
-                            <button onClick={() => { _delete_submission(r.map_id, e.record_id) }}><img src={DeleteIcon}></img></button>
+                              onClick={() => {
-                            <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                                message(
-                            {i === 0 && r.scores.length > 1 ? <button onClick={() => {
+                                  "Demo Information",
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                                  `Demo ID: ${e.demo_id}`
-                                (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={ThreedotIcon} alt="demo_id" />
-                            }><img src={HistoryIcon} alt="history" /></button> : ""}
+                            </button>
+                            <button
+                              onClick={() => {
+                                _delete_submission(r.map_id, e.record_id);
+                              }}
+                            >
+                              <img src={DeleteIcon} alt="delete icon"></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>
+                            ) : (
+                              ""
+                            )}
                          </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>
-                    ) : ""
+                    ) : (
-                  ))) : maps ?
+                      <button className="profileboard-record" key={index}>
+                        {record.scores.map((e, i) => (
-                maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
+                          <>
-                  .map((r, index) => {
+                            {i !== 0 ? (
-                    if (Math.ceil((index + 1) / 20) === pageNumber) {
+                              <hr style={{ gridColumn: "1 / span 8" }} />
-                      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>
+                            <Link to={`/maps/${r.id}`}>
-                          <span style={{ display: "grid" }}>N/A</span>
+                              <span>{r.name}</span>
-                          <span style={{ display: "grid" }}>N/A</span>
+                            </Link>
-                          <span>N/A</span>
+                            <span style={{ display: "grid" }}>
-                          <span> </span>
+                              {record!.scores[i].score_count}
-                          <span>N/A</span>
+                            </span>
-                          <span>N/A</span>
+                            <span style={{ display: "grid" }}>
-                          <span style={{ flexDirection: "row-reverse" }}></span>
+                              {record!.scores[i].score_count -
-                        </button>
+                                record!.map_wr_count >
-                      ) : (
+                              0
-                        <button className="profileboard-record" key={index}>
+                                ? `+${record!.scores[i].score_count - record!.map_wr_count}`
-                          {record.scores.map((e, i) => (<>
+                                : `-`}
-                            {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                            </span>
-                            <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
+                            <span style={{ display: "grid" }}>
-                            <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
+                              {ticks_to_time(record!.scores[i].score_time)}
-                            <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>
-                            <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
                            <span> </span>
-                            {i === 0 ? <span>#{record!.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
-                              <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                                onClick={() => {
-                              <button onClick={() => { _delete_submission(r.id, e.record_id) }}><img src={DeleteIcon}></img></button>
+                                  message(
-                              <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                                    "Demo Information",
-                              {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
+                                    `Demo ID: ${e.demo_id}`
-                                (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={ThreedotIcon} alt="demo_id" />
-                              }
+                              </button>
-                              }><img src={HistoryIcon} alt="history" /></button> : ""}
+                              <button
+                                onClick={() => {
+                                  _delete_submission(r.id, e.record_id);
+                                }}
+                              >
+                                <img src={DeleteIcon} alt="delete icon"></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>
+                        ))}
+                      </button>
-                      )
+                    );
-                    } else { return null }
+                  } else {
-                  }) : (<>{console.warn(maps)}</>)}
+                    return null;
+                  }
+                })
+            ) : (
+              <>{console.warn(maps)}</>
+            )}
          </div>
        </section>
      </main>
diff --git a/frontend/src/pages/Rankings.tsx b/frontend/src/pages/Rankings.tsx
index 71aa427..dec0e17 100644
--- a/frontend/src/pages/Rankings.tsx
+++ b/frontend/src/pages/Rankings.tsx
@@ -2,146 +2,202 @@ import React, { useEffect } from "react";
 import { Helmet } from "react-helmet";
 import RankingEntry from "@components/RankingEntry";
-import { Ranking, SteamRanking, RankingType, SteamRankingType } from "@customTypes/Ranking";
+import {
+  Ranking,
+  SteamRanking,
+  RankingType,
+  SteamRankingType,
+} from "@customTypes/Ranking";
 import { API } from "@api/Api";
 import "@css/Rankings.css";
-const Rankings: React.FC = () => {
+enum LeaderboardTypes {
-    const [leaderboardData, setLeaderboardData] = React.useState<Ranking | SteamRanking>();
+  official,
-    const [currentLeaderboard, setCurrentLeaderboard] = React.useState<RankingType[] | SteamRankingType[]>();
+  unofficial,
-    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,
+}
-    enum RankingCategories {
+const Rankings: React.FC = () => {
-        rankings_overall,
+  const [leaderboardData, setLeaderboardData] = React.useState<
-        rankings_multiplayer,
+    Ranking | SteamRanking
-        rankings_singleplayer
+  >();
+  const [currentLeaderboard, setCurrentLeaderboard] = React.useState<
+    RankingType[] | SteamRankingType[]
+  >();
+  const [currentRankingType, setCurrentRankingType] =
+    React.useState<LeaderboardTypes>(LeaderboardTypes.official);
+  const [leaderboardLoad, setLeaderboardLoad] = React.useState<boolean>(false);
+  const [currentLeaderboardType, setCurrentLeaderboardType] =
+    React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+  const [load, setLoad] = React.useState<boolean>(false);
+  const _fetch_rankings = React.useCallback(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 [currentLeaderboardType, setCurrentLeaderboardType] = React.useState<RankingCategories>(RankingCategories.rankings_singleplayer);
+    setLoad(true);
-    const [load, setLoad] = React.useState<boolean>(false);
+    setLeaderboardLoad(true);
+  }, [currentLeaderboardType]);
-    const _fetch_rankings = async () => {
-        setLeaderboardLoad(false);
+  const __dev_fetch_unofficial_rankings = async () => {
-        const rankings = await API.get_official_rankings();
+    try {
-        setLeaderboardData(rankings);
+      setLeaderboardLoad(false);
-        if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      const rankings = await API.get_unofficial_rankings();
-            setCurrentLeaderboard(rankings.rankings_singleplayer)
+      setLeaderboardData(rankings);
-        } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+      if (currentLeaderboardType === RankingCategories.rankings_singleplayer) {
-            setCurrentLeaderboard(rankings.rankings_multiplayer)
+        // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
-        } else {
+        setCurrentLeaderboard(rankings.rankings_singleplayer);
-            setCurrentLeaderboard(rankings.rankings_overall)
+      } else if (
-        }
+        currentLeaderboardType === RankingCategories.rankings_multiplayer
-        setLoad(true);
+      ) {
-        setLeaderboardLoad(true);
+        setCurrentLeaderboard(rankings.rankings_multiplayer);
+      } else {
+        setCurrentLeaderboard(rankings.rankings_overall);
+      }
+      setLeaderboardLoad(true);
+    } catch (e) {
+      console.log(e);
    }
+  };
-    const __dev_fetch_unofficial_rankings = async () => {
-        try {
+  const _set_current_leaderboard = React.useCallback(
-            setLeaderboardLoad(false);
+    (ranking_cat: RankingCategories) => {
-            const rankings = await API.get_unofficial_rankings();
+      if (ranking_cat === RankingCategories.rankings_singleplayer) {
-            setLeaderboardData(rankings);
+        setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
-            if (currentLeaderboardType == RankingCategories.rankings_singleplayer) {
+      } else if (ranking_cat === RankingCategories.rankings_multiplayer) {
-                // console.log(_sort_rankings_steam(unofficialRanking.rankings_singleplayer))
+        setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
-                setCurrentLeaderboard(rankings.rankings_singleplayer)
+      } else {
-            } else if (currentLeaderboardType == RankingCategories.rankings_multiplayer) {
+        setCurrentLeaderboard(leaderboardData!.rankings_overall);
-                setCurrentLeaderboard(rankings.rankings_multiplayer)
+      }
-            } else {
-                setCurrentLeaderboard(rankings.rankings_overall)
+      setCurrentLeaderboardType(ranking_cat);
+    },
+    [leaderboardData]
+  );
+  // unused func
+  //   const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+  //     if (leaderboard_type === LeaderboardTypes.official) {
+  //       _fetch_rankings();
+  //     } else {
+  //     }
+  //   };
+  useEffect(() => {
+    _fetch_rankings();
+  }, [_fetch_rankings]);
+  return (
+    <main className="*:text-foreground">
+      <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)
            }
-            setLeaderboardLoad(true);
+            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_singleplayer ? "selected" : ""}`}
-        } catch (e) {
+          >
-            console.log(e)
+            <span>Singleplayer</span>
-        }
+          </button>
-    }
+          <button
+            onClick={() =>
-    const _set_current_leaderboard = (ranking_cat: RankingCategories) => {
+              _set_current_leaderboard(RankingCategories.rankings_multiplayer)
-        if (ranking_cat == RankingCategories.rankings_singleplayer) {
+            }
-            setCurrentLeaderboard(leaderboardData!.rankings_singleplayer);
+            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_multiplayer ? "selected" : ""}`}
-        } else if (ranking_cat == RankingCategories.rankings_multiplayer) {
+          >
-            setCurrentLeaderboard(leaderboardData!.rankings_multiplayer);
+            <span>Cooperative</span>
-        } else {
+          </button>
-            setCurrentLeaderboard(leaderboardData!.rankings_overall);
+          <button
-        }
+            onClick={() =>
+              _set_current_leaderboard(RankingCategories.rankings_overall)
-        setCurrentLeaderboardType(ranking_cat);
+            }
-    }
+            className={`nav-2-btn ${currentLeaderboardType === RankingCategories.rankings_overall ? "selected" : ""}`}
+          >
-    const _set_leaderboard_type = (leaderboard_type: LeaderboardTypes) => {
+            <span>Overall</span>
-        if (leaderboard_type == LeaderboardTypes.official) {
+          </button>
-            _fetch_rankings();
+        </div>
-        } else {
+      </section>
-        }
+      {load ? (
-    }
+        <section className="rankings-leaderboard">
+          <div className="ranks-container">
-    useEffect(() => {
+            <div className="leaderboard-entry header">
-        _fetch_rankings();
+              <span>Rank</span>
-        if (load) {
+              <span>Player</span>
-            _set_current_leaderboard(RankingCategories.rankings_singleplayer);
+              <span>Portals</span>
-        }
+            </div>
-    }, [load])
+            <div className="splitter"></div>
-    return (
-        <main>
+            {leaderboardLoad &&
-            <Helmet>
+              currentLeaderboard?.map((curRankingData, i) => {
-                <title>LPHUB | Rankings</title>
+                return (
-            </Helmet>
+                  <RankingEntry
-            <section className="nav-container nav-1">
+                    currentLeaderboardType={currentLeaderboardType}
-                <div>
+                    curRankingData={curRankingData}
-                    <button onClick={() => { _fetch_rankings(); setCurrentRankingType(LeaderboardTypes.official) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.official ? "selected" : ""}`}>
+                    key={i}
-                        <span>Official (LPHUB)</span>
+                  ></RankingEntry>
-                    </button>
+                );
-                    <button onClick={() => { __dev_fetch_unofficial_rankings(); setCurrentRankingType(LeaderboardTypes.unofficial) }} className={`nav-1-btn ${currentRankingType == LeaderboardTypes.unofficial ? "selected" : ""}`}>
+              })}
-                        <span>Unofficial (Steam)</span>
-                    </button>
+            {leaderboardLoad ? null : (
-                </div>
+              <div
-            </section>
+                style={{
-            <section className="nav-container nav-2">
+                  display: "flex",
-                <div>
+                  justifyContent: "center",
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_singleplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_singleplayer ? "selected" : ""}`}>
+                  margin: "30px 0px",
-                        <span>Singleplayer</span>
+                }}
-                    </button>
+              >
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_multiplayer)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_multiplayer ? "selected" : ""}`}>
+                <span className="loader"></span>
-                        <span>Cooperative</span>
+              </div>
-                    </button>
+            )}
-                    <button onClick={() => _set_current_leaderboard(RankingCategories.rankings_overall)} className={`nav-2-btn ${currentLeaderboardType == RankingCategories.rankings_overall ? "selected" : ""}`}>
+          </div>
-                        <span>Overall</span>
+        </section>
-                    </button>
+      ) : null}
-                </div>
+    </main>
-            </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..9c7885c 100644
--- a/frontend/src/pages/Rules.tsx
+++ b/frontend/src/pages/Rules.tsx
@@ -1,41 +1,37 @@
-import React from 'react';
+import React from "react";
-import ReactMarkdown from 'react-markdown';
+import ReactMarkdown from "react-markdown";
-import { Helmet } from 'react-helmet';
+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 () => {
-    React.useEffect(() => {
+      try {
-        const fetchRules = async () => {
+        const response = await fetch(
-            try {
+          "https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md"
-                const response = await fetch(
+        );
-                    'https://raw.githubusercontent.com/pektezol/lphub/main/RULES.md'
+        if (!response.ok) {
-                );
+          throw new Error("Failed to fetch README");
-                if (!response.ok) {
+        }
-                    throw new Error('Failed to fetch README');
+        const rulesText = await response.text();
-                }
+        setRulesText(rulesText);
-                const rulesText = await response.text();
+      } catch (error) {
-                setRulesText(rulesText);
+        console.error("Error fetching Rules:", error);
-            } catch (error) {
+      }
-                console.error('Error fetching Rules:', error);
+      // setRulesText(rulesText)
-            }
+    };
-            // setRulesText(rulesText)
+    fetchRules();
-        };
+  }, []);
-        fetchRules();
-    }, []);
-    return (
+  return (
-        <main>
+    <main className="ml-16 p-8 text-foreground font-[--font-barlow-semicondensed-regular] prose prose-invert max-w-none">
-            <Helmet>
+      <Helmet>
-                <title>LPHUB | Rules</title>
+        <title>LPHUB | Rules</title>
-            </Helmet>
+      </Helmet>
-            <ReactMarkdown>{rulesText}</ReactMarkdown>
+      <ReactMarkdown>{rulesText}</ReactMarkdown>
-        </main>
+    </main>
-    );
+  );
 };
 export default Rules;
diff --git a/frontend/src/pages/User.tsx b/frontend/src/pages/User.tsx
index d43c0c6..8c699b1 100644
--- a/frontend/src/pages/User.tsx
+++ b/frontend/src/pages/User.tsx
@@ -1,15 +1,25 @@
-import React from 'react';
+import React from "react";
-import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from "react-router-dom";
-import { Helmet } from 'react-helmet';
+import { Helmet } from "react-helmet";
-import { SteamIcon, TwitchIcon, YouTubeIcon, PortalIcon, FlagIcon, StatisticsIcon, SortIcon, ThreedotIcon, DownloadIcon, HistoryIcon } from '@images/Images';
+import {
-import { UserProfile } from '@customTypes/Profile';
+  SteamIcon,
-import { Game, GameChapters } from '@customTypes/Game';
+  TwitchIcon,
-import { Map } from '@customTypes/Map';
+  YouTubeIcon,
-import { API } from '@api/Api';
+  PortalIcon,
-import { ticks_to_time } from '@utils/Time';
+  FlagIcon,
-import "@css/Profile.css";
+  StatisticsIcon,
-import useMessage from '@hooks/UseMessage';
+  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 useMessage from "@hooks/UseMessage";
 interface UserProps {
  profile?: UserProfile;
@@ -18,7 +28,6 @@ interface UserProps {
 }
 const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  const { message, MessageDialogComponent } = useMessage();
  const [user, setUser] = React.useState<UserProfile | undefined>(undefined);
@@ -29,13 +38,15 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
  const [game, setGame] = React.useState("0");
  const [chapter, setChapter] = React.useState("0");
-  const [chapterData, setChapterData] = React.useState<GameChapters | null>(null);
+  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 _fetch_user = React.useCallback(async () => {
    const userID = location.pathname.split("/")[2];
    if (token && profile && profile.profile && profile.steam_id === userID) {
      navigate("/profile");
@@ -43,9 +54,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
    }
    const userData = await API.get_user(userID);
    setUser(userData);
-  };
+  }, [location.pathname, token, profile, navigate]);
-  const _get_game_chapters = async () => {
+  const _get_game_chapters = React.useCallback(async () => {
    if (game !== "0") {
      const gameChapters = await API.get_games_chapters(game);
      setChapterData(gameChapters);
@@ -53,9 +64,9 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
      setPageMax(Math.ceil(user!.records.length / 20));
      setPageNumber(1);
    }
-  };
+  }, [game, user]);
-  const _get_game_maps = async () => {
+  const _get_game_maps = React.useCallback(async () => {
    if (chapter === "0") {
      const gameMaps = await API.get_game_maps(game);
      setMaps(gameMaps);
@@ -67,251 +78,331 @@ const User: React.FC<UserProps> = ({ token, profile, gameData }) => {
      setPageMax(Math.ceil(gameChapters.maps.length / 20));
      setPageNumber(1);
    }
-  };
+  }, [chapter, game]);
  React.useEffect(() => {
    _fetch_user();
-  }, [location]);
+  }, [location, _fetch_user]);
  React.useEffect(() => {
    if (user) {
      _get_game_chapters();
    }
-  }, [user, game, location]);
+  }, [user, game, location, _get_game_chapters]);
  React.useEffect(() => {
    if (user && game !== "0") {
      _get_game_maps();
    }
-  }, [user, game, chapter, location])
+  }, [user, game, chapter, location, _get_game_maps]);
  if (!user) {
    return (
-      <></>
+      <div className="flex justify-center items-center h-[50vh] text-lg text-foreground">
+        Loading...
+      </div>
    );
-  };
+  }
  return (
-    <main>
+    <main className="ml-20 overflow-auto overflow-x-hidden relative w-[calc(100%px)] h-screen font-[--font-barlow-semicondensed-regular] text-foreground text-xl">
      <Helmet>
        <title>LPHUB | {user.user_name}</title>
        <meta name="description" content={user.user_name} />
      </Helmet>
+      
      {MessageDialogComponent}
-      <section id='section1' className='profile'>
-        <div>
+      <section className="m-5 bg-gradient-to-t from-[#202232] from-50% to-[#2b2e46] to-50% rounded-3xl p-[30px] mb-[30px] text-foreground">
-          <img src={user.avatar_link} alt="profile-image"></img>
+        <div className="grid grid-cols-[200px_1fr_auto] items-center gap-[25px] mb-[25px]">
-        </div>
+          <img 
-        <div id='profile-top'>
+            src={user.avatar_link} 
+            alt="Profile" 
+            className="w-[120px] h-[120px] rounded-full border-[3px] border-[rgba(205,207,223,0.2)]" 
+          />
          <div>
-            <div>{user.user_name}</div>
+            <h1 className="m-0 mb-[10px] text-[50px] font-bold text-white font-[--font-barlow-semicondensed-regular]">
-            <div>
+              {user.user_name}
-              {user.country_code === "XX" ? "" : <img src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`} alt={user.country_code} />}
+            </h1>
-            </div>
+            {user.country_code !== "XX" && (
-            <div>
+              <div className="flex items-center gap-3 mb-[15px]">
-              {user.titles.map(e => (
+                <img
-                <span className="titles" style={{ backgroundColor: `#${e.color}` }}>
+                  src={`https://flagcdn.com/w80/${user.country_code.toLowerCase()}.jpg`}
-                  {e.name}
+                  alt={user.country_code}
+                  className="w-6 h-4 rounded-[10px]"
+                />
+                <span>{user.country_code}</span>
+              </div>
+            )}
+            <div className="flex flex-wrap gap-2">
+              {user.titles.map((title, index) => (
+                <span
+                  key={index}
+                  className="py-[6px] px-5 pt-[6px] rounded-[10px] text-lg font-normal text-white"
+                  style={{ backgroundColor: `#${title.color}` }}
+                >
+                  {title.name}
                </span>
              ))}
            </div>
          </div>
-          <div>
+          <div className="flex gap-[15px] items-center pr-[10px]">
-            {user.links.steam === "-" ? "" : <a href={user.links.steam}><img src={SteamIcon} alt="Steam" /></a>}
+            {user.links.steam !== "-" && (
-            {user.links.twitch === "-" ? "" : <a href={user.links.twitch}><img src={TwitchIcon} alt="Twitch" /></a>}
+              <a href={user.links.steam} className="flex items-center justify-center transition-all duration-200 hover:-translate-y-0.5">
-            {user.links.youtube === "-" ? "" : <a href={user.links.youtube}><img src={YouTubeIcon} alt="Youtube" /></a>}
+                <img src={SteamIcon} alt="Steam" className="h-[50px] px-[5px] scale-90 brightness-200" />
-            {user.links.p2sr === "-" ? "" : <a href={user.links.p2sr}><img src={PortalIcon} alt="P2SR" style={{ padding: "0" }} /></a>}
+              </a>
+            )}
+            {user.links.twitch !== "-" && (
+              <a href={user.links.twitch} className="flex items-center justify-center transition-all duration-200 hover:-translate-y-0.5">
+                <img src={TwitchIcon} alt="Twitch" className="h-[50px] px-[5px] scale-90 brightness-200" />
+              </a>
+            )}
+            {user.links.youtube !== "-" && (
+              <a href={user.links.youtube} className="flex items-center justify-center transition-all duration-200 hover:-translate-y-0.5">
+                <img src={YouTubeIcon} alt="YouTube" className="h-[50px] px-[5px] scale-90 brightness-200" />
+              </a>
+            )}
+            {user.links.p2sr !== "-" && (
+              <a href={user.links.p2sr} className="flex items-center justify-center transition-all duration-200 hover:-translate-y-0.5">
+                <img src={PortalIcon} alt="P2SR" className="h-[50px] px-[5px] scale-90 brightness-200" />
+              </a>
+            )}
          </div>
        </div>
-        <div id='profile-bottom'>
-          <div>
+        <div className="grid grid-cols-3 gap-3 mt-24">
-            <span>Overall</span>
+          <div className="m-3 bg-[#2b2e46] rounded-[20px] p-5 text-center grid place-items-center grid-rows-[40%_50%]">
-            <span>{user.rankings.overall.rank === 0 ? "N/A " : "#" + user.rankings.overall.rank + " "}
+            <div className="text-inherit text-lg">Overall</div>
-              <span>({user.rankings.overall.completion_count}/{user.rankings.overall.completion_total})</span>
+            <div className="text-white text-[40px]">
-            </span>
+              {user.rankings.overall.rank === 0 ? "N/A" : `#${user.rankings.overall.rank}`}
+            </div>
+            <div className="text-white text-xl">
+              {user.rankings.overall.completion_count}/{user.rankings.overall.completion_total}
+            </div>
          </div>
-          <div>
+          <div className="m-3 bg-[#2b2e46] rounded-[20px] p-5 text-center grid place-items-center grid-rows-[40%_50%]">
-            <span>Singleplayer</span>
+            <div className="text-inherit text-lg">Singleplayer</div>
-            <span>{user.rankings.singleplayer.rank === 0 ? "N/A " : "#" + user.rankings.singleplayer.rank + " "}
+            <div className="text-white text-[40px]">
-              <span>({user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total})</span>
+              {user.rankings.singleplayer.rank === 0 ? "N/A" : `#${user.rankings.singleplayer.rank}`}
-            </span>
+            </div>
+            <div className="text-white text-xl">
+              {user.rankings.singleplayer.completion_count}/{user.rankings.singleplayer.completion_total}
+            </div>
          </div>
-          <div>
+          <div className="m-3 bg-[#2b2e46] rounded-[20px] p-5 text-center grid place-items-center grid-rows-[40%_50%]">
-            <span>Cooperative</span>
+            <div className="text-inherit text-lg">Cooperative</div>
-            <span>{user.rankings.cooperative.rank === 0 ? "N/A " : "#" + user.rankings.cooperative.rank + " "}
+            <div className="text-white text-[40px]">
-              <span>({user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total})</span>
+              {user.rankings.cooperative.rank === 0 ? "N/A" : `#${user.rankings.cooperative.rank}`}
-            </span>
+            </div>
+            <div className="text-white text-xl">
+              {user.rankings.cooperative.completion_count}/{user.rankings.cooperative.completion_total}
+            </div>
          </div>
        </div>
      </section>
+      <section className="m-5 h-[60px] grid grid-cols-2">
-      <section id='section2' className='profile'>
+        <button 
-        <button onClick={() => setNavState(0)}><img src={FlagIcon} alt="" />&nbsp;Player Records</button>
+          className={`flex justify-center items-center gap-2 bg-[#2b2e46] border-0 text-inherit font-inherit text-2xl cursor-pointer transition-colors duration-100 rounded-l-3xl hover:bg-[#202232] ${
-        <button onClick={() => setNavState(1)}><img src={StatisticsIcon} alt="" />&nbsp;Statistics</button>
+            navState === 0 ? 'bg-[#202232]' : ''
+          }`}
+          onClick={() => setNavState(0)}
+        >
+          <img src={FlagIcon} alt="" className="w-5 h-5 scale-[1.2]" />
+          Player Records
+        </button>
+        <button 
+          className={`flex justify-center items-center gap-2 bg-[#2b2e46] border-0 text-inherit font-inherit text-2xl cursor-pointer transition-colors duration-100 rounded-r-3xl hover:bg-[#202232] ${
+            navState === 1 ? 'bg-[#202232]' : ''
+          }`}
+          onClick={() => setNavState(1)}
+        >
+          <img src={StatisticsIcon} alt="" className="w-5 h-5 scale-[1.2]" />
+          Statistics
+        </button>
      </section>
+      {navState === 0 && (
+        <section className="m-5 block bg-[#202232] rounded-3xl overflow-hidden">
+          <div className="grid grid-cols-2 mx-5 my-5 mt-[10px] mb-5">
+            <select
-      <section id='section3' className='profile1'>
+              className="h-[50px] rounded-3xl text-center text-inherit font-inherit text-2xl border-0 bg-[#2b2e46] mr-[10px]"
-        <div id='profileboard-nav'>
+              value={game}
-          {gameData === null ? <select>error</select> :
+              onChange={(e) => {
+                setGame(e.target.value);
-            <select id='select-game'
-              onChange={() => {
-                setGame((document.querySelector('#select-game') as HTMLInputElement).value);
                setChapter("0");
-                const chapterSelect = document.querySelector('#select-chapter') as HTMLSelectElement;
+              }}
-                if (chapterSelect) {
+            >
-                  chapterSelect.value = "0";
+              <option value="0">All Games</option>
-                }
+              {gameData?.map((g) => (
-              }}>
+                <option key={g.id} value={g.id}>
-              <option value={0} key={0}>All Scores</option>
+                  {g.name}
-              {gameData.map((e, i) => (
+                </option>
-                <option value={e.id} key={i + 1}>{e.name}</option>
+              ))}
-              ))}</select>
+            </select>
-          }
-          {game === "0" ?
+            <select
-            <select disabled>
+              className="h-[50px] rounded-3xl text-center text-inherit font-inherit text-2xl border-0 bg-[#2b2e46] mr-[10px] disabled:opacity-50"
-              <option>All Chapters</option>
+              value={chapter}
+              onChange={(e) => setChapter(e.target.value)}
+              disabled={game === "0"}
+            >
+              <option value="0">All Chapters</option>
+              {chapterData?.chapters
+                .filter(c => !c.is_disabled)
+                .map((c) => (
+                  <option key={c.id} value={c.id}>
+                    {c.name}
+                  </option>
+                ))}
            </select>
-            : chapterData === null ? <select></select> :
+          </div>
-              <select id='select-chapter'
+          <div className="h-[34px] grid text-xl pl-[60px] mx-5 my-0 grid-cols-[15%_15%_5%_15%_5%_15%_15%_15%]">
-                onChange={() => setChapter((document.querySelector('#select-chapter') as HTMLInputElement).value)}>
+            <div className="flex place-items-end cursor-pointer">
-                <option value="0" key="0">All Chapters</option>
+              <span>Map Name</span>
-                {chapterData.chapters.filter(e => e.is_disabled === false).map((e, i) => (
+              <img src={SortIcon} alt="Sort" className="h-5 scale-[0.8]" />
-                  <option value={e.id} key={i + 1}>{e.name}</option>
+            </div>
-                ))}</select>
+            <div className="flex place-items-end cursor-pointer">
-          }
+              <span>Portals</span>
-        </div>
+              <img src={SortIcon} alt="Sort" className="h-5 scale-[0.8]" />
-        <div id='profileboard-top'>
+            </div>
-          <span><span>Map Name</span><img src={SortIcon} alt="" /></span>
+            <div className="flex place-items-end cursor-pointer">
-          <span style={{ justifyContent: 'center' }}><span>Portals</span><img src={SortIcon} alt="" /></span>
+              <span>WRΔ</span>
-          <span style={{ justifyContent: 'center' }}><span>WRΔ </span><img src={SortIcon} alt="" /></span>
+              <img src={SortIcon} alt="Sort" className="h-5 scale-[0.8]" />
-          <span style={{ justifyContent: 'center' }}><span>Time</span><img src={SortIcon} alt="" /></span>
+            </div>
-          <span> </span>
+            <div className="flex place-items-end cursor-pointer">
-          <span><span>Rank</span><img src={SortIcon} alt="" /></span>
+              <span>Time</span>
-          <span><span>Date</span><img src={SortIcon} alt="" /></span>
+              <img src={SortIcon} alt="Sort" className="h-5 scale-[0.8]" />
-          <div id='page-number'>
+            </div>
-            <div>
+            <div></div>
-              <button onClick={() => {
+            <div className="flex place-items-end cursor-pointer">
-                if (pageNumber !== 1) {
+              <span>Rank</span>
-                  setPageNumber(prevPageNumber => prevPageNumber - 1);
+              <img src={SortIcon} alt="Sort" className="h-5 scale-[0.8]" />
-                  const records = document.querySelectorAll(".profileboard-record");
+            </div>
-                  records.forEach((r) => {
+            <div className="flex place-items-end cursor-pointer">
-                    (r as HTMLInputElement).style.height = "44px";
+              <span>Date</span>
-                  });
+              <img src={SortIcon} alt="Sort" className="h-5 scale-[0.8]" />
-                }
+            </div>
-              }}
+            <div className="flex items-center gap-[10px] justify-center">
-              ><i className='triangle' style={{ position: 'relative', left: '-5px', }}></i> </button>
+              <button
-              <span>{pageNumber}/{pageMax}</span>
+                className="w-8 h-8 border border-[#2b2e46] bg-[#2b2e46] rounded cursor-pointer flex items-center justify-center text-foreground transition-colors duration-100 hover:bg-[#202232] disabled:opacity-50 disabled:cursor-not-allowed"
-              <button onClick={() => {
+                onClick={() => setPageNumber(Math.max(1, pageNumber - 1))}
-                if (pageNumber !== pageMax) {
+                disabled={pageNumber === 1}
-                  setPageNumber(prevPageNumber => prevPageNumber + 1);
+              >
-                  const records = document.querySelectorAll(".profileboard-record");
+                ←
-                  records.forEach((r) => {
+              </button>
-                    (r as HTMLInputElement).style.height = "44px";
+              <span className="text-sm text-foreground">{pageNumber}/{pageMax}</span>
-                  });
+              <button
-                }
+                className="w-8 h-8 border border-[#2b2e46] bg-[#2b2e46] rounded cursor-pointer flex items-center justify-center text-foreground transition-colors duration-100 hover:bg-[#202232] disabled:opacity-50 disabled:cursor-not-allowed"
-              }}
+                onClick={() => setPageNumber(Math.min(pageMax, pageNumber + 1))}
-              ><i className='triangle' style={{ position: 'relative', left: '5px', transform: 'rotate(180deg)' }}></i> </button>
+                disabled={pageNumber === pageMax}
+              >
+                →
+              </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) => (
+          <div>
+            {game === "0" ? (
+              user.records
+                .sort((a, b) => a.map_id - b.map_id)
+                .map((record, index) =>
                  Math.ceil((index + 1) / 20) === pageNumber ? (
-                    <button className="profileboard-record" key={index}>
+                    <div key={index} className="w-[calc(100%-40px)] mx-5 my-0 mt-[10px] h-11 rounded-[20px] pl-[40px] text-xl text-inherit font-inherit border-0 transition-colors duration-100 bg-[#2b2e46] grid grid-cols-[15%_15%_5%_15%_5%_15%_15%_15%] overflow-hidden whitespace-nowrap cursor-pointer hover:bg-[#202232]">
-                      {r.scores.map((e, i) => (<>
+                      <Link to={`/maps/${record.map_id}`} className="text-[#3c91e6] no-underline font-inherit flex place-items-center h-11 hover:underline">
-                        {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                        {record.map_name}
+                      </Link>
-                        <Link to={`/maps/${r.map_id}`}><span>{r.map_name}</span></Link>
+                      <span className="flex place-items-center h-11">{record.scores[0]?.score_count || 'N/A'}</span>
+                      <span className={`flex place-items-center h-11 ${record.scores[0]?.score_count - record.map_wr_count > 0 ? 'text-[#dc3545]' : ''}`}>
-                        <span style={{ display: "grid" }}>{e.score_count}</span>
+                        {record.scores[0]?.score_count - record.map_wr_count > 0
+                          ? `+${record.scores[0].score_count - record.map_wr_count}`
-                        <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>
+                      <span className="flex place-items-center h-11">{record.scores[0] ? ticks_to_time(record.scores[0].score_time) : 'N/A'}</span>
-                        {i === 0 ? <span>#{r.placement}</span> : <span> </span>}
+                      <span className="flex place-items-center h-11"></span>
-                        <span>{e.date.split("T")[0]}</span>
+                      <span className="flex place-items-center h-11 font-semibold">#{record.placement}</span>
-                        <span style={{ flexDirection: "row-reverse" }}>
+                      <span className="flex place-items-center h-11">{record.scores[0]?.date.split("T")[0] || 'N/A'}</span>
+                      <div className="flex gap-[5px] justify-end flex-row-reverse place-items-center h-11">
-                          <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                        <button
-                          <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                          className="bg-transparent border-0 cursor-pointer transition-colors duration-100 p-0.5 hover:bg-[rgba(32,34,50,0.5)]"
-                          {i === 0 && r.scores.length > 1 ? <button onClick={() => {
+                          onClick={() => message("Demo Information", `Demo ID: ${record.scores[0]?.demo_id}`)}
-                            (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                          title="Demo Info"
-                              (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` :
+                          <img src={ThreedotIcon} alt="Info" className="w-4 h-4" />
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                        </button>
-                          }
+                        <button
-                          }><img src={HistoryIcon} alt="history" /></button> : ""}
+                          className="bg-transparent border-0 cursor-pointer transition-colors duration-100 p-0.5 hover:bg-[rgba(32,34,50,0.5)]"
+                          onClick={() => window.location.href = `/api/v1/demos?uuid=${record.scores[0]?.demo_id}`}
-                        </span>
+                          title="Download Demo"
-                      </>))}
+                        >
+                          <img src={DownloadIcon} alt="Download" className="w-4 h-4" />
-                    </button>
+                        </button>
-                  ) : ""
+                        {record.scores.length > 1 && (
-                ))) : maps ?
+                          <button className="bg-transparent border-0 cursor-pointer transition-colors duration-100 p-0.5 hover:bg-[rgba(32,34,50,0.5)]" title="View History">
+                            <img src={HistoryIcon} alt="History" className="w-4 h-4" />
-              maps.filter(e => e.is_disabled === false).sort((a, b) => a.id - b.id)
+                          </button>
-                .map((r, index) => {
+                        )}
-                  if (Math.ceil((index + 1) / 20) === pageNumber) {
+                      </div>
-                    let record = user.records.find((e) => e.map_id === r.id);
+                    </div>
-                    return record === undefined ? (
+                  ) : null
-                      <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>
+              maps
-                        <span style={{ display: "grid" }}>N/A</span>
+                ?.filter(map => !map.is_disabled)
-                        <span>N/A</span>
+                .sort((a, b) => a.id - b.id)
-                        <span> </span>
+                .map((map, index) => {
-                        <span>N/A</span>
+                  if (Math.ceil((index + 1) / 20) !== pageNumber) return null;
-                        <span>N/A</span>
+                  
-                        <span style={{ flexDirection: "row-reverse" }}></span>
+                  const record = user.records.find(r => r.map_id === map.id);
-                      </button>
+                  
-                    ) : (
+                  return (
-                      <button className="profileboard-record" key={index}>
+                    <div key={index} className={`w-[calc(100%-40px)] mx-5 my-0 mt-[10px] h-11 rounded-[20px] pl-[40px] text-xl text-inherit font-inherit border-0 transition-colors duration-100 bg-[#2b2e46] grid grid-cols-[15%_15%_5%_15%_5%_15%_15%_15%] overflow-hidden whitespace-nowrap cursor-pointer hover:bg-[#202232] ${!record ? 'opacity-65' : ''}`}>
-                        {record.scores.map((e, i) => (<>
+                      <Link to={`/maps/${map.id}`} className="text-[#3c91e6] no-underline font-inherit flex place-items-center h-11 hover:underline">
-                          {i !== 0 ? <hr style={{ gridColumn: "1 / span 8" }} /> : ""}
+                        {map.name}
-                          <Link to={`/maps/${r.id}`}><span>{r.name}</span></Link>
+                      </Link>
-                          <span style={{ display: "grid" }}>{record!.scores[i].score_count}</span>
+                      <span className="flex place-items-center h-11">{record?.scores[0]?.score_count || 'N/A'}</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 className={`flex place-items-center h-11 ${record?.scores[0]?.score_count && record.scores[0].score_count - record.map_wr_count > 0 ? 'text-[#dc3545]' : ''}`}>
-                          <span style={{ display: "grid" }}>{ticks_to_time(record!.scores[i].score_time)}</span>
+                        {record?.scores[0]?.score_count && record.scores[0].score_count - record.map_wr_count > 0
-                          <span> </span>
+                          ? `+${record.scores[0].score_count - record.map_wr_count}`
-                          {i === 0 ? <span>#{record!.placement}</span> : <span> </span>}
+                          : '–'}
-                          <span>{record!.scores[i].date.split("T")[0]}</span>
+                      </span>
-                          <span style={{ flexDirection: "row-reverse" }}>
+                      <span className="flex place-items-center h-11">{record?.scores[0] ? ticks_to_time(record.scores[0].score_time) : 'N/A'}</span>
+                      <span className="flex place-items-center h-11"></span>
-                            <button onClick={() => { message("Demo Information", `Demo ID: ${e.demo_id}`) }}><img src={ThreedotIcon} alt="demo_id" /></button>
+                      <span className="flex place-items-center h-11 font-semibold">{record ? `#${record.placement}` : 'N/A'}</span>
-                            <button onClick={() => window.location.href = `/api/v1/demos?uuid=${e.demo_id}`}><img src={DownloadIcon} alt="download" /></button>
+                      <span className="flex place-items-center h-11">{record?.scores[0]?.date.split("T")[0] || 'N/A'}</span>
-                            {i === 0 && record!.scores.length > 1 ? <button onClick={() => {
+                      <div className="flex gap-[5px] justify-end flex-row-reverse place-items-center h-11">
-                              (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height === "44px" ||
+                        {record?.scores[0] && (
-                                (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` :
+                            <button
-                                (document.querySelectorAll(".profileboard-record")[index % 20] as HTMLInputElement).style.height = "44px"
+                              className="bg-transparent border-0 cursor-pointer transition-colors duration-100 p-0.5 hover:bg-[rgba(32,34,50,0.5)]"
-                            }
+                              onClick={() => message("Demo Information", `Demo ID: ${record.scores[0].demo_id}`)}
-                            }><img src={HistoryIcon} alt="history" /></button> : ""}
+                              title="Demo Info"
+                            >
-                          </span>
+                              <img src={ThreedotIcon} alt="Info" className="w-4 h-4" />
-                        </>))}
+                            </button>
-                      </button>
+                            <button
+                              className="bg-transparent border-0 cursor-pointer transition-colors duration-100 p-0.5 hover:bg-[rgba(32,34,50,0.5)]"
-                    )
+                              onClick={() => window.location.href = `/api/v1/demos?uuid=${record.scores[0].demo_id}`}
-                  } else { return null }
+                              title="Download Demo"
-                }) : (<>{console.warn(maps)}</>)}
+                            >
-        </div>
+                              <img src={DownloadIcon} alt="Download" className="w-4 h-4" />
-      </section>
+                            </button>
+                            {record.scores.length > 1 && (
+                              <button className="bg-transparent border-0 cursor-pointer transition-colors duration-100 p-0.5 hover:bg-[rgba(32,34,50,0.5)]" title="View History">
+                                <img src={HistoryIcon} alt="History" className="w-4 h-4" />
+                              </button>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })
+            )}
+          </div>
+        </section>
+      )}
    </main>
  );
 };
diff --git a/frontend/src/types/Chapters.ts b/frontend/src/types/Chapters.ts
index 1d48306..5b494ca 100644
--- a/frontend/src/types/Chapters.ts
+++ b/frontend/src/types/Chapters.ts
@@ -2,18 +2,18 @@ import type { Game } from "@customTypes/Game";
 import type { Map } from "@customTypes/Map";
 interface Chapter {
-    id: number;
+  id: number;
-    name: string;
+  name: string;
-    image: string;
+  image: string;
-    is_disabled: boolean;
+  is_disabled: boolean;
 }
 export interface GameChapter {
-    chapter: Chapter;
+  chapter: Chapter;
-    maps: Map[];
+  maps: Map[];
 }
 export interface GamesChapters {
-    game: Game;
+  game: Game;
-    chapters: Chapter[];
+  chapters: Chapter[];
-}
-\ No newline at end of file
+}
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..0e7dc80 100644
--- a/frontend/src/types/Game.ts
+++ b/frontend/src/types/Game.ts
@@ -1,5 +1,4 @@
-import type { Map } from '@customTypes/Map';
+import type { Map } from "@customTypes/Map";
 export interface Game {
  id: number;
@@ -7,31 +6,31 @@ export interface Game {
  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 4f8eabf..a5c9404 100644
--- a/frontend/src/types/Map.ts
+++ b/frontend/src/types/Map.ts
@@ -1,6 +1,6 @@
-import type { Category, GameCategoryPortals } from '@customTypes/Game';
+import type { Category, GameCategoryPortals } from "@customTypes/Game";
-import type { Pagination } from '@customTypes/Pagination';
+import type { Pagination } from "@customTypes/Pagination";
-import type { UserShort } from '@customTypes/Profile';
+import type { UserShort } from "@customTypes/Profile";
 export interface Map {
  id: number;
@@ -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,19 +27,21 @@ 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";
@@ -50,7 +52,7 @@ export interface MapLeaderboardRecordSingleplayer {
  user: UserShort;
  demo_id: string;
  record_date: string;
-};
+}
 export interface MapLeaderboardRecordMultiplayer {
  kind: "multiplayer";
@@ -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;
@@ -84,7 +85,7 @@ interface MapSummaryMap {
 interface MapSummaryDetails {
  routes: MapSummaryDetailsRoute[];
-};
+}
 interface MapSummaryDetailsRoute {
  route_id: number;
@@ -94,16 +95,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_intro1: 1,
-    "sp_a1_intro2": 2,
+  sp_a1_intro2: 2,
-    "sp_a1_intro3": 3,
+  sp_a1_intro3: 3,
-    "sp_a1_intro4": 4,
+  sp_a1_intro4: 4,
-    "sp_a1_intro5": 5,
+  sp_a1_intro5: 5,
-    "sp_a1_intro6": 6,
+  sp_a1_intro6: 6,
-    "sp_a1_intro7": 7,
+  sp_a1_intro7: 7,
-    "sp_a1_wakeup": 8,
+  sp_a1_wakeup: 8,
-    "sp_a2_intro": 9,
+  sp_a2_intro: 9,
-    "sp_a2_laser_intro": 10,
+  sp_a2_laser_intro: 10,
-    "sp_a2_laser_stairs": 11,
+  sp_a2_laser_stairs: 11,
-    "sp_a2_dual_lasers": 12,
+  sp_a2_dual_lasers: 12,
-    "sp_a2_laser_over_goo": 13,
+  sp_a2_laser_over_goo: 13,
-    "sp_a2_catapult_intro": 14,
+  sp_a2_catapult_intro: 14,
-    "sp_a2_trust_fling": 15,
+  sp_a2_trust_fling: 15,
-    "sp_a2_pit_flings": 16,
+  sp_a2_pit_flings: 16,
-    "sp_a2_fizzler_intro": 17,
+  sp_a2_fizzler_intro: 17,
-    "sp_a2_sphere_peek": 18,
+  sp_a2_sphere_peek: 18,
-    "sp_a2_ricochet": 19,
+  sp_a2_ricochet: 19,
-    "sp_a2_bridge_intro": 20,
+  sp_a2_bridge_intro: 20,
-    "sp_a2_bridge_the_gap": 21,
+  sp_a2_bridge_the_gap: 21,
-    "sp_a2_turret_intro": 22,
+  sp_a2_turret_intro: 22,
-    "sp_a2_laser_relays": 23,
+  sp_a2_laser_relays: 23,
-    "sp_a2_turret_blocker": 24,
+  sp_a2_turret_blocker: 24,
-    "sp_a2_laser_vs_turret": 25,
+  sp_a2_laser_vs_turret: 25,
-    "sp_a2_pull_the_rug": 26,
+  sp_a2_pull_the_rug: 26,
-    "sp_a2_column_blocker": 27,
+  sp_a2_column_blocker: 27,
-    "sp_a2_laser_chaining": 28,
+  sp_a2_laser_chaining: 28,
-    "sp_a2_triple_laser": 29,
+  sp_a2_triple_laser: 29,
-    "sp_a2_bts1": 30,
+  sp_a2_bts1: 30,
-    "sp_a2_bts2": 31,
+  sp_a2_bts2: 31,
-    "sp_a2_bts3": 32,
+  sp_a2_bts3: 32,
-    "sp_a2_bts4": 33,
+  sp_a2_bts4: 33,
-    "sp_a2_bts5": 34,
+  sp_a2_bts5: 34,
-    "sp_a2_core": 35,
+  sp_a2_core: 35,
-    "sp_a3_01": 36,
+  sp_a3_01: 36,
-    "sp_a3_03": 37,
+  sp_a3_03: 37,
-    "sp_a3_jump_intro": 38,
+  sp_a3_jump_intro: 38,
-    "sp_a3_bomb_flings": 39,
+  sp_a3_bomb_flings: 39,
-    "sp_a3_crazy_box": 40,
+  sp_a3_crazy_box: 40,
-    "sp_a3_transition01": 41,
+  sp_a3_transition01: 41,
-    "sp_a3_speed_ramp": 42,
+  sp_a3_speed_ramp: 42,
-    "sp_a3_speed_flings": 43,
+  sp_a3_speed_flings: 43,
-    "sp_a3_portal_intro": 44,
+  sp_a3_portal_intro: 44,
-    "sp_a3_end": 45,
+  sp_a3_end: 45,
-    "sp_a4_intro": 46,
+  sp_a4_intro: 46,
-    "sp_a4_tb_intro": 47,
+  sp_a4_tb_intro: 47,
-    "sp_a4_tb_trust_drop": 48,
+  sp_a4_tb_trust_drop: 48,
-    "sp_a4_tb_wall_button": 49,
+  sp_a4_tb_wall_button: 49,
-    "sp_a4_tb_polarity": 50,
+  sp_a4_tb_polarity: 50,
-    "sp_a4_tb_catch": 51,
+  sp_a4_tb_catch: 51,
-    "sp_a4_stop_the_box": 52,
+  sp_a4_stop_the_box: 52,
-    "sp_a4_laser_catapult": 53,
+  sp_a4_laser_catapult: 53,
-    "sp_a4_laser_platform": 54,
+  sp_a4_laser_platform: 54,
-    "sp_a4_speed_tb_catch": 55,
+  sp_a4_speed_tb_catch: 55,
-    "sp_a4_jump_polarity": 56,
+  sp_a4_jump_polarity: 56,
-    "sp_a4_finale1": 57,
+  sp_a4_finale1: 57,
-    "sp_a4_finale2": 58,
+  sp_a4_finale2: 58,
-    "sp_a4_finale3": 59,
+  sp_a4_finale3: 59,
-    "sp_a4_finale4": 60,
+  sp_a4_finale4: 60,
-    "mp_coop_start": 61,
+  mp_coop_start: 61,
-    "mp_coop_lobby_3": 62,
+  mp_coop_lobby_3: 62,
-    "mp_coop_doors": 63,
+  mp_coop_doors: 63,
-    "mp_coop_race_2": 64,
+  mp_coop_race_2: 64,
-    "mp_coop_laser_2": 65,
+  mp_coop_laser_2: 65,
-    "mp_coop_rat_maze": 66,
+  mp_coop_rat_maze: 66,
-    "mp_coop_laser_crusher": 67,
+  mp_coop_laser_crusher: 67,
-    "mp_coop_teambts": 68,
+  mp_coop_teambts: 68,
-    "mp_coop_fling_3": 69,
+  mp_coop_fling_3: 69,
-    "mp_coop_infinifling_train": 70,
+  mp_coop_infinifling_train: 70,
-    "mp_coop_come_along": 71,
+  mp_coop_come_along: 71,
-    "mp_coop_fling_1": 72,
+  mp_coop_fling_1: 72,
-    "mp_coop_catapult_1": 73,
+  mp_coop_catapult_1: 73,
-    "mp_coop_multifling_1": 74,
+  mp_coop_multifling_1: 74,
-    "mp_coop_fling_crushers": 75,
+  mp_coop_fling_crushers: 75,
-    "mp_coop_fan": 76,
+  mp_coop_fan: 76,
-    "mp_coop_wall_intro": 77,
+  mp_coop_wall_intro: 77,
-    "mp_coop_wall_2": 78,
+  mp_coop_wall_2: 78,
-    "mp_coop_catapult_wall_intro": 79,
+  mp_coop_catapult_wall_intro: 79,
-    "mp_coop_wall_block": 80,
+  mp_coop_wall_block: 80,
-    "mp_coop_catapult_2": 81,
+  mp_coop_catapult_2: 81,
-    "mp_coop_turret_walls": 82,
+  mp_coop_turret_walls: 82,
-    "mp_coop_turret_ball": 83,
+  mp_coop_turret_ball: 83,
-    "mp_coop_wall_5": 84,
+  mp_coop_wall_5: 84,
-    "mp_coop_tbeam_redirect": 85,
+  mp_coop_tbeam_redirect: 85,
-    "mp_coop_tbeam_drill": 86,
+  mp_coop_tbeam_drill: 86,
-    "mp_coop_tbeam_catch_grind_1": 87,
+  mp_coop_tbeam_catch_grind_1: 87,
-    "mp_coop_tbeam_laser_1": 88,
+  mp_coop_tbeam_laser_1: 88,
-    "mp_coop_tbeam_polarity": 89,
+  mp_coop_tbeam_polarity: 89,
-    "mp_coop_tbeam_polarity2": 90,
+  mp_coop_tbeam_polarity2: 90,
-    "mp_coop_tbeam_polarity3": 91,
+  mp_coop_tbeam_polarity3: 91,
-    "mp_coop_tbeam_maze": 92,
+  mp_coop_tbeam_maze: 92,
-    "mp_coop_tbeam_end": 93,
+  mp_coop_tbeam_end: 93,
-    "mp_coop_paint_come_along": 94,
+  mp_coop_paint_come_along: 94,
-    "mp_coop_paint_redirect": 95,
+  mp_coop_paint_redirect: 95,
-    "mp_coop_paint_bridge": 96,
+  mp_coop_paint_bridge: 96,
-    "mp_coop_paint_walljumps": 97,
+  mp_coop_paint_walljumps: 97,
-    "mp_coop_paint_speed_fling": 98,
+  mp_coop_paint_speed_fling: 98,
-    "mp_coop_paint_red_racer": 99,
+  mp_coop_paint_red_racer: 99,
-    "mp_coop_paint_speed_catch": 100,
+  mp_coop_paint_speed_catch: 100,
-    "mp_coop_paint_longjump_intro": 101,
+  mp_coop_paint_longjump_intro: 101,
-    "mp_coop_separation_1": 102,
+  mp_coop_separation_1: 102,
-    "mp_coop_tripleaxis": 103,
+  mp_coop_tripleaxis: 103,
-    "mp_coop_catapult_catch": 104,
+  mp_coop_catapult_catch: 104,
-    "mp_coop_2paints_1bridge": 105,
+  mp_coop_2paints_1bridge: 105,
-    "mp_coop_paint_conversion": 106,
+  mp_coop_paint_conversion: 106,
-    "mp_coop_bridge_catch": 107,
+  mp_coop_bridge_catch: 107,
-    "mp_coop_laser_tbeam": 108,
+  mp_coop_laser_tbeam: 108,
-    "mp_coop_paint_rat_maze": 109,
+  mp_coop_paint_rat_maze: 109,
-    "mp_coop_paint_crazy_box": 110,
+  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..3c83d29 100644
--- a/frontend/src/types/Profile.ts
+++ b/frontend/src/types/Profile.ts
@@ -4,7 +4,7 @@ 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..800f4be 100644
--- a/frontend/src/types/Ranking.ts
+++ b/frontend/src/types/Ranking.ts
@@ -1,31 +1,31 @@
 import type { UserShort } from "@customTypes/Profile";
 export interface RankingType {
-    placement: number;
+  placement: number;
-    user: UserShort;
+  user: UserShort;
-    total_score: number;
+  total_score: number;
 }
 export interface SteamRankingType {
-    user_name: string;
+  user_name: string;
-    avatar_link: string;
+  avatar_link: string;
-    steam_id: string;
+  steam_id: string;
-    sp_score: number;
+  sp_score: number;
-    mp_score: number;
+  mp_score: number;
-    overall_score: number;
+  overall_score: number;
-    sp_rank: number;
+  sp_rank: number;
-    mp_rank: number;
+  mp_rank: number;
-    overall_rank: number;
+  overall_rank: number;
 }
 export interface Ranking {
-    rankings_overall: RankingType[];
+  rankings_overall: RankingType[];
-    rankings_singleplayer: RankingType[];
+  rankings_singleplayer: RankingType[];
-    rankings_multiplayer: RankingType[];
+  rankings_multiplayer: RankingType[];
 }
 export interface SteamRanking {
-    rankings_overall: SteamRankingType[];
+  rankings_overall: SteamRankingType[];
-    rankings_singleplayer: SteamRankingType[];
+  rankings_singleplayer: SteamRankingType[];
-    rankings_multiplayer: SteamRankingType[];
+  rankings_multiplayer: SteamRankingType[];
-}
-\ No newline at end of file
+}
diff --git a/frontend/src/types/Search.ts b/frontend/src/types/Search.ts
index d218806..b258ee3 100644
--- a/frontend/src/types/Search.ts
+++ b/frontend/src/types/Search.ts
@@ -3,11 +3,11 @@ 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..dc6ec92 100644
--- a/frontend/src/utils/Jwt.ts
+++ b/frontend/src/utils/Jwt.ts
@@ -1,44 +1,48 @@
 // 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;
  }
-  const parts = token.split('.');
+  const parts = token.split(".");
  if (parts.length !== 3) {
    return undefined;
  }
  const base64Url = parts[1];
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64)
-      .split('')
+      .split("")
      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
-      .join('')
+      .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;
  }
-  const parts = token.split('.');
+  const parts = token.split(".");
  if (parts.length !== 3) {
    return undefined;
  }
  const base64Url = parts[1];
-  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
  const jsonPayload = decodeURIComponent(
    atob(base64)
-      .split('')
+      .split("")
      .map(function (c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
      })
-      .join('')
+      .join("")
  );
  return JSON.parse(jsonPayload).mod;
-};
+}
diff --git a/frontend/src/utils/Time.ts b/frontend/src/utils/Time.ts
index b83a7ed..8f2c03c 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 localDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
-  const seconds = Math.floor((now - localDate.getTime()) / 1000);    
+  const seconds = Math.floor((now - localDate.getTime()) / 1000);
  let interval = Math.floor(seconds / 31536000);
-  if (interval === 1) {return interval + ' year ago';}
+  if (interval === 1) {
-  if (interval > 1) {return interval + ' years ago';}
+    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) {
-  if (interval > 1) {return interval + ' months ago';}
+    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) {
-  if (interval > 1) {return interval + ' days ago';}
+    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) {
-  if (interval > 1) {return interval + ' hours ago';}
+    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) {
-  if (interval > 1) {return interval + ' minutes ago';}
+    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';
+  return Math.floor(seconds) + " seconds ago";
-};
+}
 export function ticks_to_time(ticks: number) {
-  let seconds = Math.floor(ticks / 60)
+  let seconds = Math.floor(ticks / 60);
-  let minutes = Math.floor(seconds / 60)
+  let minutes = Math.floor(seconds / 60);
-  let hours = Math.floor(minutes / 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')}`;
+  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
+}