diff --git a/resources/js/components/admin/Body.vue b/resources/js/components/admin/Body.vue
index 53ade2e..88b9b33 100644
--- a/resources/js/components/admin/Body.vue
+++ b/resources/js/components/admin/Body.vue
@@ -1,27 +1,30 @@
 <template>
-    <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop">
-        <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"/>
-        <div class="block" id="pedidos-seccion"
-            :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
-            <div class="block pb-6" id="pedidos-tabla-y-dropdown" v-if="hayPedidos">
-                <div class="is-flex is-justify-content-space-between mb-3">
-                    <button class="button is-danger" @click="abrirFaltantesYSobrantes">
-                        <span class="icon">
-                            <i class="fa fa-refresh"></i>
-                        </span>
-                        <span>Faltantes y Sobrantes</span>
-                    </button>
-                    <dropdown-descargar/>
+    <div>
+        <canasta v-if="show_faltantes_y_sobrantes"/>
+        <div class="block ml-3 mr-3 is-max-widescreen is-max-desktop" v-else>
+            <tabs-secciones :tabs="tabs" :tabInicial="tabActiva"/>
+            <div class="block" id="pedidos-seccion"
+                :class="seccionActiva === 'pedidos-seccion' ? 'is-active' : 'is-hidden'">
+                <div class="block pb-6" id="pedidos-tabla-y-dropdown" v-if="hayPedidos">
+                    <div class="is-flex is-justify-content-space-between mb-3">
+                        <button class="button is-danger" @click="abrirFaltantesYSobrantes">
+                            <span class="icon">
+                                <i class="fa fa-refresh"></i>
+                            </span>
+                            <span>Faltantes y Sobrantes</span>
+                        </button>
+                        <dropdown-descargar/>
+                    </div>
+                    <tabla-pedidos/>
                 </div>
-                <tabla-pedidos/>
+                <p class="has-text-centered" v-else>
+                    Todavía no hay ningún pedido para administrar.
+                </p>
+            </div>
+            <div class="block pb-6" id="caracteristicas-seccion"
+                 :class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
+                <caracteristicas-opcionales/>
             </div>
-            <p class="has-text-centered" v-else>
-                Todavía no hay ningún pedido para administrar.
-            </p>
-        </div>
-        <div class="block pb-6" id="caracteristicas-seccion"
-             :class="seccionActiva === 'caracteristicas-seccion' ? 'is-active' : 'is-hidden'">
-            <caracteristicas-opcionales/>
         </div>
     </div>
 </template>
@@ -31,10 +34,12 @@ import CaracteristicasOpcionales from "./CaracteristicasOpcionales.vue";
 import TabsSecciones from "../comunes/TabsSecciones.vue";
 import DropdownDescargar from "./DropdownDescargar.vue";
 import TablaPedidos from "./TablaPedidos.vue";
-import { mapActions, mapGetters } from "vuex";
+import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
+import Canasta from "../pedidos/Canasta.vue";
 export default {
     name: "AdminBody",
     components: {
+        Canasta,
         CaracteristicasOpcionales,
         TabsSecciones,
         DropdownDescargar,
@@ -50,17 +55,16 @@ export default {
     },
     computed: {
         ...mapGetters('admin', ['hayPedidos']),
+        ...mapState('ui', ['show_faltantes_y_sobrantes'])
     },
     methods: {
-        ...mapActions('admin', ['getGrupoDeCompra']),
+        ...mapActions('admin', ['getGrupoDeCompra', 'abrirFaltantesYSobrantes']),
         ...mapActions('ui', ['toast']),
+        ...mapMutations('ui', ['toggleFaltantesYSobrantes']),
         setSeccionActiva(tabId) {
             this.tabActiva = tabId;
             this.seccionActiva = tabId + "-seccion";
         },
-        abrirFaltantesYSobrantes() {
-            this.toast({ mensaje: 'Tamos implementando' });
-        }
     },
     async mounted() {
         await this.getGrupoDeCompra();