diff --git a/apps/web/src/app/popular/ChartRankingList.tsx b/apps/web/src/app/popular/ChartRankingList.tsx
index f7e9fe6..6ae350e 100644
--- a/apps/web/src/app/popular/ChartRankingList.tsx
+++ b/apps/web/src/app/popular/ChartRankingList.tsx
@@ -152,7 +152,10 @@ export default function ChartRankingList() {
             </div>
           ) : (
             items.map(item => (
-              <div key={item.id} className={cn('flex gap-4 border-b py-3 last:border-0')}>
+              <div
+                key={item.id}
+                className="flex items-start gap-4 border-b px-4 py-3 last:border-0"
+              >
                 <div
                   className={cn(
                     'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',
@@ -161,7 +164,8 @@ export default function ChartRankingList() {
                 >
                   {item.rank}
                 </div>
-                <SongSummary song={item} />
+                {/* 순위 뱃지와 같은 행이라 min-w-0이 없으면 긴 곡 제목·가수가 번호 영역을 밀어낸다 */}
+                <SongSummary song={item} className="min-w-0 flex-1" />
               </div>
             ))
           )}
diff --git a/apps/web/src/app/recent/page.tsx b/apps/web/src/app/recent/page.tsx
index c132cb0..bcf44b5 100644
--- a/apps/web/src/app/recent/page.tsx
+++ b/apps/web/src/app/recent/page.tsx
@@ -6,6 +6,7 @@ import { useState } from 'react';
 import CharacterMessage from '@/components/CharacterMessage';
 import StaticLoading from '@/components/StaticLoading';
 import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Select,
   SelectContent,
@@ -87,11 +88,11 @@ export default function RecentSongPage() {
       </div>
 
       {recentAddSongs && recentAddSongs.length > 0 ? (
-        <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <ScrollArea className="min-h-0 flex-1">
           {recentAddSongs.map(song => (
             <RecentSongCard key={song.id} song={song} />
           ))}
-        </div>
+        </ScrollArea>
       ) : (
         <CharacterMessage
           variant="curious"