diff --git a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
index 739ea9e..41ddfdc 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
@@ -7,6 +7,13 @@
         placeholder="Buscar por nombre o ID..."
         icon="i-heroicons-magnifying-glass"
         class="flex-1"
+        :ui="{
+          base: 'bg-[var(--brand-bg)] text-[var(--brand-text)] border border-[var(--brand-border)] focus:ring-2 focus:ring-[#c08040] focus:border-[#c08040]',
+          placeholder: 'placeholder-[var(--brand-text-muted)]',
+          icon: {
+            base: 'text-[var(--brand-text-muted)]'
+          }
+        }"
       />
       <USelectMenu
         v-model="selectedFilter"
diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 5994dd5..77eb585 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -70,7 +70,42 @@
       />
 
       <!-- Tabs -->
-      <UTabs v-model="selectedTab" :items="tabs">
+      <UTabs
+        v-model="selectedTab"
+        :items="tabs"
+        :ui="{
+          wrapper: 'space-y-4',
+          container: 'flex items-center gap-4 border-b border-[var(--brand-border)] w-full overflow-x-auto',
+          base: 'focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#c08040] disabled:cursor-not-allowed disabled:opacity-75',
+          list: {
+            background: 'bg-transparent',
+            rounded: '',
+            shadow: '',
+            padding: '',
+            height: '',
+            width: '',
+            marker: {
+              wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
+              base: 'w-full h-full',
+              background: 'bg-[#c08040]',
+              rounded: 'rounded-md',
+              shadow: 'shadow-sm'
+            },
+            tab: {
+              base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-inset ui-focus-visible:ring-[#c08040] ui-disabled:cursor-not-allowed ui-disabled:opacity-75 transition-colors duration-200 ease-out',
+              background: 'ui-not-selected:bg-transparent ui-selected:bg-[#c08040]',
+              active: 'text-[#1b1209]',
+              inactive: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]',
+              height: 'h-8',
+              padding: 'px-3',
+              size: 'text-sm',
+              font: 'font-medium',
+              rounded: 'rounded-md',
+              shadow: ''
+            }
+          }
+        }"
+      >
         <!-- Table View -->
         <template #table>
           <div class="py-4">