Remove icons and overlays from client, I will be doing this on some api

src/app/leaderboards/Leaderboards.css

@@ -5,11 +5,11 @@
 }
 
 .leaderboard-scroll {
-  @apply h-[510px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto max-w-md w-full;
+  @apply h-[510px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-[475px];
 }
 
 .leaderboard-entry {
-  @apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
+  @apply flex items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
 }
 
 .leaderboard-entry p.score {

src/app/leaderboards/page.tsx

@@ -3,20 +3,22 @@
 import { useEffect, useState } from 'react'
 import './Leaderboards.css'
 import axios from 'axios'
-import { LeaderboardEntry } from '../types/LeaderboardEntry'
 import { app } from '@tauri-apps/api'
 import { platform } from '@tauri-apps/plugin-os'
 import { decrypt } from '../util/Encryption'
 import { invoke } from '@tauri-apps/api/core'
+import Image from 'next/image'
+import { LeaderboardResponse } from '../types/LeaderboardResponse'
 
 export default function Leaderboards () {
-  const [leaderboardData, setLeaderboardData] = useState<LeaderboardEntry[]>([])
+  const [leaderboardData, setLeaderboardData] =
+    useState<LeaderboardResponse | null>(null)
   const [loading, setLoading] = useState(true)
   const formatter = new Intl.NumberFormat('en-US')
 
   async function refresh () {
     setLoading(true)
-    setLeaderboardData([])
+    setLeaderboardData(null)
     try {
       const launcherVersion = await app.getVersion()
       const response = await axios.get(
@@ -40,7 +42,7 @@ export default function Leaderboards () {
 
   function downloadLeaderboard () {
     let content = '"Username","Score","ScoreFormatted"\n'
-    leaderboardData.forEach(entry => {
+    leaderboardData?.entries.forEach(entry => {
       content += `"${entry.username}","${entry.value}","${formatter.format(
         BigInt(entry.value)
       )}"\n`
@@ -63,7 +65,7 @@ export default function Leaderboards () {
           <button
             className='button text-3xl'
             onClick={downloadLeaderboard}
-            disabled={loading || leaderboardData.length === 0}
+            disabled={loading || leaderboardData?.entries.length === 0}
           >
             Download Leaderboards
           </button>
@@ -78,13 +80,26 @@ export default function Leaderboards () {
       </div>
       <div className='leaderboard-container'>
         <div className='leaderboard-scroll'>
-          {leaderboardData.length ? (
+          {leaderboardData?.entries.length ? (
-            leaderboardData.map((entry, i) => (
+            leaderboardData.entries.map((entry, i) => (
-              <div key={i} className='leaderboard-entry'>
+              <div key={i} className='leaderboard-entry justify-between'>
-                <p>
+                <div className='flex items-center gap-2'>
-                  {entry.username} (#{i + 1})
+                  {/* <Image
-                </p>
+                    src={}
-                <p className='score'>{formatter.format(BigInt(entry.value))}</p>
+                    width={28}
+                    height={28}
+                    alt=''
+                    className='scale-x-[-1] -ml-2'
+                  /> */}
+                  <p>
+                    {entry.username} (#{i + 1})
+                  </p>
+                </div>
+                <div>
+                  <p className='score'>
+                    {formatter.format(BigInt(entry.value))}
+                  </p>
+                </div>
               </div>
             ))
           ) : loading ? (

src/app/types/LeaderboardEntry.ts

@@ -6,4 +6,5 @@ export interface LeaderboardEntry {
   overlay: number
   birdColor: number[]
   overlayColor: number[]
+  customIcon: string | null
 }

src/app/types/LeaderboardResponse.ts

@@ -0,0 +1,6 @@
+import { LeaderboardEntry } from './LeaderboardEntry'
+
+export interface LeaderboardResponse {
+  entries: LeaderboardEntry[]
+  customIcons: Record<string, string>
+}