diff --git a/src/index.html b/src/index.html
index 56a906c..d4fbd60 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,6 +14,7 @@
 		</div>
 		<input type="file" id="upload"><br>
 		Or drag & drop
+		<div id="filename"></div>
 		<div id="downloadButtons">
 			<button id="downloadPng">png</button>
 			<button id="downloadWebp">webp</button>
diff --git a/src/script.js b/src/script.js
index 2674bdd..7fad460 100644
--- a/src/script.js
+++ b/src/script.js
@@ -6,6 +6,7 @@ window.addEventListener("DOMContentLoaded", () => {
 			if (file.type.startsWith("image/")) {
 				image = URL.createObjectURL(file);
 				renderImageOnCanvas(image);
+				document.getElementById("filename").innerText = file.name;
 			} else {
 				alert("Please upload a valid image file.");
 				return;
@@ -14,19 +15,11 @@ window.addEventListener("DOMContentLoaded", () => {
 	});
 
 	document.getElementById("downloadPng").addEventListener("click", () => {
-		const canvas = document.getElementById("cv");
-		const link = document.createElement("a");
-		link.download = "canvas.png";
-		link.href = canvas.toDataURL();
-		link.click();
+		downloadPictureFromCanvas("image/png");
 	});
 
 	document.getElementById("downloadWebp").addEventListener("click", () => {
-		const canvas = document.getElementById("cv");
-		const link = document.createElement("a");
-		link.download = "canvas.webp";
-		link.href = canvas.toDataURL("image/webp");
-		link.click();
+		downloadPictureFromCanvas("image/webp");
 	});
 
 	document.addEventListener("drag", () => {
@@ -56,6 +49,7 @@ window.addEventListener("DOMContentLoaded", () => {
 			if (file.type.startsWith("image/")) {
 				image = URL.createObjectURL(file);
 				renderImageOnCanvas(image);
+				document.getElementById("filename").innerText = file.name;
 			} else {
 				alert("Please upload a valid image file.");
 				return;
@@ -64,6 +58,15 @@ window.addEventListener("DOMContentLoaded", () => {
 	});
 });
 
+function downloadPictureFromCanvas(fileType) {
+	const canvas = document.getElementById("cv");
+	const link = document.createElement("a");
+	const originalFilename = document.getElementById("filename").innerText;
+	link.download = originalFilename.replace(/\.[^/.]+$/, "");
+	link.href = canvas.toDataURL(fileType);
+	link.click();
+}
+
 function renderImageOnCanvas(image) {
 	const canvas = document.getElementById("cv");
 	const ctx = canvas.getContext("2d");
diff --git a/src/style.css b/src/style.css
index d176b48..5d25d6f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,5 +14,5 @@
 }
 
 #cv {
-	display: block;
+	display: none;
 }
\ No newline at end of file