diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index 682cda9..830ceba 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -35,11 +35,11 @@
               ></div>
               <div class="flex flex-col justify-around ml-2">
                 <div
-                  :style="{backgroundImage: `url(${data.firstSum})`}"
+                  :style="{backgroundImage: `url(${data.summonerSpell1.icon})`}"
                   class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
                 ></div>
                 <div
-                  :style="{backgroundImage: `url(${data.secondSum})`}"
+                  :style="{backgroundImage: `url(${data.summonerSpell2.icon})`}"
                   class="w-6 h-6 bg-center bg-cover rounded-md bg-blue-1000"
                 ></div>
               </div>
diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js
index 8aceed8..fd631a8 100644
--- a/client/src/helpers/summoner.js
+++ b/client/src/helpers/summoner.js
@@ -10,9 +10,6 @@ const leaguesNumbers = { 'I': 1, 'II': 2, 'III': 3, 'IV': 4 }
  */
 export function createMatchData(matches) {
   for (const match of matches) {
-    match.firstSum = getSummonerLink(match.firstSum)
-    match.secondSum = getSummonerLink(match.secondSum)
-
     const date = new Date(match.date)
     const dateOptions = { day: '2-digit', month: '2-digit', year: 'numeric' }
     const timeOptions = { hour12: false, hour: '2-digit', minute: '2-digit' }
diff --git a/server-v2/app/Serializers/BasicMatchSerializer.ts b/server-v2/app/Serializers/BasicMatchSerializer.ts
index b48c22e..605b9fe 100644
--- a/server-v2/app/Serializers/BasicMatchSerializer.ts
+++ b/server-v2/app/Serializers/BasicMatchSerializer.ts
@@ -9,6 +9,7 @@ import {
   SerializedMatchItem,
   SerializedMatchPerks,
   SerializedMatchStats,
+  SerializedMatchSummonerSpell,
   SerializedMatchTeamPlayer,
 } from './SerializedTypes'
 
@@ -45,6 +46,23 @@ class BasicMatchSerializer extends MatchSerializer {
     return players.map((p) => this.getPlayerSummary(p)).sort(sortTeamByRole)
   }
 
+  /**
+   * Get Summoner Spell Data from CDragon
+   * @param id of the summonerSpell
+   */
+  public getSummonerSpell(id: number): SerializedMatchSummonerSpell | null {
+    if (id === 0) {
+      return null
+    }
+    const spell = CDragonService.summonerSpells.find((s) => s.id === id)!
+    const spellName = spell.iconPath.split('/assets/')[1].toLowerCase()
+    return {
+      name: spell.name,
+      description: spell.description,
+      icon: `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/${spellName}`,
+    }
+  }
+
   protected getItems(player: MatchPlayer): Array<SerializedMatchItem | null> {
     const items: (SerializedMatchItem | null)[] = []
     for (let i = 0; i < 6; i++) {
@@ -123,7 +141,6 @@ class BasicMatchSerializer extends MatchSerializer {
       champion: this.getChampion(identity.championId),
       date: match.date,
       enemyTeam: this.getTeamSummary(enemyPlayers),
-      firstSum: identity.summoner1Id,
       matchId: match.id,
       gamemode: match.gamemode,
       items: this.getItems(identity),
@@ -135,9 +152,10 @@ class BasicMatchSerializer extends MatchSerializer {
       result: allyTeam.result,
       role: identity.teamPosition.length ? identity.teamPosition : 'NONE',
       season: getSeasonNumber(match.date),
-      secondSum: identity.summoner2Id,
       stats: this.getStats(identity),
       summonerId: identity.summonerId,
+      summonerSpell1: this.getSummonerSpell(identity.summoner1Id),
+      summonerSpell2: this.getSummonerSpell(identity.summoner2Id),
       summonerPuuid: puuid,
       time: match.gameDuration,
     }
diff --git a/server-v2/app/Serializers/SerializedTypes.ts b/server-v2/app/Serializers/SerializedTypes.ts
index 06d1116..c226bc3 100644
--- a/server-v2/app/Serializers/SerializedTypes.ts
+++ b/server-v2/app/Serializers/SerializedTypes.ts
@@ -3,7 +3,6 @@ export interface SerializedMatch {
   champion: SerializedMatchChampion
   date: number
   enemyTeam: SerializedMatchTeamPlayer[]
-  firstSum: number
   matchId: string
   gamemode: number
   items: Array<SerializedMatchItem | null>
@@ -15,10 +14,11 @@ export interface SerializedMatch {
   result: string
   role: string
   season: number
-  secondSum: number
   stats: SerializedMatchStats
   summonerId: string
   summonerPuuid: string
+  summonerSpell1: SerializedMatchSummonerSpell | null
+  summonerSpell2: SerializedMatchSummonerSpell | null
   time: number
 }
 
@@ -37,6 +37,12 @@ export interface SerializedMatchChampion {
   roles: string[]
 }
 
+export interface SerializedMatchSummonerSpell {
+  name: string
+  description: string
+  icon: string
+}
+
 export interface SerializedMatchItem {
   description: string
   image: string