diff --git a/templates/layout/default.php b/templates/layout/default.php
index c5284b9..4c69c61 100644
--- a/templates/layout/default.php
+++ b/templates/layout/default.php
@@ -39,9 +39,11 @@ $cakeDescription = 'Cerebrate';
     <?= $this->Html->script('popper.min.js') ?>
     <?= $this->Html->script('bootstrap.bundle.js') ?>
     <?= $this->Html->script('main.js') ?>
+    <?= $this->Html->script('bootstrap-helper.js') ?>
     <?= $this->fetch('meta') ?>
     <?= $this->fetch('css') ?>
     <?= $this->fetch('script') ?>
+    <?= $this->Html->css('bootstrap-additional.css') ?>
     <?= $this->Html->meta('favicon.ico', '/img/favicon.ico', ['type' => 'icon']); ?>
 </head>
 <body>
@@ -63,5 +65,6 @@ $cakeDescription = 'Cerebrate';
         </div>
     </main>
     <div id="mainModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mediumModalLabel" aria-hidden="true"></div>
+    <div id="mainToastContainer" style="position: absolute; top: 15px; right: 15px;"></div>
 </body>
 </html>
diff --git a/webroot/css/bootstrap-additional.css b/webroot/css/bootstrap-additional.css
new file mode 100644
index 0000000..981324c
--- /dev/null
+++ b/webroot/css/bootstrap-additional.css
@@ -0,0 +1,68 @@
+/* Toast */
+.toast {
+    min-width: 250px;
+}
+.toast-primary {
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff;
+}
+.toast-primary strong {
+    color: #002752;
+}
+.toast-secondary {
+    color: #383d41;
+    background-color: #e2e3e5;
+    border-color: #d6d8db;
+}
+.toast-secondary strong {
+    color: #202326;
+}
+.toast-success {
+    color: #155724 !important;
+    background-color: #d4edda !important;
+    border-color: #c3e6cb !important;
+}
+.toast-success strong {
+    color: #0b2e13;
+}
+.toast-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+}
+.toast-info strong {
+    color: #062c33;
+}
+.toast-warning {
+    color: #856404;
+    background-color: #fff3cd;
+    border-color: #ffeeba;
+}
+.toast-warning strong {
+    color: #533f03;
+}
+.toast-danger {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+}
+.toast-danger strong {
+    color: #491217;
+}
+.toast-light {
+    color: #818182;
+    background-color: #fefefe;
+    border-color: #fdfdfe;
+}
+.toast-light strong {
+    color: #686868;
+}
+.toast-dark {
+    color: #1b1e21;
+    background-color: #d6d8d9;
+    border-color: #c6c8ca;
+}
+.toast-dark strong {
+    color: #040505;
+}
diff --git a/webroot/js/bootstrap-helper.js b/webroot/js/bootstrap-helper.js
new file mode 100644
index 0000000..60c4a5b
--- /dev/null
+++ b/webroot/js/bootstrap-helper.js
@@ -0,0 +1,97 @@
+function showToast(options) {
+    var theToast = new Toaster(options)
+    theToast.makeToast()
+    theToast.show()
+    return theToast.$toast
+}
+
+class Toaster {
+    constructor(options) {
+        this.options = Object.assign({}, Toaster.defaultOptions, options)
+        this.bsToastOptions = {
+            autohide: this.options.autohide,
+            delay: this.options.delay,
+        }
+    }
+
+    static defaultOptions = {
+        title: false,
+        muted: false,
+        body: false,
+        variant: 'default',
+        autohide: true,
+        delay: 5000,
+        titleHtml: false,
+        mutedHtml: false,
+        bodyHtml: false,
+        closeButton: true,
+    }
+
+    makeToast() {
+        if (this.isValid()) {
+            this.$toast = Toaster.buildToast(this.options)
+            $('#mainToastContainer').append(this.$toast)
+        }
+    }
+
+    show() {
+        if (this.isValid()) {
+            var that = this
+            this.$toast.toast(this.bsToastOptions)
+                .toast('show')
+                .on('hidden.bs.toast', function () {
+                    that.removeToast()
+                })
+        }
+    }
+
+    removeToast() {
+        this.$toast.remove();
+    }
+
+    isValid() {
+        return this.options.title !== false || this.options.muted !== false || this.options.body !== false
+    }
+
+    static buildToast(options) {
+        var $toast = $('<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"/>')
+        $toast.addClass('toast-' + options.variant)
+        if (options.title !== false || options.muted !== false) {
+            var $toastHeader = $('<div class="toast-header"/>')
+            $toastHeader.addClass('toast-' + options.variant)
+            if (options.title !== false) {
+                var $toastHeaderText
+                if (options.titleHtml) {
+                    $toastHeaderText = $('<div class="mr-auto"/>').html(options.title);
+                } else {
+                    $toastHeaderText = $('<strong class="mr-auto"/>').text(options.title)
+                }
+                $toastHeader.append($toastHeaderText)
+            }
+            if (options.muted !== false) {
+                var $toastHeaderMuted
+                if (options.mutedHtml) {
+                    $toastHeaderMuted = $('<div/>').html(options.muted)
+                } else {
+                    $toastHeaderMuted = $('<small class="text-muted"/>').text(options.muted)
+                }
+                $toastHeader.append($toastHeaderMuted)
+            }
+            if (options.closeButton) {
+                var $closeButton = $('<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
+                $toastHeader.append($closeButton)
+            }
+            $toast.append($toastHeader)
+        }
+        if (options.body !== false) {
+            var $toastBody
+            if (options.bodyHtml) {
+                $toastBody = $('<div class="toast-body"/>').html(options.body)
+            } else {
+                $toastBody = $('<div class="toast-body"/>').text(options.body)
+            }
+            $toast.append($toastBody)
+        }
+        return $toast
+    }
+}
