diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CasherModal.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CasherModal.vue
new file mode 100644
index 0000000..9a58b16
--- /dev/null
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CasherModal.vue
@@ -0,0 +1,58 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400">
+    <v-card>
+      <v-card-title>Calcular Devuelta</v-card-title>
+      <v-card-text>
+        <v-text-field
+          v-model.number="purchase"
+          label="Total de la compra"
+          type="number"
+          prefix="$"
+          readonly
+        ></v-text-field>
+        <v-text-field
+          v-model.number="money"
+          label="Dinero"
+          type="number"
+          prefix="$"
+        ></v-text-field>
+        <v-text-field
+          v-model.number="change_cash"
+          label="Devuelta"
+          type="number"
+          prefix="$"
+          readonly
+        ></v-text-field>
+      </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 {
+    props: {
+      total_purchase: {
+        type: Number,
+        required: true
+      }
+    },
+    data() {
+      return {
+        dialog: false,
+        money: null,
+      }
+    },
+    computed: {
+      purchase() {
+        return this.total_purchase
+      },
+      change_cash() {
+        return (this.money || 0) - this.total_purchase
+      },
+    },
+  }
+</script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
index 7ad169f..d154803 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
@@ -124,23 +124,8 @@
             item-value="value"
             label="Pago en"
           ></v-select>
-          <v-text-field
-            v-if="purchase.payment_method === 'CASH'"
-            v-model="payment_cash"
-            label="Dinero"
-            prefix="$"
-            type="number"
-            :error-messages="isValidPayment ? [] : ['El dinero debe ser mayor o igual al total']"
-            :disable="calculateTotal === 0"
-          ></v-text-field>
-          <v-text-field
-            v-if="purchase.payment_method === 'CASH'"
-            :value="calculateChange"
-            label="Devuelta"
-            prefix="$"
-            readonly
-            presistent-placeholder="true"
-          ></v-text-field>
+          <v-btn @click="openCasherModal" v-if="purchase.payment_method === 'CASH'">Calcular Devuelta</v-btn>
+          <CasherModal :total_purchase="calculateTotal" ref="casherModal"</CasherModal>
         </v-container>
         <v-btn @click="submit" color="green">Comprar</v-btn>
   </v-form>
@@ -148,12 +133,14 @@
 </template>
 
 <script>
- import CustomerForm from './CreateCustomerModal.vue';
+  import CustomerForm from './CreateCustomerModal.vue';
+  import CasherModal from './CasherModal.vue';
 
  export default {
    name: 'DonConfiao',
    components: {
-     CustomerForm
+     CustomerForm,
+     CasherModal,
    },
    props: {
      msg: String
@@ -242,6 +229,9 @@
      openModal() {
       this.$refs.customerModal.openModal();
      },
+     openCasherModal() {
+       this.$refs.casherModal.dialog = true
+     },
      getCurrentDate() {
        const today = new Date();
        const yyyy = today.getFullYear();