diff --git a/less/v2/chat.less b/less/v2/chat.less
index f6ce2a5b44..4779115fc7 100644
--- a/less/v2/chat.less
+++ b/less/v2/chat.less
@@ -444,7 +444,9 @@
     font-size: var(--font-size-10);
     line-height: 1;
   }
+}
 
+.message {
   p.supplement {
     margin: 0;
     font-size: var(--font-size-11);
@@ -458,6 +460,8 @@
       margin-right: .25rem;
     }
   }
+
+  .dice-roll + p.supplement { margin: .5rem 0; }
 }
 
 /* Damage & Effects Trays */
diff --git a/module/applications/components/damage-application.mjs b/module/applications/components/damage-application.mjs
index e61e15b743..0704a6222f 100644
--- a/module/applications/components/damage-application.mjs
+++ b/module/applications/components/damage-application.mjs
@@ -134,9 +134,9 @@ export default class DamageApplicationElement extends TargetedApplicationMixin(C
     li.classList.add("target");
     li.dataset.targetUuid = uuid;
     li.innerHTML = `
-      <img class="gold-icon" alt="${name}" src="${actor.img}">
+      <img class="gold-icon">
       <div class="name-stacked">
-        <span class="title">${name}</span>
+        <span class="title"></span>
         ${changeSources ? `<span class="subtitle">${changeSources}</span>` : ""}
       </div>
       <div class="calculated damage">
@@ -147,7 +147,8 @@ export default class DamageApplicationElement extends TargetedApplicationMixin(C
       </div>
       <menu class="damage-multipliers unlist"></menu>
     `;
-
+    Object.assign(li.querySelector(".gold-icon"), { alt: name, src: actor.img });
+    li.querySelector(".name-stacked .title").append(name);
     const menu = li.querySelector("menu");
     for ( const [value, display] of MULTIPLIERS ) {
       const entry = document.createElement("li");
diff --git a/module/applications/components/effect-application.mjs b/module/applications/components/effect-application.mjs
index 662b102644..d3d67efccf 100644
--- a/module/applications/components/effect-application.mjs
+++ b/module/applications/components/effect-application.mjs
@@ -100,9 +100,9 @@ export default class EffectApplicationElement extends TargetedApplicationMixin(C
       li.classList.add("effect");
       li.dataset.id = effect.id;
       li.innerHTML = `
-        <img class="gold-icon" alt="${effect.name}" src="${effect.img}">
+        <img class="gold-icon">
         <div class="name-stacked">
-          <span class="title">${effect.name}</span>
+          <span class="title"></span>
           <span class="subtitle">${effect.duration.label}</span>
         </div>
         <button class="apply-effect" type="button" data-action="applyEffect"
@@ -111,6 +111,8 @@ export default class EffectApplicationElement extends TargetedApplicationMixin(C
           <i class="fas fa-reply-all fa-flip-horizontal" inert></i>
         </button>
       `;
+      Object.assign(li.querySelector(".gold-icon"), { alt: effect.name, src: effect.img });
+      li.querySelector(".name-stacked .title").append(effect.name);
       this.effectsList.append(li);
       li.addEventListener("click", this._onApplyEffect.bind(this));
     }
@@ -130,14 +132,16 @@ export default class EffectApplicationElement extends TargetedApplicationMixin(C
     li.classList.add("target");
     li.dataset.targetUuid = uuid;
     li.innerHTML = `
-      <img class="gold-icon" alt="${name}" src="${actor.img}">
+      <img class="gold-icon">
       <div class="name-stacked">
-        <span class="title">${name}</span>
+        <span class="title"></span>
       </div>
       <div class="checkbox">
         <dnd5e-checkbox name="${uuid}"${checked}${disabled}></dnd5e-checkbox>
       </div>
     `;
+    Object.assign(li.querySelector(".gold-icon"), { alt: name, src: actor.img });
+    li.querySelector(".name-stacked .title").append(name);
 
     return li;
   }
diff --git a/module/applications/components/enchantment-application.mjs b/module/applications/components/enchantment-application.mjs
index 2ab806866e..70bc5810af 100644
--- a/module/applications/components/enchantment-application.mjs
+++ b/module/applications/components/enchantment-application.mjs
@@ -99,16 +99,18 @@ export default class EnchantmentApplicationElement extends HTMLElement {
    * Build a list of enchanted items. Will be called whenever the enchanted items are changed in order to update
    * the card list.
    */
-  async buildItemList() {
-    const enchantedItems = await dnd5e.registry.enchantments.applied(this.enchantmentActivity.uuid).map(enchantment => {
+  buildItemList() {
+    const enchantedItems = dnd5e.registry.enchantments.applied(this.enchantmentActivity.uuid).map(enchantment => {
       const item = enchantment.parent;
       const div = document.createElement("div");
       div.classList.add("preview");
       div.dataset.enchantmentUuid = enchantment.uuid;
       div.innerHTML = `
-        <img src="${item.img}" class="gold-icon" alt="${item.name}">
-        <span class="name">${item.name}</span>
+        <img class="gold-icon">
+        <span class="name"></span>
       `;
+      Object.assign(div.querySelector("img"), { alt: item.name, src: item.img });
+      div.querySelector(".name").append(item.name);
       if ( item.isOwner ) {
         const control = document.createElement("a");
         control.ariaLabel = game.i18n.localize("DND5E.ENCHANTMENT.Action.Remove");
@@ -119,14 +121,9 @@ export default class EnchantmentApplicationElement extends HTMLElement {
       }
       return div;
     });
-    if ( enchantedItems.length ) {
-      this.dropArea.replaceChildren(...enchantedItems);
-    } else {
-      this.dropArea.innerHTML = `<p>${game.i18n.localize("DND5E.ENCHANT.DropArea")}</p>`;
-    }
-    if ( this.countArea ) {
-      this.countArea.querySelector(".current").innerText = enchantedItems.length;
-    }
+    if ( enchantedItems.length ) this.dropArea.replaceChildren(...enchantedItems);
+    else this.dropArea.innerHTML = `<p>${game.i18n.localize("DND5E.ENCHANT.DropArea")}</p>`;
+    if ( this.countArea ) this.countArea.querySelector(".current").innerText = enchantedItems.length;
   }
 
   /* -------------------------------------------- */
diff --git a/module/documents/chat-message.mjs b/module/documents/chat-message.mjs
index cf27de0e1f..4747a5590e 100644
--- a/module/documents/chat-message.mjs
+++ b/module/documents/chat-message.mjs
@@ -260,11 +260,16 @@ export default class ChatMessage5e extends ChatMessage {
     const avatar = document.createElement("a");
     avatar.classList.add("avatar");
     if ( actor ) avatar.dataset.uuid = actor.uuid;
-    avatar.innerHTML = `<img src="${img}" alt="${nameText}">`;
+    const avatarImg = document.createElement("img");
+    Object.assign(avatarImg, { src: img, alt: nameText });
+    avatar.append(avatarImg);
 
     const name = document.createElement("span");
     name.classList.add("name-stacked");
-    name.innerHTML = `<span class="title">${nameText}</span>`;
+    const title = document.createElement("span");
+    title.classList.add("title");
+    title.append(nameText);
+    name.append(title);
 
     const subtitle = document.createElement("span");
     subtitle.classList.add("subtitle");
@@ -311,14 +316,19 @@ export default class ChatMessage5e extends ChatMessage {
       flavor.innerHTML = `
         <section class="card-header description ${isCritical ? "critical" : ""}">
           <header class="summary">
-            <img class="gold-icon" src="${item.img}" alt="${item.name}">
             <div class="name-stacked">
-              <span class="title">${item.name}</span>
               <span class="subtitle">${subtitle}</span>
             </div>
           </header>
         </section>
       `;
+      const icon = document.createElement("img");
+      Object.assign(icon, { className: "gold-icon", src: item.img, alt: item.name });
+      flavor.querySelector("header").insertAdjacentElement("afterbegin", icon);
+      const title = document.createElement("span");
+      title.classList.add("title");
+      title.append(item.name);
+      flavor.querySelector(".name-stacked").insertAdjacentElement("afterbegin", title);
       html.querySelector(".message-header .flavor-text").remove();
       html.querySelector(".message-content").insertAdjacentElement("afterbegin", flavor);
     }
@@ -415,22 +425,30 @@ export default class ChatMessage5e extends ChatMessage {
       </div>
     `;
     const evaluation = tray.querySelector("ul");
-    evaluation.innerHTML = targets.map(({ name, ac, uuid }) => {
+    const rows = targets.map(({ name, ac, uuid }) => {
       if ( !game.user.isGM && (visibility !== "all") ) ac = "";
       const isMiss = !attackRoll.isCritical && ((attackRoll.total < ac) || attackRoll.isFumble);
-      return [`
-        <li data-uuid="${uuid}" class="target ${isMiss ? "miss" : "hit"}">
-          <i class="fas ${isMiss ? "fa-times" : "fa-check"}"></i>
-          <div class="name">${name}</div>
-          ${(ac !== "") ? `
-          <div class="ac">
-            <i class="fas fa-shield-halved"></i>
-            <span>${(ac === null) ? "&infin;" : ac}</span>
-          </div>
-          ` : ""}
-        </li>
-      `, isMiss];
-    }).sort((a, b) => (a[1] === b[1]) ? 0 : a[1] ? 1 : -1).reduce((str, [li]) => str + li, "");
+      const li = document.createElement("li");
+      Object.assign(li.dataset, { uuid, miss: isMiss });
+      li.className = `target ${isMiss ? "miss" : "hit"}`;
+      li.innerHTML = `
+        <i class="fas ${isMiss ? "fa-times" : "fa-check"}"></i>
+        <div class="name"></div>
+        ${(ac !== "") ? `
+        <div class="ac">
+          <i class="fas fa-shield-halved"></i>
+          <span>${(ac === null) ? "&infin;" : ac}</span>
+        </div>
+        ` : ""}
+      `;
+      li.querySelector(".name").append(name);
+      return li;
+    }).sort((a, b) => {
+      const missA = Boolean(a.dataset.miss);
+      const missB = Boolean(b.dataset.miss);
+      return missA === missB ? 0 : missA ? 1 : -1;
+    });
+    evaluation.append(...rows);
     evaluation.querySelectorAll("li.target").forEach(target => {
       target.addEventListener("click", this._onTargetMouseDown.bind(this));
       target.addEventListener("pointerover", this._onTargetHoverIn.bind(this));
diff --git a/module/enrichers.mjs b/module/enrichers.mjs
index cfa1b7fa4f..7e1cd7d20d 100644
--- a/module/enrichers.mjs
+++ b/module/enrichers.mjs
@@ -731,7 +731,8 @@ function createRollLink(label, dataset) {
   // Add main link
   const link = document.createElement("a");
   link.dataset.action = "roll";
-  link.innerHTML = `<i class="fa-solid fa-dice-d20"></i>${label}`;
+  link.innerHTML = '<i class="fa-solid fa-dice-d20"></i>';
+  link.append(label);
   span.insertAdjacentElement("afterbegin", link);
 
   // Add chat request link for GMs