diff --git a/client/src/modules/game_creation/DeckStateManager.js b/client/src/modules/game_creation/DeckStateManager.js
index f85442b..251f67d 100644
--- a/client/src/modules/game_creation/DeckStateManager.js
+++ b/client/src/modules/game_creation/DeckStateManager.js
@@ -216,8 +216,24 @@ export class DeckStateManager {
         roleEl.querySelector('.role-remove').addEventListener('keyup', minusOneHandler);
 
         const infoHandler = (e) => {
+            document.querySelector('#custom-role-info-modal-image')?.remove();
             if (e.type === 'click' || e.code === 'Enter') {
                 const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
+                if (!sortedDeck[i].custom) {
+                    document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'flex';
+                    const roleImg = new Image();
+                    roleImg.id = 'custom-role-info-modal-image';
+                    roleImg.onload = () => {
+                        document.getElementById('custom-role-info-modal-image-placeholder').appendChild(roleImg);
+                    };
+                    if (sortedDeck[i].role.toLowerCase() === 'villager') {
+                        roleImg.src = '../images/roles/Villager' + Math.ceil(Math.random() * 2) + '.png';
+                    } else {
+                        roleImg.src = '../images/roles/' + sortedDeck[i].role.replaceAll(' ', '') + '.png';
+                    }
+                } else {
+                    document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'none';
+                }
                 const nameEl = document.getElementById('custom-role-info-modal-name');
                 alignmentEl.classList.remove(ALIGNMENT.GOOD);
                 alignmentEl.classList.remove(ALIGNMENT.EVIL);
diff --git a/client/src/modules/game_creation/RoleBox.js b/client/src/modules/game_creation/RoleBox.js
index 1bb801c..e074a5f 100644
--- a/client/src/modules/game_creation/RoleBox.js
+++ b/client/src/modules/game_creation/RoleBox.js
@@ -263,6 +263,7 @@ export class RoleBox {
             }
             if (info) {
                 const infoHandler = (e) => {
+                    document.querySelector('#custom-role-info-modal-image')?.remove();
                     if (e.type === 'click' || e.code === 'Enter') {
                         const alignmentEl = document.getElementById('custom-role-info-modal-alignment');
                         const nameEl = document.getElementById('custom-role-info-modal-name');
@@ -273,9 +274,21 @@ export class RoleBox {
                         e.preventDefault();
                         let role;
                         if (isCustom) {
+                            document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'none';
                             role = this.getCustomRole(name);
                         } else {
+                            document.getElementById('custom-role-info-modal-image-placeholder').style.display = 'flex';
                             role = this.getDefaultRole(name);
+                            const roleImg = new Image();
+                            roleImg.id = 'custom-role-info-modal-image';
+                            roleImg.onload = () => {
+                                document.getElementById('custom-role-info-modal-image-placeholder').appendChild(roleImg);
+                            };
+                            if (name.toLowerCase() === 'villager') {
+                                roleImg.src = '../images/roles/Villager' + Math.ceil(Math.random() * 2) + '.png';
+                            } else {
+                                roleImg.src = '../images/roles/' + name.replaceAll(' ', '') + '.png';
+                            }
                         }
                         nameEl.innerText = name;
                         nameEl.classList.add(role.team);
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index c508e79..33cd6ed 100644
--- a/client/src/styles/modal.css
+++ b/client/src/styles/modal.css
@@ -55,6 +55,13 @@
     justify-content: center;
 }
 
+#custom-role-info-modal-image {
+    margin: 0 auto;
+    width: 200px;
+    background-color: #4645525c;
+    border-radius: 5px;
+}
+
 #custom-role-info-modal {
     color: #d7d7d7;
     text-align: left;
@@ -62,8 +69,14 @@
     align-items: flex-start;
 }
 
+#custom-role-info-modal-image-placeholder {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+}
+
 #custom-role-info-modal h3 {
-    margin: 0 0 0.5em 0;
+    margin: 0 auto 0.5em auto;
 }
 
 #custom-role-info-modal-description {
diff --git a/client/src/view_templates/CreateTemplate.js b/client/src/view_templates/CreateTemplate.js
index 964ee07..f7473a3 100644
--- a/client/src/view_templates/CreateTemplate.js
+++ b/client/src/view_templates/CreateTemplate.js
@@ -35,6 +35,7 @@ export const hiddenMenus =
     </div>
     <div tabindex="-1" id="custom-role-info-modal" class="modal">
         <h3 id="custom-role-info-modal-name"></h3>
+        <div id="custom-role-info-modal-image-placeholder"></div>
         <label for="custom-role-info-modal-alignment">alignment:</label>
         <div id="custom-role-info-modal-alignment"></div>
         <label for="custom-role-info-modal-alignment">description:</label>