diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
index e08b97d..e88e376 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
@@ -12,13 +12,13 @@
           :items-length="totalItems"
           :loading="loading"
           :search="search"
-          :item-value="name"
           @update:options="loadItems"
         >
           <template v-slot:item.id="{ item }">
-            <v-btn >{{ item.id }}</v-btn>
+            <v-btn @click="openSummaryModal(item.id)">{{ item.id }}</v-btn>
           </template>
         </v-data-table-server>
+        <SummaryReconciliationModal :id="selectedReconciliationId" ref="summaryModal" />
       </v-card-text>
     </v-card>
   </v-container>
@@ -28,6 +28,7 @@
     data() {
       return {
         api: inject('api'),
+        selectedReconciliationId: null,
         itemsPerPage: 10,
         headers: [
           { title: 'Acciones', key: 'id'},
@@ -54,6 +55,10 @@
             })
             .catch(error => console.log('Error:', error));
       },
+      openSummaryModal(id) {
+        this.selectedReconciliationId = id.toString();
+        this.$refs.summaryModal.dialog = true;
+      },
     },
   }
 </script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue
new file mode 100644
index 0000000..004d904
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/SummaryReconciliationModal.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400">
+    resumen
+    <v-card>
+      <v-card-text>
+        <ReconciliationJarView :id="id"/>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn text @click="dialog = false">Cerrar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'Summary Reconciliation Modal',
+    props: {
+      id: {
+        type: String,
+        required: true,
+      }
+    },
+    data() {
+      return {
+        dialog: false,
+      }
+    },
+  }
+</script>