diff --git a/code/websites/pokedex.online/src/views/ChallongeTest.vue b/code/websites/pokedex.online/src/views/ChallongeTest.vue
index 16240e9..9b382cb 100644
--- a/code/websites/pokedex.online/src/views/ChallongeTest.vue
+++ b/code/websites/pokedex.online/src/views/ChallongeTest.vue
@@ -161,150 +161,34 @@
           {{ loading ? 'Loading...' : 'List My Tournaments' }}
         </button>
 
-        <div v-if="error" class="error-box">
-          <strong>Errors:</strong>
-          <ul class="error-list">
-            <li
-              v-for="(err, index) in Array.isArray(error) ? error : [error]"
-              :key="index"
-            >
-              <span class="error-status">{{ err.status || 'Error' }}:</span>
-              <span class="error-message">{{
-                err.message || err.detail || err
-              }}</span>
-              <span v-if="err.field" class="error-field"
-                >({{ err.field }})</span
-              >
-            </li>
-          </ul>
-          <div class="help-text">
-            <p>Common issues:</p>
-            <ul>
-              <li>
-                <strong>401 Unauthorized:</strong> Invalid API key - check API
-                Key Manager
-              </li>
-              <li><strong>403 Forbidden:</strong> Insufficient permissions</li>
-              <li>
-                <strong>404 Not Found:</strong> Tournament may have been deleted
-              </li>
-              <li>
-                <strong>Network Error:</strong> Connection problems or CORS
-                issues
-              </li>
-            </ul>
-          </div>
+        <div v-if="error" class="error-message">{{ error }}</div>
+        <div v-if="paginationInfo" class="pagination-info">
+          {{ paginationInfo }}
         </div>
 
-        <div v-if="tournaments" class="results">
-          <div class="results-header">
-            <h3>✅ Success!</h3>
-            <p class="pagination-info">{{ paginationInfo }}</p>
-          </div>
-
-          <div v-if="tournaments.length === 0" class="info-box">
-            No tournaments found. Create one at
-            <a href="https://challonge.com" target="_blank">Challonge.com</a>
-          </div>
-
-          <div v-else>
-            <!-- Search Filter -->
-            <div class="search-box">
-              <input
-                v-model="searchQuery"
-                type="text"
-                placeholder="🔍 Search tournaments by name (client-side)..."
-                class="search-input"
-              />
-              <span v-if="searchQuery" class="search-info">
-                Showing {{ filteredTournaments.length }} of
-                {{ tournaments.length }} tournaments
-              </span>
-            </div>
-
-            <div class="tournament-list">
-              <div
-                v-for="tournament in filteredTournaments"
-                :key="getTournamentId(tournament)"
-                class="tournament-card"
-              >
-                <div class="tournament-header">
-                  <h4>{{ getTournamentName(tournament) }}</h4>
-                  <span
-                    class="tournament-state"
-                    :class="getTournamentProp(tournament, 'state')"
-                  >
-                    {{ getTournamentProp(tournament, 'state') }}
-                  </span>
-                </div>
-                <div class="tournament-details">
-                  <p>
-                    <strong>URL:</strong>
-                    {{ getTournamentProp(tournament, 'url') }}
-                  </p>
-                  <p>
-                    <strong>Type:</strong>
-                    {{ getTournamentProp(tournament, 'tournament_type') }}
-                  </p>
-                  <p>
-                    <strong>Participants:</strong>
-                    {{ getTournamentProp(tournament, 'participants_count') }}
-                  </p>
-                  <p v-if="getTournamentProp(tournament, 'started_at')">
-                    <strong>Started:</strong>
-                    {{
-                      formatDate(getTournamentProp(tournament, 'started_at'))
-                    }}
-                  </p>
-                </div>
-                <button
-                  @click="toggleTournamentDetails(getTournamentId(tournament))"
-                  class="btn btn-small"
-                  :class="{
-                    'btn-active':
-                      expandedTournamentId === getTournamentId(tournament)
-                  }"
-                >
-                  {{
-                    expandedTournamentId === getTournamentId(tournament)
-                      ? 'Hide Details'
-                      : 'Load Details'
-                  }}
-                </button>
-
-                <!-- Collapsible Details Section -->
-                <div
-                  v-if="
-                    expandedTournamentId === getTournamentId(tournament) &&
-                    tournamentDetails
-                  "
-                  class="tournament-details-inline"
-                >
-                  <div class="details-header">
-                    <h4>Full Tournament Details</h4>
-                  </div>
-                  <pre class="details-content">{{
-                    JSON.stringify(tournamentDetails, null, 2)
-                  }}</pre>
-                </div>
-              </div>
-            </div>
-
-            <!-- Load More Button (v2.1 only) -->
-            <div
-              v-if="apiVersion === 'v2.1' && hasNextPage"
-              class="load-more-section"
-            >
-              <button
-                @click="loadMoreTournaments"
-                :disabled="loadingMore"
-                class="btn btn-secondary"
-              >
-                {{ loadingMore ? 'Loading...' : 'Load More Tournaments' }}
-              </button>
-            </div>
-          </div>
-        </div>
+        <!-- Tournament Grid Component -->
+        <TournamentGrid
+          :tournaments="tournaments"
+          :loading="loading"
+          :loading-more="loadingMore"
+          :error="error"
+          v-model:search-query="searchQuery"
+          :filtered-tournaments="filteredTournaments"
+          :expanded-tournament-id="expandedTournamentId"
+          :has-next-page="hasNextPage"
+          :api-version="apiVersion"
+          @load-more="loadMoreTournaments"
+          @toggle-details="toggleTournamentDetails"
+        >
+          <template #tournament-details="{ tournament, isExpanded }">
+            <TournamentDetail
+              :tournament-details="tournamentDetails"
+              :loading="tournamentDetailsState.isLoading.value"
+              :error="tournamentDetailsState.error.value"
+              :is-expanded="isExpanded"
+            />
+          </template>
+        </TournamentGrid>
       </div>
 
       <!-- Configuration Instructions -->