diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index c973112..0e1e40c 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -53,9 +53,9 @@
                 </div>
               </div>
             </div>
-            <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; flex:1; display:flex; align-items:center; justify-content:center; padding:8px;">
+            <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px;">
               {% if card.image %}
-                <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:360px; transform:scale({{ card.image_scale }}); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
+                <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform: translate(-50%,-50%) scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
               {% endif %}
             </div>
             <div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;">
diff --git a/cards/templates/cards/base.html b/cards/templates/cards/base.html
index 3469fdc..3caa71e 100644
--- a/cards/templates/cards/base.html
+++ b/cards/templates/cards/base.html
@@ -45,9 +45,11 @@
       }
       .toptrump-card.design-4 {
         width: 680px;
-        min-height: 460px;
+        min-height: 680px;
         display: flex;
       }
+      /* Larger hero image for design-4 to match list view scale behavior */
+      .toptrump-card.design-4 .hero-image { height: 560px; }
       .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
       /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
       .toptrump-card .hero-image img.card-hero-img{