diff --git a/src/pages/WatchPage.jsx b/src/pages/WatchPage.jsx
index cd216a1..ad95f72 100644
--- a/src/pages/WatchPage.jsx
+++ b/src/pages/WatchPage.jsx
@@ -13,10 +13,28 @@ function SwipeVideo({ video, active }) {
   return <article ref={ref} className={`single-video-slide ${active ? 'active' : ''}`}><div className="single-video-stage">{src ? <VideoPlayer src={src} poster={image} autoPlay={active} /> : <div className="single-video-placeholder"><img src={image} alt={video.title} /><span>{playback.loading ? 'Loading video…' : playback.error || 'Preview unavailable'}</span></div>}</div><div className="single-video-info"><span>YMB SHORTS</span><h1>{video.title}</h1><p>{video.channel} · {video.views}</p></div></article>;
 }
 
+function normalizeFeedItems(payload, localeCode) {
+  return uniqueDramas(normalizePage(payload).list.map((item) => normalizeDrama(item, localeCode)));
+}
+
+async function loadWatchFeed(localeCode) {
+  try {
+    const page = normalizeFeedItems(await appApi.dramas(), localeCode);
+    if (page.length) return page;
+  } catch (error) {
+    const fallback = await appApi.homeFeed();
+    const items = fallback?.sections?.flatMap((section) => section.dramas || []) || [];
+    return uniqueDramas(items.map((item) => normalizeDrama(item, localeCode)));
+  }
+  const fallback = await appApi.homeFeed();
+  const items = fallback?.sections?.flatMap((section) => section.dramas || []) || [];
+  return uniqueDramas(items.map((item) => normalizeDrama(item, localeCode)));
+}
+
 export function WatchPage() {
-  const { id } = useParams(); const navigate = useNavigate(); const { locale } = useAppStore(); const [activeId, setActiveId] = useState(id); const current = useApi(() => appApi.drama(id).then((data) => normalizeDrama(data, locale.code)), [id, locale.code]); const feed = useApi(() => appApi.dramas().then((payload) => uniqueDramas(normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code)))), [locale.code]); const items = feed.data || []; const ordered = uniqueDramas([current.data, ...items.filter((item) => item.id !== id)].filter(Boolean));
-  const activeIndex = Math.max(0, ordered.findIndex((item) => String(item.id) === String(activeId))); const feedRef = useRef(null); const touchStart = useRef(0); const scrollToIndex = (index) => { const target = feedRef.current?.children[index]; target?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; const move = (delta) => scrollToIndex(Math.min(ordered.length - 1, Math.max(0, activeIndex + delta)));
+  const { id } = useParams(); const navigate = useNavigate(); const { locale } = useAppStore(); const [activeId, setActiveId] = useState(id); const current = useApi(() => appApi.drama(id).then((data) => normalizeDrama(data, locale.code)), [id, locale.code]); const feed = useApi(() => loadWatchFeed(locale.code), [locale.code]); const items = feed.data || []; const ordered = uniqueDramas([current.data, ...items.filter((item) => item.id !== String(id))].filter(Boolean));
+  const activeIndex = Math.max(0, ordered.findIndex((item) => String(item.id) === String(activeId))); const feedRef = useRef(null); const touchStart = useRef(0); const scrollToIndex = (index) => { const node = feedRef.current; if (!node) return; node.scrollTo({ top: index * node.clientHeight, behavior: 'smooth' }); }; const move = (delta) => { if (ordered.length < 2) return; scrollToIndex(Math.min(ordered.length - 1, Math.max(0, activeIndex + delta))); };
   useEffect(() => { const node = feedRef.current; if (!node) return undefined; const observer = new IntersectionObserver((entries) => entries.forEach((entry) => { if (entry.isIntersecting) { const nextId = entry.target.dataset.id; setActiveId(nextId); if (nextId !== id) window.history.replaceState(null, '', `/watch/${nextId}`); } }), { root: node, threshold: 0.75 }); node.querySelectorAll('[data-id]').forEach((item) => observer.observe(item)); const keydown = (event) => { if (event.key === 'ArrowDown' || event.key === 'PageDown') { event.preventDefault(); move(1); } if (event.key === 'ArrowUp' || event.key === 'PageUp') { event.preventDefault(); move(-1); } }; window.addEventListener('keydown', keydown); return () => { observer.disconnect(); window.removeEventListener('keydown', keydown); }; }, [ordered.length, id, activeIndex]);
   const hasNext = feed.loading || activeIndex < ordered.length - 1; const hasPrevious = activeIndex > 0;
-  return <div className="single-video-page"><header className="single-video-toolbar"><button onClick={() => navigate(-1)}>←</button><img src="/brand/ymb-logo-blue.png" alt="YMB" /><span>{locale.swipeHint || 'Swipe up to discover the next story'}</span></header>{current.loading && <div className="single-video-loading api-note">{locale.loading}</div>}<div ref={feedRef} className="single-video-feed" onTouchStart={(event) => { touchStart.current = event.touches[0].clientY; }} onTouchEnd={(event) => { const distance = touchStart.current - event.changedTouches[0].clientY; if (Math.abs(distance) > 45) move(distance > 0 ? 1 : -1); }} onWheel={(event) => { if (Math.abs(event.deltaY) > 20) move(event.deltaY > 0 ? 1 : -1); }}>{ordered.map((video) => <div key={video.id} data-id={video.id}><SwipeVideo video={video} active={String(activeId) === String(video.id)} /></div>)}</div><div className="feed-arrows"><button onClick={() => move(-1)} disabled={!hasPrevious} aria-label="Previous video">↑</button><button onClick={() => move(1)} disabled={!hasNext} aria-label="Next video">↓</button></div></div>;
+  return <div className="single-video-page"><header className="single-video-toolbar"><button onClick={() => navigate(-1)}>←</button><img src="/brand/ymb-logo-blue.png" alt="YMB" /><span>{locale.swipeHint || 'Swipe up to discover the next story'}</span></header>{(current.loading || feed.loading) && <div className="single-video-loading api-note">{locale.loading}</div>}{feed.error && <div className="single-video-loading api-note warning">{feed.error}</div>}<div ref={feedRef} className="single-video-feed" onTouchStart={(event) => { touchStart.current = event.touches[0].clientY; }} onTouchEnd={(event) => { const distance = touchStart.current - event.changedTouches[0].clientY; if (Math.abs(distance) > 45) move(distance > 0 ? 1 : -1); }} onWheel={(event) => { if (Math.abs(event.deltaY) > 20) move(event.deltaY > 0 ? 1 : -1); }}>{ordered.map((video) => <div key={video.id} data-id={video.id}><SwipeVideo video={video} active={String(activeId) === String(video.id)} /></div>)}</div><div className="feed-arrows"><button onClick={() => move(-1)} disabled={!hasPrevious} aria-label="Previous video">↑</button><button onClick={() => move(1)} disabled={!hasNext} aria-label="Next video">↓</button></div></div>;
 }