diff --git a/resources/js/components/ProductosContainer.vue b/resources/js/components/ProductosContainer.vue
index 297e222..8c4aa48 100644
--- a/resources/js/components/ProductosContainer.vue
+++ b/resources/js/components/ProductosContainer.vue
@@ -1,63 +1,17 @@
 <template>
 	<div v-show="visible" class="container is-max-desktop">
       <div class="columns is-multiline is-mobile">
-        <div v-for="(producto,i) in productos" :key="i" class="block column is-half-desktop is-full-mobile is-full-tablet">
-          <div @click.capture="seleccionarProducto(producto)" 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="producto.cantidad !== 0">{{ producto.cantidad }} 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">
-                                <i class="fa fa-solid fa-minus"></i>
-                            </button>
-                        </div>
-                        <div class="control">
-                            <input id="cantidad" v-model="producto.cantidad" class="input is-small" type="number" style="text-align: center">
-                        </div>
-                        <div class="control">
-                            <button class="button is-small">
-                                <i class="fa fa-solid fa-plus"></i>
-                            </button>
-                        </div>
-                        <button class="button is-small is-success ml-3">
-                            <span class="icon">
-                                <i class="fas fa-check"></i>
-                            </span>
-                        </button>
-                        <button class="button is-small is-danger ml-3">
-                            <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 -->
-        </div><!-- END BLOCK COLUMN -->
+        <producto-card v-for="(producto,i) in productos" :key="i" :producto="producto" class="block column is-half-desktop is-full-mobile is-full-tablet">
+        </producto-card><!-- END BLOCK COLUMN -->
       </div><!-- END COLUMNS -->
     </div><!-- END CONTAINER -->
 </template>
 
 <script>
+import ProductoCard from "./ProductoCard.vue";
+
 export default {
+    components: {ProductoCard},
 	data() {
 	    return {
 	      productos: [],
@@ -90,14 +44,10 @@ export default {
 	    });
 	  },
 	  methods: {
-	    seleccionarProducto(producto) {
-	      Event.$emit("producto-seleccionado",producto);
-	    },
-		params: function(filtro,valor) {
+		params(filtro,valor) {
 			let params = { paginar: this.paginar }
 			params[filtro] = valor
 			return params
-		}
+		},
 	  }
-	}
-</script>
+	}</script>