diff --git a/projects/website/src/components/leaderboard/leaderboard-score.tsx b/projects/website/src/components/leaderboard/leaderboard-score.tsx
index ad37a11..241a173 100644
--- a/projects/website/src/components/leaderboard/leaderboard-score.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-score.tsx
@@ -26,7 +26,7 @@ export default function LeaderboardScore({ score, claimedPlayer }: Props) {
 
       {/* Player */}
       <td className="px-4 py-2 flex gap-2 whitespace-nowrap">
-        <PlayerInfo player={scorePlayer} claimedPlayer={claimedPlayer} />
+        <PlayerInfo player={scorePlayer} highlightedPlayer={claimedPlayer} />
       </td>
 
       {/* Time Set */}
diff --git a/projects/website/src/components/player/player-info.tsx b/projects/website/src/components/player/player-info.tsx
index 79a1de0..0422b73 100644
--- a/projects/website/src/components/player/player-info.tsx
+++ b/projects/website/src/components/player/player-info.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token";
 import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
+import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 
 type TablePlayerProps = {
   /**
@@ -12,9 +13,9 @@ type TablePlayerProps = {
   player: ScoreSaberPlayerToken | ScoreSaberLeaderboardPlayerInfoToken;
 
   /**
-   * The claimed player.
+   * The player to highlight.
    */
-  claimedPlayer?: ScoreSaberPlayerToken;
+  highlightedPlayer?: ScoreSaberPlayerToken | ScoreSaberPlayer;
 
   /**
    * Hide the country flag
@@ -22,7 +23,7 @@ type TablePlayerProps = {
   hideCountryFlag?: boolean;
 };
 
-export function PlayerInfo({ player, claimedPlayer, hideCountryFlag }: TablePlayerProps) {
+export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: TablePlayerProps) {
   return (
     <>
       <Avatar className="w-[24px] h-[24px] pointer-events-none">
@@ -34,7 +35,7 @@ export function PlayerInfo({ player, claimedPlayer, hideCountryFlag }: TablePlay
       {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
       <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
         <p
-          className={player.id == claimedPlayer?.id ? "font-bold" : ""}
+          className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
           style={{
             color: getScoreSaberRole(player)?.color,
           }}
diff --git a/projects/website/src/components/ranking/mini.tsx b/projects/website/src/components/ranking/mini.tsx
index b442446..6df6497 100644
--- a/projects/website/src/components/ranking/mini.tsx
+++ b/projects/website/src/components/ranking/mini.tsx
@@ -40,7 +40,7 @@ type Variants = {
 
 const miniVariants: Variants = {
   Global: {
-    icon: () => <GlobeAmericasIcon className="w-6 h-6" />,
+    icon: () => <GlobeAmericasIcon className="w-5 h-5" />,
   },
   Country: {
     icon: (player: ScoreSaberPlayer) => {
@@ -79,12 +79,12 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
   }
 
   return (
-    <Card className="w-full flex gap-2 sticky select-none">
+    <Card className="w-full flex gap-2 sticky select-none text-sm">
       <div className="flex gap-2">
         {icon}
         <p>{type} Ranking</p>
       </div>
-      <div className="flex flex-col text-sm">
+      <div className="flex flex-col text-xs">
         {response.players.map((playerRanking, index) => {
           const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
           const playerName =
@@ -101,7 +101,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">
-                <PlayerInfo player={playerRanking} claimedPlayer={claimedPlayer} hideCountryFlag />
+                <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag />
               </div>
               <div className="inline-flex min-w-[11.5em] gap-2 items-center">
                 <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>
diff --git a/projects/website/src/components/ranking/player-ranking.tsx b/projects/website/src/components/ranking/player-ranking.tsx
index cd12a25..426c9e2 100644
--- a/projects/website/src/components/ranking/player-ranking.tsx
+++ b/projects/website/src/components/ranking/player-ranking.tsx
@@ -26,7 +26,7 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
         <span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span>
       </td>
       <td className="flex items-center gap-2 px-4 py-2">
-        <PlayerInfo player={player} claimedPlayer={claimedPlayer} />
+        <PlayerInfo player={player} highlightedPlayer={claimedPlayer} />
       </td>
       <td className="px-4 py-2 text-pp text-center">{formatPp(player.pp)}pp</td>
       <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>