diff --git a/assets/app.js b/assets/app.js
index 1a66c985..60d45b7d 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -5,7 +5,7 @@ import yall from 'yall-js';
 
 // Init Bootstrap jQuery plugins
 import 'bootstrap';
-import * as form from './form';
+import * as modal from './modal';
 
 $(() => {
     $('[data-toggle="tooltip"]').tooltip();
@@ -22,7 +22,8 @@ $(() => {
         });
     });
 
-    form.initConfirmModals();
+    modal.initConfirmModals();
+    modal.initMissionModals();
 
     // Image lazy loading
     yall();
diff --git a/assets/form.js b/assets/modal.js
similarity index 56%
rename from assets/form.js
rename to assets/modal.js
index 918bad6f..0c40b152 100644
--- a/assets/form.js
+++ b/assets/modal.js
@@ -34,3 +34,27 @@ export const initConfirmModals = () => {
         });
     });
 };
+
+export const createMissionModal = (title, content) => {
+    let template = $('#modal-mission-template').html();
+    template = template.replace('__content__', content);
+    template = template.replace('__title__', title);
+
+    let $modal = $(template).modal({
+        'backdrop': 'static',
+        'keyboard': false,
+    });
+};
+
+export const initMissionModals = () => {
+    $('[data-mission-widget]').on('click', '[data-mission-title]', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const $mission = jQuery(e.delegateTarget);
+        const title = $mission.find('[data-mission-title]').text();
+        const description = $mission.find('[data-mission-description]').html();
+
+        createMissionModal(title, description)
+    });
+};