diff --git a/module/data/actor/character.mjs b/module/data/actor/character.mjs
index 0cae662f..8ae78ff8 100644
--- a/module/data/actor/character.mjs
+++ b/module/data/actor/character.mjs
@@ -411,8 +411,8 @@ export default class DhCharacter extends DhCreature {
 
     get domainCards() {
         const domainCards = this.parent.items.filter(x => x.type === 'domainCard');
-        const loadout = domainCards.filter(x => !x.system.inVault);
-        const vault = domainCards.filter(x => x.system.inVault);
+        const loadout = domainCards.filter(x => !x.system.inVault).sort((a, b) => a.sort - b.sort);
+        const vault = domainCards.filter(x => x.system.inVault).sort((a, b) => a.sort - b.sort);
 
         return {
             loadout: loadout,
diff --git a/templates/sheets/global/partials/domain-card-item.hbs b/templates/sheets/global/partials/domain-card-item.hbs
index 54e44e64..8ff37103 100644
--- a/templates/sheets/global/partials/domain-card-item.hbs
+++ b/templates/sheets/global/partials/domain-card-item.hbs
@@ -1,5 +1,5 @@
-<li class="card-item" data-item-uuid="{{item.uuid}}" data-type="domainCard">
-    <img src="{{item.img}}" data-action="useItem" class="card-img" />
+<li class="card-item" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}" data-type="domainCard">
+    <img src="{{item.img}}" data-action="useItem" class="card-img" draggable="true" />
     <span class="item-icon recall-cost">
         <span class="recall-value">{{item.system.recallCost}}</span>
         <i class="fa-solid fa-bolt"></i>