diff --git a/web/templates/card_creator.html b/web/templates/card_creator.html
index 487a94f..8141fdd 100644
--- a/web/templates/card_creator.html
+++ b/web/templates/card_creator.html
@@ -43,8 +43,9 @@
       <input type="text" id="packInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
       <input type="number" id="powerInput" placeholder="⚡ Power" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
       <input type="number" id="charmInput" placeholder="❤️ Charm" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
-      <input type="number" id="popularityInput" placeholder="💫 Popularity" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
+      <input type="number" id="witInput" placeholder="💫 Wit" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
       <textarea id="flavorInput" placeholder="Flavor text..." rows="4" style="width: 100%; margin-bottom: 0.5rem;"></textarea><br>
+      <input type="text" id="artistInput" placeholder="Artist Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
       <input type="file" id="uploadArt" style="margin-bottom: 0.5rem;"><br>
       <button id="downloadBtn" onclick="generateCard()">✨ Create Card</button>
     </div>
@@ -64,8 +65,9 @@ const nameInput = document.getElementById("nameInput");
 const packInput = document.getElementById("packInput");
 const powerInput = document.getElementById("powerInput");
 const charmInput = document.getElementById("charmInput");
-const popularityInput = document.getElementById("popularityInput");
+const witInput = document.getElementById("witInput");
 const flavorInput = document.getElementById("flavorInput");
+const artistInput = document.getElementById("artistInput");
 
 const downloadBtn = document.getElementById("downloadBtn");
 
@@ -103,19 +105,25 @@ function drawCard() {
   ctx.textAlign = "center";
   ctx.fillText(nameInput.value, canvas.width / 2, 100);
   ctx.font = "20px sans-serif";
-  ctx.fillText(packInput.value, canvas.width / 2, 140);
+  ctx.fillText(packInput.value, canvas.width / 2, 160);
   ctx.textAlign = "left";
 
   // Stats
   ctx.font = "30px sans-serif";
-  ctx.fillText("Power: " + powerInput.value, 60, 1050);
-  ctx.fillText("Charm: " + charmInput.value, 300, 1050);
-  ctx.fillText("Popularity: " + popularityInput.value, 540, 1050);
+  ctx.fillText(powerInput.value, 230, 823);
+  ctx.fillText(charmInput.value, 370, 823);
+  ctx.fillText(witInput.value, 515, 823);
 
   // Flavor
   ctx.font = "italic 24px serif";
   wrapText(flavorInput.value, 60, 950, 680, 30);
 
+  // Artist
+  ctx.font = "30px sans-serif";
+  ctx.textAlign = "center";
+  ctx.fillStyle = "#000000";
+  ctx.fillText(artistInput.value, canvas.width / 2, 1060);
+
   // Defer ID drawing to a separate async step!
   drawCardId();
 }
@@ -146,7 +154,7 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
 }
 
 // Update card live when inputs change
-[nameInput, powerInput, charmInput, popularityInput, flavorInput,packInput].forEach(input => {
+[nameInput, powerInput, charmInput, witInput, flavorInput,packInput,artistInput].forEach(input => {
   input.addEventListener("input", drawCard);
 });