diff --git a/resources/js/components/comisiones/barrios/BarriosSeccion.vue b/resources/js/components/comisiones/barrios/BarriosSeccion.vue
index 88fe68a..6e03935 100644
--- a/resources/js/components/comisiones/barrios/BarriosSeccion.vue
+++ b/resources/js/components/comisiones/barrios/BarriosSeccion.vue
@@ -2,8 +2,9 @@
 import TablaBarrios from "./TablaBarrios.vue";
 import DropdownDescargar from "../DropdownDescargar.vue";
 import ModalBarrio from "./ModalBarrio.vue";
-import { mapState } from "vuex";
+import { mapActions, mapMutations, mapState } from "vuex";
 import Dropdown from "../../comunes/Dropdown.vue";
+import comisiones from "../../../store/modules/comisiones";
 
 export default {
     name: "BarriosSeccion",
@@ -31,16 +32,24 @@ export default {
         };
     },
     computed: {
-        ...mapState("comisiones", ["grupo_de_compra_actual"])
+        ...mapState("comisiones", ["grupo_de_compra_actual", "grupo_de_compra_nuevo"])
+    },
+    methods: {
+        ...mapMutations("ui", ["toggleModalBarrio"]),
+        ...mapMutations("comisiones", ["grupoDeCompraNuevo"]),
+        modalNuevoBarrio() {
+            this.grupoDeCompraNuevo();
+            this.toggleModalBarrio();
+        }
     }
 }
 </script>
 
 <template>
     <div>
-        <modal-barrio v-if="grupo_de_compra_actual"/>
+        <modal-barrio v-if="grupo_de_compra_actual || grupo_de_compra_nuevo"/>
         <div class="is-flex is-justify-content-space-between mb-3">
-            <button class="button">
+            <button class="button" @click="modalNuevoBarrio">
                 <span class="icon"><i class="fa fa-plus-circle"/></span>
                 <span>Agregar barrio</span>
             </button>