fix(deps): update dependency @heroicons/react to v2.1.3

add shortened name for site name
Merge branch 'master' of https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2
2024-04-17 00:57:59 +00:00 · 2024-02-01 03:20:44 +00:00 · 2024-02-01 02:23:56 +00:00 · 2024-02-01 02:23:55 +00:00 · 2024-02-01 02:11:11 +00:00 · 2024-02-01 02:11:04 +00:00
90 changed files with 7252 additions and 8277 deletions
--- a/.env-example
+++ b/.env-example
@ -1 +1,4 @@
-SENTRY_AUTH_TOKEN=hi
+INFISICAL_TOKEN=hi
+
+# Redis
+REDIS_URL=redis://localhost:6379/0
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,5 @@
+const path = require("path");
+
+module.exports = {
+  extends: ["next/core-web-vitals"],
+};
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}
--- a/.gitignore
+++ b/.gitignore
@ -5,8 +5,9 @@
 /.pnp
 .pnp.js

-# yarn
+# lock files
 yarn.lock
+package-lock.json

 # testing
 /coverage
@ -42,3 +43,8 @@ next-env.d.ts

 # Webpack bundle analyzer
 analyze
+
+# Sitemap
+public/sitemap*
+
+.env
--- a/.infisical.json
+++ b/.infisical.json
@ -0,0 +1,5 @@
+{
+    "workspaceId": "6551ad1ded9edd83540488e0",
+    "defaultEnvironment": "",
+    "gitBranchToEnvironmentMapping": null
+}
--- a/17
+++ b/17
@ -1,11 +1,11 @@
-FROM fascinated/docker-images:node-latest AS base
+FROM fascinated/docker-images:node-pnpm-latest AS base

 # Install depends
 FROM base AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-COPY package.json* package-lock.yaml* ./
-RUN npm install --frozen-lockfile --quiet
+COPY package.json* pnpm-lock.yaml* ./
+RUN pnpm install --frozen-lockfile --quiet

 # Build from source
 FROM base AS builder
@ -17,7 +17,14 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ARG GIT_REV
 ENV GIT_REV ${GIT_REV}

-RUN npm run build
+# ARG REDIS_URL
+ENV REDIS_URL redis://:bigtitsyes7@10.0.0.203:30004
+
+# Build the app
+RUN pnpm run build
+
+# Generate sitemap
+RUN pnpm run generate-sitemap

 # Run the app
 FROM base AS runner
@ -42,4 +49,4 @@ USER nextjs
 EXPOSE 80
 ENV HOSTNAME "0.0.0.0"
 ENV PORT 80
-CMD ["npm", "run", "start"]
+CMD ["pnpm", "start"]
--- a/next-sitemap.config.js
+++ b/next-sitemap.config.js
@ -0,0 +1,74 @@
+const ssrSettings = require("./src/ssrSettings");
+const { getCodeList } = require("country-list");
+
+const SS_API_URL = ssrSettings.proxy + "/https://scoresaber.com/api";
+const SS_GET_PLAYERS_URL = SS_API_URL + "/players?page={}";
+
+// todo: cache this on a file somehow?
+async function getTopPlayers() {
+  console.log("Fetching top players...");
+  const players = [];
+  const pagesToFetch = 10;
+  for (let i = 0; i < pagesToFetch; i++) {
+    console.log(`Fetching page ${i + 1} of ${pagesToFetch}...`);
+    try {
+      const response = await fetch(SS_GET_PLAYERS_URL.replace("{}", i));
+      const data = await response.json();
+      players.push(...data.players);
+    } catch (e) {
+      console.log(`Error fetching page ${i + 1} of ${pagesToFetch}: ${e}`);
+    }
+  }
+  console.log("Done fetching top players.");
+  return players;
+}
+
+const additionalData = {
+  priority: 0.5,
+  changefreq: "monthly",
+  lastmod: new Date().toISOString(),
+};
+
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: ssrSettings.siteUrl,
+  generateRobotsTxt: true,
+  additionalPaths: async (config) => {
+    const paths = [];
+    // Add the top 50 global ranking pages
+    for (let i = 0; i < 50; i++) {
+      paths.push({
+        loc: `/ranking/global/${i + 1}`,
+        ...additionalData,
+      });
+    }
+
+    // Add the top 50 pages for all countries
+    const countries = Object.keys(getCodeList());
+    for (const country of countries) {
+      for (let i = 0; i < 50; i++) {
+        paths.push({
+          loc: `/ranking/country/${country}/${i + 1}`,
+          ...additionalData,
+        });
+      }
+    }
+
+    const sortTypes = ["top", "recent"];
+
+    // Add top players
+    const players = await getTopPlayers();
+    for (const sortType of sortTypes) {
+      for (const player of players) {
+        for (let i = 0; i < 5; i++) {
+          paths.push({
+            loc: `/player/${player.id}/${sortType}/${i + 1}`,
+            ...additionalData,
+          });
+        }
+      }
+    }
+
+    return paths;
+  },
+};
--- a/next.config.js
+++ b/next.config.js
@ -1,87 +1,57 @@
 const nextBuildId = require("next-build-id");
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
-  enabled: false,
-});
+const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: false });
+
+// Define remote patterns for images
+const remotePatterns = [
+  { protocol: "https", hostname: "cdn.fascinated.cc", pathname: "/**" },
+  { protocol: "https", hostname: "cdn.scoresaber.com", pathname: "/**" },
+  { protocol: "https", hostname: "cdn.jsdelivr.net", pathname: "/**" },
+  { protocol: "https", hostname: "eu.cdn.beatsaver.com", pathname: "/**" },
+  { protocol: "https", hostname: "na.cdn.beatsaver.com", pathname: "/**" },
+  {
+    protocol: "https",
+    hostname: "avatars.akamai.steamstatic.com",
+    pathname: "/**",
+  },
+];
+
+// Define optimized package imports
+const optimizePackageImports = [
+  "react",
+  "react-dom",
+  "next-themes",
+  "react-tostify",
+  "websocket",
+  "cslx",
+  "chart.js",
+  "react-chartjs-2",
+  "country-list",
+  "@sentry/nextjs",
+];

 /** @type {import('next').NextConfig} */
 const nextConfig = {
  generateEtags: true,
+  reactStrictMode: true,
+  swcMinify: true,
  compress: true,
+  poweredByHeader: false,
+  experimental: {
+    webpackBuildWorker: true,
+    optimizePackageImports,
+  },
  env: {
    NEXT_PUBLIC_BUILD_ID:
      process.env.GIT_REV || nextBuildId.sync({ dir: __dirname }),
+    NEXT_PUBLIC_BUILD_TIME: new Date().toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    }),
  },
-  images: {
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "cdn.fascinated.cc",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "cdn.scoresaber.com",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "cdn.jsdelivr.net",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "eu.cdn.beatsaver.com",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "na.cdn.beatsaver.com",
-        port: "",
-        pathname: "/**",
-      },
-    ],
-  },
+  images: { remotePatterns },
 };

 module.exports = withBundleAnalyzer(nextConfig);
-
-// // Injected content via Sentry wizard below
-
-const { withSentryConfig } = require("@sentry/nextjs");
-
-module.exports = withSentryConfig(
-  module.exports,
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-
-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: "sentry",
-    project: "scoresaber-reloaded",
-    url: "https://sentry.fascinated.cc/",
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: false,
-
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: false,
-
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
-
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
-
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-  },
-);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,15 +2,17 @@
  "name": "scoresaber-reloadedv2",
  "version": "0.1.0",
  "private": true,
+  "sideEffects": false,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
+    "generate-sitemap": "next-sitemap",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
-    "@boiseitguru/cookie-cutter": "^0.2.1",
-    "@heroicons/react": "^2.0.18",
+    "@boiseitguru/cookie-cutter": "^0.2.3",
+    "@heroicons/react": "^2.1.1",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-radio-group": "^1.1.3",
@ -19,44 +21,45 @@
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tooltip": "^1.0.7",
-    "@sentry/nextjs": "^7.74.1",
-    "bluebird": "^3.7.2",
-    "chart.js": "^4.4.0",
+    "chart.js": "^4.4.1",
    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "date-fns": "^2.30.0",
+    "clsx": "^2.1.0",
+    "country-list": "^2.3.0",
+    "critters": "^0.0.20",
+    "date-fns": "^3.0.0",
    "encoding": "^0.1.13",
    "idb-keyval": "^6.2.1",
-    "lucide-react": "^0.292.0",
-    "next": "14.0.1",
+    "infisical-node": "^1.5.1",
+    "lucide-react": "^0.320.0",
+    "next": "^14.1.0",
    "next-build-id": "^3.0.0",
+    "next-sitemap": "^4.2.3",
    "next-themes": "^0.2.1",
-    "node-fetch-cache": "^3.1.3",
-    "react": "^18",
+    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
-    "react-dom": "^18",
-    "react-toastify": "^9.1.3",
-    "sharp": "^0.32.6",
-    "tailwind-merge": "^2.0.0",
+    "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.4",
+    "redis": "^4.6.12",
+    "sharp": "^0.33.0",
+    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "websocket": "^1.0.34",
-    "zustand": "^4.4.3"
+    "zustand": "^4.5.0"
  },
  "devDependencies": {
-    "@next/bundle-analyzer": "^14.0.0",
-    "@types/node": "^20",
-    "@types/node-fetch-cache": "^3.0.3",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/websocket": "^1.0.8",
-    "autoprefixer": "^10.4.16",
+    "@next/bundle-analyzer": "^14.1.0",
+    "@types/node": "^20.11.14",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@types/websocket": "^1.0.10",
+    "autoprefixer": "^10.4.17",
    "cross-env": "^7.0.3",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.1",
-    "postcss": "^8.4.31",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5"
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/BingSiteAuth.xml
+++ b/public/BingSiteAuth.xml
@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<users>
+	<user>8100264FFBFADD8CD0134169A492D34B</user>
+</users>
--- a/public/assets/logos/beatleader.png
+++ b/public/assets/logos/beatleader.png
--- a/public/assets/logos/scoresaber.png
+++ b/public/assets/logos/scoresaber.png
--- a/public/robots.txt
+++ b/public/robots.txt
@ -1,2 +1,9 @@
+# *
 User-agent: *
 Allow: /
+
+# Host
+Host: https://ssr.fascinated.cc
+
+# Sitemaps
+Sitemap: https://ssr.fascinated.cc/sitemap.xml
--- a/sentry.client.config.ts
+++ b/sentry.client.config.ts
@ -1,15 +0,0 @@
-// This file configures the initialization of Sentry on the client.
-// The config you add here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "https://1922e9d5b729f1568ad1e9537a118056@sentry.fascinated.cc/2",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});
--- a/sentry.edge.config.ts
+++ b/sentry.edge.config.ts
@ -1,16 +0,0 @@
-// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "https://1922e9d5b729f1568ad1e9537a118056@sentry.fascinated.cc/2",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});
--- a/sentry.server.config.ts
+++ b/sentry.server.config.ts
@ -1,15 +0,0 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "https://1922e9d5b729f1568ad1e9537a118056@sentry.fascinated.cc/2",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});
--- a/src/app/analytics/page.tsx
+++ b/src/app/analytics/page.tsx
@ -1,87 +0,0 @@
-import AnalyticsChart from "@/components/AnalyticsChart";
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import { ScoresaberMetricsHistory } from "@/schemas/fascinated/scoresaberMetricsHistory";
-import { ssrSettings } from "@/ssrSettings";
-import { formatNumber } from "@/utils/numberUtils";
-import { isProduction } from "@/utils/utils";
-import { Metadata } from "next";
-import Link from "next/link";
-
-async function getData() {
-  const response = await fetch(
-    "https://bs-tracker.fascinated.cc/analytics?time=30d",
-    {
-      next: {
-        revalidate: isProduction() ? 600 : 0, // 10 minutes (0 seconds in dev)
-      },
-    },
-  );
-
-  const json = await response.json();
-  return {
-    data: json as ScoresaberMetricsHistory,
-  };
-}
-
-export async function generateMetadata(): Promise<Metadata> {
-  const { data } = await getData();
-
-  const description =
-    "View Scoresaber metrics and statistics over the last 30 days.";
-
-  const lastActivePlayers =
-    data.activePlayersHistory[data.activePlayersHistory.length - 1].value;
-  const lastScoreCount =
-    data.scoreCountHistory[data.scoreCountHistory.length - 1].value;
-
-  return {
-    title: `Analytics`,
-    description: description,
-    openGraph: {
-      siteName: ssrSettings.siteName,
-      title: `Analytics`,
-      description:
-        description +
-        `
-
-        Players currently online: ${formatNumber(lastActivePlayers)}
-        Scores set Today: ${formatNumber(lastScoreCount)}`,
-    },
-  };
-}
-
-export default async function Analytics() {
-  const { data } = await getData();
-
-  return (
-    <main>
-      <Container>
-        <Card
-          outerClassName="mt-2"
-          className="flex flex-col items-center justify-center"
-        >
-          <h1 className="text-center text-3xl font-bold">Analytics</h1>
-          <p className="text-center">
-            Scoresaber metrics and statistics over the last 30 days.
-          </p>
-          <p className="text-gray-300">
-            Want more in-depth data? Click{" "}
-            <span className="text-pp-blue">
-              <Link
-                href="https://grafana.fascinated.cc/d/b3c6c28d-39e9-4fa9-8e2b-b0ddb10f875e/beatsaber-metrics"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                here
-              </Link>
-            </span>
-          </p>
-          <div className="mt-3 h-[400px] w-full">
-            <AnalyticsChart historyData={data} />
-          </div>
-        </Card>
-      </Container>
-    </main>
-  );
-}
--- a/src/app/api/beatsaver/mapdata/route.ts
+++ b/src/app/api/beatsaver/mapdata/route.ts
@ -0,0 +1,100 @@
+import { Redis } from "@/lib/db/redis";
+import { BeatsaverMap } from "@/schemas/beatsaver/BeatsaverMap";
+import { BeatsaverAPI } from "@/utils/beatsaver/api";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const mapHashes = searchParams.get("hashes");
+
+  if (!mapHashes) {
+    return new Response("mapHashes parameter is required", { status: 400 });
+  }
+  let toFetch: any[] = [];
+  if (mapHashes.includes(",")) {
+    const parts = mapHashes.substring(0, mapHashes.length - 1).split(",");
+    toFetch.push(...parts);
+  } else {
+    toFetch.push(mapHashes);
+  }
+  // Convert all hashes to uppercase
+  for (const hash of toFetch) {
+    toFetch[toFetch.indexOf(hash)] = hash.toUpperCase();
+  }
+  // Remove duplicates
+  toFetch = toFetch.filter((hash, index) => toFetch.indexOf(hash) === index);
+
+  const idOnly = searchParams.get("idonly") === "true";
+  let totalInCache = 0;
+
+  const maps: Record<string, BeatsaverMap | { id: string }> = {};
+
+  const fetchMapFromCache = async (mapHash: string) => {
+    const cachedMap = await (
+      await Redis.client
+    ).get(`beatsaver:map:${mapHash}`);
+    return cachedMap;
+  };
+
+  const fetchAndCacheMap = async (mapHash: string) => {
+    const beatSaverMap = await BeatsaverAPI.fetchMapByHash(mapHash);
+
+    if (beatSaverMap) {
+      addMap(mapHash, beatSaverMap);
+      await cacheMap(mapHash, beatSaverMap);
+    }
+  };
+
+  const cacheMap = async (mapHash: string, map: BeatsaverMap) => {
+    await (
+      await Redis.client
+    ).set(
+      `beatsaver:map:${mapHash}`,
+      JSON.stringify(idOnly ? { id: map.id } : map),
+      "EX",
+      60 * 60 * 24 * 7,
+    );
+  };
+
+  const addMap = (mapHash: string, map: any) => {
+    maps[mapHash] = idOnly ? { id: map.id } : map;
+  };
+
+  for (const mapHash of toFetch) {
+    const map = await fetchMapFromCache(mapHash);
+    if (map !== null) {
+      const json = JSON.parse(map);
+      addMap(mapHash, json);
+      totalInCache++;
+    }
+  }
+
+  if (totalInCache === 0 && toFetch.length > 1) {
+    const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...toFetch);
+    if (beatSaverMaps) {
+      for (const mapHash of toFetch) {
+        const beatSaverMap = beatSaverMaps[mapHash.toLowerCase()];
+
+        if (beatSaverMap) {
+          await cacheMap(mapHash, beatSaverMap);
+          addMap(mapHash, beatSaverMap);
+        }
+      }
+    }
+  } else {
+    for (const mapHash of toFetch) {
+      if (!maps[mapHash]) {
+        await fetchAndCacheMap(mapHash);
+      }
+    }
+  }
+
+  return new Response(
+    JSON.stringify({
+      maps,
+      totalInCache,
+    }),
+    {
+      headers: { "content-type": "application/json;charset=UTF-8" },
+    },
+  );
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,30 +1,33 @@
 import AppProvider from "@/components/AppProvider";
-import { ssrSettings } from "@/ssrSettings";
+import { ThemeProvider } from "@/components/ui/theme-provider";
+import ssrSettings from "@/ssrSettings.json";
 import clsx from "clsx";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import Script from "next/script";
+
 import "react-toastify/dist/ReactToastify.css";
 import "./globals.css";

 const font = Inter({ subsets: ["latin-ext"], weight: "500" });

-// TODO: use type when NextJS fixes the type:
-// export const viewport: Viewport = {
-export const viewport: any = {
+export const viewport: Viewport = {
  themeColor: "#3B82F6",
 };

 export const metadata: Metadata = {
  metadataBase: new URL(ssrSettings.siteUrl),
  title: {
-    template: ssrSettings.siteName + " - %s",
+    template: ssrSettings.siteNameShort + " - %s",
    default: ssrSettings.siteName,
  },
  description: ssrSettings.description,
  keywords:
-    "scoresaber, score saber, scoresaber stats, score saber stats, beatleader, beat leader, " +
-    "scoresaber reloaded, ssr, github, score aggregation, scoresaber api, score saber api, scoresaber api",
+    "scoresaber, score saber, scoresaber stats, score saber stats, beatleader, beat leader," +
+    "scoresaber reloaded, ssr, github, score aggregation, scoresaber api, score saber api, scoresaber api," +
+    "BeatSaber, Overlay, OBS, Twitch, YouTube, BeatSaber Overlay, Github, Beat Saber overlay, ScoreSaber, BeatLeader," +
+    "VR gaming, Twitch stream enhancement, Customizable overlay, Real-time scores, Rankings, Leaderboard information," +
+    "Stream enhancement, Professional overlay, Easy to use overlay builder.",
  openGraph: {
    title: ssrSettings.siteName,
    description: ssrSettings.description,
@ -43,13 +46,20 @@ export default function RootLayout({
    <html lang="en">
      <Script
        id="plausible"
-        defer
        data-domain="ssr.fascinated.cc"
        src="https://analytics.fascinated.cc/js/script.js"
+        defer
      />

      <body className={clsx(font.className, "text-primary")}>
+        <ThemeProvider
+          storageKey="ssr-theme"
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+        >
          <AppProvider>{children}</AppProvider>
+        </ThemeProvider>
      </body>
    </html>
  );
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@ -4,7 +4,10 @@ import Container from "@/components/Container";
 export default async function NotFound() {
  return (
    <Container>
-      <Card className="flex h-full items-center justify-center">
+      <Card
+        outerClassName="mt-2"
+        className="flex h-full flex-col items-center justify-center"
+      >
        <p className="text-xl font-bold text-red-500">404 Not Found</p>
        <p className="text-lg text-gray-300">
          The page you requested does not exist.
--- a/src/app/overlay/builder/page.tsx
+++ b/src/app/overlay/builder/page.tsx
@ -10,13 +10,14 @@ import { Label } from "@/components/ui/label";
 import { useOverlaySettingsStore } from "@/store/overlaySettingsStore";
 import useStore from "@/utils/useStore";
 import Link from "next/link";
+import { toast } from "react-toastify";

 /**
 * Opens the overlay with the current settings
 *
 * @param settings the settings to pass to the overlay
 */
-function goToOverlay(settings: any) {
+function openOverlay(settings: any) {
  window.open(`/overlay?data=${JSON.stringify(settings)}`, "_blank");
 }

@ -79,10 +80,10 @@ export default function Analytics() {
                  id: "scoresaber",
                  value: "ScoreSaber",
                },
-                // {
-                //   id: "beatleader",
-                //   value: "BeatLeader",
-                // },
+                {
+                  id: "beatleader",
+                  value: "BeatLeader",
+                },
              ]}
              onChange={(value) => {
                settingsStore.setPlatform(value);
@ -120,7 +121,15 @@ export default function Analytics() {
            <Button
              className="mt-3"
              onClick={() => {
-                goToOverlay(settingsStore);
+                if (!settingsStore.ipAddress) {
+                  toast.error("No IP Address provided");
+                  return;
+                }
+                if (!settingsStore.accountId) {
+                  toast.error("No Account ID provided");
+                  return;
+                }
+                openOverlay(settingsStore);
              }}
            >
              Open Overlay
--- a/src/app/overlay/page.tsx
+++ b/src/app/overlay/page.tsx
@ -1,13 +1,12 @@
 "use client";

-import Container from "@/components/Container";
 import Spinner from "@/components/Spinner";
 import PlayerStats from "@/components/overlay/PlayerStats";
 import ScoreStats from "@/components/overlay/ScoreStats";
 import SongInfo from "@/components/overlay/SongInfo";
-import { Card, CardDescription, CardTitle } from "@/components/ui/card";
-import { HttpSiraStatus } from "@/overlay/httpSiraStatus";
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { HttpSiraStatus } from "@/lib/overlay/httpSiraStatus";
+import { OverlayPlayer } from "@/lib/overlay/type/overlayPlayer";
+import { BeatLeaderAPI } from "@/utils/beatleader/api";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Component } from "react";

@ -17,8 +16,8 @@ interface OverlayProps {}

 interface OverlayState {
  mounted: boolean;
-  player: ScoresaberPlayer | undefined;
-  settings: any | undefined;
+  player: OverlayPlayer | undefined;
+  config: any | undefined;
 }

 export default class Overlay extends Component<OverlayProps, OverlayState> {
@ -27,17 +26,48 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
    this.state = {
      mounted: false,
      player: undefined,
-      settings: undefined,
+      config: undefined,
    };
  }

-  updatePlayer = async (playerId: string) => {
+  updatePlayer = async (
+    playerId: string,
+    leaderboard: "scoresaber" | "beatleader" = "scoresaber",
+  ) => {
    console.log(`Updating player stats for ${playerId}`);
+    if (leaderboard == "scoresaber") {
      const player = await ScoreSaberAPI.fetchPlayerData(playerId);
      if (!player) {
        return;
      }
-    this.setState({ player });
+      this.setState({
+        player: {
+          id: player.id,
+          profilePicture: player.profilePicture,
+          country: player.country,
+          pp: player.pp,
+          rank: player.rank,
+          countryRank: player.countryRank,
+        },
+      });
+    }
+
+    if (leaderboard == "beatleader") {
+      const player = await BeatLeaderAPI.fetchPlayerData(playerId);
+      if (!player) {
+        return;
+      }
+      this.setState({
+        player: {
+          id: player.id,
+          profilePicture: player.avatar,
+          country: player.country,
+          pp: player.pp,
+          rank: player.rank,
+          countryRank: player.countryRank,
+        },
+      });
+    }
  };

  componentDidMount() {
@ -45,9 +75,6 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
      return;
    }
    this.setState({ mounted: true });
-    if (!this.state.mounted) {
-      HttpSiraStatus.connectWebSocket();
-    }

    const url = new URL(window.location.href);
    const searchParams = url.searchParams;
@ -56,24 +83,33 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
    if (!data) {
      return;
    }
-    const settings = JSON.parse(data);
-    this.setState({ settings: settings });
+    const config = JSON.parse(data);
+    this.setState({ config: config });
+    const settings = config.settings;

-    if (settings.settings.showPlayerStats) {
-      this.updatePlayer(settings.accountId);
+    if (settings.showPlayerStats) {
+      this.updatePlayer(config.accountId, config.platform);
      setInterval(() => {
-        this.updatePlayer(settings.accountId);
+        this.updatePlayer(config.accountId, config.platform);
      }, UPDATE_INTERVAL);
    }
+
+    if (settings.showScoreStats || settings.showSongInfo) {
+      HttpSiraStatus.connectWebSocket();
+    }
  }

  render() {
-    const { player } = this.state;
+    const { player, config, mounted } = this.state;

-    if (
-      !this.state.mounted ||
-      (!player && this.state.settings.settings.showPlayerStats)
-    ) {
+    // Redirect to builder if no config is set
+    if (mounted && !config) {
+      window.location.href = "/overlay/builder";
+      return null;
+    }
+
+    // Show loading screen if player stats are enabled and not loaded yet
+    if (!mounted || (!player && config.settings.showPlayerStats)) {
      return (
        <main className="flex items-center !bg-transparent p-3">
          <Spinner />
@ -82,42 +118,16 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
      );
    }

-    if (!this.state.settings) {
-      return (
-        <main>
-          <Container>
-            <Card className="mt-2 p-3">
-              <CardTitle>Overlay</CardTitle>
-              <CardDescription className="mt-2">
-                <p>
-                  This page is meant to be used as an overlay for streaming.
-                </p>
-                <p>
-                  To generate an overlay, go to the builder{" "}
-                  <a
-                    className="transform-gpu text-pp-blue transition-all hover:opacity-80"
-                    href="/overlay/builder"
-                  >
-                    here
-                  </a>
-                  .
-                </p>
-              </CardDescription>
-            </Card>
-          </Container>
-        </main>
-      );
-    }
-
+    // The overlay
    return (
      <main>
        <div>
-          {this.state.settings.settings.showPlayerStats && player && (
-            <PlayerStats player={player} />
+          {config.settings.showPlayerStats && player && (
+            <PlayerStats player={player} config={config} />
          )}
-          {this.state.settings.settings.showScoreStats && <ScoreStats />}
+          {config.settings.showScoreStats && <ScoreStats />}
        </div>
-        {this.state.settings.settings.showSongInfo && (
+        {config.settings.showSongInfo && (
          <div className="absolute bottom-0 left-0">
            <SongInfo />
          </div>
--- a/src/app/player/[id]/[sort]/[page]/page.tsx
+++ b/src/app/player/[id]/[sort]/[page]/page.tsx
@ -1,9 +1,23 @@
-import PlayerPage from "@/components/player/PlayerPage";
-import { ssrSettings } from "@/ssrSettings";
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import PlayerChart from "@/components/player/PlayerChart";
+import PlayerInfo from "@/components/player/PlayerInfo";
+import Scores from "@/components/player/Scores";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import ssrSettings from "@/ssrSettings.json";
+import { SortTypes } from "@/types/SortTypes";
 import { formatNumber } from "@/utils/numberUtils";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
+import clsx from "clsx";
 import { Metadata } from "next";
+import Image from "next/image";
+
+const DEFAULT_SORT_TYPE = SortTypes.top;

 type Props = {
  params: { id: string; sort: string; page: string };
@ -47,6 +61,85 @@ export async function generateMetadata({
  };
 }

-export default function Player({ params: { id, sort, page } }: Props) {
-  return <PlayerPage id={id} sort={sort} page={page} />;
+/**
+ * Gets the player's data on the server side.
+ *
+ * @param id the player's id
+ * @returns the player's data
+ */
+async function getData(id: string, page: number, sort: string) {
+  const playerData = await ScoreSaberAPI.fetchPlayerData(id);
+  const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
+  return {
+    playerData: playerData,
+    playerScores: playerScores,
+  };
+}
+
+export default async function Player({ params: { id, sort, page } }: Props) {
+  const { playerData: player, playerScores } = await getData(
+    id,
+    Number(page),
+    sort,
+  );
+  if (!player) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2">
+            <h1 className="text-2xl font-bold">Player not found</h1>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
+  const badges = player.badges;
+
+  return (
+    <main>
+      <Container>
+        <PlayerInfo playerData={player} />
+        {/* Chart */}
+        <Card outerClassName="mt-2 min-h-[320px]">
+          {/* Badges */}
+          <div
+            className={clsx(
+              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
+              badges.length > 0 ? "block" : "hidden",
+            )}
+          >
+            {badges.map((badge) => {
+              return (
+                <Tooltip key={badge.image}>
+                  <TooltipTrigger>
+                    <Image
+                      src={badge.image}
+                      alt={badge.description}
+                      width={80}
+                      height={30}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{badge.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+          <div className="h-[320px] w-full">
+            <PlayerChart scoresaber={player} />
+          </div>
+        </Card>
+        <Scores
+          initalScores={playerScores?.scores}
+          initalPage={Number(page)}
+          initalSortType={sortType}
+          initalTotalPages={playerScores?.pageInfo.totalPages}
+          playerData={player}
+        />
+      </Container>
+    </main>
+  );
 }
--- a/src/app/ranking/country/[country]/[page]/page.tsx
+++ b/src/app/ranking/country/[country]/[page]/page.tsx
@ -1,4 +1,8 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
 import GlobalRanking from "@/components/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Metadata } from "next";

 export const metadata: Metadata = {
@ -9,6 +13,43 @@ type Props = {
  params: { page: string; country: string };
 };

-export default function RankingGlobal({ params: { page, country } }: Props) {
-  return <GlobalRanking page={Number(page)} country={country} />;
+async function getData(page: number, country: string) {
+  const response = await ScoreSaberAPI.fetchTopPlayers(page, country);
+  return {
+    data: response,
+  };
+}
+
+export default async function RankingGlobal({
+  params: { page, country },
+}: Props) {
+  const { data } = await getData(Number(page), country);
+  if (!data) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2" className="mt-2">
+            <div className="p-3 text-center">
+              <div role="status">
+                <div className="flex flex-col items-center justify-center gap-2">
+                  <Error errorMessage="Unable to find this page or country" />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  return (
+    <GlobalRanking
+      pageInfo={{
+        page: Number(page),
+        totalPages: data.pageInfo.totalPages,
+      }}
+      players={data.players}
+      country={country}
+    />
+  );
 }
--- a/src/app/ranking/global/[page]/page.tsx
+++ b/src/app/ranking/global/[page]/page.tsx
@ -1,4 +1,8 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
 import GlobalRanking from "@/components/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Metadata } from "next";

 export const metadata: Metadata = {
@ -9,6 +13,40 @@ type Props = {
  params: { page: string };
 };

-export default function RankingGlobal({ params: { page } }: Props) {
-  return <GlobalRanking page={Number(page)} />;
+async function getData(page: number) {
+  const response = await ScoreSaberAPI.fetchTopPlayers(page);
+  return {
+    data: response,
+  };
+}
+
+export default async function RankingGlobal({ params: { page } }: Props) {
+  const { data } = await getData(Number(page));
+  if (!data) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2" className="mt-2">
+            <div className="p-3 text-center">
+              <div role="status">
+                <div className="flex flex-col items-center justify-center gap-2">
+                  <Error errorMessage="Unable to find this page" />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  return (
+    <GlobalRanking
+      pageInfo={{
+        page: Number(page),
+        totalPages: data.pageInfo.totalPages,
+      }}
+      players={data.players}
+    />
+  );
 }
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@ -19,8 +19,8 @@ export default function Home() {
        >
          <UnknownAvatar />

-          <p className="text-xl">Stranger</p>
-          <p className="text mt-2">Find a player profile</p>
+          <h1 className="text-xl">Search Player</h1>
+          <p className="text mt-2 text-gray-300">Find yourself or a friend</p>

          <SearchPlayer />
        </Card>
--- a/src/components/AppProvider.tsx
+++ b/src/components/AppProvider.tsx
@ -5,7 +5,6 @@ import { useSettingsStore } from "@/store/settingsStore";
 import React from "react";
 import { ToastContainer } from "react-toastify";
 import { TooltipProvider } from "./ui/Tooltip";
-import { ThemeProvider } from "./ui/theme-provider";

 const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes

@ -52,7 +51,6 @@ export default class AppProvider extends React.Component {
    const props: any = this.props;

    return (
-      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
      <TooltipProvider>
        <ToastContainer
          className="z-50"
@ -62,7 +60,6 @@ export default class AppProvider extends React.Component {
        />
        {props.children}
      </TooltipProvider>
-      </ThemeProvider>
    );
  }
 }
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@ -3,38 +3,38 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";

 interface ButtonProps {
  text?: JSX.Element | string;
-  url?: string;
  icon?: JSX.Element;
  color?: string;
  tooltip?: React.ReactNode;
  className?: string;
+  ariaLabel?: string;
  onClick?: () => void;
 }

 export default function Button({
  text,
-  url,
  icon,
  color,
  tooltip,
  className,
+  ariaLabel = "Default button label",
  onClick,
 }: ButtonProps) {
  if (!color) color = "bg-blue-500";

  const base = (
-    <a href={url} onClick={onClick}>
-      <p
+    <button
      className={clsx(
-          "font-md flex w-fit transform-gpu flex-row items-center gap-1 rounded-md p-1 transition-all hover:opacity-80",
-          className,
+        "flex items-center justify-center gap-2 rounded-md p-1",
        color,
+        className,
      )}
+      onClick={onClick}
+      aria-label={ariaLabel}
    >
      {icon}
      {text}
-      </p>
-    </a>
+    </button>
  );

  if (tooltip) {
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@ -14,7 +14,7 @@ export default function Card({
 }: CardProps) {
  return (
    <CardBase className={outerClassName}>
-      <CardContent className={clsx(className, "pb-4 pt-2")}>
+      <CardContent className={clsx(className, "p-3 pb-4 pt-2")}>
        {children}
      </CardContent>
    </CardBase>
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@ -1,6 +1,6 @@
 import Image from "next/image";
 import Footer from "./Footer";
-import Navbar from "./Navbar";
+import Navbar from "./navbar/Navbar";

 export default function Container({ children }: { children: React.ReactNode }) {
  return (
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -1,4 +1,4 @@
-import { ssrSettings } from "@/ssrSettings";
+import ssrSettings from "@/ssrSettings.json";
 import { isProduction } from "@/utils/utils";
 import Link from "next/link";
 import Card from "./Card";
@ -15,9 +15,14 @@ const buttons = [
 ];

 const buildId = process.env.NEXT_PUBLIC_BUILD_ID
-  ? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7) +
-    (isProduction() ? "" : "-dev")
+  ? isProduction()
+    ? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7)
+    : "dev"
  : "";
+const buildTime = process.env.NEXT_PUBLIC_BUILD_TIME;
+const gitUrl = isProduction()
+  ? `https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2/commit/${buildId}`
+  : "https://s.fascinated.cc/s/ssr-gitea";

 export default function Footer() {
  return (
@ -26,7 +31,7 @@ export default function Footer() {
        <div className="flex flex-col items-center gap-1 md:flex-row md:items-start md:gap-3">
          <a
            className="transform-gpu transition-all hover:text-blue-500"
-            href="https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2"
+            href="https://s.fascinated.cc/s/ssr-gitea"
          >
            {ssrSettings.siteName}
          </a>
@ -52,10 +57,10 @@ export default function Footer() {

        <Link
          className="transform-gpu text-sm text-gray-400 transition-all hover:opacity-80"
-          href={`https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2/commit/${buildId}`}
+          href={gitUrl}
          target="_blank"
        >
-          Build ID: {buildId}
+          Build ID: {buildId} ({buildTime})
        </Link>
      </Card>
    </footer>
--- a/src/components/GlobalRanking.tsx
+++ b/src/components/GlobalRanking.tsx
@ -1,122 +1,32 @@
 "use client";

 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
-import dynamic from "next/dynamic";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
 import Card from "./Card";
 import Container from "./Container";
 import CountyFlag from "./CountryFlag";
 import Pagination from "./Pagination";
-import Spinner from "./Spinner";
 import PlayerRanking from "./player/PlayerRanking";
-import PlayerRankingMobile from "./player/PlayerRankingMobile";
 import { Separator } from "./ui/separator";

-const Error = dynamic(() => import("@/components/Error"));
-
-type PageInfo = {
-  loading: boolean;
+type GlobalRankingProps = {
+  players: ScoresaberPlayer[];
+  country?: string;
+  pageInfo: {
    page: number;
    totalPages: number;
-  players: ScoresaberPlayer[];
+  };
 };

-type GlobalRankingProps = {
-  page: number;
-  country?: string;
-};
-
-export default function GlobalRanking({ page, country }: GlobalRankingProps) {
-  const router = useRouter();
-  const searchQuery = useSearchParams();
-  const isMobile = searchQuery.get("mobile") == "true";
-
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [pageInfo, setPageInfo] = useState<PageInfo>({
-    loading: true,
-    page: page,
-    totalPages: 1,
-    players: [],
-  });
-
-  const updatePage = useCallback(
-    (page: any) => {
-      const windowSize = document.documentElement.clientWidth;
-      if (windowSize < 768 && !isMobile) {
-        router.push(`/ranking/global/${page}?mobile=true`);
-        router.refresh();
-        return;
-      }
-
-      console.log("Switching page to", page);
-      ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
-        if (!response) {
-          setError(true);
-          setErrorMessage("No players found");
-          setPageInfo({ ...pageInfo, loading: false });
-          return;
-        }
-        setPageInfo({
-          ...pageInfo,
-          players: response.players,
-          totalPages: response.pageInfo.totalPages,
-          loading: false,
-          page: page,
-        });
-        window.history.pushState(
-          {},
-          "",
-          country
-            ? `/ranking/country/${country}/${page}`
-            : `/ranking/global/${page}`,
-        );
-      });
-    },
-    [country, isMobile, pageInfo, router],
-  );
-
-  useEffect(() => {
-    if (!pageInfo.loading || error) return;
-
-    updatePage(pageInfo.page);
-  }, [error, country, updatePage, pageInfo.page, pageInfo.loading]);
-
-  if (pageInfo.loading || error) {
+export default function GlobalRanking({
+  players,
+  country,
+  pageInfo,
+}: GlobalRankingProps) {
  return (
    <main>
      <Container>
        <Card outerClassName="mt-2" className="mt-2">
-            <div className="p-3 text-center">
-              <div role="status">
-                <div className="flex flex-col items-center justify-center gap-2">
-                  {error && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const players = pageInfo.players;
-
-  return (
-    <main>
-      <Container>
-        <Card outerClassName="mt-2" className="mt-2">
-          {pageInfo.loading ? (
-            <div className="flex justify-center">
-              <Spinner />
-            </div>
-          ) : (
          <div className="flex flex-col gap-2">
            <div className="flex items-center gap-2 p-2">
              {country && (
@ -125,14 +35,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
              <p>
                You are viewing{" "}
                {country
-                    ? "scores from " + normalizedRegionName(country)
+                  ? "scores from " + normalizedRegionName(country.toUpperCase())
                  : "Global scores"}
              </p>
            </div>

            <Separator />

-              {!isMobile && (
            <table className="table w-full table-auto border-spacing-2 border-none text-left">
              <thead>
                <tr>
@ -148,29 +57,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                {players.map((player) => (
                  <tr key={player.rank} className="border-b border-border">
                    <PlayerRanking
-                          showCountryFlag={country ? false : true}
+                      isCountry={country == undefined ? false : true}
                      player={player}
                    />
                  </tr>
                ))}
              </tbody>
            </table>
-              )}
-
-              {isMobile && (
-                <div className="flex flex-col gap-2">
-                  {players.map((player) => (
-                    <div
-                      key={player.rank}
-                      className="flex flex-col gap-2 rounded-md bg-background"
-                    >
-                      <Link href={`/player/${player.id}/top/1`}>
-                        <PlayerRankingMobile player={player} />
-                      </Link>
-                    </div>
-                  ))}
-                </div>
-              )}

            {/* Pagination */}
            <div className="flex w-full flex-row justify-center">
@ -178,14 +71,11 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                <Pagination
                  currentPage={pageInfo.page}
                  totalPages={pageInfo.totalPages}
-                    onPageChange={(page) => {
-                      updatePage(page);
-                    }}
+                  useHref
                />
              </div>
            </div>
          </div>
-          )}
        </Card>
      </Container>
    </main>
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@ -1,162 +0,0 @@
-"use client";
-
-import { useSettingsStore } from "@/store/settingsStore";
-import useStore from "@/utils/useStore";
-import {
-  CogIcon,
-  MagnifyingGlassIcon,
-  ServerIcon,
-  UserIcon,
-} from "@heroicons/react/20/solid";
-import { GlobeAltIcon, TvIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import Avatar from "./Avatar";
-import { Button } from "./ui/button";
-import { Card } from "./ui/card";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-
-interface ButtonProps {
-  text: string;
-  icon?: JSX.Element;
-  href?: string;
-  ariaLabel: string;
-}
-
-function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
-  return (
-    <a
-      aria-label={ariaLabel}
-      className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
-      href={href}
-    >
-      <>
-        {icon}
-        <p className="hidden md:block">{text}</p>
-      </>
-    </a>
-  );
-}
-
-function FriendsButton() {
-  const settingsStore = useStore(useSettingsStore, (state) => state);
-
-  return (
-    <Popover>
-      <PopoverTrigger>
-        <NavbarButton
-          ariaLabel="View your friends"
-          text="Friends"
-          icon={<UserIcon height={23} width={23} />}
-        />
-      </PopoverTrigger>
-      <PopoverContent className="p-2">
-        {settingsStore?.friends.length == 0 ? (
-          <div className="flex flex-col gap-2">
-            <div>
-              <p className="text-md font-bold">No friends</p>
-              <p className="text-sm text-gray-400">
-                Add new friends by clicking below
-              </p>
-            </div>
-
-            <Link href={"/search"}>
-              <Button className="w-full" size={"sm"}>
-                Search
-              </Button>
-            </Link>
-          </div>
-        ) : (
-          settingsStore?.friends.map((friend) => {
-            return (
-              <Link
-                key={friend.id}
-                href={`/player/${friend.id}/top/1`}
-                className="w-full"
-              >
-                <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
-                  <Avatar
-                    url={friend.profilePicture}
-                    label="Friend avatar"
-                    size={48}
-                  />
-                  <div>
-                    <p className="text-sm text-gray-400">#{friend.rank}</p>
-                    <p>{friend.name}</p>
-                  </div>
-                </div>
-              </Link>
-            );
-          })
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export default function Navbar() {
-  const settingsStore = useStore(useSettingsStore, (state) => state);
-
-  return (
-    <>
-      <Card className="flex h-fit w-full rounded-md">
-        {settingsStore !== undefined && settingsStore.player && (
-          <NavbarButton
-            ariaLabel="Your profile"
-            text="You"
-            icon={
-              <Avatar
-                url={settingsStore.player.profilePicture}
-                label="Your avatar"
-                size={23}
-              />
-            }
-            href={`/player/${settingsStore.player.id}/top/1`}
-          />
-        )}
-
-        <FriendsButton />
-        {/* TODO: fix hydration error? */}
-        {/* <Tooltip>
-          <TooltipTrigger>
-            <FriendsButton />
-          </TooltipTrigger>
-          <TooltipContent>Click to view your friends</TooltipContent>
-        </Tooltip> */}
-
-        <NavbarButton
-          ariaLabel="View the global ranking"
-          text="Ranking"
-          icon={<GlobeAltIcon height={23} width={23} />}
-          href="/ranking/global/1"
-        />
-        <NavbarButton
-          ariaLabel="View the overlay builder"
-          text="Overlay"
-          icon={<TvIcon height={23} width={23} />}
-          href="/overlay/builder"
-        />
-        <NavbarButton
-          ariaLabel="View analytics for Scoresaber"
-          text="Analytics"
-          icon={<ServerIcon height={23} width={23} />}
-          href="/analytics"
-        />
-
-        <div className="m-auto" />
-
-        <NavbarButton
-          ariaLabel="Search for a player"
-          text="Search"
-          icon={<MagnifyingGlassIcon height={23} width={23} />}
-          href="/search"
-        />
-        <NavbarButton
-          ariaLabel="View your settings"
-          text="Settings"
-          icon={<CogIcon height={23} width={23} />}
-          href="/settings"
-        />
-      </Card>
-    </>
-  );
-}
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@ -2,15 +2,17 @@ import {
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
 } from "@heroicons/react/20/solid";
+import Link from "next/link";

 type PaginationProps = {
  currentPage: number;
  totalPages: number;
-  onPageChange: (pageNumber: number) => void;
+  useHref?: boolean;
+  onPageChange?: (pageNumber: number) => void;
 };

 export default function Pagination(props: PaginationProps) {
-  const { currentPage, totalPages, onPageChange } = props;
+  const { currentPage, totalPages, useHref, onPageChange } = props;

  // Calculate the range of page numbers to display
  const rangeStart = Math.max(1, currentPage - 2);
@ -28,26 +30,48 @@ export default function Pagination(props: PaginationProps) {
        <ul className="flex items-center gap-2">
          {currentPage > 1 && (
            <li className="rounded-md bg-neutral-700 hover:opacity-80">
+              {useHref ? (
+                <Link href={`${currentPage - 1}`}>
+                  <p
+                    className="px-3 py-1"
+                    aria-label={`Page ${currentPage - 1} (previous page)`}
+                  >
+                    <ArrowUturnLeftIcon width={20} height={20} />
+                  </p>
+                </Link>
+              ) : (
                <button
                  className="px-3 py-1"
-                onClick={() => onPageChange(currentPage - 1)}
+                  onClick={() => onPageChange && onPageChange(currentPage - 1)}
                  aria-label={`Page ${currentPage - 1} (previous page)`}
                >
                  <ArrowUturnLeftIcon width={20} height={20} />
                </button>
+              )}
            </li>
          )}

          {currentPage !== 1 && currentPage - 2 > 1 && (
            <>
              <li>
+                {useHref ? (
+                  <Link href={`${1}`}>
+                    <p
+                      className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                      aria-label="Page 1 (first page)"
+                    >
+                      1
+                    </p>
+                  </Link>
+                ) : (
                  <button
                    className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
-                  onClick={() => onPageChange(1)}
+                    onClick={() => onPageChange && onPageChange(1)}
                    aria-label="Page 1 (first page)"
                  >
                    1
                  </button>
+                )}
              </li>
              <li>
                <p>...</p>
@ -57,17 +81,32 @@ export default function Pagination(props: PaginationProps) {

          {pageNumbers.map((pageNumber) => (
            <li key={pageNumber}>
+              {useHref ? (
+                <Link href={`${pageNumber}`}>
+                  <p
+                    className={`rounded-md px-3 py-1 ${
+                      pageNumber === currentPage
+                        ? "bg-blue-500 text-primary"
+                        : "bg-neutral-700 hover:opacity-80"
+                    }`}
+                    aria-label={`Page ${pageNumber}`}
+                  >
+                    {pageNumber}
+                  </p>
+                </Link>
+              ) : (
                <button
                  className={`rounded-md px-3 py-1 ${
                    pageNumber === currentPage
                      ? "bg-blue-500 text-primary"
                      : "bg-neutral-700 hover:opacity-80"
                  }`}
-                onClick={() => onPageChange(pageNumber)}
+                  onClick={() => onPageChange && onPageChange(pageNumber)}
                  aria-label={`Page ${pageNumber}`}
                >
                  {pageNumber}
                </button>
+              )}
            </li>
          ))}

@ -78,26 +117,48 @@ export default function Pagination(props: PaginationProps) {
              </li>

              <li>
+                {useHref ? (
+                  <Link href={`${totalPages}`}>
+                    <p
+                      className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                      aria-label={`Page ${totalPages} (last page)`}
+                    >
+                      {totalPages}
+                    </p>
+                  </Link>
+                ) : (
                  <button
                    className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
-                  onClick={() => onPageChange(totalPages)}
+                    onClick={() => onPageChange && onPageChange(totalPages)}
                    aria-label={`Page ${totalPages} (last page)`}
                  >
                    {totalPages}
                  </button>
+                )}
              </li>
            </>
          )}

          {currentPage < totalPages && (
            <li className="rounded-md bg-neutral-700 hover:opacity-80">
+              {useHref ? (
+                <Link href={`${currentPage + 1}`}>
+                  <p
+                    className="px-3 py-1"
+                    aria-label={`Page ${currentPage + 1} (next page)`}
+                  >
+                    <ArrowUturnRightIcon width={20} height={20} />
+                  </p>
+                </Link>
+              ) : (
                <button
                  className="px-3 py-1"
-                onClick={() => onPageChange(currentPage + 1)}
+                  onClick={() => onPageChange && onPageChange(currentPage + 1)}
                  aria-label={`Page ${currentPage + 1} (next page)`}
                >
                  <ArrowUturnRightIcon width={20} height={20} />
                </button>
+              )}
            </li>
          )}
        </ul>
--- a/src/components/SearchPlayer.tsx
+++ b/src/components/SearchPlayer.tsx
@ -5,12 +5,15 @@ import { formatNumber } from "@/utils/numberUtils";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import Avatar from "./Avatar";

 export default function SearchPlayer() {
  const [search, setSearch] = useState("");
-  const [players, setPlayers] = useState([] as ScoresaberPlayer[]);
+  const [players, setPlayers] = useState(
+    undefined as ScoresaberPlayer[] | undefined,
+  );

  useEffect(() => {
    // Don't search if the query is too short
@ -28,14 +31,20 @@ export default function SearchPlayer() {
      if (id == undefined) return;

      const player = await ScoreSaberAPI.fetchPlayerData(id);
-      if (player == undefined) return;
+      if (player == undefined) {
+        setPlayers([]);
+        return;
+      }

      setPlayers([player]);
    }

    // Search by name
    const players = await ScoreSaberAPI.searchByName(search);
-    if (players == undefined) return;
+    if (players == undefined) {
+      setPlayers([]);
+      return;
+    }

    setPlayers(players);
  }
@ -44,7 +53,7 @@ export default function SearchPlayer() {
    e.preventDefault();

    // Take the user to the first account
-    if (players.length > 0) {
+    if (players && players.length > 0) {
      window.location.href = `/player/${players[0].id}/top/1`;
    }
  }
@ -68,11 +77,12 @@ export default function SearchPlayer() {
      <div
        className={clsx(
          "absolute z-20 mt-7 flex max-h-[200px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-popover shadow-sm md:max-h-[300px]",
-          players.length > 0 ? "flex" : "hidden",
+          players ? "flex" : "hidden",
        )}
      >
-        {players.map((player: ScoresaberPlayer) => (
-          <a
+        {players && players.length > 0
+          ? players.map((player: ScoresaberPlayer) => (
+              <Link
                key={player.id}
                className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background"
                href={`/player/${player.id}/top/1`}
@ -85,8 +95,9 @@ export default function SearchPlayer() {
                  </p>
                  <p className="text-sm">{player.name}</p>
                </div>
-          </a>
-        ))}
+              </Link>
+            ))
+          : search.length > 0 && <div className="p-2">No players found</div>}
      </div>
    </form>
  );
--- a/src/components/icons/BeatSaverLogo.tsx
+++ b/src/components/icons/BeatSaverLogo.tsx
@ -16,14 +16,14 @@ export default function BeatSaverLogo({
      version="1.1"
      className={className}
    >
-      <g fill="none" stroke="#000000" stroke-width="10">
-        <path d="M 100,7 189,47 100,87 12,47 Z" stroke-linejoin="round"></path>
+      <g fill="none" stroke="#000000" strokeWidth="10">
+        <path d="M 100,7 189,47 100,87 12,47 Z" strokeLinejoin="round"></path>
        <path
          d="M 189,47 189,155 100,196 12,155 12,47"
-          stroke-linejoin="round"
+          strokeLinejoin="round"
        ></path>
-        <path d="M 100,87 100,196" stroke-linejoin="round"></path>
-        <path d="M 26,77 85,106 53,130 Z" stroke-linejoin="round"></path>
+        <path d="M 100,87 100,196" strokeLinejoin="round"></path>
+        <path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
      </g>
    </svg>
  );
--- a/src/components/icons/YouTubeLogo.tsx
+++ b/src/components/icons/YouTubeLogo.tsx
@ -0,0 +1,33 @@
+type YouTubeLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function YouTubeLogo({
+  size = 32,
+  className,
+}: YouTubeLogoProps) {
+  return (
+    <svg
+      height={size}
+      width={size}
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 461.001 461.001"
+      xmlSpace="preserve"
+      className={className}
+    >
+      <g>
+        <path
+          fill="#F61C0D"
+          d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
+		c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
+		C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
+		c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+        />
+      </g>
+    </svg>
+  );
+}
--- a/src/components/leaderboard/Leaderboard.tsx
+++ b/src/components/leaderboard/Leaderboard.tsx
@ -98,7 +98,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
    <Container>
      <div className="mt-2 flex flex-col gap-2 xl:flex-row">
        <Card outerClassName="h-fit pt-3" className="flex">
-          <div className="flex min-w-[320px] flex-wrap justify-between gap-2 md:justify-start">
+          <div className="flex min-w-[300px] flex-wrap justify-between gap-2 md:justify-start">
            <div className="flex gap-2">
              <Image
                src={coverImage}
@ -109,17 +109,19 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
              />
              <div className="flex flex-col">
                <p className="text-xl font-bold">{songName}</p>
-                <p className="text-lg">{songSubName}</p>
-                <p>Mapped By: {levelAuthorName}</p>
+                {/* <p className="text-lg">{songSubName}</p> */}
+                <p className="text-gray-400">{levelAuthorName}</p>
              </div>
            </div>
            <div className="flex flex-col gap-1">
              <p>Status: {ranked ? "Ranked" : "Unranked"}</p>
+              {ranked && (
                <div className="flex">
                  <p>Stars:</p>
                  <StarIcon width={20} height={20} className="ml-1" />
                  <p className="text-pp-blue">{stars}</p>
                </div>
+              )}
              <p>
                Plays: {formatNumber(plays)} ({dailyPlays} in the last day)
              </p>
--- a/src/components/navbar/FriendsButton.tsx
+++ b/src/components/navbar/FriendsButton.tsx
@ -0,0 +1,66 @@
+"use client";
+
+import { useSettingsStore } from "@/store/settingsStore";
+import useStore from "@/utils/useStore";
+import { UserIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import Avatar from "../Avatar";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import NavbarButton from "./NavbarButton";
+
+export default function FriendsButton() {
+  const settingsStore = useStore(useSettingsStore, (state) => state);
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <NavbarButton
+          ariaLabel="View your friends"
+          text="Friends"
+          icon={<UserIcon height={23} width={23} />}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="p-2">
+        {settingsStore?.friends.length == 0 ? (
+          <div className="flex flex-col gap-2">
+            <div>
+              <p className="text-md font-bold">No friends</p>
+              <p className="text-sm text-gray-400">
+                Add new friends by clicking below
+              </p>
+            </div>
+
+            <Link href={"/search"}>
+              <Button className="w-full" size={"sm"}>
+                Search
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          settingsStore?.friends.map((friend) => {
+            return (
+              <Link
+                key={friend.id}
+                href={`/player/${friend.id}/top/1`}
+                className="w-full"
+              >
+                <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
+                  <Avatar
+                    url={friend.profilePicture}
+                    label="Friend avatar"
+                    size={48}
+                  />
+                  <div>
+                    <p className="text-sm text-gray-400">#{friend.rank}</p>
+                    <p>{friend.name}</p>
+                  </div>
+                </div>
+              </Link>
+            );
+          })
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/src/components/navbar/Navbar.tsx
+++ b/src/components/navbar/Navbar.tsx
@ -0,0 +1,46 @@
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { GlobeAltIcon, TvIcon } from "@heroicons/react/24/outline";
+import { Card } from "../ui/card";
+import FriendsButton from "./FriendsButton";
+import NavbarButton from "./NavbarButton";
+import YouButton from "./YouButton";
+
+export default function Navbar() {
+  return (
+    <>
+      <Card className="flex h-fit w-full rounded-md">
+        <YouButton />
+
+        <FriendsButton />
+
+        <NavbarButton
+          ariaLabel="View the global ranking"
+          text="Ranking"
+          icon={<GlobeAltIcon height={23} width={23} />}
+          href="/ranking/global/1"
+        />
+        <NavbarButton
+          ariaLabel="View the overlay builder"
+          text="Overlay"
+          icon={<TvIcon height={23} width={23} />}
+          href="/overlay/builder"
+        />
+
+        <div className="m-auto" />
+
+        <NavbarButton
+          ariaLabel="Search for a player"
+          text="Search"
+          icon={<MagnifyingGlassIcon height={23} width={23} />}
+          href="/search"
+        />
+        {/* <NavbarButton
+          ariaLabel="View your settings"
+          text="Settings"
+          icon={<CogIcon height={23} width={23} />}
+          href="/settings"
+        /> */}
+      </Card>
+    </>
+  );
+}
--- a/src/components/navbar/NavbarButton.tsx
+++ b/src/components/navbar/NavbarButton.tsx
@ -0,0 +1,26 @@
+interface ButtonProps {
+  text: string;
+  icon?: JSX.Element;
+  href?: string;
+  ariaLabel: string;
+}
+
+export default function NavbarButton({
+  text,
+  icon,
+  href,
+  ariaLabel,
+}: ButtonProps) {
+  return (
+    <a
+      aria-label={ariaLabel}
+      className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
+      href={href}
+    >
+      <>
+        {icon}
+        <p className="hidden md:block">{text}</p>
+      </>
+    </a>
+  );
+}
--- a/src/components/navbar/YouButton.tsx
+++ b/src/components/navbar/YouButton.tsx
@ -0,0 +1,29 @@
+"use client";
+
+import { useSettingsStore } from "@/store/settingsStore";
+import { useStore } from "zustand";
+import Avatar from "../Avatar";
+import NavbarButton from "./NavbarButton";
+
+export default function YouButton() {
+  const settingsStore = useStore(useSettingsStore, (state) => state);
+
+  if (!settingsStore || !settingsStore.player) {
+    return null;
+  }
+
+  return (
+    <NavbarButton
+      ariaLabel="Your profile"
+      text="You"
+      icon={
+        <Avatar
+          url={settingsStore.player.profilePicture}
+          label="Your avatar"
+          size={23}
+        />
+      }
+      href={`/player/${settingsStore.player.id}/top/1`}
+    />
+  );
+}
--- a/src/components/overlay/PlayerStats.tsx
+++ b/src/components/overlay/PlayerStats.tsx
@ -1,25 +1,41 @@
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { OverlayPlayer } from "@/lib/overlay/type/overlayPlayer";
 import { formatNumber } from "@/utils/numberUtils";
 import { GlobeAltIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
 import CountyFlag from "../CountryFlag";

 type PlayerStatsProps = {
-  player: ScoresaberPlayer;
+  player: OverlayPlayer;
+  config: any;
 };

-export default function PlayerStats({ player }: PlayerStatsProps) {
+const leaderboardImages: Record<string, string> = {
+  scoresaber: "/assets/logos/scoresaber.png",
+  beatleader: "/assets/logos/beatleader.png",
+};
+
+export default function PlayerStats({ player, config }: PlayerStatsProps) {
  return (
    <div className="flex gap-2 p-2">
      <Image
        alt="Player profile picture"
-        className="rounded-md"
+        className="rounded-lg"
        src={player.profilePicture}
        width={180}
        height={180}
+        priority
      />
      <div>
-        <p className="text-3xl font-bold">{formatNumber(player.pp, 2)}pp</p>
+        <div className="flex gap-1">
+          <Image
+            alt="Leaderboard logo"
+            src={leaderboardImages[config.platform]}
+            width={36}
+            height={36}
+            priority
+          />
+          <p className="text-3xl">{formatNumber(player.pp, 2)}pp</p>
+        </div>
        <div className="flex items-center gap-2">
          <GlobeAltIcon width={25} height={25} />
          <p className="text-3xl">#{formatNumber(player.rank)}</p>
--- a/src/components/overlay/ScoreStats.tsx
+++ b/src/components/overlay/ScoreStats.tsx
@ -1,5 +1,6 @@
 import { useOverlayDataStore } from "@/store/overlayDataStore";
 import { formatNumber } from "@/utils/numberUtils";
+import { accuracyToColor } from "@/utils/songUtils";
 import useStore from "@/utils/useStore";

 export default function ScoreStats() {
@ -11,9 +12,16 @@ export default function ScoreStats() {
  return (
    <div className="flex flex-col pl-2">
      <p className="text-2xl font-bold">{formatNumber(scoreStats.score)}</p>
-      <p className="text-2xl">Combo: {formatNumber(scoreStats.combo)}x</p>
+      <p className="text-2xl">{formatNumber(scoreStats.combo)}x</p>
      <p className="text-2xl">
-        {scoreStats.rank} {scoreStats.accuracy.toFixed(2)}%
+        <span
+          style={{
+            color: accuracyToColor(scoreStats.accuracy),
+          }}
+        >
+          {scoreStats.accuracy == 100 ? "SS" : scoreStats.rank}
+        </span>{" "}
+        {scoreStats.accuracy.toFixed(2)}%
      </p>
    </div>
  );
--- a/src/components/overlay/SongInfo.tsx
+++ b/src/components/overlay/SongInfo.tsx
@ -14,31 +14,31 @@ export default function SongInfo() {
    <div
      className={clsx(
        "flex transform-gpu gap-2 p-2 transition-all",
-        paused ? "grayscale" : "grayscale-0",
+        paused ? "grayscale" : "grayscale-0", // make the song info grayscale when paused
      )}
    >
      <Image
-        className="rounded-md"
+        className="rounded-lg"
        alt="Song Image"
        src={songInfo.art}
-        width={120}
-        height={120}
+        width={140}
+        height={140}
      />
      <div className="flex flex-col justify-between pb-2 pt-1">
        <div>
-          <p className="text-xl font-bold">{songInfo.songName}</p>
-          <p className="text-md">{songInfo.songMapper}</p>
+          <p className="text-2xl font-bold">{songInfo.songName}</p>
+          <p className="text-2xl text-gray-300">{songInfo.songMapper}</p>
        </div>
        <div className="mt-1 flex items-center gap-2">
          <p
-            className="text-md rounded-md p-[3px]"
+            className="rounded-md p-[3px] text-xl"
            style={{
              backgroundColor: songDifficultyToColor(songInfo.difficulty),
            }}
          >
            {songInfo.difficulty}
          </p>
-          <p className="text-md">!bsr {songInfo.bsr}</p>
+          <p className="text-xl">!bsr {songInfo.bsr}</p>
        </div>
      </div>
    </div>
--- a/src/components/player/PlayerChart.tsx
+++ b/src/components/player/PlayerChart.tsx
@ -1,5 +1,9 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { formatNumber } from "@/utils/numberUtils";
+
+// chartjs
 import {
  CategoryScale,
  Chart as ChartJS,
--- a/src/components/player/PlayerInfo.tsx
+++ b/src/components/player/PlayerInfo.tsx
@ -1,113 +1,22 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
-import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/numberUtils";
-import { getAveragePp, getHighestPpPlay } from "@/utils/scoresaber/scores";
 import { normalizedRegionName } from "@/utils/utils";
-import {
-  GlobeAsiaAustraliaIcon,
-  HomeIcon,
-  UserIcon,
-  XMarkIcon,
-} from "@heroicons/react/20/solid";
+import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
 import dynamic from "next/dynamic";
-import { useRef } from "react";
-import { toast } from "react-toastify";
-import { useStore } from "zustand";
+import { Fragment, Suspense } from "react";
 import Avatar from "../Avatar";
-import Button from "../Button";
 import Card from "../Card";
 import CountyFlag from "../CountryFlag";
 import Label from "../Label";

-const PPGainLabel = dynamic(() => import("./PPGainLabel"));
+const PlayerInfoExtraLabels = dynamic(() => import("./PlayerInfoExtraLabels"));
+const PlayerSettingsButtons = dynamic(() => import("./PlayerSettingsButtons"));

 type PlayerInfoProps = {
  playerData: ScoresaberPlayer;
 };

 export default function PlayerInfo({ playerData }: PlayerInfoProps) {
-  const playerId = playerData.id;
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
-
-  // Whether we have scores for this player in the local database
-  const hasLocalScores = playerScoreStore?.exists(playerId);
-
-  const toastId: any = useRef(null);
-
-  async function claimProfile() {
-    settingsStore?.setProfile(playerData);
-    addProfile(false);
-  }
-
-  async function addFriend() {
-    const friend = await settingsStore?.addFriend(playerData.id);
-    if (!friend) {
-      toast.error(`Failed to add ${playerData.name} as a friend`);
-      return;
-    }
-    addProfile(true);
-  }
-
-  async function removeFriend() {
-    settingsStore?.removeFriend(playerData.id);
-
-    toast.success(`Successfully removed ${playerData.name} as a friend`);
-  }
-
-  async function addProfile(isFriend: boolean) {
-    if (!useScoresaberScoresStore.getState().exists(playerId)) {
-      if (!isFriend) {
-        toast.success(`Successfully set ${playerData.name} as your profile`);
-      } else {
-        toast.success(`Successfully added ${playerData.name} as a friend`);
-      }
-
-      const reponse = await playerScoreStore?.addOrUpdatePlayer(
-        playerId,
-        (page, totalPages) => {
-          const autoClose = page == totalPages ? 5000 : false;
-
-          if (page == 1) {
-            toastId.current = toast.info(
-              `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
-              {
-                autoClose: autoClose,
-                progress: page / totalPages,
-              },
-            );
-          } else {
-            if (page != totalPages) {
-              toast.update(toastId.current, {
-                progress: page / totalPages,
-                render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
-                autoClose: autoClose,
-              });
-            } else {
-              toast.update(toastId.current, {
-                progress: 0,
-                render: `Successfully fetched scores for ${playerData.name}`,
-                autoClose: autoClose,
-                type: "success",
-              });
-            }
-          }
-
-          console.log(
-            `Fetching scores for ${playerId} (${page}/${totalPages})`,
-          );
-        },
-      );
-      if (reponse?.error) {
-        toast.error("Failed to fetch scores");
-        console.log(reponse.message);
-        return;
-      }
-    }
-  }
-
-  const isOwnProfile = settingsStore.player?.id == playerId;
  const scoreStats = playerData.scoreStats;

  return (
@ -122,35 +31,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {

          {/* Settings Buttons */}
          <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
-            {!isOwnProfile && (
-              <Button
-                onClick={claimProfile}
-                tooltip={<p>Set as your Profile</p>}
-                icon={<HomeIcon width={24} height={24} />}
-              />
-            )}
-
-            {!isOwnProfile && (
-              <>
-                {!settingsStore?.isFriend(playerId) && (
-                  <Button
-                    onClick={addFriend}
-                    tooltip={<p>Add as Friend</p>}
-                    icon={<UserIcon width={24} height={24} />}
-                    color="bg-green-500"
-                  />
-                )}
-
-                {settingsStore.isFriend(playerId) && (
-                  <Button
-                    onClick={removeFriend}
-                    tooltip={<p>Remove Friend</p>}
-                    icon={<XMarkIcon width={24} height={24} />}
-                    color="bg-red-500"
-                  />
-                )}
-              </>
-            )}
+            <Fragment>
+              <Suspense>
+                <PlayerSettingsButtons playerData={playerData} />
+              </Suspense>
+            </Fragment>
          </div>
        </div>

@ -165,7 +50,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {

              <a
                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/global/${Math.round(playerData.rank / 50)}`}
+                href={`/ranking/global/${Math.max(
+                  Math.round(playerData.rank / 50),
+                  1,
+                )}`}
              >
                <p>#{formatNumber(playerData.rank)}</p>
              </a>
@ -175,8 +63,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
            <div className="text-gray-300">
              <a
                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/country/${playerData.country}/${Math.round(
-                  playerData.countryRank / 50,
+                href={`/ranking/country/${playerData.country}/${Math.max(
+                  Math.round(playerData.countryRank / 50),
+                  1,
                )}`}
              >
                <CountyFlag
@ -243,30 +132,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
              value={formatNumber(scoreStats.replaysWatched)}
            />

-            {hasLocalScores && (
-              <>
-                <Label
-                  title="Top PP"
-                  className="bg-pp-blue"
-                  tooltip={<p>Their highest pp play</p>}
-                  value={`${formatNumber(
-                    getHighestPpPlay(playerId)?.toFixed(2),
-                  )}pp`}
-                />
-                <Label
-                  title="Avg PP"
-                  className="bg-pp-blue"
-                  tooltip={
-                    <p>Average amount of pp per play (best 50 scores)</p>
-                  }
-                  value={`${formatNumber(
-                    getAveragePp(playerId)?.toFixed(2),
-                  )}pp`}
-                />
-
-                <PPGainLabel playerId={playerId} />
-              </>
-            )}
+            <Fragment>
+              <Suspense>
+                <PlayerInfoExtraLabels playerId={playerData.id} />
+              </Suspense>
+            </Fragment>
          </div>
        </div>
      </div>
--- a/src/components/player/PlayerInfoExtraLabels.tsx
+++ b/src/components/player/PlayerInfoExtraLabels.tsx
@ -0,0 +1,42 @@
+"use client";
+
+import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
+import { formatNumber } from "@/utils/numberUtils";
+import { getAveragePp, getHighestPpPlay } from "@/utils/scoresaber/scores";
+import { useStore } from "zustand";
+import Label from "../Label";
+import PPGainLabel from "./PPGainLabel";
+
+type PlayerInfoExtraLabelsProps = {
+  playerId: string;
+};
+
+export default function PlayerInfoExtraLabels({
+  playerId,
+}: PlayerInfoExtraLabelsProps) {
+  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
+  const hasLocalScores = playerScoreStore.exists(playerId);
+
+  if (!hasLocalScores) {
+    return null;
+  }
+
+  return (
+    <>
+      <Label
+        title="Top PP"
+        className="bg-pp-blue"
+        tooltip={<p>Their highest pp play</p>}
+        value={`${formatNumber(getHighestPpPlay(playerId)?.toFixed(2))}pp`}
+      />
+      <Label
+        title="Avg PP"
+        className="bg-pp-blue"
+        tooltip={<p>Average amount of pp per play (best 50 scores)</p>}
+        value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
+      />
+
+      <PPGainLabel playerId={playerId} />
+    </>
+  );
+}
--- a/src/components/player/PlayerPage.tsx
+++ b/src/components/player/PlayerPage.tsx
@ -1,131 +0,0 @@
-"use client";
-
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Spinner from "@/components/Spinner";
-import Scores from "@/components/player/Scores";
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { SortTypes } from "@/types/SortTypes";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import clsx from "clsx";
-import dynamic from "next/dynamic";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
-import PlayerChart from "./PlayerChart";
-import PlayerInfo from "./PlayerInfo";
-
-const Error = dynamic(() => import("@/components/Error"));
-
-type PlayerInfo = {
-  loading: boolean;
-  player: ScoresaberPlayer | undefined;
-};
-
-type PlayerPageProps = {
-  id: string;
-  sort: string;
-  page: string;
-};
-
-const DEFAULT_SORT_TYPE = SortTypes.top;
-
-export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
-  const [mounted, setMounted] = useState(false);
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [player, setPlayer] = useState<PlayerInfo>({
-    loading: true,
-    player: undefined,
-  });
-
-  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
-
-  useEffect(() => {
-    setMounted(true);
-    if (error || !player.loading) {
-      return;
-    }
-
-    if (mounted == true) {
-      return;
-    }
-
-    ScoreSaberAPI.fetchPlayerData(id).then((playerResponse) => {
-      if (!playerResponse) {
-        setError(true);
-        setErrorMessage("Failed to fetch player. Is the ID correct?");
-        setPlayer({ ...player, loading: false });
-        return;
-      }
-      setPlayer({ ...player, player: playerResponse, loading: false });
-    });
-  }, [error, mounted, id, player]);
-
-  if (player.loading || error || !player.player) {
-    return (
-      <main>
-        <Container>
-          <Card outerClassName="mt-2" className="mt-2">
-            <div className="p-3 text-center">
-              <div role="status">
-                <div className="flex flex-col items-center justify-center gap-2">
-                  {error && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const playerData = player.player;
-  const badges = playerData.badges;
-
-  return (
-    <main>
-      <Container>
-        <PlayerInfo playerData={playerData} />
-        {/* Chart */}
-        <Card outerClassName="mt-2">
-          {/* Badges */}
-          <div
-            className={clsx(
-              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
-              badges.length > 0 ? "block" : "hidden",
-            )}
-          >
-            {badges.map((badge) => {
-              return (
-                <Tooltip key={badge.image}>
-                  <TooltipTrigger>
-                    <Image
-                      src={badge.image}
-                      alt={badge.description}
-                      width={80}
-                      height={30}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{badge.description}</p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </div>
-          <div className="h-[320px] w-full">
-            <PlayerChart scoresaber={playerData} />
-          </div>
-        </Card>
-        <Scores
-          playerData={playerData}
-          page={Number(page)}
-          sortType={sortType}
-        />
-      </Container>
-    </main>
-  );
-}
--- a/src/components/player/PlayerRanking.tsx
+++ b/src/components/player/PlayerRanking.tsx
@ -8,25 +8,26 @@ import CountyFlag from "../CountryFlag";

 type PlayerRankingProps = {
  player: ScoresaberPlayer;
-  showCountryFlag?: boolean;
+  isCountry?: boolean;
 };

 const Avatar = dynamic(() => import("@/components/Avatar"));

 export default function PlayerRanking({
  player,
-  showCountryFlag,
+  isCountry,
 }: PlayerRankingProps) {
  const settingsStore = useStore(useSettingsStore, (store) => store);

  return (
    <>
-      <td className="px-4 py-2">#{formatNumber(player.rank)}</td>
+      <td className="px-4 py-2">
+        #{formatNumber(isCountry ? player.countryRank : player.rank)}{" "}
+        <span className="text-sm">{isCountry && "(#" + player.rank + ")"}</span>
+      </td>
      <td className="flex items-center gap-2 px-4 py-2">
        <Avatar url={player.profilePicture} label="Avatar" size={24} />
-        {showCountryFlag && (
        <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
-        )}
        <Link
          className="transform-gpu transition-all hover:text-blue-500"
          href={`/player/${player.id}/top/1`}
--- a/src/components/player/PlayerRankingMobile.tsx
+++ b/src/components/player/PlayerRankingMobile.tsx
@ -1,54 +0,0 @@
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useSettingsStore } from "@/store/settingsStore";
-import { formatNumber } from "@/utils/numberUtils";
-import { useStore } from "zustand";
-import Avatar from "../Avatar";
-import CountyFlag from "../CountryFlag";
-import Label from "../Label";
-
-type PlayerRankingProps = {
-  player: ScoresaberPlayer;
-  showCountryFlag?: boolean;
-};
-
-export default function PlayerRankingMobile({
-  player,
-  showCountryFlag = true,
-}: PlayerRankingProps) {
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-
-  return (
-    <div>
-      <div className="m-3 flex flex-col gap-2">
-        <p className="flex items-center gap-2">
-          <p>#{formatNumber(player.rank)}</p>
-          <Avatar url={player.profilePicture} label="Avatar" size={24} />
-          {showCountryFlag && (
-            <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
-          )}
-          <p
-            className={
-              player.id == settingsStore.player?.id
-                ? "transform-gpu text-red-500 transition-all hover:text-blue-500"
-                : ""
-            }
-          >
-            {player.name}
-          </p>
-        </p>
-        <div className="flex flex-wrap justify-center gap-2">
-          <Label
-            title="PP"
-            tooltip={<p>The total amount of pp this player has</p>}
-            value={`${formatNumber(player.pp)}`}
-          />
-          <Label
-            title="Total play count"
-            tooltip={<p>The total amount of plays this player has</p>}
-            value={formatNumber(player.scoreStats.totalPlayCount)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/components/player/PlayerSettingsButtons.tsx
+++ b/src/components/player/PlayerSettingsButtons.tsx
@ -0,0 +1,137 @@
+"use client";
+
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
+import { useSettingsStore } from "@/store/settingsStore";
+import { HomeIcon, UserIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import { useStore } from "zustand";
+import Button from "../Button";
+
+type PlayerSettingsButtonsProps = {
+  playerData: ScoresaberPlayer;
+};
+
+export default function PlayerSettingsButtons({
+  playerData,
+}: PlayerSettingsButtonsProps) {
+  const [mounted, setMounted] = useState(false);
+  const playerId = playerData.id;
+
+  const settingsStore = useStore(useSettingsStore, (store) => store);
+  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
+
+  const isOwnProfile = settingsStore.player?.id == playerId;
+  const toastId: any = useRef(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted || isOwnProfile) {
+    return null;
+  }
+
+  async function claimProfile() {
+    settingsStore?.setProfile(playerData);
+    addProfile(false);
+  }
+
+  async function addFriend() {
+    const friend = await settingsStore?.addFriend(playerData.id);
+    if (!friend) {
+      toast.error(`Failed to add ${playerData.name} as a friend`);
+      return;
+    }
+    addProfile(true);
+  }
+
+  async function removeFriend() {
+    settingsStore?.removeFriend(playerData.id);
+
+    toast.success(`Successfully removed ${playerData.name} as a friend`);
+  }
+
+  async function addProfile(isFriend: boolean) {
+    if (!useScoresaberScoresStore.getState().exists(playerId)) {
+      if (!isFriend) {
+        toast.success(`Successfully set ${playerData.name} as your profile`);
+      } else {
+        toast.success(`Successfully added ${playerData.name} as a friend`);
+      }
+
+      const reponse = await playerScoreStore?.addOrUpdatePlayer(
+        playerId,
+        (page, totalPages) => {
+          const autoClose = page == totalPages ? 5000 : false;
+
+          if (page == 1) {
+            toastId.current = toast.info(
+              `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
+              {
+                autoClose: autoClose,
+                progress: page / totalPages,
+              },
+            );
+          } else {
+            if (page != totalPages) {
+              toast.update(toastId.current, {
+                progress: page / totalPages,
+                render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
+                autoClose: autoClose,
+              });
+            } else {
+              toast.update(toastId.current, {
+                progress: 0,
+                render: `Successfully fetched scores for ${playerData.name}`,
+                autoClose: autoClose,
+                type: "success",
+              });
+            }
+          }
+
+          console.log(
+            `Fetching scores for ${playerId} (${page}/${totalPages})`,
+          );
+        },
+      );
+      if (reponse?.error) {
+        toast.error("Failed to fetch scores");
+        console.log(reponse.message);
+        return;
+      }
+    }
+  }
+
+  return (
+    <>
+      <Button
+        onClick={claimProfile}
+        tooltip={<p>Set as your Profile</p>}
+        icon={<HomeIcon width={24} height={24} />}
+        ariaLabel="Set as your Profile"
+      />
+
+      {!settingsStore?.isFriend(playerId) && (
+        <Button
+          onClick={addFriend}
+          tooltip={<p>Add as Friend</p>}
+          icon={<UserIcon width={24} height={24} />}
+          color="bg-green-500"
+          ariaLabel="Add Friend"
+        />
+      )}
+
+      {settingsStore.isFriend(playerId) && (
+        <Button
+          onClick={removeFriend}
+          tooltip={<p>Remove Friend</p>}
+          icon={<XMarkIcon width={24} height={24} />}
+          color="bg-red-500"
+          ariaLabel="Remove Friend"
+        />
+      )}
+    </>
+  );
+}
--- a/src/components/player/Scores.tsx
+++ b/src/components/player/Scores.tsx
@ -1,33 +1,39 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
-import dynamic from "next/dynamic";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
 import Error from "../Error";
 import Pagination from "../Pagination";
-import Score from "./Score";
-
-const Spinner = dynamic(() => import("@/components/Spinner"));
+import Score from "./score/Score";

 type PageInfo = {
-  loading: boolean;
  page: number;
  totalPages: number;
  sortType: SortType;
-  scores: ScoresaberPlayerScore[];
+  scores: ScoresaberPlayerScore[] | undefined;
 };

 type ScoresProps = {
+  initalScores: ScoresaberPlayerScore[] | undefined;
+  initalPage: number;
+  initalSortType: SortType;
+  initalTotalPages?: number;
  playerData: ScoresaberPlayer;
-  page: number;
-  sortType: SortType;
 };

-export default function Scores({ playerData, page, sortType }: ScoresProps) {
+export default function Scores({
+  initalScores,
+  initalPage,
+  initalSortType,
+  initalTotalPages,
+  playerData,
+}: ScoresProps) {
  const settingsStore = useStore(useSettingsStore, (store) => store);
  const playerId = playerData.id;

@ -36,28 +42,37 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
  const [errorMessage, setErrorMessage] = useState("");

  const [scores, setScores] = useState<PageInfo>({
-    loading: true,
-    page: page,
-    totalPages: 1,
-    sortType: sortType,
-    scores: [],
+    page: initalPage,
+    totalPages: initalTotalPages || 1,
+    sortType: initalSortType,
+    scores: initalScores,
  });
+  const [changedPage, setChangedPage] = useState(false);

  const updateScoresPage = useCallback(
    (sortType: SortType, page: any) => {
+      if (
+        page == initalPage &&
+        sortType == initalSortType &&
+        initalScores &&
+        !changedPage
+      ) {
+        console.log("Already loaded scores, not fetching");
+        return;
+      }
+
      ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
        (scoresResponse) => {
          if (!scoresResponse) {
            setError(true);
            setErrorMessage("No Scores");
-            setScores({ ...scores, loading: false });
+            setScores({ ...scores });
            return;
          }
          setScores({
            ...scores,
            scores: scoresResponse.scores,
            totalPages: scoresResponse.pageInfo.totalPages,
-            loading: false,
            page: page,
            sortType: sortType,
          });
@ -67,12 +82,21 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
            "",
            `/player/${playerId}/${sortType.value}/${page}`,
          );
+          setChangedPage(true);

          console.log(`Switched page to ${page} with sort ${sortType.value}`);
        },
      );
    },
-    [playerId, scores, settingsStore],
+    [
+      changedPage,
+      initalPage,
+      initalScores,
+      initalSortType,
+      playerId,
+      scores,
+      settingsStore,
+    ],
  );

  useEffect(() => {
@ -122,17 +146,12 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
        </div>
      </div>

-      <div className="w-full p-1">
-        {scores.loading ? (
-          <div className="flex justify-center">
-            <Spinner />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 divide-y divide-border">
-            {!scores.loading && scores.scores.length == 0 ? (
-              <p className="text-red-400">{errorMessage}</p>
-            ) : (
-              scores.scores.map((scoreData, id) => {
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <>
+          {scores.scores ? (
+            <>
+              <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+                {scores.scores.map((scoreData, id) => {
                  const { score, leaderboard } = scoreData;

                  return (
@ -141,17 +160,11 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                      player={playerData}
                      score={score}
                      leaderboard={leaderboard}
-                    ownProfile={settingsStore?.player}
                    />
                  );
-              })
-            )}
+                })}
              </div>
-        )}
-      </div>
-
              {/* Pagination */}
-      <div>
              <div className="pt-3">
                <Pagination
                  currentPage={scores.page}
@ -161,6 +174,11 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                  }}
                />
              </div>
+            </>
+          ) : (
+            <p>No Scores!</p>
+          )}
+        </>
      </div>
    </Card>
  );
--- a/src/components/player/score/CopyBsrButton.tsx
+++ b/src/components/player/score/CopyBsrButton.tsx
@ -0,0 +1,34 @@
+"use client";
+
+import { toast } from "react-toastify";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
+import { Button } from "../../ui/button";
+
+type CopyBsrButtonProps = {
+  mapId: string;
+};
+
+export default function CopyBsrButton({ mapId }: CopyBsrButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Button
+          className="h-[30px] w-[30px] bg-neutral-700 p-1"
+          variant={"secondary"}
+          onClick={() => {
+            navigator.clipboard.writeText(`!bsr ${mapId}`);
+            toast.success("Copied BSR code to clipboard");
+          }}
+        >
+          <p>!</p>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div>
+          <p>Click to copy the BSR code</p>
+          <p>!bsr {mapId}</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
--- a/src/components/player/score/MapButtons.tsx
+++ b/src/components/player/score/MapButtons.tsx
@ -0,0 +1,98 @@
+"use client";
+
+import BeatSaverLogo from "@/components/icons/BeatSaverLogo";
+import YouTubeLogo from "@/components/icons/YouTubeLogo";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { Button } from "@/components/ui/button";
+import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
+import { songNameToYouTubeLink } from "@/utils/songUtils";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import CopyBsrButton from "./CopyBsrButton";
+
+type MapButtonsProps = {
+  leaderboard: ScoresaberLeaderboardInfo;
+};
+
+export default function MapButtons({ leaderboard }: MapButtonsProps) {
+  const [mapId, setMapId] = useState<string | undefined>(undefined);
+  const hash = leaderboard.songHash;
+
+  const getMapId = useCallback(async () => {
+    const beatSaberMap = await fetch(
+      `/api/beatsaver/mapdata?hashes=${hash}&idonly=true`,
+    );
+    if (!beatSaberMap) {
+      return;
+    }
+    const json = await beatSaberMap.json();
+    if (json.maps[hash] == null || json.maps[hash] == undefined) {
+      return;
+    }
+    console.log(json);
+    setMapId(json.maps[hash].id);
+  }, [hash]);
+
+  useEffect(() => {
+    getMapId();
+  }, [getMapId]);
+
+  return (
+    <div className="hidden flex-col items-center gap-2 p-1 md:flex md:items-start">
+      {mapId && (
+        <>
+          <div className="flex gap-2">
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  href={`https://beatsaver.com/maps/${mapId}`}
+                  target="_blank"
+                >
+                  <Button
+                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                    variant={"secondary"}
+                  >
+                    <BeatSaverLogo size={20} />
+                  </Button>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Click to open the map page</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <CopyBsrButton mapId={mapId} />
+          </div>
+          <div className="flex gap-2">
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  href={`${songNameToYouTubeLink(
+                    leaderboard.songName,
+                    leaderboard.songSubName,
+                    leaderboard.songAuthorName,
+                  )}`}
+                  target="_blank"
+                >
+                  <Button
+                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                    variant={"secondary"}
+                  >
+                    <YouTubeLogo size={20} />
+                  </Button>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Click to view the song on YouTube</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
--- a/src/components/player/score/Score.tsx
+++ b/src/components/player/score/Score.tsx
@ -17,23 +17,19 @@ import {
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import HeadsetIcon from "../icons/HeadsetIcon";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
-import ScoreStatLabel from "./ScoreStatLabel";
+import { Suspense } from "react";
+import HeadsetIcon from "../../icons/HeadsetIcon";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
+import ScoreStatLabel from "../ScoreStatLabel";
+import MapButtons from "./MapButtons";

 type ScoreProps = {
  score: ScoresaberScore;
  player: ScoresaberPlayer;
  leaderboard: ScoresaberLeaderboardInfo;
-  ownProfile?: ScoresaberPlayer;
 };

-export default function Score({
-  score,
-  player,
-  leaderboard,
-  ownProfile,
-}: ScoreProps) {
+export default function Score({ score, player, leaderboard }: ScoreProps) {
  const isFullCombo = score.missedNotes + score.badCuts === 0;
  const diffName = scoresaberDifficultyNumberToName(
    leaderboard.difficulty.difficulty,
@ -44,7 +40,7 @@ export default function Score({
  const weightedPp = formatNumber(getPpGainedFromScore(player.id, score), 2);

  return (
-    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.85fr_6fr_1.3fr]">
+    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.85fr_6fr_0.5fr_1.3fr]">
      <div className="flex flex-col items-center justify-center">
        <div className="hidden w-fit flex-row items-center justify-center gap-1 md:flex">
          <GlobeAsiaAustraliaIcon width={20} height={20} />
@ -74,7 +70,7 @@ export default function Score({
            className="h-fit min-w-[60px] rounded-md"
            width={60}
            height={60}
-            loading="lazy"
+            priority
          />
          <div
            className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"
@ -117,6 +113,10 @@ export default function Score({
        </Link>
      </div>

+      <Suspense fallback={<div />}>
+        <MapButtons leaderboard={leaderboard} />
+      </Suspense>
+
      <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
        <div className="flex flex-col md:hidden">
          {/* Score rank */}
--- a/src/lib/db/redis.ts
+++ b/src/lib/db/redis.ts
@ -0,0 +1,26 @@
+import { createClient } from "redis";
+
+let redisClient = await connectRedis();
+
+async function connectRedis(): Promise<any> {
+  // console.log("Connecting to redis");
+  const client = createClient({
+    url: process.env.REDIS_URL,
+  });
+  await client.connect();
+  console.log("Connected to redis");
+
+  client.on("error", (error) => {
+    console.error("There was an error connecting to redis: " + error);
+    setTimeout(async () => {
+      redisClient = await connectRedis();
+    }, 30_000); // 30 seconds
+  });
+
+  return client;
+}
+
+export const Redis = {
+  client: redisClient,
+  connectRedis,
+};
--- a/src/lib/overlay/httpSiraStatus.ts
+++ b/src/lib/overlay/httpSiraStatus.ts
@ -16,6 +16,7 @@ async function loadIntoSong(data: any) {
    beatsaverMapData.versions[beatsaverMapData.versions.length - 1].coverURL;

  overlayDataStore.setState({
+    paused: false,
    scoreStats: {
      accuracy: performance.relativeScore * 100,
      score: performance.rawScore,
@ -33,6 +34,16 @@ async function loadIntoSong(data: any) {
  });
 }

+/**
+ * Reset the state of the overlay
+ */
+function resetState() {
+  overlayDataStore.setState({
+    scoreStats: undefined,
+    songInfo: undefined,
+  });
+}
+
 type Handlers = {
  [key: string]: (data: any) => void;
 };
@ -64,16 +75,10 @@ const handlers: Handlers = {

  // Left the song
  finished: (data: any) => {
-    overlayDataStore.setState({
-      scoreStats: undefined,
-      songInfo: undefined,
-    });
+    resetState();
  },
  menu: (data: any) => {
-    overlayDataStore.setState({
-      scoreStats: undefined,
-      songInfo: undefined,
-    });
+    resetState();
  },

  // pause & resume
@ -106,6 +111,7 @@ function connectWebSocket() {
    console.log(
      "Lost connection to HttpSiraStatus, reconnecting in 5 seconds...",
    );
+    resetState();
    setTimeout(() => {
      connectWebSocket();
    }, 5000); // 5 seconds
--- a/src/lib/overlay/type/overlayPlayer.ts
+++ b/src/lib/overlay/type/overlayPlayer.ts
@ -0,0 +1,8 @@
+export type OverlayPlayer = {
+  id: string;
+  country: string;
+  profilePicture: string;
+  pp: number;
+  rank: number;
+  countryRank: number;
+};
--- a/src/middleware.ts
+++ b/src/middleware.ts
@ -15,15 +15,6 @@ export function middleware(request: NextRequest) {
      return NextResponse.redirect(new URL("/search", request.url));
    }
  }
-
-  const requestHeaders = new Headers(request.headers);
-  requestHeaders.set("x-url", request.url);
-  return NextResponse.next({
-    request: {
-      // New request headers
-      headers: requestHeaders,
-    },
-  });
 }

 export const config = {
--- a/src/schemas/beatleader/difficulty.ts
+++ b/src/schemas/beatleader/difficulty.ts
@ -0,0 +1,30 @@
+import { BeatleaderModifierRating } from "./modifierRating";
+import { BeatleaderModifier } from "./modifiers";
+
+export type BeatleaderDifficulty = {
+  id: number;
+  value: number;
+  mode: number;
+  difficultyName: string;
+  modeName: string;
+  status: number;
+  modifierValues: BeatleaderModifier;
+  modifiersRating: BeatleaderModifierRating;
+  nominatedTime: number;
+  qualifiedTime: number;
+  rankedTime: number;
+  stars: number;
+  predictedAcc: number;
+  passRating: number;
+  accRating: number;
+  techRating: number;
+  type: number;
+  njs: number;
+  nps: number;
+  notes: number;
+  bombs: number;
+  walls: number;
+  maxScore: number;
+  duration: number;
+  requirements: number;
+};
--- a/src/schemas/beatleader/leaderboard.ts
+++ b/src/schemas/beatleader/leaderboard.ts
@ -0,0 +1,16 @@
+import { BeatleaderDifficulty } from "./difficulty";
+import { BeatleaderSong } from "./song";
+
+export type BeatleaderLeaderboard = {
+  id: string;
+  song: BeatleaderSong;
+  difficulty: BeatleaderDifficulty;
+  scores: null; // ??
+  changes: null; // ??
+  qualification: null; // ??
+  reweight: null; // ??
+  leaderboardGroup: null; // ??
+  plays: number;
+  clan: null; // ??
+  clanRankingContested: boolean;
+};
--- a/src/schemas/beatleader/metadata.ts
+++ b/src/schemas/beatleader/metadata.ts
@ -0,0 +1,5 @@
+export type BeatleaderMetadata = {
+  itemsPerPage: number;
+  page: number;
+  total: number;
+};
--- a/src/schemas/beatleader/modifierRating.ts
+++ b/src/schemas/beatleader/modifierRating.ts
@ -0,0 +1,18 @@
+export type BeatleaderModifierRating = {
+  id: number;
+  fsPredictedAcc: number;
+  fsPassRating: number;
+  fsAccRating: number;
+  fsTechRating: number;
+  fsStars: number;
+  ssPredictedAcc: number;
+  ssPassRating: number;
+  ssAccRating: number;
+  ssTechRating: number;
+  ssStars: number;
+  sfPredictedAcc: number;
+  sfPassRating: number;
+  sfAccRating: number;
+  sfTechRating: number;
+  sfStars: number;
+};
--- a/src/schemas/beatleader/modifiers.ts
+++ b/src/schemas/beatleader/modifiers.ts
@ -0,0 +1,16 @@
+export type BeatleaderModifier = {
+  modifierId: number;
+  da: number;
+  fs: number;
+  sf: number;
+  ss: number;
+  gn: number;
+  na: number;
+  nb: number;
+  nf: number;
+  no: number;
+  pm: number;
+  sc: number;
+  sa: number;
+  op: number;
+};
--- a/src/schemas/beatleader/player.ts
+++ b/src/schemas/beatleader/player.ts
@ -0,0 +1,9 @@
+export type BeatLeaderPlayer = {
+  id: string;
+  country: string;
+  avatar: string;
+  pp: number;
+  rank: number;
+  countryRank: number;
+  // todo: finish this
+};
--- a/src/schemas/beatleader/score.ts
+++ b/src/schemas/beatleader/score.ts
@ -0,0 +1,51 @@
+import { BeatleaderLeaderboard } from "./leaderboard";
+import { BeatleaderScoreImprovement } from "./scoreImprovement";
+import { BeatleaderScoreOffsets } from "./scoreOffsets";
+
+export type BeatleaderScore = {
+  myScore: null; // ??
+  validContexts: number;
+  leaderboard: BeatleaderLeaderboard;
+  contextExtensions: null; // ??
+  accLeft: number;
+  accRight: number;
+  id: number;
+  baseScore: number;
+  modifiedScore: number;
+  accuracy: number;
+  playerId: string;
+  pp: number;
+  bonusPp: number;
+  passPP: number;
+  accPP: number;
+  techPP: number;
+  rank: number;
+  country: string;
+  fcAccuracy: number;
+  fcPp: number;
+  weight: number;
+  replay: string;
+  modifiers: string;
+  badCuts: number;
+  missedNotes: number;
+  bombCuts: number;
+  wallsHit: number;
+  pauses: number;
+  fullCombo: boolean;
+  platform: string;
+  maxCombo: number;
+  maxStreak: number;
+  hmd: number;
+  controller: number;
+  leaderboardId: string;
+  timeset: string;
+  timepost: number;
+  replaysWatched: number;
+  playCount: number;
+  priority: number;
+  player: null; // ??
+  scoreImprovement: BeatleaderScoreImprovement;
+  rankVoting: null; // ??
+  metadata: null; // ??
+  offsets: BeatleaderScoreOffsets;
+};
--- a/src/schemas/beatleader/scoreImprovement.ts
+++ b/src/schemas/beatleader/scoreImprovement.ts
@ -0,0 +1,19 @@
+export type BeatleaderScoreImprovement = {
+  id: number;
+  timeset: number;
+  score: number;
+  accuracy: number;
+  pp: number;
+  bonusPp: number;
+  rank: number;
+  accRight: number;
+  accLeft: number;
+  averageRankedAccuracy: number;
+  totalPp: number;
+  totalRank: number;
+  badCuts: number;
+  missedNotes: number;
+  bombCuts: number;
+  wallsHit: number;
+  pauses: number;
+};
--- a/src/schemas/beatleader/scoreOffsets.ts
+++ b/src/schemas/beatleader/scoreOffsets.ts
@ -0,0 +1,8 @@
+export type BeatleaderScoreOffsets = {
+  id: number;
+  frames: number;
+  notes: number;
+  walls: number;
+  heights: number;
+  pauses: number;
+};
--- a/src/schemas/beatleader/scores.ts
+++ b/src/schemas/beatleader/scores.ts
--- a/src/schemas/beatleader/smaller/smallerLeaderboard.ts
+++ b/src/schemas/beatleader/smaller/smallerLeaderboard.ts
@ -0,0 +1,5 @@
+import { BeatleaderSmallerSong } from "./smallerSong";
+
+export type BeatleaderSmallerLeaderboard = {
+  song: BeatleaderSmallerSong;
+};
--- a/src/schemas/beatleader/smaller/smallerScore.ts
+++ b/src/schemas/beatleader/smaller/smallerScore.ts
@ -0,0 +1,14 @@
+import { BeatleaderSmallerLeaderboard } from "./smallerLeaderboard";
+import { BeatleaderSmallerScoreImprovement } from "./smallerScoreImprovement";
+
+export type BeatleaderSmallerScore = {
+  id: number;
+  timepost: number;
+  accLeft: number;
+  accRight: number;
+  fcAccuracy: number;
+  wallsHit: number;
+  replay: string;
+  leaderboard: BeatleaderSmallerLeaderboard;
+  scoreImprovement: BeatleaderSmallerScoreImprovement | null;
+};
--- a/src/schemas/beatleader/smaller/smallerScoreImprovement.ts
+++ b/src/schemas/beatleader/smaller/smallerScoreImprovement.ts
@ -0,0 +1,9 @@
+export type BeatleaderSmallerScoreImprovement = {
+  score: number;
+  accuracy: number;
+  accRight: number;
+  accLeft: number;
+  badCuts: number;
+  missedNotes: number;
+  bombCuts: number;
+};
--- a/src/schemas/beatleader/smaller/smallerSong.ts
+++ b/src/schemas/beatleader/smaller/smallerSong.ts
@ -0,0 +1,4 @@
+export type BeatleaderSmallerSong = {
+  hash: string;
+  bpm: number;
+};
--- a/src/schemas/beatleader/song.ts
+++ b/src/schemas/beatleader/song.ts
@ -0,0 +1,16 @@
+export type BeatleaderSong = {
+  id: string;
+  hash: string;
+  name: string;
+  subName: string;
+  author: string;
+  mapperId: string;
+  coverImage: string;
+  fullCoverImage: string;
+  downloadUrl: string;
+  bpm: number;
+  duration: number;
+  tags: string;
+  uploadTime: number;
+  difficulties: null; // ??
+};
--- a/src/schemas/scoresaber/scoreWithBeatsaverData.ts
+++ b/src/schemas/scoresaber/scoreWithBeatsaverData.ts
@ -0,0 +1,10 @@
+import { ScoresaberLeaderboardInfo } from "./leaderboard";
+import { ScoresaberScore } from "./score";
+
+export type ScoresaberScoreWithBeatsaverData = {
+  score: ScoresaberScore;
+  leaderboard: ScoresaberLeaderboardInfo;
+
+  // Beatsaver data
+  mapId: string;
+};
--- a/src/secrets.ts
+++ b/src/secrets.ts
@ -0,0 +1,8 @@
+import InfisicalClient from "infisical-node";
+
+const infisicalClient = new InfisicalClient({
+  token: process.env.INFISICAL_TOKEN,
+  siteURL: "https://secrets.fascinated.cc",
+});
+
+export default infisicalClient;
--- a/src/ssrSettings.json
+++ b/src/ssrSettings.json
@ -0,0 +1,7 @@
+{
+  "siteName": "ScoreSaber Reloaded",
+  "siteNameShort": "SSR",
+  "description": "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
+  "siteUrl": "https://ssr.fascinated.cc",
+  "proxy": "https://proxy.fascinated.cc"
+}
--- a/src/ssrSettings.ts
+++ b/src/ssrSettings.ts
@ -1,7 +0,0 @@
-export const ssrSettings = {
-  siteName: "ScoreSaber Reloaded",
-  description:
-    "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
-  siteUrl: "https://ssr.fascinated.cc",
-  proxy: "https://proxy.fascinated.cc",
-};
--- a/src/store/IndexedDBStorage.ts
+++ b/src/store/IndexedDBStorage.ts
@ -9,15 +9,34 @@ if (typeof window !== "undefined") {
 }

 export const IDBStorage: StateStorage = {
+  /**
+   * Fetch an item from the storage
+   *
+   * @param name name of the item to be fetched
+   * @returns the value of the item or null if it doesn't exist
+   */
  getItem: async (name: string): Promise<string | null> => {
    //console.log(name, "has been retrieved");

    return (await get(name, storage)) || null;
  },
+
+  /**
+   * Save an item to the storage
+   *
+   * @param name name of the item to be saved
+   * @param value value of the item to be saved
+   */
  setItem: async (name: string, value: string): Promise<void> => {
    //console.log(name, "with value", value, "has been saved");
    await set(name, value, storage);
  },
+
+  /**
+   * Delete an item from the storage
+   *
+   * @param name name of the item to be deleted
+   */
  removeItem: async (name: string): Promise<void> => {
    //console.log(name, "has been deleted");
    await del(name, storage);
--- a/src/utils/beatleader/api.ts
+++ b/src/utils/beatleader/api.ts
@ -0,0 +1,120 @@
+import { BeatLeaderPlayer } from "@/schemas/beatleader/player";
+import { BeatleaderScore } from "@/schemas/beatleader/score";
+import ssrSettings from "@/ssrSettings.json";
+import { FetchQueue } from "../fetchWithQueue";
+import { formatString } from "../string";
+
+// Create a fetch instance with a cache
+const fetchQueue = new FetchQueue();
+
+// Api endpoints
+const API_URL = ssrSettings.proxy + "/https://api.beatleader.xyz";
+const PLAYER_SCORES_URL =
+  API_URL + "/player/{}/scores?sortBy=date&order=0&page={}&count=100";
+const PLAYER_URL = API_URL + "/player/{}?stats=false";
+
+/**
+ * Get the player from the given player id
+ *
+ * @param playerId the id of the player
+ * @param searchType the type of search to perform
+ * @returns the player
+ */
+async function fetchPlayerData(
+  playerId: string,
+): Promise<BeatLeaderPlayer | undefined> {
+  const response = await fetchQueue.fetch(
+    formatString(PLAYER_URL, true, playerId),
+  );
+  const json = await response.json();
+
+  return json as BeatLeaderPlayer;
+}
+
+/**
+ * Get the players scores from the given page
+ *
+ * @param playerId the id of the player
+ * @param page the page to get the scores from
+ * @param searchType the type of search to perform
+ * @param limit the limit of scores to get
+ * @returns a list of scores
+ */
+async function fetchScores(
+  playerId: string,
+  page: number = 1,
+  limit: number = 100,
+): Promise<
+  | {
+      scores: BeatleaderScore[];
+      pageInfo: {
+        totalScores: number;
+        page: number;
+        totalPages: number;
+      };
+    }
+  | undefined
+> {
+  if (limit > 100) {
+    throw new Error("Limit cannot be greater than 100");
+  }
+
+  const response = await fetchQueue.fetch(
+    formatString(PLAYER_SCORES_URL, true, playerId, page),
+  );
+  const json = await response.json();
+
+  const metadata = json.metadata;
+  return {
+    scores: json.data as BeatleaderScore[],
+    pageInfo: {
+      totalScores: json.totalScores,
+      page: json.page,
+      totalPages: Math.ceil(json.totalScores / metadata.itemsPerPage),
+    },
+  };
+}
+
+/**
+ * Gets all of the players for the given player id
+ *
+ * @param playerId the id of the player
+ * @param searchType the type of search to perform
+ * @param callback a callback to call when a page is fetched
+ * @returns a list of scores
+ */
+async function fetchAllScores(
+  playerId: string,
+  callback?: (currentPage: number, totalPages: number) => void,
+): Promise<BeatleaderScore[] | undefined> {
+  const scores = new Array();
+
+  let done = false,
+    page = 1;
+  do {
+    const response = await fetchScores(playerId, page);
+    if (response == undefined) {
+      done = true;
+      break;
+    }
+    const { scores: scoresFetched } = response;
+    if (scoresFetched.length === 0) {
+      done = true;
+      break;
+    }
+    scores.push(...scoresFetched);
+
+    if (callback) {
+      callback(page, response.pageInfo.totalPages);
+    }
+    page++;
+  } while (!done);
+
+  return scores as BeatleaderScore[];
+}
+
+export const BeatLeaderAPI = {
+  fetchPlayerData,
+  fetchScores,
+  fetchAllScores,
+};
--- a/src/utils/beatsaver/api.ts
+++ b/src/utils/beatsaver/api.ts
@ -1,5 +1,5 @@
 import { BeatsaverMap } from "@/schemas/beatsaver/BeatsaverMap";
-import { ssrSettings } from "@/ssrSettings";
+import ssrSettings from "@/ssrSettings.json";
 import { FetchQueue } from "../fetchWithQueue";
 import { formatString } from "../string";

@ -11,16 +11,21 @@ const BS_API_URL = ssrSettings.proxy + "/https://api.beatsaver.com";
 export const BS_GET_MAP_BY_HASH_URL = BS_API_URL + "/maps/hash/{}";

 /**
- * Returns the map info for the provided hash
+ * Returns the map info for the provided hashes
 *
- * @param hash the hash of the map
+ * @param hash the hashes for the maps
 * @returns the map info
 */
-async function fetchMapByHash(
-  hash: string,
-): Promise<BeatsaverMap | undefined | null> {
+async function fetchMapsByHash(
+  ...hash: string[]
+): Promise<{ [key: string]: BeatsaverMap } | undefined> {
+  const hashes = hash.join(",");
  const response = await BeatsaverFetchQueue.fetch(
-    formatString(BS_GET_MAP_BY_HASH_URL, true, hash),
+    formatString(
+      BS_GET_MAP_BY_HASH_URL,
+      true,
+      hashes.substring(0, hashes.length - 1),
+    ),
  );
  const json = await response.json();

@ -29,9 +34,31 @@ async function fetchMapByHash(
    return undefined;
  }

-  return json as BeatsaverMap;
+  return json;
+}
+
+/**
+ * Returns the map info for the provided hash
+ *
+ * @param hash the hash of the map
+ * @returns the map info
+ */
+async function fetchMapByHash(hash: string): Promise<BeatsaverMap | undefined> {
+  const response = await BeatsaverFetchQueue.fetch(
+    formatString(BS_GET_MAP_BY_HASH_URL, true, hash),
+  );
+  console.log(formatString(BS_GET_MAP_BY_HASH_URL, true, hash));
+  const json = await response.json();
+
+  // Check if there was an error fetching the user data
+  if (json.error) {
+    return undefined;
+  }
+
+  return json;
 }

 export const BeatsaverAPI = {
+  fetchMapsByHash,
  fetchMapByHash,
 };
--- a/src/utils/fetchWithQueue.ts
+++ b/src/utils/fetchWithQueue.ts
@ -13,7 +13,7 @@ export class FetchQueue {
   * @param url - The URL to fetch.
   * @returns The response.
   */
-  public async fetch(url: string, options?: any): Promise<any> {
+  public async fetch(url: string, options?: any): Promise<Response> {
    const now = Date.now();

    if (now < this.rateLimitReset) {
@ -23,7 +23,12 @@ export class FetchQueue {
      );
    }

-    const response = await fetch(url, options);
+    const response = await fetch(url, {
+      ...options,
+      next: {
+        revalidate: 300, // 5 minutes
+      },
+    });
    if (response.status === 429) {
      const hasRetryAfterHeader = response.headers.has("retry-after");
      let retryAfter = hasRetryAfterHeader
--- a/src/utils/scoresaber/api.ts
+++ b/src/utils/scoresaber/api.ts
@ -2,9 +2,11 @@ import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { ScoresaberScore } from "@/schemas/scoresaber/score";
-import { ssrSettings } from "@/ssrSettings";
+import { ScoresaberScoreWithBeatsaverData } from "@/schemas/scoresaber/scoreWithBeatsaverData";
+import ssrSettings from "@/ssrSettings.json";
 import { FetchQueue } from "../fetchWithQueue";
 import { formatString } from "../string";
+import { isProduction } from "../utils";

 // Create a fetch instance with a cache
 export const ScoresaberFetchQueue = new FetchQueue();
@ -123,6 +125,88 @@ async function fetchScores(
  };
 }

+/**
+ * Gets the players scores with beatsaver data from the given page
+ *
+ * @param playerId the id of the player
+ * @param page the page to get the scores from
+ * @param searchType the type of search to perform
+ * @param limit the limit of scores to get
+ * @returns the scores with beatsaver data
+ */
+async function fetchScoresWithBeatsaverData(
+  playerId: string,
+  page: number = 1,
+  searchType: string = SearchType.RECENT,
+  limit: number = 100,
+): Promise<
+  | {
+      scores: Record<string, ScoresaberScoreWithBeatsaverData>;
+      pageInfo: {
+        totalScores: number;
+        page: number;
+        totalPages: number;
+      };
+    }
+  | undefined
+> {
+  if (limit > 100) {
+    throw new Error("Limit cannot be greater than 100");
+  }
+  const response = await ScoresaberFetchQueue.fetch(
+    formatString(SS_PLAYER_SCORES, true, playerId, limit, searchType, page),
+  );
+  const json = await response.json();
+
+  // Check if there was an error fetching the user data
+  if (json.errorMessage) {
+    return undefined;
+  }
+
+  const scores = json.playerScores as ScoresaberPlayerScore[];
+  const metadata = json.metadata;
+
+  // Fetch the beatsaver data for each score
+  const scoresWithBeatsaverData: Record<
+    string,
+    ScoresaberScoreWithBeatsaverData
+  > = {};
+
+  let url = `${
+    isProduction() ? ssrSettings.siteUrl : "http://localhost:3000"
+  }/api/beatsaver/mapdata?hashes=`;
+  for (const score of scores) {
+    url += `${score.leaderboard.songHash},`;
+  }
+  url = url.substring(0, url.length - 1);
+  url += "&idonly=true";
+  const mapResponse = await fetch(url, {
+    next: {
+      revalidate: 60 * 60 * 24 * 7, // 1 week
+    },
+  });
+  const mapJson = await mapResponse.json();
+  for (const score of scores) {
+    const mapData = mapJson.maps[score.leaderboard.songHash];
+    if (mapData) {
+      scoresWithBeatsaverData[score.leaderboard.songHash] = {
+        score: score.score,
+        leaderboard: score.leaderboard,
+        mapId: mapData.id,
+      };
+    }
+  }
+
+  return {
+    scores: scoresWithBeatsaverData,
+    pageInfo: {
+      totalScores: metadata.total,
+      page: metadata.page,
+      totalPages: Math.ceil(metadata.total / metadata.itemsPerPage),
+    },
+  };
+}
+
 /**
 * Gets all of the players for the given player id
 *
@ -275,6 +359,7 @@ export const ScoreSaberAPI = {
  searchByName,
  fetchPlayerData,
  fetchScores,
+  fetchScoresWithBeatsaverData,
  fetchAllScores,
  fetchTopPlayers,
  fetchLeaderboardInfo,
--- a/src/utils/scoresaber/scores.ts
+++ b/src/utils/scoresaber/scores.ts
@ -113,13 +113,6 @@ function calcRawPpAtIdx(
  );
 }

-/**
- * Gets the amount of raw pp needed to gain the expected pp
- *
- * @param playerId the player id
- * @param expectedPp the expected pp
- * @returns the pp boundary (+ per raw pp)
- */
 /**
 * Gets the amount of raw pp needed to gain the expected pp
 *
--- a/src/utils/songUtils.ts
+++ b/src/utils/songUtils.ts
@ -15,6 +15,20 @@ export function songDifficultyToColor(diff: string) {
  }
 }

+export function accuracyToColor(acc: number) {
+  if (acc >= 90) {
+    return "rgb(0, 255, 255)";
+  } else if (acc >= 80) {
+    return "rgb(255, 255, 255)";
+  } else if (acc >= 70) {
+    return "rgb(0, 255, 0)";
+  } else if (acc >= 60) {
+    return "rgb(255, 235, 4)";
+  } else {
+    return "rgb(255, 0, 0)";
+  }
+}
+
 export function scoresaberDifficultyNumberToName(
  diff: number,
  shortened: boolean = false,
@ -34,3 +48,30 @@ export function scoresaberDifficultyNumberToName(
      return "unknown";
  }
 }
+
+/**
+ * Turns a song name and author into a YouTube link
+ *
+ * @param name the name of the song
+ * @param songSubName the sub name of the song
+ * @param author the author of the song
+ * @returns the YouTube link for the song
+ */
+export function songNameToYouTubeLink(
+  name: string,
+  songSubName: string,
+  author: string,
+) {
+  const baseUrl = "https://www.youtube.com/results?search_query=";
+  let query = "";
+  if (name) {
+    query += `${name} `;
+  }
+  if (songSubName) {
+    query += `${songSubName} `;
+  }
+  if (author) {
+    query += `${author} `;
+  }
+  return encodeURI(baseUrl + query.trim().replaceAll(" ", "+"));
+}
--- a/src/utils/timeUtils.ts
+++ b/src/utils/timeUtils.ts
@ -31,7 +31,7 @@ export function formatTimeAgo(timestamp: string) {
 * @param timestamp the timestamp to format
 * @returns the formatted timestamp
 */
-export function formatDate(timestamp: string) {
+export function formatDate(timestamp: any) {
  const date = parseISO(timestamp);
  return date.toLocaleDateString("en-US", {
    year: "numeric",
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,6 +1,6 @@
 {
  "compilerOptions": {
-    "target": "ES2016",
+    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
@ -13,6 +13,7 @@
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+    "removeComments": true,
    "plugins": [
      {
        "name": "next"
@ -22,6 +23,12 @@
      "@/*": ["./src/*"]
    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/secrets.ts"
+  ],
  "exclude": ["node_modules"]
 }