diff --git a/src/pages/sincronizar_clientes_tryton.vue b/src/pages/sincronizar_clientes_tryton.vue
index 625c874..6fee0e3 100644
--- a/src/pages/sincronizar_clientes_tryton.vue
+++ b/src/pages/sincronizar_clientes_tryton.vue
@@ -1,42 +1,126 @@
 <template>
-  <v-container v-if="authStore.isAdmin" class="fill-height d-flex align-center justify-center">
-    <v-card class="pa-6" max-width="600" elevation="4">
-      <v-card-title class="text-h5 font-weight-bold text-center">
-        🔄 Sincronización de Clientes
-      </v-card-title>
+  <v-container v-if="authStore.isAdmin" class="fill-height">
+    <v-row v-if="!result && !loading" justify="center">
+      <v-col cols="12" md="8">
+        <v-card class="pa-6" elevation="4">
+          <v-card-title class="text-h5 font-weight-bold text-center">
+            🔄 Sincronización de Clientes
+          </v-card-title>
 
-      <v-card-text>
-        <p>
-          Esta acción sincronizará los <strong>clientes</strong> desde el sistema
-          <strong>Tryton</strong> hacia la plataforma.
-        </p>
-        <v-alert type="warning" dense border="start" border-color="warning">
-          <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
-          y reemplazar datos existentes en la plataforma.  
-          Asegúrese de que la información en Tryton esté actualizada antes de
-          continuar.
+          <v-card-text>
+            <p>
+              Esta acción sincronizará los <strong>clientes</strong> desde el sistema
+              <strong>Tryton</strong> hacia la plataforma.
+            </p>
+            <v-alert type="warning" dense border="start" border-color="warning" class="mt-4">
+              <strong>Advertencia:</strong> Este proceso podría tardar varios minutos
+              y reemplazar datos existentes en la plataforma.  
+              Asegúrese de que la información en Tryton esté actualizada antes de
+              continuar.
+            </v-alert>
+            <p class="mt-4">
+              Durante la sincronización, no se podrán modificar clientes en la
+              plataforma para evitar conflictos.
+            </p>
+          </v-card-text>
+
+          <v-card-actions class="justify-center">
+            <v-btn color="primary" @click="startSync">
+              Iniciar Sincronización
+            </v-btn>
+            <v-btn text @click="$router.push('/')">
+              Cancelar
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-col>
+    </v-row>
+
+    <v-row v-else-if="loading" justify="center" align="center">
+      <v-col cols="12" class="text-center">
+        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+        <p class="mt-4 text-h6">Sincronizando clientes...</p>
+      </v-col>
+    </v-row>
+
+    <v-row v-else>
+      <v-col cols="12">
+        <v-alert type="success" variant="tonal" class="mb-4">
+          <strong>Sincronización completada</strong>
         </v-alert>
-        <p class="mt-4">
-          Durante la sincronización, no se podrán modificar productos en la
-          plataforma para evitar conflictos.
-        </p>
-      </v-card-text>
+      </v-col>
 
-      <v-card-actions class="justify-center">
-        <v-btn color="primary" @click="startSync">
-          Iniciar Sincronización
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-error text-white">❌ Fallidos ({{ result.failed_parties?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.failed_parties)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-success text-white">✅ Creados ({{ result.created_customers?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.created_customers)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-warning">🔄 Actualizados ({{ result.updated_customers?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.updated_customers)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-grey-lighten-1">⏭️ Sin cambios ({{ result.untouched_customers?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.untouched_customers)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" md="6">
+        <v-card elevation="2">
+          <v-card-title class="bg-info text-white">🔍 Verificados ({{ result.checked_tryton_parties?.length || 0 }})</v-card-title>
+          <v-card-text>
+            <v-data-table
+              :items="formatItems(result.checked_tryton_parties)"
+              density="compact"
+              :headers="[{ title: 'ID', key: 'id' }]"
+            ></v-data-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="12" class="text-center mt-4">
+        <v-btn color="primary" @click="$router.push('/')">
+          Volver al inicio
         </v-btn>
-        <v-btn text @click="$router.push('/')">
-          Cancelar
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-
-
-    <v-data-table :items="checked_tryton_parties"></v-data-table>
-    <v-data-table :items="created_customers"></v-data-table>
-    <v-data-table :items="failed_parties"></v-data-table>
-    <v-data-table :items="untouched_customers"></v-data-table>
+      </v-col>
+    </v-row>
   </v-container>
 </template>
 
@@ -53,11 +137,8 @@
     data() {
       return {
         api: inject('api'),
-        checked_tryton_parties: [],
-        created_customers: [],
-        failed_parties: [],
-        untouched_customers: [],
-        updated_customers: [],
+        loading: false,
+        result: null,
       }
     },
     mounted() {
@@ -66,16 +147,20 @@
       }
     },
     methods: {
+      formatItems(ids) {
+        if (!ids || ids.length === 0) return [];
+        return ids.map(id => ({ id }));
+      },
       startSync() {
+        this.loading = true;
         this.api.getCustomersFromTryton()
           .then(response => {
-            this.checked_tryton_parties = response.checked_tryton_parties.map(id => ({ id }));
-            this.created_customers = response.created_customers.map(id => ({ id }));
-            this.failed_parties = response.failed_parties.map(id => ({ id }));
-            this.untouched_customers = response.untouched_customers.map(id => ({ id }));
+            this.result = response;
+            this.loading = false;
           })
           .catch(error => {
-            console.error("Error al sincronizar clientes:", error);
+            console.error('Error al sincronizar clientes:', error);
+            this.loading = false;
           });
       }
     }