Index: frontend/src/components/Sidebar.tsx
===================================================================
--- frontend/src/components/Sidebar.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
+++ frontend/src/components/Sidebar.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -0,0 +1,123 @@
+interface SidebarProps {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
+	// mock data for recently listened songs
+	const recentlyListened = [
+		{ id: 1, title: "Song One", artist: "Artist A", cover: "/favicon.png" },
+		{ id: 2, title: "Song Two", artist: "Artist B", cover: "/favicon.png" },
+		{ id: 3, title: "Song Three", artist: "Artist C", cover: "/favicon.png" },
+		{ id: 4, title: "Song Four", artist: "Artist D", cover: "/favicon.png" },
+		{ id: 5, title: "Song Five", artist: "Artist E", cover: "/favicon.png" },
+	];
+
+	// mock data for my playlists
+	const playlists = [
+		{ id: 1, name: "My Favorites", songCount: 25 },
+		{ id: 2, name: "Workout Mix", songCount: 18 },
+		{ id: 3, name: "Chill Vibes", songCount: 32 },
+		{ id: 4, name: "Party Hits", songCount: 45 },
+	];
+
+	return (
+		<div
+			className={`fixed left-0 top-0 h-full bg-[#121212] border-r border-white/10 transition-transform duration-300 ease-in-out z-40 ${
+				isOpen ? "translate-x-0" : "-translate-x-full"
+			} w-64 overflow-y-auto`}
+		>
+			<div className="p-6">
+				{/* Sidebar Header */}
+				<div className="flex justify-between items-center mb-6 pt-2">
+					<h2 className="text-xl font-bold text-white">Library</h2>
+					<button
+						onClick={onClose}
+						className="text-gray-400 hover:text-white transition-colors"
+						aria-label="Close sidebar"
+					>
+						<svg
+							className="w-6 h-6"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				{/* Recently Listened */}
+				<div className="mb-8">
+					<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
+						Recently Played
+					</h3>
+					<div className="space-y-3">
+						{recentlyListened.map((song) => (
+							<div
+								key={song.id}
+								className="flex items-center gap-3 p-2 rounded-lg hover:bg-white/5 cursor-pointer transition-colors"
+							>
+								<img
+									src={song.cover}
+									alt={song.title}
+									className="w-10 h-10 rounded object-cover"
+								/>
+								<div className="flex-1 min-w-0">
+									<p className="text-sm font-medium text-white truncate">
+										{song.title}
+									</p>
+									<p className="text-xs text-gray-400 truncate">
+										{song.artist}
+									</p>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+
+				{/* Playlists */}
+				<div>
+					<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
+						Your Playlists
+					</h3>
+					<div className="space-y-2">
+						{playlists.map((playlist) => (
+							<div
+								key={playlist.id}
+								className="flex items-center justify-between p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors"
+							>
+								<div className="flex items-center gap-3">
+									<div className="w-10 h-10 bg-linear-to-br from-purple-500 to-pink-500 rounded flex items-center justify-center">
+										<svg
+											className="w-5 h-5 text-white"
+											fill="currentColor"
+											viewBox="0 0 20 20"
+										>
+											<path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
+										</svg>
+									</div>
+									<div>
+										<p className="text-sm font-medium text-white">
+											{playlist.name}
+										</p>
+										<p className="text-xs text-gray-400">
+											{playlist.songCount} songs
+										</p>
+									</div>
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Sidebar;
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;
Index: frontend/src/components/userProfile/UserListModal.tsx
===================================================================
--- frontend/src/components/userProfile/UserListModal.tsx	(revision 0792d02b326867cae564f7072133934be31d9dee)
+++ frontend/src/components/userProfile/UserListModal.tsx	(revision cb4a1da079608fdb022036c90eb6e41f26046827)
@@ -3,82 +3,82 @@
 
 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 baseURL = import.meta.env.VITE_API_BASE_URL;
+	const navigate = useNavigate();
+	const baseURL = import.meta.env.VITE_API_BASE_URL;
 
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-white rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
-        <div className="p-4 border-b flex justify-between items-center">
-          <h2 className="text-xl font-bold">{title}</h2>
-          <button
-            onClick={onClose}
-            className="text-gray-500 hover:text-black text-2xl cursor-pointer"
-          >
-            &times;
-          </button>
-        </div>
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+			<div className="bg-white rounded-xl shadow-2xl w-full max-w-md max-h-[70vh] flex flex-col">
+				<div className="p-4 border-b flex justify-between items-center">
+					<h2 className="text-xl font-bold">{title}</h2>
+					<button
+						onClick={onClose}
+						className="text-gray-500 hover:text-black text-2xl cursor-pointer"
+					>
+						&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-gray-50 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-blue-100 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-blue-600 font-bold">
-                        {u.fullName.charAt(0)}
-                      </span>
-                    )}
-                  </div>
-                  <p className="font-semibold text-gray-900">{u.fullName}</p>
-                </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-gray-50 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-blue-100 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-blue-600 font-bold">
+												{u.fullName.charAt(0)}
+											</span>
+										)}
+									</div>
+									<p className="font-semibold text-gray-900">{u.fullName}</p>
+								</div>
 
-                <button
-                  onClick={() => onFollowToggle(u.username)}
-                  className={`px-4 py-1 text-sm font-medium rounded-md transition-colors cursor-pointer ${
-                    u.isFollowedByCurrentUser
-                      ? "bg-gray-200 text-gray-700 hover:bg-gray-300"
-                      : "bg-blue-500 text-white hover:bg-blue-600"
-                  }`}
-                >
-                  {u.isFollowedByCurrentUser ? "Unfollow" : "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 text-sm font-medium rounded-md transition-colors cursor-pointer ${
+										u.isFollowedByCurrentUser
+											? "bg-gray-200 text-gray-700 hover:bg-gray-300"
+											: "bg-blue-500 text-white hover:bg-blue-600"
+									}`}
+								>
+									{u.isFollowedByCurrentUser ? "Unfollow" : "Follow"}
+								</button>
+							</div>
+						))
+					)}
+				</div>
+			</div>
+			<div className="absolute inset-0 -z-10" onClick={onClose}></div>
+		</div>
+	);
 };