diff --git a/src/components/app/scores/table.vue b/src/components/app/scores/table.vue
index 6c4e4d84c..05b264e50 100644
--- a/src/components/app/scores/table.vue
+++ b/src/components/app/scores/table.vue
@@ -41,96 +41,95 @@ fr-FR:
 </i18n>
 
 <template>
-  <table class="table table-compact table-zebra">
-    <thead>
-      <tr>
-        <th scope="col">
-          {{ $t('global.player') }}
-        </th>
-        <th scope="col" class="text-right">
-          {{ $t('global.rank') }}
-        </th>
-        <th scope="col" class="text-right">
-          {{ $t('global.mods') }}
-        </th>
-        <th scope="col" class="text-right">
-          {{ $t(localeKey.rankingSystem(Rank.Score)) }}
-        </th>
-        <th v-if="rankingSystem !== Rank.Score" scope="col" class="text-right">
-          {{ $t(localeKey.rankingSystem(rankingSystem)) }}
-        </th>
-        <th scope="col">
-          {{ $t('global.played-at') }}
-        </th>
-        <th scope="col" class="text-center">
-          {{ t('actions') }}
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <template v-if="props.scores.length">
-        <tr v-for="(item, index) in props.scores" :key="index">
-          <th scope="row">
-            <div class="flex gap-2 items-center">
-              <div class="aspect-square mask mask-squircle flex">
-                <img
-                  class="m-auto"
-                  :src="item.user.avatarSrc"
-                  :alt="item.user.name"
-                  width="30"
-                >
-              </div>
-              <nuxt-link-locale
-                :to="{
-                  name: 'user-handle',
-                  params: { handle: item.user.safeName },
-                }"
-                :class="useUserRoleColor(item.user)"
-              >
-                {{ item.user.name }}
-              </nuxt-link-locale>
-            </div>
-          </th>
-          <td class="text-right">
-            #{{ index + 1 }}
-          </td>
-          <td class="flex justify-end gap-1 tooltip tooltip-primary lg:tooltip-right" :data-tip="item.score.mods.map(m => StableMod[m]).join(', ')">
-            <app-mod v-for="mod in item.score.mods" :key="mod" :mod="mod" class="w-6 h-6" />
-          </td>
-          <td class="text-right font-mono">
-            {{ comma(item.score.score) }}
-          </td>
-          <td v-if="rankingSystem === Rank.PPv2" class="text-right font-mono">
-            {{ pp(item.score[Rank.PPv2] || 0) }}
-          </td>
-          <td v-else-if="rankingSystem === Rank.PPv1" class="text-right font-mono">
-            {{ pp(item.score[Rank.PPv2] || 0) }}
-          </td>
-          <td class="font-mono">
-            {{ item.score.playedAt.toLocaleDateString() }}
-            {{ item.score.playedAt.toLocaleTimeString() }}
-          </td>
-          <td class="text-center">
-            <div class="btn-group">
-              <a :href="`/replay/${item.score.id}/download`" class="btn btn-ghost btn-sm align-middle">
-                Replay <icon name="line-md:download-loop" class="w-4 h-4" />
-              </a>
-              <nuxt-link-locale :to="`/score/${item.score.id}`" class="btn btn-ghost btn-sm align-middle">
-                Detail <icon name="fa-solid:expand" class="w-4 h-4" />
-              </nuxt-link-locale>
-            </div>
-          </td>
-        </tr>
-      </template>
-      <template v-else>
+  <div class="overflow-x-auto">
+    <table class="table table-zebra">
+      <thead>
         <tr>
-          <th colspan="6" scope="row">
-            <div class="text-center">
-              {{ t('no-score') }}
-            </div>
+          <th scope="col" class="text-right">
+            {{ $t('global.rank') }}
+          </th>
+          <th scope="col">
+            {{ $t('global.player') }}
+          </th>
+          <th scope="col" class="text-right">
+            {{ $t('global.mods') }}
+          </th>
+          <th scope="col" class="text-right">
+            {{ $t(localeKey.rankingSystem(Rank.Score)) }}
+          </th>
+          <th v-if="rankingSystem !== Rank.Score" scope="col" class="text-right">
+            {{ $t(localeKey.rankingSystem(rankingSystem)) }}
+          </th>
+          <th scope="col">
+            {{ $t('global.played-at') }}
+          </th>
+          <th scope="col">
+            {{ t('actions') }}
           </th>
         </tr>
-      </template>
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        <template v-if="props.scores.length">
+          <tr v-for="(item, index) in props.scores" :key="index">
+            <td class="text-right">
+              #{{ index + 1 }}
+            </td>
+            <th scope="row">
+              <div class="flex items-center space-x-3">
+                <div class="avatar">
+                  <div class="mask mask-squircle w-8 h-8">
+                    <img :src="item.user.avatarSrc" alt="avatar">
+                  </div>
+                </div>
+                <div>
+                  <nuxt-link-locale class="font-bold whitespace-nowrap" :class="useUserRoleColor(item.user)" :to="{ name: 'user-handle', params: { handle: `@${item.user.safeName}` } }">
+                    {{ item.user.name }}
+                  </nuxt-link-locale>
+                  <!-- <div class="text-sm opacity-50 whitespace-nowrap">
+                    {{ toCountryName(item.user.flag || CountryCode.Unknown) }}
+                  </div> -->
+                </div>
+              </div>
+            </th>
+            <td class="flex justify-end gap-1 tooltip tooltip-primary lg:tooltip-right" :data-tip="item.score.mods.map(m => StableMod[m]).join(', ')">
+              <app-mod v-for="mod in item.score.mods" :key="mod" :mod="mod" class="w-6 h-6" />
+            </td>
+            <td class="text-right font-mono">
+              {{ comma(item.score.score) }}
+            </td>
+            <td v-if="rankingSystem === Rank.PPv2" class="text-right font-mono">
+              {{ pp(item.score[Rank.PPv2] || 0) }}
+            </td>
+            <td v-else-if="rankingSystem === Rank.PPv1" class="text-right font-mono">
+              {{ pp(item.score[Rank.PPv1] || 0) }}
+            </td>
+            <td class="font-mono">
+              {{ item.score.playedAt.toLocaleDateString() }}
+              {{ item.score.playedAt.toLocaleTimeString() }}
+            </td>
+            <td class="text-center">
+              <div class="flex gap-2">
+                <a :href="`/replay/${item.score.id}/download`" class="link link-hover">
+                  Replay <icon name="line-md:download-loop" class="w-4 h-4" />
+                </a>
+                <!-- TODO convert to model -->
+                <nuxt-link-locale :to="`/score/${item.score.id}`" class="link link-hover">
+                  Detail <icon name="fa-solid:expand" class="w-4 h-4" />
+                </nuxt-link-locale>
+              </div>
+            </td>
+          </tr>
+        </template>
+        <template v-else>
+          <tr>
+            <th colspan="6" scope="row">
+              <div class="text-center">
+                {{ t('no-score') }}
+              </div>
+            </th>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
 </template>
diff --git a/src/pages/admin/users/index.vue b/src/pages/admin/users/index.vue
index 4c2603452..00679744a 100644
--- a/src/pages/admin/users/index.vue
+++ b/src/pages/admin/users/index.vue
@@ -153,7 +153,7 @@ function options<T extends Record<string, string>, TTr extends (key: keyof T, va
     </div>
     <div class="overflow-x-auto border border-base-300 rounded-lg">
       <table
-        class="table" :class="{
+        class="table table-sm table-zebra" :class="{
           loading: pending,
         }"
       >
diff --git a/src/pages/beatmapset/[id].vue b/src/pages/beatmapset/[id].vue
index 954bc947b..23b4f24ab 100644
--- a/src/pages/beatmapset/[id].vue
+++ b/src/pages/beatmapset/[id].vue
@@ -412,21 +412,17 @@ fr-FR:
           </div>
         </div>
       </div>
-    </div>
-    <div class="container custom-container mx-auto mt-4">
       <AppScoresRankingSystemSwitcher
-        ref="scoreRS" v-model="switcher.rankingSystem" :mode="switcher.mode"
-        :ruleset="switcher.ruleset" class="mx-auto" @update:model-value="update"
+        ref="scoreRS"
+        v-model="switcher.rankingSystem" class="mt-2" :mode="switcher.mode"
+        :ruleset="switcher.ruleset" @update:model-value="update"
+      />
+      <app-scores-table
+        v-if="leaderboard" :scores="leaderboard" :ranking-system="switcher.rankingSystem"
+        :class="{
+          'clear-rounded-tl': scoreRS?.rankingSystems[0] === switcher.rankingSystem,
+        }"
       />
-      <div class="overflow-auto">
-        <app-scores-table
-          v-if="leaderboard" :scores="leaderboard" :ranking-system="switcher.rankingSystem" class="w-full"
-          :class="{
-            'clear-rounded-tl':
-              scoreRS?.rankingSystems[0] === switcher.rankingSystem,
-          }"
-        />
-      </div>
     </div>
   </div>
 </template>
diff --git a/src/pages/leaderboard/[[mode]].vue b/src/pages/leaderboard/[[mode]].vue
index 2670913c4..72e2fb622 100755
--- a/src/pages/leaderboard/[[mode]].vue
+++ b/src/pages/leaderboard/[[mode]].vue
@@ -118,7 +118,7 @@ fr-FR:
 </i18n>
 
 <template>
-  <div class="flex flex-col h-full leaderboard custom-container mx-auto">
+  <div class="flex flex-col h-full leaderboard custom-container mx-auto w-full">
     <header-simple-title-with-sub
       id="desc"
       class="container mx-auto custom-container !max-w-4xl"
@@ -147,12 +147,12 @@ fr-FR:
     </header-simple-title-with-sub>
     <div
       v-if="table"
-      class="container flex flex-col mx-auto grow"
+      class="container flex flex-col w-full"
       :class="{
         content: table.length,
       }"
     >
-      <div v-if="table.length" class="relative mx-auto xl:rounded-lg w-full max-w-max">
+      <div v-if="table.length" class="relative mx-auto xl:rounded-lg w-full max-w-max overflow-x-auto">
         <table class="table table-sm px-2 whitespace-nowrap" aria-describedby="desc">
           <thead>
             <tr class="bg-base-100">