diff --git a/client/src/modules/front_end_components/Toast.js b/client/src/modules/front_end_components/Toast.js
index 62554d3..d19844a 100644
--- a/client/src/modules/front_end_components/Toast.js
+++ b/client/src/modules/front_end_components/Toast.js
@@ -10,7 +10,7 @@ export const toast = (
     }
 };
 
-function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, innerHTML) {
+function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically, duration, domChild) {
     cancelCurrentToast();
     const messageEl = document.createElement('div');
     messageEl.classList.add('info-message');
@@ -56,8 +56,8 @@ function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutom
     }
 
     messageEl.setAttribute('id', 'current-info-message');
-    if (innerHTML) {
-        messageEl.innerHTML = message;
+    if (domChild) {
+        messageEl.appendChild(message);
     } else {
         messageEl.innerText = message;
     }
diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js
index ef222f2..66f626e 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();
-                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
-                );
+                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(toastContent, 'neutral', true, true, 'short', true);
+
                 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..b20261b 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,22 @@ 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
-                        );
+                        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);
+
                         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) => {