diff --git a/web/myimages.html b/web/myimages.html
index 59cdb93..bd80f6c 100644
--- a/web/myimages.html
+++ b/web/myimages.html
@@ -1,28 +1,39 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>My Images</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="css/style.css" rel="stylesheet">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="css/style.css" rel="stylesheet" />
   </head>
   <body>
-    <div id='images' style='display: none'></div>
-    <button id='showImages-button' onclick="getImages()">Get Images</button>
+    <div id="images" style="display: none"></div>
+    <button id="showImages-button" onclick="getImages()">Get Images</button>
   </body>
   <script defer>
     async function getImages(user) {
       // get current username
       let username = JSON.parse(await (await fetch("/account")).text()).username;
       // get images for username
-      let images = JSON.parse(await (await fetch(`/images/by-user/${username}`)).text())
+      let images = JSON.parse(await (await fetch(`/images/by-user/${username}`)).text());
       let imagestrings = [];
-      for(const img of images) {
-        imagestrings.push(`${img}<br><img src="/images/${img}.png" alt="${img}" style="max-width: 100%">`)
+      for (const img of images) {
+        imagestrings.push(
+          `<div id='img-${img}'>ID: ${img} <button id='delimg' onclick="deleteImage('${img}')">Delete</button><br><img src="/images/${img}.png" alt="${img}" style="max-width: 100%"></div>`,
+        );
       }
 
-      document.getElementById('images').innerHTML = imagestrings.join('<br><br>');
-      document.getElementById('images').style.display = '';
+      document.getElementById("images").innerHTML = imagestrings.join("<br><br>");
+      document.getElementById("images").style.display = "";
+      document.getElementById("showImages-button").style.display = "none";
+    }
+
+    async function deleteImage(uuid) {
+      // delete the image
+      alert(await (await fetch(`/images/${uuid}`, { method: "DELETE" })).text());
+
+      // remove the image from html
+      document.getElementById(`img-${uuid}`).remove();
     }
   </script>
 </html>
