diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
index 3c25a2a..66c44c1 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
@@ -29,7 +29,8 @@
          menuItems: [
              { title: 'Inicio', route: '/'},
              { title: 'Comprar', route:'/comprar'},
-             { title: 'Cuadrar tarro', route: '/cuadrar_tarro'}
+             { title: 'Cuadrar tarro', route: '/cuadrar_tarro'},
+             { title: 'Cuadres de tarro', route: '/cuadres_de_tarro'},
          ],
      }),
      watch: {
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
new file mode 100644
index 0000000..e08b97d
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ReconciliationJarIndex.vue
@@ -0,0 +1,59 @@
+<template>
+  <v-container>
+    <v-toolbar>
+      <v-toolbar-title> Cuadres del Tarro </v-toolbar-title>
+    </v-toolbar>
+    <v-card>
+      <v-card-text>
+        <v-data-table-server
+          v-model:items-per-page="itemsPerPage"
+          :headers="headers"
+          :items="serverItems"
+          :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>
+          </template>
+        </v-data-table-server>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        api: inject('api'),
+        itemsPerPage: 10,
+        headers: [
+          { title: 'Acciones', key: 'id'},
+          { title: 'Fecha', key: 'date_time'},
+          { title: 'Reconciliador', key: 'reconcilier'},
+          { title: 'Total Compras Efectivo', key: 'total_cash_purchases'},
+          { title: 'Recogido', key: 'cash_taken'},
+          { title: 'Descuadre', key: 'cash_discrepancy'},
+        ],
+        search: '',
+        serverItems: [],
+        loading: true,
+        totalItems: 0,
+      }
+    },
+    methods: {
+      loadItems ({page, itemsPerPage}) {
+        this.loading = true;
+        this.api.getListReconcliations(page, itemsPerPage)
+            .then(data => {
+              this.serverItems = data['results'];
+              this.totalItems = data['count'];
+              this.loading = false;
+            })
+            .catch(error => console.log('Error:', error));
+      },
+    },
+  }
+</script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue
new file mode 100644
index 0000000..739a1e9
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadres_de_tarro.vue
@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <CodeDialog @code-verified="(verified) => showComponent = verified" />
+  </div>
+  <ReconciliationJarIndex v-if="showComponent" />
+</template>
+
+<script>
+  import CodeDialog from '../components/CodeDialog.vue'
+
+  export default {
+    data() {
+      return {
+        showComponent: false,
+      }
+    },
+    components: { CodeDialog },
+    methods: {},
+  }
+</script>