diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index 5ce7bf337..acb084e6a 100644
Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ
diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index d1a9f3aee..040483b0f 100644
Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ
diff --git a/netbox/project-static/src/messages.ts b/netbox/project-static/src/messages.ts
index e2ccabf5b..d17541e5f 100644
--- a/netbox/project-static/src/messages.ts
+++ b/netbox/project-static/src/messages.ts
@@ -5,7 +5,7 @@ import { Toast } from 'bootstrap';
  */
 export function initMessages(): void {
   const elements = document.querySelectorAll<HTMLDivElement>(
-    'body > div#django-messages > div.django-message.toast',
+    'body > div#django-messages > div.toast',
   );
   for (const element of elements) {
     if (element !== null) {
diff --git a/netbox/templates/inc/messages.html b/netbox/templates/inc/messages.html
index b5d03135f..acf4f0d5b 100644
--- a/netbox/templates/inc/messages.html
+++ b/netbox/templates/inc/messages.html
@@ -1,39 +1,17 @@
 {% load helpers %}
 
-<div id="django-messages" class="toast-container">
+<div id="django-messages" class="toast-container position-fixed bottom-0 end-0 p-3">
 
   {# Non-Field Form Errors #}
   {% if form and form.non_field_errors %}
     {% for error in form.non_field_errors.get_json_data %}
-      <div class="django-message toast align-items-center border-0 bg-danger" data-django-type="non-field-error" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
-        <div class="d-flex">
-          <div class="toast-body">
-            <i class="mdi mdi-{{ "danger"|icon_from_status }} me-1"></i>
-            {{ error.message }}
-          </div>
-          <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-        </div>
-      </div>
+      {% include 'inc/toast.html' with status="danger" title="Error" message=error.message %}
     {% endfor %}
   {% endif %}
 
   {# Django Messages #}
-  {% if messages %}
-    {% for message in messages %}
-      {% with message.level_tag|status_from_tag as status %}
-      {% with status|icon_from_status as icon %}
-        <div class="django-message toast align-items-center border-0 bg-{{ status }}" data-django-type="message" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
-          <div class="d-flex">
-            <div class="toast-body">
-              <i class="mdi mdi-{{ icon }} me-1"></i>
-              {{ message }}
-            </div>
-            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-          </div>
-        </div>
-      {% endwith %}
-      {% endwith %}
-    {% endfor %}
-  {% endif %}
+  {% for message in messages %}
+    {% include 'inc/toast.html' with status=message.level_tag|status_from_tag %}
+  {% endfor %}
 
 </div>
diff --git a/netbox/templates/inc/toast.html b/netbox/templates/inc/toast.html
new file mode 100644
index 000000000..85eff2d7a
--- /dev/null
+++ b/netbox/templates/inc/toast.html
@@ -0,0 +1,12 @@
+{% load helpers %}
+
+<div class="toast shadow-sm" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
+  <div class="toast-header text-bg-{{ status }}">
+    <i class="mdi mdi-{{ status|icon_from_status }} me-1"></i>
+    {{ title }}
+    <button type="button" class="btn-close me-0 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+  </div>
+  <div class="toast-body">
+    {{ message }}
+  </div>
+</div>