From ac0901f6726b1e5cc214beb1d19f261a79250e0f Mon Sep 17 00:00:00 2001
From: frank-mendez <frankmendezresources@gmail.com>
Date: Fri, 20 Mar 2026 23:43:19 +0800
Subject: [PATCH 1/2] feat: made for you section

---
 src/components/features/NowPlaying.tsx        |   6 +-
 src/components/features/home/HomeSection.tsx  |   4 +-
 .../features/home/MadeForYouSection.tsx       | 188 ++++++++++++++++++
 src/components/features/home/NavHeader.tsx    |   2 +-
 .../features/home/RecentlyPlayedCard.test.tsx |  16 +-
 .../features/home/RecentlyPlayedCard.tsx      |   2 +-
 .../home/RecentlyPlayedSection.test.tsx       |  32 ++-
 .../features/home/RecentlyPlayedSection.tsx   |  42 ++--
 src/components/layout/MainPanel.tsx           |   2 +
 src/hooks/useSpotifyQueries.ts                |  21 ++
 src/pages/Dashboard.tsx                       |   2 +-
 11 files changed, 255 insertions(+), 62 deletions(-)
 create mode 100644 src/components/features/home/MadeForYouSection.tsx

diff --git a/src/components/features/NowPlaying.tsx b/src/components/features/NowPlaying.tsx
index 4c844fb..f542107 100644
--- a/src/components/features/NowPlaying.tsx
+++ b/src/components/features/NowPlaying.tsx
@@ -10,7 +10,7 @@ export function NowPlaying() {
 
   if (isLoading) {
     return (
-      <aside className="hidden xl:flex flex-col w-60 shrink-0 bg-surface rounded-lg p-4 gap-4">
+      <aside className="hidden xl:flex flex-col w-72 shrink-0 bg-surface rounded-lg p-4 gap-4">
         <Skeleton className="w-full aspect-square rounded" />
         <Skeleton className="h-4 w-40" />
         <Skeleton className="h-3 w-28" />
@@ -20,14 +20,14 @@ export function NowPlaying() {
 
   if (!track) {
     return (
-      <aside className="hidden xl:flex flex-col w-60 shrink-0 bg-surface rounded-lg p-4 items-center justify-center">
+      <aside className="hidden xl:flex flex-col w-72 shrink-0 bg-surface rounded-lg p-4 items-center justify-center">
         <p className="text-text-muted text-xs text-center">Nothing playing right now</p>
       </aside>
     );
   }
 
   return (
-    <aside className="hidden xl:flex flex-col w-60 shrink-0 bg-surface rounded-lg p-4 gap-3">
+    <aside className="hidden xl:flex flex-col w-72 shrink-0 bg-surface rounded-lg p-4 gap-3">
       <img
         src={track.album?.images?.[0]?.url}
         alt={track.album?.name}
diff --git a/src/components/features/home/HomeSection.tsx b/src/components/features/home/HomeSection.tsx
index bbc1a29..21bed2a 100644
--- a/src/components/features/home/HomeSection.tsx
+++ b/src/components/features/home/HomeSection.tsx
@@ -1,14 +1,14 @@
 import type { ReactNode } from 'react';
 
 interface HomeSectionProps {
-  title: string;
+  title?: string;
   children: ReactNode;
 }
 
 export function HomeSection({ title, children }: Readonly<HomeSectionProps>) {
   return (
     <section>
-      <h2 className="text-text-primary font-bold text-xl mb-3">{title}</h2>
+      {title && <h2 className="text-text-primary font-bold text-xl mb-3">{title}</h2>}
       {children}
     </section>
   );
diff --git a/src/components/features/home/MadeForYouSection.tsx b/src/components/features/home/MadeForYouSection.tsx
new file mode 100644
index 0000000..381cfd4
--- /dev/null
+++ b/src/components/features/home/MadeForYouSection.tsx
@@ -0,0 +1,188 @@
+import { useRef, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-react';
+import { useUserPlaylists, useCurrentUserProfile, useCurrentPlayback } from '../../../hooks/useSpotifyQueries';
+import { usePlaybackControls } from '../../../hooks/useSpotifyMutations';
+import { usePlayerStore } from '../../../stores/usePlayerStore';
+import { HomeSection } from './HomeSection';
+import { Skeleton } from '../../ui/skeleton';
+import type { Playlist } from '../../../types/spotify';
+
+const CARD_WIDTH = 168;
+
+interface PlaylistCardProps {
+  playlist: Playlist;
+  onPlay: (uri: string) => void;
+  onPause: () => void;
+  isActive: boolean;
+  isPlaying: boolean;
+}
+
+function PlaylistCard({ playlist, onPlay, onPause, isActive, isPlaying }: Readonly<PlaylistCardProps>) {
+  const navigate = useNavigate();
+  const image = playlist.images?.[0]?.url;
+  const initials = playlist.name.slice(0, 2).toUpperCase();
+
+  const handlePlayPause = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isActive && isPlaying) {
+      onPause();
+    } else {
+      onPlay(playlist.uri);
+    }
+  };
+
+  return (
+    <button
+      className="flex flex-col gap-2 w-40 shrink-0 text-left group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white rounded-md"
+      onClick={() => navigate(`/playlist/${playlist.id}`)}
+    >
+      <div className="relative w-40 h-40 rounded-md overflow-hidden bg-surface-hover">
+        {image ? (
+          <img
+            src={image}
+            alt={playlist.name}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center bg-accent/20 text-accent font-bold text-2xl">
+            {initials}
+          </div>
+        )}
+
+        {/* Play/Pause button — bottom right corner */}
+        <div
+          className={`absolute bottom-2 right-2 transition-all duration-200 ${isActive ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0'}`}
+          onClick={handlePlayPause}
+        >
+          <span className="w-9 h-9 rounded-full bg-accent flex items-center justify-center shadow-lg hover:scale-105 transition-transform">
+            {isActive && isPlaying ? (
+              <>
+                <span className="group-hover:hidden flex items-end gap-[2px] h-4">
+                  <span className="w-[3px] bg-black rounded-sm animate-eq-bar1" />
+                  <span className="w-[3px] bg-black rounded-sm animate-eq-bar2" />
+                  <span className="w-[3px] bg-black rounded-sm animate-eq-bar3" />
+                </span>
+                <Pause className="hidden group-hover:flex w-4 h-4 text-black fill-black" />
+              </>
+            ) : (
+              <Play className="w-4 h-4 text-black fill-black ml-0.5" />
+            )}
+          </span>
+        </div>
+      </div>
+
+      <div className="px-0.5">
+        <p className="text-text-primary text-sm font-semibold truncate">{playlist.name}</p>
+        {playlist.description && (
+          <p className="text-text-muted text-xs truncate mt-0.5">{playlist.description}</p>
+        )}
+      </div>
+    </button>
+  );
+}
+
+export function MadeForYouSection() {
+  const { data, isLoading } = useUserPlaylists(50);
+  const { data: profile } = useCurrentUserProfile();
+  const { data: playback } = useCurrentPlayback();
+  const { play, pause } = usePlaybackControls();
+  const { deviceId } = usePlayerStore();
+
+  const sectionTitle = `Made For ${profile?.display_name ?? 'You'}`;
+  const activeContextUri = playback?.context?.uri ?? null;
+  const isPlaybackActive = playback?.is_playing ?? false;
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateArrows = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  };
+
+  useEffect(() => {
+    updateArrows();
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener('scroll', updateArrows);
+    window.addEventListener('resize', updateArrows);
+    return () => {
+      el.removeEventListener('scroll', updateArrows);
+      window.removeEventListener('resize', updateArrows);
+    };
+  }, [data]);
+
+  const scroll = (dir: 'left' | 'right') => {
+    scrollRef.current?.scrollBy({ left: dir === 'left' ? -CARD_WIDTH * 2 : CARD_WIDTH * 2, behavior: 'smooth' });
+  };
+
+  if (isLoading) {
+    return (
+      <HomeSection title={sectionTitle}>
+        <div className="flex gap-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="flex flex-col gap-2 w-40 shrink-0">
+              <Skeleton className="w-40 h-40 rounded-md" />
+              <Skeleton className="h-3 w-3/4 rounded" />
+              <Skeleton className="h-3 w-1/2 rounded" />
+            </div>
+          ))}
+        </div>
+      </HomeSection>
+    );
+  }
+
+  const playlists = data?.items ?? [];
+  if (!playlists.length) return null;
+
+  return (
+    <HomeSection title={sectionTitle}>
+      <div className="relative overflow-hidden">
+        {canScrollLeft && (
+          <div className="absolute left-0 top-0 bottom-2 w-16 z-10 flex items-center justify-start bg-gradient-to-r from-surface to-transparent pointer-events-none">
+            <button
+              aria-label="Scroll left"
+              onClick={() => scroll('left')}
+              className="pointer-events-auto ml-1 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center shadow-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+            >
+              <ChevronLeft className="w-5 h-5 text-text-primary" />
+            </button>
+          </div>
+        )}
+
+        <div
+          ref={scrollRef}
+          className="flex gap-4 overflow-x-auto pb-2"
+          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
+          {playlists.map((playlist) => (
+            <PlaylistCard
+              key={playlist.id}
+              playlist={playlist}
+              onPlay={(uri) => play.mutate({ context_uri: uri, device_id: deviceId ?? undefined })}
+              onPause={() => pause.mutate(deviceId ?? undefined)}
+              isActive={activeContextUri === playlist.uri}
+              isPlaying={activeContextUri === playlist.uri && isPlaybackActive}
+            />
+          ))}
+        </div>
+
+        {canScrollRight && (
+          <div className="absolute right-0 top-0 bottom-2 w-16 z-10 flex items-center justify-end bg-gradient-to-l from-surface to-transparent pointer-events-none">
+            <button
+              aria-label="Scroll right"
+              onClick={() => scroll('right')}
+              className="pointer-events-auto mr-1 w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center shadow-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+            >
+              <ChevronRight className="w-5 h-5 text-text-primary" />
+            </button>
+          </div>
+        )}
+      </div>
+    </HomeSection>
+  );
+}
diff --git a/src/components/features/home/NavHeader.tsx b/src/components/features/home/NavHeader.tsx
index 661b30e..ab91d59 100644
--- a/src/components/features/home/NavHeader.tsx
+++ b/src/components/features/home/NavHeader.tsx
@@ -31,7 +31,7 @@ export function NavHeader({
     <div
       role="radiogroup"
       aria-label="Content filter"
-      className="sticky top-0 z-10 bg-surface px-4 py-2 flex items-center gap-2"
+      className="sticky top-0 z-10 bg-surface px-4 py-2 mt-4 flex items-center gap-2"
     >
       {CHIPS.map((chip, i) => (
         <button
diff --git a/src/components/features/home/RecentlyPlayedCard.test.tsx b/src/components/features/home/RecentlyPlayedCard.test.tsx
index 9d986eb..c7f9821 100644
--- a/src/components/features/home/RecentlyPlayedCard.test.tsx
+++ b/src/components/features/home/RecentlyPlayedCard.test.tsx
@@ -12,22 +12,22 @@ vi.mock('react-router-dom', async () => {
 });
 
 const albumItem: RecentItem = {
-  id: 'album1',
+  id: 'track1',
   name: 'Test Album',
   imageUrl: 'https://img.test/cover.jpg',
-  type: 'album',
-  uri: 'spotify:album:album1',
+  type: 'track',
+  uri: 'spotify:track:track1',
   navigationPath: '/album/album1',
   subtitle: 'Test Artist',
 };
 
 const artistItem: RecentItem = {
-  id: 'artist1',
+  id: 'track2',
   name: 'Test Artist',
   imageUrl: undefined,
-  type: 'artist',
-  uri: 'spotify:artist:artist1',
-  navigationPath: '/artist/artist1',
+  type: 'track',
+  uri: 'spotify:track:track2',
+  navigationPath: '/album/album2',
   subtitle: 'Artist',
 };
 
@@ -66,7 +66,7 @@ describe('RecentlyPlayedCard', () => {
     const onPlay = vi.fn();
     renderCard(albumItem, onPlay);
     fireEvent.click(screen.getByRole('button', { name: /play/i }));
-    expect(onPlay).toHaveBeenCalledWith('spotify:album:album1');
+    expect(onPlay).toHaveBeenCalledWith('spotify:track:track1');
   });
 
   it('does not navigate when play button is clicked', () => {
diff --git a/src/components/features/home/RecentlyPlayedCard.tsx b/src/components/features/home/RecentlyPlayedCard.tsx
index f733774..5438f65 100644
--- a/src/components/features/home/RecentlyPlayedCard.tsx
+++ b/src/components/features/home/RecentlyPlayedCard.tsx
@@ -5,7 +5,7 @@ export type RecentItem = {
   id: string;
   name: string;
   imageUrl?: string;
-  type: 'album' | 'artist';
+  type: 'track';
   uri: string;
   navigationPath: string;
   subtitle: string;
diff --git a/src/components/features/home/RecentlyPlayedSection.test.tsx b/src/components/features/home/RecentlyPlayedSection.test.tsx
index 891cb55..8663205 100644
--- a/src/components/features/home/RecentlyPlayedSection.test.tsx
+++ b/src/components/features/home/RecentlyPlayedSection.test.tsx
@@ -103,42 +103,40 @@ describe('RecentlyPlayedSection', () => {
       data: { items: [makeTrack('t1', 'a1', 'ar1')], cursors: {}, href: '', limit: 20 },
     } as never);
     render(<RecentlyPlayedSection />, { wrapper });
-    expect(screen.getByText('Recently Played')).toBeInTheDocument();
-    expect(screen.getByText('Album a1')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /play artist ar1/i })).toBeInTheDocument();
+    expect(screen.queryByText('Recently Played')).not.toBeInTheDocument();
+    expect(screen.getByText('Track t1')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /play Track t1/i })).toBeInTheDocument();
   });
 
-  it('deduplicates albums across tracks', () => {
+  it('deduplicates tracks with the same id', () => {
     const items = [
-      makeTrack('t1', 'same-album', 'ar1'),
-      makeTrack('t2', 'same-album', 'ar2'),
+      makeTrack('same-track', 'al1', 'ar1'),
+      makeTrack('same-track', 'al1', 'ar1'),
     ];
     vi.mocked(useRecentlyPlayed).mockReturnValue({
       isLoading: false,
       data: { items, cursors: {}, href: '', limit: 20 },
     } as never);
     render(<RecentlyPlayedSection />, { wrapper });
-    // 'Album same-album' should appear only once
-    expect(screen.getAllByText('Album same-album')).toHaveLength(1);
+    expect(screen.getAllByText('Track same-track')).toHaveLength(1);
   });
 
-  it('deduplicates artists across tracks', () => {
+  it('shows multiple tracks from the same album', () => {
     const items = [
-      makeTrack('t1', 'al1', 'same-artist'),
-      makeTrack('t2', 'al2', 'same-artist'),
+      makeTrack('t1', 'same-album', 'ar1'),
+      makeTrack('t2', 'same-album', 'ar2'),
     ];
     vi.mocked(useRecentlyPlayed).mockReturnValue({
       isLoading: false,
       data: { items, cursors: {}, href: '', limit: 20 },
     } as never);
     render(<RecentlyPlayedSection />, { wrapper });
-    // The artist name may appear in album subtitles too; verify the artist card is deduplicated
-    expect(screen.getAllByRole('button', { name: /play artist same-artist/i })).toHaveLength(1);
+    expect(screen.getByText('Track t1')).toBeInTheDocument();
+    expect(screen.getByText('Track t2')).toBeInTheDocument();
   });
 
   it('caps output at 8 items', () => {
-    // 6 unique tracks, each with unique album+artist → up to 12 items, capped at 8
-    const items = Array.from({ length: 6 }, (_, i) =>
+    const items = Array.from({ length: 10 }, (_, i) =>
       makeTrack(`t${i}`, `al${i}`, `ar${i}`)
     );
     vi.mocked(useRecentlyPlayed).mockReturnValue({
@@ -150,7 +148,7 @@ describe('RecentlyPlayedSection', () => {
     expect(playButtons).toHaveLength(8);
   });
 
-  it('still emits artist when track.album is absent', () => {
+  it('still renders track when album is absent', () => {
     const trackNoAlbum = makeTrack('t1', 'al1', 'ar1');
     (trackNoAlbum.track as { album?: unknown }).album = undefined;
     vi.mocked(useRecentlyPlayed).mockReturnValue({
@@ -158,6 +156,6 @@ describe('RecentlyPlayedSection', () => {
       data: { items: [trackNoAlbum], cursors: {}, href: '', limit: 20 },
     } as never);
     render(<RecentlyPlayedSection />, { wrapper });
-    expect(screen.getByText('Artist ar1')).toBeInTheDocument();
+    expect(screen.getByText('Track t1')).toBeInTheDocument();
   });
 });
diff --git a/src/components/features/home/RecentlyPlayedSection.tsx b/src/components/features/home/RecentlyPlayedSection.tsx
index 67392db..c1ffaa7 100644
--- a/src/components/features/home/RecentlyPlayedSection.tsx
+++ b/src/components/features/home/RecentlyPlayedSection.tsx
@@ -17,34 +17,18 @@ function deriveItems(
   for (const { track } of items) {
     if (result.length >= max) break;
 
-    if (track.album && !seen.has(`album:${track.album.id}`)) {
-      seen.add(`album:${track.album.id}`);
+    if (!seen.has(track.id)) {
+      seen.add(track.id);
       result.push({
-        id: track.album.id,
-        name: track.album.name,
-        imageUrl: track.album.images[1]?.url ?? track.album.images[0]?.url,
-        type: 'album',
-        uri: track.album.uri,
-        navigationPath: `/album/${track.album.id}`,
+        id: track.id,
+        name: track.name,
+        imageUrl: track.album?.images[1]?.url ?? track.album?.images[0]?.url,
+        type: 'track',
+        uri: track.uri,
+        navigationPath: `/album/${track.album?.id}`,
         subtitle: track.artists.map((a) => a.name).join(', '),
       });
     }
-
-    if (result.length >= max) break;
-
-    const artist = track.artists[0];
-    if (artist && !seen.has(`artist:${artist.id}`)) {
-      seen.add(`artist:${artist.id}`);
-      result.push({
-        id: artist.id,
-        name: artist.name,
-        imageUrl: undefined,
-        type: 'artist',
-        uri: artist.uri,
-        navigationPath: `/artist/${artist.id}`,
-        subtitle: 'Artist',
-      });
-    }
   }
 
   return result;
@@ -56,7 +40,7 @@ export function RecentlyPlayedSection() {
   const { deviceId } = usePlayerStore();
   const { data: playback } = useCurrentPlayback();
 
-  const activeContextUri = playback?.context?.uri ?? null;
+  const activeTrackUri = playback?.item?.uri ?? null;
   const isPlaybackActive = playback?.is_playing ?? false;
 
   if (isLoading) {
@@ -75,16 +59,16 @@ export function RecentlyPlayedSection() {
   if (!items.length) return null;
 
   return (
-    <HomeSection title="Recently Played">
+    <HomeSection>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
         {items.map((item) => (
           <RecentlyPlayedCard
             key={`${item.type}:${item.id}`}
             item={item}
-            onPlay={(uri) => play.mutate({ context_uri: uri, device_id: deviceId ?? undefined })}
+            onPlay={(uri) => play.mutate({ uris: [uri], device_id: deviceId ?? undefined })}
             onPause={() => pause.mutate(deviceId ?? undefined)}
-            isActive={activeContextUri === item.uri}
-            isPlaying={activeContextUri === item.uri && isPlaybackActive}
+            isActive={activeTrackUri === item.uri}
+            isPlaying={activeTrackUri === item.uri && isPlaybackActive}
           />
         ))}
       </div>
diff --git a/src/components/layout/MainPanel.tsx b/src/components/layout/MainPanel.tsx
index 70f5643..fbbe91e 100644
--- a/src/components/layout/MainPanel.tsx
+++ b/src/components/layout/MainPanel.tsx
@@ -5,6 +5,7 @@ import { useContentStore } from "../../stores/useContentStore";
 import { MainContent } from "../../types/enums";
 import { NavHeader, useNavHeader } from "../features/home/NavHeader";
 import { RecentlyPlayedSection } from "../features/home/RecentlyPlayedSection";
+import { MadeForYouSection } from "../features/home/MadeForYouSection";
 
 const Search = lazy(() =>
   import("../features/Search").then((m) => ({ default: m.Search })),
@@ -36,6 +37,7 @@ export function MainPanel() {
       <NavHeader active={activeFilter} onChange={setActiveFilter} />
       <div className="p-4 flex flex-col gap-6">
         <RecentlyPlayedSection />
+        <MadeForYouSection />
       </div>
     </>
   );
diff --git a/src/hooks/useSpotifyQueries.ts b/src/hooks/useSpotifyQueries.ts
index 8978798..c32b3cc 100644
--- a/src/hooks/useSpotifyQueries.ts
+++ b/src/hooks/useSpotifyQueries.ts
@@ -28,6 +28,27 @@ export const useFeaturedPlaylists = (limit = 20, offset = 0) => {
   });
 };
 
+export const useCategories = (limit = 50) => {
+  const api = useSpotifyApi();
+  return useQuery({
+    queryKey: ["spotify", "categories", limit],
+    queryFn: () => requireApi(api).browse.getCategories({ limit }),
+    enabled: api !== null,
+    staleTime: 60 * 60 * 1000,
+  });
+};
+
+export const useCategoryPlaylists = (categoryId: string | undefined, limit = 20) => {
+  const api = useSpotifyApi();
+  return useQuery({
+    queryKey: ["spotify", "category-playlists", categoryId, limit],
+    queryFn: () =>
+      requireApi(api).browse.getCategoryPlaylists(categoryId!, { limit }),
+    enabled: api !== null && !!categoryId,
+    staleTime: 10 * 60 * 1000,
+  });
+};
+
 export const useNewReleases = (limit = 20, offset = 0) => {
   const api = useSpotifyApi();
   return useQuery({
diff --git a/src/pages/Dashboard.tsx b/src/pages/Dashboard.tsx
index 807e7a0..94cd73d 100644
--- a/src/pages/Dashboard.tsx
+++ b/src/pages/Dashboard.tsx
@@ -25,7 +25,7 @@ const Dashboard = () => {
       <Header />
       <div className="flex flex-1 gap-2 px-2 pb-2 min-h-0 overflow-hidden">
         <Sidebar />
-        <ScrollArea className="flex-1 bg-surface rounded-lg">
+        <ScrollArea className="flex-1 min-w-0 bg-surface rounded-lg">
           <MainPanel />
         </ScrollArea>
         <NowPlaying />

From aa1a656d68e010962272b72cb256f0e605cdc560 Mon Sep 17 00:00:00 2001
From: frank-mendez <frankmendezresources@gmail.com>
Date: Fri, 20 Mar 2026 23:51:09 +0800
Subject: [PATCH 2/2] fix: pr

---
 .../features/home/MadeForYouSection.tsx       | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/features/home/MadeForYouSection.tsx b/src/components/features/home/MadeForYouSection.tsx
index 381cfd4..882de1a 100644
--- a/src/components/features/home/MadeForYouSection.tsx
+++ b/src/components/features/home/MadeForYouSection.tsx
@@ -51,25 +51,24 @@ function PlaylistCard({ playlist, onPlay, onPause, isActive, isPlaying }: Readon
         )}
 
         {/* Play/Pause button — bottom right corner */}
-        <div
-          className={`absolute bottom-2 right-2 transition-all duration-200 ${isActive ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0'}`}
+        <button
+          aria-label={isActive && isPlaying ? `Pause ${playlist.name}` : `Play ${playlist.name}`}
           onClick={handlePlayPause}
+          className={`absolute bottom-2 right-2 w-9 h-9 rounded-full bg-accent flex items-center justify-center shadow-lg hover:scale-105 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white ${isActive ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0'}`}
         >
-          <span className="w-9 h-9 rounded-full bg-accent flex items-center justify-center shadow-lg hover:scale-105 transition-transform">
-            {isActive && isPlaying ? (
-              <>
-                <span className="group-hover:hidden flex items-end gap-[2px] h-4">
-                  <span className="w-[3px] bg-black rounded-sm animate-eq-bar1" />
-                  <span className="w-[3px] bg-black rounded-sm animate-eq-bar2" />
-                  <span className="w-[3px] bg-black rounded-sm animate-eq-bar3" />
-                </span>
-                <Pause className="hidden group-hover:flex w-4 h-4 text-black fill-black" />
-              </>
-            ) : (
-              <Play className="w-4 h-4 text-black fill-black ml-0.5" />
-            )}
-          </span>
-        </div>
+          {isActive && isPlaying ? (
+            <>
+              <span className="group-hover:hidden flex items-end gap-[2px] h-4">
+                <span className="w-[3px] bg-black rounded-sm animate-eq-bar1" />
+                <span className="w-[3px] bg-black rounded-sm animate-eq-bar2" />
+                <span className="w-[3px] bg-black rounded-sm animate-eq-bar3" />
+              </span>
+              <Pause className="hidden group-hover:flex w-4 h-4 text-black fill-black" />
+            </>
+          ) : (
+            <Play className="w-4 h-4 text-black fill-black ml-0.5" />
+          )}
+        </button>
       </div>
 
       <div className="px-0.5">
@@ -124,8 +123,8 @@ export function MadeForYouSection() {
     return (
       <HomeSection title={sectionTitle}>
         <div className="flex gap-4">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <div key={i} className="flex flex-col gap-2 w-40 shrink-0">
+          {['s1','s2','s3','s4','s5','s6','s7','s8'].map((k) => (
+            <div key={k} className="flex flex-col gap-2 w-40 shrink-0">
               <Skeleton className="w-40 h-40 rounded-md" />
               <Skeleton className="h-3 w-3/4 rounded" />
               <Skeleton className="h-3 w-1/2 rounded" />