diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js
index 7e4c897..2d77213 100644
--- a/client/src/modules/front_end_components/Toast.js
+++ b/client/src/modules/front_end_components/Toast.js
@@ -3,16 +3,16 @@ export const toast = (
     type, positionAtTop = true,
     dispelAutomatically = true,
     duration = null,
-    domChild = false
+    elementBuilder = null // this is meant to be a function that returns a DOM Node
 ) => {
     if (message && type) {
-        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, domChild);
+        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, elementBuilder);
     }
 };
 
-function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild) {
+function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, elementBuilder) {
     cancelCurrentToast();
-    const messageEl = document.createElement('div');
+    const messageEl = elementBuilder ? elementBuilder() : buildDefaultMessageElement();
     messageEl.classList.add('info-message');
     const positionClass = positionAtTop ? 'toast-top' : 'toast-bottom';
     messageEl.classList.add(positionClass);
@@ -56,15 +56,21 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom
     }
 
     messageEl.setAttribute('id', 'current-info-message');
-    if (domChild) {
-        messageEl.appendChild(message);
-    } else {
-        messageEl.innerText = message;
-    }
+
+    messageEl.querySelector('#toast-content').innerText = message;
 
     document.body.prepend(messageEl);
 }
 
+function buildDefaultMessageElement () {
+    const messageEl = document.createElement('div');
+    const content = document.createElement('span');
+    content.setAttribute('id', 'toast-content');
+    messageEl.appendChild(content);
+
+    return messageEl;
+}
+
 export function cancelCurrentToast () {
     const currentMessage = document.getElementById('current-info-message');
     if (currentMessage !== null) {
diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js
index 018bac2..0cdc68e 100644
--- a/client/src/modules/game_creation/DeckStateManager.js
+++ b/client/src/modules/game_creation/DeckStateManager.js
@@ -197,15 +197,16 @@ export class DeckStateManager {
         const minusOneHandler = (e) => {
             if (e.type === 'click' || e.code === 'Enter') {
                 e.preventDefault();
-                const toastContent = document.createElement('span');
-                toastContent.innerHTML =
-                    `<span class="toast-minus-one">-1 </span>
-                     <span id="toast-minus-one-name"></span>
-                     (<span class="toast-minus-role-quantity"></span>)`;
-                toastContent.querySelector('#toast-minus-one-name').innerText = sortedDeck[i].role;
-                toastContent.querySelector('.toast-minus-role-quantity').innerText = sortedDeck[i].quantity - 1;
+                toast(sortedDeck[i].role + ' ', 'neutral', true, true, 'short', () => {
+                    const toastEl = document.createElement('span');
+                    toastEl.innerHTML =
+                        `<span class="toast-minus-one">-1 </span>
+                         <span id="toast-content"></span>
+                         <span class="toast-minus-role-quantity"></span>`;
+                    toastEl.querySelector('.toast-minus-role-quantity').innerText = '(' + (sortedDeck[i].quantity - 1) + ')';
 
-                toast(toastContent, 'neutral', true, true, 'short', true);
+                    return toastEl;
+                });
 
                 this.removeCopyOfCard(sortedDeck[i].role);
                 this.updateDeckStatus();
diff --git a/client/src/modules/game_creation/RoleBox.js b/client/src/modules/game_creation/RoleBox.js
index de9aacd..0e1e290 100644
--- a/client/src/modules/game_creation/RoleBox.js
+++ b/client/src/modules/game_creation/RoleBox.js
@@ -204,15 +204,17 @@ export class RoleBox {
                         } else {
                             this.deckManager.addCopyOfCard(name);
                         }
-                        const toastContent = document.createElement('span');
-                        toastContent.innerHTML =
-                              `<span class="toast-plus-one">+1 </span>
-                               <span id="toast-plus-one-name"></span>
-                               (<span class="toast-plus-role-quantity"></span>)`;
-                        toastContent.querySelector('#toast-plus-one-name').innerText = name;
-                        toastContent.querySelector('.toast-plus-role-quantity').innerText = this.deckManager.getQuantityOfRole(name);
 
-                        toast(toastContent, 'neutral', true, true, 'short', true);
+                        toast(name + ' ', 'neutral', true, true, 'short', () => {
+                            const toastEl = document.createElement('span');
+                            toastEl.innerHTML =
+                                `<span class="toast-plus-one">+1 </span>
+                                 <span id="toast-content"></span>
+                                 <span class="toast-plus-role-quantity"></span>`;
+                            toastEl.querySelector('.toast-plus-role-quantity').innerText = ' (' + this.deckManager.getQuantityOfRole(name) + ')';
+
+                            return toastEl;
+                        });
 
                         this.deckManager.updateDeckStatus();
                     }
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index 2b9b2f3..61da69d 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -133,11 +133,13 @@ textarea {
 .toast-plus-role-quantity {
     color: #1c8a36;
     font-weight: bold;
+    margin-left: 10px;
 }
 
 .toast-minus-role-quantity {
     color: #e73333;
     font-weight: bold;
+    margin-left: 10px;
 }
 
 #footer {