diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index c14a221..01dd434 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -225,9 +225,25 @@
     <!-- Modal: Crear Operación -->
     <UModal
       v-model:open="showCreateOperacionModal"
-      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-3xl rounded-lg shadow-lg ring ring-default' }"
+      :ui="{ content: 'w-[calc(100vw-2rem)] max-w-3xl rounded-lg shadow-lg ring ring-default max-h-[80vh]' }"
     >
-      <template #content>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <div>
+            <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Flujo guiado</p>
+            <h3 class="text-xl font-semibold">Nueva Operación</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">Define el tipo, selecciona inputs y crea los outputs.</p>
+          </div>
+          <UButton
+            icon="i-heroicons-x-mark"
+            variant="ghost"
+            size="sm"
+            @click="showCreateOperacionModal = false"
+          />
+        </div>
+      </template>
+
+      <template #body>
         <OperacionesForm
           @cancel="showCreateOperacionModal = false"
           @success="handleOperacionFormSuccess"
@@ -536,11 +552,12 @@ useHead({
   title: 'Seguidor de Lotes - Trazabilidad de Café',
   link: [
     { rel: 'manifest', href: '/manifest.webmanifest' },
-    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/icon-32x32.png' },
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/icon-16x16.png' },
     { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
   ],
   meta: [
-    { name: 'theme-color', content: '#00DC82' },
+    { name: 'theme-color', content: '#16a34a' },
     { name: 'mobile-web-app-capable', content: 'yes' },
     { name: 'apple-mobile-web-app-capable', content: 'yes' },
     { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
diff --git a/nuxt4/app/components/operaciones/Form.vue b/nuxt4/app/components/operaciones/Form.vue
index fb90dfa..12bf4bd 100644
--- a/nuxt4/app/components/operaciones/Form.vue
+++ b/nuxt4/app/components/operaciones/Form.vue
@@ -1,17 +1,5 @@
 <template>
-  <UCard class="bg-gradient-to-br from-white to-slate-50 dark:from-slate-900 dark:to-slate-950 shadow-lg">
-    <template #header>
-      <div class="flex items-center justify-between">
-        <div>
-          <p class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Flujo guiado</p>
-          <h3 class="text-xl font-semibold">Nueva Operación</h3>
-          <p class="text-sm text-gray-500 dark:text-gray-400">Define el tipo, selecciona inputs y crea los outputs.</p>
-        </div>
-        <UBadge color="indigo" variant="subtle">3 pasos</UBadge>
-      </div>
-    </template>
-
-    <div class="space-y-6">
+  <div class="space-y-6">
       <!-- Paso 1: Tipo de Operación -->
       <div v-if="step === 1" class="space-y-4">
         <div class="flex items-center justify-between">
@@ -193,7 +181,6 @@
         </div>
       </div>
     </div>
-  </UCard>
 </template>
 
 <script setup lang="ts">
diff --git a/nuxt4/app/components/operaciones/Table.vue b/nuxt4/app/components/operaciones/Table.vue
index 9a9276c..72a8243 100644
--- a/nuxt4/app/components/operaciones/Table.vue
+++ b/nuxt4/app/components/operaciones/Table.vue
@@ -15,8 +15,10 @@
     <div class="flex gap-2">
       <USelect
         v-model="filtroTipo"
-        :options="[{ value: '', label: 'Todos los tipos' }, ...TIPOS_OPERACION]"
-        placeholder="Filtrar por tipo"
+        :items="selectOptions"
+        label-key="label"
+        value-key="value"
+        searchable
         class="w-64"
       />
       <UButton
@@ -94,9 +96,14 @@ console.log('🟡 OperacionesTable: useLotes() completado, TIPOS_OPERACION:', TI
 
 const operaciones = ref<Operacion[]>([])
 const loading = ref(false)
-const filtroTipo = ref('')
+const filtroTipo = ref<string | null>(null)
 const error = ref<string | null>(null)
 
+const selectOptions = computed(() => [
+  { value: null, label: 'Todos los tipos' },
+  ...TIPOS_OPERACION,
+])
+
 const columns: ColumnDef<Operacion>[] = [
   { accessorKey: 'tipo', id: 'tipo', header: 'Tipo de Operación' },
   { accessorKey: 'fecha', id: 'fecha', header: 'Fecha' },
diff --git a/nuxt4/public/favicon.png b/nuxt4/public/favicon.png
new file mode 100644
index 0000000..d6ba382
Binary files /dev/null and b/nuxt4/public/favicon.png differ