diff --git a/src/pages/ListingPage.jsx b/src/pages/ListingPage.jsx
index 1e97401..52699b9 100644
--- a/src/pages/ListingPage.jsx
+++ b/src/pages/ListingPage.jsx
@@ -3,5 +3,8 @@ import { MediaCard } from '../components/MediaCard';
 import { SectionHeading } from '../components/SectionHeading';
 import { videos } from '../data/catalog';
 import { useAppStore } from '../app/store';
+import { appApi } from '../services/appApi';
+import { normalizeDrama, normalizePage } from '../services/normalizers';
+import { useApi } from '../hooks/useApi';
 
-export function ListingPage({ type }) { const { locale } = useAppStore(); const title = type === 'shorts' ? locale.shortTitle : type === 'subscriptions' ? locale.channels : type === 'history' ? locale.history : locale.library; return <><SectionHeading title={title} /><div className="video-grid">{videos.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }
+export function ListingPage({ type }) { const { locale } = useAppStore(); const title = type === 'shorts' ? locale.shortTitle : type === 'subscriptions' ? locale.channels : type === 'history' ? locale.history : locale.library; const api = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code))), [locale.code]); const items = api.data?.length ? api.data : videos; return <><SectionHeading title={title} /><div className="api-note">{api.loading ? locale.loading : api.error ? locale.apiFallback : ''}</div><div className="video-grid">{items.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }
diff --git a/src/pages/SearchPage.jsx b/src/pages/SearchPage.jsx
index 4967d03..16cbcb9 100644
--- a/src/pages/SearchPage.jsx
+++ b/src/pages/SearchPage.jsx
@@ -4,5 +4,8 @@ import { MediaCard } from '../components/MediaCard';
 import { SectionHeading } from '../components/SectionHeading';
 import { useAppStore } from '../app/store';
 import { searchCatalog } from '../services/catalogService';
+import { appApi } from '../services/appApi';
+import { normalizeDrama, normalizePage } from '../services/normalizers';
+import { useApi } from '../hooks/useApi';
 
-export function SearchPage() { const { locale } = useAppStore(); const [params] = useSearchParams(); const query = params.get('q') || ''; const results = searchCatalog(query, '', 0); return <><SectionHeading title={query ? `Search results for “${query}”` : locale.picks} /><div className="video-grid">{results.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }
+export function SearchPage() { const { locale } = useAppStore(); const [params] = useSearchParams(); const query = params.get('q') || ''; const api = useApi(() => appApi.dramas().then((payload) => normalizePage(payload).list.map((item) => normalizeDrama(item, locale.code))), [locale.code]); const source = api.data?.length ? api.data : searchCatalog('', '', 0); const normalizedQuery = query.toLowerCase(); const results = source.filter((video) => `${video.title} ${video.channel} ${video.genre}`.toLowerCase().includes(normalizedQuery)); return <><SectionHeading title={query ? `Search results for “${query}”` : locale.picks} /><div className="api-note">{api.loading ? locale.loading : api.error ? locale.apiFallback : ''}</div><div className="video-grid">{results.map((video) => <MediaCard key={video.id} video={video} />)}</div></>; }