diff --git a/package-lock.json b/package-lock.json
index 26018e8..6144fb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12174,6 +12174,11 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-loading-overlay": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/vue-loading-overlay/-/vue-loading-overlay-3.2.0.tgz",
+      "integrity": "sha512-QBHa+vwcQ3k3oKp4pucP7RHWHSQvgVWFlDFqSaXLu+kCuEv1PZCoerAo1T04enF5y9yMFCqh7L9ChrWHy7HYvA=="
+    },
     "vue-router": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
diff --git a/package.json b/package.json
index 562cb2a..1f1c92f 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "vue": "^2.6.10",
     "vue-codemirror": "^4.0.6",
     "vue-fragment": "^1.5.1",
+    "vue-loading-overlay": "^3.2.0",
     "vue-router": "^3.0.3",
     "vuetify": "^2.0.0",
     "vuex": "^3.0.1",
diff --git a/src/App.vue b/src/App.vue
index 498f127..772f663 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,21 +1,39 @@
 <template>
-<Layout>
-  <v-container>
-    <router-view></router-view>
-  </v-container>
-</Layout>
+  <fragment>
+    <loading
+      :active.sync="isLoading"
+      color="indigo"
+      loader="dots"
+      is-full-page
+    ></loading>
+    <Layout>
+      <v-container>
+        <router-view></router-view>
+      </v-container>
+    </Layout>
+  </fragment>
 </template>
 
 <script>
+import Loading from 'vue-loading-overlay';
+import 'vue-loading-overlay/dist/vue-loading.css';
+import { mapGetters } from 'vuex';
+
 import Layout from './components/layout';
 
 export default {
   name: 'App',
   components: {
     Layout,
+    Loading,
   },
   data: () => ({
     //
   }),
+  computed: {
+    ...mapGetters([
+      'isLoading',
+    ]),
+  },
 };
 </script>
diff --git a/src/main.js b/src/main.js
index b854d17..80c9449 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,5 @@
+import 'roboto-fontface/css/roboto/roboto-fontface.css';
+import '@mdi/font/css/materialdesignicons.css';
 import { sync } from 'vuex-router-sync';
 import { Plugin } from 'vue-fragment';
 import Vue from 'vue';
@@ -5,8 +7,6 @@ import App from './App';
 import router from './router';
 import store from './store';
 import vuetify from './plugins/vuetify';
-import 'roboto-fontface/css/roboto/roboto-fontface.css';
-import '@mdi/font/css/materialdesignicons.css';
 
 Vue.config.productionTip = false;
 sync(store, router);
diff --git a/src/store/index.js b/src/store/index.js
index b16cf85..849f684 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 
 import authentication from './modules/authentication';
+import { Loading } from './plugins';
 
 Vue.use(Vuex);
 
@@ -12,24 +13,31 @@ const debug = process.env.NODE_ENV !== 'production';
 const plugins = debug ? [
   createLogger(),
   // createPersistedState(),
+  Loading,
 ] : [
   createPersistedState(),
+  Loading,
 ];
 
 export default new Vuex.Store({
   state: {
     baseUrl: '/api',
+    loading: false,
   },
   mutations: {
-
+    setLoading(state, loading) {
+      state.loading = loading;
+    },
   },
   actions: {
-
   },
   modules: {
     authentication,
   },
   getters: {
+    isLoading(state) {
+      return state.loading;
+    },
     getErrorMessage: () => (response) => {
       console.log('HERE', response);
       const { status, data: { data: { errors } = {}, message } } = response;
diff --git a/src/store/plugins/index.js b/src/store/plugins/index.js
new file mode 100644
index 0000000..136343b
--- /dev/null
+++ b/src/store/plugins/index.js
@@ -0,0 +1 @@
+export { default as Loading } from './loading';
diff --git a/src/store/plugins/loading.js b/src/store/plugins/loading.js
new file mode 100644
index 0000000..32f4be2
--- /dev/null
+++ b/src/store/plugins/loading.js
@@ -0,0 +1,12 @@
+export default (store) => {
+  store.subscribeAction({
+    before: (action) => {
+      console.log(`before action ${action.type}`);
+      store.commit('setLoading', true, { root: true });
+    },
+    after: (action) => {
+      console.log(`after action ${action.type}`);
+      store.commit('setLoading', false, { root: true });
+    },
+  });
+};
diff --git a/vue.config.js b/vue.config.js
index 1739624..4091ee3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,9 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'https://localhost:8000',
-        ws: true,
-        changeOrigin: true,
+        target: 'http://localhost:8000',
         headers: {
           Connection: 'keep-alive',
         },