diff --git a/resources/js/components/ProductoCard.vue b/resources/js/components/ProductoCard.vue
new file mode 100644
index 0000000..12974af
--- /dev/null
+++ b/resources/js/components/ProductoCard.vue
@@ -0,0 +1,93 @@
+<script>
+export default {
+    name: "ProductoCard",
+    props: {
+        producto: Object
+    },
+    data() {
+      return {
+          cantidad: this.producto.cantidad,
+          enChismosa: this.producto.cantidad,
+      }
+    },
+    mounted() {
+      Event.$on('sync-subpedido', (cantidad,_) => this.sincronizar(cantidad));
+    },
+    methods: {
+        decrementar() {
+            this.cantidad -= 1;
+        },
+        incrementar() {
+            this.cantidad += 1;
+        },
+        confirmar() {
+            Event.$emit('sync-subpedido', this.cantidad, this.producto.id);
+        },
+        borrar() {
+            this.cantidad = 0;
+            this.confirmar();
+        },
+        sincronizar(cantidad) {
+            this.cantidad = cantidad;
+            this.producto.cantidad = cantidad;
+            this.enChismosa = cantidad;
+        },
+    }
+}
+</script>
+
+<template>
+        <div class="box" style="height:100%">
+            <div class="columns">
+                <div class="column is-three-quarters">
+                    <p class="title is-6">
+                        {{ producto.nombre }}
+                    </p>
+                    <p class="subtitle is-7" v-text="producto.proveedor"></p>
+                </div>
+                <div class="column is-one-quarter has-text-right">
+                    <p class="has-text-weight-bold has-text-primary">$<span v-text="producto.precio"></span></p>
+                    <p class="subtitle is-7" v-if="enChismosa !== 0">{{ enChismosa }} en chismosa</p>
+                </div>
+            </div>
+            <footer class="columns">
+                <div class="column is-three-quarters">
+                    <div class="field has-addons">
+                        <div class="control">
+                            <button class="button is-small" @click.capture="decrementar();">
+                                <i class="fa fa-solid fa-minus"></i>
+                            </button>
+                        </div>
+                        <div class="control">
+                            <input id="cantidad" v-model="cantidad" class="input is-small" type="number" style="text-align: center">
+                        </div>
+                        <div class="control" @click="incrementar();">
+                            <button class="button is-small">
+                                <i class="fa fa-solid fa-plus"></i>
+                            </button>
+                        </div>
+                        <button class="button is-small is-success ml-3" @click="confirmar()">
+                            <span class="icon">
+                                <i class="fas fa-check"></i>
+                            </span>
+                        </button>
+                        <button class="button is-small is-danger ml-3" @click="borrar()">
+                            <span class="icon">
+                                <i class="fas fa-trash-alt"></i>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+                <div class="column is-one-quarter has-text-right">
+                    <p>
+                        <img v-show="producto.economia_solidaria" height="30px" width="30px" src="/assets/solidaria.png" alt="proveedor de economía solidaria">
+                        <img v-show="producto.nacional" height="30px" width="30px" src="/assets/uruguay.png" alt="proveedor nacional"/>
+                    </p>
+                </div>
+            </footer>
+        </div><!-- END BOX -->
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/ProductoModal.vue b/resources/js/components/ProductoModal.vue
deleted file mode 100644
index 20b0f7d..0000000
--- a/resources/js/components/ProductoModal.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-	<div v-bind:class="visible ? 'is-active modal' : 'modal'">
-    <div class="modal-background"></div>
-        <div class="modal-card">
-            <section class="modal-card-head">
-                <div class="media-content">
-                    <p class="modal-card-title">
-                        {{ producto.nombre }}
-                        <img v-show="producto.nacional" height="24px" width="24px" src="/assets/uruguay.png" />
-                        <img v-show="producto.economia_solidaria" height="24px" width="24px" src="/assets/solidaria.png">
-                    </p>
-                    <p class="subtitle" v-show="producto.proveedor" v-text="producto.proveedor"></p>
-                    <p class="subtitle is-6" v-show="producto.apto_veganxs">Apto para veganxs.</p>
-                    <p class="subtitle is-6" v-show="producto.apto_celiacxs">Apto para celíacxs.</p>
-                </div>
-            </section>
-            <section class="modal-card-body">
-                <p class="subtitle is-3 has-text-weight-bold has-text-primary has-text-centered">${{ producto.precio }}</p>
-            </section>
-            <footer class="modal-card-foot">
-                <div class="level">
-                    <div class="level-item has-text-centered">
-                        <div class="field has-addons">
-                                <div class="control">
-                              <button class="button" @click="cantidad !== 0 ? cantidad-- : cantidad">
-                                  <i class="fa fa-solid fa-minus"></i>
-                              </button>
-                            </div>
-                          <div class="control">
-                              <input id="cantidad" class="input" type="number" v-model.number="cantidad" style="text-align: center">
-                          </div>
-                          <div class="control">
-                              <button class="button" @click="cantidad++">
-                                  <i class="fa fa-solid fa-plus"></i>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="level-item has-text-centered">
-                        <button class="button" @click.capture="cerrar">Cancelar</button>
-                        <button class="button is-success" @click="agregarProducto">Aceptar</button>
-                    </div>
-                </div>
-          </footer>
-      </div>
-      </div>
-</template>
-
-<script>
-	export default {
-		data() {
-		    return {
-		      producto: null,
-		      visible: false,
-		      cantidad: 0
-		    }
-		  },
-		  computed: {
-		    miga: function(){
-		      return {
-		        nombre: this.producto.nombre,
-		        href: "#" + this.producto.nombre
-		      }
-		    }
-		  },
-		  methods: {
-		    cerrar() {
-		        this.cantidad = 0;
-		        this.visible = false;
-		        Event.$emit("migas-pop");
-		    },
-		    agregarProducto() {
-		        if (this.cantidad < 0) alert("No se puede agregar cantidades negativas")
-		        else if (!Number.isInteger(this.cantidad)) alert("Las cantidades deben ser números enteros")
-		        else {
-		            Event.$emit('sync-subpedido',this.cantidad, this.producto.id);
-		            this.cerrar();
-		        }
-		    }
-		  },
-		  mounted() {
-		    Event.$on('producto-seleccionado', (producto) =>  {
-		      this.producto = producto;
-              this.cantidad = this.$root.cantidad(producto)
-		      this.visible = true;
-		      Event.$emit("migas-agregar",this.miga);
-		    });
-		  }
-	}
-</script>
-
-<style>
-	figure.image.icono {
-	    float: right;
-	    margin: 4px;
-	}
-
-	.is-thin-centered {
-	    width: 50%;
-	    margin-left: auto;
-	    margin-right: auto;
-	}
-</style>
\ No newline at end of file