diff --git a/_includes/floating_alert.html b/_includes/floating_alert.html
new file mode 100644
index 0000000..1638861
--- /dev/null
+++ b/_includes/floating_alert.html
@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
+</div>
diff --git a/_packs/controllers/floating_alert_controller.js b/_packs/controllers/floating_alert_controller.js
new file mode 100644
index 0000000..d50317e
--- /dev/null
+++ b/_packs/controllers/floating_alert_controller.js
@@ -0,0 +1,18 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = [ 'content' ]
+
+  connect () {
+    window.addEventListener('toast', event => {
+      this.contentTarget.innerText = event.detail.content
+      this.element.classList.toggle('hide')
+      this.element.classList.toggle('show')
+
+      setTimeout(() => {
+        this.element.classList.toggle('hide')
+        this.element.classList.toggle('show')
+      }, 3000)
+    })
+  }
+}
diff --git a/_sass/floating_alert.scss b/_sass/floating_alert.scss
new file mode 100644
index 0000000..4e855e5
--- /dev/null
+++ b/_sass/floating_alert.scss
@@ -0,0 +1,10 @@
+.floating-alert {
+  &.floating-alert-bottom {
+    bottom: 2rem;
+  }
+
+  .floating-alert-content {
+    border-radius: 2rem;
+    padding: .5rem 1rem;
+  }
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 80b66d5..f70bffc 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -6,6 +6,10 @@ $debug: {{ jekyll.environment | not: 'production' }};
 $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
+$colors: (
+  "black": black
+);
+
 $opacities: (
   0: -100%,
   1: -80%,