diff --git a/web/templates/card_creator.html b/web/templates/card_creator.html
index 2af5e99..2a39616 100644
--- a/web/templates/card_creator.html
+++ b/web/templates/card_creator.html
@@ -221,13 +221,17 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
 
 // Download button
 downloadBtn.addEventListener("click", () => {
+  // Sanitize file name
+  const safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
+  const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
+  const fileName = `kemoverse_${safePack}_${safeName}.webp`;
+
   const link = document.createElement("a");
-  link.download = "kemoverse-card.webp";
+  link.download = fileName;
   link.href = canvas.toDataURL("image/webp", 0.95);
   link.click();
 });
 
-// Create and place the JSON download button below the card download button
 const jsonBtn = document.createElement("button");
 jsonBtn.textContent = "Download Card Info";
 jsonBtn.style.marginTop = "0.5rem";
@@ -242,12 +246,17 @@ jsonBtn.onclick = () => {
     artist: artistInput.value,
     frame: frameSelect.value
   };
+  const safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
+  const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
+  const fileName = `kemoverse_${safePack}_${safeName}.json`;
+
   const blob = new Blob([JSON.stringify(cardData, null, 2)], {type: "application/json"});
   const link = document.createElement("a");
   link.href = URL.createObjectURL(blob);
-  link.download = "kemoverse-card.json";
+  link.download = fileName;
   link.click();
 };
+
 // Place the button below the downloadBtn
 downloadBtn.parentNode.insertBefore(jsonBtn, downloadBtn.nextSibling);
 </script>