Index: frontend/src/pages/SongDetail.tsx
===================================================================
--- frontend/src/pages/SongDetail.tsx	(revision 7621d7b2606460a77489dea20e584443f4fbdf4c)
+++ frontend/src/pages/SongDetail.tsx	(revision 821dc0e2461b715bec2ffdfd427d0c96cab1e5c1)
@@ -1,3 +1,3 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
@@ -71,4 +71,6 @@
 	const [reviewComment, setReviewComment] = useState("");
 	const [hoverRating, setHoverRating] = useState(0);
+	const [showPlaylistDropdown, setShowPlaylistDropdown] = useState(false);
+	const playlistDropdownRef = useRef<HTMLDivElement>(null);
 	console.log(user);
 	useEffect(() => {
@@ -78,5 +80,4 @@
 				const response = await axiosInstance.get(`/songs/${id}/details`);
 				setSong(response.data);
-				// Don't autoplay - user must click play button
 			} catch (err) {
 				console.error("Error fetching song details:", err);
@@ -88,4 +89,21 @@
 		if (id) fetchSong();
 	}, [id]);
+
+	// handle click outside for playlist dropdown
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				playlistDropdownRef.current &&
+				!playlistDropdownRef.current.contains(event.target as Node)
+			) {
+				setShowPlaylistDropdown(false);
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, []);
 
 	const handleSubmitReview = async () => {
@@ -135,4 +153,16 @@
 			console.error("Error toggling like:", err);
 		}
+	};
+
+	const handleAddToPlaylist = (playlistName: string) => {
+		console.log(`Adding song ${song?.id} to ${playlistName}`);
+		// TODO: actual API call
+		setShowPlaylistDropdown(false);
+	};
+
+	const handleCreateNewPlaylist = () => {
+		console.log(`Creating new playlist for song ${song?.id}`);
+		// TODO: actual playlist creation
+		setShowPlaylistDropdown(false);
 	};
 
@@ -294,37 +324,110 @@
 
 							{user && (
-								<button
-									onClick={toggleLike}
-									className={`flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-semibold transition-colors cursor-pointer ${
-										song.isLikedByCurrentUser
-											? "bg-[#1db954] text-black"
-											: "bg-white/10 text-white hover:bg-white/20"
-									}`}
-								>
-									{song.isLikedByCurrentUser ? (
-										<svg
-											className="w-5 h-5"
-											fill="currentColor"
-											viewBox="0 0 24 24"
+								<>
+									<button
+										onClick={toggleLike}
+										className={`flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold transition-colors cursor-pointer ${
+											song.isLikedByCurrentUser
+												? "bg-[#1db954] text-black"
+												: "bg-white/10 text-white hover:bg-white/20"
+										}`}
+									>
+										{song.isLikedByCurrentUser ? (
+											<svg
+												className="w-5 h-5"
+												fill="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+											</svg>
+										) : (
+											<svg
+												className="w-5 h-5"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+												/>
+											</svg>
+										)}
+										{song.isLikedByCurrentUser ? "Liked" : "Like"}
+									</button>
+
+									{/* Add to Playlist button */}
+									<div className="relative" ref={playlistDropdownRef}>
+										<button
+											onClick={() =>
+												setShowPlaylistDropdown(!showPlaylistDropdown)
+											}
+											className="flex items-center gap-2 px-5 py-3 rounded-full text-sm font-semibold bg-white/10 text-white hover:bg-white/20 transition-colors cursor-pointer"
 										>
-											<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-										</svg>
-									) : (
-										<svg
-											className="w-5 h-5"
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												strokeLinecap="round"
-												strokeLinejoin="round"
-												strokeWidth={2}
-												d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-											/>
-										</svg>
-									)}
-									{song.isLikedByCurrentUser ? "Liked" : "Like"}
-								</button>
+											<svg
+												className="w-5 h-5"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													strokeWidth={2}
+													d="M12 4v16m8-8H4"
+												/>
+											</svg>
+											Add to Playlist
+										</button>
+
+										{/* Playlist dropdown */}
+										{showPlaylistDropdown && (
+											<div className="absolute left-0 top-full mt-2 w-56 bg-[#282828] rounded-lg shadow-2xl py-1 z-50 border border-white/10">
+												<div className="px-3 py-2 text-xs text-gray-400 border-b border-white/10">
+													Add to playlist
+												</div>
+												<button
+													onClick={() => handleAddToPlaylist("Hello")}
+													className="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-white/10 transition-colors"
+												>
+													Hello
+												</button>
+												<button
+													onClick={() => handleAddToPlaylist("Dimi")}
+													className="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-white/10 transition-colors"
+												>
+													Dimi
+												</button>
+												<button
+													onClick={() => handleAddToPlaylist("lmao")}
+													className="w-full text-left px-4 py-2.5 text-sm text-white hover:bg-white/10 transition-colors"
+												>
+													Kako hello world ama ti si mojot world
+												</button>
+												<button
+													onClick={handleCreateNewPlaylist}
+													className="w-full text-left px-4 py-2.5 text-sm text-[#1db954] hover:bg-white/10 transition-colors border-t border-white/10 flex items-center gap-2"
+												>
+													<svg
+														className="w-4 h-4"
+														fill="none"
+														stroke="currentColor"
+														viewBox="0 0 24 24"
+													>
+														<path
+															strokeLinecap="round"
+															strokeLinejoin="round"
+															strokeWidth={2}
+															d="M12 4v16m8-8H4"
+														/>
+													</svg>
+													Create new playlist
+												</button>
+											</div>
+										)}
+									</div>
+								</>
 							)}
 						</div>