diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index db5c27b2..3e01dea3 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -11,6 +11,13 @@ module ApplicationHelper
     name.underscore
   end
 
+  def notification(text, **options, &block)
+    content = tag.p(text)
+    content = capture &block if block_given?
+
+    render partial: "shared/notification", locals: { type: options[:type], content: content }
+  end
+
   # Wrap view with <%= modal do %> ... <% end %> to have it open in a modal
   # Make sure to add data-turbo-frame="modal" to the link/button that opens the modal
   def modal(&block)
diff --git a/app/javascript/controllers/element_removal_controller.js b/app/javascript/controllers/element_removal_controller.js
new file mode 100644
index 00000000..b14906a9
--- /dev/null
+++ b/app/javascript/controllers/element_removal_controller.js
@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Connects to data-controller="element-removal"
+export default class extends Controller {
+  remove() {
+    this.element.remove()
+  }
+}
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 503af69a..780e9bf8 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -24,6 +24,9 @@
   </head>
 
   <body class="h-full">
+    <div id="notification-tray" class="fixed top-6 right-6 space-y-1 z-50"></div>
+    <%= safe_join(flash.map { |type, message| notification(message, type: type) }) %>
+
     <div class="flex">
       <div class="flex-col p-5 min-w-80">
         <div class="flex items-center justify-between">
diff --git a/app/views/shared/_notification.html.erb b/app/views/shared/_notification.html.erb
new file mode 100644
index 00000000..df31010d
--- /dev/null
+++ b/app/views/shared/_notification.html.erb
@@ -0,0 +1,23 @@
+<%# locals: (type: "success", content:) -%>
+
+<turbo-stream action="append" target="notification-tray">
+  <template>
+    <div
+      class="max-w-80 bg-white shadow-xs border border-alpha-black-50 border-solid py-3 px-4 rounded-[10px] text-sm font-medium flex gap-3 animate-[appear-then-fade_5s_300ms_both]"
+      role="<%= type == "error" ? "alert" : "status" %>"
+      data-controller="element-removal"
+      data-action="click->element-removal#remove animationend->element-removal#remove">
+      <% base_class = "w-5 h-5 p-1 text-white flex shrink-0 items-center justify-center rounded-full" %>
+      <%= type.in?(["error", "alert"]) ? lucide_icon("x", class: "#{base_class} bg-error") : lucide_icon("check", class: "#{base_class} bg-success") %>
+
+      <%= content %>
+
+      <button aria-label="Close notification" data-action="click->element-removal#remove" class="shrink-0 h-5">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
+          <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
+          <circle class="origin-center -rotate-90 animate-[stroke-fill_5s_300ms_forwards]" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
+        </svg>
+      </button>
+    </div>
+  </template>
+</turbo-stream>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 10b6a592..47779fa2 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -204,6 +204,15 @@ module.exports = {
       fontSize: {
         "2xs": ".625rem",
       },
+      keyframes: {
+        'appear-then-fade': {
+          '0%,100%': { opacity: 0 },
+          '5%,90%': { opacity: 1 },
+        },
+        'stroke-fill': {
+          to: { 'stroke-dashoffset': 0 },
+        }
+      }
     },
   },
   plugins: [
