diff --git a/client/package-lock.json b/client/package-lock.json
index 88fb717..df919d0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -2156,6 +2156,11 @@
         }
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.0.6",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
@@ -2889,7 +2894,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -6402,7 +6408,8 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
           "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "string-width": {
           "version": "2.1.1",
@@ -6420,6 +6427,7 @@
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -9548,7 +9556,8 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",
@@ -11155,6 +11164,14 @@
       "integrity": "sha512-RRuo08A6mFye2RyLVdnODH5kyLiHANMl9EzKXZXCeMrsP4SY3nyjkQnTGlgbbVOBQuaGBMrFp9HPOJYDaVNk/w==",
       "dev": true
     },
+    "vue-content-loader": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/vue-content-loader/-/vue-content-loader-0.2.2.tgz",
+      "integrity": "sha512-8jcb0dJFiVAz7EPwpQjOd/GnswUiSDeKihEABkq/iAYxAI2MHSS7+VWlRblQDH3D1rm3Lewt7fDJoOpJKbYHjw==",
+      "requires": {
+        "babel-helper-vue-jsx-merge-props": "^2.0.3"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
diff --git a/client/package.json b/client/package.json
index 03b19c2..fe5f2d8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.18.1",
     "vue": "^2.6.6",
+    "vue-content-loader": "^0.2.2",
     "vue-router": "^3.0.6",
     "vuex": "^3.1.1"
   },
diff --git a/client/src/components/SummonerLoader.vue b/client/src/components/SummonerLoader.vue
new file mode 100644
index 0000000..f25ef31
--- /dev/null
+++ b/client/src/components/SummonerLoader.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="mt-4 container mx-auto text-white pb-12">
+    <div class="flex justify-between xl:px-12">
+      <div style="width: 517px; height: 272px;">
+        <content-loader
+          :height="272"
+          :width="517"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="2" y="23" rx="3" ry="3" width="164" height="31" />
+          <circle cx="49" cy="121" r="48" />
+          <rect x="119" y="75" rx="3" ry="3" width="123" height="31" />
+          <rect x="119" y="116" rx="3" ry="3" width="164" height="31" />
+          <rect x="136" y="179" rx="3" ry="3" width="80" height="80" />
+          <rect x="222" y="209" rx="3" ry="3" width="59" height="22" />
+          <rect x="309" y="186" rx="3" ry="3" width="75" height="19" />
+          <rect x="426" y="186" rx="3" ry="3" width="75" height="19" />
+          <rect x="310" y="213" rx="3" ry="3" width="75" height="10" />
+          <rect x="320" y="231" rx="3" ry="3" width="65" height="10" />
+          <rect x="436" y="213" rx="3" ry="3" width="65" height="10" />
+        </content-loader>
+      </div>
+
+      <div class="bg-blue-800 rounded-lg" style="width: 351px; height: 210px;">
+        <content-loader
+          :height="210"
+          :width="351"
+          :speed="2"
+          primary-color="#17314f"
+          secondary-color="#2b6cb0"
+        >
+          <rect x="11" y="15" rx="3" ry="3" width="111.65" height="19" />
+          <rect x="53" y="40" rx="3" ry="3" width="30" height="11" />
+          <rect x="135" y="40" rx="3" ry="3" width="30" height="11" />
+          <rect x="220" y="40" rx="3" ry="3" width="30" height="11" />
+          <rect x="302" y="40" rx="3" ry="3" width="30" height="11" />
+          <rect x="10" y="61" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="81" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="101" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="121" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="141" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="161" rx="3" ry="3" width="22" height="11" />
+          <rect x="10" y="181" rx="3" ry="3" width="22" height="11" />
+          <rect x="43" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="43" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="43" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="43" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="43" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="43" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="43" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="63" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="83" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="103" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="123" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="143" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="163" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="183" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="203" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="223" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="243" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="263" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="283" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="138" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="158" rx="0" ry="0" width="16" height="16" />
+          <rect x="303" y="178" rx="0" ry="0" width="16" height="16" />
+          <rect x="323" y="58" rx="0" ry="0" width="16" height="16" />
+          <rect x="323" y="78" rx="0" ry="0" width="16" height="16" />
+          <rect x="323" y="98" rx="0" ry="0" width="16" height="16" />
+          <rect x="323" y="118" rx="0" ry="0" width="16" height="16" />
+          <rect x="323" y="138" rx="0" ry="0" width="16" height="16" />
+        </content-loader>
+      </div>
+    </div>
+
+    <div class="mt-12 text-center">
+      <ul class="text-gray-900">
+        <div
+          v-for="index in 10"
+          :key="index"
+          class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
+          style="width: 1240px; height: 144px;"
+        >
+          <content-loader
+            :height="144"
+            :width="1240"
+            :speed="2"
+            primary-color="#17314f"
+            secondary-color="#2b6cb0"
+          >
+            <rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
+            <rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
+            <rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
+            <rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
+            <rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
+            <rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
+            <rect x="68" y="37" rx="8" ry="8" width="64" height="64" />
+            <rect x="142" y="41" rx="6" ry="6" width="24" height="24" />
+            <rect x="142" y="73" rx="6" ry="6" width="24" height="24" />
+            <rect x="424" y="37" rx="6" ry="6" width="32" height="32" />
+            <rect x="460" y="37" rx="6" ry="6" width="32" height="32" />
+            <rect x="496" y="37" rx="6" ry="6" width="32" height="32" />
+            <rect x="424" y="73" rx="6" ry="6" width="32" height="32" />
+            <rect x="460" y="73" rx="6" ry="6" width="32" height="32" />
+            <rect x="496" y="73" rx="6" ry="6" width="32" height="32" />
+            <rect x="580" y="38" rx="3" ry="3" width="72" height="13" />
+            <rect x="580" y="57" rx="3" ry="3" width="103" height="13" />
+            <rect x="580" y="76" rx="3" ry="3" width="131" height="13" />
+            <rect x="580" y="95" rx="3" ry="3" width="131" height="13" />
+            <circle cx="916" cy="33" r="12" />
+            <circle cx="916" cy="53" r="12" />
+            <circle cx="916" cy="73" r="12" />
+            <circle cx="916" cy="93" r="12" />
+            <circle cx="916" cy="113" r="12" />
+            <circle cx="980" cy="33" r="12" />
+            <circle cx="980" cy="53" r="12" />
+            <circle cx="980" cy="73" r="12" />
+            <circle cx="980" cy="93" r="12" />
+            <circle cx="980" cy="113" r="12" />
+            <rect x="827" y="29" rx="3" ry="3" width="72" height="9" />
+            <rect x="827" y="49" rx="3" ry="3" width="72" height="9" />
+            <rect x="827" y="69" rx="3" ry="3" width="72" height="9" />
+            <rect x="827" y="89" rx="3" ry="3" width="72" height="9" />
+            <rect x="827" y="109" rx="3" ry="3" width="72" height="9" />
+            <rect x="997" y="29" rx="3" ry="3" width="72" height="9" />
+            <rect x="997" y="49" rx="3" ry="3" width="72" height="9" />
+            <rect x="997" y="69" rx="3" ry="3" width="72" height="9" />
+            <rect x="997" y="89" rx="3" ry="3" width="72" height="9" />
+            <rect x="997" y="109" rx="3" ry="3" width="72" height="9" />
+            <circle cx="1188.58" cy="50.55" r="11.88" />
+            <rect x="1156" y="66" rx="3" ry="3" width="64" height="17" />
+            <rect x="1158" y="90" rx="3" ry="3" width="59" height="14" />
+          </content-loader>
+        </div>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ContentLoader } from 'vue-content-loader'
+
+export default {
+  components: {
+    ContentLoader
+  }
+}
+</script>
+
+<style scoped>
+.match-loading {
+  height: 144px;
+}
+
+/* LOADER */
+.loader {
+  position: relative;
+  overflow: hidden;
+
+  background-size: 100vw 296px;
+  /* background-image: linear-gradient(120deg, #EBEBEB 20%, #F8F8F8 28%, #EBEBEB 43%); */
+  background-image: linear-gradient(
+    120deg,
+    #2c5282 20%,
+    #2b6cb0 28%,
+    #2c5282 43%
+  );
+
+  animation-name: loadingAnimation;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
+  animation-duration: 2s;
+}
+
+@keyframes loadingAnimation {
+  from {
+    background-position: -100vw 0px;
+  }
+  to {
+    background-position: 100vw 0px;
+  }
+}
+
+/* Items inside loader */
+.loader .item {
+  position: absolute;
+  background: #17314f;
+}
+
+.loader .item-1 {
+  left: 12px;
+  top: 0;
+  width: 10px;
+  height: 100%;
+}
+</style>
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index 17f6171..2c1abf5 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -8,10 +8,10 @@
     ></LazyBackground>
 
     <div class="relative z-10">
-      <header class="mb-4 text-teal-100">
+      <header class="text-teal-100">
         <div class="container mx-auto flex justify-between items-center">
           <router-link to="/">
-            <img class="w-56" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
+            <img class="h-24" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
           </router-link>
 
           <SearchForm @formSubmit="redirect" size="small" />
@@ -19,7 +19,7 @@
       </header>
 
       <template v-if="summonerFound">
-        <div class="container mx-auto text-white pb-12">
+        <div class="mt-4 container mx-auto text-white pb-12">
           <div class="flex justify-between xl:px-12">
             <div>
               <h1 class="text-4xl font-extrabold uppercase">
@@ -70,15 +70,11 @@
       </template>
 
       <template v-else-if="summonerLoading">
-        <div
-          class="flex items-center justify-center bg-white max-w-xs mx-auto p-5 rounded-lg shadow-xl"
-        >
-          <dot-loader :loading="summonerLoading" />
-        </div>
+        <SummonerLoader />
       </template>
 
       <template v-else-if="summonerNotFound">
-        <div class="mt-12 flex justify-center">
+        <div class="mt-16 flex justify-center">
           <div class="bg-gradient px-4 py-3 rounded-lg text-center text-lg text-blue-100 font-bold">
             <div>Player can't be found.</div>
             <div>😕</div>
@@ -94,6 +90,7 @@ import { mapState, mapActions, mapGetters } from 'vuex'
 import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import LoadingButton from '@/components/LoadingButton.vue'
 import RecentActivity from '@/components/RecentActivity.vue'
+import SummonerLoader from '@/components/SummonerLoader.vue'
 import SummonerRanked from '@/components/SummonerRanked.vue'
 import Match from '@/components/Match.vue'
 import SearchForm from '@/components/SearchForm.vue'
@@ -105,7 +102,8 @@ export default {
     Match,
     RecentActivity,
     SearchForm,
-    SummonerRanked
+    SummonerLoader,
+    SummonerRanked,
   },
 
   computed: {