diff --git a/src/components/confirm_modal/confirm_modal.vue b/src/components/confirm_modal/confirm_modal.vue
index 250a6984..fa354285 100644
--- a/src/components/confirm_modal/confirm_modal.vue
+++ b/src/components/confirm_modal/confirm_modal.vue
@@ -1,6 +1,7 @@
 <template>
   <dialog-modal
     v-if="showing"
+    class="confirm-modal"
     :onCancel="onCancel"
   >
     <template v-slot:header>
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index e048f53d..febbff51 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -1,4 +1,5 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faSignInAlt,
@@ -30,7 +31,8 @@ library.add(
 
 export default {
   components: {
-    SearchBar
+    SearchBar,
+    ConfirmModal
   },
   data: () => ({
     searchBarHidden: true,
@@ -40,7 +42,8 @@ export default {
         window.CSS.supports('-moz-mask-size', 'contain') ||
         window.CSS.supports('-ms-mask-size', 'contain') ||
         window.CSS.supports('-o-mask-size', 'contain')
-    )
+    ),
+    showingConfirmLogout: false
   }),
   computed: {
     enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
@@ -69,15 +72,32 @@ export default {
     hideSitename () { return this.$store.state.instance.hideSitename },
     logoLeft () { return this.$store.state.instance.logoLeft },
     currentUser () { return this.$store.state.users.currentUser },
-    privateMode () { return this.$store.state.instance.private }
+    privateMode () { return this.$store.state.instance.private },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    }
   },
   methods: {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index bab3ca81..f007c858 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -75,6 +75,16 @@
         </button>
       </div>
     </div>
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </nav>
 </template>
 <script src="./desktop_nav.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 9e736cfb..3ddadd3d 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,5 +1,6 @@
 import SideDrawer from '../side_drawer/side_drawer.vue'
 import Notifications from '../notifications/notifications.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
@@ -19,11 +20,13 @@ library.add(
 const MobileNav = {
   components: {
     SideDrawer,
-    Notifications
+    Notifications,
+    ConfirmModal
   },
   data: () => ({
     notificationsCloseGesture: undefined,
-    notificationsOpen: false
+    notificationsOpen: false,
+    showingConfirmLogout: false
   }),
   created () {
     this.notificationsCloseGesture = GestureService.swipeGesture(
@@ -47,6 +50,9 @@ const MobileNav = {
     isChat () {
       return this.$route.name === 'chat'
     },
+    shouldConfirmLogout () {
+      return this.$store.getters.mergedConfig.modalOnLogout
+    },
     ...mapGetters(['unreadChatCount'])
   },
   methods: {
@@ -73,9 +79,23 @@ const MobileNav = {
     scrollToTop () {
       window.scrollTo(0, 0)
     },
+    showConfirmLogout () {
+      this.showingConfirmLogout = true
+    },
+    hideConfirmLogout () {
+      this.showingConfirmLogout = false
+    },
     logout () {
+      if (!this.shouldConfirmLogout) {
+        this.doLogout()
+      } else {
+        this.showConfirmLogout()
+      }
+    },
+    doLogout () {
       this.$router.replace('/main/public')
       this.$store.dispatch('logout')
+      this.hideConfirmLogout()
     },
     markNotificationsAsSeen () {
       this.$refs.notifications.markAsSeen()
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index f5279b3e..c6826dc2 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -81,6 +81,16 @@
       ref="sideDrawer"
       :logout="logout"
     />
+    <confirm-modal
+      :showing="showingConfirmLogout"
+      :title="$t('login.mute_confirm_title')"
+      :confirm-text="$t('login.logout_confirm_accept_button')"
+      :cancel-text="$t('login.logout_confirm_cancel_button')"
+      @accepted="doLogout"
+      @cancelled="hideConfirmLogout"
+    >
+      {{ $t('login.logout_confirm') }}
+    </confirm-modal>
   </div>
 </template>
 
@@ -212,6 +222,14 @@
       }
     }
   }
+  .confirm-modal.dark-overlay {
+    &::before {
+      z-index: 3000;
+    }
+    .dialog-modal.panel {
+      z-index: 3001;
+    }
+  }
 }
 
 </style>