diff --git a/apps/admin/src/pages/DashboardPage.jsx b/apps/admin/src/pages/DashboardPage.jsx
index 2794be8..22c69ae 100644
--- a/apps/admin/src/pages/DashboardPage.jsx
+++ b/apps/admin/src/pages/DashboardPage.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { NavLink, useNavigate, useParams } from 'react-router-dom';
 import { useAuth } from '../auth/AuthContext.jsx';
+import { AdminContentTemplate, AdminDashboardPage, Card, Text } from '@flix/design-system/components';
 import {
   createEvent,
   generateEventBranding,
@@ -24,6 +25,8 @@ const defaultEventForm = {
   title: '',
   slug: '',
   description: '',
+  shortDescription: '',
+  longDescription: '',
   isActive: false,
   visibility: 'private',
   accessKey: '',
@@ -34,6 +37,7 @@ const defaultEventForm = {
   textColor: '#f5f5f5',
   accentColor: '#e50914',
   logoUrl: '',
+  highlightVideoUrl: '',
 };
 
 const defaultBrandingRequest = {
@@ -45,6 +49,7 @@ const defaultBrandingRequest = {
 
 const defaultLessonForm = {
   title: '',
+  description: '',
   slug: '',
   videoProvider: 'youtube',
   videoId: '',
@@ -79,7 +84,9 @@ const formatError = (error) => {
 const buildEventUpdatePayload = (form) => ({
   title: form.title,
   slug: form.slug,
-  description: form.description,
+  description: form.shortDescription || form.description,
+  shortDescription: form.shortDescription || form.description,
+  longDescription: form.longDescription || form.description,
   isActive: form.isActive,
   visibility: form.visibility,
   accessKey: form.accessKey ? form.accessKey : null,
@@ -94,15 +101,23 @@ const buildEventUpdatePayload = (form) => ({
     accentColor: form.accentColor,
   },
   logoUrl: form.logoUrl ? form.logoUrl : null,
+  highlightVideoUrl: form.highlightVideoUrl ? form.highlightVideoUrl : null,
 });
 
-const pageTitles = {
-  dashboard: 'Dashboard',
-  eventos: 'Eventos',
-  'eventos-new': 'Eventos / Novo',
-  'eventos-edit': 'Eventos / Editar',
-  aulas: 'Aulas',
-  quizzes: 'Quizzes',
+const sectionDetails = {
+  dashboard: 'Visao geral operacional.',
+  eventos: 'Gestao de eventos e branding.',
+  'eventos-new': 'Criacao de novos eventos.',
+  'eventos-edit': 'Edicao de evento selecionado.',
+  aulas: 'Gestao de aulas e materiais.',
+  quizzes: 'Gestao de quizzes por aula.',
+};
+
+const isSectionActive = (currentSection, target) => {
+  if (target === 'eventos') {
+    return ['eventos', 'eventos-new', 'eventos-edit'].includes(currentSection);
+  }
+  return currentSection === target;
 };
 
 export const DashboardPage = ({ section = 'dashboard' }) => {
@@ -145,11 +160,13 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
     [lessons, selectedLessonId],
   );
 
-  const mapEventToForm = (item) => ({
-    title: item.title ?? '',
-    slug: item.slug ?? '',
-    description: item.description ?? '',
-    isActive: Boolean(item.isActive),
+const mapEventToForm = (item) => ({
+  title: item.title ?? '',
+  slug: item.slug ?? '',
+  description: item.description ?? '',
+  shortDescription: item.shortDescription ?? item.description ?? '',
+  longDescription: item.longDescription ?? item.description ?? '',
+  isActive: Boolean(item.isActive),
     visibility: item.visibility ?? 'private',
     accessKey: item.accessKey ?? '',
     heroTitle: item.hero?.title ?? '',
@@ -159,6 +176,7 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
     textColor: item.visualStyle?.textColor ?? '#f5f5f5',
     accentColor: item.visualStyle?.accentColor ?? '#e50914',
     logoUrl: item.logoUrl ?? '',
+    highlightVideoUrl: item.highlightVideoUrl ?? '',
   });
 
   const mapBrandingAssetsToForm = (baseForm, assets) => ({
@@ -292,7 +310,9 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
       await createEvent(token, {
         title: eventForm.title,
         slug: eventForm.slug,
-        description: eventForm.description,
+        description: eventForm.shortDescription || eventForm.description,
+        shortDescription: eventForm.shortDescription || eventForm.description,
+        longDescription: eventForm.longDescription || eventForm.description,
         isActive: eventForm.isActive,
         visibility: eventForm.visibility,
         accessKey: eventForm.accessKey || undefined,
@@ -307,6 +327,7 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
           accentColor: eventForm.accentColor,
         },
         logoUrl: eventForm.logoUrl || undefined,
+        highlightVideoUrl: eventForm.highlightVideoUrl || undefined,
       });
       setStatus('Event created successfully.');
       await fetchEvents();
@@ -496,6 +517,7 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
     try {
       await createLesson(token, selectedEventId, {
         title: lessonForm.title,
+        description: lessonForm.description || undefined,
         slug: lessonForm.slug,
         videoProvider: lessonForm.videoProvider,
         videoId: lessonForm.videoId || undefined,
@@ -527,6 +549,7 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
 
     setLessonForm({
       title: selectedLesson.title ?? '',
+      description: selectedLesson.description ?? '',
       slug: selectedLesson.slug ?? '',
       videoProvider: selectedLesson.videoProvider ?? 'youtube',
       videoId: selectedLesson.videoId ?? '',
@@ -548,6 +571,7 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
     try {
       await updateLesson(token, selectedEventId, selectedLessonId, {
         title: lessonForm.title,
+        description: lessonForm.description,
         slug: lessonForm.slug,
         videoProvider: lessonForm.videoProvider,
         videoId: lessonForm.videoId,
@@ -732,78 +756,74 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
     }
   };
 
+  const navItems = [
+    { label: 'Dashboard', href: '/dashboard', active: isSectionActive(section, 'dashboard') },
+    { label: 'Eventos', href: '/eventos', active: isSectionActive(section, 'eventos') },
+    { label: 'Aulas', href: '/aulas', active: isSectionActive(section, 'aulas') },
+    { label: 'Quizzes', href: '/quizzes', active: isSectionActive(section, 'quizzes') },
+  ];
+
   return (
-    <main className="dashboard-layout">
-      <header className="dashboard-header">
-        <div>
-          <h1>{pageTitles[section] ?? 'Admin Content Operations'}</h1>
-          <p>Fluxo administrativo orientado por rotas do workflow oficial.</p>
-        </div>
-        <button type="button" onClick={logout}>
-          Logout
-        </button>
-      </header>
-
-      <nav className="admin-nav">
-        <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active' : '')}>
-          Dashboard
-        </NavLink>
-        <NavLink to="/eventos" className={({ isActive }) => (isActive ? 'active' : '')}>
-          Eventos
-        </NavLink>
-        <NavLink to="/aulas" className={({ isActive }) => (isActive ? 'active' : '')}>
-          Aulas
-        </NavLink>
-        <NavLink to="/quizzes" className={({ isActive }) => (isActive ? 'active' : '')}>
-          Quizzes
-        </NavLink>
-      </nav>
-
-      <section className="dashboard-grid two-col">
-        <article>
-          <h2>Runtime</h2>
-          <p>
-            API base URL: <code>{getApiBaseUrl()}</code>
-          </p>
-          <p>
-            Signed in as <strong>{session?.user?.username ?? 'admin'}</strong>
-          </p>
-        </article>
-
-        <article>
-          <h2>Feedback</h2>
-          {status ? <p className="feedback-ok">{status}</p> : <p>No recent actions.</p>}
-          {error ? <p className="feedback-error">{error}</p> : null}
-        </article>
-      </section>
+    <AdminDashboardPage
+      title="Admin Dashboard"
+      subtitle={sectionDetails[section] ?? 'Fluxo administrativo orientado por rotas do workflow oficial.'}
+      onLogout={logout}
+      navItems={navItems}
+    >
+      <AdminContentTemplate
+        leftTitle="Runtime"
+        rightTitle="Feedback"
+        left={(
+          <>
+            <p>
+              API base URL: <code>{getApiBaseUrl()}</code>
+            </p>
+            <p>
+              Signed in as <strong>{session?.user?.username ?? 'admin'}</strong>
+            </p>
+          </>
+        )}
+        right={(
+          <>
+            {status ? <p className="feedback-ok">{status}</p> : <p>No recent actions.</p>}
+            {error ? <p className="feedback-error">{error}</p> : null}
+          </>
+        )}
+      />
 
       {section === 'dashboard' ? (
-        <section className="dashboard-grid two-col">
-          <article>
-            <h2>Command Center</h2>
+        <AdminContentTemplate
+          leftTitle="Command Center"
+          rightTitle="Selecao Atual"
+          left={(
+            <>
             <p className="muted">Use o menu para operar cada etapa com foco por contexto.</p>
             <div className="inline-actions">
               <NavLink to="/eventos">Abrir Eventos</NavLink>
               <NavLink to="/aulas">Abrir Aulas</NavLink>
               <NavLink to="/quizzes">Abrir Quizzes</NavLink>
             </div>
-          </article>
-          <article>
-            <h2>Selecao Atual</h2>
+            </>
+          )}
+          right={(
+            <>
             <p className="muted">
               Evento: <strong>{selectedEvent?.title ?? 'Nenhum'}</strong>
             </p>
             <p className="muted">
               Aula: <strong>{selectedLesson?.title ?? 'Nenhuma'}</strong>
             </p>
-          </article>
-        </section>
+            </>
+          )}
+        />
       ) : null}
 
       {isEventosSection ? (
-        <section className="dashboard-grid two-col">
-        <article>
-          <h2>Events + Branding</h2>
+        <AdminContentTemplate
+          leftTitle="Events + Branding"
+          rightTitle="Selected Event Context"
+          left={(
+            <>
           <form className="stack-form" onSubmit={handleCreateEvent}>
             <input
               placeholder="Event title"
@@ -822,6 +842,16 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
               value={eventForm.description}
               onChange={(event) => setEventForm({ ...eventForm, description: event.target.value })}
             />
+            <textarea
+              placeholder="Short description (Hero)"
+              value={eventForm.shortDescription}
+              onChange={(event) => setEventForm({ ...eventForm, shortDescription: event.target.value })}
+            />
+            <textarea
+              placeholder="Long description"
+              value={eventForm.longDescription}
+              onChange={(event) => setEventForm({ ...eventForm, longDescription: event.target.value })}
+            />
             <div className="inline-fields">
               <select
                 value={eventForm.visibility}
@@ -897,6 +927,11 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
               value={eventForm.logoUrl}
               onChange={(event) => setEventForm({ ...eventForm, logoUrl: event.target.value })}
             />
+            <input
+              placeholder="Highlight video URL (YouTube)"
+              value={eventForm.highlightVideoUrl}
+              onChange={(event) => setEventForm({ ...eventForm, highlightVideoUrl: event.target.value })}
+            />
 
             <h3>AI Branding Generation</h3>
             <textarea
@@ -1042,17 +1077,18 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
               </li>
             ))}
           </ul>
-        </article>
-        <article>
-          <h2>Selected Event Context</h2>
+            </>
+          )}
+          right={(
+            <>
           {selectedEvent ? (
-            <div className="payload-preview">
+            <Card className="payload-preview">
               <p>
                 <strong>{selectedEvent.title}</strong>
               </p>
               <p className="muted">Slug: {selectedEvent.slug}</p>
               <p className="muted">Visibility: {selectedEvent.visibility}</p>
-            </div>
+            </Card>
           ) : (
             <p className="muted">
               {isEventEditMode
@@ -1060,14 +1096,17 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
                 : 'Select an event to continue with lesson and quiz flows.'}
             </p>
           )}
-        </article>
-      </section>
+            </>
+          )}
+        />
       ) : null}
 
       {section === 'aulas' ? (
-      <section className="dashboard-grid two-col">
-        <article>
-          <h2>Lessons</h2>
+      <AdminContentTemplate
+        leftTitle="Lessons"
+        rightTitle="Materials"
+        left={(
+          <>
           <form className="stack-form" onSubmit={handleCreateLesson}>
             <input
               placeholder="Lesson title"
@@ -1081,6 +1120,11 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
               onChange={(event) => setLessonForm({ ...lessonForm, slug: event.target.value })}
               required
             />
+            <textarea
+              placeholder="Short lesson description"
+              value={lessonForm.description}
+              onChange={(event) => setLessonForm({ ...lessonForm, description: event.target.value })}
+            />
             <div className="inline-fields">
               <select
                 value={lessonForm.videoProvider}
@@ -1143,10 +1187,10 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
               </li>
             ))}
           </ul>
-        </article>
-
-        <article>
-          <h2>Materials</h2>
+          </>
+        )}
+        right={(
+          <>
           <form className="stack-form" onSubmit={handleCreateMaterial}>
             <input
               placeholder="File name"
@@ -1192,14 +1236,17 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
               </li>
             ))}
           </ul>
-        </article>
-      </section>
+          </>
+        )}
+      />
       ) : null}
 
       {section === 'quizzes' ? (
-      <section className="dashboard-grid two-col">
-        <article>
-          <h2>Quizzes</h2>
+      <AdminContentTemplate
+        leftTitle="Quizzes"
+        rightTitle="Lesson Context"
+        left={(
+          <>
           <form className="stack-form" onSubmit={handleCreateQuiz}>
             <input
               placeholder="Quiz id (for load/update/delete)"
@@ -1262,26 +1309,28 @@ export const DashboardPage = ({ section = 'dashboard' }) => {
           </form>
 
           {quizPayload ? (
-            <div className="payload-preview">
+            <Card className="payload-preview">
               <strong>Loaded quiz:</strong> {quizPayload.title} ({quizPayload.id})
-            </div>
+            </Card>
           ) : null}
-        </article>
-        <article>
-          <h2>Lesson Context</h2>
+          </>
+        )}
+        right={(
+          <>
           {selectedLesson ? (
-            <div className="payload-preview">
+            <Card className="payload-preview">
               <p>
                 <strong>{selectedLesson.title}</strong>
               </p>
               <p className="muted">Slug: {selectedLesson.slug}</p>
-            </div>
+            </Card>
           ) : (
             <p className="muted">Select event and lesson in /aulas before creating quizzes.</p>
           )}
-        </article>
-      </section>
+          </>
+        )}
+      />
       ) : null}
-    </main>
+    </AdminDashboardPage>
   );
 };
diff --git a/apps/web/src/pages/CatalogPage.jsx b/apps/web/src/pages/CatalogPage.jsx
index 110b710..f248286 100644
--- a/apps/web/src/pages/CatalogPage.jsx
+++ b/apps/web/src/pages/CatalogPage.jsx
@@ -1,12 +1,23 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Card, LearnerCatalogPage, Text } from '@flix/design-system/components';
 import { fetchCatalog } from '../services/api.js';
 
 const eventKey = (eventSlug) => `flix.web.eventKey.${eventSlug}`;
 
+const getLessonThumbnail = (lesson) => {
+  if (lesson?.videoProvider === 'youtube' && lesson?.videoId) {
+    return `https://i.ytimg.com/vi/${lesson.videoId}/hqdefault.jpg`;
+  }
+  if (lesson?.videoProvider === 'vimeo' && lesson?.videoId) {
+    return `https://vumbnail.com/${lesson.videoId}.jpg`;
+  }
+  return '';
+};
+
 export const CatalogPage = () => {
   const { eventSlug } = useParams();
+  const navigate = useNavigate();
   const [catalog, setCatalog] = useState(null);
   const [accessKey, setAccessKey] = useState(() =>
     eventSlug ? window.localStorage.getItem(eventKey(eventSlug)) ?? '' : '',
@@ -47,17 +58,60 @@ export const CatalogPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventSlug]);
 
+  const handleWatchFirstLesson = async () => {
+    if (!eventSlug) return;
+
+    const navigateToFirstLesson = (items = []) => {
+      const firstLesson = items.find((lesson) => lesson?.slug);
+      if (!firstLesson?.slug) return false;
+      navigate(`/events/${eventSlug}/lessons/${firstLesson.slug}`);
+      return true;
+    };
+
+    if (navigateToFirstLesson(catalog?.catalog?.items ?? [])) {
+      return;
+    }
+
+    setLoading(true);
+    setError('');
+
+    try {
+      const body = await fetchCatalog(eventSlug, accessKey || undefined);
+      setCatalog(body);
+      if (accessKey) {
+        window.localStorage.setItem(eventKey(eventSlug), accessKey);
+      }
+
+      if (!navigateToFirstLesson(body?.catalog?.items ?? [])) {
+        setError('Nenhuma aula disponível para este evento.');
+      }
+    } catch (caughtError) {
+      setCatalog(null);
+      setError(caughtError?.message ?? 'Catalog request failed');
+    } finally {
+      setLoading(false);
+    }
+  };
+
   const releasedItems = releasedLessons.map((lesson) => ({
     id: lesson.id,
     title: lesson.title,
+    description: lesson.description ?? '',
     status: lesson.status,
+    imageUrl: getLessonThumbnail(lesson),
+    presetIconName: 'presetRecentlyAdded',
+    onClick: () => navigate(`/events/${eventSlug}/lessons/${lesson.slug}`),
     action: <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Open lesson</Link>,
   }));
 
   const gatedItems = gatedLessons.map((lesson) => ({
     id: lesson.id,
     title: lesson.title,
+    description: lesson.description ?? '',
     status: lesson.status,
+    imageUrl: getLessonThumbnail(lesson),
+    presetIconName: lesson.status === 'locked' ? 'presetTop10' : 'presetLeavingSoon',
+    onClick: () => navigate(`/events/${eventSlug}/lessons/${lesson.slug}`),
     action: <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Details</Link>,
   }));
 
@@ -77,10 +131,15 @@ export const CatalogPage = () => {
         eventSlug={eventSlug ?? ''}
         accessKey={accessKey}
         onAccessKeyChange={setAccessKey}
-        onLoad={loadCatalog}
+        onLoad={handleWatchFirstLesson}
         loading={loading}
-        heroTitle={catalog?.event?.title ?? 'Flix'}
-        heroDescription={catalog?.event?.description ?? ''}
+        eventVisibility={catalog?.event?.visibility}
+        eventTitle={catalog?.event?.title ?? ''}
+        eventDescription={catalog?.event?.longDescription ?? catalog?.event?.description ?? ''}
+        highlightVideoUrl={catalog?.event?.highlightVideoUrl ?? ''}
+        heroTitle={catalog?.event?.hero?.title ?? catalog?.event?.title ?? 'Flix'}
+        heroDescription={catalog?.event?.shortDescription ?? catalog?.event?.hero?.subtitle ?? catalog?.event?.description ?? ''}
+        heroCtaLabel={catalog?.event?.hero?.ctaText ?? 'Load catalog'}
         releasedItems={releasedItems}
         gatedItems={gatedItems}
       />
diff --git a/e2e/tests/admin-smoke.spec.mjs b/e2e/tests/admin-smoke.spec.mjs
index 67d774f..e8c6a02 100644
--- a/e2e/tests/admin-smoke.spec.mjs
+++ b/e2e/tests/admin-smoke.spec.mjs
@@ -12,7 +12,11 @@ test('admin happy path smoke: login and create event', async ({ page }) => {
   const randomSuffix = `${Date.now()}`;
   await page.getByPlaceholder('Event title').fill(`E2E Event ${randomSuffix}`);
   await page.getByRole('textbox', { name: 'Slug', exact: true }).fill(`e2e-event-${randomSuffix}`);
-  await page.getByPlaceholder('Description').fill('Smoke test event created via browser runtime');
+  await page
+    .getByPlaceholder('Description', { exact: true })
+    .fill('Smoke test event created via browser runtime');
+  await page.getByPlaceholder('Short description (Hero)').fill('Short hero copy for smoke validation');
+  await page.getByPlaceholder('Long description').fill('Long description for smoke validation');
   await page.getByPlaceholder('Hero title').fill(`Hero ${randomSuffix}`);
   await page.getByPlaceholder('Hero subtitle').fill('Subtitle for smoke validation');
   await page.getByPlaceholder('Hero CTA text').fill('Start now');
diff --git a/e2e/tests/learner-smoke.spec.mjs b/e2e/tests/learner-smoke.spec.mjs
index 6a306e9..944d4e3 100644
--- a/e2e/tests/learner-smoke.spec.mjs
+++ b/e2e/tests/learner-smoke.spec.mjs
@@ -3,24 +3,10 @@ import { expect, test } from '@playwright/test';
 test('learner happy path smoke: catalog to playback', async ({ page }) => {
   await page.goto('/events/flix-mvp-launch-event');
 
-  await expect(page.getByRole('heading', { name: 'Flix', exact: true })).toBeVisible();
-  await expect(page.getByRole('heading', { name: 'Catalog Access' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Assistir Aula' })).toBeVisible();
+  await expect(page.getByText('Próximas Aulas')).toBeVisible();
 
-  const lessonLink = page.locator('a[href*="/events/flix-mvp-launch-event/lessons/"]').first();
-  for (let attempt = 1; attempt <= 3; attempt += 1) {
-    await page.getByRole('button', { name: 'Load catalog' }).click();
-    try {
-      await expect(lessonLink).toBeVisible({ timeout: 8_000 });
-      break;
-    } catch (error) {
-      if (attempt === 3) {
-        throw error;
-      }
-      await page.waitForTimeout(1_000);
-    }
-  }
-
-  await lessonLink.click();
+  await page.getByRole('button', { name: 'Assistir Aula' }).click();
   await expect(page.getByRole('heading', { name: 'Lesson Playback' })).toBeVisible();
 
   await expect(page.getByRole('heading', { name: 'Lesson Materials' })).toBeVisible();
diff --git a/package-lock.json b/package-lock.json
index 4e643c7..ffab718 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1276,6 +1276,74 @@
         "node": ">=8"
       }
     },
+    "node_modules/@mux/mux-data-google-ima": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@mux/mux-data-google-ima/-/mux-data-google-ima-0.3.4.tgz",
+      "integrity": "sha512-j8IOD5kw1qIOkbpipEQRGQ7vXB6+CArrhIAvtvj8YFqy0PHi7JcHk4WR3ZBVy5+5yaRCH+nzHkmJmGsg8g6O5g==",
+      "license": "MIT",
+      "dependencies": {
+        "mux-embed": "5.16.1"
+      }
+    },
+    "node_modules/@mux/mux-player": {
+      "version": "3.11.4",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-3.11.4.tgz",
+      "integrity": "sha512-E7A6GIx3ECXjDIFuhkmuU0PRnnkTluKoi+jCuVtZWDnBLmeM9WxNTVIDyAJQX2Ro/BkTuZChMspObj9OgngLTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-video": "0.30.2",
+        "@mux/playback-core": "0.33.1",
+        "media-chrome": "~4.17.2",
+        "player.style": "^0.3.0"
+      }
+    },
+    "node_modules/@mux/mux-player-react": {
+      "version": "3.11.4",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-3.11.4.tgz",
+      "integrity": "sha512-bW0k7eC1d2hmttdWrmRNjiVa77lQ30V8Lz199GnyhwQhBbMa3unEiO5NbcYBuYNZTuXqxgVRiehMktuzbvY7VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-player": "3.11.4",
+        "@mux/playback-core": "0.33.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
+        "react": "^17.0.2 || ^17.0.0-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0",
+        "react-dom": "^17.0.2 || ^17.0.2-0 || ^18 || ^18.0.0-0 || ^19 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mux/mux-video": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.30.2.tgz",
+      "integrity": "sha512-JwNH7FwLSmPGdU355LvCL1MWyrMFl2dy6mSzyqiHp+14eBaoRu1Os4Dg2khw5dECJSIm7Z4ZMeDnHQc/rj7/YQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-data-google-ima": "^0.3.4",
+        "@mux/playback-core": "0.33.1",
+        "castable-video": "~1.1.11",
+        "custom-media-element": "~1.4.5",
+        "media-tracks": "~0.3.4"
+      }
+    },
+    "node_modules/@mux/playback-core": {
+      "version": "0.33.1",
+      "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.33.1.tgz",
+      "integrity": "sha512-lyfvZQuc5UebfJBqjZ+TiFHD3B08otJrNG+pYU2klv6ywYjpvnSCbWBif7YtaC4gIPUJjkErspXWND3w34ctIg==",
+      "license": "MIT",
+      "dependencies": {
+        "hls.js": "~1.6.15",
+        "mux-embed": "^5.16.1"
+      }
+    },
     "node_modules/@pinojs/redact": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@pinojs/redact/-/redact-0.4.0.tgz",
@@ -1662,6 +1730,130 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@svta/cml-608": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-608/-/cml-608-1.0.1.tgz",
+      "integrity": "sha512-Y/Ier9VPUSOBnf0bJqdDyTlPrt4dDB+jk5mYHa1bnD2kcRl8qn7KkW3PRuj4w1aVN+BS2eHmsLxodt7P2hylUg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@svta/cml-cmcd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cmcd/-/cml-cmcd-1.0.1.tgz",
+      "integrity": "sha512-eox305g+QUJgXqOLVrbgxeQHCgl90ewwQ9O2bIoo7m+hanR8Xswu5CknFnT5qqIbLOHfw80ug+raycoAFHTQ+w==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-cta": "1.0.1",
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-cmsd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cmsd/-/cml-cmsd-1.0.1.tgz",
+      "integrity": "sha512-+nIB8PuSfb/qw+xGaArPhNqPm84tBJUbe3H1DnPL5QUsjSUI7mUIUQwAtRV1ZdEu0+80g9i0op79woB0OIwr/g==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-cta": "1.0.1",
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-cta": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cta/-/cml-cta-1.0.1.tgz",
+      "integrity": "sha512-jcXqNIPv26bmFxIOFh8/c3+6WLH4qBjKpq9qTQcggDPoHuV1YBydMsJLOnYPDeK8rNMKcAkFLbnDRvyJthu5yw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-dash": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-dash/-/cml-dash-1.0.1.tgz",
+      "integrity": "sha512-lYnD1I7FUbbQND+xICI+kcRaRXuT+whKk27R8m8me5VMVu2sMsAMc7Yui6l9sxw2cBKt8pSETPYRm/1+n4LZkw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-id3": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-id3/-/cml-id3-1.0.1.tgz",
+      "integrity": "sha512-90fGlL1qRI88CcaB89k6NG6cC3kky4Eu2jwqU4HefqK+S5k2OASUxf8JXkGz+DsdaiY7sh51vGPYdolfBZS7ug==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-request": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-request/-/cml-request-1.0.1.tgz",
+      "integrity": "sha512-enL19BuXUjFkDDDF9jdNwUclMNPRsagnjGAetVC7xcmpDMpEx+ZLgsDip6BFNg5p6izSEk/OyujTWW1r8bDNiA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1",
+        "@svta/cml-xml": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-structured-field-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-structured-field-values/-/cml-structured-field-values-1.0.1.tgz",
+      "integrity": "sha512-Kibciki59Pon3Pn/sl5uyrbJcSpZQDKqdCfDrokBvOdLoqqcd0oFrkEPsZBiuuIODX1CB80612xe8hopeFDyBA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-utils/-/cml-utils-1.0.1.tgz",
+      "integrity": "sha512-kso3curTJfp00I1mKFoBliBApjn4aPE+wF8cPucf7TrSDVWZDeLLuF14ASmUE9m7rnrqTTK4878VvmXaXcCCfQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@svta/cml-xml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-xml/-/cml-xml-1.0.1.tgz",
+      "integrity": "sha512-11LkJa5kDEcsRMWkVI1ABH3KLCxGoiSVe4kQ293ItVj8ncTTQ7htmCGiJDjS+Cmy35UgF3e/vc0ysJIiWRTx2g==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -1815,6 +2007,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@vimeo/player": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.29.0.tgz",
+      "integrity": "sha512-9JjvjeqUndb9otCCFd0/+2ESsLk7VkDE6sxOBy9iy2ukezuQbplVRi+g9g59yAurKofbmTi/KcKxBGO/22zWRw==",
+      "license": "MIT",
+      "dependencies": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.4"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz",
@@ -2068,6 +2280,45 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/bcp-47": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bcp-47/-/bcp-47-2.1.0.tgz",
+      "integrity": "sha512-9IIS3UPrvIa1Ej+lVDdDwO7zLehjqsaByECw0bu2RRGP73jALm6FYbzI5gWbgHLvNdkvfXB5YrSbocZdOS0c0w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-match": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/bcp-47-normalize": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bcp-47-normalize/-/bcp-47-normalize-2.3.0.tgz",
+      "integrity": "sha512-8I/wfzqQvttUFz7HVJgIZ7+dj3vUaIyIxYXaTRP1YWoSDfzt6TUmxaKZeuXR62qBmYr+nvuWINFRl6pZ5DlN4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "bcp-47": "^2.0.0",
+        "bcp-47-match": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/bcryptjs": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
@@ -2149,6 +2400,24 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/castable-video": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.1.11.tgz",
+      "integrity": "sha512-LCRTK6oe7SB1SiUQFzZCo6D6gcEzijqBTVIuj3smKpQdesXM18QTbCVqWgh9MfOeQgTx/i9ji5jGcdqNPeWg2g==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "~1.4.5"
+      }
+    },
+    "node_modules/ce-la-react": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.2.tgz",
+      "integrity": "sha512-QJ6k4lOD/btI08xG8jBPxRCGXvCnusGGkTsiXk0u3NqUu/W+BXRnFD4PYjwtqh8AWmGa5LDbGk0fLQsqr0nSMA==",
+      "license": "BSD-3-Clause",
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -2220,6 +2489,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/cloudflare-video-element": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/cloudflare-video-element/-/cloudflare-video-element-1.3.5.tgz",
+      "integrity": "sha512-zj9gjJa6xW8MNrfc4oKuwgGS0njRLpOlQjdifbuNxvy8k4Y3pKCyKCMG2XIsjd2iQGhgjS57b1P5VWdJlxcXBw==",
+      "license": "MIT"
+    },
+    "node_modules/codem-isoboxer": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/codem-isoboxer/-/codem-isoboxer-0.3.10.tgz",
+      "integrity": "sha512-eNk3TRV+xQMJ1PEj0FQGY8KD4m0GPxT487XJ+Iftm7mVa9WpPFDMWqPt+46buiP5j5Wzqe5oMIhqBcAeKfygSA==",
+      "license": "MIT"
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2332,6 +2613,53 @@
         "node": "20 || >=22"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/custom-media-element": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.4.5.tgz",
+      "integrity": "sha512-cjrsQufETwxjvwZbYbKBCJNvmQ2++G9AvT45zDi7NXL9k2PdVcs2h0jQz96J6G4TMKRCcEsoJ+QTgQD00Igtjw==",
+      "license": "MIT"
+    },
+    "node_modules/dash-video-element": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/dash-video-element/-/dash-video-element-0.3.1.tgz",
+      "integrity": "sha512-KSdCd6lqjum4LizHLtB2EGvaGr7YJU7SZekTTDHixRondaRNcm0t9W2V3I7/itNBzQwdDbC1cKkXryc8I8IViA==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "^1.4.5",
+        "dashjs": "^5.0.3",
+        "media-tracks": "^0.3.4"
+      }
+    },
+    "node_modules/dashjs": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/dashjs/-/dashjs-5.1.1.tgz",
+      "integrity": "sha512-BzNXlUgzEjhuZ5M5hlSp1qIyQHZ7NpXAR0loP9DAAFVZj/ntL1DHeZ7qp/L3bvI4rq50X5indkAZQ3zEHWJoCA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@svta/cml-608": "1.0.1",
+        "@svta/cml-cmcd": "1.0.1",
+        "@svta/cml-cmsd": "1.0.1",
+        "@svta/cml-dash": "1.0.1",
+        "@svta/cml-id3": "1.0.1",
+        "@svta/cml-request": "1.0.1",
+        "@svta/cml-xml": "1.0.1",
+        "bcp-47-match": "^2.0.3",
+        "bcp-47-normalize": "^2.3.0",
+        "codem-isoboxer": "0.3.10",
+        "fast-deep-equal": "3.1.3",
+        "html-entities": "^2.5.2",
+        "imsc": "^1.1.5",
+        "localforage": "^1.10.0",
+        "path-browserify": "^1.0.1",
+        "ua-parser-js": "^1.0.37"
+      }
+    },
     "node_modules/data-urls": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-6.0.1.tgz",
@@ -2717,6 +3045,23 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/hls-video-element": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/hls-video-element/-/hls-video-element-1.5.10.tgz",
+      "integrity": "sha512-FruzD03CaQlPlNKfXO1njPbo3jCSImAtFwX1OqgFbMllTQzdYqAHODiWan0q3mr1cYCONOWiAz2/nX+2qHHC+g==",
+      "license": "MIT",
+      "dependencies": {
+        "custom-media-element": "^1.4.5",
+        "hls.js": "^1.6.5",
+        "media-tracks": "^0.3.4"
+      }
+    },
+    "node_modules/hls.js": {
+      "version": "1.6.15",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.15.tgz",
+      "integrity": "sha512-E3a5VwgXimGHwpRGV+WxRTKeSp2DW5DI5MWv34ulL3t5UNmyJWCQ1KmLEHbYzcfThfXG8amBL+fCYPneGHC4VA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-6.0.0.tgz",
@@ -2730,6 +3075,22 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -2758,6 +3119,21 @@
         "node": ">= 14"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
+    "node_modules/imsc": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/imsc/-/imsc-1.1.5.tgz",
+      "integrity": "sha512-V8je+CGkcvGhgl2C1GlhqFFiUOIEdwXbXLiu1Fcubvvbo+g9inauqT3l0pNYXGoLPBj3jxtZz9t+wCopMkwadQ==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "sax": "1.2.1"
+      }
+    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -2777,6 +3153,40 @@
         "node": ">= 10"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -2798,7 +3208,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/jsdom": {
@@ -2935,6 +3344,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/light-my-request": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/light-my-request/-/light-my-request-6.6.0.tgz",
@@ -2972,6 +3390,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
+      "integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
+      }
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -3014,6 +3441,18 @@
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3051,6 +3490,21 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/media-chrome": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.17.2.tgz",
+      "integrity": "sha512-o/IgiHx0tdSVwRxxqF5H12FK31A/A8T71sv3KdAvh7b6XeBS9dXwqvIFwlR9kdEuqg3n7xpmRIuL83rmYq8FTg==",
+      "license": "MIT",
+      "dependencies": {
+        "ce-la-react": "^0.3.2"
+      }
+    },
+    "node_modules/media-tracks": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.4.tgz",
+      "integrity": "sha512-5SUElzGMYXA7bcyZBL1YzLTxH9Iyw1AeYNJxzByqbestrrtB0F3wfiWUr7aROpwodO4fwnxOt78Xjb3o3ONNQg==",
+      "license": "MIT"
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -3067,6 +3521,12 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/mux-embed": {
+      "version": "5.16.1",
+      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.16.1.tgz",
+      "integrity": "sha512-XWeOG/nzrfRjdyDajW9VNiP0FuKZhEIHMh8Ybpo8uudQByRSOKH8qOaL+MEGdm7KAHzJunwoyYNodD059Spw/A==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -3086,6 +3546,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha512-zkVhZUA3y8mbz652WrL5x0fB0ehrBkulWT3TomAQ9iDtyXZvzKeEA6GPxAItBYeNYl5yngKRX612qHOhvMkDeg==",
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.27",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -3093,6 +3559,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/obug": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
@@ -3126,6 +3601,12 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -3191,6 +3672,31 @@
       "integrity": "sha512-BndPH67/JxGExRgiX1dX0w1FvZck5Wa4aal9198SrRhZjH3GxKQUKIBnYJTdj2HDN3UQAS06HlfcSbQj2OHmaw==",
       "license": "MIT"
     },
+    "node_modules/player.style": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.3.1.tgz",
+      "integrity": "sha512-z/T8hJGaTkHT9vdXgWdOgF37eB1FV7/j52VXQZ2lgEhpru9oT8TaUWIxp6GoxTnhPBM4X6nSbpkAHrT7UTjUKg==",
+      "license": "MIT",
+      "workspaces": [
+        ".",
+        "site",
+        "examples/*",
+        "scripts/*",
+        "themes/*"
+      ],
+      "dependencies": {
+        "media-chrome": "~4.16.1"
+      }
+    },
+    "node_modules/player.style/node_modules/media-chrome": {
+      "version": "4.16.1",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.16.1.tgz",
+      "integrity": "sha512-qtFlsy0lNDVCyVo//ZCAfRPKwgehfOYp6rThZzDUuZ5ypv41yqUfAxK+P9TOs+XSVWXATPTT2WRV0fbW0BH4vQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ce-la-react": "^0.3.2"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
@@ -3298,6 +3804,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3344,6 +3867,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-player": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/react-player/-/react-player-3.4.0.tgz",
+      "integrity": "sha512-QpQSHXtnMBKjQVNeaCYMtTVcynWQ0DDDhz/FJu1OR9PHLC1Aih94UqNstywzSHbJ6Oc7lI8/7kDDqcIvyTI6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@mux/mux-player-react": "^3.8.0",
+        "cloudflare-video-element": "^1.3.4",
+        "dash-video-element": "^0.3.0",
+        "hls-video-element": "^1.5.9",
+        "spotify-audio-element": "^1.0.3",
+        "tiktok-video-element": "^0.1.1",
+        "twitch-video-element": "^0.1.5",
+        "vimeo-video-element": "^1.6.1",
+        "wistia-video-element": "^1.3.5",
+        "youtube-video-element": "^1.8.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18 || ^19",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -3562,6 +4108,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/sax": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.1.tgz",
+      "integrity": "sha512-8I2a3LovHTOpm7NV5yOyO8IHqgVsfK4+UuySrXU8YXkSRX7k6hCV9b3HrkKCr3nMpgj+0bmocaJJWpvp1oc7ZA==",
+      "license": "ISC"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -3663,6 +4215,12 @@
         "node": ">= 10.x"
       }
     },
+    "node_modules/spotify-audio-element": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/spotify-audio-element/-/spotify-audio-element-1.0.4.tgz",
+      "integrity": "sha512-QdKrJPkYCzaNwwz2vN2eDGyoW0KmQFmnwVprB41mpMzj4qujbqr6pegEchQeTn0b5PceKiLoVu0pp2QDpTcWnw==",
+      "license": "MIT"
+    },
     "node_modules/stackback": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
@@ -3718,6 +4276,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/super-media-element": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/super-media-element/-/super-media-element-1.4.2.tgz",
+      "integrity": "sha512-9pP/CVNp4NF2MNlRzLwQkjiTgKKe9WYXrLh9+8QokWmMxz+zt2mf1utkWLco26IuA3AfVcTb//qtlTIjY3VHxA==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -3753,6 +4317,12 @@
         "node": ">=20"
       }
     },
+    "node_modules/tiktok-video-element": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tiktok-video-element/-/tiktok-video-element-0.1.2.tgz",
+      "integrity": "sha512-w6TboLm236XJKKiIXIhCbYCnUxbixBbaAoty0etaEAZ/2kHkVIdfZdv2oouMU/HGMsWCHI/VjQ3wU3MJ+s192Q==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -3869,6 +4439,38 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/twitch-video-element": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/twitch-video-element/-/twitch-video-element-0.1.6.tgz",
+      "integrity": "sha512-X7l8gy+DEFKJ/EztUwaVnAYwQN9fUJxPkOVJj2sE62sGvGU4DNLyvmOsmVulM+8Plc5dMg6hYIMNRAPaH+39Uw==",
+      "license": "MIT"
+    },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.41",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",
+      "integrity": "sha512-LbBDqdIC5s8iROCUjMbW1f5dJQTEFB1+KO9ogbvlb3nm9n4YHa5p4KTvFPWvh2Hs8gZMBuiB1/8+pdfe/tDPug==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -3900,6 +4502,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/vimeo-video-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/vimeo-video-element/-/vimeo-video-element-1.6.3.tgz",
+      "integrity": "sha512-pSBMYV+7KbChvtzuXGR3Sg7ZqaAZuTOnHrlZxrauIH2GWMLDnOEK5D0o7yWCcnswtQHVlIz6hXeJYbvQC+gAkw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vimeo/player": "2.29.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
@@ -4067,6 +4678,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/weakmap-polyfill": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.4.tgz",
+      "integrity": "sha512-ZzxBf288iALJseijWelmECm/1x7ZwQn3sMYIkDr2VvZp7r6SEKuT8D0O9Wiq6L9Nl5mazrOMcmiZE/2NCenaxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-8.0.1.tgz",
@@ -4118,6 +4738,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/wistia-video-element": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/wistia-video-element/-/wistia-video-element-1.3.6.tgz",
+      "integrity": "sha512-wPizIpXDaCs6fvDzhU3MBtEpxIqhgXlu00kSrKgmjPb5DRqZt927xZZjE1qm81Df40d445u4a/mRKX5I66zaYA==",
+      "license": "MIT",
+      "dependencies": {
+        "super-media-element": "~1.4.2"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -4237,6 +4866,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/youtube-video-element": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/youtube-video-element/-/youtube-video-element-1.8.1.tgz",
+      "integrity": "sha512-+5UuAGaj+5AnBf39huLVpy/4dLtR0rmJP1TxOHVZ81bac4ZHFpTtQ4Dz2FAn2GPnfXISezvUEaQoAdFW4hH9Xg==",
+      "license": "MIT"
+    },
     "node_modules/zod": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
@@ -4248,7 +4883,10 @@
     },
     "packages/design-system": {
       "name": "@flix/design-system",
-      "version": "0.1.0"
+      "version": "0.1.0",
+      "dependencies": {
+        "react-player": "^3.4.0"
+      }
     },
     "services/api": {
       "name": "@flix/api",
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index f8b3490..dd366ce 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -28,5 +28,8 @@
     "test": "echo 'design-system tests not configured yet'",
     "lint": "echo 'design-system lint not configured yet'",
     "typecheck": "echo 'design-system typecheck not configured yet'"
+  },
+  "dependencies": {
+    "react-player": "^3.4.0"
   }
 }
diff --git a/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx b/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx
index beb76b6..baf4e59 100644
--- a/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx
+++ b/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import { useState, type CSSProperties, type ReactNode } from 'react';
 import { Button } from '../atoms/Button';
 import { Icon } from '../atoms/Icon';
 
@@ -27,33 +27,60 @@ export const HeroBannerActionsPattern = ({
   primaryLeadingIconName = 'videoPlayerPlayDefault',
   secondaryLeadingIconName = 'info',
   style,
-}: HeroBannerActionsPatternProps): ReactNode => (
-  <div style={{ ...rowStyle, ...style }}>
-    <Button
-      type="button"
-      variant="play"
-      size="sm"
-      onClick={onPrimaryClick}
-      style={{
-        width: 'var(--fx-size-pattern-video-play-button-width)',
-        minHeight: 'var(--fx-size-pattern-hero-action-height)',
-      }}
-      leadingIcon={<Icon name={primaryLeadingIconName} size="var(--fx-size-pattern-video-button-icon)" />}
-    >
-      {primaryLabel}
-    </Button>
-    <Button
-      type="button"
-      variant="moreInfo"
-      size="sm"
-      onClick={onSecondaryClick}
-      style={{
-        width: 'var(--fx-size-pattern-video-more-info-button-width)',
-        minHeight: 'var(--fx-size-pattern-hero-action-height)',
-      }}
-      leadingIcon={<Icon name={secondaryLeadingIconName} size="var(--fx-size-pattern-video-button-icon)" />}
-    >
-      {secondaryLabel}
-    </Button>
-  </div>
-);
+}: HeroBannerActionsPatternProps): ReactNode => {
+  const [isPrimaryHovered, setIsPrimaryHovered] = useState(false);
+  const [isSecondaryHovered, setIsSecondaryHovered] = useState(false);
+
+  return (
+    <div style={{ ...rowStyle, ...style }}>
+      <Button
+        type="button"
+        variant="play"
+        size="sm"
+        onClick={onPrimaryClick}
+        onMouseEnter={() => setIsPrimaryHovered(true)}
+        onMouseLeave={() => setIsPrimaryHovered(false)}
+        onFocus={() => setIsPrimaryHovered(true)}
+        onBlur={() => setIsPrimaryHovered(false)}
+        style={{
+          width: 'fit-content',
+          minWidth: 'var(--fx-size-pattern-video-play-button-width)',
+          minHeight: 'var(--fx-size-pattern-hero-action-height)',
+          paddingInline: 'var(--fx-size-button-padding-x-sm)',
+          background: isPrimaryHovered ? '#E5E5E5' : '#FFFFFF',
+          borderColor: 'transparent',
+          color: '#141414',
+        }}
+        leadingIcon={
+          <Icon
+            name={primaryLeadingIconName}
+            size="var(--fx-size-pattern-video-button-icon)"
+            style={{ filter: 'brightness(0)' }}
+          />
+        }
+      >
+        {primaryLabel}
+      </Button>
+      <Button
+        type="button"
+        variant="moreInfo"
+        size="sm"
+        onClick={onSecondaryClick}
+        onMouseEnter={() => setIsSecondaryHovered(true)}
+        onMouseLeave={() => setIsSecondaryHovered(false)}
+        onFocus={() => setIsSecondaryHovered(true)}
+        onBlur={() => setIsSecondaryHovered(false)}
+        style={{
+          width: 'fit-content',
+          minWidth: 'var(--fx-size-pattern-video-more-info-button-width)',
+          minHeight: 'var(--fx-size-pattern-hero-action-height)',
+          paddingInline: 'var(--fx-size-button-padding-x-sm)',
+          background: isSecondaryHovered ? 'rgb(109 109 110 / 40%)' : 'rgb(109 109 110 / 70%)',
+        }}
+        leadingIcon={<Icon name={secondaryLeadingIconName} size="var(--fx-size-pattern-video-button-icon)" />}
+      >
+        {secondaryLabel}
+      </Button>
+    </div>
+  );
+};
diff --git a/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx b/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx
index ef193d6..e0f3705 100644
--- a/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx
+++ b/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx
@@ -4,7 +4,15 @@ import { Text } from '../atoms/Text';
 
 type HeroBannerRatingPatternProps = {
   ratingLabel: string;
-  leadingIconName?: 'heroBannerPreviewRepeatArrowDefault' | 'heroBannerPreviewRepeatArrowHover';
+  leadingIconName?:
+    | 'heroBannerPreviewRepeatArrowDefault'
+    | 'heroBannerPreviewRepeatArrowHover'
+    | 'heroBannerPreviewMuteDefault'
+    | 'heroBannerPreviewMuteHover'
+    | 'heroBannerPreviewSoundDefault'
+    | 'heroBannerPreviewSoundHover';
+  onLeadingIconClick?: () => void;
+  leadingControlLabel?: string;
   style?: CSSProperties;
 };
 
@@ -27,10 +35,31 @@ const ratingBoxStyle: CSSProperties = {
 export const HeroBannerRatingPattern = ({
   ratingLabel,
   leadingIconName = 'heroBannerPreviewRepeatArrowDefault',
+  onLeadingIconClick,
+  leadingControlLabel = 'Toggle audio',
   style,
 }: HeroBannerRatingPatternProps): ReactNode => (
   <div style={{ ...wrapperStyle, ...style }}>
-    <Icon name={leadingIconName} size="var(--fx-size-pattern-video-icon-control)" />
+    {onLeadingIconClick ? (
+      <button
+        type="button"
+        onClick={onLeadingIconClick}
+        aria-label={leadingControlLabel}
+        style={{
+          border: 0,
+          background: 'transparent',
+          padding: 0,
+          margin: 0,
+          cursor: 'pointer',
+          display: 'inline-flex',
+          lineHeight: 0,
+        }}
+      >
+        <Icon name={leadingIconName} size="var(--fx-size-pattern-video-icon-control)" />
+      </button>
+    ) : (
+      <Icon name={leadingIconName} size="var(--fx-size-pattern-video-icon-control)" />
+    )}
     <div style={ratingBoxStyle}>
       <Text as="span" variant="medium-headline2">
         {ratingLabel}
diff --git a/packages/design-system/src/components/molecules/MovieBlockCard.tsx b/packages/design-system/src/components/molecules/MovieBlockCard.tsx
index 411c53d..caa1b40 100644
--- a/packages/design-system/src/components/molecules/MovieBlockCard.tsx
+++ b/packages/design-system/src/components/molecules/MovieBlockCard.tsx
@@ -1,13 +1,20 @@
-import type { CSSProperties, ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { Icon } from '../atoms/Icon';
 
 type MovieBlockCardSize = 'small' | 'standard' | 'medium';
+type MovieBlockCardPresetPosition = 'top-left' | 'bottom-left';
 
 type MovieBlockCardProps = {
   imageUrl: string;
   imageAlt?: string;
   size?: MovieBlockCardSize;
   presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  presetPosition?: MovieBlockCardPresetPosition;
+  titleOverlay?: string;
+  descriptionOverlay?: string;
+  titleLines?: 1 | 2;
+  descriptionLines?: 1 | 2;
+  showCenteredPlayIcon?: boolean;
   onClick?: () => void;
   style?: CSSProperties;
 };
@@ -37,6 +44,7 @@ const cardBaseStyle: CSSProperties = {
   background: 'var(--fx-color-bg-hover)',
   cursor: 'pointer',
   display: 'inline-flex',
+  flexDirection: 'column',
 };
 
 const imageStyle: CSSProperties = {
@@ -51,23 +59,147 @@ export const MovieBlockCard = ({
   imageAlt = '',
   size = 'standard',
   presetIconName,
+  presetPosition = 'top-left',
+  titleOverlay,
+  descriptionOverlay,
+  titleLines = 2,
+  descriptionLines = 2,
+  showCenteredPlayIcon = false,
   onClick,
   style,
-}: MovieBlockCardProps): ReactNode => (
-  <button type="button" style={{ ...cardBaseStyle, ...sizeStyles[size], ...style }} onClick={onClick}>
-    <img src={imageUrl} alt={imageAlt} style={imageStyle} />
-    {presetIconName ? (
-      <Icon
-        name={presetIconName}
-        size="var(--fx-size-pattern-movie-card-preset-width)"
+}: MovieBlockCardProps): ReactNode => {
+  const hasTitleOverlay = Boolean(titleOverlay?.trim());
+  const hasDescriptionOverlay = Boolean(descriptionOverlay?.trim());
+  const resolvedCardSizeStyle: CSSProperties = hasTitleOverlay
+    ? { width: sizeStyles[size].width, height: 'auto' }
+    : sizeStyles[size];
+  const presetStyle: CSSProperties = {
+    position: 'absolute',
+    left: 'var(--fx-space-2)',
+    ...(presetPosition === 'bottom-left' ? { bottom: 'var(--fx-space-2)' } : { top: 'var(--fx-space-2)' }),
+    width: 'var(--fx-size-pattern-movie-card-preset-width)',
+    height: 'var(--fx-size-pattern-movie-card-preset-height)',
+  };
+
+  return (
+    <button
+      type="button"
+      className="fx-movie-block-card"
+      style={{ ...cardBaseStyle, ...resolvedCardSizeStyle, ...style }}
+      onClick={onClick}
+    >
+      <style>
+        {`
+          .fx-movie-block-card {
+            transition: transform 180ms ease, box-shadow 180ms ease;
+          }
+
+          .fx-movie-block-card:hover {
+            transform: scale(1.02);
+            box-shadow: 0 16px 28px rgb(0 0 0 / 35%);
+          }
+
+          .fx-movie-block-card:focus-visible {
+            outline: 2px solid var(--fx-color-text-primary);
+            outline-offset: 2px;
+          }
+        `}
+      </style>
+      <div
         style={{
-          position: 'absolute',
-          top: 'var(--fx-space-2)',
-          left: 'var(--fx-space-2)',
-          width: 'var(--fx-size-pattern-movie-card-preset-width)',
-          height: 'var(--fx-size-pattern-movie-card-preset-height)',
+          width: '100%',
+          ...(hasTitleOverlay ? { aspectRatio: '16 / 9', height: 'auto' } : { height: '100%' }),
+          position: 'relative',
+          flexShrink: 0,
+          overflow: 'hidden',
         }}
-      />
-    ) : null}
-  </button>
-);
+      >
+        <img src={imageUrl} alt={imageAlt} style={{ ...imageStyle, opacity: showCenteredPlayIcon ? 0.8 : 1 }} />
+        {showCenteredPlayIcon ? (
+          <span
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: 66,
+              height: 66,
+              borderRadius: '999px',
+              border: '2px solid rgb(255 255 255 / 88%)',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              background: 'rgb(0 0 0 / 20%)',
+              boxShadow: '0 8px 22px rgb(0 0 0 / 40%)',
+            }}
+          >
+            <Icon name="videoPlayerPlayDefault" size={22} />
+          </span>
+        ) : null}
+        {presetIconName && !hasTitleOverlay ? (
+          <Icon name={presetIconName} size="var(--fx-size-pattern-movie-card-preset-width)" style={presetStyle} />
+        ) : null}
+      </div>
+
+      {hasTitleOverlay ? (
+        <div
+          style={{
+            width: '100%',
+            minHeight: 'clamp(72px, 7vw, 120px)',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            padding: 'var(--fx-space-3) var(--fx-space-3) var(--fx-space-3)',
+            background: 'rgb(20 20 20 / 92%)',
+            boxSizing: 'border-box',
+            overflow: 'hidden',
+          }}
+        >
+          <div style={{ width: '100%', display: 'grid', gap: '6px' }}>
+            <span
+              style={{
+                width: '100%',
+                color: 'var(--fx-color-text-primary)',
+                fontFamily: 'var(--fx-font-sans)',
+                fontSize: 'clamp(13px, 1.15vw, 18px)',
+                lineHeight: '1.15',
+                fontWeight: 'var(--fx-font-weight-bold)',
+                letterSpacing: '-0.02em',
+                textAlign: 'left',
+                display: '-webkit-box',
+                WebkitLineClamp: titleLines,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}
+            >
+              {titleOverlay}
+            </span>
+
+            {hasDescriptionOverlay ? (
+              <span
+                style={{
+                  width: '100%',
+                  color: 'rgb(255 255 255 / 74%)',
+                  fontFamily: 'var(--fx-font-sans)',
+                  fontSize: 'clamp(12px, 1.05vw, 15px)',
+                  lineHeight: '1.3',
+                  fontWeight: 'var(--fx-font-weight-regular)',
+                  textAlign: 'left',
+                  display: '-webkit-box',
+                  WebkitLineClamp: descriptionLines,
+                  WebkitBoxOrient: 'vertical',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                }}
+              >
+                {descriptionOverlay}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      ) : null}
+
+    </button>
+  );
+};
diff --git a/packages/design-system/src/components/organisms/AdminPageHeader.tsx b/packages/design-system/src/components/organisms/AdminPageHeader.tsx
new file mode 100644
index 0000000..9bb0fee
--- /dev/null
+++ b/packages/design-system/src/components/organisms/AdminPageHeader.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { HomePageHeader, type HomeNavItem } from './HomePageHeader';
+
+type AdminPageHeaderProps = {
+  items: HomeNavItem[];
+  onLogout: () => void;
+};
+
+export const AdminPageHeader = ({ items, onLogout }: AdminPageHeaderProps): ReactNode => (
+  <header
+    style={{
+      width: '100%',
+      background: 'var(--fx-color-bg-primary)',
+    }}
+  >
+    <HomePageHeader
+      brandLabel="Netflix"
+      items={items}
+      searchControlLabel="Search"
+      notificationsControlLabel="Notifications"
+      profileControlLabel="Admin menu"
+      onProfileClick={onLogout}
+      style={{ maxWidth: 1320, margin: '0 auto', width: '100%' }}
+    />
+  </header>
+);
diff --git a/packages/design-system/src/components/organisms/HeroBanner.tsx b/packages/design-system/src/components/organisms/HeroBanner.tsx
index 54c563b..56b0806 100644
--- a/packages/design-system/src/components/organisms/HeroBanner.tsx
+++ b/packages/design-system/src/components/organisms/HeroBanner.tsx
@@ -24,6 +24,7 @@ type HeroBannerUtilityConfig = {
 
 type HeroBannerProps = {
   size?: HeroBannerSize;
+  mode?: 'default' | 'overlay';
   backgroundImageUrl?: string;
   backgroundImageAlt?: string;
   eyebrow?: string;
@@ -33,6 +34,8 @@ type HeroBannerProps = {
   badgeLabel?: string;
   actions?: HeroBannerActionConfig;
   utilities?: HeroBannerUtilityConfig;
+  titleStyle?: CSSProperties;
+  descriptionStyle?: CSSProperties;
   style?: CSSProperties;
 };
 
@@ -138,6 +141,7 @@ const imageOnlyVariants = new Set<HeroBannerSize>(['small2', 'small3']);
 
 export const HeroBanner = ({
   size = 'large',
+  mode = 'default',
   backgroundImageUrl,
   backgroundImageAlt = '',
   eyebrow,
@@ -147,9 +151,12 @@ export const HeroBanner = ({
   badgeLabel,
   actions,
   utilities,
+  titleStyle: customTitleStyle,
+  descriptionStyle: customDescriptionStyle,
   style,
 }: HeroBannerProps): ReactNode => {
   const showContent = !imageOnlyVariants.has(size);
+  const isOverlayMode = mode === 'overlay';
   const typeScale = variantTypography[size];
 
   return (
@@ -157,22 +164,37 @@ export const HeroBanner = ({
       style={{
         ...rootStyle,
         ...variantDimensions[size],
-        ...(showContent ? { display: 'grid', gridTemplateRows: 'var(--fx-size-pattern-hero-media-height) auto' } : null),
+        ...(showContent && !isOverlayMode ? { display: 'grid', gridTemplateRows: 'var(--fx-size-pattern-hero-media-height) auto' } : null),
+        ...(isOverlayMode ? { background: 'transparent', minHeight: 'auto' } : null),
         ...style,
       }}
     >
-      <div
-        style={{
-          ...mediaStyle,
-          ...(size === 'small3' ? { height: 'var(--fx-size-pattern-hero-small3-height)' } : null),
-        }}
-      >
-        {backgroundImageUrl ? <img src={backgroundImageUrl} alt={backgroundImageAlt} style={imageStyle} /> : null}
-        {!imageOnlyVariants.has(size) ? <div aria-hidden="true" style={mediaOverlayStyle} /> : null}
-      </div>
+      {!isOverlayMode ? (
+        <div
+          style={{
+            ...mediaStyle,
+            ...(size === 'small3' ? { height: 'var(--fx-size-pattern-hero-small3-height)' } : null),
+          }}
+        >
+          {backgroundImageUrl ? <img src={backgroundImageUrl} alt={backgroundImageAlt} style={imageStyle} /> : null}
+          {!imageOnlyVariants.has(size) ? <div aria-hidden="true" style={mediaOverlayStyle} /> : null}
+        </div>
+      ) : null}
 
       {showContent ? (
-        <div style={{ ...contentStyle, gap: typeScale.contentGap }}>
+        <div
+          style={{
+            ...contentStyle,
+            ...(isOverlayMode
+              ? {
+                  background: 'transparent',
+                  padding: 0,
+                  gap: 'var(--fx-space-3)',
+                }
+              : null),
+            gap: isOverlayMode ? 'var(--fx-space-3)' : typeScale.contentGap,
+          }}
+        >
           {badgeLabel ? (
             <span style={badgeStyle}>
               <Text as="span" variant="medium-caption1">
@@ -193,13 +215,13 @@ export const HeroBanner = ({
           ) : null}
 
           {title ? (
-            <Text as="h2" variant="bold-title2" style={{ ...titleStyle, fontSize: typeScale.titleSize }}>
+            <Text as="h2" variant="bold-title2" style={{ ...titleStyle, fontSize: typeScale.titleSize, ...customTitleStyle }}>
               {title}
             </Text>
           ) : null}
 
           {description ? (
-            <Text as="p" variant="regular-title3" style={{ ...descriptionStyle, fontSize: typeScale.descriptionSize }}>
+            <Text as="p" variant="regular-title3" style={{ ...descriptionStyle, fontSize: typeScale.descriptionSize, ...customDescriptionStyle }}>
               {description}
             </Text>
           ) : null}
diff --git a/packages/design-system/src/components/organisms/HomePageHeader.tsx b/packages/design-system/src/components/organisms/HomePageHeader.tsx
index 284c7cc..d3597dd 100644
--- a/packages/design-system/src/components/organisms/HomePageHeader.tsx
+++ b/packages/design-system/src/components/organisms/HomePageHeader.tsx
@@ -26,40 +26,44 @@ const headerStyle: CSSProperties = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  gap: 'var(--fx-space-6)',
-  padding: 'var(--fx-space-4) var(--fx-space-8)',
-  flexWrap: 'wrap',
+  gap: 'var(--fx-space-4)',
+  padding: '14px var(--fx-space-6)',
+  flexWrap: 'nowrap',
 };
 
 const leftStyle: CSSProperties = {
   display: 'inline-flex',
   alignItems: 'center',
-  gap: 'var(--fx-space-8)',
-  flexWrap: 'wrap',
+  gap: 'var(--fx-space-6)',
+  flexWrap: 'nowrap',
+  minWidth: 0,
 };
 
 const brandStyle: CSSProperties = {
   margin: 0,
   color: 'var(--fx-color-brand-primary)',
-  fontFamily: 'var(--fx-font-sans)',
-  fontSize: 'var(--fx-size-pattern-header-home-logo-size)',
-  lineHeight: '1',
-  fontWeight: 'var(--fx-font-weight-bold)',
-  letterSpacing: 'var(--fx-size-pattern-header-logo-letter-spacing)',
+  fontFamily: 'var(--fx-font-display)',
+  fontSize: '40px',
+  lineHeight: '0.9',
+  fontWeight: 'var(--fx-font-weight-regular)',
+  letterSpacing: '0.05em',
   textTransform: 'uppercase',
+  flexShrink: 0,
 };
 
 const navStyle: CSSProperties = {
   display: 'inline-flex',
   alignItems: 'center',
-  gap: 'var(--fx-space-5)',
-  flexWrap: 'wrap',
+  gap: '18px',
+  flexWrap: 'nowrap',
+  minWidth: 0,
 };
 
 const rightStyle: CSSProperties = {
   display: 'inline-flex',
   alignItems: 'center',
-  gap: 'var(--fx-space-4)',
+  gap: '14px',
+  flexShrink: 0,
 };
 
 const iconButtonStyle: CSSProperties = {
@@ -90,22 +94,130 @@ export const HomePageHeader = ({
   onProfileClick,
   style,
 }: HomePageHeaderProps): ReactNode => (
-  <header style={{ ...headerStyle, ...style }}>
-    <div style={leftStyle}>
-      <h2 style={brandStyle}>{brandLabel}</h2>
-      <nav style={navStyle} aria-label="Primary">
+  <header className="fx-home-header" style={{ ...headerStyle, ...style }}>
+    <style>
+      {`
+        .fx-home-header {
+          box-sizing: border-box;
+        }
+
+        .fx-home-header-left {
+          overflow: hidden;
+        }
+
+        .fx-home-header-nav {
+          overflow-x: auto;
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+        }
+
+        .fx-home-header-nav::-webkit-scrollbar {
+          display: none;
+        }
+
+        .fx-home-nav-link {
+          --fx-home-nav-link-color: var(--fx-color-text-secondary);
+          transition: color 140ms ease, opacity 140ms ease;
+          color: var(--fx-home-nav-link-color);
+          white-space: nowrap;
+        }
+
+        .fx-home-nav-link.is-active {
+          --fx-home-nav-link-color: var(--fx-color-text-primary);
+          font-weight: var(--fx-font-weight-medium);
+        }
+
+        .fx-home-nav-link:hover {
+          color: var(--fx-color-text-primary);
+          opacity: 0.92;
+        }
+
+        .fx-home-nav-link:focus-visible {
+          outline: 2px solid var(--fx-color-text-primary);
+          outline-offset: 4px;
+          border-radius: 2px;
+        }
+
+        .fx-home-icon-button {
+          transition: opacity 140ms ease;
+        }
+
+        .fx-home-icon-button:hover {
+          opacity: 0.86;
+        }
+
+        .fx-home-icon-button:focus-visible {
+          outline: 2px solid var(--fx-color-text-primary);
+          outline-offset: 3px;
+          border-radius: 3px;
+        }
+
+        @media (max-width: 1280px) {
+          .fx-home-header {
+            padding: 12px var(--fx-space-5);
+          }
+
+          .fx-home-header-brand {
+            font-size: 34px;
+          }
+        }
+
+        @media (max-width: 900px) {
+          .fx-home-header {
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            padding: 10px var(--fx-space-4);
+          }
+
+          .fx-home-header-left {
+            width: auto;
+            flex: 1 1 auto;
+            min-width: 0;
+            gap: var(--fx-space-3);
+          }
+
+          .fx-home-header-nav {
+            max-width: min(62vw, 420px);
+            justify-content: flex-start;
+          }
+        }
+
+        @media (max-width: 640px) {
+          .fx-home-header-brand {
+            font-size: 30px;
+          }
+
+          .fx-home-header-nav {
+            max-width: min(56vw, 260px);
+            gap: 14px;
+          }
+
+          .fx-home-nav-link {
+            font-size: 12px;
+            line-height: 18px;
+          }
+        }
+      `}
+    </style>
+    <div className="fx-home-header-left" style={leftStyle}>
+      <h2 className="fx-home-header-brand" style={brandStyle}>{brandLabel}</h2>
+      <nav className="fx-home-header-nav" style={navStyle} aria-label="Primary">
         {items.map((item) => (
           <a
+            className={`fx-home-nav-link${item.active ? ' is-active' : ''}`}
             key={item.href}
             href={item.href}
             style={{
-              color: item.active ? 'var(--fx-color-text-primary)' : 'var(--fx-color-text-secondary)',
+              background: 'transparent',
+              border: 0,
+              borderRadius: 0,
+              padding: 0,
               textDecoration: 'none',
               fontFamily: 'var(--fx-font-sans)',
-              fontSize: 'var(--fx-typo-medium-headline2-size)',
-              lineHeight: 'var(--fx-typo-medium-headline2-line)',
-              fontWeight: item.active ? 'var(--fx-font-weight-medium)' : 'var(--fx-font-weight-regular)',
-              letterSpacing: 'var(--fx-typo-medium-headline2-spacing)',
+              fontSize: '14px',
+              lineHeight: '20px',
+              fontWeight: 'var(--fx-font-weight-regular)',
+              letterSpacing: '0.01em',
             }}
           >
             {item.label}
@@ -115,13 +227,31 @@ export const HomePageHeader = ({
     </div>
 
     <div style={rightStyle}>
-      <button type="button" onClick={onSearchClick} style={iconButtonStyle} aria-label={searchControlLabel}>
+      <button
+        className="fx-home-icon-button"
+        type="button"
+        onClick={onSearchClick}
+        style={iconButtonStyle}
+        aria-label={searchControlLabel}
+      >
         <Icon name="search" size="var(--fx-size-pattern-header-action-icon-size)" />
       </button>
-      <button type="button" onClick={onNotificationsClick} style={iconButtonStyle} aria-label={notificationsControlLabel}>
+      <button
+        className="fx-home-icon-button"
+        type="button"
+        onClick={onNotificationsClick}
+        style={iconButtonStyle}
+        aria-label={notificationsControlLabel}
+      >
         <Icon name="notification" size="var(--fx-size-pattern-header-action-icon-size)" />
       </button>
-      <button type="button" onClick={onProfileClick} style={profileButtonStyle} aria-label={profileControlLabel}>
+      <button
+        className="fx-home-icon-button"
+        type="button"
+        onClick={onProfileClick}
+        style={profileButtonStyle}
+        aria-label={profileControlLabel}
+      >
         <Icon name={profileIconName} size="var(--fx-size-pattern-header-avatar-size)" />
         <Icon name="arrowDown" size="var(--fx-size-pattern-header-caret-size)" />
       </button>
diff --git a/packages/design-system/src/components/organisms/LoadingScreen.tsx b/packages/design-system/src/components/organisms/LoadingScreen.tsx
new file mode 100644
index 0000000..fcb69c1
--- /dev/null
+++ b/packages/design-system/src/components/organisms/LoadingScreen.tsx
@@ -0,0 +1,171 @@
+import { useEffect, useState } from 'react';
+
+type LoadingScreenProps = {
+  isReady: boolean;
+  brandLabel?: string;
+  loadingLabel?: string;
+};
+
+export const LoadingScreen = ({
+  isReady,
+  brandLabel = 'FLIX',
+  loadingLabel = 'Preparando sua experiencia',
+}: LoadingScreenProps) => {
+  const [shouldExit, setShouldExit] = useState(false);
+
+  useEffect(() => {
+    if (!isReady) {
+      setShouldExit(false);
+      return undefined;
+    }
+
+    const timer = window.setTimeout(() => {
+      setShouldExit(true);
+    }, 1000);
+
+    return () => window.clearTimeout(timer);
+  }, [isReady]);
+
+  if (shouldExit) return null;
+
+  return (
+    <div
+      aria-live="polite"
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 10000,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background:
+          'radial-gradient(circle at 15% 12%, rgb(229 9 20 / 36%) 0%, transparent 44%), radial-gradient(circle at 78% 18%, rgb(18 63 124 / 22%) 0%, transparent 40%), radial-gradient(circle at 62% 78%, rgb(229 9 20 / 16%) 0%, transparent 38%), linear-gradient(180deg, #090909 0%, #111111 52%, #090909 100%)',
+        animation: isReady ? 'fx-loader-fade-out 0.8s ease-in-out forwards' : undefined,
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'linear-gradient(90deg, rgb(0 0 0 / 56%) 0%, rgb(0 0 0 / 28%) 46%, rgb(0 0 0 / 58%) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          width: 'min(42vw, 560px)',
+          height: 'min(42vw, 560px)',
+          left: '-12%',
+          top: '-14%',
+          borderRadius: '999px',
+          background:
+            'radial-gradient(circle at 35% 35%, rgb(229 9 20 / 40%) 0%, rgb(229 9 20 / 6%) 55%, transparent 75%)',
+          filter: 'blur(4px)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          width: 'min(36vw, 460px)',
+          height: 'min(36vw, 460px)',
+          right: '-10%',
+          bottom: '-20%',
+          borderRadius: '999px',
+          background:
+            'radial-gradient(circle at 55% 40%, rgb(229 9 20 / 28%) 0%, rgb(229 9 20 / 4%) 58%, transparent 78%)',
+          filter: 'blur(6px)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <style>
+        {`
+          @keyframes fx-loader-fade-out {
+            from { opacity: 1; }
+            to { opacity: 0; }
+          }
+
+          @keyframes fx-loader-logo-pulse {
+            0% { transform: scale(0.8); opacity: 0; }
+            100% { transform: scale(1); opacity: 1; }
+          }
+
+          @keyframes fx-loader-bar-run {
+            from { left: -100%; }
+            to { left: 100%; }
+          }
+
+          @keyframes fx-loader-label-fade {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        `}
+      </style>
+
+      <div
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          marginBottom: '32px',
+          color: 'var(--fx-color-brand-primary, #e50914)',
+          fontWeight: 900,
+          letterSpacing: '-0.03em',
+          fontSize: 'clamp(3rem, 7vw, 5rem)',
+          animation: 'fx-loader-logo-pulse 1s ease-out infinite alternate',
+        }}
+      >
+        {brandLabel}
+      </div>
+
+      <div
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          height: '4px',
+          width: 'min(80vw, 320px)',
+          overflow: 'hidden',
+          borderRadius: '999px',
+          backgroundColor: '#27272a',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            height: '100%',
+            width: '50%',
+            background:
+              'linear-gradient(90deg, transparent 0%, var(--fx-color-brand-primary, #e50914) 50%, transparent 100%)',
+            animation: 'fx-loader-bar-run 1.5s linear infinite',
+          }}
+        />
+      </div>
+
+      <p
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          marginTop: '16px',
+          color: '#71717a',
+          textTransform: 'uppercase',
+          letterSpacing: '0.3em',
+          fontSize: '12px',
+          fontWeight: 500,
+          animation: 'fx-loader-label-fade 0.4s ease 0.5s forwards',
+          opacity: 0,
+        }}
+      >
+        {loadingLabel}
+      </p>
+    </div>
+  );
+};
diff --git a/packages/design-system/src/components/organisms/index.ts b/packages/design-system/src/components/organisms/index.ts
index 77e8cdd..17433e6 100644
--- a/packages/design-system/src/components/organisms/index.ts
+++ b/packages/design-system/src/components/organisms/index.ts
@@ -1,4 +1,5 @@
 export * from './AdminHeader';
+export * from './AdminPageHeader';
 export * from './AppTopNav';
 export * from './ContinueWatchingPattern';
 export * from './FaqQuestionsPattern';
@@ -7,6 +8,7 @@ export * from './HomeHero';
 export * from './HomePageHeader';
 export * from './LandingPageHeader';
 export * from './LessonRail';
+export * from './LoadingScreen';
 export * from './HeroMobile';
 export * from './ListOfEpisodesPattern';
 export * from './MovieBlocksPattern';
diff --git a/packages/design-system/src/components/templates/AdminContentTemplate.tsx b/packages/design-system/src/components/templates/AdminContentTemplate.tsx
index cf6bfc8..d27de72 100644
--- a/packages/design-system/src/components/templates/AdminContentTemplate.tsx
+++ b/packages/design-system/src/components/templates/AdminContentTemplate.tsx
@@ -10,7 +10,7 @@ type AdminContentTemplateProps = {
 };
 
 export const AdminContentTemplate = ({ leftTitle, rightTitle, left, right }: AdminContentTemplateProps) => (
-  <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--fx-space-4)' }}>
+  <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--fx-space-6)' }}>
     <Card>
       <Text as="h2" variant="medium-title2" style={{ marginTop: 0 }}>
         {leftTitle}
diff --git a/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx b/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx
index e0292e5..26a234d 100644
--- a/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx
+++ b/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-import { AdminHeader } from '../organisms/AdminHeader';
-import { AppTopNav } from '../organisms/AppTopNav';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+import { AdminPageHeader } from '../organisms/AdminPageHeader';
 
 type AdminDashboardTemplateProps = {
   title: string;
@@ -17,9 +18,28 @@ export const AdminDashboardTemplate = ({
   navItems,
   children,
 }: AdminDashboardTemplateProps) => (
-  <main style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gap: 'var(--fx-space-4)', padding: 'var(--fx-space-6)' }}>
-    <AdminHeader title={title} subtitle={subtitle} onLogout={onLogout} />
-    <AppTopNav brand="Flix" items={navItems} />
-    {children}
+  <main style={{ width: '100%', display: 'grid' }}>
+    <AdminPageHeader items={navItems} onLogout={onLogout} />
+    <section
+      style={{
+        maxWidth: 1320,
+        width: '100%',
+        margin: '0 auto',
+        display: 'grid',
+        gap: 'var(--fx-space-6)',
+        padding: 'var(--fx-space-6) var(--fx-space-6) var(--fx-space-8)',
+        boxSizing: 'border-box',
+      }}
+    >
+      <Card>
+        <Text as="h1" variant="display-large" style={{ margin: 0 }}>
+          {title}
+        </Text>
+        <Text tone="secondary" variant="regular-body" style={{ marginTop: 'var(--fx-space-2)' }}>
+          {subtitle}
+        </Text>
+      </Card>
+      {children}
+    </section>
   </main>
 );
diff --git a/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx b/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx
index 1f880fb..a2d480c 100644
--- a/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx
+++ b/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx
@@ -1,14 +1,22 @@
-import type { ReactNode } from 'react';
-import { AccessKeyForm } from '../molecules/AccessKeyForm';
-import { Card } from '../atoms/Card';
+import { useMemo, useState, useEffect, useRef, type ReactNode } from 'react';
+import ReactPlayer from 'react-player';
 import { Text } from '../atoms/Text';
+import { Icon } from '../atoms/Icon';
+import { MovieBlockCard } from '../molecules/MovieBlockCard';
+import { HeroBannerRatingPattern } from '../molecules/HeroBannerRatingPattern';
 import { HeroBanner } from '../organisms/HeroBanner';
-import { LessonRail } from '../organisms/LessonRail';
+import { HomePageHeader } from '../organisms/HomePageHeader';
+import { LoadingScreen } from '../organisms/LoadingScreen';
 
 type LessonItem = {
   id: string;
   title: string;
+  description?: string;
   status: 'released' | 'locked' | 'expired';
+  imageUrl?: string;
+  imageAlt?: string;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
   action?: ReactNode;
 };
 
@@ -18,36 +26,734 @@ type LearnerCatalogTemplateProps = {
   onAccessKeyChange: (next: string) => void;
   onLoad: () => void;
   loading?: boolean;
+  eventVisibility?: 'public' | 'private';
+  eventTitle?: string;
+  eventDescription?: string;
+  highlightVideoUrl?: string;
   heroTitle: string;
   heroDescription?: string;
+  heroCtaLabel?: string;
   releasedItems: LessonItem[];
   gatedItems: LessonItem[];
 };
 
+const defaultHeroBackground =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23131313'/%3E%3Cstop offset='55%25' stop-color='%230f1e2f'/%3E%3Cstop offset='100%25' stop-color='%23131313'/%3E%3C/linearGradient%3E%3CradialGradient id='glow' cx='0.2' cy='0.15' r='0.6'%3E%3Cstop offset='0%25' stop-color='%23e50914' stop-opacity='0.45'/%3E%3Cstop offset='100%25' stop-color='%23e50914' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23bg)'/%3E%3Crect width='1600' height='900' fill='url(%23glow)'/%3E%3C/svg%3E";
+const defaultHeroVideoUrl = 'https://www.youtube.com/watch?v=M7lc1UVf-VE';
+
+const isYouTubeUrl = (url: string) => /youtu\.be|youtube(?:-nocookie)?\.com/i.test(url);
+
+const getYouTubeVideoId = (url: string) => {
+  const patterns = [
+    /youtu\.be\/([^?&#/]+)/i,
+    /youtube\.com\/watch\?v=([^?&#/]+)/i,
+    /youtube\.com\/embed\/([^?&#/]+)/i,
+    /youtube-nocookie\.com\/embed\/([^?&#/]+)/i,
+    /youtube\.com\/shorts\/([^?&#/]+)/i,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match?.[1]) return match[1];
+  }
+
+  return null;
+};
+
+const getVimeoVideoId = (url: string) => {
+  const patterns = [/vimeo\.com\/(\d+)/i, /player\.vimeo\.com\/video\/(\d+)/i, /^(\d{6,12})$/];
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match?.[1]) return match[1];
+  }
+  return null;
+};
+
+const normalizeVideoUrl = (input: string) => {
+  const raw = input.trim();
+  if (!raw) return '';
+
+  if (/^[a-zA-Z0-9_-]{11}$/.test(raw)) {
+    return `https://www.youtube-nocookie.com/embed/${raw}`;
+  }
+
+  if (isYouTubeUrl(raw)) {
+    const id = getYouTubeVideoId(raw);
+    if (id) return `https://www.youtube-nocookie.com/embed/${id}`;
+  }
+
+  const vimeoId = getVimeoVideoId(raw);
+  if (vimeoId) {
+    return `https://vimeo.com/${vimeoId}`;
+  }
+
+  if (!/^https?:\/\//i.test(raw) && !raw.startsWith('/')) {
+    return `https://${raw}`;
+  }
+
+  return raw.trim();
+};
+
+const isAbortLikePlayerError = (error: unknown) => {
+  if (!error) return false;
+  const message =
+    typeof error === 'string'
+      ? error
+      : typeof error === 'object' && error !== null && 'message' in error
+        ? String((error as { message?: unknown }).message ?? '')
+        : String(error);
+  const normalized = message.toLowerCase();
+  return normalized.includes('aborterror') || normalized.includes('play() request was interrupted');
+};
+
+const buildCandidateVideoUrls = (highlightVideoUrl: string) => {
+  const candidates = [
+    normalizeVideoUrl(highlightVideoUrl),
+    defaultHeroVideoUrl,
+    'https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
+  ]
+    .filter(Boolean)
+    .filter((url, index, list) => list.indexOf(url) === index);
+
+  return candidates.filter((url) => ReactPlayer.canPlay?.(url) ?? true);
+};
+
+const encodeSvg = (value: string) =>
+  value
+    .replace(/%/g, '%25')
+    .replace(/</g, '%3C')
+    .replace(/>/g, '%3E')
+    .replace(/#/g, '%23')
+    .replace(/"/g, '%22')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const buildFallbackCardImage = (seed: string, title: string) => {
+  const palette = [
+    ['#2d0a10', '#0f1015'],
+    ['#121e38', '#0c1018'],
+    ['#37210a', '#101216'],
+    ['#2a122f', '#0f1015'],
+  ];
+  const hash = Array.from(seed).reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const [start, end] = palette[hash % palette.length];
+  const shortTitle = (title || 'Untitled').slice(0, 34);
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0%' stop-color='${start}'/><stop offset='100%' stop-color='${end}'/></linearGradient></defs><rect width='360' height='200' fill='url(#g)'/><rect x='0' y='0' width='360' height='200' fill='rgba(0,0,0,.22)'/><text x='18' y='170' fill='white' font-family='Arial,sans-serif' font-size='22' font-weight='700'>${shortTitle}</text></svg>`;
+  return `data:image/svg+xml,${encodeSvg(svg)}`;
+};
+
 export const LearnerCatalogTemplate = ({
   eventSlug,
   accessKey,
   onAccessKeyChange,
   onLoad,
   loading,
+  eventVisibility = 'public',
+  eventTitle = '',
+  eventDescription = '',
+  highlightVideoUrl = '',
   heroTitle,
   heroDescription,
+  heroCtaLabel = 'Load catalog',
   releasedItems,
   gatedItems,
-}: LearnerCatalogTemplateProps) => (
-  <main style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gap: 'var(--fx-space-4)', padding: 'var(--fx-space-6)' }}>
-    <Card>
-      <Text as="h1" variant="display-large">Flix</Text>
-      <Text variant="regular-body" style={{ marginTop: 'var(--fx-space-2)' }}>
-        Event: <code>{eventSlug}</code>
-      </Text>
-      <Text as="h2" variant="medium-title2" style={{ marginTop: 'var(--fx-space-4)' }}>
-        Catalog Access
-      </Text>
-      <AccessKeyForm value={accessKey} onChange={onAccessKeyChange} onSubmit={onLoad} loading={loading} />
-    </Card>
-    <HeroBanner eyebrow="Featured event" title={heroTitle} description={heroDescription} />
-    <LessonRail title="Continue learning" items={releasedItems} />
-    <LessonRail title="Scheduled or restricted" items={gatedItems} />
-  </main>
-);
+}: LearnerCatalogTemplateProps) => {
+  const playerRef = useRef<any>(null);
+  const railRef = useRef<HTMLDivElement | null>(null);
+  const loopSeekLockRef = useRef(false);
+  const activeVideoUrlRef = useRef('');
+  const [isMounted, setIsMounted] = useState(false);
+  const [isHeroReady, setIsHeroReady] = useState(false);
+  const [hasVideoError, setHasVideoError] = useState(false);
+  const [hasMinPreload, setHasMinPreload] = useState(false);
+  const [isPlayerReady, setIsPlayerReady] = useState(false);
+  const [isHeroMuted, setIsHeroMuted] = useState(true);
+  const [canScrollRailPrev, setCanScrollRailPrev] = useState(false);
+  const [canScrollRailNext, setCanScrollRailNext] = useState(false);
+  const [videoDuration, setVideoDuration] = useState(0);
+  const candidateVideoUrls = useMemo(() => buildCandidateVideoUrls(highlightVideoUrl), [highlightVideoUrl]);
+  const [currentCandidateIndex, setCurrentCandidateIndex] = useState(0);
+  const currentVideoUrl = candidateVideoUrls[currentCandidateIndex] ?? '';
+  const currentYouTubeVideoId = useMemo(() => getYouTubeVideoId(currentVideoUrl) ?? '', [currentVideoUrl]);
+  const resolvedHeroTitle = heroTitle || eventTitle || 'Flix';
+  const resolvedHeroDescription = heroDescription || eventDescription || undefined;
+  const heroRailItems = useMemo(
+    () =>
+      [...releasedItems, ...gatedItems]
+        .slice(0, 10)
+        .map((item) => ({
+          ...item,
+          imageUrl: item.imageUrl || buildFallbackCardImage(item.id, item.title),
+        })),
+    [releasedItems, gatedItems],
+  );
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  useEffect(() => {
+    setCurrentCandidateIndex(0);
+    setHasVideoError(false);
+    setHasMinPreload(false);
+    setIsPlayerReady(false);
+    setIsHeroReady(false);
+    setVideoDuration(0);
+    loopSeekLockRef.current = false;
+  }, [candidateVideoUrls]);
+
+  useEffect(() => {
+    if (candidateVideoUrls.length > 0) return;
+    setHasVideoError(true);
+    setHasMinPreload(true);
+    setIsPlayerReady(true);
+  }, [candidateVideoUrls]);
+
+  useEffect(() => {
+    activeVideoUrlRef.current = currentVideoUrl;
+  }, [currentVideoUrl]);
+
+  useEffect(() => {
+    if (isPlayerReady && hasMinPreload) {
+      setIsHeroReady(true);
+    }
+  }, [isPlayerReady, hasMinPreload]);
+
+  useEffect(() => {
+    if (!isPlayerReady || hasMinPreload) return undefined;
+
+    // Fallback de segurança: se o provider não reportar progresso corretamente,
+    // libera após curto delay desde o ready do player para evitar tela travada.
+    const timer = window.setTimeout(() => {
+      setHasMinPreload(true);
+    }, 1800);
+
+    return () => window.clearTimeout(timer);
+  }, [isPlayerReady, hasMinPreload]);
+
+  useEffect(() => {
+    const rail = railRef.current;
+    if (!rail || heroRailItems.length <= 4) {
+      setCanScrollRailPrev(false);
+      setCanScrollRailNext(false);
+      return;
+    }
+
+    const updateRailControls = () => {
+      const maxScrollLeft = rail.scrollWidth - rail.clientWidth;
+      const epsilon = 2;
+      setCanScrollRailPrev(rail.scrollLeft > epsilon);
+      setCanScrollRailNext(rail.scrollLeft < maxScrollLeft - epsilon);
+    };
+
+    updateRailControls();
+    rail.addEventListener('scroll', updateRailControls, { passive: true });
+    window.addEventListener('resize', updateRailControls);
+
+    return () => {
+      rail.removeEventListener('scroll', updateRailControls);
+      window.removeEventListener('resize', updateRailControls);
+    };
+  }, [heroRailItems]);
+
+  const scrollRail = (direction: 'prev' | 'next') => {
+    const rail = railRef.current;
+    if (!rail) return;
+
+    const firstCard = rail.firstElementChild as HTMLElement | null;
+    const step = firstCard ? firstCard.getBoundingClientRect().width + 10 : rail.clientWidth * 0.85;
+    rail.scrollBy({
+      left: direction === 'next' ? step : -step,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <main style={{ width: '100%', display: 'grid', gap: 'var(--fx-space-6)' }}>
+      <LoadingScreen isReady={isHeroReady} />
+
+      <section
+        className="fx-catalog-hero"
+        style={{
+          width: '100%',
+          position: 'relative',
+          minHeight: 'calc((56.25vw * 0.9) + 96px)',
+          height: 'auto',
+          overflow: 'visible',
+          paddingBottom: 96,
+          background: 'var(--fx-color-bg-primary)',
+        }}
+      >
+        {isMounted && !hasVideoError && currentVideoUrl ? (
+          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
+            <div
+              className="fx-catalog-hero-video-crop"
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                height: 'calc(56.25vw * 0.9)',
+                overflow: 'hidden',
+              }}
+            >
+            <div
+              className="fx-catalog-hero-video-frame"
+              style={{
+                position: 'absolute',
+                left: '50%',
+                top: 0,
+                width: '100%',
+                height: 'auto',
+                aspectRatio: '16 / 9',
+                transform: 'translateX(-50%)',
+              }}
+            >
+              <ReactPlayer
+                ref={playerRef}
+                key={currentVideoUrl}
+                src={currentVideoUrl}
+                playing
+                loop
+                muted={isHeroMuted}
+                controls={false}
+                width="100%"
+                height="100%"
+                playsInline
+                onReady={() => setIsPlayerReady(true)}
+                onProgress={(progress: any) => {
+                  if (activeVideoUrlRef.current !== currentVideoUrl) {
+                    return;
+                  }
+                  const { playedSeconds, loadedSeconds } = progress ?? {};
+                  const loaded = typeof loadedSeconds === 'number' ? loadedSeconds : 0;
+                  const played = typeof playedSeconds === 'number' ? playedSeconds : 0;
+
+                  if (loaded >= 5 || played >= 5) {
+                    setHasMinPreload(true);
+                  }
+
+                  if (
+                    currentYouTubeVideoId &&
+                    videoDuration > 0 &&
+                    played >= Math.max(videoDuration - 0.35, 0) &&
+                    !loopSeekLockRef.current
+                  ) {
+                    loopSeekLockRef.current = true;
+                    playerRef.current?.seekTo(0, 'seconds');
+                  }
+
+                  if (played < 1) {
+                    loopSeekLockRef.current = false;
+                  }
+                }}
+                onDurationChange={(duration) => {
+                  if (activeVideoUrlRef.current !== currentVideoUrl) {
+                    return;
+                  }
+                  if (typeof duration === 'number' && Number.isFinite(duration)) {
+                    setVideoDuration(duration);
+                  }
+                }}
+                onError={(error) => {
+                  if (activeVideoUrlRef.current !== currentVideoUrl) {
+                    return;
+                  }
+                  if (isAbortLikePlayerError(error)) {
+                    return;
+                  }
+
+                  if (currentCandidateIndex < candidateVideoUrls.length - 1) {
+                    setCurrentCandidateIndex((prev) => prev + 1);
+                    setHasMinPreload(false);
+                    setIsPlayerReady(false);
+                    setVideoDuration(0);
+                    loopSeekLockRef.current = false;
+                    return;
+                  }
+
+                  setHasVideoError(true);
+                  setHasMinPreload(true);
+                  setIsPlayerReady(true);
+                }}
+                config={{
+                  youtube: {
+                    controls: 0,
+                    disablekb: 1,
+                    modestbranding: 1,
+                    rel: 0,
+                    playsinline: 1,
+                    iv_load_policy: 3,
+                    loop: 1,
+                    playlist: currentYouTubeVideoId || undefined,
+                  },
+                  html: {
+                    poster: defaultHeroBackground,
+                    playsInline: true,
+                    controlsList: 'nodownload noplaybackrate noremoteplayback',
+                    disablePictureInPicture: true,
+                    preload: 'auto',
+                  },
+                }}
+              />
+            </div>
+            </div>
+          </div>
+        ) : null}
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background:
+              'linear-gradient(180deg, rgb(0 0 0 / 68%) 0%, rgb(0 0 0 / 22%) 24%, rgb(20 20 20 / 90%) 100%), linear-gradient(90deg, rgb(0 0 0 / 76%) 0%, rgb(0 0 0 / 22%) 55%, rgb(0 0 0 / 52%) 100%)',
+          }}
+        />
+        <div
+          aria-hidden="true"
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: 'clamp(140px, 16vw, 260px)',
+            background:
+              'linear-gradient(180deg, rgb(19 19 19 / 0%) 0%, rgb(19 19 19 / 82%) 62%, var(--fx-color-bg-primary) 100%)',
+            zIndex: 1,
+            pointerEvents: 'none',
+          }}
+        />
+
+        <div style={{ position: 'relative', zIndex: 2, opacity: isHeroReady ? 1 : 0, transition: 'opacity 220ms ease' }}>
+          <style>
+            {`
+              .fx-catalog-hero-video-frame {
+                overflow: hidden;
+              }
+
+              .fx-catalog-hero-video-frame > div {
+                width: 100% !important;
+                height: 100% !important;
+              }
+
+              .fx-catalog-hero-content {
+                min-height: clamp(300px, calc((56.25vw * 0.9) - 130px), 520px) !important;
+              }
+
+              .fx-catalog-hero-banner {
+                bottom: clamp(108px, 15vh, 176px) !important;
+              }
+
+              .fx-catalog-rating-dock {
+                right: 0 !important;
+                bottom: calc(clamp(108px, 15vh, 176px) + 150px) !important;
+              }
+
+              .fx-catalog-hero-rail {
+                margin-top: 0 !important;
+                transform: translateY(24px);
+              }
+
+              .fx-catalog-hero-rail-track {
+                grid-auto-columns: calc((100% - 30px) / 4);
+              }
+
+              @media (max-width: 1200px) {
+                .fx-catalog-hero-content {
+                  min-height: clamp(280px, calc((56.25vw * 0.9) - 120px), 500px) !important;
+                }
+
+                .fx-catalog-hero-banner {
+                  width: min(560px, calc(100% - 72px)) !important;
+                }
+
+              }
+
+              @media (max-width: 900px) {
+                .fx-catalog-hero {
+                  min-height: calc(56.25vw + 64px) !important;
+                  padding-bottom: 48px !important;
+                }
+
+                .fx-catalog-hero-video-crop {
+                  height: 56.25vw !important;
+                }
+
+                .fx-catalog-hero-content {
+                  min-height: clamp(260px, calc(56.25vw - 128px), 430px) !important;
+                  padding: 0 var(--fx-space-4) !important;
+                }
+
+                .fx-catalog-hero-banner {
+                  left: var(--fx-space-4) !important;
+                  width: calc(100% - 36px) !important;
+                  bottom: clamp(92px, 13vh, 118px) !important;
+                }
+
+                .fx-catalog-hero-rail {
+                  padding: 0 var(--fx-space-4) var(--fx-space-3) !important;
+                  transform: translateY(12px);
+                }
+
+                .fx-catalog-hero-rail-track {
+                  grid-auto-columns: calc((100% - 10px) / 2);
+                }
+
+                .fx-catalog-rating-dock {
+                  display: none;
+                }
+              }
+
+              @media (max-width: 768px) {
+                .fx-catalog-hero-content {
+                  min-height: clamp(260px, calc(56.25vw - 80px), 460px) !important;
+                }
+
+                .fx-catalog-hero-banner {
+                  width: calc(100% - 30px) !important;
+                }
+
+                .fx-catalog-hero-rail {
+                  padding-bottom: var(--fx-space-3) !important;
+                }
+              }
+
+              @media (max-width: 560px) {
+                .fx-catalog-hero-video-crop {
+                  height: 56.25vw !important;
+                }
+
+                .fx-catalog-hero-video-frame {
+                  width: 100% !important;
+                  height: auto !important;
+                  aspect-ratio: 16 / 9 !important;
+                }
+
+                .fx-catalog-hero-content {
+                  min-height: clamp(240px, calc(56.25vw - 12px), 420px) !important;
+                  padding: 0 var(--fx-space-3) !important;
+                }
+
+                .fx-catalog-hero-banner {
+                  left: var(--fx-space-3) !important;
+                  width: calc(100% - 24px) !important;
+                  bottom: clamp(84px, 12vh, 102px) !important;
+                }
+
+                .fx-catalog-hero-rail {
+                  padding: 0 var(--fx-space-3) var(--fx-space-2) !important;
+                  transform: none;
+                }
+
+                .fx-catalog-hero-rail-track {
+                  grid-auto-columns: 82%;
+                }
+
+                .fx-catalog-rail-title {
+                  font-size: 22px !important;
+                  line-height: 1.2 !important;
+                }
+              }
+            `}
+          </style>
+          <HomePageHeader
+            items={[
+              { label: 'Início', href: `/events/${eventSlug}`, active: true },
+              { label: 'Comentários', href: '#comentarios' },
+              { label: 'Materiais de Apoio', href: '#materiais' },
+              { label: 'Quiz', href: '#quiz' },
+            ]}
+            brandLabel="Netflix"
+            searchControlLabel="Search"
+            notificationsControlLabel="Notifications"
+            profileControlLabel="Open profile menu"
+            style={{ maxWidth: 1320, margin: '0 auto', width: '100%' }}
+          />
+
+          <div
+            className="fx-catalog-hero-content"
+            style={{
+              maxWidth: 1320,
+              margin: '0 auto',
+              padding: '0 var(--fx-space-6)',
+              minHeight: 700,
+              position: 'relative',
+              boxSizing: 'border-box',
+            }}
+          >
+            <div
+              className="fx-catalog-hero-banner"
+              style={{
+                position: 'absolute',
+                left: 'var(--fx-space-6)',
+                bottom: 162,
+                width: 620,
+                maxWidth: 'min(620px, calc(100% - 120px))',
+              }}
+            >
+              <HeroBanner
+                mode="overlay"
+                size="large"
+                badgeLabel={undefined}
+                eyebrow={eventVisibility === 'private' ? 'Private event' : 'N SERIES'}
+                title={resolvedHeroTitle}
+                description={resolvedHeroDescription}
+                titleStyle={{
+                  fontSize: 'clamp(30px, 5.2vw, 68px)',
+                  lineHeight: '0.92',
+                  letterSpacing: '-0.03em',
+                  maxWidth: 540,
+                  textTransform: 'uppercase',
+                  textShadow: '0 2px 18px rgb(0 0 0 / 45%)',
+                }}
+                descriptionStyle={{
+                  fontSize: 'clamp(14px, 1.9vw, 28px)',
+                  lineHeight: '1.2',
+                  maxWidth: 650,
+                  textShadow: '0 2px 10px rgb(0 0 0 / 45%)',
+                }}
+                actions={{
+                  primaryLabel: 'Assistir Aula',
+                  secondaryLabel: 'Mais detalhes',
+                  onPrimaryClick: onLoad,
+                }}
+              />
+            </div>
+
+          </div>
+
+          <div
+            className="fx-catalog-rating-dock"
+            style={{
+              position: 'absolute',
+              right: 0,
+              bottom: 300,
+              background: 'var(--fx-color-home-hero-utility-background)',
+              padding: 'var(--fx-space-2) 0 var(--fx-space-2) var(--fx-space-2)',
+              zIndex: 2,
+            }}
+          >
+            <HeroBannerRatingPattern
+              ratingLabel="TV-14"
+              leadingIconName={isHeroMuted ? 'heroBannerPreviewMuteDefault' : 'heroBannerPreviewSoundDefault'}
+              leadingControlLabel={isHeroMuted ? 'Enable sound' : 'Mute sound'}
+              onLeadingIconClick={() => setIsHeroMuted((prev) => !prev)}
+            />
+          </div>
+
+          {heroRailItems.length ? (
+            <div
+              className="fx-catalog-hero-rail"
+              style={{
+                maxWidth: 1320,
+                margin: '0 auto',
+                padding: '0 var(--fx-space-6) var(--fx-space-4)',
+                boxSizing: 'border-box',
+                position: 'relative',
+                zIndex: 2,
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  marginBottom: 'var(--fx-space-2)',
+                }}
+              >
+                <Text
+                  as="h3"
+                  variant="bold-title2"
+                  className="fx-catalog-rail-title"
+                  style={{ margin: 0, fontSize: '32px', lineHeight: '1.15' }}
+                >
+                  Próximas Aulas
+                </Text>
+                {heroRailItems.length > 4 ? (
+                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 'var(--fx-space-2)' }}>
+                    <button
+                      type="button"
+                      aria-label="Scroll previous lessons"
+                      onClick={() => scrollRail('prev')}
+                      disabled={!canScrollRailPrev}
+                      style={{
+                        width: 34,
+                        height: 34,
+                        borderRadius: '999px',
+                        border: 'var(--fx-size-border-default) solid rgb(255 255 255 / 55%)',
+                        background: 'rgb(0 0 0 / 45%)',
+                        color: 'var(--fx-color-text-primary)',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        opacity: canScrollRailPrev ? 1 : 0.42,
+                        cursor: canScrollRailPrev ? 'pointer' : 'not-allowed',
+                      }}
+                    >
+                      <Icon name="arrowLeft" size={16} />
+                    </button>
+                    <button
+                      type="button"
+                      aria-label="Scroll next lessons"
+                      onClick={() => scrollRail('next')}
+                      disabled={!canScrollRailNext}
+                      style={{
+                        width: 34,
+                        height: 34,
+                        borderRadius: '999px',
+                        border: 'var(--fx-size-border-default) solid rgb(255 255 255 / 55%)',
+                        background: 'rgb(0 0 0 / 45%)',
+                        color: 'var(--fx-color-text-primary)',
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        opacity: canScrollRailNext ? 1 : 0.42,
+                        cursor: canScrollRailNext ? 'pointer' : 'not-allowed',
+                      }}
+                    >
+                      <Icon name="arrowRight" size={16} />
+                    </button>
+                  </div>
+                ) : null}
+              </div>
+              <div
+                ref={railRef}
+                className="fx-catalog-hero-rail-track"
+                style={{
+                  display: 'grid',
+                  gridAutoFlow: 'column',
+                  gridAutoColumns: 'calc((100% - 30px) / 4)',
+                  gap: '10px',
+                  overflowX: 'auto',
+                  paddingBottom: 'var(--fx-space-2)',
+                  scrollbarWidth: 'none',
+                }}
+              >
+                {heroRailItems.map((item) => (
+                  <MovieBlockCard
+                    key={item.id}
+                    imageUrl={item.imageUrl ?? buildFallbackCardImage(item.id, item.title)}
+                    imageAlt={item.imageAlt ?? item.title}
+                    presetIconName={item.presetIconName}
+                    presetPosition="bottom-left"
+                    titleOverlay={item.title}
+                    descriptionOverlay={item.description}
+                    titleLines={1}
+                    descriptionLines={2}
+                    showCenteredPlayIcon
+                    onClick={item.onClick}
+                    style={{
+                      width: '100%',
+                      height: 'auto',
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </section>
+
+    </main>
+  );
+};
diff --git a/services/api/db/migrations/003_event_highlight_video.sql b/services/api/db/migrations/003_event_highlight_video.sql
new file mode 100644
index 0000000..9e65c32
--- /dev/null
+++ b/services/api/db/migrations/003_event_highlight_video.sql
@@ -0,0 +1 @@
+ALTER TABLE events ADD COLUMN highlight_video_url TEXT;
diff --git a/services/api/db/migrations/004_lesson_description.sql b/services/api/db/migrations/004_lesson_description.sql
new file mode 100644
index 0000000..bb558bf
--- /dev/null
+++ b/services/api/db/migrations/004_lesson_description.sql
@@ -0,0 +1,13 @@
+ALTER TABLE events ADD COLUMN short_description TEXT NOT NULL DEFAULT '';
+ALTER TABLE events ADD COLUMN long_description TEXT NOT NULL DEFAULT '';
+
+UPDATE events
+SET
+  short_description = CASE
+    WHEN short_description = '' THEN description
+    ELSE short_description
+  END,
+  long_description = CASE
+    WHEN long_description = '' THEN description
+    ELSE long_description
+  END;
diff --git a/services/api/db/migrations/005_lesson_description.sql b/services/api/db/migrations/005_lesson_description.sql
new file mode 100644
index 0000000..d1021ee
--- /dev/null
+++ b/services/api/db/migrations/005_lesson_description.sql
@@ -0,0 +1 @@
+ALTER TABLE lessons ADD COLUMN description TEXT NOT NULL DEFAULT '';
diff --git a/services/api/src/db/seed-mock.js b/services/api/src/db/seed-mock.js
index cb7f5d1..5f1ee1b 100644
--- a/services/api/src/db/seed-mock.js
+++ b/services/api/src/db/seed-mock.js
@@ -14,12 +14,16 @@ const mockSeedData = {
       title: 'Flix MVP Launch Event',
       slug: 'flix-mvp-launch-event',
       description: 'Public event used as baseline for learner catalog/playback flow.',
+      shortDescription: 'Aprenda em trilhas curtas com checkpoints práticos.',
+      longDescription:
+        'Evento público base para o fluxo de catálogo e playback. Trilha prática para validação, analytics e oferta com foco em execução.',
       isActive: 1,
       visibility: 'public',
       accessKey: null,
       heroTitle: 'Bem-vindo ao Flix',
       heroSubtitle: 'Aprenda em trilhas curtas com checkpoints praticos.',
       heroCtaText: 'Comecar',
+      highlightVideoUrl: 'https://www.youtube.com/watch?v=BKZ_Bkl324Y&t=25s',
       backgroundColor: '#0f172a',
       textColor: '#f8fafc',
       accentColor: '#22d3ee',
@@ -29,12 +33,16 @@ const mockSeedData = {
       title: 'Flix Growth Intensive',
       slug: 'flix-growth-intensive',
       description: 'Private event baseline with access key protected lessons.',
+      shortDescription: 'Conteúdo privado para alunos convidados.',
+      longDescription:
+        'Evento privado com acesso por chave. Conteúdo avançado para crescimento, aquisição e escala em campanhas e produto.',
       isActive: 1,
       visibility: 'private',
       accessKey: 'growth2026',
       heroTitle: 'Acesso exclusivo',
       heroSubtitle: 'Conteudo privado para alunos convidados.',
       heroCtaText: 'Entrar com chave',
+      highlightVideoUrl: 'https://www.youtube.com/watch?v=M7lc1UVf-VE',
       backgroundColor: '#111111',
       textColor: '#f5f5f5',
       accentColor: '#e50914',
@@ -44,12 +52,16 @@ const mockSeedData = {
       title: 'Flix Creator Community Week',
       slug: 'flix-creator-community-week',
       description: 'Open event for community engagement and public previews.',
+      shortDescription: 'Conteúdos abertos para aquecer a comunidade.',
+      longDescription:
+        'Evento aberto para engajamento da comunidade com aulas e materiais de aquecimento, preparando para trilhas e ofertas futuras.',
       isActive: 1,
       visibility: 'public',
       accessKey: null,
       heroTitle: 'Comunidade Flix',
       heroSubtitle: 'Conteudos abertos para aquecer o funil.',
       heroCtaText: 'Explorar trilha',
+      highlightVideoUrl: 'https://www.youtube.com/watch?v=aqz-KE-bpKQ',
       backgroundColor: '#172554',
       textColor: '#eff6ff',
       accentColor: '#38bdf8',
@@ -60,6 +72,7 @@ const mockSeedData = {
       id: 'lesson-public-1',
       eventId: 'event-public-1',
       title: 'Kickoff do MVP',
+      description: 'Abertura da trilha com visão do MVP, metas e próximos passos.',
       slug: 'kickoff-do-mvp',
       videoProvider: 'youtube',
       videoId: 'dQw4w9WgXcQ',
@@ -70,6 +83,7 @@ const mockSeedData = {
       id: 'lesson-public-2',
       eventId: 'event-public-1',
       title: 'Analytics na pratica',
+      description: 'Configuração de métricas essenciais e leitura de indicadores.',
       slug: 'analytics-na-pratica',
       videoProvider: 'vimeo',
       videoId: '148751763',
@@ -80,6 +94,7 @@ const mockSeedData = {
       id: 'lesson-public-3',
       eventId: 'event-public-1',
       title: 'Oferta irresistivel',
+      description: 'Construção da oferta com proposta de valor clara e objetiva.',
       slug: 'oferta-irresistivel',
       videoProvider: 'youtube',
       videoId: 'M7lc1UVf-VE',
@@ -90,6 +105,7 @@ const mockSeedData = {
       id: 'lesson-public-4',
       eventId: 'event-public-1',
       title: 'Replay da live',
+      description: 'Resumo da live com decisões e ajustes aplicados no projeto.',
       slug: 'replay-da-live',
       videoProvider: 'gemini_stream',
       videoId: 'gemini-replay-001',
@@ -100,6 +116,7 @@ const mockSeedData = {
       id: 'lesson-private-1',
       eventId: 'event-private-1',
       title: 'Growth Playbook',
+      description: 'Playbook de crescimento com testes de aquisição e retenção.',
       slug: 'growth-playbook',
       videoProvider: 'youtube',
       videoId: 'aqz-KE-bpKQ',
@@ -110,6 +127,7 @@ const mockSeedData = {
       id: 'lesson-private-2',
       eventId: 'event-private-1',
       title: 'Escala de anuncios',
+      description: 'Estratégias para escalar campanhas mantendo eficiência de CAC.',
       slug: 'escala-de-anuncios',
       videoProvider: 'youtube',
       videoId: 'ysz5S6PUM-U',
@@ -120,6 +138,7 @@ const mockSeedData = {
       id: 'lesson-community-1',
       eventId: 'event-public-2',
       title: 'Aula aberta de aquecimento',
+      description: 'Aquecimento da comunidade com contexto e plano da semana.',
       slug: 'aula-aberta-aquecimento',
       videoProvider: 'youtube',
       videoId: 'iik25wqIuFo',
diff --git a/services/api/src/db/seed.js b/services/api/src/db/seed.js
index 7debaaf..4376824 100644
--- a/services/api/src/db/seed.js
+++ b/services/api/src/db/seed.js
@@ -17,12 +17,16 @@ const defaultSeedData = {
       title: 'Flix MVP Launch Event',
       slug: 'flix-mvp-launch-event',
       description: 'Public event used as baseline for learner catalog/playback flow.',
+      shortDescription: 'Aprenda em trilhas curtas com checkpoints práticos.',
+      longDescription:
+        'Public event used as baseline for learner catalog/playback flow. Explore aulas práticas para lançar e validar o MVP com ritmo rápido.',
       isActive: 1,
       visibility: 'public',
       accessKey: null,
       heroTitle: 'Bem-vindo ao Flix',
       heroSubtitle: 'Aprenda em trilhas curtas com checkpoints práticos.',
       heroCtaText: 'Comecar',
+      highlightVideoUrl: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
       backgroundColor: '#0f172a',
       textColor: '#f8fafc',
       accentColor: '#22d3ee',
@@ -32,12 +36,16 @@ const defaultSeedData = {
       title: 'Flix Growth Intensive',
       slug: 'flix-growth-intensive',
       description: 'Private event baseline with access key protected lessons.',
+      shortDescription: 'Conteúdo privado para alunos convidados.',
+      longDescription:
+        'Private event baseline with access key protected lessons. Trilha focada em growth, aquisição e escala para alunos com acesso liberado.',
       isActive: 1,
       visibility: 'private',
       accessKey: 'growth2026',
       heroTitle: 'Acesso exclusivo',
       heroSubtitle: 'Conteudo privado para alunos convidados.',
       heroCtaText: 'Entrar com chave',
+      highlightVideoUrl: 'https://www.youtube.com/watch?v=M7lc1UVf-VE',
       backgroundColor: '#111111',
       textColor: '#f5f5f5',
       accentColor: '#e50914',
@@ -48,6 +56,7 @@ const defaultSeedData = {
       id: 'lesson-public-1',
       eventId: 'event-public-1',
       title: 'Kickoff do MVP',
+      description: 'Visão geral do lançamento e plano de execução do MVP.',
       slug: 'kickoff-do-mvp',
       videoProvider: 'youtube',
       videoId: 'dQw4w9WgXcQ',
@@ -58,6 +67,7 @@ const defaultSeedData = {
       id: 'lesson-private-1',
       eventId: 'event-private-1',
       title: 'Growth Playbook',
+      description: 'Fundamentos de aquisição com foco em alavancas de crescimento.',
       slug: 'growth-playbook',
       videoProvider: 'youtube',
       videoId: 'M7lc1UVf-VE',
@@ -134,11 +144,11 @@ const seedDatabase = async ({ databaseUrl, seedData }) => {
 
     const insertEvent = db.prepare(
       `INSERT INTO events (
-        id, title, slug, description, is_active, visibility, access_key,
+        id, title, slug, description, short_description, long_description, is_active, visibility, access_key,
         hero_title, hero_subtitle, hero_cta_text,
-        background_color, text_color, accent_color,
+        background_color, text_color, accent_color, highlight_video_url,
         created_at, updated_at
-      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
     );
 
     for (const event of seedData.events) {
@@ -147,6 +157,8 @@ const seedDatabase = async ({ databaseUrl, seedData }) => {
         event.title,
         event.slug,
         event.description,
+        event.shortDescription ?? event.description,
+        event.longDescription ?? event.description,
         event.isActive,
         event.visibility,
         event.accessKey,
@@ -156,6 +168,7 @@ const seedDatabase = async ({ databaseUrl, seedData }) => {
         event.backgroundColor,
         event.textColor,
         event.accentColor,
+        event.highlightVideoUrl ?? null,
         seedTimestamp,
         seedTimestamp,
       );
@@ -163,9 +176,9 @@ const seedDatabase = async ({ databaseUrl, seedData }) => {
 
     const insertLesson = db.prepare(
       `INSERT INTO lessons (
-        id, event_id, title, slug, video_provider, video_id,
+        id, event_id, title, description, slug, video_provider, video_id,
         release_at, expires_at, created_at, updated_at
-      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
     );
 
     for (const lesson of seedData.lessons) {
@@ -173,6 +186,7 @@ const seedDatabase = async ({ databaseUrl, seedData }) => {
         lesson.id,
         lesson.eventId,
         lesson.title,
+        lesson.description ?? '',
         lesson.slug,
         lesson.videoProvider,
         lesson.videoId,
diff --git a/services/api/src/repositories/sqlite/event-repository.js b/services/api/src/repositories/sqlite/event-repository.js
index ee98ad9..8970f81 100644
--- a/services/api/src/repositories/sqlite/event-repository.js
+++ b/services/api/src/repositories/sqlite/event-repository.js
@@ -2,7 +2,9 @@ const mapRowToEvent = (row) => ({
   id: row.id,
   title: row.title,
   slug: row.slug,
-  description: row.description,
+  description: row.short_description ?? row.description,
+  shortDescription: row.short_description ?? row.description,
+  longDescription: row.long_description ?? row.description,
   isActive: Boolean(row.is_active),
   visibility: row.visibility,
   accessKey: row.access_key,
@@ -17,6 +19,7 @@ const mapRowToEvent = (row) => ({
     accentColor: row.accent_color,
   },
   logoUrl: row.logo_url,
+  highlightVideoUrl: row.highlight_video_url,
   brandingProvider: row.branding_provider,
   brandingPromptVersion: row.branding_prompt_version,
   brandingGeneratedAt: row.branding_generated_at,
@@ -30,19 +33,19 @@ export const createSqliteEventRepository = ({ db }) => {
   const findBySlugStmt = db.prepare('SELECT * FROM events WHERE slug = ? LIMIT 1');
   const insertStmt = db.prepare(`
     INSERT INTO events (
-      id, title, slug, description, is_active, visibility, access_key,
+      id, title, slug, description, short_description, long_description, is_active, visibility, access_key,
       hero_title, hero_subtitle, hero_cta_text,
       background_color, text_color, accent_color,
-      logo_url, branding_provider, branding_prompt_version, branding_generated_at,
+      logo_url, highlight_video_url, branding_provider, branding_prompt_version, branding_generated_at,
       created_at, updated_at
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
   `);
   const updateStmt = db.prepare(`
     UPDATE events SET
-      title = ?, slug = ?, description = ?, is_active = ?, visibility = ?, access_key = ?,
+      title = ?, slug = ?, description = ?, short_description = ?, long_description = ?, is_active = ?, visibility = ?, access_key = ?,
       hero_title = ?, hero_subtitle = ?, hero_cta_text = ?,
       background_color = ?, text_color = ?, accent_color = ?,
-      logo_url = ?, branding_provider = ?, branding_prompt_version = ?, branding_generated_at = ?,
+      logo_url = ?, highlight_video_url = ?, branding_provider = ?, branding_prompt_version = ?, branding_generated_at = ?,
       updated_at = ?
     WHERE id = ?
   `);
@@ -67,7 +70,9 @@ export const createSqliteEventRepository = ({ db }) => {
         event.id,
         event.title,
         event.slug,
-        event.description,
+        event.shortDescription ?? event.description,
+        event.shortDescription ?? event.description,
+        event.longDescription ?? event.shortDescription ?? event.description,
         event.isActive ? 1 : 0,
         event.visibility,
         event.accessKey,
@@ -78,6 +83,7 @@ export const createSqliteEventRepository = ({ db }) => {
         event.visualStyle.textColor,
         event.visualStyle.accentColor,
         event.logoUrl,
+        event.highlightVideoUrl,
         event.brandingProvider,
         event.brandingPromptVersion,
         event.brandingGeneratedAt,
@@ -91,7 +97,9 @@ export const createSqliteEventRepository = ({ db }) => {
       updateStmt.run(
         event.title,
         event.slug,
-        event.description,
+        event.shortDescription ?? event.description,
+        event.shortDescription ?? event.description,
+        event.longDescription ?? event.shortDescription ?? event.description,
         event.isActive ? 1 : 0,
         event.visibility,
         event.accessKey,
@@ -102,6 +110,7 @@ export const createSqliteEventRepository = ({ db }) => {
         event.visualStyle.textColor,
         event.visualStyle.accentColor,
         event.logoUrl,
+        event.highlightVideoUrl,
         event.brandingProvider,
         event.brandingPromptVersion,
         event.brandingGeneratedAt,
diff --git a/services/api/src/repositories/sqlite/lesson-repository.js b/services/api/src/repositories/sqlite/lesson-repository.js
index 3a41c90..2a1d182 100644
--- a/services/api/src/repositories/sqlite/lesson-repository.js
+++ b/services/api/src/repositories/sqlite/lesson-repository.js
@@ -2,6 +2,7 @@ const mapRowToLesson = (row) => ({
   id: row.id,
   eventId: row.event_id,
   title: row.title,
+  description: row.description ?? '',
   slug: row.slug,
   videoProvider: row.video_provider,
   videoId: row.video_id,
@@ -20,13 +21,13 @@ export const createSqliteLessonRepository = ({ db }) => {
   );
   const insertStmt = db.prepare(`
     INSERT INTO lessons (
-      id, event_id, title, slug, video_provider, video_id,
+      id, event_id, title, description, slug, video_provider, video_id,
       release_at, expires_at, created_at, updated_at
-    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
   `);
   const updateStmt = db.prepare(`
     UPDATE lessons SET
-      title = ?, slug = ?, video_provider = ?, video_id = ?,
+      title = ?, description = ?, slug = ?, video_provider = ?, video_id = ?,
       release_at = ?, expires_at = ?, updated_at = ?
     WHERE id = ?
   `);
@@ -53,6 +54,7 @@ export const createSqliteLessonRepository = ({ db }) => {
         lesson.id,
         lesson.eventId,
         lesson.title,
+        lesson.description ?? '',
         lesson.slug,
         lesson.videoProvider,
         lesson.videoId,
@@ -67,6 +69,7 @@ export const createSqliteLessonRepository = ({ db }) => {
     update: (id, lesson) => {
       updateStmt.run(
         lesson.title,
+        lesson.description ?? '',
         lesson.slug,
         lesson.videoProvider,
         lesson.videoId,
diff --git a/services/api/src/routes/events.js b/services/api/src/routes/events.js
index f1a6ceb..3710137 100644
--- a/services/api/src/routes/events.js
+++ b/services/api/src/routes/events.js
@@ -19,17 +19,21 @@ const visualStyleSchema = z
   })
   .strict();
 const logoUrlSchema = z.string().url().max(400);
+const highlightVideoUrlSchema = z.string().url().max(400);
 
 const createEventSchema = z.object({
   title: z.string().min(3),
   slug: z.string().min(3),
   description: z.string().max(500).optional(),
+  shortDescription: z.string().max(220).optional(),
+  longDescription: z.string().max(4000).optional(),
   isActive: z.boolean().optional(),
   visibility: visibilitySchema.optional(),
   accessKey: z.string().min(6).max(64).optional(),
   hero: heroSchema.optional(),
   visualStyle: visualStyleSchema.optional(),
   logoUrl: logoUrlSchema.optional(),
+  highlightVideoUrl: highlightVideoUrlSchema.optional(),
 });
 
 const updateEventSchema = z
@@ -37,12 +41,15 @@ const updateEventSchema = z
     title: z.string().min(3).optional(),
     slug: z.string().min(3).optional(),
     description: z.string().max(500).optional(),
+    shortDescription: z.string().max(220).optional(),
+    longDescription: z.string().max(4000).optional(),
     isActive: z.boolean().optional(),
     visibility: visibilitySchema.optional(),
     accessKey: z.string().min(6).max(64).nullable().optional(),
     hero: heroSchema.optional(),
     visualStyle: visualStyleSchema.optional(),
     logoUrl: logoUrlSchema.nullable().optional(),
+    highlightVideoUrl: highlightVideoUrlSchema.nullable().optional(),
   })
   .refine((payload) => Object.keys(payload).length > 0, {
     message: 'At least one field must be provided',
diff --git a/services/api/src/routes/lessons.js b/services/api/src/routes/lessons.js
index 2bfe2c7..166db5d 100644
--- a/services/api/src/routes/lessons.js
+++ b/services/api/src/routes/lessons.js
@@ -7,6 +7,7 @@ const videoProviderSchema = z.enum(['youtube', 'vimeo', 'gemini_stream']);
 
 const createLessonSchema = z.object({
   title: z.string().min(3),
+  description: z.string().max(400).optional(),
   slug: z.string().min(3),
   videoProvider: videoProviderSchema.optional(),
   videoId: z.string().min(3).max(120).optional(),
@@ -17,6 +18,7 @@ const createLessonSchema = z.object({
 const updateLessonSchema = z
   .object({
     title: z.string().min(3).optional(),
+    description: z.string().max(400).optional(),
     slug: z.string().min(3).optional(),
     videoProvider: videoProviderSchema.optional(),
     videoId: z.string().min(3).max(120).optional(),
diff --git a/services/api/src/routes/public-access.js b/services/api/src/routes/public-access.js
index f6e2b1a..e756fb1 100644
--- a/services/api/src/routes/public-access.js
+++ b/services/api/src/routes/public-access.js
@@ -89,6 +89,9 @@ export const registerPublicAccessRoutes = async (
       id: lesson.id,
       slug: lesson.slug,
       title: lesson.title,
+      description: lesson.description ?? '',
+      videoProvider: lesson.videoProvider,
+      videoId: lesson.videoId,
       releaseAt: lesson.releaseAt,
       expiresAt: lesson.expiresAt,
       status: lessonService.resolveLessonStatus(lesson),
@@ -99,9 +102,12 @@ export const registerPublicAccessRoutes = async (
         id: event.id,
         slug: event.slug,
         title: event.title,
-        description: event.description,
+        description: event.shortDescription ?? event.description,
+        shortDescription: event.shortDescription ?? event.description,
+        longDescription: event.longDescription ?? event.description,
         visibility: event.visibility,
         logoUrl: event.logoUrl,
+        highlightVideoUrl: event.highlightVideoUrl ?? null,
         hero: event.hero,
       },
       catalog: {
diff --git a/services/api/src/services/event-service.js b/services/api/src/services/event-service.js
index 15a978c..77d24b7 100644
--- a/services/api/src/services/event-service.js
+++ b/services/api/src/services/event-service.js
@@ -50,13 +50,20 @@ export const createEventService = ({ eventRepository = createInMemoryEventReposi
       id: crypto.randomUUID(),
       title: payload.title.trim(),
       slug,
-      description: payload.description?.trim() ?? '',
+      shortDescription: payload.shortDescription?.trim() ?? payload.description?.trim() ?? '',
+      longDescription:
+        payload.longDescription?.trim() ??
+        payload.shortDescription?.trim() ??
+        payload.description?.trim() ??
+        '',
+      description: payload.shortDescription?.trim() ?? payload.description?.trim() ?? '',
       isActive: payload.isActive ?? false,
       visibility: payload.visibility ?? 'private',
       accessKey: payload.accessKey?.trim() || null,
       hero: payload.hero ?? defaultHero,
       visualStyle: payload.visualStyle ?? defaultVisualStyle,
       logoUrl: payload.logoUrl?.trim() || null,
+      highlightVideoUrl: payload.highlightVideoUrl?.trim() || null,
       brandingProvider: payload.brandingProvider?.trim() || null,
       brandingPromptVersion: payload.brandingPromptVersion?.trim() || null,
       brandingGeneratedAt: payload.brandingGeneratedAt ?? null,
@@ -92,13 +99,31 @@ export const createEventService = ({ eventRepository = createInMemoryEventReposi
       ...existing,
       title: payload.title?.trim() ?? existing.title,
       slug: nextSlug,
-      description: payload.description?.trim() ?? existing.description,
+      shortDescription:
+        payload.shortDescription?.trim() ??
+        payload.description?.trim() ??
+        existing.shortDescription ??
+        existing.description,
+      longDescription:
+        payload.longDescription?.trim() ??
+        existing.longDescription ??
+        existing.shortDescription ??
+        existing.description,
+      description:
+        payload.shortDescription?.trim() ??
+        payload.description?.trim() ??
+        existing.shortDescription ??
+        existing.description,
       isActive: payload.isActive ?? existing.isActive,
       visibility,
       accessKey: payload.accessKey === undefined ? existing.accessKey : payload.accessKey?.trim() || null,
       hero: payload.hero ?? existing.hero,
       visualStyle: payload.visualStyle ?? existing.visualStyle,
       logoUrl: payload.logoUrl === undefined ? existing.logoUrl : payload.logoUrl?.trim() || null,
+      highlightVideoUrl:
+        payload.highlightVideoUrl === undefined
+          ? existing.highlightVideoUrl
+          : payload.highlightVideoUrl?.trim() || null,
       brandingProvider:
         payload.brandingProvider === undefined
           ? existing.brandingProvider
diff --git a/services/api/src/services/lesson-service.js b/services/api/src/services/lesson-service.js
index d09cdcf..3298300 100644
--- a/services/api/src/services/lesson-service.js
+++ b/services/api/src/services/lesson-service.js
@@ -48,6 +48,7 @@ export const createLessonService = ({
       id: crypto.randomUUID(),
       eventId,
       title: payload.title.trim(),
+      description: payload.description?.trim() ?? '',
       slug: normalizeLessonSlug(payload.slug),
       videoProvider: payload.videoProvider ? normalizeVideoProvider(payload.videoProvider) : 'youtube',
       videoId: payload.videoId?.trim() ?? normalizeLessonSlug(payload.slug),
@@ -70,6 +71,7 @@ export const createLessonService = ({
     const next = {
       ...lesson,
       title: payload.title?.trim() ?? lesson.title,
+      description: payload.description?.trim() ?? lesson.description ?? '',
       slug: payload.slug ? normalizeLessonSlug(payload.slug) : lesson.slug,
       videoProvider: payload.videoProvider
         ? normalizeVideoProvider(payload.videoProvider)