diff --git a/code/websites/pokedex.online/src/views/ChallongeTest.vue b/code/websites/pokedex.online/src/views/ChallongeTest.vue
index f7a05b8..e7c264a 100644
--- a/code/websites/pokedex.online/src/views/ChallongeTest.vue
+++ b/code/websites/pokedex.online/src/views/ChallongeTest.vue
@@ -402,6 +402,7 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { useChallongeApiKey } from '../composables/useChallongeApiKey.js';
 import { useChallongeOAuth } from '../composables/useChallongeOAuth.js';
 import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js';
+import { useAsyncState } from '../composables/useAsyncState.js';
 import {
   createChallongeV1Client,
   createChallongeV2Client,
@@ -426,14 +427,17 @@ const {
 // API Configuration
 const apiVersion = ref('v2.1'); // 'v1' or 'v2.1'
 
-// State
-const loading = ref(false);
-const loadingMore = ref(false);
-const error = ref(null);
-const tournaments = ref(null);
+// State management with useAsyncState
+const tournamentListState = useAsyncState();
+const loadMoreState = useAsyncState();
+const tournamentDetailsState = useAsyncState();
+
+// Destructure for template usage
+const { data: tournaments, isLoading: loading, error } = tournamentListState;
+const { isLoading: loadingMore } = loadMoreState;
+
 const searchQuery = ref('');
 const expandedTournamentId = ref(null);
-const tournamentDetails = ref(null);
 
 // Pagination
 const currentPage = ref(1);