diff --git a/.gitignore b/.gitignore
index a30fe21e5..a42004cce 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,4 +42,4 @@ next-env.d.ts
 .idea
 
 # CI
-reports
\ No newline at end of file
+/reports
\ No newline at end of file
diff --git a/messages/en.json b/messages/en.json
index d80d1ad8d..4dc4977f0 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -39,6 +39,7 @@
   },
   "heroes": {
     "ana": "Ana",
+    "anran": "Anran",
     "ashe": "Ashe",
     "baptiste": "Baptiste",
     "bastion": "Bastion",
@@ -46,12 +47,15 @@
     "cassidy": "Cassidy",
     "doomfist": "Doomfist",
     "dva": "D.Va",
+    "domina": "Domina",
     "echo": "Echo",
+    "emre": "Emre",
     "freja": "Freja",
     "genji": "Genji",
     "hanzo": "Hanzo",
     "hazard": "Hazard",
     "illari": "Illari",
+    "jetpackcat": "Jetpack Cat",
     "junkerqueen": "Junker Queen",
     "junkrat": "Junkrat",
     "juno": "Juno",
@@ -61,6 +65,7 @@
     "mauga": "Mauga",
     "mei": "Mei",
     "mercy": "Mercy",
+    "mizuki": "Mizuki",
     "moira": "Moira",
     "orisa": "Orisa",
     "pharah": "Pharah",
@@ -684,8 +689,356 @@
       },
       "code": "Replay code: {replayCode}"
     },
+    "mapCard": {
+      "altText": "The loading screen art for {map}.",
+      "selected": "Selected",
+      "copiedCode": "Copied replay code!",
+      "contextMenu": {
+        "title": "Map Actions",
+        "selectForComparison": "Select for comparison",
+        "addToMapGroup": "Add to map group",
+        "viewDetails": "View Map Details",
+        "copyCode": "Copy Replay Code"
+      }
+    },
+    "compareButton": {
+      "selected": "{count, plural, =1 {1 map selected} other {# maps selected}}",
+      "fromScrims": "{count, plural, =1 {from 1 scrim} other {from # scrims}}",
+      "compare": "Compare Selected",
+      "compareNow": "Compare Now",
+      "addToMapGroup": "Add to Map Group",
+      "clear": "Clear"
+    },
     "viewStats": "View team stats"
   },
+  "mapGroupsPage": {
+    "metadata": {
+      "title": "Map Groups | Parsertime",
+      "description": "Create and manage custom map groups for analysis"
+    }
+  },
+  "comparePage": {
+    "metadata": {
+      "title": "Compare Maps | Parsertime",
+      "description": "Compare player performance across multiple maps"
+    },
+    "title": "Compare Maps",
+    "subtitle": "Analyze player performance across selected maps",
+    "comparingMaps": "{count, plural, =1 {Comparing 1 map} other {Comparing # maps}}",
+    "loading": "Loading comparison data...",
+    "emptyStates": {
+      "noMaps": {
+        "title": "No Maps Selected",
+        "description": "Select maps from the scrim page to start comparing player performance."
+      },
+      "noMapGroups": {
+        "title": "No Map Groups Selected",
+        "description": "Select one or more map groups below to start comparing player performance."
+      },
+      "noPlayer": {
+        "title": "No Player Selected",
+        "description": "Select a player to start comparing their performance across maps."
+      },
+      "noData": {
+        "title": "No Data Available",
+        "description": "{player} did not participate in the selected maps."
+      },
+      "noTeamData": {
+        "description": "No team data available for the selected maps."
+      }
+    },
+    "detailedStats": {
+      "title": "Detailed Statistics",
+      "subtitle": "All metrics normalized per 10 minutes or as percentages for fair comparison",
+      "exportCsv": "Export CSV",
+      "statName": "Stat",
+      "maps": "maps",
+      "priority": "Priority",
+      "note": "Note: All statistics are normalized (per 10 minutes, percentages, or averages) to enable fair comparison across different playtimes.",
+      "categories": {
+        "all": "All Stats",
+        "combat": "Combat",
+        "damage": "Damage",
+        "support": "Support",
+        "defense": "Defense",
+        "assists": "Assists",
+        "ultimate": "Ultimate",
+        "impact": "Impact",
+        "consistency": "Consistency"
+      },
+      "stats": {
+        "eliminationsPer10": "Eliminations per 10",
+        "finalBlowsPer10": "Final Blows per 10",
+        "soloKillsPer10": "Solo Kills per 10",
+        "deathsPer10": "Deaths per 10",
+        "kdRatio": "K/D Ratio",
+        "allDamagePer10": "All Damage per 10",
+        "heroDamagePer10": "Hero Damage per 10",
+        "barrierDamagePer10": "Barrier Damage per 10",
+        "healingDealtPer10": "Healing Dealt per 10",
+        "healingReceivedPer10": "Healing Received per 10",
+        "selfHealingPer10": "Self Healing per 10",
+        "damageTakenPer10": "Damage Taken per 10",
+        "damageBlockedPer10": "Damage Blocked per 10",
+        "offensiveAssistsPer10": "Offensive Assists per 10",
+        "defensiveAssistsPer10": "Defensive Assists per 10",
+        "ultimatesEarnedPer10": "Ultimates Earned per 10",
+        "ultimatesUsedPer10": "Ultimates Used per 10",
+        "averageUltChargeTime": "Average Ult Charge Time",
+        "averageTimeToUseUlt": "Average Time to Use Ult",
+        "killsPerUltimate": "Kills per Ultimate",
+        "averageDroughtTime": "Average Drought Time",
+        "firstPickPercentage": "First Pick %",
+        "firstPicksPer10": "First Picks per 10",
+        "firstDeathPercentage": "First Death %",
+        "firstDeathsPer10": "First Deaths per 10",
+        "fletaDeadliftPercentage": "Fleta Deadlift %",
+        "mvpScore": "MVP Score",
+        "mapMvpRate": "Map MVP Rate",
+        "duelWinratePercentage": "Duel Winrate %",
+        "fightReversalPercentage": "Fight Reversal %",
+        "eliminationsPer10StdDev": "Eliminations Std Dev",
+        "deathsPer10StdDev": "Deaths Std Dev",
+        "allDamagePer10StdDev": "Damage Std Dev",
+        "consistencyScore": "Consistency Score"
+      }
+    },
+    "impactMetrics": {
+      "subtitle": "{count, plural, =1 {Analyzed across 1 map} other {Analyzed across # maps}}",
+      "consistency": "Consistency",
+      "keyStrengths": "Key Strengths",
+      "developmentAreas": "Areas to Consider",
+      "detailedMetrics": "Detailed Impact Metrics",
+      "stats": {
+        "mvpScore": "MVP Score",
+        "firstPickRate": "First Pick Rate",
+        "killsPerUlt": "Kills per Ult",
+        "firstPicks": "First Picks",
+        "firstDeaths": "First Deaths",
+        "duelWinrate": "Duel Winrate",
+        "fightReversal": "Fight Reversal",
+        "fletaDeadlift": "Team Impact",
+        "mapMvpRate": "Map MVP Rate"
+      }
+    },
+    "views": {
+      "sideBySide": "Side by Side",
+      "delta": "Delta",
+      "trends": "Trends",
+      "charts": "Charts",
+      "consistency": "Consistency",
+      "detailedStats": "Detailed Stats",
+      "impactMetrics": "Impact Metrics"
+    },
+    "filters": {
+      "title": "Comparison Filters",
+      "resetAll": "Reset All",
+      "playerLabel": "Player",
+      "heroesLabel": "Heroes",
+      "player": "Player",
+      "heroesCount": "{count, plural, =1 {1 hero} other {# heroes}}"
+    },
+    "playerSelector": {
+      "placeholder": "Select player...",
+      "search": "Search players...",
+      "noPlayerFound": "No player found.",
+      "loading": "Loading...",
+      "mapCount": "{count, plural, =1 {1 map} other {# maps}}"
+    },
+    "sideBySide": {
+      "requiresTwoMaps": "Side-by-side comparison requires exactly 2 maps.",
+      "statComparison": "Stat Comparison",
+      "stats": {
+        "eliminations": "Eliminations",
+        "deaths": "Deaths",
+        "damage": "Damage",
+        "healing": "Healing",
+        "mitigated": "Damage Mitigated",
+        "eliminationsPer10": "Eliminations per 10",
+        "deathsPer10": "Deaths per 10",
+        "damagePer10": "Damage per 10",
+        "healingPer10": "Healing per 10",
+        "mitigatedPer10": "Mitigated per 10"
+      }
+    },
+    "delta": {
+      "requiresTwoMaps": "Delta view requires exactly 2 maps.",
+      "from": "From",
+      "to": "To",
+      "previous": "Previous",
+      "significant": "Significant",
+      "summary": "Summary of Significant Changes",
+      "noSignificantChanges": "No significant changes detected (threshold: ±10%)",
+      "stats": {
+        "eliminations": "Eliminations",
+        "deaths": "Deaths",
+        "damage": "Damage",
+        "healing": "Healing",
+        "mitigated": "Damage Mitigated",
+        "eliminationsPer10": "Eliminations per 10",
+        "deathsPer10": "Deaths per 10",
+        "damagePer10": "Damage per 10",
+        "healingPer10": "Healing per 10",
+        "mitigatedPer10": "Mitigated per 10"
+      }
+    },
+    "trends": {
+      "requiresThreePlus": "Trends view requires 3 or more maps.",
+      "aggregateSummary": "Aggregate Summary",
+      "totalMaps": "Total Maps",
+      "avgElimsPer10": "Avg Elims/10",
+      "avgDeathsPer10": "Avg Deaths/10",
+      "avgDamagePer10": "Avg Damage/10",
+      "performanceProgression": "Performance Progression",
+      "firstHalf": "First Half",
+      "secondHalf": "Second Half",
+      "maps": "Maps",
+      "improvement": "Improvement",
+      "improvementDesc": "Performance increased in the second half of maps.",
+      "decline": "Decline",
+      "declineDesc": "Performance decreased in the second half of maps.",
+      "stable": "Stable",
+      "stableDesc": "Performance remained consistent across all maps.",
+      "bestPerformance": "Best Performance",
+      "needsImprovement": "Needs Improvement",
+      "elimsPer10": "Elims/10",
+      "deathsPer10": "Deaths/10",
+      "damagePer10": "Damage/10",
+      "perMapBreakdown": "Per-Map Breakdown",
+      "elims": "Elims/10",
+      "deaths": "Deaths/10",
+      "damage": "Damage/10"
+    },
+    "charts": {
+      "performanceProgression": "Performance Progression",
+      "statComparison": "Stat Comparison",
+      "performanceProfile": "Performance Profile",
+      "firstPickPercentage": "First Pick %",
+      "firstDeathPercentage": "First Death %",
+      "killsPerUltimate": "Kills per Ultimate",
+      "duelWinrate": "Duel Winrate",
+      "soloKillsPer10": "Solo Kills per 10",
+      "damageTakenPer10": "Damage Taken per 10",
+      "healingReceivedPer10": "Healing Received per 10",
+      "fightReversalPercentage": "Fight Reversal %",
+      "per10": "per 10",
+      "avgUltImpact": "Average ultimate impact",
+      "oneVsOneSuccess": "1v1 success rate",
+      "individualKills": "Individual eliminations",
+      "damageReceived": "Damage received",
+      "supportReceived": "Support received",
+      "clutchPlays": "Clutch performance",
+      "totalEliminations": "Total Eliminations",
+      "totalDeaths": "Total Deaths",
+      "totalDamage": "Total Damage",
+      "avgPer10": "Avg per 10",
+      "eliminations": "Eliminations",
+      "deaths": "Deaths",
+      "damage": "Damage (K)",
+      "healing": "Healing (K)",
+      "mitigated": "Mitigated (K)",
+      "healingPer10K": "Healing/10 (K)",
+      "blockedPer10K": "Blocked/10 (K)",
+      "elimsPer10": "Elims/10",
+      "deathsPer10": "Deaths/10",
+      "damagePer10K": "Damage/10 (K)",
+      "elimsPer10Short": "Elims",
+      "deathsPer10Short": "Deaths",
+      "damagePer10Short": "Damage",
+      "healingPer10Short": "Healing",
+      "mitigatedPer10Short": "Mitigated",
+      "averagePerformance": "Average Performance",
+      "errorRange": "Range",
+      "stdDev": "Std Dev"
+    },
+    "consistency": {
+      "title": "Performance Consistency",
+      "subtitle": "Measures how reliable performance is across different maps and contexts",
+      "consistencyScore": "Consistency Score",
+      "highlyConsistent": "Highly Consistent",
+      "consistent": "Consistent",
+      "moderatelyConsistent": "Moderately Consistent",
+      "variablePerformance": "Variable Performance",
+      "meanStdDev": "Mean ± Standard Deviation",
+      "performanceAcrossMaps": "Performance Across Maps",
+      "understanding": {
+        "title": "Understanding Consistency Metrics",
+        "stdDev": "Measures how spread out performance is. Lower values = more consistent.",
+        "cv": "Normalized measure of dispersion. Allows comparison across different scales.",
+        "score": "Overall reliability metric (0-100). Higher scores indicate dependable, steady performance."
+      },
+      "metrics": {
+        "eliminations": "Eliminations",
+        "deaths": "Deaths",
+        "damage": "Damage",
+        "healing": "Healing",
+        "mean": "Mean",
+        "stdDev": "± Std Dev",
+        "range": "Range",
+        "variation": "Variation"
+      }
+    },
+    "comparisonMode": {
+      "label": "Comparison Mode",
+      "player": "Player",
+      "team": "Team",
+      "playerDescription": "Compare individual player performance across maps",
+      "teamDescription": "Compare your team vs enemy team across maps"
+    },
+    "mapSelectionMode": {
+      "label": "Map Selection",
+      "individual": "Individual Maps",
+      "groups": "Map Groups",
+      "individualDescription": "Compare using individually selected maps",
+      "groupsDescription": "Compare using predefined map groups (e.g., Brawl Maps, Open Maps)",
+      "selectGroups": "Select Map Groups",
+      "selectGroupsPlaceholder": "Select map groups to compare...",
+      "manageGroups": "Manage Groups",
+      "groupsHint": "You can create and manage map groups from the map groups page",
+      "individualMapsSelected": "{count, plural, =1 {1 map selected from scrim page} other {# maps selected from scrim page}}"
+    },
+    "mapGroupSelector": {
+      "title": "Select Map Groups to Compare",
+      "description": "Choose up to 2 map groups to compare performance. You can compare across different map types, playstyles, or time periods.",
+      "noGroups": {
+        "title": "No Map Groups Available",
+        "description": "Create map groups to organize and compare your team's performance",
+        "createButton": "Create Map Groups"
+      },
+      "hint": {
+        "selectGroups": "Select at least one map group to continue",
+        "selectOneMore": "Select one more group for comparison (optional)",
+        "readyToCompare": "Ready to compare selected groups"
+      },
+      "compareButton": "Compare"
+    },
+    "teamComparison": {
+      "myTeam": "My Team",
+      "enemyTeam": "Enemy Team",
+      "players": "{count, plural, =1 {1 player} other {# players}}",
+      "comparingMaps": "{count, plural, =1 {Comparing 1 map} other {Comparing # maps}}",
+      "categories": {
+        "combat": "Combat Performance",
+        "damage": "Damage & Survivability",
+        "support": "Support & Defense",
+        "ultimate": "Ultimate Economy"
+      },
+      "stats": {
+        "eliminationsPer10": "Eliminations per 10",
+        "finalBlowsPer10": "Final Blows per 10",
+        "deathsPer10": "Deaths per 10",
+        "firstPickPercentage": "First Pick %",
+        "firstDeathPercentage": "First Death %",
+        "heroDamagePer10": "Hero Damage per 10",
+        "damageTakenPer10": "Damage Taken per 10",
+        "healingDealtPer10": "Healing Dealt per 10",
+        "damageBlockedPer10": "Damage Blocked per 10",
+        "ultimatesEarnedPer10": "Ultimates Earned per 10",
+        "averageUltChargeTime": "Avg Ult Charge Time",
+        "killsPerUltimate": "Kills per Ultimate"
+      }
+    }
+  },
   "mapPage": {
     "mapMetadata": {
       "title": "{mapName} Overview | Parsertime",
@@ -746,7 +1099,7 @@
         "barrierDmgDealt": "Barrier Damage Dealt",
         "heroDmgDealt": "Hero Damage Dealt",
         "healingDealt": "Healing Dealt",
-        "healingReceived": "Healing Receieved",
+        "healingReceived": "Healing Received",
         "selfHealing": "Self Healing",
         "dmgTaken": "Damage Taken",
         "dmgBlocked": "Damage Blocked",
@@ -914,11 +1267,13 @@
         "deaths": "Deaths",
         "kd": "K/D",
         "kad": "KA/D",
+        "firstDeathRate": "1st Death %",
+        "teamFirstDeathRate": "Team 1st Death %",
         "heroDmgDealt": "Hero Damage Dealt",
-        "dmgReceived": "Damage Receieved",
-        "healingReceived": "Healing Receieved",
+        "dmgReceived": "Damage Received",
+        "healingReceived": "Healing Received",
         "healingDealt": "Healing Dealt",
-        "dmgToHealsRatio": "Damage Dealt:Healing Receieved",
+        "dmgToHealsRatio": "Damage Dealt:Healing Received",
         "ultsCharged": "Ultimates Charged",
         "ultsUsed": "Ultimates Used"
       },
@@ -938,6 +1293,8 @@
         "deaths": "The number of deaths the player had.",
         "kd": "The player's kill/death ratio.",
         "kad": "The player's kill/assist/death ratio.",
+        "firstDeathRate": "Percentage of fights where the player was the first to die overall.",
+        "teamFirstDeathRate": "Percentage of fights where the player was the first on their team to die.",
         "heroDmgDealt": "The amount of hero damage the player dealt.",
         "dmgReceived": "The amount of damage the player received.",
         "healingReceived": "The amount of healing the player received.",
@@ -1057,8 +1414,8 @@
           "healingDealt": "Healing Dealt",
           "healingDealtNum": "{num} Healing Dealt",
           "healingDealtPer10Min": "{num} healing dealt per 10 minutes",
-          "healingReceived": "Healing Receieved",
-          "healingReceivedNum": "{num} Healing Receieved",
+          "healingReceived": "Healing Received",
+          "healingReceivedNum": "{num} Healing Received",
           "healingReceivedPer10Min": "{num} healing received per 10 minutes"
         },
         "specificHero": {
@@ -1093,8 +1450,8 @@
           "healingDealt": "Healing Dealt",
           "healingDealtNum": "{num} Healing Dealt",
           "healingDealtPer10Min": "{num} healing dealt per 10 minutes",
-          "healingReceived": "Healing Receieved",
-          "healingReceivedNum": "{num} Healing Receieved",
+          "healingReceived": "Healing Received",
+          "healingReceivedNum": "{num} Healing Received",
           "healingReceivedPer10Min": "{num} healing received per 10 minutes",
           "ratingTooltip": "Your hero SR is calculated based on map performance. For overall hero SR, hover over your player name in the statistics table on the map overview page.",
           "unratedTooltip": "Play at least 60 seconds to be ranked",
@@ -1376,7 +1733,7 @@
         "eliminations": "Eliminations",
         "final_blows": "Final Blows",
         "healing_dealt": "Healing Dealt",
-        "healing_received": "Healing Receieved",
+        "healing_received": "Healing Received",
         "self_healing": "Self Healing",
         "damage_taken": "Damage Taken",
         "damage_blocked": "Damage Blocked",
@@ -1497,7 +1854,7 @@
         "eliminations": "Eliminations",
         "final_blows": "Final Blows",
         "healing_dealt": "Healing Dealt",
-        "healing_received": "Healing Receieved",
+        "healing_received": "Healing Received",
         "self_healing": "Self Healing",
         "damage_taken": "Damage Taken",
         "damage_blocked": "Damage Blocked",
diff --git a/messages/ko.json b/messages/ko.json
index 553512f0e..d93ce74fb 100644
--- a/messages/ko.json
+++ b/messages/ko.json
@@ -39,6 +39,7 @@
   },
   "heroes": {
     "ana": "아나",
+    "anran": "안란",
     "ashe": "애쉬",
     "baptiste": "바티스트",
     "bastion": "바스티온",
@@ -46,12 +47,15 @@
     "cassidy": "캐서디",
     "doomfist": "둠피스트",
     "dva": "디바",
+    "domina": "도미나",
     "echo": "에코",
+    "emre": "엠레",
     "freja": "프레야",
     "genji": "겐지",
     "hanzo": "한조",
     "hazard": "해저드",
     "illari": "일라리",
+    "jetpackcat": "제트팩 캣",
     "junkerqueen": "정커 퀸",
     "junkrat": "정크랫",
     "juno": "주노",
@@ -61,6 +65,7 @@
     "mauga": "마우가",
     "mei": "메이",
     "mercy": "메르시",
+    "mizuki": "미즈키",
     "moira": "모이라",
     "orisa": "오리사",
     "pharah": "파라",
@@ -794,6 +799,8 @@
         "deaths": "죽음",
         "kd": "킬/데스",
         "kad": "킬/지원/데스",
+        "firstDeathRate": "첫 사망 %",
+        "teamFirstDeathRate": "팀 첫 사망 %",
         "heroDmgDealt": "가한 영웅 피해",
         "dmgReceived": "받은 피해",
         "healingReceived": "받은 치유",
@@ -818,6 +825,8 @@
         "deaths": "플레이어의 죽음 수입니다.",
         "kd": "플레이어의 킬/데스 비율입니다.",
         "kad": "플레이어의 킬/지원/데스 비율입니다.",
+        "firstDeathRate": "전체 전투에서 플레이어가 처음으로 사망한 비율입니다.",
+        "teamFirstDeathRate": "전체 전투에서 플레이어가 팀에서 처음으로 사망한 비율입니다.",
         "heroDmgDealt": "플레이어가 가한 영웅 피해량입니다.",
         "dmgReceived": "플레이어가 받은 피해량입니다.",
         "healingReceived": "플레이어가 받은 치유량입니다.",
diff --git a/messages/zh.json b/messages/zh.json
index 78ac0f75f..f78846ebd 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -39,6 +39,7 @@
   },
   "heroes": {
     "ana": "安娜",
+    "anran": "安燃",
     "ashe": "艾什",
     "baptiste": "巴蒂斯特",
     "bastion": "堡垒",
@@ -46,12 +47,15 @@
     "cassidy": "卡西迪",
     "doomfist": "末日铁拳",
     "dva": "D.Va",
+    "domina": "多米娜",
     "echo": "回声",
+    "emre": "伊默",
     "freja": "弗蕾亞",
     "genji": "源氏",
     "hanzo": "半藏",
     "hazard": "骇灾",
     "illari": "伊拉锐",
+    "jetpackcat": "火箭貓",
     "junkerqueen": "渣客女王",
     "junkrat": "狂鼠",
     "juno": "朱诺",
@@ -61,6 +65,7 @@
     "mauga": "毛加",
     "mei": "美",
     "mercy": "天使",
+    "mizuki": "瑞稀",
     "moira": "莫伊拉",
     "orisa": "奥丽莎",
     "pharah": "法老之鹰",
@@ -794,6 +799,8 @@
         "deaths": "死亡次数",
         "kd": "击杀/死亡比",
         "kad": "击杀+助攻/死亡比",
+        "firstDeathRate": "首死率",
+        "teamFirstDeathRate": "团队首死率",
         "heroDmgDealt": "英雄伤害",
         "dmgReceived": "受到的伤害",
         "healingReceived": "接受的治疗",
@@ -818,6 +825,8 @@
         "deaths": "玩家的死亡次数。",
         "kd": "玩家的击杀/死亡比。",
         "kad": "玩家的击杀+助攻/死亡比。",
+        "firstDeathRate": "玩家在所有战斗中率先阵亡的百分比。",
+        "teamFirstDeathRate": "玩家在所有战斗中作为队伍内首个阵亡的百分比。",
         "heroDmgDealt": "玩家造成的英雄伤害量。",
         "dmgReceived": "玩家承受的伤害量。",
         "healingReceived": "玩家接受的治疗量。",
diff --git a/package.json b/package.json
index 6ace0c7a8..5bd516312 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@effect/language-service": "^0.40.0",
+    "@flags-sdk/vercel": "^1.0.1",
     "@floating-ui/react": "^0.27.16",
     "@headlessui/react": "^2.2.8",
     "@heroicons/react": "^2.2.0",
@@ -89,6 +90,7 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/blob": "^2.0.0",
     "@vercel/edge-config": "^1.4.0",
+    "@vercel/flags-core": "^1.0.1",
     "@vercel/functions": "^3.1.0",
     "@vercel/kv": "^3.0.0",
     "@vercel/speed-insights": "^1.2.0",
@@ -103,6 +105,7 @@
     "date-fns": "^4.1.0",
     "effect": "^3.17.13",
     "embla-carousel-react": "^8.6.0",
+    "flags": "^4.0.3",
     "framer-motion": "^12.23.13",
     "fuse.js": "^7.1.0",
     "geist": "^1.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ad851bcb8..c9521ff71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,6 +43,9 @@ importers:
       '@effect/language-service':
         specifier: ^0.40.0
         version: 0.40.0
+      '@flags-sdk/vercel':
+        specifier: ^1.0.1
+        version: 1.0.1(@vercel/flags-core@1.0.1(@aws-sdk/credential-provider-web-identity@3.890.0)(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2)))(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
       '@floating-ui/react':
         specifier: ^0.27.16
         version: 0.27.16(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -223,6 +226,9 @@ importers:
       '@vercel/edge-config':
         specifier: ^1.4.0
         version: 1.4.0(@opentelemetry/api@1.9.0)
+      '@vercel/flags-core':
+        specifier: ^1.0.1
+        version: 1.0.1(@aws-sdk/credential-provider-web-identity@3.890.0)(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))
       '@vercel/functions':
         specifier: ^3.1.0
         version: 3.1.0(@aws-sdk/credential-provider-web-identity@3.890.0)
@@ -265,6 +271,9 @@ importers:
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.2.3)
+      flags:
+        specifier: ^4.0.3
+        version: 4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       framer-motion:
         specifier: ^12.23.13
         version: 12.23.13(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -729,6 +738,10 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
+  '@edge-runtime/cookies@5.0.2':
+    resolution: {integrity: sha512-Sd8LcWpZk/SWEeKGE8LT6gMm5MGfX/wm+GPnh1eBEtCpya3vYqn37wYknwAHw92ONoyyREl1hJwxV/Qx2DWNOg==}
+    engines: {node: '>=16'}
+
   '@effect/language-service@0.40.0':
     resolution: {integrity: sha512-VHikOhYXm+ECy+mLSszHgCfP9YyKQyB9GLFGBKY2nbnru9xwgCnar8pBLA0AkSUjAgn3hc/mdcFdb/XL9uywLQ==}
     hasBin: true
@@ -982,6 +995,12 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@flags-sdk/vercel@1.0.1':
+    resolution: {integrity: sha512-RKdoetYr0Qp6ecbiary4QRmwkl0FYvRlA0hE0u/chz1Ao4NOV05x+moisUvAt4oNMSpgNjCcwtrg9ct1iF1mAw==}
+    peerDependencies:
+      '@vercel/flags-core': 1.0.1
+      flags: '*'
+
   '@floating-ui/core@1.7.3':
     resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
@@ -3443,6 +3462,18 @@ packages:
       '@opentelemetry/api':
         optional: true
 
+  '@vercel/flags-core@1.0.1':
+    resolution: {integrity: sha512-jlj7J/bctERGbFYVCGK2DNXQ2dz2ol7Km2kduhJ0QMrqCsIlloq4HY6jgyJPToe9VpPleJyqT6TaYJACUqdCYg==}
+    peerDependencies:
+      '@openfeature/server-sdk': 1.18.0
+      flags: '*'
+      next: '*'
+    peerDependenciesMeta:
+      '@openfeature/server-sdk':
+        optional: true
+      next:
+        optional: true
+
   '@vercel/functions@2.2.13':
     resolution: {integrity: sha512-14ArBSIIcOBx9nrEgaJb4Bw+en1gl6eSoJWh8qjifLl5G3E4dRXCFOT8HP+w66vb9Wqyd1lAQBrmRhRwOj9X9A==}
     engines: {node: '>= 18'}
@@ -3461,6 +3492,15 @@ packages:
       '@aws-sdk/credential-provider-web-identity':
         optional: true
 
+  '@vercel/functions@3.4.2':
+    resolution: {integrity: sha512-WDsNNuGOOUhRYxfcSgk8nlXaYW/6u1Lw2eaKm0y4+gDPGK/hwmYIeP2hESfccuCiPXd5ZGO8Jz/V5Ud3ZByoUQ==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@aws-sdk/credential-provider-web-identity': '*'
+    peerDependenciesMeta:
+      '@aws-sdk/credential-provider-web-identity':
+        optional: true
+
   '@vercel/kv@3.0.0':
     resolution: {integrity: sha512-pKT8fRnfyYk2MgvyB6fn6ipJPCdfZwiKDdw7vB+HL50rjboEBHDVBEcnwfkEpVSp2AjNtoaOUH7zG+bVC/rvSg==}
     engines: {node: '>=14.6'}
@@ -3500,6 +3540,10 @@ packages:
     resolution: {integrity: sha512-XOoUcf/1VfGArUAfq0ELxk6TD7l4jGcrOsWjQibj4wYM74uNihzZ9gA46ywWegoqKWWdph4y5CKxGI9823deoA==}
     engines: {node: '>= 20'}
 
+  '@vercel/oidc@3.2.0':
+    resolution: {integrity: sha512-UycprH3T6n3jH0k44NHMa7pnFHGu/N05MjojYr+Mc6I7obkoLIJujSWwin1pCvdy/eOxrI/l3uDLQsmcrOb4ug==}
+    engines: {node: '>= 20'}
+
   '@vercel/speed-insights@1.2.0':
     resolution: {integrity: sha512-y9GVzrUJ2xmgtQlzFP2KhVRoCglwfRQgjyfY607aU0hh0Un6d0OUyrJkjuAlsV18qR4zfoFPs/BiIj9YDS6Wzw==}
     peerDependencies:
@@ -4387,6 +4431,26 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
+  flags@4.0.3:
+    resolution: {integrity: sha512-rLkO+Hn6dSEsDZm6lHuXr3GjfHf8N67lhXCFUeSRBjDdb/43ez5Je8DC/K0HzMtl3LcWc7zgF79V/3WzJXVm/w==}
+    peerDependencies:
+      '@opentelemetry/api': ^1.7.0
+      '@sveltejs/kit': '*'
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   flat-cache@4.0.1:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
@@ -4765,6 +4829,12 @@ packages:
   jose@4.15.9:
     resolution: {integrity: sha512-1vUQX+IdDMVPj4k8kOxgUqlcK518yluMuGZwqlr44FS1ppZB/5GWh4rZG89erpOBOJjU/OBsnCVFfapsRz6nEA==}
 
+  jose@5.10.0:
+    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
+
+  jose@5.2.1:
+    resolution: {integrity: sha512-qiaQhtQRw6YrOaOj0v59h3R6hUY9NvxBmmnMfKemkqYmBB0tEc97NbLP7ix44VP5p9/0YHG8Vyhzuo5YBNwviA==}
+
   jose@6.1.0:
     resolution: {integrity: sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==}
 
@@ -4774,6 +4844,10 @@ packages:
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
+  js-xxhash@4.0.0:
+    resolution: {integrity: sha512-3Q2eIqG6s1KEBBmkj9tGM9lef8LJbuRyTVBdI3GpTnrvtytunjLPO0wqABp5qhtMzfA32jYn1FlnIV7GH1RAHQ==}
+    engines: {node: '>=18.0.0'}
+
   js-yaml@4.1.0:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
@@ -6809,6 +6883,8 @@ snapshots:
       react: 19.2.3
       tslib: 2.8.1
 
+  '@edge-runtime/cookies@5.0.2': {}
+
   '@effect/language-service@0.40.0': {}
 
   '@emnapi/core@1.5.0':
@@ -7031,6 +7107,11 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@flags-sdk/vercel@1.0.1(@vercel/flags-core@1.0.1(@aws-sdk/credential-provider-web-identity@3.890.0)(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2)))(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))':
+    dependencies:
+      '@vercel/flags-core': 1.0.1(@aws-sdk/credential-provider-web-identity@3.890.0)(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))
+      flags: 4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+
   '@floating-ui/core@1.7.3':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -9566,6 +9647,17 @@ snapshots:
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
 
+  '@vercel/flags-core@1.0.1(@aws-sdk/credential-provider-web-identity@3.890.0)(flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))':
+    dependencies:
+      '@vercel/functions': 3.4.2(@aws-sdk/credential-provider-web-identity@3.890.0)
+      flags: 4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      jose: 5.2.1
+      js-xxhash: 4.0.0
+    optionalDependencies:
+      next: 16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2)
+    transitivePeerDependencies:
+      - '@aws-sdk/credential-provider-web-identity'
+
   '@vercel/functions@2.2.13(@aws-sdk/credential-provider-web-identity@3.890.0)':
     dependencies:
       '@vercel/oidc': 2.0.2
@@ -9578,6 +9670,12 @@ snapshots:
     optionalDependencies:
       '@aws-sdk/credential-provider-web-identity': 3.890.0
 
+  '@vercel/functions@3.4.2(@aws-sdk/credential-provider-web-identity@3.890.0)':
+    dependencies:
+      '@vercel/oidc': 3.2.0
+    optionalDependencies:
+      '@aws-sdk/credential-provider-web-identity': 3.890.0
+
   '@vercel/kv@3.0.0':
     dependencies:
       '@upstash/redis': 1.35.3
@@ -9613,6 +9711,8 @@ snapshots:
       '@types/ms': 2.1.0
       ms: 2.1.3
 
+  '@vercel/oidc@3.2.0': {}
+
   '@vercel/speed-insights@1.2.0(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react@19.2.3)':
     optionalDependencies:
       next: 16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2)
@@ -10392,7 +10492,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.44.0(eslint@9.39.2(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.5.1)))(eslint@9.39.2(jiti@2.5.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.44.0(eslint@9.39.2(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.5.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
@@ -10414,7 +10514,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.2(jiti@2.5.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.44.0(eslint@9.39.2(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.5.1)))(eslint@9.39.2(jiti@2.5.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.44.0(eslint@9.39.2(jiti@2.5.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.5.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -10727,6 +10827,16 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
+  flags@4.0.3(@opentelemetry/api@1.9.0)(next@16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@edge-runtime/cookies': 5.0.2
+      jose: 5.10.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.0
+      next: 16.1.1(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.93.2)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
@@ -11102,12 +11212,18 @@ snapshots:
 
   jose@4.15.9: {}
 
+  jose@5.10.0: {}
+
+  jose@5.2.1: {}
+
   jose@6.1.0: {}
 
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
 
+  js-xxhash@4.0.0: {}
+
   js-yaml@4.1.0:
     dependencies:
       argparse: 2.0.1
diff --git a/prisma/migrations/20260128000532_add_comparison_group_model/migration.sql b/prisma/migrations/20260128000532_add_comparison_group_model/migration.sql
new file mode 100644
index 000000000..d04eb4099
--- /dev/null
+++ b/prisma/migrations/20260128000532_add_comparison_group_model/migration.sql
@@ -0,0 +1,30 @@
+-- CreateTable
+CREATE TABLE "public"."ComparisonGroup" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "teamId" INTEGER NOT NULL,
+    "createdBy" TEXT NOT NULL,
+    "playerName" TEXT NOT NULL,
+    "heroes" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "mapIds" INTEGER[],
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ComparisonGroup_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "ComparisonGroup_teamId_idx" ON "public"."ComparisonGroup"("teamId");
+
+-- CreateIndex
+CREATE INDEX "ComparisonGroup_createdBy_idx" ON "public"."ComparisonGroup"("createdBy");
+
+-- CreateIndex
+CREATE INDEX "ComparisonGroup_teamId_playerName_idx" ON "public"."ComparisonGroup"("teamId", "playerName");
+
+-- AddForeignKey
+ALTER TABLE "public"."ComparisonGroup" ADD CONSTRAINT "ComparisonGroup_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "public"."Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."ComparisonGroup" ADD CONSTRAINT "ComparisonGroup_createdBy_fkey" FOREIGN KEY ("createdBy") REFERENCES "public"."User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/migrations/20260128045919_add_map_groups/migration.sql b/prisma/migrations/20260128045919_add_map_groups/migration.sql
new file mode 100644
index 000000000..90150e353
--- /dev/null
+++ b/prisma/migrations/20260128045919_add_map_groups/migration.sql
@@ -0,0 +1,26 @@
+-- CreateTable
+CREATE TABLE "public"."MapGroup" (
+    "id" SERIAL NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "teamId" INTEGER NOT NULL,
+    "mapIds" INTEGER[],
+    "category" TEXT,
+    "createdBy" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "MapGroup_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "MapGroup_teamId_idx" ON "public"."MapGroup"("teamId");
+
+-- CreateIndex
+CREATE INDEX "MapGroup_createdBy_idx" ON "public"."MapGroup"("createdBy");
+
+-- AddForeignKey
+ALTER TABLE "public"."MapGroup" ADD CONSTRAINT "MapGroup_teamId_fkey" FOREIGN KEY ("teamId") REFERENCES "public"."Team"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."MapGroup" ADD CONSTRAINT "MapGroup_createdBy_fkey" FOREIGN KEY ("createdBy") REFERENCES "public"."User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/migrations/20260223235822_add_map_ban_model/migration.sql b/prisma/migrations/20260223235822_add_map_ban_model/migration.sql
new file mode 100644
index 000000000..18b393b4a
--- /dev/null
+++ b/prisma/migrations/20260223235822_add_map_ban_model/migration.sql
@@ -0,0 +1,22 @@
+-- CreateTable
+CREATE TABLE "public"."MapBan" (
+    "id" SERIAL NOT NULL,
+    "scrimId" INTEGER NOT NULL,
+    "map" TEXT NOT NULL,
+    "team" TEXT NOT NULL,
+    "banPosition" INTEGER NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "MapDataId" INTEGER NOT NULL,
+
+    CONSTRAINT "MapBan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "MapBan_scrimId_idx" ON "public"."MapBan"("scrimId");
+
+-- CreateIndex
+CREATE INDEX "MapBan_MapDataId_idx" ON "public"."MapBan"("MapDataId");
+
+-- AddForeignKey
+ALTER TABLE "public"."MapBan" ADD CONSTRAINT "MapBan_MapDataId_fkey" FOREIGN KEY ("MapDataId") REFERENCES "public"."MapData"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index e1473f7d4..6ceeaff16 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -42,28 +42,30 @@ model Session {
 }
 
 model User {
-  id             String         @id @default(cuid())
-  name           String?
-  email          String         @unique
-  emailVerified  DateTime?
-  image          String?
-  accounts       Account[]
-  sessions       Session[]
-  role           UserRole       @default(USER)
-  teamId         Int?
-  teams          Team[]
-  managedTeams   TeamManager[]
-  stripeId       String?        @unique
-  billingPlan    BillingPlan    @default(FREE)
-  Notification   Notification[]
-  AppSettings    AppSettings[]
-  titles         Title[]        @default([])
-  bannerImage    String?
-  createdAt      DateTime       @default(now())
-  updatedAt      DateTime       @default(now()) @updatedAt
-  battletag      String?
-  appliedTitles  AppliedTitle[]
-  seenOnboarding Boolean        @default(false)
+  id               String            @id @default(cuid())
+  name             String?
+  email            String            @unique
+  emailVerified    DateTime?
+  image            String?
+  accounts         Account[]
+  sessions         Session[]
+  role             UserRole          @default(USER)
+  teamId           Int?
+  teams            Team[]
+  managedTeams     TeamManager[]
+  stripeId         String?           @unique
+  billingPlan      BillingPlan       @default(FREE)
+  Notification     Notification[]
+  AppSettings      AppSettings[]
+  titles           Title[]           @default([])
+  bannerImage      String?
+  createdAt        DateTime          @default(now())
+  updatedAt        DateTime          @default(now()) @updatedAt
+  battletag        String?
+  appliedTitles    AppliedTitle[]
+  seenOnboarding   Boolean           @default(false)
+  comparisonGroups ComparisonGroup[]
+  mapGroups        MapGroup[]
 
   @@index([id, email])
 }
@@ -183,16 +185,18 @@ model AuditLog {
 }
 
 model Team {
-  id        Int           @id @default(autoincrement())
-  name      String
-  createdAt DateTime      @default(now())
-  updatedAt DateTime      @updatedAt
-  image     String?
-  users     User[]
-  scrims    Scrim[]
-  ownerId   String
-  managers  TeamManager[]
-  readonly  Boolean       @default(false)
+  id               Int               @id @default(autoincrement())
+  name             String
+  createdAt        DateTime          @default(now())
+  updatedAt        DateTime          @updatedAt
+  image            String?
+  users            User[]
+  scrims           Scrim[]
+  ownerId          String
+  managers         TeamManager[]
+  readonly         Boolean           @default(false)
+  comparisonGroups ComparisonGroup[]
+  mapGroups        MapGroup[]
 }
 
 model TeamManager {
@@ -220,6 +224,42 @@ model TeamInviteToken {
   expires DateTime
 }
 
+model ComparisonGroup {
+  id          Int      @id @default(autoincrement())
+  name        String
+  description String?
+  teamId      Int
+  createdBy   String
+  playerName  String
+  heroes      String[] @default([])
+  mapIds      Int[]
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  team        Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  creator     User     @relation(fields: [createdBy], references: [id], onDelete: Cascade)
+
+  @@index([teamId])
+  @@index([createdBy])
+  @@index([teamId, playerName])
+}
+
+model MapGroup {
+  id          Int      @id @default(autoincrement())
+  name        String
+  description String?
+  teamId      Int
+  mapIds      Int[]
+  category    String?
+  createdBy   String
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  team        Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
+  creator     User     @relation(fields: [createdBy], references: [id], onDelete: Cascade)
+
+  @@index([teamId])
+  @@index([createdBy])
+}
+
 model Scrim {
   id        Int      @id @default(autoincrement())
   name      String
@@ -264,6 +304,21 @@ model HeroBan {
   @@index([MapDataId])
 }
 
+model MapBan {
+  id          Int      @id @default(autoincrement())
+  scrimId     Int
+  map         String
+  team        String
+  banPosition Int
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+  MapData     MapData? @relation(fields: [MapDataId], references: [id])
+  MapDataId   Int
+
+  @@index([scrimId])
+  @@index([MapDataId])
+}
+
 model Note {
   id        Int      @id @default(autoincrement())
   content   String   @default("")
@@ -394,6 +449,7 @@ model MapData {
   ultimate_end         UltimateEnd[]
   ultimate_start       UltimateStart[]
   HeroBan              HeroBan[]
+  mapBans              MapBan[]
   Note                 Note[]
   calculatedStats      CalculatedStat[]
 
diff --git a/public/heroes/anran.png b/public/heroes/anran.png
new file mode 100644
index 000000000..9b31bb71f
Binary files /dev/null and b/public/heroes/anran.png differ
diff --git a/public/heroes/domina.png b/public/heroes/domina.png
new file mode 100644
index 000000000..2a043478f
Binary files /dev/null and b/public/heroes/domina.png differ
diff --git a/public/heroes/emre.png b/public/heroes/emre.png
new file mode 100644
index 000000000..0c55ec2b7
Binary files /dev/null and b/public/heroes/emre.png differ
diff --git a/public/heroes/jetpackcat.png b/public/heroes/jetpackcat.png
new file mode 100644
index 000000000..14f856471
Binary files /dev/null and b/public/heroes/jetpackcat.png differ
diff --git a/public/heroes/mizuki.png b/public/heroes/mizuki.png
new file mode 100644
index 000000000..a69176fcb
Binary files /dev/null and b/public/heroes/mizuki.png differ
diff --git a/src/app/.well-known/vercel/flags/route.ts b/src/app/.well-known/vercel/flags/route.ts
new file mode 100644
index 000000000..1eca35103
--- /dev/null
+++ b/src/app/.well-known/vercel/flags/route.ts
@@ -0,0 +1,4 @@
+import * as flags from "@/lib/flags";
+import { createFlagsDiscoveryEndpoint, getProviderData } from "flags/next";
+
+export const GET = createFlagsDiscoveryEndpoint(() => getProviderData(flags));
diff --git a/src/app/[team]/compare/page.tsx b/src/app/[team]/compare/page.tsx
new file mode 100644
index 000000000..9aa746649
--- /dev/null
+++ b/src/app/[team]/compare/page.tsx
@@ -0,0 +1,68 @@
+import { ComparisonContent } from "@/components/compare/comparison-content";
+import { DashboardLayout } from "@/components/dashboard-layout";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import prisma from "@/lib/prisma";
+import type { PagePropsWithLocale } from "@/types/next";
+import { $Enums } from "@prisma/client";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export async function generateMetadata(
+  props: PagePropsWithLocale<"/[team]/compare">
+): Promise<Metadata> {
+  const params = await props.params;
+  const t = await getTranslations({
+    locale: params.locale,
+    namespace: "comparePage.metadata",
+  });
+
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
+
+export default async function ComparePage(
+  props: PagePropsWithLocale<"/[team]/compare">
+) {
+  const params = await props.params;
+  const session = await auth();
+
+  if (!session?.user?.email) {
+    notFound();
+  }
+
+  const user = await getUser(session.user.email);
+  if (!user) {
+    notFound();
+  }
+
+  // Extract team ID from team slug
+  const teamId = parseInt(params.team);
+  if (isNaN(teamId)) {
+    notFound();
+  }
+
+  // Verify user has access to this team
+  const team = await prisma.team.findUnique({
+    where: { id: teamId },
+    include: {
+      users: true,
+    },
+  });
+
+  if (
+    user.role !== $Enums.UserRole.ADMIN &&
+    (!team || !team.users.some((teamUser) => teamUser.id === user.id))
+  ) {
+    notFound();
+  }
+
+  return (
+    <DashboardLayout>
+      <ComparisonContent teamId={teamId} locale={params.locale} />
+    </DashboardLayout>
+  );
+}
diff --git a/src/app/[team]/map-groups/page.tsx b/src/app/[team]/map-groups/page.tsx
new file mode 100644
index 000000000..0f805beb9
--- /dev/null
+++ b/src/app/[team]/map-groups/page.tsx
@@ -0,0 +1,101 @@
+import { MapGroupManager } from "@/components/compare/map-group-manager";
+import { DashboardLayout } from "@/components/dashboard-layout";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import prisma from "@/lib/prisma";
+import type { PagePropsWithLocale } from "@/types/next";
+import { $Enums } from "@prisma/client";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { notFound } from "next/navigation";
+
+export async function generateMetadata(
+  props: PagePropsWithLocale<"/[team]/map-groups">
+): Promise<Metadata> {
+  const params = await props.params;
+  const t = await getTranslations({
+    locale: params.locale,
+    namespace: "mapGroupsPage.metadata",
+  });
+
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
+
+export default async function MapGroupsPage(
+  props: PagePropsWithLocale<"/[team]/map-groups">
+) {
+  const params = await props.params;
+  const session = await auth();
+
+  if (!session?.user?.email) {
+    notFound();
+  }
+
+  const user = await getUser(session.user.email);
+  if (!user) {
+    notFound();
+  }
+
+  // Extract team ID from team slug
+  const teamId = parseInt(params.team);
+  if (isNaN(teamId)) {
+    notFound();
+  }
+
+  // Verify user has access to this team
+  const team = await prisma.team.findUnique({
+    where: { id: teamId },
+    include: {
+      users: true,
+    },
+  });
+
+  if (
+    user.role !== $Enums.UserRole.ADMIN &&
+    (!team || !team.users.some((teamUser) => teamUser.id === user.id))
+  ) {
+    notFound();
+  }
+
+  // Fetch all maps for this team (via Scrim relationship)
+  const maps = await prisma.map.findMany({
+    where: {
+      Scrim: {
+        teamId,
+      },
+    },
+    include: {
+      Scrim: {
+        select: {
+          id: true,
+          name: true,
+          date: true,
+        },
+      },
+    },
+    orderBy: [{ Scrim: { date: "desc" } }, { id: "asc" }],
+  });
+
+  const availableMaps = maps
+    .filter((map) => map.Scrim !== null)
+    .map((map) => ({
+      id: map.id,
+      name: map.name,
+      scrimName: map.Scrim!.name,
+      scrimDate: map.Scrim!.date,
+    }));
+
+  return (
+    <DashboardLayout>
+      <div className="flex-1 space-y-4 p-8 pt-6">
+        <div className="flex items-center justify-between space-y-2">
+          <h2 className="text-3xl font-bold tracking-tight">Map Groups</h2>
+        </div>
+        <MapGroupManager teamId={teamId} availableMaps={availableMaps} />
+      </div>
+    </DashboardLayout>
+  );
+}
diff --git a/src/app/[team]/scrim/[scrimId]/page.tsx b/src/app/[team]/scrim/[scrimId]/page.tsx
index 1624f903c..a127508b2 100644
--- a/src/app/[team]/scrim/[scrimId]/page.tsx
+++ b/src/app/[team]/scrim/[scrimId]/page.tsx
@@ -1,14 +1,10 @@
 import { DashboardLayout } from "@/components/dashboard-layout";
 import { AddMapCard } from "@/components/map/add-map";
 import { ClientDate } from "@/components/scrim/client-date";
-import { ReplayCode } from "@/components/scrim/replay-code";
+import { CompareSelectedButton } from "@/components/scrim/compare-selected-button";
+import { MapCardWithSelection } from "@/components/scrim/map-card-with-selection";
+import { ScrimOverviewCard } from "@/components/scrim/scrim-overview-card";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/components/ui/card";
 import { Link } from "@/components/ui/link";
 import {
   Tooltip,
@@ -18,14 +14,13 @@ import {
 import { getScrim } from "@/data/scrim-dto";
 import { getUser } from "@/data/user-dto";
 import { auth } from "@/lib/auth";
+import { mapComparison, overviewCard } from "@/lib/flags";
 import prisma from "@/lib/prisma";
-import { getMapNames, toKebabCase } from "@/lib/utils";
 import type { PagePropsWithLocale } from "@/types/next";
 import { $Enums } from "@prisma/client";
 import { ExclamationTriangleIcon, Pencil2Icon } from "@radix-ui/react-icons";
 import type { Metadata, Route } from "next";
 import { getTranslations } from "next-intl/server";
-import Image from "next/image";
 import { notFound } from "next/navigation";
 
 export async function generateMetadata(
@@ -79,7 +74,9 @@ export default async function ScrimDashboardPage(
   const t = await getTranslations("scrimPage");
 
   const scrim = await getScrim(id);
-  if (!scrim) notFound();
+  if (!scrim?.teamId) notFound();
+
+  const teamId = scrim.teamId; // TypeScript knows it's not null after the check
 
   const maps = (
     await prisma.map.findMany({
@@ -94,7 +91,7 @@ export default async function ScrimDashboardPage(
   const isManager =
     (await prisma.teamManager.findFirst({
       where: {
-        teamId: scrim?.teamId ?? 0,
+        teamId,
         userId: user?.id,
       },
     })) !== null && session !== null;
@@ -114,105 +111,103 @@ export default async function ScrimDashboardPage(
     },
   })) ?? { guestMode: false };
 
-  const mapNames = await getMapNames();
+  const [mapComparisonEnabled, overviewCardEnabled] = await Promise.all([
+    mapComparison(),
+    overviewCard(),
+  ]);
 
   return (
     <DashboardLayout guestMode={visibility.guestMode}>
-      <div className="flex-1 space-y-4 p-8 pt-6">
-        <h4 className="text-gray-600 dark:text-gray-400">
-          <Link href="/dashboard">&larr; {t("back")}</Link>
-          {" | "}
-          <Link href={`/stats/team/${scrim.teamId}` as Route}>
-            {t("viewStats")} &rarr;
-          </Link>
-        </h4>
-        <div className="flex items-center justify-between space-y-2">
-          <h2 className="text-3xl leading-none font-bold tracking-tight">
-            <span className="flex items-center space-x-2">
-              {scrim?.name ?? t("newScrim")}{" "}
-              {hasPerms && (
-                <Link
-                  className="inline-flex items-center pl-2"
-                  href={`/${params.team}/scrim/${params.scrimId}/edit` as Route}
-                  aria-label={t("edit")}
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Pencil2Icon className="h-6 w-6 align-middle" />
-                    </TooltipTrigger>
-                    <TooltipContent>{t("edit")}</TooltipContent>
-                  </Tooltip>
-                </Link>
-              )}
-            </span>
-          </h2>
-        </div>
-        <h4 className="scroll-m-20 pb-4 text-xl font-semibold tracking-tight">
-          <ClientDate date={scrim.date} />
-        </h4>
-        <p className="scroll-m-20 pb-2 text-2xl font-semibold tracking-tight">
-          {t("maps.title")}
-        </p>
-        {maps.length > 0 ? (
-          <div className="-m-2 flex flex-wrap">
-            {maps.map((map) => (
-              <div key={map.id} className="w-full p-2 md:w-1/3">
-                <Card className="relative h-48 max-w-md bg-cover">
+      <div className="flex-1 space-y-6 p-8 pt-6">
+        {/* Header Section */}
+        <div>
+          <h4 className="text-gray-600 dark:text-gray-400">
+            <Link href="/dashboard">&larr; {t("back")}</Link>
+            {" | "}
+            <Link href={`/stats/team/${teamId}` as Route}>
+              {t("viewStats")} &rarr;
+            </Link>
+          </h4>
+          <div className="mt-2 flex items-center justify-between">
+            <h2 className="text-3xl leading-none font-bold tracking-tight">
+              <span className="flex items-center space-x-2">
+                {scrim?.name ?? t("newScrim")}{" "}
+                {hasPerms && (
                   <Link
+                    className="inline-flex items-center pl-2"
                     href={
-                      `/${params.team}/scrim/${params.scrimId}/map/${map.id}` as Route
+                      `/${params.team}/scrim/${params.scrimId}/edit` as Route
                     }
-                    prefetch={true}
+                    aria-label={t("edit")}
                   >
-                    <CardHeader className="">
-                      <h3 className="z-10 text-3xl font-semibold tracking-tight text-white">
-                        {mapNames.get(toKebabCase(map.name)) ?? map.name}
-                      </h3>
-                    </CardHeader>
-                    <CardContent>
-                      <Image
-                        src={`/maps/${toKebabCase(map.name)}.webp`}
-                        alt={t("maps.altText", {
-                          map: mapNames.get(toKebabCase(map.name)) ?? map.name,
-                        })}
-                        fill
-                        className="rounded-md object-cover brightness-[0.65] select-none"
-                      />
-                    </CardContent>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Pencil2Icon className="h-6 w-6 align-middle" />
+                      </TooltipTrigger>
+                      <TooltipContent>{t("edit")}</TooltipContent>
+                    </Tooltip>
                   </Link>
-                  <CardFooter className="flex items-center justify-end pt-12">
-                    <div className="z-10 font-semibold tracking-tight text-white">
-                      {map.replayCode && (
-                        <ReplayCode replayCode={map.replayCode ?? ""} />
-                      )}
-                    </div>
-                  </CardFooter>
-                </Card>
-              </div>
-            ))}
-            {hasPerms && <AddMapCard />}
+                )}
+              </span>
+            </h2>
           </div>
-        ) : (
-          <>
-            <Alert variant="destructive" className="max-w-xl">
-              <ExclamationTriangleIcon className="h-4 w-4" />
-              <AlertTitle>{t("noMaps.title")}</AlertTitle>
-              <AlertDescription>
-                {t("noMaps.description")}
-                <Link
-                  href="https://docs.parsertime.app"
-                  target="_blank"
-                  external
-                >
-                  {t("noMaps.link")}
-                </Link>
-                .
-              </AlertDescription>
-            </Alert>
-            <div>{hasPerms && <AddMapCard />}</div>
-          </>
+          <h4 className="mt-2 text-xl font-semibold tracking-tight">
+            <ClientDate date={scrim.date} />
+          </h4>
+        </div>
+
+        {/* Overview Card */}
+        {overviewCardEnabled && maps.length > 0 && (
+          <ScrimOverviewCard scrimId={id} teamId={teamId} />
         )}
+
+        {/* Maps Section */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-2xl font-semibold tracking-tight">
+              {t("maps.title")}
+            </h3>
+          </div>
+
+          {maps.length > 0 ? (
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+              {maps.map((map) => (
+                <MapCardWithSelection
+                  key={map.id}
+                  map={map}
+                  scrimId={scrim.id}
+                  teamId={teamId}
+                  locale={params.locale}
+                  mapComparisonEnabled={mapComparisonEnabled}
+                />
+              ))}
+              {hasPerms && <AddMapCard />}
+            </div>
+          ) : (
+            <>
+              <Alert variant="destructive" className="max-w-xl">
+                <ExclamationTriangleIcon className="h-4 w-4" />
+                <AlertTitle>{t("noMaps.title")}</AlertTitle>
+                <AlertDescription>
+                  {t("noMaps.description")}
+                  <Link
+                    href="https://docs.parsertime.app"
+                    target="_blank"
+                    external
+                  >
+                    {t("noMaps.link")}
+                  </Link>
+                  .
+                </AlertDescription>
+              </Alert>
+              <div>{hasPerms && <AddMapCard />}</div>
+            </>
+          )}
+        </div>
       </div>
+
+      {/* Compare Selected Button */}
+      {mapComparisonEnabled && <CompareSelectedButton teamId={teamId} />}
     </DashboardLayout>
   );
 }
diff --git a/src/app/api/compare/groups/[id]/route.ts b/src/app/api/compare/groups/[id]/route.ts
new file mode 100644
index 000000000..913eef053
--- /dev/null
+++ b/src/app/api/compare/groups/[id]/route.ts
@@ -0,0 +1,148 @@
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import prisma from "@/lib/prisma";
+import { $Enums } from "@prisma/client";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "DELETE",
+    path: "/api/compare/groups/[id]",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const { id: idParam } = await params;
+    const groupId = parseInt(idParam);
+
+    if (isNaN(groupId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_group_id";
+      wideEvent.error = { message: "Invalid group ID" };
+      return new Response("Invalid group ID", { status: 400 });
+    }
+
+    wideEvent.group = { id: groupId };
+
+    const group = await prisma.comparisonGroup.findUnique({
+      where: { id: groupId },
+      include: {
+        team: {
+          select: {
+            ownerId: true,
+            users: {
+              where: { id: user.id },
+              select: { id: true },
+            },
+          },
+        },
+      },
+    });
+
+    if (!group) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "group_not_found";
+      wideEvent.error = { message: "Comparison group not found" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Comparison group not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    const isOwner = group.createdBy === user.id;
+    const isTeamOwner = group.team.ownerId === user.id;
+    const isAdmin =
+      user.role === $Enums.UserRole.ADMIN ||
+      user.role === $Enums.UserRole.MANAGER;
+    const isTeamMember = group.team.users.length > 0;
+
+    if (!isOwner && !isTeamOwner && !isAdmin) {
+      wideEvent.status_code = 403;
+      wideEvent.outcome = "forbidden";
+      wideEvent.error = {
+        message: "User does not have permission to delete this group",
+      };
+      wideEvent.permissions = {
+        is_owner: isOwner,
+        is_team_owner: isTeamOwner,
+        is_admin: isAdmin,
+        is_team_member: isTeamMember,
+      };
+      return NextResponse.json(
+        {
+          success: false,
+          error:
+            "You must be the group creator, team owner, or admin to delete this group",
+        },
+        { status: 403 }
+      );
+    }
+
+    wideEvent.permissions = {
+      is_owner: isOwner,
+      is_team_owner: isTeamOwner,
+      is_admin: isAdmin,
+    };
+
+    await prisma.comparisonGroup.delete({
+      where: { id: groupId },
+    });
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      deleted_group_id: groupId,
+      group_name: group.name,
+    };
+
+    return NextResponse.json({
+      success: true,
+      message: "Comparison group deleted successfully",
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error deleting comparison group", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to delete comparison group",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/groups/route.ts b/src/app/api/compare/groups/route.ts
new file mode 100644
index 000000000..654c310c0
--- /dev/null
+++ b/src/app/api/compare/groups/route.ts
@@ -0,0 +1,294 @@
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import prisma from "@/lib/prisma";
+import type { HeroName } from "@/types/heroes";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const CreateGroupSchema = z.object({
+  name: z.string().min(1, "Name is required").max(100, "Name is too long"),
+  description: z.string().max(500, "Description is too long").optional(),
+  teamId: z.number().int().positive("Team ID must be positive"),
+  playerName: z.string().min(1, "Player name is required"),
+  mapIds: z.array(z.number()).min(1, "At least one map must be selected"),
+  heroes: z.array(z.string()).optional(),
+});
+
+export async function GET(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "GET",
+    path: "/api/compare/groups",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const teamIdParam = request.nextUrl.searchParams.get("teamId");
+    const playerNameParam = request.nextUrl.searchParams.get("playerName");
+
+    if (!teamIdParam) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_team_id";
+      wideEvent.error = { message: "Team ID is required" };
+      return new Response("Team ID is required", { status: 400 });
+    }
+
+    const teamId = parseInt(teamIdParam);
+    if (isNaN(teamId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_team_id";
+      wideEvent.error = { message: "Invalid team ID" };
+      return new Response("Invalid team ID", { status: 400 });
+    }
+
+    wideEvent.team = { id: teamId };
+    wideEvent.filters = {
+      player_name: playerNameParam,
+    };
+
+    const groups = await prisma.comparisonGroup.findMany({
+      where: {
+        teamId,
+        ...(playerNameParam
+          ? { playerName: { equals: playerNameParam, mode: "insensitive" } }
+          : {}),
+      },
+      include: {
+        creator: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+    });
+
+    const formattedGroups = groups.map((group) => ({
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      playerName: group.playerName,
+      heroes: group.heroes,
+      mapIds: group.mapIds,
+      mapCount: group.mapIds.length,
+      createdBy: group.creator.name ?? group.creator.email,
+      createdAt: group.createdAt,
+      updatedAt: group.updatedAt,
+    }));
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      group_count: formattedGroups.length,
+      filtered_by_player: !!playerNameParam,
+    };
+
+    return NextResponse.json({
+      success: true,
+      groups: formattedGroups,
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error fetching comparison groups", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to fetch comparison groups",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "POST",
+    path: "/api/compare/groups",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const body = await request.json();
+    const validatedData = CreateGroupSchema.safeParse(body);
+
+    if (!validatedData.success) {
+      const firstError = validatedData.error.issues[0];
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "validation_error";
+      wideEvent.error = {
+        message: firstError?.message ?? "Validation failed",
+        validation_errors: validatedData.error.issues.map((e) => ({
+          path: e.path.join("."),
+          message: e.message,
+        })),
+      };
+      return NextResponse.json(
+        {
+          success: false,
+          error: firstError?.message ?? "Validation failed",
+          details: validatedData.error.issues,
+        },
+        { status: 400 }
+      );
+    }
+
+    const { name, description, teamId, playerName, mapIds, heroes } =
+      validatedData.data;
+
+    const team = await prisma.team.findUnique({
+      where: { id: teamId },
+      include: {
+        users: {
+          where: { id: user.id },
+        },
+      },
+    });
+
+    if (!team) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "team_not_found";
+      wideEvent.error = { message: "Team not found" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Team not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    if (team.users.length === 0 && team.ownerId !== user.id) {
+      wideEvent.status_code = 403;
+      wideEvent.outcome = "forbidden";
+      wideEvent.error = { message: "User is not a member of this team" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "You must be a member of this team to save comparison groups",
+        },
+        { status: 403 }
+      );
+    }
+
+    wideEvent.team = { id: teamId, name: team.name };
+    wideEvent.group = {
+      name,
+      player_name: playerName,
+      map_count: mapIds.length,
+      hero_count: heroes?.length ?? 0,
+    };
+
+    const group = await prisma.comparisonGroup.create({
+      data: {
+        name,
+        description,
+        teamId,
+        createdBy: user.id,
+        playerName,
+        mapIds,
+        heroes: (heroes as HeroName[]) ?? [],
+      },
+      include: {
+        creator: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+
+    wideEvent.status_code = 201;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      group_id: group.id,
+    };
+
+    return NextResponse.json(
+      {
+        success: true,
+        group: {
+          id: group.id,
+          name: group.name,
+          description: group.description,
+          playerName: group.playerName,
+          heroes: group.heroes,
+          mapIds: group.mapIds,
+          mapCount: group.mapIds.length,
+          createdBy: group.creator.name ?? group.creator.email,
+          createdAt: group.createdAt,
+          updatedAt: group.updatedAt,
+        },
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error creating comparison group", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to create comparison group",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/map-groups/[id]/route.ts b/src/app/api/compare/map-groups/[id]/route.ts
new file mode 100644
index 000000000..0b6bd8879
--- /dev/null
+++ b/src/app/api/compare/map-groups/[id]/route.ts
@@ -0,0 +1,354 @@
+import { deleteMapGroup, updateMapGroup } from "@/data/map-group-dto";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import prisma from "@/lib/prisma";
+import { $Enums } from "@prisma/client";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const UpdateMapGroupSchema = z.object({
+  name: z
+    .string()
+    .min(1, "Name is required")
+    .max(100, "Name is too long")
+    .optional(),
+  description: z.string().max(500, "Description is too long").optional(),
+  mapIds: z
+    .array(z.number())
+    .min(1, "At least one map must be selected")
+    .optional(),
+  category: z.string().max(50, "Category is too long").optional(),
+});
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "PUT",
+    path: "/api/compare/map-groups/[id]",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const { id: idParam } = await params;
+    const groupId = parseInt(idParam);
+
+    if (isNaN(groupId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_group_id";
+      wideEvent.error = { message: "Invalid group ID" };
+      return new Response("Invalid group ID", { status: 400 });
+    }
+
+    wideEvent.group = { id: groupId };
+
+    const body = await request.json();
+    const validatedData = UpdateMapGroupSchema.safeParse(body);
+
+    if (!validatedData.success) {
+      const firstError = validatedData.error.issues[0];
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "validation_error";
+      wideEvent.error = {
+        message: firstError?.message ?? "Validation failed",
+        validation_errors: validatedData.error.issues.map((e) => ({
+          path: e.path.join("."),
+          message: e.message,
+        })),
+      };
+      return NextResponse.json(
+        {
+          success: false,
+          error: firstError?.message ?? "Validation failed",
+          details: validatedData.error.issues,
+        },
+        { status: 400 }
+      );
+    }
+
+    const group = await prisma.mapGroup.findUnique({
+      where: { id: groupId },
+      include: {
+        team: {
+          select: {
+            ownerId: true,
+            users: {
+              where: { id: user.id },
+              select: { id: true },
+            },
+          },
+        },
+      },
+    });
+
+    if (!group) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "group_not_found";
+      wideEvent.error = { message: "Map group not found" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Map group not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    const isOwner = group.createdBy === user.id;
+    const isTeamOwner = group.team.ownerId === user.id;
+    const isAdmin =
+      user.role === $Enums.UserRole.ADMIN ||
+      user.role === $Enums.UserRole.MANAGER;
+
+    if (!isOwner && !isTeamOwner && !isAdmin) {
+      wideEvent.status_code = 403;
+      wideEvent.outcome = "forbidden";
+      wideEvent.error = {
+        message: "User does not have permission to update this group",
+      };
+      wideEvent.permissions = {
+        is_owner: isOwner,
+        is_team_owner: isTeamOwner,
+        is_admin: isAdmin,
+      };
+      return NextResponse.json(
+        {
+          success: false,
+          error:
+            "You must be the group creator, team owner, or admin to update this group",
+        },
+        { status: 403 }
+      );
+    }
+
+    wideEvent.permissions = {
+      is_owner: isOwner,
+      is_team_owner: isTeamOwner,
+      is_admin: isAdmin,
+    };
+
+    const { name, description, mapIds, category } = validatedData.data;
+
+    const updatedGroup = await updateMapGroup(groupId, {
+      name,
+      description,
+      mapIds,
+      category,
+    });
+
+    const groupWithCreator = await prisma.mapGroup.findUnique({
+      where: { id: updatedGroup.id },
+      include: {
+        creator: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      group_id: updatedGroup.id,
+      group_name: updatedGroup.name,
+      map_count: updatedGroup.mapIds.length,
+    };
+
+    return NextResponse.json({
+      success: true,
+      group: {
+        id: updatedGroup.id,
+        name: updatedGroup.name,
+        description: updatedGroup.description,
+        category: updatedGroup.category,
+        mapIds: updatedGroup.mapIds,
+        mapCount: updatedGroup.mapIds.length,
+        createdBy:
+          groupWithCreator?.creator.name ?? groupWithCreator?.creator.email,
+        createdAt: updatedGroup.createdAt,
+        updatedAt: updatedGroup.updatedAt,
+      },
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error updating map group", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to update map group",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "DELETE",
+    path: "/api/compare/map-groups/[id]",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const { id: idParam } = await params;
+    const groupId = parseInt(idParam);
+
+    if (isNaN(groupId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_group_id";
+      wideEvent.error = { message: "Invalid group ID" };
+      return new Response("Invalid group ID", { status: 400 });
+    }
+
+    wideEvent.group = { id: groupId };
+
+    const group = await prisma.mapGroup.findUnique({
+      where: { id: groupId },
+      include: {
+        team: {
+          select: {
+            ownerId: true,
+            users: {
+              where: { id: user.id },
+              select: { id: true },
+            },
+          },
+        },
+      },
+    });
+
+    if (!group) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "group_not_found";
+      wideEvent.error = { message: "Map group not found" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Map group not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    const isOwner = group.createdBy === user.id;
+    const isTeamOwner = group.team.ownerId === user.id;
+    const isAdmin =
+      user.role === $Enums.UserRole.ADMIN ||
+      user.role === $Enums.UserRole.MANAGER;
+    const isTeamMember = group.team.users.length > 0;
+
+    if (!isOwner && !isTeamOwner && !isAdmin) {
+      wideEvent.status_code = 403;
+      wideEvent.outcome = "forbidden";
+      wideEvent.error = {
+        message: "User does not have permission to delete this group",
+      };
+      wideEvent.permissions = {
+        is_owner: isOwner,
+        is_team_owner: isTeamOwner,
+        is_admin: isAdmin,
+        is_team_member: isTeamMember,
+      };
+      return NextResponse.json(
+        {
+          success: false,
+          error:
+            "You must be the group creator, team owner, or admin to delete this group",
+        },
+        { status: 403 }
+      );
+    }
+
+    wideEvent.permissions = {
+      is_owner: isOwner,
+      is_team_owner: isTeamOwner,
+      is_admin: isAdmin,
+    };
+
+    await deleteMapGroup(groupId);
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      deleted_group_id: groupId,
+      group_name: group.name,
+    };
+
+    return NextResponse.json({
+      success: true,
+      message: "Map group deleted successfully",
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error deleting map group", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to delete map group",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/map-groups/route.ts b/src/app/api/compare/map-groups/route.ts
new file mode 100644
index 000000000..c7527a05e
--- /dev/null
+++ b/src/app/api/compare/map-groups/route.ts
@@ -0,0 +1,289 @@
+import { createMapGroup } from "@/data/map-group-dto";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import prisma from "@/lib/prisma";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const CreateMapGroupSchema = z.object({
+  name: z.string().min(1, "Name is required").max(100, "Name is too long"),
+  description: z.string().max(500, "Description is too long").optional(),
+  teamId: z.number().int().positive("Team ID must be positive"),
+  mapIds: z.array(z.number()).min(1, "At least one map must be selected"),
+  category: z.string().max(50, "Category is too long").optional(),
+});
+
+export async function GET(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "GET",
+    path: "/api/compare/map-groups",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const teamIdParam = request.nextUrl.searchParams.get("teamId");
+    const categoryParam = request.nextUrl.searchParams.get("category");
+
+    if (!teamIdParam) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_team_id";
+      wideEvent.error = { message: "Team ID is required" };
+      return new Response("Team ID is required", { status: 400 });
+    }
+
+    const teamId = parseInt(teamIdParam);
+    if (isNaN(teamId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_team_id";
+      wideEvent.error = { message: "Invalid team ID" };
+      return new Response("Invalid team ID", { status: 400 });
+    }
+
+    wideEvent.team = { id: teamId };
+    wideEvent.filters = {
+      category: categoryParam,
+    };
+
+    const groups = await prisma.mapGroup.findMany({
+      where: {
+        teamId,
+        ...(categoryParam ? { category: categoryParam } : {}),
+      },
+      include: {
+        creator: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+    });
+
+    const formattedGroups = groups.map((group) => ({
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      category: group.category,
+      mapIds: group.mapIds,
+      mapCount: group.mapIds.length,
+      createdBy: group.creator.name ?? group.creator.email,
+      createdAt: group.createdAt,
+      updatedAt: group.updatedAt,
+    }));
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      group_count: formattedGroups.length,
+      filtered_by_category: !!categoryParam,
+    };
+
+    return NextResponse.json({
+      success: true,
+      groups: formattedGroups,
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error fetching map groups", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to fetch map groups",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "POST",
+    path: "/api/compare/map-groups",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const body = await request.json();
+    const validatedData = CreateMapGroupSchema.safeParse(body);
+
+    if (!validatedData.success) {
+      const firstError = validatedData.error.issues[0];
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "validation_error";
+      wideEvent.error = {
+        message: firstError?.message ?? "Validation failed",
+        validation_errors: validatedData.error.issues.map((e) => ({
+          path: e.path.join("."),
+          message: e.message,
+        })),
+      };
+      return NextResponse.json(
+        {
+          success: false,
+          error: firstError?.message ?? "Validation failed",
+          details: validatedData.error.issues,
+        },
+        { status: 400 }
+      );
+    }
+
+    const { name, description, teamId, mapIds, category } = validatedData.data;
+
+    const team = await prisma.team.findUnique({
+      where: { id: teamId },
+      include: {
+        users: {
+          where: { id: user.id },
+        },
+      },
+    });
+
+    if (!team) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "team_not_found";
+      wideEvent.error = { message: "Team not found" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "Team not found",
+        },
+        { status: 404 }
+      );
+    }
+
+    if (team.users.length === 0 && team.ownerId !== user.id) {
+      wideEvent.status_code = 403;
+      wideEvent.outcome = "forbidden";
+      wideEvent.error = { message: "User is not a member of this team" };
+      return NextResponse.json(
+        {
+          success: false,
+          error: "You must be a member of this team to create map groups",
+        },
+        { status: 403 }
+      );
+    }
+
+    wideEvent.team = { id: teamId, name: team.name };
+    wideEvent.group = {
+      name,
+      map_count: mapIds.length,
+      category,
+    };
+
+    const group = await createMapGroup({
+      name,
+      description,
+      teamId,
+      mapIds,
+      category,
+      createdBy: user.id,
+    });
+
+    const groupWithCreator = await prisma.mapGroup.findUnique({
+      where: { id: group.id },
+      include: {
+        creator: {
+          select: {
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+
+    wideEvent.status_code = 201;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      group_id: group.id,
+    };
+
+    return NextResponse.json(
+      {
+        success: true,
+        group: {
+          id: group.id,
+          name: group.name,
+          description: group.description,
+          category: group.category,
+          mapIds: group.mapIds,
+          mapCount: group.mapIds.length,
+          createdBy:
+            groupWithCreator?.creator.name ?? groupWithCreator?.creator.email,
+          createdAt: group.createdAt,
+          updatedAt: group.updatedAt,
+        },
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error creating map group", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to create map group",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/maps/route.ts b/src/app/api/compare/maps/route.ts
new file mode 100644
index 000000000..c29e513c6
--- /dev/null
+++ b/src/app/api/compare/maps/route.ts
@@ -0,0 +1,128 @@
+import { getAvailableMapsForComparison } from "@/data/comparison-dto";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import type { HeroName } from "@/types/heroes";
+import { MapType } from "@prisma/client";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "GET",
+    path: "/api/compare/maps",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const teamIdParam = request.nextUrl.searchParams.get("teamId");
+    const playerName = request.nextUrl.searchParams.get("playerName");
+    const dateFromParam = request.nextUrl.searchParams.get("dateFrom");
+    const dateToParam = request.nextUrl.searchParams.get("dateTo");
+    const mapTypeParam = request.nextUrl.searchParams.get("mapType");
+    const heroesParam = request.nextUrl.searchParams.get("heroes");
+
+    if (!teamIdParam) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_team_id";
+      wideEvent.error = { message: "Team ID is required" };
+      return new Response("Team ID is required", { status: 400 });
+    }
+
+    if (!playerName) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_player_name";
+      wideEvent.error = { message: "Player name is required" };
+      return new Response("Player name is required", { status: 400 });
+    }
+
+    const teamId = parseInt(teamIdParam);
+    if (isNaN(teamId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_team_id";
+      wideEvent.error = { message: "Invalid team ID" };
+      return new Response("Invalid team ID", { status: 400 });
+    }
+
+    const dateFrom = dateFromParam ? new Date(dateFromParam) : undefined;
+    const dateTo = dateToParam ? new Date(dateToParam) : undefined;
+
+    const mapType =
+      mapTypeParam && Object.values(MapType).includes(mapTypeParam as MapType)
+        ? (mapTypeParam as MapType)
+        : undefined;
+
+    const heroes = heroesParam
+      ? (heroesParam.split(",") as HeroName[])
+      : undefined;
+
+    wideEvent.team = { id: teamId };
+    wideEvent.filters = {
+      player_name: playerName,
+      date_from: dateFrom?.toISOString(),
+      date_to: dateTo?.toISOString(),
+      map_type: mapType,
+      heroes,
+      hero_count: heroes?.length ?? 0,
+    };
+
+    const maps = await getAvailableMapsForComparison({
+      teamId,
+      playerName,
+      dateFrom,
+      dateTo,
+      mapType,
+      heroes,
+    });
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      map_count: maps.length,
+      unique_scrims: new Set(maps.map((m) => m.scrimId)).size,
+      map_types: Array.from(new Set(maps.map((m) => m.mapType))),
+    };
+
+    return NextResponse.json({
+      success: true,
+      maps,
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error fetching maps for comparison", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to fetch maps",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/players/route.ts b/src/app/api/compare/players/route.ts
new file mode 100644
index 000000000..0d9ea2c3e
--- /dev/null
+++ b/src/app/api/compare/players/route.ts
@@ -0,0 +1,112 @@
+import { getTeamPlayers } from "@/data/comparison-dto";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "GET",
+    path: "/api/compare/players",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const teamIdParam = request.nextUrl.searchParams.get("teamId");
+    if (!teamIdParam) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_team_id";
+      wideEvent.error = { message: "Team ID is required" };
+      return new Response("Team ID is required", { status: 400 });
+    }
+
+    const teamId = parseInt(teamIdParam);
+    if (isNaN(teamId)) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_team_id";
+      wideEvent.error = { message: "Invalid team ID" };
+      return new Response("Invalid team ID", { status: 400 });
+    }
+
+    wideEvent.team = { id: teamId };
+
+    const mapIdsParam = request.nextUrl.searchParams.get("mapIds");
+    let mapIds: number[] | undefined;
+
+    if (mapIdsParam) {
+      try {
+        mapIds = JSON.parse(mapIdsParam) as number[];
+        if (
+          !Array.isArray(mapIds) ||
+          !mapIds.every((id) => typeof id === "number")
+        ) {
+          wideEvent.status_code = 400;
+          wideEvent.outcome = "invalid_map_ids";
+          wideEvent.error = { message: "Map IDs must be an array of numbers" };
+          return new Response("Map IDs must be an array of numbers", {
+            status: 400,
+          });
+        }
+      } catch {
+        wideEvent.status_code = 400;
+        wideEvent.outcome = "invalid_map_ids_json";
+        wideEvent.error = { message: "Map IDs must be valid JSON" };
+        return new Response("Map IDs must be valid JSON", { status: 400 });
+      }
+    }
+
+    const players = await getTeamPlayers(teamId, mapIds);
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      player_count: players.length,
+      map_ids: mapIds,
+      map_count: mapIds?.length ?? 0,
+      filtered: !!mapIds,
+    };
+
+    return NextResponse.json({
+      success: true,
+      players,
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error fetching players for comparison", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to fetch players",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/stats/route.ts b/src/app/api/compare/stats/route.ts
new file mode 100644
index 000000000..24c66b21a
--- /dev/null
+++ b/src/app/api/compare/stats/route.ts
@@ -0,0 +1,158 @@
+import { getComparisonStats } from "@/data/comparison-dto";
+import { getUser } from "@/data/user-dto";
+import { auth } from "@/lib/auth";
+import { Logger } from "@/lib/logger";
+import type { HeroName } from "@/types/heroes";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const MapIdsSchema = z
+  .array(z.number())
+  .min(1, "At least one map must be provided");
+const PlayerNameSchema = z.string().min(1, "Player name is required");
+const HeroesSchema = z.array(z.string()).optional();
+
+export async function GET(request: NextRequest) {
+  const startTime = Date.now();
+  const wideEvent: Record<string, unknown> = {
+    method: "GET",
+    path: "/api/compare/stats",
+    timestamp: new Date().toISOString(),
+  };
+
+  try {
+    const session = await auth();
+    if (!session?.user?.email) {
+      wideEvent.status_code = 401;
+      wideEvent.outcome = "unauthorized";
+      wideEvent.error = { message: "No session found" };
+      return new Response("Unauthorized", { status: 401 });
+    }
+
+    const user = await getUser(session.user.email);
+    if (!user) {
+      wideEvent.status_code = 404;
+      wideEvent.outcome = "user_not_found";
+      wideEvent.error = { message: "User not found" };
+      return new Response("User not found", { status: 404 });
+    }
+
+    wideEvent.user = { id: user.id, email: user.email };
+
+    const mapIdsParam = request.nextUrl.searchParams.get("mapIds");
+    const playerName = request.nextUrl.searchParams.get("playerName");
+    const heroesParam = request.nextUrl.searchParams.get("heroes");
+
+    if (!mapIdsParam) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_map_ids";
+      wideEvent.error = { message: "Map IDs are required" };
+      return new Response("Map IDs are required", { status: 400 });
+    }
+
+    if (!playerName) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "missing_player_name";
+      wideEvent.error = { message: "Player name is required" };
+      return new Response("Player name is required", { status: 400 });
+    }
+
+    let mapIds: number[];
+    try {
+      mapIds = JSON.parse(mapIdsParam) as number[];
+    } catch {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_map_ids";
+      wideEvent.error = { message: "Map IDs must be a valid JSON array" };
+      return new Response("Map IDs must be a valid JSON array", {
+        status: 400,
+      });
+    }
+
+    const validMapIds = MapIdsSchema.safeParse(mapIds);
+    if (!validMapIds.success) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_map_ids_validation";
+      wideEvent.error = {
+        message: validMapIds.error.message ?? "Invalid map IDs",
+      };
+      return new Response(validMapIds.error.message, {
+        status: 400,
+      });
+    }
+
+    const validPlayerName = PlayerNameSchema.safeParse(playerName);
+    if (!validPlayerName.success) {
+      wideEvent.status_code = 400;
+      wideEvent.outcome = "invalid_player_name";
+      wideEvent.error = { message: "Invalid player name" };
+      return new Response("Invalid player name", { status: 400 });
+    }
+
+    let heroes: HeroName[] | undefined;
+    if (heroesParam) {
+      const heroesArray = heroesParam.split(",");
+      const validHeroes = HeroesSchema.safeParse(heroesArray);
+      if (!validHeroes.success) {
+        wideEvent.status_code = 400;
+        wideEvent.outcome = "invalid_heroes";
+        wideEvent.error = { message: "Invalid heroes parameter" };
+        return new Response("Invalid heroes parameter", { status: 400 });
+      }
+      heroes = heroesArray as HeroName[];
+    }
+
+    wideEvent.request_params = {
+      player_name: validPlayerName.data,
+      map_ids: validMapIds.data,
+      map_count: validMapIds.data.length,
+      heroes,
+      hero_count: heroes?.length ?? 0,
+    };
+
+    const comparisonStats = await getComparisonStats(
+      validMapIds.data,
+      validPlayerName.data,
+      heroes
+    );
+
+    wideEvent.status_code = 200;
+    wideEvent.outcome = "success";
+    wideEvent.result = {
+      map_count: comparisonStats.mapCount,
+      player_name: comparisonStats.playerName,
+      filtered_heroes: comparisonStats.filteredHeroes,
+      has_trends: !!comparisonStats.trends,
+      has_hero_breakdown: !!comparisonStats.heroBreakdown,
+      total_time_played_seconds: comparisonStats.aggregated.heroTimePlayed,
+      improving_metrics_count:
+        comparisonStats.trends?.improvingMetrics.length ?? 0,
+      declining_metrics_count:
+        comparisonStats.trends?.decliningMetrics.length ?? 0,
+    };
+
+    return NextResponse.json({
+      success: true,
+      data: comparisonStats,
+    });
+  } catch (error) {
+    wideEvent.status_code = 500;
+    wideEvent.outcome = "error";
+    wideEvent.error = {
+      message: error instanceof Error ? error.message : "Unknown error",
+      type: error instanceof Error ? error.name : "Error",
+    };
+    Logger.error("Error fetching comparison stats", error);
+    return NextResponse.json(
+      {
+        success: false,
+        error: "Failed to fetch comparison statistics",
+      },
+      { status: 500 }
+    );
+  } finally {
+    wideEvent.duration_ms = Date.now() - startTime;
+    Logger.info(wideEvent);
+  }
+}
diff --git a/src/app/api/compare/team-vs-team/route.ts b/src/app/api/compare/team-vs-team/route.ts
new file mode 100644
index 000000000..c0bc75708
--- /dev/null
+++ b/src/app/api/compare/team-vs-team/route.ts
@@ -0,0 +1,59 @@
+import { getTeamComparisonStats } from "@/data/team-comparison-dto";
+import { Logger } from "@/lib/logger";
+import type { HeroName } from "@/types/heroes";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url);
+
+    const mapIdsParam = searchParams.get("mapIds");
+    const teamIdParam = searchParams.get("teamId");
+    const heroesParam = searchParams.get("heroes");
+
+    if (!mapIdsParam || !teamIdParam) {
+      return NextResponse.json(
+        {
+          error: "Missing required parameters: mapIds and teamId are required",
+        },
+        { status: 400 }
+      );
+    }
+
+    const mapIds = JSON.parse(mapIdsParam) as number[];
+    const teamId = parseInt(teamIdParam, 10);
+
+    if (!Array.isArray(mapIds) || mapIds.length === 0) {
+      return NextResponse.json(
+        { error: "mapIds must be a non-empty array" },
+        { status: 400 }
+      );
+    }
+
+    if (isNaN(teamId)) {
+      return NextResponse.json(
+        { error: "teamId must be a valid number" },
+        { status: 400 }
+      );
+    }
+
+    const heroes = heroesParam
+      ? (heroesParam.split(",") as HeroName[])
+      : undefined;
+
+    const stats = await getTeamComparisonStats(mapIds, teamId, heroes);
+
+    return NextResponse.json({ data: stats });
+  } catch (error) {
+    Logger.error("Error fetching team comparison stats:", error);
+
+    if (error instanceof Error) {
+      return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/reports/send-usage-report/route.ts b/src/app/api/reports/send-usage-report/route.ts
new file mode 100644
index 000000000..efa037857
--- /dev/null
+++ b/src/app/api/reports/send-usage-report/route.ts
@@ -0,0 +1,208 @@
+import { UsageReportEmail } from "@/components/email/usage-report";
+import { email } from "@/lib/email";
+import { Logger } from "@/lib/logger";
+import prisma from "@/lib/prisma";
+import { render } from "@react-email/render";
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export async function GET(request: Request) {
+  const authHeader = request.headers.get("Authorization");
+  if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
+    return new Response("Unauthorized", { status: 401 });
+  }
+
+  const now = new Date();
+  const weekStart = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+  const prevWeekStart = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000);
+
+  const [
+    totalUsers,
+    newUsersThisWeek,
+    newUsersLastWeek,
+    totalScrims,
+    newScrimsThisWeek,
+    newScrimsLastWeek,
+    totalTeams,
+    newTeamsThisWeek,
+    newTeamsLastWeek,
+    paidUsers,
+    billingPlanGroups,
+    oauthAccounts,
+    topUserScrimGroups,
+    topTeamScrimGroups,
+  ] = await Promise.all([
+    prisma.user.count(),
+    prisma.user.count({ where: { createdAt: { gte: weekStart } } }),
+    prisma.user.count({
+      where: { createdAt: { gte: prevWeekStart, lt: weekStart } },
+    }),
+    prisma.scrim.count(),
+    prisma.scrim.count({ where: { createdAt: { gte: weekStart } } }),
+    prisma.scrim.count({
+      where: { createdAt: { gte: prevWeekStart, lt: weekStart } },
+    }),
+    prisma.team.count(),
+    prisma.team.count({ where: { createdAt: { gte: weekStart } } }),
+    prisma.team.count({
+      where: { createdAt: { gte: prevWeekStart, lt: weekStart } },
+    }),
+    prisma.user.count({ where: { billingPlan: { not: "FREE" } } }),
+    prisma.user.groupBy({ by: ["billingPlan"], _count: { id: true } }),
+    prisma.account.groupBy({ by: ["provider"], _count: { userId: true } }),
+    prisma.scrim.groupBy({
+      by: ["creatorId"],
+      where: { createdAt: { gte: weekStart } },
+      _count: { id: true },
+      orderBy: { _count: { id: "desc" } },
+      take: 5,
+    }),
+    prisma.scrim.groupBy({
+      by: ["teamId"],
+      where: { createdAt: { gte: weekStart }, teamId: { not: null } },
+      _count: { id: true },
+      orderBy: { _count: { id: "desc" } },
+      take: 5,
+    }),
+  ]);
+
+  const topUserIds = topUserScrimGroups.map((g) => g.creatorId);
+  const topTeamIds = topTeamScrimGroups
+    .map((g) => g.teamId)
+    .filter((id): id is number => id !== null);
+
+  const [topUserDetails, topTeamDetails] = await Promise.all([
+    prisma.user.findMany({
+      where: { id: { in: topUserIds } },
+      select: { id: true, name: true, email: true },
+    }),
+    prisma.team.findMany({
+      where: { id: { in: topTeamIds } },
+      select: { id: true, name: true },
+    }),
+  ]);
+
+  const topUsers = topUserScrimGroups.map((group) => {
+    const user = topUserDetails.find((u) => u.id === group.creatorId);
+    return {
+      name: user?.name ?? user?.email ?? "Unknown User",
+      scrimCount: group._count.id,
+    };
+  });
+
+  const topTeams = topTeamScrimGroups
+    .filter((g) => g.teamId !== null)
+    .map((group) => {
+      const team = topTeamDetails.find((t) => t.id === group.teamId);
+      return {
+        name: team?.name ?? `Team ${group.teamId}`,
+        scrimCount: group._count.id,
+      };
+    });
+
+  const conversionRate = totalUsers > 0 ? (paidUsers / totalUsers) * 100 : 0;
+
+  const billingPlanTotal = billingPlanGroups.reduce(
+    (sum, p) => sum + p._count.id,
+    0
+  );
+  const billingPlans = billingPlanGroups.map((p) => ({
+    plan: p.billingPlan,
+    count: p._count.id,
+    percentage:
+      billingPlanTotal > 0
+        ? Math.round((p._count.id / billingPlanTotal) * 100)
+        : 0,
+  }));
+
+  const providerCounts = new Map<string, number>();
+  let totalOAuthUsers = 0;
+  for (const account of oauthAccounts) {
+    providerCounts.set(account.provider, account._count.userId);
+    totalOAuthUsers += account._count.userId;
+  }
+  const emailOnlyUsers = totalUsers - totalOAuthUsers;
+  const signupMethodsTotal = totalUsers;
+
+  const signupMethods = [
+    ...(emailOnlyUsers > 0
+      ? [
+          {
+            method: "Email",
+            count: emailOnlyUsers,
+            percentage:
+              signupMethodsTotal > 0
+                ? Math.round((emailOnlyUsers / signupMethodsTotal) * 100)
+                : 0,
+          },
+        ]
+      : []),
+    ...["discord", "google", "github"]
+      .filter((provider) => (providerCounts.get(provider) ?? 0) > 0)
+      .map((provider) => {
+        const count = providerCounts.get(provider) ?? 0;
+        return {
+          method: provider.charAt(0).toUpperCase() + provider.slice(1),
+          count,
+          percentage:
+            signupMethodsTotal > 0
+              ? Math.round((count / signupMethodsTotal) * 100)
+              : 0,
+        };
+      }),
+  ];
+
+  const emailHtml = await render(
+    UsageReportEmail({
+      weekStart: formatDate(weekStart),
+      weekEnd: formatDate(now),
+      newUsersThisWeek,
+      newUsersLastWeek,
+      newScrimsThisWeek,
+      newScrimsLastWeek,
+      newTeamsThisWeek,
+      newTeamsLastWeek,
+      totalUsers,
+      totalScrims,
+      totalTeams,
+      paidUsers,
+      conversionRate,
+      signupMethods,
+      billingPlans,
+      topUsers,
+      topTeams,
+    })
+  );
+
+  try {
+    await email.sendEmail({
+      to: "lucas@lux.dev",
+      subject: `Parsertime Weekly Report — ${formatDate(weekStart)} to ${formatDate(now)}`,
+      html: emailHtml,
+    });
+    Logger.info(`Usage report sent to lucas@lux.dev`);
+  } catch (err) {
+    Logger.error(`Failed to send usage report to lucas@lux.dev`, err);
+    return new Response("Failed to send usage report", { status: 500 });
+  }
+
+  return Response.json({
+    success: true,
+    stats: {
+      newUsersThisWeek,
+      newScrimsThisWeek,
+      newTeamsThisWeek,
+      totalUsers,
+      totalScrims,
+      totalTeams,
+      paidUsers,
+      conversionRate,
+    },
+  });
+}
diff --git a/src/components/compare/charts-view.tsx b/src/components/compare/charts-view.tsx
new file mode 100644
index 000000000..cde5337d0
--- /dev/null
+++ b/src/components/compare/charts-view.tsx
@@ -0,0 +1,642 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import type { ComparisonStats } from "@/data/comparison-dto";
+import { useTranslations } from "next-intl";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ErrorBar,
+  Line,
+  LineChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type ChartsViewProps = {
+  stats: ComparisonStats;
+  viewMode: "two-map" | "multi-map";
+};
+
+type CustomTooltipProps = {
+  active?: boolean;
+  payload?: unknown[];
+  label?: string;
+  config?: ChartConfig;
+};
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */
+function CustomLineChartTooltip({
+  active,
+  payload,
+  config,
+}: CustomTooltipProps) {
+  const t = useTranslations("comparePage.charts");
+
+  if (!active || !payload || payload.length === 0) {
+    return null;
+  }
+
+  const firstItem = payload[0] as any;
+  const data = firstItem?.payload;
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <div className="bg-background rounded-lg border p-3 shadow-md">
+      <p className="mb-2 font-semibold">{data.fullName}</p>
+      <div className="space-y-1">
+        {payload.map((item) => {
+          const entry = item as any;
+
+          if (!entry.dataKey || typeof entry.value !== "number") {
+            return null;
+          }
+
+          const dataKey = String(entry.dataKey);
+          const stdDevKey = `${dataKey}StdDev`;
+          const stdDev = data[stdDevKey];
+          const displayLabel =
+            config?.[dataKey]?.label ?? entry.name ?? dataKey;
+
+          return (
+            <div key={dataKey} className="flex flex-col gap-0.5">
+              <div className="flex items-center gap-2">
+                <div
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: entry.color }}
+                />
+                <span className="text-sm">
+                  {displayLabel}: {entry.value}
+                </span>
+              </div>
+              {typeof stdDev === "number" && stdDev > 0 && (
+                <div className="text-muted-foreground ml-4 text-xs">
+                  {t("stdDev")}: ±{stdDev}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+/* eslint-enable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any */
+
+export function ChartsView({ stats, viewMode }: ChartsViewProps) {
+  const t = useTranslations("comparePage.charts");
+
+  // Prepare data for line chart (multi-map progression) with error bars
+  const lineChartData = stats.perMapBreakdown.map((map) => ({
+    name: `${map.scrimName} - ${map.mapName}`,
+    fullName: `${map.scrimName} - ${map.mapName}`,
+    elimsPer10: Number((map.stats.eliminationsPer10 ?? 0).toFixed(2)),
+    elimsPer10StdDev: Number(
+      (stats.aggregated.eliminationsPer10StdDev ?? 0).toFixed(2)
+    ),
+    elimsPer10Error: [
+      Number(
+        Math.max(
+          0,
+          (map.stats.eliminationsPer10 ?? 0) -
+            (stats.aggregated.eliminationsPer10StdDev ?? 0)
+        ).toFixed(2)
+      ),
+      Number(
+        (
+          (map.stats.eliminationsPer10 ?? 0) +
+          (stats.aggregated.eliminationsPer10StdDev ?? 0)
+        ).toFixed(2)
+      ),
+    ],
+    deathsPer10: Number((map.stats.deathsPer10 ?? 0).toFixed(2)),
+    deathsPer10StdDev: Number(
+      (stats.aggregated.deathsPer10StdDev ?? 0).toFixed(2)
+    ),
+    deathsPer10Error: [
+      Number(
+        Math.max(
+          0,
+          (map.stats.deathsPer10 ?? 0) -
+            (stats.aggregated.deathsPer10StdDev ?? 0)
+        ).toFixed(2)
+      ),
+      Number(
+        (
+          (map.stats.deathsPer10 ?? 0) +
+          (stats.aggregated.deathsPer10StdDev ?? 0)
+        ).toFixed(2)
+      ),
+    ],
+    damagePer10: Number(((map.stats.allDamagePer10 ?? 0) / 1000).toFixed(2)), // Scale for better visualization
+    damagePer10StdDev: Number(
+      ((stats.aggregated.allDamagePer10StdDev ?? 0) / 1000).toFixed(2)
+    ),
+    damagePer10Error: [
+      Number(
+        Math.max(
+          0,
+          ((map.stats.allDamagePer10 ?? 0) -
+            (stats.aggregated.allDamagePer10StdDev ?? 0)) /
+            1000
+        ).toFixed(2)
+      ),
+      Number(
+        (
+          ((map.stats.allDamagePer10 ?? 0) +
+            (stats.aggregated.allDamagePer10StdDev ?? 0)) /
+          1000
+        ).toFixed(2)
+      ),
+    ],
+  }));
+
+  const lineChartConfig: ChartConfig = {
+    elimsPer10: {
+      label: t("elimsPer10"),
+      color: "var(--chart-1)",
+    },
+    deathsPer10: {
+      label: t("deathsPer10"),
+      color: "var(--chart-2)",
+    },
+    damagePer10: {
+      label: t("damagePer10K"),
+      color: "var(--chart-3)",
+    },
+  };
+
+  // Prepare data for bar chart (side-by-side comparison for 2 maps) - using per-10 values
+  const barChartData =
+    viewMode === "two-map" && stats.perMapBreakdown.length === 2
+      ? [
+          {
+            stat: t("elimsPer10"),
+            map1: stats.perMapBreakdown[0].stats.eliminationsPer10 ?? 0,
+            map2: stats.perMapBreakdown[1].stats.eliminationsPer10 ?? 0,
+          },
+          {
+            stat: t("deathsPer10"),
+            map1: stats.perMapBreakdown[0].stats.deathsPer10 ?? 0,
+            map2: stats.perMapBreakdown[1].stats.deathsPer10 ?? 0,
+          },
+          {
+            stat: t("damagePer10K"),
+            map1: (stats.perMapBreakdown[0].stats.allDamagePer10 ?? 0) / 1000,
+            map2: (stats.perMapBreakdown[1].stats.allDamagePer10 ?? 0) / 1000,
+          },
+          {
+            stat: t("healingPer10K"),
+            map1:
+              (stats.perMapBreakdown[0].stats.healingDealtPer10 ?? 0) / 1000,
+            map2:
+              (stats.perMapBreakdown[1].stats.healingDealtPer10 ?? 0) / 1000,
+          },
+          {
+            stat: t("blockedPer10K"),
+            map1:
+              (stats.perMapBreakdown[0].stats.damageBlockedPer10 ?? 0) / 1000,
+            map2:
+              (stats.perMapBreakdown[1].stats.damageBlockedPer10 ?? 0) / 1000,
+          },
+        ]
+      : [];
+
+  const barChartConfig: ChartConfig =
+    viewMode === "two-map" && stats.perMapBreakdown.length === 2
+      ? {
+          map1: {
+            label: `${stats.perMapBreakdown[0].scrimName} - ${stats.perMapBreakdown[0].mapName}`,
+            color: "var(--chart-1)",
+          },
+          map2: {
+            label: `${stats.perMapBreakdown[1].scrimName} - ${stats.perMapBreakdown[1].mapName}`,
+            color: "var(--chart-2)",
+          },
+        }
+      : {};
+
+  // Prepare data for radar chart (performance profile)
+  const radarChartData =
+    viewMode === "two-map" && stats.perMapBreakdown?.length === 2
+      ? [
+          {
+            metric: t("elimsPer10Short"),
+            map1: Number(
+              (stats.perMapBreakdown[0]?.stats.eliminationsPer10 ?? 0).toFixed(
+                2
+              )
+            ),
+            map2: Number(
+              (stats.perMapBreakdown[1]?.stats.eliminationsPer10 ?? 0).toFixed(
+                2
+              )
+            ),
+          },
+          {
+            metric: t("deathsPer10Short"),
+            map1: Number(
+              (20 - (stats.perMapBreakdown[0]?.stats.deathsPer10 ?? 0)).toFixed(
+                2
+              )
+            ), // Invert for better visualization
+            map2: Number(
+              (20 - (stats.perMapBreakdown[1]?.stats.deathsPer10 ?? 0)).toFixed(
+                2
+              )
+            ),
+          },
+          {
+            metric: t("damagePer10Short"),
+            map1: Number(
+              (
+                (stats.perMapBreakdown[0]?.stats.allDamagePer10 ?? 0) / 1000
+              ).toFixed(2)
+            ),
+            map2: Number(
+              (
+                (stats.perMapBreakdown[1]?.stats.allDamagePer10 ?? 0) / 1000
+              ).toFixed(2)
+            ),
+          },
+          {
+            metric: t("healingPer10Short"),
+            map1: Number(
+              (
+                (stats.perMapBreakdown[0]?.stats.healingDealtPer10 ?? 0) / 1000
+              ).toFixed(2)
+            ),
+            map2: Number(
+              (
+                (stats.perMapBreakdown[1]?.stats.healingDealtPer10 ?? 0) / 1000
+              ).toFixed(2)
+            ),
+          },
+          {
+            metric: t("mitigatedPer10Short"),
+            map1: Number(
+              (
+                (stats.perMapBreakdown[0]?.stats.damageBlockedPer10 ?? 0) / 1000
+              ).toFixed(2)
+            ),
+            map2: Number(
+              (
+                (stats.perMapBreakdown[1]?.stats.damageBlockedPer10 ?? 0) / 1000
+              ).toFixed(2)
+            ),
+          },
+        ]
+      : [
+          {
+            metric: t("elimsPer10Short"),
+            value: Number(
+              (stats.aggregated?.eliminationsPer10 ?? 0).toFixed(2)
+            ),
+          },
+          {
+            metric: t("deathsPer10Short"),
+            value: Number(
+              (20 - (stats.aggregated?.deathsPer10 ?? 0)).toFixed(2)
+            ), // Invert
+          },
+          {
+            metric: t("damagePer10Short"),
+            value: Number(
+              ((stats.aggregated?.allDamagePer10 ?? 0) / 1000).toFixed(2)
+            ),
+          },
+          {
+            metric: t("healingPer10Short"),
+            value: Number(
+              ((stats.aggregated?.healingDealtPer10 ?? 0) / 1000).toFixed(2)
+            ),
+          },
+          {
+            metric: t("mitigatedPer10Short"),
+            value: Number(
+              ((stats.aggregated?.damageBlockedPer10 ?? 0) / 1000).toFixed(2)
+            ),
+          },
+        ];
+
+  const radarChartConfig: ChartConfig =
+    viewMode === "two-map" && stats.perMapBreakdown?.length === 2
+      ? {
+          map1: {
+            label: `${stats.perMapBreakdown[0].scrimName} - ${stats.perMapBreakdown[0].mapName}`,
+            color: "var(--chart-1)",
+          },
+          map2: {
+            label: `${stats.perMapBreakdown[1].scrimName} - ${stats.perMapBreakdown[1].mapName}`,
+            color: "var(--chart-2)",
+          },
+        }
+      : {
+          value: {
+            label: t("averagePerformance"),
+            color: "var(--chart-1)",
+          },
+        };
+
+  return (
+    <div className="space-y-6">
+      {/* Line Chart - Progression (Multi-map only) */}
+      {viewMode === "multi-map" && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("performanceProgression")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              config={lineChartConfig}
+              className="h-[400px] w-full"
+            >
+              <LineChart accessibilityLayer data={lineChartData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                  dataKey="name"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip
+                  content={(props) => (
+                    <CustomLineChartTooltip
+                      {...props}
+                      config={lineChartConfig}
+                    />
+                  )}
+                />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Line
+                  type="monotone"
+                  dataKey="elimsPer10"
+                  stroke="var(--color-elimsPer10)"
+                  strokeWidth={2}
+                  dot={{ r: 4 }}
+                  activeDot={{ r: 6 }}
+                >
+                  <ErrorBar
+                    dataKey="elimsPer10Error"
+                    stroke="var(--color-elimsPer10)"
+                    strokeWidth={1.5}
+                    width={8}
+                  />
+                </Line>
+                <Line
+                  type="monotone"
+                  dataKey="deathsPer10"
+                  stroke="var(--color-deathsPer10)"
+                  strokeWidth={2}
+                  dot={{ r: 4 }}
+                  activeDot={{ r: 6 }}
+                >
+                  <ErrorBar
+                    dataKey="deathsPer10Error"
+                    stroke="var(--color-deathsPer10)"
+                    strokeWidth={1.5}
+                    width={8}
+                  />
+                </Line>
+                <Line
+                  type="monotone"
+                  dataKey="damagePer10"
+                  stroke="var(--color-damagePer10)"
+                  strokeWidth={2}
+                  dot={{ r: 4 }}
+                  activeDot={{ r: 6 }}
+                >
+                  <ErrorBar
+                    dataKey="damagePer10Error"
+                    stroke="var(--color-damagePer10)"
+                    strokeWidth={1.5}
+                    width={8}
+                  />
+                </Line>
+              </LineChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Bar Chart - Side by Side (Two-map only) */}
+      {viewMode === "two-map" && barChartData.length > 0 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("statComparison")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              config={barChartConfig}
+              className="h-[400px] w-full"
+            >
+              <BarChart accessibilityLayer data={barChartData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis
+                  dataKey="stat"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Bar
+                  dataKey="map1"
+                  fill="var(--color-map1)"
+                  radius={[4, 4, 0, 0]}
+                />
+                <Bar
+                  dataKey="map2"
+                  fill="var(--color-map2)"
+                  radius={[4, 4, 0, 0]}
+                />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Radar Chart - Performance Profile */}
+      {radarChartData && radarChartData.length > 0 ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("performanceProfile")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer
+              config={radarChartConfig}
+              className="mx-auto aspect-square max-h-[400px]"
+            >
+              <RadarChart data={radarChartData}>
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent indicator="line" />}
+                />
+                <PolarAngleAxis dataKey="metric" />
+                <PolarGrid radialLines={false} />
+                <PolarRadiusAxis />
+                {viewMode === "two-map" &&
+                stats.perMapBreakdown?.length === 2 ? (
+                  <>
+                    <Radar
+                      dataKey="map1"
+                      fill="var(--color-map1)"
+                      fillOpacity={0}
+                      stroke="var(--color-map1)"
+                      strokeWidth={2}
+                    />
+                    <Radar
+                      dataKey="map2"
+                      fill="var(--color-map2)"
+                      fillOpacity={0}
+                      stroke="var(--color-map2)"
+                      strokeWidth={2}
+                    />
+                  </>
+                ) : (
+                  <Radar
+                    dataKey="value"
+                    fill="var(--color-value)"
+                    fillOpacity={0}
+                    stroke="var(--color-value)"
+                    strokeWidth={2}
+                  />
+                )}
+              </RadarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      ) : null}
+
+      {/* Impact Metrics Cards - Normalized Stats Only */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("firstPickPercentage")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.firstPickPercentage.toFixed(1)}%
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {stats.aggregated.firstPicksPer10.toFixed(1)} {t("per10")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("firstDeathPercentage")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.firstDeathPercentage.toFixed(1)}%
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {stats.aggregated.firstDeathsPer10.toFixed(1)} {t("per10")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("killsPerUltimate")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.killsPerUltimate.toFixed(2)}
+            </div>
+            <p className="text-muted-foreground text-xs">{t("avgUltImpact")}</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("soloKillsPer10")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.soloKillsPer10.toFixed(1)}
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {t("individualKills")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("damageTakenPer10")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.damageTakenPer10.toLocaleString()}
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {t("damageReceived")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("healingReceivedPer10")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.healingReceivedPer10.toLocaleString()}
+            </div>
+            <p className="text-muted-foreground text-xs">
+              {t("supportReceived")}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium">
+              {t("fightReversalPercentage")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold tabular-nums">
+              {stats.aggregated.fightReversalPercentage.toFixed(1)}%
+            </div>
+            <p className="text-muted-foreground text-xs">{t("clutchPlays")}</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/compare/comparison-content.tsx b/src/components/compare/comparison-content.tsx
new file mode 100644
index 000000000..2101a5179
--- /dev/null
+++ b/src/components/compare/comparison-content.tsx
@@ -0,0 +1,551 @@
+"use client";
+
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { ComparisonStats } from "@/data/comparison-dto";
+import type { HeroName } from "@/types/heroes";
+import type { FormattedMapGroup } from "@/types/map-group";
+import type { TeamComparisonStats } from "@/types/team-comparison";
+import { useQuery } from "@tanstack/react-query";
+import { FolderCog, Loader2 } from "lucide-react";
+import type { Route } from "next";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { ChartsView } from "./charts-view";
+import { ComparisonFilters } from "./comparison-filters";
+import { ConsistencyView } from "./consistency-view";
+import { DeltaView } from "./delta-view";
+import { DetailedStatsView } from "./detailed-stats-view";
+import { EmptyState } from "./empty-state";
+import { ImpactMetricsView } from "./impact-metrics-view";
+import { MapGroupComparisonSelector } from "./map-group-comparison-selector";
+import { MapGroupSelector } from "./map-group-selector";
+import { SideBySideView } from "./side-by-side-view";
+import { TeamComparisonView } from "./team-comparison-view";
+import { TrendsView } from "./trends-view";
+
+type ComparisonContentProps = {
+  teamId: number;
+  locale: string;
+};
+
+type ViewMode =
+  | "side-by-side"
+  | "delta"
+  | "trends"
+  | "charts"
+  | "consistency"
+  | "detailed-stats"
+  | "impact-metrics";
+type ComparisonMode = "player" | "team";
+type MapSelectionMode = "individual" | "groups";
+
+async function fetchComparisonStats(
+  mapIds: number[],
+  playerName: string,
+  heroes?: HeroName[]
+): Promise<ComparisonStats> {
+  const params = new URLSearchParams({
+    mapIds: JSON.stringify(mapIds),
+    playerName,
+  });
+
+  if (heroes && heroes.length > 0) {
+    params.set("heroes", heroes.join(","));
+  }
+
+  const response = await fetch(`/api/compare/stats?${params.toString()}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch comparison stats");
+  }
+
+  const data = (await response.json()) as { data: ComparisonStats };
+  return data.data;
+}
+
+async function fetchTeamComparisonStats(
+  mapIds: number[],
+  teamId: number,
+  heroes?: HeroName[]
+): Promise<TeamComparisonStats> {
+  const params = new URLSearchParams({
+    mapIds: JSON.stringify(mapIds),
+    teamId: teamId.toString(),
+  });
+
+  if (heroes && heroes.length > 0) {
+    params.set("heroes", heroes.join(","));
+  }
+
+  const response = await fetch(
+    `/api/compare/team-vs-team?${params.toString()}`
+  );
+  if (!response.ok) {
+    throw new Error("Failed to fetch team comparison stats");
+  }
+
+  const data = (await response.json()) as { data: TeamComparisonStats };
+  return data.data;
+}
+
+async function fetchMapGroups(teamId: number): Promise<FormattedMapGroup[]> {
+  const response = await fetch(`/api/compare/map-groups?teamId=${teamId}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch map groups");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    groups: FormattedMapGroup[];
+  };
+  return data.groups;
+}
+
+export function ComparisonContent({ teamId }: ComparisonContentProps) {
+  const t = useTranslations("comparePage");
+  const searchParams = useSearchParams();
+
+  // Get map IDs from URL - memoize to prevent useMemo dependency issues
+  const selectedMapIds = useMemo(() => {
+    const mapsParam = searchParams.get("maps");
+    return mapsParam ? mapsParam.split(",").map((id) => parseInt(id, 10)) : [];
+  }, [searchParams]);
+
+  // Filter state
+  const [selectedPlayer, setSelectedPlayer] = useState<string | null>(null);
+  const [selectedHeroes, setSelectedHeroes] = useState<HeroName[]>([]);
+  const [dateRange, setDateRange] = useState<
+    { from: Date; to: Date } | undefined
+  >(undefined);
+
+  // Comparison mode state (player vs team)
+  const [comparisonMode, setComparisonMode] =
+    useState<ComparisonMode>("player");
+
+  // Map selection mode state (individual maps vs map groups)
+  const [mapSelectionMode, setMapSelectionMode] =
+    useState<MapSelectionMode>("individual");
+  const [selectedMapGroups, setSelectedMapGroups] = useState<number[]>([]);
+
+  // View mode state
+  const [activeView, setActiveView] = useState<ViewMode>("side-by-side");
+
+  // Fetch map groups to resolve group IDs to map IDs
+  const { data: mapGroups } = useQuery({
+    queryKey: ["mapGroups", teamId],
+    queryFn: () => fetchMapGroups(teamId),
+    staleTime: 5 * 60 * 1000,
+    enabled: mapSelectionMode === "groups",
+  });
+
+  // Calculate effective map IDs based on selection mode
+  const effectiveMapIds = useMemo(() => {
+    if (mapSelectionMode === "individual") {
+      return selectedMapIds;
+    }
+
+    // In groups mode, combine all map IDs from selected groups
+    if (!mapGroups || selectedMapGroups.length === 0) {
+      return [];
+    }
+
+    const mapIdsSet = new Set<number>();
+    selectedMapGroups.forEach((groupId) => {
+      const group = mapGroups.find((g) => g.id === groupId);
+      if (group) {
+        group.mapIds.forEach((mapId) => mapIdsSet.add(mapId));
+      }
+    });
+
+    return Array.from(mapIdsSet);
+  }, [mapSelectionMode, selectedMapIds, selectedMapGroups, mapGroups]);
+
+  // Fetch comparison stats (player mode)
+  const { data: comparisonStats, isLoading: isLoadingPlayer } = useQuery({
+    queryKey: [
+      "comparisonStats",
+      effectiveMapIds,
+      selectedPlayer,
+      selectedHeroes,
+    ],
+    queryFn: () =>
+      fetchComparisonStats(
+        effectiveMapIds,
+        selectedPlayer!,
+        selectedHeroes.length > 0 ? selectedHeroes : undefined
+      ),
+    enabled:
+      comparisonMode === "player" &&
+      effectiveMapIds.length > 0 &&
+      !!selectedPlayer,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  // Fetch team comparison stats (team mode)
+  const { data: teamComparisonStats, isLoading: isLoadingTeam } = useQuery({
+    queryKey: ["teamComparisonStats", effectiveMapIds, teamId, selectedHeroes],
+    queryFn: () =>
+      fetchTeamComparisonStats(
+        effectiveMapIds,
+        teamId,
+        selectedHeroes.length > 0 ? selectedHeroes : undefined
+      ),
+    enabled: comparisonMode === "team" && effectiveMapIds.length > 0,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const isLoading =
+    comparisonMode === "player" ? isLoadingPlayer : isLoadingTeam;
+
+  // Determine available views based on map count and comparison mode
+  const availableViews: ViewMode[] = useMemo(() => {
+    // Team comparison doesn't support all views
+    if (comparisonMode === "team") {
+      return effectiveMapIds.length >= 2 ? ["side-by-side"] : [];
+    }
+
+    // Player comparison views
+    if (effectiveMapIds.length === 2) {
+      return [
+        "side-by-side",
+        "delta",
+        "charts",
+        "consistency",
+        "detailed-stats",
+        "impact-metrics",
+      ];
+    } else if (effectiveMapIds.length >= 3) {
+      return [
+        "trends",
+        "charts",
+        "consistency",
+        "detailed-stats",
+        "impact-metrics",
+      ];
+    }
+    return [];
+  }, [effectiveMapIds.length, comparisonMode]);
+
+  // Auto-switch view when map selection or comparison mode changes
+  useEffect(() => {
+    if (availableViews.length > 0 && !availableViews.includes(activeView)) {
+      setActiveView(availableViews[0]);
+    }
+  }, [availableViews, activeView]);
+
+  // Empty state when no maps selected (considering both modes)
+  if (effectiveMapIds.length === 0) {
+    return (
+      <div className="flex-1 space-y-6 p-8 pt-6">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight">{t("title")}</h2>
+          <p className="text-muted-foreground mt-2">{t("subtitle")}</p>
+        </div>
+
+        {mapSelectionMode === "groups" ? (
+          <EmptyState
+            icon="MapPin"
+            title={t("emptyStates.noMapGroups.title")}
+            description={t("emptyStates.noMapGroups.description")}
+          >
+            <MapGroupComparisonSelector
+              teamId={teamId}
+              onSelect={(groupIds) => {
+                setSelectedMapGroups(groupIds);
+              }}
+            />
+          </EmptyState>
+        ) : (
+          <EmptyState
+            icon="MapPin"
+            title={t("emptyStates.noMaps.title")}
+            description={t("emptyStates.noMaps.description")}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 space-y-6 p-8 pt-6">
+      {/* Header */}
+      <div>
+        <h2 className="text-3xl font-bold tracking-tight">{t("title")}</h2>
+        <p className="text-muted-foreground mt-2">
+          {effectiveMapIds.length > 0
+            ? t("comparingMaps", { count: effectiveMapIds.length })
+            : t("subtitle")}
+        </p>
+      </div>
+
+      {/* Map Selection Mode Toggle */}
+      <Card className="p-4">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label
+                htmlFor="map-selection-mode"
+                className="text-base font-medium"
+              >
+                {t("mapSelectionMode.label")}
+              </Label>
+              <p className="text-muted-foreground text-sm">
+                {mapSelectionMode === "individual"
+                  ? t("mapSelectionMode.individualDescription")
+                  : t("mapSelectionMode.groupsDescription")}
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span
+                className={`text-sm font-medium transition-colors ${
+                  mapSelectionMode === "individual"
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {t("mapSelectionMode.individual")}
+              </span>
+              <Switch
+                id="map-selection-mode"
+                checked={mapSelectionMode === "groups"}
+                onCheckedChange={(checked) =>
+                  setMapSelectionMode(checked ? "groups" : "individual")
+                }
+              />
+              <span
+                className={`text-sm font-medium transition-colors ${
+                  mapSelectionMode === "groups"
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {t("mapSelectionMode.groups")}
+              </span>
+            </div>
+          </div>
+
+          {/* Map Group Selector (only show in groups mode) */}
+          {mapSelectionMode === "groups" && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label className="text-sm leading-none font-medium">
+                  {t("mapSelectionMode.selectGroups")}
+                </Label>
+                <Link
+                  href={`/${teamId}/map-groups` as Route}
+                  className="text-primary flex items-center gap-1 text-xs hover:underline"
+                >
+                  <FolderCog className="h-3 w-3" />
+                  {t("mapSelectionMode.manageGroups")}
+                </Link>
+              </div>
+              <MapGroupSelector
+                teamId={teamId}
+                value={selectedMapGroups}
+                onChange={setSelectedMapGroups}
+                multiSelect
+                placeholder={t("mapSelectionMode.selectGroupsPlaceholder")}
+              />
+              <p className="text-muted-foreground text-xs">
+                {t("mapSelectionMode.groupsHint")}
+              </p>
+            </div>
+          )}
+
+          {/* Individual Maps Info (only show in individual mode with selected maps) */}
+          {mapSelectionMode === "individual" && selectedMapIds.length > 0 && (
+            <div className="border-t pt-4">
+              <p className="text-muted-foreground text-sm">
+                {t("mapSelectionMode.individualMapsSelected", {
+                  count: selectedMapIds.length,
+                })}
+              </p>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Filters */}
+      <div className="space-y-4">
+        {/* Comparison Mode Toggle */}
+        <Card className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label
+                htmlFor="comparison-mode"
+                className="text-base font-medium"
+              >
+                {t("comparisonMode.label")}
+              </Label>
+              <p className="text-muted-foreground text-sm">
+                {comparisonMode === "player"
+                  ? t("comparisonMode.playerDescription")
+                  : t("comparisonMode.teamDescription")}
+              </p>
+            </div>
+            <div className="flex items-center gap-3">
+              <span
+                className={`text-sm font-medium transition-colors ${
+                  comparisonMode === "player"
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {t("comparisonMode.player")}
+              </span>
+              <Switch
+                id="comparison-mode"
+                checked={comparisonMode === "team"}
+                onCheckedChange={(checked) =>
+                  setComparisonMode(checked ? "team" : "player")
+                }
+              />
+              <span
+                className={`text-sm font-medium transition-colors ${
+                  comparisonMode === "team"
+                    ? "text-foreground"
+                    : "text-muted-foreground"
+                }`}
+              >
+                {t("comparisonMode.team")}
+              </span>
+            </div>
+          </div>
+        </Card>
+
+        {/* Player Filters (only show in player mode) */}
+        {comparisonMode === "player" && (
+          <ComparisonFilters
+            teamId={teamId}
+            mapIds={effectiveMapIds}
+            selectedPlayer={selectedPlayer}
+            selectedHeroes={selectedHeroes}
+            dateRange={dateRange}
+            onPlayerChange={setSelectedPlayer}
+            onHeroesChange={setSelectedHeroes}
+            onDateRangeChange={setDateRange}
+          />
+        )}
+      </div>
+
+      {/* Content */}
+      {comparisonMode === "player" && !selectedPlayer ? (
+        <EmptyState
+          icon="UserX"
+          title={t("emptyStates.noPlayer.title")}
+          description={t("emptyStates.noPlayer.description")}
+        />
+      ) : isLoading ? (
+        <Card className="flex h-[400px] items-center justify-center">
+          <div className="flex items-center gap-3">
+            <Loader2 className="h-6 w-6 animate-spin" />
+            <span className="text-lg">{t("loading")}</span>
+          </div>
+        </Card>
+      ) : comparisonMode === "player" && !comparisonStats ? (
+        <EmptyState
+          icon="TrendingDown"
+          title={t("emptyStates.noData.title")}
+          description={t("emptyStates.noData.description", {
+            player: selectedPlayer ?? "Unknown Player",
+          })}
+        />
+      ) : comparisonMode === "team" && !teamComparisonStats ? (
+        <EmptyState
+          icon="TrendingDown"
+          title={t("emptyStates.noData.title")}
+          description={t("emptyStates.noTeamData.description")}
+        />
+      ) : comparisonMode === "team" ? (
+        <TeamComparisonView stats={teamComparisonStats!} />
+      ) : (
+        <Tabs
+          value={activeView}
+          onValueChange={(v) => setActiveView(v as ViewMode)}
+        >
+          <TabsList>
+            {availableViews.includes("side-by-side") && (
+              <TabsTrigger value="side-by-side">
+                {t("views.sideBySide")}
+              </TabsTrigger>
+            )}
+            {availableViews.includes("delta") && (
+              <TabsTrigger value="delta">{t("views.delta")}</TabsTrigger>
+            )}
+            {availableViews.includes("trends") && (
+              <TabsTrigger value="trends">{t("views.trends")}</TabsTrigger>
+            )}
+            {availableViews.includes("charts") && (
+              <TabsTrigger value="charts">{t("views.charts")}</TabsTrigger>
+            )}
+            {availableViews.includes("consistency") && (
+              <TabsTrigger value="consistency">
+                {t("views.consistency")}
+              </TabsTrigger>
+            )}
+            {availableViews.includes("detailed-stats") && (
+              <TabsTrigger value="detailed-stats">
+                {t("views.detailedStats")}
+              </TabsTrigger>
+            )}
+            {availableViews.includes("impact-metrics") && (
+              <TabsTrigger value="impact-metrics">
+                {t("views.impactMetrics")}
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {availableViews.includes("side-by-side") && (
+            <TabsContent value="side-by-side">
+              <SideBySideView stats={comparisonStats!} />
+            </TabsContent>
+          )}
+
+          {availableViews.includes("delta") && (
+            <TabsContent value="delta">
+              <DeltaView stats={comparisonStats!} />
+            </TabsContent>
+          )}
+
+          {availableViews.includes("trends") && (
+            <TabsContent value="trends">
+              <TrendsView stats={comparisonStats!} />
+            </TabsContent>
+          )}
+
+          {availableViews.includes("charts") && (
+            <TabsContent value="charts">
+              <ChartsView
+                stats={comparisonStats!}
+                viewMode={
+                  effectiveMapIds.length === 2 ? "two-map" : "multi-map"
+                }
+              />
+            </TabsContent>
+          )}
+
+          {availableViews.includes("consistency") && (
+            <TabsContent value="consistency">
+              <ConsistencyView stats={comparisonStats!} />
+            </TabsContent>
+          )}
+
+          {availableViews.includes("detailed-stats") && (
+            <TabsContent value="detailed-stats">
+              <DetailedStatsView stats={[comparisonStats!]} />
+            </TabsContent>
+          )}
+
+          {availableViews.includes("impact-metrics") && (
+            <TabsContent value="impact-metrics">
+              <ImpactMetricsView stats={[comparisonStats!]} />
+            </TabsContent>
+          )}
+        </Tabs>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/compare/comparison-filters.tsx b/src/components/compare/comparison-filters.tsx
new file mode 100644
index 000000000..936c38eb0
--- /dev/null
+++ b/src/components/compare/comparison-filters.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { HeroFilter } from "@/components/stats/player/hero-filter";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import type { HeroName } from "@/types/heroes";
+import { RotateCcw, X } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useMemo } from "react";
+import { PlayerSelector } from "./player-selector";
+
+type ComparisonFiltersProps = {
+  teamId: number;
+  mapIds: number[];
+  selectedPlayer: string | null;
+  selectedHeroes: HeroName[];
+  dateRange?: { from: Date; to: Date };
+  onPlayerChange: (player: string | null) => void;
+  onHeroesChange: (heroes: HeroName[]) => void;
+  onDateRangeChange: (range: { from: Date; to: Date } | undefined) => void;
+};
+
+export function ComparisonFilters({
+  teamId,
+  mapIds,
+  selectedPlayer,
+  selectedHeroes,
+  onPlayerChange,
+  onHeroesChange,
+}: ComparisonFiltersProps) {
+  const t = useTranslations("comparePage.filters");
+
+  const hasActiveFilters = useMemo(() => {
+    return selectedPlayer !== null || selectedHeroes.length > 0;
+  }, [selectedPlayer, selectedHeroes]);
+
+  function handleReset() {
+    onPlayerChange(null);
+    onHeroesChange([]);
+  }
+
+  return (
+    <Card className="sticky top-0 z-10">
+      <CardHeader className="border-b pb-4">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg">{t("title")}</CardTitle>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleReset}
+            disabled={!hasActiveFilters}
+          >
+            <RotateCcw className="mr-2 h-4 w-4" />
+            {t("resetAll")}
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <div className="grid gap-4 lg:grid-cols-2">
+          {/* Player Selector */}
+          <div className="space-y-2">
+            <Label className="text-sm leading-none font-medium">
+              {t("playerLabel")}
+              <span className="text-destructive ml-1">*</span>
+            </Label>
+            <PlayerSelector
+              teamId={teamId}
+              mapIds={mapIds}
+              value={selectedPlayer}
+              onChange={onPlayerChange}
+            />
+          </div>
+
+          {/* Hero Filter */}
+          <div className="space-y-2">
+            <Label className="text-sm leading-none font-medium">
+              {t("heroesLabel")}
+            </Label>
+            <HeroFilter
+              selectedHeroes={selectedHeroes}
+              onSelectionChange={onHeroesChange}
+            />
+          </div>
+        </div>
+
+        {/* Active Filters Summary */}
+        {hasActiveFilters && (
+          <div className="mt-4 flex flex-wrap gap-2">
+            {selectedPlayer && (
+              <Badge variant="secondary" className="gap-1">
+                {t("player")}: {selectedPlayer}
+                <X
+                  className="ml-1 h-3 w-3 cursor-pointer"
+                  onClick={() => onPlayerChange(null)}
+                />
+              </Badge>
+            )}
+            {selectedHeroes.length > 0 && (
+              <Badge variant="secondary" className="gap-1">
+                {selectedHeroes.length === 1
+                  ? selectedHeroes[0]
+                  : t("heroesCount", { count: selectedHeroes.length })}
+                <X
+                  className="ml-1 h-3 w-3 cursor-pointer"
+                  onClick={() => onHeroesChange([])}
+                />
+              </Badge>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/compare/consistency-view.tsx b/src/components/compare/consistency-view.tsx
new file mode 100644
index 000000000..cc450e473
--- /dev/null
+++ b/src/components/compare/consistency-view.tsx
@@ -0,0 +1,521 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { ComparisonStats } from "@/data/comparison-dto";
+import { Activity, Target, TrendingUp, Zap } from "lucide-react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  ErrorBar,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type ConsistencyViewProps = {
+  stats: ComparisonStats;
+};
+
+function getConsistencyLevel(score: number): {
+  label: string;
+  color: string;
+  icon: typeof Activity;
+  description: string;
+} {
+  if (score >= 85) {
+    return {
+      label: "Highly Consistent",
+      color: "text-emerald-600 dark:text-emerald-400",
+      icon: Target,
+      description: "Rock solid performance across all maps",
+    };
+  }
+  if (score >= 70) {
+    return {
+      label: "Consistent",
+      color: "text-green-600 dark:text-green-400",
+      icon: TrendingUp,
+      description: "Reliable performance with minor variance",
+    };
+  }
+  if (score >= 55) {
+    return {
+      label: "Moderately Consistent",
+      color: "text-amber-600 dark:text-amber-400",
+      icon: Activity,
+      description: "Performance varies based on context",
+    };
+  }
+  return {
+    label: "Variable Performance",
+    color: "text-rose-600 dark:text-rose-400",
+    icon: Zap,
+    description: "Significant variation across different maps",
+  };
+}
+
+const METRIC_LABELS: Record<string, string> = {
+  elimsPer10: "Eliminations",
+  deathsPer10: "Deaths",
+  damagePer10: "Damage (k)",
+  healingPer10: "Healing (k)",
+};
+
+export function ConsistencyView({ stats }: ConsistencyViewProps) {
+  const { aggregated, perMapBreakdown } = stats;
+
+  const consistency = getConsistencyLevel(aggregated.consistencyScore);
+  const ConsistencyIcon = consistency.icon;
+
+  const varianceData = [
+    {
+      metric: "Eliminations",
+      mean: Number(aggregated.eliminationsPer10.toFixed(1)),
+      stdDev: Number(aggregated.eliminationsPer10StdDev.toFixed(1)),
+      lower: Number(
+        Math.max(
+          0,
+          aggregated.eliminationsPer10 - aggregated.eliminationsPer10StdDev
+        ).toFixed(1)
+      ),
+      upper: Number(
+        (
+          aggregated.eliminationsPer10 + aggregated.eliminationsPer10StdDev
+        ).toFixed(1)
+      ),
+      cv: aggregated.eliminationsPer10
+        ? (
+            (aggregated.eliminationsPer10StdDev /
+              aggregated.eliminationsPer10) *
+            100
+          ).toFixed(1)
+        : "0.0",
+    },
+    {
+      metric: "Deaths",
+      mean: Number(aggregated.deathsPer10.toFixed(1)),
+      stdDev: Number(aggregated.deathsPer10StdDev.toFixed(1)),
+      lower: Number(
+        Math.max(
+          0,
+          aggregated.deathsPer10 - aggregated.deathsPer10StdDev
+        ).toFixed(1)
+      ),
+      upper: Number(
+        (aggregated.deathsPer10 + aggregated.deathsPer10StdDev).toFixed(1)
+      ),
+      cv: aggregated.deathsPer10
+        ? (
+            (aggregated.deathsPer10StdDev / aggregated.deathsPer10) *
+            100
+          ).toFixed(1)
+        : "0.0",
+    },
+    {
+      metric: "Damage",
+      mean: Number((aggregated.allDamagePer10 / 1000).toFixed(1)),
+      stdDev: Number((aggregated.allDamagePer10StdDev / 1000).toFixed(1)),
+      lower: Number(
+        Math.max(
+          0,
+          (aggregated.allDamagePer10 - aggregated.allDamagePer10StdDev) / 1000
+        ).toFixed(1)
+      ),
+      upper: Number(
+        (
+          (aggregated.allDamagePer10 + aggregated.allDamagePer10StdDev) /
+          1000
+        ).toFixed(1)
+      ),
+      cv: aggregated.allDamagePer10
+        ? (
+            (aggregated.allDamagePer10StdDev / aggregated.allDamagePer10) *
+            100
+          ).toFixed(1)
+        : "0.0",
+    },
+    {
+      metric: "Healing",
+      mean: Number((aggregated.healingDealtPer10 / 1000).toFixed(1)),
+      stdDev: Number((aggregated.healingDealtPer10StdDev / 1000).toFixed(1)),
+      lower: Number(
+        Math.max(
+          0,
+          (aggregated.healingDealtPer10 - aggregated.healingDealtPer10StdDev) /
+            1000
+        ).toFixed(1)
+      ),
+      upper: Number(
+        (
+          (aggregated.healingDealtPer10 + aggregated.healingDealtPer10StdDev) /
+          1000
+        ).toFixed(1)
+      ),
+      cv: aggregated.healingDealtPer10
+        ? (
+            (aggregated.healingDealtPer10StdDev /
+              aggregated.healingDealtPer10) *
+            100
+          ).toFixed(1)
+        : "0.0",
+    },
+  ].filter((d) => d.mean > 0);
+
+  // Calculate the range width for the bar chart (this is what we'll display)
+  const varianceChartData = varianceData.map((item) => ({
+    metric: item.metric,
+    mean: item.mean,
+    stdDev: item.stdDev,
+    lower: item.lower,
+    upper: item.upper,
+    cv: item.cv,
+    // For stacked bars: start at lower bound, then show the range (2 * stdDev)
+    rangeWidth: Number((item.stdDev * 2).toFixed(1)),
+    // Error bar format: [lowerError, upperError] as array
+    errorBar: [item.stdDev, item.stdDev],
+  }));
+
+  const perMapData = perMapBreakdown.map((map, idx) => ({
+    name: `Map ${idx + 1}`,
+    fullName: `${map.scrimName} - ${map.mapName}`,
+    elimsPer10: Number((map.stats.eliminationsPer10 ?? 0).toFixed(1)),
+    deathsPer10: Number((map.stats.deathsPer10 ?? 0).toFixed(1)),
+    damagePer10: Number(((map.stats.allDamagePer10 ?? 0) / 1000).toFixed(1)),
+    healingPer10: Number(
+      ((map.stats.healing_dealt / map.stats.hero_time_played) * 600) / 1000
+    ).toFixed(1),
+  }));
+
+  return (
+    <div className="space-y-6">
+      <Card className="relative overflow-hidden border-2">
+        <div
+          className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]"
+          style={{
+            backgroundImage: `radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0)`,
+            backgroundSize: "32px 32px",
+          }}
+        />
+
+        <CardHeader className="relative">
+          <div className="flex items-start justify-between">
+            <div className="space-y-2">
+              <CardTitle className="flex items-center gap-3 text-2xl font-bold tracking-tight">
+                <div
+                  className={`rounded-lg bg-gradient-to-br p-2 ${
+                    aggregated.consistencyScore >= 85
+                      ? "from-emerald-500/10 to-green-500/10"
+                      : aggregated.consistencyScore >= 70
+                        ? "from-green-500/10 to-lime-500/10"
+                        : aggregated.consistencyScore >= 55
+                          ? "from-amber-500/10 to-yellow-500/10"
+                          : "from-rose-500/10 to-orange-500/10"
+                  }`}
+                >
+                  <ConsistencyIcon className={`h-6 w-6 ${consistency.color}`} />
+                </div>
+                Performance Consistency
+              </CardTitle>
+              <p className="text-muted-foreground max-w-2xl text-sm">
+                Measures how reliable performance is across different maps and
+                contexts. Lower variance indicates consistent, dependable play.
+              </p>
+            </div>
+
+            <div className="text-right">
+              <div className="flex flex-col items-end gap-1">
+                <span className="text-muted-foreground text-sm font-medium">
+                  Consistency Score
+                </span>
+                <div
+                  className={`text-5xl font-bold tracking-tight tabular-nums ${consistency.color}`}
+                >
+                  {aggregated.consistencyScore.toFixed(0)}
+                </div>
+                <div className="mt-1 flex items-center gap-2">
+                  <span
+                    className={`rounded-full px-2.5 py-1 text-xs font-semibold ${consistency.color} bg-current/10`}
+                  >
+                    {consistency.label}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-muted/50 mt-4 rounded-lg border p-4">
+            <p className="text-muted-foreground text-sm italic">
+              {consistency.description}
+            </p>
+          </div>
+        </CardHeader>
+
+        <CardContent className="relative space-y-6">
+          <div>
+            <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold">
+              <div className="bg-primary h-1 w-1 rounded-full" />
+              Mean ± Standard Deviation
+            </h3>
+
+            {/* Vertical bar chart with error bars */}
+            <div className="h-[400px] w-full">
+              <ResponsiveContainer width="100%" height="100%">
+                <ComposedChart
+                  data={varianceChartData}
+                  margin={{ top: 20, right: 30, left: 20, bottom: 60 }}
+                >
+                  <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke="var(--border)"
+                    opacity={0.3}
+                  />
+                  <XAxis
+                    dataKey="metric"
+                    stroke="var(--muted-foreground)"
+                    fontSize={12}
+                  />
+                  <YAxis stroke="var(--muted-foreground)" fontSize={12} />
+                  <Tooltip
+                    content={({ active, payload }) => {
+                      if (!active || !payload?.[0]) return null;
+                      const data = payload[0]
+                        .payload as (typeof varianceChartData)[0];
+                      return (
+                        <div className="bg-background rounded-lg border p-3 shadow-lg">
+                          <div className="space-y-2">
+                            <div className="text-base font-semibold">
+                              {data.metric} per 10
+                            </div>
+                            <div className="space-y-1">
+                              <div className="flex items-center justify-between gap-3 text-sm">
+                                <span className="text-muted-foreground">
+                                  Mean:
+                                </span>
+                                <span className="font-mono font-semibold">
+                                  {data.mean.toFixed(1)}
+                                </span>
+                              </div>
+                              <div className="flex items-center justify-between gap-3 text-sm">
+                                <span className="text-muted-foreground">
+                                  Std Dev:
+                                </span>
+                                <span className="font-mono">
+                                  ±{data.stdDev.toFixed(1)}
+                                </span>
+                              </div>
+                              <div className="flex items-center justify-between gap-3 text-sm">
+                                <span className="text-muted-foreground">
+                                  Range:
+                                </span>
+                                <span className="font-mono text-xs">
+                                  {data.lower.toFixed(1)} –{" "}
+                                  {data.upper.toFixed(1)}
+                                </span>
+                              </div>
+                              <div className="mt-2 border-t pt-2">
+                                <div className="flex items-center justify-between gap-3 text-sm">
+                                  <span className="text-muted-foreground">
+                                    CV:
+                                  </span>
+                                  <span className="font-mono">{data.cv}%</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }}
+                  />
+                  <Bar dataKey="mean" radius={[4, 4, 0, 0]}>
+                    {varianceChartData.map((entry) => (
+                      <Cell
+                        key={entry.metric}
+                        fill={
+                          entry.metric === "Eliminations"
+                            ? "var(--chart-1)"
+                            : entry.metric === "Deaths"
+                              ? "var(--chart-2)"
+                              : entry.metric === "Damage"
+                                ? "var(--chart-3)"
+                                : "var(--chart-4)"
+                        }
+                      />
+                    ))}
+                    <ErrorBar
+                      dataKey="errorBar"
+                      width={8}
+                      strokeWidth={2.5}
+                      stroke="var(--foreground)"
+                      opacity={0.7}
+                    />
+                  </Bar>
+                </ComposedChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            {varianceData.map((item) => (
+              <Card
+                key={item.metric}
+                className="bg-card/50 border backdrop-blur-sm"
+              >
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-muted-foreground text-sm font-medium">
+                    {item.metric} per 10
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  <div className="flex items-baseline gap-1">
+                    <span className="text-2xl font-bold tabular-nums">
+                      {item.mean}
+                    </span>
+                    <span className="text-muted-foreground text-sm">
+                      ± {item.stdDev}
+                    </span>
+                  </div>
+                  <div className="text-muted-foreground space-y-0.5 text-xs">
+                    <div>
+                      Range: {item.lower} - {item.upper}
+                    </div>
+                    <div>Variation: {item.cv}%</div>
+                  </div>
+                  <div className="pt-2">
+                    <div className="bg-muted h-1.5 w-full overflow-hidden rounded-full">
+                      <div
+                        className="h-full bg-gradient-to-r from-emerald-500 via-amber-500 to-rose-500 transition-all duration-300"
+                        style={{
+                          width: `${Math.min(100, parseFloat(item.cv) * 2)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {perMapBreakdown.length >= 3 && (
+            <div>
+              <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold">
+                <div className="bg-primary h-1 w-1 rounded-full" />
+                Performance Across Maps
+              </h3>
+
+              <div className="h-[250px] w-full">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={perMapData}>
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      stroke="var(--border)"
+                      opacity={0.3}
+                    />
+                    <XAxis
+                      dataKey="name"
+                      stroke="var(--muted-foreground)"
+                      fontSize={12}
+                      tickLine={false}
+                    />
+                    <YAxis
+                      stroke="var(--muted-foreground)"
+                      fontSize={12}
+                      tickLine={false}
+                    />
+                    <Tooltip
+                      content={({ active, payload }) => {
+                        if (!active || !payload?.[0]) return null;
+                        const data = payload[0]
+                          .payload as (typeof perMapData)[0];
+                        return (
+                          <div className="bg-background rounded-lg border p-3 shadow-lg">
+                            <div className="space-y-2">
+                              <div className="text-base font-semibold">
+                                {data.fullName}
+                              </div>
+                              <div className="space-y-1">
+                                {payload.map((entry) => {
+                                  const label =
+                                    METRIC_LABELS[entry.dataKey as string] ||
+                                    entry.name;
+                                  return (
+                                    <div
+                                      key={entry.dataKey}
+                                      className="flex items-center justify-between gap-4 text-sm"
+                                    >
+                                      <div className="flex items-center gap-2">
+                                        <div
+                                          className="h-3 w-3 rounded-sm"
+                                          style={{
+                                            backgroundColor: entry.color,
+                                          }}
+                                        />
+                                        <span className="text-muted-foreground">
+                                          {label}:
+                                        </span>
+                                      </div>
+                                      <span className="font-mono font-semibold">
+                                        {entry.value}
+                                      </span>
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      }}
+                    />
+                    <Bar
+                      dataKey="elimsPer10"
+                      fill="var(--chart-1)"
+                      radius={[4, 4, 0, 0]}
+                    />
+                    <Bar
+                      dataKey="deathsPer10"
+                      fill="var(--chart-2)"
+                      radius={[4, 4, 0, 0]}
+                    />
+                    <Bar
+                      dataKey="damagePer10"
+                      fill="var(--chart-3)"
+                      radius={[4, 4, 0, 0]}
+                    />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          )}
+
+          <div className="bg-muted/30 rounded-lg border p-4">
+            <h4 className="mb-2 text-sm font-semibold">
+              Understanding Consistency Metrics
+            </h4>
+            <div className="text-muted-foreground space-y-2 text-sm">
+              <p>
+                <strong className="text-foreground">Standard Deviation:</strong>{" "}
+                Measures how spread out performance is. Lower values = more
+                consistent.
+              </p>
+              <p>
+                <strong className="text-foreground">
+                  Coefficient of Variation:
+                </strong>{" "}
+                Normalized measure of dispersion. Allows comparison across
+                different scales.
+              </p>
+              <p>
+                <strong className="text-foreground">Consistency Score:</strong>{" "}
+                Overall reliability metric (0-100). Higher scores indicate
+                dependable, steady performance.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/compare/delta-view.tsx b/src/components/compare/delta-view.tsx
new file mode 100644
index 000000000..666661dcd
--- /dev/null
+++ b/src/components/compare/delta-view.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { ComparisonStats } from "@/data/comparison-dto";
+import { cn } from "@/lib/utils";
+import { ArrowDown, ArrowUp, TrendingDown, TrendingUp } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type DeltaViewProps = {
+  stats: ComparisonStats;
+};
+
+type DeltaStat = {
+  label: string;
+  oldValue: number;
+  newValue: number;
+  format: "number" | "per10" | "time" | "percentage";
+  reverseColors?: boolean;
+  significant?: boolean;
+};
+
+function formatStat(
+  value: number,
+  format: "number" | "per10" | "time" | "percentage"
+): string {
+  if (format === "time") {
+    const hours = Math.floor(value / 3600);
+    const minutes = Math.floor((value % 3600) / 60);
+    const seconds = Math.floor(value % 60);
+    return hours > 0
+      ? `${hours}h ${minutes}m ${seconds}s`
+      : `${minutes}m ${seconds}s`;
+  }
+  if (format === "per10") {
+    return value.toFixed(2);
+  }
+  if (format === "percentage") {
+    return `${value.toFixed(1)}%`;
+  }
+  return value.toLocaleString();
+}
+
+function calculateDelta(oldValue: number, newValue: number) {
+  const absoluteChange = newValue - oldValue;
+  const percentageChange =
+    oldValue !== 0 ? ((newValue - oldValue) / oldValue) * 100 : 0;
+
+  return {
+    absolute: absoluteChange,
+    percentage: percentageChange,
+    isIncrease: absoluteChange > 0,
+    isSignificant: Math.abs(percentageChange) >= 10,
+  };
+}
+
+export function DeltaView({ stats }: DeltaViewProps) {
+  const t = useTranslations("comparePage.delta");
+
+  if (stats.perMapBreakdown.length !== 2) {
+    return (
+      <Card>
+        <CardContent className="p-8 text-center">
+          <p className="text-muted-foreground">{t("requiresTwoMaps")}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const [map1, map2] = stats.perMapBreakdown;
+
+  const deltaStats: DeltaStat[] = [
+    {
+      label: t("stats.eliminations"),
+      oldValue: map1.stats.eliminations ?? 0,
+      newValue: map2.stats.eliminations ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.deaths"),
+      oldValue: map1.stats.deaths ?? 0,
+      newValue: map2.stats.deaths ?? 0,
+      format: "number",
+      reverseColors: true,
+    },
+    {
+      label: t("stats.damage"),
+      oldValue: map1.stats.all_damage_dealt ?? 0,
+      newValue: map2.stats.all_damage_dealt ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.healing"),
+      oldValue: map1.stats.healing_dealt ?? 0,
+      newValue: map2.stats.healing_dealt ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.mitigated"),
+      oldValue: map1.stats.damage_blocked ?? 0,
+      newValue: map2.stats.damage_blocked ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.eliminationsPer10"),
+      oldValue: map1.stats.eliminationsPer10 ?? 0,
+      newValue: map2.stats.eliminationsPer10 ?? 0,
+      format: "per10",
+    },
+    {
+      label: t("stats.deathsPer10"),
+      oldValue: map1.stats.deathsPer10 ?? 0,
+      newValue: map2.stats.deathsPer10 ?? 0,
+      format: "per10",
+      reverseColors: true,
+    },
+    {
+      label: t("stats.damagePer10"),
+      oldValue: map1.stats.allDamagePer10 ?? 0,
+      newValue: map2.stats.allDamagePer10 ?? 0,
+      format: "per10",
+    },
+    {
+      label: t("stats.healingPer10"),
+      oldValue: map1.stats.healingDealtPer10 ?? 0,
+      newValue: map2.stats.healingDealtPer10 ?? 0,
+      format: "per10",
+    },
+    {
+      label: t("stats.mitigatedPer10"),
+      oldValue: map1.stats.damageBlockedPer10 ?? 0,
+      newValue: map2.stats.damageBlockedPer10 ?? 0,
+      format: "per10",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Header Cards */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <div className="space-y-2">
+              <div className="text-muted-foreground text-sm font-medium">
+                {t("from")}
+              </div>
+              <CardTitle>{map1.mapName}</CardTitle>
+              <Badge variant="outline">
+                {new Date(map1.date).toLocaleDateString()}
+              </Badge>
+            </div>
+          </CardHeader>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <div className="space-y-2">
+              <div className="text-muted-foreground text-sm font-medium">
+                {t("to")}
+              </div>
+              <CardTitle>{map2.mapName}</CardTitle>
+              <Badge variant="outline">
+                {new Date(map2.date).toLocaleDateString()}
+              </Badge>
+            </div>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Delta Cards */}
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {deltaStats.map((stat) => {
+          const delta = calculateDelta(stat.oldValue, stat.newValue);
+          const isImprovement = stat.reverseColors
+            ? !delta.isIncrease
+            : delta.isIncrease;
+
+          const changeColor = cn(
+            delta.absolute === 0
+              ? "text-muted-foreground"
+              : isImprovement
+                ? "text-green-600 dark:text-green-400"
+                : "text-red-600 dark:text-red-400"
+          );
+
+          const bgColor = cn(
+            delta.absolute === 0
+              ? "bg-muted"
+              : isImprovement
+                ? "bg-green-50 dark:bg-green-950/20"
+                : "bg-red-50 dark:bg-red-950/20"
+          );
+
+          const Icon = delta.isIncrease ? TrendingUp : TrendingDown;
+
+          return (
+            <Card key={stat.label} className={bgColor}>
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <div className="space-y-1">
+                    <p className="text-muted-foreground text-sm font-medium">
+                      {stat.label}
+                    </p>
+                    <div className="flex items-baseline gap-2">
+                      <span className="font-mono text-2xl font-bold tabular-nums">
+                        {formatStat(stat.newValue, stat.format)}
+                      </span>
+                      {delta.isSignificant && (
+                        <Badge
+                          variant="outline"
+                          className="border-primary text-primary"
+                        >
+                          {t("significant")}
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                  {delta.absolute !== 0 && (
+                    <Icon className={cn("h-5 w-5", changeColor)} />
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent className="pb-4">
+                <div className="space-y-1">
+                  <div className="text-muted-foreground text-xs">
+                    {t("previous")}: {formatStat(stat.oldValue, stat.format)}
+                  </div>
+                  <div className={cn("text-sm font-semibold", changeColor)}>
+                    {delta.absolute > 0 ? "+" : ""}
+                    {formatStat(Math.abs(delta.absolute), stat.format)} (
+                    {delta.percentage > 0 ? "+" : ""}
+                    {delta.percentage.toFixed(1)}%)
+                    {delta.isIncrease ? (
+                      <ArrowUp className="ml-1 inline h-3 w-3" />
+                    ) : (
+                      <ArrowDown className="ml-1 inline h-3 w-3" />
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Summary */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("summary")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {deltaStats
+              .filter((stat) => {
+                const delta = calculateDelta(stat.oldValue, stat.newValue);
+                return delta.isSignificant;
+              })
+              .map((stat) => {
+                const delta = calculateDelta(stat.oldValue, stat.newValue);
+                const isImprovement = stat.reverseColors
+                  ? !delta.isIncrease
+                  : delta.isIncrease;
+
+                return (
+                  <div
+                    key={stat.label}
+                    className="border-border flex items-center gap-3 rounded-lg border p-3"
+                  >
+                    <div
+                      className={cn(
+                        "flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
+                        isImprovement
+                          ? "bg-green-100 dark:bg-green-950"
+                          : "bg-red-100 dark:bg-red-950"
+                      )}
+                    >
+                      {delta.isIncrease ? (
+                        <ArrowUp
+                          className={cn(
+                            "h-5 w-5",
+                            isImprovement
+                              ? "text-green-600 dark:text-green-400"
+                              : "text-red-600 dark:text-red-400"
+                          )}
+                        />
+                      ) : (
+                        <ArrowDown
+                          className={cn(
+                            "h-5 w-5",
+                            isImprovement
+                              ? "text-green-600 dark:text-green-400"
+                              : "text-red-600 dark:text-red-400"
+                          )}
+                        />
+                      )}
+                    </div>
+                    <div className="flex-1">
+                      <p className="font-medium">{stat.label}</p>
+                      <p className="text-muted-foreground text-sm">
+                        {formatStat(stat.oldValue, stat.format)} →{" "}
+                        {formatStat(stat.newValue, stat.format)} (
+                        {delta.percentage > 0 ? "+" : ""}
+                        {delta.percentage.toFixed(1)}%)
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            {deltaStats.filter((stat) => {
+              const delta = calculateDelta(stat.oldValue, stat.newValue);
+              return delta.isSignificant;
+            }).length === 0 && (
+              <p className="text-muted-foreground text-center">
+                {t("noSignificantChanges")}
+              </p>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/compare/detailed-stats-view.tsx b/src/components/compare/detailed-stats-view.tsx
new file mode 100644
index 000000000..d1ac998dd
--- /dev/null
+++ b/src/components/compare/detailed-stats-view.tsx
@@ -0,0 +1,647 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type {
+  AggregatedStats,
+  ComparisonStats,
+  TrendsAnalysis,
+} from "@/data/comparison-dto";
+import {
+  Activity,
+  Award,
+  ChevronDown,
+  ChevronUp,
+  Download,
+  Eye,
+  Filter,
+  Shield,
+  Sparkles,
+  Sword,
+  Target,
+  TrendingDown,
+  TrendingUp,
+  Zap,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+type DetailedStatsViewProps = {
+  stats: ComparisonStats[];
+};
+
+type StatCategory =
+  | "combat"
+  | "damage"
+  | "support"
+  | "defense"
+  | "assists"
+  | "ultimate"
+  | "impact"
+  | "consistency";
+
+type StatRow = {
+  label: string;
+  key: keyof AggregatedStats;
+  format: "number" | "percentage" | "time" | "ratio" | "per10";
+  category: StatCategory;
+  priority?: boolean;
+  tooltip?: string;
+};
+
+function formatStatValue(
+  value: number,
+  format: "number" | "percentage" | "time" | "ratio" | "per10"
+): string {
+  if (format === "time") {
+    const minutes = Math.floor(value / 60);
+    const seconds = Math.floor(value % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+  if (format === "percentage") {
+    return `${value.toFixed(1)}%`;
+  }
+  if (format === "ratio") {
+    return value.toFixed(2);
+  }
+  if (format === "per10") {
+    return value.toFixed(1);
+  }
+  return value.toLocaleString();
+}
+
+function getCategoryIcon(category: StatCategory) {
+  switch (category) {
+    case "combat":
+      return Sword;
+    case "damage":
+      return Target;
+    case "support":
+      return Sparkles;
+    case "defense":
+      return Shield;
+    case "assists":
+      return Activity;
+    case "ultimate":
+      return Zap;
+    case "impact":
+      return Award;
+    case "consistency":
+      return TrendingUp;
+    default:
+      return Eye;
+  }
+}
+
+function getCategoryColor(category: StatCategory): string {
+  switch (category) {
+    case "combat":
+      return "rose";
+    case "damage":
+      return "orange";
+    case "support":
+      return "emerald";
+    case "defense":
+      return "blue";
+    case "assists":
+      return "purple";
+    case "ultimate":
+      return "violet";
+    case "impact":
+      return "amber";
+    case "consistency":
+      return "cyan";
+    default:
+      return "gray";
+  }
+}
+
+function getTrendForMetric(
+  metricKey: string,
+  trends?: TrendsAnalysis
+): { isImproving: boolean; changePercentage: number } | null {
+  if (!trends) return null;
+
+  // Map stat keys to their corresponding trend metric names
+  const metricNameMap: Record<string, string> = {
+    eliminationsPer10: "Eliminations per 10",
+    deathsPer10: "Deaths per 10",
+    heroDamagePer10: "Damage Dealt per 10",
+    damageTakenPer10: "Damage Taken per 10",
+    firstDeathPercentage: "First Death %",
+    firstPickPercentage: "First Pick %",
+    mvpScore: "MVP Score",
+    fightReversalPercentage: "Fight Reversal %",
+    fletaDeadliftPercentage: "Fleta Deadlift %",
+    killsPerUltimate: "Kills per Ultimate",
+  };
+
+  const trendMetricName = metricNameMap[metricKey];
+  if (!trendMetricName) return null;
+
+  const improving = trends.improvingMetrics.find(
+    (m) => m.metric === trendMetricName
+  );
+  if (improving) {
+    return { isImproving: true, changePercentage: improving.changePercentage };
+  }
+
+  const declining = trends.decliningMetrics.find(
+    (m) => m.metric === trendMetricName
+  );
+  if (declining) {
+    return { isImproving: false, changePercentage: declining.changePercentage };
+  }
+
+  return null;
+}
+
+export function DetailedStatsView({ stats }: DetailedStatsViewProps) {
+  const t = useTranslations("comparePage.detailedStats");
+  const [selectedCategory, setSelectedCategory] = useState<
+    StatCategory | "all"
+  >("all");
+  const [sortBy, setSortBy] = useState<{
+    playerIndex: number;
+    direction: "asc" | "desc";
+  } | null>(null);
+
+  const statDefinitions: StatRow[] = [
+    // Combat
+    {
+      label: t("stats.eliminationsPer10"),
+      key: "eliminationsPer10",
+      format: "per10",
+      category: "combat",
+      priority: true,
+    },
+    {
+      label: t("stats.finalBlowsPer10"),
+      key: "finalBlowsPer10",
+      format: "per10",
+      category: "combat",
+      priority: true,
+    },
+    {
+      label: t("stats.soloKillsPer10"),
+      key: "soloKillsPer10",
+      format: "per10",
+      category: "combat",
+      priority: true,
+    },
+    {
+      label: t("stats.deathsPer10"),
+      key: "deathsPer10",
+      format: "per10",
+      category: "combat",
+      priority: true,
+    },
+
+    // Damage
+    {
+      label: t("stats.allDamagePer10"),
+      key: "allDamagePer10",
+      format: "per10",
+      category: "damage",
+    },
+    {
+      label: t("stats.heroDamagePer10"),
+      key: "heroDamagePer10",
+      format: "per10",
+      category: "damage",
+    },
+    {
+      label: t("stats.barrierDamagePer10"),
+      key: "barrierDamagePer10",
+      format: "per10",
+      category: "damage",
+    },
+
+    // Support
+    {
+      label: t("stats.healingDealtPer10"),
+      key: "healingDealtPer10",
+      format: "per10",
+      category: "support",
+    },
+    {
+      label: t("stats.healingReceivedPer10"),
+      key: "healingReceivedPer10",
+      format: "per10",
+      category: "support",
+      priority: true,
+    },
+    {
+      label: t("stats.selfHealingPer10"),
+      key: "selfHealingPer10",
+      format: "per10",
+      category: "support",
+    },
+
+    // Defense
+    {
+      label: t("stats.damageTakenPer10"),
+      key: "damageTakenPer10",
+      format: "per10",
+      category: "defense",
+      priority: true,
+    },
+    {
+      label: t("stats.damageBlockedPer10"),
+      key: "damageBlockedPer10",
+      format: "per10",
+      category: "defense",
+    },
+
+    // Assists
+    {
+      label: t("stats.offensiveAssistsPer10"),
+      key: "offensiveAssistsPer10",
+      format: "per10",
+      category: "assists",
+    },
+    {
+      label: t("stats.defensiveAssistsPer10"),
+      key: "defensiveAssistsPer10",
+      format: "per10",
+      category: "assists",
+    },
+
+    // Ultimate
+    {
+      label: t("stats.ultimatesEarnedPer10"),
+      key: "ultimatesEarnedPer10",
+      format: "per10",
+      category: "ultimate",
+    },
+    {
+      label: t("stats.ultimatesUsedPer10"),
+      key: "ultimatesUsedPer10",
+      format: "per10",
+      category: "ultimate",
+    },
+    {
+      label: t("stats.averageUltChargeTime"),
+      key: "averageUltChargeTime",
+      format: "time",
+      category: "ultimate",
+      priority: true,
+    },
+    {
+      label: t("stats.averageTimeToUseUlt"),
+      key: "averageTimeToUseUlt",
+      format: "time",
+      category: "ultimate",
+    },
+    {
+      label: t("stats.killsPerUltimate"),
+      key: "killsPerUltimate",
+      format: "ratio",
+      category: "ultimate",
+      priority: true,
+    },
+    {
+      label: t("stats.averageDroughtTime"),
+      key: "averageDroughtTime",
+      format: "time",
+      category: "ultimate",
+    },
+
+    // Impact
+    {
+      label: t("stats.firstPickPercentage"),
+      key: "firstPickPercentage",
+      format: "percentage",
+      category: "impact",
+      priority: true,
+    },
+    {
+      label: t("stats.firstPicksPer10"),
+      key: "firstPicksPer10",
+      format: "per10",
+      category: "impact",
+      priority: true,
+    },
+    {
+      label: t("stats.firstDeathPercentage"),
+      key: "firstDeathPercentage",
+      format: "percentage",
+      category: "impact",
+      priority: true,
+    },
+    {
+      label: t("stats.firstDeathsPer10"),
+      key: "firstDeathsPer10",
+      format: "per10",
+      category: "impact",
+      priority: true,
+    },
+    {
+      label: t("stats.fletaDeadliftPercentage"),
+      key: "fletaDeadliftPercentage",
+      format: "percentage",
+      category: "impact",
+    },
+    {
+      label: t("stats.mvpScore"),
+      key: "mvpScore",
+      format: "number",
+      category: "impact",
+    },
+    {
+      label: t("stats.mapMvpRate"),
+      key: "mapMvpRate",
+      format: "percentage",
+      category: "impact",
+    },
+    {
+      label: t("stats.fightReversalPercentage"),
+      key: "fightReversalPercentage",
+      format: "percentage",
+      category: "impact",
+      priority: true,
+    },
+
+    // Consistency
+    {
+      label: t("stats.eliminationsPer10StdDev"),
+      key: "eliminationsPer10StdDev",
+      format: "number",
+      category: "consistency",
+    },
+    {
+      label: t("stats.deathsPer10StdDev"),
+      key: "deathsPer10StdDev",
+      format: "number",
+      category: "consistency",
+    },
+    {
+      label: t("stats.allDamagePer10StdDev"),
+      key: "allDamagePer10StdDev",
+      format: "number",
+      category: "consistency",
+    },
+    {
+      label: t("stats.consistencyScore"),
+      key: "consistencyScore",
+      format: "number",
+      category: "consistency",
+    },
+  ];
+
+  const filteredStats =
+    selectedCategory === "all"
+      ? statDefinitions
+      : statDefinitions.filter((stat) => stat.category === selectedCategory);
+
+  const sortedStats = sortBy
+    ? [...filteredStats].sort((a, b) => {
+        const aValue = stats[sortBy.playerIndex].aggregated[a.key];
+        const bValue = stats[sortBy.playerIndex].aggregated[b.key];
+        return sortBy.direction === "asc" ? aValue - bValue : bValue - aValue;
+      })
+    : filteredStats;
+
+  function handleExportCSV() {
+    const headers = ["Stat", ...stats.map((s) => s.playerName)];
+    const rows = filteredStats.map((stat) => [
+      stat.label,
+      ...stats.map((s) => formatStatValue(s.aggregated[stat.key], stat.format)),
+    ]);
+
+    const csv = [headers, ...rows].map((row) => row.join(",")).join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "comparison-stats.csv";
+    a.click();
+  }
+
+  const categories: { id: StatCategory | "all"; labelKey: string }[] = [
+    { id: "all", labelKey: "categories.all" },
+    { id: "combat", labelKey: "categories.combat" },
+    { id: "damage", labelKey: "categories.damage" },
+    { id: "support", labelKey: "categories.support" },
+    { id: "defense", labelKey: "categories.defense" },
+    { id: "assists", labelKey: "categories.assists" },
+    { id: "ultimate", labelKey: "categories.ultimate" },
+    { id: "impact", labelKey: "categories.impact" },
+    { id: "consistency", labelKey: "categories.consistency" },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Header with controls */}
+      <Card className="border-primary/20 from-primary/5 bg-gradient-to-br via-transparent to-transparent">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-3xl font-bold tracking-tight">
+                {t("title")}
+              </CardTitle>
+              <p className="text-muted-foreground mt-2 text-sm">
+                {t("subtitle")}
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleExportCSV}
+              className="gap-2"
+            >
+              <Download className="h-4 w-4" />
+              {t("exportCsv")}
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            {categories.map((cat) => {
+              const Icon = cat.id === "all" ? Filter : getCategoryIcon(cat.id);
+              const isSelected = selectedCategory === cat.id;
+
+              return (
+                <Button
+                  key={cat.id}
+                  variant={isSelected ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setSelectedCategory(cat.id)}
+                  className="gap-2 transition-all"
+                >
+                  <Icon className="h-4 w-4" />
+                  {t(cat.labelKey)}
+                </Button>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Stats table */}
+      <Card>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow className="bg-muted/30 hover:bg-muted/30">
+                  <TableHead className="w-[250px] font-bold">
+                    {t("statName")}
+                  </TableHead>
+                  {stats.map((stat, index) => (
+                    <TableHead
+                      key={stat.playerName}
+                      className="hover:bg-muted/50 cursor-pointer text-center transition-colors select-none"
+                      onClick={() =>
+                        setSortBy({
+                          playerIndex: index,
+                          direction:
+                            sortBy?.playerIndex === index &&
+                            sortBy.direction === "desc"
+                              ? "asc"
+                              : "desc",
+                        })
+                      }
+                    >
+                      <div className="flex items-center justify-center gap-2">
+                        <span className="font-bold">{stat.playerName}</span>
+                        {sortBy?.playerIndex === index && (
+                          <span>
+                            {sortBy.direction === "desc" ? (
+                              <ChevronDown className="h-4 w-4" />
+                            ) : (
+                              <ChevronUp className="h-4 w-4" />
+                            )}
+                          </span>
+                        )}
+                      </div>
+                      <div className="text-muted-foreground text-xs font-normal">
+                        {stat.mapCount} {t("maps")}
+                      </div>
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedStats.map((stat) => {
+                  const Icon = getCategoryIcon(stat.category);
+                  const color = getCategoryColor(stat.category);
+                  const values = stats.map((s) => s.aggregated[stat.key]);
+                  const maxValue = Math.max(...values);
+                  const minValue = Math.min(...values);
+
+                  return (
+                    <TableRow
+                      key={stat.key}
+                      className={`transition-colors ${
+                        stat.priority
+                          ? "bg-primary/5 hover:bg-primary/10 font-medium"
+                          : "hover:bg-muted/30"
+                      }`}
+                    >
+                      <TableCell className="font-medium">
+                        <div className="flex items-center gap-3">
+                          <div
+                            className={`rounded-lg p-2 bg-${color}-100 dark:bg-${color}-950/30`}
+                          >
+                            <Icon
+                              className={`h-4 w-4 text-${color}-600 dark:text-${color}-400`}
+                            />
+                          </div>
+                          <div>
+                            <div className="flex items-center gap-2">
+                              {stat.label}
+                              {stat.priority && (
+                                <Badge
+                                  variant="secondary"
+                                  className="h-5 text-xs"
+                                >
+                                  {t("priority")}
+                                </Badge>
+                              )}
+                            </div>
+                            {stat.tooltip && (
+                              <p className="text-muted-foreground text-xs">
+                                {stat.tooltip}
+                              </p>
+                            )}
+                          </div>
+                        </div>
+                      </TableCell>
+                      {values.map((value, playerIndex) => {
+                        const isMax = value === maxValue && values.length > 1;
+                        const isMin = value === minValue && values.length > 1;
+                        const trend = getTrendForMetric(
+                          stat.key,
+                          stats[playerIndex].trends
+                        );
+
+                        return (
+                          <TableCell
+                            key={`${stat.key}-${stats[playerIndex].playerName}`}
+                            className={`text-center font-mono text-lg tabular-nums ${
+                              isMax
+                                ? "bg-emerald-50 font-bold text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400"
+                                : isMin && stat.category !== "consistency"
+                                  ? "text-muted-foreground"
+                                  : ""
+                            }`}
+                          >
+                            <div className="flex items-center justify-center gap-2">
+                              {formatStatValue(value, stat.format)}
+                              {trend &&
+                                Math.abs(trend.changePercentage) > 5 && (
+                                  <div
+                                    className={`flex items-center gap-0.5 ${
+                                      trend.isImproving
+                                        ? "text-emerald-600 dark:text-emerald-400"
+                                        : "text-rose-600 dark:text-rose-400"
+                                    }`}
+                                  >
+                                    {trend.isImproving ? (
+                                      <TrendingUp className="h-3 w-3" />
+                                    ) : (
+                                      <TrendingDown className="h-3 w-3" />
+                                    )}
+                                  </div>
+                                )}
+                            </div>
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Context note */}
+      <Card className="border-muted bg-muted/20">
+        <CardContent className="space-y-2 py-4">
+          <p className="text-muted-foreground text-center text-sm">
+            {t("note")}
+          </p>
+          <p className="text-muted-foreground flex items-center justify-center gap-2 text-center text-xs">
+            <TrendingUp className="h-3.5 w-3.5 text-emerald-600 dark:text-emerald-400" />
+            <span>= Improving over time</span>
+            <span className="mx-2">•</span>
+            <TrendingDown className="h-3.5 w-3.5 text-rose-600 dark:text-rose-400" />
+            <span>= Declining over time (requires 3+ maps)</span>
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/compare/empty-state.tsx b/src/components/compare/empty-state.tsx
new file mode 100644
index 000000000..4f04d72b1
--- /dev/null
+++ b/src/components/compare/empty-state.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { Loader2, MapPin, TrendingDown, UserX } from "lucide-react";
+import type { ReactNode } from "react";
+
+type EmptyStateProps = {
+  icon: "MapPin" | "UserX" | "TrendingDown" | "Loader";
+  title: string;
+  description: string;
+  children?: ReactNode;
+};
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  children,
+}: EmptyStateProps) {
+  const Icon =
+    icon === "MapPin"
+      ? MapPin
+      : icon === "UserX"
+        ? UserX
+        : icon === "TrendingDown"
+          ? TrendingDown
+          : Loader2;
+
+  return (
+    <Card>
+      <CardContent className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-8 text-center">
+        <Icon className="text-muted-foreground h-16 w-16" />
+        <div className="space-y-2">
+          <h3 className="text-xl font-semibold">{title}</h3>
+          <p className="text-muted-foreground max-w-md">{description}</p>
+        </div>
+        {children && <div className="mt-4 w-full max-w-md">{children}</div>}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/compare/impact-metrics-view.tsx b/src/components/compare/impact-metrics-view.tsx
new file mode 100644
index 000000000..f909eafec
--- /dev/null
+++ b/src/components/compare/impact-metrics-view.tsx
@@ -0,0 +1,529 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import type { ComparisonStats, TrendsAnalysis } from "@/data/comparison-dto";
+import {
+  Award,
+  Crosshair,
+  Flame,
+  Shield,
+  Sparkles,
+  Star,
+  TrendingUp,
+  Trophy,
+  Zap,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type ImpactMetricsViewProps = {
+  stats: ComparisonStats[];
+};
+
+type ImpactInsight = {
+  type: "strength" | "neutral" | "consideration";
+  title: string;
+  description: string;
+  metric?: string;
+  icon: typeof Star;
+};
+
+type TrendDirection = "up" | "down" | "stable" | null;
+
+function getTrendDirection(
+  metricName: string,
+  trends?: TrendsAnalysis
+): { direction: TrendDirection; changePercentage: number } {
+  if (!trends) {
+    return { direction: null, changePercentage: 0 };
+  }
+
+  const improving = trends.improvingMetrics.find((m) =>
+    m.metric.toLowerCase().includes(metricName.toLowerCase())
+  );
+  if (improving) {
+    return { direction: "up", changePercentage: improving.changePercentage };
+  }
+
+  const declining = trends.decliningMetrics.find((m) =>
+    m.metric.toLowerCase().includes(metricName.toLowerCase())
+  );
+  if (declining) {
+    return { direction: "down", changePercentage: declining.changePercentage };
+  }
+
+  return { direction: "stable", changePercentage: 0 };
+}
+
+function TrendIndicator({
+  direction,
+  changePercentage,
+}: {
+  direction: TrendDirection;
+  changePercentage: number;
+}) {
+  if (direction === null || direction === "stable") {
+    return null;
+  }
+
+  const isPositive = direction === "up";
+  const Icon = isPositive ? TrendingUp : TrendingUp;
+
+  return (
+    <div
+      className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium ${
+        isPositive
+          ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400"
+          : "bg-rose-100 text-rose-700 dark:bg-rose-950/40 dark:text-rose-400"
+      }`}
+    >
+      <Icon
+        className={`h-3 w-3 ${isPositive ? "" : "rotate-180"}`}
+        strokeWidth={2.5}
+      />
+      <span>{Math.abs(changePercentage).toFixed(0)}%</span>
+    </div>
+  );
+}
+
+function getConsistencyLevel(score: number): {
+  label: string;
+  color: string;
+  bgColor: string;
+} {
+  if (score >= 75) {
+    return {
+      label: "High Consistency",
+      color: "text-emerald-700 dark:text-emerald-400",
+      bgColor: "bg-emerald-100 dark:bg-emerald-950/40",
+    };
+  }
+  if (score >= 50) {
+    return {
+      label: "Moderate Consistency",
+      color: "text-amber-700 dark:text-amber-400",
+      bgColor: "bg-amber-100 dark:bg-amber-950/40",
+    };
+  }
+  return {
+    label: "Variable Performance",
+    color: "text-rose-700 dark:text-rose-400",
+    bgColor: "bg-rose-100 dark:bg-rose-950/40",
+  };
+}
+
+function generateInsights(stat: ComparisonStats): ImpactInsight[] {
+  const insights: ImpactInsight[] = [];
+  const { aggregated } = stat;
+
+  // First Pick insights
+  if (aggregated.firstPickPercentage > 30) {
+    insights.push({
+      type: "strength",
+      title: "Strong Fight Initiator",
+      description: `Gets the opening kill in ${aggregated.firstPickPercentage.toFixed(1)}% of fights. This player excels at creating early advantages.`,
+      metric: `${aggregated.firstPickPercentage.toFixed(1)}%`,
+      icon: Crosshair,
+    });
+  }
+
+  // Consistency insights
+  if (aggregated.consistencyScore > 70) {
+    insights.push({
+      type: "strength",
+      title: "Reliable Performer",
+      description:
+        "Maintains consistent performance across different map types and matchups. Low variance in key metrics.",
+      metric: `${aggregated.consistencyScore.toFixed(0)}/100`,
+      icon: TrendingUp,
+    });
+  } else if (aggregated.consistencyScore < 50) {
+    insights.push({
+      type: "consideration",
+      title: "Context-Dependent Performance",
+      description:
+        "Performance varies significantly across maps. Consider map/matchup context when evaluating.",
+      metric: `${aggregated.consistencyScore.toFixed(0)}/100`,
+      icon: TrendingUp,
+    });
+  }
+
+  // Ultimate efficiency
+  if (aggregated.killsPerUltimate > 2.5) {
+    insights.push({
+      type: "strength",
+      title: "High Ultimate Impact",
+      description: `Averages ${aggregated.killsPerUltimate.toFixed(1)} eliminations per ultimate. Makes ult usage count.`,
+      metric: `${aggregated.killsPerUltimate.toFixed(1)} K/Ult`,
+      icon: Zap,
+    });
+  }
+
+  // Fight reversal
+  if (aggregated.fightReversalPercentage > 20) {
+    insights.push({
+      type: "strength",
+      title: "Clutch Performer",
+      description: `Turns around ${aggregated.fightReversalPercentage.toFixed(1)}% of losing fights. Strong under pressure.`,
+      metric: `${aggregated.fightReversalPercentage.toFixed(1)}%`,
+      icon: Shield,
+    });
+  }
+
+  // MVP performance
+  if (aggregated.mapMvpRate > 50) {
+    insights.push({
+      type: "strength",
+      title: "Consistent MVP",
+      description: `Named map MVP in ${aggregated.mapMvpRate.toFixed(1)}% of matches. High overall impact.`,
+      metric: `${aggregated.mapMvpRate.toFixed(1)}%`,
+      icon: Trophy,
+    });
+  }
+
+  // Fleta Deadlift (team impact)
+  if (aggregated.fletaDeadliftPercentage > 30) {
+    insights.push({
+      type: "strength",
+      title: "High Team Impact",
+      description: `Contributes ${aggregated.fletaDeadliftPercentage.toFixed(1)}% of team eliminations. Key damage dealer.`,
+      metric: `${aggregated.fletaDeadliftPercentage.toFixed(1)}%`,
+      icon: Flame,
+    });
+  }
+
+  // First death consideration
+  if (aggregated.firstDeathPercentage > 25) {
+    insights.push({
+      type: "consideration",
+      title: "Dies Early Frequently",
+      description: `First to die in ${aggregated.firstDeathPercentage.toFixed(1)}% of fights. Consider positioning and survival.`,
+      metric: `${aggregated.firstDeathPercentage.toFixed(1)}%`,
+      icon: Crosshair,
+    });
+  }
+
+  return insights;
+}
+
+export function ImpactMetricsView({ stats }: ImpactMetricsViewProps) {
+  const t = useTranslations("comparePage.impactMetrics");
+
+  return (
+    <div className="space-y-6">
+      {stats.map((playerStat) => {
+        const insights = generateInsights(playerStat);
+        const strengthInsights = insights.filter((i) => i.type === "strength");
+        const considerationInsights = insights.filter(
+          (i) => i.type === "consideration"
+        );
+        const consistency = getConsistencyLevel(
+          playerStat.aggregated.consistencyScore
+        );
+
+        return (
+          <Card
+            key={playerStat.playerName}
+            className="border-primary/20 from-primary/5 overflow-hidden bg-gradient-to-br via-transparent to-transparent"
+          >
+            <CardHeader className="from-primary/10 border-b bg-gradient-to-r to-transparent pb-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle className="text-3xl font-bold tracking-tight">
+                    {playerStat.playerName}
+                  </CardTitle>
+                  <div className="mt-2 flex items-center gap-3">
+                    <p className="text-muted-foreground text-sm">
+                      {t("subtitle", { count: playerStat.mapCount })}
+                    </p>
+                    {playerStat.trends && (
+                      <Badge variant="outline" className="gap-1 text-xs">
+                        <TrendingUp className="h-3 w-3" />
+                        Trends Available
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+                <div className={`rounded-2xl px-6 py-3 ${consistency.bgColor}`}>
+                  <p className="text-xs font-medium tracking-wider uppercase opacity-80">
+                    {t("consistency")}
+                  </p>
+                  <p className={`text-2xl font-bold ${consistency.color}`}>
+                    {consistency.label}
+                  </p>
+                </div>
+              </div>
+            </CardHeader>
+
+            <CardContent className="space-y-8 pt-6">
+              {/* One-glance summary */}
+              <div className="from-primary/5 grid gap-4 rounded-2xl border bg-gradient-to-br to-transparent p-6 md:grid-cols-3">
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
+                      <div className="bg-primary/10 rounded-lg p-2">
+                        <Award className="text-primary h-5 w-5" />
+                      </div>
+                      <p className="text-muted-foreground text-sm font-medium">
+                        {t("stats.mvpScore")}
+                      </p>
+                    </div>
+                    <TrendIndicator
+                      {...getTrendDirection("mvp", playerStat.trends)}
+                    />
+                  </div>
+                  <p className="font-mono text-3xl font-bold tabular-nums">
+                    {playerStat.aggregated.mvpScore.toFixed(1)}
+                  </p>
+                  <Progress
+                    value={(playerStat.aggregated.mvpScore / 15) * 100}
+                    className="h-2"
+                  />
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
+                      <div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-950/40">
+                        <Sparkles className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+                      </div>
+                      <p className="text-muted-foreground text-sm font-medium">
+                        {t("stats.firstPickRate")}
+                      </p>
+                    </div>
+                    <TrendIndicator
+                      {...getTrendDirection("first pick", playerStat.trends)}
+                    />
+                  </div>
+                  <p className="font-mono text-3xl font-bold tabular-nums">
+                    {playerStat.aggregated.firstPickPercentage.toFixed(1)}%
+                  </p>
+                  <Progress
+                    value={playerStat.aggregated.firstPickPercentage}
+                    className="h-2"
+                  />
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
+                      <div className="rounded-lg bg-violet-100 p-2 dark:bg-violet-950/40">
+                        <Zap className="h-5 w-5 text-violet-600 dark:text-violet-400" />
+                      </div>
+                      <p className="text-muted-foreground text-sm font-medium">
+                        {t("stats.killsPerUlt")}
+                      </p>
+                    </div>
+                    <TrendIndicator
+                      {...getTrendDirection("ultimate", playerStat.trends)}
+                    />
+                  </div>
+                  <p className="font-mono text-3xl font-bold tabular-nums">
+                    {playerStat.aggregated.killsPerUltimate.toFixed(1)}
+                  </p>
+                  <Progress
+                    value={(playerStat.aggregated.killsPerUltimate / 5) * 100}
+                    className="h-2"
+                  />
+                </div>
+              </div>
+
+              {/* Key strengths */}
+              {strengthInsights.length > 0 && (
+                <div className="space-y-4">
+                  <div className="flex items-center gap-2">
+                    <Star className="h-5 w-5 text-amber-500" />
+                    <h3 className="text-lg font-semibold">
+                      {t("keyStrengths")}
+                    </h3>
+                  </div>
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {strengthInsights.map((insight) => {
+                      const Icon = insight.icon;
+                      return (
+                        <div
+                          key={insight.title}
+                          className="group relative overflow-hidden rounded-xl border bg-gradient-to-br from-emerald-50/50 to-transparent p-4 transition-all hover:shadow-md dark:from-emerald-950/20"
+                        >
+                          <div className="flex items-start gap-3">
+                            <div className="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-950/40">
+                              <Icon className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+                            </div>
+                            <div className="flex-1 space-y-1">
+                              <div className="flex items-center justify-between">
+                                <h4 className="font-semibold">
+                                  {insight.title}
+                                </h4>
+                                {insight.metric && (
+                                  <Badge
+                                    variant="secondary"
+                                    className="bg-emerald-100 font-mono dark:bg-emerald-950/40"
+                                  >
+                                    {insight.metric}
+                                  </Badge>
+                                )}
+                              </div>
+                              <p className="text-muted-foreground text-sm leading-relaxed">
+                                {insight.description}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* Development areas */}
+              {considerationInsights.length > 0 && (
+                <div className="space-y-4">
+                  <div className="flex items-center gap-2">
+                    <TrendingUp className="h-5 w-5 text-amber-500" />
+                    <h3 className="text-lg font-semibold">
+                      {t("developmentAreas")}
+                    </h3>
+                  </div>
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {considerationInsights.map((insight) => {
+                      const Icon = insight.icon;
+                      return (
+                        <div
+                          key={insight.title}
+                          className="group relative overflow-hidden rounded-xl border bg-gradient-to-br from-amber-50/50 to-transparent p-4 transition-all hover:shadow-md dark:from-amber-950/20"
+                        >
+                          <div className="flex items-start gap-3">
+                            <div className="rounded-lg bg-amber-100 p-2 dark:bg-amber-950/40">
+                              <Icon className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+                            </div>
+                            <div className="flex-1 space-y-1">
+                              <div className="flex items-center justify-between">
+                                <h4 className="font-semibold">
+                                  {insight.title}
+                                </h4>
+                                {insight.metric && (
+                                  <Badge
+                                    variant="secondary"
+                                    className="bg-amber-100 font-mono dark:bg-amber-950/40"
+                                  >
+                                    {insight.metric}
+                                  </Badge>
+                                )}
+                              </div>
+                              <p className="text-muted-foreground text-sm leading-relaxed">
+                                {insight.description}
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              {/* Detailed impact metrics grid */}
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">
+                  {t("detailedMetrics")}
+                </h3>
+                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+                  {[
+                    {
+                      label: t("stats.firstPicks"),
+                      value: playerStat.aggregated.firstPickPercentage,
+                      valuePer10: playerStat.aggregated.firstPicksPer10,
+                      format: "percentage" as const,
+                      color: "emerald",
+                      icon: Crosshair,
+                    },
+                    {
+                      label: t("stats.firstDeaths"),
+                      value: playerStat.aggregated.firstDeathPercentage,
+                      valuePer10: playerStat.aggregated.firstDeathsPer10,
+                      format: "percentage" as const,
+                      color: "rose",
+                      icon: Shield,
+                      reverse: true,
+                    },
+                    {
+                      label: t("stats.fightReversal"),
+                      value: playerStat.aggregated.fightReversalPercentage,
+                      format: "percentage" as const,
+                      color: "blue",
+                      icon: Shield,
+                    },
+                    {
+                      label: t("stats.fletaDeadlift"),
+                      value: playerStat.aggregated.fletaDeadliftPercentage,
+                      format: "percentage" as const,
+                      color: "orange",
+                      icon: Flame,
+                    },
+                    {
+                      label: t("stats.mapMvpRate"),
+                      value: playerStat.aggregated.mapMvpRate,
+                      format: "percentage" as const,
+                      color: "amber",
+                      icon: Trophy,
+                    },
+                  ].map((metric) => {
+                    const trend = getTrendDirection(
+                      metric.label,
+                      playerStat.trends
+                    );
+                    return (
+                      <div
+                        key={metric.label}
+                        className={`rounded-xl border p-4 transition-all hover:shadow-md bg-${metric.color}-50/30 dark:bg-${metric.color}-950/10 hover:bg-${metric.color}-50/50 dark:hover:bg-${metric.color}-950/20`}
+                      >
+                        <div className="mb-3 flex items-center justify-between">
+                          <div
+                            className={`rounded-lg p-2 bg-${metric.color}-100 dark:bg-${metric.color}-950/40`}
+                          >
+                            <metric.icon
+                              className={`h-4 w-4 text-${metric.color}-600 dark:text-${metric.color}-400`}
+                            />
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <TrendIndicator
+                              direction={trend.direction}
+                              changePercentage={trend.changePercentage}
+                            />
+                            {metric.valuePer10 && (
+                              <Badge
+                                variant="outline"
+                                className="font-mono text-xs"
+                              >
+                                {metric.valuePer10.toFixed(1)}/10
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                        <p className="text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase">
+                          {metric.label}
+                        </p>
+                        <p className="font-mono text-2xl font-bold tabular-nums">
+                          {metric.format === "percentage"
+                            ? `${metric.value.toFixed(1)}%`
+                            : metric.value.toFixed(1)}
+                        </p>
+                        <Progress
+                          value={
+                            metric.reverse ? 100 - metric.value : metric.value
+                          }
+                          className={`mt-3 h-1.5 bg-${metric.color}-100 dark:bg-${metric.color}-950/40`}
+                        />
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/components/compare/map-group-comparison-selector.tsx b/src/components/compare/map-group-comparison-selector.tsx
new file mode 100644
index 000000000..192c60ba7
--- /dev/null
+++ b/src/components/compare/map-group-comparison-selector.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { FormattedMapGroup } from "@/types/map-group";
+import { useQuery } from "@tanstack/react-query";
+import { Check, FolderCog, FolderOpen, Loader2 } from "lucide-react";
+import type { Route } from "next";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useState } from "react";
+
+type MapGroupComparisonSelectorProps = {
+  teamId: number;
+  onSelect: (groupIds: number[]) => void;
+};
+
+async function fetchMapGroups(teamId: number): Promise<FormattedMapGroup[]> {
+  const response = await fetch(`/api/compare/map-groups?teamId=${teamId}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch map groups");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    groups: FormattedMapGroup[];
+  };
+  return data.groups;
+}
+
+export function MapGroupComparisonSelector({
+  teamId,
+  onSelect,
+}: MapGroupComparisonSelectorProps) {
+  const t = useTranslations("comparePage.mapGroupSelector");
+  const [selectedGroups, setSelectedGroups] = useState<number[]>([]);
+
+  const { data: mapGroups, isLoading } = useQuery({
+    queryKey: ["mapGroups", teamId],
+    queryFn: () => fetchMapGroups(teamId),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  function handleToggleGroup(groupId: number) {
+    setSelectedGroups((prev) => {
+      if (prev.includes(groupId)) {
+        return prev.filter((id) => id !== groupId);
+      }
+      // Limit to 2 groups for comparison
+      if (prev.length >= 2) {
+        return [prev[1], groupId];
+      }
+      return [...prev, groupId];
+    });
+  }
+
+  function handleCompare() {
+    if (selectedGroups.length > 0) {
+      onSelect(selectedGroups);
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <Loader2 className="text-muted-foreground size-6 animate-spin" />
+      </div>
+    );
+  }
+
+  if (!mapGroups || mapGroups.length === 0) {
+    return (
+      <div className="space-y-4 text-center">
+        <div className="bg-muted/50 mx-auto flex size-16 items-center justify-center rounded-full">
+          <FolderOpen className="text-muted-foreground size-8" />
+        </div>
+        <div>
+          <h4 className="mb-1 text-sm font-semibold">{t("noGroups.title")}</h4>
+          <p className="text-muted-foreground text-xs">
+            {t("noGroups.description")}
+          </p>
+        </div>
+        <Link href={`/${teamId}/map-groups` as Route}>
+          <Button size="sm" variant="outline">
+            <FolderCog className="mr-2 size-4" />
+            {t("noGroups.createButton")}
+          </Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2 text-left">
+        <h4 className="text-sm font-semibold">{t("title")}</h4>
+        <p className="text-muted-foreground text-xs">{t("description")}</p>
+      </div>
+
+      <div className="max-h-[300px] space-y-2 overflow-y-auto">
+        {mapGroups.map((group) => {
+          const isSelected = selectedGroups.includes(group.id);
+          return (
+            <Card
+              key={group.id}
+              className={cn(
+                "hover:bg-muted/50 cursor-pointer transition-colors",
+                isSelected && "bg-primary/5 border-primary ring-primary ring-1"
+              )}
+              onClick={() => handleToggleGroup(group.id)}
+            >
+              <CardContent className="flex items-start gap-3 p-4">
+                <div
+                  className={cn(
+                    "border-primary mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm border",
+                    isSelected
+                      ? "bg-primary text-primary-foreground"
+                      : "opacity-50 [&_svg]:invisible"
+                  )}
+                >
+                  <Check className="size-3.5 stroke-[3]" />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="mb-1 flex items-center gap-2">
+                    <span className="truncate font-medium">{group.name}</span>
+                    <Badge
+                      variant="secondary"
+                      className="shrink-0 text-xs tabular-nums"
+                    >
+                      {group.mapCount}
+                    </Badge>
+                  </div>
+                  {group.description && (
+                    <p className="text-muted-foreground line-clamp-2 text-xs">
+                      {group.description}
+                    </p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      <div className="flex items-center justify-between gap-2 text-left">
+        <p className="text-muted-foreground text-xs">
+          {selectedGroups.length === 0
+            ? t("hint.selectGroups")
+            : selectedGroups.length === 1
+              ? t("hint.selectOneMore")
+              : t("hint.readyToCompare")}
+        </p>
+        <Button
+          onClick={handleCompare}
+          disabled={selectedGroups.length === 0}
+          size="sm"
+        >
+          {t("compareButton")}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/compare/map-group-manager.tsx b/src/components/compare/map-group-manager.tsx
new file mode 100644
index 000000000..fefe51c49
--- /dev/null
+++ b/src/components/compare/map-group-manager.tsx
@@ -0,0 +1,512 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type { FormattedMapGroup } from "@/types/map-group";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  FolderPlus,
+  Loader2,
+  MoreVertical,
+  Pencil,
+  Trash2,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+type MapGroupManagerProps = {
+  teamId: number;
+  availableMaps: {
+    id: number;
+    name: string;
+    scrimName: string;
+  }[];
+};
+
+type MapGroupFormData = {
+  name: string;
+  description: string;
+  category: string;
+  mapIds: number[];
+};
+
+async function fetchMapGroups(teamId: number): Promise<FormattedMapGroup[]> {
+  const response = await fetch(`/api/compare/map-groups?teamId=${teamId}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch map groups");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    groups: FormattedMapGroup[];
+  };
+  return data.groups;
+}
+
+async function createMapGroup(
+  teamId: number,
+  formData: MapGroupFormData
+): Promise<FormattedMapGroup> {
+  const response = await fetch("/api/compare/map-groups", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      ...formData,
+      teamId,
+    }),
+  });
+  if (!response.ok) {
+    const error = (await response.json()) as { error: string };
+    throw new Error(error.error || "Failed to create map group");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    group: FormattedMapGroup;
+  };
+  return data.group;
+}
+
+async function updateMapGroup(
+  groupId: number,
+  formData: Partial<MapGroupFormData>
+): Promise<FormattedMapGroup> {
+  const response = await fetch(`/api/compare/map-groups/${groupId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(formData),
+  });
+  if (!response.ok) {
+    const error = (await response.json()) as { error: string };
+    throw new Error(error.error || "Failed to update map group");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    group: FormattedMapGroup;
+  };
+  return data.group;
+}
+
+async function deleteMapGroup(groupId: number): Promise<void> {
+  const response = await fetch(`/api/compare/map-groups/${groupId}`, {
+    method: "DELETE",
+  });
+  if (!response.ok) {
+    const error = (await response.json()) as { error: string };
+    throw new Error(error.error || "Failed to delete map group");
+  }
+}
+
+function MapGroupForm({
+  teamId,
+  availableMaps,
+  onSuccess,
+  editGroup,
+}: {
+  teamId: number;
+  availableMaps: MapGroupManagerProps["availableMaps"];
+  onSuccess: () => void;
+  editGroup?: FormattedMapGroup;
+}) {
+  const queryClient = useQueryClient();
+
+  const [formData, setFormData] = useState<MapGroupFormData>({
+    name: editGroup?.name ?? "",
+    description: editGroup?.description ?? "",
+    category: editGroup?.category ?? "",
+    mapIds: editGroup?.mapIds ?? [],
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () => createMapGroup(teamId, formData),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["mapGroups", teamId] });
+      toast.success("Map group created", {
+        description: "Your map group has been created successfully.",
+      });
+      onSuccess();
+    },
+    onError: (error: Error) => {
+      toast.error("Error", {
+        description: error.message,
+      });
+    },
+  });
+
+  const updateMutation = useMutation({
+    mutationFn: () => updateMapGroup(editGroup!.id, formData),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["mapGroups", teamId] });
+      toast.success("Map group updated", {
+        description: "Your map group has been updated successfully.",
+      });
+      onSuccess();
+    },
+    onError: (error: Error) => {
+      toast.error("Error", {
+        description: error.message,
+      });
+    },
+  });
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (editGroup) {
+      updateMutation.mutate();
+    } else {
+      createMutation.mutate();
+    }
+  }
+
+  function toggleMapSelection(mapId: number) {
+    setFormData((prev) => ({
+      ...prev,
+      mapIds: prev.mapIds.includes(mapId)
+        ? prev.mapIds.filter((id) => id !== mapId)
+        : [...prev.mapIds, mapId],
+    }));
+  }
+
+  const isLoading = createMutation.isPending || updateMutation.isPending;
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="name">
+          Group Name<span className="text-destructive ml-1">*</span>
+        </Label>
+        <Input
+          id="name"
+          placeholder="e.g., Brawl Maps, Open Maps"
+          value={formData.name}
+          onChange={(e) =>
+            setFormData((prev) => ({ ...prev, name: e.target.value }))
+          }
+          required
+          disabled={isLoading}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          placeholder="Optional description for this group"
+          value={formData.description}
+          onChange={(e) =>
+            setFormData((prev) => ({ ...prev, description: e.target.value }))
+          }
+          disabled={isLoading}
+          rows={2}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label htmlFor="category">Category</Label>
+        <Input
+          id="category"
+          placeholder="e.g., Playstyle, Map Type"
+          value={formData.category}
+          onChange={(e) =>
+            setFormData((prev) => ({ ...prev, category: e.target.value }))
+          }
+          disabled={isLoading}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <Label>
+          Select Maps<span className="text-destructive ml-1">*</span>
+        </Label>
+        <div className="max-h-[300px] overflow-y-auto rounded-lg border">
+          {availableMaps.length === 0 ? (
+            <div className="text-muted-foreground p-4 text-center text-sm">
+              No maps available
+            </div>
+          ) : (
+            <div className="divide-y">
+              {availableMaps.map((map) => (
+                <label
+                  key={map.id}
+                  className="hover:bg-muted/50 flex cursor-pointer items-center gap-3 p-3 transition-colors"
+                >
+                  <input
+                    type="checkbox"
+                    checked={formData.mapIds.includes(map.id)}
+                    onChange={() => toggleMapSelection(map.id)}
+                    disabled={isLoading}
+                    className="text-primary focus:ring-primary size-4 rounded border-gray-300"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium">
+                      {map.name}
+                    </div>
+                    <div className="text-muted-foreground truncate text-xs">
+                      {map.scrimName}
+                    </div>
+                  </div>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+        {formData.mapIds.length > 0 && (
+          <p className="text-muted-foreground text-xs">
+            {formData.mapIds.length} map
+            {formData.mapIds.length !== 1 ? "s" : ""} selected
+          </p>
+        )}
+      </div>
+
+      <DialogFooter>
+        <Button
+          type="submit"
+          disabled={isLoading || formData.mapIds.length === 0}
+        >
+          {isLoading && <Loader2 className="mr-2 size-4 animate-spin" />}
+          {editGroup ? "Update Group" : "Create Group"}
+        </Button>
+      </DialogFooter>
+    </form>
+  );
+}
+
+export function MapGroupManager({
+  teamId,
+  availableMaps,
+}: MapGroupManagerProps) {
+  const queryClient = useQueryClient();
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [editingGroup, setEditingGroup] = useState<FormattedMapGroup | null>(
+    null
+  );
+  const [deletingGroup, setDeletingGroup] = useState<FormattedMapGroup | null>(
+    null
+  );
+
+  const { data: mapGroups, isLoading } = useQuery({
+    queryKey: ["mapGroups", teamId],
+    queryFn: () => fetchMapGroups(teamId),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (groupId: number) => deleteMapGroup(groupId),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["mapGroups", teamId] });
+      toast.success("Map group deleted", {
+        description: "The map group has been deleted successfully.",
+      });
+      setDeletingGroup(null);
+    },
+    onError: (error: Error) => {
+      toast.error("Error", {
+        description: error.message,
+      });
+    },
+  });
+
+  return (
+    <Card>
+      <CardHeader className="border-b">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-lg">Map Groups</CardTitle>
+            <p className="text-muted-foreground mt-1 text-sm">
+              Create custom map groups to organize and compare performance
+            </p>
+          </div>
+          <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm">
+                <FolderPlus className="mr-2 size-4" />
+                New Group
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="max-w-2xl">
+              <DialogHeader>
+                <DialogTitle>Create Map Group</DialogTitle>
+                <DialogDescription>
+                  Group maps together to analyze performance across different
+                  contexts
+                </DialogDescription>
+              </DialogHeader>
+              <MapGroupForm
+                teamId={teamId}
+                availableMaps={availableMaps}
+                onSuccess={() => setIsCreateOpen(false)}
+              />
+            </DialogContent>
+          </Dialog>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-6">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="text-muted-foreground size-6 animate-spin" />
+          </div>
+        ) : !mapGroups || mapGroups.length === 0 ? (
+          <div className="py-12 text-center">
+            <div className="bg-muted/50 mx-auto mb-4 flex size-16 items-center justify-center rounded-full">
+              <FolderPlus className="text-muted-foreground size-8" />
+            </div>
+            <h3 className="mb-2 text-base font-semibold">No map groups yet</h3>
+            <p className="text-muted-foreground mx-auto mb-4 max-w-sm text-sm text-pretty">
+              Create your first map group to organize maps and compare
+              performance across different contexts
+            </p>
+            <Button onClick={() => setIsCreateOpen(true)} size="sm">
+              <FolderPlus className="mr-2 size-4" />
+              Create Map Group
+            </Button>
+          </div>
+        ) : (
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {mapGroups.map((group) => (
+              <Card key={group.id} className="relative overflow-hidden">
+                <CardHeader className="pb-3">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0 flex-1">
+                      <CardTitle className="truncate text-base">
+                        {group.name}
+                      </CardTitle>
+                      {group.category && (
+                        <p className="text-muted-foreground mt-1 truncate text-xs">
+                          {group.category}
+                        </p>
+                      )}
+                    </div>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="size-8 p-0"
+                          aria-label="Group actions"
+                        >
+                          <MoreVertical className="size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => setEditingGroup(group)}
+                        >
+                          <Pencil className="mr-2 size-4" />
+                          Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => setDeletingGroup(group)}
+                          className="text-destructive focus:text-destructive"
+                        >
+                          <Trash2 className="mr-2 size-4" />
+                          Delete
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  {group.description && (
+                    <p className="text-muted-foreground line-clamp-2 text-sm text-pretty">
+                      {group.description}
+                    </p>
+                  )}
+                  <div className="flex items-center gap-2 text-sm">
+                    <span className="text-muted-foreground">Maps:</span>
+                    <span className="font-medium tabular-nums">
+                      {group.mapCount}
+                    </span>
+                  </div>
+                  <div className="text-muted-foreground text-xs">
+                    Created by {group.createdBy}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+
+        {/* Edit Dialog */}
+        <Dialog
+          open={!!editingGroup}
+          onOpenChange={() => setEditingGroup(null)}
+        >
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Edit Map Group</DialogTitle>
+              <DialogDescription>
+                Update the map group details and map selection
+              </DialogDescription>
+            </DialogHeader>
+            {editingGroup && (
+              <MapGroupForm
+                teamId={teamId}
+                availableMaps={availableMaps}
+                onSuccess={() => setEditingGroup(null)}
+                editGroup={editingGroup}
+              />
+            )}
+          </DialogContent>
+        </Dialog>
+
+        {/* Delete Confirmation */}
+        <AlertDialog
+          open={!!deletingGroup}
+          onOpenChange={() => setDeletingGroup(null)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete Map Group</AlertDialogTitle>
+              <AlertDialogDescription>
+                Are you sure you want to delete &quot;{deletingGroup?.name}
+                &quot;? This action cannot be undone.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction
+                onClick={() => {
+                  if (deletingGroup) {
+                    deleteMutation.mutate(deletingGroup.id);
+                  }
+                }}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {deleteMutation.isPending && (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                )}
+                Delete
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/compare/map-group-selector.tsx b/src/components/compare/map-group-selector.tsx
new file mode 100644
index 000000000..91fe2cab5
--- /dev/null
+++ b/src/components/compare/map-group-selector.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import type { FormattedMapGroup } from "@/types/map-group";
+import { useQuery } from "@tanstack/react-query";
+import { Check, ChevronDown, FolderOpen, Loader2, X } from "lucide-react";
+import { useState } from "react";
+
+type MapGroupSelectorProps = {
+  teamId: number;
+  value: number[];
+  onChange: (groupIds: number[]) => void;
+  multiSelect?: boolean;
+  placeholder?: string;
+};
+
+async function fetchMapGroups(teamId: number): Promise<FormattedMapGroup[]> {
+  const response = await fetch(`/api/compare/map-groups?teamId=${teamId}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch map groups");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    groups: FormattedMapGroup[];
+  };
+  return data.groups;
+}
+
+export function MapGroupSelector({
+  teamId,
+  value,
+  onChange,
+  multiSelect = false,
+  placeholder = "Select map group...",
+}: MapGroupSelectorProps) {
+  const [open, setOpen] = useState(false);
+
+  const { data: mapGroups, isLoading } = useQuery({
+    queryKey: ["mapGroups", teamId],
+    queryFn: () => fetchMapGroups(teamId),
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const selectedGroups = mapGroups?.filter((group) => value.includes(group.id));
+
+  function handleSelect(groupId: number) {
+    if (multiSelect) {
+      const newValue = value.includes(groupId)
+        ? value.filter((id) => id !== groupId)
+        : [...value, groupId];
+      onChange(newValue);
+    } else {
+      onChange(value.includes(groupId) ? [] : [groupId]);
+      setOpen(false);
+    }
+  }
+
+  function handleRemove(groupId: number, e?: React.MouseEvent) {
+    e?.stopPropagation();
+    onChange(value.filter((id) => id !== groupId));
+  }
+
+  function handleClearAll(e: React.MouseEvent) {
+    e.stopPropagation();
+    onChange([]);
+  }
+
+  // Group by category
+  const groupsByCategory = mapGroups?.reduce(
+    (acc, group) => {
+      const category = group.category ?? "Uncategorized";
+      if (!acc[category]) {
+        acc[category] = [];
+      }
+      acc[category].push(group);
+      return acc;
+    },
+    {} as Record<string, FormattedMapGroup[]>
+  );
+
+  const categories = groupsByCategory
+    ? Object.keys(groupsByCategory).sort((a, b) => {
+        // Sort "Uncategorized" last
+        if (a === "Uncategorized") return 1;
+        if (b === "Uncategorized") return -1;
+        return a.localeCompare(b);
+      })
+    : [];
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-auto min-h-10 w-full justify-between"
+        >
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <FolderOpen className="text-muted-foreground size-4 shrink-0" />
+            {selectedGroups && selectedGroups.length > 0 ? (
+              <div className="flex flex-wrap gap-1">
+                {selectedGroups.map((group) => (
+                  <Badge
+                    key={group.id}
+                    variant="secondary"
+                    className="gap-1 text-xs"
+                  >
+                    {group.name}
+                    {multiSelect && (
+                      <X
+                        className="hover:text-destructive size-3 cursor-pointer"
+                        onClick={(e) => handleRemove(group.id, e)}
+                      />
+                    )}
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <span className="text-muted-foreground truncate">
+                {placeholder}
+              </span>
+            )}
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {selectedGroups && selectedGroups.length > 0 && (
+              <X
+                className="text-muted-foreground hover:text-foreground size-4 cursor-pointer"
+                onClick={handleClearAll}
+              />
+            )}
+            <ChevronDown className="text-muted-foreground size-4" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[400px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search map groups..." />
+          <CommandList>
+            <CommandEmpty>
+              {isLoading ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="text-muted-foreground size-5 animate-spin" />
+                </div>
+              ) : (
+                <div className="py-6 text-center">
+                  <p className="text-muted-foreground text-sm">
+                    No map groups found
+                  </p>
+                </div>
+              )}
+            </CommandEmpty>
+            {categories.map((category, idx) => (
+              <div key={category}>
+                <CommandGroup heading={category}>
+                  {groupsByCategory![category].map((group) => {
+                    const isSelected = value.includes(group.id);
+                    return (
+                      <CommandItem
+                        key={group.id}
+                        value={`${group.name}-${group.id}`}
+                        onSelect={() => handleSelect(group.id)}
+                        className="cursor-pointer"
+                      >
+                        <div
+                          className={cn(
+                            "border-primary mr-2 flex size-4 items-center justify-center rounded-sm border",
+                            isSelected
+                              ? "bg-primary text-primary-foreground"
+                              : "opacity-50 [&_svg]:invisible"
+                          )}
+                        >
+                          <Check className="size-3" />
+                        </div>
+                        <div className="min-w-0 flex-1">
+                          <div className="truncate text-sm font-medium">
+                            {group.name}
+                          </div>
+                          <div className="text-muted-foreground flex items-center gap-2 text-xs">
+                            <span className="tabular-nums">
+                              {group.mapCount} map
+                              {group.mapCount !== 1 ? "s" : ""}
+                            </span>
+                            {group.description && (
+                              <>
+                                <span>·</span>
+                                <span className="truncate">
+                                  {group.description}
+                                </span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+                {idx < categories.length - 1 && <CommandSeparator />}
+              </div>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/compare/player-selector.tsx b/src/components/compare/player-selector.tsx
new file mode 100644
index 000000000..89313092f
--- /dev/null
+++ b/src/components/compare/player-selector.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { useQuery } from "@tanstack/react-query";
+import { Check, ChevronsUpDown, User } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+type PlayerSelectorProps = {
+  teamId: number;
+  mapIds: number[];
+  value: string | null;
+  onChange: (player: string | null) => void;
+};
+
+type Player = {
+  name: string;
+  id: number;
+  mapCount: number;
+};
+
+async function fetchTeamPlayers(
+  teamId: number,
+  mapIds: number[]
+): Promise<Player[]> {
+  const params = new URLSearchParams({
+    teamId: teamId.toString(),
+  });
+
+  if (mapIds.length > 0) {
+    params.set("mapIds", JSON.stringify(mapIds));
+  }
+
+  const response = await fetch(`/api/compare/players?${params.toString()}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch team players");
+  }
+  const data = (await response.json()) as { players: Player[] };
+  return data.players;
+}
+
+export function PlayerSelector({
+  teamId,
+  mapIds,
+  value,
+  onChange,
+}: PlayerSelectorProps) {
+  const t = useTranslations("comparePage.playerSelector");
+  const [open, setOpen] = useState(false);
+
+  const { data: players, isLoading } = useQuery({
+    queryKey: ["team-players", teamId, mapIds],
+    queryFn: () => fetchTeamPlayers(teamId, mapIds),
+    staleTime: 10 * 60 * 1000,
+  });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-auto min-h-9 w-full justify-between px-3 py-1.5"
+        >
+          <div className="flex items-center gap-2">
+            <User className="h-4 w-4 opacity-50" />
+            <span className="flex-1 overflow-hidden text-left">
+              {value ?? t("placeholder")}
+            </span>
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[280px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={t("search")} />
+          <CommandEmpty>
+            {isLoading ? t("loading") : t("noPlayerFound")}
+          </CommandEmpty>
+          <CommandGroup className="max-h-[300px] overflow-y-auto">
+            {players?.map((player) => (
+              <CommandItem
+                key={player.name}
+                value={player.name}
+                onSelect={() => {
+                  onChange(player.name);
+                  setOpen(false);
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === player.name ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                <div className="flex flex-1 items-center justify-between">
+                  <span>{player.name}</span>
+                  <span className="text-muted-foreground text-xs">
+                    {t("mapCount", { count: player.mapCount })}
+                  </span>
+                </div>
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/src/components/compare/side-by-side-view.tsx b/src/components/compare/side-by-side-view.tsx
new file mode 100644
index 000000000..68ab0b3b7
--- /dev/null
+++ b/src/components/compare/side-by-side-view.tsx
@@ -0,0 +1,237 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { ComparisonStats } from "@/data/comparison-dto";
+import { ArrowDown, ArrowUp, Minus } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type SideBySideViewProps = {
+  stats: ComparisonStats;
+};
+
+type StatRow = {
+  label: string;
+  map1Value: number;
+  map2Value: number;
+  format: "number" | "per10" | "time";
+  reverseColors?: boolean;
+};
+
+function formatStat(
+  value: number,
+  format: "number" | "per10" | "time"
+): string {
+  if (format === "time") {
+    const hours = Math.floor(value / 3600);
+    const minutes = Math.floor((value % 3600) / 60);
+    const seconds = Math.floor(value % 60);
+    return hours > 0
+      ? `${hours}h ${minutes}m ${seconds}s`
+      : `${minutes}m ${seconds}s`;
+  }
+  if (format === "per10") {
+    return value.toFixed(2);
+  }
+  return value.toLocaleString();
+}
+
+function getComparisonIndicator(
+  value1: number,
+  value2: number,
+  reverseColors = false
+) {
+  const diff = value2 - value1;
+  const percentChange = value1 !== 0 ? (diff / value1) * 100 : 0;
+
+  if (Math.abs(percentChange) < 1) {
+    return {
+      icon: Minus,
+      color: "text-muted-foreground",
+      bgColor: "bg-muted",
+    };
+  }
+
+  const isImprovement = reverseColors ? diff < 0 : diff > 0;
+
+  return {
+    icon: diff > 0 ? ArrowUp : ArrowDown,
+    color: isImprovement
+      ? "text-green-600 dark:text-green-400"
+      : "text-red-600 dark:text-red-400",
+    bgColor: isImprovement
+      ? "bg-green-100 dark:bg-green-950"
+      : "bg-red-100 dark:bg-red-950",
+  };
+}
+
+export function SideBySideView({ stats }: SideBySideViewProps) {
+  const t = useTranslations("comparePage.sideBySide");
+
+  if (stats.perMapBreakdown.length !== 2) {
+    return (
+      <Card>
+        <CardContent className="p-8 text-center">
+          <p className="text-muted-foreground">{t("requiresTwoMaps")}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const [map1, map2] = stats.perMapBreakdown;
+
+  const statRows: StatRow[] = [
+    {
+      label: t("stats.eliminations"),
+      map1Value: map1.stats.eliminations ?? 0,
+      map2Value: map2.stats.eliminations ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.deaths"),
+      map1Value: map1.stats.deaths ?? 0,
+      map2Value: map2.stats.deaths ?? 0,
+      format: "number",
+      reverseColors: true,
+    },
+    {
+      label: t("stats.damage"),
+      map1Value: map1.stats.all_damage_dealt ?? 0,
+      map2Value: map2.stats.all_damage_dealt ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.healing"),
+      map1Value: map1.stats.healing_dealt ?? 0,
+      map2Value: map2.stats.healing_dealt ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.mitigated"),
+      map1Value: map1.stats.damage_blocked ?? 0,
+      map2Value: map2.stats.damage_blocked ?? 0,
+      format: "number",
+    },
+    {
+      label: t("stats.eliminationsPer10"),
+      map1Value: map1.stats.eliminationsPer10 ?? 0,
+      map2Value: map2.stats.eliminationsPer10 ?? 0,
+      format: "per10",
+    },
+    {
+      label: t("stats.deathsPer10"),
+      map1Value: map1.stats.deathsPer10 ?? 0,
+      map2Value: map2.stats.deathsPer10 ?? 0,
+      format: "per10",
+      reverseColors: true,
+    },
+    {
+      label: t("stats.damagePer10"),
+      map1Value: map1.stats.allDamagePer10 ?? 0,
+      map2Value: map2.stats.allDamagePer10 ?? 0,
+      format: "per10",
+    },
+    {
+      label: t("stats.healingPer10"),
+      map1Value: map1.stats.healingDealtPer10 ?? 0,
+      map2Value: map2.stats.healingDealtPer10 ?? 0,
+      format: "per10",
+    },
+    {
+      label: t("stats.mitigatedPer10"),
+      map1Value: map1.stats.damageBlockedPer10 ?? 0,
+      map2Value: map2.stats.damageBlockedPer10 ?? 0,
+      format: "per10",
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Map Headers */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-center">{map1.mapName}</CardTitle>
+            <div className="flex items-center justify-center gap-2 pt-2">
+              <Badge variant="outline">
+                {new Date(map1.date).toLocaleDateString()}
+              </Badge>
+              {map1.heroes.length > 0 && (
+                <Badge variant="secondary">{map1.heroes.join(", ")}</Badge>
+              )}
+            </div>
+          </CardHeader>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-center">{map2.mapName}</CardTitle>
+            <div className="flex items-center justify-center gap-2 pt-2">
+              <Badge variant="outline">
+                {new Date(map2.date).toLocaleDateString()}
+              </Badge>
+              {map2.heroes.length > 0 && (
+                <Badge variant="secondary">{map2.heroes.join(", ")}</Badge>
+              )}
+            </div>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Stats Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("statComparison")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="divide-border divide-y">
+            {statRows.map((row) => {
+              const indicator = getComparisonIndicator(
+                row.map1Value,
+                row.map2Value,
+                row.reverseColors
+              );
+              const Icon = indicator.icon;
+
+              return (
+                <div
+                  key={row.label}
+                  className="grid grid-cols-[1fr_auto_1fr_auto_1fr] items-center gap-4 py-4"
+                >
+                  {/* Map 1 Value */}
+                  <div className="text-right">
+                    <span className="font-mono text-lg font-semibold tabular-nums">
+                      {formatStat(row.map1Value, row.format)}
+                    </span>
+                  </div>
+
+                  {/* Indicator */}
+                  <div className={`rounded-full p-2 ${indicator.bgColor}`}>
+                    <Icon className={`h-4 w-4 ${indicator.color}`} />
+                  </div>
+
+                  {/* Stat Label */}
+                  <div className="text-center">
+                    <span className="text-sm font-medium">{row.label}</span>
+                  </div>
+
+                  {/* Indicator */}
+                  <div className={`rounded-full p-2 ${indicator.bgColor}`}>
+                    <Icon className={`h-4 w-4 ${indicator.color}`} />
+                  </div>
+
+                  {/* Map 2 Value */}
+                  <div className="text-left">
+                    <span className="font-mono text-lg font-semibold tabular-nums">
+                      {formatStat(row.map2Value, row.format)}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/compare/team-comparison-view.tsx b/src/components/compare/team-comparison-view.tsx
new file mode 100644
index 000000000..1f82e8be2
--- /dev/null
+++ b/src/components/compare/team-comparison-view.tsx
@@ -0,0 +1,317 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { TeamComparisonStats } from "@/types/team-comparison";
+import { ArrowDown, ArrowUp, Minus, Users } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type TeamComparisonViewProps = {
+  stats: TeamComparisonStats;
+};
+
+type StatComparison = {
+  label: string;
+  myTeamValue: number;
+  enemyTeamValue: number;
+  format: "number" | "per10" | "percentage" | "time" | "ratio";
+  reverseColors?: boolean;
+  suffix?: string;
+};
+
+function formatStatValue(
+  value: number,
+  format: "number" | "per10" | "percentage" | "time" | "ratio",
+  suffix?: string
+): string {
+  if (format === "time") {
+    const minutes = Math.floor(value / 60);
+    const seconds = Math.floor(value % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+  if (format === "percentage") {
+    return `${value.toFixed(1)}%`;
+  }
+  if (format === "ratio") {
+    return value.toFixed(2);
+  }
+  if (format === "per10") {
+    return value.toFixed(1) + (suffix ?? "");
+  }
+  return value.toLocaleString() + (suffix ?? "");
+}
+
+function getComparisonIndicator(
+  myTeamValue: number,
+  enemyTeamValue: number,
+  reverseColors = false
+) {
+  const diff = myTeamValue - enemyTeamValue;
+  const percentChange =
+    enemyTeamValue !== 0 ? Math.abs((diff / enemyTeamValue) * 100) : 0;
+
+  if (percentChange < 2) {
+    return {
+      icon: Minus,
+      colorClass: "text-muted-foreground",
+      bgClass: "bg-muted/40",
+      label: "neutral",
+    };
+  }
+
+  const isAdvantage = reverseColors ? diff < 0 : diff > 0;
+
+  return {
+    icon: diff > 0 ? ArrowUp : ArrowDown,
+    colorClass: isAdvantage
+      ? "text-emerald-600 dark:text-emerald-400"
+      : "text-rose-600 dark:text-rose-400",
+    bgClass: isAdvantage
+      ? "bg-emerald-50 dark:bg-emerald-950/30"
+      : "bg-rose-50 dark:bg-rose-950/30",
+    label: isAdvantage ? "advantage" : "disadvantage",
+  };
+}
+
+export function TeamComparisonView({ stats }: TeamComparisonViewProps) {
+  const t = useTranslations("comparePage.teamComparison");
+
+  const combatStats: StatComparison[] = [
+    {
+      label: t("stats.eliminationsPer10"),
+      myTeamValue: stats.myTeam.stats.eliminationsPer10,
+      enemyTeamValue: stats.enemyTeam.stats.eliminationsPer10,
+      format: "per10",
+    },
+    {
+      label: t("stats.finalBlowsPer10"),
+      myTeamValue: stats.myTeam.stats.finalBlowsPer10,
+      enemyTeamValue: stats.enemyTeam.stats.finalBlowsPer10,
+      format: "per10",
+    },
+    {
+      label: t("stats.deathsPer10"),
+      myTeamValue: stats.myTeam.stats.deathsPer10,
+      enemyTeamValue: stats.enemyTeam.stats.deathsPer10,
+      format: "per10",
+      reverseColors: true,
+    },
+    {
+      label: t("stats.firstPickPercentage"),
+      myTeamValue: stats.myTeam.stats.firstPickPercentage,
+      enemyTeamValue: stats.enemyTeam.stats.firstPickPercentage,
+      format: "percentage",
+    },
+    {
+      label: t("stats.firstDeathPercentage"),
+      myTeamValue: stats.myTeam.stats.firstDeathPercentage,
+      enemyTeamValue: stats.enemyTeam.stats.firstDeathPercentage,
+      format: "percentage",
+      reverseColors: true,
+    },
+  ];
+
+  const damageStats: StatComparison[] = [
+    {
+      label: t("stats.heroDamagePer10"),
+      myTeamValue: stats.myTeam.stats.heroDamagePer10,
+      enemyTeamValue: stats.enemyTeam.stats.heroDamagePer10,
+      format: "per10",
+    },
+    {
+      label: t("stats.damageTakenPer10"),
+      myTeamValue: stats.myTeam.stats.damageTakenPer10,
+      enemyTeamValue: stats.enemyTeam.stats.damageTakenPer10,
+      format: "per10",
+      reverseColors: true,
+    },
+  ];
+
+  const supportStats: StatComparison[] = [
+    {
+      label: t("stats.healingDealtPer10"),
+      myTeamValue: stats.myTeam.stats.healingDealtPer10,
+      enemyTeamValue: stats.enemyTeam.stats.healingDealtPer10,
+      format: "per10",
+    },
+    {
+      label: t("stats.damageBlockedPer10"),
+      myTeamValue: stats.myTeam.stats.damageBlockedPer10,
+      enemyTeamValue: stats.enemyTeam.stats.damageBlockedPer10,
+      format: "per10",
+    },
+  ];
+
+  const ultimateStats: StatComparison[] = [
+    {
+      label: t("stats.ultimatesEarnedPer10"),
+      myTeamValue: stats.myTeam.stats.ultimatesEarnedPer10,
+      enemyTeamValue: stats.enemyTeam.stats.ultimatesEarnedPer10,
+      format: "per10",
+    },
+    {
+      label: t("stats.averageUltChargeTime"),
+      myTeamValue: stats.myTeam.stats.averageUltChargeTime,
+      enemyTeamValue: stats.enemyTeam.stats.averageUltChargeTime,
+      format: "time",
+      reverseColors: true,
+    },
+    {
+      label: t("stats.killsPerUltimate"),
+      myTeamValue: stats.myTeam.stats.killsPerUltimate,
+      enemyTeamValue: stats.enemyTeam.stats.killsPerUltimate,
+      format: "ratio",
+    },
+  ];
+
+  function renderStatComparison(stat: StatComparison) {
+    const indicator = getComparisonIndicator(
+      stat.myTeamValue,
+      stat.enemyTeamValue,
+      stat.reverseColors
+    );
+    const Icon = indicator.icon;
+
+    return (
+      <div
+        key={stat.label}
+        className="group border-border/40 hover:bg-muted/20 grid grid-cols-[1fr_auto_1fr] items-center gap-6 border-b py-4 transition-colors last:border-0"
+      >
+        {/* My Team Value */}
+        <div className="flex items-center justify-end gap-3">
+          <span className="font-mono text-xl font-bold tracking-tight tabular-nums">
+            {formatStatValue(stat.myTeamValue, stat.format, stat.suffix)}
+          </span>
+          {indicator.label === "advantage" && (
+            <div className={`rounded-lg p-2 ${indicator.bgClass}`}>
+              <Icon className={`h-4 w-4 ${indicator.colorClass}`} />
+            </div>
+          )}
+        </div>
+
+        {/* Stat Label */}
+        <div className="min-w-[200px] text-center">
+          <span className="text-muted-foreground text-sm font-medium">
+            {stat.label}
+          </span>
+        </div>
+
+        {/* Enemy Team Value */}
+        <div className="flex items-center justify-start gap-3">
+          {indicator.label === "disadvantage" && (
+            <div className={`rounded-lg p-2 ${indicator.bgClass}`}>
+              <Icon className={`h-4 w-4 ${indicator.colorClass}`} />
+            </div>
+          )}
+          <span className="font-mono text-xl font-bold tracking-tight tabular-nums">
+            {formatStatValue(stat.enemyTeamValue, stat.format, stat.suffix)}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Team Headers */}
+      <div className="grid grid-cols-2 gap-6">
+        <Card className="border-primary/20 from-primary/5 border-2 bg-gradient-to-br to-transparent">
+          <CardHeader className="pb-4">
+            <div className="flex items-center justify-center gap-3">
+              <div className="bg-primary/10 rounded-full p-3">
+                <Users className="text-primary h-6 w-6" />
+              </div>
+              <div className="text-center">
+                <CardTitle className="text-2xl">
+                  {stats.myTeam.teamName}
+                </CardTitle>
+                <p className="text-muted-foreground text-sm">
+                  {t("myTeam")} • {stats.myTeam.playerCount}{" "}
+                  {t("players", { count: stats.myTeam.playerCount })}
+                </p>
+              </div>
+            </div>
+          </CardHeader>
+        </Card>
+
+        <Card className="border-muted-foreground/20 border-2">
+          <CardHeader className="pb-4">
+            <div className="flex items-center justify-center gap-3">
+              <div className="bg-muted rounded-full p-3">
+                <Users className="text-muted-foreground h-6 w-6" />
+              </div>
+              <div className="text-center">
+                <CardTitle className="text-2xl">
+                  {stats.enemyTeam.teamName}
+                </CardTitle>
+                <p className="text-muted-foreground text-sm">
+                  {t("enemyTeam")} • {stats.enemyTeam.playerCount}{" "}
+                  {t("players", { count: stats.enemyTeam.playerCount })}
+                </p>
+              </div>
+            </div>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Context Badge */}
+      <div className="flex justify-center">
+        <Badge variant="outline" className="text-sm">
+          {t("comparingMaps", { count: stats.mapCount })}
+        </Badge>
+      </div>
+
+      {/* Combat Stats */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-rose-500" />
+            {t("categories.combat")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-6 pt-0 pb-6">
+          {combatStats.map((stat) => renderStatComparison(stat))}
+        </CardContent>
+      </Card>
+
+      {/* Damage Stats */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-orange-500" />
+            {t("categories.damage")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-6 pt-0 pb-6">
+          {damageStats.map((stat) => renderStatComparison(stat))}
+        </CardContent>
+      </Card>
+
+      {/* Support Stats */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-emerald-500" />
+            {t("categories.support")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-6 pt-0 pb-6">
+          {supportStats.map((stat) => renderStatComparison(stat))}
+        </CardContent>
+      </Card>
+
+      {/* Ultimate Stats */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-violet-500" />
+            {t("categories.ultimate")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="px-6 pt-0 pb-6">
+          {ultimateStats.map((stat) => renderStatComparison(stat))}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/compare/trends-view.tsx b/src/components/compare/trends-view.tsx
new file mode 100644
index 000000000..fbfabf607
--- /dev/null
+++ b/src/components/compare/trends-view.tsx
@@ -0,0 +1,381 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { ComparisonStats } from "@/data/comparison-dto";
+import { cn } from "@/lib/utils";
+import {
+  AlertTriangle,
+  Minus,
+  TrendingDown,
+  TrendingUp,
+  Trophy,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type TrendsViewProps = {
+  stats: ComparisonStats;
+};
+
+export function TrendsView({ stats }: TrendsViewProps) {
+  const t = useTranslations("comparePage.trends");
+
+  if (stats.perMapBreakdown.length < 3) {
+    return (
+      <Card>
+        <CardContent className="p-8 text-center">
+          <p className="text-muted-foreground">{t("requiresThreePlus")}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Find best and worst performing maps
+  const mapsByElimsPer10 = [...stats.perMapBreakdown].sort(
+    (a, b) =>
+      (b.stats.eliminationsPer10 ?? 0) - (a.stats.eliminationsPer10 ?? 0)
+  );
+  const bestMap = mapsByElimsPer10[0];
+  const worstMap = mapsByElimsPer10[mapsByElimsPer10.length - 1];
+
+  // Calculate averages
+  const avgElimsPer10 =
+    stats.perMapBreakdown.reduce(
+      (sum, map) => sum + (map.stats.eliminationsPer10 ?? 0),
+      0
+    ) / stats.perMapBreakdown.length;
+
+  const avgDeathsPer10 =
+    stats.perMapBreakdown.reduce(
+      (sum, map) => sum + (map.stats.deathsPer10 ?? 0),
+      0
+    ) / stats.perMapBreakdown.length;
+
+  const avgDamagePer10 =
+    stats.perMapBreakdown.reduce(
+      (sum, map) => sum + (map.stats.allDamagePer10 ?? 0),
+      0
+    ) / stats.perMapBreakdown.length;
+
+  // Calculate half comparisons if 4+ maps
+  const hasHalfComparison = stats.perMapBreakdown.length >= 4;
+  const halfPoint = Math.floor(stats.perMapBreakdown.length / 2);
+  const firstHalf = stats.perMapBreakdown.slice(0, halfPoint);
+  const secondHalf = stats.perMapBreakdown.slice(halfPoint);
+
+  const firstHalfAvg = hasHalfComparison
+    ? firstHalf.reduce(
+        (sum, map) => sum + (map.stats.eliminationsPer10 ?? 0),
+        0
+      ) / firstHalf.length
+    : 0;
+
+  const secondHalfAvg = hasHalfComparison
+    ? secondHalf.reduce(
+        (sum, map) => sum + (map.stats.eliminationsPer10 ?? 0),
+        0
+      ) / secondHalf.length
+    : 0;
+
+  const halfDelta = secondHalfAvg - firstHalfAvg;
+  const halfDeltaPercent =
+    firstHalfAvg !== 0 ? (halfDelta / firstHalfAvg) * 100 : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Aggregate Summary */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("aggregateSummary")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <div className="space-y-1">
+              <p className="text-muted-foreground text-sm">{t("totalMaps")}</p>
+              <p className="text-3xl font-bold tabular-nums">
+                {stats.mapCount}
+              </p>
+            </div>
+            <div className="space-y-1">
+              <p className="text-muted-foreground text-sm">
+                {t("avgElimsPer10")}
+              </p>
+              <p className="text-3xl font-bold tabular-nums">
+                {avgElimsPer10.toFixed(2)}
+              </p>
+            </div>
+            <div className="space-y-1">
+              <p className="text-muted-foreground text-sm">
+                {t("avgDeathsPer10")}
+              </p>
+              <p className="text-3xl font-bold tabular-nums">
+                {avgDeathsPer10.toFixed(2)}
+              </p>
+            </div>
+            <div className="space-y-1">
+              <p className="text-muted-foreground text-sm">
+                {t("avgDamagePer10")}
+              </p>
+              <p className="text-3xl font-bold tabular-nums">
+                {avgDamagePer10.toLocaleString()}
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Performance Progression */}
+      {hasHalfComparison && (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t("performanceProgression")}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              {/* First Half */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline">{t("firstHalf")}</Badge>
+                  <span className="text-muted-foreground text-sm">
+                    ({t("maps")} 1-{halfPoint})
+                  </span>
+                </div>
+                <div className="space-y-2">
+                  <p className="text-muted-foreground text-sm">
+                    {t("avgElimsPer10")}
+                  </p>
+                  <p className="text-2xl font-bold tabular-nums">
+                    {firstHalfAvg.toFixed(2)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Second Half */}
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <Badge variant="outline">{t("secondHalf")}</Badge>
+                  <span className="text-muted-foreground text-sm">
+                    ({t("maps")} {halfPoint + 1}-{stats.mapCount})
+                  </span>
+                </div>
+                <div className="space-y-2">
+                  <p className="text-muted-foreground text-sm">
+                    {t("avgElimsPer10")}
+                  </p>
+                  <p className="text-2xl font-bold tabular-nums">
+                    {secondHalfAvg.toFixed(2)}
+                  </p>
+                  <div
+                    className={cn(
+                      "flex items-center gap-2 text-sm font-medium",
+                      halfDelta > 0
+                        ? "text-green-600 dark:text-green-400"
+                        : halfDelta < 0
+                          ? "text-red-600 dark:text-red-400"
+                          : "text-muted-foreground"
+                    )}
+                  >
+                    {halfDelta > 0 ? (
+                      <TrendingUp className="h-4 w-4" />
+                    ) : halfDelta < 0 ? (
+                      <TrendingDown className="h-4 w-4" />
+                    ) : (
+                      <Minus className="h-4 w-4" />
+                    )}
+                    <span>
+                      {halfDelta > 0 ? "+" : ""}
+                      {halfDelta.toFixed(2)} ({halfDelta > 0 ? "+" : ""}
+                      {halfDeltaPercent.toFixed(1)}%)
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Interpretation */}
+            <div className="border-border mt-6 rounded-lg border p-4">
+              <p className="text-sm">
+                {halfDelta > 5 ? (
+                  <>
+                    <span className="font-semibold text-green-600 dark:text-green-400">
+                      {t("improvement")}:
+                    </span>{" "}
+                    {t("improvementDesc")}
+                  </>
+                ) : halfDelta < -5 ? (
+                  <>
+                    <span className="font-semibold text-red-600 dark:text-red-400">
+                      {t("decline")}:
+                    </span>{" "}
+                    {t("declineDesc")}
+                  </>
+                ) : (
+                  <>
+                    <span className="text-muted-foreground font-semibold">
+                      {t("stable")}:
+                    </span>{" "}
+                    {t("stableDesc")}
+                  </>
+                )}
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Best and Worst Maps */}
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        {/* Best Map */}
+        <Card className="bg-green-50 dark:bg-green-950/20">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Trophy className="h-5 w-5 text-green-600 dark:text-green-400" />
+              <CardTitle className="text-green-600 dark:text-green-400">
+                {t("bestPerformance")}
+              </CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div>
+                <p className="text-lg font-semibold">{bestMap.mapName}</p>
+                <Badge variant="outline" className="mt-1">
+                  {new Date(bestMap.date).toLocaleDateString()}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t("elimsPer10")}
+                  </p>
+                  <p className="text-xl font-bold tabular-nums">
+                    {(bestMap.stats.eliminationsPer10 ?? 0).toFixed(2)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t("deathsPer10")}
+                  </p>
+                  <p className="text-xl font-bold tabular-nums">
+                    {(bestMap.stats.deathsPer10 ?? 0).toFixed(2)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t("damagePer10")}
+                  </p>
+                  <p className="text-xl font-bold tabular-nums">
+                    {(bestMap.stats.allDamagePer10 ?? 0).toLocaleString()}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Worst Map */}
+        <Card className="bg-red-50 dark:bg-red-950/20">
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400" />
+              <CardTitle className="text-red-600 dark:text-red-400">
+                {t("needsImprovement")}
+              </CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              <div>
+                <p className="text-lg font-semibold">{worstMap.mapName}</p>
+                <Badge variant="outline" className="mt-1">
+                  {new Date(worstMap.date).toLocaleDateString()}
+                </Badge>
+              </div>
+              <div className="grid grid-cols-3 gap-4">
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t("elimsPer10")}
+                  </p>
+                  <p className="text-xl font-bold tabular-nums">
+                    {(worstMap.stats.eliminationsPer10 ?? 0).toFixed(2)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t("deathsPer10")}
+                  </p>
+                  <p className="text-xl font-bold tabular-nums">
+                    {(worstMap.stats.deathsPer10 ?? 0).toFixed(2)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-muted-foreground text-xs">
+                    {t("damagePer10")}
+                  </p>
+                  <p className="text-xl font-bold tabular-nums">
+                    {(worstMap.stats.allDamagePer10 ?? 0).toLocaleString()}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Per-Map Breakdown */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t("perMapBreakdown")}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {stats.perMapBreakdown.map((map, index) => (
+              <div
+                key={map.mapId}
+                className="border-border flex items-center gap-4 rounded-lg border p-4"
+              >
+                <div className="bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
+                  <span className="text-primary font-semibold">
+                    {index + 1}
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <p className="font-semibold">{map.mapName}</p>
+                  <p className="text-muted-foreground text-sm">
+                    {new Date(map.date).toLocaleDateString()}
+                  </p>
+                </div>
+                <div className="grid grid-cols-3 gap-6 text-right">
+                  <div>
+                    <p className="text-muted-foreground text-xs">
+                      {t("elims")}
+                    </p>
+                    <p className="font-semibold tabular-nums">
+                      {(map.stats.eliminationsPer10 ?? 0).toFixed(2)}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground text-xs">
+                      {t("deaths")}
+                    </p>
+                    <p className="font-semibold tabular-nums">
+                      {(map.stats.deathsPer10 ?? 0).toFixed(2)}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-muted-foreground text-xs">
+                      {t("damage")}
+                    </p>
+                    <p className="font-semibold tabular-nums">
+                      {(map.stats.allDamagePer10 ?? 0).toLocaleString()}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/email/usage-report.tsx b/src/components/email/usage-report.tsx
new file mode 100644
index 000000000..0d9d96259
--- /dev/null
+++ b/src/components/email/usage-report.tsx
@@ -0,0 +1,415 @@
+import {
+  Body,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Text,
+} from "@react-email/components";
+import { Tailwind } from "@react-email/tailwind";
+
+type SignupMethod = {
+  method: string;
+  count: number;
+  percentage: number;
+};
+
+type BillingPlanStat = {
+  plan: string;
+  count: number;
+  percentage: number;
+};
+
+type TopUser = {
+  name: string;
+  scrimCount: number;
+};
+
+type TopTeam = {
+  name: string;
+  scrimCount: number;
+};
+
+type UsageReportEmailProps = {
+  weekStart: string;
+  weekEnd: string;
+  newUsersThisWeek: number;
+  newUsersLastWeek: number;
+  newScrimsThisWeek: number;
+  newScrimsLastWeek: number;
+  newTeamsThisWeek: number;
+  newTeamsLastWeek: number;
+  totalUsers: number;
+  totalScrims: number;
+  totalTeams: number;
+  paidUsers: number;
+  conversionRate: number;
+  signupMethods: SignupMethod[];
+  billingPlans: BillingPlanStat[];
+  topUsers: TopUser[];
+  topTeams: TopTeam[];
+};
+
+type DeltaSentiment = "positive" | "negative" | "neutral";
+
+const deltaTextClass: Record<DeltaSentiment, string> = {
+  positive: "text-green-600",
+  negative: "text-red-600",
+  neutral: "text-gray-500",
+};
+
+function getDeltaSentiment(current: number, previous: number): DeltaSentiment {
+  if (current > previous) return "positive";
+  if (current < previous) return "negative";
+  return "neutral";
+}
+
+function formatDelta(current: number, previous: number): string {
+  const delta = current - previous;
+  if (delta > 0) return `+${delta} vs last week`;
+  if (delta < 0) return `${delta} vs last week`;
+  return "No change vs last week";
+}
+
+function StatCard({
+  label,
+  value,
+  deltaLabel,
+  sentiment,
+}: {
+  label: string;
+  value: string;
+  deltaLabel?: string;
+  sentiment?: DeltaSentiment;
+}) {
+  return (
+    <div className="rounded border border-solid border-gray-200 bg-gray-50 p-[16px]">
+      <Text className="m-0 mb-[4px] text-[11px] leading-[16px] font-semibold tracking-wide text-gray-500 uppercase">
+        {label}
+      </Text>
+      <Text className="m-0 mb-[4px] text-[24px] leading-[32px] font-bold text-gray-900">
+        {value}
+      </Text>
+      {deltaLabel && sentiment && (
+        <Text
+          className={`m-0 text-[12px] leading-[18px] ${deltaTextClass[sentiment]}`}
+        >
+          {deltaLabel}
+        </Text>
+      )}
+    </div>
+  );
+}
+
+function SectionHeading({ children }: { children: React.ReactNode }) {
+  return (
+    <Text className="m-0 mb-[12px] text-[13px] leading-[20px] font-semibold tracking-wide text-gray-700 uppercase">
+      {children}
+    </Text>
+  );
+}
+
+export function UsageReportEmail({
+  weekStart,
+  weekEnd,
+  newUsersThisWeek,
+  newUsersLastWeek,
+  newScrimsThisWeek,
+  newScrimsLastWeek,
+  newTeamsThisWeek,
+  newTeamsLastWeek,
+  totalUsers,
+  totalScrims,
+  totalTeams,
+  paidUsers,
+  conversionRate,
+  signupMethods,
+  billingPlans,
+  topUsers,
+  topTeams,
+}: UsageReportEmailProps) {
+  const userDelta = newUsersThisWeek - newUsersLastWeek;
+  const previewText = `${newUsersThisWeek} new user${newUsersThisWeek !== 1 ? "s" : ""} this week${userDelta !== 0 ? `, ${userDelta > 0 ? "+" : ""}${userDelta} vs last week` : ""}. ${newScrimsThisWeek} scrim${newScrimsThisWeek !== 1 ? "s" : ""} created.`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-white px-2 font-sans">
+          <Container className="mx-auto my-[40px] max-w-[500px] rounded border border-solid border-[#eaeaea] p-[20px]">
+            <Section className="mt-[32px]">
+              <Img
+                src="https://parsertime.app/parsertime.png"
+                width="50"
+                height="50"
+                alt="Parsertime Logo"
+                className="mx-auto my-0"
+              />
+            </Section>
+
+            <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
+              Weekly Usage Report
+            </Heading>
+
+            <Text className="m-0 mt-[-20px] mb-[24px] text-center text-[14px] leading-[22px] text-gray-500">
+              {weekStart} &ndash; {weekEnd}
+            </Text>
+
+            <Hr className="mx-0 my-[20px] w-full border border-solid border-[#eaeaea]" />
+
+            <SectionHeading>This week at a glance</SectionHeading>
+
+            <Row className="mb-[10px]">
+              <Column className="pr-[5px]">
+                <StatCard
+                  label="New Users"
+                  value={newUsersThisWeek.toLocaleString()}
+                  sentiment={getDeltaSentiment(
+                    newUsersThisWeek,
+                    newUsersLastWeek
+                  )}
+                  deltaLabel={formatDelta(newUsersThisWeek, newUsersLastWeek)}
+                />
+              </Column>
+              <Column className="pl-[5px]">
+                <StatCard
+                  label="New Scrims"
+                  value={newScrimsThisWeek.toLocaleString()}
+                  sentiment={getDeltaSentiment(
+                    newScrimsThisWeek,
+                    newScrimsLastWeek
+                  )}
+                  deltaLabel={formatDelta(newScrimsThisWeek, newScrimsLastWeek)}
+                />
+              </Column>
+            </Row>
+
+            <Row className="mb-[10px]">
+              <Column className="pr-[5px]">
+                <StatCard
+                  label="New Teams"
+                  value={newTeamsThisWeek.toLocaleString()}
+                  sentiment={getDeltaSentiment(
+                    newTeamsThisWeek,
+                    newTeamsLastWeek
+                  )}
+                  deltaLabel={formatDelta(newTeamsThisWeek, newTeamsLastWeek)}
+                />
+              </Column>
+              <Column className="pl-[5px]">
+                <StatCard
+                  label="Paid Conversion"
+                  value={`${conversionRate.toFixed(1)}%`}
+                  sentiment="neutral"
+                  deltaLabel={`${paidUsers.toLocaleString()} paid user${paidUsers !== 1 ? "s" : ""}`}
+                />
+              </Column>
+            </Row>
+
+            <Row className="mb-[10px]">
+              <Column className="pr-[5px]">
+                <StatCard
+                  label="Total Users"
+                  value={totalUsers.toLocaleString()}
+                />
+              </Column>
+              <Column className="pl-[5px]">
+                <StatCard
+                  label="Total Scrims"
+                  value={totalScrims.toLocaleString()}
+                />
+              </Column>
+            </Row>
+
+            <Row className="mb-[20px]">
+              <Column className="pr-[5px]">
+                <StatCard
+                  label="Total Teams"
+                  value={totalTeams.toLocaleString()}
+                />
+              </Column>
+              <Column className="pl-[5px]" />
+            </Row>
+
+            <Hr className="mx-0 my-[20px] w-full border border-solid border-[#eaeaea]" />
+
+            <SectionHeading>Signup methods</SectionHeading>
+
+            {signupMethods.map((item) => (
+              <Row key={item.method} className="mb-[8px]">
+                <Column>
+                  <Text className="m-0 text-[14px] leading-[22px] text-gray-700">
+                    {item.method}
+                  </Text>
+                </Column>
+                <Column className="text-right">
+                  <Text className="m-0 text-[14px] leading-[22px] font-semibold text-gray-900">
+                    {item.count.toLocaleString()}{" "}
+                    <span className="font-normal text-gray-400">
+                      ({item.percentage}%)
+                    </span>
+                  </Text>
+                </Column>
+              </Row>
+            ))}
+
+            <Hr className="mx-0 my-[20px] w-full border border-solid border-[#eaeaea]" />
+
+            <SectionHeading>Billing plans</SectionHeading>
+
+            {billingPlans.map((item) => (
+              <Row key={item.plan} className="mb-[8px]">
+                <Column>
+                  <Text className="m-0 text-[14px] leading-[22px] text-gray-700">
+                    {item.plan.charAt(0) + item.plan.slice(1).toLowerCase()}
+                  </Text>
+                </Column>
+                <Column className="text-right">
+                  <Text className="m-0 text-[14px] leading-[22px] font-semibold text-gray-900">
+                    {item.count.toLocaleString()}{" "}
+                    <span className="font-normal text-gray-400">
+                      ({item.percentage}%)
+                    </span>
+                  </Text>
+                </Column>
+              </Row>
+            ))}
+
+            {topUsers.length > 0 && (
+              <>
+                <Hr className="mx-0 my-[20px] w-full border border-solid border-[#eaeaea]" />
+
+                <SectionHeading>Most active users</SectionHeading>
+
+                {topUsers.map((user, index) => (
+                  <Row key={user.name} className="mb-[8px]">
+                    <Column className="w-[24px]">
+                      <Text className="m-0 text-[14px] leading-[22px] font-semibold text-gray-400">
+                        {index + 1}
+                      </Text>
+                    </Column>
+                    <Column>
+                      <Text className="m-0 text-[14px] leading-[22px] text-gray-700">
+                        {user.name}
+                      </Text>
+                    </Column>
+                    <Column className="text-right">
+                      <Text className="m-0 text-[14px] leading-[22px] font-semibold text-gray-900">
+                        {user.scrimCount}{" "}
+                        <span className="font-normal text-gray-400">
+                          scrim{user.scrimCount !== 1 ? "s" : ""}
+                        </span>
+                      </Text>
+                    </Column>
+                  </Row>
+                ))}
+              </>
+            )}
+
+            {topTeams.length > 0 && (
+              <>
+                <Hr className="mx-0 my-[20px] w-full border border-solid border-[#eaeaea]" />
+
+                <SectionHeading>Most active teams</SectionHeading>
+
+                {topTeams.map((team, index) => (
+                  <Row key={team.name} className="mb-[8px]">
+                    <Column className="w-[24px]">
+                      <Text className="m-0 text-[14px] leading-[22px] font-semibold text-gray-400">
+                        {index + 1}
+                      </Text>
+                    </Column>
+                    <Column>
+                      <Text className="m-0 text-[14px] leading-[22px] text-gray-700">
+                        {team.name}
+                      </Text>
+                    </Column>
+                    <Column className="text-right">
+                      <Text className="m-0 text-[14px] leading-[22px] font-semibold text-gray-900">
+                        {team.scrimCount}{" "}
+                        <span className="font-normal text-gray-400">
+                          scrim{team.scrimCount !== 1 ? "s" : ""}
+                        </span>
+                      </Text>
+                    </Column>
+                  </Row>
+                ))}
+              </>
+            )}
+
+            <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
+
+            <Text className="text-[12px] leading-[24px] text-[#666666]">
+              This is an automated weekly report sent to Parsertime admins. If
+              you have questions, reach out at{" "}
+              <Link
+                href="mailto:help@parsertime.app"
+                className="text-blue-600 no-underline"
+              >
+                help@parsertime.app
+              </Link>
+              .
+            </Text>
+
+            {process.env.NODE_ENV !== "production" && (
+              <Text className="text-[12px] leading-[24px] text-[#666666]">
+                This email was sent from a development environment.
+              </Text>
+            )}
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+UsageReportEmail.PreviewProps = {
+  weekStart: "Feb 13, 2026",
+  weekEnd: "Feb 20, 2026",
+  newUsersThisWeek: 12,
+  newUsersLastWeek: 10,
+  newScrimsThisWeek: 34,
+  newScrimsLastWeek: 38,
+  newTeamsThisWeek: 5,
+  newTeamsLastWeek: 5,
+  totalUsers: 842,
+  totalScrims: 3201,
+  totalTeams: 176,
+  paidUsers: 94,
+  conversionRate: 11.2,
+  signupMethods: [
+    { method: "Discord", count: 410, percentage: 49 },
+    { method: "Email", count: 220, percentage: 26 },
+    { method: "Google", count: 150, percentage: 18 },
+    { method: "GitHub", count: 62, percentage: 7 },
+  ],
+  billingPlans: [
+    { plan: "FREE", count: 748, percentage: 89 },
+    { plan: "BASIC", count: 72, percentage: 9 },
+    { plan: "PREMIUM", count: 22, percentage: 2 },
+  ],
+  topUsers: [
+    { name: "Alice Kim", scrimCount: 14 },
+    { name: "Bob Chen", scrimCount: 11 },
+    { name: "Carol Wright", scrimCount: 9 },
+    { name: "David Park", scrimCount: 7 },
+    { name: "Eve Torres", scrimCount: 5 },
+  ],
+  topTeams: [
+    { name: "Neon Wolves", scrimCount: 22 },
+    { name: "Iron Lotus", scrimCount: 17 },
+    { name: "Storm Rising", scrimCount: 13 },
+    { name: "Cold Front", scrimCount: 9 },
+    { name: "Echo Squad", scrimCount: 6 },
+  ],
+} satisfies UsageReportEmailProps;
+
+export default UsageReportEmail;
diff --git a/src/components/map/default-overview.tsx b/src/components/map/default-overview.tsx
index c2f72b809..74c408b97 100644
--- a/src/components/map/default-overview.tsx
+++ b/src/components/map/default-overview.tsx
@@ -139,6 +139,37 @@ export async function DefaultOverview({
       return acc;
     }, {});
 
+  const teamFirstDeathCounts = new Map<string, number>();
+  for (const fight of fights) {
+    const teamsSeen = new Set<string>();
+    for (const kill of fight.kills) {
+      if (kill.event_type !== "kill" || teamsSeen.has(kill.victim_team))
+        continue;
+      teamsSeen.add(kill.victim_team);
+      teamFirstDeathCounts.set(
+        kill.victim_name,
+        (teamFirstDeathCounts.get(kill.victim_name) ?? 0) + 1
+      );
+    }
+  }
+
+  const fightCount = fights.length;
+  const playerFirstDeathStats = new Map<
+    string,
+    { firstDeathRate: number; teamFirstDeathRate: number }
+  >();
+  const allPlayerNames = new Set(finalRoundStats.map((s) => s.player_name));
+  for (const name of allPlayerNames) {
+    playerFirstDeathStats.set(name, {
+      firstDeathRate:
+        fightCount > 0 ? ((firstDeaths[name] ?? 0) / fightCount) * 100 : 0,
+      teamFirstDeathRate:
+        fightCount > 0
+          ? ((teamFirstDeathCounts.get(name) ?? 0) / fightCount) * 100
+          : 0,
+    });
+  }
+
   const playerWithMostFirstDeaths =
     Object.keys(firstDeaths).length > 0
       ? Object.keys(firstDeaths).reduce((a, b) =>
@@ -309,6 +340,7 @@ export async function DefaultOverview({
               team1MVP={team1MVP}
               team2MVP={team2MVP}
               mvpScores={mvpScores}
+              firstDeathStats={playerFirstDeathStats}
             />
           </CardContent>
           <CardContent className="hidden md:flex">
@@ -320,6 +352,7 @@ export async function DefaultOverview({
                 team1MVP={team1MVP}
                 team2MVP={team2MVP}
                 mvpScores={mvpScores}
+                firstDeathStats={playerFirstDeathStats}
               />
             ) : (
               <Tabs
@@ -342,6 +375,7 @@ export async function DefaultOverview({
                     team1MVP={team1MVP}
                     team2MVP={team2MVP}
                     mvpScores={mvpScores}
+                    firstDeathStats={playerFirstDeathStats}
                   />
                 </TabsContent>
                 {range(numberOfRounds).map((round) => (
@@ -357,6 +391,7 @@ export async function DefaultOverview({
                       team1MVP={team1MVP}
                       team2MVP={team2MVP}
                       mvpScores={mvpScores}
+                      firstDeathStats={playerFirstDeathStats}
                       playerStats={removeDuplicateRows(playerStats)
                         .filter(
                           (stat) =>
diff --git a/src/components/map/overview-table.tsx b/src/components/map/overview-table.tsx
index 7a4655bba..fc7633473 100644
--- a/src/components/map/overview-table.tsx
+++ b/src/components/map/overview-table.tsx
@@ -47,6 +47,11 @@ import type { Route } from "next";
 import { useTranslations } from "next-intl";
 import { usePathname } from "next/navigation";
 
+export type FirstDeathStats = Map<
+  string,
+  { firstDeathRate: number; teamFirstDeathRate: number }
+>;
+
 export function OverviewTable({
   playerStats,
   team1Name,
@@ -54,6 +59,7 @@ export function OverviewTable({
   team1MVP,
   team2MVP,
   mvpScores,
+  firstDeathStats,
 }: {
   playerStats: PlayerStat[];
   team1Name: string;
@@ -61,6 +67,7 @@ export function OverviewTable({
   team1MVP: string;
   team2MVP: string;
   mvpScores?: MVPScoreResult[];
+  firstDeathStats?: FirstDeathStats;
 }) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@@ -71,10 +78,19 @@ export function OverviewTable({
   const [rowSelection, setRowSelection] = React.useState({});
   const pathname = usePathname();
 
-  const tableData = React.useMemo(
-    () => aggregatePlayerData(playerStats),
-    [playerStats]
-  );
+  const tableData = React.useMemo(() => {
+    const data = aggregatePlayerData(playerStats);
+    if (firstDeathStats) {
+      for (const player of data) {
+        const stats = firstDeathStats.get(player.playerName);
+        if (stats) {
+          player.firstDeathRate = round(stats.firstDeathRate);
+          player.teamFirstDeathRate = round(stats.teamFirstDeathRate);
+        }
+      }
+    }
+    return data;
+  }, [playerStats, firstDeathStats]);
 
   const { team1: team1Color, team2: team2Color } = useColorblindMode();
 
@@ -290,6 +306,39 @@ export function OverviewTable({
       enableSorting: true,
       enableColumnFilter: false,
     },
+    {
+      accessorKey: "firstDeathRate",
+      header: ({ header }) => (
+        <OverviewTableHeader tooltip={tooltips.firstDeathRate} header={header}>
+          {t("header.firstDeathRate")}
+        </OverviewTableHeader>
+      ),
+      cell: ({ row }) => (
+        <div className={cn(GeistMono.className, "text-right capitalize")}>
+          {row.getValue<number>("firstDeathRate").toFixed(1)}%
+        </div>
+      ),
+      enableSorting: true,
+      enableColumnFilter: false,
+    },
+    {
+      accessorKey: "teamFirstDeathRate",
+      header: ({ header }) => (
+        <OverviewTableHeader
+          tooltip={tooltips.teamFirstDeathRate}
+          header={header}
+        >
+          {t("header.teamFirstDeathRate")}
+        </OverviewTableHeader>
+      ),
+      cell: ({ row }) => (
+        <div className={cn(GeistMono.className, "text-right capitalize")}>
+          {row.getValue<number>("teamFirstDeathRate").toFixed(1)}%
+        </div>
+      ),
+      enableSorting: true,
+      enableColumnFilter: false,
+    },
     {
       accessorKey: "heroDmgDealt",
       header: ({ header }) => (
@@ -408,6 +457,8 @@ export function OverviewTable({
     deaths: t("tooltips.deaths"),
     kd: t("tooltips.kd"),
     kad: t("tooltips.kad"),
+    firstDeathRate: t("tooltips.firstDeathRate"),
+    teamFirstDeathRate: t("tooltips.teamFirstDeathRate"),
     heroDmgDealt: t("tooltips.heroDmgDealt"),
     dmgReceived: t("tooltips.dmgReceived"),
     healingReceived: t("tooltips.healingReceived"),
diff --git a/src/components/scrim/add-to-map-group-dialog.tsx b/src/components/scrim/add-to-map-group-dialog.tsx
new file mode 100644
index 000000000..8bb7df21f
--- /dev/null
+++ b/src/components/scrim/add-to-map-group-dialog.tsx
@@ -0,0 +1,331 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import type { FormattedMapGroup } from "@/types/map-group";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Loader2, Plus } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
+type AddToMapGroupDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  teamId: number;
+  mapIds: number[];
+  mapName: string;
+};
+
+async function fetchMapGroups(teamId: number): Promise<FormattedMapGroup[]> {
+  const response = await fetch(`/api/compare/map-groups?teamId=${teamId}`);
+  if (!response.ok) {
+    throw new Error("Failed to fetch map groups");
+  }
+  const data = (await response.json()) as {
+    success: boolean;
+    groups: FormattedMapGroup[];
+  };
+  return data.groups;
+}
+
+async function addMapToGroup(
+  groupId: number,
+  mapIds: number[]
+): Promise<{ success: boolean; error?: string }> {
+  const response = await fetch(`/api/compare/map-groups/${groupId}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ mapIds }),
+  });
+
+  if (!response.ok) {
+    const error = (await response.json()) as { error?: string };
+    return { success: false, error: error.error };
+  }
+
+  return { success: true };
+}
+
+async function createMapGroup(data: {
+  name: string;
+  description?: string;
+  teamId: number;
+  mapIds: number[];
+  category?: string;
+}): Promise<{ success: boolean; error?: string }> {
+  const response = await fetch("/api/compare/map-groups", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const error = (await response.json()) as { error?: string };
+    return { success: false, error: error.error };
+  }
+
+  return { success: true };
+}
+
+export function AddToMapGroupDialog({
+  open,
+  onOpenChange,
+  teamId,
+  mapIds,
+  mapName,
+}: AddToMapGroupDialogProps) {
+  const [mode, setMode] = useState<"select" | "create">("select");
+  const [selectedGroupId, setSelectedGroupId] = useState<number | null>(null);
+  const [newGroupName, setNewGroupName] = useState("");
+  const [newGroupDescription, setNewGroupDescription] = useState("");
+  const [newGroupCategory, setNewGroupCategory] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const queryClient = useQueryClient();
+
+  const { data: mapGroups, isLoading } = useQuery({
+    queryKey: ["mapGroups", teamId],
+    queryFn: () => fetchMapGroups(teamId),
+    enabled: open,
+    staleTime: 5 * 60 * 1000,
+  });
+
+  async function handleAddToExisting() {
+    if (!selectedGroupId) return;
+
+    setIsSubmitting(true);
+    try {
+      const group = mapGroups?.find((g) => g.id === selectedGroupId);
+      if (!group) return;
+
+      // Combine existing map IDs with new ones (deduplicate)
+      const combinedMapIds = Array.from(new Set([...group.mapIds, ...mapIds]));
+
+      const result = await addMapToGroup(selectedGroupId, combinedMapIds);
+
+      if (result.success) {
+        toast.success("Added to map group", {
+          description: `${mapName} added to ${group.name}`,
+        });
+        await queryClient.invalidateQueries({
+          queryKey: ["mapGroups", teamId],
+        });
+        onOpenChange(false);
+        setSelectedGroupId(null);
+      } else {
+        toast.error("Failed to add to map group", {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error("Failed to add to map group", {
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  async function handleCreateNew() {
+    if (!newGroupName.trim()) {
+      toast.error("Please enter a name for the map group");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const result = await createMapGroup({
+        name: newGroupName,
+        description: newGroupDescription || undefined,
+        teamId,
+        mapIds,
+        category: newGroupCategory || undefined,
+      });
+
+      if (result.success) {
+        toast.success("Map group created", {
+          description: `Created "${newGroupName}" and added ${mapName}`,
+        });
+        await queryClient.invalidateQueries({
+          queryKey: ["mapGroups", teamId],
+        });
+        onOpenChange(false);
+        setNewGroupName("");
+        setNewGroupDescription("");
+        setNewGroupCategory("");
+        setMode("select");
+      } else {
+        toast.error("Failed to create map group", {
+          description: result.error,
+        });
+      }
+    } catch (error) {
+      toast.error("Failed to create map group", {
+        description: error instanceof Error ? error.message : "Unknown error",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  function handleClose() {
+    onOpenChange(false);
+    setMode("select");
+    setSelectedGroupId(null);
+    setNewGroupName("");
+    setNewGroupDescription("");
+    setNewGroupCategory("");
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {mode === "select" ? "Add to Map Group" : "Create New Map Group"}
+          </DialogTitle>
+          <DialogDescription>
+            {mode === "select"
+              ? `Select an existing map group to add ${mapName} to, or create a new one.`
+              : `Create a new map group and add ${mapName} to it.`}
+          </DialogDescription>
+        </DialogHeader>
+
+        {mode === "select" ? (
+          <div className="space-y-4">
+            {isLoading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : mapGroups && mapGroups.length > 0 ? (
+              <div className="space-y-2">
+                <Label>Select a map group</Label>
+                <div className="max-h-[300px] overflow-y-auto rounded-md border">
+                  {mapGroups.map((group) => (
+                    <button
+                      key={group.id}
+                      type="button"
+                      onClick={() => setSelectedGroupId(group.id)}
+                      className={`hover:bg-accent w-full px-4 py-3 text-left transition-colors ${
+                        selectedGroupId === group.id ? "bg-accent" : ""
+                      }`}
+                    >
+                      <div className="font-medium">{group.name}</div>
+                      {group.description && (
+                        <div className="text-muted-foreground text-sm">
+                          {group.description}
+                        </div>
+                      )}
+                      <div className="text-muted-foreground mt-1 text-xs">
+                        {group.mapIds.length} map
+                        {group.mapIds.length !== 1 ? "s" : ""}
+                        {group.category && ` · ${group.category}`}
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <div className="text-muted-foreground py-8 text-center">
+                <p>No map groups found.</p>
+                <p className="text-sm">Create your first map group below.</p>
+              </div>
+            )}
+
+            <Button
+              variant="outline"
+              className="w-full"
+              onClick={() => setMode("create")}
+            >
+              <Plus className="mr-2 h-4 w-4" />
+              Create New Map Group
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">
+                Name <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="name"
+                placeholder="e.g., Control Maps"
+                value={newGroupName}
+                onChange={(e) => setNewGroupName(e.target.value)}
+                maxLength={100}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                placeholder="Optional description for this group"
+                value={newGroupDescription}
+                onChange={(e) => setNewGroupDescription(e.target.value)}
+                maxLength={500}
+                rows={3}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="category">Category</Label>
+              <Input
+                id="category"
+                placeholder="e.g., Map Type, Playstyle"
+                value={newGroupCategory}
+                onChange={(e) => setNewGroupCategory(e.target.value)}
+                maxLength={50}
+              />
+            </div>
+
+            <Button
+              variant="ghost"
+              className="w-full"
+              onClick={() => setMode("select")}
+            >
+              Back to Selection
+            </Button>
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            Cancel
+          </Button>
+          {mode === "select" ? (
+            <Button
+              onClick={handleAddToExisting}
+              disabled={!selectedGroupId || isSubmitting}
+            >
+              {isSubmitting && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Add to Group
+            </Button>
+          ) : (
+            <Button
+              onClick={handleCreateNew}
+              disabled={!newGroupName.trim() || isSubmitting}
+            >
+              {isSubmitting && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Create and Add
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/scrim/compare-selected-button.tsx b/src/components/scrim/compare-selected-button.tsx
new file mode 100644
index 000000000..a24c62b7f
--- /dev/null
+++ b/src/components/scrim/compare-selected-button.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { AddToMapGroupDialog } from "@/components/scrim/add-to-map-group-dialog";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  mapSelectionStore,
+  selectHasSelections,
+  selectSelectedMapIds,
+  selectSelectionCount,
+  selectUniqueScrimCount,
+} from "@/stores/map-selection-store";
+import { useSelector } from "@xstate/store/react";
+import { ChevronDown, FolderPlus } from "lucide-react";
+import type { Route } from "next";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+type CompareSelectedButtonProps = {
+  teamId: number;
+};
+
+export function CompareSelectedButton({ teamId }: CompareSelectedButtonProps) {
+  const t = useTranslations("scrimPage.compareButton");
+  const router = useRouter();
+  const [isMapGroupDialogOpen, setIsMapGroupDialogOpen] = useState(false);
+
+  // Memoize selector functions
+  const hasSelectionsSelector = useCallback(
+    (state: ReturnType<typeof mapSelectionStore.getSnapshot>) =>
+      selectHasSelections(state.context),
+    []
+  );
+
+  const selectionCountSelector = useCallback(
+    (state: ReturnType<typeof mapSelectionStore.getSnapshot>) =>
+      selectSelectionCount(state.context),
+    []
+  );
+
+  const selectedMapIdsSelector = useCallback(
+    (state: ReturnType<typeof mapSelectionStore.getSnapshot>) =>
+      selectSelectedMapIds(state.context),
+    []
+  );
+
+  const uniqueScrimCountSelector = useCallback(
+    (state: ReturnType<typeof mapSelectionStore.getSnapshot>) =>
+      selectUniqueScrimCount(state.context),
+    []
+  );
+
+  const hasSelections = useSelector(mapSelectionStore, hasSelectionsSelector);
+  const selectionCount = useSelector(mapSelectionStore, selectionCountSelector);
+  const selectedMapIdsMap = useSelector(
+    mapSelectionStore,
+    selectedMapIdsSelector
+  );
+  const uniqueScrimCount = useSelector(
+    mapSelectionStore,
+    uniqueScrimCountSelector
+  );
+
+  // Convert Map to Array of map IDs
+  const selectedMapIds = useMemo(
+    () => Array.from(selectedMapIdsMap.keys()),
+    [selectedMapIdsMap]
+  );
+
+  const handleCompare = useCallback(() => {
+    const mapIdsParam = selectedMapIds.join(",");
+    const url = `/${teamId}/compare?maps=${mapIdsParam}` as Route;
+    router.push(url);
+  }, [selectedMapIds, teamId, router]);
+
+  const handleClear = useCallback(() => {
+    mapSelectionStore.send({ type: "clearAll" });
+  }, []);
+
+  const handleAddToMapGroup = useCallback(() => {
+    setIsMapGroupDialogOpen(true);
+  }, []);
+
+  if (!hasSelections) return null;
+
+  return (
+    <>
+      <AddToMapGroupDialog
+        open={isMapGroupDialogOpen}
+        onOpenChange={setIsMapGroupDialogOpen}
+        teamId={teamId}
+        mapIds={selectedMapIds}
+        mapName={`${selectionCount} selected map${selectionCount !== 1 ? "s" : ""}`}
+      />
+      <div className="bg-card ring-foreground/10 fixed right-6 bottom-6 z-50 flex items-center gap-2 rounded-lg p-4 shadow-lg ring-1">
+        <div className="flex items-center gap-3">
+          <div className="flex flex-col">
+            <span className="text-sm font-medium">
+              {t("selected", { count: selectionCount })}
+            </span>
+            {uniqueScrimCount > 1 && (
+              <span className="text-muted-foreground text-xs">
+                {t("fromScrims", { count: uniqueScrimCount })}
+              </span>
+            )}
+          </div>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="sm">
+                {t("compare")}
+                <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={handleCompare}>
+                {t("compareNow")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleAddToMapGroup}>
+                <FolderPlus className="mr-2 h-4 w-4" />
+                {t("addToMapGroup")}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={handleClear}
+                className="text-destructive"
+              >
+                {t("clear")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/scrim/map-card-with-selection.tsx b/src/components/scrim/map-card-with-selection.tsx
new file mode 100644
index 000000000..1dc712e3d
--- /dev/null
+++ b/src/components/scrim/map-card-with-selection.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { AddToMapGroupDialog } from "@/components/scrim/add-to-map-group-dialog";
+import { ReplayCode } from "@/components/scrim/replay-code";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { Link } from "@/components/ui/link";
+import { cn, toKebabCase, useMapNames } from "@/lib/utils";
+import {
+  mapSelectionStore,
+  selectIsMapSelected,
+} from "@/stores/map-selection-store";
+import type { Map } from "@prisma/client";
+import { useSelector } from "@xstate/store/react";
+import type { Route } from "next";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { memo, useCallback, useState } from "react";
+import { toast } from "sonner";
+
+type MapCardWithSelectionProps = {
+  map: Map;
+  scrimId: number;
+  teamId: number;
+  locale: string;
+  mapComparisonEnabled: boolean;
+};
+
+function MapCardWithSelectionComponent({
+  map,
+  scrimId,
+  teamId,
+  mapComparisonEnabled,
+}: MapCardWithSelectionProps) {
+  const t = useTranslations("scrimPage.mapCard");
+  const [isMapGroupDialogOpen, setIsMapGroupDialogOpen] = useState(false);
+
+  // Memoize selector function
+  const isSelectedSelector = useCallback(
+    (state: ReturnType<typeof mapSelectionStore.getSnapshot>) =>
+      selectIsMapSelected(state.context, map.id),
+    [map.id]
+  );
+
+  const isSelected = useSelector(mapSelectionStore, isSelectedSelector);
+
+  const handleToggleSelection = useCallback(() => {
+    mapSelectionStore.send({
+      type: "toggleMapSelection",
+      mapId: map.id,
+      scrimId,
+    });
+  }, [map.id, scrimId]);
+
+  const handleCopyReplayCode = useCallback(
+    (e: Event) => {
+      e.preventDefault();
+      if (map.replayCode) {
+        void navigator.clipboard.writeText(map.replayCode);
+        toast.success(t("copiedCode"), {
+          description: map.replayCode,
+        });
+      }
+    },
+    [map.replayCode, t]
+  );
+
+  // Get map display name
+  const mapNames = useMapNames();
+  const displayName = mapNames.get(toKebabCase(map.name)) ?? map.name;
+
+  const handleAddToMapGroup = useCallback(() => {
+    setIsMapGroupDialogOpen(true);
+  }, []);
+
+  const card = (
+    <Card
+      className={cn(
+        "relative h-48 max-w-md bg-cover transition-all duration-150",
+        "ring-foreground/10 shadow-xs ring-1",
+        "@media (hover: hover) hover:ring-primary/30 hover:shadow-md",
+        isSelected && "ring-primary border-primary border-l-4 shadow-lg ring-2"
+      )}
+      role="article"
+      aria-label={`${displayName} map card${isSelected ? ", selected for comparison" : ""}`}
+    >
+      <Link
+        href={`/${teamId}/scrim/${scrimId}/map/${map.id}` as Route}
+        prefetch={true}
+      >
+        <CardHeader>
+          <h3 className="z-10 text-3xl font-semibold tracking-tight text-white">
+            {displayName}
+          </h3>
+        </CardHeader>
+        <CardContent>
+          <Image
+            src={`/maps/${toKebabCase(map.name)}.webp`}
+            alt={t("altText", { map: displayName })}
+            fill
+            className="rounded-md object-cover brightness-[0.65] select-none"
+          />
+        </CardContent>
+      </Link>
+      <CardFooter className="flex items-center justify-end pt-12">
+        <div className="z-10 font-semibold tracking-tight text-white">
+          {map.replayCode && <ReplayCode replayCode={map.replayCode} />}
+        </div>
+      </CardFooter>
+
+      {isSelected && (
+        <Badge className="bg-primary text-primary-foreground pointer-events-none absolute top-3 right-3 z-20">
+          {t("selected")}
+        </Badge>
+      )}
+    </Card>
+  );
+
+  return (
+    <>
+      <AddToMapGroupDialog
+        open={isMapGroupDialogOpen}
+        onOpenChange={setIsMapGroupDialogOpen}
+        teamId={teamId}
+        mapIds={[map.id]}
+        mapName={displayName}
+      />
+      {mapComparisonEnabled ? (
+        <ContextMenu>
+          <ContextMenuTrigger asChild>{card}</ContextMenuTrigger>
+          <ContextMenuContent>
+            <ContextMenuLabel>{t("contextMenu.title")}</ContextMenuLabel>
+            <ContextMenuSeparator />
+            <ContextMenuCheckboxItem
+              checked={isSelected}
+              onCheckedChange={handleToggleSelection}
+            >
+              {t("contextMenu.selectForComparison")}
+            </ContextMenuCheckboxItem>
+            <ContextMenuItem onSelect={handleAddToMapGroup}>
+              {t("contextMenu.addToMapGroup")}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem asChild>
+              <Link
+                href={`/${teamId}/scrim/${scrimId}/map/${map.id}` as Route}
+                className="cursor-pointer"
+              >
+                {t("contextMenu.viewDetails")}
+              </Link>
+            </ContextMenuItem>
+            {map.replayCode && (
+              <ContextMenuItem onSelect={handleCopyReplayCode}>
+                {t("contextMenu.copyCode")}
+              </ContextMenuItem>
+            )}
+          </ContextMenuContent>
+        </ContextMenu>
+      ) : (
+        card
+      )}
+    </>
+  );
+}
+
+// Memoize to prevent unnecessary re-renders
+export const MapCardWithSelection = memo(
+  MapCardWithSelectionComponent,
+  (prev, next) =>
+    prev.map.id === next.map.id &&
+    prev.scrimId === next.scrimId &&
+    prev.teamId === next.teamId &&
+    prev.locale === next.locale &&
+    prev.mapComparisonEnabled === next.mapComparisonEnabled
+);
diff --git a/src/components/scrim/player-performance-hover-chart.tsx b/src/components/scrim/player-performance-hover-chart.tsx
new file mode 100644
index 000000000..2da00d39b
--- /dev/null
+++ b/src/components/scrim/player-performance-hover-chart.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import type { ChartConfig } from "@/components/ui/chart";
+import { ChartContainer } from "@/components/ui/chart";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import type { PlayerMapPerformance } from "@/data/scrim-overview-dto";
+import type { HeroName } from "@/types/heroes";
+import { heroRoleMapping } from "@/types/heroes";
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceLine,
+  Tooltip,
+  type TooltipProps,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
+
+type ChartDataPoint = {
+  map: string;
+  kd: number;
+  elims: number;
+  thirdStat: number;
+  firstDeath: number;
+  teamFirstDeath: number;
+  rawKd: number;
+  rawElims: number;
+  rawThirdStat: number;
+  rawFirstDeath: number;
+  rawTeamFirstDeath: number;
+};
+
+type Props = {
+  playerName: string;
+  primaryHero: HeroName;
+  perMapPerformance: PlayerMapPerformance[];
+  children: React.ReactNode;
+};
+
+function formatRawValue(
+  dataKey: string | number | undefined,
+  point: ChartDataPoint
+): string {
+  if (dataKey === "kd") return point.rawKd.toFixed(2);
+  if (dataKey === "elims") return point.rawElims.toFixed(1);
+  if (dataKey === "firstDeath") return `${point.rawFirstDeath.toFixed(1)}%`;
+  if (dataKey === "teamFirstDeath")
+    return `${point.rawTeamFirstDeath.toFixed(1)}%`;
+  return Math.round(point.rawThirdStat).toLocaleString();
+}
+
+function PerformanceTooltip({
+  active,
+  payload,
+  label,
+}: TooltipProps<ValueType, NameType>) {
+  if (!active || !payload?.length) return null;
+
+  return (
+    <div className="bg-popover text-popover-foreground border-border/50 rounded-lg border p-2 text-xs shadow-md">
+      <p className="mb-1 font-medium">{label}</p>
+      {payload.map((entry) => {
+        const point = entry.payload as ChartDataPoint;
+        return (
+          <div
+            key={String(entry.dataKey)}
+            className="flex items-center gap-1.5"
+          >
+            <div
+              className="h-2 w-2 shrink-0 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span className="text-muted-foreground">{entry.name}:</span>
+            <span className="font-medium tabular-nums">
+              {formatRawValue(entry.dataKey, point)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function PlayerPerformanceHoverChart({
+  playerName,
+  primaryHero,
+  perMapPerformance,
+  children,
+}: Props) {
+  if (perMapPerformance.length < 2) {
+    return children;
+  }
+
+  const role = heroRoleMapping[primaryHero];
+  const isSupport = role === "Support";
+  const thirdStatLabel = isSupport ? "Healing/10" : "Dmg/10";
+
+  const len = perMapPerformance.length;
+  const avgKd = perMapPerformance.reduce((sum, m) => sum + m.kdRatio, 0) / len;
+  const avgElims =
+    perMapPerformance.reduce((sum, m) => sum + m.eliminationsPer10, 0) / len;
+  const avgThirdStat = isSupport
+    ? perMapPerformance.reduce((sum, m) => sum + m.healingDealtPer10, 0) / len
+    : perMapPerformance.reduce((sum, m) => sum + m.heroDamagePer10, 0) / len;
+  const avgFirstDeath =
+    perMapPerformance.reduce((sum, m) => sum + m.firstDeathRate, 0) / len;
+  const avgTeamFirstDeath =
+    perMapPerformance.reduce((sum, m) => sum + m.teamFirstDeathRate, 0) / len;
+
+  const chartData = perMapPerformance.map((m) => ({
+    map: m.mapName,
+    kd: avgKd > 0 ? (m.kdRatio / avgKd) * 100 : 0,
+    elims: avgElims > 0 ? (m.eliminationsPer10 / avgElims) * 100 : 0,
+    thirdStat:
+      avgThirdStat > 0
+        ? ((isSupport ? m.healingDealtPer10 : m.heroDamagePer10) /
+            avgThirdStat) *
+          100
+        : 0,
+    firstDeath:
+      avgFirstDeath > 0 ? (m.firstDeathRate / avgFirstDeath) * 100 : 0,
+    teamFirstDeath:
+      avgTeamFirstDeath > 0
+        ? (m.teamFirstDeathRate / avgTeamFirstDeath) * 100
+        : 0,
+    rawKd: m.kdRatio,
+    rawElims: m.eliminationsPer10,
+    rawThirdStat: isSupport ? m.healingDealtPer10 : m.heroDamagePer10,
+    rawFirstDeath: m.firstDeathRate,
+    rawTeamFirstDeath: m.teamFirstDeathRate,
+  }));
+
+  const chartConfig = {
+    kd: { label: "K/D", color: "#3b82f6" },
+    elims: { label: "Elims/10", color: "#10b981" },
+    thirdStat: { label: thirdStatLabel, color: "#f59e0b" },
+    firstDeath: { label: "1st Death %", color: "#f43f5e" },
+    teamFirstDeath: { label: "Team 1st Death %", color: "#8b5cf6" },
+  } satisfies ChartConfig;
+
+  return (
+    <HoverCard openDelay={300} closeDelay={100}>
+      <HoverCardTrigger asChild>{children}</HoverCardTrigger>
+      <HoverCardContent className="w-full p-4" side="right" align="start">
+        <div className="space-y-3">
+          <div>
+            <p className="text-sm font-medium">{playerName}</p>
+            <p className="text-muted-foreground text-xs">
+              Performance across maps (% of avg)
+            </p>
+          </div>
+          <ChartContainer config={chartConfig} className="h-[300px] w-full">
+            <LineChart
+              data={chartData}
+              margin={{ top: 8, right: 8, bottom: 0, left: 8 }}
+            >
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis
+                dataKey="map"
+                tick={{ fontSize: 10 }}
+                tickLine={false}
+                axisLine={false}
+              />
+              <YAxis
+                tick={{ fontSize: 10 }}
+                tickLine={false}
+                axisLine={false}
+                domain={["dataMin - 10", "dataMax + 10"]}
+                tickFormatter={(value: number) => `${Math.round(value)}%`}
+              />
+              <ReferenceLine
+                y={100}
+                stroke="var(--border)"
+                strokeDasharray="4 4"
+              />
+              <Tooltip content={<PerformanceTooltip />} />
+              <Line
+                type="monotone"
+                name="K/D"
+                dataKey="kd"
+                stroke="var(--color-kd)"
+                strokeWidth={2}
+                dot={{ r: 3 }}
+                activeDot={{ r: 4 }}
+              />
+              <Line
+                type="monotone"
+                name="Elims/10"
+                dataKey="elims"
+                stroke="var(--color-elims)"
+                strokeWidth={2}
+                dot={{ r: 3 }}
+                activeDot={{ r: 4 }}
+              />
+              <Line
+                type="monotone"
+                name={thirdStatLabel}
+                dataKey="thirdStat"
+                stroke="var(--color-thirdStat)"
+                strokeWidth={2}
+                dot={{ r: 3 }}
+                activeDot={{ r: 4 }}
+              />
+              {avgFirstDeath > 0 && (
+                <Line
+                  type="monotone"
+                  name="1st Death %"
+                  dataKey="firstDeath"
+                  stroke="var(--color-firstDeath)"
+                  strokeWidth={2}
+                  strokeDasharray="4 3"
+                  dot={{ r: 3 }}
+                  activeDot={{ r: 4 }}
+                />
+              )}
+              {avgTeamFirstDeath > 0 && (
+                <Line
+                  type="monotone"
+                  name="Team 1st Death %"
+                  dataKey="teamFirstDeath"
+                  stroke="var(--color-teamFirstDeath)"
+                  strokeWidth={2}
+                  strokeDasharray="4 3"
+                  dot={{ r: 3 }}
+                  activeDot={{ r: 4 }}
+                />
+              )}
+            </LineChart>
+          </ChartContainer>
+          <div className="flex items-center justify-center gap-3">
+            {Object.entries(chartConfig).map(([key, config]) => (
+              <div key={key} className="flex items-center gap-1">
+                <div
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: config.color }}
+                />
+                <span className="text-muted-foreground text-[10px]">
+                  {String(config.label)}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  );
+}
diff --git a/src/components/scrim/scrim-overview-card.tsx b/src/components/scrim/scrim-overview-card.tsx
new file mode 100644
index 000000000..d99d89876
--- /dev/null
+++ b/src/components/scrim/scrim-overview-card.tsx
@@ -0,0 +1,430 @@
+import { PlayerPerformanceHoverChart } from "@/components/scrim/player-performance-hover-chart";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type {
+  PlayerScrimPerformance,
+  ScrimInsight,
+} from "@/data/scrim-overview-dto";
+import { getScrimOverview } from "@/data/scrim-overview-dto";
+import { cn, format, toHero } from "@/lib/utils";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ExclamationTriangleIcon,
+  InfoCircledIcon,
+  LightningBoltIcon,
+  MinusIcon,
+  StarFilledIcon,
+} from "@radix-ui/react-icons";
+import Image from "next/image";
+
+type ScrimOverviewCardProps = {
+  scrimId: number;
+  teamId: number;
+};
+
+function WinLossBadge({
+  wins,
+  losses,
+  draws,
+}: {
+  wins: number;
+  losses: number;
+  draws: number;
+}) {
+  return (
+    <div
+      className="flex items-center gap-2"
+      aria-label={`Record: ${wins} wins, ${losses} losses, ${draws} draws`}
+    >
+      <span className="text-sm font-semibold text-emerald-600 tabular-nums dark:text-emerald-400">
+        {wins}W
+      </span>
+      <span className="text-muted-foreground text-sm">·</span>
+      <span className="text-sm font-semibold text-rose-600 tabular-nums dark:text-rose-400">
+        {losses}L
+      </span>
+      {draws > 0 && (
+        <>
+          <span className="text-muted-foreground text-sm">·</span>
+          <span className="text-muted-foreground text-sm font-semibold tabular-nums">
+            {draws}D
+          </span>
+        </>
+      )}
+    </div>
+  );
+}
+
+function StatSummaryCell({
+  label,
+  value,
+  sub,
+}: {
+  label: string;
+  value: string;
+  sub?: string;
+}) {
+  return (
+    <div className="flex items-baseline gap-1.5">
+      <span className="text-sm font-semibold tabular-nums">{value}</span>
+      <span className="text-muted-foreground text-xs">
+        {label}
+        {sub ? ` · ${sub}` : ""}
+      </span>
+    </div>
+  );
+}
+
+function InsightIcon({ type }: { type: ScrimInsight["type"] }) {
+  switch (type) {
+    case "mvp":
+      return (
+        <StarFilledIcon className="h-3.5 w-3.5 text-amber-500" aria-hidden />
+      );
+    case "most_improved":
+      return (
+        <ArrowUpIcon className="h-3.5 w-3.5 text-emerald-500" aria-hidden />
+      );
+    case "most_declined":
+      return (
+        <ArrowDownIcon className="h-3.5 w-3.5 text-rose-500" aria-hidden />
+      );
+    case "outlier_positive":
+      return (
+        <LightningBoltIcon className="h-3.5 w-3.5 text-sky-500" aria-hidden />
+      );
+    case "outlier_negative":
+      return (
+        <ExclamationTriangleIcon
+          className="h-3.5 w-3.5 text-orange-500"
+          aria-hidden
+        />
+      );
+  }
+}
+
+function InsightChip({ insight }: { insight: ScrimInsight }) {
+  return (
+    <div className="bg-muted/60 border-border flex min-w-0 flex-1 items-start gap-2 rounded-lg border p-3">
+      <span className="mt-0.5 shrink-0">
+        <InsightIcon type={insight.type} />
+      </span>
+      <p className="text-foreground min-w-0 text-xs leading-relaxed">
+        {insight.headline}
+      </p>
+    </div>
+  );
+}
+
+function TrendIndicator({
+  trend,
+  trendData,
+}: Pick<PlayerScrimPerformance, "trend" | "trendData">) {
+  const improving = trendData?.improvingMetrics.length ?? 0;
+  const declining = trendData?.decliningMetrics.length ?? 0;
+
+  if (trend === "improving") {
+    return (
+      <span
+        className="inline-flex items-center gap-1 text-xs font-medium text-emerald-600 dark:text-emerald-400"
+        aria-label={`Improving: ${improving} metrics trending up`}
+      >
+        <ArrowUpIcon className="h-3.5 w-3.5" aria-hidden />
+        <span className="sr-only">Improving</span>
+      </span>
+    );
+  }
+  if (trend === "declining") {
+    return (
+      <span
+        className="inline-flex items-center gap-1 text-xs font-medium text-rose-600 dark:text-rose-400"
+        aria-label={`Declining: ${declining} metrics trending down`}
+      >
+        <ArrowDownIcon className="h-3.5 w-3.5" aria-hidden />
+        <span className="sr-only">Declining</span>
+      </span>
+    );
+  }
+  return (
+    <span
+      className="text-muted-foreground inline-flex items-center gap-1 text-xs"
+      aria-label="Stable performance"
+    >
+      <MinusIcon className="h-3.5 w-3.5" aria-hidden />
+      <span className="sr-only">Stable</span>
+    </span>
+  );
+}
+
+function OutlierBadge({
+  outlier,
+}: {
+  outlier: PlayerScrimPerformance["outliers"][number];
+}) {
+  const isPositive = outlier.direction === "high";
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Badge
+          className={cn(
+            "cursor-default font-mono text-[10px]",
+            isPositive
+              ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
+              : "border-orange-500/30 bg-orange-500/10 text-orange-700 dark:text-orange-400"
+          )}
+          variant="outline"
+          aria-label={`${outlier.label} at ${outlier.percentile}th percentile vs database`}
+        >
+          {outlier.label}
+        </Badge>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          {outlier.label}: {outlier.percentile}th %ile vs database
+          {isPositive ? " (elite)" : " (below avg)"}
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function PlayerRow({ player }: { player: PlayerScrimPerformance }) {
+  const topOutliers = player.outliers.slice(0, 2);
+  const hasChartData = player.perMapPerformance.length >= 2;
+
+  return (
+    <TableRow>
+      <TableCell className="min-w-[140px]">
+        <PlayerPerformanceHoverChart
+          playerName={player.playerName}
+          primaryHero={player.primaryHero}
+          perMapPerformance={player.perMapPerformance}
+        >
+          <div
+            className={cn(
+              "flex items-center gap-2",
+              hasChartData && "cursor-pointer"
+            )}
+          >
+            <div className="bg-muted relative h-7 w-7 shrink-0 overflow-hidden rounded-full">
+              <Image
+                src={`/heroes/${toHero(player.primaryHero)}.png`}
+                alt={player.primaryHero}
+                fill
+                className="object-cover"
+                sizes="28px"
+              />
+            </div>
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium">
+                {player.playerName}
+              </p>
+              <p className="text-muted-foreground truncate text-xs">
+                {player.primaryHero}
+                {player.heroes.length > 1 && (
+                  <span> +{player.heroes.length - 1}</span>
+                )}
+              </p>
+            </div>
+          </div>
+        </PlayerPerformanceHoverChart>
+      </TableCell>
+      <TableCell className="text-center text-sm tabular-nums">
+        {player.mapsPlayed}
+      </TableCell>
+      <TableCell className="text-center text-sm tabular-nums">
+        {player.kdRatio.toFixed(2)}
+      </TableCell>
+      <TableCell className="text-center text-sm tabular-nums">
+        {player.eliminationsPer10.toFixed(1)}
+      </TableCell>
+      <TableCell className="text-center text-sm tabular-nums">
+        {player.heroDamagePer10 > 0
+          ? format(Math.round(player.heroDamagePer10))
+          : "—"}
+      </TableCell>
+      <TableCell className="text-center text-sm tabular-nums">
+        {player.firstDeathRate.toFixed(1)}%
+      </TableCell>
+      <TableCell className="text-center text-sm tabular-nums">
+        {player.teamFirstDeathRate.toFixed(1)}%
+      </TableCell>
+      <TableCell className="text-center">
+        <TrendIndicator trend={player.trend} trendData={player.trendData} />
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap gap-1">
+          {topOutliers.length > 0 ? (
+            topOutliers.map((outlier) => (
+              <OutlierBadge key={outlier.stat} outlier={outlier} />
+            ))
+          ) : (
+            <span className="text-muted-foreground text-xs">—</span>
+          )}
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export async function ScrimOverviewCard({
+  scrimId,
+  teamId,
+}: ScrimOverviewCardProps) {
+  const data = await getScrimOverview(scrimId, teamId);
+
+  if (data.mapCount === 0 || data.teamPlayers.length === 0) {
+    return null;
+  }
+
+  const { wins, losses, draws, mapCount, teamTotals, teamPlayers, insights } =
+    data;
+
+  const winRate = mapCount > 0 ? Math.round((wins / mapCount) * 100) : 0;
+  const kdDisplay = teamTotals.kdRatio.toFixed(2);
+  const totalElims = teamTotals.eliminations;
+  const totalDamage = teamTotals.heroDamage;
+
+  // Headline insight: prioritize the most impactful insight for the sub-header
+  const headlineInsight = insights.find(
+    (i) => i.type === "mvp" || i.type === "outlier_positive"
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="space-y-1">
+            <CardTitle className="text-base font-semibold">
+              Scrim Overview
+            </CardTitle>
+            {headlineInsight && (
+              <p className="text-muted-foreground text-sm">
+                {headlineInsight.headline}
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-4">
+            <WinLossBadge wins={wins} losses={losses} draws={draws} />
+            <Badge variant="secondary" className="tabular-nums">
+              {winRate}% win rate
+            </Badge>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Summary stats row */}
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          <StatSummaryCell
+            label="Maps"
+            value={String(mapCount)}
+            sub={`${wins}W · ${losses}L`}
+          />
+          <span className="bg-border h-4 w-px shrink-0" aria-hidden />
+          <StatSummaryCell
+            label="Team K/D"
+            value={kdDisplay}
+            sub={`${totalElims} elims`}
+          />
+          <span className="bg-border h-4 w-px shrink-0" aria-hidden />
+          <StatSummaryCell
+            label="Total Damage"
+            value={format(Math.round(totalDamage))}
+            sub="hero damage"
+          />
+          <span className="bg-border h-4 w-px shrink-0" aria-hidden />
+          <StatSummaryCell
+            label="Total Healing"
+            value={format(Math.round(teamTotals.healing))}
+            sub="healing dealt"
+          />
+        </div>
+
+        {insights.length > 0 && (
+          <>
+            <Separator />
+            {/* Insights strip */}
+            <section aria-label="Performance insights">
+              <h4 className="text-muted-foreground mb-3 text-xs font-medium tracking-wide uppercase">
+                Key Insights
+              </h4>
+              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
+                {insights.map((insight) => (
+                  <InsightChip key={insight.headline} insight={insight} />
+                ))}
+              </div>
+            </section>
+          </>
+        )}
+
+        {teamPlayers.length > 0 && (
+          <>
+            <Separator />
+            {/* Player performance table */}
+            <section aria-label="Player performance breakdown">
+              <h4 className="text-muted-foreground mb-3 text-xs font-medium tracking-wide uppercase">
+                Player Performance
+              </h4>
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Player</TableHead>
+                    <TableHead className="text-center">Maps</TableHead>
+                    <TableHead className="text-center">K/D</TableHead>
+                    <TableHead className="text-center">Elims/10</TableHead>
+                    <TableHead className="text-center">Dmg/10</TableHead>
+                    <TableHead className="text-center">1st Death %</TableHead>
+                    <TableHead className="text-center">
+                      Team 1st Death %
+                    </TableHead>
+                    <TableHead className="text-center">Trend</TableHead>
+                    <TableHead>Outliers</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {teamPlayers.map((player) => (
+                    <PlayerRow key={player.playerName} player={player} />
+                  ))}
+                </TableBody>
+              </Table>
+            </section>
+          </>
+        )}
+      </CardContent>
+      <CardFooter className="border-t">
+        <div className="flex items-center gap-1.5">
+          <InfoCircledIcon
+            className="text-muted-foreground h-3.5 w-3.5 shrink-0"
+            aria-hidden
+          />
+          <p className="text-muted-foreground text-xs">
+            Hover over a player&apos;s name to see their performance trend
+            across maps.
+          </p>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/src/components/vods/vod-overview.tsx b/src/components/vods/vod-overview.tsx
index 64b5eec18..278289d04 100644
--- a/src/components/vods/vod-overview.tsx
+++ b/src/components/vods/vod-overview.tsx
@@ -29,8 +29,11 @@ export function VodOverview({ vod, mapId }: { vod: string; mapId: number }) {
   }
 
   const vodSource =
-    vodState.startsWith("https://www.youtube.com/watch?v=") ||
-    vodState.startsWith("https://youtu.be/")
+    vodState.startsWith("https://www.youtube.com/") ||
+    vodState.startsWith("https://youtu.be/") ||
+    vodState.startsWith("https://youtube.com/") ||
+    vodState.startsWith("https://www.youtube.com/embed/") ||
+    vodState.startsWith("https://youtube.com/embed/")
       ? "youtube"
       : vodState.startsWith("https://www.twitch.tv/videos/")
         ? "twitch"
@@ -48,7 +51,11 @@ export function VodOverview({ vod, mapId }: { vod: string; mapId: number }) {
               videoid={
                 vodState.startsWith("https://youtu.be/")
                   ? vodState.split("youtu.be/")[1].split("?")[0]
-                  : vodState.split("v=")[1]?.split("&")[0] || ""
+                  : vodState.includes("/embed/")
+                    ? vodState.split("/embed/")[1].split("?")[0]
+                    : vodState.includes("/live/")
+                      ? vodState.split("/live/")[1].split("?")[0]
+                      : vodState.split("v=")[1]?.split("&")[0] || ""
               }
               params={`controls=1&start=${vodState.split("t=")[1] ? vodState.split("t=")[1].split("s")[0] : 0}`}
               style="width:full; height:full; max-width:100%; max-height:100%; border:0;"
@@ -58,6 +65,7 @@ export function VodOverview({ vod, mapId }: { vod: string; mapId: number }) {
           {vodSource === "twitch" && (
             <iframe
               src={twitchSrc}
+              title="Twitch VOD"
               className="h-full w-full border-0"
               allowFullScreen
             />
diff --git a/src/data/comparison-dto.ts b/src/data/comparison-dto.ts
new file mode 100644
index 000000000..b75868e73
--- /dev/null
+++ b/src/data/comparison-dto.ts
@@ -0,0 +1,1131 @@
+import "server-only";
+
+import {
+  calculateMean,
+  calculateStandardDeviation,
+} from "@/lib/distribution-utils";
+import prisma from "@/lib/prisma";
+import { removeDuplicateRows } from "@/lib/utils";
+import type { HeroName } from "@/types/heroes";
+import {
+  type CalculatedStat,
+  CalculatedStatType,
+  type MapType,
+  type PlayerStat,
+  Prisma,
+} from "@prisma/client";
+import { cache } from "react";
+
+export type AggregatedStats = {
+  eliminations: number;
+  finalBlows: number;
+  deaths: number;
+  allDamageDealt: number;
+  barrierDamageDealt: number;
+  heroDamageDealt: number;
+  healingDealt: number;
+  healingReceived: number;
+  selfHealing: number;
+  damageTaken: number;
+  damageBlocked: number;
+  defensiveAssists: number;
+  offensiveAssists: number;
+  ultimatesEarned: number;
+  ultimatesUsed: number;
+  multikillBest: number;
+  multikills: number;
+  soloKills: number;
+  objectiveKills: number;
+  environmentalKills: number;
+  environmentalDeaths: number;
+  criticalHits: number;
+  shotsFired: number;
+  shotsHit: number;
+  shotsMissed: number;
+  scopedShots: number;
+  scopedShotsHit: number;
+  scopedCriticalHitKills: number;
+  heroTimePlayed: number;
+  eliminationsPer10: number;
+  finalBlowsPer10: number;
+  deathsPer10: number;
+  allDamagePer10: number;
+  heroDamagePer10: number;
+  healingDealtPer10: number;
+  healingReceivedPer10: number;
+  damageTakenPer10: number;
+  damageBlockedPer10: number;
+  ultimatesEarnedPer10: number;
+  ultimatesUsedPer10: number;
+  soloKillsPer10: number;
+  objectiveKillsPer10: number;
+  defensiveAssistsPer10: number;
+  offensiveAssistsPer10: number;
+  environmentalKillsPer10: number;
+  environmentalDeathsPer10: number;
+  multikillsPer10: number;
+  barrierDamagePer10: number;
+  selfHealingPer10: number;
+  firstPicksPer10: number;
+  firstDeathsPer10: number;
+  mapMvpRate: number;
+  ajaxPer10: number;
+  weaponAccuracy: number;
+  criticalHitAccuracy: number;
+  scopedAccuracy: number;
+  scopedCriticalHitAccuracy: number;
+  fletaDeadliftPercentage: number;
+  firstPickPercentage: number;
+  firstPickCount: number;
+  firstDeathPercentage: number;
+  firstDeathCount: number;
+  mvpScore: number;
+  mapMvpCount: number;
+  ajaxCount: number;
+  averageUltChargeTime: number;
+  averageTimeToUseUlt: number;
+  averageDroughtTime: number;
+  killsPerUltimate: number;
+  duelWinratePercentage: number;
+  fightReversalPercentage: number;
+  eliminationsPer10StdDev: number;
+  deathsPer10StdDev: number;
+  allDamagePer10StdDev: number;
+  healingDealtPer10StdDev: number;
+  firstPickPercentageStdDev: number;
+  consistencyScore: number;
+};
+
+export type MapBreakdown = {
+  mapId: number;
+  mapDataId: number;
+  mapName: string;
+  mapType: MapType;
+  scrimId: number;
+  scrimName: string;
+  date: Date;
+  replayCode: string | null;
+  heroes: HeroName[];
+  stats: PlayerStat & {
+    eliminationsPer10?: number;
+    deathsPer10?: number;
+    allDamagePer10?: number;
+    healingDealtPer10?: number;
+    damageBlockedPer10?: number;
+  };
+  calculatedStats: CalculatedStat[];
+};
+
+export type TrendsAnalysis = {
+  improvingMetrics: {
+    metric: string;
+    change: number;
+    changePercentage: number;
+  }[];
+  decliningMetrics: {
+    metric: string;
+    change: number;
+    changePercentage: number;
+  }[];
+  earlyPerformance?: AggregatedStats;
+  latePerformance?: AggregatedStats;
+};
+
+export type ComparisonStats = {
+  playerName: string;
+  filteredHeroes: HeroName[];
+  mapCount: number;
+  mapIds: number[];
+  aggregated: AggregatedStats;
+  perMapBreakdown: MapBreakdown[];
+  trends?: TrendsAnalysis;
+  heroBreakdown?: Record<string, AggregatedStats>;
+};
+
+function calculatePer10(value: number, timePlayed: number): number {
+  if (timePlayed === 0) return 0;
+  return (value / timePlayed) * 600;
+}
+
+function calculatePercentage(value: number, total: number): number {
+  if (total === 0) return 0;
+  return (value / total) * 100;
+}
+
+function aggregateCalculatedStats(
+  stats: CalculatedStat[]
+): Partial<AggregatedStats> {
+  const result: Partial<AggregatedStats> = {
+    fletaDeadliftPercentage: 0,
+    firstPickPercentage: 0,
+    firstPickCount: 0,
+    firstDeathPercentage: 0,
+    firstDeathCount: 0,
+    mvpScore: 0,
+    mapMvpCount: 0,
+    ajaxCount: 0,
+    averageUltChargeTime: 0,
+    averageTimeToUseUlt: 0,
+    averageDroughtTime: 0,
+    killsPerUltimate: 0,
+    duelWinratePercentage: 0,
+    fightReversalPercentage: 0,
+  };
+
+  const counts: Record<string, number> = {};
+
+  // Log the stat types we're processing
+  const statTypeCounts: Record<string, number> = {};
+  stats.forEach((stat) => {
+    statTypeCounts[stat.stat] = (statTypeCounts[stat.stat] ?? 0) + 1;
+  });
+
+  stats.forEach((stat) => {
+    switch (stat.stat) {
+      case CalculatedStatType.FLETA_DEADLIFT_PERCENTAGE:
+        result.fletaDeadliftPercentage =
+          (result.fletaDeadliftPercentage ?? 0) + stat.value;
+        counts.fletaDeadlift = (counts.fletaDeadlift ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIRST_PICK_PERCENTAGE:
+        result.firstPickPercentage =
+          (result.firstPickPercentage ?? 0) + stat.value;
+        counts.firstPick = (counts.firstPick ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIRST_PICK_COUNT:
+        result.firstPickCount = (result.firstPickCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.FIRST_DEATH_PERCENTAGE:
+        result.firstDeathPercentage =
+          (result.firstDeathPercentage ?? 0) + stat.value;
+        counts.firstDeath = (counts.firstDeath ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIRST_DEATH_COUNT:
+        result.firstDeathCount = (result.firstDeathCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.MVP_SCORE:
+        result.mvpScore = (result.mvpScore ?? 0) + stat.value;
+        counts.mvpScore = (counts.mvpScore ?? 0) + 1;
+        break;
+      case CalculatedStatType.MAP_MVP_COUNT:
+        result.mapMvpCount = (result.mapMvpCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.AJAX_COUNT:
+        result.ajaxCount = (result.ajaxCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.AVERAGE_ULT_CHARGE_TIME:
+        result.averageUltChargeTime =
+          (result.averageUltChargeTime ?? 0) + stat.value;
+        counts.ultCharge = (counts.ultCharge ?? 0) + 1;
+        break;
+      case CalculatedStatType.AVERAGE_TIME_TO_USE_ULT:
+        result.averageTimeToUseUlt =
+          (result.averageTimeToUseUlt ?? 0) + stat.value;
+        counts.timeToUseUlt = (counts.timeToUseUlt ?? 0) + 1;
+        break;
+      case CalculatedStatType.AVERAGE_DROUGHT_TIME:
+        result.averageDroughtTime =
+          (result.averageDroughtTime ?? 0) + stat.value;
+        counts.drought = (counts.drought ?? 0) + 1;
+        break;
+      case CalculatedStatType.KILLS_PER_ULTIMATE:
+        result.killsPerUltimate = (result.killsPerUltimate ?? 0) + stat.value;
+        counts.killsPerUlt = (counts.killsPerUlt ?? 0) + 1;
+        break;
+      case CalculatedStatType.DUEL_WINRATE_PERCENTAGE:
+        result.duelWinratePercentage =
+          (result.duelWinratePercentage ?? 0) + stat.value;
+        counts.duelWinrate = (counts.duelWinrate ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIGHT_REVERSAL_PERCENTAGE:
+        result.fightReversalPercentage =
+          (result.fightReversalPercentage ?? 0) + stat.value;
+        counts.fightReversal = (counts.fightReversal ?? 0) + 1;
+        break;
+    }
+  });
+
+  if (counts.fletaDeadlift) {
+    result.fletaDeadliftPercentage =
+      (result.fletaDeadliftPercentage ?? 0) / counts.fletaDeadlift;
+  }
+  if (counts.firstPick) {
+    result.firstPickPercentage =
+      (result.firstPickPercentage ?? 0) / counts.firstPick;
+  }
+  if (counts.firstDeath) {
+    result.firstDeathPercentage =
+      (result.firstDeathPercentage ?? 0) / counts.firstDeath;
+  }
+  if (counts.mvpScore) {
+    result.mvpScore = (result.mvpScore ?? 0) / counts.mvpScore;
+  }
+  if (counts.ultCharge) {
+    result.averageUltChargeTime =
+      (result.averageUltChargeTime ?? 0) / counts.ultCharge;
+  }
+  if (counts.timeToUseUlt) {
+    result.averageTimeToUseUlt =
+      (result.averageTimeToUseUlt ?? 0) / counts.timeToUseUlt;
+  }
+  if (counts.drought) {
+    result.averageDroughtTime =
+      (result.averageDroughtTime ?? 0) / counts.drought;
+  }
+  if (counts.killsPerUlt) {
+    result.killsPerUltimate =
+      (result.killsPerUltimate ?? 0) / counts.killsPerUlt;
+  }
+  if (counts.duelWinrate) {
+    result.duelWinratePercentage =
+      (result.duelWinratePercentage ?? 0) / counts.duelWinrate;
+  }
+  if (counts.fightReversal) {
+    result.fightReversalPercentage =
+      (result.fightReversalPercentage ?? 0) / counts.fightReversal;
+  }
+
+  return result;
+}
+
+function calculateVarianceMetrics(
+  perMapStats: PlayerStat[],
+  perMapCalculatedStats: CalculatedStat[][]
+): {
+  eliminationsPer10StdDev: number;
+  deathsPer10StdDev: number;
+  allDamagePer10StdDev: number;
+  healingDealtPer10StdDev: number;
+  firstPickPercentageStdDev: number;
+  consistencyScore: number;
+} {
+  if (perMapStats.length < 2) {
+    return {
+      eliminationsPer10StdDev: 0,
+      deathsPer10StdDev: 0,
+      allDamagePer10StdDev: 0,
+      healingDealtPer10StdDev: 0,
+      firstPickPercentageStdDev: 0,
+      consistencyScore: 0,
+    };
+  }
+
+  const eliminationsPer10Values = perMapStats.map((stat) =>
+    calculatePer10(stat.eliminations, stat.hero_time_played)
+  );
+  const deathsPer10Values = perMapStats.map((stat) =>
+    calculatePer10(stat.deaths, stat.hero_time_played)
+  );
+  const allDamagePer10Values = perMapStats.map((stat) =>
+    calculatePer10(stat.all_damage_dealt, stat.hero_time_played)
+  );
+  const healingDealtPer10Values = perMapStats.map((stat) =>
+    calculatePer10(stat.healing_dealt, stat.hero_time_played)
+  );
+
+  const firstPickPercentageValues = perMapCalculatedStats
+    .map((stats) => {
+      const firstPickStat = stats.find(
+        (s) => s.stat === CalculatedStatType.FIRST_PICK_PERCENTAGE
+      );
+      return firstPickStat?.value ?? 0;
+    })
+    .filter((v) => v > 0);
+
+  const eliminationsPer10Mean = calculateMean(eliminationsPer10Values);
+  const deathsPer10Mean = calculateMean(deathsPer10Values);
+  const allDamagePer10Mean = calculateMean(allDamagePer10Values);
+  const healingDealtPer10Mean = calculateMean(healingDealtPer10Values);
+  const firstPickPercentageMean = calculateMean(firstPickPercentageValues);
+
+  const eliminationsPer10StdDev = calculateStandardDeviation(
+    eliminationsPer10Values,
+    eliminationsPer10Mean
+  );
+  const deathsPer10StdDev = calculateStandardDeviation(
+    deathsPer10Values,
+    deathsPer10Mean
+  );
+  const allDamagePer10StdDev = calculateStandardDeviation(
+    allDamagePer10Values,
+    allDamagePer10Mean
+  );
+  const healingDealtPer10StdDev = calculateStandardDeviation(
+    healingDealtPer10Values,
+    healingDealtPer10Mean
+  );
+  const firstPickPercentageStdDev =
+    firstPickPercentageValues.length > 1
+      ? calculateStandardDeviation(
+          firstPickPercentageValues,
+          firstPickPercentageMean
+        )
+      : 0;
+
+  const coefficientOfVariations = [
+    eliminationsPer10Mean > 0
+      ? eliminationsPer10StdDev / eliminationsPer10Mean
+      : 0,
+    deathsPer10Mean > 0 ? deathsPer10StdDev / deathsPer10Mean : 0,
+    allDamagePer10Mean > 0 ? allDamagePer10StdDev / allDamagePer10Mean : 0,
+    healingDealtPer10Mean > 0
+      ? healingDealtPer10StdDev / healingDealtPer10Mean
+      : 0,
+  ].filter((cv) => cv > 0);
+
+  const averageCV =
+    coefficientOfVariations.length > 0
+      ? calculateMean(coefficientOfVariations)
+      : 0;
+
+  const consistencyScore =
+    averageCV > 0 ? Math.max(0, Math.min(100, (1 - averageCV) * 100)) : 0;
+
+  return {
+    eliminationsPer10StdDev,
+    deathsPer10StdDev,
+    allDamagePer10StdDev,
+    healingDealtPer10StdDev,
+    firstPickPercentageStdDev,
+    consistencyScore,
+  };
+}
+
+export function aggregatePlayerStats(
+  stats: PlayerStat[],
+  calculatedStats: CalculatedStat[],
+  perMapStats?: PlayerStat[],
+  perMapCalculatedStats?: CalculatedStat[][]
+): AggregatedStats {
+  const totals = stats.reduce(
+    (acc, stat) => {
+      acc.eliminations += stat.eliminations;
+      acc.finalBlows += stat.final_blows;
+      acc.deaths += stat.deaths;
+      acc.allDamageDealt += stat.all_damage_dealt;
+      acc.barrierDamageDealt += stat.barrier_damage_dealt;
+      acc.heroDamageDealt += stat.hero_damage_dealt;
+      acc.healingDealt += stat.healing_dealt;
+      acc.healingReceived += stat.healing_received;
+      acc.selfHealing += stat.self_healing;
+      acc.damageTaken += stat.damage_taken;
+      acc.damageBlocked += stat.damage_blocked;
+      acc.defensiveAssists += stat.defensive_assists;
+      acc.offensiveAssists += stat.offensive_assists;
+      acc.ultimatesEarned += stat.ultimates_earned;
+      acc.ultimatesUsed += stat.ultimates_used;
+      acc.multikillBest = Math.max(acc.multikillBest, stat.multikill_best);
+      acc.multikills += stat.multikills;
+      acc.soloKills += stat.solo_kills;
+      acc.objectiveKills += stat.objective_kills;
+      acc.environmentalKills += stat.environmental_kills;
+      acc.environmentalDeaths += stat.environmental_deaths;
+      acc.criticalHits += stat.critical_hits;
+      acc.shotsFired += stat.shots_fired;
+      acc.shotsHit += stat.shots_hit;
+      acc.shotsMissed += stat.shots_missed;
+      acc.scopedShots += stat.scoped_shots;
+      acc.scopedShotsHit += stat.scoped_shots_hit;
+      acc.scopedCriticalHitKills += stat.scoped_critical_hit_kills;
+      acc.heroTimePlayed += stat.hero_time_played;
+      return acc;
+    },
+    {
+      eliminations: 0,
+      finalBlows: 0,
+      deaths: 0,
+      allDamageDealt: 0,
+      barrierDamageDealt: 0,
+      heroDamageDealt: 0,
+      healingDealt: 0,
+      healingReceived: 0,
+      selfHealing: 0,
+      damageTaken: 0,
+      damageBlocked: 0,
+      defensiveAssists: 0,
+      offensiveAssists: 0,
+      ultimatesEarned: 0,
+      ultimatesUsed: 0,
+      multikillBest: 0,
+      multikills: 0,
+      soloKills: 0,
+      objectiveKills: 0,
+      environmentalKills: 0,
+      environmentalDeaths: 0,
+      criticalHits: 0,
+      shotsFired: 0,
+      shotsHit: 0,
+      shotsMissed: 0,
+      scopedShots: 0,
+      scopedShotsHit: 0,
+      scopedCriticalHitKills: 0,
+      heroTimePlayed: 0,
+    }
+  );
+
+  const calculatedAggregates = aggregateCalculatedStats(calculatedStats);
+
+  const varianceMetrics =
+    perMapStats && perMapCalculatedStats
+      ? calculateVarianceMetrics(perMapStats, perMapCalculatedStats)
+      : {
+          eliminationsPer10StdDev: 0,
+          deathsPer10StdDev: 0,
+          allDamagePer10StdDev: 0,
+          healingDealtPer10StdDev: 0,
+          firstPickPercentageStdDev: 0,
+          consistencyScore: 0,
+        };
+
+  return {
+    ...totals,
+    eliminationsPer10: calculatePer10(
+      totals.eliminations,
+      totals.heroTimePlayed
+    ),
+    finalBlowsPer10: calculatePer10(totals.finalBlows, totals.heroTimePlayed),
+    deathsPer10: calculatePer10(totals.deaths, totals.heroTimePlayed),
+    allDamagePer10: calculatePer10(
+      totals.allDamageDealt,
+      totals.heroTimePlayed
+    ),
+    heroDamagePer10: calculatePer10(
+      totals.heroDamageDealt,
+      totals.heroTimePlayed
+    ),
+    healingDealtPer10: calculatePer10(
+      totals.healingDealt,
+      totals.heroTimePlayed
+    ),
+    healingReceivedPer10: calculatePer10(
+      totals.healingReceived,
+      totals.heroTimePlayed
+    ),
+    damageTakenPer10: calculatePer10(totals.damageTaken, totals.heroTimePlayed),
+    damageBlockedPer10: calculatePer10(
+      totals.damageBlocked,
+      totals.heroTimePlayed
+    ),
+    ultimatesEarnedPer10: calculatePer10(
+      totals.ultimatesEarned,
+      totals.heroTimePlayed
+    ),
+    ultimatesUsedPer10: calculatePer10(
+      totals.ultimatesUsed,
+      totals.heroTimePlayed
+    ),
+    soloKillsPer10: calculatePer10(totals.soloKills, totals.heroTimePlayed),
+    objectiveKillsPer10: calculatePer10(
+      totals.objectiveKills,
+      totals.heroTimePlayed
+    ),
+    defensiveAssistsPer10: calculatePer10(
+      totals.defensiveAssists,
+      totals.heroTimePlayed
+    ),
+    offensiveAssistsPer10: calculatePer10(
+      totals.offensiveAssists,
+      totals.heroTimePlayed
+    ),
+    environmentalKillsPer10: calculatePer10(
+      totals.environmentalKills,
+      totals.heroTimePlayed
+    ),
+    environmentalDeathsPer10: calculatePer10(
+      totals.environmentalDeaths,
+      totals.heroTimePlayed
+    ),
+    multikillsPer10: calculatePer10(totals.multikills, totals.heroTimePlayed),
+    barrierDamagePer10: calculatePer10(
+      totals.barrierDamageDealt,
+      totals.heroTimePlayed
+    ),
+    selfHealingPer10: calculatePer10(totals.selfHealing, totals.heroTimePlayed),
+    firstPicksPer10: calculatePer10(
+      calculatedAggregates.firstPickCount ?? 0,
+      totals.heroTimePlayed
+    ),
+    firstDeathsPer10: calculatePer10(
+      calculatedAggregates.firstDeathCount ?? 0,
+      totals.heroTimePlayed
+    ),
+    mapMvpRate:
+      perMapCalculatedStats && perMapCalculatedStats.length > 0
+        ? ((calculatedAggregates.mapMvpCount ?? 0) /
+            perMapCalculatedStats.length) *
+          100
+        : stats.length > 0
+          ? ((calculatedAggregates.mapMvpCount ?? 0) / stats.length) * 100
+          : 0,
+    ajaxPer10: calculatePer10(
+      calculatedAggregates.ajaxCount ?? 0,
+      totals.heroTimePlayed
+    ),
+    weaponAccuracy: calculatePercentage(totals.shotsHit, totals.shotsFired),
+    criticalHitAccuracy: calculatePercentage(
+      totals.criticalHits,
+      totals.shotsHit
+    ),
+    scopedAccuracy: calculatePercentage(
+      totals.scopedShotsHit,
+      totals.scopedShots
+    ),
+    scopedCriticalHitAccuracy: calculatePercentage(
+      totals.scopedCriticalHitKills,
+      totals.scopedShotsHit
+    ),
+    fletaDeadliftPercentage: calculatedAggregates.fletaDeadliftPercentage ?? 0,
+    firstPickPercentage: calculatedAggregates.firstPickPercentage ?? 0,
+    firstPickCount: calculatedAggregates.firstPickCount ?? 0,
+    firstDeathPercentage: calculatedAggregates.firstDeathPercentage ?? 0,
+    firstDeathCount: calculatedAggregates.firstDeathCount ?? 0,
+    mvpScore: calculatedAggregates.mvpScore ?? 0,
+    mapMvpCount: calculatedAggregates.mapMvpCount ?? 0,
+    ajaxCount: calculatedAggregates.ajaxCount ?? 0,
+    averageUltChargeTime: calculatedAggregates.averageUltChargeTime ?? 0,
+    averageTimeToUseUlt: calculatedAggregates.averageTimeToUseUlt ?? 0,
+    averageDroughtTime: calculatedAggregates.averageDroughtTime ?? 0,
+    killsPerUltimate: calculatedAggregates.killsPerUltimate ?? 0,
+    duelWinratePercentage: calculatedAggregates.duelWinratePercentage ?? 0,
+    fightReversalPercentage: calculatedAggregates.fightReversalPercentage ?? 0,
+    ...varianceMetrics,
+  };
+}
+
+export function calculateTrends(
+  perMapStats: PlayerStat[],
+  perMapCalculatedStats: CalculatedStat[][]
+): TrendsAnalysis {
+  if (perMapStats.length < 3) {
+    return {
+      improvingMetrics: [],
+      decliningMetrics: [],
+    };
+  }
+
+  const midpoint = Math.floor(perMapStats.length / 2);
+  const firstHalfStats = perMapStats.slice(0, midpoint);
+  const secondHalfStats = perMapStats.slice(midpoint);
+
+  const firstHalfCalculated = perMapCalculatedStats.slice(0, midpoint).flat();
+  const secondHalfCalculated = perMapCalculatedStats.slice(midpoint).flat();
+
+  const earlyPerformance = aggregatePlayerStats(
+    firstHalfStats,
+    firstHalfCalculated
+  );
+  const latePerformance = aggregatePlayerStats(
+    secondHalfStats,
+    secondHalfCalculated
+  );
+
+  const metricComparisons = [
+    {
+      name: "Eliminations per 10",
+      early: earlyPerformance.eliminationsPer10,
+      late: latePerformance.eliminationsPer10,
+    },
+    {
+      name: "Deaths per 10",
+      early: earlyPerformance.deathsPer10,
+      late: latePerformance.deathsPer10,
+      invertImprovement: true,
+    },
+    {
+      name: "Damage Dealt per 10",
+      early: earlyPerformance.heroDamagePer10,
+      late: latePerformance.heroDamagePer10,
+    },
+    {
+      name: "Damage Taken per 10",
+      early: earlyPerformance.damageTakenPer10,
+      late: latePerformance.damageTakenPer10,
+      invertImprovement: true,
+    },
+    {
+      name: "First Death %",
+      early: earlyPerformance.firstDeathPercentage,
+      late: latePerformance.firstDeathPercentage,
+      invertImprovement: true,
+    },
+    {
+      name: "First Pick %",
+      early: earlyPerformance.firstPickPercentage,
+      late: latePerformance.firstPickPercentage,
+    },
+    {
+      name: "MVP Score",
+      early: earlyPerformance.mvpScore,
+      late: latePerformance.mvpScore,
+    },
+    {
+      name: "Fight Reversal %",
+      early: earlyPerformance.fightReversalPercentage,
+      late: latePerformance.fightReversalPercentage,
+    },
+    {
+      name: "Fleta Deadlift %",
+      early: earlyPerformance.fletaDeadliftPercentage,
+      late: latePerformance.fletaDeadliftPercentage,
+    },
+    {
+      name: "Kills per Ultimate",
+      early: earlyPerformance.killsPerUltimate,
+      late: latePerformance.killsPerUltimate,
+    },
+  ];
+
+  const improvingMetrics: {
+    metric: string;
+    change: number;
+    changePercentage: number;
+  }[] = [];
+  const decliningMetrics: {
+    metric: string;
+    change: number;
+    changePercentage: number;
+  }[] = [];
+
+  metricComparisons.forEach((comparison) => {
+    const change = comparison.late - comparison.early;
+    const changePercentage =
+      comparison.early !== 0
+        ? ((comparison.late - comparison.early) / comparison.early) * 100
+        : 0;
+
+    const isImprovement = comparison.invertImprovement
+      ? change < 0
+      : change > 0;
+
+    if (Math.abs(changePercentage) > 5) {
+      if (isImprovement) {
+        improvingMetrics.push({
+          metric: comparison.name,
+          change,
+          changePercentage,
+        });
+      } else {
+        decliningMetrics.push({
+          metric: comparison.name,
+          change,
+          changePercentage,
+        });
+      }
+    }
+  });
+
+  return {
+    improvingMetrics,
+    decliningMetrics,
+    earlyPerformance: perMapStats.length >= 4 ? earlyPerformance : undefined,
+    latePerformance: perMapStats.length >= 4 ? latePerformance : undefined,
+  };
+}
+
+async function getComparisonStatsFn(
+  mapIds: number[],
+  playerName: string,
+  heroes?: HeroName[]
+): Promise<ComparisonStats> {
+  if (mapIds.length === 0) {
+    throw new Error("At least one map must be provided");
+  }
+
+  const maps = await prisma.map.findMany({
+    where: { id: { in: mapIds } },
+    include: {
+      Scrim: true,
+      mapData: {
+        include: {
+          match_start: true,
+        },
+      },
+    },
+  });
+
+  const mapDataIds = maps.flatMap((map) => map.mapData.map((md) => md.id));
+
+  if (mapDataIds.length === 0) {
+    throw new Error("No map data found for the provided map IDs");
+  }
+
+  // NOTE: PlayerStat.MapDataId actually stores Map.id, not MapData.id
+  // This is confusing but confirmed by getTeamPlayersFn
+  const finalRoundStats = removeDuplicateRows(
+    await prisma.$queryRaw<PlayerStat[]>`
+      WITH maxTime AS (
+        SELECT
+            MAX("match_time") AS max_time,
+            "MapDataId"
+        FROM
+            "PlayerStat"
+        WHERE
+            "MapDataId" IN (${Prisma.join(mapIds)})
+        GROUP BY
+            "MapDataId"
+      )
+      SELECT
+          ps.*
+      FROM
+          "PlayerStat" ps
+          INNER JOIN maxTime m ON ps."match_time" = m.max_time AND ps."MapDataId" = m."MapDataId"
+      WHERE
+          ps."MapDataId" IN (${Prisma.join(mapIds)})
+          AND ps."player_name" ILIKE ${playerName}
+          ${heroes && heroes.length > 0 ? Prisma.sql`AND ps."player_hero" IN (${Prisma.join(heroes)})` : Prisma.empty}
+    `
+  );
+
+  // CalculatedStat.MapDataId likely stores Map.id (not MapData.id), same as PlayerStat
+  // This is confusing naming but matches the PlayerStat pattern
+  const calculatedStatsWhere: Prisma.CalculatedStatWhereInput = {
+    MapDataId: { in: mapIds }, // Use mapIds, not mapDataIds!
+    playerName: { equals: playerName, mode: "insensitive" },
+    ...(heroes && heroes.length > 0 ? { hero: { in: heroes } } : {}),
+  };
+
+  const calculatedStats = await prisma.calculatedStat.findMany({
+    where: calculatedStatsWhere,
+  });
+
+  // Organize calculated stats by their MapDataId value
+  const calculatedStatsByMapDataId: Record<number, CalculatedStat[]> = {};
+  calculatedStats.forEach((stat) => {
+    if (!calculatedStatsByMapDataId[stat.MapDataId]) {
+      calculatedStatsByMapDataId[stat.MapDataId] = [];
+    }
+    calculatedStatsByMapDataId[stat.MapDataId].push(stat);
+  });
+
+  // PlayerStat.MapDataId already contains Map.id, so use it directly
+  const statsByMapId: Record<number, PlayerStat[]> = {};
+  finalRoundStats.forEach((stat) => {
+    if (!stat.MapDataId) return;
+    const mapId = stat.MapDataId; // Already the Map ID
+    if (!statsByMapId[mapId]) {
+      statsByMapId[mapId] = [];
+    }
+    statsByMapId[mapId].push(stat);
+  });
+
+  const perMapBreakdown: MapBreakdown[] = [];
+  for (const map of maps) {
+    const mapStats = statsByMapId[map.id] || [];
+
+    // CalculatedStat.MapDataId stores MapData.id, so we need to check all mapData for this map
+    const mapCalcStats: CalculatedStat[] = [];
+    for (const md of map.mapData) {
+      const mdStats = calculatedStatsByMapDataId[md.id] || [];
+      mapCalcStats.push(...mdStats);
+    }
+
+    if (mapStats.length === 0) continue;
+
+    // Use the first mapData for metadata (map name, type, etc.)
+    const firstMapData = map.mapData[0];
+    const matchStart = firstMapData?.match_start[0];
+    const heroesPlayed = Array.from(
+      new Set(mapStats.map((s) => s.player_hero))
+    );
+
+    // Aggregate stats across all heroes played on this map
+    const aggregatedMapStats = mapStats.reduce(
+      (acc, stat) => ({
+        eliminations: acc.eliminations + stat.eliminations,
+        deaths: acc.deaths + stat.deaths,
+        all_damage_dealt: acc.all_damage_dealt + stat.all_damage_dealt,
+        healing_dealt: acc.healing_dealt + stat.healing_dealt,
+        damage_blocked: acc.damage_blocked + stat.damage_blocked,
+        hero_time_played: acc.hero_time_played + stat.hero_time_played,
+      }),
+      {
+        eliminations: 0,
+        deaths: 0,
+        all_damage_dealt: 0,
+        healing_dealt: 0,
+        damage_blocked: 0,
+        hero_time_played: 0,
+      }
+    );
+
+    // Calculate per-10 stats for this map
+    const timePlayed = aggregatedMapStats.hero_time_played || 0;
+    const statsWithPer10 = {
+      ...mapStats[0], // Use first stat for non-aggregated fields
+      ...aggregatedMapStats,
+      eliminationsPer10: calculatePer10(
+        aggregatedMapStats.eliminations,
+        timePlayed
+      ),
+      deathsPer10: calculatePer10(aggregatedMapStats.deaths, timePlayed),
+      allDamagePer10: calculatePer10(
+        aggregatedMapStats.all_damage_dealt,
+        timePlayed
+      ),
+      healingDealtPer10: calculatePer10(
+        aggregatedMapStats.healing_dealt,
+        timePlayed
+      ),
+      damageBlockedPer10: calculatePer10(
+        aggregatedMapStats.damage_blocked,
+        timePlayed
+      ),
+    };
+
+    perMapBreakdown.push({
+      mapId: map.id,
+      mapDataId: firstMapData?.id ?? 0,
+      mapName: matchStart?.map_name || map.name,
+      mapType: matchStart?.map_type || ("Control" as MapType),
+      scrimId: map.scrimId ?? 0,
+      scrimName: map.Scrim?.name ?? "Unknown",
+      date: map.Scrim?.date ?? map.createdAt,
+      replayCode: map.replayCode,
+      heroes: heroesPlayed as HeroName[],
+      stats: statsWithPer10,
+      calculatedStats: mapCalcStats,
+    });
+  }
+
+  perMapBreakdown.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+  const aggregated = aggregatePlayerStats(
+    finalRoundStats,
+    calculatedStats,
+    perMapBreakdown.map((m) => m.stats),
+    perMapBreakdown.map((m) => m.calculatedStats)
+  );
+
+  const trends =
+    perMapBreakdown.length >= 3
+      ? calculateTrends(
+          perMapBreakdown.map((m) => m.stats),
+          perMapBreakdown.map((m) => m.calculatedStats)
+        )
+      : undefined;
+
+  let heroBreakdown: Record<string, AggregatedStats> | undefined;
+  if (!heroes || heroes.length > 1) {
+    const heroesInvolved = Array.from(
+      new Set(finalRoundStats.map((s) => s.player_hero))
+    );
+    if (heroesInvolved.length > 1) {
+      heroBreakdown = {};
+      for (const hero of heroesInvolved) {
+        const heroStats = finalRoundStats.filter((s) => s.player_hero === hero);
+        const heroCalcStats = calculatedStats.filter((s) => s.hero === hero);
+        heroBreakdown[hero] = aggregatePlayerStats(heroStats, heroCalcStats);
+      }
+    }
+  }
+
+  return {
+    playerName,
+    filteredHeroes: heroes ?? [],
+    mapCount: perMapBreakdown.length,
+    mapIds,
+    aggregated,
+    perMapBreakdown,
+    trends,
+    heroBreakdown,
+  };
+}
+
+export const getComparisonStats = cache(getComparisonStatsFn);
+
+async function getAvailableMapsForComparisonFn(params: {
+  teamId: number;
+  playerName: string;
+  dateFrom?: Date;
+  dateTo?: Date;
+  mapType?: MapType;
+  heroes?: HeroName[];
+}): Promise<
+  {
+    id: number;
+    name: string;
+    scrimId: number;
+    scrimName: string;
+    date: Date;
+    mapType: MapType;
+    replayCode: string | null;
+    playerHeroes: HeroName[];
+  }[]
+> {
+  const { teamId, playerName, dateFrom, dateTo, mapType, heroes } = params;
+
+  const dateFilter =
+    dateFrom || dateTo
+      ? {
+          date: {
+            ...(dateFrom ? { gte: dateFrom } : {}),
+            ...(dateTo ? { lte: dateTo } : {}),
+          },
+        }
+      : {};
+
+  const scrims = await prisma.scrim.findMany({
+    where: {
+      teamId,
+      ...dateFilter,
+    },
+    include: {
+      maps: {
+        include: {
+          mapData: {
+            include: {
+              match_start: true,
+              player_stat: {
+                where: {
+                  player_name: { equals: playerName, mode: "insensitive" },
+                  ...(heroes && heroes.length > 0
+                    ? { player_hero: { in: heroes } }
+                    : {}),
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const availableMaps: {
+    id: number;
+    name: string;
+    scrimId: number;
+    scrimName: string;
+    date: Date;
+    mapType: MapType;
+    replayCode: string | null;
+    playerHeroes: HeroName[];
+  }[] = [];
+
+  for (const scrim of scrims) {
+    for (const map of scrim.maps) {
+      const playerStats = map.mapData.flatMap((md) => md.player_stat);
+      if (playerStats.length === 0) continue;
+
+      const matchStart = map.mapData[0]?.match_start[0];
+      if (!matchStart) continue;
+
+      if (mapType && matchStart.map_type !== mapType) continue;
+
+      const heroesPlayed = Array.from(
+        new Set(playerStats.map((s) => s.player_hero))
+      ) as HeroName[];
+
+      availableMaps.push({
+        id: map.id,
+        name: matchStart.map_name,
+        scrimId: scrim.id,
+        scrimName: scrim.name,
+        date: scrim.date,
+        mapType: matchStart.map_type,
+        replayCode: map.replayCode,
+        playerHeroes: heroesPlayed,
+      });
+    }
+  }
+
+  availableMaps.sort((a, b) => b.date.getTime() - a.date.getTime());
+
+  return availableMaps;
+}
+
+export const getAvailableMapsForComparison = cache(
+  getAvailableMapsForComparisonFn
+);
+
+async function getTeamPlayersFn(
+  teamId: number,
+  mapIds?: number[]
+): Promise<{ name: string; mapCount: number }[]> {
+  if (mapIds && mapIds.length > 0) {
+    // Verify the maps belong to this team and get their IDs
+    const maps = await prisma.map.findMany({
+      where: {
+        id: { in: mapIds },
+        Scrim: { teamId },
+      },
+      select: { id: true },
+    });
+
+    const validMapIds = maps.map((m) => m.id);
+
+    if (validMapIds.length === 0) {
+      return [];
+    }
+
+    // NOTE: PlayerStat.MapDataId actually stores Map.id, not MapData.id
+    // This is confusing but confirmed by runtime data
+    const allPlayerStats = await prisma.playerStat.findMany({
+      where: { MapDataId: { in: validMapIds } },
+      select: {
+        player_name: true,
+        MapDataId: true,
+      },
+    });
+
+    // Count unique maps per player
+    const playerMapCounts = new Map<string, Set<number>>();
+
+    for (const stat of allPlayerStats) {
+      const mapId = stat.MapDataId;
+      if (!mapId) continue;
+
+      const playerName = stat.player_name;
+      if (!playerMapCounts.has(playerName)) {
+        playerMapCounts.set(playerName, new Set());
+      }
+      playerMapCounts.get(playerName)!.add(mapId);
+    }
+
+    const players = Array.from(playerMapCounts.entries())
+      .map(([name, mapSet]) => ({ name, mapCount: mapSet.size }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    return players;
+  }
+
+  const scrims = await prisma.scrim.findMany({
+    where: { teamId },
+    select: {
+      maps: {
+        select: {
+          mapData: {
+            select: {
+              player_stat: {
+                select: {
+                  player_name: true,
+                },
+                distinct: ["player_name"],
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const playerMapCounts = new Map<string, number>();
+
+  for (const scrim of scrims) {
+    for (const map of scrim.maps) {
+      for (const mapData of map.mapData) {
+        for (const stat of mapData.player_stat) {
+          const currentCount = playerMapCounts.get(stat.player_name) ?? 0;
+          playerMapCounts.set(stat.player_name, currentCount + 1);
+        }
+      }
+    }
+  }
+
+  const players = Array.from(playerMapCounts.entries())
+    .map(([name, mapCount]) => ({ name, mapCount }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  return players;
+}
+
+export const getTeamPlayers = cache(getTeamPlayersFn);
diff --git a/src/data/map-group-dto.ts b/src/data/map-group-dto.ts
new file mode 100644
index 000000000..83540a268
--- /dev/null
+++ b/src/data/map-group-dto.ts
@@ -0,0 +1,110 @@
+import "server-only";
+
+import prisma from "@/lib/prisma";
+import type { MapGroup } from "@prisma/client";
+import { cache } from "react";
+
+/**
+ * Get all map groups for a team
+ */
+export const getMapGroupsForTeam = cache(
+  async (teamId: number): Promise<MapGroup[]> => {
+    return await prisma.mapGroup.findMany({
+      where: {
+        teamId,
+      },
+      orderBy: {
+        createdAt: "desc",
+      },
+    });
+  }
+);
+
+/**
+ * Get a specific map group by ID
+ */
+export const getMapGroupById = cache(
+  async (groupId: number): Promise<MapGroup | null> => {
+    return await prisma.mapGroup.findUnique({
+      where: {
+        id: groupId,
+      },
+    });
+  }
+);
+
+/**
+ * Create a new map group
+ */
+export async function createMapGroup(data: {
+  name: string;
+  description?: string;
+  teamId: number;
+  mapIds: number[];
+  category?: string;
+  createdBy: string;
+}): Promise<MapGroup> {
+  return await prisma.mapGroup.create({
+    data: {
+      name: data.name,
+      description: data.description,
+      teamId: data.teamId,
+      mapIds: data.mapIds,
+      category: data.category,
+      createdBy: data.createdBy,
+    },
+  });
+}
+
+/**
+ * Update an existing map group
+ */
+export async function updateMapGroup(
+  groupId: number,
+  data: {
+    name?: string;
+    description?: string;
+    mapIds?: number[];
+    category?: string;
+  }
+): Promise<MapGroup> {
+  return await prisma.mapGroup.update({
+    where: {
+      id: groupId,
+    },
+    data: {
+      name: data.name,
+      description: data.description,
+      mapIds: data.mapIds,
+      category: data.category,
+    },
+  });
+}
+
+/**
+ * Delete a map group
+ */
+export async function deleteMapGroup(groupId: number): Promise<void> {
+  await prisma.mapGroup.delete({
+    where: {
+      id: groupId,
+    },
+  });
+}
+
+/**
+ * Get map groups by category
+ */
+export const getMapGroupsByCategory = cache(
+  async (teamId: number, category: string): Promise<MapGroup[]> => {
+    return await prisma.mapGroup.findMany({
+      where: {
+        teamId,
+        category,
+      },
+      orderBy: {
+        name: "asc",
+      },
+    });
+  }
+);
diff --git a/src/data/scrim-overview-dto.ts b/src/data/scrim-overview-dto.ts
new file mode 100644
index 000000000..3c8770a85
--- /dev/null
+++ b/src/data/scrim-overview-dto.ts
@@ -0,0 +1,1053 @@
+import "server-only";
+
+import type { TrendsAnalysis } from "@/data/comparison-dto";
+import { aggregatePlayerStats, calculateTrends } from "@/data/comparison-dto";
+import { getTeamRoster } from "@/data/team-shared-data";
+import prisma from "@/lib/prisma";
+import type { ValidStatColumn } from "@/lib/stat-percentiles";
+import {
+  groupEventsIntoFights,
+  mercyRezToKillEvent,
+  removeDuplicateRows,
+  type Fight,
+} from "@/lib/utils";
+import { calculateWinner } from "@/lib/winrate";
+import type { HeroName } from "@/types/heroes";
+import { heroRoleMapping } from "@/types/heroes";
+import {
+  Prisma,
+  type CalculatedStat,
+  type Kill,
+  type MatchStart,
+  type ObjectiveCaptured,
+  type PlayerStat,
+  type RoundEnd,
+} from "@prisma/client";
+import { cache } from "react";
+
+export type ScrimOutlier = {
+  stat: ValidStatColumn;
+  zScore: number;
+  percentile: number;
+  direction: "high" | "low";
+  label: string;
+};
+
+export type PlayerMapPerformance = {
+  mapName: string;
+  mapIndex: number;
+  kdRatio: number;
+  eliminationsPer10: number;
+  heroDamagePer10: number;
+  healingDealtPer10: number;
+  firstDeathRate: number;
+  teamFirstDeathRate: number;
+};
+
+export type PlayerScrimPerformance = {
+  playerName: string;
+  primaryHero: HeroName;
+  heroes: HeroName[];
+  mapsPlayed: number;
+  eliminations: number;
+  deaths: number;
+  heroDamageDealt: number;
+  healingDealt: number;
+  heroTimePlayed: number;
+  kdRatio: number;
+  eliminationsPer10: number;
+  deathsPer10: number;
+  heroDamagePer10: number;
+  healingDealtPer10: number;
+  firstDeathCount: number;
+  firstDeathRate: number;
+  teamFirstDeathCount: number;
+  teamFirstDeathRate: number;
+  perMapPerformance: PlayerMapPerformance[];
+  zScores: Partial<Record<ValidStatColumn, number>>;
+  outliers: ScrimOutlier[];
+  trend: "improving" | "stable" | "declining";
+  trendData?: TrendsAnalysis;
+};
+
+export type ScrimInsight = {
+  type:
+    | "mvp"
+    | "most_improved"
+    | "most_declined"
+    | "outlier_positive"
+    | "outlier_negative";
+  headline: string;
+  playerName?: string;
+};
+
+export type MapResult = {
+  mapId: number;
+  mapName: string;
+  winner: "our_team" | "opponent" | "draw";
+};
+
+export type ScrimTeamTotals = {
+  eliminations: number;
+  deaths: number;
+  heroDamage: number;
+  healing: number;
+  kdRatio: number;
+};
+
+export type ScrimOverviewData = {
+  mapCount: number;
+  wins: number;
+  losses: number;
+  draws: number;
+  mapResults: MapResult[];
+  teamPlayers: PlayerScrimPerformance[];
+  insights: ScrimInsight[];
+  teamTotals: ScrimTeamTotals;
+};
+
+const STAT_LABELS: Record<ValidStatColumn, string> = {
+  eliminations: "Eliminations",
+  final_blows: "Final Blows",
+  deaths: "Deaths",
+  hero_damage_dealt: "Hero Damage",
+  healing_dealt: "Healing",
+  healing_received: "Healing Received",
+  damage_blocked: "Damage Blocked",
+  damage_taken: "Damage Taken",
+  solo_kills: "Solo Kills",
+  ultimates_earned: "Ults Earned",
+  ultimates_used: "Ults Used",
+  objective_kills: "Objective Kills",
+  offensive_assists: "Offensive Assists",
+  defensive_assists: "Defensive Assists",
+};
+
+function statLabelFor(stat: ValidStatColumn): string {
+  return STAT_LABELS[stat] ?? stat;
+}
+
+function statsForHeroRole(
+  primaryHero: HeroName,
+  heroDamageDealt: number,
+  healingDealt: number,
+  damageBlocked: number,
+  deaths: number,
+  eliminations: number
+): { stat: ValidStatColumn; value: number }[] {
+  const role = heroRoleMapping[primaryHero];
+  const base: { stat: ValidStatColumn; value: number }[] = [
+    { stat: "eliminations", value: eliminations },
+    { stat: "deaths", value: deaths },
+    { stat: "hero_damage_dealt", value: heroDamageDealt },
+  ];
+
+  if (role === "Support") {
+    base.push({ stat: "healing_dealt", value: healingDealt });
+  } else if (role === "Tank") {
+    base.push({ stat: "damage_blocked", value: damageBlocked });
+  }
+
+  return base;
+}
+
+function determineTrend(
+  trendData?: TrendsAnalysis
+): "improving" | "stable" | "declining" {
+  if (!trendData) return "stable";
+  const improving = trendData.improvingMetrics.length;
+  const declining = trendData.decliningMetrics.length;
+  if (improving > declining && improving > 0) return "improving";
+  if (declining > improving && declining > 0) return "declining";
+  return "stable";
+}
+
+function generateInsights(players: PlayerScrimPerformance[]): ScrimInsight[] {
+  const insights: ScrimInsight[] = [];
+
+  if (players.length === 0) return insights;
+
+  // MVP: highest eliminations per 10 among players with 2+ maps
+  const eligibleForMvp = players.filter((p) => p.mapsPlayed >= 2);
+  if (eligibleForMvp.length > 0) {
+    const mvp = eligibleForMvp.reduce((best, p) =>
+      p.eliminationsPer10 > best.eliminationsPer10 ? p : best
+    );
+    if (mvp.eliminationsPer10 > 0) {
+      insights.push({
+        type: "mvp",
+        headline: `${mvp.playerName} led with ${mvp.eliminationsPer10.toFixed(1)} elims/10 min on ${mvp.primaryHero}`,
+        playerName: mvp.playerName,
+      });
+    }
+  }
+
+  // Most improved: player with trendData showing the most improving metrics
+  const mostImproved = players
+    .filter((p) => p.trendData && p.trendData.improvingMetrics.length > 0)
+    .sort(
+      (a, b) =>
+        (b.trendData?.improvingMetrics.length ?? 0) -
+        (a.trendData?.improvingMetrics.length ?? 0)
+    )[0];
+
+  if (mostImproved) {
+    const topMetric = mostImproved.trendData!.improvingMetrics[0];
+    const sign = topMetric.changePercentage > 0 ? "+" : "";
+    insights.push({
+      type: "most_improved",
+      headline: `${mostImproved.playerName} improved across maps (+${sign}${topMetric.changePercentage.toFixed(0)}% ${topMetric.metric.toLowerCase()})`,
+      playerName: mostImproved.playerName,
+    });
+  }
+
+  // Most declined
+  const mostDeclined = players
+    .filter((p) => p.trendData && p.trendData.decliningMetrics.length > 0)
+    .sort(
+      (a, b) =>
+        (b.trendData?.decliningMetrics.length ?? 0) -
+        (a.trendData?.decliningMetrics.length ?? 0)
+    )[0];
+
+  if (mostDeclined && mostDeclined.playerName !== mostImproved?.playerName) {
+    const topMetric = mostDeclined.trendData!.decliningMetrics[0];
+    insights.push({
+      type: "most_declined",
+      headline: `${mostDeclined.playerName} declined across maps (${topMetric.changePercentage.toFixed(0)}% ${topMetric.metric.toLowerCase()})`,
+      playerName: mostDeclined.playerName,
+    });
+  }
+
+  // Positive outlier: highest z-score across all players/stats
+  const positiveOutliers = players
+    .flatMap((p) =>
+      p.outliers
+        .filter((o) => o.direction === "high")
+        .map((o) => ({ player: p, outlier: o }))
+    )
+    .sort((a, b) => b.outlier.zScore - a.outlier.zScore);
+
+  if (positiveOutliers.length > 0) {
+    const { player, outlier } = positiveOutliers[0];
+    insights.push({
+      type: "outlier_positive",
+      headline: `${player.playerName}'s ${statLabelFor(outlier.stat).toLowerCase()} ranks at the ${outlier.percentile}th percentile vs database`,
+      playerName: player.playerName,
+    });
+  }
+
+  // Negative outlier: most concerning stat
+  const negativeOutliers = players
+    .flatMap((p) =>
+      p.outliers
+        .filter((o) => o.direction === "low")
+        .map((o) => ({ player: p, outlier: o }))
+    )
+    .sort((a, b) => a.outlier.zScore - b.outlier.zScore);
+
+  if (negativeOutliers.length > 0 && insights.length < 4) {
+    const { player, outlier } = negativeOutliers[0];
+    insights.push({
+      type: "outlier_negative",
+      headline: `${player.playerName}'s ${statLabelFor(outlier.stat).toLowerCase()} is below average for ${player.primaryHero} (${outlier.percentile}th %ile)`,
+      playerName: player.playerName,
+    });
+  }
+
+  return insights.slice(0, 4);
+}
+
+function emptyOverviewData(): ScrimOverviewData {
+  return {
+    mapCount: 0,
+    wins: 0,
+    losses: 0,
+    draws: 0,
+    mapResults: [],
+    teamPlayers: [],
+    insights: [],
+    teamTotals: {
+      eliminations: 0,
+      deaths: 0,
+      heroDamage: 0,
+      healing: 0,
+      kdRatio: 0,
+    },
+  };
+}
+
+function aggregateRowsToPlayerStat(rows: PlayerStat[]): PlayerStat | null {
+  if (rows.length === 0) return null;
+  const base = rows[0];
+  const totals = rows.reduce(
+    (acc, row) => {
+      acc.eliminations += row.eliminations;
+      acc.final_blows += row.final_blows;
+      acc.deaths += row.deaths;
+      acc.all_damage_dealt += row.all_damage_dealt;
+      acc.barrier_damage_dealt += row.barrier_damage_dealt;
+      acc.hero_damage_dealt += row.hero_damage_dealt;
+      acc.healing_dealt += row.healing_dealt;
+      acc.healing_received += row.healing_received;
+      acc.self_healing += row.self_healing;
+      acc.damage_taken += row.damage_taken;
+      acc.damage_blocked += row.damage_blocked;
+      acc.defensive_assists += row.defensive_assists;
+      acc.offensive_assists += row.offensive_assists;
+      acc.ultimates_earned += row.ultimates_earned;
+      acc.ultimates_used += row.ultimates_used;
+      acc.multikill_best = Math.max(acc.multikill_best, row.multikill_best);
+      acc.multikills += row.multikills;
+      acc.solo_kills += row.solo_kills;
+      acc.objective_kills += row.objective_kills;
+      acc.environmental_kills += row.environmental_kills;
+      acc.environmental_deaths += row.environmental_deaths;
+      acc.critical_hits += row.critical_hits;
+      acc.scoped_critical_hit_kills += row.scoped_critical_hit_kills;
+      acc.shots_fired += row.shots_fired;
+      acc.shots_hit += row.shots_hit;
+      acc.shots_missed += row.shots_missed;
+      acc.scoped_shots += row.scoped_shots;
+      acc.scoped_shots_hit += row.scoped_shots_hit;
+      acc.hero_time_played += row.hero_time_played;
+      return acc;
+    },
+    {
+      eliminations: 0,
+      final_blows: 0,
+      deaths: 0,
+      all_damage_dealt: 0,
+      barrier_damage_dealt: 0,
+      hero_damage_dealt: 0,
+      healing_dealt: 0,
+      healing_received: 0,
+      self_healing: 0,
+      damage_taken: 0,
+      damage_blocked: 0,
+      defensive_assists: 0,
+      offensive_assists: 0,
+      ultimates_earned: 0,
+      ultimates_used: 0,
+      multikill_best: 0,
+      multikills: 0,
+      solo_kills: 0,
+      objective_kills: 0,
+      environmental_kills: 0,
+      environmental_deaths: 0,
+      critical_hits: 0,
+      scoped_critical_hit_kills: 0,
+      shots_fired: 0,
+      shots_hit: 0,
+      shots_missed: 0,
+      scoped_shots: 0,
+      scoped_shots_hit: 0,
+      hero_time_played: 0,
+    }
+  );
+  return { ...base, ...totals };
+}
+
+function getMapTeamNames(stats: PlayerStat[]): Map<number, string> {
+  const countsByMap = new Map<number, Map<string, number>>();
+  for (const row of stats) {
+    if (!row.MapDataId) continue;
+    if (!countsByMap.has(row.MapDataId)) {
+      countsByMap.set(row.MapDataId, new Map<string, number>());
+    }
+    const mapCounts = countsByMap.get(row.MapDataId)!;
+    mapCounts.set(row.player_team, (mapCounts.get(row.player_team) ?? 0) + 1);
+  }
+
+  const result = new Map<number, string>();
+  for (const [mapId, teamCounts] of countsByMap.entries()) {
+    let selectedTeam: string | null = null;
+    let maxCount = -1;
+    for (const [teamName, count] of teamCounts.entries()) {
+      if (count > maxCount) {
+        maxCount = count;
+        selectedTeam = teamName;
+      }
+    }
+    if (selectedTeam) {
+      result.set(mapId, selectedTeam);
+    }
+  }
+  return result;
+}
+
+function createBaselineKey(hero: HeroName, stat: ValidStatColumn): string {
+  return `${hero}::${stat}`;
+}
+
+function erf(x: number): number {
+  const sign = x >= 0 ? 1 : -1;
+  const absX = Math.abs(x);
+  const a1 = 0.254829592;
+  const a2 = -0.284496736;
+  const a3 = 1.421413741;
+  const a4 = -1.453152027;
+  const a5 = 1.061405429;
+  const p = 0.3275911;
+  const t = 1 / (1 + p * absX);
+  const y =
+    1 -
+    ((((a5 * t + a4) * t + a3) * t + a2) * t + a1) * t * Math.exp(-absX * absX);
+  return sign * y;
+}
+
+function normalCdf(z: number): number {
+  return 0.5 * (1 + erf(z / Math.SQRT2));
+}
+
+type StatDistributionBaseline = {
+  hero: string;
+  stat_name: string;
+  hero_avg_per10: number;
+  hero_std_per10: number;
+  total_players: number;
+};
+
+type BatchedBaselineRow = {
+  hero: string;
+  avg_eliminations_per10: number | null;
+  std_eliminations_per10: number | null;
+  avg_deaths_per10: number | null;
+  std_deaths_per10: number | null;
+  avg_hero_damage_dealt_per10: number | null;
+  std_hero_damage_dealt_per10: number | null;
+  avg_healing_dealt_per10: number | null;
+  std_healing_dealt_per10: number | null;
+  avg_damage_blocked_per10: number | null;
+  std_damage_blocked_per10: number | null;
+  total_players: number;
+};
+
+const BASELINE_STAT_COLUMNS: ValidStatColumn[] = [
+  "eliminations",
+  "deaths",
+  "hero_damage_dealt",
+  "healing_dealt",
+  "damage_blocked",
+];
+
+async function getBatchedStatDistributionBaselines(
+  heroes: HeroName[],
+  minMaps = 5,
+  minTimeSeconds = 300,
+  sampleLimit = 150
+): Promise<Map<string, StatDistributionBaseline>> {
+  if (heroes.length === 0) return new Map();
+
+  const rows = await prisma.$queryRaw<BatchedBaselineRow[]>`
+    WITH
+      final_rows AS (
+        SELECT DISTINCT ON ("MapDataId", player_name, player_hero)
+          player_name,
+          player_hero,
+          eliminations,
+          deaths,
+          hero_damage_dealt,
+          healing_dealt,
+          damage_blocked,
+          hero_time_played
+        FROM
+          "PlayerStat"
+        WHERE
+          player_hero IN (${Prisma.join(heroes)})
+          AND hero_time_played >= 60
+        ORDER BY
+          "MapDataId",
+          player_name,
+          player_hero,
+          round_number DESC,
+          id DESC
+      ),
+      per_player_totals AS (
+        SELECT
+          player_hero,
+          player_name,
+          COUNT(*) AS maps,
+          (SUM(eliminations)::numeric / SUM(hero_time_played)) * 600.0 AS elims_per10,
+          (SUM(deaths)::numeric / SUM(hero_time_played)) * 600.0 AS deaths_per10,
+          (SUM(hero_damage_dealt)::numeric / SUM(hero_time_played)) * 600.0 AS dmg_per10,
+          (SUM(healing_dealt)::numeric / SUM(hero_time_played)) * 600.0 AS heal_per10,
+          (SUM(damage_blocked)::numeric / SUM(hero_time_played)) * 600.0 AS block_per10
+        FROM
+          final_rows
+        GROUP BY
+          player_name, player_hero
+        HAVING
+          COUNT(*) >= ${minMaps}
+          AND SUM(hero_time_played) >= ${minTimeSeconds}
+      ),
+      ranked AS (
+        SELECT
+          *,
+          ROW_NUMBER() OVER (
+            PARTITION BY player_hero
+            ORDER BY maps DESC, player_name
+          ) AS rn
+        FROM
+          per_player_totals
+      ),
+      limited AS (
+        SELECT * FROM ranked WHERE rn <= ${sampleLimit}
+      )
+    SELECT
+      player_hero AS hero,
+      ROUND(AVG(elims_per10)::numeric, 2) AS avg_eliminations_per10,
+      ROUND(STDDEV_SAMP(elims_per10)::numeric, 2) AS std_eliminations_per10,
+      ROUND(AVG(deaths_per10)::numeric, 2) AS avg_deaths_per10,
+      ROUND(STDDEV_SAMP(deaths_per10)::numeric, 2) AS std_deaths_per10,
+      ROUND(AVG(dmg_per10)::numeric, 2) AS avg_hero_damage_dealt_per10,
+      ROUND(STDDEV_SAMP(dmg_per10)::numeric, 2) AS std_hero_damage_dealt_per10,
+      ROUND(AVG(heal_per10)::numeric, 2) AS avg_healing_dealt_per10,
+      ROUND(STDDEV_SAMP(heal_per10)::numeric, 2) AS std_healing_dealt_per10,
+      ROUND(AVG(block_per10)::numeric, 2) AS avg_damage_blocked_per10,
+      ROUND(STDDEV_SAMP(block_per10)::numeric, 2) AS std_damage_blocked_per10,
+      COUNT(*)::int AS total_players
+    FROM
+      limited
+    GROUP BY
+      player_hero
+  `;
+
+  const statColumnMapping: Record<
+    string,
+    { avg: keyof BatchedBaselineRow; std: keyof BatchedBaselineRow }
+  > = {
+    eliminations: {
+      avg: "avg_eliminations_per10",
+      std: "std_eliminations_per10",
+    },
+    deaths: { avg: "avg_deaths_per10", std: "std_deaths_per10" },
+    hero_damage_dealt: {
+      avg: "avg_hero_damage_dealt_per10",
+      std: "std_hero_damage_dealt_per10",
+    },
+    healing_dealt: {
+      avg: "avg_healing_dealt_per10",
+      std: "std_healing_dealt_per10",
+    },
+    damage_blocked: {
+      avg: "avg_damage_blocked_per10",
+      std: "std_damage_blocked_per10",
+    },
+  };
+
+  const result = new Map<string, StatDistributionBaseline>();
+  for (const row of rows) {
+    for (const stat of BASELINE_STAT_COLUMNS) {
+      const mapping = statColumnMapping[stat];
+      const avg = Number(row[mapping.avg]);
+      const std = Number(row[mapping.std]);
+      if (Number.isNaN(avg) || Number.isNaN(std)) continue;
+
+      result.set(createBaselineKey(row.hero as HeroName, stat), {
+        hero: row.hero,
+        stat_name: stat,
+        hero_avg_per10: avg,
+        hero_std_per10: std,
+        total_players: row.total_players,
+      });
+    }
+  }
+
+  return result;
+}
+
+function calculateZScoreFromBaseline({
+  baseline,
+  stat,
+  per10Value,
+}: {
+  baseline: StatDistributionBaseline;
+  stat: ValidStatColumn;
+  per10Value: number;
+}): number | null {
+  if (!baseline.hero_std_per10 || baseline.hero_std_per10 === 0) return null;
+  const isInverted = stat === "deaths" || stat === "damage_taken";
+  const zScore = isInverted
+    ? (baseline.hero_avg_per10 - per10Value) / baseline.hero_std_per10
+    : (per10Value - baseline.hero_avg_per10) / baseline.hero_std_per10;
+  if (!Number.isFinite(zScore)) return null;
+  return zScore;
+}
+
+async function getScrimOverviewFn(
+  scrimId: number,
+  teamId: number
+): Promise<ScrimOverviewData> {
+  const maps = await prisma.map.findMany({
+    where: { scrimId },
+    orderBy: { id: "asc" },
+    select: { id: true, name: true },
+  });
+
+  if (maps.length === 0) return emptyOverviewData();
+
+  const mapIds = maps.map((m) => m.id);
+
+  // Get team roster and unique players in this scrim in parallel
+  const [teamRoster, scrimPlayerNames] = await Promise.all([
+    getTeamRoster(teamId),
+    prisma.playerStat.findMany({
+      where: { MapDataId: { in: mapIds } },
+      select: { player_name: true },
+      distinct: ["player_name"],
+    }),
+  ]);
+
+  const teamRosterSet = new Set(teamRoster);
+  const scrimPlayers = scrimPlayerNames
+    .map((p) => p.player_name)
+    .filter((name) => teamRosterSet.has(name));
+
+  if (scrimPlayers.length === 0) return emptyOverviewData();
+
+  const [
+    finalRoundStats,
+    calculatedStats,
+    matchStarts,
+    finalRounds,
+    captures,
+    allKills,
+    allRezzes,
+  ] = await Promise.all([
+    prisma.$queryRaw<PlayerStat[]>`
+        WITH maxTime AS (
+          SELECT
+            MAX("match_time") AS max_time,
+            "MapDataId"
+          FROM
+            "PlayerStat"
+          WHERE
+            "MapDataId" IN (${Prisma.join(mapIds)})
+          GROUP BY
+            "MapDataId"
+        )
+        SELECT
+          ps.*
+        FROM
+          "PlayerStat" ps
+          INNER JOIN maxTime m ON ps."match_time" = m.max_time AND ps."MapDataId" = m."MapDataId"
+        WHERE
+          ps."MapDataId" IN (${Prisma.join(mapIds)})
+          AND ps."player_name" IN (${Prisma.join(scrimPlayers)})
+      `.then((rows) => removeDuplicateRows(rows)),
+    prisma.calculatedStat.findMany({
+      where: {
+        MapDataId: { in: mapIds },
+        playerName: { in: scrimPlayers },
+      },
+    }),
+    prisma.matchStart.findMany({ where: { MapDataId: { in: mapIds } } }),
+    prisma.roundEnd.findMany({
+      where: { MapDataId: { in: mapIds } },
+      orderBy: { round_number: "desc" },
+    }),
+    prisma.objectiveCaptured.findMany({
+      where: { MapDataId: { in: mapIds } },
+    }),
+    prisma.kill.findMany({
+      where: { MapDataId: { in: mapIds } },
+      orderBy: { match_time: "asc" },
+    }),
+    prisma.mercyRez.findMany({
+      where: { MapDataId: { in: mapIds } },
+    }),
+  ]);
+
+  if (finalRoundStats.length === 0) return emptyOverviewData();
+
+  // Build lookup maps for matchStarts, finalRounds
+  const matchStartByMapId = new Map<number, MatchStart>();
+  for (const ms of matchStarts) {
+    if (ms.MapDataId) matchStartByMapId.set(ms.MapDataId, ms);
+  }
+
+  const finalRoundByMapId = new Map<number, RoundEnd>();
+  for (const round of finalRounds) {
+    if (round.MapDataId && !finalRoundByMapId.has(round.MapDataId)) {
+      finalRoundByMapId.set(round.MapDataId, round);
+    }
+  }
+
+  const capturesByMapAndTeam = new Map<
+    number,
+    Map<string, ObjectiveCaptured[]>
+  >();
+  for (const capture of captures) {
+    if (!capture.MapDataId) continue;
+    if (!capturesByMapAndTeam.has(capture.MapDataId)) {
+      capturesByMapAndTeam.set(
+        capture.MapDataId,
+        new Map<string, ObjectiveCaptured[]>()
+      );
+    }
+    const mapCaptures = capturesByMapAndTeam.get(capture.MapDataId)!;
+    if (!mapCaptures.has(capture.capturing_team)) {
+      mapCaptures.set(capture.capturing_team, []);
+    }
+    mapCaptures.get(capture.capturing_team)!.push(capture);
+  }
+
+  const killsByMap = new Map<number, Kill[]>();
+  for (const kill of allKills) {
+    if (!kill.MapDataId) continue;
+    if (!killsByMap.has(kill.MapDataId)) {
+      killsByMap.set(kill.MapDataId, []);
+    }
+    killsByMap.get(kill.MapDataId)!.push(kill);
+  }
+  for (const rez of allRezzes) {
+    if (!rez.MapDataId) continue;
+    if (!killsByMap.has(rez.MapDataId)) {
+      killsByMap.set(rez.MapDataId, []);
+    }
+    killsByMap.get(rez.MapDataId)!.push(mercyRezToKillEvent(rez));
+  }
+
+  const fightsByMap = new Map<number, Fight[]>();
+  for (const [mapId, events] of killsByMap.entries()) {
+    events.sort((a, b) => a.match_time - b.match_time);
+    fightsByMap.set(mapId, groupEventsIntoFights(events));
+  }
+
+  type MapFirstDeathLookup = {
+    fightCount: number;
+    overallFirstDeaths: Map<string, number>;
+    teamFirstDeaths: Map<string, Map<string, number>>;
+  };
+  const firstDeathLookup = new Map<number, MapFirstDeathLookup>();
+  for (const [mapId, fights] of fightsByMap.entries()) {
+    const overallFirstDeaths = new Map<string, number>();
+    const teamFirstDeaths = new Map<string, Map<string, number>>();
+
+    for (const fight of fights) {
+      const overallVictim = fight.kills[0]?.victim_name;
+      if (overallVictim) {
+        overallFirstDeaths.set(
+          overallVictim,
+          (overallFirstDeaths.get(overallVictim) ?? 0) + 1
+        );
+      }
+
+      const teamsSeen = new Set<string>();
+      for (const kill of fight.kills) {
+        if (kill.event_type !== "kill" || teamsSeen.has(kill.victim_team))
+          continue;
+        teamsSeen.add(kill.victim_team);
+        if (!teamFirstDeaths.has(kill.victim_team)) {
+          teamFirstDeaths.set(kill.victim_team, new Map());
+        }
+        const playerCounts = teamFirstDeaths.get(kill.victim_team)!;
+        playerCounts.set(
+          kill.victim_name,
+          (playerCounts.get(kill.victim_name) ?? 0) + 1
+        );
+      }
+    }
+
+    firstDeathLookup.set(mapId, {
+      fightCount: fights.length,
+      overallFirstDeaths,
+      teamFirstDeaths,
+    });
+  }
+
+  const ourTeamNameByMap = getMapTeamNames(finalRoundStats);
+
+  // Determine W/L/D for each map
+  const mapResults: MapResult[] = [];
+  let wins = 0;
+  let losses = 0;
+  let draws = 0;
+
+  for (const map of maps) {
+    const matchStart = matchStartByMapId.get(map.id) ?? null;
+    const finalRound = finalRoundByMapId.get(map.id) ?? null;
+    const mapCaptures = capturesByMapAndTeam.get(map.id);
+    const team1Caps = matchStart?.team_1_name
+      ? (mapCaptures?.get(matchStart.team_1_name) ?? [])
+      : [];
+    const team2Caps = matchStart?.team_2_name
+      ? (mapCaptures?.get(matchStart.team_2_name) ?? [])
+      : [];
+
+    const winnerName = calculateWinner({
+      matchDetails: matchStart,
+      finalRound,
+      team1Captures: team1Caps,
+      team2Captures: team2Caps,
+    });
+
+    const ourTeamName = ourTeamNameByMap.get(map.id) ?? null;
+    let winner: MapResult["winner"];
+
+    if (winnerName === "N/A" || !ourTeamName) {
+      winner = "draw";
+      draws++;
+    } else if (winnerName === ourTeamName) {
+      winner = "our_team";
+      wins++;
+    } else {
+      winner = "opponent";
+      losses++;
+    }
+
+    mapResults.push({ mapId: map.id, mapName: map.name, winner });
+  }
+
+  const playerRowsMap = new Map<string, PlayerStat[]>();
+  for (const row of finalRoundStats) {
+    if (!playerRowsMap.has(row.player_name)) {
+      playerRowsMap.set(row.player_name, []);
+    }
+    playerRowsMap.get(row.player_name)!.push(row);
+  }
+
+  const playerCalculatedMap = new Map<string, CalculatedStat[]>();
+  for (const row of calculatedStats) {
+    if (!playerCalculatedMap.has(row.playerName)) {
+      playerCalculatedMap.set(row.playerName, []);
+    }
+    playerCalculatedMap.get(row.playerName)!.push(row);
+  }
+
+  const basePlayers: PlayerScrimPerformance[] = [];
+  for (const playerName of scrimPlayers) {
+    const playerRows = playerRowsMap.get(playerName) ?? [];
+    if (playerRows.length === 0) continue;
+    const playerCalcRows = playerCalculatedMap.get(playerName) ?? [];
+
+    const rowsByMap = new Map<number, PlayerStat[]>();
+    for (const row of playerRows) {
+      if (!row.MapDataId) continue;
+      if (!rowsByMap.has(row.MapDataId)) {
+        rowsByMap.set(row.MapDataId, []);
+      }
+      rowsByMap.get(row.MapDataId)!.push(row);
+    }
+
+    const calcByMap = new Map<number, CalculatedStat[]>();
+    for (const row of playerCalcRows) {
+      if (!calcByMap.has(row.MapDataId)) {
+        calcByMap.set(row.MapDataId, []);
+      }
+      calcByMap.get(row.MapDataId)!.push(row);
+    }
+
+    const playerTeam = playerRows[0].player_team;
+
+    const perMapStats: PlayerStat[] = [];
+    const perMapCalculatedStats: CalculatedStat[][] = [];
+    const perMapPerformance: PlayerMapPerformance[] = [];
+    let totalFights = 0;
+    let totalFirstDeaths = 0;
+    let totalTeamFirstDeaths = 0;
+
+    for (let i = 0; i < mapIds.length; i++) {
+      const mapId = mapIds[i];
+      const rows = rowsByMap.get(mapId) ?? [];
+      if (rows.length === 0) continue;
+      const aggregatedRow = aggregateRowsToPlayerStat(rows);
+      if (!aggregatedRow) continue;
+      perMapStats.push(aggregatedRow);
+      perMapCalculatedStats.push(calcByMap.get(mapId) ?? []);
+
+      const fdLookup = firstDeathLookup.get(mapId);
+      const mapFightCount = fdLookup?.fightCount ?? 0;
+      const mapFirstDeaths = fdLookup?.overallFirstDeaths.get(playerName) ?? 0;
+      const mapTeamFirstDeaths =
+        fdLookup?.teamFirstDeaths.get(playerTeam)?.get(playerName) ?? 0;
+
+      totalFights += mapFightCount;
+      totalFirstDeaths += mapFirstDeaths;
+      totalTeamFirstDeaths += mapTeamFirstDeaths;
+
+      const time = aggregatedRow.hero_time_played;
+      perMapPerformance.push({
+        mapName: maps[i].name,
+        mapIndex: i,
+        kdRatio:
+          aggregatedRow.deaths > 0
+            ? aggregatedRow.eliminations / aggregatedRow.deaths
+            : aggregatedRow.eliminations,
+        eliminationsPer10:
+          time > 0 ? (aggregatedRow.eliminations / time) * 600 : 0,
+        heroDamagePer10:
+          time > 0 ? (aggregatedRow.hero_damage_dealt / time) * 600 : 0,
+        healingDealtPer10:
+          time > 0 ? (aggregatedRow.healing_dealt / time) * 600 : 0,
+        firstDeathRate:
+          mapFightCount > 0 ? (mapFirstDeaths / mapFightCount) * 100 : 0,
+        teamFirstDeathRate:
+          mapFightCount > 0 ? (mapTeamFirstDeaths / mapFightCount) * 100 : 0,
+      });
+    }
+
+    const aggregated = aggregatePlayerStats(
+      playerRows,
+      playerCalcRows,
+      perMapStats,
+      perMapCalculatedStats
+    );
+
+    const heroTimeMap = new Map<string, number>();
+    for (const row of playerRows) {
+      heroTimeMap.set(
+        row.player_hero,
+        (heroTimeMap.get(row.player_hero) ?? 0) + row.hero_time_played
+      );
+    }
+    const heroes = Array.from(heroTimeMap.keys()) as HeroName[];
+    if (heroes.length === 0) continue;
+
+    let primaryHero: HeroName = heroes[0] ?? "Ana";
+    let maxTime = -1;
+    for (const [hero, time] of heroTimeMap.entries()) {
+      if (time > maxTime) {
+        maxTime = time;
+        primaryHero = hero as HeroName;
+      }
+    }
+
+    const trendData =
+      perMapStats.length >= 3
+        ? calculateTrends(perMapStats, perMapCalculatedStats)
+        : undefined;
+    const trend = determineTrend(trendData);
+
+    const kdRatio =
+      aggregated.deaths > 0
+        ? aggregated.eliminations / aggregated.deaths
+        : aggregated.eliminations;
+
+    basePlayers.push({
+      playerName,
+      primaryHero,
+      heroes,
+      mapsPlayed: perMapStats.length,
+      eliminations: aggregated.eliminations,
+      deaths: aggregated.deaths,
+      heroDamageDealt: aggregated.heroDamageDealt,
+      healingDealt: aggregated.healingDealt,
+      heroTimePlayed: aggregated.heroTimePlayed,
+      kdRatio,
+      eliminationsPer10: aggregated.eliminationsPer10,
+      deathsPer10: aggregated.deathsPer10,
+      heroDamagePer10: aggregated.heroDamagePer10,
+      healingDealtPer10: aggregated.healingDealtPer10,
+      firstDeathCount: totalFirstDeaths,
+      firstDeathRate:
+        totalFights > 0 ? (totalFirstDeaths / totalFights) * 100 : 0,
+      teamFirstDeathCount: totalTeamFirstDeaths,
+      teamFirstDeathRate:
+        totalFights > 0 ? (totalTeamFirstDeaths / totalFights) * 100 : 0,
+      perMapPerformance,
+      zScores: {},
+      outliers: [],
+      trend,
+      trendData,
+    } satisfies PlayerScrimPerformance);
+  }
+
+  const uniqueHeroes = new Set<HeroName>();
+  for (const player of basePlayers) {
+    if (player.heroTimePlayed >= 300) {
+      uniqueHeroes.add(player.primaryHero);
+    }
+  }
+
+  const baselineMap = await getBatchedStatDistributionBaselines(
+    Array.from(uniqueHeroes)
+  );
+
+  const teamPlayers: PlayerScrimPerformance[] = basePlayers.map((player) => {
+    if (player.heroTimePlayed < 300) return player;
+    const zScores: Partial<Record<ValidStatColumn, number>> = {};
+    const outliers: ScrimOutlier[] = [];
+
+    const comparisonStats = statsForHeroRole(
+      player.primaryHero,
+      player.heroDamageDealt,
+      player.healingDealt,
+      0,
+      player.deaths,
+      player.eliminations
+    );
+
+    for (const statDef of comparisonStats) {
+      const baseline = baselineMap.get(
+        createBaselineKey(player.primaryHero, statDef.stat)
+      );
+      if (!baseline) continue;
+
+      const per10Value = (statDef.value / player.heroTimePlayed) * 600;
+      const zScore = calculateZScoreFromBaseline({
+        baseline,
+        stat: statDef.stat,
+        per10Value,
+      });
+      if (zScore === null) continue;
+      const percentile = Math.round(normalCdf(zScore) * 1000) / 10;
+
+      zScores[statDef.stat] = zScore;
+      if (Math.abs(zScore) >= 2) {
+        outliers.push({
+          stat: statDef.stat,
+          zScore,
+          percentile,
+          direction: zScore > 0 ? "high" : "low",
+          label: statLabelFor(statDef.stat),
+        });
+      }
+    }
+
+    outliers.sort((a, b) => Math.abs(b.zScore) - Math.abs(a.zScore));
+    return {
+      ...player,
+      zScores,
+      outliers,
+    };
+  });
+
+  // Sort by maps played desc, then alphabetically
+  teamPlayers.sort(
+    (a, b) =>
+      b.mapsPlayed - a.mapsPlayed || a.playerName.localeCompare(b.playerName)
+  );
+
+  // Team-wide totals
+  const teamTotals = teamPlayers.reduce(
+    (acc, p) => ({
+      eliminations: acc.eliminations + p.eliminations,
+      deaths: acc.deaths + p.deaths,
+      heroDamage: acc.heroDamage + p.heroDamageDealt,
+      healing: acc.healing + p.healingDealt,
+      kdRatio: 0, // computed below
+    }),
+    { eliminations: 0, deaths: 0, heroDamage: 0, healing: 0, kdRatio: 0 }
+  );
+  teamTotals.kdRatio =
+    teamTotals.deaths > 0
+      ? teamTotals.eliminations / teamTotals.deaths
+      : teamTotals.eliminations;
+
+  const insights = generateInsights(teamPlayers);
+
+  return {
+    mapCount: maps.length,
+    wins,
+    losses,
+    draws,
+    mapResults,
+    teamPlayers,
+    insights,
+    teamTotals,
+  };
+}
+
+export const getScrimOverview = cache(getScrimOverviewFn);
diff --git a/src/data/team-comparison-dto.ts b/src/data/team-comparison-dto.ts
new file mode 100644
index 000000000..2d490853d
--- /dev/null
+++ b/src/data/team-comparison-dto.ts
@@ -0,0 +1,590 @@
+import "server-only";
+
+import prisma from "@/lib/prisma";
+import { calculateWinner } from "@/lib/winrate";
+import type { HeroName } from "@/types/heroes";
+import type {
+  TeamComparisonStats,
+  TeamMapBreakdown,
+} from "@/types/team-comparison";
+import type { CalculatedStat, MapType, PlayerStat } from "@prisma/client";
+import { CalculatedStatType } from "@prisma/client";
+import { cache } from "react";
+import type { AggregatedStats } from "./comparison-dto";
+import { findTeamNameForMapInMemory, getTeamRoster } from "./team-shared-data";
+
+/**
+ * Calculates per-10 value for a stat
+ */
+function calculatePer10(value: number, timePlayed: number): number {
+  if (timePlayed === 0) return 0;
+  return (value / timePlayed) * 600;
+}
+
+/**
+ * Calculates percentage
+ */
+function calculatePercentage(value: number, total: number): number {
+  if (total === 0) return 0;
+  return (value / total) * 100;
+}
+
+/**
+ * Aggregates calculated stats for a team
+ */
+function aggregateCalculatedStatsForTeam(
+  stats: CalculatedStat[]
+): Partial<AggregatedStats> {
+  const result: Partial<AggregatedStats> = {
+    fletaDeadliftPercentage: 0,
+    firstPickPercentage: 0,
+    firstPickCount: 0,
+    firstDeathPercentage: 0,
+    firstDeathCount: 0,
+    mvpScore: 0,
+    mapMvpCount: 0,
+    ajaxCount: 0,
+    averageUltChargeTime: 0,
+    averageTimeToUseUlt: 0,
+    averageDroughtTime: 0,
+    killsPerUltimate: 0,
+    duelWinratePercentage: 0,
+    fightReversalPercentage: 0,
+  };
+
+  const counts: Record<string, number> = {};
+
+  stats.forEach((stat) => {
+    switch (stat.stat) {
+      case CalculatedStatType.FLETA_DEADLIFT_PERCENTAGE:
+        result.fletaDeadliftPercentage =
+          (result.fletaDeadliftPercentage ?? 0) + stat.value;
+        counts.fletaDeadlift = (counts.fletaDeadlift ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIRST_PICK_PERCENTAGE:
+        result.firstPickPercentage =
+          (result.firstPickPercentage ?? 0) + stat.value;
+        counts.firstPick = (counts.firstPick ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIRST_PICK_COUNT:
+        result.firstPickCount = (result.firstPickCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.FIRST_DEATH_PERCENTAGE:
+        result.firstDeathPercentage =
+          (result.firstDeathPercentage ?? 0) + stat.value;
+        counts.firstDeath = (counts.firstDeath ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIRST_DEATH_COUNT:
+        result.firstDeathCount = (result.firstDeathCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.MVP_SCORE:
+        result.mvpScore = (result.mvpScore ?? 0) + stat.value;
+        counts.mvpScore = (counts.mvpScore ?? 0) + 1;
+        break;
+      case CalculatedStatType.MAP_MVP_COUNT:
+        result.mapMvpCount = (result.mapMvpCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.AJAX_COUNT:
+        result.ajaxCount = (result.ajaxCount ?? 0) + stat.value;
+        break;
+      case CalculatedStatType.AVERAGE_ULT_CHARGE_TIME:
+        result.averageUltChargeTime =
+          (result.averageUltChargeTime ?? 0) + stat.value;
+        counts.ultCharge = (counts.ultCharge ?? 0) + 1;
+        break;
+      case CalculatedStatType.AVERAGE_TIME_TO_USE_ULT:
+        result.averageTimeToUseUlt =
+          (result.averageTimeToUseUlt ?? 0) + stat.value;
+        counts.timeToUseUlt = (counts.timeToUseUlt ?? 0) + 1;
+        break;
+      case CalculatedStatType.AVERAGE_DROUGHT_TIME:
+        result.averageDroughtTime =
+          (result.averageDroughtTime ?? 0) + stat.value;
+        counts.drought = (counts.drought ?? 0) + 1;
+        break;
+      case CalculatedStatType.KILLS_PER_ULTIMATE:
+        result.killsPerUltimate = (result.killsPerUltimate ?? 0) + stat.value;
+        counts.killsPerUlt = (counts.killsPerUlt ?? 0) + 1;
+        break;
+      case CalculatedStatType.DUEL_WINRATE_PERCENTAGE:
+        result.duelWinratePercentage =
+          (result.duelWinratePercentage ?? 0) + stat.value;
+        counts.duelWinrate = (counts.duelWinrate ?? 0) + 1;
+        break;
+      case CalculatedStatType.FIGHT_REVERSAL_PERCENTAGE:
+        result.fightReversalPercentage =
+          (result.fightReversalPercentage ?? 0) + stat.value;
+        counts.fightReversal = (counts.fightReversal ?? 0) + 1;
+        break;
+    }
+  });
+
+  // Average percentage-based stats
+  if (counts.fletaDeadlift) {
+    result.fletaDeadliftPercentage =
+      (result.fletaDeadliftPercentage ?? 0) / counts.fletaDeadlift;
+  }
+  if (counts.firstPick) {
+    result.firstPickPercentage =
+      (result.firstPickPercentage ?? 0) / counts.firstPick;
+  }
+  if (counts.firstDeath) {
+    result.firstDeathPercentage =
+      (result.firstDeathPercentage ?? 0) / counts.firstDeath;
+  }
+  if (counts.mvpScore) {
+    result.mvpScore = (result.mvpScore ?? 0) / counts.mvpScore;
+  }
+  if (counts.ultCharge) {
+    result.averageUltChargeTime =
+      (result.averageUltChargeTime ?? 0) / counts.ultCharge;
+  }
+  if (counts.timeToUseUlt) {
+    result.averageTimeToUseUlt =
+      (result.averageTimeToUseUlt ?? 0) / counts.timeToUseUlt;
+  }
+  if (counts.drought) {
+    result.averageDroughtTime =
+      (result.averageDroughtTime ?? 0) / counts.drought;
+  }
+  if (counts.killsPerUlt) {
+    result.killsPerUltimate =
+      (result.killsPerUltimate ?? 0) / counts.killsPerUlt;
+  }
+  if (counts.duelWinrate) {
+    result.duelWinratePercentage =
+      (result.duelWinratePercentage ?? 0) / counts.duelWinrate;
+  }
+  if (counts.fightReversal) {
+    result.fightReversalPercentage =
+      (result.fightReversalPercentage ?? 0) / counts.fightReversal;
+  }
+
+  return result;
+}
+
+/**
+ * Aggregates player stats for a team
+ */
+function aggregateTeamStats(
+  stats: PlayerStat[],
+  calculatedStats: CalculatedStat[]
+): AggregatedStats {
+  const totals = stats.reduce(
+    (acc, stat) => {
+      acc.eliminations += stat.eliminations;
+      acc.finalBlows += stat.final_blows;
+      acc.deaths += stat.deaths;
+      acc.allDamageDealt += stat.all_damage_dealt;
+      acc.barrierDamageDealt += stat.barrier_damage_dealt;
+      acc.heroDamageDealt += stat.hero_damage_dealt;
+      acc.healingDealt += stat.healing_dealt;
+      acc.healingReceived += stat.healing_received;
+      acc.selfHealing += stat.self_healing;
+      acc.damageTaken += stat.damage_taken;
+      acc.damageBlocked += stat.damage_blocked;
+      acc.defensiveAssists += stat.defensive_assists;
+      acc.offensiveAssists += stat.offensive_assists;
+      acc.ultimatesEarned += stat.ultimates_earned;
+      acc.ultimatesUsed += stat.ultimates_used;
+      acc.multikillBest = Math.max(acc.multikillBest, stat.multikill_best);
+      acc.multikills += stat.multikills;
+      acc.soloKills += stat.solo_kills;
+      acc.objectiveKills += stat.objective_kills;
+      acc.environmentalKills += stat.environmental_kills;
+      acc.environmentalDeaths += stat.environmental_deaths;
+      acc.criticalHits += stat.critical_hits;
+      acc.shotsFired += stat.shots_fired;
+      acc.shotsHit += stat.shots_hit;
+      acc.shotsMissed += stat.shots_missed;
+      acc.scopedShots += stat.scoped_shots;
+      acc.scopedShotsHit += stat.scoped_shots_hit;
+      acc.scopedCriticalHitKills += stat.scoped_critical_hit_kills;
+      acc.heroTimePlayed += stat.hero_time_played;
+      return acc;
+    },
+    {
+      eliminations: 0,
+      finalBlows: 0,
+      deaths: 0,
+      allDamageDealt: 0,
+      barrierDamageDealt: 0,
+      heroDamageDealt: 0,
+      healingDealt: 0,
+      healingReceived: 0,
+      selfHealing: 0,
+      damageTaken: 0,
+      damageBlocked: 0,
+      defensiveAssists: 0,
+      offensiveAssists: 0,
+      ultimatesEarned: 0,
+      ultimatesUsed: 0,
+      multikillBest: 0,
+      multikills: 0,
+      soloKills: 0,
+      objectiveKills: 0,
+      environmentalKills: 0,
+      environmentalDeaths: 0,
+      criticalHits: 0,
+      shotsFired: 0,
+      shotsHit: 0,
+      shotsMissed: 0,
+      scopedShots: 0,
+      scopedShotsHit: 0,
+      scopedCriticalHitKills: 0,
+      heroTimePlayed: 0,
+    }
+  );
+
+  const calculatedAggregates = aggregateCalculatedStatsForTeam(calculatedStats);
+
+  return {
+    ...totals,
+    eliminationsPer10: calculatePer10(
+      totals.eliminations,
+      totals.heroTimePlayed
+    ),
+    finalBlowsPer10: calculatePer10(totals.finalBlows, totals.heroTimePlayed),
+    deathsPer10: calculatePer10(totals.deaths, totals.heroTimePlayed),
+    allDamagePer10: calculatePer10(
+      totals.allDamageDealt,
+      totals.heroTimePlayed
+    ),
+    heroDamagePer10: calculatePer10(
+      totals.heroDamageDealt,
+      totals.heroTimePlayed
+    ),
+    healingDealtPer10: calculatePer10(
+      totals.healingDealt,
+      totals.heroTimePlayed
+    ),
+    healingReceivedPer10: calculatePer10(
+      totals.healingReceived,
+      totals.heroTimePlayed
+    ),
+    damageTakenPer10: calculatePer10(totals.damageTaken, totals.heroTimePlayed),
+    damageBlockedPer10: calculatePer10(
+      totals.damageBlocked,
+      totals.heroTimePlayed
+    ),
+    ultimatesEarnedPer10: calculatePer10(
+      totals.ultimatesEarned,
+      totals.heroTimePlayed
+    ),
+    ultimatesUsedPer10: calculatePer10(
+      totals.ultimatesUsed,
+      totals.heroTimePlayed
+    ),
+    soloKillsPer10: calculatePer10(totals.soloKills, totals.heroTimePlayed),
+    objectiveKillsPer10: calculatePer10(
+      totals.objectiveKills,
+      totals.heroTimePlayed
+    ),
+    defensiveAssistsPer10: calculatePer10(
+      totals.defensiveAssists,
+      totals.heroTimePlayed
+    ),
+    offensiveAssistsPer10: calculatePer10(
+      totals.offensiveAssists,
+      totals.heroTimePlayed
+    ),
+    environmentalKillsPer10: calculatePer10(
+      totals.environmentalKills,
+      totals.heroTimePlayed
+    ),
+    environmentalDeathsPer10: calculatePer10(
+      totals.environmentalDeaths,
+      totals.heroTimePlayed
+    ),
+    multikillsPer10: calculatePer10(totals.multikills, totals.heroTimePlayed),
+    barrierDamagePer10: calculatePer10(
+      totals.barrierDamageDealt,
+      totals.heroTimePlayed
+    ),
+    selfHealingPer10: calculatePer10(totals.selfHealing, totals.heroTimePlayed),
+    firstPicksPer10: calculatePer10(
+      calculatedAggregates.firstPickCount ?? 0,
+      totals.heroTimePlayed
+    ),
+    firstDeathsPer10: calculatePer10(
+      calculatedAggregates.firstDeathCount ?? 0,
+      totals.heroTimePlayed
+    ),
+    mapMvpRate:
+      calculatedStats.length > 0
+        ? ((calculatedAggregates.mapMvpCount ?? 0) / calculatedStats.length) *
+          100
+        : 0,
+    ajaxPer10: calculatePer10(
+      calculatedAggregates.ajaxCount ?? 0,
+      totals.heroTimePlayed
+    ),
+    weaponAccuracy: calculatePercentage(totals.shotsHit, totals.shotsFired),
+    criticalHitAccuracy: calculatePercentage(
+      totals.criticalHits,
+      totals.shotsHit
+    ),
+    scopedAccuracy: calculatePercentage(
+      totals.scopedShotsHit,
+      totals.scopedShots
+    ),
+    scopedCriticalHitAccuracy: calculatePercentage(
+      totals.scopedCriticalHitKills,
+      totals.scopedShotsHit
+    ),
+    fletaDeadliftPercentage: calculatedAggregates.fletaDeadliftPercentage ?? 0,
+    firstPickPercentage: calculatedAggregates.firstPickPercentage ?? 0,
+    firstPickCount: calculatedAggregates.firstPickCount ?? 0,
+    firstDeathPercentage: calculatedAggregates.firstDeathPercentage ?? 0,
+    firstDeathCount: calculatedAggregates.firstDeathCount ?? 0,
+    mvpScore: calculatedAggregates.mvpScore ?? 0,
+    mapMvpCount: calculatedAggregates.mapMvpCount ?? 0,
+    ajaxCount: calculatedAggregates.ajaxCount ?? 0,
+    averageUltChargeTime: calculatedAggregates.averageUltChargeTime ?? 0,
+    averageTimeToUseUlt: calculatedAggregates.averageTimeToUseUlt ?? 0,
+    averageDroughtTime: calculatedAggregates.averageDroughtTime ?? 0,
+    killsPerUltimate: calculatedAggregates.killsPerUltimate ?? 0,
+    duelWinratePercentage: calculatedAggregates.duelWinratePercentage ?? 0,
+    fightReversalPercentage: calculatedAggregates.fightReversalPercentage ?? 0,
+    // Team comparisons don't calculate variance metrics
+    eliminationsPer10StdDev: 0,
+    deathsPer10StdDev: 0,
+    allDamagePer10StdDev: 0,
+    healingDealtPer10StdDev: 0,
+    firstPickPercentageStdDev: 0,
+    consistencyScore: 0,
+  };
+}
+
+/**
+ * Gets team comparison stats for a set of maps
+ */
+async function getTeamComparisonStatsFn(
+  mapIds: number[],
+  teamId: number,
+  heroes?: HeroName[]
+): Promise<TeamComparisonStats> {
+  if (mapIds.length === 0) {
+    throw new Error("At least one map must be provided");
+  }
+
+  // Get team roster
+  const teamRoster = await getTeamRoster(teamId);
+  const teamRosterSet = new Set(teamRoster);
+
+  if (teamRoster.length === 0) {
+    throw new Error("No team roster found");
+  }
+
+  // Fetch map data
+  const maps = await prisma.map.findMany({
+    where: { id: { in: mapIds } },
+    include: {
+      Scrim: true,
+      mapData: {
+        include: {
+          match_start: true,
+          round_end: true,
+          objective_captured: true,
+        },
+      },
+    },
+  });
+
+  const mapDataIds = maps.flatMap((map) => map.mapData.map((md) => md.id));
+
+  if (mapDataIds.length === 0) {
+    throw new Error("No map data found for the provided map IDs");
+  }
+
+  // Fetch all player stats
+  const allPlayerStats = await prisma.playerStat.findMany({
+    where: {
+      MapDataId: { in: mapIds },
+      ...(heroes && heroes.length > 0 ? { player_hero: { in: heroes } } : {}),
+    },
+  });
+
+  // Fetch calculated stats
+  const allCalculatedStats = await prisma.calculatedStat.findMany({
+    where: {
+      MapDataId: { in: mapDataIds },
+      ...(heroes && heroes.length > 0 ? { hero: { in: heroes } } : {}),
+    },
+  });
+
+  // Map MapData IDs back to Map IDs
+  const mapDataIdToMapId = new Map<number, number>();
+  for (const map of maps) {
+    for (const mapData of map.mapData) {
+      mapDataIdToMapId.set(mapData.id, map.id);
+    }
+  }
+
+  // Separate stats by team (my team vs enemy team)
+  const myTeamStats: PlayerStat[] = [];
+  const enemyTeamStats: PlayerStat[] = [];
+  const myTeamCalculatedStats: CalculatedStat[] = [];
+  const enemyTeamCalculatedStats: CalculatedStat[] = [];
+
+  // Per-map breakdown
+  const perMapBreakdown: TeamMapBreakdown[] = [];
+
+  for (const map of maps) {
+    const mapPlayerStats = allPlayerStats.filter(
+      (stat) => stat.MapDataId === map.id
+    );
+
+    if (mapPlayerStats.length === 0) continue;
+
+    // Find team name for this map
+    const myTeamName = findTeamNameForMapInMemory(
+      map.id,
+      mapPlayerStats,
+      teamRosterSet
+    );
+
+    if (!myTeamName) continue;
+
+    // Get match start for metadata
+    const firstMapData = map.mapData[0];
+    const matchStart = firstMapData?.match_start[0];
+
+    // Get final round and captures for winner calculation
+    const roundEnds = firstMapData?.round_end ?? [];
+    const finalRound =
+      roundEnds.length > 0
+        ? roundEnds.reduce((latest, current) =>
+            current.round_number > latest.round_number ? current : latest
+          )
+        : null;
+
+    const allCaptures = firstMapData?.objective_captured ?? [];
+    const team1Captures = allCaptures.filter(
+      (c) => c.capturing_team === matchStart?.team_1_name
+    );
+    const team2Captures = allCaptures.filter(
+      (c) => c.capturing_team === matchStart?.team_2_name
+    );
+
+    // Determine enemy team name
+    const enemyTeamName =
+      matchStart?.team_1_name === myTeamName
+        ? matchStart?.team_2_name
+        : matchStart?.team_1_name;
+
+    // Separate stats by team for this map
+    const myTeamMapStats = mapPlayerStats.filter(
+      (stat) => stat.player_team === myTeamName
+    );
+    const enemyTeamMapStats = mapPlayerStats.filter(
+      (stat) => stat.player_team === enemyTeamName
+    );
+
+    myTeamStats.push(...myTeamMapStats);
+    enemyTeamStats.push(...enemyTeamMapStats);
+
+    // Separate calculated stats
+    const mapCalculatedStats = allCalculatedStats.filter(
+      (stat) => mapDataIdToMapId.get(stat.MapDataId) === map.id
+    );
+
+    const myTeamMapCalculatedStats = mapCalculatedStats.filter((stat) =>
+      teamRosterSet.has(stat.playerName)
+    );
+    const enemyTeamMapCalculatedStats = mapCalculatedStats.filter(
+      (stat) => !teamRosterSet.has(stat.playerName)
+    );
+
+    myTeamCalculatedStats.push(...myTeamMapCalculatedStats);
+    enemyTeamCalculatedStats.push(...enemyTeamMapCalculatedStats);
+
+    // Calculate aggregated stats for this map
+    const myTeamMapAggregated = aggregateTeamStats(
+      myTeamMapStats,
+      myTeamMapCalculatedStats
+    );
+    const enemyTeamMapAggregated = aggregateTeamStats(
+      enemyTeamMapStats,
+      enemyTeamMapCalculatedStats
+    );
+
+    // Determine winner for this map
+    const winnerTeamName = calculateWinner({
+      matchDetails: matchStart ?? null,
+      finalRound: finalRound ?? null,
+      team1Captures,
+      team2Captures,
+    });
+
+    const winner: TeamMapBreakdown["winner"] =
+      winnerTeamName === myTeamName
+        ? "myTeam"
+        : winnerTeamName === enemyTeamName
+          ? "enemyTeam"
+          : winnerTeamName === "N/A"
+            ? null
+            : "draw";
+
+    perMapBreakdown.push({
+      mapId: map.id,
+      mapDataId: firstMapData?.id ?? 0,
+      mapName: matchStart?.map_name || map.name,
+      mapType: matchStart?.map_type || ("Control" as MapType),
+      scrimId: map.scrimId ?? 0,
+      scrimName: map.Scrim?.name ?? "Unknown",
+      date: map.Scrim?.date ?? map.createdAt,
+      replayCode: map.replayCode,
+      myTeamName: myTeamName ?? "My Team",
+      enemyTeamName: enemyTeamName ?? "Enemy Team",
+      myTeamStats: myTeamMapAggregated,
+      enemyTeamStats: enemyTeamMapAggregated,
+      winner,
+    });
+  }
+
+  // Sort by date
+  perMapBreakdown.sort((a, b) => a.date.getTime() - b.date.getTime());
+
+  // Aggregate overall stats
+  const myTeamAggregated = aggregateTeamStats(
+    myTeamStats,
+    myTeamCalculatedStats
+  );
+  const enemyTeamAggregated = aggregateTeamStats(
+    enemyTeamStats,
+    enemyTeamCalculatedStats
+  );
+
+  // Get team names from first map
+  const firstMapTeamName =
+    perMapBreakdown.length > 0 ? perMapBreakdown[0].myTeamName : "My Team";
+  const firstMapEnemyTeamName =
+    perMapBreakdown.length > 0
+      ? perMapBreakdown[0].enemyTeamName
+      : "Enemy Team";
+
+  // Count unique players
+  const myTeamPlayerSet = new Set(myTeamStats.map((stat) => stat.player_name));
+  const enemyTeamPlayerSet = new Set(
+    enemyTeamStats.map((stat) => stat.player_name)
+  );
+
+  return {
+    mapCount: perMapBreakdown.length,
+    mapIds,
+    myTeam: {
+      teamName: firstMapTeamName,
+      playerCount: myTeamPlayerSet.size,
+      stats: myTeamAggregated,
+    },
+    enemyTeam: {
+      teamName: firstMapEnemyTeamName,
+      playerCount: enemyTeamPlayerSet.size,
+      stats: enemyTeamAggregated,
+    },
+    perMapBreakdown,
+  };
+}
+
+export const getTeamComparisonStats = cache(getTeamComparisonStatsFn);
diff --git a/src/lib/email/index.ts b/src/lib/email/index.ts
index 3fcedda24..4c8cbc6db 100644
--- a/src/lib/email/index.ts
+++ b/src/lib/email/index.ts
@@ -90,7 +90,7 @@ function createService() {
 
           const {
             to,
-            from = "lux.dev <noreply@lux.dev>",
+            from = "noreply@lux.dev",
             subject,
             html,
             replyTo,
diff --git a/src/lib/flags.ts b/src/lib/flags.ts
new file mode 100644
index 000000000..a47f4f22e
--- /dev/null
+++ b/src/lib/flags.ts
@@ -0,0 +1,74 @@
+import { auth } from "@/lib/auth";
+import prisma from "@/lib/prisma";
+import { vercelAdapter } from "@flags-sdk/vercel";
+import type { $Enums } from "@prisma/client";
+import { dedupe, flag } from "flags/next";
+
+type Entities = {
+  user?: {
+    id: string;
+    email: string;
+    role: $Enums.UserRole;
+  };
+  teams?: {
+    idArray: string[];
+  };
+};
+
+const identify = dedupe(async (): Promise<Entities> => {
+  const session = await auth();
+  const user = await prisma.user.findUnique({
+    where: { email: session?.user?.email },
+    include: { teams: true },
+  });
+
+  return {
+    user: user
+      ? {
+          id: user.id,
+          email: user.email,
+          role: user.role,
+        }
+      : undefined,
+    teams:
+      user?.teams && user?.teams.length > 0
+        ? { idArray: user?.teams.map((team) => team.id.toString()) }
+        : undefined,
+  };
+});
+
+export const mapComparison = flag<boolean, Entities>({
+  key: "map-comparison",
+  adapter: vercelAdapter(),
+  options: [
+    {
+      value: true,
+      label: "Enabled",
+    },
+    {
+      value: false,
+      label: "Disabled",
+    },
+  ],
+  defaultValue: false,
+  description: "Enable or disable map comparison",
+  identify,
+});
+
+export const overviewCard = flag<boolean, Entities>({
+  key: "overview-card",
+  adapter: vercelAdapter(),
+  options: [
+    {
+      value: true,
+      label: "Enabled",
+    },
+    {
+      value: false,
+      label: "Disabled",
+    },
+  ],
+  defaultValue: false,
+  description: "Enable or disable an overview card for the scrim",
+  identify,
+});
diff --git a/src/lib/player-table-data.ts b/src/lib/player-table-data.ts
index cb7c5e63e..ebeec3f3e 100644
--- a/src/lib/player-table-data.ts
+++ b/src/lib/player-table-data.ts
@@ -22,6 +22,8 @@ export type PlayerData = {
   ultsCharged: number;
   ultsUsed: number;
   mostPlayedHero: HeroName;
+  firstDeathRate: number;
+  teamFirstDeathRate: number;
 };
 
 export function determineRole(heroName: HeroName) {
@@ -61,6 +63,8 @@ export function aggregatePlayerData(rows: PlayerStat[]): PlayerData[] {
       ultsUsed: 0,
       timePlayed: 0,
       mostPlayedHero: row.player_hero as HeroName,
+      firstDeathRate: 0,
+      teamFirstDeathRate: 0,
     };
 
     const currentMaxTime = playerMaxMatchTime.get(row.player_name) ?? 0;
diff --git a/src/lib/stat-percentiles.ts b/src/lib/stat-percentiles.ts
index cf6d751e5..8dc6ac4e4 100644
--- a/src/lib/stat-percentiles.ts
+++ b/src/lib/stat-percentiles.ts
@@ -309,6 +309,22 @@ type MultiStatComparisonResult = {
   comparisons: StatComparison[];
 };
 
+type StatDistributionBaselineParams = {
+  hero: string;
+  stat: ValidStatColumn;
+  minMaps?: number;
+  minTimeSeconds?: number;
+  sampleLimit?: number;
+};
+
+type StatDistributionBaseline = {
+  hero: string;
+  stat_name: string;
+  hero_avg_per10: number;
+  hero_std_per10: number;
+  total_players: number;
+};
+
 function buildMultiStatComparisonQuery({
   hero,
   stats,
@@ -438,7 +454,70 @@ export async function compareMultipleStatsToDistribution(
   };
 }
 
+function buildStatDistributionBaselineQuery({
+  hero,
+  stat,
+  minMaps = 10,
+  minTimeSeconds = 300,
+  sampleLimit = 150,
+}: StatDistributionBaselineParams): Prisma.Sql {
+  return Prisma.sql`
+    WITH
+      final_rows AS (
+        SELECT DISTINCT ON ("MapDataId", player_name)
+          player_name,
+          ${Prisma.raw(stat)},
+          hero_time_played
+        FROM
+          "PlayerStat"
+        WHERE
+          player_hero = ${hero}
+          AND ${Prisma.raw(stat)} IS NOT NULL
+          AND hero_time_played >= 60
+        ORDER BY
+          "MapDataId",
+          player_name,
+          round_number DESC,
+          id DESC
+      ),
+      per_player_totals AS (
+        SELECT
+          player_name,
+          COUNT(*) AS maps,
+          (SUM(${Prisma.raw(stat)})::numeric / SUM(hero_time_played)) * 600.0 AS stat_per10
+        FROM
+          final_rows
+        GROUP BY
+          player_name
+        HAVING
+          COUNT(*) >= ${minMaps}
+          AND SUM(hero_time_played) >= ${minTimeSeconds}
+        ORDER BY
+          maps DESC, player_name
+        LIMIT ${sampleLimit}
+      )
+    SELECT
+      ${hero}::text AS hero,
+      ${stat}::text AS stat_name,
+      ROUND(AVG(stat_per10)::numeric, 2) AS hero_avg_per10,
+      ROUND(STDDEV_SAMP(stat_per10)::numeric, 2) AS hero_std_per10,
+      COUNT(*)::int AS total_players
+    FROM
+      per_player_totals
+  `;
+}
+
+export async function getStatDistributionBaseline(
+  params: StatDistributionBaselineParams
+): Promise<StatDistributionBaseline | null> {
+  const query = buildStatDistributionBaselineQuery(params);
+  const result = await prisma.$queryRaw<StatDistributionBaseline[]>(query);
+  return result[0] ?? null;
+}
+
 export type {
+  StatDistributionBaseline,
+  StatDistributionBaselineParams,
   MultiStatComparisonParams,
   MultiStatComparisonResult,
   StatComparison,
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 7435f6c37..dbec80208 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,5 +1,10 @@
 import prisma from "@/lib/prisma";
-import { ColorblindMode, type $Enums, type Kill } from "@prisma/client";
+import {
+  ColorblindMode,
+  type $Enums,
+  type Kill,
+  type MercyRez,
+} from "@prisma/client";
 import { clsx, type ClassValue } from "clsx";
 import { useMessages, useTranslations } from "next-intl";
 import { getMessages, getTranslations } from "next-intl/server";
@@ -179,50 +184,25 @@ export function range(max: number) {
   return Array.from({ length: max }, (_, i) => i);
 }
 
-export async function groupKillsIntoFights(mapId: number) {
-  type Fight = {
-    kills: Kill[];
-    start: number;
-    end: number;
-  };
-
-  const [killsByMapId, rezzesByMapId] = await Promise.all([
-    prisma.kill.findMany({ where: { MapDataId: mapId } }),
-    prisma.mercyRez.findMany({ where: { MapDataId: mapId } }),
-  ]);
-
-  if (killsByMapId.length === 0 && rezzesByMapId.length === 0) return [];
+export type Fight = {
+  kills: Kill[];
+  start: number;
+  end: number;
+};
 
-  const events = [
-    ...killsByMapId,
-    ...rezzesByMapId.map((rez) => ({
-      id: rez.id,
-      scrimId: rez.scrimId,
-      event_type: "mercy_rez" as $Enums.EventType,
-      match_time: rez.match_time,
-      attacker_team: rez.resurrecter_team,
-      attacker_name: rez.resurrecter_player,
-      attacker_hero: rez.resurrecter_hero,
-      victim_team: rez.resurrectee_team,
-      victim_name: rez.resurrectee_player,
-      victim_hero: rez.resurrectee_hero,
-      event_ability: "Resurrect",
-      event_damage: 0,
-      is_critical_hit: "0",
-      is_environmental: "0",
-      MapDataId: rez.MapDataId,
-    })),
-  ];
+const FIGHT_GAP_SECONDS = 15;
 
-  // Sorting events by match_time to properly sequence kills and rezzes
-  events.sort((a, b) => a.match_time - b.match_time);
+export function groupEventsIntoFights(sortedEvents: Kill[]): Fight[] {
+  if (sortedEvents.length === 0) return [];
 
   const fights: Fight[] = [];
   let currentFight: Fight | null = null;
 
-  events.forEach((event) => {
-    if (!currentFight || event.match_time - currentFight.end > 15) {
-      // Start a new fight if no current fight or we're past the 15 second window
+  for (const event of sortedEvents) {
+    if (
+      !currentFight ||
+      event.match_time - currentFight.end > FIGHT_GAP_SECONDS
+    ) {
       currentFight = {
         kills: [event],
         start: event.match_time,
@@ -230,15 +210,52 @@ export async function groupKillsIntoFights(mapId: number) {
       };
       fights.push(currentFight);
     } else {
-      // Otherwise, add the event to the current fight and update the end time
       currentFight.kills.push(event);
       currentFight.end = event.match_time;
     }
-  });
+  }
 
   return fights;
 }
 
+export function mercyRezToKillEvent(rez: MercyRez): Kill {
+  return {
+    id: rez.id,
+    scrimId: rez.scrimId,
+    event_type: "mercy_rez" as $Enums.EventType,
+    match_time: rez.match_time,
+    attacker_team: rez.resurrecter_team,
+    attacker_name: rez.resurrecter_player,
+    attacker_hero: rez.resurrecter_hero,
+    victim_team: rez.resurrectee_team,
+    victim_name: rez.resurrectee_player,
+    victim_hero: rez.resurrectee_hero,
+    event_ability: "Resurrect",
+    event_damage: 0,
+    is_critical_hit: "0",
+    is_environmental: "0",
+    MapDataId: rez.MapDataId,
+  };
+}
+
+export async function groupKillsIntoFights(mapId: number) {
+  const [killsByMapId, rezzesByMapId] = await Promise.all([
+    prisma.kill.findMany({ where: { MapDataId: mapId } }),
+    prisma.mercyRez.findMany({ where: { MapDataId: mapId } }),
+  ]);
+
+  if (killsByMapId.length === 0 && rezzesByMapId.length === 0) return [];
+
+  const events: Kill[] = [
+    ...killsByMapId,
+    ...rezzesByMapId.map(mercyRezToKillEvent),
+  ];
+
+  events.sort((a, b) => a.match_time - b.match_time);
+
+  return groupEventsIntoFights(events);
+}
+
 export async function groupPlayerKillsIntoFights(
   mapId: number,
   playerName: string
diff --git a/src/stores/map-selection-store.ts b/src/stores/map-selection-store.ts
new file mode 100644
index 000000000..b08e65d55
--- /dev/null
+++ b/src/stores/map-selection-store.ts
@@ -0,0 +1,166 @@
+import { createStore } from "@xstate/store";
+
+type MapSelection = {
+  mapId: number;
+  scrimId: number;
+};
+
+type MapSelectionContext = {
+  // Map from mapId to scrimId
+  selections: Map<number, number>;
+};
+
+const STORAGE_KEY = "parsertime:map-selections";
+
+// Helper to safely access localStorage (SSR-safe)
+function getStoredSelections(): Map<number, number> {
+  if (typeof window === "undefined") {
+    return new Map();
+  }
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return new Map();
+
+    const parsed = JSON.parse(stored) as [number, number][];
+    return new Map(parsed);
+  } catch {
+    return new Map();
+  }
+}
+
+function saveSelections(selections: Map<number, number>): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    const serialized = JSON.stringify(Array.from(selections.entries()));
+    localStorage.setItem(STORAGE_KEY, serialized);
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+function clearStoredSelections(): void {
+  if (typeof window === "undefined") return;
+
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+export const mapSelectionStore = createStore({
+  context: {
+    selections: getStoredSelections(),
+  } satisfies MapSelectionContext,
+  on: {
+    toggleMapSelection: (
+      context: MapSelectionContext,
+      event: { mapId: number; scrimId: number }
+    ): MapSelectionContext => {
+      const newSelections = new Map(context.selections);
+
+      if (newSelections.has(event.mapId)) {
+        newSelections.delete(event.mapId);
+      } else {
+        newSelections.set(event.mapId, event.scrimId);
+      }
+
+      // Persist to localStorage
+      saveSelections(newSelections);
+
+      return {
+        ...context,
+        selections: newSelections,
+      };
+    },
+
+    selectAll: (
+      context: MapSelectionContext,
+      event: { maps: MapSelection[] }
+    ): MapSelectionContext => {
+      const newSelections = new Map(context.selections);
+
+      for (const { mapId, scrimId } of event.maps) {
+        newSelections.set(mapId, scrimId);
+      }
+
+      // Persist to localStorage
+      saveSelections(newSelections);
+
+      return {
+        ...context,
+        selections: newSelections,
+      };
+    },
+
+    clearAll: (context: MapSelectionContext): MapSelectionContext => {
+      // Clear localStorage
+      clearStoredSelections();
+
+      return {
+        ...context,
+        selections: new Map(),
+      };
+    },
+
+    clearScrim: (
+      context: MapSelectionContext,
+      event: { scrimId: number }
+    ): MapSelectionContext => {
+      const newSelections = new Map(context.selections);
+
+      for (const [mapId, scrimId] of newSelections.entries()) {
+        if (scrimId === event.scrimId) {
+          newSelections.delete(mapId);
+        }
+      }
+
+      // Persist to localStorage
+      saveSelections(newSelections);
+
+      return {
+        ...context,
+        selections: newSelections,
+      };
+    },
+  },
+});
+
+// Selectors
+export function selectIsMapSelected(state: MapSelectionContext, mapId: number) {
+  return state.selections.has(mapId);
+}
+
+export function selectHasSelections(state: MapSelectionContext) {
+  return state.selections.size > 0;
+}
+
+export function selectSelectedMapIds(state: MapSelectionContext) {
+  return state.selections;
+}
+
+export function selectSelectionCount(state: MapSelectionContext) {
+  return state.selections.size;
+}
+
+export function selectUniqueScrimCount(state: MapSelectionContext) {
+  const scrimIds = new Set<number>();
+  for (const scrimId of state.selections.values()) {
+    scrimIds.add(scrimId);
+  }
+  return scrimIds.size;
+}
+
+export function selectMapsByScrim(state: MapSelectionContext) {
+  const mapsByScrim = new Map<number, number[]>();
+
+  for (const [mapId, scrimId] of state.selections.entries()) {
+    const maps = mapsByScrim.get(scrimId) ?? [];
+    maps.push(mapId);
+    mapsByScrim.set(scrimId, maps);
+  }
+
+  return mapsByScrim;
+}
diff --git a/src/types/heroes.ts b/src/types/heroes.ts
index 00a37f272..0b1273c96 100644
--- a/src/types/heroes.ts
+++ b/src/types/heroes.ts
@@ -2,6 +2,11 @@ export type Hero = Support | Tank | DPS;
 
 export type HeroName = Hero["name"];
 
+export type Anran = {
+  name: "Anran";
+  image: "anran.png";
+};
+
 export type Ana = {
   name: "Ana";
   image: "ana.png";
@@ -32,6 +37,11 @@ export type Cassidy = {
   image: "cassidy.png";
 };
 
+export type Domina = {
+  name: "Domina";
+  image: "domina.png";
+};
+
 export type Doomfist = {
   name: "Doomfist";
   image: "doomfist.png";
@@ -47,6 +57,11 @@ export type Echo = {
   image: "echo.png";
 };
 
+export type Emre = {
+  name: "Emre";
+  image: "emre.png";
+};
+
 export type Freja = {
   name: "Freja";
   image: "freja.png";
@@ -72,6 +87,11 @@ export type Illari = {
   image: "illari.png";
 };
 
+export type JetpackCat = {
+  name: "Jetpack Cat";
+  image: "jetpackcat.png";
+};
+
 export type JunkerQueen = {
   name: "Junker Queen";
   image: "junkerqueen.png";
@@ -117,6 +137,11 @@ export type Mercy = {
   image: "mercy.png";
 };
 
+export type Mizuki = {
+  name: "Mizuki";
+  image: "mizuki.png";
+};
+
 export type Moira = {
   name: "Moira";
   image: "moira.png";
@@ -229,6 +254,7 @@ export type Zenyatta = {
 
 export type Tank =
   | Dva
+  | Domina
   | Doomfist
   | Hazard
   | JunkerQueen
@@ -242,10 +268,12 @@ export type Tank =
   | WreckingBall
   | Zarya;
 export type DPS =
+  | Anran
   | Ashe
   | Bastion
   | Cassidy
   | Echo
+  | Emre
   | Freja
   | Genji
   | Hanzo
@@ -267,31 +295,37 @@ export type Support =
   | Baptiste
   | Brigitte
   | Illari
+  | JetpackCat
   | Juno
   | Kiriko
   | Lifeweaver
   | Lucio
   | Mercy
+  | Mizuki
   | Moira
   | Wuyang
   | Zenyatta;
 
 export const heroRoleMapping: Record<HeroName, "Tank" | "Damage" | "Support"> =
   {
+    Anran: "Damage",
     Ana: "Support",
     Ashe: "Damage",
     Baptiste: "Support",
     Bastion: "Damage",
     Brigitte: "Support",
     Cassidy: "Damage",
+    Domina: "Tank",
     Doomfist: "Tank",
     "D.Va": "Tank",
     Echo: "Damage",
+    Emre: "Damage",
     Freja: "Damage",
     Genji: "Damage",
     Hanzo: "Damage",
     Hazard: "Tank",
     Illari: "Support",
+    "Jetpack Cat": "Support",
     "Junker Queen": "Tank",
     Junkrat: "Damage",
     Juno: "Support",
@@ -301,6 +335,7 @@ export const heroRoleMapping: Record<HeroName, "Tank" | "Damage" | "Support"> =
     Mauga: "Tank",
     Mei: "Damage",
     Mercy: "Support",
+    Mizuki: "Support",
     Moira: "Support",
     Orisa: "Tank",
     Pharah: "Damage",
@@ -331,6 +366,7 @@ export const roleHeroMapping: Record<
 > = {
   Tank: [
     "D.Va",
+    "Domina",
     "Doomfist",
     "Hazard",
     "Junker Queen",
@@ -345,10 +381,12 @@ export const roleHeroMapping: Record<
     "Zarya",
   ],
   Damage: [
+    "Anran",
     "Ashe",
     "Bastion",
     "Cassidy",
     "Echo",
+    "Emre",
     "Freja",
     "Genji",
     "Hanzo",
@@ -371,11 +409,13 @@ export const roleHeroMapping: Record<
     "Baptiste",
     "Brigitte",
     "Illari",
+    "Jetpack Cat",
     "Juno",
     "Kiriko",
     "Lifeweaver",
     "Lúcio",
     "Mercy",
+    "Mizuki",
     "Moira",
     "Wuyang",
     "Zenyatta",
@@ -395,6 +435,7 @@ export const subroleHeroMapping: Record<
     "Ashe",
     "Bastion",
     "Cassidy",
+    "Emre",
     "Hanzo",
     "Freja",
     "Sojourn",
@@ -403,6 +444,7 @@ export const subroleHeroMapping: Record<
     "Widowmaker",
   ],
   FlexDamage: [
+    "Anran",
     "Echo",
     "Genji",
     "Hanzo",
@@ -418,6 +460,7 @@ export const subroleHeroMapping: Record<
     "Venture",
   ],
   GroundTank: [
+    "Domina",
     "Junker Queen",
     "Mauga",
     "Orisa",
@@ -433,11 +476,19 @@ export const subroleHeroMapping: Record<
     "Baptiste",
     "Illari",
     "Kiriko",
+    "Mizuki",
     "Moira",
     "Wuyang",
     "Zenyatta",
   ],
-  MainSupport: ["Brigitte", "Juno", "Lifeweaver", "Lúcio", "Mercy"],
+  MainSupport: [
+    "Brigitte",
+    "Juno",
+    "Lifeweaver",
+    "Lúcio",
+    "Mercy",
+    "Jetpack Cat",
+  ],
 };
 
 export const heroPriority = {
diff --git a/src/types/map-group.ts b/src/types/map-group.ts
new file mode 100644
index 000000000..f9bd120fb
--- /dev/null
+++ b/src/types/map-group.ts
@@ -0,0 +1,47 @@
+import type { MapGroup } from "@prisma/client";
+
+/**
+ * Map group with creator information
+ */
+export type MapGroupWithCreator = MapGroup & {
+  creator: {
+    name: string | null;
+    email: string;
+  };
+};
+
+/**
+ * Formatted map group for API responses
+ */
+export type FormattedMapGroup = {
+  id: number;
+  name: string;
+  description: string | null;
+  category: string | null;
+  mapIds: number[];
+  mapCount: number;
+  createdBy: string;
+  createdAt: Date;
+  updatedAt: Date;
+};
+
+/**
+ * Request body for creating a map group
+ */
+export type CreateMapGroupRequest = {
+  name: string;
+  description?: string;
+  teamId: number;
+  mapIds: number[];
+  category?: string;
+};
+
+/**
+ * Request body for updating a map group
+ */
+export type UpdateMapGroupRequest = {
+  name?: string;
+  description?: string;
+  mapIds?: number[];
+  category?: string;
+};
diff --git a/src/types/map.ts b/src/types/map.ts
index c98dc6e16..e84bbcc8f 100644
--- a/src/types/map.ts
+++ b/src/types/map.ts
@@ -39,5 +39,5 @@ export const mapNameToMapTypeMapping = {
   "Shambali Monastery": $Enums.MapType.Escort,
   Suravasa: $Enums.MapType.Flashpoint,
   "Throne of Anubis": $Enums.MapType.Clash,
-  "Watchpoint: Gibraltar": $Enums.MapType.Hybrid,
+  "Watchpoint: Gibraltar": $Enums.MapType.Escort,
 } as const;
diff --git a/src/types/team-comparison.ts b/src/types/team-comparison.ts
new file mode 100644
index 000000000..badebf999
--- /dev/null
+++ b/src/types/team-comparison.ts
@@ -0,0 +1,45 @@
+import type { AggregatedStats } from "@/data/comparison-dto";
+
+/**
+ * Team comparison result showing both teams' aggregated stats
+ */
+export type TeamComparisonStats = {
+  mapCount: number;
+  mapIds: number[];
+  myTeam: TeamAggregatedStats;
+  enemyTeam: TeamAggregatedStats;
+  perMapBreakdown: TeamMapBreakdown[];
+};
+
+/**
+ * Aggregated stats for a team with team-specific metadata
+ */
+export type TeamAggregatedStats = {
+  teamName: string;
+  playerCount: number;
+  stats: AggregatedStats;
+  roleBreakdown?: {
+    tank?: AggregatedStats;
+    dps?: AggregatedStats;
+    support?: AggregatedStats;
+  };
+};
+
+/**
+ * Per-map breakdown showing team performance on each map
+ */
+export type TeamMapBreakdown = {
+  mapId: number;
+  mapDataId: number;
+  mapName: string;
+  mapType: string;
+  scrimId: number;
+  scrimName: string;
+  date: Date;
+  replayCode: string | null;
+  myTeamName: string;
+  enemyTeamName: string;
+  myTeamStats: Partial<AggregatedStats>;
+  enemyTeamStats: Partial<AggregatedStats>;
+  winner: "myTeam" | "enemyTeam" | "draw" | null;
+};
diff --git a/test/variance-calculations.test.ts b/test/variance-calculations.test.ts
new file mode 100644
index 000000000..5232ce90f
--- /dev/null
+++ b/test/variance-calculations.test.ts
@@ -0,0 +1,171 @@
+import {
+  calculateMean,
+  calculateStandardDeviation,
+} from "@/lib/distribution-utils";
+import { describe, expect, it } from "vitest";
+
+describe("Variance and Standard Deviation Calculations", () => {
+  describe("calculateMean", () => {
+    it("should calculate mean of positive numbers", () => {
+      const values = [10, 20, 30, 40, 50];
+      expect(calculateMean(values)).toBe(30);
+    });
+
+    it("should handle single value", () => {
+      const values = [42];
+      expect(calculateMean(values)).toBe(42);
+    });
+
+    it("should return 0 for empty array", () => {
+      const values: number[] = [];
+      expect(calculateMean(values)).toBe(0);
+    });
+
+    it("should handle decimal values", () => {
+      const values = [1.5, 2.5, 3.5];
+      expect(calculateMean(values)).toBeCloseTo(2.5);
+    });
+
+    it("should handle negative numbers", () => {
+      const values = [-10, -20, -30];
+      expect(calculateMean(values)).toBe(-20);
+    });
+  });
+
+  describe("calculateStandardDeviation", () => {
+    it("should calculate standard deviation correctly", () => {
+      const values = [2, 4, 4, 4, 5, 5, 7, 9];
+      // Expected std dev: 2
+      expect(calculateStandardDeviation(values)).toBeCloseTo(2, 1);
+    });
+
+    it("should return 0 for identical values (no variance)", () => {
+      const values = [5, 5, 5, 5, 5];
+      expect(calculateStandardDeviation(values)).toBe(0);
+    });
+
+    it("should return 0 for single value", () => {
+      const values = [42];
+      expect(calculateStandardDeviation(values)).toBe(0);
+    });
+
+    it("should return 0 for empty array", () => {
+      const values: number[] = [];
+      expect(calculateStandardDeviation(values)).toBe(0);
+    });
+
+    it("should handle decimal values", () => {
+      const values = [1.5, 2.5, 3.5, 4.5, 5.5];
+      // Mean = 3.5, variance = 2, std dev = sqrt(2) ≈ 1.414
+      expect(calculateStandardDeviation(values)).toBeCloseTo(1.414, 2);
+    });
+
+    it("should calculate high variance correctly", () => {
+      const values = [1, 100];
+      // Mean = 50.5, variance = 2450.25, std dev ≈ 49.5
+      expect(calculateStandardDeviation(values)).toBeCloseTo(49.5, 1);
+    });
+  });
+
+  describe("Consistency Score Calculation", () => {
+    it("should calculate coefficient of variation", () => {
+      // CV = (std dev / mean) * 100
+      const values = [10, 20, 30, 40, 50];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+      const cv = (stdDev / mean) * 100;
+
+      expect(mean).toBe(30);
+      expect(stdDev).toBeCloseTo(14.14, 1);
+      expect(cv).toBeCloseTo(47.14, 1);
+    });
+
+    it("should show low CV for consistent performance", () => {
+      // Consistent player: small variation
+      const values = [18, 19, 20, 19, 18];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+      const cv = (stdDev / mean) * 100;
+
+      expect(cv).toBeLessThan(10); // Less than 10% variation
+    });
+
+    it("should show high CV for inconsistent performance", () => {
+      // Inconsistent player: large variation
+      const values = [5, 30, 10, 35, 15];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+      const cv = (stdDev / mean) * 100;
+
+      expect(cv).toBeGreaterThan(50); // More than 50% variation
+    });
+
+    it("should handle zero mean gracefully", () => {
+      const values = [0, 0, 0];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+
+      expect(mean).toBe(0);
+      expect(stdDev).toBe(0);
+      // CV would be 0/0, should handle this edge case
+    });
+  });
+
+  describe("Per-10 Statistics Variance", () => {
+    it("should calculate variance for per-10 stats", () => {
+      // Simulating eliminations per 10 across different maps
+      const elimsPer10 = [15.2, 18.6, 14.8, 17.1, 16.3];
+
+      const mean = calculateMean(elimsPer10);
+      const stdDev = calculateStandardDeviation(elimsPer10);
+
+      expect(mean).toBeCloseTo(16.4, 1);
+      expect(stdDev).toBeCloseTo(1.367, 2);
+    });
+
+    it("should identify highly consistent per-10 performance", () => {
+      // Very consistent player
+      const elimsPer10 = [20.1, 20.3, 19.9, 20.2, 20.0];
+      const stdDev = calculateStandardDeviation(elimsPer10);
+
+      expect(stdDev).toBeLessThan(0.2);
+    });
+
+    it("should identify highly variable per-10 performance", () => {
+      // Very inconsistent player
+      const elimsPer10 = [10, 25, 12, 28, 15];
+      const stdDev = calculateStandardDeviation(elimsPer10);
+
+      expect(stdDev).toBeGreaterThan(6);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle very large numbers", () => {
+      const values = [1000000, 2000000, 3000000];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+
+      expect(mean).toBe(2000000);
+      expect(stdDev).toBeCloseTo(816496.58, 0);
+    });
+
+    it("should handle very small decimal numbers", () => {
+      const values = [0.001, 0.002, 0.003];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+
+      expect(mean).toBeCloseTo(0.002, 3);
+      expect(stdDev).toBeCloseTo(0.0008, 4);
+    });
+
+    it("should handle mix of positive and negative", () => {
+      const values = [-5, 0, 5];
+      const mean = calculateMean(values);
+      const stdDev = calculateStandardDeviation(values);
+
+      expect(mean).toBe(0);
+      expect(stdDev).toBeCloseTo(4.08, 1);
+    });
+  });
+});
diff --git a/vercel.json b/vercel.json
index 2d3742a4f..ea1bec50f 100644
--- a/vercel.json
+++ b/vercel.json
@@ -15,6 +15,10 @@
     {
       "path": "/api/user/award-titles",
       "schedule": "0 0 * * *"
+    },
+    {
+      "path": "/api/reports/send-usage-report",
+      "schedule": "0 1 * * 6"
     }
   ],
   "regions": ["iad1"]