start backend work

2024-10-08 15:32:02 +01:00
parent 04ce91b459
commit aa0a0c4c16
445 changed files with 367 additions and 11413 deletions
--- a/projects/website/src/components/background-cover.tsx
+++ b/projects/website/src/components/background-cover.tsx
@ -0,0 +1,47 @@
+"use client";
+
+import { useLiveQuery } from "dexie-react-hooks";
+import { config } from "../../config";
+import { getImageUrl } from "@/common/image-utils";
+import useDatabase from "../hooks/use-database";
+
+export default function BackgroundCover() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  if (settings == undefined || settings?.backgroundCover == undefined || settings?.backgroundCover == "") {
+    return null; // Don't render anything if the background image is not set
+  }
+
+  let backgroundCover = settings.backgroundCover;
+  let prependWebsiteUrl = false;
+
+  // Remove the prepending slash
+  if (backgroundCover.startsWith("/")) {
+    prependWebsiteUrl = true;
+    backgroundCover = backgroundCover.substring(1);
+  }
+  if (prependWebsiteUrl) {
+    backgroundCover = config.siteUrl + "/" + backgroundCover;
+  }
+
+  // Static background color
+  if (backgroundCover.startsWith("#")) {
+    return (
+      <div
+        className={`fixed -z-50 object-cover w-screen h-screen pointer-events-none select-none`}
+        style={{ backgroundColor: backgroundCover }}
+      />
+    );
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={getImageUrl(backgroundCover)}
+      alt="Background image"
+      fetchPriority="high"
+      className={`fixed -z-50 object-cover w-screen h-screen blur-sm brightness-[33%] pointer-events-none select-none`}
+    />
+  );
+}
--- a/projects/website/src/components/card.tsx
+++ b/projects/website/src/components/card.tsx
@ -0,0 +1,10 @@
+import clsx, { ClassValue } from "clsx";
+
+type Props = {
+  children: React.ReactNode;
+  className?: ClassValue;
+};
+
+export default function Card({ children, className }: Props) {
+  return <div className={clsx("flex flex-col bg-secondary/90 p-3 rounded-md", className)}>{children}</div>;
+}
--- a/projects/website/src/components/chart/generic-chart.tsx
+++ b/projects/website/src/components/chart/generic-chart.tsx
@ -0,0 +1,154 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
+import { Line } from "react-chartjs-2";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+export type AxisPosition = "left" | "right";
+
+export type Axis = {
+  id?: string;
+  position?: AxisPosition;
+  display?: boolean;
+  grid?: { color?: string; drawOnChartArea?: boolean };
+  title?: { display: boolean; text: string; color?: string };
+  ticks?: {
+    stepSize?: number;
+  };
+  reverse?: boolean;
+};
+
+export type Dataset = {
+  label: string;
+  data: (number | null)[];
+  borderColor: string;
+  fill: boolean;
+  lineTension: number;
+  spanGaps: boolean;
+  yAxisID: string;
+};
+
+export type DatasetConfig = {
+  title: string;
+  field: string;
+  color: string;
+  axisId: string;
+  axisConfig: {
+    reverse: boolean;
+    display: boolean;
+    hideOnMobile?: boolean;
+    displayName: string;
+    position: AxisPosition;
+  };
+  labelFormatter: (value: number) => string;
+};
+
+export type ChartProps = {
+  labels: string[];
+  datasetConfig: DatasetConfig[];
+  histories: Record<string, (number | null)[]>;
+};
+
+const generateAxis = (
+  id: string,
+  reverse: boolean,
+  display: boolean,
+  position: AxisPosition,
+  displayName: string
+): Axis => ({
+  id,
+  position,
+  display,
+  grid: { drawOnChartArea: id === "y", color: id === "y" ? "#252525" : "" },
+  title: { display: true, text: displayName, color: "#ffffff" },
+  ticks: { stepSize: 10 },
+  reverse,
+});
+
+const generateDataset = (label: string, data: (number | null)[], borderColor: string, yAxisID: string): Dataset => ({
+  label,
+  data,
+  borderColor,
+  fill: false,
+  lineTension: 0.5,
+  spanGaps: false,
+  yAxisID,
+});
+
+export default function GenericChart({ labels, datasetConfig, histories }: ChartProps) {
+  const isMobile = useIsMobile();
+
+  const axes: Record<string, Axis> = {
+    x: {
+      grid: { color: "#252525" },
+      reverse: false,
+    },
+  };
+
+  const datasets: Dataset[] = datasetConfig
+    .map(config => {
+      const historyArray = histories[config.field];
+
+      if (historyArray && historyArray.some(value => value !== null)) {
+        axes[config.axisId] = generateAxis(
+          config.axisId,
+          config.axisConfig.reverse,
+          isMobile && config.axisConfig.hideOnMobile ? false : config.axisConfig.display,
+          config.axisConfig.position,
+          config.axisConfig.displayName
+        );
+
+        return generateDataset(config.title, historyArray, config.color, config.axisId);
+      }
+
+      return null;
+    })
+    .filter(Boolean) as Dataset[];
+
+  const options: any = {
+    maintainAspectRatio: false,
+    responsive: true,
+    interaction: { mode: "index", intersect: false },
+    scales: axes,
+    elements: { point: { radius: 0 } },
+    plugins: {
+      legend: { position: "top", labels: { color: "white" } },
+      tooltip: {
+        callbacks: {
+          label(context: any) {
+            const value = Number(context.parsed.y);
+            const config = datasetConfig.find(cfg => cfg.title === context.dataset.label);
+            return config?.labelFormatter(value) ?? "";
+          },
+        },
+      },
+    },
+  };
+
+  const data = { labels, datasets };
+
+  return (
+    <div className="block h-[360px] w-full relative">
+      <Line
+        className="max-w-[100%]"
+        options={options}
+        data={data}
+        plugins={[
+          {
+            id: "legend-padding",
+            beforeInit: (chart: any) => {
+              const originalFit = chart.legend.fit;
+              chart.legend.fit = function fit() {
+                originalFit.bind(chart.legend)();
+                this.height += 2;
+              };
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+}
--- a/projects/website/src/components/country-flag.tsx
+++ b/projects/website/src/components/country-flag.tsx
@ -0,0 +1,17 @@
+type Props = {
+  code: string;
+  size?: number;
+};
+
+export default function CountryFlag({ code, size = 24 }: Props) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      alt="Player Country"
+      src={`/assets/flags/${code.toLowerCase()}.png`}
+      width={size * 2}
+      height={size}
+      className={`w-[${size * 2}px] h-[${size}px] object-contain`}
+    />
+  );
+}
--- a/projects/website/src/components/fallback-link.tsx
+++ b/projects/website/src/components/fallback-link.tsx
@ -0,0 +1,23 @@
+import NextLink from "next/link";
+
+type Props = {
+  /**
+   * The link to open in a new tab.
+   */
+  href?: string;
+
+  /**
+   * The children to render.
+   */
+  children: React.ReactNode;
+};
+
+export default function FallbackLink({ href, children }: Props) {
+  return href ? (
+    <NextLink href={href} target="_blank" className="w-fit">
+      {children}
+    </NextLink>
+  ) : (
+    <>{children}</>
+  );
+}
--- a/projects/website/src/components/footer.tsx
+++ b/projects/website/src/components/footer.tsx
@ -0,0 +1,48 @@
+import { getBuildInformation } from "@/common/website-utils";
+import Link from "next/link";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+  openInNewTab?: boolean;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Source",
+    link: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
+    openInNewTab: true,
+  },
+];
+
+export default function Footer() {
+  const { buildId, buildTime, buildTimeShort } = getBuildInformation();
+
+  return (
+    <div className="flex items-center w-full flex-col gap-1 mt-6">
+      <div className="flex items-center gap-2 text-input text-sm">
+        <p>Build: {buildId}</p>
+        <p className="hidden md:block">({buildTime})</p>
+        <p className="none md:hidden">({buildTimeShort})</p>
+      </div>
+      <div className="h-12 w-full flex flex-wrap items-center justify-center bg-secondary/95 divide-x divide-input">
+        {items.map((item, index) => {
+          return (
+            <Link
+              key={index}
+              className="px-2 text-pp hover:brightness-75 transition-all transform-gpu"
+              href={item.link}
+              target={item.openInNewTab ? "_blank" : undefined}
+            >
+              {item.name}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
--- a/projects/website/src/components/input/pagination.tsx
+++ b/projects/website/src/components/input/pagination.tsx
@ -0,0 +1,192 @@
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import {
+  Pagination as ShadCnPagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../ui/pagination";
+
+type PaginationItemWrapperProps = {
+  /**
+   * Whether a page is currently loading.
+   */
+  isLoadingPage: boolean;
+
+  /**
+   * The children to render.
+   */
+  children: React.ReactNode;
+};
+
+function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrapperProps) {
+  return (
+    <PaginationItem
+      className={clsx(isLoadingPage ? "cursor-not-allowed" : "cursor-pointer")}
+      aria-disabled={isLoadingPage}
+      tabIndex={isLoadingPage ? -1 : undefined}
+    >
+      {children}
+    </PaginationItem>
+  );
+}
+
+type Props = {
+  /**
+   * If true, the pagination will be rendered as a mobile-friendly pagination.
+   */
+  mobilePagination: boolean;
+
+  /**
+   * The current page.
+   */
+  page: number;
+
+  /**
+   * The total number of pages.
+   */
+  totalPages: number;
+
+  /**
+   * The page to show a loading icon on.
+   */
+  loadingPage: number | undefined;
+
+  /**
+   * Callback function that is called when the user clicks on a page number.
+   */
+  onPageChange: (page: number) => void;
+
+  /**
+   * Optional callback to generate the URL for each page.
+   */
+  generatePageUrl?: (page: number) => string;
+};
+
+export default function Pagination({
+  mobilePagination,
+  page,
+  totalPages,
+  loadingPage,
+  onPageChange,
+  generatePageUrl,
+}: Props) {
+  totalPages = Math.round(totalPages);
+  const isLoading = loadingPage !== undefined;
+  const [currentPage, setCurrentPage] = useState(page);
+
+  useEffect(() => {
+    setCurrentPage(page);
+  }, [page]);
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
+      return;
+    }
+
+    setCurrentPage(newPage);
+    onPageChange(newPage);
+  };
+
+  const handleLinkClick = (newPage: number, event: React.MouseEvent) => {
+    event.preventDefault(); // Prevent default navigation behavior
+
+    // Check if the new page is valid
+    if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
+      return;
+    }
+    handlePageChange(newPage);
+  };
+
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const maxPagesToShow = mobilePagination ? 3 : 4;
+    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+    const endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+
+    if (endPage - startPage < maxPagesToShow - 1) {
+      startPage = Math.max(1, endPage - maxPagesToShow + 1);
+    }
+
+    if (startPage > 1 && !mobilePagination) {
+      pageNumbers.push(
+        <>
+          <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
+            <PaginationLink href={generatePageUrl ? generatePageUrl(1) : ""} onClick={e => handleLinkClick(1, e)}>
+              1
+            </PaginationLink>
+          </PaginationItemWrapper>
+          {startPage > 2 && (
+            <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
+              <PaginationEllipsis />
+            </PaginationItemWrapper>
+          )}
+        </>
+      );
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(
+        <PaginationItemWrapper key={i} isLoadingPage={isLoading}>
+          <PaginationLink
+            isActive={i === currentPage}
+            href={generatePageUrl ? generatePageUrl(i) : ""}
+            onClick={e => handleLinkClick(i, e)}
+          >
+            {loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
+          </PaginationLink>
+        </PaginationItemWrapper>
+      );
+    }
+
+    return pageNumbers;
+  };
+
+  return (
+    <ShadCnPagination className="select-none">
+      <PaginationContent>
+        {/* Previous button - disabled on the first page */}
+        <PaginationItemWrapper isLoadingPage={isLoading}>
+          <PaginationPrevious
+            href={currentPage > 1 && generatePageUrl ? generatePageUrl(currentPage - 1) : ""}
+            onClick={e => handleLinkClick(currentPage - 1, e)}
+            aria-disabled={currentPage === 1}
+            className={clsx(currentPage === 1 && "cursor-not-allowed")}
+          />
+        </PaginationItemWrapper>
+
+        {renderPageNumbers()}
+
+        {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
+          <>
+            <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
+              <PaginationEllipsis className="cursor-default" />
+            </PaginationItemWrapper>
+            <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
+              <PaginationLink
+                href={generatePageUrl ? generatePageUrl(totalPages) : ""}
+                onClick={e => handleLinkClick(totalPages, e)}
+              >
+                {totalPages}
+              </PaginationLink>
+            </PaginationItemWrapper>
+          </>
+        )}
+
+        {/* Next button - disabled on the last page */}
+        <PaginationItemWrapper isLoadingPage={isLoading}>
+          <PaginationNext
+            href={currentPage < totalPages && generatePageUrl ? generatePageUrl(currentPage + 1) : ""}
+            onClick={e => handleLinkClick(currentPage + 1, e)}
+            aria-disabled={currentPage === totalPages}
+            className={clsx(currentPage === totalPages && "cursor-not-allowed")}
+          />
+        </PaginationItemWrapper>
+      </PaginationContent>
+    </ShadCnPagination>
+  );
+}
--- a/projects/website/src/components/input/search-player.tsx
+++ b/projects/website/src/components/input/search-player.tsx
@ -0,0 +1,92 @@
+"use client";
+
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { ScrollArea } from "../ui/scroll-area";
+
+const formSchema = z.object({
+  username: z.string().min(3).max(50),
+});
+
+export default function SearchPlayer() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+    },
+  });
+  const [results, setResults] = useState<ScoreSaberPlayerToken[] | undefined>();
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit({ username }: z.infer<typeof formSchema>) {
+    setLoading(true);
+    setResults(undefined); // Reset results
+    const results = await scoresaberService.searchPlayers(username);
+    setResults(results?.players);
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Search */}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-end gap-2">
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input className="w-full sm:w-72 text-sm" placeholder="Query..." {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Search</Button>
+        </form>
+      </Form>
+
+      {/* Results */}
+      {loading == true && (
+        <div className="flex items-center justify-center">
+          <p>Loading...</p>
+        </div>
+      )}
+      {results !== undefined && (
+        <ScrollArea>
+          <div className="flex flex-col gap-1 max-h-60">
+            {results?.map(player => {
+              return (
+                <Link
+                  href={`/player/${player.id}`}
+                  key={player.id}
+                  className="bg-secondary p-2 rounded-md flex gap-2 items-center hover:brightness-75 transition-all transform-gpu"
+                >
+                  <Avatar>
+                    <AvatarImage src={player.profilePicture} />
+                    <AvatarFallback>{player.name.at(0)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p>{player.name}</p>
+                    <p className="text-gray-400 text-sm">#{formatNumberWithCommas(player.rank)}</p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-data.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-data.tsx
@ -0,0 +1,78 @@
+"use client";
+
+import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
+import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info";
+import { useQuery } from "@tanstack/react-query";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { useCallback, useEffect, useState } from "react";
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import { beatsaverService } from "@/common/service/impl/beatsaver";
+
+type LeaderboardDataProps = {
+  /**
+   * The page to show when opening the leaderboard.
+   */
+  initialPage?: number;
+
+  /**
+   * The initial scores to show.
+   */
+  initialScores?: ScoreSaberLeaderboardScoresPageToken;
+
+  /**
+   * The leaderboard to display.
+   */
+  initialLeaderboard: ScoreSaberLeaderboardToken;
+};
+
+export function LeaderboardData({ initialPage, initialScores, initialLeaderboard }: LeaderboardDataProps) {
+  const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
+  const [selectedLeaderboardId, setSelectedLeaderboardId] = useState(initialLeaderboard.id);
+  const [currentLeaderboard, setCurrentLeaderboard] = useState(initialLeaderboard);
+
+  const { data: leaderboard } = useQuery({
+    queryKey: ["leaderboard-" + initialLeaderboard.id, selectedLeaderboardId],
+    queryFn: () => scoresaberService.lookupLeaderboard(selectedLeaderboardId + ""),
+    initialData: initialLeaderboard,
+    staleTime: 30 * 1000, // Cache data for 30 seconds
+  });
+
+  const fetchBeatSaverData = useCallback(async () => {
+    const beatSaverMap = await beatsaverService.lookupMap(initialLeaderboard.songHash);
+    setBeatSaverMap(beatSaverMap);
+  }, [initialLeaderboard.songHash]);
+
+  useEffect(() => {
+    fetchBeatSaverData();
+  }, [fetchBeatSaverData]);
+
+  /**
+   * When the leaderboard changes, update the previous and current leaderboards.
+   * This is to prevent flickering between leaderboards.
+   */
+  useEffect(() => {
+    if (leaderboard) {
+      setCurrentLeaderboard(leaderboard);
+    }
+  }, [leaderboard]);
+
+  if (!currentLeaderboard) {
+    return null;
+  }
+
+  return (
+    <main className="flex flex-col-reverse xl:flex-row w-full gap-2">
+      <LeaderboardScores
+        leaderboard={currentLeaderboard}
+        initialScores={initialScores}
+        initialPage={initialPage}
+        showDifficulties
+        isLeaderboardPage
+        leaderboardChanged={id => setSelectedLeaderboardId(id)}
+      />
+      <LeaderboardInfo leaderboard={currentLeaderboard} beatSaverMap={beatSaverMap} />
+    </main>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-info.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-info.tsx
@ -0,0 +1,65 @@
+import Card from "@/components/card";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import Image from "next/image";
+import { LeaderboardSongStarCount } from "@/components/leaderboard/leaderboard-song-star-count";
+import ScoreButtons from "@/components/score/score-buttons";
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+
+type LeaderboardInfoProps = {
+  /**
+   * The leaderboard to display.
+   */
+  leaderboard: ScoreSaberLeaderboardToken;
+
+  /**
+   * The beat saver map associated with the leaderboard.
+   */
+  beatSaverMap?: BeatSaverMap;
+};
+
+export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoProps) {
+  return (
+    <Card className="xl:w-[500px] h-fit w-full">
+      <div className="flex flex-row justify-between w-full">
+        <div className="flex flex-col justify-between w-full min-h-[160px]">
+          {/* Song Info */}
+          <div className="flex flex-col gap-1">
+            <p className="font-semibold">
+              {leaderboard.songName} {leaderboard.songSubName}
+            </p>
+            <p className="text-sm text-gray-400">
+              By <span className="text-pp">{leaderboard.songAuthorName}</span>
+            </p>
+          </div>
+
+          {/* Song Stats */}
+          <div className="text-sm">
+            <p>
+              Mapper: <span className="text-pp font-semibold">{leaderboard.levelAuthorName}</span>
+            </p>
+            <p>
+              Plays: <span className="font-semibold">{leaderboard.plays}</span> ({leaderboard.dailyPlays} today)
+            </p>
+            <p>
+              Status: <span className="font-semibold">{leaderboard.stars > 0 ? "Ranked" : "Unranked"}</span>
+            </p>
+          </div>
+        </div>
+        <Image
+          src={leaderboard.coverImage}
+          alt={`${leaderboard.songName} Cover Image`}
+          className="rounded-md w-[96px] h-[96px]"
+          width={96}
+          height={96}
+        />
+
+        <div className="relative">
+          <div className="absolute bottom-0 right-0 w-fit h-fit flex flex-col gap-2 items-end">
+            <LeaderboardSongStarCount leaderboard={leaderboard} />
+            <ScoreButtons leaderboard={leaderboard} beatSaverMap={beatSaverMap} alwaysSingleLine />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-player.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-player.tsx
@ -0,0 +1,42 @@
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import Image from "next/image";
+import Link from "next/link";
+
+type Props = {
+  /**
+   * The player who set the score.
+   */
+  player?: ScoreSaberPlayer;
+
+  /**
+   * The score to display.
+   */
+  score: ScoreSaberScoreToken;
+};
+
+export default function LeaderboardPlayer({ player, score }: Props) {
+  const scorePlayer = score.leaderboardPlayerInfo;
+  const isPlayerWhoSetScore = player && scorePlayer.id === player.id;
+
+  return (
+    <div className="flex gap-2">
+      <Image
+        unoptimized
+        src={`https://img.fascinated.cc/upload/w_48,h_48/${scorePlayer.profilePicture}`}
+        width={48}
+        height={48}
+        alt="Song Artwork"
+        className="rounded-md min-w-[48px]"
+        priority
+      />
+      <Link
+        href={`/player/${scorePlayer.id}`}
+        target="_blank"
+        className="h-fit hover:brightness-75 transition-all transform-gpu"
+      >
+        <p className={`${isPlayerWhoSetScore && "text-pp"}`}>{scorePlayer.name}</p>
+      </Link>
+    </div>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-score-stats.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-score-stats.tsx
@ -0,0 +1,80 @@
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
+import Tooltip from "@/components/tooltip";
+import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
+
+const badges: ScoreBadge[] = [
+  {
+    name: "PP",
+    create: (score: ScoreSaberScoreToken) => {
+      const pp = score.pp;
+      if (pp === 0) {
+        return undefined;
+      }
+      return `${score.pp.toFixed(2)}pp`;
+    },
+  },
+  {
+    name: "Accuracy",
+    color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return getScoreBadgeFromAccuracy(acc).color;
+    },
+    create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      const scoreBadge = getScoreBadgeFromAccuracy(acc);
+      let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
+      if (scoreBadge.max == null) {
+        accDetails += ` (> ${scoreBadge.min}%)`;
+      } else if (scoreBadge.min == null) {
+        accDetails += ` (< ${scoreBadge.max}%)`;
+      } else {
+        accDetails += ` (${scoreBadge.min}% - ${scoreBadge.max}%)`;
+      }
+
+      return (
+        <>
+          <Tooltip
+            display={
+              <div>
+                <p>{accDetails}</p>
+              </div>
+            }
+          >
+            <p className="cursor-default">{acc.toFixed(2)}%</p>
+          </Tooltip>
+        </>
+      );
+    },
+  },
+  {
+    name: "Full Combo",
+    create: (score: ScoreSaberScoreToken) => {
+      const fullCombo = score.missedNotes === 0;
+
+      return (
+        <>
+          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+        </>
+      );
+    },
+  },
+];
+
+type Props = {
+  score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function LeaderboardScoreStats({ score, leaderboard }: Props) {
+  return (
+    <div className={`grid grid-cols-3 grid-rows-1 gap-1 ml-0 lg:ml-2`}>
+      <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
+    </div>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-score.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-score.tsx
@ -0,0 +1,35 @@
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import LeaderboardPlayer from "./leaderboard-player";
+import LeaderboardScoreStats from "./leaderboard-score-stats";
+import ScoreRankInfo from "@/components/score/score-rank-info";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+
+type Props = {
+  /**
+   * The player who set the score.
+   */
+  player?: ScoreSaberPlayer;
+
+  /**
+   * The score to display.
+   */
+  score: ScoreSaberScoreToken;
+
+  /**
+   * The leaderboard to display.
+   */
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function LeaderboardScore({ player, score, leaderboard }: Props) {
+  return (
+    <div className="py-1.5">
+      <div className="grid items-center w-full gap-2 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
+        <ScoreRankInfo score={score} />
+        <LeaderboardPlayer player={player} score={score} />
+        <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
+      </div>
+    </div>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-scores.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-scores.tsx
@ -0,0 +1,210 @@
+"use client";
+
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { useQuery } from "@tanstack/react-query";
+import { motion, useAnimation } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import LeaderboardScore from "./leaderboard-score";
+import { scoreAnimation } from "@/components/score/score-animation";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { Button } from "@/components/ui/button";
+import { clsx } from "clsx";
+import { getDifficultyFromRawDifficulty } from "@/common/song-utils";
+
+type LeaderboardScoresProps = {
+  /**
+   * The page to show when opening the leaderboard.
+   */
+  initialPage?: number;
+
+  /**
+   * The initial scores to show.
+   */
+  initialScores?: ScoreSaberLeaderboardScoresPageToken;
+
+  /**
+   * The player who set the score.
+   */
+  player?: ScoreSaberPlayer;
+
+  /**
+   * The leaderboard to display.
+   */
+  leaderboard: ScoreSaberLeaderboardToken;
+
+  /**
+   * Whether to show the difficulties.
+   */
+  showDifficulties?: boolean;
+
+  /**
+   * Whether this is the full leaderboard page.
+   */
+  isLeaderboardPage?: boolean;
+
+  /**
+   * Called when the leaderboard changes.
+   *
+   * @param id the new leaderboard id
+   */
+  leaderboardChanged?: (id: number) => void;
+};
+
+export default function LeaderboardScores({
+  initialPage,
+  initialScores,
+  player,
+  leaderboard,
+  showDifficulties,
+  isLeaderboardPage,
+  leaderboardChanged,
+}: LeaderboardScoresProps) {
+  if (!initialPage) {
+    initialPage = 1;
+  }
+  const { width } = useWindowDimensions();
+  const controls = useAnimation();
+
+  const [selectedLeaderboardId, setSelectedLeaderboardId] = useState(leaderboard.id);
+  const [previousPage, setPreviousPage] = useState(initialPage);
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>(initialScores);
+  const topOfScoresRef = useRef<HTMLDivElement>(null);
+  const [shouldFetch, setShouldFetch] = useState(false);
+
+  const {
+    data: scores,
+    isError,
+    isLoading,
+  } = useQuery({
+    queryKey: ["leaderboardScores-" + leaderboard.id, selectedLeaderboardId, currentPage],
+    queryFn: () => scoresaberService.lookupLeaderboardScores(selectedLeaderboardId + "", currentPage),
+    staleTime: 30 * 1000,
+    enabled: (shouldFetch && isLeaderboardPage) || !isLeaderboardPage,
+  });
+
+  /**
+   * Starts the animation for the scores.
+   */
+  const handleScoreAnimation = useCallback(async () => {
+    await controls.start(previousPage >= currentPage ? "hiddenRight" : "hiddenLeft");
+    setCurrentScores(scores);
+    await controls.start("visible");
+  }, [controls, currentPage, previousPage, scores]);
+
+  /**
+   * Set the selected leaderboard.
+   */
+  const handleLeaderboardChange = useCallback(
+    (id: number) => {
+      setShouldFetch(true);
+      setSelectedLeaderboardId(id);
+      setCurrentPage(1);
+
+      if (leaderboardChanged) {
+        leaderboardChanged(id);
+      }
+    },
+    [leaderboardChanged]
+  );
+
+  /**
+   * Set the current scores.
+   */
+  useEffect(() => {
+    if (scores) {
+      handleScoreAnimation();
+    }
+  }, [scores, handleScoreAnimation]);
+
+  /**
+   * Handle scrolling to the top of the
+   * scores when new scores are loaded.
+   */
+  useEffect(() => {
+    if (topOfScoresRef.current && shouldFetch) {
+      const topOfScoresPosition = topOfScoresRef.current.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: topOfScoresPosition - 75, // Navbar height (plus some padding)
+        behavior: "smooth",
+      });
+    }
+  }, [currentPage, topOfScoresRef, shouldFetch]);
+
+  useEffect(() => {
+    // Update the URL
+    window.history.replaceState(null, "", `/leaderboard/${selectedLeaderboardId}/${currentPage}`);
+  }, [selectedLeaderboardId, currentPage]);
+
+  if (currentScores === undefined) {
+    return undefined;
+  }
+
+  return (
+    <Card className={clsx("flex gap-2 w-full relative", !isLeaderboardPage && "border border-input")}>
+      {/* Where to scroll to when new scores are loaded */}
+      <div ref={topOfScoresRef} className="absolute" />
+
+      <div className="text-center">
+        {isError && <p>Oopsies! Something went wrong.</p>}
+        {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
+      </div>
+
+      <div className="flex gap-2 justify-center items-center flex-wrap">
+        {showDifficulties &&
+          leaderboard.difficulties.map(({ difficultyRaw, leaderboardId }) => {
+            const difficulty = getDifficultyFromRawDifficulty(difficultyRaw);
+            // todo: add support for other gamemodes?
+            if (difficulty.gamemode !== "Standard") {
+              return null;
+            }
+
+            return (
+              <Button
+                key={difficultyRaw}
+                variant={leaderboardId === selectedLeaderboardId ? "default" : "outline"}
+                onClick={() => {
+                  handleLeaderboardChange(leaderboardId);
+                }}
+              >
+                {difficulty.name}
+              </Button>
+            );
+          })}
+      </div>
+
+      <motion.div
+        initial="hidden"
+        animate={controls}
+        variants={scoreAnimation}
+        className="grid min-w-full grid-cols-1 divide-y divide-border"
+      >
+        {currentScores.scores.map((playerScore, index) => (
+          <motion.div key={index} variants={scoreAnimation}>
+            <LeaderboardScore key={index} player={player} score={playerScore} leaderboard={leaderboard} />
+          </motion.div>
+        ))}
+      </motion.div>
+
+      <Pagination
+        mobilePagination={width < 768}
+        page={currentPage}
+        totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+        loadingPage={isLoading ? currentPage : undefined}
+        generatePageUrl={page => {
+          return `/leaderboard/${selectedLeaderboardId}/${page}`;
+        }}
+        onPageChange={newPage => {
+          setCurrentPage(newPage);
+          setPreviousPage(currentPage);
+          setShouldFetch(true);
+        }}
+      />
+    </Card>
+  );
+}
--- a/projects/website/src/components/leaderboard/leaderboard-song-star-count.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-song-star-count.tsx
@ -0,0 +1,32 @@
+import { songDifficultyToColor } from "@/common/song-utils";
+import { StarIcon } from "@heroicons/react/24/solid";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
+
+type LeaderboardSongStarCountProps = {
+  /**
+   * The leaderboard for the song
+   */
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export function LeaderboardSongStarCount({ leaderboard }: LeaderboardSongStarCountProps) {
+  if (leaderboard.stars <= 0) {
+    return null;
+  }
+
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
+  return (
+    <div
+      className="w-fit h-[20px] rounded-sm flex justify-center items-center text-xs cursor-default"
+      style={{
+        backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
+      }}
+    >
+      <div className="flex gap-1 items-center justify-center p-1">
+        <p>{leaderboard.stars}</p>
+        <StarIcon className="w-4 h-4" />
+      </div>
+    </div>
+  );
+}
--- a/projects/website/src/components/loaders/database-loader.tsx
+++ b/projects/website/src/components/loaders/database-loader.tsx
@ -0,0 +1,43 @@
+"use client";
+
+import { createContext, ReactNode, useEffect, useState } from "react";
+import Database, { db } from "../../common/database/database";
+import FullscreenLoader from "./fullscreen-loader";
+import { useToast } from "@/hooks/use-toast";
+
+/**
+ * The context for the database. This is used to access the database from within the app.
+ */
+export const DatabaseContext = createContext<Database | undefined>(undefined);
+
+type DatabaseLoaderProps = {
+  /**
+   * The children to render.
+   */
+  children: ReactNode;
+};
+
+export default function DatabaseLoader({ children }: DatabaseLoaderProps) {
+  const { toast } = useToast();
+  const [database, setDatabase] = useState<Database | undefined>(undefined);
+
+  useEffect(() => {
+    const before = performance.now();
+    setDatabase(db);
+
+    db.on("ready", () => {
+      const loadTime = (performance.now() - before).toFixed(0);
+      console.log(`Loaded database in ${loadTime}ms`);
+      toast({
+        title: "Database loaded",
+        description: `The database was loaded in ${loadTime}ms.`,
+      });
+    });
+  }, [toast]);
+
+  return (
+    <DatabaseContext.Provider value={database}>
+      {database == undefined ? <FullscreenLoader reason="Loading database..." /> : children}
+    </DatabaseContext.Provider>
+  );
+}
--- a/projects/website/src/components/loaders/fullscreen-loader.tsx
+++ b/projects/website/src/components/loaders/fullscreen-loader.tsx
@ -0,0 +1,19 @@
+import ScoreSaberLogo from "../logos/scoresaber-logo";
+
+type Props = {
+  reason: string;
+};
+
+export default function FullscreenLoader({ reason }: Props) {
+  return (
+    <div className="absolute w-screen h-screen bg-background brightness-75 flex flex-col gap-6 items-center justify-center">
+      <div className="flex flex-col items-center justify-center">
+        <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
+        <p className="text-gray-300 text-md">{reason}</p>
+      </div>
+      <div className="animate-spin">
+        <ScoreSaberLogo />
+      </div>
+    </div>
+  );
+}
--- a/projects/website/src/components/logos/beatsaver-logo.tsx
+++ b/projects/website/src/components/logos/beatsaver-logo.tsx
@ -0,0 +1,24 @@
+type BeatSaverLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 200 200"
+      version="1.1"
+      className={className}
+    >
+      <g fill="none" stroke="#fff" 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" strokeLinejoin="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/projects/website/src/components/logos/scoresaber-logo.tsx
+++ b/projects/website/src/components/logos/scoresaber-logo.tsx
@ -0,0 +1,7 @@
+import Image from "next/image";
+
+export default function ScoreSaberLogo() {
+  return (
+    <Image width={32} height={32} unoptimized src={"/assets/logos/scoresaber.png"} alt={"ScoreSaber Logo"}></Image>
+  );
+}
--- a/projects/website/src/components/logos/youtube-logo.tsx
+++ b/projects/website/src/components/logos/youtube-logo.tsx
@ -0,0 +1,30 @@
+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/projects/website/src/components/navbar/navbar-button.tsx
+++ b/projects/website/src/components/navbar/navbar-button.tsx
@ -0,0 +1,11 @@
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function NavbarButton({ children }: Props) {
+  return (
+    <div className="px-2 gap-2 rounded-md hover:bg-blue-500 transform-gpu transition-all h-full flex items-center">
+      {children}
+    </div>
+  );
+}
--- a/projects/website/src/components/navbar/navbar.tsx
+++ b/projects/website/src/components/navbar/navbar.tsx
@ -0,0 +1,73 @@
+import { CogIcon, HomeIcon } from "@heroicons/react/24/solid";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import React from "react";
+import NavbarButton from "./navbar-button";
+import ProfileButton from "./profile-button";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+  align: "left" | "right";
+  icon: React.ReactNode;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+    align: "left",
+    icon: <HomeIcon className="h-5 w-5" />,
+  },
+  {
+    name: "Search",
+    link: "/search",
+    align: "right",
+    icon: <MagnifyingGlassIcon className="h-5 w-5" />,
+  },
+  {
+    name: "Settings",
+    link: "/settings",
+    align: "right",
+    icon: <CogIcon className="h-5 w-5" />,
+  },
+];
+
+// Helper function to render each navbar item
+const renderNavbarItem = (item: NavbarItem) => (
+  <div className="flex items-center w-fit gap-2">
+    {item.icon && <div>{item.icon}</div>}
+    <p className="hidden lg:block">{item.name}</p>
+  </div>
+);
+
+export default function Navbar() {
+  const rightItems = items.filter(item => item.align === "right");
+  const leftItems = items.filter(item => item.align === "left");
+
+  return (
+    <div className="w-full sticky top-0 z-[999]">
+      <div className="h-10 items-center flex justify-between bg-secondary/95 px-1">
+        {/* Left-aligned items */}
+        <div className="flex items-center h-full">
+          <ProfileButton />
+
+          {leftItems.map((item, index) => (
+            <Link href={item.link} key={index} className="h-full">
+              <NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
+            </Link>
+          ))}
+        </div>
+
+        {/* Right-aligned items */}
+        <div className="flex items-center h-full">
+          {rightItems.map((item, index) => (
+            <Link href={item.link} key={index} className="h-full">
+              <NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/projects/website/src/components/navbar/profile-button.tsx
+++ b/projects/website/src/components/navbar/profile-button.tsx
@ -0,0 +1,34 @@
+"use client";
+
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import Link from "next/link";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import NavbarButton from "./navbar-button";
+
+export default function ProfileButton() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  if (settings == undefined) {
+    return; // Settings hasn't loaded yet
+  }
+
+  if (settings.playerId == null) {
+    return; // No player profile claimed
+  }
+
+  return (
+    <Link href={`/player/${settings.playerId}`} className="flex items-center gap-2 h-full">
+      <NavbarButton>
+        <Avatar className="w-6 h-6">
+          <AvatarImage
+            alt="Profile Picture"
+            src={`https://img.fascinated.cc/upload/w_24,h_24/https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
+          />
+        </Avatar>
+        <p className="hidden lg:block">You</p>
+      </NavbarButton>
+    </Link>
+  );
+}
--- a/projects/website/src/components/offline-network.tsx
+++ b/projects/website/src/components/offline-network.tsx
@ -0,0 +1,18 @@
+"use client";
+
+import FullscreenLoader from "@/components/loaders/fullscreen-loader";
+import { useNetworkState } from "@uidotdev/usehooks";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function OfflineNetwork({ children }: Props) {
+  const network = useNetworkState();
+
+  return !network.online ? (
+    <FullscreenLoader reason="Your device is offline. Check your internet connection." />
+  ) : (
+    children
+  );
+}
--- a/projects/website/src/components/player/chart/generic-player-chart.tsx
+++ b/projects/website/src/components/player/chart/generic-player-chart.tsx
@ -0,0 +1,81 @@
+"use client";
+
+import { parseDate } from "@/common/time-utils";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import React from "react";
+import GenericChart, { DatasetConfig } from "@/components/chart/generic-chart";
+import { getValueFromHistory } from "@/common/player-utils";
+
+type Props = {
+  /**
+   * The player the chart is for
+   */
+  player: ScoreSaberPlayer;
+
+  /**
+   * The data to render.
+   */
+  datasetConfig: DatasetConfig[];
+};
+
+// Set up the labels
+const labels: string[] = [];
+const historyDays = 50;
+for (let day = 0; day < historyDays; day++) {
+  if (day == 0) {
+    labels.push("Today");
+  } else if (day == 1) {
+    labels.push("Yesterday");
+  } else {
+    labels.push(`${day + 1} days ago`);
+  }
+}
+labels.reverse();
+
+export default function GenericPlayerChart({ player, datasetConfig }: Props) {
+  if (!player.statisticHistory || Object.keys(player.statisticHistory).length === 0) {
+    return (
+      <div className="flex justify-center">
+        <p>Unable to load player rank chart, missing data...</p>
+      </div>
+    );
+  }
+  const histories: Record<string, (number | null)[]> = {};
+
+  // Initialize histories for each dataset
+  datasetConfig.forEach(config => {
+    histories[config.field] = [];
+  });
+
+  // Sort the statistic entries by date
+  const statisticEntries = Object.entries(player.statisticHistory).sort(
+    ([a], [b]) => parseDate(a).getTime() - parseDate(b).getTime()
+  );
+
+  let previousDate: Date | null = null;
+
+  // Iterate through each statistic entry
+  for (const [dateString, history] of statisticEntries) {
+    const currentDate = parseDate(dateString);
+
+    // Fill in missing days with null values
+    if (previousDate) {
+      const diffDays = Math.floor((currentDate.getTime() - previousDate.getTime()) / (1000 * 60 * 60 * 24));
+      for (let i = 1; i < diffDays; i++) {
+        datasetConfig.forEach(config => {
+          histories[config.field].push(null);
+        });
+      }
+    }
+
+    // Push the historical data to histories
+    datasetConfig.forEach(config => {
+      histories[config.field].push(getValueFromHistory(history, config.field) ?? null);
+    });
+
+    previousDate = currentDate; // Update the previousDate for the next iteration
+  }
+
+  // Render the GenericChart with collected data
+  return <GenericChart labels={labels} datasetConfig={datasetConfig} histories={histories} />;
+}
--- a/projects/website/src/components/player/chart/player-accuracy-chart.tsx
+++ b/projects/website/src/components/player/chart/player-accuracy-chart.tsx
@ -0,0 +1,32 @@
+"use client";
+
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import React from "react";
+import { DatasetConfig } from "@/components/chart/generic-chart";
+import GenericPlayerChart from "@/components/player/chart/generic-player-chart";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+// Dataset configuration for the chart
+const datasetConfig: DatasetConfig[] = [
+  {
+    title: "Average Ranked Accuracy",
+    field: "accuracy.averageRankedAccuracy",
+    color: "#606fff",
+    axisId: "y",
+    axisConfig: {
+      reverse: false,
+      display: true,
+      hideOnMobile: false,
+      displayName: "Average Ranked Accuracy",
+      position: "left",
+    },
+    labelFormatter: (value: number) => `Average Ranked Accuracy ${value.toFixed(2)}%`,
+  },
+];
+
+export default function PlayerAccuracyChart({ player }: Props) {
+  return <GenericPlayerChart player={player} datasetConfig={datasetConfig} />;
+}
--- a/projects/website/src/components/player/chart/player-charts.tsx
+++ b/projects/website/src/components/player/chart/player-charts.tsx
@ -0,0 +1,91 @@
+"use client";
+
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import PlayerRankingChart from "@/components/player/chart/player-ranking-chart";
+import { FC, useState } from "react";
+import Tooltip from "@/components/tooltip";
+import PlayerAccuracyChart from "@/components/player/chart/player-accuracy-chart";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import { TrendingUpIcon } from "lucide-react";
+
+type PlayerChartsProps = {
+  /**
+   * The player who the charts are for
+   */
+  player: ScoreSaberPlayer;
+};
+
+type SelectedChart = {
+  /**
+   * The index of the selected chart.
+   */
+  index: number;
+
+  /**
+   * The label of the selected chart.
+   */
+  label: string;
+
+  /**
+   * The icon of the selected chart.
+   */
+  icon: React.ReactNode;
+
+  /**
+   * The chart to render.
+   */
+  chart: FC<PlayerChartsProps>;
+};
+
+export default function PlayerCharts({ player }: PlayerChartsProps) {
+  const charts: SelectedChart[] = [
+    {
+      index: 0,
+      label: "Ranking",
+      icon: <GlobeAmericasIcon className="w-5 h-5" />,
+      chart: PlayerRankingChart,
+    },
+  ];
+  if (player.isBeingTracked) {
+    charts.push({
+      index: 1,
+      label: "Accuracy",
+      icon: <TrendingUpIcon className="w-[18px] h-[18px]" />,
+      chart: PlayerAccuracyChart,
+    });
+  }
+
+  const [selectedChart, setSelectedChart] = useState<SelectedChart>(charts[0]);
+
+  return (
+    <>
+      {selectedChart.chart({ player })}
+
+      <div className="flex items-center justify-center gap-2">
+        {charts.length > 1 &&
+          charts.map(chart => {
+            const isSelected = chart.index === selectedChart.index;
+
+            return (
+              <Tooltip
+                key={chart.index}
+                display={
+                  <div className="flex justify-center items-center flex-col">
+                    <p>{chart.label} Chart</p>
+                    <p className="text-gray-600">{isSelected ? "Currently Selected" : "Click to view"}</p>
+                  </div>
+                }
+              >
+                <button
+                  onClick={() => setSelectedChart(chart)}
+                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-75 transform-gpu transition-all`}
+                >
+                  {chart.icon}
+                </button>
+              </Tooltip>
+            );
+          })}
+      </div>
+    </>
+  );
+}
--- a/projects/website/src/components/player/chart/player-ranking-chart.tsx
+++ b/projects/website/src/components/player/chart/player-ranking-chart.tsx
@ -0,0 +1,59 @@
+"use client";
+
+import { formatNumberWithCommas } from "@/common/number-utils";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import React from "react";
+import { DatasetConfig } from "@/components/chart/generic-chart";
+import GenericPlayerChart from "@/components/player/chart/generic-player-chart";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+// Dataset configuration for the chart
+const datasetConfig: DatasetConfig[] = [
+  {
+    title: "Rank",
+    field: "rank",
+    color: "#3EC1D3",
+    axisId: "y",
+    axisConfig: {
+      reverse: true,
+      display: true,
+      displayName: "Global Rank",
+      position: "left",
+    },
+    labelFormatter: (value: number) => `Rank #${formatNumberWithCommas(value)}`,
+  },
+  {
+    title: "Country Rank",
+    field: "countryRank",
+    color: "#FFEA00",
+    axisId: "y1",
+    axisConfig: {
+      reverse: true,
+      display: false,
+      displayName: "Country Rank",
+      position: "left",
+    },
+    labelFormatter: (value: number) => `Country Rank #${formatNumberWithCommas(value)}`,
+  },
+  {
+    title: "PP",
+    field: "pp",
+    color: "#606fff",
+    axisId: "y2",
+    axisConfig: {
+      reverse: false,
+      display: true,
+      hideOnMobile: true,
+      displayName: "PP",
+      position: "right",
+    },
+    labelFormatter: (value: number) => `PP ${formatNumberWithCommas(value)}pp`,
+  },
+];
+
+export default function PlayerRankingChart({ player }: Props) {
+  return <GenericPlayerChart player={player} datasetConfig={datasetConfig} />;
+}
--- a/projects/website/src/components/player/claim-profile.tsx
+++ b/projects/website/src/components/player/claim-profile.tsx
@ -0,0 +1,48 @@
+"use client";
+
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { useLiveQuery } from "dexie-react-hooks";
+import { setPlayerIdCookie } from "@/common/website-utils";
+import useDatabase from "../../hooks/use-database";
+import { useToast } from "@/hooks/use-toast";
+import Tooltip from "../tooltip";
+import { Button } from "../ui/button";
+
+type Props = {
+  /**
+   * The ID of the players profile to claim.
+   */
+  playerId: string;
+};
+
+export default function ClaimProfile({ playerId }: Props) {
+  const database = useDatabase();
+  const { toast } = useToast();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  /**
+   * Claims the profile.
+   */
+  async function claimProfile() {
+    const settings = await database.getSettings();
+
+    settings?.setPlayerId(playerId);
+    setPlayerIdCookie(playerId);
+    toast({
+      title: "Profile Claimed",
+      description: "You have claimed this profile.",
+    });
+  }
+
+  if (settings?.playerId == playerId || settings == undefined) {
+    return null; // Don't show the claim button if it's the same user.
+  }
+
+  return (
+    <Tooltip display={<p>Set as your profile</p>} side={"bottom"}>
+      <Button variant={"outline"} onClick={claimProfile}>
+        <CheckIcon className="size-6 text-green-500" />
+      </Button>
+    </Tooltip>
+  );
+}
--- a/projects/website/src/components/player/player-badges.tsx
+++ b/projects/website/src/components/player/player-badges.tsx
@ -0,0 +1,23 @@
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Image from "next/image";
+import Tooltip from "@/components/tooltip";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerBadges({ player }: Props) {
+  return (
+    <div className="flex flex-wrap gap-2 w-full items-center justify-center">
+      {player.badges?.map((badge, index) => {
+        return (
+          <Tooltip key={index} display={<p className="cursor-default pointer-events-none">{badge.description}</p>}>
+            <div>
+              <Image src={badge.url} alt={badge.description} width={80} height={30} unoptimized />
+            </div>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
--- a/projects/website/src/components/player/player-data.tsx
+++ b/projects/website/src/components/player/player-data.tsx
@ -0,0 +1,74 @@
+"use client";
+
+import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { ScoreSort } from "@/common/model/score/score-sort";
+import { useQuery } from "@tanstack/react-query";
+import Mini from "../ranking/mini";
+import PlayerHeader from "./player-header";
+import PlayerScores from "./player-scores";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Card from "@/components/card";
+import PlayerBadges from "@/components/player/player-badges";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { useIsVisible } from "@/hooks/use-is-visible";
+import { useRef } from "react";
+import PlayerCharts from "@/components/player/chart/player-charts";
+
+type Props = {
+  initialPlayerData: ScoreSaberPlayer;
+  initialScoreData?: ScoreSaberPlayerScoresPageToken;
+  initialSearch?: string;
+  sort: ScoreSort;
+  page: number;
+};
+
+export default function PlayerData({
+  initialPlayerData: initialPlayerData,
+  initialScoreData,
+  initialSearch,
+  sort,
+  page,
+}: Props) {
+  const isMobile = useIsMobile();
+  const miniRankingsRef = useRef<HTMLDivElement>(null);
+  const isMiniRankingsVisible = useIsVisible(miniRankingsRef);
+
+  let player = initialPlayerData;
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["player", player.id],
+    queryFn: () => scoresaberService.lookupPlayer(player.id),
+    staleTime: 1000 * 60 * 5, // Cache data for 5 minutes
+  });
+
+  if (data && (!isLoading || !isError)) {
+    player = data.player;
+  }
+
+  return (
+    <div className="flex gap-2">
+      <article className="flex flex-col gap-2">
+        <PlayerHeader player={player} />
+        {!player.inactive && (
+          <Card className="gap-1">
+            <PlayerBadges player={player} />
+            <PlayerCharts player={player} />
+          </Card>
+        )}
+        <PlayerScores
+          initialScoreData={initialScoreData}
+          initialSearch={initialSearch}
+          player={player}
+          sort={sort}
+          page={page}
+        />
+      </article>
+      {!isMobile && (
+        <aside ref={miniRankingsRef} className="w-[600px] hidden 2xl:flex flex-col gap-2">
+          <Mini shouldUpdate={isMiniRankingsVisible} type="Global" player={player} />
+          <Mini shouldUpdate={isMiniRankingsVisible} type="Country" player={player} />
+        </aside>
+      )}
+    </div>
+  );
+}
--- a/projects/website/src/components/player/player-header.tsx
+++ b/projects/website/src/components/player/player-header.tsx
@ -0,0 +1,136 @@
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Card from "../card";
+import CountryFlag from "../country-flag";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import ClaimProfile from "./claim-profile";
+import PlayerStats from "./player-stats";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Tooltip from "@/components/tooltip";
+import { ReactElement } from "react";
+import PlayerTrackedStatus from "@/components/player/player-tracked-status";
+
+/**
+ * Renders the change for a stat.
+ *
+ * @param change the amount of change
+ * @param tooltip the tooltip to display
+ * @param format the function to format the value
+ */
+const renderChange = (change: number, tooltip: ReactElement, format?: (value: number) => string) => {
+  format = format ?? formatNumberWithCommas;
+
+  return (
+    <Tooltip display={tooltip}>
+      <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
+        {change > 0 ? "+" : ""}
+        {format(change)}
+      </p>
+    </Tooltip>
+  );
+};
+
+const playerData = [
+  {
+    showWhenInactiveOrBanned: false,
+    icon: () => {
+      return <GlobeAmericasIcon className="h-5 w-5" />;
+    },
+    render: (player: ScoreSaberPlayer) => {
+      const statisticChange = player.statisticChange;
+      const rankChange = statisticChange?.rank ?? 0;
+
+      return (
+        <div className="text-gray-300 flex gap-1 items-center">
+          <p>#{formatNumberWithCommas(player.rank)}</p>
+          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
+        </div>
+      );
+    },
+  },
+  {
+    showWhenInactiveOrBanned: false,
+    icon: (player: ScoreSaberPlayer) => {
+      return <CountryFlag code={player.country} size={15} />;
+    },
+    render: (player: ScoreSaberPlayer) => {
+      const statisticChange = player.statisticChange;
+      const rankChange = statisticChange?.countryRank ?? 0;
+
+      return (
+        <div className="text-gray-300 flex gap-1 items-center">
+          <p>#{formatNumberWithCommas(player.countryRank)}</p>
+          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
+        </div>
+      );
+    },
+  },
+  {
+    showWhenInactiveOrBanned: true,
+    render: (player: ScoreSaberPlayer) => {
+      const statisticChange = player.statisticChange;
+      const ppChange = statisticChange?.pp ?? 0;
+
+      return (
+        <div className="text-pp flex gap-1 items-center">
+          <p>{formatPp(player.pp)}pp</p>
+          {ppChange != 0 &&
+            renderChange(ppChange, <p>The change in your pp compared to yesterday</p>, number => {
+              return `${formatPp(number)}pp`;
+            })}
+        </div>
+      );
+    },
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerHeader({ player }: Props) {
+  return (
+    <Card>
+      <div className="flex gap-3 flex-col items-center text-center lg:flex-row lg:items-start lg:text-start relative select-none">
+        <Avatar className="w-32 h-32 pointer-events-none">
+          <AvatarImage alt="Profile Picture" src={`https://img.fascinated.cc/upload/w_128,h_128/${player.avatar}`} />
+        </Avatar>
+        <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
+          <div>
+            <div className="flex gap-2 items-center justify-center lg:justify-start">
+              <p className="font-bold text-2xl">{player.name}</p>
+              <PlayerTrackedStatus player={player} />
+            </div>
+            <div className="flex flex-col">
+              <div>
+                {player.inactive && <p className="text-gray-400">Inactive Account</p>}
+                {player.banned && <p className="text-red-500">Banned Account</p>}
+              </div>
+              <div className="flex gap-2">
+                {playerData.map((subName, index) => {
+                  // Check if the player is inactive or banned and if the data should be shown
+                  if (!subName.showWhenInactiveOrBanned && (player.inactive || player.banned)) {
+                    return null;
+                  }
+
+                  return (
+                    <div key={index} className="flex gap-1 items-center">
+                      {subName.icon && subName.icon(player)}
+                      {subName.render && subName.render(player)}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <PlayerStats player={player} />
+
+          <div className="absolute top-0 right-0">
+            <ClaimProfile playerId={player.id} />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
--- a/projects/website/src/components/player/player-scores.tsx
+++ b/projects/website/src/components/player/player-scores.tsx
@ -0,0 +1,241 @@
+import { capitalizeFirstLetter } from "@/common/string-utils";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { useQuery } from "@tanstack/react-query";
+import { motion, useAnimation } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import { Button } from "../ui/button";
+import { ScoreSort } from "@/common/model/score/score-sort";
+import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
+import Score from "@/components/score/score";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { Input } from "@/components/ui/input";
+import { clsx } from "clsx";
+import { useDebounce } from "@uidotdev/usehooks";
+import { scoreAnimation } from "@/components/score/score-animation";
+
+type Props = {
+  initialScoreData?: ScoreSaberPlayerScoresPageToken;
+  initialSearch?: string;
+  player: ScoreSaberPlayer;
+  sort: ScoreSort;
+  page: number;
+};
+
+type PageState = {
+  page: number;
+  sort: ScoreSort;
+};
+
+const scoreSort = [
+  {
+    name: "Top",
+    value: ScoreSort.top,
+    icon: <TrophyIcon className="w-5 h-5" />,
+  },
+  {
+    name: "Recent",
+    value: ScoreSort.recent,
+    icon: <ClockIcon className="w-5 h-5" />,
+  },
+];
+
+export default function PlayerScores({ initialScoreData, initialSearch, player, sort, page }: Props) {
+  const { width } = useWindowDimensions();
+  const controls = useAnimation();
+
+  const [pageState, setPageState] = useState<PageState>({ page, sort });
+  const [previousPage, setPreviousPage] = useState(page);
+  const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData);
+  const [searchTerm, setSearchTerm] = useState(initialSearch || "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 250);
+  const [shouldFetch, setShouldFetch] = useState(false);
+  const topOfScoresRef = useRef<HTMLDivElement>(null);
+
+  const isSearchActive = debouncedSearchTerm.length >= 3;
+  const {
+    data: scores,
+    isError,
+    isLoading,
+  } = useQuery({
+    queryKey: ["playerScores", player.id, pageState, debouncedSearchTerm],
+    queryFn: () => {
+      return scoresaberService.lookupPlayerScores({
+        playerId: player.id,
+        page: pageState.page,
+        sort: pageState.sort,
+        ...(isSearchActive && { search: debouncedSearchTerm }),
+      });
+    },
+    staleTime: 30 * 1000, // 30 seconds
+    enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0),
+  });
+
+  /**
+   * Starts the animation for the scores.
+   */
+  const handleScoreAnimation = useCallback(async () => {
+    await controls.start(previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft");
+    setCurrentScores(scores);
+    await controls.start("visible");
+  }, [scores, controls, previousPage, pageState.page]);
+
+  /**
+   * Change the score sort.
+   *
+   * @param newSort the new sort
+   */
+  const handleSortChange = (newSort: ScoreSort) => {
+    if (newSort !== pageState.sort) {
+      setPageState({ page: 1, sort: newSort });
+      setShouldFetch(true); // Set to true to trigger fetch
+    }
+  };
+
+  /**
+   * Change the score search term.
+   *
+   * @param query the new search term
+   */
+  const handleSearchChange = (query: string) => {
+    setSearchTerm(query);
+    if (query.length >= 3) {
+      setShouldFetch(true); // Set to true to trigger fetch
+    } else {
+      setShouldFetch(false); // Disable fetch if the search query is less than 3 characters
+    }
+  };
+
+  /**
+   * Clears the score search term.
+   */
+  const clearSearch = () => {
+    setSearchTerm("");
+  };
+
+  /**
+   * Handle score animation.
+   */
+  useEffect(() => {
+    if (scores) handleScoreAnimation();
+  }, [scores, handleScoreAnimation]);
+
+  /**
+   * Gets the URL to the page.
+   */
+  const getUrl = useCallback(
+    (page: number) => {
+      return `/player/${player.id}/${pageState.sort}/${page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
+    },
+    [debouncedSearchTerm, player.id, pageState.sort, isSearchActive]
+  );
+
+  /**
+   * Handle updating the URL when the page number,
+   * sort, or search term changes.
+   */
+  useEffect(() => {
+    const newUrl = getUrl(pageState.page);
+    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+  }, [pageState, debouncedSearchTerm, player.id, isSearchActive, getUrl]);
+
+  /**k
+   * Handle scrolling to the top of the
+   * scores when new scores are loaded.
+   */
+  useEffect(() => {
+    if (topOfScoresRef.current && shouldFetch) {
+      const topOfScoresPosition = topOfScoresRef.current.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: topOfScoresPosition - 55, // Navbar height (plus some padding)
+        behavior: "smooth",
+      });
+    }
+  }, [pageState, topOfScoresRef, shouldFetch]);
+
+  const invalidSearch = searchTerm.length >= 1 && searchTerm.length < 3;
+  return (
+    <Card className="flex gap-1">
+      <div className="flex flex-col items-center w-full gap-2 relative">
+        {/* Where to scroll to when new scores are loaded */}
+        <div ref={topOfScoresRef} className="absolute" />
+
+        <div className="flex gap-2">
+          {scoreSort.map(sortOption => (
+            <Button
+              key={sortOption.value}
+              variant={sortOption.value === pageState.sort ? "default" : "outline"}
+              onClick={() => handleSortChange(sortOption.value)}
+              size="sm"
+              className="flex items-center gap-1"
+            >
+              {sortOption.icon}
+              {`${capitalizeFirstLetter(sortOption.name)} Scores`}
+            </Button>
+          ))}
+        </div>
+
+        <div className="relative w-72 lg:absolute right-0 top-0">
+          <Input
+            type="search"
+            placeholder="Search..."
+            className={clsx(
+              "pr-10", // Add padding right for the clear button
+              invalidSearch && "border-red-500"
+            )}
+            value={searchTerm}
+            onChange={e => handleSearchChange(e.target.value)}
+          />
+          {searchTerm && ( // Show clear button only if there's a query
+            <button
+              onClick={clearSearch}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-75 transform-gpu transition-all cursor-default"
+              aria-label="Clear search"
+            >
+              <XMarkIcon className="w-5 h-5" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {currentScores && (
+        <>
+          <div className="text-center">
+            {isError || (currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page or Search?</p>)}
+          </div>
+
+          <motion.div
+            initial="hidden"
+            animate={controls}
+            variants={scoreAnimation}
+            className="grid min-w-full grid-cols-1 divide-y divide-border"
+          >
+            {currentScores.playerScores.map((playerScore, index) => (
+              <motion.div key={index} variants={scoreAnimation}>
+                <Score player={player} playerScore={playerScore} />
+              </motion.div>
+            ))}
+          </motion.div>
+
+          <Pagination
+            mobilePagination={width < 768}
+            page={pageState.page}
+            totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+            loadingPage={isLoading ? pageState.page : undefined}
+            generatePageUrl={page => {
+              return getUrl(page);
+            }}
+            onPageChange={newPage => {
+              setPreviousPage(pageState.page);
+              setPageState({ ...pageState, page: newPage });
+              setShouldFetch(true); // Set to true to trigger fetch on page change
+            }}
+          />
+        </>
+      )}
+    </Card>
+  );
+}
--- a/projects/website/src/components/player/player-stats.tsx
+++ b/projects/website/src/components/player/player-stats.tsx
@ -0,0 +1,70 @@
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+
+type Badge = {
+  name: string;
+  color?: string;
+  create: (player: ScoreSaberPlayer) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+  {
+    name: "Ranked Play Count",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.rankedPlayCount);
+    },
+  },
+  {
+    name: "Total Ranked Score",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.totalRankedScore);
+    },
+  },
+  {
+    name: "Average Ranked Accuracy",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return player.statistics.averageRankedAccuracy.toFixed(2) + "%";
+    },
+  },
+  {
+    name: "Total Play Count",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.totalPlayCount);
+    },
+  },
+  {
+    name: "Total Score",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.totalScore);
+    },
+  },
+  {
+    name: "Total Replays Watched",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.replaysWatched);
+    },
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerStats({ player }: Props) {
+  return (
+    <div className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}>
+      {badges.map((badge, index) => {
+        const toRender = badge.create(player);
+        if (toRender === undefined) {
+          return <div key={index} />;
+        }
+
+        return <StatValue key={index} color={badge.color} name={badge.name} value={toRender} />;
+      })}
+    </div>
+  );
+}
--- a/projects/website/src/components/player/player-tracked-status.tsx
+++ b/projects/website/src/components/player/player-tracked-status.tsx
@ -0,0 +1,56 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import ky from "ky";
+import { config } from "../../../config";
+import Tooltip from "@/components/tooltip";
+import { InformationCircleIcon } from "@heroicons/react/16/solid";
+import { format } from "@formkit/tempo";
+import { PlayerTrackedSince } from "@/common/player/player-tracked-since";
+import { getDaysAgo } from "@/common/time-utils";
+import { formatNumberWithCommas } from "@/common/number-utils";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerTrackedStatus({ player }: Props) {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["playerIsBeingTracked", player.id],
+    queryFn: () => ky.get<PlayerTrackedSince>(`${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`).json(),
+  });
+
+  if (isLoading || isError || !data?.tracked) {
+    return undefined;
+  }
+
+  const trackedSince = new Date(data.trackedSince!);
+  const daysAgo = getDaysAgo(trackedSince) + 1;
+  let daysAgoFormatted = `${formatNumberWithCommas(daysAgo)} day${daysAgo > 1 ? "s" : ""} ago`;
+  if (daysAgo === 1) {
+    daysAgoFormatted = "Today";
+  }
+  if (daysAgo === 2) {
+    daysAgoFormatted = "Yesterday";
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Tooltip
+        display={
+          <div className="flex flex-col justify-center items-center">
+            <p>This player is having their statistics tracked!</p>
+            <p>
+              Tracked Since: {format(trackedSince)} ({daysAgoFormatted})
+            </p>
+            <p>Days Tracked: {formatNumberWithCommas(data.daysTracked!)}</p>
+          </div>
+        }
+        side="bottom"
+      >
+        <InformationCircleIcon className="w-6 h-6 text-neutral-200" />
+      </Tooltip>
+    </div>
+  );
+}
--- a/projects/website/src/components/preload-resources.tsx
+++ b/projects/website/src/components/preload-resources.tsx
@ -0,0 +1,9 @@
+"use client";
+
+import ReactDOM from "react-dom";
+
+export function PreloadResources() {
+  ReactDOM.prefetchDNS("https://proxy.fascinated.cc");
+  ReactDOM.prefetchDNS("https://scoresber.com");
+  return undefined;
+}
--- a/projects/website/src/components/providers/query-provider.tsx
+++ b/projects/website/src/components/providers/query-provider.tsx
@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const queryClient = new QueryClient();
+
+export function QueryProvider({ children }: Props) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}
--- a/projects/website/src/components/providers/theme-provider.tsx
+++ b/projects/website/src/components/providers/theme-provider.tsx
@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/projects/website/src/components/ranking/mini.tsx
+++ b/projects/website/src/components/ranking/mini.tsx
@ -0,0 +1,177 @@
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import { ScoreSaberPlayersPageToken } from "@/common/model/token/scoresaber/score-saber-players-page-token";
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { ReactElement } from "react";
+import Card from "../card";
+import CountryFlag from "../country-flag";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { PlayerRankingSkeleton } from "@/components/ranking/player-ranking-skeleton";
+
+const PLAYER_NAME_MAX_LENGTH = 18;
+
+type MiniProps = {
+  /**
+   * The type of ranking to display.
+   */
+  type: "Global" | "Country";
+
+  /**
+   * The player on this profile.
+   */
+  player: ScoreSaberPlayer;
+
+  /**
+   * Whether the data should be updated
+   */
+  shouldUpdate?: boolean;
+};
+
+type Variants = {
+  [key: string]: {
+    itemsPerPage: number;
+    icon: (player: ScoreSaberPlayer) => ReactElement;
+    getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => number;
+    query: (page: number, country: string) => Promise<ScoreSaberPlayersPageToken | undefined>;
+  };
+};
+
+const miniVariants: Variants = {
+  Global: {
+    itemsPerPage: 50,
+    icon: () => <GlobeAmericasIcon className="w-6 h-6" />,
+    getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => {
+      return Math.floor((player.rank - 1) / itemsPerPage) + 1;
+    },
+    query: (page: number) => {
+      return scoresaberService.lookupPlayers(page);
+    },
+  },
+  Country: {
+    itemsPerPage: 50,
+    icon: (player: ScoreSaberPlayer) => {
+      return <CountryFlag code={player.country} size={12} />;
+    },
+    getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => {
+      return Math.floor((player.countryRank - 1) / itemsPerPage) + 1;
+    },
+    query: (page: number, country: string) => {
+      return scoresaberService.lookupPlayersByCountry(page, country);
+    },
+  },
+};
+
+export default function Mini({ type, player, shouldUpdate }: MiniProps) {
+  if (shouldUpdate == undefined) {
+    // Default to true
+    shouldUpdate = true;
+  }
+  const variant = miniVariants[type];
+  const icon = variant.icon(player);
+
+  const itemsPerPage = variant.itemsPerPage;
+  const page = variant.getPage(player, itemsPerPage);
+  const rankWithinPage = player.rank % itemsPerPage;
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["player-" + type, player.id, type, page],
+    queryFn: async () => {
+      // Determine pages to search based on player's rank within the page
+      const pagesToSearch = [page];
+      if (rankWithinPage < 5 && page > 1) {
+        // Allow page 1 to be valid
+        // Player is near the start of the page, so search the previous page too
+        pagesToSearch.push(page - 1);
+      }
+      if (rankWithinPage > itemsPerPage - 5) {
+        // Player is near the end of the page, so search the next page too
+        pagesToSearch.push(page + 1);
+      }
+
+      // Fetch players from the determined pages
+      const players: ScoreSaberPlayerToken[] = [];
+      for (const p of pagesToSearch) {
+        const response = await variant.query(p, player.country);
+        if (response === undefined) {
+          return undefined;
+        }
+
+        players.push(...response.players);
+      }
+
+      return players;
+    },
+    enabled: shouldUpdate,
+  });
+
+  let players = data; // So we can update it later
+  if (players && (!isLoading || !isError)) {
+    // Find the player's position in the list
+    const playerPosition = players.findIndex(p => p.id === player.id);
+
+    // Ensure we always show 5 players
+    const start = Math.max(0, playerPosition - 3); // Start showing 3 players above the player, but not less than index 0
+    const end = Math.min(players.length, start + 5); // Ensure there are 5 players shown
+
+    players = players.slice(start, end);
+
+    // If there are less than 5 players at the top, append more players from below
+    if (players.length < 5 && start === 0) {
+      const additionalPlayers = players.slice(playerPosition + 1, playerPosition + (5 - players.length + 1));
+      players = [...players, ...additionalPlayers];
+    }
+  }
+
+  if (isLoading) {
+    return <PlayerRankingSkeleton />;
+  }
+
+  return (
+    <Card className="w-full flex gap-2 sticky select-none">
+      <div className="flex gap-2">
+        {icon}
+        <p>{type} Ranking</p>
+      </div>
+      <div className="flex flex-col text-sm">
+        {isError && <p className="text-red-500">Error</p>}
+        {players?.map((playerRanking, index) => {
+          const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
+          const playerName =
+            playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
+              ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
+              : playerRanking.name;
+          const ppDifference = playerRanking.pp - player.pp;
+
+          return (
+            <Link
+              key={index}
+              href={`/player/${playerRanking.id}`}
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
+            >
+              <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
+              <div className="flex gap-2 items-center">
+                <Avatar className="w-6 h-6 pointer-events-none">
+                  <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
+                </Avatar>
+                <p className={playerRanking.id === player.id ? "text-pp font-semibold" : ""}>{playerName}</p>
+              </div>
+              <div className="inline-flex min-w-[11.5em] gap-2 items-center">
+                <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>
+                {playerRanking.id !== player.id && (
+                  <p className={`text-xs text-right ${ppDifference > 0 ? "text-green-400" : "text-red-400"}`}>
+                    {ppDifference > 0 ? "+" : ""}
+                    {formatPp(ppDifference)}
+                  </p>
+                )}
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}
--- a/projects/website/src/components/ranking/player-ranking-skeleton.tsx
+++ b/projects/website/src/components/ranking/player-ranking-skeleton.tsx
@ -0,0 +1,34 @@
+import Card from "@/components/card";
+import { Skeleton } from "@/app/components/ui/skeleton";
+
+export function PlayerRankingSkeleton() {
+  const skeletonArray = new Array(5).fill(0);
+
+  return (
+    <Card className="w-full flex gap-2 sticky select-none">
+      <div className="flex gap-2">
+        <Skeleton className="w-6 h-6 rounded-full animate-pulse" /> {/* Icon Skeleton */}
+        <Skeleton className="w-32 h-6 animate-pulse" /> {/* Text Skeleton for Ranking */}
+      </div>
+
+      <div className="flex flex-col text-sm">
+        {skeletonArray.map((_, index) => (
+          <div
+            key={index}
+            className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all first:rounded-t last:rounded-b"
+          >
+            <Skeleton className="w-12 h-6" /> {/* Rank Skeleton */}
+            <div className="flex gap-2 items-center">
+              <Skeleton className="w-6 h-6 rounded-full animate-pulse" /> {/* Avatar Skeleton */}
+              <Skeleton className="w-24 h-6 animate-pulse" /> {/* Player Name Skeleton */}
+            </div>
+            <div className="inline-flex min-w-[10.75em] gap-2 items-center">
+              <Skeleton className="w-16 h-6 animate-pulse" /> {/* PP Value Skeleton */}
+              <Skeleton className="w-8 h-4 animate-pulse" /> {/* PP Difference Skeleton */}
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}
--- a/projects/website/src/components/score/leaderboard-button.tsx
+++ b/projects/website/src/components/score/leaderboard-button.tsx
@ -0,0 +1,25 @@
+import { Button } from "@/components/ui/button";
+import { ArrowDownIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { Dispatch, SetStateAction } from "react";
+
+type Props = {
+  isLeaderboardExpanded: boolean;
+  setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
+};
+
+export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderboardExpanded }: Props) {
+  return (
+    <div className="pr-2 flex items-center justify-center h-full cursor-default">
+      <Button
+        className="p-0 hover:bg-transparent"
+        variant="ghost"
+        onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)}
+      >
+        <ArrowDownIcon
+          className={clsx("w-6 h-6 transition-all transform-gpu", isLeaderboardExpanded ? "" : "rotate-180")}
+        />
+      </Button>
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score-animation.tsx
+++ b/projects/website/src/components/score/score-animation.tsx
@ -0,0 +1,10 @@
+import { Variants } from "framer-motion";
+
+/**
+ * The animation values for the score slide in animation.
+ */
+export const scoreAnimation: Variants = {
+  hiddenRight: { opacity: 0, x: 50 },
+  hiddenLeft: { opacity: 0, x: -50 },
+  visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
+};
--- a/projects/website/src/components/score/score-badge.tsx
+++ b/projects/website/src/components/score/score-badge.tsx
@ -0,0 +1,35 @@
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import StatValue from "@/components/stat-value";
+
+/**
+ * A badge to display in the score stats.
+ */
+export type ScoreBadge = {
+  name: string;
+  color?: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => string | undefined;
+  create: (
+    score: ScoreSaberScoreToken,
+    leaderboard: ScoreSaberLeaderboardToken
+  ) => string | React.ReactNode | undefined;
+};
+
+/**
+ * The badges to display in the score stats.
+ */
+type ScoreBadgeProps = {
+  badges: ScoreBadge[];
+  score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export function ScoreBadges({ badges, score, leaderboard }: ScoreBadgeProps) {
+  return badges.map((badge, index) => {
+    const toRender = badge.create(score, leaderboard);
+    const color = badge.color?.(score, leaderboard);
+    if (toRender === undefined) {
+      return <div key={index} />;
+    }
+    return <StatValue key={index} color={color} value={toRender} />;
+  });
+}
--- a/projects/website/src/components/score/score-button.tsx
+++ b/projects/website/src/components/score/score-button.tsx
@ -0,0 +1,40 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+type Props = {
+  /**
+   * The button content.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The tooltip content.
+   */
+  tooltip?: React.ReactNode;
+
+  /**
+   * Callback for when the button is clicked.
+   */
+  onClick: () => void;
+};
+
+export default function ScoreButton({ children, tooltip, onClick }: Props) {
+  const button = (
+    <button
+      className="bg-accent rounded-md flex justify-center items-center p-1 w-[28px] h-[28px] hover:brightness-75 transform-gpu transition-all cursor-pointer"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return button;
+}
--- a/projects/website/src/components/score/score-buttons.tsx
+++ b/projects/website/src/components/score/score-buttons.tsx
@ -0,0 +1,85 @@
+"use client";
+
+import { copyToClipboard } from "../../../../common/src/utils/browser-utils";
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import { songNameToYouTubeLink } from "@/common/youtube-utils";
+import BeatSaverLogo from "@/components/logos/beatsaver-logo";
+import YouTubeLogo from "@/components/logos/youtube-logo";
+import { useToast } from "@/hooks/use-toast";
+import { Dispatch, SetStateAction } from "react";
+import LeaderboardButton from "./leaderboard-button";
+import ScoreButton from "./score-button";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+
+type Props = {
+  leaderboard: ScoreSaberLeaderboardToken;
+  beatSaverMap?: BeatSaverMap;
+  alwaysSingleLine?: boolean;
+  isLeaderboardExpanded?: boolean;
+  setIsLeaderboardExpanded?: Dispatch<SetStateAction<boolean>>;
+};
+
+export default function ScoreButtons({
+  leaderboard,
+  beatSaverMap,
+  alwaysSingleLine,
+  isLeaderboardExpanded,
+  setIsLeaderboardExpanded,
+}: Props) {
+  const { toast } = useToast();
+
+  return (
+    <div className="flex justify-end gap-2">
+      <div
+        className={`flex ${alwaysSingleLine ? "flex-nowrap" : "flex-wrap"} items-center lg:items-start justify-center lg:justify-end gap-1`}
+      >
+        {beatSaverMap != undefined && (
+          <>
+            {/* Copy BSR */}
+            <ScoreButton
+              onClick={() => {
+                toast({
+                  title: "Copied!",
+                  description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
+                });
+                copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
+              }}
+              tooltip={<p>Click to copy the bsr code</p>}
+            >
+              <p>!</p>
+            </ScoreButton>
+
+            {/* Open map in BeatSaver */}
+            <ScoreButton
+              onClick={() => {
+                window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+              }}
+              tooltip={<p>Click to open the map</p>}
+            >
+              <BeatSaverLogo />
+            </ScoreButton>
+          </>
+        )}
+
+        {/* Open song in YouTube */}
+        <ScoreButton
+          onClick={() => {
+            window.open(
+              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+              "_blank"
+            );
+          }}
+          tooltip={<p>Click to open the song in YouTube</p>}
+        >
+          <YouTubeLogo />
+        </ScoreButton>
+      </div>
+      {isLeaderboardExpanded != undefined && setIsLeaderboardExpanded != undefined && (
+        <LeaderboardButton
+          isLeaderboardExpanded={isLeaderboardExpanded}
+          setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+        />
+      )}
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score-info.tsx
+++ b/projects/website/src/components/score/score-info.tsx
@ -0,0 +1,85 @@
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
+import FallbackLink from "@/components/fallback-link";
+import Tooltip from "@/components/tooltip";
+import { StarIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import Image from "next/image";
+import { songDifficultyToColor } from "@/common/song-utils";
+import Link from "next/link";
+
+type Props = {
+  leaderboard: ScoreSaberLeaderboardToken;
+  beatSaverMap?: BeatSaverMap;
+};
+
+export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
+  const mappersProfile =
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
+
+  return (
+    <div className="flex gap-3 items-center">
+      <div className="relative flex justify-center h-[64px]">
+        <Tooltip
+          display={
+            <>
+              <p>
+                Difficulty: <span className="font-bold">{diff}</span>
+              </p>
+              {leaderboard.stars > 0 && (
+                <p>
+                  Stars: <span className="font-bold">{leaderboard.stars}</span>
+                </p>
+              )}
+            </>
+          }
+        >
+          <div
+            className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs cursor-default"
+            style={{
+              backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
+            }}
+          >
+            {leaderboard.stars > 0 ? (
+              <div className="flex gap-1 items-center justify-center">
+                <p>{leaderboard.stars}</p>
+                <StarIcon className="w-4 h-4" />
+              </div>
+            ) : (
+              <p>{diff}</p>
+            )}
+          </div>
+        </Tooltip>
+        <Image
+          unoptimized
+          src={`https://img.fascinated.cc/upload/w_64,h_64/${leaderboard.coverImage}`}
+          width={64}
+          height={64}
+          alt="Song Artwork"
+          className="rounded-md min-w-[64px]"
+          priority
+        />
+      </div>
+      <div className="flex">
+        <div className="overflow-y-clip">
+          <Link
+            href={`/leaderboard/${leaderboard.id}`}
+            className="cursor-pointer select-none hover:brightness-75 transform-gpu transition-all"
+          >
+            <p className="text-pp">
+              {leaderboard.songName} {leaderboard.songSubName}
+            </p>
+            <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
+          </Link>
+          <FallbackLink href={mappersProfile}>
+            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all w-fit")}>
+              {leaderboard.levelAuthorName}
+            </p>
+          </FallbackLink>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score-rank-info.tsx
+++ b/projects/website/src/components/score/score-rank-info.tsx
@ -0,0 +1,33 @@
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { timeAgo } from "@/common/time-utils";
+import { format } from "@formkit/tempo";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Tooltip from "../tooltip";
+
+type Props = {
+  score: ScoreSaberScoreToken;
+};
+
+export default function ScoreRankInfo({ score }: Props) {
+  return (
+    <div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center">
+      <div className="flex gap-1 items-center">
+        <GlobeAmericasIcon className="w-5 h-5" />
+        <p className="text-pp cursor-default">#{formatNumberWithCommas(score.rank)}</p>
+      </div>
+      <Tooltip
+        display={
+          <p>
+            {format({
+              date: new Date(score.timeSet),
+              format: "DD MMMM YYYY HH:mm a",
+            })}
+          </p>
+        }
+      >
+        <p className="text-sm cursor-default">{timeAgo(new Date(score.timeSet))}</p>
+      </Tooltip>
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score-stats.tsx
+++ b/projects/website/src/components/score/score-stats.tsx
@ -0,0 +1,113 @@
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import Tooltip from "@/components/tooltip";
+import { ScoreBadge, ScoreBadges } from "@/components/score/score-badge";
+
+const badges: ScoreBadge[] = [
+  {
+    name: "PP",
+    color: () => {
+      return "bg-pp";
+    },
+    create: (score: ScoreSaberScoreToken) => {
+      const pp = score.pp;
+      if (pp === 0) {
+        return undefined;
+      }
+      const weightedPp = pp * score.weight;
+
+      return (
+        <>
+          <Tooltip
+            display={
+              <div>
+                <p>
+                  Weighted: {formatPp(weightedPp)}pp ({(100 * score.weight).toFixed(2)}%)
+                </p>
+              </div>
+            }
+          >
+            <p>{formatPp(pp)}pp</p>
+          </Tooltip>
+        </>
+      );
+    },
+  },
+  {
+    name: "Accuracy",
+    color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return getScoreBadgeFromAccuracy(acc).color;
+    },
+    create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      const scoreBadge = getScoreBadgeFromAccuracy(acc);
+      let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
+      if (scoreBadge.max == null) {
+        accDetails += ` (> ${scoreBadge.min}%)`;
+      } else if (scoreBadge.min == null) {
+        accDetails += ` (< ${scoreBadge.max}%)`;
+      } else {
+        accDetails += ` (${scoreBadge.min}% - ${scoreBadge.max}%)`;
+      }
+
+      return (
+        <>
+          <Tooltip
+            display={
+              <div>
+                <p>{accDetails}</p>
+              </div>
+            }
+          >
+            <p className="cursor-default">{acc.toFixed(2)}%</p>
+          </Tooltip>
+        </>
+      );
+    },
+  },
+  {
+    name: "Score",
+    create: (score: ScoreSaberScoreToken) => {
+      return `${formatNumberWithCommas(score.baseScore)}`;
+    },
+  },
+  {
+    name: "",
+    create: () => undefined,
+  },
+  {
+    name: "",
+    create: () => undefined,
+  },
+  {
+    name: "Full Combo",
+    create: (score: ScoreSaberScoreToken) => {
+      const fullCombo = score.missedNotes === 0;
+
+      return (
+        <>
+          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+        </>
+      );
+    },
+  },
+];
+
+type Props = {
+  score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function ScoreStats({ score, leaderboard }: Props) {
+  return (
+    <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
+      <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
+    </div>
+  );
+}
--- a/projects/website/src/components/score/score.tsx
+++ b/projects/website/src/components/score/score.tsx
@ -0,0 +1,69 @@
+"use client";
+
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import ScoreSaberPlayerScoreToken from "@/common/model/token/scoresaber/score-saber-player-score-token";
+import { beatsaverService } from "@/common/service/impl/beatsaver";
+import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
+import { useCallback, useEffect, useState } from "react";
+import ScoreButtons from "./score-buttons";
+import ScoreSongInfo from "./score-info";
+import ScoreRankInfo from "./score-rank-info";
+import ScoreStats from "./score-stats";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { motion } from "framer-motion";
+
+type Props = {
+  /**
+   * The player who set the score.
+   */
+  player?: ScoreSaberPlayer;
+
+  /**
+   * The score to display.
+   */
+  playerScore: ScoreSaberPlayerScoreToken;
+};
+
+export default function Score({ player, playerScore }: Props) {
+  const { score, leaderboard } = playerScore;
+  const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
+  const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false);
+
+  const fetchBeatSaverData = useCallback(async () => {
+    const beatSaverMap = await beatsaverService.lookupMap(leaderboard.songHash);
+    setBeatSaverMap(beatSaverMap);
+  }, [leaderboard.songHash]);
+
+  useEffect(() => {
+    fetchBeatSaverData();
+  }, [fetchBeatSaverData]);
+
+  const page = Math.floor(score.rank / 12) + 1;
+  return (
+    <div className="pb-2 pt-2">
+      <div
+        className={`grid w-full gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_1fr_300px]`}
+      >
+        <ScoreRankInfo score={score} />
+        <ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} />
+        <ScoreButtons
+          leaderboard={leaderboard}
+          beatSaverMap={beatSaverMap}
+          isLeaderboardExpanded={isLeaderboardExpanded}
+          setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+        />
+        <ScoreStats score={score} leaderboard={leaderboard} />
+      </div>
+      {isLeaderboardExpanded && (
+        <motion.div
+          initial={{ opacity: 0, y: -50 }}
+          exit={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="w-full mt-2"
+        >
+          <LeaderboardScores initialPage={page} player={player} leaderboard={leaderboard} />
+        </motion.div>
+      )}
+    </div>
+  );
+}
--- a/projects/website/src/components/settings/settings.tsx
+++ b/projects/website/src/components/settings/settings.tsx
@ -0,0 +1,80 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "../ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import { useEffect } from "react";
+import { useToast } from "@/hooks/use-toast";
+
+const formSchema = z.object({
+  backgroundCover: z.string().min(0).max(128),
+});
+
+export default function Settings() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+  const { toast } = useToast();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  /**
+   * Handles the form submission
+   *
+   * @param backgroundCover the new background cover
+   */
+  async function onSubmit({ backgroundCover }: z.infer<typeof formSchema>) {
+    if (!settings) {
+      return;
+    }
+
+    settings.backgroundCover = backgroundCover;
+    await database.setSettings(settings);
+
+    toast({
+      title: "Settings saved",
+      description: "Your settings have been saved.",
+      variant: "success",
+    });
+  }
+
+  /**
+   * Handle setting the default form values.
+   */
+  useEffect(() => {
+    form.setValue("backgroundCover", settings?.backgroundCover || "");
+  }, [settings, form]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-2">
+          {/* Background Cover */}
+          <FormField
+            control={form.control}
+            name="backgroundCover"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Background Cover</FormLabel>
+                <FormControl>
+                  <Input className="w-full sm:w-72 text-sm" placeholder="Hex or URL..." {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          {/* Saving Settings */}
+          <Button type="submit" className="w-fit">
+            Save
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
--- a/projects/website/src/components/stat-value.tsx
+++ b/projects/website/src/components/stat-value.tsx
@ -0,0 +1,40 @@
+import clsx from "clsx";
+
+type Props = {
+  /**
+   * The stat name.
+   */
+  name?: string;
+
+  /**
+   * The background color of the stat.
+   */
+  color?: string;
+
+  /**
+   * The value of the stat.
+   */
+  value: React.ReactNode;
+};
+
+export default function StatValue({ name, color, value }: Props) {
+  return (
+    <div
+      className={clsx(
+        "flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm cursor-default",
+        color ? color : "bg-accent"
+      )}
+      style={{
+        backgroundColor: (!color?.includes("bg") && color) || undefined,
+      }}
+    >
+      {name && (
+        <>
+          <p>{name}</p>
+          <div className="h-4 w-[1px] bg-primary" />
+        </>
+      )}
+      <div className="flex gap-1 items-center">{typeof value === "string" ? <p>{value}</p> : value}</div>
+    </div>
+  );
+}
--- a/projects/website/src/components/tooltip.tsx
+++ b/projects/website/src/components/tooltip.tsx
@ -0,0 +1,27 @@
+import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  /**
+   * What will trigger the tooltip
+   */
+  children: React.ReactNode;
+
+  /**
+   * What will be displayed in the tooltip
+   */
+  display: React.ReactNode;
+
+  /**
+   * Where the tooltip will be displayed
+   */
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+export default function Tooltip({ children, display, side = "top" }: Props) {
+  return (
+    <ShadCnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side}>{display}</TooltipContent>
+    </ShadCnTooltip>
+  );
+}
--- a/projects/website/src/components/ui/avatar.tsx
+++ b/projects/website/src/components/ui/avatar.tsx
@ -0,0 +1,40 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };
--- a/projects/website/src/components/ui/button.tsx
+++ b/projects/website/src/components/ui/button.tsx
@ -0,0 +1,47 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/projects/website/src/components/ui/card.tsx
+++ b/projects/website/src/components/ui/card.tsx
@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  )
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
--- a/projects/website/src/components/ui/form.tsx
+++ b/projects/website/src/components/ui/form.tsx
@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
+
+import { cn } from "@/common/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  }
+);
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return (
+      <p ref={ref} id={formDescriptionId} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} />
+    );
+  }
+);
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p
+        ref={ref}
+        id={formMessageId}
+        className={cn("text-[0.8rem] font-medium text-destructive", className)}
+        {...props}
+      >
+        {body}
+      </p>
+    );
+  }
+);
+FormMessage.displayName = "FormMessage";
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
--- a/projects/website/src/components/ui/input.tsx
+++ b/projects/website/src/components/ui/input.tsx
@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };
--- a/projects/website/src/components/ui/label.tsx
+++ b/projects/website/src/components/ui/label.tsx
@ -0,0 +1,19 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/projects/website/src/components/ui/pagination.tsx
+++ b/projects/website/src/components/ui/pagination.tsx
@ -0,0 +1,79 @@
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1", className)} {...props}>
+    <ChevronLeftIcon className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1", className)} {...props}>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
--- a/projects/website/src/components/ui/scroll-area.tsx
+++ b/projects/website/src/components/ui/scroll-area.tsx
@ -0,0 +1,40 @@
+"use client";
+
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/projects/website/src/components/ui/toast.tsx
+++ b/projects/website/src/components/ui/toast.tsx
@ -0,0 +1,114 @@
+"use client";
+
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed bottom-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-secondary text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+        success: "border bg-green-600 text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <Cross2Icon className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold [&+div]:text-xs", className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  type ToastActionElement,
+  type ToastProps,
+};
--- a/projects/website/src/components/ui/toaster.tsx
+++ b/projects/website/src/components/ui/toaster.tsx
@ -0,0 +1,26 @@
+"use client";
+
+import { useToast } from "@/hooks/use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
--- a/projects/website/src/components/ui/tooltip.tsx
+++ b/projects/website/src/components/ui/tooltip.tsx
@ -0,0 +1,30 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/common/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };