diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 468d148..88cc51e 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -65,18 +65,20 @@
 
       <!-- Tabs -->
       <UTabs v-model="selectedTab" :items="tabs">
-        <template #default="{ item }">
-          <!-- Table View -->
-          <div v-if="item.key === 'table'" class="py-4">
+        <!-- Table View -->
+        <template #table>
+          <div class="py-4">
             <MetabaseCardsTable
               :cards="cards"
               :loading="loading"
               @select="selectCard"
             />
           </div>
+        </template>
 
-          <!-- Cards View -->
-          <div v-if="item.key === 'cards'" class="py-4">
+        <!-- Cards View -->
+        <template #cards>
+          <div class="py-4">
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
               <MetabaseCardDisplay
                 v-for="card in cards"
@@ -85,9 +87,11 @@
               />
             </div>
           </div>
+        </template>
 
-          <!-- Panorama Queries -->
-          <div v-if="item.key === 'panorama'" class="py-4 space-y-4">
+        <!-- Panorama Queries -->
+        <template #panorama>
+          <div class="py-4 space-y-4">
             <UAlert
               color="info"
               variant="soft"
@@ -111,9 +115,11 @@
               description="Busca en la tabla las queries que contengan 'panorama' en su nombre"
             />
           </div>
+        </template>
 
-          <!-- Selected Card Detail -->
-          <div v-if="item.key === 'detail' && selectedCard" class="py-4">
+        <!-- Selected Card Detail -->
+        <template #detail>
+          <div v-if="selectedCard" class="py-4">
             <MetabaseCardDisplay :card="selectedCard" />
           </div>
         </template>