diff --git a/client/src/assets/css/base.css b/client/src/assets/css/base.css
index c40c309..20bcde1 100644
--- a/client/src/assets/css/base.css
+++ b/client/src/assets/css/base.css
@@ -54,3 +54,7 @@ button:focus {
   );
   box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset;
 }
+
+.input-color {
+  background: rgba(23, 49, 79, 0.6);
+}
diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index 08ada3c..4f2f175 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -27,8 +27,8 @@
   transition-timing-function: cubic-bezier(.55, .085, .68, .53);
 }
 
-.scale-70 {
-  transform: scale(.7);
+.scale-90 {
+  transform: scale(.9);
 }
 
 .scale-100 {
diff --git a/client/src/components/SVGContainer.vue b/client/src/components/SVGContainer.vue
index ff8332f..73406fc 100644
--- a/client/src/components/SVGContainer.vue
+++ b/client/src/components/SVGContainer.vue
@@ -6,5 +6,6 @@
     <symbol id="award" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 5.81 26.43-4.96l52.05-127.62c-10.84 6.04-22.87 9.58-35.31 9.58-19.5 0-37.82-7.59-51.61-21.37zM382.8 448.7l-45.37-111.24c-7.56 5.88-15.92 10.77-25.43 13.32-21.07 5.64-16.45 3.18-25.12 11.85-13.79 13.78-32.12 21.37-51.62 21.37-12.44 0-24.47-3.55-35.31-9.58L252 502.04c4.39 10.77 18.44 13.4 26.43 4.96l36.25-38.28 52.69 2.01c11.62.44 19.82-11.27 15.43-22.03zM263 340c15.28-15.55 17.03-14.21 38.79-20.14 13.89-3.79 24.75-14.84 28.47-28.98 7.48-28.4 5.54-24.97 25.95-45.75 10.17-10.35 14.14-25.44 10.42-39.58-7.47-28.38-7.48-24.42 0-52.83 3.72-14.14-.25-29.23-10.42-39.58-20.41-20.78-18.47-17.36-25.95-45.75-3.72-14.14-14.58-25.19-28.47-28.98-27.88-7.61-24.52-5.62-44.95-26.41-10.17-10.35-25-14.4-38.89-10.61-27.87 7.6-23.98 7.61-51.9 0-13.89-3.79-28.72.25-38.89 10.61-20.41 20.78-17.05 18.8-44.94 26.41-13.89 3.79-24.75 14.84-28.47 28.98-7.47 28.39-5.54 24.97-25.95 45.75-10.17 10.35-14.15 25.44-10.42 39.58 7.47 28.36 7.48 24.4 0 52.82-3.72 14.14.25 29.23 10.42 39.59 20.41 20.78 18.47 17.35 25.95 45.75 3.72 14.14 14.58 25.19 28.47 28.98C104.6 325.96 106.27 325 121 340c13.23 13.47 33.84 15.88 49.74 5.82a39.676 39.676 0 0 1 42.53 0c15.89 10.06 36.5 7.65 49.73-5.82zM97.66 175.96c0-53.03 42.24-96.02 94.34-96.02s94.34 42.99 94.34 96.02-42.24 96.02-94.34 96.02-94.34-42.99-94.34-96.02z"></path></symbol>
     <symbol id="gold" class="fill-current" viewBox="0 0 15 15" fill="fill-current"><title>gold</title><path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" /></symbol>
     <symbol id="rank-silver" viewBox="0 0 32 32"><title>rank-silver</title><path fill="#80989d" d="M16 6.667c0 0 0.986 1.479 2.534 3.165-0.781-0.321-1.637-0.498-2.534-0.498s-1.753 0.177-2.534 0.498c1.548-1.686 2.534-3.165 2.534-3.165z"></path><path fill="#80989d" d="M22.667 16c0-2.22-1.085-4.186-2.753-5.398 1.976-0.343 6.753-1.935 6.753-1.935 0 1.761-1.034 6.626-4.013 7.761 0.009-0.141 0.013-0.284 0.013-0.428z"></path><path fill="#80989d" d="M19.308 21.789c1.752-1.003 3.005-2.78 3.295-4.864 1.185 0.187 2.73 0.408 2.73 0.408s-1.135 3.406-6.025 4.456z"></path><path fill="#80989d" d="M16 22.667c0.617 0 1.215-0.084 1.782-0.241-0.406 0.781-1.282 2.407-1.782 2.907-0.5-0.5-1.376-2.127-1.782-2.907 0.567 0.157 1.165 0.241 1.782 0.241z"></path><path fill="#80989d" d="M9.392 16.89c0.28 2.1 1.537 3.89 3.3 4.899-4.89-1.050-6.025-4.456-6.025-4.456s1.554-0.25 2.726-0.444z"></path><path fill="#80989d" d="M9.333 16c0 0.129 0.004 0.258 0.011 0.386-2.977-1.324-4.011-6.91-4.011-7.719 0 0 4.777 1.592 6.753 1.935-1.669 1.212-2.753 3.178-2.753 5.398z"></path><path fill="#80989d" d="M20 16c0 2.209-1.791 4-4 4s-4-1.791-4-4c0-2.209 1.791-4 4-4s4 1.791 4 4z"></path></symbol>
+    <symbol id="time" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></symbol>
   </svg>
 </template>
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index e48137a..250a380 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -5,18 +5,18 @@
       <input
         v-model="summoner"
         type="text"
-        :class="[elementClasses, inputClasses]"
-        class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold"
+        :class="[inputClasses]"
+        class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
       />
-      <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2">
+      <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12">
         <div
           @click="dropdown = !dropdown"
-          :class="{'bg-teal-600' : dropdown}"
-          class="cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
+          :class="{'border-teal-200': dropdown}"
+          class="border-2 border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
         >
           <span class="selected font-bold select-none">{{ selectedRegion }}</span>
           <svg
-            class="ml-1 w-4 h-4 fill-current"
+            class="ml-1 -mr-1 w-4 h-4 fill-current"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 320 512"
           >
@@ -29,21 +29,22 @@
       <transition
         enter-active-class="transition-all transition-fastest ease-out-quad"
         leave-active-class="transition-all transition-faster ease-in-quad"
-        enter-class="opacity-0 scale-70"
+        enter-class="opacity-0 scale-90"
         enter-to-class="opacity-100 scale-100"
         leave-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-70"
+        leave-to-class="opacity-0 scale-90"
       >
         <div
-          v-if="dropdown"
-          class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown"
+          v-show="dropdown"
+          :class="[dropdownClasses]"
+          class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
         >
           <div
             v-for="(region, index) in regions"
             :key="region"
             @click="selectedRegion = region"
             :class="classRegions(index)"
-            class="relative px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
+            class="relative pr-2 pl-5 py-1 text-xs text-right bg-blue-1000 hover:bg-blue-800"
           >
             <svg
               v-if="region === selectedRegion"
@@ -59,23 +60,22 @@
           </div>
         </div>
       </transition>
-    </div>
-
-    <button
-      :class="[elementClasses, btnClasses]"
-      class="input btn rounded-lg ml-2 relative"
-      type="submit"
-    >
-      <svg
-        class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 512 512"
+      <button
+        :class="[btnClasses]"
+        class="absolute right-0 z-30 h-full hover:text-teal-200"
+        type="submit"
       >
-        <path
-          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-        />
-      </svg>
-    </button>
+        <svg
+          class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+          />
+        </svg>
+      </button>
+    </div>
   </form>
 </template>
 
@@ -110,32 +110,33 @@ export default {
   computed: {
     btnClasses() {
       return {
-        'w-12': this.size === 'small',
-        'w-20': this.size === 'xl'
-      }
-    },
-    elementClasses() {
-      return {
-        'border-2': this.size === 'small',
-        'border-4': this.size === 'xl'
+        'w-8 mr-3': this.size === 'small',
+        'w-12': this.size === 'xl'
       }
     },
     formClasses() {
       return {
-        'max-w-lg': this.size === 'small',
+        'max-w-md': this.size === 'small',
       }
     },
     inputClasses() {
       return {
-        'py-2': this.size === 'small',
-        'py-4': this.size === 'xl'
+        'py-2 px-1': this.size === 'small',
+        'py-4 px-2': this.size === 'xl',
+        'input-color': !this.dropdown,
+        'bg-blue-1000': this.dropdown
+      }
+    },
+    dropdownClasses() {
+      return {
+        'offsetDropDown': this.size === 'small',
+        'offsetDropDownXl': this.size === 'xl'
       }
     }
   },
   methods: {
     classRegions(index) {
       return {
-        'rounded-t': index === 0,
         'rounded-b': index === this.regions.length - 1
       }
     },
@@ -151,22 +152,16 @@ export default {
 
 <style scoped>
 .offsetDropDown {
-  top: 57px;
-  right: 1px;
+  top: 43px;
+  right: 48px;
+}
+
+.offsetDropDownXl {
+  top: 58px;
+  right: 50px;
 }
 
 .offsetIcon {
   left: 4px;
 }
-
-.input {
-  border-color: rgba(129, 230, 217, 0.7);
-  background: rgba(40, 94, 97, 0.35);
-}
-
-.input:focus,
-.btn:hover {
-  background: rgba(40, 94, 97, 0.75);
-  border-color: rgba(129, 230, 217, 0.9);
-}
 </style>
diff --git a/client/src/components/Summoner/RecentActivity.vue b/client/src/components/Summoner/RecentActivity.vue
index 07a4c22..bdabed0 100644
--- a/client/src/components/Summoner/RecentActivity.vue
+++ b/client/src/components/Summoner/RecentActivity.vue
@@ -1,43 +1,53 @@
 <template>
   <div>
-    <div class="inline-block bg-gradient rounded-lg p-3">
-      <h4 class="font-bold text-base text-white text-left">Recent Activity</h4>
-      <div class="flex">
-        <span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span>
-        <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span>
-        <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span>
-        <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</span>
+    <div class="inline-block bg-blue-800 rounded-lg">
+      <div class="relative heading flex justify-center items-center py-2 rounded-t-lg text-blue-200">
+        <svg class="w-4 h-4">
+          <use xlink:href="#time" />
+        </svg>
+        <span class="mx-3 text-sm font-bold uppercase">Recent Activity</span>
+        <svg class="w-4 h-4">
+          <use xlink:href="#time" />
+        </svg>
       </div>
-      <div class="mt-1 flex">
-        <div class="flex flex-col">
-          <span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span>
-          <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span>
+      <div class="p-3 pt-1">
+        <div class="flex">
+          <span class="ml-12 text-blue-200 font-semibold text-xs">{{ gridDays[11].month }}</span>
+          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[42].month }}</span>
+          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[73].month }}</span>
+          <span class="ml-16 text-blue-200 font-semibold text-xs">{{ gridDays[104].month }}</span>
         </div>
-        <div
-          class="ml-2 flex flex-col flex-wrap"
-          style="width: calc(20px * 15); height: calc(20px * 7)"
-        >
-          <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
-            <template v-slot:trigger>
-              <div
-                :class="[getCaseMargin(index), getCaseColor(day.matches)]"
-                class="ml-1 w-4 h-4 cursor-pointer"
-              />
-            </template>
-            <template v-slot:default>
-              <div class="px-2 text-white text-center text-xs">
-                <div>{{ day.date }}</div>
-                <div>
-                  <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
+        <div class="mt-1 flex">
+          <div class="flex flex-col">
+            <span class="text-blue-200 font-semibold text-xs leading-snug">Mo</span>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Tu</span>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">We</span>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Th</span>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Fr</span>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Sa</span>
+            <span class="text-blue-200 font-semibold text-xs leading-snug mt-1">Su</span>
+          </div>
+          <div
+            class="ml-1 flex flex-col flex-wrap"
+            style="width: calc(20px * 15); height: calc(20px * 7)"
+          >
+            <Dropdown v-for="(day, index) in gridDays.slice(indexFirstMonday)" :key="day.timestamp">
+              <template v-slot:trigger>
+                <div
+                  :class="[getCaseMargin(index), getCaseColor(day.matches)]"
+                  class="ml-1 w-4 h-4 cursor-pointer"
+                />
+              </template>
+              <template v-slot:default>
+                <div class="px-2 text-white text-center text-xs">
+                  <div>{{ day.date }}</div>
+                  <div>
+                    <span class="font-bold text-teal-400">{{ day.matches }}</span> game(s)
+                  </div>
                 </div>
-              </div>
-            </template>
-          </Dropdown>
+              </template>
+            </Dropdown>
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/components/Summoner/SummonerLoader.vue b/client/src/components/Summoner/SummonerLoader.vue
index 6020e21..415a91b 100644
--- a/client/src/components/Summoner/SummonerLoader.vue
+++ b/client/src/components/Summoner/SummonerLoader.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="mt-4 text-white pb-12">
-    <div class="flex justify-between px-12">
+  <div class="text-white pb-12">
+    <div class="flex justify-between">
       <div style="width: 517px; height: 272px;">
         <content-loader
           :height="272"
@@ -150,7 +150,7 @@
       </div>
     </div>
 
-    <div class="mt-12 text-center">
+    <div class="mt-4 text-center">
       <div
         v-for="index in 10"
         :key="index"
diff --git a/client/src/components/Summoner/SummonerRanked.vue b/client/src/components/Summoner/SummonerRanked.vue
index c2148ed..a5c09c2 100644
--- a/client/src/components/Summoner/SummonerRanked.vue
+++ b/client/src/components/Summoner/SummonerRanked.vue
@@ -1,55 +1,56 @@
 <template>
-  <div class="ml-6 leading-none">
-    <div class="relative inline-block text-white">
-      <select
-        v-model="selectedKey"
-        class="block appearance-none bg-select w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
-      >
-        <option
-          v-for="(data, leagueName) in ranked"
-          :key="leagueName"
-          :value="leagueName"
-        >{{ data.name }}</option>
-      </select>
-      <div
-        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
-      >
-        <svg
-          class="text-white fill-current h-5 w-5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-        >
-          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-        </svg>
-      </div>
-    </div>
-
-    <div class="mt-1 text-teal-500 text-4xl uppercase font-extrabold">{{ selectedLeague.fullRank }}</div>
-    <div class="mt-4 flex items-start bg-gradient px-4 py-3 rounded-lg" style="width: 430px;">
-      <div class="flex items-center w-1/2">
+  <div class="ml-2 leading-none flex items-center">
+    <div class="ml-1 flex flex-col justify-center">
+      <div class="flex items-center">
         <div
-          class="w-20 h-20 bg-blue-1000"
-          :style="{background: `url(${selectedLeague.rankImgLink}) center/cover`}"
-        ></div>
-        <div class="ml-2 text-xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
-      </div>
-      <div class="flex justify-between w-1/2">
-        <div class="mt-2 font-extrabold uppercase leading-none">
-          <div class="text-teal-500 text-base">Record</div>
-          <div class="flex">
-            <div class="mt-2 text-sm leading-tight text-right">
-              <div>{{ selectedLeague.wins }}</div>
-              <div>{{ selectedLeague.losses }}</div>
-            </div>
-            <div class="ml-2 mt-2 text-sm leading-tight">
-              <div class="text-teal-500">Wins</div>
-              <div class="text-red-300">Losses</div>
-            </div>
+          :style="[borderLeaguePoints, {backgroundColor: colorBorder}]"
+          class="percentage-circle relative w-12 h-12 flex items-center justify-center rounded-full"
+        >
+          <div class="relative w-11 h-11 p-1 bg-blue-900 rounded-full">
+            <div
+              class="h-full bg-center bg-cover"
+              :style="{backgroundImage: `url(${selectedLeague.rankImgLink})`}"
+            ></div>
           </div>
         </div>
-        <div class="mt-2 font-extrabold">
-          <div class="text-teal-500 text-base uppercase">Winrate</div>
-          <div class="mt-2 text-xl leading-tight">{{ selectedLeague.winrate }}</div>
+        <div
+          class="ml-2 text-teal-500 text-3xl uppercase font-extrabold"
+        >{{ selectedLeague.fullRank }}</div>
+        <div class="ml-4 text-2xl font-extrabold">{{ selectedLeague.leaguePoints }} LP</div>
+      </div>
+      <div class="flex mt-2 items-center">
+        <div class="relative inline-block text-white">
+          <select
+            v-model="selectedKey"
+            class="block appearance-none bg-blue-800 hover:bg-blue-700 w-full px-4 py-2 pr-8 rounded-md leading-tight text-lg font-extrabold cursor-pointer focus:outline-none"
+          >
+            <option
+              v-for="(data, leagueName) in ranked"
+              :key="leagueName"
+              :value="leagueName"
+            >{{ data.name }}</option>
+          </select>
+          <div
+            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+          >
+            <svg
+              class="text-white fill-current h-5 w-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+            >
+              <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+            </svg>
+          </div>
+        </div>
+        <div class="ml-2 p-2 flex bg-blue-800 rounded items-center">
+          <div class="text-base uppercase font-bold">Record</div>
+          <div class="ml-2 text-green-400 font-bold">{{ selectedLeague.wins }}</div>
+          <span class="mx-1">-</span>
+          <div class="text-red-400 font-bold">{{ selectedLeague.losses }}</div>
+          <div class="ml-3 text-base uppercase font-bold">Winrate</div>
+          <div
+            :class="['ml-2 text-base leading-tight font-bold', parseFloat(selectedLeague.winrate) >= 50 ? 'text-green-400' : 'text-red-400']"
+          >{{ selectedLeague.winrate }}</div>
         </div>
       </div>
     </div>
@@ -66,11 +67,35 @@ export default {
   },
   data() {
     return {
+      rankColors: {
+        'iron': '#574D4F',
+        'bronze': '#8C523A',
+        'silver': '#80989D',
+        'gold': '#CD8837',
+        'platinum': '#4E9996',
+        'diamond': '#576BCE',
+        'master': '#9D48E0',
+        'grandmaster': '#CD4545',
+        'challenger': '#F4C874',
+      },
       selectedKey: Object.keys(this.ranked)[0]
     }
   },
 
   computed: {
+    borderLeaguePoints() {
+      const degrees = (this.selectedLeague.leaguePoints <= 100 ? this.selectedLeague.leaguePoints : 100) * 360 / 100
+      const linearGradient = degrees <= 180 ? `linear-gradient(${90 + degrees}deg, transparent 50%, #2c5282 50%)` : `linear-gradient(${degrees - 90}deg, transparent 50%, ${this.colorBorder} 50%)`
+      return {
+        backgroundImage: `${linearGradient}, linear-gradient(90deg, #2c5282 50%, transparent 50%)`
+      }
+    },
+    colorBorder() {
+      if (!this.selectedLeague.tier) {
+        return 'transparent'
+      }
+      return this.rankColors[this.selectedLeague.tier.toLowerCase()]
+    },
     selectedLeague() {
       return this.ranked[this.selectedKey]
     }
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 5fec7e6..e31ddab 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -19,8 +19,8 @@
       </header>
 
       <template v-if="summonerFound">
-        <div class="mt-4 text-white pb-12">
-          <div class="flex justify-between px-12">
+        <div class="text-white pb-12">
+          <div class="flex justify-between items-center">
             <div>
               <div class="flex items-center">
                 <h1 class="text-4xl font-extrabold uppercase">
@@ -29,7 +29,7 @@
                 </h1>
                 <div
                   v-if="playing"
-                  class="ml-4 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
+                  class="ml-4 mt-2 flex items-center px-3 py-1 rounded-full bg-teal-800 border border-teal-400"
                 >
                   <div class="playing-dot bg-teal-flashy w-2 h-2 rounded-full"></div>
                   <span class="ml-2 text-teal-flashy font-semibold text-sm">In Game</span>
@@ -60,7 +60,7 @@
             </div>
           </div>
 
-          <div class="mt-12 text-center flex">
+          <div class="mt-3 text-center flex">
             <div class="mt-4 w-3/12">
               <SummonerStats />
               <SummonerMates />
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index dd53b0c..a77b989 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -142,6 +142,7 @@ module.exports = {
       '6': '1.5rem',
       '8': '2rem',
       '10': '2.5rem',
+      '11': '2.75rem',
       '12': '3rem',
       '16': '4rem',
       '20': '5rem',