diff --git a/resources/css/app.css b/resources/css/app.css
index 67ed0e20..00e9bc1f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -19,6 +19,7 @@ html{background-color:lightgrey; font-family: 'Open Sans', sans-serif; box-sizin
 
 body{
   font-size:18px;
+  letter-spacing: .03em;
 }
 
 .search-input{
diff --git a/resources/js/app.js b/resources/js/app.js
index b7fc40a0..42f8aa08 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -24,8 +24,9 @@ import SingleSelectFilter from './components/SingleSelectFilter.vue';
 import MultiSelectFilter from './components/MultiSelectFilter.vue';
 import BubbleChart from './components/BubbleChart.vue';
 import BarChart from './components/BarChart.vue';
-import HeroBoxSmall from './components/HeroBoxSmall.vue';
+import RoundBoxSmall from './components/RoundBoxSmall.vue';
 import HeroGroupBox from './components/HeroGroupBox.vue';
+import GroupBox from './components/GroupBox.vue';
 import HeroBoxLarge from './components/HeroBoxLarge.vue';
 import RoleBox from './components/RoleBox.vue';
 import CustomButton from './components/CustomButton.vue';
@@ -36,6 +37,7 @@ import MapGroupBox from './components/MapGroupBox.vue';
 import GameSummaryBox from './components/GameSummaryBox.vue';
 import MmrBox from './components/MmrBox.vue';
 import StatBox from './components/StatBox.vue';
+import StatBarBox from './components/StatBarBox.vue';
 import SearchedBattletagHolding from './components/SearchedBattletagHolding.vue';
 
 //Global Pages
diff --git a/resources/js/components/CustomTable.vue b/resources/js/components/CustomTable.vue
index 0a35d41b..20af1900 100644
--- a/resources/js/components/CustomTable.vue
+++ b/resources/js/components/CustomTable.vue
@@ -21,7 +21,7 @@
             </div>
             <div v-else-if="column.value === 'most_played_hero'">
               <div class="flex gap-x-2 items-center">
-                <hero-box-small :hero="row.most_played_hero"></hero-box-small>
+                <round-box-small :hero="row.most_played_hero"></round-box-small>
                 {{ row.hero_build_games_played }}
               </div>
             </div>
diff --git a/resources/js/components/GameSummaryBox.vue b/resources/js/components/GameSummaryBox.vue
index 4e4f607b..45c6a01f 100644
--- a/resources/js/components/GameSummaryBox.vue
+++ b/resources/js/components/GameSummaryBox.vue
@@ -3,12 +3,12 @@
     class="relative flex border border-white bg-cover bg-no-repeat bg-center"
     :style="{ backgroundImage: `url('/images/maps/match/match-${data.game_map.sanitized_map_name}.jpg')` }"
   >    
-    <div class="flex-1 bg-red-500 p-4"><hero-box-small :hero="data.hero"></hero-box-small></div>
+    <div class="flex-1 bg-red-500 p-4"><round-box-small :hero="data.hero"></round-box-small></div>
     <div class="flex-1 bg-green-500 p-4"><mmr-box :winner="data.winner" :title="'Player'" :mmr="data.player_conservative_rating" :change="data.player_change"></mmr-box></div>
     <div class="flex-1 bg-blue-500 p-4"><mmr-box :winner="data.winner" :title="'Hero'" :mmr="data.hero_conservative_rating" :change="data.hero_change"></mmr-box></div>
     <div class="flex-1 bg-yellow-500 p-4"><mmr-box :winner="data.winner" :title="'Role'" :mmr="data.role_conservative_rating" :change="data.role_change"></mmr-box></div>
 
-    <div class="flex-1">
+    <div class="flex-1 flex gap-x-1">
       <talent-box v-if="data.level_one" :talent="data.level_one"></talent-box>
       <talent-box v-if="data.level_four" :talent="data.level_four"></talent-box>
       <talent-box v-if="data.level_seven" :talent="data.level_seven"></talent-box>
diff --git a/resources/js/components/Global/Compositions/CompositionsStats.vue b/resources/js/components/Global/Compositions/CompositionsStats.vue
index 7028faf8..b502d572 100644
--- a/resources/js/components/Global/Compositions/CompositionsStats.vue
+++ b/resources/js/components/Global/Compositions/CompositionsStats.vue
@@ -81,19 +81,19 @@
                 <tbody>
                   <div v-for="index in range">
                     <td>
-                      <hero-box-small :hero="getHeroData(1, row, row.compositionheroes[row.role_one.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(1, row, row.compositionheroes[row.role_one.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(2, row, row.compositionheroes[row.role_two.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(2, row, row.compositionheroes[row.role_two.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(3, row, row.compositionheroes[row.role_three.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(3, row, row.compositionheroes[row.role_three.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(4, row, row.compositionheroes[row.role_four.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(4, row, row.compositionheroes[row.role_four.name], index)"></round-box-small>
                     </td>
                     <td>
-                      <hero-box-small :hero="getHeroData(5, row, row.compositionheroes[row.role_five.name], index)"></hero-box-small>
+                      <round-box-small :hero="getHeroData(5, row, row.compositionheroes[row.role_five.name], index)"></round-box-small>
                     </td>
                   </div>
                 </tbody>
diff --git a/resources/js/components/Global/Draft/GlobalDraftStats.vue b/resources/js/components/Global/Draft/GlobalDraftStats.vue
index f8ff732c..bcd40296 100644
--- a/resources/js/components/Global/Draft/GlobalDraftStats.vue
+++ b/resources/js/components/Global/Draft/GlobalDraftStats.vue
@@ -10,7 +10,7 @@
       <!-- Should turn into a component for easy styling? -->
       <div class="flex flex-wrap gap-1" v-if="!selectedHero">
         <div v-for="hero in heroes" :key="hero.id">
-          <hero-box-small :hero="hero" @click="clickedHero(hero)"></hero-box-small>
+          <round-box-small :hero="hero" @click="clickedHero(hero)"></round-box-small>
         </div>
       </div>
 
diff --git a/resources/js/components/Global/Hero/GlobalHeroStats.vue b/resources/js/components/Global/Hero/GlobalHeroStats.vue
index 5e9cd5da..22c6eb11 100644
--- a/resources/js/components/Global/Hero/GlobalHeroStats.vue
+++ b/resources/js/components/Global/Hero/GlobalHeroStats.vue
@@ -110,7 +110,7 @@
         <tbody>
           <template v-for="(row, index) in sortedData">
             <tr>
-              <td class="py-2 px-3 border-b border-gray-200 flex items-center gap-1"><hero-box-small :hero="row" :includehover="false"></hero-box-small>{{ row.name }}</td>
+              <td class="py-2 px-3 border-b border-gray-200 flex items-center gap-1"><round-box-small :hero="row" :includehover="false"></round-box-small>{{ row.name }}</td>
               <td class="py-2 px-3 border-b border-gray-200">{{ row.win_rate }}</td>
               <td class="py-2 px-3 border-b border-gray-200"><span v-html="'&#177;'"></span>{{ row.confidence_interval }}</td>
               <td class="py-2 px-3 border-b border-gray-200">{{ row.win_rate_change }}</td>
diff --git a/resources/js/components/Global/Hero/Map/GlobalHeroMapStats.vue b/resources/js/components/Global/Hero/Map/GlobalHeroMapStats.vue
index b2a0f426..2895ee24 100644
--- a/resources/js/components/Global/Hero/Map/GlobalHeroMapStats.vue
+++ b/resources/js/components/Global/Hero/Map/GlobalHeroMapStats.vue
@@ -6,7 +6,7 @@
     <!-- Should turn into a component for easy styling? -->
     <div class="flex flex-wrap gap-1" v-if="!selectedHero">
       <div v-for="hero in heroes" :key="hero.id">
-        <hero-box-small :hero="hero" @click="clickedHero(hero)"></hero-box-small>
+        <round-box-small :hero="hero" @click="clickedHero(hero)"></round-box-small>
       </div>
     </div>
 
diff --git a/resources/js/components/Global/Matchups/GlobalMatchupsStats.vue b/resources/js/components/Global/Matchups/GlobalMatchupsStats.vue
index 71fa2bd6..ad47bbd4 100644
--- a/resources/js/components/Global/Matchups/GlobalMatchupsStats.vue
+++ b/resources/js/components/Global/Matchups/GlobalMatchupsStats.vue
@@ -6,7 +6,7 @@
     <!-- Should turn into a component for easy styling? -->
     <div class="flex flex-wrap gap-1" v-if="!selectedHero">
       <div v-for="hero in heroes" :key="hero.id">
-        <hero-box-small :hero="hero" @click="clickedHero(hero)"></hero-box-small>
+        <round-box-small :hero="hero" @click="clickedHero(hero)"></round-box-small>
       </div>
     </div>
 
@@ -37,8 +37,8 @@
 
 
     <div v-if="allyenemydata" class="flex flex-wrap gap-4">
-      <hero-group-box :text="'TOP 5 ALLIES ON HEROS TEAM'" :data="allyenemydata.ally.slice(0, 5)"></hero-group-box>
-      <hero-group-box :text="'TOP 5 THREATS ON ENEMIES TEAM'" :data="allyenemydata.enemy.slice(0, 5)"></hero-group-box>
+      <group-box :text="'TOP 5 ALLIES ON HEROS TEAM'" :data="allyenemydata.ally.slice(0, 5)"></group-box>
+      <group-box :text="'TOP 5 THREATS ON ENEMIES TEAM'" :data="allyenemydata.enemy.slice(0, 5)"></group-box>
 
 
 
diff --git a/resources/js/components/GroupBox.vue b/resources/js/components/GroupBox.vue
new file mode 100644
index 00000000..0b480405
--- /dev/null
+++ b/resources/js/components/GroupBox.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class=" w-auto inline-block m-1">
+       <h2 class="bg-blue rounded-t  p-2 text-sm text-center uppercase"> {{ this.text }}</h2>
+
+    <div class=" bg-black rounded-b  p-5 flex flex-wrap gap-5">
+
+      <round-box-small v-for="(item, index) in data" :key="index" :obj="item.hero !== undefined ? item.hero : (item.game_map !== undefined ? item.game_map : item.talent)" :hovertext="item.hovertext" size="big"></round-box-small>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GroupBox',
+  components: {
+  },
+  props: {
+    text: String,
+    data: Array,
+  },
+  data(){
+    return {
+    }
+  },
+  created(){
+    console.log('this.data', this.data);
+  },
+  mounted() {
+  },
+  computed: {
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/HeroBoxSmall.vue b/resources/js/components/HeroBoxSmall.vue
index 34b62bcd..7511bff1 100644
--- a/resources/js/components/HeroBoxSmall.vue
+++ b/resources/js/components/HeroBoxSmall.vue
@@ -1,6 +1,7 @@
 <template>
-  <div v-if="hero" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
-    <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getHeroImage()" :alt="hero.name" >
+  <div v-if="this.thisObj" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
+    CHANGE THIS TO round-box-small
+    <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getHeroImage()" :alt="this.thisObj.name" >
     <div v-if="includehover && showTooltip" class="absolute hidden bottom-11 -left-24  bg-gray-dark  text-s p-1  group-hover:block  text-white z-50 drop-shadow-md w-60 rounded-md px-2 text-center">
       {{ popuptext }}
     </div>
@@ -10,36 +11,68 @@
 
 <script>
 export default {
-  name: 'HeroBoxSmall',
+  name: 'RoundBoxSmall',
   components: {
   },
   props: {
+    obj: Object,
     hero: Object,
+    map: Object,
     hovertext: String,
+    type: String,
     includehover: Boolean
   },
   data(){
     return {
       showTooltip: false,
       popuptext: "",
+      
     }
   },
   created(){
-    if(this.hero){
-      this.popuptext = this.hovertext ? this.hovertext : this.hero.name;
+    
+    if(this.thisObj){
+      this.popuptext = this.hovertext ? this.hovertext : this.thisObj.name;
     }else{
-      console.log("hero is null")
+      console.log("obj is null")
     }
   },
   mounted() {
+    
+      
+      
+
+    
   },
   computed: {
+    thisObj(){
+      
+      if(typeof this.hero != 'undefined'){
+
+        return this.hero;
+      }
+      if(typeof this.map != 'undefined'){
+       
+        return this.map;
+      }
+      else{
+        return this.obj;
+      }
+    }
   },
   watch: {
   },
   methods: {
     getHeroImage(){
-      return `/images/heroes/${this.hero.short_name}.png`;
+     console.log(this);
+      if(this.type == "map")
+      {
+        return `/images/maps/icon/bg_${this.thisObj.sanitized_map_name}.jpg`;
+      }
+      else{
+        return `/images/heroes/${this.thisObj.short_name}.png`;
+      }
+      
     }
   }
 }
diff --git a/resources/js/components/HeroGroupBox.vue b/resources/js/components/HeroGroupBox.vue
index 3cde6d40..a9923ded 100644
--- a/resources/js/components/HeroGroupBox.vue
+++ b/resources/js/components/HeroGroupBox.vue
@@ -3,7 +3,8 @@
         {{ this.text }}
 
     <div class="border border-gray-300 p-4 flex flex-wrap gap-0">
-      <hero-box-small v-for="(item, index) in data" :key="index" :hero="item.hero" :hovertext="item.hovertext"></hero-box-small>
+      CHANGE THIS TO group-box
+      <round-box-small v-for="(item, index) in data" :key="index" :obj="item.hero" :hovertext="item.hovertext"></round-box-small>
     </div>
   </div>
 </template>
@@ -22,6 +23,8 @@ export default {
     }
   },
   created(){
+    console.log('data', this.data);
+
   },
   mounted() {
   },
diff --git a/resources/js/components/MapBoxSmall.vue b/resources/js/components/MapBoxSmall.vue
index df65264b..7b48c96e 100644
--- a/resources/js/components/MapBoxSmall.vue
+++ b/resources/js/components/MapBoxSmall.vue
@@ -1,5 +1,6 @@
 <template>
   <div v-if="map" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
+    CHANGE THIS TO round-box-small
     <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getMapImage()" :alt="map.name" >
     <div v-if="includehover && showTooltip" class="absolute hidden bottom-11 -left-24  bg-gray-dark  text-s p-1  group-hover:block  text-white z-50 drop-shadow-md w-60 rounded-md px-2 text-center">
       {{ popuptext }}
@@ -25,6 +26,7 @@ export default {
     }
   },
   created(){
+
     if(this.map){
       this.popuptext = this.hovertext ? this.hovertext : this.hero.name;
     }else{
diff --git a/resources/js/components/MapGroupBox.vue b/resources/js/components/MapGroupBox.vue
index 4190a5eb..727574fa 100644
--- a/resources/js/components/MapGroupBox.vue
+++ b/resources/js/components/MapGroupBox.vue
@@ -1,9 +1,10 @@
 <template>
   <div>
+    CHANGE THIS TO group-box
         {{ this.text }}
 
     <div class="border border-gray-300 p-4 flex flex-wrap gap-0">
-      <map-box-small v-for="(item, index) in data" :key="index" :map="item.game_map" :hovertext="'I am not sure if this is the right way to do it'"></map-box-small>
+      <round-box-small v-for="(item, index) in data" :key="index" :obj="item.game_map" :type="'map'" :hovertext="'I am not sure if this is the right way to do it'"></round-box-small>
     </div>
   </div>
 </template>
@@ -22,6 +23,7 @@ export default {
     }
   },
   created(){
+    console.log('map-data', this.data);
   },
   mounted() {
     //console.log(this.data);
diff --git a/resources/js/components/Player/Heroes/PlayerHeroSingleStats.vue b/resources/js/components/Player/Heroes/PlayerHeroSingleStats.vue
index 068f2883..c0305aff 100644
--- a/resources/js/components/Player/Heroes/PlayerHeroSingleStats.vue
+++ b/resources/js/components/Player/Heroes/PlayerHeroSingleStats.vue
@@ -53,13 +53,13 @@
           <infobox :input="'Click a map to see more information and stats, or select all maps to view maps regardless of hero.'"></infobox>
 
           <div class="flex">
-            <map-group-box :data="data.map_data_top_played.slice(0, 3)"></map-group-box>
-            <map-group-box :data="data.map_data_top_win_rate.slice(0, 3)"></map-group-box>
-            <map-group-box :data="data.map_data_top_latest_played.slice(0, 3)"></map-group-box>
+            <group-box :data="data.map_data_top_played.slice(0, 3)"></group-box>
+            <group-box :data="data.map_data_top_win_rate.slice(0, 3)"></group-box>
+            <group-box :data="data.map_data_top_latest_played.slice(0, 3)"></group-box>
           </div>
 
           <div class="flex">
-            <map-box-small v-for="(item, index) in data.map_data" :key="index" :map="item.map_object" :hovertext="'I am not sure if this is the right way to do it'"></map-box-small>
+            <round-box-small v-for="(item, index) in data.map_data" :key="index" :map="item.map_object" :hovertext="'I am not sure if this is the right way to do it'"></round-box-small>
           </div>
         </div>
 
diff --git a/resources/js/components/Player/PlayerMatchup.vue b/resources/js/components/Player/PlayerMatchup.vue
index cb1472d1..1fb1f8be 100644
--- a/resources/js/components/Player/PlayerMatchup.vue
+++ b/resources/js/components/Player/PlayerMatchup.vue
@@ -12,8 +12,8 @@
     :includeseason="true"
     >
   </filters>
-      <hero-group-box :text="'Top 5 Allies with more than 5 games'" :data="topfiveheroes"></hero-group-box>
-      <hero-group-box :text="'Top 5 Enemies with more than 5 games'" :data="topfiveenemies"></hero-group-box>
+      <group-box :text="'Top 5 Allies with more than 5 games'" :data="topfiveheroes"></group-box>
+      <group-box :text="'Top 5 Enemies with more than 5 games'" :data="topfiveenemies"></group-box>
 
   <table class="min-w-full bg-white">
     <thead>
diff --git a/resources/js/components/Player/PlayerStats.vue b/resources/js/components/Player/PlayerStats.vue
index 96c1eab2..e4257f35 100644
--- a/resources/js/components/Player/PlayerStats.vue
+++ b/resources/js/components/Player/PlayerStats.vue
@@ -5,46 +5,50 @@
       <single-select-filter :values="filters.seasons" :text="'Season'" @input-changed="handleInputChange"></single-select-filter>
      
 
-      <div v-if="data">
-
-        <div class="flex-1 flex">
-          <stat-box :title="'Wins'" :value="data.wins"></stat-box>
-          <stat-box :title="'Losses'" :value="data.losses"></stat-box>
-          <stat-box :title="'First to Ten Wins'" :value="data.first_to_ten_wins"></stat-box>
-          <stat-box :title="'First to Ten Losses'" :value="data.first_to_ten_losses"></stat-box>
-          <stat-box :title="'First to Ten Win Rate'" :value="data.first_to_ten_win_rate"></stat-box>
-
-          <stat-box :title="'Second to Ten Wins'" :value="data.second_to_ten_wins"></stat-box>
-          <stat-box :title="'Second to Ten Losses'" :value="data.second_to_ten_losses"></stat-box>
-          <stat-box :title="'Second to Ten Win Rate'" :value="data.second_to_ten_win_rate"></stat-box>         
-          
-          <stat-box :title="'KDR'" :value="data.kdr"></stat-box>          
-          <stat-box :title="'KDA'" :value="data.kda"></stat-box>          
-
-          <stat-box :title="'Account Level'" :value="data.account_level"></stat-box>          
-        </div>
+      <div v-if="data" class="">
+
+        <div class="flex md:p-20 gap-10">
+          <div class="flex-1 flex flex-wrap">
+            <stat-box :title="'Wins'" :value="data.wins"></stat-box>
+            <stat-box :title="'Losses'" :value="data.losses"></stat-box>
+            <stat-box :title="'First to Ten Wins'" :value="data.first_to_ten_wins"></stat-box>
+            <stat-box :title="'First to Ten Losses'" :value="data.first_to_ten_losses"></stat-box>
+            <stat-bar-box :title="'First to Ten Win Rate'" :value="data.first_to_ten_win_rate"></stat-bar-box>
+
+            <stat-box :title="'Second to Ten Wins'" :value="data.second_to_ten_wins"></stat-box>
+            <stat-box :title="'Second to Ten Losses'" :value="data.second_to_ten_losses"></stat-box>
+            <stat-bar-box :title="'Second to Ten Win Rate'" :value="data.second_to_ten_win_rate"></stat-bar-box>         
+            
+            <stat-box :title="'KDR'" :value="data.kdr"></stat-box>          
+            <stat-box :title="'KDA'" :value="data.kda"></stat-box>          
+
+            <stat-box :title="'Account Level'" :value="data.account_level"></stat-box>          
+          </div>
+          <div>player image goes here</div>
 
-        <div class="flex-1 flex">
-          <stat-box :title="'MVP'" :value="data.mvp_rate"></stat-box>       
-          <stat-box :title="'Total Time Played'" :value="data.total_time_played"></stat-box>       
-          <stat-box :title="'AVG. Time on Fire'" :value="data.average_time_on_fire"></stat-box>       
+          <div class="flex-1 flex flex-wrap ">
+            <stat-box :title="'MVP'" :value="data.mvp_rate"></stat-box>       
+            <stat-box :title="'Total Time Played'" :value="data.total_time_played"></stat-box>       
+            <stat-box :title="'AVG. Time on Fire'" :value="data.average_time_on_fire"></stat-box>       
 
-          <stat-box :title="'Win Rate'" :value="data.win_rate"></stat-box>       
-          <stat-box :title="'Bruiser Win Rate'" :value="data.bruiser_win_rate"></stat-box>       
-          <stat-box :title="'Support Win Rate'" :value="data.support_win_rate"></stat-box>       
-          <stat-box :title="'Ranged Assassin Win Rate'" :value="data.ranged_assassin_win_rate"></stat-box>       
-          <stat-box :title="'Melee Assassin Win Rate'" :value="data.melee_assassin_win_rate"></stat-box>       
-          <stat-box :title="'Healer Win Rate'" :value="data.healer_win_rate"></stat-box>       
-          <stat-box :title="'Tank Win Rate'" :value="data.tank_win_rate"></stat-box>       
+            <stat-bar-box :title="'Win Rate'" :value="data.win_rate"></stat-bar-box>       
+            <stat-bar-box :title="'Bruiser Win Rate'" :value="data.bruiser_win_rate"></stat-bar-box>       
+            <stat-bar-box :title="'Support Win Rate'" :value="data.support_win_rate"></stat-bar-box>       
+            <stat-bar-box :title="'Ranged Assassin Win Rate'" :value="data.ranged_assassin_win_rate"></stat-bar-box>       
+            <stat-bar-box :title="'Melee Assassin Win Rate'" :value="data.melee_assassin_win_rate"></stat-bar-box>       
+            <stat-bar-box :title="'Healer Win Rate'" :value="data.healer_win_rate"></stat-bar-box>       
+            <stat-bar-box :title="'Tank Win Rate'" :value="data.tank_win_rate"></stat-bar-box>       
 
+          </div>
         </div>
 
-        <div>
-          <h1> Heroes </h1>
-
-          <hero-group-box :text="'Most Played'" :data="data.heroes_three_most_played"></hero-group-box>
-          <hero-group-box :text="'Highest Win Rate'" :data="data.heroes_three_highest_win_rate"></hero-group-box>
-          <hero-group-box :text="'Latest Played'" :data="data.heroes_three_latest_played"></hero-group-box>
+        <div class="bg-lighten p-10 text-center">
+          <h2 class="flex-1 text-3xl font-bold"> Heroes </h2>
+          <div class="flex flex-wrap justify-center">
+            <group-box :text="'Most Played'" :data="data.heroes_three_most_played"></group-box>
+            <group-box :text="'Highest Win Rate'" :data="data.heroes_three_highest_win_rate"></group-box>
+            <group-box :text="'Latest Played'" :data="data.heroes_three_latest_played"></group-box>
+          </div>
         </div>
 
         <div>
@@ -69,17 +73,17 @@
         </div>
 
         <div>
-          <h1>Maps</h1>
+          <h2>Maps</h2>
           <div class="flex">
-            <map-group-box :data="data.maps_three_most_played"></map-group-box>
-            <map-group-box :data="data.maps_three_highest_win_rate"></map-group-box>
-            <map-group-box :data="data.maps_three_latest_played"></map-group-box>
+            <group-box :text="'Most Played'" :data="data.maps_three_most_played"></group-box>
+            <group-box :text="'Highest Win Rate'" :data="data.maps_three_highest_win_rate"></group-box>
+            <group-box :text="'Latest Played'" :data="data.maps_three_latest_played"></group-box>
           </div>
         </div>
 
 
         <div>
-          <h1>Party Size Win Rates</h1>
+          <h2>Party Size Win Rates</h2>
           solo: total games: {{ data.stack_one_total }} wins: {{ data.stack_one_wins }} losses: {{ data.stack_one_losses }} win rate: {{ data.stack_one_win_rate }}% <br>
 
           three-man: total games: {{ data.stack_three_total }} wins: {{ data.stack_three_wins }} losses: {{ data.stack_three_losses }} win rate: {{ data.stack_three_win_rate }}% <br>
@@ -91,7 +95,7 @@
         </div>
 
         <div v-if="data && data.matchData">
-          <h1>Most Recent matches</h1>
+          <h2>Most Recent matches</h2>
 
           <template v-for="(item, index) in data.matchData">
             <div>{{ item.game_map.name }} | {{ item.game_type.name }} | {{ item.game_date }}</div>
diff --git a/resources/js/components/Player/Roles/PlayerRoleSingleStats.vue b/resources/js/components/Player/Roles/PlayerRoleSingleStats.vue
index 59bd5c0b..7b9ffd6d 100644
--- a/resources/js/components/Player/Roles/PlayerRoleSingleStats.vue
+++ b/resources/js/components/Player/Roles/PlayerRoleSingleStats.vue
@@ -48,12 +48,12 @@
         <h1>Heroes played on {{ role }}</h1>
 
 
-        <hero-group-box :text="'Most Played'" :data="data.hero_data_top_played.slice(0, 3)"></hero-group-box>
-        <hero-group-box :text="'Highest Win Rate'" :data="data.hero_data_top_win_rate.slice(0, 3)"></hero-group-box>
+        <group-box :text="'Most Played'" :data="data.hero_data_top_played.slice(0, 3)"></group-box>
+        <group-box :text="'Highest Win Rate'" :data="data.hero_data_top_win_rate.slice(0, 3)"></group-box>
 
         <div class="flex flex-wrap gap-1">
           <template v-for="(item, index) in data.hero_data_all_heroes">
-            <hero-box-small :hero="item.hero"></hero-box-small>
+            <round-box-small :hero="item.hero"></round-box-small>
           </template>
         </div>
 
diff --git a/resources/js/components/RoundBoxSmall.vue b/resources/js/components/RoundBoxSmall.vue
new file mode 100644
index 00000000..6cf0e34b
--- /dev/null
+++ b/resources/js/components/RoundBoxSmall.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-if="this.thisObj" class="relative group flex items-center " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
+    <img :class="[
+      'card-img-top relative hover:opacity-75  rounded-full',  
+      { 
+        block: size === 'big', 
+        'w-20': size === 'big', 
+        'h-20': size === 'big',
+        'w-10': size != 'big', 
+        'h-10': size != 'big', 
+        
+      }
+      ]"   :src="getImage()" :alt="this.thisObj.name" >
+    <div v-if=" showTooltip" class="absolute hidden bottom-11 -left-24  bg-gray-dark  text-s p-1  group-hover:block  text-white z-50 drop-shadow-md w-60 rounded-md px-2 text-center">
+      {{ this.thisObj.name }}
+    </div>
+   
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoundBoxSmall',
+  components: {
+  },
+  props: {
+    obj: Object,
+    hero: Object,
+    map: Object,
+    hovertext: String,
+    type: String,
+    includehover: Boolean,
+    popuptext: String,
+    size: String
+  },
+  data(){
+    return {
+      showTooltip: false,
+      staticClasses: ""
+      
+    }
+  },
+  created(){
+    
+    
+  },
+  mounted() {
+    
+      
+      
+
+    
+  },
+  computed: {
+    thisObj(){
+      
+      if(typeof this.hero != 'undefined'){
+
+        return this.hero;
+      }
+      if(typeof this.map != 'undefined'){
+       
+        return this.map;
+      }
+      else{
+        return this.obj;
+      }
+    }
+  },
+  watch: {
+  },
+  methods: {
+    getImage(){
+     console.log(this);
+      if(typeof this.thisObj.sanitized_map_name != 'undefined')
+      {
+        console.log('map image');
+        return `/images/maps/icon/bg_${this.thisObj.sanitized_map_name}.jpg`;
+      }
+      else{
+        return `/images/heroes/${this.thisObj.short_name}.png`;
+      }
+      
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/StatBarBox.vue b/resources/js/components/StatBarBox.vue
new file mode 100644
index 00000000..d181a0f4
--- /dev/null
+++ b/resources/js/components/StatBarBox.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="w-auto inline-block m-1 text-center min-w-[5em]">
+       <h2 class="rounded  px-2 py-1 text-sm text-center uppercase"> {{ title }}</h2>
+    
+    <div class=" bg-gray-light  rounded rounded-l-lg w-[10em]">
+      <div class="stat-bar bg-blue rounded-l border-r-2 border-black" :style="{ width: this.value +'%' }">
+        {{ value }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatBarBox',
+  components: {
+  },
+  props: {
+    title: String,
+    value: {
+      type: [String, Number]
+    },
+  },
+  data(){
+    return {
+    }
+  },
+  created(){
+  },
+  mounted() {
+  },
+  computed: {
+    barWidth(){
+      return "w-[${this.value}%]"
+
+    }
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/StatBox.vue b/resources/js/components/StatBox.vue
index ce365f15..f941ff9d 100644
--- a/resources/js/components/StatBox.vue
+++ b/resources/js/components/StatBox.vue
@@ -1,9 +1,8 @@
 <template>
-  <div class="bg-blue p-4">
-    <div class="text-center font-bold text-white mb-2">
-      {{ title }}
-    </div>
-    <div class="text-center text-white border border-gray-400 p-2 rounded">
+  <div class="w-auto inline-block m-1 text-center min-w-[5em]">
+       <h2 class="bg-gray-light rounded-t text-blue px-2 py-1 text-sm text-center uppercase"> {{ title }}</h2>
+    
+    <div class=" bg-blue p-1 rounded-b text-center">
       {{ value }}
     </div>
   </div>
diff --git a/resources/js/components/TalentBox.vue b/resources/js/components/TalentBox.vue
index 45d91b76..590780c4 100644
--- a/resources/js/components/TalentBox.vue
+++ b/resources/js/components/TalentBox.vue
@@ -1,9 +1,13 @@
 <template>
-  <div class="card" style="width: 18rem;">
-    <img class="card-img-top" :src="getTalentImage()" :alt="talent.name">
-    {{ talent.name }}
-    {{ this.removeNumbers(talent.hotkey) }}
-    {{ talent.description }}
+  <div  class="relative group flex items-center mt-auto mb-auto " @mouseover="showTooltip = true" @mouseleave="showTooltip = false">
+    <img class="card-img-top relative hover:opacity-75 w-10 h-10 rounded-full" :src="getTalentImage()" :alt="talent.name">
+
+     <div v-if="showTooltip" class="absolute hidden bottom-11 -left-24  bg-gray-dark  text-xs p-1  group-hover:block  text-white z-50 drop-shadow-md w-60 rounded-md px-2 text-center">
+      <h2>{{ talent.title }}</h2>
+      <p>{{ this.removeNumbers(talent.hotkey) }}</p>
+      <p>{{ talent.description }}</p>
+    </div>
+    
   </div>
 </template>
 
@@ -13,15 +17,19 @@ export default {
   components: {
   },
   props: {
-    talent: Object
+
+    talent: Object,
   },
   data(){
     return {
+       showTooltip: false,
     }
   },
-  created(){
+ created(){
+  
   },
   mounted() {
+   
   },
   computed: {
   },
diff --git a/resources/views/nav.blade.php b/resources/views/nav.blade.php
index db3c71c2..4c21d66b 100644
--- a/resources/views/nav.blade.php
+++ b/resources/views/nav.blade.php
@@ -61,11 +61,7 @@
 </div>
 
 <!-- I dont know why this isnt working, it used to -->
-    <search-component 
-        :type="'alt'" 
-        :buttonText="'Find Player'" 
-        :labelText="'Enter a battletag'"
-    ></search-component>
+    <search-component :type="'alt'"  :buttonText="'Find Player'"  :labelText="'Enter a battletag'"></search-component>