diff --git a/app/src/api/api.js b/app/src/api/api.js
index 86507812..5941862a 100644
--- a/app/src/api/api.js
+++ b/app/src/api/api.js
@@ -189,5 +189,34 @@ export default {
   delete (uri, data = {}, humanKey = null, options = {}) {
     if (typeof uri === 'string') return this.fetch('DELETE', uri, data, humanKey, options)
     return store.dispatch('DELETE', { ...uri, data, humanKey, options })
+  },
+
+  /**
+   * Api reconnection helper. Resolve when server is reachable or fail after n attemps
+   *
+   * @param {Number} attemps - number of attemps before rejecting
+   * @param {Number} delay - delay between calls to the API in ms.
+   * @param {Number} initialDelay - delay before calling the API for the first time in ms.
+   * @return {Promise<undefined|Error>}
+   */
+  tryToReconnect ({ attemps = 5, delay = 2000, initialDelay = 0 } = {}) {
+    return new Promise((resolve, reject) => {
+      const api = this
+
+      function reconnect (n) {
+        api.get('logout', {}, { key: 'reconnecting' }).then(resolve).catch(err => {
+          if (err.name === 'APIUnauthorizedError') {
+            resolve()
+          } else if (n < 1) {
+            reject(err)
+          } else {
+            setTimeout(() => reconnect(n - 1), delay)
+          }
+        })
+      }
+
+      if (initialDelay > 0) setTimeout(() => reconnect(attemps), initialDelay)
+      else reconnect(attemps)
+    })
   }
 }
diff --git a/app/src/components/globals/Spinner.vue b/app/src/components/globals/Spinner.vue
new file mode 100644
index 00000000..adfd699e
--- /dev/null
+++ b/app/src/components/globals/Spinner.vue
@@ -0,0 +1,79 @@
+<template>
+  <div v-bind="$attr" :class="['custom-spinner', spinner]" />
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+
+export default {
+  name: 'Spinner',
+
+  computed: {
+    ...mapGetters(['spinner'])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.custom-spinner {
+  animation: 8s linear infinite;
+  background-repeat: no-repeat;
+
+  &.pacman {
+    height: 24px;
+    width: 24px;
+    background-image: url('../../assets/spinners/pacman.gif');
+    animation-name: back-and-forth-pacman;
+
+    @keyframes back-and-forth-pacman {
+      0%, 100% { transform: scale(1); margin-left: 0; }
+      49% { transform: scale(1); margin-left: calc(100% - 24px);}
+      50% { transform: scale(-1); margin-left: calc(100% - 24px);}
+      99% { transform: scale(-1); margin-left: 0;}
+    }
+  }
+
+  &.magikarp {
+    height: 32px;
+    width: 32px;
+    background-image: url('../../assets/spinners/magikarp.gif');
+    animation-name: back-and-forth-magikarp;
+
+    @keyframes back-and-forth-magikarp {
+      0%, 100% { transform: scale(1, 1); margin-left: 0; }
+      49% { transform: scale(1, 1); margin-left: calc(100% - 32px);}
+      50% { transform: scale(-1, 1); margin-left: calc(100% - 32px);}
+      99% { transform: scale(-1, 1); margin-left: 0;}
+    }
+  }
+
+  &.nyancat {
+    height: 40px;
+    width: 100px;
+    background-image: url('../../assets/spinners/nyancat.gif');
+    animation-name: back-and-forth-nyancat;
+
+    @keyframes back-and-forth-nyancat {
+      0%, 100% { transform: scale(1, 1); margin-left: 0; }
+      49% { transform: scale(1, 1); margin-left: calc(100% - 100px);}
+      50% { transform: scale(-1, 1); margin-left: calc(100% - 100px);}
+      99% { transform: scale(-1, 1); margin-left: 0;}
+    }
+  }
+
+  &.spookycat {
+    height: 40px;
+    width: 65px;
+    background-image: url('../../assets/spinners/spookycat.gif');
+    animation-name: back-and-forth-spookycat;
+
+    @keyframes back-and-forth-spookycat {
+      0%, 100% { transform: scale(1, 1); margin-left: 0; }
+      49% { transform: scale(1, 1); margin-left: calc(100% - 100px);}
+      50% { transform: scale(-1, 1); margin-left: calc(100% - 100px);}
+      99% { transform: scale(-1, 1); margin-left: 0;}
+    }
+  }
+}
+</style>
diff --git a/app/src/i18n/helpers.js b/app/src/i18n/helpers.js
index 3a4c70ad..773a10e9 100644
--- a/app/src/i18n/helpers.js
+++ b/app/src/i18n/helpers.js
@@ -1,5 +1,5 @@
-import i18n from '@/i18n'
 import store from '@/store'
+import i18n from '@/i18n'
 import supportedLocales from './supportedLocales'
 
 let dateFnsLocale
diff --git a/app/src/i18n/index.js b/app/src/i18n/index.js
index 31c039a2..f575be80 100644
--- a/app/src/i18n/index.js
+++ b/app/src/i18n/index.js
@@ -5,12 +5,8 @@
 
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
-import { initDefaultLocales } from './helpers'
 
 // Plugin Initialization
 Vue.use(VueI18n)
 
 export default new VueI18n({})
-
-// Load default locales translations files and setup store data
-initDefaultLocales()
diff --git a/app/src/i18n/locales/en.json b/app/src/i18n/locales/en.json
index 6437172d..54faf2f6 100644
--- a/app/src/i18n/locales/en.json
+++ b/app/src/i18n/locales/en.json
@@ -21,6 +21,17 @@
             "pending": "In progress",
             "success": "Successfully completed",
             "warning": "Successfully completed with errors or alerts"
+        },
+        "reconnecting": {
+          "title": "Trying to communicate with the server...",
+          "failed": "Looks like the server is not responding. You can try to reconnect again or try to run `systemctl restart yunohost-api` thru ssh.",
+          "reason": {
+            "unknown": "Connection with the server has been closed for unknown reasons.",
+            "reboot": "Your server is rebooting and will not be reachable for some time. A login prompt will be available as soon as the server is reachable.",
+            "shutdown": "Your server is shutting down and is no longer reachable. Turn it back on and a login prompt will be available as soon as the server is reachable.",
+            "upgrade_system": "Connection with the server has been closed due to yunohost upgrade. Waiting for the server to be reachable again…"
+          },
+          "success": "The server is now reachable! You can try to login"
         }
     },
     "api_error": {
@@ -363,6 +374,7 @@
     "rerun_diagnosis": "Rerun diagnosis",
     "restore": "Restore",
     "restart": "Restart",
+    "retry": "Retry",
     "human_routes": {
         "adminpw": "Change admin password",
         "apps": {
@@ -422,6 +434,7 @@
         },
         "postinstall": "Run the post-install",
         "reboot": "Reboot the server",
+        "reconnecting": "Reconnecting",
         "services": {
           "restart": "Restart the service '{name}'",
           "start": "Start the service '{name}'",
@@ -473,15 +486,10 @@
     "tools_adminpw": "Change administration password",
     "tools_adminpw_current": "Current password",
     "tools_adminpw_current_placeholder": "Enter your current password",
-    "tools_power_up": "Your server seems to be accessible, you can now try to login.",
     "tools_reboot": "Reboot your server",
     "tools_reboot_btn": "Reboot",
-    "tools_reboot_done": "Rebooting...",
-    "tools_rebooting": "Your server is rebooting. To return to the web administration interface you need to wait for your server to be up. You can wait for the login form to show up or check by refreshing this page (F5).",
     "tools_shutdown": "Shutdown your server",
     "tools_shutdown_btn": "Shutdown",
-    "tools_shutdown_done": "Shutting down...",
-    "tools_shuttingdown": "Your server is powering off. As long as your server is off, you won't be able to use the web administration.",
     "tools_shutdown_reboot": "Shutdown/Reboot",
     "tools_webadmin": {
         "language": "Language",
diff --git a/app/src/main.js b/app/src/main.js
index 1fb69763..149c37c3 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -3,11 +3,12 @@ import App from './App.vue'
 import BootstrapVue from 'bootstrap-vue'
 import VueShowdown from 'vue-showdown'
 
-import i18n from './i18n'
-import router from './router'
 import store from './store'
+import router from './router'
+import i18n from './i18n'
 
 import { registerGlobalErrorHandlers } from './api'
+import { initDefaultLocales } from './i18n/helpers'
 
 
 Vue.config.productionTip = false
@@ -53,11 +54,13 @@ requireComponent.keys().forEach((fileName) => {
 
 registerGlobalErrorHandlers()
 
+// Load default locales translations files and setup store data
+initDefaultLocales()
 
 const app = new Vue({
-  i18n,
-  router,
   store,
+  router,
+  i18n,
   render: h => h(App)
 })
 
diff --git a/app/src/store/info.js b/app/src/store/info.js
index 04b335da..37e09292 100644
--- a/app/src/store/info.js
+++ b/app/src/store/info.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import api from '@/api'
 import router from '@/router'
 import i18n from '@/i18n'
+import api from '@/api'
 import { timeout, isObjectLiteral } from '@/helpers/commons'
 
 export default {
@@ -10,6 +10,7 @@ export default {
     connected: localStorage.getItem('connected') === 'true', // Boolean
     yunohost: null, // Object { version, repo }
     waiting: false, // Boolean
+    reconnecting: null, // null|Object { attemps, delay, initialDelay }
     history: [], // Array of `request`
     requests: [], // Array of `request`
     error: null, // null || request
@@ -31,6 +32,10 @@ export default {
       state.waiting = boolean
     },
 
+    'SET_RECONNECTING' (state, args) {
+      state.reconnecting = args
+    },
+
     'ADD_REQUEST' (state, request) {
       if (state.requests.length > 10) {
         // We do not remove requests right after it resolves since an error might bring
@@ -103,7 +108,6 @@ export default {
     'CONNECT' ({ commit, dispatch }) {
       commit('SET_CONNECTED', true)
       dispatch('GET_YUNOHOST_INFOS')
-      router.push(router.currentRoute.query.redirect || { name: 'home' })
     },
 
     'RESET_CONNECTED' ({ commit }) {
@@ -134,6 +138,12 @@ export default {
       return api.get('logout')
     },
 
+    'TRY_TO_RECONNECT' ({ commit, dispatch }, args = {}) {
+      // FIXME This is very ugly arguments forwarding, will use proper component way of doing this when switching to Vue 3 (teleport)
+      commit('SET_RECONNECTING', args)
+      dispatch('RESET_CONNECTED')
+    },
+
     'GET_YUNOHOST_INFOS' ({ commit }) {
       return api.get('versions').then(versions => {
         commit('SET_YUNOHOST_INFOS', versions.yunohost)
@@ -145,7 +155,7 @@ export default {
       const { key, ...args } = isObjectLiteral(humanKey) ? humanKey : { key: humanKey }
       const humanRoute = key ? i18n.t('human_routes.' + key, args) : `[${method}] /${uri}`
 
-      let request = { method, uri, humanRoute, initial, status: 'pending' }
+      let request = { method, uri, humanRouteKey: key, humanRoute, initial, status: 'pending' }
       if (websocket) {
         request = { ...request, messages: [], date: Date.now(), warnings: 0, errors: 0 }
         commit('ADD_HISTORY_ACTION', request)
@@ -253,7 +263,7 @@ export default {
 
     'DISMISS_WARNING' ({ commit, state }, request) {
       commit('SET_WAITING', false)
-      delete request.showWarningMessage
+      Vue.delete(request, 'showWarningMessage')
     }
   },
 
@@ -263,6 +273,7 @@ export default {
     yunohost: state => state.yunohost,
     error: state => state.error,
     waiting: state => state.waiting,
+    reconnecting: state => state.reconnecting,
     history: state => state.history,
     lastAction: state => state.history[state.history.length - 1],
     currentRequest: state => {
diff --git a/app/src/views/Login.vue b/app/src/views/Login.vue
index 190447d6..db50f4e6 100644
--- a/app/src/views/Login.vue
+++ b/app/src/views/Login.vue
@@ -33,7 +33,8 @@ export default {
   name: 'Login',
 
   props: {
-    skipInstallCheck: { type: Boolean, default: false }
+    skipInstallCheck: { type: Boolean, default: false },
+    forceReload: { type: Boolean, default: false }
   },
 
   data () {
@@ -47,7 +48,13 @@ export default {
 
   methods: {
     login () {
-      this.$store.dispatch('LOGIN', this.password).catch(err => {
+      this.$store.dispatch('LOGIN', this.password).then(() => {
+        if (this.forceReload) {
+          window.location.href = '/yunohost/admin/'
+        } else {
+          this.$router.push(this.$router.currentRoute.query.redirect || { name: 'home' })
+        }
+      }).catch(err => {
         if (err.name !== 'APIUnauthorizedError') throw err
         this.isValid = false
       })
diff --git a/app/src/views/_partials/ReconnectingDisplay.vue b/app/src/views/_partials/ReconnectingDisplay.vue
new file mode 100644
index 00000000..e9f91242
--- /dev/null
+++ b/app/src/views/_partials/ReconnectingDisplay.vue
@@ -0,0 +1,78 @@
+<template>
+  <!-- This card receives style from `ViewLockOverlay` if used inside it -->
+  <b-card-body>
+    <b-card-title class="text-center my-4" v-t="'api.reconnecting.title'" />
+
+    <template v-if="status === 'reconnecting'">
+      <spinner class="mb-4" />
+
+      <b-alert
+        v-if="origin"
+        v-t="'api.reconnecting.reason.' + origin"
+        :variant="origin === 'unknow' ? 'warning' : 'info'"
+      />
+    </template>
+
+    <template v-if="status === 'failed'">
+      <b-alert variant="danger">
+        <markdown-item :label="$t('api.reconnecting.failed')" />
+      </b-alert>
+
+      <div class="d-flex justify-content-end">
+        <b-button
+          variant="success" v-t="'retry'" class="ml-auto"
+          @click="tryToReconnect()"
+        />
+      </div>
+    </template>
+
+    <template v-if="status === 'success'">
+      <b-alert variant="success" v-t="'api.reconnecting.success'" />
+
+      <login-view skip-install-check force-reload />
+    </template>
+  </b-card-body>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+import api from '@/api'
+import LoginView from '@/views/Login'
+
+
+export default {
+  name: 'ReconnectingDisplay',
+
+  components: {
+    LoginView
+  },
+
+  data () {
+    return {
+      status: 'reconnecting',
+      origin: undefined
+    }
+  },
+
+  computed: {
+    ...mapGetters(['reconnecting'])
+  },
+
+  methods: {
+    tryToReconnect (initialDelay = 0) {
+      this.status = 'reconnecting'
+      api.tryToReconnect({ ...this.reconnecting, initialDelay }).then(() => {
+        this.status = 'success'
+      }).catch(() => {
+        this.status = 'failed'
+      })
+    }
+  },
+
+  created () {
+    this.origin = this.reconnecting.origin || 'unknown'
+    this.tryToReconnect(this.reconnecting.initialDelay)
+  }
+}
+</script>
diff --git a/app/src/views/_partials/ViewLockOverlay.vue b/app/src/views/_partials/ViewLockOverlay.vue
index a4f61faf..efe6ba66 100644
--- a/app/src/views/_partials/ViewLockOverlay.vue
+++ b/app/src/views/_partials/ViewLockOverlay.vue
@@ -2,7 +2,7 @@
   <b-overlay
     variant="white" opacity="0.75"
     no-center
-    :show="waiting || error !== null"
+    :show="waiting || reconnecting || error !== null"
   >
     <slot name="default" />
 
@@ -20,7 +20,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { ErrorDisplay, WarningDisplay, WaitingDisplay } from '@/views/_partials'
+import { ErrorDisplay, WarningDisplay, WaitingDisplay, ReconnectingDisplay } from '@/views/_partials'
 import QueryHeader from '@/components/QueryHeader'
 
 export default {
@@ -30,18 +30,22 @@ export default {
     ErrorDisplay,
     WarningDisplay,
     WaitingDisplay,
+    ReconnectingDisplay,
     QueryHeader
   },
 
   computed: {
-    ...mapGetters(['waiting', 'error', 'currentRequest']),
+    ...mapGetters(['waiting', 'reconnecting', 'error', 'currentRequest']),
 
     component () {
-      const { error, currentRequest: request } = this
+      const { error, reconnecting, currentRequest: request } = this
+
       if (error) {
         return { name: 'ErrorDisplay', request: error }
       } else if (request.showWarningMessage) {
         return { name: 'WarningDisplay', request }
+      } else if (reconnecting) {
+        return { name: 'ReconnectingDisplay' }
       } else {
         return { name: 'WaitingDisplay', request }
       }
diff --git a/app/src/views/_partials/WaitingDisplay.vue b/app/src/views/_partials/WaitingDisplay.vue
index f9bbb065..78be9fd9 100644
--- a/app/src/views/_partials/WaitingDisplay.vue
+++ b/app/src/views/_partials/WaitingDisplay.vue
@@ -13,7 +13,7 @@
       <b-progress-bar variant="secondary" :value="progress.values[2]" striped />
     </b-progress>
     <!-- OR SPINNER -->
-    <div v-else class="custom-spinner my-4" :class="spinner" />
+    <spinner v-else class="my-4" />
 
     <message-list-group
       v-if="hasMessages" :messages="request.messages"
@@ -24,8 +24,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-
 import MessageListGroup from '@/components/MessageListGroup'
 
 export default {
@@ -40,8 +38,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['spinner']),
-
     hasMessages () {
       return this.request.messages && this.request.messages.length > 0
     },
@@ -57,66 +53,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.custom-spinner {
-  animation: 8s linear infinite;
-  background-repeat: no-repeat;
-
-  &.pacman {
-    height: 24px;
-    width: 24px;
-    background-image: url('../../assets/spinners/pacman.gif');
-    animation-name: back-and-forth-pacman;
-
-    @keyframes back-and-forth-pacman {
-      0%, 100% { transform: scale(1); margin-left: 0; }
-      49% { transform: scale(1); margin-left: calc(100% - 24px);}
-      50% { transform: scale(-1); margin-left: calc(100% - 24px);}
-      99% { transform: scale(-1); margin-left: 0;}
-    }
-  }
-
-  &.magikarp {
-    height: 32px;
-    width: 32px;
-    background-image: url('../../assets/spinners/magikarp.gif');
-    animation-name: back-and-forth-magikarp;
-
-    @keyframes back-and-forth-magikarp {
-      0%, 100% { transform: scale(1, 1); margin-left: 0; }
-      49% { transform: scale(1, 1); margin-left: calc(100% - 32px);}
-      50% { transform: scale(-1, 1); margin-left: calc(100% - 32px);}
-      99% { transform: scale(-1, 1); margin-left: 0;}
-    }
-  }
-
-  &.nyancat {
-    height: 40px;
-    width: 100px;
-    background-image: url('../../assets/spinners/nyancat.gif');
-    animation-name: back-and-forth-nyancat;
-
-    @keyframes back-and-forth-nyancat {
-      0%, 100% { transform: scale(1, 1); margin-left: 0; }
-      49% { transform: scale(1, 1); margin-left: calc(100% - 100px);}
-      50% { transform: scale(-1, 1); margin-left: calc(100% - 100px);}
-      99% { transform: scale(-1, 1); margin-left: 0;}
-    }
-  }
-
-  &.spookycat {
-    height: 40px;
-    width: 65px;
-    background-image: url('../../assets/spinners/spookycat.gif');
-    animation-name: back-and-forth-spookycat;
-
-    @keyframes back-and-forth-spookycat {
-      0%, 100% { transform: scale(1, 1); margin-left: 0; }
-      49% { transform: scale(1, 1); margin-left: calc(100% - 100px);}
-      50% { transform: scale(-1, 1); margin-left: calc(100% - 100px);}
-      99% { transform: scale(-1, 1); margin-left: 0;}
-    }
-  }
-}
-</style>
diff --git a/app/src/views/_partials/index.js b/app/src/views/_partials/index.js
index dfcda23a..7ea629c8 100644
--- a/app/src/views/_partials/index.js
+++ b/app/src/views/_partials/index.js
@@ -1,6 +1,7 @@
 export { default as ErrorDisplay } from './ErrorDisplay'
 export { default as WarningDisplay } from './WarningDisplay'
 export { default as WaitingDisplay } from './WaitingDisplay'
+export { default as ReconnectingDisplay } from './ReconnectingDisplay'
 
 export { default as HistoryConsole } from './HistoryConsole'
 export { default as ViewLockOverlay } from './ViewLockOverlay'
diff --git a/app/src/views/tool/ToolPower.vue b/app/src/views/tool/ToolPower.vue
index cd2df63d..119daa4b 100644
--- a/app/src/views/tool/ToolPower.vue
+++ b/app/src/views/tool/ToolPower.vue
@@ -1,63 +1,35 @@
 <template>
-  <div>
-    <template v-if="canReconnect">
-      <b-alert variant="success" v-t="'tools_power_up'" />
-      <login-view />
-    </template>
+  <card :title="$t('operations')" icon="wrench">
+    <!-- REBOOT -->
+    <b-form-group
+      label-cols="5" label-cols-md="4" label-cols-lg="3"
+      :label="$t('tools_reboot')" label-for="reboot"
+    >
+      <b-button @click="triggerAction('reboot')" variant="danger" id="reboot">
+        <icon iname="refresh" /> {{ $t('tools_reboot_btn') }}
+      </b-button>
+    </b-form-group>
+    <hr>
 
-    <div v-else-if="inProcess">
-      <b-alert variant="info" v-t="'tools_' + action + '_done'" />
-
-      <b-alert variant="warning">
-        <icon :iname="action === 'reboot' ? 'refresh' : 'power-off'" />
-        {{ $t(action === 'reboot' ? 'tools_rebooting' : 'tools_shuttingdown') }}
-      </b-alert>
-    </div>
-
-    <card v-else :title="$t('operations')" icon="wrench">
-      <!-- REBOOT -->
-      <b-form-group
-        label-cols="5" label-cols-md="4" label-cols-lg="3"
-        :label="$t('tools_reboot')" label-for="reboot"
-      >
-        <b-button @click="triggerAction('reboot')" variant="danger" id="reboot">
-          <icon iname="refresh" /> {{ $t('tools_reboot_btn') }}
-        </b-button>
-      </b-form-group>
-      <hr>
-
-      <!-- SHUTDOWN -->
-      <b-form-group
-        label-cols="5" label-cols-md="4" label-cols-lg="3"
-        :label="$t('tools_shutdown')" label-for="shutdown"
-      >
-        <b-button @click="triggerAction('shutdown')" variant="danger" id="shutdown">
-          <icon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
-        </b-button>
-      </b-form-group>
-    </card>
-  </div>
+    <!-- SHUTDOWN -->
+    <b-form-group
+      label-cols="5" label-cols-md="4" label-cols-lg="3"
+      :label="$t('tools_shutdown')" label-for="shutdown"
+    >
+      <b-button @click="triggerAction('shutdown')" variant="danger" id="shutdown">
+        <icon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
+      </b-button>
+    </b-form-group>
+  </card>
 </template>
 
 <script>
 import api from '@/api'
-import LoginView from '@/views/Login'
+
 
 export default {
   name: 'ToolPower',
 
-  components: {
-    LoginView
-  },
-
-  data () {
-    return {
-      action: '',
-      inProcess: false,
-      canReconnect: false
-    }
-  },
-
   methods: {
     async triggerAction (action) {
       const confirmed = await this.$askConfirmation(
@@ -67,30 +39,8 @@ export default {
 
       this.action = action
       api.put(action + '?force', {}, action).then(() => {
-        // Use 'RESET_CONNECTED' and not 'DISCONNECT' else user will be redirect to login
-        this.$store.dispatch('RESET_CONNECTED')
-        this.inProcess = true
-        return this.tryToReconnect(4000)
-      }).then(() => {
-        this.canReconnect = true
-      })
-    },
-
-    tryToReconnect (delay = 2000) {
-      // FIXME need to be tested out of webpack-dev-server
-      return new Promise(resolve => {
-        setTimeout(() => {
-          // Try to get a response from the server after boot/reboot
-          api.get('logout').catch(err => {
-            if (err.name === 'APIUnauthorizedError') {
-              // Means the server is accessible
-              resolve()
-            } else {
-              // FIXME could be improved by checking error types since yunohost
-              resolve(this.tryToReconnect())
-            }
-          })
-        }, delay)
+        const delay = action === 'reboot' ? 4000 : 10000
+        this.$store.dispatch('TRY_TO_RECONNECT', { attemps: Infinity, origin: action, delay })
       })
     }
   }
diff --git a/app/src/views/update/SystemUpdate.vue b/app/src/views/update/SystemUpdate.vue
index 7deeb8e6..d8ace753 100644
--- a/app/src/views/update/SystemUpdate.vue
+++ b/app/src/views/update/SystemUpdate.vue
@@ -102,6 +102,9 @@ export default {
         } else if (type === 'apps') {
           this.apps = null
         } else {
+          if (this.system.some(({ name }) => name.includes('yunohost'))) {
+            this.$store.dispatch('TRY_TO_RECONNECT', { attemps: 1, origin: 'upgrade_system', initialDelay: 2000 })
+          }
           this.system = null
         }
       })