diff --git a/resources/js/components/comunes/NavBar.vue b/resources/js/components/comunes/NavBar.vue
index bb5a6d4..de090fb 100644
--- a/resources/js/components/comunes/NavBar.vue
+++ b/resources/js/components/comunes/NavBar.vue
@@ -56,7 +56,6 @@ export default {
     },
     buscar() {
       if (this.burgerActiva) this.toggleBurger()
-      Event.$emit("migas-setear-como-inicio", this.$rootMiga)
       Event.$emit("filtrar-productos",'nombre',this.searchString)
     }
   },
diff --git a/resources/js/components/pedidos/CategoriasContainer.vue b/resources/js/components/pedidos/CategoriasContainer.vue
index e512cf2..4ad30c1 100644
--- a/resources/js/components/pedidos/CategoriasContainer.vue
+++ b/resources/js/components/pedidos/CategoriasContainer.vue
@@ -1,42 +1,38 @@
 <template>
     <div v-show="visible" class="column">
-      <div class="columns is-multiline is-mobile">
-        <div v-for="(categoria,i) in categorias" :key="i" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
-          <div @click.capture="seleccionarCategoria(categoria)" class="card" style="height:100%" >
-            <div class="card-content">
-              <div class="media">
-                <div class="media-content" style="overflow:hidden">
-                  <p class="title is-6" v-text="categoria"></p>
-                </div>
-              </div>
-            </div>
-          </div><!-- END CARD -->
-        </div><!-- END BLOCK COLUMN -->
-      </div><!-- END COLUMNS -->
-  </div><!-- END CONTAINER -->
+        <div class="columns is-multiline is-mobile">
+            <div v-for="(categoria,i) in categorias" :key="i"
+                 class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+                <div @click.capture="seleccionar(categoria)" class="card" style="height:100%">
+                    <div class="card-content">
+                        <div class="media">
+                            <div class="media-content" style="overflow:hidden">
+                                <p class="title is-6" v-text="categoria"></p>
+                            </div>
+                        </div>
+                    </div>
+                </div><!-- END CARD -->
+            </div><!-- END BLOCK COLUMN -->
+        </div><!-- END COLUMNS -->
+    </div><!-- END CONTAINER -->
 </template>
 
 <script>
-	export default {
-        name: 'CategoriasContainer',
-		data() {
-		    return {
-		      categorias: null,
-		      visible: true
-		    }
-		  },
-		  mounted() {
-		    axios.get("/api/categorias").then(response => {
-		      this.categorias = response.data;
-		    });
-		    Event.$emit("migas-setear-como-inicio", this.$rootMiga);
-			Event.$on("filtrar-productos", (_) => this.visible = false)
-		  },
-		  methods: {
-		    seleccionarCategoria(categoria) {
-		      this.visible = false;
-		      Event.$emit("filtrar-productos",'categoria',categoria);
-		    }
-		  }
-	}
+import { mapActions, mapState } from "vuex";
+export default {
+    name: 'CategoriasContainer',
+    computed: {
+        ...mapState('productos',["categorias", "filtro"]),
+        visible() {
+            return this.filtro === null;
+        }
+    },
+    methods: {
+        ...mapActions('productos', ["seleccionarCategoria"]),
+        seleccionar(categoria) {
+            this.seleccionarCategoria({ categoria: categoria });
+            Event.$emit('migas-agregar', { nombre: categoria });
+        }
+    }
+}
 </script>
diff --git a/resources/js/components/pedidos/NavMigas.vue b/resources/js/components/pedidos/NavMigas.vue
index ea70dc9..33ff5bb 100644
--- a/resources/js/components/pedidos/NavMigas.vue
+++ b/resources/js/components/pedidos/NavMigas.vue
@@ -2,7 +2,7 @@
 	<nav class="breadcrumb is-centered has-background-danger-light is-fixed-top" aria-label="breadcrumbs" v-show="visible">
 		<ul class="mt-4">
 			<li v-for="(miga, i) in migas" :key="i" :class="{'is-active': i == migaActiva}">
-				<a :href="miga.href" v-text="miga.nombre" 
+				<a :href="miga.href" v-text="miga.nombre"
 				   :class="{'has-text-danger': i != migaActiva}"></a>
 			</li>
 		</ul>
@@ -13,15 +13,16 @@
 	export default {
 		data() {
 		    return {
-		      migas: []
+                initial: [{ nombre: 'Categorías', href: '/productos' }],
+		      migas: [{ nombre: 'Categorías', href: '/productos' }],
 		    }
 		  },
 		  computed: {
 		    visible: function() {
 		      return this.migas.length > 0
 		    },
-			migaActiva: function() { 
-				return this.migas.length-1 
+			migaActiva: function() {
+				return this.migas.length-1
 			}
 		  },
 		  mounted() {
@@ -33,7 +34,7 @@
 		      this.migas.push(miga);
 		    });
 		    Event.$on('migas-reset', () =>  {
-		      this.migas = [];
+		      this.migas = this.initial;
 		    });
 		    Event.$on('migas-pop', () =>  {
 		      this.migas.pop();
@@ -51,4 +52,4 @@ nav.breadcrumb.is-fixed-top {
 	height: 2.75rem;
 	z-index: 5;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/components/pedidos/ProductosContainer.vue b/resources/js/components/pedidos/ProductosContainer.vue
index 67d807f..fce1ca3 100644
--- a/resources/js/components/pedidos/ProductosContainer.vue
+++ b/resources/js/components/pedidos/ProductosContainer.vue
@@ -1,59 +1,29 @@
 <template>
-	<div v-show="visible" class="column">
-      <div class="columns is-multiline is-mobile">
-        <producto-card v-for="(producto,i) in productos" :key="i" :producto="producto">
-        </producto-card><!-- END BLOCK COLUMN -->
-      </div><!-- END COLUMNS -->
+    <div v-show="visible" class="column">
+        <div class="columns is-multiline is-mobile">
+            <producto-card v-for="(producto,i) in this.productos" :key="i" :producto="producto">
+            </producto-card><!-- END BLOCK COLUMN -->
+        </div><!-- END COLUMNS -->
     </div><!-- END CONTAINER -->
 </template>
 
 <script>
 import ProductoCard from "./ProductoCard.vue";
-
+import { mapState } from "vuex";
 export default {
     name: 'ProductosContainer',
-    components: {ProductoCard},
-	data() {
-	    return {
-	      productos: [],
-	      visible: false,
-	      paginar: 150,
-		  valor: null,
-	 	  filtro: null
-	    }
-	  },
-	  computed: {
-	    miga: function(){
-	      return {
-	        nombre: this.valor,
-	        href: "#" + this.valor
-	      }
-	    }
-	  },
-	  mounted() {
-	    Event.$on('filtrar-productos', (filtro,valor) =>  {
-		  this.filtro = filtro
-		  this.valor = valor
-	      axios.get("/api/productos", {
-	        params: this.params(filtro,valor)
-	      }).then(response => {
-	        this.productos = response.data.data;
-			this.productos.forEach(p => {
-				p.pivot = {};
-				p.pivot.cantidad = this.$root.cantidad(p);
-				p.pivot.notas = this.$root.notas(p);
-			});
-	      });
-	      this.visible = true;
-	      Event.$emit("migas-agregar",this.miga);
-	    });
-	  },
-	  methods: {
-		params(filtro,valor) {
-			let params = { paginar: this.paginar }
-			params[filtro] = valor
-			return params
-		},
-	  }
-	}
+    components: { ProductoCard },
+    computed: {
+        ...mapState('productos', ["productos", "filtro"]),
+        visible() {
+            return this.filtro !== null;
+        },
+        miga: function () {
+            return {
+                nombre: this.valor,
+                href: "#" + this.valor
+            }
+        }
+    },
+}
 </script>