diff --git a/resources/js/components/AppMain.vue b/resources/js/components/AppMain.vue
new file mode 100644
index 0000000..b6c57ab
--- /dev/null
+++ b/resources/js/components/AppMain.vue
@@ -0,0 +1,30 @@
+<script>
+import NavBar from "./comunes/NavBar.vue";
+import { mapActions, mapState } from "vuex";
+export default {
+    name: 'Main',
+    components: { NavBar },
+    computed: {
+        ...mapState('login',["rol"]),
+    },
+    methods: {
+        ...mapActions('login',["getRol"]),
+    },
+    async mounted() {
+        await this.getRol();
+    },
+}
+</script>
+
+<template>
+    <div id="main">
+        <nav-bar></nav-bar>
+        <pedidos-body v-if="rol === 'barrio'"></pedidos-body>
+        <admin-body v-if="rol === 'admin_barrio'"></admin-body>
+        <compras-body v-if="rol === 'comision'"></compras-body>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/pedidos/Body.vue b/resources/js/components/pedidos/Body.vue
index 4a73c7d..e056948 100644
--- a/resources/js/components/pedidos/Body.vue
+++ b/resources/js/components/pedidos/Body.vue
@@ -1,36 +1,19 @@
 <template>
-    <div class="columns ml-3 mr-3">
-        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
-        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
-        <chismosa v-show="chismosaActiva"></chismosa>
+    <div id="pedidos-body">
+        <pedido-select-section v-if="!pedidoDefinido"></pedido-select-section>
+        <productos v-else></productos>
     </div>
 </template>
 
 <script>
-import { mapActions } from "vuex";
-import Chismosa from "./Chismosa.vue";
-import ProductosContainer from "./ProductosContainer.vue";
-import CategoriasContainer from "./CategoriasContainer.vue";
+import { mapGetters } from "vuex";
+import PedidoSelectSection from "./PedidoSelectSection.vue";
+import Productos from "./Productos.vue";
 
 export default {
-    components: { CategoriasContainer, ProductosContainer, Chismosa },
-    data() {
-        return {
-            chismosaActiva: false,
-        }
-    },
-    methods: {
-        ...mapActions('productos',["init"]),
-        ...mapActions('pedido',["getPedido"]),
-        ...mapActions('barrio',["getGrupoDeCompra"]),
-    },
-    async mounted() {
-        await this.init();
-        await this.getGrupoDeCompra();
-        await this.getPedido();
-        Event.$on('toggle-chismosa', (activa) => {
-            this.chismosaActiva = activa;
-        });
+    components: { Productos, PedidoSelectSection },
+    computed: {
+        ...mapGetters('pedido',["pedidoDefinido"]),
     },
 }
 </script>
diff --git a/resources/js/components/pedidos/PedidoSelectSection.vue b/resources/js/components/pedidos/PedidoSelectSection.vue
new file mode 100644
index 0000000..513e2aa
--- /dev/null
+++ b/resources/js/components/pedidos/PedidoSelectSection.vue
@@ -0,0 +1,26 @@
+<script>
+import { defineComponent } from "vue";
+import SubpedidoSelect from "./SubpedidoSelect.vue";
+import { mapGetters } from "vuex";
+
+export default defineComponent({
+    components: { SubpedidoSelect },
+})
+</script>
+
+<template>
+    <section class="section">
+        <div id="root" class="container">
+            <h1 class="title">
+                Pedidos MPS
+            </h1>
+            <p class="subtitle">
+                Bienvenidx a la aplicación de pedidos del <strong>Mercado Popular de Subsistencia</strong>
+            </p>
+            <subpedido-select></subpedido-select>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+</style>
diff --git a/resources/js/components/pedidos/Productos.vue b/resources/js/components/pedidos/Productos.vue
new file mode 100644
index 0000000..06e6db3
--- /dev/null
+++ b/resources/js/components/pedidos/Productos.vue
@@ -0,0 +1,38 @@
+<script >
+import CategoriasContainer from "./CategoriasContainer.vue";
+import ProductosContainer from "./ProductosContainer.vue";
+import Chismosa from "./Chismosa.vue";
+import { defineComponent } from "vue";
+import SubpedidoSelect from "./SubpedidoSelect.vue";
+import { mapActions } from "vuex";
+
+export default defineComponent({
+    components: { SubpedidoSelect, CategoriasContainer, ProductosContainer, Chismosa },
+    data() {
+        return {
+            chismosaActiva: false,
+        }
+    },
+    methods: {
+        ...mapActions('productos',["init"]),
+    },
+    async mounted() {
+        await this.init();
+        Event.$on('toggle-chismosa', (activa) => {
+            this.chismosaActiva = activa;
+        });
+    },
+})
+</script>
+
+<template>
+    <div class="columns ml-3 mr-3" v-else>
+        <categorias-container :class="chismosaActiva ? 'hide-below-1024' : ''"></categorias-container>
+        <productos-container :class="chismosaActiva ? 'hide-below-1024' : ''"></productos-container>
+        <chismosa v-show="chismosaActiva"></chismosa>
+    </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/components/pedidos/SubpedidoSelect.vue b/resources/js/components/pedidos/SubpedidoSelect.vue
index d566510..a69d101 100644
--- a/resources/js/components/pedidos/SubpedidoSelect.vue
+++ b/resources/js/components/pedidos/SubpedidoSelect.vue
@@ -74,14 +74,13 @@ export default {
             this.guardarSubpedidoEnSesion(subpedido);
         },
         guardarSubpedidoEnSesion(subpedido) {
-            console.log(`select: ${JSON.stringify(subpedido)}`);
+            this.elegirPedido({ pedido: subpedido });
             axios.post("/subpedidos/guardar_sesion", {
                 subpedido: subpedido,
                 grupo_de_compra_id: this.grupo_de_compra_id
             }).then(_ => {
                 Event.$emit('obtener-sesion')
             });
-            this.elegirPedido({ pedido: subpedido });
         }
     }
 }
diff --git a/resources/js/store/modules/pedido.js b/resources/js/store/modules/pedido.js
index 5258142..aed3e87 100644
--- a/resources/js/store/modules/pedido.js
+++ b/resources/js/store/modules/pedido.js
@@ -45,7 +45,9 @@ const actions = {
     },
     async elegirPedido({ commit }, { pedido }) {
         await axios.post("/subpedidos/sesion", { id: pedido.id, });
-        window.location.href = 'productos';
+        const response = await axios.get(`/api/subpedidos/${pedido.id}`);
+        commit('setState', response.data.data);
+        // window.location.href = 'productos';
     },
     async modificarChismosa({ commit }, producto_id, cantidad, notas) {},
     async modificarDevoluciones({ commit }, monto, notas) {}
diff --git a/resources/views/subpedidos_create.blade.php b/resources/views/subpedidos_create.blade.php
index 7a82f36..48afac7 100644
--- a/resources/views/subpedidos_create.blade.php
+++ b/resources/views/subpedidos_create.blade.php
@@ -1,17 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<section class="section">
-<div id="root" class="container">
-  <h1 class="title">
-    Pedidos MPS
-  </h1>
-  <p class="subtitle">
-    Bienvenidx a la aplicación de pedidos del <strong>Mercado Popular de Subsistencia</strong>
-  </p>
-  <pedidos-subpedido-select></pedidos-subpedido-select>
-</div>
-</section>
+    <app-main></app-main>
 @endsection
 
 @section('scripts')