diff --git a/src/components/layout/NavigationBar.vue b/src/components/layout/NavigationBar.vue
index edcaafd..78c1af8 100644
--- a/src/components/layout/NavigationBar.vue
+++ b/src/components/layout/NavigationBar.vue
@@ -71,7 +71,6 @@ import { Deck, Event, NavBarConfigItem } from '../../types';
 import navBarConfigJson from './navbar.json';
 
 import * as selectedDeckDialogHelper from "../../helpers/selectedDeckDialogHelper";
-import * as quitLearningDialogHelper from "../../helpers/quitLearningDialogHelper";
 
 const NavigationBarProps = Vue.extend({
   props: {
@@ -132,7 +131,7 @@ export default class NavigationBar extends NavigationBarProps {
     this.primaryDrawer.model = false;
   }
   quitLearning() {
-    quitLearningDialogHelper.quitLearningDialog(this);
+    this.$eventHub.$emit(Event.PREPARE_QUIT_LEARNING);
   }
   togglePrimaryDrawer() {
     this.primaryDrawer.model = !this.primaryDrawer.model;
diff --git a/src/components/learn/Learn.vue b/src/components/learn/Learn.vue
index 2584180..da6a9b3 100644
--- a/src/components/learn/Learn.vue
+++ b/src/components/learn/Learn.vue
@@ -41,6 +41,7 @@ import LearningSessionManager from "../../helpers/learningSessionManager";
 import FollowUpLearningSessionManager from "../../helpers/followUpLearningSessionManager";
 
 import { finishLearningDialog } from "../../helpers/finishLearningDialogHelper";
+import { quitLearningDialog } from "../../helpers/quitLearningDialogHelper";
 import {
   saveLearningSessionManagerDataToLocalStorage,
   getLearningSessionManagerDataFromLocalStorage
@@ -88,10 +89,14 @@ export default class Learn extends LearnProps {
     this.$eventHub.$on(Event.SWIPE_RIGHT_IN_LEARN, () => {
       this.moveToPrev();
     });
+    this.$eventHub.$on(Event.PREPARE_QUIT_LEARNING, () => {
+      this.quitLearning();
+    });
   }
   destroyed() {
     this.$eventHub.$off(Event.SWIPE_LEFT_IN_LEARN);
     this.$eventHub.$off(Event.SWIPE_RIGHT_IN_LEARN);
+    this.$eventHub.$off(Event.PREPARE_QUIT_LEARNING);
   }
 
   updateCurLearningElement() {
@@ -209,6 +214,10 @@ export default class Learn extends LearnProps {
     return bars;
   }
 
+  quitLearning() {
+    quitLearningDialog(this, this.getBarsForFinishLearningDialog());
+  }
+
   updateVerticalCentering() {
     for (const el of document.getElementsByClassName("max-height")) {
       if (el.scrollHeight > el.clientHeight) {
diff --git a/src/helpers/quitLearningDialogHelper.ts b/src/helpers/quitLearningDialogHelper.ts
index 2559d8b..884d16a 100644
--- a/src/helpers/quitLearningDialogHelper.ts
+++ b/src/helpers/quitLearningDialogHelper.ts
@@ -1,11 +1,17 @@
-import { Event, QuitLearningReason } from "../types";
+import { Event, QuitLearningReason, CustomDialogOptionsBarChartBar } from "../types";
 import { clearLearningSessionManagerDataInLocalStorage } from "./learningSessionStorageHelper";
 
-export function quitLearningDialog(context: any) {
+export function quitLearningDialog(
+  context: any,
+  bars: CustomDialogOptionsBarChartBar[]
+) {
   context.$eventHub.$emit("showCustomDialog", {
     title: "Quit Learning?",
     message:
       "Do you really want to quit learning? Nevertheless, your progress is saved.",
+    barChart: {
+      bars,
+    },
     buttons: [
       {
         name: "Cancel",
diff --git a/src/types/index.ts b/src/types/index.ts
index 9ab5582..cd158e1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -112,6 +112,7 @@ export enum Event {
   CLEAR_LOCAL_STORAGE = "clearLocalStorage",
   SHOW_CUSTOM_DIALOG = "showCustomDialog",
   QUIT_LEARNING = "quitLearning",
+  PREPARE_QUIT_LEARNING = "prepareQuitLearning",
   SELECT_ALL_DECKS = "selectAllDecks",
   DESELECT_ALL_DECKS = "deselectAllDecks",
   SWIPE_LEFT_IN_LEARN = "swipeLeftInLearn",