diff --git a/theme/templates/email/trades/trade_update_accepted.txt b/theme/templates/email/trades/trade_update_accepted.txt
index 9ca99f2..57a1001 100644
--- a/theme/templates/email/trades/trade_update_accepted.txt
+++ b/theme/templates/email/trades/trade_update_accepted.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-Great news! {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has accepted your trade offer.
+Great news! {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has accepted your trade offer.
 
 Trade Details:
 - They have: {{ want_card }}
diff --git a/theme/templates/email/trades/trade_update_received.txt b/theme/templates/email/trades/trade_update_received.txt
index 0890169..9ba070c 100644
--- a/theme/templates/email/trades/trade_update_received.txt
+++ b/theme/templates/email/trades/trade_update_received.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-Great news! {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has marked your trade as "Received".
+Great news! {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has marked your trade as "Received".
 
 Trade Details:
 - They sent: {{ want_card }}
diff --git a/theme/templates/email/trades/trade_update_rejected_by_acceptor.txt b/theme/templates/email/trades/trade_update_rejected_by_acceptor.txt
index 42a2d07..05d6d02 100644
--- a/theme/templates/email/trades/trade_update_rejected_by_acceptor.txt
+++ b/theme/templates/email/trades/trade_update_rejected_by_acceptor.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has canceled their trade acceptance.
+We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has canceled their trade acceptance.
 
 Trade Details:
 - They had: {{ want_card }}
diff --git a/theme/templates/email/trades/trade_update_rejected_by_initiator.txt b/theme/templates/email/trades/trade_update_rejected_by_initiator.txt
index 4919fdb..be05ca7 100644
--- a/theme/templates/email/trades/trade_update_rejected_by_initiator.txt
+++ b/theme/templates/email/trades/trade_update_rejected_by_initiator.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has rejected the trade.
+We're sorry to inform you that {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has rejected the trade.
 
 Trade Details:
 - You had: {{ has_card }}
diff --git a/theme/templates/email/trades/trade_update_sent.txt b/theme/templates/email/trades/trade_update_sent.txt
index fa216db..4f4b02e 100644
--- a/theme/templates/email/trades/trade_update_sent.txt
+++ b/theme/templates/email/trades/trade_update_sent.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-Great news! {{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has marked your trade as "Sent".
+Great news! {{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has marked your trade as "Sent".
 
 Trade Details:
 - You have: {{ want_card }}
diff --git a/theme/templates/email/trades/trade_update_thanked_by_acceptor.txt b/theme/templates/email/trades/trade_update_thanked_by_acceptor.txt
index 18dce90..51eb4e0 100644
--- a/theme/templates/email/trades/trade_update_thanked_by_acceptor.txt
+++ b/theme/templates/email/trades/trade_update_thanked_by_acceptor.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-{{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
+{{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
 
 Trade Details:
 - They sent: {{ want_card }}
diff --git a/theme/templates/email/trades/trade_update_thanked_by_both.txt b/theme/templates/email/trades/trade_update_thanked_by_both.txt
index 0b3d791..3e88dc4 100644
--- a/theme/templates/email/trades/trade_update_thanked_by_both.txt
+++ b/theme/templates/email/trades/trade_update_thanked_by_both.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-{{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
+{{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
 
 Trade Details:
 - {% if is_initiator %}You{% else %}They{% endif %} sent: {{ want_card }}
diff --git a/theme/templates/email/trades/trade_update_thanked_by_initiator.txt b/theme/templates/email/trades/trade_update_thanked_by_initiator.txt
index a26b519..9673541 100644
--- a/theme/templates/email/trades/trade_update_thanked_by_initiator.txt
+++ b/theme/templates/email/trades/trade_update_thanked_by_initiator.txt
@@ -1,6 +1,6 @@
 {% include 'email/common/header.txt' %}
 
-{{ acting_user }} ({{ acting_user_friend_code }}, in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
+{{ acting_user }} ({{ acting_user_friend_code }} • in-game name: {{ acting_user_ign }}) has sent their thanks for the successful trade!
 
 Trade Details:
 - You sent: {{ want_card }}
diff --git a/theme/templatetags/trade_offer_png.html b/theme/templatetags/trade_offer_png.html
index 1de055d..dde5430 100644
--- a/theme/templatetags/trade_offer_png.html
+++ b/theme/templatetags/trade_offer_png.html
@@ -13,7 +13,7 @@
 
       <!-- Flip container providing perspective -->
       <div class="flip-container">
-        <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if num_cards_available >= 4 %}w-192{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out">
+        <div class="flip-inner grid grid-cols-1 grid-rows-1 card bg-base-100 card-border shadow-lg {% if expanded %}w-180{% else %}w-96{% endif %} transform transition-transform duration-700 ease-in-out">
           
           <!-- Front Face: Trade Offer -->
           <div class="flip-face front mb-2 col-start-1 row-start-1 grid grid-cols-1 auto-rows-min gap-2 content-between">
@@ -41,9 +41,9 @@
                 <a href="{% url 'trade_offer_detail' pk=offer_pk %}" class="no-underline block">
                   <div class="px-4 main-badges pb-0">
                     {% if expanded %}
-                      <div class="flex flex-row gap-2 justify-around">
+                      <div class="flex flex-row gap-1 justify-around">
                         <!-- Has Side (inner grid of 2 columns) -->
-                        <div class="grid grid-cols-2 gap-2">
+                        <div class="grid grid-cols-2 content-start">
                           {% for card in have_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% endfor %}
@@ -53,7 +53,7 @@
                           <div class="w-px bg-gray-300 h-full"></div>
                         </div>
                         <!-- Wants Side (inner grid of 2 columns) -->
-                        <div class="grid grid-cols-2 gap-2">
+                        <div class="grid grid-cols-2 content-start">
                           {% for card in want_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% endfor %}
@@ -61,9 +61,9 @@
                       </div>
                     {% else %}
                     <!-- Normal mode: just use an outer grid with 2 columns -->
-                      <div class="flex flex-row gap-2 justify-around">
+                      <div class="flex flex-row gap-1 justify-around">
                         <!-- Has Side -->
-                        <div class="flex flex-col gap-2">
+                        <div class="flex flex-col content-start">
                           {% for card in have_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% empty %}
@@ -71,7 +71,7 @@
                           {% endfor %}
                         </div>
                         <!-- Wants Side -->
-                        <div class="flex flex-col gap-2">
+                        <div class="flex flex-col content-start">
                           {% for card in want_cards_available %}
                             {% card_badge card.card card.quantity %}
                           {% empty %}
diff --git a/trades/templatetags/trade_offer_tags.py b/trades/templatetags/trade_offer_tags.py
index 3716a96..1848f58 100644
--- a/trades/templatetags/trade_offer_tags.py
+++ b/trades/templatetags/trade_offer_tags.py
@@ -1,5 +1,5 @@
 from django import template
-
+from math import ceil
 register = template.Library()
 
 @register.inclusion_tag('templatetags/trade_offer.html', takes_context=True)
@@ -83,23 +83,18 @@ def action_button_class(state_value):
 
 @register.inclusion_tag('templatetags/trade_offer_png.html', takes_context=True)
 def render_trade_offer_png(context, offer, show_friend_code=False):
-    trade_offer_have_cards = list(offer.trade_offer_have_cards.all())
-    trade_offer_want_cards = list(offer.trade_offer_want_cards.all())
-
-    have_cards_available = [
-        card for card in trade_offer_have_cards
-        if card.quantity > card.qty_accepted
-    ]
-    want_cards_available = [
-        card for card in trade_offer_want_cards
-        if card.quantity > card.qty_accepted
-    ]
+    have_cards_available = offer.have_cards_available
+    want_cards_available = offer.want_cards_available
 
     num_cards = max(len(have_cards_available), len(want_cards_available))
+    expanded = (len(have_cards_available) + len(want_cards_available)) > 4
+    if expanded:
+        num_cards = ceil(num_cards / 2)
     image_height = (num_cards * 40) + 106
-                   # cards incl pad + header/footer
-    if (len(have_cards_available) + len(want_cards_available)) >= 4:
-        image_width = (4 * 160) + 160
+                #    cards incl pad + header/footer
+
+    if expanded:
+        image_width = (4 * 160) + 110
     else:
         image_width = (2 * 160) + 92
 
@@ -121,7 +116,7 @@ def render_trade_offer_png(context, offer, show_friend_code=False):
         'friend_code': offer.initiated_by.friend_code,
         'show_friend_code': show_friend_code,
         'num_cards_available': len(have_cards_available) + len(want_cards_available),
-        'expanded': (len(have_cards_available) + len(want_cards_available)) >= 4,
+        'expanded': expanded,
         'image_width': image_width,
         'image_height': image_height,
         'base_url': base_url,
diff --git a/trades/views.py b/trades/views.py
index 192c8d7..f3cf7df 100644
--- a/trades/views.py
+++ b/trades/views.py
@@ -525,7 +525,7 @@ class TradeOfferPNGView(View):
 
             # if query string has "debug=true", render the HTML instead of the PNG
             if request.GET.get("debug") == "html":
-                return render(request, "trades/trade_offer_png_debug.html", {"html": html})
+                return render(request, "templatetags/trade_offer_png.html", tag_context)
 
             with sync_playwright() as p:
                 browser = p.chromium.launch(