Index: frontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/components/userProfile/ListenerView.tsx	(revision c807e22a23a43e4044ff83aa0fe6a9c8c59a7cb4)
@@ -1,3 +1,3 @@
-import { Album, Bookmark, Heart, ListMusic, Music } from "lucide-react";
+import { Album, Bookmark, Heart, ListMusic, Music, Trash2 } from "lucide-react";
 import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
@@ -7,4 +7,5 @@
 import SongItem from "../SongItem";
 import { useAuth } from "../../context/authContext";
+import { useCreatedPlaylists } from "../../context/playlistContext";
 
 interface ListenerViewProps {
@@ -20,4 +21,5 @@
 }: ListenerViewProps) => {
   const navigate = useNavigate();
+  const { refreshPlaylists } = useCreatedPlaylists();
   const { username: usernameParam } = useParams();
   const { user: currentUser } = useAuth();
@@ -86,4 +88,22 @@
     } catch (err: any) {
       toast.error(err.response?.data?.error || "Failed to save the playlist");
+    }
+  };
+
+  const handleDeletePlaylist = async (
+    e: React.MouseEvent,
+    playlistId: number,
+    playlistName: string,
+  ) => {
+    e.stopPropagation();
+
+    try {
+      await axiosInstance.delete(`/playlists/${playlistId}`);
+      refreshPlaylists(false);
+
+      setCreatedItems((prev) => prev.filter((p) => p.id !== playlistId));
+      toast.success(`Deleted "${playlistName}"`);
+    } catch (err: any) {
+      toast.error(err.response?.data?.error || "Failed to delete playlist");
     }
   };
@@ -142,5 +162,15 @@
                     }}
                   />
-                  {!isOwnProfile &&
+                  {isOwnProfile ? (
+                    <button
+                      onClick={(e) =>
+                        handleDeletePlaylist(e, playlist.id, playlist.name)
+                      }
+                      className="absolute top-2 right-2 p-2 bg-black/70 hover:bg-red-600/90 rounded-full shadow-md transition-all duration-200 opacity-0 group-hover:opacity-100 cursor-pointer"
+                      title="Delete playlist"
+                    >
+                      <Trash2 className="w-5 h-5 text-gray-400 hover:text-white transition-colors" />
+                    </button>
+                  ) : (
                     currentUser?.username != playlist.creatorUsername && (
                       <button
@@ -161,5 +191,6 @@
                         />
                       </button>
-                    )}
+                    )
+                  )}
                 </div>
                 <p className="text-sm font-semibold text-white truncate group-hover:text-[#1db954] transition-colors">
Index: frontend/src/components/userProfile/UserListModal.tsx
===================================================================
--- frontend/src/components/userProfile/UserListModal.tsx	(revision ce45c7a7871379455b3a3c55a48f767ca2e0e739)
+++ frontend/src/components/userProfile/UserListModal.tsx	(revision c807e22a23a43e4044ff83aa0fe6a9c8c59a7cb4)
@@ -2,86 +2,93 @@
 import { baseURL } from "../../api/axiosInstance";
 import type { BaseNonAdminUser } from "../../utils/types";
+import { useEffect } from "react";
 
 interface ModalProps {
-	title: string;
-	users: BaseNonAdminUser[];
-	onClose: () => void;
-	onFollowToggle: (targetUsername: string) => Promise<void>;
+  title: string;
+  users: BaseNonAdminUser[];
+  onClose: () => void;
+  onFollowToggle: (targetUsername: string) => Promise<void>;
 }
 
 const UserListModal = ({
-	title,
-	users,
-	onClose,
-	onFollowToggle,
+  title,
+  users,
+  onClose,
+  onFollowToggle,
 }: ModalProps) => {
-	const navigate = useNavigate();
+  const navigate = useNavigate();
+  useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
 
-	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
-			<div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
-				<div className="p-4 border-b border-white/10 flex justify-between items-center">
-					<h2 className="text-xl font-bold text-white">{title}</h2>
-					<button
-						onClick={onClose}
-						className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
-					>
-						&times;
-					</button>
-				</div>
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="bg-[#1a1a2e] border border-white/10 rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
+        <div className="p-4 border-b border-white/10 flex justify-between items-center">
+          <h2 className="text-xl font-bold text-white">{title}</h2>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white text-2xl cursor-pointer transition-colors"
+          >
+            &times;
+          </button>
+        </div>
 
-				<div className="overflow-y-auto p-4 flex-1">
-					{users.length === 0 ? (
-						<p className="text-center text-gray-500 py-8">No users found.</p>
-					) : (
-						users.map((u) => (
-							<div
-								key={u.username}
-								className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
-							>
-								<div
-									className="flex items-center gap-4 cursor-pointer flex-1"
-									onClick={() => {
-										onClose();
-										navigate(`/users/${u.username}`);
-									}}
-								>
-									<div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
-										{u.profilePhoto ? (
-											<img
-												src={`${baseURL}/${u.profilePhoto}`}
-												className="w-full h-full object-cover"
-												alt=""
-											/>
-										) : (
-											<span className="text-[#1db954] font-bold">
-												{u.fullName.charAt(0)}
-											</span>
-										)}
-									</div>
-									<div>
-										<p className="font-semibold text-white">{u.fullName}</p>
-										<p className="text-sm text-gray-400">@{u.username}</p>
-									</div>
-								</div>
+        <div className="overflow-y-auto p-4 flex-1">
+          {users.length === 0 ? (
+            <p className="text-center text-gray-500 py-8">No users found.</p>
+          ) : (
+            users.map((u) => (
+              <div
+                key={u.username}
+                className="flex items-center justify-between p-3 hover:bg-white/5 rounded-lg transition-colors"
+              >
+                <div
+                  className="flex items-center gap-4 cursor-pointer flex-1"
+                  onClick={() => {
+                    onClose();
+                    navigate(`/users/${u.username}`);
+                  }}
+                >
+                  <div className="w-10 h-10 rounded-full bg-[#282828] overflow-hidden shrink-0 flex items-center justify-center">
+                    {u.profilePhoto ? (
+                      <img
+                        src={`${baseURL}/${u.profilePhoto}`}
+                        className="w-full h-full object-cover"
+                        alt=""
+                      />
+                    ) : (
+                      <span className="text-[#1db954] font-bold">
+                        {u.fullName.charAt(0)}
+                      </span>
+                    )}
+                  </div>
+                  <div>
+                    <p className="font-semibold text-white">{u.fullName}</p>
+                    <p className="text-sm text-gray-400">@{u.username}</p>
+                  </div>
+                </div>
 
-								<button
-									onClick={() => onFollowToggle(u.username)}
-									className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
-										u.isFollowedByCurrentUser
-											? "bg-white/10 text-white hover:bg-white/20"
-											: "bg-[#1db954] text-black hover:bg-[#1ed760]"
-									}`}
-								>
-									{u.isFollowedByCurrentUser ? "Following" : "Follow"}
-								</button>
-							</div>
-						))
-					)}
-				</div>
-			</div>
-			<div className="absolute inset-0 -z-10" onClick={onClose}></div>
-		</div>
-	);
+                <button
+                  onClick={() => onFollowToggle(u.username)}
+                  className={`px-4 py-1.5 text-sm font-medium rounded-full transition-colors cursor-pointer ${
+                    u.isFollowedByCurrentUser
+                      ? "bg-white/10 text-white hover:bg-white/20"
+                      : "bg-[#1db954] text-black hover:bg-[#1ed760]"
+                  }`}
+                >
+                  {u.isFollowedByCurrentUser ? "Following" : "Follow"}
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+      <div className="absolute inset-0 -z-10" onClick={onClose}></div>
+    </div>
+  );
 };