diff --git a/frontend/components/ChampionSelector.vue b/frontend/components/ChampionSelector.vue
index 45e8cec..b0345a6 100644
--- a/frontend/components/ChampionSelector.vue
+++ b/frontend/components/ChampionSelector.vue
@@ -102,9 +102,9 @@ watch(
 )
 
 // Navigation
-async function navigateToChampion(championAlias: string): Promise<void> {
+function navigateToChampion(championAlias: string): void {
   try {
-    await navigateTo(`/champion/${championAlias.toLowerCase()}`)
+    navigateTo(`/champion/${championAlias.toLowerCase()}`)
   } catch (error) {
     console.error('Navigation error:', error)
   }
diff --git a/frontend/components/ChampionTitle.vue b/frontend/components/ChampionTitle.vue
index 51e85cd..1f3fa53 100644
--- a/frontend/components/ChampionTitle.vue
+++ b/frontend/components/ChampionTitle.vue
@@ -21,14 +21,20 @@ watch(
   }
 )
 
-const { data: championData }: ChampionResponse = await useFetch(
+const { data: championData } = useFetch<{ name: string; title: string }>(
   CDRAGON_BASE +
     'plugins/rcp-be-lol-game-data/global/default/v1/champions/' +
     props.championId +
-    '.json'
+    '.json',
+  {
+    lazy: true, // Don't block rendering
+    server: false // Client-side only
+  }
 )
-const championName = championData.value.name
-const championDescription = championData.value.title
+
+// Handle loading and error states
+const championName = computed(() => championData.value?.name || 'Loading...')
+const championDescription = computed(() => championData.value?.title || '')
 </script>
 
 <template>
diff --git a/frontend/components/nav/SideBar.vue b/frontend/components/nav/SideBar.vue
index 8327085..f7b3189 100644
--- a/frontend/components/nav/SideBar.vue
+++ b/frontend/components/nav/SideBar.vue
@@ -19,8 +19,10 @@ function handleStateChange(newState: string, newLane: number) {
   emit('stateChange', newState, newLane)
 }
 
-const { data: stats }: { data: Ref<{ patch: number; count: number }> } =
-  await useFetch('/api/stats')
+const { data: stats }: { data: Ref<{ patch: number; count: number }> } = useFetch('/api/stats', {
+  lazy: true, // Don't block rendering
+  server: false // Client-side only
+})
 
 const route = useRoute()
 
@@ -127,8 +129,13 @@ if (route.path.startsWith('/tierlist/')) {
     </div>
 
     <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px">
-      <h3 style="font-size: 23px; font-weight: 200">Patch {{ stats.patch }}</h3>
-      <h3 style="font-size: 23px; font-weight: 200">{{ stats.count }} games</h3>
+      <template v-if="stats">
+        <h3 style="font-size: 23px; font-weight: 200">Patch {{ stats.patch }}</h3>
+        <h3 style="font-size: 23px; font-weight: 200">{{ stats.count }} games</h3>
+      </template>
+      <template v-else>
+        <h3 style="font-size: 23px; font-weight: 200; opacity: 0.5">Loading stats...</h3>
+      </template>
       <NuxtLink to="/about"><h3>About</h3></NuxtLink>
       <h2 style="font-size: 12px; font-weight: 200; margin-top: 5px">
         BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
diff --git a/frontend/server/api/champion/[alias].ts b/frontend/server/api/champion/[alias].ts
index 43dc9f4..beb9440 100644
--- a/frontend/server/api/champion/[alias].ts
+++ b/frontend/server/api/champion/[alias].ts
@@ -5,15 +5,62 @@ async function championInfos(client: MongoClient, patch: string, championAlias:
   const database = client.db('champions')
   const collection = database.collection(patch)
   const query = { alias: championAlias }
-  const championInfo = (await collection.findOne(query)) as unknown as ChampionData
+  const championInfo = (await collection.findOne(query)) as unknown as ChampionData | null
   return championInfo
 }
 
 export default defineEventHandler(async event => {
-  const championAlias = (getRouterParam(event, 'alias') as string).toLowerCase()
-  const client = await connectToDatabase()
-  const latestPatch = await fetchLatestPatch(client)
-  const data = await championInfos(client, latestPatch, championAlias)
-  await client.close()
-  return data
+  try {
+    const championAlias = (getRouterParam(event, 'alias') as string).toLowerCase()
+
+    // Validate champion alias
+    if (!championAlias || typeof championAlias !== 'string') {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Invalid champion alias',
+        data: { alias: championAlias }
+      })
+    }
+
+    const client = await connectToDatabase()
+    const latestPatch = await fetchLatestPatch(client)
+    const data = await championInfos(client, latestPatch, championAlias)
+    await client.close()
+
+    if (!data) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Champion not found',
+        data: { alias: championAlias, patch: latestPatch }
+      })
+    }
+
+    return data
+  } catch (error) {
+    console.error('Error in champion API:', error)
+
+    // Handle different error types
+    if (error instanceof Error) {
+      throw createError({
+        statusCode: 500,
+        statusMessage: 'Failed to fetch champion data',
+        data: {
+          error: error.message,
+          championAlias: getRouterParam(event, 'alias')
+        }
+      })
+    }
+
+    // Re-throw if it's already a proper error
+    if (error && typeof error === 'object' && 'statusCode' in error) {
+      throw error
+    }
+
+    // Fallback error
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Internal server error',
+      data: { championAlias: getRouterParam(event, 'alias') }
+    })
+  }
 })