diff --git a/cards/templates/cards/_card_inner_design1.html b/cards/templates/cards/_card_inner_design1.html
new file mode 100644
index 0000000..488d09b
--- /dev/null
+++ b/cards/templates/cards/_card_inner_design1.html
@@ -0,0 +1,36 @@
+{# Shared inner fragment for Design 1 - core card markup only #}
+<div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
+  <div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></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; height:200px;">
+    {% if card.image %}
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px;">
+    {% endif %}
+  </div>
+  <div class="title-band" style="background:#2a7ae2; color:white; padding:12px; font-weight:700; font-size:1.2rem; text-align:center">{{ card.name }}</div>
+  <div class="card-body" style="padding:12px; background:#fff;">
+    <div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
+      {% if card.diet == 'herbivore' %}
+        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
+      {% elif card.diet == 'carnivore' %}
+        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
+      {% else %}
+        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
+      {% endif %}
+    </div>
+    <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
+    {% if card.facts_list %}
+      <div style="margin-top:0.5rem">
+        <strong>Fun facts</strong>
+        <ul class="fact-list">
+          {% for fact in card.facts_list %}
+            <li>{{ fact }}</li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+
+    <div style="margin-top:0.8rem">
+      {% include 'cards/_card_stats_rows.html' %}
+    </div>
+  </div>
+</div>
diff --git a/cards/templates/cards/_card_inner_design2.html b/cards/templates/cards/_card_inner_design2.html
new file mode 100644
index 0000000..782a058
--- /dev/null
+++ b/cards/templates/cards/_card_inner_design2.html
@@ -0,0 +1,35 @@
+{# Shared inner fragment for Design 2 - core card markup only #}
+<div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
+  <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; height:220px; filter:brightness(0.7);">
+    {% if card.image %}
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6);">
+    {% endif %}
+  </div>
+  <div class="title-band" style="background:#0b2b2b; color:#9fffbf; padding:14px; font-weight:800; font-size:1.3rem; text-align:center">{{ card.name }}</div>
+  <div class="card-body" style="padding:14px; background:#111; color:#eaeaea;">
+    <div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
+      {% if card.diet == 'herbivore' %}
+        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#072027;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
+      {% elif card.diet == 'carnivore' %}
+        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#072027;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
+      {% else %}
+        <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#072027;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
+      {% endif %}
+    </div>
+    <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
+    {% if card.facts_list %}
+      <div style="margin-top:0.5rem">
+        <strong>Fun facts</strong>
+        <ul class="fact-list">
+          {% for fact in card.facts_list %}
+            <li>{{ fact }}</li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+
+    <div style="margin-top:0.8rem">
+      {% include 'cards/_card_stats_rows.html' %}
+    </div>
+  </div>
+</div>
diff --git a/cards/templates/cards/_card_inner_design3.html b/cards/templates/cards/_card_inner_design3.html
new file mode 100644
index 0000000..9b44b7d
--- /dev/null
+++ b/cards/templates/cards/_card_inner_design3.html
@@ -0,0 +1,41 @@
+{# Shared inner fragment for Design 3 - core card markup only #}
+<div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
+  <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), 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; height:200px; filter:brightness(0.9);">
+    {% if card.image %}
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px;">
+    {% endif %}
+  </div>
+  <div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
+  <div class="card-body" style="padding:12px; background:#fff;">
+    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
+      <div><strong>Era:</strong> {{ card.get_era_display }}</div>
+      <div><strong>Diet:</strong>
+        {% if card.diet == 'herbivore' %}
+          <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#222;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
+        {% elif card.diet == 'carnivore' %}
+          <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#222;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
+        {% else %}
+          <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#222;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
+        {% endif %}
+      </div>
+    </div>
+    <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
+    {% if card.facts_list %}
+      <div style="margin-top:0.5rem">
+        <strong>Fun facts</strong>
+        <ul class="fact-list">
+          {% for fact in card.facts_list %}
+            <li>{{ fact }}</li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+
+    <div style="margin-top:0.8rem; display:flex; gap:8px; justify-content:space-around;">
+      <div style="text-align:center"><div style="font-weight:800">{{ card.speed_display }}</div><div class="is-size-7">Speed</div></div>
+      <div style="text-align:center"><div style="font-weight:800">{{ card.weight_display }}</div><div class="is-size-7">Weight</div></div>
+      <div style="text-align:center"><div style="font-weight:800">{{ card.intelligence_display }}</div><div class="is-size-7">Intel</div></div>
+      <div style="text-align:center"><div style="font-weight:800">{{ card.height_display }}</div><div class="is-size-7">Height</div></div>
+    </div>
+  </div>
+</div>
diff --git a/cards/templates/cards/_card_inner_design4.html b/cards/templates/cards/_card_inner_design4.html
new file mode 100644
index 0000000..916c040
--- /dev/null
+++ b/cards/templates/cards/_card_inner_design4.html
@@ -0,0 +1,90 @@
+{# Shared inner fragment for Design 4 - core two-column card markup only #}
+<div class="toptrump-card design-4" style="display:flex; gap:12px; border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.12);">
+  <div style="flex:0 0 320px; position:relative; background:#f5f5f5; display:flex; flex-direction:column;">
+    <div style="padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9));">
+      <div style="display:flex; flex-direction:column; align-items:center;">
+        <div style="display:flex; align-items:center; gap:10px; width:100%; justify-content:center;">
+          <div style="flex:0 0 36px; height:6px; background:linear-gradient(90deg,#e5e7eb,#c7d2fe); border-radius:4px; opacity:0.9"></div>
+          <div style="flex:1 1 auto; min-width:0; font-weight:900; font-size:1.15rem; text-transform:uppercase; letter-spacing:0.6px; color:#17202a; text-shadow:0 1px 0 rgba(255,255,255,0.6); text-align:center; word-break:break-word; white-space:normal;">{{ card.name }}</div>
+          <div style="flex:0 0 36px; height:6px; background:linear-gradient(90deg,#ffd6a5,#ffb4a2); border-radius:4px; opacity:0.95"></div>
+        </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: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px; overflow:hidden;">
+      <div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
+        <div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
+          <div style="width:100%; max-width:360px; display:flex; align-items:center; gap:8px;">
+            <div style="flex:1; height:8px; border-radius:6px; background:linear-gradient(90deg,#eceff1,#f8fafc); position:relative; overflow:visible;">
+              <div style="position:absolute; left:0; right:0; top:0; bottom:0; display:flex;">
+                <div style="flex:1;"><div style="width:100%; height:8px; border-top-left-radius:6px; border-bottom-left-radius:6px; background: {% if card.era == 'triassic' %}#f6d365{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
+                <div style="flex:1;"><div style="width:100%; height:8px; background: {% if card.era == 'jurassic' %}#8ec5ff{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
+                <div style="flex:1;"><div style="width:100%; height:8px; border-top-right-radius:6px; border-bottom-right-radius:6px; background: {% if card.era == 'cretaceous' %}#ffd6a5{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
+              </div>
+              <div style="position:absolute; top:-6px; left:0; right:0; display:flex; justify-content:space-between; pointer-events:none;">
+                <div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'triassic' %}#c47a00{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
+                <div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'jurassic' %}#0066cc{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
+                <div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'cretaceous' %}#ff7b54{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
+              </div>
+            </div>
+            <div style="margin-left:10px; font-weight:700; font-size:0.85rem; color:#fff;">{{ card.get_era_display }}</div>
+          </div>
+        </div>
+      </div>
+      <div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,0.9); color:#111; padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; box-shadow:0 6px 18px rgba(0,0,0,0.06);">
+        {% if card.diet == 'herbivore' %}
+          🥦 Herbivore
+        {% elif card.diet == 'carnivore' %}
+          🥩 Carnivore
+        {% else %}
+          🍽️ Omnivore
+        {% endif %}
+      </div>
+      {% if card.image %}
+        <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; z-index:1; transform: scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08); display:block; margin:0 auto; max-height:140px;">
+      {% endif %}
+    </div>
+    <div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;">
+      <div style="display:flex; flex-direction:column; gap:6px;">
+        <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
+        <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
+        <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Intelligence</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
+        <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
+        {% if card.facts_list %}
+          <div style="margin-top:6px; border-top:1px solid rgba(0,0,0,0.03); padding-top:6px; font-size:0.85rem; color:#333;">
+            <strong style="display:block; margin-bottom:4px;">Fun facts</strong>
+            <ul style="margin:0; padding-left:1rem; list-style:disc;">
+              {% for fact in card.facts_list|slice:":2" %}
+                <li>{{ fact }}</li>
+              {% endfor %}
+              {% if card.facts_list|length > 2 %}
+                <li><em>and more...</em></li>
+              {% endif %}
+            </ul>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+  <div style="flex:1; padding:14px; background:#fff;">
+    <div style="display:flex; justify-content:space-between; align-items:center; gap:8px;">
+      <div style="font-weight:800; font-size:1.4rem">{{ card.name }}</div>
+    </div>
+    <div style="margin-top:8px">{{ card.description|linebreaksbr }}</div>
+    {% if card.facts_list %}
+      <div style="margin-top:8px">
+        <strong>Fun facts</strong>
+        <ul class="fact-list">
+          {% for fact in card.facts_list %}
+            <li>{{ fact }}</li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+    <div style="margin-top:12px; display:flex; flex-direction:column; gap:10px;">
+      <div style="display:flex; justify-content:space-between; align-items:center;"><div>Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
+      <div style="display:flex; justify-content:space-between; align-items:center;"><div>Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
+      <div style="display:flex; justify-content:space-between; align-items:center;"><div>Intel</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
+      <div style="display:flex; justify-content:space-between; align-items:center;"><div>Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
+    </div>
+  </div>
+</div>
diff --git a/cards/templates/cards/_card_inner_design5.html b/cards/templates/cards/_card_inner_design5.html
new file mode 100644
index 0000000..be0095a
--- /dev/null
+++ b/cards/templates/cards/_card_inner_design5.html
@@ -0,0 +1,44 @@
+{# Shared inner fragment for Design 5 - core card markup only #}
+<div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
+  <div style="padding:14px; display:flex; align-items:center; gap:12px;">
+    <div style="flex:1">
+      <div style="font-weight:800; font-size:1.3rem">{{ card.name }}</div>
+      <div class="is-size-7">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
+    </div>
+    {% if card.image %}
+      <div style="width:120px; height:80px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:6px; overflow:hidden;">
+        <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:76px; transform:scale({{ card.image_scale }});">
+      </div>
+    {% endif %}
+  </div>
+  <div style="padding:10px 14px; border-top:1px solid #eee;">
+    <div style="display:flex; gap:8px; justify-content:space-between;">
+      <div style="flex:1; text-align:center;">
+        <div style="font-weight:700">{{ card.speed_display }}</div>
+        <div class="is-size-7">Speed</div>
+      </div>
+      <div style="flex:1; text-align:center;">
+        <div style="font-weight:700">{{ card.weight_display }}</div>
+        <div class="is-size-7">Weight</div>
+      </div>
+      <div style="flex:1; text-align:center;">
+        <div style="font-weight:700">{{ card.intelligence_display }}</div>
+        <div class="is-size-7">Intel</div>
+      </div>
+      <div style="flex:1; text-align:center;">
+        <div style="font-weight:700">{{ card.height_display }}</div>
+        <div class="is-size-7">Height</div>
+      </div>
+    </div>
+    {% if card.facts_list %}
+      <div style="margin-top:10px;">
+        <strong>Fun facts</strong>
+        <ul class="fact-list">
+          {% for fact in card.facts_list %}
+            <li>{{ fact }}</li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+  </div>
+</div>
diff --git a/cards/templates/cards/_card_preview_design1.html b/cards/templates/cards/_card_preview_design1.html
index 883fe83..2b6f949 100644
--- a/cards/templates/cards/_card_preview_design1.html
+++ b/cards/templates/cards/_card_preview_design1.html
@@ -4,41 +4,7 @@
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
-        <div class="toptrump-card design-1" style="border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
-          <div style="padding:8px; display:flex; gap:8px; justify-content:flex-end;"></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; height:200px;">
-            {% if card.image %}
-              <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:180px;">
-            {% endif %}
-          </div>
-          <div class="title-band" style="background:#2a7ae2; color:white; padding:12px; font-weight:700; font-size:1.2rem; text-align:center">{{ card.name }}</div>
-          <div class="card-body" style="padding:12px; background:#fff;">
-            <div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
-              {% if card.diet == 'herbivore' %}
-                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
-              {% elif card.diet == 'carnivore' %}
-                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#fff;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
-              {% else %}
-                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#fff;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
-              {% endif %}
-            </div>
-            <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
-            {% if card.facts_list %}
-              <div style="margin-top:0.5rem">
-                <strong>Fun facts</strong>
-                <ul class="fact-list">
-                  {% for fact in card.facts_list %}
-                    <li>{{ fact }}</li>
-                  {% endfor %}
-                </ul>
-              </div>
-            {% endif %}
-
-            <div style="margin-top:0.8rem">
-              {% include 'cards/_card_stats_rows.html' %}
-            </div>
-          </div>
-        </div>
+        {% include 'cards/_card_inner_design1.html' %}
       </div>
     </div>
   </div>
diff --git a/cards/templates/cards/_card_preview_design2.html b/cards/templates/cards/_card_preview_design2.html
index 2ff1365..5570d10 100644
--- a/cards/templates/cards/_card_preview_design2.html
+++ b/cards/templates/cards/_card_preview_design2.html
@@ -4,40 +4,7 @@
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
-        <div class="toptrump-card design-2" style="border-radius:6px; overflow:hidden; background:#111; color:#eee;">
-          <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; height:220px; filter:brightness(0.7);">
-            {% if card.image %}
-              <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:200px; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.6);">
-            {% endif %}
-          </div>
-          <div class="title-band" style="background:#0b2b2b; color:#9fffbf; padding:14px; font-weight:800; font-size:1.3rem; text-align:center">{{ card.name }}</div>
-          <div class="card-body" style="padding:14px; background:#111; color:#eaeaea;">
-            <div class="subtitle is-6"><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong>
-              {% if card.diet == 'herbivore' %}
-                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#072027;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
-              {% elif card.diet == 'carnivore' %}
-                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#072027;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
-              {% else %}
-                <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#072027;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
-              {% endif %}
-            </div>
-            <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
-            {% if card.facts_list %}
-              <div style="margin-top:0.5rem">
-                <strong>Fun facts</strong>
-                <ul class="fact-list">
-                  {% for fact in card.facts_list %}
-                    <li>{{ fact }}</li>
-                  {% endfor %}
-                </ul>
-              </div>
-            {% endif %}
-
-            <div style="margin-top:0.8rem">
-              {% include 'cards/_card_stats_rows.html' %}
-            </div>
-          </div>
-        </div>
+        {% include 'cards/_card_inner_design2.html' %}
       </div>
     </div>
   </div>
diff --git a/cards/templates/cards/_card_preview_design3.html b/cards/templates/cards/_card_preview_design3.html
index 487ba22..d106854 100644
--- a/cards/templates/cards/_card_preview_design3.html
+++ b/cards/templates/cards/_card_preview_design3.html
@@ -4,46 +4,7 @@
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
-        <div class="toptrump-card design-3" style="border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
-          <div class="hero-image" style="background-image: linear-gradient(120deg,#ff7a18, #af002d), 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; height:200px; filter:brightness(0.9);">
-            {% if card.image %}
-              <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; top:50%; left:50%; transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px;">
-            {% endif %}
-          </div>
-          <div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
-          <div class="card-body" style="padding:12px; background:#fff;">
-            <div style="display:flex; justify-content:space-between; align-items:center; gap:12px;">
-              <div><strong>Era:</strong> {{ card.get_era_display }}</div>
-              <div><strong>Diet:</strong>
-                {% if card.diet == 'herbivore' %}
-                  <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#222;font-weight:700;margin-left:6px;">🥦 Herbivore</span>
-                {% elif card.diet == 'carnivore' %}
-                  <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#e74c3c;color:#222;font-weight:700;margin-left:6px;">🥩 Carnivore</span>
-                {% else %}
-                  <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#f39c12;color:#222;font-weight:700;margin-left:6px;">🍽️ Omnivore</span>
-                {% endif %}
-              </div>
-            </div>
-            <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
-            {% if card.facts_list %}
-              <div style="margin-top:0.5rem">
-                <strong>Fun facts</strong>
-                <ul class="fact-list">
-                  {% for fact in card.facts_list %}
-                    <li>{{ fact }}</li>
-                  {% endfor %}
-                </ul>
-              </div>
-            {% endif %}
-
-            <div style="margin-top:0.8rem; display:flex; gap:8px; justify-content:space-around;">
-              <div style="text-align:center"><div style="font-weight:800">{{ card.speed_display }}</div><div class="is-size-7">Speed</div></div>
-              <div style="text-align:center"><div style="font-weight:800">{{ card.weight_display }}</div><div class="is-size-7">Weight</div></div>
-              <div style="text-align:center"><div style="font-weight:800">{{ card.intelligence_display }}</div><div class="is-size-7">Intel</div></div>
-              <div style="text-align:center"><div style="font-weight:800">{{ card.height_display }}</div><div class="is-size-7">Height</div></div>
-            </div>
-          </div>
-        </div>
+        {% include 'cards/_card_inner_design3.html' %}
       </div>
     </div>
   </div>
diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index d6ea28e..05d739e 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -4,101 +4,7 @@
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
-        <div class="toptrump-card design-4" style="display:flex; gap:12px; border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.12);">
-          <div style="flex:0 0 320px; position:relative; background:#f5f5f5; display:flex; flex-direction:column;">
-            <div style="padding:8px 10px; border-bottom:1px solid rgba(0,0,0,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,250,0.9));">
-              <div style="display:flex; flex-direction:column; align-items:center;">
-                <div style="display:flex; align-items:center; gap:10px; width:100%; justify-content:center;">
-                  <div style="flex:0 0 36px; height:6px; background:linear-gradient(90deg,#e5e7eb,#c7d2fe); border-radius:4px; opacity:0.9"></div>
-                  <div style="flex:1 1 auto; min-width:0; font-weight:900; font-size:1.15rem; text-transform:uppercase; letter-spacing:0.6px; color:#17202a; text-shadow:0 1px 0 rgba(255,255,255,0.6); text-align:center; word-break:break-word; white-space:normal;">{{ card.name }}</div>
-                  <div style="flex:0 0 36px; height:6px; background:linear-gradient(90deg,#ffd6a5,#ffb4a2); border-radius:4px; opacity:0.95"></div>
-                </div>
-                {# Era timeline moved into hero overlay; original left-column timeline removed #}
-                {# diet badge moved into hero overlay; kept here previously but removed to avoid duplication #}
-              </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: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px;">
-              {# Top overlay: compact era timeline + label (moved from left column) #}
-              <div style="position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3; width:84%; max-width:420px;">
-                <div style="background:rgba(0,0,0,0.55); padding:6px 10px; border-radius:999px; color:#fff; display:flex; align-items:center; justify-content:center;">
-                  <div style="width:100%; max-width:360px; display:flex; align-items:center; gap:8px;">
-                    <div style="flex:1; height:8px; border-radius:6px; background:linear-gradient(90deg,#eceff1,#f8fafc); position:relative; overflow:visible;">
-                      <div style="position:absolute; left:0; right:0; top:0; bottom:0; display:flex;">
-                        <div style="flex:1;"><div style="width:100%; height:8px; border-top-left-radius:6px; border-bottom-left-radius:6px; background: {% if card.era == 'triassic' %}#f6d365{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
-                        <div style="flex:1;"><div style="width:100%; height:8px; background: {% if card.era == 'jurassic' %}#8ec5ff{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
-                        <div style="flex:1;"><div style="width:100%; height:8px; border-top-right-radius:6px; border-bottom-right-radius:6px; background: {% if card.era == 'cretaceous' %}#ffd6a5{% else %}rgba(255,255,255,0.12){% endif %};"></div></div>
-                      </div>
-                      <div style="position:absolute; top:-6px; left:0; right:0; display:flex; justify-content:space-between; pointer-events:none;">
-                        <div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'triassic' %}#c47a00{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
-                        <div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'jurassic' %}#0066cc{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
-                        <div style="flex:1; display:flex; justify-content:center;"><div style="width:10px; height:10px; border-radius:50%; background:{% if card.era == 'cretaceous' %}#ff7b54{% else %}rgba(255,255,255,0.22){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
-                      </div>
-                    </div>
-                    <div style="margin-left:10px; font-weight:700; font-size:0.85rem; color:#fff;">{{ card.get_era_display }}</div>
-                  </div>
-                </div>
-              </div>
-              {# Bottom overlay: diet badge #}
-              <div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:3; background:rgba(255,255,255,0.9); color:#111; padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; box-shadow:0 6px 18px rgba(0,0,0,0.06);">
-                {% if card.diet == 'herbivore' %}
-                  🥦 Herbivore
-                {% elif card.diet == 'carnivore' %}
-                  🥩 Carnivore
-                {% else %}
-                  🍽️ Omnivore
-                {% endif %}
-              </div>
-              {% if card.image %}
-                <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="position:relative; z-index:1; transform: 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;">
-              <div style="display:flex; flex-direction:column; gap:6px;">
-                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
-                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
-                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Intelligence</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
-                <div style="display:flex; justify-content:space-between; align-items:center;"><div style="font-size:0.9rem; font-weight:700">Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
-                {% if card.facts_list %}
-                  <div style="margin-top:6px; border-top:1px solid rgba(0,0,0,0.03); padding-top:6px; font-size:0.85rem; color:#333;">
-                    <strong style="display:block; margin-bottom:4px;">Fun facts</strong>
-                    <ul style="margin:0; padding-left:1rem; list-style:disc;">
-                      {% for fact in card.facts_list|slice:":2" %}
-                        <li>{{ fact }}</li>
-                      {% endfor %}
-                      {% if card.facts_list|length > 2 %}
-                        <li><em>and more...</em></li>
-                      {% endif %}
-                    </ul>
-                  </div>
-                {% endif %}
-              </div>
-            </div>
-          </div>
-          <div style="flex:1; padding:14px; background:#fff;">
-            <div style="display:flex; justify-content:space-between; align-items:center; gap:8px;">
-              <div style="font-weight:800; font-size:1.4rem">{{ card.name }}</div>
-            </div>
-            {# Era and diet visuals relocated into the hero-image overlays above to avoid duplication #}
-
-            <div style="margin-top:8px">{{ card.description|linebreaksbr }}</div>
-            {% if card.facts_list %}
-              <div style="margin-top:8px">
-                <strong>Fun facts</strong>
-                <ul class="fact-list">
-                  {% for fact in card.facts_list %}
-                    <li>{{ fact }}</li>
-                  {% endfor %}
-                </ul>
-              </div>
-            {% endif %}
-            <div style="margin-top:12px; display:flex; flex-direction:column; gap:10px;">
-              <div style="display:flex; justify-content:space-between; align-items:center;"><div>Speed</div><div style="font-weight:800">{{ card.speed_display }}</div></div>
-              <div style="display:flex; justify-content:space-between; align-items:center;"><div>Weight</div><div style="font-weight:800">{{ card.weight_display }}</div></div>
-              <div style="display:flex; justify-content:space-between; align-items:center;"><div>Intel</div><div style="font-weight:800">{{ card.intelligence_display }}</div></div>
-              <div style="display:flex; justify-content:space-between; align-items:center;"><div>Height</div><div style="font-weight:800">{{ card.height_display }}</div></div>
-            </div>
-          </div>
-        </div>
+        {% include 'cards/_card_inner_design4.html' %}
       </div>
     </div>
   </div>
diff --git a/cards/templates/cards/_card_preview_design5.html b/cards/templates/cards/_card_preview_design5.html
index e6d1b3f..21f1b52 100644
--- a/cards/templates/cards/_card_preview_design5.html
+++ b/cards/templates/cards/_card_preview_design5.html
@@ -4,49 +4,7 @@
   <div class="modal-content">
     <div style="max-width:920px; margin:0 auto;">
       <div style="display:flex; justify-content:center;">
-        <div class="toptrump-card design-5" style="border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
-          <div style="padding:14px; display:flex; align-items:center; gap:12px;">
-            <div style="flex:1">
-              <div style="font-weight:800; font-size:1.3rem">{{ card.name }}</div>
-              <div class="is-size-7">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
-            </div>
-            {% if card.image %}
-              <div style="width:120px; height:80px; display:flex; align-items:center; justify-content:center; background:#f0f0f0; border-radius:6px; overflow:hidden;">
-                <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:76px; transform:scale({{ card.image_scale }});">
-              </div>
-            {% endif %}
-          </div>
-          <div style="padding:10px 14px; border-top:1px solid #eee;">
-            <div style="display:flex; gap:8px; justify-content:space-between;">
-              <div style="flex:1; text-align:center;">
-                <div style="font-weight:700">{{ card.speed_display }}</div>
-                <div class="is-size-7">Speed</div>
-              </div>
-              <div style="flex:1; text-align:center;">
-                <div style="font-weight:700">{{ card.weight_display }}</div>
-                <div class="is-size-7">Weight</div>
-              </div>
-              <div style="flex:1; text-align:center;">
-                <div style="font-weight:700">{{ card.intelligence_display }}</div>
-                <div class="is-size-7">Intel</div>
-              </div>
-              <div style="flex:1; text-align:center;">
-                <div style="font-weight:700">{{ card.height_display }}</div>
-                <div class="is-size-7">Height</div>
-              </div>
-            </div>
-            {% if card.facts_list %}
-              <div style="margin-top:10px;">
-                <strong>Fun facts</strong>
-                <ul class="fact-list">
-                  {% for fact in card.facts_list %}
-                    <li>{{ fact }}</li>
-                  {% endfor %}
-                </ul>
-              </div>
-            {% endif %}
-          </div>
-        </div>
+        {% include 'cards/_card_inner_design5.html' %}
       </div>
     </div>
   </div>
diff --git a/cards/templates/cards/printable.html b/cards/templates/cards/printable.html
index facc379..bb27b54 100644
--- a/cards/templates/cards/printable.html
+++ b/cards/templates/cards/printable.html
@@ -47,21 +47,32 @@
         <div class="cards-grid">
           {% for card in page_cards %}
             <div class="print-card">
-              <div class="toptrump-card design-{{ design }}">
-                {% comment %} Reuse minimal inline markup for print: image, title, era/diet {% endcomment %}
-                <div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% endif %}; background-size:cover; background-position:center">
-                  {% if card.image %}
-                    <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
-                  {% endif %}
+              {% if design == 1 %}
+                {% include 'cards/_card_inner_design1.html' %}
+              {% elif design == 2 %}
+                {% include 'cards/_card_inner_design2.html' %}
+              {% elif design == 3 %}
+                {% include 'cards/_card_inner_design3.html' %}
+              {% elif design == 4 %}
+                {% include 'cards/_card_inner_design4.html' %}
+              {% elif design == 5 %}
+                {% include 'cards/_card_inner_design5.html' %}
+              {% else %}
+                <div class="toptrump-card design-{{ design }}">
+                  <div class="hero-image" style="background:{% if card.background and card.background.image %}url('{{ card.background.image.url }}'){% endif %}; background-size:cover; background-position:center">
+                    {% if card.image %}
+                      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}">
+                    {% endif %}
+                  </div>
+                  <div style="padding:6px">
+                    <div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
+                    <div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
+                    {% if card.facts_list %}
+                      <div class="caption">{{ card.facts_list|join:', ' }}</div>
+                    {% endif %}
+                  </div>
                 </div>
-                <div style="padding:6px">
-                  <div style="font-weight:800; font-size:14pt">{{ card.name }}</div>
-                  <div style="margin-top:6px; font-size:11pt">{{ card.get_era_display }} — {{ card.get_diet_display }}</div>
-                  {% if card.facts_list %}
-                    <div class="caption">{{ card.facts_list|join:', ' }}</div>
-                  {% endif %}
-                </div>
-              </div>
+              {% endif %}
             </div>
           {% endfor %}
         </div>