diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CodeDialog.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CodeDialog.vue
new file mode 100644
index 0000000..1c3deab
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CodeDialog.vue
@@ -0,0 +1,39 @@
+<template>
+  <v-dialog v-model="dialog" persistent>
+    <v-card>
+      <v-card-title>
+        Ingrese el código
+      </v-card-title>
+      <v-card-text>
+        <v-form id="code-form" @submit.prevent="verifyCode">
+          <v-text-field v-model="code" label="Código" type="password" autocomplete="off" />
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn type="submit" form="code-form">Aceptar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialog: true,
+        code: '',
+      };
+    },
+    methods: {
+      verifyCode() {
+        if (this.code === 'sin seguridad') {
+          this.$emit('code-verified', true);
+          this.dialog = false;
+        } else {
+          alert('Código incorrecto');
+          this.$emit('code-verified', false);
+        }
+      }
+    },
+  }
+</script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadrar_tarro.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadrar_tarro.vue
index b019700..60645eb 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadrar_tarro.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/pages/cuadrar_tarro.vue
@@ -1,35 +1,26 @@
 <template>
-  <v-dialog v-model="dialog" persistent>
-    <v-card>
-      <v-card-title>
-        Ingrese el código
-      </v-card-title>
-      <v-card-text>
-        <v-form id="code-form" @submit.prevent="verifyCode">
-          <v-text-field v-model="code" label="Código" type="password" autocomplete="off" />
-        </v-form>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn type="submit" form="code-form">Aceptar</v-btn>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
-  <ReconciliationJar v-if="codeCorrect" />
+  <div>
+    <CodeDialog @code-verified="activateComponent"/>
+  </div>
+  <ReconciliationJar v-if="showComponent" />
 </template>
 
-<script setup>
-  import { ref } from 'vue'
+<script >
+  import CodeDialog from '../components/CodeDialog.vue'
 
-  const dialog = ref(true)
-  const code = ref('')
-  const codeCorrect = ref(false)
-
-  function verifyCode() {
-    if (code.value === 'sin seguridad') {
-      codeCorrect.value = true;
-      dialog.value = false;
-    } else {
-      alert('Código incorrecto');
-    }
+  export default {
+    data() {
+      return {
+        showComponent: false,
+      }
+    },
+    components: { CodeDialog },
+    methods: {
+      activateComponent(verified) {
+        if (verified) {
+          this.showComponent = true;
+        }
+      },
+    },
   }
 </script>