Index: frontend/src/pages/LandingPage.tsx
===================================================================
--- frontend/src/pages/LandingPage.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/pages/LandingPage.tsx	(revision b071fb4a2344e233ee12641fe437797ae1bbb736)
@@ -1,3 +1,3 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import axiosInstance from "../api/axiosInstance";
 import AlbumResult from "../components/search/AlbumResult";
@@ -29,4 +29,12 @@
 	const [searchLoading, setSearchLoading] = useState(false);
 	const [hasSearched, setHasSearched] = useState(false);
+
+	// playlist dropdown state
+	const [openPlaylistDropdown, setOpenPlaylistDropdown] = useState<
+		number | null
+	>(null);
+	const playlistDropdownRefs = useRef<{ [key: number]: HTMLDivElement | null }>(
+		{},
+	);
 
 	useEffect(() => {
@@ -43,4 +51,52 @@
 		fetchSongs();
 	}, []);
+
+	// Handle click outside for playlist dropdown
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (openPlaylistDropdown !== null) {
+				const ref = playlistDropdownRefs.current[openPlaylistDropdown];
+				if (ref && !ref.contains(event.target as Node)) {
+					setOpenPlaylistDropdown(null);
+				}
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, [openPlaylistDropdown]);
+
+	const toggleLike = async (songId: number) => {
+		try {
+			await axiosInstance.post(`/musical-entity/${songId}/like`);
+			setSongs((prevSongs) =>
+				prevSongs.map((song) =>
+					song.id === songId
+						? { ...song, isLikedByCurrentUser: !song.isLikedByCurrentUser }
+						: song,
+				),
+			);
+		} catch (error) {
+			console.error("Error toggling like:", error);
+		}
+	};
+
+	const togglePlaylistDropdown = (songId: number) => {
+		setOpenPlaylistDropdown((prev) => (prev === songId ? null : songId));
+	};
+
+	const handleAddToPlaylist = (songId: number, playlistName: string) => {
+		console.log(`Adding song ${songId} to ${playlistName}`);
+		// TODO: Implement actual API call
+		setOpenPlaylistDropdown(null);
+	};
+
+	const handleCreateNewPlaylist = (songId: number) => {
+		console.log(`Creating new playlist for song ${songId}`);
+		// TODO: Implement actual playlist creation
+		setOpenPlaylistDropdown(null);
+	};
 
 	const performSearch = async (query: string, category: SearchCategory) => {
@@ -289,5 +345,5 @@
 													</div>
 												</div>
-												<div className="p-4 flex flex-col items-center">
+												<div className="p-4">
 													<h3 className="text-lg font-semibold mb-2 text-white overflow-hidden text-ellipsis whitespace-nowrap">
 														{song.title}
@@ -299,4 +355,129 @@
 														{song.releasedBy}
 													</p>
+													<div className="flex items-center justify-between mt-4 pt-3 border-t border-white/10">
+														{/* Like button */}
+														<button
+															onClick={(e) => {
+																e.stopPropagation();
+																toggleLike(song.id);
+															}}
+															className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
+															aria-label={
+																song.isLikedByCurrentUser
+																	? "Unlike song"
+																	: "Like song"
+															}
+														>
+															{song.isLikedByCurrentUser ? (
+																<svg
+																	className="w-6 h-6 fill-[#1db954]"
+																	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-6 h-6"
+																	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>
+															)}
+														</button>
+
+														{/* Add to playlist button */}
+														<div
+															className="relative"
+															ref={(el) => {
+																if (el)
+																	playlistDropdownRefs.current[song.id] = el;
+															}}
+														>
+															<button
+																onClick={(e) => {
+																	e.stopPropagation();
+																	togglePlaylistDropdown(song.id);
+																}}
+																className="text-gray-400 hover:text-[#1db954] transition-colors cursor-pointer"
+																aria-label="Add to playlist"
+															>
+																<svg
+																	className="w-6 h-6"
+																	fill="none"
+																	stroke="currentColor"
+																	viewBox="0 0 24 24"
+																>
+																	<path
+																		strokeLinecap="round"
+																		strokeLinejoin="round"
+																		strokeWidth={2}
+																		d="M12 4v16m8-8H4"
+																	/>
+																</svg>
+															</button>
+
+															{/* Playlist dropdown */}
+															{openPlaylistDropdown === song.id && (
+																<div className="absolute right-0 bottom-full mb-2 w-48 bg-gray-700 rounded-lg shadow-lg py-1 z-50">
+																	<div className="px-3 py-2 text-xs text-gray-400 border-b border-white/10">
+																		Add to playlist
+																	</div>
+																	<button
+																		onClick={(e) => {
+																			e.stopPropagation();
+																			handleAddToPlaylist(
+																				song.id,
+																				"Playlist 1",
+																			);
+																		}}
+																		className="w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
+																	>
+																		Playlist 1
+																	</button>
+																	<button
+																		onClick={(e) => {
+																			e.stopPropagation();
+																			handleAddToPlaylist(
+																				song.id,
+																				"Playlist 2",
+																			);
+																		}}
+																		className="w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600 transition-colors"
+																	>
+																		Playlist 2
+																	</button>
+																	<button
+																		onClick={(e) => {
+																			e.stopPropagation();
+																			handleCreateNewPlaylist(song.id);
+																		}}
+																		className="w-full text-left px-4 py-2 text-sm text-[#1db954] hover:bg-gray-600 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>
 												</div>
 											</div>