diff --git a/backend/src/app.ts b/backend/src/app.ts
index cb3ccb4..a343614 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -80,13 +80,13 @@ app.post('/api/character', jsonParser, async (req, res) => {
   const count = req.body.count
 
   const characterData = await Character.findAll({
-    offset: page * count, 
-    limit: count 
+    offset: page * count,
+    limit: count
   })
-  const pageCount = Math.ceil(await Character.count() / count)
+  const pageCount = Math.ceil((await Character.count()) / count)
 
   res.setHeader('Content-Type', 'application/json')
-  res.json({characterData, pageCount})
+  res.json({ characterData, pageCount })
 })
 
 app.get('/api/game/:characterId', async (req, res) => {
@@ -94,18 +94,21 @@ app.get('/api/game/:characterId', async (req, res) => {
 })
 
 app.post('/api/game', jsonParser, async (req, res) => {
-  const page = req.body.page
-  const orderBy = req.body.orderBy
-  const count = req.body.count
+  const page = req.body.page || 0
+  const orderBy = req.body.orderBy || 'id' 
+  const count = req.body.count || 10
+  const filter = req.body.filter || ''
 
-  const gameData = await Game.findAll({ 
-    offset: page * count, 
-    limit: count 
+  console.log(filter)
+
+  const gameData = await Game.findAll({
+    offset: page * count,
+    limit: count
   })
-  const pageCount = Math.ceil(await Character.count() / count)
+  const pageCount = Math.ceil((await Character.count()) / count)
 
   res.setHeader('Content-Type', 'application/json')
-  res.send({gameData, pageCount})
+  res.send({ gameData, pageCount })
 })
 
 app.get('/api/game/:gameId', async (req, res) => {
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index fd4b72b..abf2843 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import GameList from '../vues/GameList.vue'
 import GameDetails from '../vues/GameDetails.vue'
 import CharacterList from '../vues/CharacterList.vue'
+import CharacterDetails from '../vues/CharacterDetails.vue'
 
 const root = {
   path: '/',
@@ -24,7 +25,12 @@ const characterListRoute = {
   component: CharacterList
 }
 
-const routes = [root, gameListRoute, gameDetailsRoute, characterListRoute]
+const characterDetailsRoute = {
+  path: '/characters/:characterId',
+  component: CharacterDetails
+}
+
+const routes = [root, gameListRoute, gameDetailsRoute, characterListRoute, characterDetailsRoute]
 
 export default createRouter({
   history: createWebHashHistory(),
diff --git a/frontend/src/vues/CharacterDetails.vue b/frontend/src/vues/CharacterDetails.vue
new file mode 100644
index 0000000..7c3db01
--- /dev/null
+++ b/frontend/src/vues/CharacterDetails.vue
@@ -0,0 +1,35 @@
+<template>
+  <v-container>
+    {{ character.characterName }}
+    {{ character.playerName }}
+    {{ character.role }}
+    {{ character.status }}
+  </v-container>
+</template>
+
+<style></style>
+
+<script setup lang="ts">
+import { onMounted, watch, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+const route = useRoute()
+
+const characterId = ref(route.params.characterId)
+const character = ref({})
+
+async function loadCharacterDetails() {
+  const characterResponse = await axios.get(`/api/character/${characterId.value}`)
+  const gameDetails = await axios.post("/api/game", {
+  })
+
+  console.log(characterResponse)
+
+  character.value = characterResponse.data
+}
+
+onMounted(async () => {
+  loadCharacterDetails()
+})
+</script>
diff --git a/frontend/src/vues/CharacterList.vue b/frontend/src/vues/CharacterList.vue
index 1a42b54..b380fe9 100644
--- a/frontend/src/vues/CharacterList.vue
+++ b/frontend/src/vues/CharacterList.vue
@@ -46,7 +46,7 @@ import axios from 'axios'
 let page = 0
 let count = 10
 const characters = ref({})
-const pageCount = ref({})
+const pageCount = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/character', {
diff --git a/frontend/src/vues/GameList.vue b/frontend/src/vues/GameList.vue
index 37889f3..e2d28d8 100644
--- a/frontend/src/vues/GameList.vue
+++ b/frontend/src/vues/GameList.vue
@@ -35,7 +35,7 @@ import axios from 'axios'
 let page = 1
 let count = 10
 const games = ref({})
-const pageCount = ref({})
+const pageCount = ref(1)
 
 async function loadData() {
   const response = await axios.post('/api/game', {