Index: frontend/src/pages/LandingPage.tsx
===================================================================
--- frontend/src/pages/LandingPage.tsx	(revision 8a47b30f7be0c80847e0bb6d30060d214d1bd85d)
+++ frontend/src/pages/LandingPage.tsx	(revision 9c1dcc7b95652b9decd6d6486aab9980c3315511)
@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import axiosInstance from "../api/axiosInstance";
 import AlbumResult from "../components/search/AlbumResult";
 import SongResult from "../components/search/SongResult";
 import UserResult from "../components/search/UserResult";
+import { usePlayer } from "../context/playerContext";
 import type {
 	Album,
@@ -11,4 +13,24 @@
 } from "../utils/types";
 
+// Convert a regular YouTube URL to an embeddable URL
+const toEmbedUrl = (url: string): string => {
+	try {
+		const parsed = new URL(url);
+		if (
+			(parsed.hostname === "www.youtube.com" ||
+				parsed.hostname === "youtube.com") &&
+			parsed.searchParams.has("v")
+		) {
+			return `https://www.youtube.com/embed/${parsed.searchParams.get("v")}`;
+		}
+		if (parsed.hostname === "youtu.be") {
+			return `https://www.youtube.com/embed${parsed.pathname}`;
+		}
+		return url;
+	} catch {
+		return url;
+	}
+};
+
 const CATEGORIES: { value: SearchCategory; label: string }[] = [
 	{ value: "songs", label: "Songs" },
@@ -19,4 +41,6 @@
 
 const LandingPage = () => {
+	const navigate = useNavigate();
+	const { play, currentSong } = usePlayer();
 	const [songs, setSongs] = useState<Song[]>([]);
 	const [loading, setLoading] = useState<boolean>(true);
@@ -327,4 +351,5 @@
 											<div
 												key={song.id}
+												onClick={() => navigate(`/songs/${song.id}`)}
 												className="bg-[#282828] rounded-xl overflow-hidden cursor-pointer shadow-lg transition-all duration-300 ease-in-out hover:-translate-y-2 hover:shadow-2xl group"
 											>
@@ -340,7 +365,50 @@
 													/>
 													<div className="absolute top-0 left-0 w-full h-full bg-black/60 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-														<div className="w-15 h-15 rounded-full bg-[#1db954] flex items-center justify-center text-2xl text-black shadow-[0_4px_12px_rgba(29,185,84,0.5)]">
-															▶
-														</div>
+														{song.link ? (
+															<button
+																onClick={(e) => {
+																	e.stopPropagation();
+																	play({
+																		id: song.id,
+																		title: song.title,
+																		artist: song.releasedBy,
+																		cover: song.cover,
+																		embedUrl: toEmbedUrl(song.link!),
+																	});
+																}}
+																className={`w-14 h-14 rounded-full flex items-center justify-center text-xl shadow-[0_4px_12px_rgba(29,185,84,0.5)] transition-all cursor-pointer ${
+																	currentSong?.id === song.id
+																		? "bg-white text-[#1db954]"
+																		: "bg-[#1db954] text-black hover:scale-105"
+																}`}
+																aria-label={
+																	currentSong?.id === song.id
+																		? "Now playing"
+																		: "Play song"
+																}
+															>
+																{currentSong?.id === song.id ? (
+																	<svg
+																		className="w-6 h-6"
+																		fill="currentColor"
+																		viewBox="0 0 24 24"
+																	>
+																		<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+																	</svg>
+																) : (
+																	<svg
+																		className="w-6 h-6"
+																		fill="currentColor"
+																		viewBox="0 0 24 24"
+																	>
+																		<path d="M8 5v14l11-7z" />
+																	</svg>
+																)}
+															</button>
+														) : (
+															<div className="w-14 h-14 rounded-full bg-[#1db954] flex items-center justify-center text-xl text-black shadow-[0_4px_12px_rgba(29,185,84,0.5)]">
+																▶
+															</div>
+														)}
 													</div>
 												</div>
Index: frontend/src/pages/SongDetail.tsx
===================================================================
--- frontend/src/pages/SongDetail.tsx	(revision 8a47b30f7be0c80847e0bb6d30060d214d1bd85d)
+++ frontend/src/pages/SongDetail.tsx	(revision 9c1dcc7b95652b9decd6d6486aab9980c3315511)
@@ -3,4 +3,5 @@
 import axiosInstance from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
+import { usePlayer } from "../context/playerContext";
 import type { SongDetail as SongDetailType } from "../utils/types";
 
@@ -62,4 +63,5 @@
 	const { id } = useParams<{ id: string }>();
 	const { user } = useAuth();
+	const { play, currentSong } = usePlayer();
 	const [song, setSong] = useState<SongDetailType | null>(null);
 	const [loading, setLoading] = useState(true);
@@ -72,4 +74,5 @@
 				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);
@@ -207,6 +210,49 @@
 
 						{/* Action buttons */}
-						{/* todo: add add to playlist button */}
 						<div className="flex items-center gap-3 mt-4">
+							{/* Play button */}
+							{song.link && (
+								<button
+									onClick={() =>
+										play({
+											id: song.id,
+											title: song.title,
+											artist: song.releasedBy,
+											cover: song.cover,
+											embedUrl: toEmbedUrl(song.link!),
+										})
+									}
+									className={`flex items-center gap-2 px-6 py-3 rounded-full text-sm font-semibold transition-all cursor-pointer ${
+										currentSong?.id === song.id
+											? "bg-white text-[#1db954]"
+											: "bg-[#1db954] text-black hover:bg-[#1ed760] hover:scale-105"
+									}`}
+								>
+									{currentSong?.id === song.id ? (
+										<>
+											<svg
+												className="w-5 h-5"
+												fill="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+											</svg>
+											Now Playing
+										</>
+									) : (
+										<>
+											<svg
+												className="w-5 h-5"
+												fill="currentColor"
+												viewBox="0 0 24 24"
+											>
+												<path d="M8 5v14l11-7z" />
+											</svg>
+											Play Song
+										</>
+									)}
+								</button>
+							)}
+
 							{user && (
 								<button
@@ -248,16 +294,47 @@
 				</div>
 
-				{/* YouTube embed */}
+				{/* Play button — plays in persistent mini-player */}
 				{song.link && (
 					<section className="mb-10">
-						<div className="rounded-xl overflow-hidden shadow-lg aspect-video bg-black">
-							<iframe
-								src={toEmbedUrl(song.link)}
-								title={song.title}
-								className="w-full h-full"
-								allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-								allowFullScreen
-							/>
-						</div>
+						{currentSong?.id === song.id ? (
+							<div className="bg-[#1a1a2e]/60 rounded-xl p-4 flex items-center gap-3">
+								<div className="w-10 h-10 rounded-full bg-[#1db954] flex items-center justify-center text-black animate-pulse">
+									<svg
+										className="w-5 h-5"
+										fill="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+									</svg>
+								</div>
+								<p className="text-[#1db954] font-medium">
+									Now playing in mini-player below
+								</p>
+							</div>
+						) : (
+							<button
+								onClick={() =>
+									play({
+										id: song.id,
+										title: song.title,
+										artist: song.releasedBy,
+										cover: song.cover,
+										embedUrl: toEmbedUrl(song.link!),
+									})
+								}
+								className="w-full bg-[#1a1a2e]/60 hover:bg-[#1a1a2e]/80 rounded-xl p-4 flex items-center gap-3 transition-colors cursor-pointer group"
+							>
+								<div className="w-10 h-10 rounded-full bg-[#1db954] flex items-center justify-center text-black group-hover:scale-105 transition-transform">
+									<svg
+										className="w-5 h-5"
+										fill="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path d="M8 5v14l11-7z" />
+									</svg>
+								</div>
+								<p className="text-white font-medium">Play this song</p>
+							</button>
+						)}
 					</section>
 				)}