diff --git a/src/app/components/library/library.php b/src/app/components/library/library.php
index 307ab31cc2df3f209e1dfaefaabcf1fa88475afc..92abd3d5f21eea3b589eb46ca80f79086a1e8c9b 100644
--- a/src/app/components/library/library.php
+++ b/src/app/components/library/library.php
@@ -8,15 +8,13 @@
     <!-- Page-specific CSS -->
     <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/library/library.css">
 
-    <script type="text/javascript" src="<?= BASE_URL ?>/javascript/library/library2.js" defer></script>
-
     <title>Library</title>
 </head>
 <body>
-    <button class="new-playlist-btn" onclick="toggle()">New Playlist</button>
+    <button class="new-playlist-btn">New Playlist</button>
     
-    <main>
-        <div class="playlist-container" id="blur">
+    <main id="blur">
+        <div class="playlist-container">
             <?php include(dirname(__DIR__) . "/library/playlist.php")?>
         </div>
     </main>    
@@ -34,7 +32,4 @@
         </form>
     </div>
 </body>
-
-<script type="text/javascript">
-</script>
 </html>
\ No newline at end of file
diff --git a/src/app/components/library/playlist.php b/src/app/components/library/playlist.php
index 1f5c858f1f45840c9dc70e6e84f835ccc4c7384f..d4d14e9257d147a33df3c09ffa8a85ac6c698a00 100644
--- a/src/app/components/library/playlist.php
+++ b/src/app/components/library/playlist.php
@@ -1,4 +1,5 @@
 <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/library/library.css">
+<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
 
 <?php if (!empty($this->data)): ?>
     <div class="user-playlist">
@@ -10,6 +11,7 @@
                 <div class="info">
                     <div class="sh5"><?=$playlist['title']?> </div>
                 </div>
+                <i class='bx bx-trash' data-id="<?=$playlist["id_playlist"]?>"></i>
             </div>
         <?php endforeach; ?>
     </div>
diff --git a/src/app/components/playlist/playlist.php b/src/app/components/playlist/playlist.php
index a4dd9e9a1ddbb6704d86f52b378d9b9d672a8ff2..944ab65bd4f4d8f88d4fce204e56321b81bfd9ec 100644
--- a/src/app/components/playlist/playlist.php
+++ b/src/app/components/playlist/playlist.php
@@ -12,15 +12,10 @@
     <title>Playlist</title>
 </head>
 <body>
-    <?php include(dirname(__DIR__) . "/common/sidebar.php")?>
-    <?php include(dirname(__DIR__) . "/common/profile.php")?>
-
-    
     <main>
         <div class="playlist-container" data-id="<?=$_GET["playlist_id"]?>">
             <?php include(dirname(__DIR__) . "/playlist/playlist_content.php")?>
         </div>
     </main>
-    <?php include(dirname(__DIR__) . "/common/player.php")?>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/app/controllers/library/delete_library.php b/src/app/controllers/library/delete_library.php
new file mode 100644
index 0000000000000000000000000000000000000000..6e4632e9974a0a25ee89ae443848aa604a30cbec
--- /dev/null
+++ b/src/app/controllers/library/delete_library.php
@@ -0,0 +1,33 @@
+<?php
+
+class DeleteLibraryController
+{
+  public function call()
+  {
+    session_start();
+    
+    if(!isset($_SESSION["user_id"])){
+        header("Location: " . BASE_URL . "/login");
+
+        return;
+    }
+
+    $playlistId = "";
+
+    if(isset($_GET["playlist_id"])){
+        $playlistId = $_GET["playlist_id"];
+    }
+    
+    $model = new PlaylistModel();
+
+    try{
+        $model->deletePlaylist($playlistId);
+        http_response_code(201);
+        exit;
+    }catch(PDOException $e){
+        http_response_code(200);
+        echo($e->getMessage());
+        exit;
+    }
+  }
+}
diff --git a/src/app/controllers/playlist/post_playlist.php b/src/app/controllers/playlist/delete_playlist.php
similarity index 73%
rename from src/app/controllers/playlist/post_playlist.php
rename to src/app/controllers/playlist/delete_playlist.php
index fada90eac7ea0b386395aaa40ca9bbb6518341bb..04641e18547a7e49a9aaa8091e39037f91287213 100644
--- a/src/app/controllers/playlist/post_playlist.php
+++ b/src/app/controllers/playlist/delete_playlist.php
@@ -1,6 +1,6 @@
 <?php
 
-class PostPlaylistController
+class DeletePlaylistController
 {
   public function call()
   {
@@ -15,9 +15,9 @@ class PostPlaylistController
     $idPodcast = "";
     $idPlaylist = "";
 
-    if(isset($_POST["id_playlist"]) && isset($_POST["id_podcast"])){
-        $idPlaylist = $_POST["id_playlist"];
-        $idPodcast = $_POST["id_podcast"];
+    if(isset($_GET["playlist_id"]) && isset($_GET["podcast_id"])){
+        $idPlaylist = $_GET["playlist_id"];
+        $idPodcast = $_GET["podcast_id"];
     }
 
     $model = new PlaylistModel();
diff --git a/src/app/core/app.php b/src/app/core/app.php
index 72ddb53ecfd2ceb5af10dffc6c0145098b628e38..495ea473496121481dff2ecb12f40a8f0a3007de 100644
--- a/src/app/core/app.php
+++ b/src/app/core/app.php
@@ -58,8 +58,8 @@ class App
     $router->get("public/signup", new GetSignupController());
     $router->post("public/signup", new PostSignupController());
     $router->post("public/library", new PostLibraryController());
-    $router->get("public/playlist", new GetPlaylistController());
-    $router->post("public/playlist", new PostPlaylistController());
+    $router->delete("public/library", new DeleteLibraryController());
+    $router->delete("public/playlist", new DeletePlaylistController());
 
     $router->directRequest($url);
   }
diff --git a/src/app/init.php b/src/app/init.php
index 2022d21e6e3e26afa8dc5c730e45b11222eebf98..131eca5c7e8470d5649953a1e018048316ec8b91 100644
--- a/src/app/init.php
+++ b/src/app/init.php
@@ -34,9 +34,10 @@ require_once __DIR__ . "/controllers/login/post_login.php";
 
 require_once __DIR__ . "/controllers/library/get_library.php";
 require_once __DIR__ . "/controllers/playlist/get_playlist.php";
-require_once __DIR__ . "/controllers/playlist/post_playlist.php";
+require_once __DIR__ . "/controllers/playlist/delete_playlist.php";
 require_once __DIR__ . "/controllers/library/get_library.php";
 require_once __DIR__ . "/controllers/library/post_library.php";
+require_once __DIR__ . "/controllers/library/delete_library.php";
 require_once __DIR__ . "/controllers/signup/get_signup.php";
 require_once __DIR__ . "/controllers/signup/post_signup.php";
 require_once __DIR__ . "/controllers/search/get_search.php";
diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js
index ac4d4093e4cea57b5d262ee7be35c69f3744d76f..0dd9d16448d610028e0f736c5195c685d986ce2b 100644
--- a/src/public/javascript/app/app.js
+++ b/src/public/javascript/app/app.js
@@ -1,4 +1,6 @@
 import { handleDashboard } from "../dashboard/layout.mjs";
+import { handlePlaylist } from "../library/library.mjs";
+import { handleLibrary } from "../library/library2.mjs";
 
 const mainSection = document.querySelector("#main-section");
 const sidebar = document.querySelector(".sidebar");
@@ -29,6 +31,10 @@ const getPage = (page, queryParam) => {
       // handleSearch();
       if (window.location.href.includes("dashboard")) {
         handleDashboard();
+      } else if(window.location.href.includes("library")){
+        handleLibrary();
+      } else if(window.location.href.includes("playlist")){
+        handlePlaylist();
       }
     }
   };
diff --git a/src/public/javascript/library/library.js b/src/public/javascript/library/library.mjs
similarity index 69%
rename from src/public/javascript/library/library.js
rename to src/public/javascript/library/library.mjs
index 906458bd1d23dfa46bbfd6d7981687e7e3ae8074..f8e21b0f8ae1975c8def29395a584f7641b8a605 100644
--- a/src/public/javascript/library/library.js
+++ b/src/public/javascript/library/library.mjs
@@ -1,9 +1,6 @@
-"use strict"
-
 import { showErrorToast, showSuccessToast } from "../toast.mjs";
 
-
-document.addEventListener("DOMContentLoaded", (e) =>{
+export function handlePlaylist(){
 
     const trashEl = document.querySelectorAll('.bx-trash');
     const playlistContainer = document.querySelector('.playlist-container')
@@ -12,20 +9,17 @@ document.addEventListener("DOMContentLoaded", (e) =>{
         trashEl.forEach(function(trash){
         trash.addEventListener("click", (e) => {
             e.preventDefault();
-            
-            const data = new FormData();
-    
-            const xhr = new XMLHttpRequest();
 
-            data.append("id_podcast", trash.dataset.id);
-            data.append("id_playlist", playlistContainer.dataset.id);
+            const podcastId = trash.dataset.id;
+            const playlistId = playlistContainer.dataset.id;
         
-            xhr.open("POST", "/public/playlist", true);
+            xhr.open("DELETE", `/public/playlist?podcast_id=${podcastId}&playlist_id=${playlistId}`, true);
     
             xhr.onload = function () {
             if (xhr.readyState === XMLHttpRequest.DONE) {
                 if (xhr.status === 201) {
                     showSuccessToast("Podcast berhasil dihapus dari playlist!");
+                    
                 }else{ // status code 200, some error
                     showErrorToast("Podcast gagal dihapus dari playlist!");
                 }
@@ -35,4 +29,4 @@ document.addEventListener("DOMContentLoaded", (e) =>{
         })
         })
     }
-});
\ No newline at end of file
+}
diff --git a/src/public/javascript/library/library2.js b/src/public/javascript/library/library2.js
deleted file mode 100644
index c542a2a6ff5367d37c6b1a6c83a306e65717c185..0000000000000000000000000000000000000000
--- a/src/public/javascript/library/library2.js
+++ /dev/null
@@ -1,108 +0,0 @@
-"use strict";
-
-function toggle(){
-    const blur = document.getElementById("blur");
-    const popup = document.getElementById("popup");
-    blur.classList.toggle('active');
-    popup.classList.toggle('active');
-}
-
-document.addEventListener("DOMContentLoaded", function () {
-
-    const blurEl = document.getElementById("blur");
-    const main = document.querySelector("main");
-    const playlistTitleInput = document.getElementById("playlist-title");
-    const playlistTitleAlert = document.getElementById("playlist-title-alert");
-    const addPlaylistForm = document.getElementById("add-playlist-form");
-    const deletePlaylistEl = document.querySelectorAll(".bx-trash");
-
-    let playlistTitleValid = false;
-
-    main.addEventListener("click", (e) => {
-
-        if(blurEl.classList.contains("active")){
-            e.preventDefault();
-            toggle();
-        }
-    });
-
-    playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => {
-        const playlistTitle = playlistTitleInput.value;
-
-
-        if(playlistTitle.length > 50){
-            playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter";
-            playlistTitleAlert.className = "alert-show";
-            playlistTitleValid = false;
-        }else{
-            playlistTitleAlert.innerText = "";
-            playlistTitleAlert.className = "alert-hide";
-            playlistTitleValid = true;
-        }
-    })
-    
-
-    addPlaylistForm.addEventListener("submit", (e) => {
-        e.preventDefault();
-        console.log("testing");
-
-        if(playlistTitleValid){
-
-            const playlistTitle = playlistTitleInput.value;
-    
-            const data = new FormData();
-            data.append("playlistTitle", playlistTitle);
-    
-            const xhr = new XMLHttpRequest();
-    
-            xhr.open("POST", "/public/library", true);
-    
-            xhr.onload = function () {
-                if (xhr.readyState === XMLHttpRequest.DONE) {
-                    if (xhr.status === 201) {
-                        toggle();
-                        location.reload();
-                    }else{ //status code 200
-                        toggle();
-                        alert("Ada yang aneh");
-                    }
-                }
-            }
-            xhr.send(data);
-
-        }
-    })
-
-    if(deletePlaylistEl.length !== 0){
-        deletePlaylistEl.forEach(function(trash){
-            trash.addEventListener("click", (e) => {
-                e.preventDefault();
-                const idPlaylist = trash.dataset.id;
-
-                const xhr = new XMLHttpRequest();
-
-                xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true);
-
-                xhr.send(null);
-
-                xhr.onload = function () {
-                    if (xhr.readyState === XMLHttpRequest.DONE) {
-                        if (xhr.status === 201) {
-                            // showSuccessToast("Playlist berhasil dihapus dari library!");
-                            setTimeout(function(){
-                                location.reload();
-                            }, 500);
-                        }else{ //status code 200
-                            // showErrorToast("Playlist gagal dihapus dari library!");
-                            console.log("ahai");
-                        }
-                    }
-                }
-            })
-        })
-    }
-
-
-
-  });
-
diff --git a/src/public/javascript/library/library2.mjs b/src/public/javascript/library/library2.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..81d6228a3f12742993552d227b4707e5d8ecb583
--- /dev/null
+++ b/src/public/javascript/library/library2.mjs
@@ -0,0 +1,218 @@
+"use strict";
+
+import { showErrorToast, showSuccessToast } from "../toast.mjs";
+
+export function handleLibrary() {
+        
+        const blur = document.getElementById("blur");
+        const popup = document.getElementById("popup");
+        const main = document.querySelector("main");
+        const playlistTitleInput = document.getElementById("playlist-title");
+        const playlistTitleAlert = document.getElementById("playlist-title-alert");
+        const addPlaylistForm = document.getElementById("add-playlist-form");
+        const deletePlaylistEl = document.querySelectorAll(".bx-trash");
+        const addPlaylistButton = document.querySelector(".new-playlist-btn");
+        
+        function toggle(){
+            blur.classList.toggle('active');    
+            popup.classList.toggle('active');
+        }
+
+        let playlistTitleValid = false;
+
+        blur.addEventListener("click", (e) => {
+            if(blur.classList.contains("active")){
+                e.preventDefault();
+                toggle();
+            }
+        });
+
+        addPlaylistButton.addEventListener("click", function(e){
+            toggle();
+        })
+
+        playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => {
+            const playlistTitle = playlistTitleInput.value;
+
+
+            if(playlistTitle.length > 50){
+                playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter";
+                playlistTitleAlert.className = "alert-show";
+                playlistTitleValid = false;
+            }else{
+                playlistTitleAlert.innerText = "";
+                playlistTitleAlert.className = "alert-hide";
+                playlistTitleValid = true;
+            }
+        })
+
+        addPlaylistForm.addEventListener("submit", (e) => {
+            e.preventDefault();
+
+            if(playlistTitleValid){
+
+                const playlistTitle = playlistTitleInput.value;
+        
+                const data = new FormData();
+                data.append("playlistTitle", playlistTitle);
+        
+                const xhr = new XMLHttpRequest();
+        
+                xhr.open("POST", "/public/library", true);
+        
+                xhr.onload = function () {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        if (xhr.status === 201) {
+                            toggle();
+                            showSuccessToast("Playlist berhasil dibuat!");
+                            setTimeout(function(){
+                                location.reload();
+                            }, 500);
+                        }else{ //status code 200
+                            toggle();
+                            showErrorToast("Terjadi kesalahan! Playlist gagal dibuat");
+                        }
+                    }
+                }
+                xhr.send(data);
+
+            }
+        })
+
+        if(deletePlaylistEl.length !== 0){
+            deletePlaylistEl.forEach(function(trash){
+                trash.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    const idPlaylist = trash.dataset.id;
+
+                    const xhr = new XMLHttpRequest();
+
+                    xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true);
+
+                    xhr.send(null);
+
+                    xhr.onload = function () {
+                        if (xhr.readyState === XMLHttpRequest.DONE) {
+                            if (xhr.status === 201) {
+                                showSuccessToast("Playlist berhasil dihapus dari library!");
+                                setTimeout(function(){
+                                    location.reload();
+                                }, 500);
+                            }else{ //status code 200
+                                showErrorToast("Playlist gagal dihapus dari library!");
+                                console.log("ahai");
+                            }
+                        }
+                    }
+                })
+            })
+        }
+
+}
+
+// function toggle(){
+//     const blur = document.getElementById("blur");
+//     const popup = document.getElementById("popup");
+//     blur.classList.toggle('active');
+//     popup.classList.toggle('active');
+// }
+
+// document.addEventListener("DOMContentLoaded", function () {
+
+//     const blurEl = document.getElementById("blur");
+//     const main = document.querySelector("main");
+//     const playlistTitleInput = document.getElementById("playlist-title");
+//     const playlistTitleAlert = document.getElementById("playlist-title-alert");
+//     const addPlaylistForm = document.getElementById("add-playlist-form");
+//     const deletePlaylistEl = document.querySelectorAll(".bx-trash");
+
+//     let playlistTitleValid = false;
+
+//     main.addEventListener("click", (e) => {
+
+//         if(blurEl.classList.contains("active")){
+//             e.preventDefault();
+//             toggle();
+//         }
+//     });
+
+//     playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => {
+//         const playlistTitle = playlistTitleInput.value;
+
+
+//         if(playlistTitle.length > 50){
+//             playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter";
+//             playlistTitleAlert.className = "alert-show";
+//             playlistTitleValid = false;
+//         }else{
+//             playlistTitleAlert.innerText = "";
+//             playlistTitleAlert.className = "alert-hide";
+//             playlistTitleValid = true;
+//         }
+//     })
+    
+
+//     addPlaylistForm.addEventListener("submit", (e) => {
+//         e.preventDefault();
+//         console.log("testing");
+
+//         if(playlistTitleValid){
+
+//             const playlistTitle = playlistTitleInput.value;
+    
+//             const data = new FormData();
+//             data.append("playlistTitle", playlistTitle);
+    
+//             const xhr = new XMLHttpRequest();
+    
+//             xhr.open("POST", "/public/library", true);
+    
+//             xhr.onload = function () {
+//                 if (xhr.readyState === XMLHttpRequest.DONE) {
+//                     if (xhr.status === 201) {
+//                         toggle();
+//                         location.reload();
+//                     }else{ //status code 200
+//                         toggle();
+//                         alert("Ada yang aneh");
+//                     }
+//                 }
+//             }
+//             xhr.send(data);
+
+//         }
+//     })
+
+//     if(deletePlaylistEl.length !== 0){
+//         deletePlaylistEl.forEach(function(trash){
+//             trash.addEventListener("click", (e) => {
+//                 e.preventDefault();
+//                 const idPlaylist = trash.dataset.id;
+
+//                 const xhr = new XMLHttpRequest();
+
+//                 xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true);
+
+//                 xhr.send(null);
+
+//                 xhr.onload = function () {
+//                     if (xhr.readyState === XMLHttpRequest.DONE) {
+//                         if (xhr.status === 201) {
+//                             // showSuccessToast("Playlist berhasil dihapus dari library!");
+//                             setTimeout(function(){
+//                                 location.reload();
+//                             }, 500);
+//                         }else{ //status code 200
+//                             // showErrorToast("Playlist gagal dihapus dari library!");
+//                             console.log("ahai");
+//                         }
+//                     }
+//                 }
+//             })
+//         })
+//     }
+
+
+
+//   });
+
diff --git a/src/public/styles/library/library.css b/src/public/styles/library/library.css
index ef37d80b8dd43b0978a40c768f47cceeb339d121..29dd4b9d60c3ef481d5a014a4f20603bf7bb312d 100644
--- a/src/public/styles/library/library.css
+++ b/src/public/styles/library/library.css
@@ -138,11 +138,11 @@ navbar {
 .bx-trash{
     display: flex;
     align-self: center;
-    color:  red;
+    color:  var(--GRAY-500);
     font-size: 20px;
-    margin-top: -15px;
+    margin-top: -10px;
     cursor: pointer;
-    border: 0.5px solid red;
+    border: 0.5px solid var(--GRAY-500);
     padding: 2px;
     border-radius: 5px;
 }
@@ -188,7 +188,7 @@ navbar {
 }
 
 #blur.active{
-    filter: blur(20px);
+    filter: blur(5px);
     pointer-events: none;
     user-select: none;
 }
\ No newline at end of file