Index: frontend/src/components/search/AlbumResult.tsx
===================================================================
--- frontend/src/components/search/AlbumResult.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/search/AlbumResult.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -0,0 +1,31 @@
+import type { Album } from "../../utils/types";
+
+interface AlbumResultProps {
+	album: Album;
+}
+
+const AlbumResult = ({ album }: AlbumResultProps) => {
+	return (
+		<div className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group">
+			<img
+				src={album.cover || "/favicon.png"}
+				alt={album.title}
+				className="w-12 h-12 rounded object-cover"
+				onError={(e) => {
+					(e.target as HTMLImageElement).src = "/favicon.png";
+				}}
+			/>
+			<div className="flex-1 min-w-0">
+				<p className="text-white font-medium truncate">{album.title}</p>
+				<p className="text-sm text-gray-400 truncate">
+					Album • {album.releasedBy} • {album.songs?.length ?? 0} songs
+				</p>
+			</div>
+			<span className="text-xs text-gray-500 uppercase tracking-wider">
+				{album.genre}
+			</span>
+		</div>
+	);
+};
+
+export default AlbumResult;
Index: frontend/src/components/search/SongResult.tsx
===================================================================
--- frontend/src/components/search/SongResult.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/search/SongResult.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -0,0 +1,31 @@
+import type { Song } from "../../utils/types";
+
+interface SongResultProps {
+	song: Song;
+}
+
+const SongResult = ({ song }: SongResultProps) => {
+	return (
+		<div className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group">
+			<img
+				src={song.cover || "/favicon.png"}
+				alt={song.title}
+				className="w-12 h-12 rounded object-cover"
+				onError={(e) => {
+					(e.target as HTMLImageElement).src = "/favicon.png";
+				}}
+			/>
+			<div className="flex-1 min-w-0">
+				<p className="text-white font-medium truncate">{song.title}</p>
+				<p className="text-sm text-gray-400 truncate">
+					Song • {song.releasedBy}
+				</p>
+			</div>
+			<span className="text-xs text-gray-500 uppercase tracking-wider">
+				{song.genre}
+			</span>
+		</div>
+	);
+};
+
+export default SongResult;
Index: frontend/src/components/search/UserResult.tsx
===================================================================
--- frontend/src/components/search/UserResult.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/search/UserResult.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -0,0 +1,38 @@
+import { baseURL } from "../../api/axiosInstance";
+import type { BaseNonAdminUser } from "../../utils/types";
+
+interface UserResultProps {
+	user: BaseNonAdminUser;
+	label: "Artist" | "User";
+}
+
+const UserResult = ({ user, label }: UserResultProps) => {
+	return (
+		<div className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group">
+			{user.profilePhoto ? (
+				<img
+					src={`${baseURL}/${user.profilePhoto}`}
+					alt={user.username}
+					className="w-12 h-12 rounded-full object-cover"
+				/>
+			) : (
+				<div className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
+					<span className="text-white text-lg font-semibold">
+						{user.username.charAt(0).toUpperCase()}
+					</span>
+				</div>
+			)}
+			<div className="flex-1 min-w-0">
+				<p className="text-white font-medium truncate">{user.fullName}</p>
+				<p className="text-sm text-gray-400 truncate">
+					{label} • @{user.username}
+				</p>
+			</div>
+			<div className="text-right text-xs text-gray-500">
+				<p>{user.followers} followers</p>
+			</div>
+		</div>
+	);
+};
+
+export default UserResult;