diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index 7b1a582..c08a77d 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -5,9 +5,9 @@
         <div
           ref="leagueBorder"
           :style="{ backgroundColor: colorBorder }"
-          class="percentage-circle relative flex h-12 w-12 items-center justify-center rounded-full"
+          class="percentage-circle flex size-12 items-center justify-center rounded-full"
         >
-          <div class="relative h-11 w-11 rounded-full bg-blue-900 p-1">
+          <div class="relative size-11 rounded-full bg-blue-900 p-1">
             <div
               class="mt-0.5 h-full bg-cover bg-center"
               :style="{ backgroundImage: `url(${selectedLeague.rankImgLink})` }"
@@ -16,8 +16,8 @@
         </div>
         <div class="ml-2 text-3xl font-bold uppercase text-teal-500">
           {{ selectedLeague.fullRank }}
+          <span class="ml-2 text-2xl text-white">{{ selectedLeague.leaguePoints }} LP</span>
         </div>
-        <div class="ml-4 text-2xl font-bold">{{ selectedLeague.leaguePoints }} LP</div>
         <div
           v-if="selectedLeague.miniSeries"
           class="ml-2 flex items-center rounded bg-blue-800 p-2"
@@ -30,11 +30,11 @@
           ></div>
         </div>
       </div>
-      <div class="mt-2 flex items-center">
-        <div class="relative inline-block text-white">
+      <div class="mt-2 flex items-center gap-2">
+        <div class="relative inline text-white shadow-sm">
           <select
             v-model="selectedKey"
-            class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 px-4 py-2 pr-8 text-lg font-bold leading-tight hover:bg-blue-700 focus:outline-none"
+            class="block w-full cursor-pointer appearance-none rounded-md bg-blue-800 py-2 pl-4 pr-8 font-bold leading-tight hover:bg-blue-700 focus:outline-none"
           >
             <option v-for="(data, leagueName) in ranked" :key="leagueName" :value="leagueName">
               {{ data.name }}
@@ -43,16 +43,16 @@
           <div
             class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
           >
-            <svg class="h-5 w-5 text-white">
+            <svg class="size-5 text-white">
               <use xlink:href="#chevron-down" />
             </svg>
           </div>
         </div>
-        <div class="ml-2 flex items-center rounded bg-blue-800 p-2">
+        <div class="flex items-center rounded bg-blue-800 px-4 py-2 shadow-sm">
           <div class="text-base font-semibold uppercase">Record</div>
-          <div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}</div>
+          <div class="ml-2 font-semibold text-green-400">{{ selectedLeague.wins }}W</div>
           <span class="mx-1">-</span>
-          <div class="font-semibold text-red-400">{{ selectedLeague.losses }}</div>
+          <div class="font-semibold text-red-400">{{ selectedLeague.losses }}L</div>
           <div class="ml-3 text-base font-semibold uppercase">Winrate</div>
           <div
             :class="[