Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/GlobalExceptionHandler.java	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -37,4 +37,11 @@
         return ResponseEntity
                 .status(HttpStatus.NOT_FOUND)
+                .body(Map.of("error", ex.getMessage()));
+    }
+
+    @ExceptionHandler(NotAuthorizedException.class)
+    public ResponseEntity<Map<String, String>> handleNotAuthorizedAction(NotAuthorizedException ex) {
+        return ResponseEntity
+                .status(HttpStatus.UNAUTHORIZED)
                 .body(Map.of("error", ex.getMessage()));
     }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/PlaylistController.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/PlaylistController.java	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/controller/PlaylistController.java	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -7,4 +7,5 @@
 import com.ukim.finki.develop.finkwave.service.PlaylistService;
 import lombok.AllArgsConstructor;
+import org.springframework.data.repository.query.Param;
 import org.springframework.http.HttpEntity;
 import org.springframework.http.ResponseEntity;
@@ -40,7 +41,11 @@
     }
 
-    @PostMapping()
-    public HttpEntity<List<BasicPlaylistDto>>createPlaylist(@RequestParam String playlistName){
-        playlistService.createPlaylist(playlistName);
+    @PostMapping
+    public ResponseEntity<List<BasicPlaylistDto>> createPlaylist(
+            @RequestParam String playlistName,
+            @RequestParam(required = false) Long songId
+    ) {
+        playlistService.createPlaylist(playlistName,songId);
+
         return ResponseEntity.ok(playlistService.getBasicPlaylists());
     }
@@ -53,3 +58,10 @@
 
 
+    @DeleteMapping("/{id}")
+    public HttpEntity<Void>deletePlaylist(@PathVariable Long id){
+        playlistService.deletePlaylist(id);
+        return ResponseEntity.noContent().build();
+    }
+
+
 }
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/NotAuthorizedException.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/NotAuthorizedException.java	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/exceptions/NotAuthorizedException.java	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -0,0 +1,7 @@
+package com.ukim.finki.develop.finkwave.exceptions;
+
+public class NotAuthorizedException extends RuntimeException {
+    public NotAuthorizedException(String message) {
+        super(message);
+    }
+}
Index: finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java
===================================================================
--- finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ finkwave/src/main/java/com/ukim/finki/develop/finkwave/service/PlaylistService.java	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -1,8 +1,5 @@
 package com.ukim.finki.develop.finkwave.service;
 
-import com.ukim.finki.develop.finkwave.exceptions.MusicalEntityNotFoundException;
-import com.ukim.finki.develop.finkwave.exceptions.PlaylistAlreadyExistsException;
-import com.ukim.finki.develop.finkwave.exceptions.PlaylistNotFoundException;
-import com.ukim.finki.develop.finkwave.exceptions.UserNotFoundException;
+import com.ukim.finki.develop.finkwave.exceptions.*;
 import com.ukim.finki.develop.finkwave.model.*;
 import com.ukim.finki.develop.finkwave.model.dto.BasicPlaylistDto;
@@ -103,15 +100,22 @@
     }
 
-    public void createPlaylist(String playlistName){
+
+    public void createPlaylist(String playlistName, Long songId){
         Long currentUserId=authService.getCurrentUserID();
 
         Optional<Playlist>playlistOptional=playlistRepository.getPlaylistByName(playlistName,currentUserId);
         if (playlistOptional.isPresent()){
-            throw new PlaylistAlreadyExistsException("You already have a playlist named "+playlistName);
+            throw new PlaylistAlreadyExistsException("You already have a playlist named '"+playlistName+"'");
         }
         Listener listener=listenerRepository.findById(currentUserId).orElseThrow(
                 UserNotFoundException::new
         );
-        playlistRepository.save(new Playlist(null,playlistName,listener));
+        Playlist playlist=playlistRepository.save(new Playlist(null,playlistName,listener));
+        if (songId!=null){
+
+            addSongToPlaylist(playlist.getId(),songId);
+        }
+
+
 
     }
@@ -142,4 +146,18 @@
     }
 
+    public void deletePlaylist(Long id){
+        Playlist playlist=playlistRepository.findById(id).orElseThrow(
+                ()->new PlaylistNotFoundException(id)
+        );
+
+        if (!playlist.getCreatedBy().getId().equals(authService.getCurrentUserID())){
+            throw new NotAuthorizedException("CANNOT delete a playlist created by another user!");
+        }
+
+        playlistRepository.deleteById(id);
+
+
+    }
+
 
 
Index: frontend/src/components/Sidebar.tsx
===================================================================
--- frontend/src/components/Sidebar.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/Sidebar.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -273,4 +273,5 @@
         onClose={() => setIsModalOpen(false)}
         onSuccess={() => refreshPlaylists(false)}
+        songId={null}
       />
     </>
Index: frontend/src/components/SongItem.tsx
===================================================================
--- frontend/src/components/SongItem.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/SongItem.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -67,10 +67,4 @@
 
   const isPlaying = currentSong?.id === song.id;
-
-  const handleCreateNewPlaylist = () => {
-    console.log(`Creating new playlist for song ${song.id}`);
-    // TODO: Implement actual playlist creation
-    setPlaylistOpen(false);
-  };
 
   const subtitleParts: string[] = [];
@@ -240,5 +234,4 @@
           usePortal={true}
           direction={dropdownDirection}
-          onCreateNewPlaylist={handleCreateNewPlaylist}
         />
       </div>
Index: frontend/src/components/playlist/CreatePlaylistModal.tsx
===================================================================
--- frontend/src/components/playlist/CreatePlaylistModal.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/playlist/CreatePlaylistModal.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -8,4 +8,5 @@
   onClose,
   onSuccess,
+  songId,
 }: CreatePlaylistModalProps) => {
   const [playlistName, setPlaylistName] = useState("");
@@ -39,9 +40,13 @@
     setIsSubmitting(true);
     try {
-      await axiosInstance.post(
-        `/playlists?playlistName=${encodeURIComponent(playlistName.trim())}`,
-      );
+      await axiosInstance.post("/playlists", null, {
+        params: {
+          playlistName: playlistName.trim(),
+          ...(songId != null && { songId }),
+        },
+      });
+
       toast.success("Playlist created successfully!");
-      onSuccess();
+      await onSuccess();
       handleClose();
     } catch (err: any) {
Index: frontend/src/components/playlist/PlaylistDropdown.tsx
===================================================================
--- frontend/src/components/playlist/PlaylistDropdown.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/playlist/PlaylistDropdown.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -3,4 +3,5 @@
 import axiosInstance from "../../api/axiosInstance";
 import { useCreatedPlaylists } from "../../context/playlistContext";
+import CreatePlaylistModal from "./CreatePlaylistModal";
 
 interface PlaylistDropdownProps {
@@ -13,6 +14,4 @@
 
   direction?: "above" | "below";
-
-  onCreateNewPlaylist?: () => void;
 }
 
@@ -24,5 +23,4 @@
   usePortal = false,
   direction = "above",
-  onCreateNewPlaylist,
 }: PlaylistDropdownProps) => {
   const { createdPlaylists, refreshPlaylists } = useCreatedPlaylists();
@@ -31,7 +29,6 @@
   );
   const [loading, setLoading] = useState(false);
-  const [processingPlaylistId, setProcessingPlaylistId] = useState<
-    number | null
-  >(null);
+  const [processingIds, setProcessingIds] = useState<Set<number>>(new Set());
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -75,7 +72,7 @@
 
   const handleTogglePlaylist = async (playlistId: number, songId: number) => {
-    if (processingPlaylistId !== null) return;
-
-    setProcessingPlaylistId(playlistId);
+    if (processingIds.has(playlistId)) return;
+
+    setProcessingIds((prev) => new Set(prev).add(playlistId));
 
     try {
@@ -104,5 +101,9 @@
       refreshPlaylists(true);
       setTimeout(() => {
-        setProcessingPlaylistId(null);
+        setProcessingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(playlistId);
+          return next;
+        });
       }, 500);
     }
@@ -110,9 +111,11 @@
 
   const handleCreateNew = () => {
-    onCreateNewPlaylist?.();
     onClose();
+    setIsModalOpen(true);
   };
 
-  if (!isOpen) return null;
+  const handleModalSuccess = async () => {
+    await refreshPlaylists(false);
+  };
 
   const inlinePositionClass =
@@ -121,8 +124,8 @@
       : "absolute right-0 bottom-full mb-2";
 
-  const dropdownContent = (
+  const dropdownContent = !isOpen ? null : (
     <div
       ref={dropdownRef}
-      className={`${usePortal ? "fixed" : inlinePositionClass} w-56 bg-[#282828] rounded-lg shadow-2xl py-2 z-[9999] border border-white/10 max-h-60 overflow-y-auto custom-scrollbar`}
+      className={`${usePortal ? "fixed" : inlinePositionClass} w-56 bg-[#282828] rounded-lg shadow-2xl py-2 z-9999 border border-white/10 max-h-60 overflow-y-auto custom-scrollbar`}
       style={
         usePortal && position
@@ -147,5 +150,5 @@
       ) : createdPlaylists && createdPlaylists.length > 0 ? (
         createdPlaylists.map((playlist) => {
-          const isProcessing = processingPlaylistId === playlist.id;
+          const isProcessing = processingIds.has(playlist.id);
           const isChecked = containingPlaylistIds.includes(playlist.id);
 
@@ -153,15 +156,15 @@
             <label
               key={playlist.id}
-              className={`flex items-center px-4 py-2 hover:bg-white/10 transition-colors group/item ${
+              className={`flex items-center gap-1.5 px-4 py-2 hover:bg-white/10 transition-colors group/item ${
                 isProcessing ? "pointer-events-none" : "cursor-pointer"
               }`}
               onClick={(e) => e.stopPropagation()}
             >
-              <div className="relative flex items-center justify-center">
+              <div className="relative flex items-center justify-center  shrink-0">
                 <input
                   type="checkbox"
                   className="peer sr-only"
                   checked={isChecked}
-                  disabled={processingPlaylistId !== null}
+                  disabled={isProcessing}
                   onChange={() => handleTogglePlaylist(playlist.id, songId)}
                 />
@@ -172,5 +175,5 @@
                       : isChecked
                         ? "bg-[#1db954] border-[#1db954]"
-                        : "border-gray-500"
+                        : "border-gray-500 text=wjot"
                   }`}
                 >
@@ -182,9 +185,9 @@
                 </div>
                 <svg
-                  className={`absolute w-3 h-3  transition-opacity ${
+                  className={`absolute w-3 h-3 transition-opacity ${
                     isChecked && !isProcessing ? "opacity-100" : "opacity-0"
                   }`}
                   fill="none"
-                  stroke="currentColor"
+                  stroke="white"
                   strokeWidth="3"
                   viewBox="0 0 24 24"
@@ -198,5 +201,5 @@
               </div>
               <span
-                className={`ml-3 text-sm truncate transition-all ${
+                className={`text-sm truncate transition-all ${
                   isProcessing
                     ? "text-[#1db954] animate-pulse"
@@ -206,9 +209,4 @@
                 {playlist.name}
               </span>
-              {isProcessing && (
-                <span className="ml-auto text-xs text-[#1db954] animate-pulse">
-                  •••
-                </span>
-              )}
             </label>
           );
@@ -245,7 +243,24 @@
   );
 
-  return usePortal
-    ? createPortal(dropdownContent, document.body)
-    : dropdownContent;
+  const dropdown = dropdownContent
+    ? usePortal
+      ? createPortal(dropdownContent, document.body)
+      : dropdownContent
+    : null;
+
+  return (
+    <>
+      {dropdown}
+      {createPortal(
+        <CreatePlaylistModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          onSuccess={handleModalSuccess}
+          songId={songId}
+        />,
+        document.body,
+      )}
+    </>
+  );
 };
 
Index: frontend/src/components/userProfile/ListenerView.tsx
===================================================================
--- frontend/src/components/userProfile/ListenerView.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/userProfile/ListenerView.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -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 c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/components/userProfile/UserListModal.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -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>
+  );
 };
 
Index: frontend/src/pages/LandingPage.tsx
===================================================================
--- frontend/src/pages/LandingPage.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/pages/LandingPage.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -76,10 +76,4 @@
       setOpenPlaylistDropdown(songId);
     }
-  };
-
-  const handleCreateNewPlaylist = (songId: number) => {
-    console.log(`Creating new playlist for song ${songId}`);
-    // TODO: Implement actual playlist creation
-    setOpenPlaylistDropdown(null);
   };
 
@@ -273,5 +267,5 @@
                       key={cat.value}
                       onClick={() => handleCategorySwitch(cat.value)}
-                      className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${
+                      className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors cursor-pointer ${
                         searchCategory === cat.value
                           ? "bg-[#1db954] text-black"
@@ -488,7 +482,4 @@
                                 isOpen={openPlaylistDropdown === song.id}
                                 onClose={() => setOpenPlaylistDropdown(null)}
-                                onCreateNewPlaylist={() =>
-                                  handleCreateNewPlaylist(song.id)
-                                }
                                 direction="above"
                               />
Index: frontend/src/pages/SongDetail.tsx
===================================================================
--- frontend/src/pages/SongDetail.tsx	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/pages/SongDetail.tsx	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -117,10 +117,4 @@
       console.error("Error toggling like:", err);
     }
-  };
-
-  const handleCreateNewPlaylist = () => {
-    console.log(`Creating new playlist for song ${song?.id}`);
-    // TODO: actual playlist creation
-    setShowPlaylistDropdown(false);
   };
 
@@ -343,5 +337,4 @@
                       isOpen={showPlaylistDropdown}
                       onClose={() => setShowPlaylistDropdown(false)}
-                      onCreateNewPlaylist={handleCreateNewPlaylist}
                       direction="below"
                     />
Index: frontend/src/utils/types.ts
===================================================================
--- frontend/src/utils/types.ts	(revision c8baad1d2de1e7f4c5de0ea3d0d35b96eab64495)
+++ frontend/src/utils/types.ts	(revision d1ee039fd24b2a213cd8404c44d174c80c180877)
@@ -74,5 +74,6 @@
   isOpen: boolean;
   onClose: () => void;
-  onSuccess: () => void;
+  onSuccess: () => void | Promise<void>;
+  songId?: number | null;
 }