diff --git a/src/components/delete-dialog-album.tsx b/src/components/delete-dialog-album.tsx
index 4d76c1c1d987258ce4aabf3de867041649e6aa2e..34d256ff918d734b1724fc0cf9edd168c5db9835 100644
--- a/src/components/delete-dialog-album.tsx
+++ b/src/components/delete-dialog-album.tsx
@@ -1,51 +1,52 @@
-import { useState } from 'react';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "./ui/dropdown-menu";
-import { Button } from "./ui/button";
-import { useNavigate } from 'react-router-dom';
-
-export function AlbumDropdown() {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  console.log(dropdownOpen);
-
-  const toggleDropdown = () => {
-    setDropdownOpen(prevState => !prevState);
-  };
+import axios from 'axios';
+import { useNavigate, useParams } from 'react-router-dom';
 
+const DeleteAlbumDialog = () => {
+  const { albumId } = useParams();
   const navigate = useNavigate();
-
-  const handleEditAlbum = () => {
-    console.log('Edit Album');
-    setDropdownOpen(false);
-    navigate('/1/edit-album');
-  }
-
   const handleDeleteAlbum = () => {
-    console.log('Delete Album');
-    setDropdownOpen(false);
-    navigate('/1/delete-album');
+    try {
+      axios.delete(`http://localhost:3000/api/premium-album/${albumId}`);
+    } catch (error) {
+      console.error('Error deleting album:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate(-1);
   };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" onClick={toggleDropdown} className='bg-zinc-800 border-none text-white rounded h-3 pb-5'>
-          ...
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-40 text-white bg-black border-grey-200" style={{ position: 'absolute', right: -20 }}>
-        <DropdownMenuItem onClick={handleEditAlbum} className='hover:bg-zinc-800'>
-          Edit Album
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={handleDeleteAlbum}>
-          Delete Album
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      {(
+        <div className="fixed inset-0 overflow-y-auto z-50">
+          <div className="flex items-center justify-center min-h-screen">
+            <div className="fixed inset-0 transition-opacity">
+              <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
+            </div>
+            <div className="bg-white rounded p-8 z-10">
+              <div className="mb-4 text-lg font-semibold">Delete Album Confirmation</div>
+              <div className="mb-4">Are you sure you want to delete this Album?</div>
+              <div className="flex justify-end">
+                <button
+                  onClick={handleCancel}
+                  className="px-4 py-2 mr-2 bg-gray-300 hover:bg-gray-400 rounded"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDeleteAlbum}
+                  className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
-}
+};
+
+export default DeleteAlbumDialog;
diff --git a/src/components/delete-dialog-song.tsx b/src/components/delete-dialog-song.tsx
index cea7360c658a04bdacebbbd59194a1050e912a7f..391c71edbdacf9900ae805716ceff99fc4a914d7 100644
--- a/src/components/delete-dialog-song.tsx
+++ b/src/components/delete-dialog-song.tsx
@@ -1,6 +1,21 @@
-import React from 'react';
+import axios from 'axios';
+import { useNavigate, useParams } from 'react-router';
+
+const DeleteSongDialog = () => {
+  const { albumId, songId } = useParams();
+  const navigate = useNavigate();
+  const handleDeleteSong = () => {
+    try {
+      axios.delete(`http://localhost:3000/api/premium-album/${albumId}/${songId}`);
+    } catch (error) {
+      console.error('Error deleting song:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    navigate(-1);
+  };
 
-const DeleteSongDialog: React.FC = () => {
   return (
     <>
       {(
@@ -14,14 +29,16 @@ const DeleteSongDialog: React.FC = () => {
               <div className="mb-4">Are you sure you want to delete this Song?</div>
               <div className="flex justify-end">
                 <button
+                  onClick={handleCancel}
                   className="px-4 py-2 mr-2 bg-gray-300 hover:bg-gray-400 rounded"
                 >
-                  Batal
+                  Cancel
                 </button>
                 <button
+                  onClick={handleDeleteSong}
                   className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded"
                 >
-                  Hapus
+                  Delete
                 </button>
               </div>
             </div>
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 7926148b90943992e6cfe14dcc8ebec7d6a5ae7a..46a6e9829c1e023e5907469d584e77e46c64fec6 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -9,6 +9,8 @@ import AddSongPage from "@/pages/AddSongPage.tsx";
 import EditSongPage from "@/pages/EditSongPage.tsx";
 import {NotMatchLayout} from "@/layouts/NotMatchLayout.tsx";
 import NotMatch from "@/pages/NotMatch.tsx";
+import DeleteAlbumDialog from "@/components/delete-dialog-album";
+import DeleteSongDialog from "@/components/delete-dialog-song";
 
 export const routes = [
   {
@@ -48,6 +50,12 @@ export const routes = [
             title: 'Edit Album page',
             component: EditAlbumPage,
             path: "/:albumId/edit-album",
+          },
+          {
+            name: 'delete-album',
+            title: 'Delete Album page',
+            component: DeleteAlbumDialog,
+            path: "/:albumId/delete-album/",
           }
         ]
       },
@@ -73,6 +81,12 @@ export const routes = [
             title: 'Edit Song page',
             component: EditSongPage,
             path: "/:albumId/edit-song/:songId",
+          },
+          {
+            name: 'delete-song',
+            title: 'Delete Song page',
+            component: DeleteSongDialog,
+            path: "/:albumId/delete-song/:songId",
           }
         ]
       }