diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js
index cf99483..bda3958 100644
--- a/client/src/helpers/summoner.js
+++ b/client/src/helpers/summoner.js
@@ -15,6 +15,15 @@ export function createSummonerData(RiotData, championsInfos) {
   const soloQStats = RiotData.soloQ
   const matches = RiotData.matchesDetails
 
+  const soloQ = soloQStats ? {} : null
+  if (soloQ) {
+    soloQ.rank = soloQStats.rank
+    soloQ.rankImgLink = getRankImg(soloQStats)
+    soloQ.wins = soloQStats.wins
+    soloQ.losses = soloQStats.losses
+    soloQ.winrate =  (soloQ.wins * 100 / (soloQ.wins + soloQ.losses)).toFixed(1) + '%'
+  }
+
   const matchesInfos = []
   // Loop on all matches
   for (let i = 0; i < matches.length; i++) {
@@ -78,10 +87,7 @@ export function createSummonerData(RiotData, championsInfos) {
     profileIconId: userStats.profileIconId,
     name: userStats.name,
     level: userStats.summonerLevel,
-    rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Player is unranked',
-    rankImgLink: getRankImg(soloQStats),
-    rankedWins: soloQStats ? soloQStats.wins : undefined,
-    rankedLosses: soloQStats ? soloQStats.losses : undefined
+    soloQ,
   }
 }
 
diff --git a/client/src/views/Summoner.vue b/client/src/views/Summoner.vue
index a3853b7..4a358a3 100644
--- a/client/src/views/Summoner.vue
+++ b/client/src/views/Summoner.vue
@@ -16,26 +16,28 @@
         <div class="mt-4 mx-auto p-4 text-center bg-blue-100 border border-gray-300 rounded-lg">
           <div
             class="mx-auto w-16 h-16 bg-gray-300"
-            :style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${localInfos.profileIconId}.png) center/cover`}"
+            :style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${summonerInfos.profileIconId}.png) center/cover`}"
           ></div>
-          <h1 class="player__name">{{ localInfos.name }}</h1>
-          <h3 class="player__level">{{ localInfos.level }}</h3>
-          <h3 class="player__rank">{{ localInfos.rank }}</h3>
-          <div
-            class="mx-auto w-16 h-16 bg-gray-300"
-            :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"
-          ></div>
-          <h3
-            class="player__ratio"
-          >{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : localInfos.rank }}</h3>
+          <h1>{{ summonerInfos.name }}</h1>
+          <h3>{{ summonerInfos.level }}</h3>
 
-          <RecentActivity :matches="localInfos.allMatches" />
+          <div v-if="summonerInfos.soloQ">
+            <h3>{{ summonerInfos.rank }}</h3>
+            <div
+              class="mx-auto w-16 h-16 bg-gray-300"
+              :style="{background: `url(${summonerInfos.soloQ.rankImgLink}) center/cover`}"
+            ></div>
+            <h3>{{ `${summonerInfos.soloQ.wins} wins / ${summonerInfos.soloQ.losses} losses` }}</h3>
+            <span>Winrate: {{ summonerInfos.soloQ.winrate }}</span>
+          </div>
+
+          <RecentActivity :matches="summonerInfos.allMatches" />
 
           <ul>
             <Match
-              v-for="(match, index) in localInfos.matches"
+              v-for="(match, index) in summonerInfos.matches"
               :key="index"
-              :data="localInfos.matches[index]"
+              :data="summonerInfos.matches[index]"
             />
           </ul>
         </div>
@@ -75,7 +77,7 @@ export default {
       return this.$route.params.region
     },
     ...mapState({
-      localInfos: state => state.summoner.infos
+      summonerInfos: state => state.summoner.infos
     }),
     ...mapGetters('ddragon', ['areChampionsLoaded']),
     ...mapGetters('summoner', ['summonerFound', 'summonerNotFound', 'summonerLoading'])