diff --git a/frontend/src/vues/CharacterDetails.vue b/frontend/src/vues/CharacterDetails.vue
index cace6b1..6c8dc38 100644
--- a/frontend/src/vues/CharacterDetails.vue
+++ b/frontend/src/vues/CharacterDetails.vue
@@ -11,11 +11,11 @@
     <div>Last Game: {{ lastPlayedPostDate }}</div>
     <div class="d-flex flex-row">
       <div class="flex-column game-list">
-        <h3 class="game-list-title">Games Played</h3>
+        <h3 class="game-list-title">{{ games.played.length }} Games Played</h3>
         <GameTable :gameList="games.played"></GameTable>
       </div>
       <div class="flex-column game-list">
-        <h3 class="game-list-title">Games Applied</h3>
+        <h3 class="game-list-title">{{ games.applied.length }} Games Applied</h3>
         <game-table :gameList="games.applied"></game-table>
       </div>
     </div>
diff --git a/frontend/src/vues/CharacterList.vue b/frontend/src/vues/CharacterList.vue
index 7d64d83..0d0d124 100644
--- a/frontend/src/vues/CharacterList.vue
+++ b/frontend/src/vues/CharacterList.vue
@@ -88,7 +88,7 @@ let debounce = null
 watch(filtervalue, (newFilter, oldFilter) => {
   debounce = clearTimeout(debounce)
   debounce = setTimeout(() => {
-    router.replace({query: {page: route.query.page, filter: newFilter}})
+    router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
 })
 
diff --git a/frontend/src/vues/GameDetails.vue b/frontend/src/vues/GameDetails.vue
index 497c2c6..b4427d6 100644
--- a/frontend/src/vues/GameDetails.vue
+++ b/frontend/src/vues/GameDetails.vue
@@ -6,26 +6,45 @@
     <h2>GameMaster: {{ game.gamemaster }}</h2>
   </div>
   <div class="container">
-    <div class="d-flex flex-row justify-space-evenly">
+    <div class="d-flex flex-row">
+      <div class="result-box">
+        <h3>Picks</h3>
+        <div v-for="pick in picks">
+          {{ pick.pickedCharacter.playerName }} as {{ pick.characterName }}
+        </div>
+      </div>
       <div class="result-box">
         <h3>Payout</h3>
         <div>{{ game.payoutEB }} eb</div>
         <div>{{ game.payoutIP }} IP</div>
         <div>{{ game.payoutLoot }}</div>
       </div>
+    </div>
+  </div>
 
-      <div class="result-box">
-        <h3>Picks</h3>
-        <div v-for="pick in picks">
-          {{ pick.characterName }}
-        </div>
+  <div class="container">
+    <div class="d-flex flex-row">
+      <div class="character-list">
+        <h3>{{ picks.length }} Character Picks</h3>
+        <v-data-table-virtual :headers="pickHeaders" :items="picks" height="500px" fixed-header>
+          <template v-slot:item.characterId="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
+          </template>
+          <template v-slot:item.characterName="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
+          </template>
+        </v-data-table-virtual>
       </div>
-
-      <div class="result-box">
-        <h3>Apps</h3>
-        <div v-for="app in apps">
-          {{ app.characterName }}
-        </div>
+      <div class="character-list">
+        <h3>{{ apps.length }} Character Apps</h3>
+        <v-data-table-virtual :headers="appHeaders" :items="apps" height="500px" fixed-header>
+          <template v-slot:item.characterId="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterId }}</a>
+          </template>
+          <template v-slot:item.characterName="{ item }">
+            <a v-bind:href="`/#/characters/${item.characterId}`">{{ item.characterName }}</a>
+          </template>
+        </v-data-table-virtual>
       </div>
     </div>
   </div>
@@ -43,8 +62,15 @@
 }
 
 .result-box {
-  margin: 10px;
-  margin-top: 40px;
+  margin: 20px;
+  margin-top: 20px;
+}
+
+.character-list {
+  margin: 20px;
+  h3 {
+    margin-bottom: 10px;
+  }
 }
 </style>
 
@@ -55,10 +81,24 @@ import axios from 'axios'
 
 const route = useRoute()
 
+const pickHeaders = [
+  { title: 'ID', align: 'start', key: 'characterId' },
+  { title: 'Character', align: 'start', key: 'characterName' },
+  { title: 'Status', align: 'start', key: 'pickedCharacter.status' },
+  { title: 'Player', align: 'start', key: 'pickedCharacter.playerName' }
+]
+
+const appHeaders = [
+  { title: 'ID', align: 'start', key: 'characterId' },
+  { title: 'Character', align: 'start', key: 'characterName' },
+  { title: 'Status', align: 'start', key: 'appliedCharacter.status' },
+  { title: 'Player', align: 'start', key: 'appliedCharacter.playerName' }
+]
+
 const gameId = ref(route.params.gameId)
 const game = ref({})
-const picks = ref({})
-const apps = ref({})
+const picks = ref([])
+const apps = ref([])
 
 loadGameDetails()
 
@@ -85,5 +125,6 @@ async function loadPicks() {
 async function loadApps() {
   const response = await axios.post(`/api/game/${gameId.value}/apps`)
   apps.value = response.data
+  console.log(apps.value)
 }
 </script>
diff --git a/frontend/src/vues/GameList.vue b/frontend/src/vues/GameList.vue
index 3851f34..f08145a 100644
--- a/frontend/src/vues/GameList.vue
+++ b/frontend/src/vues/GameList.vue
@@ -6,7 +6,30 @@
       v-model="filtervalue"
     ></v-text-field>
   </div>
-  <game-table :gameList="games"></game-table>
+  <v-table>
+    <thead>
+      <tr>
+        <th class="text-left">ID</th>
+        <th class="text-left">Title</th>
+        <th class="text-left">Staus</th>
+        <th class="text-left">Post Date</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="game in games">
+        <td>
+          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
+        </td>
+        <td>
+          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
+        </td>
+        <td>{{ game.status }}</td>
+        <td>
+          {{ new Date(game.postdate * 1000).toISOString().split('T')[0] }}
+        </td>
+      </tr>
+    </tbody></v-table
+  >
   <v-pagination
     :model-value="page"
     :length="pageCount"
@@ -52,7 +75,7 @@ async function loadData() {
 }
 
 function setPage(targetPage: number) {
-  router.replace({ query: { page: targetPage, filter: route.query.filter} })
+  router.replace({ query: { page: targetPage, filter: route.query.filter } })
 }
 
 watch(route, (newValue, oldValue) => {
@@ -73,7 +96,7 @@ let debounce = null
 watch(filtervalue, (newFilter, oldFilter) => {
   debounce = clearTimeout(debounce)
   debounce = setTimeout(() => {
-    router.replace({query: {page: route.query.page, filter: newFilter}})
+    router.replace({ query: { page: route.query.page, filter: newFilter } })
   }, 500)
 })
 
diff --git a/frontend/src/vues/GameTable.vue b/frontend/src/vues/GameTable.vue
index e47ecdf..973c9b4 100644
--- a/frontend/src/vues/GameTable.vue
+++ b/frontend/src/vues/GameTable.vue
@@ -1,33 +1,26 @@
 <template>
-  <h3>{{ title }}</h3>
-  <v-table>
-    <thead>
-      <tr>
-        <th class="text-left">ID</th>
-        <th class="text-left">Title</th>
-        <th class="text-left">Staus</th>
-        <th class="text-left">Post Date</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="game in gameList">
-        <td>
-          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
-        </td>
-        <td>
-          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
-        </td>
-        <td>{{ game.status }}</td>
-        <td>
-          {{ new Date(game.postdate * 1000).toISOString().split('T')[0] }}
-        </td>
-      </tr>
-    </tbody>
-  </v-table>
+  <v-data-table-virtual :headers="headers" :items="gameList" height="500px" fixed-header>
+    <template v-slot:item.id="{ item }">
+      <a v-bind:href="`/#/games/${item.id}`">{{ item.id }}</a>
+    </template>
+    <template v-slot:item.title="{ item }">
+      <a v-bind:href="`/#/games/${item.id}`">{{ item.title }}</a>
+    </template>
+    <template v-slot:item.postdate="{ item }">
+      {{ new Date(item.postdate * 1000).toISOString().split('T')[0] }}
+    </template>
+  </v-data-table-virtual>
 </template>
 
 <style></style>
 
 <script setup lang="ts">
-defineProps(['title', 'gameList'])
+const props = defineProps(['gameList'])
+
+const headers = [
+  { title: 'ID', align: 'start', key: 'id' },
+  { title: 'Title', align: 'start', key: 'title' },
+  { title: 'Status', aligasdfn: 'start', key: 'status' },
+  { title: 'Post Date', align: 'start', key: 'postdate' }
+]
 </script>
diff --git a/frontend/src/vues/ServerStats.vue b/frontend/src/vues/ServerStats.vue
index f08f8b8..9677e1d 100644
--- a/frontend/src/vues/ServerStats.vue
+++ b/frontend/src/vues/ServerStats.vue
@@ -96,6 +96,9 @@ import { onMounted, watch, ref } from 'vue'
 import Chart from 'chart.js/auto'
 import axios from 'axios'
 
+const route = useRoute()
+const router = useRouter()
+
 const dateSelect = ref(-1)
 
 const dateItems = buildDateItems()
@@ -184,6 +187,7 @@ function updateChart(stats, tag) {
 }
 
 watch(dateSelect, async (newValue, oldValue) => {
+  router.replace({ query: { monthId: dateSelect.value } })
   loadData()
 })
 
@@ -196,6 +200,12 @@ watch(chartSelect, async (newValue, oldValue) => {
 })
 
 onMounted(async () => {
+  console.log(dateItems)
+  if (!route.query.monthId) {
+    router.replace({ query: { monthId: -1 } })
+  } else {
+    dateSelect.value = Number(route.query.monthId)
+  }
   loadData()
   chart = new Chart(document.getElementById('piechart'), {
     type: 'pie',