diff --git a/cards/templates/cards/_card_preview_design1.html b/cards/templates/cards/_card_preview_design1.html
index 00c6172..6e2d249 100644
--- a/cards/templates/cards/_card_preview_design1.html
+++ b/cards/templates/cards/_card_preview_design1.html
@@ -4,7 +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="width:520px; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.12);">
+        <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 %}
diff --git a/cards/templates/cards/_card_preview_design2.html b/cards/templates/cards/_card_preview_design2.html
index e2a12fa..2528e2d 100644
--- a/cards/templates/cards/_card_preview_design2.html
+++ b/cards/templates/cards/_card_preview_design2.html
@@ -4,7 +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="width:520px; border-radius:6px; overflow:hidden; background:#111; color:#eee;">
+        <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);">
diff --git a/cards/templates/cards/_card_preview_design3.html b/cards/templates/cards/_card_preview_design3.html
index 0518ed7..808427b 100644
--- a/cards/templates/cards/_card_preview_design3.html
+++ b/cards/templates/cards/_card_preview_design3.html
@@ -4,7 +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="width:520px; border-radius:10px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.14);">
+        <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;">
diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index 29876a8..c973112 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -4,7 +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="width:680px; display:flex; gap:12px; border-radius:8px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.12);">
+        <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;">
@@ -13,7 +13,35 @@
                   <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 style="margin-top:6px; font-weight:700; font-size:0.95rem; color:#444">{{ card.get_era_display }}</div>
+                <div style="margin-top:6px; width:100%;">
+                  <!-- Mesozoic timeline: Triassic -> Jurassic -> Cretaceous -->
+                  <div style="width:100%; display:flex; flex-direction:column; gap:6px;">
+                    <div style="height:10px; 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; background:transparent; display:flex; align-items:center; justify-content:center;">
+                          <div style="width:100%; height:10px; border-top-left-radius:6px; border-bottom-left-radius:6px; background: {% if card.era == 'triassic' %}#f6d365{% else %}rgba(0,0,0,0.05){% endif %};"></div>
+                        </div>
+                        <div style="flex:1; background:transparent; display:flex; align-items:center; justify-content:center;">
+                          <div style="width:100%; height:10px; background: {% if card.era == 'jurassic' %}#8ec5ff{% else %}rgba(0,0,0,0.05){% endif %};"></div>
+                        </div>
+                        <div style="flex:1; background:transparent; display:flex; align-items:center; justify-content:center;">
+                          <div style="width:100%; height:10px; border-top-right-radius:6px; border-bottom-right-radius:6px; background: {% if card.era == 'cretaceous' %}#ffd6a5{% else %}rgba(0,0,0,0.05){% endif %};"></div>
+                        </div>
+                      </div>
+                      <!-- era marker dot -->
+                      <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:12px; height:12px; border-radius:50%; background:{% if card.era == 'triassic' %}#c47a00{% else %}rgba(0,0,0,0.15){% 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:12px; height:12px; border-radius:50%; background:{% if card.era == 'jurassic' %}#0066cc{% else %}rgba(0,0,0,0.15){% 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:12px; height:12px; border-radius:50%; background:{% if card.era == 'cretaceous' %}#ff7b54{% else %}rgba(0,0,0,0.15){% endif %}; box-shadow:0 2px 6px rgba(0,0,0,0.12);"></div></div>
+                      </div>
+                    </div>
+                    <div style="display:flex; justify-content:space-between; font-size:0.82rem; color:#616161;">
+                      <div style="flex:1; text-align:center;">Triassic</div>
+                      <div style="flex:1; text-align:center;">Jurassic</div>
+                      <div style="flex:1; text-align:center;">Cretaceous</div>
+                    </div>
+                  </div>
+                </div>
                 <div style="margin-top:6px;">
                   {% if card.diet == 'herbivore' %}
                     <span style="display:inline-block;padding:4px 8px;border-radius:999px;background:#2ecc71;color:#fff;font-weight:700;">🥦 Herbivore</span>
diff --git a/cards/templates/cards/_card_preview_design5.html b/cards/templates/cards/_card_preview_design5.html
index af98127..66c8861 100644
--- a/cards/templates/cards/_card_preview_design5.html
+++ b/cards/templates/cards/_card_preview_design5.html
@@ -4,7 +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="width:520px; border-radius:6px; overflow:hidden; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,0.08);">
+        <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>
diff --git a/cards/templates/cards/base.html b/cards/templates/cards/base.html
index 42b40ca..3469fdc 100644
--- a/cards/templates/cards/base.html
+++ b/cards/templates/cards/base.html
@@ -35,6 +35,19 @@
       #theme-toggle{margin-left:0.5rem}
       /* Top Trumps card styles */
       .toptrump-card{max-width:320px;border-radius:10px;overflow:hidden;background:var(--card-bg);color:var(--text);box-shadow:0 6px 18px rgba(0,0,0,0.12);border:1px solid rgba(0,0,0,0.06)}
+      /* Design-specific fixed sizing so previews remain consistent */
+      .toptrump-card.design-1,
+      .toptrump-card.design-2,
+      .toptrump-card.design-3,
+      .toptrump-card.design-5 {
+        width: 520px;
+        min-height: 560px;
+      }
+      .toptrump-card.design-4 {
+        width: 680px;
+        min-height: 460px;
+        display: flex;
+      }
       .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{