diff --git a/public/all.css b/public/all.css
index 819eac0..5499beb 100644
--- a/public/all.css
+++ b/public/all.css
@@ -14,6 +14,9 @@
   --minicard-background: #020202;
   --minicard-since-background: #5d4e73;
   --error-background: #e84057;
+  --role-icon-size: 12px;
+  --portrait-size: 70px;
+  --orb-size: 40px;
 }
 
 html{
diff --git a/public/assets/baron_nashor.png b/public/assets/baron_nashor.png
deleted file mode 100644
index 4c8afee..0000000
Binary files a/public/assets/baron_nashor.png and /dev/null differ
diff --git a/public/assets/positions/icon-position-bot.svg b/public/assets/positions/BOTTOM.svg
similarity index 100%
rename from public/assets/positions/icon-position-bot.svg
rename to public/assets/positions/BOTTOM.svg
diff --git a/public/assets/positions/Bot.png b/public/assets/positions/Bot.png
deleted file mode 100644
index 1d5bff3..0000000
Binary files a/public/assets/positions/Bot.png and /dev/null differ
diff --git a/public/assets/positions/icon-position-jungle.svg b/public/assets/positions/JUNGLE.svg
similarity index 100%
rename from public/assets/positions/icon-position-jungle.svg
rename to public/assets/positions/JUNGLE.svg
diff --git a/public/assets/positions/Jungle.png b/public/assets/positions/Jungle.png
deleted file mode 100644
index 804054f..0000000
Binary files a/public/assets/positions/Jungle.png and /dev/null differ
diff --git a/public/assets/positions/icon-position-mid.svg b/public/assets/positions/MIDDLE.svg
similarity index 100%
rename from public/assets/positions/icon-position-mid.svg
rename to public/assets/positions/MIDDLE.svg
diff --git a/public/assets/positions/Mid.png b/public/assets/positions/Mid.png
deleted file mode 100644
index 915e341..0000000
Binary files a/public/assets/positions/Mid.png and /dev/null differ
diff --git a/public/assets/positions/Support.png b/public/assets/positions/Support.png
deleted file mode 100644
index 074005b..0000000
Binary files a/public/assets/positions/Support.png and /dev/null differ
diff --git a/public/assets/positions/icon-position-top.svg b/public/assets/positions/TOP.svg
similarity index 100%
rename from public/assets/positions/icon-position-top.svg
rename to public/assets/positions/TOP.svg
diff --git a/public/assets/positions/Top.png b/public/assets/positions/Top.png
deleted file mode 100644
index 97b02cd..0000000
Binary files a/public/assets/positions/Top.png and /dev/null differ
diff --git a/public/assets/positions/icon-position-support.svg b/public/assets/positions/UTILITY.svg
similarity index 100%
rename from public/assets/positions/icon-position-support.svg
rename to public/assets/positions/UTILITY.svg
diff --git a/public/assets/Emblem_BRONZE.webp b/public/assets/ranks/BRONZE.webp
similarity index 100%
rename from public/assets/Emblem_BRONZE.webp
rename to public/assets/ranks/BRONZE.webp
diff --git a/public/assets/Emblem_CHALLENGER.webp b/public/assets/ranks/CHALLENGER.webp
similarity index 100%
rename from public/assets/Emblem_CHALLENGER.webp
rename to public/assets/ranks/CHALLENGER.webp
diff --git a/public/assets/Emblem_DIAMOND.webp b/public/assets/ranks/DIAMOND.webp
similarity index 100%
rename from public/assets/Emblem_DIAMOND.webp
rename to public/assets/ranks/DIAMOND.webp
diff --git a/public/assets/Emblem_GOLD.webp b/public/assets/ranks/GOLD.webp
similarity index 100%
rename from public/assets/Emblem_GOLD.webp
rename to public/assets/ranks/GOLD.webp
diff --git a/public/assets/Emblem_GRANDMASTER.webp b/public/assets/ranks/GRANDMASTER.webp
similarity index 100%
rename from public/assets/Emblem_GRANDMASTER.webp
rename to public/assets/ranks/GRANDMASTER.webp
diff --git a/public/assets/Emblem_IRON.webp b/public/assets/ranks/IRON.webp
similarity index 100%
rename from public/assets/Emblem_IRON.webp
rename to public/assets/ranks/IRON.webp
diff --git a/public/assets/Emblem_MASTER.webp b/public/assets/ranks/MASTER.webp
similarity index 100%
rename from public/assets/Emblem_MASTER.webp
rename to public/assets/ranks/MASTER.webp
diff --git a/public/assets/Emblem_NONE.webp b/public/assets/ranks/NONE.webp
similarity index 100%
rename from public/assets/Emblem_NONE.webp
rename to public/assets/ranks/NONE.webp
diff --git a/public/assets/Emblem_PLATINUM.webp b/public/assets/ranks/PLATINUM.webp
similarity index 100%
rename from public/assets/Emblem_PLATINUM.webp
rename to public/assets/ranks/PLATINUM.webp
diff --git a/public/assets/Emblem_SILVER.webp b/public/assets/ranks/SILVER.webp
similarity index 100%
rename from public/assets/Emblem_SILVER.webp
rename to public/assets/ranks/SILVER.webp
diff --git a/public/assets/Barrier.webp b/public/assets/spells/Barrier.webp
similarity index 100%
rename from public/assets/Barrier.webp
rename to public/assets/spells/Barrier.webp
diff --git a/public/assets/Clarity.webp b/public/assets/spells/Clarity.webp
similarity index 100%
rename from public/assets/Clarity.webp
rename to public/assets/spells/Clarity.webp
diff --git a/public/assets/Cleanse.webp b/public/assets/spells/Cleanse.webp
similarity index 100%
rename from public/assets/Cleanse.webp
rename to public/assets/spells/Cleanse.webp
diff --git a/public/assets/Dash.webp b/public/assets/spells/Dash.webp
similarity index 100%
rename from public/assets/Dash.webp
rename to public/assets/spells/Dash.webp
diff --git a/public/assets/Exhaust.webp b/public/assets/spells/Exhaust.webp
similarity index 100%
rename from public/assets/Exhaust.webp
rename to public/assets/spells/Exhaust.webp
diff --git a/public/assets/Flash.webp b/public/assets/spells/Flash.webp
similarity index 100%
rename from public/assets/Flash.webp
rename to public/assets/spells/Flash.webp
diff --git a/public/assets/Ghost.webp b/public/assets/spells/Ghost.webp
similarity index 100%
rename from public/assets/Ghost.webp
rename to public/assets/spells/Ghost.webp
diff --git a/public/assets/Heal.webp b/public/assets/spells/Heal.webp
similarity index 100%
rename from public/assets/Heal.webp
rename to public/assets/spells/Heal.webp
diff --git a/public/assets/Ignite.webp b/public/assets/spells/Ignite.webp
similarity index 100%
rename from public/assets/Ignite.webp
rename to public/assets/spells/Ignite.webp
diff --git a/public/assets/Mark.webp b/public/assets/spells/Mark.webp
similarity index 100%
rename from public/assets/Mark.webp
rename to public/assets/spells/Mark.webp
diff --git a/public/assets/Smite.webp b/public/assets/spells/Smite.webp
similarity index 100%
rename from public/assets/Smite.webp
rename to public/assets/spells/Smite.webp
diff --git a/public/assets/Teleport.webp b/public/assets/spells/Teleport.webp
similarity index 100%
rename from public/assets/Teleport.webp
rename to public/assets/spells/Teleport.webp
diff --git a/src/LobbyView.vue b/src/LobbyView.vue
index 22e7711..76a9aa3 100644
--- a/src/LobbyView.vue
+++ b/src/LobbyView.vue
@@ -6,7 +6,7 @@
     </div>
     <div class="team">
       <div v-for="teammate in lobbyPlayers" :key="teammate.displayName">
-          <LobbyPlayerItem v-if="teammate.teamId == 1" :teammate=teammate></LobbyPlayerItem>
+        <LobbyPlayerItem v-if="teammate.teamId == 1" :teammate=teammate></LobbyPlayerItem>
       </div>
     </div>
     <div class="team">
@@ -47,9 +47,6 @@ export default {
     };
   },
   watch: {
-    lobbyPlayers() {
-      console.log(this.lobbyPlayers);
-    },
     $route() {
       // Unregister the listener..
       console.log('Unregistering Listeners on Lobby');
diff --git a/src/components/LobbyPlayerItem.vue b/src/components/LobbyPlayerItem.vue
index 5052787..3a32ffb 100644
--- a/src/components/LobbyPlayerItem.vue
+++ b/src/components/LobbyPlayerItem.vue
@@ -1,33 +1,35 @@
 <template>
-    <div class="miniCard">
-        <img v-if="teammate.championId" class="selectedChampion emblem"
-            :src="CHAMPIONICONURL + teammate.championId + '.png'">
-        <img class="emblem" :src='`assets/Emblem_${teammate.queueMap.RANKED_SOLO_5x5.tier}.webp`'>
-        <br>
-        <span @click="searchSummoner(teammate.username)">{{ teammate.username }}</span>
-        <br>
-        <span style="font-size:12px;">{{ capitalize(teammate.queueMap.RANKED_SOLO_5x5.tier) }}
-            {{ romanNumbers[teammate.queueMap.RANKED_SOLO_5x5.division] }}
-            ({{ teammate.queueMap.RANKED_SOLO_5x5.leaguePoints }}LP)</span>
-        <br>
-        <span style="font-size:12px;">{{ capitalize(teammate.position) }}</span>
-        <br>
-        <div v-for="(match, index) in teammate.matchHistory.games.games" :key="match.gameId" class="matchItem">
-            <div v-if="index < 5">
-                <img @click="open(getPreferredSite(match.participants[0].championId))"
-                    :src="CHAMPIONICONURL + match.participants[0].championId + '.png'" class="championIcon">
-                <div :class='`kda ${match.participants[0].stats.win ? "Victory" : "Defeat"}`'>
-                    <span style="white-space:nowrap">
-                        {{ match.participants[0].stats.kills + "/"
-                                + match.participants[0].stats.deaths + "/"
-                                + match.participants[0].stats.assists
-                        }}
-                    </span>
-                </div>
-                <span class="sinceGame">{{ sinceGame(Date.now() - match.gameCreation) }}</span>
-            </div>
+  <div class="miniCard">
+  <div v-if="teammate.championId">
+     <img v-if="teammate.championId"  :src="CHAMPIONICONURL + teammate.championId + '.png'" class="portrait">
+     <div v-if="teammate.position && teammate.position != 'NONE'" class="orb">
+        <img :src="`assets/positions/${teammate.position}.svg`" class="roleicon">
+     </div>
+  </div>
+    <img v-else class="emblem" :src='`assets/ranks/${teammate.queueMap.RANKED_SOLO_5x5.tier}.webp`'>
+    <br>
+    <span @click="searchSummoner(teammate.username)">{{ teammate.username }}</span>
+    <br>
+    <span style="font-size:12px;">{{ capitalize(teammate.queueMap.RANKED_SOLO_5x5.tier) }}
+    {{ romanNumbers[teammate.queueMap.RANKED_SOLO_5x5.division] }}
+    ({{ teammate.queueMap.RANKED_SOLO_5x5.leaguePoints }}LP)</span>
+    <br>
+    <div v-for="(match, index) in teammate.matchHistory.games.games" :key="match.gameId" class="matchItem">
+      <div v-if="index < 5">
+        <img @click="open(getPreferredSite(match.participants[0].championId))"
+          :src="CHAMPIONICONURL + match.participants[0].championId + '.png'" class="championIcon">
+        <div :class='`kda ${match.participants[0].stats.win ? "Victory" : "Defeat"}`'>
+          <span style="white-space:nowrap">
+          {{ match.participants[0].stats.kills + "/"
+          + match.participants[0].stats.deaths + "/"
+          + match.participants[0].stats.assists
+          }}
+          </span>
         </div>
+        <span class="sinceGame">{{ sinceGame(Date.now() - match.gameCreation) }}</span>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -79,6 +81,31 @@ export default {
 </script>
 
 <style scoped>
+body {
+  padding: 0px;
+  margin: 0px;
+}
+.portrait {
+    left:0px;
+    width:var(--portrait-size);
+    border-radius: 100%;
+    z-index: 0;
+}
+.orb {
+    position: absolute;
+    left:calc(50% - var(--orb-size)/2);
+    top:calc(var(--portrait-size) - calc(var(--orb-size)/4));
+    background-color: var(--minicard-background);
+    width:var(--orb-size);
+    height:var(--orb-size);
+    border-radius: 100%;
+    z-index: 1;
+}
+.roleicon {
+    padding-top:calc(50% - var(--role-icon-size));
+    left:calc(50% - var(--role-icon-size));
+    width:calc(var(--role-icon-size)*2);
+}
 .championIcon {
   border-radius: 10px;
   width: 20px;
@@ -140,6 +167,7 @@ export default {
 
 .miniCard {
   min-height: 260px;
+  min-width:160px;
   margin: 10px;
   padding: 10px;
   color: var(--minicard-text);
diff --git a/src/components/MatchDetailsItem.vue b/src/components/MatchDetailsItem.vue
index 2e7eb27..912e84d 100644
--- a/src/components/MatchDetailsItem.vue
+++ b/src/components/MatchDetailsItem.vue
@@ -96,10 +96,10 @@
                            <table style="display:inline;">
                               <td style="padding:0px;">
                                  <!-- Summoner Spells -->
-                                 <img :src='`assets/${summonerSpells[participant.spell1Id]}.webp`'
+                                 <img :src='`assets/spells/${summonerSpells[participant.spell1Id]}.webp`'
                                  class='thumbicon thumbround' style="height:15px;width:15px;">
                                  <br>
-                                 <img :src='`assets/${summonerSpells[participant.spell2Id]}.webp`'
+                                 <img :src='`assets/spells/${summonerSpells[participant.spell2Id]}.webp`'
                                  class='thumbicon thumbround' style="height:15px;width:15px;">
                               </td>
                               <td style="padding:0px;">
diff --git a/src/components/MatchHistoryItem.vue b/src/components/MatchHistoryItem.vue
index 9c48253..29459f9 100644
--- a/src/components/MatchHistoryItem.vue
+++ b/src/components/MatchHistoryItem.vue
@@ -30,11 +30,13 @@
                                     </td>
                                     <td style="padding:0px;">
                                         <!-- Summoner Spells -->
-                                        <img :src='`assets/${summonerSpells[data.participants[0].spell1Id]}.webp`'
-                                            class='thumbicon thumbround'>
+                                        <img
+                                          :src='`assets/spells/${summonerSpells[data.participants[0].spell1Id]}.webp`'
+                                          class='thumbicon thumbround'>
                                         <br>
-                                        <img :src='`assets/${summonerSpells[data.participants[0].spell2Id]}.webp`'
-                                            class='thumbicon thumbround'>
+                                        <img
+                                          :src='`assets/spells/${summonerSpells[data.participants[0].spell2Id]}.webp`'
+                                          class='thumbicon thumbround'>
                                     </td>
                                     <td style="padding:0px;">
                                         <!-- Runes -->
diff --git a/src/components/PlayerRank.vue b/src/components/PlayerRank.vue
index 8306f19..b55cce1 100644
--- a/src/components/PlayerRank.vue
+++ b/src/components/PlayerRank.vue
@@ -5,7 +5,7 @@
     <table style="width:100%;    padding-top: 10px;">
       <td>
         <img
-        :src='`assets/Emblem_${data.queueMap.RANKED_SOLO_5x5.tier}.webp`'
+        :src='`assets/ranks/${data.queueMap.RANKED_SOLO_5x5.tier}.webp`'
         class="backgroundImg" style="height:60px;"
         />
       </td>
diff --git a/src/components/SettingsMenu.vue b/src/components/SettingsMenu.vue
index 49ce56e..67e0008 100644
--- a/src/components/SettingsMenu.vue
+++ b/src/components/SettingsMenu.vue
@@ -4,7 +4,7 @@
             <h1>Settings</h1>
             <table style="left:50%;margin:auto;">
                 <tr>
-                    <td>Automaticly switch to lobby</td>
+                    <td>Automatically switch to lobby</td>
                     <td>
                     <input v-model="autoSwitchLobby" type="checkbox"
                      :checked="autoSwitchLobby == 'true'">