diff --git a/frontend/src/vues/CharacterDetails.vue b/frontend/src/vues/CharacterDetails.vue
index 5ff63e9..bac4dc1 100644
--- a/frontend/src/vues/CharacterDetails.vue
+++ b/frontend/src/vues/CharacterDetails.vue
@@ -3,12 +3,15 @@
     <h1>{{ character.characterName }} - {{character.role}}</h1>
     <h2>Status: {{ character.status }}</h2>
     <h2>Player: {{ character.playerName }}</h2>
+    <GameTable gameList="gamesPlayed"></GameTable>
+    <game-table gameList="gamesApplied"></game-table>
   </v-container>
 </template>
 
 <style></style>
 
 <script setup lang="ts">
+import { GameTable } from './GameTable.vue'
 import { onMounted, watch, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import axios from 'axios'
@@ -17,6 +20,8 @@ const route = useRoute()
 
 const characterId = ref(route.params.characterId)
 const character = ref({})
+const gamesPlayed = ref({})
+const gamesApplied = ref({})
 
 async function loadCharacterDetails() {
   const characterResponse = await axios.get(`/api/character/${characterId.value}`)
@@ -26,6 +31,8 @@ async function loadCharacterDetails() {
   console.log(gameDetails)
 
   character.value = characterResponse.data
+  gamesPlayed.value = gameDetails.data.characterPickedForGame
+  gamesApplied.value = gameDetails.data.characterAppliedForGame
 }
 
 onMounted(async () => {