diff --git a/.gitignore b/.gitignore
index 8703365..0db40ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -91,3 +91,6 @@ sw.*
 
 # Files marked as sensitive
 *.nogit.*
+
+# Now by Vercel
+.now/
diff --git a/components/LoadingSpinner.vue b/components/LoadingSpinner.vue
new file mode 100644
index 0000000..585d91f
--- /dev/null
+++ b/components/LoadingSpinner.vue
@@ -0,0 +1,134 @@
+<template lang="pug">
+    .la-ball-clip-rotate: div
+</template>
+
+<style lang="stylus" scoped>
+/*
+ * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
+ * Copyright 2015 Daniel Cardoso <@DanielCardoso>
+ * Licensed under MIT
+ */
+.la-ball-clip-rotate, .la-ball-clip-rotate > div
+  position relative
+  box-sizing border-box
+  -webkit-box-sizing border-box
+  -moz-box-sizing border-box
+
+.la-ball-clip-rotate
+  display block
+  color var(--blue)
+  font-size 0
+
+.la-ball-clip-rotate.la-dark
+  color #333
+
+.la-ball-clip-rotate > div
+  display inline-block
+  float none
+  border 0 solid currentColor
+  background-color currentColor
+
+.la-ball-clip-rotate
+  width 32px
+  height 32px
+
+.la-ball-clip-rotate > div
+  width 32px
+  height 32px
+  border-width 2px
+  border-bottom-color transparent
+  border-radius 100%
+  background transparent
+  animation ball-clip-rotate 0.75s linear infinite
+  -webkit-animation ball-clip-rotate 0.75s linear infinite
+  -moz-animation ball-clip-rotate 0.75s linear infinite
+  -o-animation ball-clip-rotate 0.75s linear infinite
+
+.la-ball-clip-rotate.la-sm
+  width 16px
+  height 16px
+
+.la-ball-clip-rotate.la-sm > div
+  width 16px
+  height 16px
+  border-width 1px
+
+.la-ball-clip-rotate.la-2x
+  width 64px
+  height 64px
+
+.la-ball-clip-rotate.la-2x > div
+  width 64px
+  height 64px
+  border-width 4px
+
+.la-ball-clip-rotate.la-3x
+  width 96px
+  height 96px
+
+.la-ball-clip-rotate.la-3x > div
+  width 96px
+  height 96px
+  border-width 6px
+
+/*
+ * Animation
+ */
+@keyframes ball-clip-rotate
+  0%
+    transform rotate(0)
+    -webkit-transform rotate(0)
+
+  50%
+    transform rotate(180deg)
+    -webkit-transform rotate(180deg)
+
+  100%
+    transform rotate(360deg)
+    -webkit-transform rotate(360deg)
+
+@keyframes ball-clip-rotate
+  0%
+    transform rotate(0)
+    -moz-transform rotate(0)
+
+  50%
+    transform rotate(180deg)
+    -moz-transform rotate(180deg)
+
+  100%
+    transform rotate(360deg)
+    -moz-transform rotate(360deg)
+
+@keyframes ball-clip-rotate
+  0%
+    transform rotate(0)
+    -o-transform rotate(0)
+
+  50%
+    transform rotate(180deg)
+    -o-transform rotate(180deg)
+
+  100%
+    transform rotate(360deg)
+    -o-transform rotate(360deg)
+
+@keyframes ball-clip-rotate
+  0%
+    transform rotate(0)
+    -webkit-transform rotate(0)
+    -moz-transform rotate(0)
+    -o-transform rotate(0)
+
+  50%
+    transform rotate(180deg)
+    -webkit-transform rotate(180deg)
+    -moz-transform rotate(180deg)
+    -o-transform rotate(180deg)
+
+  100%
+    transform rotate(360deg)
+    -webkit-transform rotate(360deg)
+    -moz-transform rotate(360deg)
+    -o-transform rotate(360deg)
+</style>
diff --git a/components/ModalAddReport.vue b/components/ModalAddReport.vue
index c4c811c..9a511d9 100644
--- a/components/ModalAddReport.vue
+++ b/components/ModalAddReport.vue
@@ -3,78 +3,87 @@
     v-bind="{...description, action, validation}"
     @submit="handleSubmit()"
     @delete="$emit('delete')"
-    :add-button-text="canSubmit ? 'Envoyer' : false"
+    @close="handleClosed()"
+    :add-button-text="submitButtonText"
     :modal-title="modalTitle"
     :delete-button-text="null"
+    :close-on-form-submit="closeOnFormSubmit"
+    :close-button="!submitting"
+    :class="{submitting, submitted, errored, 'come-back-later': !canSubmit}"
   )
-    template(v-if="canSubmit")
-      .report-type
-        InputButtonsSelect(
-          :values="reportTypes"
-          :value="value.type"
-          @input="$emit('input', { ...value, type: $event })"
-        )
-      .report-title
-        InputField(
-          type="text"
-          name="title"
-          :value="value.title"
-          @input="$emit('input', { ...value, title: $event })"
-        ) Titre
-      .report-message
-        template(v-if="value.type === 'BUG'")
+    transition
+      template(v-if="submitting")
+        ScreenLoading(small :fullscreen="false")
+          p Soumission de votre {{ this.value.type === 'BUG' ? 'rapport' : 'idée' }}...
+      template(v-else-if="submitted")
+        ScreenSuccess(small @cta="seeReports()" image="thumbs-up" :fullscreen="false")
+          h1 Merci pour votre contribution !
+          template(#cta) Voir vos rapports
+      template(v-else-if="canSubmit")
+        .report-type
+          InputButtonsSelect(
+            :values="reportTypes"
+            :value="value.type"
+            @input="$emit('input', { ...value, type: $event })"
+          )
+        .report-title
           InputField(
-            type="block"
-            name="what"
-            :value="message.what",
-            @input="handleMessageInput('what', $event)"
-            placeholder="Décrivez le comportement du bug et comment vous l'avez rencontré"
-          ) Que s'est-il passé ?
-          InputField(
-            type="block"
-            name="expected"
-            :value="message.expected",
-            @input="handleMessageInput('expected', $event)"
-            placeholder="Décrivez le comportement correct qui aurait dû avoir lieu si le bug n'existait pas"
-          ) À quoi vous attendiez-vous ?
-        template(v-else)
-          InputField(
-            type="block"
-            name="problem"
-            :value="message.problem",
-            @input="handleMessageInput('problem', $event)"
-            placeholder="Si votre solution ne répond pas à un problème en particulier, expliquez pourquoi elle est utile"
-          ) Quel est le problème ?
-          InputField(
-            type="block"
-            name="solution"
-            :value="message.solution",
-            @input="handleMessageInput('solution', $event)"
-            placeholder="N'hésitez pas à rajouter des captures d'écrans et autres ressources que vous pensez utiles."
-          ) Quel est votre solution ?
-      p.notice
-        | Votre rapport sera publié #[a(href="https://github.com/schoolsyst/frontend/issues" target="_blank") sur GitHub], où votre nom d'utilisateur
-        | , navigateur, OS et type d'appareil seront visibles, afin d'aider le réglage de votre problème.
-    template(v-else-if="submitted")
-      ScreenSuccess(small @cta="$router.push('/reports')" image="thumbs-up")
-        h1 Merci pour votre contribution !
-        template(#cta) Voir vos rapports
-    template(v-else="!canSubmit")
-      ScreenEmpty(small @cta="$router.push('/')")
-        template(#smiley) T_T
-        h1 Revenez demain.
-        p Pour éviter les abus, il est impossible de publier plus de 5 rapports par jour. Merci pour vos contributions acharnées !
-        p Vous pouvez toujours créer votre demande sur github.com directement, mais il faudra vous faudra un compte GitHub.
-        template(#cta) Créer une demande sur GitHub
+            type="text"
+            name="title"
+            :value="value.title"
+            @input="$emit('input', { ...value, title: $event })"
+          ) Titre
+        .report-message
+          template(v-if="value.type === 'BUG'")
+            InputField(
+              type="block"
+              name="what"
+              :value="message.what",
+              @input="handleMessageInput('what', $event)"
+              placeholder="Décrivez le comportement du bug et comment vous l'avez rencontré"
+            ) Que s'est-il passé ?
+            InputField(
+              type="block"
+              name="expected"
+              :value="message.expected",
+              @input="handleMessageInput('expected', $event)"
+              placeholder="Décrivez le comportement correct qui aurait dû avoir lieu si le bug n'existait pas"
+            ) À quoi vous attendiez-vous ?
+          template(v-else)
+            InputField(
+              type="block"
+              name="problem"
+              :value="message.problem",
+              @input="handleMessageInput('problem', $event)"
+              placeholder="Si votre solution ne répond pas à un problème en particulier, expliquez pourquoi elle est utile"
+            ) Quel est le problème ?
+            InputField(
+              type="block"
+              name="solution"
+              :value="message.solution",
+              @input="handleMessageInput('solution', $event)"
+              placeholder="N'hésitez pas à rajouter des captures d'écrans et autres ressources que vous pensez utiles."
+            ) Quel est votre solution ?
+        p.notice
+          | Votre rapport sera publié #[a(href="https://github.com/schoolsyst/frontend/issues" target="_blank") sur GitHub], où votre nom d'utilisateur
+          | , navigateur, OS et type d'appareil seront visibles, afin d'aider le réglage de votre problème.
+      template(v-else)
+        ScreenEmpty(small @cta="$router.push('/')")
+          template(#smiley) T_T
+          h1 Revenez demain.
+          p Pour éviter les abus, il est impossible de publier plus de 5 rapports par jour. Merci pour vos contributions acharnées !
+          p Vous pouvez toujours créer votre demande sur github.com directement, mais il faudra vous faudra un compte GitHub.
+          template(#cta) Créer une demande sur GitHub
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 import ModalObject from '~/components/ModalObject.vue'
 import InputField from '~/components/InputField.vue'
 import InputButtonsSelect from '~/components/InputButtonsSelect.vue'
 import ScreenEmpty from '~/components/ScreenEmpty.vue'
 import ScreenSuccess from '~/components/ScreenSuccess.vue'
+import ScreenLoading from '~/components/ScreenLoading.vue'
 
 export default {
   components: {
@@ -83,6 +92,7 @@ export default {
     InputButtonsSelect,
     ScreenEmpty,
     ScreenSuccess,
+    ScreenLoading,
   },
   props: {
     value: {
@@ -128,6 +138,7 @@ export default {
         solution: 'Décrivez votre solution',
       },
       submitted: false,
+      submitting: false,
     }
   },
   computed: {
@@ -158,6 +169,12 @@ export default {
       else return 'OTHER'
     },
     modalTitle() {
+      if (this.submitting) {
+        return null
+      }
+      if (this.submitted) {
+        return 'Rapport envoyé'
+      }
       switch (this.value.type) {
         case 'BUG':
           return 'Signaler un bug'
@@ -175,22 +192,51 @@ export default {
     validation() {
       return this.validate()(this.value)
     },
+    submitButtonText() {
+      if (this.canSubmit && !this.submitting && !this.submitted)
+        return 'Envoyer'
+      return null
+    },
+    closeOnFormSubmit() {
+      return this.submitted
+    },
   },
   methods: {
+    ...mapActions('reports', ['post']),
     ...mapGetters('reports', ['validate']),
     handleMessageInput(section, $event) {
       this.message[section] = $event
       this.$emit('input', { ...this.value, content: this.fullMessage })
     },
-    handleSubmmit() {
+    async handleSubmit() {
       this.clearFields()
-      this.$emit('submit')
+      this.submitting = true
+      const submitted = await this.post({
+        report: {
+          type: this.value.type,
+          content: this.fullMessage,
+          title: this.value.title,
+        },
+      })
+      this.submitting = false
+      if (submitted) {
+        this.submitted = true
+      } else {
+        this.errored = true
+      }
     },
-    clearFields() {
-      this.$emit('input', {})
+    handleClosed() {
+      // Timeout to wait for the closing animation to finish
+      setTimeout(() => {
+        this.submitted = false
+      }, 500)
     },
-    goToGithub() {
-      this.$router.push('https://github.com/schoolsyst/frontend/issues/new')
+    seeReports() {
+      this.$router.push('/reports')
+      this.$modal.close(`add-report`)
+    },
+    clearFields() {
+      this.$emit('input', { type: 'BUG' })
     },
   },
 }
@@ -203,7 +249,6 @@ export default {
   margin-bottom 1em
 
 .notice
-  width 500px
   text-align center
   font-size 0.75em
 
@@ -212,4 +257,24 @@ export default {
   max-width calc(100vw - 100px)
   width 100%
   height 100%
+
+ /deep/ .modal-wrapper
+  width 550px
+  height 685px
+
+.come-back-later /deep/ .modal-wrapper
+  width 600px
+  height unset
+
+/deep/ .content
+  display flex
+  flex 0 1 auto
+  justify-content center
+  align-items center
+
+.submitting /deep/ form
+  height: 100%
+  display flex
+  align-items center
+  justify-content center
 </style>
diff --git a/components/ModalObject.vue b/components/ModalObject.vue
index 6f325a6..2f8cb00 100644
--- a/components/ModalObject.vue
+++ b/components/ModalObject.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  BaseModal(v-bind="modalOpts")
-    form(@submit.prevent="$emit('submit'); closeModal()")
+  BaseModal(v-bind="modalOpts" @close="$emit('close')")
+    form(@submit.prevent="handleFormSubmit")
       slot
       .submit-area
         ButtonNormal(
@@ -63,19 +63,32 @@ export default {
       type: String,
       default: null,
     },
+    closeOnFormSubmit: {
+      type: Boolean,
+      default: true,
+    },
+    closeButton: {
+      type: Boolean,
+      default: true,
+    },
+    noHeader: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     modalOpts() {
       const name = this.action + '-' + this.name
-      const title =
-        this.modalTitle ||
-        this.verboseAction +
-          ' ' +
-          (this.gender === 'M' ? 'un' : 'une') +
-          ' ' +
-          this.verboseName
+      const title = this.noHeader
+        ? null
+        : this.modalTitle ||
+          this.verboseAction +
+            ' ' +
+            (this.gender === 'M' ? 'un' : 'une') +
+            ' ' +
+            this.verboseName
 
-      return { name, title }
+      return { name, title, closeButton: this.closeButton }
     },
     verboseAction() {
       return {
@@ -88,6 +101,12 @@ export default {
     closeModal() {
       this.$modal.close(this.modalOpts.name)
     },
+    handleFormSubmit() {
+      this.$emit('submit')
+      if (this.closeOnFormSubmit) {
+        this.closeModal()
+      }
+    },
   },
 }
 </script>
diff --git a/components/ScreenLoading.vue b/components/ScreenLoading.vue
new file mode 100644
index 0000000..85ee0c0
--- /dev/null
+++ b/components/ScreenLoading.vue
@@ -0,0 +1,57 @@
+<template lang="pug">
+  .loading-wrapper.loading-state(:class="{small, fullscreen, [`spinner-${spinner}`]: true}")
+    .loading
+      LoadingSpinner
+      .text: slot
+</template>
+
+<script>
+import LoadingSpinner from '~/components/LoadingSpinner.vue'
+
+export default {
+  components: { LoadingSpinner },
+  props: {
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    fullscreen: {
+      type: Boolean,
+      default: true,
+    },
+    spinner: {
+      type: String,
+      default: 'ball',
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.loading-wrapper
+  display flex
+  justify-content center
+  align-items center
+
+.loading
+  display flex
+  flex-direction column
+  align-items center
+  width 100%
+
+.text
+  margin-top 2em
+  text-align center
+
+&.small p
+  font-size 1.2rem
+
+&.small img
+  width 300px
+
+&.small h1
+  font-size 1.6rem
+
+.buttons
+  margin-top 3rem
+</style>
diff --git a/components/ScreenSuccess.vue b/components/ScreenSuccess.vue
index eeebb47..621f4ea 100644
--- a/components/ScreenSuccess.vue
+++ b/components/ScreenSuccess.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .success-wrapper#success-state(:class="{small, [`image-${image}`]: true}")
+  .success-wrapper.success-state(:class="{small, fullscreen, [`image-${image}`]: true}")
     .success
       img(:src="`/misc/${image}.svg`")
       .text
@@ -19,6 +19,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    fullscreen: {
+      type: Boolean,
+      default: true,
+    },
     image: {
       type: String,
       default: 'checkmark',
diff --git a/layouts/default.vue b/layouts/default.vue
index f56b3cc..dcec99e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -6,7 +6,7 @@
       aside.left
         TheSideRail
       main.right
-        ModalAddReport(action="add" v-model="newReport" @submit="postReport({ report: newReport })")
+        ModalAddReport(action="add" v-model="newReport")
         nuxt#page
         #loading-screen
           OverlayLoadingLogo(animation="loop")
@@ -104,7 +104,7 @@ main, .container
 .side-by-side
   display flex
 
-#page, /deep/ [id$=-state], /deep/ #loading-screen
+#page, /deep/ [class$=-state].fullscreen, /deep/ #loading-screen
   min-height calc(100vh - 100px) //top bar height
 
 /deep/ #loading-screen
diff --git a/nuxt.config.js b/nuxt.config.js
index 5502e8c..5a2ea65 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -3,10 +3,10 @@ const metaInfo = {
     'Gérez vos notes, prises de cours, devoirs et autres en un seul endroit. Une application web faite par un étudiant, pour les étudiants.',
   title: "schoolsyst: une nouvelle façon d'étudier",
   url: 'https://www.schoolsyst.com', // We link to the presentation website for SEO tags, better for discovery.
-  imagePath: '/assets/schoolsyst-social-preview-card.png' // Hosted on the presentation website
+  imagePath: '/assets/schoolsyst-social-preview-card.png', // Hosted on the presentation website
 }
 
-const getSocialCardPreviewTags = (data) => {
+const getSocialCardPreviewTags = data => {
   const tags = []
   // Prepend the url to the image
   data.image = data.url + data.imagePath
@@ -14,11 +14,11 @@ const getSocialCardPreviewTags = (data) => {
   const namespaces = ['og', 'twitter']
   const properties = ['title', 'url', 'image', 'description']
 
-  namespaces.forEach((namespace) => {
-    properties.forEach((prop) => {
+  namespaces.forEach(namespace => {
+    properties.forEach(prop => {
       tags.push({
         name: `${namespace}:${prop}`,
-        content: data[prop]
+        content: data[prop],
       })
     })
   })
@@ -35,7 +35,7 @@ export default {
    */
   head: {
     title: 'schoolsyst',
-    titleTemplate: (titleChunk) => {
+    titleTemplate: titleChunk => {
       return !titleChunk || titleChunk === 'schoolsyst'
         ? 'schoolsyst'
         : titleChunk + ' · schoolsyst'
@@ -50,47 +50,47 @@ export default {
         content:
           'A complete, centralized school management system made for students, by a student.' ||
           process.env.npm_package_description ||
-          ''
+          '',
       },
       { name: 'apple-mobile-web-app-title', content: 'Schoolsyst' },
       { name: 'application-name', content: 'Schoolsyst' },
       { name: 'msapplication-TileColor', content: '#2d89ef' },
-      { name: 'theme-color', content: '#1389df' }
+      { name: 'theme-color', content: '#1389df' },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       {
         rel: 'apple-touch-icon',
         sizes: '180x180',
-        href: '/apple-touch-icon.png'
+        href: '/apple-touch-icon.png',
       },
       {
         rel: 'icon',
         type: 'image/png',
         sizes: '32x32',
-        href: '/favicon-32x32.png'
+        href: '/favicon-32x32.png',
       },
       {
         rel: 'icon',
         type: 'image/png',
         sizes: '16x16',
-        href: '/favicon-16x16.png'
+        href: '/favicon-16x16.png',
       },
       { rel: 'manifest', href: '/site.webmanifest' },
-      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#1389fd' }
+      { rel: 'mask-icon', href: '/safari-pinned-tab.svg', color: '#1389fd' },
     ],
     script: [
       {
-        src: '/lottie.min.js'
-      }
-    ]
+        src: '/lottie.min.js',
+      },
+    ],
   },
   /*
    ** Customize the progress-bar color
    */
   loading: {
     color: 'var(--blue)',
-    height: '2px'
+    height: '2px',
   },
   /*
    ** Global CSS
@@ -106,7 +106,7 @@ export default {
     // Icons
     '~/assets/fonts/Material-Icons/import.css',
     // Plugins
-    '~/plugins/v-tooltip.scss'
+    '~/plugins/v-tooltip.scss',
   ],
   /*
    ** Plugins to load before mounting the App
@@ -118,14 +118,14 @@ export default {
     '~plugins/v-tooltip.js',
     '~plugins/vue-konva.js',
     '~plugins/vue2-touch-events',
-    { src: '~plugins/ga.js', mode: 'client' }
+    { src: '~plugins/ga.js', mode: 'client' },
   ],
   /*
    ** Nuxt.js dev-modules
    */
   buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
-    '@nuxtjs/eslint-module'
+    '@nuxtjs/eslint-module',
     // // Doc: https://github.com/nuxt-community/stylelint-module
     // '@nuxtjs/stylelint-module'
   ],
@@ -138,14 +138,14 @@ export default {
     '@nuxtjs/pwa',
     '@nuxtjs/auth',
     '@nuxtjs/toast',
-    ['nuxt-vue-select', {}]
+    ['nuxt-vue-select', {}],
   ],
   /*
    ** Toasts
    */
   toast: {
     position: 'bottom-left',
-    duration: 3000
+    duration: 3000,
   },
   /*
    ** Auth module configuration.
@@ -156,24 +156,24 @@ export default {
       login: '/login',
       logout: '/login',
       callback: false,
-      home: false
+      home: false,
     },
     strategies: {
       local: {
         endpoints: {
           login: { url: '/auth/', method: 'post', propertyName: 'token' },
           user: { url: '/users/self/', method: 'get', propertyName: '' },
-          logout: { url: '/auth/logout/', method: 'post' }
+          logout: { url: '/auth/logout/', method: 'post' },
         },
         tokenRequired: true,
-        tokenType: 'Bearer'
-      }
+        tokenType: 'Bearer',
+      },
     },
     // resetOnError: true,
-    rewriteRedirects: false
+    rewriteRedirects: false,
   },
   router: {
-    middleware: ['auth']
+    middleware: ['auth'],
   },
   /*
    ** Axios module configuration
@@ -183,7 +183,7 @@ export default {
     baseURL:
       process.env.NODE_ENV === 'development'
         ? 'http://localhost:9999/api'
-        : 'https://api.schoolsyst.com/api'
+        : 'https://api.schoolsyst.com/api',
   },
   /*
    ** Build configuration
@@ -196,7 +196,7 @@ export default {
       if (ctx.isDev) {
         config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
       }
-    }
+    },
   },
   pwa: {
     meta: {
@@ -207,7 +207,7 @@ export default {
       theme_color: '#ffffff',
       lang: 'fr',
       // Needed to make sure it works w/ iOS, will do testing (See: https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb)
-      nativeUI: true
-    }
-  }
+      nativeUI: true,
+    },
+  },
 }