diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js
index 62554d3..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,
-    innerHTML = false
+    elementBuilder = null // this is meant to be a function that returns a DOM Node
 ) => {
     if (message && type) {
-        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, innerHTML);
+        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically, duration, elementBuilder);
     }
 };
 
-function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, innerHTML) {
+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 (innerHTML) {
-        messageEl.innerHTML = 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 ef222f2..0cdc68e 100644
--- a/client/src/modules/game_creation/DeckStateManager.js
+++ b/client/src/modules/game_creation/DeckStateManager.js
@@ -197,15 +197,17 @@ export class DeckStateManager {
         const minusOneHandler = (e) => {
             if (e.type === 'click' || e.code === 'Enter') {
                 e.preventDefault();
-                toast(
-                    '<span class=\'toast-minus-one\'>-1</span>' +
-                    sortedDeck[i].role + ' (<span class="toast-minus-role-quantity">' + (sortedDeck[i].quantity - 1).toString() + '</span>)',
-                    'neutral',
-                    true,
-                    true,
-                    'short',
-                    true
-                );
+                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) + ')';
+
+                    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 3f0b13f..0e1e290 100644
--- a/client/src/modules/game_creation/RoleBox.js
+++ b/client/src/modules/game_creation/RoleBox.js
@@ -44,9 +44,13 @@ export class RoleBox {
     loadCustomRolesFromCookies () {
         const customRoles = localStorage.getItem('play-werewolf-custom-roles');
         if (customRoles !== null && validateCustomRoleCookie(customRoles)) {
-            this.customRoles = JSON.parse(customRoles).map((role) => {
-                role.id = createRandomId();
-                return role;
+            this.customRoles = JSON.parse(customRoles).map((roleObj) => {
+                return {
+                    id: createRandomId(),
+                    role: roleObj.role,
+                    team: roleObj.team,
+                    description: roleObj.description
+                };
             }); // we know it is valid JSON from the validate function
         }
     }
@@ -64,9 +68,13 @@ export class RoleBox {
                 string = e.target.result;
             }
             if (validateCustomRoleCookie(string)) {
-                this.customRoles = JSON.parse(string).map((role) => {
-                    role.id = createRandomId();
-                    return role;
+                this.customRoles = JSON.parse(string).map((roleObj) => {
+                    return {
+                        id: createRandomId(),
+                        role: roleObj.role,
+                        team: roleObj.team,
+                        description: roleObj.description
+                    };
                 }); // we know it is valid JSON from the validate function
                 const initialLength = this.customRoles.length;
                 // If any imported roles match a default role, exclude them.
@@ -182,6 +190,7 @@ export class RoleBox {
             ? document.querySelectorAll('#role-select .custom-role')
             : document.querySelectorAll('#role-select .default-role');
         elements.forEach((role) => {
+            const name = role.querySelector('.role-name').innerText;
             if (addOne) {
                 const plusOneHandler = (e) => {
                     if (e.type === 'click' || e.code === 'Enter') {
@@ -195,22 +204,24 @@ export class RoleBox {
                         } else {
                             this.deckManager.addCopyOfCard(name);
                         }
-                        toast(
-                            '<span class="toast-plus-one">+1 </span>' +
-                            name + ' (<span class="toast-plus-role-quantity">' + this.deckManager.getQuantityOfRole(name) + '</span>)',
-                            '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();
                     }
                 };
                 role.querySelector('.role-include').addEventListener('click', plusOneHandler);
                 role.querySelector('.role-include').addEventListener('keyup', plusOneHandler);
             }
-            const name = role.querySelector('.role-name').innerText;
 
             if (remove) {
                 const removeHandler = (e) => {
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 {