diff --git a/frontend/components/item/Box.vue b/frontend/components/item/Box.vue
index 9d0d9b5..4cd6dfb 100644
--- a/frontend/components/item/Box.vue
+++ b/frontend/components/item/Box.vue
@@ -1,12 +1,13 @@
 <script lang="ts" setup>
 defineProps<{
     title: string,
-    bootsFirst?: number
+    bootsFirst?: number,
+    sizePerc?: number
 }>()
 </script>
 
 <template>
-<div class="item-box">
+<div :style="(sizePerc != undefined && sizePerc != null) ? 'max-height: ' + (sizePerc * 600) + 'px;' : ''" class="item-box">
     <div style="display:flex; flex-direction: column; justify-content: center; align-items: center;">
         <h2 class="item-box-title">{{ title }}</h2>
         <h5 v-if="bootsFirst != undefined && bootsFirst != null" 
diff --git a/frontend/components/item/Viewer.vue b/frontend/components/item/Viewer.vue
index 87a5b9f..cb89be6 100644
--- a/frontend/components/item/Viewer.vue
+++ b/frontend/components/item/Viewer.vue
@@ -23,8 +23,9 @@ function trimBuilds(builds : Builds) {
 <template>
     <div id="iv-container">
         
+        <div>
         <!-- Start items -->
-        <ItemBox title="start">
+        <ItemBox title="start" :sizePerc="builds.suppItems != undefined && builds.suppItems != null ? 0.3 : undefined">
             <div class="iv-items-container">
                 <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
                 <NuxtImg v-if="item.data != null && item.data != undefined" 
@@ -34,6 +35,18 @@ function trimBuilds(builds : Builds) {
                 </div>
             </div>
         </ItemBox>
+        <!-- Supp items -->
+        <ItemBox v-if="builds.suppItems != undefined && builds.suppItems != null" title="supp" :sizePerc="0.68">
+            <div class="iv-items-container">
+                <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.suppItems" >
+                <NuxtImg v-if="item.data != null && item.data != undefined" 
+                    class="item-img" width="64" height="64" :alt="item.data.toString()" 
+                    :src="CDRAGON_BASE + mapPath(itemMap.get(item.data).iconPath)" />
+                <h3 style="width: fit-content; margin:auto; margin-bottom: 10px;">{{ (item.count/builds.tree.count * 100).toFixed(0) }}%</h3>
+                </div>
+            </div>
+        </ItemBox>
+        </div>
 
         <!-- Boots first : when champion rush boots -->
         <ItemBox v-if="builds.bootsFirst > 0.5" title="boots rush" :bootsFirst="builds.bootsFirst">
diff --git a/frontend/types/api.ts b/frontend/types/api.ts
index 38bb5fb..9fe21c3 100644
--- a/frontend/types/api.ts
+++ b/frontend/types/api.ts
@@ -10,6 +10,7 @@ declare global {
         bootsFirst: number
         boots: Array<{count: number, data: number}>
         lateGame: Array<{count: number, data: number}>
+        suppItems?: Array<{count: number, data: number}>
     }
     type Rune = {
         count: number
diff --git a/match_collector/champion_stat.ts b/match_collector/champion_stat.ts
index 7ef7822..92e285f 100644
--- a/match_collector/champion_stat.ts
+++ b/match_collector/champion_stat.ts
@@ -40,6 +40,7 @@ type Builds = {
     bootsFirst: number
     boots: Array<{data: number, count: number}>
     lateGame: Array<{data: number, count: number}>
+    suppItems?: Array<{data: number, count: number}>
 }
 type Champion = {
     id: Number
@@ -102,14 +103,15 @@ function handleMatchItems(timeline, participant: any, participantIndex : number,
                         || x == participant.item4
                         || x == participant.item5
                         || x == participant.item6 )
-                    if(suppItem != undefined)
-                        items.push(suppItem)
+                    if(suppItem != undefined) {
+                        const already = builds.suppItems.find((x) => x.data == suppItem)
+                        if(already == undefined) builds.suppItems.push({count:1, data: suppItem})
+                        else already.count += 1
+                    }
                 }
             }
             if(event.type != "ITEM_PURCHASED") continue;
 
-            
-
             // Handle boots differently
             if(itemInfo.categories.includes("Boots")){
                 if(itemInfo.to.length == 0 || event.itemId == 3006) {
@@ -185,7 +187,7 @@ async function championInfos(client, patch: number, champion: Champion) {
             // Lanes
             let lane = lanes.find((x) => x.data == participant.teamPosition)
             if(lane == undefined) {
-                const builds : Builds = {tree:treeInit(), start: [], bootsFirst: 0, boots: [], lateGame: []}
+                const builds : Builds = {tree:treeInit(), start: [], bootsFirst: 0, boots: [], lateGame: [], suppItems: []}
                 lane = {count:1, data: participant.teamPosition, runes:[], builds:builds, winningMatches: 0, losingMatches: 0, winrate: 0, pickrate: 0}
                 lanes.push(lane)
             }
@@ -242,6 +244,15 @@ async function championInfos(client, patch: number, champion: Champion) {
         builds.boots.sort((a, b) => b.count - a.count)
     
         builds.bootsFirst /= lane.count
+        
+        // Cut supp items below 2 and percentage threshold
+        arrayRemovePercentage(builds.suppItems, lane.count, 0.05)
+        builds.suppItems.sort((a, b) => b.count - a.count)
+        if(builds.suppItems.length > 2)
+            builds.suppItems.splice(2, builds.suppItems.length - 2)
+
+        // Delete supp items if empty
+        if(builds.suppItems.length == 0) delete builds.suppItems
 
         builds.lateGame.sort((a, b) => b.count - a.count)
     }