diff --git a/client/src/components/Summoner/Records/RecordCard.vue b/client/src/components/Summoner/Records/RecordCard.vue
index 758da1b..8459da0 100644
--- a/client/src/components/Summoner/Records/RecordCard.vue
+++ b/client/src/components/Summoner/Records/RecordCard.vue
@@ -7,26 +7,42 @@
         `${hover ? gradientHover : gradient},
          url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion.id}/${record.champion.id}000.jpg')`
     }"
-    class="w-full p-2 mx-2 mt-6 leading-none bg-center bg-cover rounded-lg record-card"
+    :class="borderColor"
+    class="relative w-full p-4 mx-2 mt-6 leading-none bg-center bg-cover border rounded-lg record-card"
   >
-    <div class="text-5xl">{{ record[property] }}</div>
-    <div>
-      <span class="text-gray-500">{{ title.substr(0, title.indexOf(' ')) }}</span>
-      <span :class="color" class="ml-1">{{ title.substr(title.indexOf(' ') + 1) }}</span>
+    <div
+      :class="[
+        {'bg-blue-1000 bg-opacity-75': hover},
+        title.length > 15 ? 'text-sm' : 'text-base'
+      ]"
+      :style="{borderColor: hover ? color : 'transparent'}"
+      class="absolute top-0 left-0 px-3 py-2 mt-2 ml-2 font-medium leading-4 transition-colors duration-500 ease-in-out border border-transparent rounded-md"
+    >
+      <span :class="textColor" class="ml-0">{{ title }}</span>
     </div>
+    <img
+      :src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion.id}.png`"
+      :class="[{'opacity-0 scale-125': hover}, borderColor]"
+      class="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full"
+      alt="Champion Played"
+    />
+    <div :style="{textShadow: `-2px 1px 6px ${color}`}" class="mt-6 text-4xl">{{ record[property] }}</div>
+
     <div class="text-sm">
-      <div class="mt-3">
+      <div class="mt-6">
         <span
           :class="record.result === 'Win' ? 'text-green-400' : 'text-red-400'"
-        >{{ record.result === 'Win' ? 'won' : 'lost' }}</span>
-        <span class="ml-1 font-bold">{{ timeDifference(record.date) }}</span>
+        >{{ record.result === 'Win' ? 'Won' : 'Lost' }}</span>
+        <span class="ml-1 font-semibold">{{ timeDifference(record.date) }}</span>
       </div>
-      <div class="text-gray-500">
-        as
-        <span class="font-bold text-white">{{ record.champion.name }}</span>
+      <div class="mt-2 text-gray-500">
+        As
+        <span class="font-semibold text-white">{{ record.champion.name }}</span>
       </div>
     </div>
-    <div class="mt-3 text-sm text-gray-200 opacity-25">match {{ record.gameId }}</div>
+    <div
+      class="mt-6 text-xs font-light text-right text-gray-200 opacity-25"
+    >match {{ record.gameId }}</div>
   </div>
 </template>
 
@@ -35,10 +51,18 @@ import { timeDifference } from '@/helpers/functions.js'
 
 export default {
   props: {
+    borderColor: {
+      type: String,
+      required: true
+    },
     color: {
       type: String,
       required: true
     },
+    textColor: {
+      type: String,
+      required: true
+    },
     property: {
       type: String,
       required: true
@@ -55,7 +79,7 @@ export default {
 
   data() {
     return {
-      gradient: 'linear-gradient(180deg, rgba(42, 67, 101, 0.3) 0%, rgba(42, 67, 101, 0.8) 60%, rgba(42, 67, 101, 1) 100%)',
+      gradient: 'linear-gradient(180deg, rgba(42, 67, 101, 0.8) 0%, rgba(42, 67, 101, 0.95) 60%, rgba(42, 67, 101, 1) 100%)',
       gradientHover: 'linear-gradient(rgba(42, 67, 101, 0.1) 0%, rgba(42, 67, 101, 0.3) 60%, rgba(42, 67, 101, 0.5) 100%)',
       hover: false,
     }
@@ -69,7 +93,7 @@ export default {
 
 <style scoped>
 .record-card {
-  max-width: 18rem;
+  max-width: 11rem;
 }
 
 .record-card:hover {
diff --git a/client/src/views/SummonerRecords.vue b/client/src/views/SummonerRecords.vue
index cbb5ac0..8219a07 100644
--- a/client/src/views/SummonerRecords.vue
+++ b/client/src/views/SummonerRecords.vue
@@ -1,143 +1,169 @@
 <template>
   <div key="records">
     <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
-      <div class="mx-4 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Basics</div>
+      <div
+        class="relative pl-6 text-2xl text-blue-200 border-b-2 border-blue-800 category blue-900"
+      >Basics</div>
       <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
-            color="text-blue-400"
+            color="#63b3ed"
+            text-color="text-blue-400"
+            border-color="border-blue-400"
             property="kda"
             :record="records.maxKda"
-            title="best kda"
+            title="KDA"
           />
           <RecordCard
-            color="text-green-400"
+            color="#68D391"
+            text-color="text-green-400"
+            border-color="border-green-400"
             property="kills"
             :record="records.maxKills"
-            title="most kills"
+            title="Kills"
           />
           <RecordCard
-            color="text-blue-500"
+            color="#9F7AEA"
+            text-color="text-purple-500"
+            border-color="border-purple-500"
             property="assists"
             :record="records.maxAssists"
-            title="most assists"
+            title="Assists"
           />
           <RecordCard
-            color="text-red-500"
+            color="#F56565"
+            text-color="text-red-500"
+            border-color="border-red-500"
             property="deaths"
             :record="records.maxDeaths"
-            title="most deaths"
+            title="Deaths"
           />
           <RecordCard
-            color="text-yellow-600"
+            color="#D69E2E"
+            text-color="text-yellow-600"
+            border-color="border-yellow-600"
             property="gold"
             :record="records.maxGold"
-            title="most gold earned"
+            title="Gold earned"
           />
           <RecordCard
-            color="text-white"
-            property="time"
-            :record="records.maxTime"
-            title="longest game"
-          />
-          <RecordCard
-            color="text-pink-500"
+            color="#81E6D9"
+            text-color="text-teal-300"
+            border-color="border-teal-300"
             property="minions"
             :record="records.maxMinions"
-            title="most minions killed"
+            title="Minions killed"
           />
         </template>
         <template v-else>
           <div
-            v-for="index in 7"
+            v-for="index in 6"
             :key="index"
-            style="width: 288px; height: 146px;"
+            style="width: 176px; height: 294px;"
             class="mx-2 mt-6"
           >
             <content-loader
-              :height="146"
-              :width="288"
+              :height="294"
+              :width="176"
               :speed="2"
               primary-color="#17314f"
               secondary-color="#2b6cb0"
             >
-              <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
+              <rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
             </content-loader>
           </div>
         </template>
       </div>
-      <div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Game impact</div>
+      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900 category">Game impact</div>
       <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
-            color="text-yellow-400"
-            property="dmgTaken"
-            :record="records.maxDmgTaken"
-            title="highest damage taken"
-          />
-          <RecordCard
-            color="text-red-400"
+            color="#FC8181"
+            text-color="text-red-400"
+            border-color="border-red-400"
             property="dmgChamp"
             :record="records.maxDmgChamp"
-            title="highest damage to champions"
+            title="Damage champions"
           />
           <RecordCard
-            color="text-yellow-400"
+            color="#D69E2E"
+            text-color="text-yellow-400"
+            border-color="border-yellow-400"
             property="dmgObj"
             :record="records.maxDmgObj"
-            title="highest damage to objectives"
+            title="Damage objectives"
           />
           <RecordCard
-            color="text-green-400"
+            color="#FC8181"
+            text-color="text-red-400"
+            border-color="border-red-400"
+            property="dmgTaken"
+            :record="records.maxDmgTaken"
+            title="Damage taken"
+          />
+          <RecordCard
+            color="#68D391"
+            text-color="text-green-400"
+            border-color="border-green-400"
             property="kp"
             :record="records.maxKp"
-            title="highest kill participation"
+            title="Kill participation"
           />
         </template>
         <template v-else>
           <div
             v-for="index in 4"
             :key="index"
-            style="width: 288px; height: 146px;"
+            style="width: 176px; height: 294px;"
             class="mx-2 mt-6"
           >
             <content-loader
-              :height="146"
-              :width="288"
+              :height="294"
+              :width="176"
               :speed="2"
               primary-color="#17314f"
               secondary-color="#2b6cb0"
             >
-              <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
+              <rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
             </content-loader>
           </div>
         </template>
       </div>
-      <div class="mx-4 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 blue-900">Team work</div>
+      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">Extra</div>
       <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
-            color="text-blue-500"
+            color="#D69E2E"
+            text-color="text-yellow-400"
+            border-color="border-yellow-400"
             property="vision"
             :record="records.maxVision"
-            title="highest vision score"
+            title="Vision score"
+          />
+          <RecordCard
+            color="#4299E1"
+            text-color="text-blue-500"
+            border-color="border-blue-500"
+            property="time"
+            :record="records.maxTime"
+            title="Longest game"
           />
         </template>
         <template v-else>
           <div
-            v-for="index in 1"
+            v-for="index in 2"
             :key="index"
-            style="width: 288px; height: 146px;"
+            style="width: 176px; height: 294px;"
             class="mx-2 mt-6"
           >
             <content-loader
-              :height="146"
-              :width="288"
+              :height="294"
+              :width="176"
               :speed="2"
               primary-color="#17314f"
               secondary-color="#2b6cb0"
             >
-              <rect x="0" y="0" rx="8" ry="8" width="288" height="146" />
+              <rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
             </content-loader>
           </div>
         </template>
@@ -200,3 +226,12 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.category:before {
+  @apply w-2 h-2 bg-blue-200 absolute block left-0 ml-1;
+  content: "";
+  top: 35%;
+  transform: rotate(45deg);
+}
+</style>