diff --git a/internal/js/toast.js b/internal/js/toast.js
new file mode 100644
index 0000000..b1ec308
--- /dev/null
+++ b/internal/js/toast.js
@@ -0,0 +1,40 @@
+// create a bs toast in the status_container
+function StatusMsg(st)
+{
+    // look for first '.hide' in #status_container (there may be more than 1)
+    if( $('.toast.hide').length !== 0 )
+    {
+        tid=$('.toast.hide').first().attr('id')
+        $('#'+tid ).find( '.toast-body').html(st.message)
+        $('#'+tid ).removeClass( function( index, className ) { return (className.match( /(^|\s)bg-\S+/g) || []).join(' ') } )
+        $('#'+tid ).addClass( 'bg-' + st.alert )
+        $('#'+tid ).toast("show")
+    }
+    else
+    {
+        tmp=$('.toast').last().attr('id')
+        if( tmp== '' )
+            tid=1
+        else
+        {
+            // skip 'st'
+            tid=tmp.substr(2)
+            tid++
+        }
+        div='<div id="st' + tid + '" class="toast hide align-items-center text-white border-0 bg-' + st.alert
+        div += `" role="alert" aria-live="assertive" aria-atomic="true">
+                <div class="d-flex">
+                    <div class="toast-body">
+                    `
+        div += st.message
+        div += `
+                    </div>
+                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+                </div>
+            </div>
+            `
+        // can be appended straight after st1 as the .toast("show") deals with display ordering
+        $('#st1').append(div)
+        $('#st' + tid ).toast("show")
+    } 
+}