diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index dfbd87d..4ce84bc 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -3,7 +3,7 @@
 import { FormEvent, MouseEvent, useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Album } from '@/entities/album.entity';
-import { createAlbum, getAlbum, getAlbums, updateAlbum } from '@/app/actions';
+import { createAlbum, deleteAlbum, getAlbum, getAlbums, updateAlbum } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { IconButton } from '@mui/material';
@@ -19,6 +19,7 @@ export default function Page() {
   const [formAlbumArtist, setFormAlbumArtist] = useState("");
   const [formAlbumGenre, setFormAlbumGenre] = useState("");
   const [formModalTitle, setFormModalTitle] = useState("Add Album");
+  const [formModalButtonLabel, setFormModalButtonLabel] = useState("Add");
 
   useEffect(() => {
     async function fetchAlbums() {
@@ -38,7 +39,8 @@ export default function Page() {
 
     const formData = new FormData(event.currentTarget);
     try {
-      if (!formData.get('id')) {
+      console.log(formData);
+      if (formData.get('id') === "") {
         const data = await createAlbum(formData);
         console.log(data);
       } else {
@@ -52,6 +54,7 @@ export default function Page() {
 
   const handleCreate = async () => {
     setFormModalTitle("Add Album");
+    setFormModalButtonLabel("Add");
     setFormAlbumId("");
     setFormAlbumTitle("");
     setFormAlbumArtist("");
@@ -65,6 +68,7 @@ export default function Page() {
       try {
         const data = await getAlbum(parseInt(id));
         setFormModalTitle("Edit Album");
+        setFormModalButtonLabel("Save");
         setFormAlbumId(data.id)
         setFormAlbumTitle(data.title);
         setFormAlbumArtist(data.artist);
@@ -78,6 +82,19 @@ export default function Page() {
     }
   }
 
+  const handleDelete = async (event: MouseEvent<HTMLElement>) => {
+    const id = event.currentTarget.getAttribute('album-id');
+    if (id) {
+      try {
+        await deleteAlbum(parseInt(id));
+      } catch (error) {
+        console.error(`Error deleting album with ID ${id}:`, error);
+      }
+    } else {
+      console.error("Couldn't get ID of clicked element");
+    }
+  }
+
   if (!albums) return <div>Loading...</div>
 
   return (
@@ -115,7 +132,7 @@ export default function Page() {
               <IconButton aria-label="Edit Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
                 <Edit fontSize="inherit" color="success"/>
               </IconButton>
-              <IconButton aria-label="Delete Album" size="small" album-id={album.id.toString()} onClick={handleEdit}>
+              <IconButton aria-label="Delete Album" size="small" album-id={album.id.toString()} onClick={handleDelete}>
                 <Delete fontSize="inherit" color="success"/>
               </IconButton>
             </td>
@@ -123,7 +140,6 @@ export default function Page() {
         ))}
         </tbody>
       </table>
-
     </div>
 
     <Modal
@@ -152,7 +168,7 @@ export default function Page() {
                 <label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" defaultValue={formAlbumGenre} />
               </div>
             </div>
-            <Button variant="primary" type="submit">Create</Button>
+            <Button variant="primary" type="submit">{formModalButtonLabel}</Button>
           </form>
         </div>
       </Modal.Body>