diff --git a/.gitignore b/.gitignore
index 7055e8c..0a2da86 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,6 @@ services/api/.data/
 # E2E artifacts
 playwright-report/
 test-results/
+
+# Local MCP config
+mcp.toml
diff --git a/apps/admin/package.json b/apps/admin/package.json
index 7736308..31dbd96 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -12,6 +12,7 @@
     "typecheck": "echo 'admin typecheck not configured yet'"
   },
   "dependencies": {
+    "@flix/design-system": "0.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.4"
diff --git a/apps/admin/src/App.jsx b/apps/admin/src/App.jsx
index 1df1285..b08eaf1 100644
--- a/apps/admin/src/App.jsx
+++ b/apps/admin/src/App.jsx
@@ -1,14 +1,24 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { ProtectedRoute } from './routes/ProtectedRoute.jsx';
 import { LoginPage } from './pages/LoginPage.jsx';
-import { DashboardPage } from './pages/DashboardPage.jsx';
+import { DashboardHomePage } from './pages/DashboardHomePage.jsx';
+import { EventsPage } from './pages/EventsPage.jsx';
+import { NewEventPage } from './pages/NewEventPage.jsx';
+import { EditEventPage } from './pages/EditEventPage.jsx';
+import { LessonsPage } from './pages/LessonsPage.jsx';
+import { QuizzesPage } from './pages/QuizzesPage.jsx';
 
 export const App = () => (
   <Routes>
     <Route path="/login" element={<LoginPage />} />
 
     <Route element={<ProtectedRoute />}>
-      <Route path="/dashboard" element={<DashboardPage />} />
+      <Route path="/dashboard" element={<DashboardHomePage />} />
+      <Route path="/eventos" element={<EventsPage />} />
+      <Route path="/eventos/novo" element={<NewEventPage />} />
+      <Route path="/eventos/:id/editar" element={<EditEventPage />} />
+      <Route path="/aulas" element={<LessonsPage />} />
+      <Route path="/quizzes" element={<QuizzesPage />} />
     </Route>
 
     <Route path="*" element={<Navigate to="/dashboard" replace />} />
diff --git a/apps/admin/src/main.jsx b/apps/admin/src/main.jsx
index a4b4c16..5c9e56c 100644
--- a/apps/admin/src/main.jsx
+++ b/apps/admin/src/main.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App.jsx';
 import { AuthProvider } from './auth/AuthContext.jsx';
+import '@flix/design-system/tokens/theme.css';
 import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
diff --git a/apps/admin/src/pages/DashboardHomePage.jsx b/apps/admin/src/pages/DashboardHomePage.jsx
new file mode 100644
index 0000000..b239a2b
--- /dev/null
+++ b/apps/admin/src/pages/DashboardHomePage.jsx
@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const DashboardHomePage = () => <DashboardPage section="dashboard" />;
diff --git a/apps/admin/src/pages/DashboardPage.jsx b/apps/admin/src/pages/DashboardPage.jsx
index 415734e..2794be8 100644
--- a/apps/admin/src/pages/DashboardPage.jsx
+++ b/apps/admin/src/pages/DashboardPage.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { NavLink, useNavigate, useParams } from 'react-router-dom';
 import { useAuth } from '../auth/AuthContext.jsx';
 import {
   createEvent,
@@ -95,7 +96,18 @@ const buildEventUpdatePayload = (form) => ({
   logoUrl: form.logoUrl ? form.logoUrl : null,
 });
 
-export const DashboardPage = () => {
+const pageTitles = {
+  dashboard: 'Dashboard',
+  eventos: 'Eventos',
+  'eventos-new': 'Eventos / Novo',
+  'eventos-edit': 'Eventos / Editar',
+  aulas: 'Aulas',
+  quizzes: 'Quizzes',
+};
+
+export const DashboardPage = ({ section = 'dashboard' }) => {
+  const navigate = useNavigate();
+  const { id: routeEventId } = useParams();
   const { session, logout } = useAuth();
   const token = session?.accessToken;
 
@@ -119,6 +131,10 @@ export const DashboardPage = () => {
   const [status, setStatus] = useState('');
   const [error, setError] = useState('');
 
+  const isEventosSection = ['eventos', 'eventos-new', 'eventos-edit'].includes(section);
+  const isEventCreateMode = section === 'eventos-new';
+  const isEventEditMode = section === 'eventos-edit';
+
   const selectedEvent = useMemo(
     () => events.find((event) => event.id === selectedEventId) ?? null,
     [events, selectedEventId],
@@ -248,6 +264,26 @@ export const DashboardPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedEventId, selectedLessonId]);
 
+  useEffect(() => {
+    if (isEventCreateMode) {
+      setSelectedEventId('');
+      setEventForm(defaultEventForm);
+      setBrandingPreview(null);
+      setBrandingRollback(null);
+      setBrandingError('');
+      return;
+    }
+
+    if (isEventEditMode && routeEventId) {
+      setSelectedEventId(routeEventId);
+    }
+  }, [isEventCreateMode, isEventEditMode, routeEventId]);
+
+  useEffect(() => {
+    if (!isEventEditMode || !selectedEvent) return;
+    setEventForm(mapEventToForm(selectedEvent));
+  }, [isEventEditMode, selectedEvent]);
+
   const handleCreateEvent = async (event) => {
     event.preventDefault();
     resetFeedback();
@@ -700,14 +736,29 @@ export const DashboardPage = () => {
     <main className="dashboard-layout">
       <header className="dashboard-header">
         <div>
-          <h1>Admin Content Operations</h1>
-          <p>Manage events, lessons, materials, quizzes, and branding from one place.</p>
+          <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>
@@ -726,7 +777,31 @@ export const DashboardPage = () => {
         </article>
       </section>
 
-      <section className="dashboard-grid two-col">
+      {section === 'dashboard' ? (
+        <section className="dashboard-grid two-col">
+          <article>
+            <h2>Command Center</h2>
+            <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>
+            <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>
           <form className="stack-form" onSubmit={handleCreateEvent}>
@@ -919,26 +994,48 @@ export const DashboardPage = () => {
             )}
 
             <div className="inline-actions">
-              <button type="submit">Create event</button>
-              <button type="button" onClick={handleLoadEventForEdit}>
-                Load selected
-              </button>
-              <button type="button" onClick={handleUpdateEvent}>
-                Update selected
-              </button>
-              <button type="button" className="danger" onClick={handleDeleteEvent}>
-                Delete selected
-              </button>
+              {isEventCreateMode ? (
+                <>
+                  <button type="submit">Create event</button>
+                  <button type="button" onClick={() => setEventForm(defaultEventForm)}>
+                    Clear form
+                  </button>
+                </>
+              ) : (
+                <>
+                  <button type="submit">Create event</button>
+                  <button type="button" onClick={handleLoadEventForEdit}>
+                    Load selected
+                  </button>
+                  <button type="button" onClick={handleUpdateEvent}>
+                    Update selected
+                  </button>
+                  <button type="button" className="danger" onClick={handleDeleteEvent}>
+                    Delete selected
+                  </button>
+                </>
+              )}
             </div>
           </form>
 
+          <div className="inline-actions">
+            <NavLink to="/eventos/novo">Novo evento</NavLink>
+            <NavLink to="/eventos">Painel eventos</NavLink>
+            {selectedEventId ? <NavLink to={`/eventos/${selectedEventId}/editar`}>Editar selecionado</NavLink> : null}
+          </div>
+
           <ul className="select-list">
             {events.map((item) => (
               <li key={item.id}>
                 <button
                   type="button"
                   className={selectedEventId === item.id ? 'active' : ''}
-                  onClick={() => setSelectedEventId(item.id)}
+                  onClick={() => {
+                    setSelectedEventId(item.id);
+                    if (isEventEditMode) {
+                      navigate(`/eventos/${item.id}/editar`);
+                    }
+                  }}
                 >
                   {item.title} ({item.visibility})
                 </button>
@@ -946,7 +1043,29 @@ export const DashboardPage = () => {
             ))}
           </ul>
         </article>
+        <article>
+          <h2>Selected Event Context</h2>
+          {selectedEvent ? (
+            <div className="payload-preview">
+              <p>
+                <strong>{selectedEvent.title}</strong>
+              </p>
+              <p className="muted">Slug: {selectedEvent.slug}</p>
+              <p className="muted">Visibility: {selectedEvent.visibility}</p>
+            </div>
+          ) : (
+            <p className="muted">
+              {isEventEditMode
+                ? 'Select an event or use a valid /eventos/:id/editar URL.'
+                : '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>
           <form className="stack-form" onSubmit={handleCreateLesson}>
@@ -1025,9 +1144,7 @@ export const DashboardPage = () => {
             ))}
           </ul>
         </article>
-      </section>
 
-      <section className="dashboard-grid two-col">
         <article>
           <h2>Materials</h2>
           <form className="stack-form" onSubmit={handleCreateMaterial}>
@@ -1076,7 +1193,11 @@ export const DashboardPage = () => {
             ))}
           </ul>
         </article>
+      </section>
+      ) : null}
 
+      {section === 'quizzes' ? (
+      <section className="dashboard-grid two-col">
         <article>
           <h2>Quizzes</h2>
           <form className="stack-form" onSubmit={handleCreateQuiz}>
@@ -1146,7 +1267,21 @@ export const DashboardPage = () => {
             </div>
           ) : null}
         </article>
+        <article>
+          <h2>Lesson Context</h2>
+          {selectedLesson ? (
+            <div className="payload-preview">
+              <p>
+                <strong>{selectedLesson.title}</strong>
+              </p>
+              <p className="muted">Slug: {selectedLesson.slug}</p>
+            </div>
+          ) : (
+            <p className="muted">Select event and lesson in /aulas before creating quizzes.</p>
+          )}
+        </article>
       </section>
+      ) : null}
     </main>
   );
 };
diff --git a/apps/admin/src/pages/EditEventPage.jsx b/apps/admin/src/pages/EditEventPage.jsx
new file mode 100644
index 0000000..c7df770
--- /dev/null
+++ b/apps/admin/src/pages/EditEventPage.jsx
@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const EditEventPage = () => <DashboardPage section="eventos-edit" />;
diff --git a/apps/admin/src/pages/EventsPage.jsx b/apps/admin/src/pages/EventsPage.jsx
new file mode 100644
index 0000000..8aa8a2c
--- /dev/null
+++ b/apps/admin/src/pages/EventsPage.jsx
@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const EventsPage = () => <DashboardPage section="eventos" />;
diff --git a/apps/admin/src/pages/LessonsPage.jsx b/apps/admin/src/pages/LessonsPage.jsx
new file mode 100644
index 0000000..0714309
--- /dev/null
+++ b/apps/admin/src/pages/LessonsPage.jsx
@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const LessonsPage = () => <DashboardPage section="aulas" />;
diff --git a/apps/admin/src/pages/LoginPage.jsx b/apps/admin/src/pages/LoginPage.jsx
index e96919d..f40c5fb 100644
--- a/apps/admin/src/pages/LoginPage.jsx
+++ b/apps/admin/src/pages/LoginPage.jsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '../auth/AuthContext.jsx';
+import { SignInCompletePattern } from '@flix/design-system/components';
 
 export const LoginPage = () => {
   const navigate = useNavigate();
@@ -8,6 +9,7 @@ export const LoginPage = () => {
   const { login, isAuthenticated } = useAuth();
   const [username, setUsername] = useState('admin');
   const [password, setPassword] = useState('admin123');
+  const [rememberMe, setRememberMe] = useState(false);
   const [error, setError] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
@@ -15,8 +17,7 @@ export const LoginPage = () => {
     navigate('/dashboard', { replace: true });
   }
 
-  const onSubmit = async (event) => {
-    event.preventDefault();
+  const submitLogin = async () => {
     setSubmitting(true);
     setError('');
 
@@ -32,33 +33,32 @@ export const LoginPage = () => {
     navigate(from && from !== '/login' ? from : '/dashboard', { replace: true });
   };
 
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    await submitLogin();
+  };
+
   return (
     <main className="auth-layout">
       <section className="auth-card" aria-label="Admin login">
-        <h1>Flix Admin</h1>
-        <p>Sign in to manage events, lessons, and operations.</p>
-
         <form onSubmit={onSubmit} className="auth-form">
-          <label>
-            Username
-            <input value={username} onChange={(event) => setUsername(event.target.value)} required />
-          </label>
-
-          <label>
-            Password
-            <input
-              type="password"
-              value={password}
-              onChange={(event) => setPassword(event.target.value)}
-              required
-            />
-          </label>
-
+          <SignInCompletePattern
+            emailValue={username}
+            passwordValue={password}
+            rememberMe={rememberMe}
+            onEmailChange={setUsername}
+            onPasswordChange={setPassword}
+            onRememberMeChange={setRememberMe}
+            onSubmit={submitLogin}
+            title="Sign In"
+            submitLabel={submitting ? 'Signing in...' : 'Sign in'}
+            signUpPrefix="New to Flix?"
+            signUpLabel="Sign up now."
+            recaptchaCopy="This page is protected by Google reCAPTCHA to ensure you're not a bot."
+            controlWidth="100%"
+            submitting={submitting}
+          />
           {error ? <p className="auth-error">{error}</p> : null}
-
-          <button type="submit" disabled={submitting}>
-            {submitting ? 'Signing in...' : 'Sign in'}
-          </button>
         </form>
       </section>
     </main>
diff --git a/apps/admin/src/pages/NewEventPage.jsx b/apps/admin/src/pages/NewEventPage.jsx
new file mode 100644
index 0000000..7a1c19c
--- /dev/null
+++ b/apps/admin/src/pages/NewEventPage.jsx
@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const NewEventPage = () => <DashboardPage section="eventos-new" />;
diff --git a/apps/admin/src/pages/QuizzesPage.jsx b/apps/admin/src/pages/QuizzesPage.jsx
new file mode 100644
index 0000000..d5f260f
--- /dev/null
+++ b/apps/admin/src/pages/QuizzesPage.jsx
@@ -0,0 +1,3 @@
+import { DashboardPage } from './DashboardPage.jsx';
+
+export const QuizzesPage = () => <DashboardPage section="quizzes" />;
diff --git a/apps/admin/src/styles.css b/apps/admin/src/styles.css
index 7c72253..a7c6242 100644
--- a/apps/admin/src/styles.css
+++ b/apps/admin/src/styles.css
@@ -1,8 +1,8 @@
 :root {
-  color-scheme: light;
-  font-family: "Space Grotesk", "Segoe UI", sans-serif;
-  background: radial-gradient(circle at top, #dbeafe 0%, #eff6ff 48%, #ffffff 100%);
-  color: #0f172a;
+  color-scheme: dark;
+  font-family: var(--fx-font-sans);
+  background: var(--fx-color-bg-primary);
+  color: var(--fx-color-text-primary);
 }
 
 * {
@@ -12,12 +12,17 @@
 body {
   margin: 0;
   min-height: 100vh;
+  background:
+    radial-gradient(circle at 10% -10%, rgb(229 9 20 / 20%), transparent 45%),
+    radial-gradient(circle at 100% 0%, rgb(255 255 255 / 6%), transparent 40%),
+    var(--fx-color-bg-primary);
+  color: var(--fx-color-text-primary);
 }
 
 .auth-layout,
 .dashboard-layout {
   min-height: 100vh;
-  padding: 1.5rem;
+  padding: var(--fx-space-6);
 }
 
 .auth-layout {
@@ -27,11 +32,11 @@ body {
 
 .auth-card {
   width: min(420px, 100%);
-  background: #ffffff;
-  border: 1px solid #cbd5e1;
-  border-radius: 14px;
-  padding: 1.5rem;
-  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  background: var(--fx-color-bg-elevated);
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  padding: var(--fx-space-6);
+  box-shadow: 0 12px 30px rgb(0 0 0 / 30%);
 }
 
 .auth-card h1 {
@@ -40,39 +45,46 @@ body {
 }
 
 .auth-card p {
-  margin: 0.6rem 0 1.2rem;
-  color: #475569;
+  margin: var(--fx-space-3) 0 var(--fx-space-5);
+  color: var(--fx-color-text-secondary);
 }
 
 .auth-form {
   display: grid;
-  gap: 0.9rem;
+  gap: var(--fx-space-4);
 }
 
 .auth-form label {
   display: grid;
-  gap: 0.35rem;
+  gap: var(--fx-space-2);
   font-size: 0.9rem;
-  color: #334155;
+  color: var(--fx-color-text-secondary);
 }
 
 .auth-form input,
 .stack-form input,
 .stack-form select,
 .stack-form textarea {
-  border: 1px solid #94a3b8;
-  border-radius: 8px;
-  padding: 0.65rem 0.75rem;
+  border: 1px solid var(--fx-color-border-strong);
+  border-radius: var(--fx-radius-lg);
+  background: transparent;
+  color: var(--fx-color-text-primary);
+  padding: var(--fx-space-3) var(--fx-space-4);
   font: inherit;
 }
 
 button {
   border: 0;
-  border-radius: 9px;
-  background: #0ea5e9;
-  color: #f8fafc;
-  padding: 0.62rem 0.84rem;
+  border-radius: var(--fx-radius-lg);
+  background: var(--fx-color-brand-primary);
+  color: var(--fx-color-text-primary);
+  padding: var(--fx-space-3) var(--fx-space-4);
   cursor: pointer;
+  font-weight: 500;
+}
+
+button:hover {
+  background: var(--fx-color-brand-hover);
 }
 
 button:disabled {
@@ -81,19 +93,19 @@ button:disabled {
 }
 
 button.danger {
-  background: #dc2626;
+  background: var(--fx-color-error);
 }
 
 .auth-error,
 .feedback-error {
   margin: 0;
-  color: #dc2626;
+  color: var(--fx-color-error);
   font-size: 0.9rem;
 }
 
 .feedback-ok {
   margin: 0;
-  color: #15803d;
+  color: var(--fx-color-success);
   font-size: 0.9rem;
 }
 
@@ -101,29 +113,49 @@ button.danger {
   max-width: 1200px;
   margin: 0 auto;
   display: grid;
-  gap: 1rem;
+  gap: var(--fx-space-4);
 }
 
 .dashboard-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 1rem;
+  gap: var(--fx-space-4);
 }
 
 .dashboard-header h1 {
   margin: 0;
-  font-size: 1.8rem;
+  font-family: var(--fx-font-display);
+  font-size: var(--fx-text-display);
+  line-height: 1;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
 }
 
 .dashboard-header p {
-  margin: 0.35rem 0 0;
-  color: #334155;
+  margin: var(--fx-space-2) 0 0;
+  color: var(--fx-color-text-secondary);
+}
+
+.admin-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fx-space-2);
+}
+
+.admin-nav a {
+  border: 1px solid var(--fx-color-border-default);
+  background: var(--fx-color-bg-card);
+}
+
+.admin-nav a.active {
+  border-color: var(--fx-color-brand-primary);
+  background: var(--fx-color-brand-primary);
 }
 
 .dashboard-grid {
   display: grid;
-  gap: 1rem;
+  gap: var(--fx-space-4);
 }
 
 .dashboard-grid.two-col {
@@ -131,10 +163,10 @@ button.danger {
 }
 
 .dashboard-grid article {
-  background: #ffffff;
-  border: 1px solid #cbd5e1;
-  border-radius: 12px;
-  padding: 1rem;
+  background: var(--fx-color-bg-elevated);
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  padding: var(--fx-space-4);
 }
 
 .dashboard-grid h2,
@@ -144,25 +176,25 @@ button.danger {
 
 .stack-form {
   display: grid;
-  gap: 0.7rem;
-  margin-bottom: 0.9rem;
+  gap: var(--fx-space-3);
+  margin-bottom: var(--fx-space-4);
 }
 
 .inline-fields {
   display: grid;
-  gap: 0.6rem;
+  gap: var(--fx-space-3);
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }
 
 .inline-check {
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: var(--fx-space-2);
 }
 
 .inline-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--fx-space-2);
   flex-wrap: wrap;
 }
 
@@ -172,44 +204,48 @@ button.danger {
   padding: 0;
   list-style: none;
   display: grid;
-  gap: 0.4rem;
+  gap: var(--fx-space-2);
 }
 
 .select-list button {
   width: 100%;
   text-align: left;
-  background: #e2e8f0;
-  color: #0f172a;
+  background: var(--fx-color-bg-card);
+  color: var(--fx-color-text-primary);
+  border: 1px solid var(--fx-color-border-default);
 }
 
 .select-list button.active {
-  background: #0284c7;
-  color: #f8fafc;
+  background: var(--fx-color-brand-primary);
+  color: var(--fx-color-text-primary);
 }
 
 .flat-list li {
   display: flex;
   justify-content: space-between;
-  gap: 1rem;
-  border: 1px solid #dbe4ee;
-  border-radius: 8px;
-  padding: 0.5rem 0.6rem;
+  gap: var(--fx-space-4);
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-lg);
+  background: var(--fx-color-bg-card);
+  padding: var(--fx-space-3);
 }
 
 .payload-preview {
-  border: 1px dashed #94a3b8;
-  background: #f8fafc;
-  border-radius: 8px;
-  padding: 0.65rem;
+  border: 1px dashed var(--fx-color-border-strong);
+  background: rgb(255 255 255 / 3%);
+  border-radius: var(--fx-radius-lg);
+  padding: var(--fx-space-3);
 }
 
 .branding-preview {
-  border: 1px dashed #60a5fa;
-  background: #eff6ff;
-  border-radius: 10px;
-  padding: 0.75rem;
+  border: 1px dashed var(--fx-color-border-strong);
+  background:
+    linear-gradient(180deg, rgb(0 0 0 / 48%) 0%, rgb(0 0 0 / 78%) 100%),
+    rgb(255 255 255 / 4%);
+  border-radius: var(--fx-radius-xl);
+  padding: var(--fx-space-4);
   display: grid;
-  gap: 0.35rem;
+  gap: var(--fx-space-2);
 }
 
 .branding-preview p {
@@ -220,26 +256,27 @@ button.danger {
   display: inline-block;
   width: 16px;
   height: 16px;
-  border: 1px solid #1e293b;
+  border: 1px solid var(--fx-color-border-default);
   border-radius: 4px;
-  margin-left: 0.45rem;
+  margin-left: var(--fx-space-2);
   vertical-align: middle;
 }
 
 .muted {
   margin: 0;
-  color: #64748b;
+  color: var(--fx-color-text-tertiary);
   font-size: 0.9rem;
 }
 
 code {
   font-family: "JetBrains Mono", monospace;
+  color: var(--fx-color-text-secondary);
 }
 
 @media (max-width: 640px) {
   .auth-layout,
   .dashboard-layout {
-    padding: 1rem;
+    padding: var(--fx-space-4);
   }
 
   .dashboard-header {
diff --git a/apps/web/package.json b/apps/web/package.json
index 9967f60..d57e514 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,6 +12,7 @@
     "typecheck": "echo 'web typecheck not configured yet'"
   },
   "dependencies": {
+    "@flix/design-system": "0.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.9.4"
diff --git a/apps/web/src/App.jsx b/apps/web/src/App.jsx
index ed26b15..82ce830 100644
--- a/apps/web/src/App.jsx
+++ b/apps/web/src/App.jsx
@@ -1,9 +1,11 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { CatalogPage } from './pages/CatalogPage.jsx';
+import { DesignSystemShowcasePage } from './pages/DesignSystemShowcasePage.jsx';
 import { PlaybackPage } from './pages/PlaybackPage.jsx';
 
 export const App = () => (
   <Routes>
+    <Route path="/design-system" element={<DesignSystemShowcasePage />} />
     <Route path="/events/:eventSlug" element={<CatalogPage />} />
     <Route path="/events/:eventSlug/lessons/:lessonSlug" element={<PlaybackPage />} />
     <Route path="*" element={<Navigate to="/events/flix-mvp-launch-event" replace />} />
diff --git a/apps/web/src/main.jsx b/apps/web/src/main.jsx
index c74f1c7..1c204a5 100644
--- a/apps/web/src/main.jsx
+++ b/apps/web/src/main.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { App } from './App.jsx';
+import '@flix/design-system/tokens/theme.css';
 import './styles.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
diff --git a/apps/web/src/pages/CatalogPage.jsx b/apps/web/src/pages/CatalogPage.jsx
index 404d584..110b710 100644
--- a/apps/web/src/pages/CatalogPage.jsx
+++ b/apps/web/src/pages/CatalogPage.jsx
@@ -1,15 +1,10 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, 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 statusLabel = {
-  released: 'Released',
-  locked: 'Locked',
-  expired: 'Expired',
-};
-
 export const CatalogPage = () => {
   const { eventSlug } = useParams();
   const [catalog, setCatalog] = useState(null);
@@ -19,7 +14,14 @@ export const CatalogPage = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
-  const isPrivateBlocked = useMemo(() => error.includes('Private event access is required'), [error]);
+  const releasedLessons = useMemo(
+    () => catalog?.catalog?.items?.filter((lesson) => lesson.status === 'released') ?? [],
+    [catalog],
+  );
+  const gatedLessons = useMemo(
+    () => catalog?.catalog?.items?.filter((lesson) => lesson.status !== 'released') ?? [],
+    [catalog],
+  );
 
   const loadCatalog = async () => {
     setLoading(true);
@@ -45,48 +47,43 @@ export const CatalogPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventSlug]);
 
-  return (
-    <main className="web-layout">
-      <header className="web-header">
-        <h1>Flix Learner</h1>
-        <p>Event: <code>{eventSlug}</code></p>
-      </header>
+  const releasedItems = releasedLessons.map((lesson) => ({
+    id: lesson.id,
+    title: lesson.title,
+    status: lesson.status,
+    action: <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Open lesson</Link>,
+  }));
 
-      <section className="panel">
-        <h2>Catalog Access</h2>
-        <div className="inline-fields">
-          <input
-            placeholder="Event access key (optional)"
-            value={accessKey}
-            onChange={(event) => setAccessKey(event.target.value)}
-          />
-          <button type="button" onClick={loadCatalog} disabled={loading}>
-            {loading ? 'Loading...' : 'Load catalog'}
-          </button>
-        </div>
-        {isPrivateBlocked ? <p className="status-warn">Private event key required.</p> : null}
-        {error && !isPrivateBlocked ? <p className="status-error">{error}</p> : null}
-      </section>
+  const gatedItems = gatedLessons.map((lesson) => ({
+    id: lesson.id,
+    title: lesson.title,
+    status: lesson.status,
+    action: <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Details</Link>,
+  }));
 
-      {catalog ? (
-        <section className="panel">
-          <h2>{catalog.event.title}</h2>
-          <p>{catalog.event.description || 'No description'}</p>
-          <ul className="card-list">
-            {catalog.catalog.items.map((lesson) => (
-              <li key={lesson.id}>
-                <div>
-                  <strong>{lesson.title}</strong>
-                  <p>
-                    Status: <span className={`badge ${lesson.status}`}>{statusLabel[lesson.status]}</span>
-                  </p>
-                </div>
-                <Link to={`/events/${eventSlug}/lessons/${lesson.slug}`}>Open lesson</Link>
-              </li>
-            ))}
-          </ul>
-        </section>
+  return (
+    <>
+      {error ? (
+        <main style={{ maxWidth: 1100, margin: '0 auto', padding: 'var(--fx-space-6)' }}>
+          <Card>
+            <Text as="p" variant="regular-body" tone="error" style={{ margin: 0 }}>
+              {error}
+            </Text>
+          </Card>
+        </main>
       ) : null}
-    </main>
+
+      <LearnerCatalogPage
+        eventSlug={eventSlug ?? ''}
+        accessKey={accessKey}
+        onAccessKeyChange={setAccessKey}
+        onLoad={loadCatalog}
+        loading={loading}
+        heroTitle={catalog?.event?.title ?? 'Flix'}
+        heroDescription={catalog?.event?.description ?? ''}
+        releasedItems={releasedItems}
+        gatedItems={gatedItems}
+      />
+    </>
   );
 };
diff --git a/apps/web/src/pages/DesignSystemShowcasePage.jsx b/apps/web/src/pages/DesignSystemShowcasePage.jsx
new file mode 100644
index 0000000..79abbc1
--- /dev/null
+++ b/apps/web/src/pages/DesignSystemShowcasePage.jsx
@@ -0,0 +1,177 @@
+import {
+  Card,
+  HomeHero,
+  HeroMobile,
+  ProfileMenuPattern,
+  Text,
+  UserProfilesPattern,
+  VideoPlayerChangingSoundPattern,
+  VideoPlayerEpisodesPreviewPattern,
+  VideoPlayerNextEpisodePattern,
+  VideoPlayerPattern,
+  VideoPlayerPlaybackSpeedPattern,
+  VideoPlayerScrollPreviewPattern,
+  VideoPlayerSubtitlesPattern,
+} from '@flix/design-system/components';
+
+const controlLabels = {
+  play: 'Play',
+  back10: 'Back 10 seconds',
+  forward10: 'Forward 10 seconds',
+  sound: 'Sound',
+  nextEpisode: 'Next episode',
+  listOfEpisodes: 'Episode list',
+  subtitles: 'Subtitles',
+  speed: 'Playback speed',
+  fullScreen: 'Full screen',
+};
+
+const episodeItems = [
+  {
+    id: 'ep-1',
+    title: 'Chapter 1',
+    episodeLabel: 'Episode 1',
+    description: 'An opening with high tension and a fast pace.',
+    artworkUrl: 'https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1200&q=80',
+    playLabel: 'Play chapter 1',
+  },
+  {
+    id: 'ep-2',
+    title: 'Chapter 2',
+    episodeLabel: 'Episode 2',
+    description: 'The conflict expands and the team reacts.',
+    artworkUrl: 'https://images.unsplash.com/photo-1517602302552-471fe67acf66?auto=format&fit=crop&w=1200&q=80',
+    playLabel: 'Play chapter 2',
+  },
+];
+
+const playerProps = {
+  backdropImageUrl: 'https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1600&q=80',
+  progress: {
+    elapsedLabel: '15:52',
+    remainingLabel: '-27:18',
+    progressPercent: 64,
+    bufferPercent: 70,
+    markerPercent: 64,
+  },
+  controlLabels,
+};
+
+export const DesignSystemShowcasePage = () => (
+  <main style={{ maxWidth: 1200, margin: '0 auto', padding: 'var(--fx-space-6)', display: 'grid', gap: 'var(--fx-space-6)' }}>
+    <Card>
+      <Text as="h1" variant="display-large" style={{ margin: 0 }}>Design System Showcase</Text>
+      <Text as="p" variant="regular-body" tone="secondary" style={{ margin: 'var(--fx-space-2) 0 0' }}>
+        Página de referência para tokens, atoms, molecules, organisms e patterns implementados.
+      </Text>
+    </Card>
+
+    <section style={{ display: 'grid', gap: 'var(--fx-space-4)' }}>
+      <Text as="h2" variant="medium-title2">Hero Variants</Text>
+      <HomeHero
+        backgroundImageUrl="https://images.unsplash.com/photo-1478720568477-152d9b164e26?auto=format&fit=crop&w=1800&q=80"
+        brandLabel="Netflix"
+        headerItems={[{ label: 'Home', href: '#', active: true }, { label: 'Series', href: '#' }]}
+        searchControlLabel="Search"
+        notificationsControlLabel="Notifications"
+        profileControlLabel="Profile"
+        title="House of Ninjas"
+        description="A retired family returns to confront a chain of rising threats."
+      />
+      <HeroMobile
+        backgroundImageUrl="https://images.unsplash.com/photo-1536440136628-849c177e76a1?auto=format&fit=crop&w=1800&q=80"
+        previewImageUrl="https://images.unsplash.com/photo-1517602302552-471fe67acf66?auto=format&fit=crop&w=1200&q=80"
+        eyebrow="Series"
+        title="House of Ninjas"
+        playLabel="Play"
+        playControlLabel="Play"
+        addControlLabel="Add"
+        thumbUpControlLabel="Thumb up"
+        muteControlLabel="Mute"
+        closeControlLabel="Close"
+      />
+    </section>
+
+    <section style={{ display: 'grid', gap: 'var(--fx-space-4)' }}>
+      <Text as="h2" variant="medium-title2">User Profile</Text>
+      <UserProfilesPattern
+        profiles={[
+          {
+            id: 'p1',
+            label: 'Ana',
+            imageUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
+            selected: true,
+            ariaLabel: 'Select Ana',
+          },
+          {
+            id: 'p2',
+            label: 'Chris',
+            imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
+            ariaLabel: 'Select Chris',
+          },
+        ]}
+        addProfile={{ label: 'Add Profile', ariaLabel: 'Add profile' }}
+      />
+
+      <ProfileMenuPattern
+        accounts={[
+          {
+            id: 'm1',
+            label: 'Ana',
+            imageUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80',
+            ariaLabel: 'Switch to Ana',
+          },
+          {
+            id: 'm2',
+            label: 'Chris',
+            imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80',
+            ariaLabel: 'Switch to Chris',
+          },
+        ]}
+        actions={[
+          { id: 'a1', label: 'Manage Profiles', ariaLabel: 'Manage profiles', iconName: 'pensil' },
+          { id: 'a2', label: 'Account', ariaLabel: 'Open account', iconName: 'person' },
+          { id: 'a3', label: 'Help Center', ariaLabel: 'Open help center', iconName: 'question', muted: true },
+        ]}
+        footerAction={{ label: 'Sign out', ariaLabel: 'Sign out' }}
+      />
+    </section>
+
+    <section style={{ display: 'grid', gap: 'var(--fx-space-4)' }}>
+      <Text as="h2" variant="medium-title2">Video Player Patterns</Text>
+      <VideoPlayerPattern {...playerProps} />
+      <VideoPlayerChangingSoundPattern playerProps={playerProps} volumePercent={68} volumeLabel="Volume" />
+      <VideoPlayerPlaybackSpeedPattern
+        playerProps={playerProps}
+        title="Playback Speed"
+        speeds={[
+          { id: 's1', label: '0.5x' },
+          { id: 's2', label: '1.0x', selected: true },
+          { id: 's3', label: '1.25x' },
+          { id: 's4', label: '1.5x' },
+        ]}
+      />
+      <VideoPlayerSubtitlesPattern
+        playerProps={playerProps}
+        title="Subtitles"
+        options={[
+          { id: 'sub-1', label: 'Off' },
+          { id: 'sub-2', label: 'English', selected: true },
+          { id: 'sub-3', label: 'Portuguese' },
+        ]}
+      />
+      <VideoPlayerEpisodesPreviewPattern playerProps={playerProps} title="Episodes" episodes={episodeItems} />
+      <VideoPlayerNextEpisodePattern
+        playerProps={playerProps}
+        card={{
+          title: 'Next Chapter',
+          episodeLabel: 'Up next',
+          description: 'Continue playback with the following episode.',
+          artworkUrl: episodeItems[0].artworkUrl,
+          playLabel: 'Play next chapter',
+        }}
+      />
+      <VideoPlayerScrollPreviewPattern playerProps={playerProps} items={episodeItems} />
+    </section>
+  </main>
+);
diff --git a/apps/web/src/pages/PlaybackPage.jsx b/apps/web/src/pages/PlaybackPage.jsx
index 5b6c2f5..921d323 100644
--- a/apps/web/src/pages/PlaybackPage.jsx
+++ b/apps/web/src/pages/PlaybackPage.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
+import { AccessKeyForm, Card, LearnerPlaybackPage, Text } from '@flix/design-system/components';
 import { checkAccess, fetchMaterials, fetchPlayback, fetchQuiz, submitQuiz } from '../services/api.js';
 
 const eventKey = (eventSlug) => `flix.web.eventKey.${eventSlug}`;
@@ -62,8 +63,7 @@ export const PlaybackPage = () => {
         throw playbackOutcome.reason;
       }
 
-      const playbackResult = playbackOutcome.value;
-      setPlayback(playbackResult);
+      setPlayback(playbackOutcome.value);
 
       if (materialsOutcome.status === 'fulfilled') {
         setMaterials(materialsOutcome.value.items ?? []);
@@ -74,12 +74,10 @@ export const PlaybackPage = () => {
 
       if (quizOutcome.status === 'fulfilled') {
         setQuiz(quizOutcome.value.item ?? null);
+      } else if (quizOutcome.reason?.status === 404 && quizOutcome.reason?.code === 'QUIZ_NOT_FOUND') {
+        setQuiz(null);
       } else {
-        if (quizOutcome.reason?.status === 404 && quizOutcome.reason?.code === 'QUIZ_NOT_FOUND') {
-          setQuiz(null);
-        } else {
-          setQuizError(quizOutcome.reason?.message ?? 'Failed to load quiz');
-        }
+        setQuizError(quizOutcome.reason?.message ?? 'Failed to load quiz');
       }
 
       if (accessKey) {
@@ -139,149 +137,121 @@ export const PlaybackPage = () => {
     ? quiz.questions.filter((question) => Boolean(selectedAnswers[question.id])).length
     : 0;
 
-  return (
-    <main className="web-layout">
-      <header className="web-header">
-        <h1>Lesson Playback</h1>
-        <p>
-          <Link to={`/events/${eventSlug}`}>Back to catalog</Link>
-        </p>
-      </header>
+  const materialsNode = (
+    <div style={{ display: 'grid', gap: 'var(--fx-space-3)' }}>
+      {loading ? <Text as="p" variant="regular-body" tone="secondary">Loading materials...</Text> : null}
+      {materialsError ? <Text as="p" variant="regular-body" tone="error">{materialsError}</Text> : null}
+      {!loading && !materialsError && Array.isArray(materials) && materials.length === 0 ? (
+        <Text as="p" variant="regular-body" tone="secondary">No materials available for this lesson.</Text>
+      ) : null}
 
-      <section className="panel">
-        <div className="inline-fields">
-          <input
-            placeholder="Event access key (optional)"
-            value={accessKey}
-            onChange={(event) => setAccessKey(event.target.value)}
-          />
-          <button type="button" onClick={loadPlayback} disabled={loading}>
-            {loading ? 'Checking...' : 'Refresh access'}
-          </button>
-        </div>
+      {!loading && Array.isArray(materials) && materials.length > 0 ? (
+        <ul className="card-list">
+          {materials.map((item) => (
+            <li key={item.id}>
+              <div>
+                <strong>{item.fileName}</strong>
+                <p className="muted">
+                  {item.mimeType} • {Math.round(item.sizeBytes / 1024)} KB
+                </p>
+              </div>
+              <a href={item.downloadUrl} target="_blank" rel="noreferrer">
+                Download
+              </a>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
 
-        {error ? <p className="status-error">{error}</p> : null}
-        {statusText ? <p className="status-warn">{statusText}</p> : null}
+  const quizNode = (
+    <div style={{ display: 'grid', gap: 'var(--fx-space-3)' }}>
+      {loading ? <Text as="p" variant="regular-body" tone="secondary">Loading quiz...</Text> : null}
+      {quizError ? <Text as="p" variant="regular-body" tone="error">{quizError}</Text> : null}
+      {!loading && !quizError && !quiz ? <Text as="p" variant="regular-body" tone="secondary">No quiz available for this lesson.</Text> : null}
 
-        {access?.timing ? (
+      {!loading && quiz && !quizResult ? (
+        <div className="quiz-shell">
           <p>
-            Release at: <code>{access.timing.releaseAt}</code>
+            <strong>{quiz.title}</strong>
+          </p>
+          <p className="muted">
+            Answered {answeredQuestions}/{quiz.questions.length}
           </p>
-        ) : null}
-      </section>
-
-      {playback ? (
-        <>
-          <section className="panel">
-            <h2>{playback.lesson.title}</h2>
-            <p>
-              Provider: <code>{playback.player.provider}</code>
-            </p>
-            <p>
-              Embed URL: <a href={playback.player.embedUrl}>{playback.player.embedUrl}</a>
-            </p>
-
-            <div className="inline-actions">
-              {playback.navigation.previous ? (
-                <Link to={`/events/${eventSlug}/lessons/${playback.navigation.previous.slug}`}>Previous</Link>
-              ) : (
-                <span className="muted">No previous lesson</span>
-              )}
-
-              {playback.navigation.next ? (
-                <Link to={`/events/${eventSlug}/lessons/${playback.navigation.next.slug}`}>Next</Link>
-              ) : (
-                <span className="muted">No next lesson</span>
-              )}
-            </div>
-          </section>
-
-          <section className="panel">
-            <h3>Lesson Materials</h3>
-            {loading ? <p className="muted">Loading materials...</p> : null}
-            {materialsError ? <p className="status-error">{materialsError}</p> : null}
-            {!loading && !materialsError && Array.isArray(materials) && materials.length === 0 ? (
-              <p className="muted">No materials available for this lesson.</p>
-            ) : null}
-
-            {!loading && Array.isArray(materials) && materials.length > 0 ? (
-              <ul className="card-list">
-                {materials.map((item) => (
-                  <li key={item.id}>
-                    <div>
-                      <strong>{item.fileName}</strong>
-                      <p className="muted">
-                        {item.mimeType} • {Math.round(item.sizeBytes / 1024)} KB
-                      </p>
-                    </div>
-                    <a href={item.downloadUrl} target="_blank" rel="noreferrer">
-                      Download
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            ) : null}
-          </section>
-
-          <section className="panel">
-            <h3>Lesson Quiz</h3>
-            {loading ? <p className="muted">Loading quiz...</p> : null}
-            {quizError ? <p className="status-error">{quizError}</p> : null}
-            {!loading && !quizError && !quiz ? <p className="muted">No quiz available for this lesson.</p> : null}
 
-            {!loading && quiz && !quizResult ? (
-              <div className="quiz-shell">
-                <p>
-                  <strong>{quiz.title}</strong>
-                </p>
-                <p className="muted">
-                  Answered {answeredQuestions}/{quiz.questions.length}
-                </p>
+          {quiz.questions.map((question) => (
+            <fieldset key={question.id} className="quiz-question">
+              <legend>{question.prompt}</legend>
+              {question.options.map((option) => (
+                <label key={option.id} className="quiz-option">
+                  <input
+                    type="radio"
+                    name={question.id}
+                    value={option.id}
+                    checked={selectedAnswers[question.id] === option.id}
+                    onChange={() => selectAnswer(question.id, option.id)}
+                  />
+                  {option.text}
+                </label>
+              ))}
+            </fieldset>
+          ))}
+
+          {submitError ? <p className="status-error">{submitError}</p> : null}
+          <button type="button" disabled={submittingQuiz} onClick={submitQuizAttempt}>
+            {submittingQuiz ? 'Submitting...' : 'Submit quiz'}
+          </button>
+        </div>
+      ) : null}
 
-                {quiz.questions.map((question) => (
-                  <fieldset key={question.id} className="quiz-question">
-                    <legend>{question.prompt}</legend>
-                    {question.options.map((option) => (
-                      <label key={option.id} className="quiz-option">
-                        <input
-                          type="radio"
-                          name={question.id}
-                          value={option.id}
-                          checked={selectedAnswers[question.id] === option.id}
-                          onChange={() => selectAnswer(question.id, option.id)}
-                        />
-                        {option.text}
-                      </label>
-                    ))}
-                  </fieldset>
-                ))}
+      {quizResult ? (
+        <div className="quiz-result">
+          <p>
+            Result: <strong>{quizResult.status === 'passed' ? 'Passed' : 'Failed'}</strong>
+          </p>
+          <p>
+            Score: <strong>{quizResult.scorePercentage}%</strong> ({quizResult.correctAnswers}/
+            {quizResult.totalQuestions} correct)
+          </p>
+          <p className="muted">
+            Required pass score: {quizResult.passPercentage}% • Submitted at {quizResult.submittedAt}
+          </p>
+          <button type="button" onClick={() => setQuizResult(null)}>
+            Retake quiz
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
 
-                {submitError ? <p className="status-error">{submitError}</p> : null}
-                <button type="button" disabled={submittingQuiz} onClick={submitQuizAttempt}>
-                  {submittingQuiz ? 'Submitting...' : 'Submit quiz'}
-                </button>
-              </div>
-            ) : null}
+  return (
+    <main style={{ display: 'grid', gap: 'var(--fx-space-4)' }}>
+      <section style={{ maxWidth: 1100, width: '100%', margin: '0 auto', padding: 'var(--fx-space-6)' }}>
+        <Card>
+          <Text as="h1" variant="medium-title2">Lesson Playback</Text>
+          <Text as="p" variant="regular-small-body-normal" style={{ margin: '0 0 var(--fx-space-3)' }}>
+            <Link to={`/events/${eventSlug}`}>Back to catalog</Link>
+          </Text>
+
+          <AccessKeyForm value={accessKey} onChange={setAccessKey} onSubmit={loadPlayback} loading={loading} />
+
+          {error ? <Text as="p" variant="regular-body" tone="error">{error}</Text> : null}
+          {statusText ? <Text as="p" variant="regular-body" tone="secondary">{statusText}</Text> : null}
+          {access?.timing ? (
+            <Text as="p" variant="regular-small-body-normal">Release at: <code>{access.timing.releaseAt}</code></Text>
+          ) : null}
+        </Card>
+      </section>
 
-            {quizResult ? (
-              <div className="quiz-result">
-                <p>
-                  Result: <strong>{quizResult.status === 'passed' ? 'Passed' : 'Failed'}</strong>
-                </p>
-                <p>
-                  Score: <strong>{quizResult.scorePercentage}%</strong> ({quizResult.correctAnswers}/
-                  {quizResult.totalQuestions} correct)
-                </p>
-                <p className="muted">
-                  Required pass score: {quizResult.passPercentage}% • Submitted at {quizResult.submittedAt}
-                </p>
-                <button type="button" onClick={() => setQuizResult(null)}>
-                  Retake quiz
-                </button>
-              </div>
-            ) : null}
-          </section>
-        </>
+      {playback ? (
+        <LearnerPlaybackPage
+          title={playback.lesson.title}
+          embedUrl={playback.player.embedUrl}
+          provider={playback.player.provider}
+          materials={materialsNode}
+          quiz={quizNode}
+        />
       ) : null}
     </main>
   );
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 5ae7cd1..c08b09b 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1,8 +1,8 @@
 :root {
-  color-scheme: light;
-  font-family: "Space Grotesk", "Segoe UI", sans-serif;
-  background: radial-gradient(circle at top, #fef3c7 0%, #fffbeb 48%, #ffffff 100%);
-  color: #1f2937;
+  color-scheme: dark;
+  font-family: var(--fx-font-sans);
+  background: var(--fx-color-bg-primary);
+  color: var(--fx-color-text-primary);
 }
 
 * { box-sizing: border-box; }
@@ -10,51 +10,106 @@
 body {
   margin: 0;
   min-height: 100vh;
+  background:
+    radial-gradient(circle at 15% -20%, rgb(229 9 20 / 24%), transparent 55%),
+    radial-gradient(circle at 90% 0%, rgb(255 255 255 / 8%), transparent 35%),
+    var(--fx-color-bg-primary);
+  color: var(--fx-color-text-primary);
 }
 
 .web-layout {
-  max-width: 980px;
+  max-width: 1100px;
   margin: 0 auto;
-  padding: 1rem;
+  padding: var(--fx-space-6);
   display: grid;
-  gap: 0.9rem;
+  gap: var(--fx-space-4);
 }
 
 .web-header h1 {
   margin: 0;
+  font-family: var(--fx-font-display);
+  font-size: var(--fx-text-display);
+  line-height: 1;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--fx-color-text-primary);
+}
+
+.web-header p {
+  margin: var(--fx-space-2) 0 0;
+  color: var(--fx-color-text-secondary);
 }
 
 .panel {
-  background: #ffffff;
-  border: 1px solid #d1d5db;
-  border-radius: 12px;
-  padding: 1rem;
+  background: var(--fx-color-bg-elevated);
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  padding: var(--fx-space-5);
 }
 
 .panel h3 {
   margin-top: 0;
+  color: var(--fx-color-text-primary);
+}
+
+.panel h2 {
+  margin-top: 0;
+  color: var(--fx-color-text-primary);
+}
+
+.hero-panel {
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  padding: var(--fx-space-8) var(--fx-space-6);
+  background:
+    linear-gradient(110deg, rgb(0 0 0 / 70%) 0%, rgb(0 0 0 / 40%) 60%),
+    radial-gradient(circle at 80% 20%, rgb(229 9 20 / 35%) 0%, transparent 55%),
+    var(--fx-color-bg-elevated);
+}
+
+.hero-panel h2 {
+  margin: var(--fx-space-2) 0;
+  font-size: var(--fx-text-title);
+  color: var(--fx-color-text-primary);
+}
+
+.hero-eyebrow {
+  margin: 0;
+  color: var(--fx-color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.7px;
+  font-size: var(--fx-text-caption);
 }
 
 .inline-fields {
   display: grid;
-  gap: 0.5rem;
+  gap: var(--fx-space-2);
   grid-template-columns: 1fr auto;
 }
 
 .inline-fields input {
-  border: 1px solid #9ca3af;
-  border-radius: 8px;
-  padding: 0.55rem 0.65rem;
+  border: 1px solid var(--fx-color-border-strong);
+  border-radius: var(--fx-radius-lg);
+  background: transparent;
+  color: var(--fx-color-text-primary);
+  padding: var(--fx-space-3) var(--fx-space-4);
 }
 
 button,
 a {
   border: 0;
-  border-radius: 8px;
-  background: #0369a1;
-  color: #f8fafc;
-  padding: 0.55rem 0.75rem;
+  border-radius: var(--fx-radius-lg);
+  background: var(--fx-color-brand-primary);
+  color: var(--fx-color-text-primary);
+  padding: var(--fx-space-3) var(--fx-space-4);
   text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+button:hover,
+a:hover {
+  background: var(--fx-color-brand-hover);
 }
 
 .card-list {
@@ -62,90 +117,165 @@ a {
   padding: 0;
   list-style: none;
   display: grid;
-  gap: 0.6rem;
+  gap: var(--fx-space-3);
 }
 
 .card-list li {
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  padding: 0.7rem;
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  background: var(--fx-color-bg-card);
+  padding: var(--fx-space-4);
   display: flex;
   justify-content: space-between;
-  gap: 0.8rem;
+  gap: var(--fx-space-3);
   align-items: center;
 }
 
+.lesson-rail {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(240px, 1fr);
+  gap: var(--fx-space-3);
+  overflow-x: auto;
+}
+
+.lesson-tile {
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  background:
+    linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 75%) 100%),
+    var(--fx-color-bg-card);
+  padding: var(--fx-space-4);
+  min-height: 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--fx-space-4);
+}
+
 .badge {
   border-radius: 999px;
-  padding: 0.15rem 0.5rem;
-  font-size: 0.8rem;
-  border: 1px solid #cbd5e1;
+  padding: 2px var(--fx-space-3);
+  font-size: var(--fx-text-caption);
+  border: 1px solid var(--fx-color-border-default);
+  color: var(--fx-color-text-primary);
+}
+
+.badge.released {
+  background: rgb(70 211 105 / 24%);
+  border-color: var(--fx-color-success);
 }
 
-.badge.released { background: #dcfce7; }
-.badge.locked { background: #fef9c3; }
-.badge.expired { background: #fee2e2; }
+.badge.locked {
+  background: rgb(68 142 244 / 20%);
+}
+
+.badge.expired {
+  background: rgb(235 57 66 / 20%);
+  border-color: var(--fx-color-error);
+}
 
 .status-error {
-  color: #b91c1c;
+  color: var(--fx-color-error);
 }
 
 .status-warn {
-  color: #92400e;
+  color: var(--fx-color-text-secondary);
 }
 
 .inline-actions {
   display: flex;
-  gap: 0.6rem;
+  gap: var(--fx-space-3);
   align-items: center;
 }
 
 .quiz-shell {
   display: grid;
-  gap: 0.7rem;
+  gap: var(--fx-space-3);
 }
 
 .quiz-question {
-  border: 1px solid #d1d5db;
-  border-radius: 10px;
-  padding: 0.6rem 0.75rem;
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  padding: var(--fx-space-4);
+  background: var(--fx-color-bg-card);
   margin: 0;
 }
 
 .quiz-question legend {
-  padding: 0 0.2rem;
+  padding: 0 var(--fx-space-1);
   font-weight: 600;
 }
 
 .quiz-option {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  margin-top: 0.35rem;
+  gap: var(--fx-space-2);
+  margin-top: var(--fx-space-2);
 }
 
 .quiz-result {
   display: grid;
-  gap: 0.25rem;
+  gap: var(--fx-space-1);
 }
 
 .quiz-result p {
   margin: 0;
 }
 
+.player-shell {
+  display: grid;
+  gap: var(--fx-space-4);
+}
+
+.player-frame {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 1px solid var(--fx-color-border-default);
+  border-radius: var(--fx-radius-xl);
+  overflow: hidden;
+  background: var(--fx-color-bg-secondary);
+}
+
+.player-frame iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .muted {
-  color: #6b7280;
+  color: var(--fx-color-text-tertiary);
 }
 
 code {
   font-family: "JetBrains Mono", monospace;
+  color: var(--fx-color-text-secondary);
 }
 
 @media (max-width: 640px) {
+  .web-layout {
+    padding: var(--fx-space-4);
+  }
+
+  .web-header h1 {
+    font-size: 36px;
+  }
+
   .inline-fields {
     grid-template-columns: 1fr;
   }
 
+  .hero-panel {
+    padding: var(--fx-space-6) var(--fx-space-4);
+  }
+
+  .lesson-rail {
+    grid-auto-columns: minmax(220px, 1fr);
+  }
+
   .card-list li {
     flex-direction: column;
     align-items: flex-start;
diff --git a/docs/design-system-canonical-policy.md b/docs/design-system-canonical-policy.md
index db0a201..eca45f9 100644
--- a/docs/design-system-canonical-policy.md
+++ b/docs/design-system-canonical-policy.md
@@ -1,7 +1,9 @@
 # Design System Canonical Policy
 
 ## Rule
-- Canonical source for tokens and foundations is `packages/design-system`.
+- Source of truth for visual design decisions is `design-system/netflix-design-system/Netflix Design System.pdf`.
+- Source of truth for navigation/usability flows is `design-system/netflix-course-workflow.md`.
+- Canonical implementation source for tokens and foundations in code is `packages/design-system`.
 - Legacy folder `design-system/` is reference-only and must not be imported by app code.
 
 ## Current Canonical Files
diff --git a/docs/design-system-showcase.md b/docs/design-system-showcase.md
new file mode 100644
index 0000000..38f115a
--- /dev/null
+++ b/docs/design-system-showcase.md
@@ -0,0 +1,25 @@
+# Design System Showcase
+
+Rota de demonstração completa do design system:
+
+- URL: `/design-system`
+- App: `apps/web`
+- Página: `apps/web/src/pages/DesignSystemShowcasePage.jsx`
+
+## Cobertura atual
+
+- Tokens globais carregados por app (`@flix/design-system/tokens/theme.css`)
+- Hero variants (`HomeHero`, `HeroMobile`)
+- User profile anatomy (`UserProfilesPattern`, `ProfileMenuPattern`)
+- Video player anatomy completo:
+  - `VideoPlayerPattern`
+  - `VideoPlayerChangingSoundPattern`
+  - `VideoPlayerPlaybackSpeedPattern`
+  - `VideoPlayerSubtitlesPattern`
+  - `VideoPlayerEpisodesPreviewPattern`
+  - `VideoPlayerNextEpisodePattern`
+  - `VideoPlayerScrollPreviewPattern`
+
+## Objetivo
+
+A página funciona como referência viva para inspeção visual, comparação de estados e uso correto de props sem conteúdo hardcoded dentro dos componentes de design system.
diff --git a/docs/frontend-netflix-recovery-plan.md b/docs/frontend-netflix-recovery-plan.md
new file mode 100644
index 0000000..55b9829
--- /dev/null
+++ b/docs/frontend-netflix-recovery-plan.md
@@ -0,0 +1,127 @@
+# Frontend Netflix Recovery Plan
+
+Date: 2026-02-12
+Owner: Product + Architecture + Frontend Guild
+Status: Proposed
+
+## Source of Truth
+
+1. Design System (visual identity, typography, color, component style): `design-system/netflix-design-system/Netflix Design System.pdf`
+2. Navigation and usability (flows, screens, UX behavior): `design-system/netflix-course-workflow.md`
+3. `packages/design-system` is the implementation layer and must mirror the two sources above, never redefine them.
+
+## 1) Diagnosis (Evidence)
+
+1. Frontend flows exist, but visual implementation is not aligned with Netflix identity.
+2. Learner and admin styles are currently custom light themes (`apps/web/src/styles.css`, `apps/admin/src/styles.css`), not token-driven Netflix UI.
+3. Canonical design-system policy requires `packages/design-system` as source of truth (`docs/design-system-canonical-policy.md`), but app code is not consuming DS tokens/components.
+4. Design-system package exists but is still scaffold-level for tooling (`packages/design-system/package.json` scripts are placeholders).
+5. Product workflow/specification is detailed and must be treated as contract (`design-system/netflix-course-workflow.md`, `design-system/netflix-design-system/Netflix Design System.pdf`).
+
+## 2) Mandatory Recovery Goal
+
+Deliver both apps (`apps/web`, `apps/admin`) with atomic, reusable, Netflix-consistent UI by enforcing design-system-first implementation and blocking release on visual/runtime quality gates.
+
+## 3) Agent Call Plan
+
+1. `@sm` (Product/Scope Owner)
+- Freeze MVP screen scope from workflow and define non-negotiable screens/states.
+- Approve final acceptance checklist by flow.
+
+2. `@ux-design-expert` (UX/Visual Authority)
+- Convert PDF + workflow into implementable UI spec (desktop/mobile, component states, spacing, typography, interactions).
+- Approve fidelity before QA closes stories.
+
+3. `@architect` (Technical Gate)
+- Enforce DS consumption rule and component architecture.
+- Block merges that bypass tokens/components.
+
+4. `@dev` as `@design-system-engineer`
+- Hardening `@flix/design-system` package (build/test/typecheck real scripts).
+- Build atomic layer: tokens -> primitives -> composed components.
+
+5. `@dev` as `@frontend-web`
+- Migrate learner app pages to DS components and Netflix layout patterns.
+
+6. `@dev` as `@frontend-admin`
+- Migrate admin app pages to DS-driven form/table/layout system.
+
+7. `@qa` / `@e2e`
+- Add visual + functional gates (smoke, regression, key responsive breakpoints).
+
+## 4) Execution Plan (Hard Timeline)
+
+## Phase 0 - Contract Freeze (2026-02-12 to 2026-02-13)
+1. Build a screen inventory from workflow and existing routes.
+2. Mark each screen/state as `Must`, `Should`, `Later`.
+3. Lock acceptance criteria per screen (including loading/empty/error states).
+
+Deliverables
+- `docs/frontend-screen-contract.md`
+- Updated story checklist with explicit screen/state matrix.
+
+## Phase 1 - Atomic Design System Foundation (2026-02-13 to 2026-02-16)
+1. Normalize DS package scripts/build pipeline in `packages/design-system`.
+2. Publish atomic primitives:
+- Typography, color, spacing, radius, elevation, motion.
+- Layout primitives (`Page`, `Section`, `Grid`, `Stack`).
+- Form primitives (`Input`, `Select`, `Textarea`, `Checkbox`, `Button`).
+- Content primitives (`Card`, `Badge`, `Tabs`, `Modal`, `Toast`, `Table`).
+3. Add strict lint/test rule: app code cannot hardcode colors/fonts outside DS.
+
+Deliverables
+- DS package consumable by both apps.
+- Token usage verifier integrated in CI.
+
+## Phase 2 - Learner App Migration (2026-02-16 to 2026-02-19)
+1. Rebuild catalog and playback pages with Netflix structure:
+- Hero, rail/cards, release badges, access-state messaging, quiz/material sections.
+2. Keep existing API integrations intact while replacing view layer.
+3. Validate responsive behavior (mobile first + desktop cinematic layout).
+
+Deliverables
+- `apps/web` UI fully DS-based.
+- No raw palette/typography leakage.
+
+## Phase 3 - Admin App Migration (2026-02-19 to 2026-02-22)
+1. Rebuild login and dashboard operation surfaces with DS components.
+2. Recompose event/lesson/material/quiz flows as consistent admin patterns.
+3. Integrate branding generation UX with clear preview/rollback and status feedback.
+
+Deliverables
+- `apps/admin` UI fully DS-based.
+- Form validation and feedback visually standardized.
+
+## Phase 4 - Closure Gates (2026-02-22 to 2026-02-24)
+1. Run full quality gates:
+- Unit/integration/e2e.
+- Visual review checklist per contract.
+- Responsive acceptance (mobile/tablet/desktop).
+2. Promote stories only with evidence links.
+3. Release decision with explicit GO/NO-GO minutes.
+
+Deliverables
+- `docs/frontend-visual-qa-checklist.md`
+- Updated readiness report with frontend fidelity evidence.
+
+## 5) Non-Negotiable Merge Gates
+
+1. No merge if app CSS hardcodes brand colors/typography outside DS tokens.
+2. No merge if required workflow screens/states are missing.
+3. No merge if smoke e2e fails on admin or learner critical paths.
+4. No merge if mobile layout breaks at small breakpoint.
+5. No merge if UX authority (`@ux-design-expert`) and architecture gate (`@architect`) did not approve.
+
+## 6) Definition of Done (Frontend)
+
+1. All MVP screens from workflow implemented in web/admin with Netflix identity.
+2. Both apps consume `@flix/design-system` tokens/components as default path.
+3. Accessibility baseline respected (focus states, contrast, keyboard nav).
+4. Functional tests and smoke e2e passing.
+5. Documentation updated with exact evidence per story.
+
+## 7) Immediate Next Action (Today)
+
+1. Open a dedicated branch `feat/frontend-netflix-recovery`.
+2. Execute Phase 0 and publish screen contract in docs.
+3. Start Phase 1 by hardening `packages/design-system` scripts and CI gates.
diff --git a/docs/frontend-screen-contract.md b/docs/frontend-screen-contract.md
new file mode 100644
index 0000000..7f47d70
--- /dev/null
+++ b/docs/frontend-screen-contract.md
@@ -0,0 +1,33 @@
+# Frontend Screen Contract (Workflow vs Current Apps)
+
+Date: 2026-02-12
+Sources:
+- Visual design: `design-system/netflix-design-system/Netflix Design System.pdf`
+- Navigation/usability: `design-system/netflix-course-workflow.md`
+
+## Admin App
+
+1. `/admin/login` - Must - Implemented (needs Netflix visual fidelity uplift)
+2. `/admin/dashboard` - Must - Implemented (needs information architecture split by workflow menu)
+3. `/admin/eventos` - Must - Implemented (phase 1 routing with dedicated section)
+4. `/admin/eventos/novo` - Must - Implemented (dedicated create mode and reset form behavior)
+5. `/admin/eventos/:id/editar` - Must - Implemented (dedicated edit mode with route-id selection)
+6. `/admin/aulas` - Must - Implemented (phase 1 routing with dedicated section)
+7. `/admin/quizzes` - Should - Implemented (phase 1 routing with dedicated section)
+8. `/admin/usuarios` - Later - Not planned for MVP
+
+## Learner App
+
+1. `/events/:eventSlug` - Must - Implemented (catalog)
+2. `/events/:eventSlug/lessons/:lessonSlug` - Must - Implemented (playback + materials + quiz)
+3. Private access key gating state - Must - Implemented
+4. Locked lesson state - Must - Implemented
+5. Expired lesson state - Must - Implemented
+6. Hero/featured cinematic landing composition - Must - Implemented (phase 1 visual rebuild)
+7. Netflix row/card browsing pattern - Must - Implemented (phase 1 rails/tile pattern)
+
+## Execution Priorities
+
+1. P0: route split for admin workflow screens to match markdown navigation contract. (Done 2026-02-12)
+2. P1: learner catalog/playback visual rebuild to Netflix card/hero patterns. (Done 2026-02-12 phase 1)
+3. P2: admin visual system and component consistency uplift (split section component into dedicated page files). (Done 2026-02-12 phase 1)
diff --git a/docs/frontend-war-room.md b/docs/frontend-war-room.md
new file mode 100644
index 0000000..d60b901
--- /dev/null
+++ b/docs/frontend-war-room.md
@@ -0,0 +1,51 @@
+# Frontend War Room (YOLO Execution)
+
+Date: 2026-02-12
+Mode: Execution-first (no more discovery-only cycles)
+
+## Command Center
+
+1. Visual source of truth: `design-system/netflix-design-system/Netflix Design System.pdf`
+2. Navigation/usability source of truth: `design-system/netflix-course-workflow.md`
+3. Code implementation source: `packages/design-system` + `apps/web` + `apps/admin`
+
+## Parallel Lanes
+
+1. Lane A - Design System Core (`@dev` as DS Engineer)
+- Harden package scripts (build/test/typecheck).
+- Expose stable primitives and tokens.
+- Deliverable gate: apps consume DS tokens without hardcoded theme values.
+
+2. Lane B - Learner UI Migration (`@dev` as Frontend Web)
+- Catalog/playback/materials/quiz surfaces using Netflix layout language.
+- Deliverable gate: all learner states from workflow (`loading`, `empty`, `error`, gated access).
+
+3. Lane C - Admin UI Migration (`@dev` as Frontend Admin)
+- Login + dashboard + CRUD forms + branding flows with unified components.
+- Deliverable gate: consistent form/table/feedback patterns.
+
+4. Lane D - Quality Gates (`@qa` / `@architect`)
+- Token usage checks, unit/integration, smoke e2e, responsive checks.
+- Deliverable gate: no release if any lane fails.
+
+## Daily Gate (Blocking)
+
+1. `npm run build --workspace @flix/web`
+2. `npm run build --workspace @flix/admin`
+3. `node scripts/verify-token-usage.mjs apps/web/src`
+4. `node scripts/verify-token-usage.mjs apps/admin/src`
+5. `npm run e2e:smoke:gate`
+
+Any failure blocks merge.
+
+## Current Sprint Cutline
+
+1. P0: Remove all light-theme placeholder styling and switch to tokenized Netflix baseline.
+2. P1: Map workflow screens to implemented routes and fill missing screens/states.
+3. P2: Raise visual fidelity (spacing/typography/components) to PDF baseline.
+
+## Status Snapshot
+
+1. P0 in progress.
+2. P1 pending.
+3. P2 pending.
diff --git a/e2e/playwright.config.mjs b/e2e/playwright.config.mjs
index aa89e65..bee50da 100644
--- a/e2e/playwright.config.mjs
+++ b/e2e/playwright.config.mjs
@@ -7,6 +7,12 @@ const configDir = dirname(fileURLToPath(import.meta.url));
 const repoRoot = resolve(configDir, '..');
 const dbFilePath = `${repoRoot}/services/api/.data/flix.e2e.sqlite`;
 const dbUrl = `file:${dbFilePath}`;
+const e2eApiPort = 3901;
+const e2eAdminPort = 4274;
+const e2eWebPort = 4273;
+const e2eApiUrl = `http://127.0.0.1:${e2eApiPort}`;
+const e2eAdminUrl = `http://127.0.0.1:${e2eAdminPort}`;
+const e2eWebUrl = `http://127.0.0.1:${e2eWebPort}`;
 
 export default defineConfig({
   testDir: './tests',
@@ -17,7 +23,7 @@ export default defineConfig({
   timeout: 45_000,
   reporter: [['list'], ['html', { open: 'never', outputFolder: 'playwright-report' }]],
   use: {
-    baseURL: 'http://127.0.0.1:4173',
+    baseURL: e2eWebUrl,
     trace: 'retain-on-failure',
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',
@@ -25,23 +31,23 @@ export default defineConfig({
   webServer: [
     {
       command:
-        `sh -c "cd .. && DATABASE_URL=${dbUrl} npm run db:reset --workspace @flix/api && DATABASE_URL=${dbUrl} API_PORT=3001 PERSISTENCE_ADAPTER=sqlite CORS_ORIGIN=http://127.0.0.1:4173,http://127.0.0.1:4174,http://localhost:4173,http://localhost:4174 node services/api/src/server.js"`,
-      url: 'http://127.0.0.1:3001/health',
-      reuseExistingServer: !isCi,
+        `sh -c "cd .. && DATABASE_URL=${dbUrl} npm run db:reset --workspace @flix/api && DATABASE_URL=${dbUrl} API_PORT=${e2eApiPort} PERSISTENCE_ADAPTER=sqlite CORS_ORIGIN=${e2eWebUrl},${e2eAdminUrl},http://localhost:${e2eWebPort},http://localhost:${e2eAdminPort} node services/api/src/server.js"`,
+      url: `${e2eApiUrl}/health`,
+      reuseExistingServer: false,
       timeout: 120_000,
     },
     {
       command:
-        'sh -c "cd .. && VITE_API_BASE_URL=http://127.0.0.1:3001 npm run dev --workspace @flix/admin -- --host 127.0.0.1 --port 4174"',
-      url: 'http://127.0.0.1:4174/login',
-      reuseExistingServer: !isCi,
+        `sh -c "cd .. && VITE_API_BASE_URL=${e2eApiUrl} npm run dev --workspace @flix/admin -- --host 127.0.0.1 --port ${e2eAdminPort}"`,
+      url: `${e2eAdminUrl}/login`,
+      reuseExistingServer: false,
       timeout: 120_000,
     },
     {
       command:
-        'sh -c "cd .. && VITE_API_BASE_URL=http://127.0.0.1:3001 npm run dev --workspace @flix/web -- --host 127.0.0.1 --port 4173"',
-      url: 'http://127.0.0.1:4173/events/flix-mvp-launch-event',
-      reuseExistingServer: !isCi,
+        `sh -c "cd .. && VITE_API_BASE_URL=${e2eApiUrl} npm run dev --workspace @flix/web -- --host 127.0.0.1 --port ${e2eWebPort}"`,
+      url: `${e2eWebUrl}/events/flix-mvp-launch-event`,
+      reuseExistingServer: false,
       timeout: 120_000,
     },
   ],
diff --git a/e2e/tests/admin-smoke.spec.mjs b/e2e/tests/admin-smoke.spec.mjs
index 1717384..67d774f 100644
--- a/e2e/tests/admin-smoke.spec.mjs
+++ b/e2e/tests/admin-smoke.spec.mjs
@@ -1,10 +1,13 @@
 import { expect, test } from '@playwright/test';
 
 test('admin happy path smoke: login and create event', async ({ page }) => {
-  await page.goto('http://127.0.0.1:4174/login');
+  await page.goto('http://127.0.0.1:4274/login');
 
   await page.getByRole('button', { name: 'Sign in' }).click();
-  await expect(page.getByRole('heading', { name: 'Admin Content Operations' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Eventos', exact: true })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Eventos', exact: true }).click();
+  await expect(page).toHaveURL(/\/eventos/);
 
   const randomSuffix = `${Date.now()}`;
   await page.getByPlaceholder('Event title').fill(`E2E Event ${randomSuffix}`);
diff --git a/e2e/tests/learner-smoke.spec.mjs b/e2e/tests/learner-smoke.spec.mjs
index efc54c5..6a306e9 100644
--- a/e2e/tests/learner-smoke.spec.mjs
+++ b/e2e/tests/learner-smoke.spec.mjs
@@ -3,10 +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 Learner' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Flix', exact: true })).toBeVisible();
   await expect(page.getByRole('heading', { name: 'Catalog Access' })).toBeVisible();
 
-  const lessonLink = page.locator('a[href="/events/flix-mvp-launch-event/lessons/kickoff-do-mvp"]');
+  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 {
diff --git a/package-lock.json b/package-lock.json
index 7bcc030..4e643c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
       "name": "@flix/admin",
       "version": "0.1.0",
       "dependencies": {
+        "@flix/design-system": "0.1.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.9.4"
@@ -38,6 +39,7 @@
       "name": "@flix/web",
       "version": "0.1.0",
       "dependencies": {
+        "@flix/design-system": "0.1.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
         "react-router-dom": "^7.9.4"
diff --git a/packages/design-system/docs/README.md b/packages/design-system/docs/README.md
index 00f50bd..925d7b2 100644
--- a/packages/design-system/docs/README.md
+++ b/packages/design-system/docs/README.md
@@ -2,6 +2,23 @@
 
 This package is the canonical design-system location for the monorepo.
 
-Reference source (non-canonical):
-- ../../../design-system/
-- ../../../docs/design-system-extraction.md
+Source of truth
+- Visual design source: `../../../design-system/netflix-design-system/Netflix Design System.pdf`
+- Navigation/usability source: `../../../design-system/netflix-course-workflow.md`
+
+Component architecture (Atomic Design)
+- Atoms
+  - `Button`, `Input`, `Text`, `Badge`, `Card`, `HeroBannerControlButton`
+- Molecules
+  - `FormField`, `AccessKeyForm`, `LessonTile`, `StatTile`, `HeroBannerActionsPattern`, `HeroBannerUtilitiesPattern`
+- Organisms
+  - `AppTopNav`, `HeroBanner`, `HomeHero`, `LessonRail`, `PlaybackPanel`, `AdminHeader`, `FaqQuestionsPattern`
+- Templates
+  - `LearnerCatalogTemplate`, `LearnerPlaybackTemplate`, `AdminDashboardTemplate`, `AdminContentTemplate`
+- Pages
+  - `LearnerCatalogPage`, `LearnerPlaybackPage`, `AdminDashboardPage`, `AdminEventsPage`, `AdminLessonsPage`, `AdminQuizzesPage`
+
+Public exports
+- `@flix/design-system` -> tokens + all component layers
+- `@flix/design-system/tokens` -> tokens only
+- `@flix/design-system/tokens/theme.css` -> css variables
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 86d7f3c..f8b3490 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -14,6 +14,10 @@
       "import": "./src/tokens/index.ts",
       "types": "./src/tokens/index.ts"
     },
+    "./components": {
+      "import": "./src/components/index.ts",
+      "types": "./src/components/index.ts"
+    },
     "./tokens/theme.css": {
       "import": "./src/tokens/theme.css"
     }
diff --git a/packages/design-system/src/assets/icons/Account.svg b/packages/design-system/src/assets/icons/Account.svg
new file mode 100644
index 0000000..253b7f0
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Account.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <rect width="17.6" height="17.6" x="2.878" y="1.88" stroke="#B3B3B3" stroke-width="1.76" rx="2.64"/>
+  <path fill="#141414" d="M11.678 18.6h2.64v1.76h-2.64z"/>
+  <path stroke="#B3B3B3" stroke-linecap="round" stroke-width="1.32" d="m8.158 23 3.84-3.52-3.84-3.52"/>
+  <rect width="2.64" height="2.64" x="6.399" y="6.72" fill="#B3B3B3" rx="1.32"/>
+  <rect width="2.64" height="2.64" x="14.318" y="6.72" fill="#B3B3B3" rx="1.32"/>
+  <path stroke="#B3B3B3" stroke-linecap="round" stroke-width="1.32" d="M9.918 12.88s1.865.44 3.08.44c1.216 0 3.08-.44 3.08-.44"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ArrowDown.svg b/packages/design-system/src/assets/icons/ArrowDown.svg
new file mode 100644
index 0000000..3f678d2
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ArrowDown.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" fill-rule="evenodd" d="m7 10 5 5 5-5H7Z" clip-rule="evenodd"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ArrowLeft.svg b/packages/design-system/src/assets/icons/ArrowLeft.svg
new file mode 100644
index 0000000..a9aaf38
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ArrowLeft.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#fff" stroke-linecap="square" stroke-width="1.875" d="M9.5 4 2 11.813l7.5 7.812"/>
+  <path stroke="#fff" stroke-width="1.875" d="M22 11.813H2.625"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ArrowRight.svg b/packages/design-system/src/assets/icons/ArrowRight.svg
new file mode 100644
index 0000000..58ff954
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ArrowRight.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#fff" stroke-linecap="square" stroke-width="2.174" d="M7.85 20 16 12 7.85 4"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ArrowRightNarrow.svg b/packages/design-system/src/assets/icons/ArrowRightNarrow.svg
new file mode 100644
index 0000000..0aadb3b
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ArrowRightNarrow.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#fff" stroke-linecap="square" stroke-width="2.28" d="m7.8 21 7.2-8.83L7.8 3"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ArrowUp.svg b/packages/design-system/src/assets/icons/ArrowUp.svg
new file mode 100644
index 0000000..8660eb3
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ArrowUp.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" fill-rule="evenodd" d="m17 15-5-5-5 5h10Z" clip-rule="evenodd"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/CircleError.svg b/packages/design-system/src/assets/icons/CircleError.svg
new file mode 100644
index 0000000..2dfdd88
--- /dev/null
+++ b/packages/design-system/src/assets/icons/CircleError.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#EB3942" fill-rule="evenodd" d="M11.591 12 9.046 9.454l.565-.565 2.546 2.545 2.545-2.545.566.565L12.722 12l2.546 2.546-.566.565-2.545-2.545L9.61 15.11l-.565-.565L11.59 12Z" clip-rule="evenodd"/>
+  <circle cx="12" cy="12" r="7.5" stroke="#EB3942"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Cross.svg b/packages/design-system/src/assets/icons/Cross.svg
new file mode 100644
index 0000000..d00bcb0
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Cross.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#fff" stroke-width="1.231" d="m4 20 8-8 8-8M4 4l16 16"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Facebook.svg b/packages/design-system/src/assets/icons/Facebook.svg
new file mode 100644
index 0000000..34d55f4
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Facebook.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" d="m16.928 13.281.606-3.95h-3.791V6.765c0-1.081.53-2.135 2.227-2.135h1.724V1.267S16.13 1 14.634 1c-3.122 0-5.163 1.892-5.163 5.318V9.33H6v3.951h3.47v9.553a13.76 13.76 0 0 0 4.273 0V13.28h3.185Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Flag.svg b/packages/design-system/src/assets/icons/Flag.svg
new file mode 100644
index 0000000..661bf10
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Flag.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" d="m12.382 5.796.447 3.272 6.935.525v4.043l-9.05-1.05V9.84L4.236 8.79V4.222l8.146 1.574Zm1.833-2.222L2 2v20h2.236V11.012l4.496.957.057 2.315L22 15.858V7.895l-7.337-.525-.448-3.796Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Info.svg b/packages/design-system/src/assets/icons/Info.svg
new file mode 100644
index 0000000..1d0cad3
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Info.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <circle cx="12" cy="12" r="9.231" stroke="#fff" stroke-width="1.538"/>
+  <path fill="#fff" d="M12.464 9.668a.94.94 0 0 1-.677-.283.912.912 0 0 1-.296-.69c0-.27.099-.504.296-.689a.94.94 0 0 1 .677-.283.99.99 0 0 1 .69.283.948.948 0 0 1 .282.69c0 .27-.098.504-.283.689a.99.99 0 0 1-.69.283Zm-.788 7.101v-6.363h1.563v6.363h-1.563Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Instagram.svg b/packages/design-system/src/assets/icons/Instagram.svg
new file mode 100644
index 0000000..56cb2cb
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Instagram.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <mask id="a" width="22" height="22" x="1" y="1" maskUnits="userSpaceOnUse" style="mask-type:luminance">
+    <path fill="#fff" d="M7.467 1.131c-1.164.055-1.96.242-2.655.514-.72.28-1.33.656-1.936 1.266-.608.61-.98 1.22-1.26 1.94-.269.697-.451 1.493-.503 2.659-.05 1.167-.062 1.54-.057 4.512.006 2.971.019 3.345.075 4.512.055 1.165.241 1.96.514 2.655.28.72.656 1.33 1.266 1.936.609.608 1.22.98 1.94 1.259.697.27 1.493.453 2.658.504 1.167.051 1.54.062 4.512.057 2.972-.006 3.345-.02 4.513-.075 1.164-.055 1.959-.242 2.655-.513a5.363 5.363 0 0 0 1.936-1.266c.607-.61.98-1.221 1.258-1.942.27-.696.453-1.492.504-2.656.05-1.168.063-1.541.057-4.513-.005-2.972-.019-3.345-.074-4.512-.056-1.165-.242-1.96-.514-2.656a5.37 5.37 0 0 0-1.266-1.936 5.356 5.356 0 0 0-1.941-1.258c-.697-.27-1.492-.453-2.657-.504-1.168-.052-1.54-.063-4.513-.057-2.972.005-3.344.018-4.512.074m.128 19.787c-1.067-.047-1.647-.224-2.033-.373a3.412 3.412 0 0 1-1.26-.816 3.402 3.402 0 0 1-.821-1.257c-.15-.386-.33-.965-.38-2.032-.055-1.154-.067-1.5-.073-4.422-.005-2.922.005-3.268.056-4.423.045-1.066.224-1.646.372-2.032.198-.512.434-.877.816-1.26A3.39 3.39 0 0 1 5.53 3.48c.385-.15.964-.33 2.03-.38 1.155-.055 1.5-.066 4.423-.072 2.922-.006 3.268.004 4.423.055 1.066.047 1.646.223 2.032.373.512.197.877.433 1.26.816.384.383.622.746.822 1.257.15.385.33.965.38 2.031.055 1.154.067 1.5.072 4.422.006 2.923-.005 3.269-.055 4.423-.047 1.067-.224 1.647-.373 2.033a3.4 3.4 0 0 1-.816 1.26 3.403 3.403 0 0 1-1.257.821c-.386.15-.965.33-2.031.38-1.154.055-1.5.068-4.423.073-2.922.006-3.267-.005-4.422-.055ZM16.518 6.15a1.313 1.313 0 1 0 2.626-.006 1.313 1.313 0 0 0-2.626.006M6.38 12.011a5.62 5.62 0 1 0 11.24-.021 5.62 5.62 0 0 0-11.24.021Zm1.972-.004a3.648 3.648 0 1 1 7.297-.012 3.648 3.648 0 0 1-7.297.012Z"/>
+  </mask>
+  <g mask="url(#a)">
+    <path fill="#fff" d="M.055.086h23.873v23.873H.055z"/>
+  </g>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Notification.svg b/packages/design-system/src/assets/icons/Notification.svg
new file mode 100644
index 0000000..9aca984
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Notification.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" d="M12.51 5.484c.34 0 1.15.216 1.15.216 2.191.502 3.734 2.52 3.734 4.8v6.135l.448.45.374.377H6.706l.375-.377.448-.45V10.5c0-2.28 1.543-4.298 3.735-4.8 0 0 .867-.216 1.15-.216M12.46 2a1.47 1.47 0 0 0-1.493 1.5v.7C8.13 4.85 5.99 7.45 5.99 10.5V16L4 18v1h16.923v-1l-1.99-2v-5.5c0-3.05-2.141-5.65-4.978-6.3v-.7c0-.85-.647-1.5-1.494-1.5Zm1.992 18H10.47a2 2 0 0 0 1.99 2c1.096 0 1.992-.9 1.992-2Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Pensil.svg b/packages/design-system/src/assets/icons/Pensil.svg
new file mode 100644
index 0000000..33abc46
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Pensil.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#B3B3B3" d="M2.684 23a1.682 1.682 0 0 1-1.666-1.95l.707-4.467c.053-.352.219-.677.472-.927L16.102 1.75a2.577 2.577 0 0 1 3.636 0l2.51 2.509a2.578 2.578 0 0 1 0 3.636L8.341 21.801c-.25.253-.575.418-.927.472l-4.467.707c-.088.013-.176.02-.264.02ZM17.92 2.598a.975.975 0 0 0-.691.283L3.327 16.795a.067.067 0 0 0-.024.047l-.707 4.46a.088.088 0 0 0 .1.1l4.467-.708a.068.068 0 0 0 .04-.023L21.108 6.769a.975.975 0 0 0 0-1.378l-2.5-2.51a.962.962 0 0 0-.688-.283Z"/>
+  <path fill="#B3B3B3" d="M19.412 10.264a.753.753 0 0 1-.535-.219l-4.73-4.723a.753.753 0 1 1 1.067-1.065l4.73 4.723a.752.752 0 0 1-.532 1.284ZM7.116 22.246c-.199 0-.217.047-.359-.093l-4.733-4.727a.752.752 0 0 1 1.067-1.062l4.733 4.724a.752.752 0 0 1 .161.82c-.057.137-.167.162-.29.245-.125.082-.43.093-.579.093Z"/>
+  <path fill="#B3B3B3" d="M3.365 21.453c-.163.002-.39.335-.526.245a.82.82 0 0 1-.306-.369c-.063-.15-.014-.697.018-.857a.821.821 0 0 1 .227-.422l13.21-13.193a.82.82 0 1 1 1.153 1.153L3.948 21.22a.82.82 0 0 1-.583.233Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Person.svg b/packages/design-system/src/assets/icons/Person.svg
new file mode 100644
index 0000000..0c8fa7d
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Person.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <circle cx="11.883" cy="5.654" r="3.807" stroke="#B3B3B3" stroke-width="1.692"/>
+  <path stroke="#B3B3B3" stroke-width="1.692" d="M11.883 11.999c4.584 0 8.038 2.93 8.038 6.77 0 1.001-.201 1.637-.487 2.058-.28.412-.7.71-1.326.919-.64.214-1.453.322-2.451.37-.996.05-2.109.036-3.352.036-2.52 0-4.689.043-6.254-.416-.756-.221-1.285-.54-1.63-.967-.34-.419-.576-1.035-.577-2 0-3.84 3.454-6.77 8.039-6.77Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Play.svg b/packages/design-system/src/assets/icons/Play.svg
new file mode 100644
index 0000000..1ee2d86
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Play.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" d="M18.383 11.043a1.08 1.08 0 0 1 0 1.914L4.58 20.174A1.08 1.08 0 0 1 3 19.217V4.783a1.08 1.08 0 0 1 1.58-.957l13.802 7.217Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/PlusThin.svg b/packages/design-system/src/assets/icons/PlusThin.svg
new file mode 100644
index 0000000..0da3227
--- /dev/null
+++ b/packages/design-system/src/assets/icons/PlusThin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="#fff" stroke-width="1.212" d="M12 21V3m-9 9h18"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/PlusWide.svg b/packages/design-system/src/assets/icons/PlusWide.svg
new file mode 100644
index 0000000..849b945
--- /dev/null
+++ b/packages/design-system/src/assets/icons/PlusWide.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" fill-rule="evenodd" d="M11.2 11.2V4h1.6v7.2H20v1.6h-7.2V20h-1.6v-7.2H4v-1.6h7.2Z" clip-rule="evenodd"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Question.svg b/packages/design-system/src/assets/icons/Question.svg
new file mode 100644
index 0000000..19b0f8d
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Question.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <circle cx="11.998" cy="12" r="10.12" stroke="#B3B3B3" stroke-width="1.76"/>
+  <path fill="#B3B3B3" d="M10.7 13.864v-.314c0-.553.105-1.032.315-1.406.194-.374.598-.748 1.196-1.092.51-.3.838-.539 1.003-.733a.903.903 0 0 0 .224-.599c0-.254-.12-.478-.374-.673-.254-.18-.583-.27-1.002-.27-.434 0-.793.09-1.062.285-.27.195-.434.434-.509.718H8.217a3.349 3.349 0 0 1 .628-1.586 3.739 3.739 0 0 1 1.362-1.122c.568-.269 1.241-.403 2.004-.403.704 0 1.332.12 1.885.374.554.254.973.613 1.287 1.062.314.463.464.987.464 1.6 0 .554-.15 1.033-.45 1.437-.298.404-.747.777-1.33 1.122-.464.284-.778.523-.913.733a1.31 1.31 0 0 0-.21.673v.194H10.7Zm1.227 3.68c-.389 0-.718-.134-1.002-.418a1.366 1.366 0 0 1-.419-1.018c0-.404.135-.733.419-1.017a1.356 1.356 0 0 1 1.002-.419c.404 0 .733.135 1.018.419.284.284.418.613.418 1.017 0 .404-.134.733-.418 1.018a1.366 1.366 0 0 1-1.018.418Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Search.svg b/packages/design-system/src/assets/icons/Search.svg
new file mode 100644
index 0000000..3264bde
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Search.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <circle cx="10.695" cy="10.696" r="7.826" stroke="#fff" stroke-width="1.739"/>
+  <path stroke="#fff" stroke-width="1.739" d="m21.564 22-5.96-6.034"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ThumbDown.svg b/packages/design-system/src/assets/icons/ThumbDown.svg
new file mode 100644
index 0000000..0b2e182
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ThumbDown.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" fill-rule="evenodd" d="M13.018 17.624v-2.62c0-.176.035-.355.109-.521 1.163-2.636 2.88-3.928 4.525-4.222a.167.167 0 0 0 .091-.047.06.06 0 0 0 .012-.017v-4.23l-.002-.004a.036.036 0 0 0-.028-.01c-1.348.082-2.223-.062-2.893-.29a6.648 6.648 0 0 1-.82-.351l-.058-.028c-.204-.1-.355-.175-.517-.233-.091-.032-.367-.073-.847-.095a27.13 27.13 0 0 0-1.596-.013c-1.184.02-2.486.086-3.322.142l-.02.001h-.02a.614.614 0 0 0-.183.022c-.03.01-.041.02-.043.02a.057.057 0 0 0-.013.02.344.344 0 0 0-.028.089c-.046.229.004.562.074.955a.99.99 0 0 1-.43.997c-.505.334-.518.74-.473.876.082.253.111.629-.102.963-.21.33-.205.542-.173.672.039.16.146.316.3.466.345.338.385.854.184 1.239-.085.164-.085.27-.073.337a.558.558 0 0 0 .144.263 1.153 1.153 0 0 0 .407.284h3.423v2.238c0 1.966.454 2.695.826 2.97.384.282.918.267 1.546.127Zm-2.27.912c-.876-.644-1.346-1.921-1.346-4.01v-.958H7.178a1.1 1.1 0 0 1-.35-.066 1.978 1.978 0 0 1-.304-.137 2.4 2.4 0 0 1-.626-.496 1.842 1.842 0 0 1-.448-.887 1.766 1.766 0 0 1 .124-1.024 2.203 2.203 0 0 1-.52-.947c-.12-.495-.045-1.038.285-1.595-.206-.716.07-1.599.841-2.191-.058-.34-.12-.818-.034-1.246a1.45 1.45 0 0 1 .466-.835c.275-.234.622-.333.998-.336a71.11 71.11 0 0 1 3.364-.143 28.08 28.08 0 0 1 1.672.014c.454.02.909.061 1.197.164.234.083.451.19.643.285l.063.03c.215.107.423.205.675.291.492.168 1.204.302 2.428.228A1.281 1.281 0 0 1 19 5.967v4.23c0 .726-.563 1.222-1.135 1.324-1.15.205-2.568 1.144-3.603 3.486v2.623c0 .573-.376 1.105-.955 1.237-.664.151-1.697.303-2.559-.33Z" clip-rule="evenodd"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/ThumbUp.svg b/packages/design-system/src/assets/icons/ThumbUp.svg
new file mode 100644
index 0000000..fda459a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/ThumbUp.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" fill-rule="evenodd" d="M10.982 5.376v2.62c0 .176-.035.355-.109.521-1.163 2.636-2.88 3.928-4.525 4.222a.167.167 0 0 0-.091.047.062.062 0 0 0-.012.017v4.23s0 .002.003.004c.006.006.016.01.027.01 1.348-.082 2.222.062 2.893.29a6.642 6.642 0 0 1 .878.38c.204.1.355.174.517.232.091.032.367.073.847.095.449.02 1.004.023 1.596.013a71.877 71.877 0 0 0 3.322-.142l.02-.001h.02c.092 0 .15-.012.183-.022a.123.123 0 0 0 .043-.02.055.055 0 0 0 .013-.02.346.346 0 0 0 .028-.089c.046-.229-.004-.562-.074-.955a.99.99 0 0 1 .43-.997c.505-.334.518-.74.473-.876-.082-.253-.111-.629.102-.963.21-.33.205-.542.173-.672-.039-.16-.146-.316-.3-.466a1.058 1.058 0 0 1-.184-1.239c.085-.164.085-.27.073-.337a.558.558 0 0 0-.144-.263 1.153 1.153 0 0 0-.407-.284h-3.423V8.473c0-1.966-.454-2.695-.826-2.97-.384-.282-.918-.267-1.546-.127Zm2.27-.912c.876.644 1.346 1.921 1.346 4.01v.958h2.224a1.1 1.1 0 0 1 .35.066c.098.034.202.081.304.137a2.4 2.4 0 0 1 .626.496c.196.22.38.518.448.887.061.33.023.678-.124 1.024.205.227.422.542.52.947.12.495.045 1.038-.285 1.595.206.716-.07 1.599-.841 2.191.058.34.12.818.034 1.247a1.445 1.445 0 0 1-.466.834c-.275.234-.622.333-.998.336-.851.056-2.163.123-3.364.143a28.17 28.17 0 0 1-1.672-.014c-.454-.02-.909-.061-1.197-.164a5.861 5.861 0 0 1-.706-.316 5.46 5.46 0 0 0-.675-.29c-.492-.168-1.204-.302-2.428-.228A1.281 1.281 0 0 1 5 17.033v-4.23c0-.726.563-1.222 1.135-1.324 1.15-.205 2.568-1.144 3.603-3.486V5.37c0-.573.376-1.106.955-1.237.664-.151 1.697-.303 2.559.33Z" clip-rule="evenodd"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/Twitter.svg b/packages/design-system/src/assets/icons/Twitter.svg
new file mode 100644
index 0000000..c2f88e4
--- /dev/null
+++ b/packages/design-system/src/assets/icons/Twitter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" d="M7.919 20.876c8.302 0 12.842-6.878 12.842-12.843 0-.195 0-.39-.013-.583A9.185 9.185 0 0 0 23 5.114a9.01 9.01 0 0 1-2.593.71 4.53 4.53 0 0 0 1.985-2.497 9.047 9.047 0 0 1-2.866 1.096A4.52 4.52 0 0 0 16.235 3c-2.479 0-4.518 2.04-4.518 4.518 0 .344.039.686.117 1.021A12.82 12.82 0 0 1 2.53 3.824a4.536 4.536 0 0 0 1.4 6.025 4.48 4.48 0 0 1-2.049-.565v.057c0 2.14 1.523 4 3.621 4.425a4.508 4.508 0 0 1-2.038.077 4.528 4.528 0 0 0 4.217 3.135A9.058 9.058 0 0 1 1 18.848a12.78 12.78 0 0 0 6.919 2.025"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/YouTube.svg b/packages/design-system/src/assets/icons/YouTube.svg
new file mode 100644
index 0000000..1afde7b
--- /dev/null
+++ b/packages/design-system/src/assets/icons/YouTube.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#fff" d="M22.54 6.403a2.755 2.755 0 0 0-1.945-1.945c-1.716-.46-8.596-.46-8.596-.46s-6.88 0-8.595.46a2.755 2.755 0 0 0-1.945 1.945c-.46 1.715-.46 5.295-.46 5.295s0 3.58.46 5.295a2.755 2.755 0 0 0 1.945 1.945c1.716.46 8.595.46 8.595.46s6.88 0 8.595-.46a2.755 2.755 0 0 0 1.945-1.945c.46-1.715.46-5.295.46-5.295s0-3.58-.46-5.295Z"/>
+  <path fill="#000" d="m9.8 14.998 5.715-3.3-5.715-3.3v6.6Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewMuteDefault.svg b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewMuteDefault.svg
new file mode 100644
index 0000000..cdea430
--- /dev/null
+++ b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewMuteDefault.svg
@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17" stroke="white" stroke-opacity="0.7"/>
+<path d="M17.7889 10.0772C17.6365 10.0112 17.4693 9.9869 17.3045 10.0067C17.1396 10.0265 16.9829 10.0897 16.8504 10.1898L12.3642 13.7374H8.93854C8.68962 13.7374 8.4509 13.8363 8.27489 14.0123C8.09888 14.1883 8 14.4271 8 14.676V20.3072C8 20.5561 8.09888 20.7948 8.27489 20.9708C8.4509 21.1469 8.68962 21.2457 8.93854 21.2457H12.3642L16.8035 24.7934C16.9686 24.9259 17.1737 24.9987 17.3854 24.9999C17.5256 25.0022 17.6642 24.97 17.7889 24.906C17.9486 24.83 18.0836 24.7103 18.1783 24.5609C18.2729 24.4114 18.3234 24.2382 18.3239 24.0613V10.9218C18.3234 10.7449 18.2729 10.5718 18.1783 10.4223C18.0836 10.2729 17.9486 10.1532 17.7889 10.0772ZM16.4468 22.1092L13.2746 19.5751C13.1094 19.4427 12.9044 19.3699 12.6927 19.3687H9.87707V15.6145H12.6927C12.9044 15.6133 13.1094 15.5405 13.2746 15.408L16.4468 12.874V22.1092ZM24.8092 17.4916L26.4986 15.8116C26.5861 15.7241 26.6555 15.6202 26.7028 15.5059C26.7502 15.3916 26.7746 15.269 26.7746 15.1453C26.7746 15.0215 26.7502 14.899 26.7028 14.7846C26.6555 14.6703 26.5861 14.5664 26.4986 14.4789C26.411 14.3914 26.3072 14.322 26.1928 14.2746C26.0785 14.2273 25.9559 14.2029 25.8322 14.2029C25.7084 14.2029 25.5859 14.2273 25.4716 14.2746C25.3572 14.322 25.2533 14.3914 25.1658 14.4789L23.4858 16.1683L21.8059 14.4789C21.6291 14.3022 21.3894 14.2029 21.1395 14.2029C20.8896 14.2029 20.6499 14.3022 20.4731 14.4789C20.2964 14.6556 20.1971 14.8953 20.1971 15.1453C20.1971 15.3952 20.2964 15.6349 20.4731 15.8116L22.1625 17.4916L20.4731 19.1716C20.3852 19.2588 20.3154 19.3626 20.2677 19.477C20.2201 19.5914 20.1955 19.714 20.1955 19.8379C20.1955 19.9618 20.2201 20.0845 20.2677 20.1989C20.3154 20.3132 20.3852 20.417 20.4731 20.5043C20.5604 20.5923 20.6642 20.6621 20.7786 20.7097C20.8929 20.7574 21.0156 20.7819 21.1395 20.7819C21.2634 20.7819 21.3861 20.7574 21.5004 20.7097C21.6148 20.6621 21.7186 20.5923 21.8059 20.5043L23.4858 18.8149L25.1658 20.5043C25.2531 20.5923 25.3569 20.6621 25.4713 20.7097C25.5856 20.7574 25.7083 20.7819 25.8322 20.7819C25.9561 20.7819 26.0788 20.7574 26.1931 20.7097C26.3075 20.6621 26.4113 20.5923 26.4986 20.5043C26.5865 20.417 26.6563 20.3132 26.704 20.1989C26.7516 20.0845 26.7762 19.9618 26.7762 19.8379C26.7762 19.714 26.7516 19.5914 26.704 19.477C26.6563 19.3626 26.5865 19.2588 26.4986 19.1716L24.8092 17.4916Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewMuteHover.svg b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewMuteHover.svg
new file mode 100644
index 0000000..61364f5
--- /dev/null
+++ b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewMuteHover.svg
@@ -0,0 +1,5 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="white" fill-opacity="0.15"/>
+<circle cx="17.5" cy="17.5" r="17" stroke="white" stroke-opacity="0.7"/>
+<path d="M17.7889 10.0772C17.6365 10.0112 17.4693 9.9869 17.3045 10.0067C17.1396 10.0265 16.9829 10.0897 16.8504 10.1898L12.3642 13.7374H8.93854C8.68962 13.7374 8.4509 13.8363 8.27489 14.0123C8.09888 14.1883 8 14.4271 8 14.676V20.3072C8 20.5561 8.09888 20.7948 8.27489 20.9708C8.4509 21.1469 8.68962 21.2457 8.93854 21.2457H12.3642L16.8035 24.7934C16.9686 24.9259 17.1737 24.9987 17.3854 24.9999C17.5256 25.0022 17.6642 24.97 17.7889 24.906C17.9486 24.83 18.0836 24.7103 18.1783 24.5609C18.2729 24.4114 18.3234 24.2382 18.3239 24.0613V10.9218C18.3234 10.7449 18.2729 10.5718 18.1783 10.4223C18.0836 10.2729 17.9486 10.1532 17.7889 10.0772ZM16.4468 22.1092L13.2746 19.5751C13.1094 19.4427 12.9044 19.3699 12.6927 19.3687H9.87707V15.6145H12.6927C12.9044 15.6133 13.1094 15.5405 13.2746 15.408L16.4468 12.874V22.1092ZM24.8092 17.4916L26.4986 15.8116C26.5861 15.7241 26.6555 15.6202 26.7028 15.5059C26.7502 15.3916 26.7746 15.269 26.7746 15.1453C26.7746 15.0215 26.7502 14.899 26.7028 14.7846C26.6555 14.6703 26.5861 14.5664 26.4986 14.4789C26.411 14.3914 26.3072 14.322 26.1928 14.2746C26.0785 14.2273 25.9559 14.2029 25.8322 14.2029C25.7084 14.2029 25.5859 14.2273 25.4716 14.2746C25.3572 14.322 25.2533 14.3914 25.1658 14.4789L23.4858 16.1683L21.8059 14.4789C21.6291 14.3022 21.3894 14.2029 21.1395 14.2029C20.8896 14.2029 20.6499 14.3022 20.4731 14.4789C20.2964 14.6556 20.1971 14.8953 20.1971 15.1453C20.1971 15.3952 20.2964 15.6349 20.4731 15.8116L22.1625 17.4916L20.4731 19.1716C20.3852 19.2588 20.3154 19.3626 20.2677 19.477C20.2201 19.5914 20.1955 19.714 20.1955 19.8379C20.1955 19.9618 20.2201 20.0845 20.2677 20.1989C20.3154 20.3132 20.3852 20.417 20.4731 20.5043C20.5604 20.5923 20.6642 20.6621 20.7786 20.7097C20.8929 20.7574 21.0156 20.7819 21.1395 20.7819C21.2634 20.7819 21.3861 20.7574 21.5004 20.7097C21.6148 20.6621 21.7186 20.5923 21.8059 20.5043L23.4858 18.8149L25.1658 20.5043C25.2531 20.5923 25.3569 20.6621 25.4713 20.7097C25.5856 20.7574 25.7083 20.7819 25.8322 20.7819C25.9561 20.7819 26.0788 20.7574 26.1931 20.7097C26.3075 20.6621 26.4113 20.5923 26.4986 20.5043C26.5865 20.417 26.6563 20.3132 26.704 20.1989C26.7516 20.0845 26.7762 19.9618 26.7762 19.8379C26.7762 19.714 26.7516 19.5914 26.704 19.477C26.6563 19.3626 26.5865 19.2588 26.4986 19.1716L24.8092 17.4916Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewRepeatArrowDefault.svg b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewRepeatArrowDefault.svg
new file mode 100644
index 0000000..c226e6e
--- /dev/null
+++ b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewRepeatArrowDefault.svg
@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17" stroke="white" stroke-opacity="0.7"/>
+<path d="M21.7507 12.1205C21.9559 12.2231 22.0585 12.4284 22.2638 12.531C22.3664 12.6336 22.3664 12.6336 22.469 12.7362L20.6219 13.0441C20.1088 13.1467 19.6984 13.6598 19.801 14.2755C19.9036 14.7886 20.3141 15.0964 20.8271 15.0964C20.9298 15.0964 20.9298 15.0964 21.0324 15.0964L25.3423 14.2755C25.8554 14.1729 26.2659 13.6598 26.1632 13.0441L25.3423 8.83677C25.2397 8.32368 24.7266 7.91321 24.1109 8.01583C23.5978 8.11845 23.1873 8.63153 23.29 9.24724L23.5978 10.9917C23.3926 10.7865 23.0847 10.4786 22.8795 10.376C22.8795 10.376 22.8795 10.376 22.7769 10.376C22.6743 10.2734 22.5716 10.1708 22.469 10.1708C22.2638 9.96556 22.0585 9.86294 21.7507 9.6577C21.4428 9.45247 21.135 9.34985 20.8271 9.14462H20.7245C20.6219 9.042 20.4167 9.042 20.2114 8.93938C19.801 8.83677 19.3905 8.73415 19.0827 8.63153C18.8774 8.63153 18.6722 8.52892 18.4669 8.52892H18.3643C18.2617 8.52892 18.0565 8.52892 17.9539 8.52892C17.7486 8.52892 17.4408 8.52892 17.2355 8.52892C12.1047 8.52892 8 12.6336 8 17.7645C8 22.8953 12.1047 27 17.2355 27C22.3664 27 26.4711 22.8953 26.4711 17.7645C26.4711 17.1488 26.0606 16.7383 25.4449 16.7383C24.8292 16.7383 24.4187 17.1488 24.4187 17.7645C24.4187 21.7665 21.2376 24.9477 17.2355 24.9477C13.2335 24.9477 10.0523 21.7665 10.0523 17.7645C10.0523 13.7624 13.2335 10.5813 17.2355 10.5813C17.4408 10.5813 17.7486 10.5813 17.9539 10.5813C18.1591 10.5813 18.2617 10.5813 18.4669 10.6839C18.6722 10.6839 18.7748 10.7865 18.98 10.7865C19.0827 10.7865 19.1853 10.8891 19.2879 10.8891C20.0062 11.0943 20.7245 11.4022 21.3402 11.9153C21.4428 12.0179 21.5455 12.0179 21.6481 12.1205C21.6481 11.9153 21.7507 12.0179 21.7507 12.1205Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewRepeatArrowHover.svg b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewRepeatArrowHover.svg
new file mode 100644
index 0000000..e37b2d9
--- /dev/null
+++ b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewRepeatArrowHover.svg
@@ -0,0 +1,5 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="white" fill-opacity="0.15"/>
+<circle cx="17.5" cy="17.5" r="17" stroke="white" stroke-opacity="0.7"/>
+<path d="M21.7507 12.1205C21.9559 12.2231 22.0585 12.4284 22.2638 12.531C22.3664 12.6336 22.3664 12.6336 22.469 12.7362L20.6219 13.0441C20.1088 13.1467 19.6984 13.6598 19.801 14.2755C19.9036 14.7886 20.3141 15.0964 20.8271 15.0964C20.9298 15.0964 20.9298 15.0964 21.0324 15.0964L25.3423 14.2755C25.8554 14.1729 26.2659 13.6598 26.1632 13.0441L25.3423 8.83677C25.2397 8.32368 24.7266 7.91321 24.1109 8.01583C23.5978 8.11845 23.1873 8.63153 23.29 9.24724L23.5978 10.9917C23.3926 10.7865 23.0847 10.4786 22.8795 10.376C22.8795 10.376 22.8795 10.376 22.7769 10.376C22.6743 10.2734 22.5716 10.1708 22.469 10.1708C22.2638 9.96556 22.0585 9.86294 21.7507 9.6577C21.4428 9.45247 21.135 9.34985 20.8271 9.14462H20.7245C20.6219 9.042 20.4167 9.042 20.2114 8.93938C19.801 8.83677 19.3905 8.73415 19.0827 8.63153C18.8774 8.63153 18.6722 8.52892 18.4669 8.52892H18.3643C18.2617 8.52892 18.0565 8.52892 17.9539 8.52892C17.7486 8.52892 17.4408 8.52892 17.2355 8.52892C12.1047 8.52892 8 12.6336 8 17.7645C8 22.8953 12.1047 27 17.2355 27C22.3664 27 26.4711 22.8953 26.4711 17.7645C26.4711 17.1488 26.0606 16.7383 25.4449 16.7383C24.8292 16.7383 24.4187 17.1488 24.4187 17.7645C24.4187 21.7665 21.2376 24.9477 17.2355 24.9477C13.2335 24.9477 10.0523 21.7665 10.0523 17.7645C10.0523 13.7624 13.2335 10.5813 17.2355 10.5813C17.4408 10.5813 17.7486 10.5813 17.9539 10.5813C18.1591 10.5813 18.2617 10.5813 18.4669 10.6839C18.6722 10.6839 18.7748 10.7865 18.98 10.7865C19.0827 10.7865 19.1853 10.8891 19.2879 10.8891C20.0062 11.0943 20.7245 11.4022 21.3402 11.9153C21.4428 12.0179 21.5455 12.0179 21.6481 12.1205C21.6481 11.9153 21.7507 12.0179 21.7507 12.1205Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewSoundDefault.svg b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewSoundDefault.svg
new file mode 100644
index 0000000..8015917
--- /dev/null
+++ b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewSoundDefault.svg
@@ -0,0 +1,7 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17" stroke="white" stroke-opacity="0.7"/>
+<path d="M16.7889 10.5772C16.6365 10.5112 16.4693 10.4869 16.3045 10.5067C16.1396 10.5265 15.9829 10.5897 15.8504 10.6898L11.3642 14.2374H7.93854C7.68962 14.2374 7.4509 14.3363 7.27489 14.5123C7.09888 14.6883 7 14.9271 7 15.176V20.8072C7 21.0561 7.09888 21.2948 7.27489 21.4708C7.4509 21.6469 7.68962 21.7457 7.93854 21.7457H11.3642L15.8035 25.2934C15.9686 25.4259 16.1737 25.4987 16.3854 25.4999C16.5256 25.5022 16.6642 25.47 16.7889 25.406C16.9486 25.33 17.0836 25.2103 17.1783 25.0609C17.2729 24.9114 17.3234 24.7382 17.3239 24.5613V11.4218C17.3234 11.2449 17.2729 11.0718 17.1783 10.9223C17.0836 10.7729 16.9486 10.6532 16.7889 10.5772ZM15.4468 22.6092L12.2746 20.0751C12.1094 19.9427 11.9044 19.8699 11.6927 19.8687H8.87707V16.1145H11.6927C11.9044 16.1133 12.1094 16.0405 12.2746 15.908L15.4468 13.374V22.6092Z" fill="white"/>
+<path d="M19.324 25.48C19.324 25.7672 19.5571 26.0018 19.8437 25.9831C21.7757 25.8574 23.6035 25.0342 24.9808 23.6569C26.4811 22.1566 27.324 20.1217 27.324 18C27.324 15.8783 26.4811 13.8434 24.9808 12.3431C23.6035 10.9658 21.7757 10.1426 19.8437 10.0169C19.5571 9.99824 19.324 10.2328 19.324 10.52C19.324 10.8072 19.5571 11.038 19.8435 11.0594C21.4994 11.1833 23.0632 11.8963 24.2454 13.0785C25.5507 14.3838 26.284 16.1541 26.284 18C26.284 19.8459 25.5507 21.6162 24.2454 22.9215C23.0632 24.1037 21.4994 24.8167 19.8435 24.9406C19.5571 24.962 19.324 25.1928 19.324 25.48Z" fill="white"/>
+<path d="M19.324 21.5C19.324 21.7761 19.5487 22.0032 19.8227 21.9688C20.6997 21.8586 21.5208 21.46 22.1524 20.8284C22.9025 20.0783 23.324 19.0609 23.324 18C23.324 16.9391 22.9025 15.9217 22.1524 15.1716C21.5208 14.54 20.6997 14.1414 19.8227 14.0312C19.5487 13.9968 19.324 14.2239 19.324 14.5C19.324 14.7761 19.5494 14.9957 19.8217 15.0416C20.4327 15.1444 21.0014 15.4348 21.4453 15.8787C22.0079 16.4413 22.324 17.2044 22.324 18C22.324 18.7956 22.0079 19.5587 21.4453 20.1213C21.0014 20.5652 20.4327 20.8556 19.8217 20.9584C19.5494 21.0043 19.324 21.2239 19.324 21.5Z" fill="white"/>
+<path d="M19.324 23.49C19.324 23.7717 19.5528 24.0023 19.8334 23.9783C21.2381 23.8587 22.5621 23.2472 23.5666 22.2426C24.6918 21.1174 25.324 19.5913 25.324 18C25.324 16.4087 24.6918 14.8826 23.5666 13.7574C22.5621 12.7528 21.2381 12.1413 19.8334 12.0217C19.5528 11.9977 19.324 12.2283 19.324 12.51C19.324 12.7917 19.5529 13.0173 19.8331 13.0461C20.9668 13.1626 22.0322 13.6655 22.8454 14.4786C23.7793 15.4125 24.304 16.6792 24.304 18C24.304 19.3208 23.7793 20.5875 22.8454 21.5214C22.0322 22.3345 20.9668 22.8374 19.8331 22.9539C19.5529 22.9827 19.324 23.2083 19.324 23.49Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewSoundHover.svg b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewSoundHover.svg
new file mode 100644
index 0000000..64a1a4a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/hero-banner-preview/HeroBannerPreviewSoundHover.svg
@@ -0,0 +1,8 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="17.5" cy="17.5" r="17.5" fill="white" fill-opacity="0.15"/>
+<circle cx="17.5" cy="17.5" r="17" stroke="white" stroke-opacity="0.7"/>
+<path d="M16.7889 10.5772C16.6365 10.5112 16.4693 10.4869 16.3045 10.5067C16.1396 10.5265 15.9829 10.5897 15.8504 10.6898L11.3642 14.2374H7.93854C7.68962 14.2374 7.4509 14.3363 7.27489 14.5123C7.09888 14.6883 7 14.9271 7 15.176V20.8072C7 21.0561 7.09888 21.2948 7.27489 21.4708C7.4509 21.6469 7.68962 21.7457 7.93854 21.7457H11.3642L15.8035 25.2934C15.9686 25.4259 16.1737 25.4987 16.3854 25.4999C16.5256 25.5022 16.6642 25.47 16.7889 25.406C16.9486 25.33 17.0836 25.2103 17.1783 25.0609C17.2729 24.9114 17.3234 24.7382 17.3239 24.5613V11.4218C17.3234 11.2449 17.2729 11.0718 17.1783 10.9223C17.0836 10.7729 16.9486 10.6532 16.7889 10.5772ZM15.4468 22.6092L12.2746 20.0751C12.1094 19.9427 11.9044 19.8699 11.6927 19.8687H8.87707V16.1145H11.6927C11.9044 16.1133 12.1094 16.0405 12.2746 15.908L15.4468 13.374V22.6092Z" fill="white"/>
+<path d="M19.324 25.48C19.324 25.7672 19.5571 26.0018 19.8437 25.9831C21.7757 25.8574 23.6035 25.0342 24.9808 23.6569C26.4811 22.1566 27.324 20.1217 27.324 18C27.324 15.8783 26.4811 13.8434 24.9808 12.3431C23.6035 10.9658 21.7757 10.1426 19.8437 10.0169C19.5571 9.99824 19.324 10.2328 19.324 10.52C19.324 10.8072 19.5571 11.038 19.8435 11.0594C21.4994 11.1833 23.0632 11.8963 24.2454 13.0785C25.5507 14.3838 26.284 16.1541 26.284 18C26.284 19.8459 25.5507 21.6162 24.2454 22.9215C23.0632 24.1037 21.4994 24.8167 19.8435 24.9406C19.5571 24.962 19.324 25.1928 19.324 25.48Z" fill="white"/>
+<path d="M19.324 21.5C19.324 21.7761 19.5487 22.0032 19.8227 21.9688C20.6997 21.8586 21.5208 21.46 22.1524 20.8284C22.9025 20.0783 23.324 19.0609 23.324 18C23.324 16.9391 22.9025 15.9217 22.1524 15.1716C21.5208 14.54 20.6997 14.1414 19.8227 14.0312C19.5487 13.9968 19.324 14.2239 19.324 14.5C19.324 14.7761 19.5494 14.9957 19.8217 15.0416C20.4327 15.1444 21.0014 15.4348 21.4453 15.8787C22.0079 16.4413 22.324 17.2044 22.324 18C22.324 18.7956 22.0079 19.5587 21.4453 20.1213C21.0014 20.5652 20.4327 20.8556 19.8217 20.9584C19.5494 21.0043 19.324 21.2239 19.324 21.5Z" fill="white"/>
+<path d="M19.324 23.49C19.324 23.7717 19.5528 24.0023 19.8334 23.9783C21.2381 23.8587 22.5621 23.2472 23.5666 22.2426C24.6918 21.1174 25.324 19.5913 25.324 18C25.324 16.4087 24.6918 14.8826 23.5666 13.7574C22.5621 12.7528 21.2381 12.1413 19.8334 12.0217C19.5528 11.9977 19.324 12.2283 19.324 12.51C19.324 12.7917 19.5529 13.0173 19.8331 13.0461C20.9668 13.1626 22.0322 13.6655 22.8454 14.4786C23.7793 15.4125 24.304 16.6792 24.304 18C24.304 19.3208 23.7793 20.5875 22.8454 21.5214C22.0322 22.3345 20.9668 22.8374 19.8331 22.9539C19.5529 22.9827 19.324 23.2083 19.324 23.49Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/index.ts b/packages/design-system/src/assets/icons/index.ts
new file mode 100644
index 0000000..e797b56
--- /dev/null
+++ b/packages/design-system/src/assets/icons/index.ts
@@ -0,0 +1,214 @@
+export const iconAssets = {
+  account: new URL('./Account.svg', import.meta.url).href,
+  arrowDown: new URL('./ArrowDown.svg', import.meta.url).href,
+  arrowLeft: new URL('./ArrowLeft.svg', import.meta.url).href,
+  arrowRight: new URL('./ArrowRight.svg', import.meta.url).href,
+  arrowRightNarrow: new URL('./ArrowRightNarrow.svg', import.meta.url).href,
+  arrowUp: new URL('./ArrowUp.svg', import.meta.url).href,
+  circleError: new URL('./CircleError.svg', import.meta.url).href,
+  cross: new URL('./Cross.svg', import.meta.url).href,
+  facebook: new URL('./Facebook.svg', import.meta.url).href,
+  flag: new URL('./Flag.svg', import.meta.url).href,
+  heroBannerPreviewMuteDefault: new URL('./hero-banner-preview/HeroBannerPreviewMuteDefault.svg', import.meta.url).href,
+  heroBannerPreviewMuteHover: new URL('./hero-banner-preview/HeroBannerPreviewMuteHover.svg', import.meta.url).href,
+  heroBannerPreviewRepeatArrowDefault: new URL(
+    './hero-banner-preview/HeroBannerPreviewRepeatArrowDefault.svg',
+    import.meta.url,
+  ).href,
+  heroBannerPreviewRepeatArrowHover: new URL(
+    './hero-banner-preview/HeroBannerPreviewRepeatArrowHover.svg',
+    import.meta.url,
+  ).href,
+  heroBannerPreviewSoundDefault: new URL('./hero-banner-preview/HeroBannerPreviewSoundDefault.svg', import.meta.url).href,
+  heroBannerPreviewSoundHover: new URL('./hero-banner-preview/HeroBannerPreviewSoundHover.svg', import.meta.url).href,
+  info: new URL('./Info.svg', import.meta.url).href,
+  instagram: new URL('./Instagram.svg', import.meta.url).href,
+  notification: new URL('./Notification.svg', import.meta.url).href,
+  pensil: new URL('./Pensil.svg', import.meta.url).href,
+  person: new URL('./Person.svg', import.meta.url).href,
+  play: new URL('./Play.svg', import.meta.url).href,
+  plusThin: new URL('./PlusThin.svg', import.meta.url).href,
+  plusWide: new URL('./PlusWide.svg', import.meta.url).href,
+  presetLeavingSoon: new URL('./presets-labels/LeavingSoon.svg', import.meta.url).href,
+  presetNewSeason: new URL('./presets-labels/NewSeason.svg', import.meta.url).href,
+  presetRecentlyAdded: new URL('./presets-labels/RecentlyAdded.svg', import.meta.url).href,
+  presetTop10: new URL('./presets-labels/Top10.svg', import.meta.url).href,
+  presetTop10Number: new URL('./presets-labels/Top10Number.svg', import.meta.url).href,
+  question: new URL('./Question.svg', import.meta.url).href,
+  ratingG: new URL('./maturity-ratings/G.svg', import.meta.url).href,
+  ratingNc17: new URL('./maturity-ratings/NC-17.svg', import.meta.url).href,
+  ratingPg: new URL('./maturity-ratings/PG.svg', import.meta.url).href,
+  ratingPg13: new URL('./maturity-ratings/PG-13.svg', import.meta.url).href,
+  ratingR: new URL('./maturity-ratings/R.svg', import.meta.url).href,
+  ratingTv14: new URL('./maturity-ratings/TV-14.svg', import.meta.url).href,
+  ratingTvG: new URL('./maturity-ratings/TV-G.svg', import.meta.url).href,
+  ratingTvMa: new URL('./maturity-ratings/TV-MA.svg', import.meta.url).href,
+  ratingTvPg: new URL('./maturity-ratings/TV-PG.svg', import.meta.url).href,
+  ratingTvY: new URL('./maturity-ratings/TV-Y.svg', import.meta.url).href,
+  ratingTvY7: new URL('./maturity-ratings/TV-Y7.svg', import.meta.url).href,
+  moviePreviewAddDefault: new URL('./movie-preview/MoviePreviewAddDefault.svg', import.meta.url).href,
+  moviePreviewAddHover: new URL('./movie-preview/MoviePreviewAddHover.svg', import.meta.url).href,
+  moviePreviewArrowDownDefault: new URL('./movie-preview/MoviePreviewArrowDownDefault.svg', import.meta.url).href,
+  moviePreviewArrowDownHover: new URL('./movie-preview/MoviePreviewArrowDownHover.svg', import.meta.url).href,
+  moviePreviewArrowDownInactive: new URL('./movie-preview/MoviePreviewArrowDownInactive.svg', import.meta.url).href,
+  moviePreviewMuteDefault: new URL('./movie-preview/MoviePreviewMuteDefault.svg', import.meta.url).href,
+  moviePreviewMuteHover: new URL('./movie-preview/MoviePreviewMuteHover.svg', import.meta.url).href,
+  moviePreviewPlayDefault: new URL('./movie-preview/MoviePreviewPlayDefault.svg', import.meta.url).href,
+  moviePreviewPlayHover: new URL('./movie-preview/MoviePreviewPlayHover.svg', import.meta.url).href,
+  moviePreviewThumbUpDefault: new URL('./movie-preview/MoviePreviewThumbUpDefault.svg', import.meta.url).href,
+  moviePreviewThumbUpHover: new URL('./movie-preview/MoviePreviewThumbUpHover.svg', import.meta.url).href,
+  moviePreviewThumbsGroupDefault: new URL('./movie-preview/MoviePreviewThumbsGroupDefault.svg', import.meta.url).href,
+  moviePreviewThumbsGroupHover: new URL('./movie-preview/MoviePreviewThumbsGroupHover.svg', import.meta.url).href,
+  search: new URL('./Search.svg', import.meta.url).href,
+  videoPlayer10secBackDefault: new URL('./video-player/VideoPlayer10secBackDefault.svg', import.meta.url).href,
+  videoPlayer10secBackHover: new URL('./video-player/VideoPlayer10secBackHover.svg', import.meta.url).href,
+  videoPlayer10secForwardDefault: new URL('./video-player/VideoPlayer10secForwardDefault.svg', import.meta.url).href,
+  videoPlayer10secForwardHover: new URL('./video-player/VideoPlayer10secForwardHover.svg', import.meta.url).href,
+  videoPlayerFullScreenDefault: new URL('./video-player/VideoPlayerFullScreenDefault.svg', import.meta.url).href,
+  videoPlayerFullScreenHover: new URL('./video-player/VideoPlayerFullScreenHover.svg', import.meta.url).href,
+  videoPlayerListOfEpisodesDefault: new URL('./video-player/VideoPlayerListOfEpisodesDefault.svg', import.meta.url).href,
+  videoPlayerListOfEpisodesHover: new URL('./video-player/VideoPlayerListOfEpisodesHover.svg', import.meta.url).href,
+  videoPlayerMuteDefault: new URL('./video-player/VideoPlayerMuteDefault.svg', import.meta.url).href,
+  videoPlayerMuteHover: new URL('./video-player/VideoPlayerMuteHover.svg', import.meta.url).href,
+  videoPlayerNextEpisodeDefault: new URL('./video-player/VideoPlayerNextEpisodeDefault.svg', import.meta.url).href,
+  videoPlayerNextEpisodeHover: new URL('./video-player/VideoPlayerNextEpisodeHover.svg', import.meta.url).href,
+  videoPlayerPlayDefault: new URL('./video-player/VideoPlayerPlayDefault.svg', import.meta.url).href,
+  videoPlayerPlayHover: new URL('./video-player/VideoPlayerPlayHover.svg', import.meta.url).href,
+  videoPlayerSoundDefault: new URL('./video-player/VideoPlayerSoundDefault.svg', import.meta.url).href,
+  videoPlayerSoundHover: new URL('./video-player/VideoPlayerSoundHover.svg', import.meta.url).href,
+  videoPlayerSpeedDefault: new URL('./video-player/VideoPlayerSpeedDefault.svg', import.meta.url).href,
+  videoPlayerSpeedHover: new URL('./video-player/VideoPlayerSpeedHover.svg', import.meta.url).href,
+  videoPlayerSubtitlesDefault: new URL('./video-player/VideoPlayerSubtitlesDefault.svg', import.meta.url).href,
+  videoPlayerSubtitlesHover: new URL('./video-player/VideoPlayerSubtitlesHover.svg', import.meta.url).href,
+  videoQuality4k: new URL('./video-quality/4K.svg', import.meta.url).href,
+  videoQualityDolbyVision: new URL('./video-quality/DolbyVision.svg', import.meta.url).href,
+  videoQualityHd: new URL('./video-quality/HD.svg', import.meta.url).href,
+  videoQualityHdr: new URL('./video-quality/HDR.svg', import.meta.url).href,
+  videoQualityUltraHd4k: new URL('./video-quality/UltraHD4K.svg', import.meta.url).href,
+  thumbDown: new URL('./ThumbDown.svg', import.meta.url).href,
+  thumbUp: new URL('./ThumbUp.svg', import.meta.url).href,
+  twitter: new URL('./Twitter.svg', import.meta.url).href,
+  youTube: new URL('./YouTube.svg', import.meta.url).href,
+} as const;
+
+export type IconName = keyof typeof iconAssets;
+
+export const getIconAsset = (name: IconName): string => iconAssets[name];
+
+type IconSetState = 'default' | 'hover' | 'inactive';
+
+export const moviePreviewIconSets = {
+  add: {
+    default: iconAssets.moviePreviewAddDefault,
+    hover: iconAssets.moviePreviewAddHover,
+  },
+  arrowDown: {
+    default: iconAssets.moviePreviewArrowDownDefault,
+    hover: iconAssets.moviePreviewArrowDownHover,
+    inactive: iconAssets.moviePreviewArrowDownInactive,
+  },
+  mute: {
+    default: iconAssets.moviePreviewMuteDefault,
+    hover: iconAssets.moviePreviewMuteHover,
+  },
+  play: {
+    default: iconAssets.moviePreviewPlayDefault,
+    hover: iconAssets.moviePreviewPlayHover,
+  },
+  thumbUp: {
+    default: iconAssets.moviePreviewThumbUpDefault,
+    hover: iconAssets.moviePreviewThumbUpHover,
+  },
+  thumbsGroup: {
+    default: iconAssets.moviePreviewThumbsGroupDefault,
+    hover: iconAssets.moviePreviewThumbsGroupHover,
+  },
+} as const;
+
+export type MoviePreviewIconSetName = keyof typeof moviePreviewIconSets;
+
+export const getMoviePreviewIconSetAsset = (
+  setName: MoviePreviewIconSetName,
+  state: IconSetState,
+): string => {
+  const set = moviePreviewIconSets[setName] as Partial<Record<IconSetState, string>> & { default: string };
+  return set[state] ?? set.default;
+};
+
+export const heroBannerPreviewIconSets = {
+  mute: {
+    default: iconAssets.heroBannerPreviewMuteDefault,
+    hover: iconAssets.heroBannerPreviewMuteHover,
+  },
+  repeatArrow: {
+    default: iconAssets.heroBannerPreviewRepeatArrowDefault,
+    hover: iconAssets.heroBannerPreviewRepeatArrowHover,
+  },
+  sound: {
+    default: iconAssets.heroBannerPreviewSoundDefault,
+    hover: iconAssets.heroBannerPreviewSoundHover,
+  },
+} as const;
+
+export type HeroBannerPreviewIconSetName = keyof typeof heroBannerPreviewIconSets;
+
+export const getHeroBannerPreviewIconSetAsset = (
+  setName: HeroBannerPreviewIconSetName,
+  state: IconSetState,
+): string => {
+  const set = heroBannerPreviewIconSets[setName] as Partial<Record<IconSetState, string>> & { default: string };
+  return set[state] ?? set.default;
+};
+
+export const videoPlayerIconSets = {
+  play: {
+    default: iconAssets.videoPlayerPlayDefault,
+    hover: iconAssets.videoPlayerPlayHover,
+  },
+  back10: {
+    default: iconAssets.videoPlayer10secBackDefault,
+    hover: iconAssets.videoPlayer10secBackHover,
+  },
+  forward10: {
+    default: iconAssets.videoPlayer10secForwardDefault,
+    hover: iconAssets.videoPlayer10secForwardHover,
+  },
+  sound: {
+    default: iconAssets.videoPlayerSoundDefault,
+    hover: iconAssets.videoPlayerSoundHover,
+  },
+  mute: {
+    default: iconAssets.videoPlayerMuteDefault,
+    hover: iconAssets.videoPlayerMuteHover,
+  },
+  nextEpisode: {
+    default: iconAssets.videoPlayerNextEpisodeDefault,
+    hover: iconAssets.videoPlayerNextEpisodeHover,
+  },
+  listOfEpisodes: {
+    default: iconAssets.videoPlayerListOfEpisodesDefault,
+    hover: iconAssets.videoPlayerListOfEpisodesHover,
+  },
+  subtitles: {
+    default: iconAssets.videoPlayerSubtitlesDefault,
+    hover: iconAssets.videoPlayerSubtitlesHover,
+  },
+  speed: {
+    default: iconAssets.videoPlayerSpeedDefault,
+    hover: iconAssets.videoPlayerSpeedHover,
+  },
+  fullScreen: {
+    default: iconAssets.videoPlayerFullScreenDefault,
+    hover: iconAssets.videoPlayerFullScreenHover,
+  },
+} as const;
+
+export type VideoPlayerIconSetName = keyof typeof videoPlayerIconSets;
+
+export const getVideoPlayerIconSetAsset = (
+  setName: VideoPlayerIconSetName,
+  state: IconSetState,
+): string => {
+  const set = videoPlayerIconSets[setName] as Partial<Record<IconSetState, string>> & { default: string };
+  return set[state] ?? set.default;
+};
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/G.svg b/packages/design-system/src/assets/icons/maturity-ratings/G.svg
new file mode 100644
index 0000000..3a485a1
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/G.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="22" fill="none" viewBox="0 0 25 22">
+  <path stroke="#BCBCBC" d="M.5.5h24v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.692 17.24c-1.072 0-2.016-.256-2.832-.752-.816-.496-1.44-1.184-1.888-2.064-.464-.88-.688-1.872-.688-2.992 0-1.136.224-2.128.688-3.008a5.198 5.198 0 0 1 1.92-2.064c.816-.496 1.744-.736 2.784-.736 1.168 0 2.176.272 3.008.816a4.454 4.454 0 0 1 1.76 2.304h-1.6c-.24-.512-.624-.928-1.184-1.248-.56-.32-1.216-.48-1.984-.48-.752 0-1.408.176-1.984.544-.576.368-1.024.88-1.36 1.536-.336.656-.496 1.44-.496 2.336 0 .896.16 1.68.496 2.336.32.656.768 1.168 1.36 1.536.576.368 1.248.544 2.032.544.672 0 1.264-.144 1.792-.432a3.117 3.117 0 0 0 1.216-1.152 3.284 3.284 0 0 0 .432-1.68v-.288h-3.488v-1.36h5.008v1.392c0 .944-.208 1.776-.624 2.512a4.498 4.498 0 0 1-1.744 1.76c-.752.432-1.616.64-2.624.64Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/NC-17.svg b/packages/design-system/src/assets/icons/maturity-ratings/NC-17.svg
new file mode 100644
index 0000000..4e221b7
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/NC-17.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="22" fill="none" viewBox="0 0 64 22">
+  <path stroke="#BCBCBC" d="M.5.5h63v21H.5z"/>
+  <path fill="#BCBCBC" d="M7.94 17V5.864h1.504l6.352 8.736V5.864H17.3V17h-1.504L9.444 8.264V17H7.94Zm11.578-5.568c0-1.136.224-2.128.672-3.008a5.014 5.014 0 0 1 1.84-2.064c.784-.496 1.696-.736 2.704-.736 1.312 0 2.368.32 3.152.976.784.656 1.296 1.552 1.568 2.672H27.87a2.934 2.934 0 0 0-1.072-1.648c-.528-.4-1.216-.608-2.064-.608-.72 0-1.344.176-1.904.528-.56.368-.992.88-1.296 1.536-.304.656-.464 1.44-.464 2.352 0 .896.16 1.68.464 2.336.304.656.736 1.168 1.296 1.536.56.368 1.184.544 1.904.544.848 0 1.536-.192 2.08-.592.544-.4.896-.928 1.072-1.584h1.568c-.256 1.072-.784 1.936-1.568 2.592-.784.656-1.84.976-3.152.976-1.008 0-1.92-.256-2.704-.752a4.97 4.97 0 0 1-1.84-2.048c-.448-.88-.672-1.872-.672-3.008ZM31.468 13v-1.264h5.12V13h-5.12Zm11.302 4V7.448l-2.832.96V7.032l4.32-1.376V17H42.77ZM56.455 5.864v1.184L52.04 17h-1.6l4.416-9.792h-6.144V5.864h7.744Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/PG-13.svg b/packages/design-system/src/assets/icons/maturity-ratings/PG-13.svg
new file mode 100644
index 0000000..aa280c1
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/PG-13.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63" height="22" fill="none" viewBox="0 0 63 22">
+  <path stroke="#BCBCBC" d="M.5.5h62v21H.5z"/>
+  <path fill="#BCBCBC" d="M7.94 17V5.864h4.096c1.424 0 2.512.32 3.248.976.736.656 1.104 1.504 1.104 2.576s-.368 1.936-1.104 2.592c-.736.656-1.824.976-3.248.976H9.46V17H7.94Zm1.52-5.376h2.368c1.008 0 1.776-.192 2.272-.576.496-.384.736-.928.736-1.632 0-.688-.24-1.232-.736-1.616-.496-.384-1.264-.576-2.272-.576H9.46v4.4Zm13.779 5.616c-1.072 0-2.016-.256-2.832-.752-.816-.496-1.44-1.184-1.888-2.064-.464-.88-.688-1.872-.688-2.992 0-1.136.224-2.128.688-3.008a5.198 5.198 0 0 1 1.92-2.064c.816-.496 1.744-.736 2.784-.736 1.168 0 2.176.272 3.008.816a4.454 4.454 0 0 1 1.76 2.304h-1.6c-.24-.512-.624-.928-1.184-1.248-.56-.32-1.216-.48-1.984-.48-.752 0-1.408.176-1.984.544-.576.368-1.024.88-1.36 1.536-.336.656-.496 1.44-.496 2.336 0 .896.16 1.68.496 2.336.32.656.768 1.168 1.36 1.536.576.368 1.248.544 2.032.544.672 0 1.264-.144 1.792-.432a3.117 3.117 0 0 0 1.216-1.152 3.284 3.284 0 0 0 .432-1.68v-.288h-3.488v-1.36h5.008v1.392c0 .944-.208 1.776-.624 2.512a4.498 4.498 0 0 1-1.744 1.76c-.752.432-1.616.64-2.624.64Zm7.12-4.24v-1.264h5.12V13h-5.12Zm11.302 4V7.448l-2.832.96V7.032l4.32-1.376V17H41.66Zm9.845.24c-1.136 0-2.064-.256-2.784-.784-.72-.512-1.184-1.216-1.392-2.112h1.52c.176.496.48.864.944 1.136.464.272 1.024.4 1.696.4.416 0 .816-.08 1.184-.224a2.08 2.08 0 0 0 .896-.672c.24-.304.352-.672.352-1.136 0-.592-.224-1.056-.672-1.376-.464-.304-1.056-.464-1.808-.464h-1.344v-1.344h1.312c.656 0 1.184-.16 1.6-.48.4-.32.608-.768.608-1.328 0-.624-.224-1.104-.656-1.408-.448-.304-.976-.464-1.6-.464-.624 0-1.136.144-1.552.416-.432.272-.72.64-.864 1.104h-1.504a3.785 3.785 0 0 1 1.376-2.08c.688-.528 1.552-.8 2.592-.8.672 0 1.296.128 1.856.368a3.4 3.4 0 0 1 1.36 1.088c.336.464.496 1.04.496 1.712 0 .592-.16 1.104-.48 1.536-.336.432-.784.736-1.344.928.688.192 1.216.528 1.584.992.368.464.56 1.024.56 1.68 0 .704-.176 1.296-.544 1.792-.368.496-.848.88-1.44 1.136a4.885 4.885 0 0 1-1.952.384Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/PG.svg b/packages/design-system/src/assets/icons/maturity-ratings/PG.svg
new file mode 100644
index 0000000..94801d9
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/PG.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="22" fill="none" viewBox="0 0 36 22">
+  <path stroke="#BCBCBC" d="M.5.5h35v21H.5z"/>
+  <path fill="#BCBCBC" d="M7.94 17V5.864h4.096c1.424 0 2.512.32 3.248.976.736.656 1.104 1.504 1.104 2.576s-.368 1.936-1.104 2.592c-.736.656-1.824.976-3.248.976H9.46V17H7.94Zm1.52-5.376h2.368c1.008 0 1.776-.192 2.272-.576.496-.384.736-.928.736-1.632 0-.688-.24-1.232-.736-1.616-.496-.384-1.264-.576-2.272-.576H9.46v4.4Zm13.779 5.616c-1.072 0-2.016-.256-2.832-.752-.816-.496-1.44-1.184-1.888-2.064-.464-.88-.688-1.872-.688-2.992 0-1.136.224-2.128.688-3.008a5.198 5.198 0 0 1 1.92-2.064c.816-.496 1.744-.736 2.784-.736 1.168 0 2.176.272 3.008.816a4.454 4.454 0 0 1 1.76 2.304h-1.6c-.24-.512-.624-.928-1.184-1.248-.56-.32-1.216-.48-1.984-.48-.752 0-1.408.176-1.984.544-.576.368-1.024.88-1.36 1.536-.336.656-.496 1.44-.496 2.336 0 .896.16 1.68.496 2.336.32.656.768 1.168 1.36 1.536.576.368 1.248.544 2.032.544.672 0 1.264-.144 1.792-.432a3.117 3.117 0 0 0 1.216-1.152 3.284 3.284 0 0 0 .432-1.68v-.288h-3.488v-1.36h5.008v1.392c0 .944-.208 1.776-.624 2.512a4.498 4.498 0 0 1-1.744 1.76c-.752.432-1.616.64-2.624.64Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/R.svg b/packages/design-system/src/assets/icons/maturity-ratings/R.svg
new file mode 100644
index 0000000..f171124
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/R.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="22" fill="none" viewBox="0 0 24 22">
+  <path stroke="#BCBCBC" d="M.5.5h23v21H.5z"/>
+  <path fill="#BCBCBC" d="M7.94 17V5.864h4.192c1.424 0 2.496.304 3.232.912.72.608 1.088 1.456 1.088 2.528 0 .864-.224 1.568-.688 2.112-.464.56-1.056.944-1.776 1.168L16.948 17H15.14l-2.768-4.176H9.46V17H7.94Zm1.52-5.536h2.496c1.008 0 1.744-.192 2.224-.576.48-.368.72-.912.72-1.6 0-.688-.24-1.2-.72-1.552-.48-.336-1.216-.512-2.224-.512H9.46v4.24Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/TV-14.svg b/packages/design-system/src/assets/icons/maturity-ratings/TV-14.svg
new file mode 100644
index 0000000..029862a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/TV-14.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="22" fill="none" viewBox="0 0 62 22">
+  <path stroke="#BCBCBC" d="M.5.5h61v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.612 17h-1.52V7.224H7.14v-1.36h9.424v1.36h-3.952V17ZM27.907 5.864 23.475 17h-1.552L17.491 5.864h1.648l3.6 9.312 3.568-9.312h1.6ZM29.093 13v-1.264h5.12V13h-5.12Zm11.302 4V7.448l-2.832.96V7.032l4.32-1.376V17h-1.488Zm11.03 0v-2.752h-5.633v-1.136l5.712-7.248h1.408v7.088h1.744v1.296h-1.744V17h-1.488Zm-4-4.048h4V7.88l-4 5.072Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/TV-G.svg b/packages/design-system/src/assets/icons/maturity-ratings/TV-G.svg
new file mode 100644
index 0000000..ace188a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/TV-G.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="55" height="22" fill="none" viewBox="0 0 55 22">
+  <path stroke="#BCBCBC" d="M.5.5h54v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.612 17h-1.52V7.224H7.14v-1.36h9.424v1.36h-3.952V17ZM27.907 5.864 23.475 17h-1.552L17.491 5.864h1.648l3.6 9.312 3.568-9.312h1.6ZM29.093 13v-1.264h5.12V13h-5.12Zm12.63 4.24c-1.072 0-2.016-.256-2.832-.752-.816-.496-1.44-1.184-1.888-2.064-.464-.88-.688-1.872-.688-2.992 0-1.136.224-2.128.688-3.008a5.198 5.198 0 0 1 1.92-2.064c.816-.496 1.744-.736 2.784-.736 1.168 0 2.176.272 3.008.816a4.454 4.454 0 0 1 1.76 2.304h-1.6c-.24-.512-.624-.928-1.184-1.248-.56-.32-1.216-.48-1.984-.48-.752 0-1.408.176-1.984.544-.576.368-1.024.88-1.36 1.536-.336.656-.496 1.44-.496 2.336 0 .896.16 1.68.496 2.336.32.656.768 1.168 1.36 1.536.576.368 1.248.544 2.032.544.672 0 1.264-.144 1.792-.432a3.117 3.117 0 0 0 1.216-1.152 3.284 3.284 0 0 0 .432-1.68v-.288h-3.488v-1.36h5.008v1.392c0 .944-.208 1.776-.624 2.512a4.498 4.498 0 0 1-1.744 1.76c-.752.432-1.616.64-2.624.64Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/TV-MA.svg b/packages/design-system/src/assets/icons/maturity-ratings/TV-MA.svg
new file mode 100644
index 0000000..d71c50e
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/TV-MA.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="68" height="22" fill="none" viewBox="0 0 68 22">
+  <path stroke="#BCBCBC" d="M.5.5h67v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.612 17h-1.52V7.224H7.14v-1.36h9.424v1.36h-3.952V17ZM27.907 5.864 23.475 17h-1.552L17.491 5.864h1.648l3.6 9.312 3.568-9.312h1.6ZM29.093 13v-1.264h5.12V13h-5.12Zm9.366 4h-1.488V5.864h1.664l4.032 6.48 3.968-6.48H48.3V17h-1.504V8.152l-4.16 6.768-4.176-6.736V17Zm20.395 0-1.168-2.992h-4.944L51.59 17h-1.568L54.47 5.864h1.536L60.47 17h-1.616Zm-5.6-4.352h3.904l-1.952-5.056-1.952 5.056Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/TV-PG.svg b/packages/design-system/src/assets/icons/maturity-ratings/TV-PG.svg
new file mode 100644
index 0000000..5640140
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/TV-PG.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="65" height="22" fill="none" viewBox="0 0 65 22">
+  <path stroke="#BCBCBC" d="M.5.5h64v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.612 17h-1.52V7.224H7.14v-1.36h9.424v1.36h-3.952V17ZM27.907 5.864 23.475 17h-1.552L17.491 5.864h1.648l3.6 9.312 3.568-9.312h1.6ZM29.093 13v-1.264h5.12V13h-5.12Zm7.878 4V5.864h4.096c1.424 0 2.512.32 3.248.976.736.656 1.104 1.504 1.104 2.576s-.368 1.936-1.104 2.592c-.736.656-1.824.976-3.248.976h-2.576V17h-1.52Zm1.52-5.376h2.368c1.008 0 1.776-.192 2.272-.576.496-.384.736-.928.736-1.632 0-.688-.24-1.232-.736-1.616-.496-.384-1.264-.576-2.272-.576h-2.368v4.4Zm13.78 5.616c-1.073 0-2.017-.256-2.833-.752-.816-.496-1.44-1.184-1.888-2.064-.464-.88-.688-1.872-.688-2.992 0-1.136.224-2.128.688-3.008a5.198 5.198 0 0 1 1.92-2.064c.816-.496 1.744-.736 2.784-.736 1.168 0 2.176.272 3.008.816a4.454 4.454 0 0 1 1.76 2.304h-1.6c-.24-.512-.624-.928-1.184-1.248-.56-.32-1.216-.48-1.984-.48-.752 0-1.408.176-1.984.544-.576.368-1.024.88-1.36 1.536-.336.656-.496 1.44-.496 2.336 0 .896.16 1.68.496 2.336.32.656.768 1.168 1.36 1.536.576.368 1.248.544 2.032.544.672 0 1.264-.144 1.792-.432a3.117 3.117 0 0 0 1.216-1.152 3.284 3.284 0 0 0 .432-1.68v-.288h-3.488v-1.36h5.008v1.392c0 .944-.208 1.776-.624 2.512a4.498 4.498 0 0 1-1.744 1.76c-.752.432-1.616.64-2.624.64Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/TV-Y.svg b/packages/design-system/src/assets/icons/maturity-ratings/TV-Y.svg
new file mode 100644
index 0000000..e069e3b
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/TV-Y.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="22" fill="none" viewBox="0 0 52 22">
+  <path stroke="#BCBCBC" d="M.5.5h51v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.612 17h-1.52V7.224H7.14v-1.36h9.424v1.36h-3.952V17ZM27.907 5.864 23.475 17h-1.552L17.491 5.864h1.648l3.6 9.312 3.568-9.312h1.6ZM29.093 13v-1.264h5.12V13h-5.12Zm9.854 4v-4.288l-4.16-6.848h1.76l3.2 5.392 3.152-5.392h1.696l-4.128 6.816V17h-1.52Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/maturity-ratings/TV-Y7.svg b/packages/design-system/src/assets/icons/maturity-ratings/TV-Y7.svg
new file mode 100644
index 0000000..3e1b327
--- /dev/null
+++ b/packages/design-system/src/assets/icons/maturity-ratings/TV-Y7.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="62" height="22" fill="none" viewBox="0 0 62 22">
+  <path stroke="#BCBCBC" d="M.5.5h61v21H.5z"/>
+  <path fill="#BCBCBC" d="M12.612 17h-1.52V7.224H7.14v-1.36h9.424v1.36h-3.952V17ZM27.907 5.864 23.475 17h-1.552L17.491 5.864h1.648l3.6 9.312 3.568-9.312h1.6ZM29.093 13v-1.264h5.12V13h-5.12Zm9.854 4v-4.288l-4.16-6.848h1.76l3.2 5.392 3.152-5.392h1.696l-4.128 6.816V17h-1.52ZM53.596 5.864v1.184L49.18 17h-1.6l4.416-9.792h-6.144V5.864h7.744Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewAddDefault.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewAddDefault.svg
new file mode 100644
index 0000000..7b50eb3
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewAddDefault.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#2A2A2A"/>
+<circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2 19.2L19.2 12H20.8L20.8 19.2L28 19.2V20.8L20.8 20.8L20.8 28H19.2L19.2 20.8L12 20.8V19.2L19.2 19.2Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewAddHover.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewAddHover.svg
new file mode 100644
index 0000000..73dfc6a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewAddHover.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19" fill="#414141" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2 19.2L19.2 12H20.8L20.8 19.2L28 19.2V20.8L20.8 20.8L20.8 28H19.2L19.2 20.8L12 20.8V19.2L19.2 19.2Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownDefault.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownDefault.svg
new file mode 100644
index 0000000..0f03376
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownDefault.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#2A2A2A"/>
+<circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
+<path d="M13.9995 18.0004L19.9995 24.0004L25.9995 18.0004" stroke="white" stroke-width="1.6" stroke-linecap="square"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownHover.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownHover.svg
new file mode 100644
index 0000000..89b5861
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownHover.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19" fill="#414141" stroke="white" stroke-width="2"/>
+<path d="M13.9995 18.0004L19.9995 24.0004L25.9995 18.0004" stroke="white" stroke-width="1.6" stroke-linecap="square"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownInactive.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownInactive.svg
new file mode 100644
index 0000000..193390b
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewArrowDownInactive.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#2A2A2A" fill-opacity="0.7"/>
+<circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
+<path d="M13.9995 18.0004L19.9995 24.0004L25.9995 18.0004" stroke="white" stroke-width="1.6" stroke-linecap="square"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewMuteDefault.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewMuteDefault.svg
new file mode 100644
index 0000000..70d5252
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewMuteDefault.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.2" stroke-width="2"/>
+<path d="M20.3416 14.0657C20.2117 14.0096 20.0692 13.9888 19.9287 14.0057C19.7882 14.0226 19.6547 14.0764 19.5418 14.1617L15.7189 17.1848H12.7998C12.5877 17.1848 12.3842 17.2691 12.2342 17.4191C12.0843 17.5691 12 17.7725 12 17.9846V22.7832C12 22.9953 12.0843 23.1988 12.2342 23.3487C12.3842 23.4987 12.5877 23.583 12.7998 23.583H15.7189L19.5018 26.6061C19.6425 26.719 19.8173 26.781 19.9977 26.7821C20.1171 26.784 20.2353 26.7566 20.3416 26.7021C20.4777 26.6373 20.5927 26.5353 20.6733 26.4079C20.754 26.2806 20.797 26.133 20.7975 25.9823V14.7855C20.797 14.6348 20.754 14.4872 20.6733 14.3599C20.5927 14.2325 20.4777 14.1306 20.3416 14.0657ZM19.1979 24.3188L16.4947 22.1594C16.354 22.0465 16.1792 21.9845 15.9988 21.9835H13.5995V18.7844H15.9988C16.1792 18.7833 16.354 18.7213 16.4947 18.6084L19.1979 16.4491V24.3188ZM26.3238 20.3839L27.7634 18.9523C27.838 18.8778 27.8972 18.7892 27.9375 18.6918C27.9779 18.5944 27.9986 18.49 27.9986 18.3845C27.9986 18.279 27.9779 18.1746 27.9375 18.0772C27.8972 17.9798 27.838 17.8912 27.7634 17.8167C27.6889 17.7421 27.6003 17.6829 27.5029 17.6426C27.4055 17.6022 27.3011 17.5815 27.1956 17.5815C27.0901 17.5815 26.9857 17.6022 26.8883 17.6426C26.7909 17.6829 26.7023 17.7421 26.6278 17.8167L25.1962 19.2562L23.7646 17.8167C23.614 17.6661 23.4097 17.5815 23.1968 17.5815C22.9838 17.5815 22.7795 17.6661 22.6289 17.8167C22.4783 17.9673 22.3937 18.1715 22.3937 18.3845C22.3937 18.5975 22.4783 18.8017 22.6289 18.9523L24.0685 20.3839L22.6289 21.8155C22.554 21.8899 22.4945 21.9783 22.4539 22.0758C22.4133 22.1732 22.3923 22.2778 22.3923 22.3833C22.3923 22.4889 22.4133 22.5935 22.4539 22.6909C22.4945 22.7884 22.554 22.8768 22.6289 22.9512C22.7033 23.0261 22.7917 23.0856 22.8892 23.1262C22.9866 23.1668 23.0912 23.1877 23.1968 23.1877C23.3023 23.1877 23.4069 23.1668 23.5043 23.1262C23.6018 23.0856 23.6902 23.0261 23.7646 22.9512L25.1962 21.5116L26.6278 22.9512C26.7021 23.0261 26.7906 23.0856 26.888 23.1262C26.9855 23.1668 27.09 23.1877 27.1956 23.1877C27.3012 23.1877 27.4057 23.1668 27.5032 23.1262C27.6006 23.0856 27.6891 23.0261 27.7634 22.9512C27.8384 22.8768 27.8979 22.7884 27.9385 22.6909C27.9791 22.5935 28 22.4889 28 22.3833C28 22.2778 27.9791 22.1732 27.9385 22.0758C27.8979 21.9783 27.8384 21.8899 27.7634 21.8155L26.3238 20.3839Z" fill="white" fill-opacity="0.5"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewMuteHover.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewMuteHover.svg
new file mode 100644
index 0000000..7f39be7
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewMuteHover.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19" fill="#2A2A2A" stroke="white" stroke-width="2"/>
+<path d="M20.3416 14.0657C20.2117 14.0096 20.0692 13.9888 19.9287 14.0057C19.7882 14.0226 19.6547 14.0764 19.5418 14.1617L15.7189 17.1848H12.7998C12.5877 17.1848 12.3842 17.2691 12.2342 17.4191C12.0843 17.5691 12 17.7725 12 17.9846V22.7832C12 22.9953 12.0843 23.1988 12.2342 23.3487C12.3842 23.4987 12.5877 23.583 12.7998 23.583H15.7189L19.5018 26.6061C19.6425 26.719 19.8173 26.781 19.9977 26.7821C20.1171 26.784 20.2353 26.7566 20.3416 26.7021C20.4777 26.6373 20.5927 26.5353 20.6733 26.4079C20.754 26.2806 20.797 26.133 20.7975 25.9823V14.7855C20.797 14.6348 20.754 14.4872 20.6733 14.3599C20.5927 14.2325 20.4777 14.1306 20.3416 14.0657ZM19.1979 24.3188L16.4947 22.1594C16.354 22.0465 16.1792 21.9845 15.9988 21.9835H13.5995V18.7844H15.9988C16.1792 18.7833 16.354 18.7213 16.4947 18.6084L19.1979 16.4491V24.3188ZM26.3238 20.3839L27.7634 18.9523C27.838 18.8778 27.8972 18.7892 27.9375 18.6918C27.9779 18.5944 27.9986 18.49 27.9986 18.3845C27.9986 18.279 27.9779 18.1746 27.9375 18.0772C27.8972 17.9798 27.838 17.8912 27.7634 17.8167C27.6889 17.7421 27.6003 17.6829 27.5029 17.6426C27.4055 17.6022 27.3011 17.5815 27.1956 17.5815C27.0901 17.5815 26.9857 17.6022 26.8883 17.6426C26.7909 17.6829 26.7023 17.7421 26.6278 17.8167L25.1962 19.2562L23.7646 17.8167C23.614 17.6661 23.4097 17.5815 23.1968 17.5815C22.9838 17.5815 22.7795 17.6661 22.6289 17.8167C22.4783 17.9673 22.3937 18.1715 22.3937 18.3845C22.3937 18.5975 22.4783 18.8017 22.6289 18.9523L24.0685 20.3839L22.6289 21.8155C22.554 21.8899 22.4945 21.9783 22.4539 22.0758C22.4133 22.1732 22.3923 22.2778 22.3923 22.3833C22.3923 22.4889 22.4133 22.5935 22.4539 22.6909C22.4945 22.7884 22.554 22.8768 22.6289 22.9512C22.7033 23.0261 22.7917 23.0856 22.8892 23.1262C22.9866 23.1668 23.0912 23.1877 23.1968 23.1877C23.3023 23.1877 23.4069 23.1668 23.5043 23.1262C23.6018 23.0856 23.6902 23.0261 23.7646 22.9512L25.1962 21.5116L26.6278 22.9512C26.7021 23.0261 26.7906 23.0856 26.888 23.1262C26.9855 23.1668 27.09 23.1877 27.1956 23.1877C27.3012 23.1877 27.4057 23.1668 27.5032 23.1262C27.6006 23.0856 27.6891 23.0261 27.7634 22.9512C27.8384 22.8768 27.8979 22.7884 27.9385 22.6909C27.9791 22.5935 28 22.4889 28 22.3833C28 22.2778 27.9791 22.1732 27.9385 22.0758C27.8979 21.9783 27.8384 21.8899 27.7634 21.8155L26.3238 20.3839Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewPlayDefault.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewPlayDefault.svg
new file mode 100644
index 0000000..dd28cff
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewPlayDefault.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="18" fill="white"/>
+<path d="M26.3794 17.1372C27.1279 17.6128 27.1196 18.708 26.3641 19.1724L13.8283 26.8764C13.0288 27.3678 12 26.7925 12 25.854L12 10.1843C12 9.23775 13.0447 8.66383 13.8436 9.17148L26.3794 17.1372Z" fill="#2A2A2A"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewPlayHover.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewPlayHover.svg
new file mode 100644
index 0000000..fd22bb8
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewPlayHover.svg
@@ -0,0 +1,4 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18" r="18" fill="#E5E5E5"/>
+<path d="M26.3794 17.1372C27.1279 17.6128 27.1196 18.708 26.3641 19.1724L13.8283 26.8764C13.0288 27.3678 12 26.7925 12 25.854L12 10.1843C12 9.23775 13.0447 8.66383 13.8436 9.17148L26.3794 17.1372Z" fill="#2A2A2A"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbUpDefault.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbUpDefault.svg
new file mode 100644
index 0000000..6c2de27
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbUpDefault.svg
@@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="20" fill="#2A2A2A"/>
+<circle cx="20" cy="20" r="19" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9824 13.3764V15.9955C18.9824 16.1722 18.9465 16.3512 18.8732 16.5173C17.7098 19.1527 15.9939 20.4447 14.3478 20.7388C14.3075 20.746 14.2748 20.7664 14.2566 20.7862C14.2484 20.7951 14.2454 20.8013 14.2447 20.8032L14.2444 20.8039L14.2444 25.0334C14.2444 25.0334 14.2459 25.0354 14.2475 25.0369C14.2541 25.0431 14.2637 25.047 14.2749 25.0464C15.6231 24.9648 16.4975 25.1092 17.1677 25.3373C17.4974 25.4495 17.7643 25.5776 17.9888 25.6881C18.0085 25.6978 18.0276 25.7073 18.0463 25.7165C18.2495 25.8167 18.4009 25.8913 18.5631 25.9488C18.6545 25.9812 18.9299 26.0218 19.4096 26.0438C19.8588 26.0643 20.414 26.0666 21.0064 26.0569C22.1899 26.0375 23.4917 25.9708 24.328 25.9152L24.348 25.9139H24.3681C24.4601 25.9139 24.5177 25.9022 24.5505 25.8918C24.5814 25.8821 24.5921 25.8729 24.5937 25.8716C24.5954 25.8701 24.6 25.8662 24.6069 25.8528C24.6148 25.8377 24.6259 25.8098 24.6353 25.7633C24.6813 25.5341 24.6314 25.2009 24.5607 24.8077C24.4834 24.3773 24.7014 24.003 24.991 23.8111C25.4957 23.4766 25.5088 23.0716 25.4643 22.9349C25.3822 22.6819 25.3529 22.3065 25.5662 21.9718C25.7767 21.6415 25.7706 21.43 25.7389 21.2997C25.7003 21.141 25.5927 20.9841 25.4394 20.834C25.0944 20.4962 25.0536 19.9803 25.255 19.5951C25.3405 19.4315 25.3401 19.3251 25.3276 19.2579C25.3132 19.1799 25.2693 19.0906 25.1842 18.9951C25.0986 18.8991 24.9892 18.818 24.8881 18.7624C24.8405 18.7362 24.8019 18.7196 24.7771 18.7108H21.3541V16.4733C21.3541 14.5072 20.9005 13.7779 20.5275 13.5036C20.1439 13.2215 19.6099 13.2359 18.9824 13.3764ZM21.2518 12.4639C22.128 13.1083 22.5985 14.3852 22.5985 16.4733V17.4322H24.8221C24.9577 17.4322 25.0842 17.4679 25.1714 17.4981C25.2703 17.5324 25.3736 17.5792 25.4756 17.6353C25.6777 17.7465 25.9053 17.9112 26.1016 18.1313C26.2984 18.3519 26.4815 18.6488 26.5501 19.0186C26.6113 19.3488 26.5733 19.6958 26.4262 20.042C26.6306 20.2688 26.8475 20.5841 26.9462 20.9895C27.0666 21.4842 26.9906 22.027 26.6613 22.5842C26.8668 23.3005 26.5912 24.183 25.8199 24.7754C25.8775 25.1141 25.94 25.5934 25.854 26.0215C25.7974 26.3038 25.6674 26.6177 25.3883 26.8555C25.1133 27.0899 24.7662 27.1887 24.3898 27.1923C23.539 27.2486 22.2266 27.3156 21.0263 27.3352C20.4224 27.3451 19.8392 27.3432 19.3543 27.321C18.8998 27.3002 18.4454 27.2596 18.1573 27.1575C17.9229 27.0744 17.7059 26.9671 17.5143 26.8724C17.4929 26.8618 17.4719 26.8514 17.4512 26.8412C17.2363 26.7354 17.0279 26.6366 16.7764 26.551C16.284 26.3834 15.5716 26.2487 14.3481 26.3227C13.6439 26.3653 13 25.8026 13 25.0339V20.8039C13 20.0771 13.5627 19.5813 14.1346 19.4791C15.2845 19.2738 16.7032 18.3347 17.738 15.9935V13.3698C17.738 12.7972 18.1139 12.2645 18.693 12.1327C19.3574 11.9816 20.3903 11.8304 21.2518 12.4639Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbUpHover.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbUpHover.svg
new file mode 100644
index 0000000..d1522bc
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbUpHover.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="20" cy="20" r="19" fill="#414141" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9824 13.3764V15.9955C18.9824 16.1722 18.9465 16.3512 18.8732 16.5173C17.7098 19.1527 15.9939 20.4447 14.3478 20.7388C14.3075 20.746 14.2748 20.7664 14.2566 20.7862C14.2484 20.7951 14.2454 20.8013 14.2447 20.8032L14.2444 20.8039L14.2444 25.0334C14.2444 25.0334 14.2459 25.0354 14.2475 25.0369C14.2541 25.0431 14.2637 25.047 14.2749 25.0464C15.6231 24.9648 16.4975 25.1092 17.1677 25.3373C17.4974 25.4495 17.7643 25.5776 17.9888 25.6881C18.0085 25.6978 18.0276 25.7073 18.0463 25.7165C18.2495 25.8167 18.4009 25.8913 18.5631 25.9488C18.6545 25.9812 18.9299 26.0218 19.4096 26.0438C19.8588 26.0643 20.414 26.0666 21.0064 26.0569C22.1899 26.0375 23.4917 25.9708 24.328 25.9152L24.348 25.9139H24.3681C24.4601 25.9139 24.5177 25.9022 24.5505 25.8918C24.5814 25.8821 24.5921 25.8729 24.5937 25.8716C24.5954 25.8701 24.6 25.8662 24.6069 25.8528C24.6148 25.8377 24.6259 25.8098 24.6353 25.7633C24.6813 25.5341 24.6314 25.2009 24.5607 24.8077C24.4834 24.3773 24.7014 24.003 24.991 23.8111C25.4957 23.4766 25.5088 23.0716 25.4643 22.9349C25.3822 22.6819 25.3529 22.3065 25.5662 21.9718C25.7767 21.6415 25.7706 21.43 25.7389 21.2997C25.7003 21.141 25.5927 20.9841 25.4394 20.834C25.0944 20.4962 25.0536 19.9803 25.255 19.5951C25.3405 19.4315 25.3401 19.3251 25.3276 19.2579C25.3132 19.1799 25.2693 19.0906 25.1842 18.9951C25.0986 18.8991 24.9892 18.818 24.8881 18.7624C24.8405 18.7362 24.8019 18.7196 24.7771 18.7108H21.3541V16.4733C21.3541 14.5072 20.9005 13.7779 20.5275 13.5036C20.1439 13.2215 19.6099 13.2359 18.9824 13.3764ZM21.2518 12.4639C22.128 13.1083 22.5985 14.3852 22.5985 16.4733V17.4322H24.8221C24.9577 17.4322 25.0842 17.4679 25.1714 17.4981C25.2703 17.5324 25.3736 17.5792 25.4756 17.6353C25.6777 17.7465 25.9053 17.9112 26.1016 18.1313C26.2984 18.3519 26.4815 18.6488 26.5501 19.0186C26.6113 19.3488 26.5733 19.6958 26.4262 20.042C26.6306 20.2688 26.8475 20.5841 26.9462 20.9895C27.0666 21.4842 26.9906 22.027 26.6613 22.5842C26.8668 23.3005 26.5912 24.183 25.8199 24.7754C25.8775 25.1141 25.94 25.5934 25.854 26.0215C25.7974 26.3038 25.6674 26.6177 25.3883 26.8555C25.1133 27.0899 24.7662 27.1887 24.3898 27.1923C23.539 27.2486 22.2266 27.3156 21.0263 27.3352C20.4224 27.3451 19.8392 27.3432 19.3543 27.321C18.8998 27.3002 18.4454 27.2596 18.1573 27.1575C17.9229 27.0744 17.7059 26.9671 17.5143 26.8724C17.4929 26.8618 17.4719 26.8514 17.4512 26.8412C17.2363 26.7354 17.0279 26.6366 16.7764 26.551C16.284 26.3834 15.5716 26.2487 14.3481 26.3227C13.6439 26.3653 13 25.8026 13 25.0339V20.8039C13 20.0771 13.5627 19.5813 14.1346 19.4791C15.2845 19.2738 16.7032 18.3347 17.738 15.9935V13.3698C17.738 12.7972 18.1139 12.2645 18.693 12.1327C19.3574 11.9816 20.3903 11.8304 21.2518 12.4639Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbsGroupDefault.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbsGroupDefault.svg
new file mode 100644
index 0000000..c1fe448
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbsGroupDefault.svg
@@ -0,0 +1,22 @@
+<svg width="140" height="52" viewBox="0 0 140 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="140" height="52" rx="26" fill="#232323"/>
+<circle cx="28" cy="26" r="17" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2351 34.043V30.8627C28.2351 30.6481 28.2787 30.4309 28.3677 30.2292C29.7804 27.029 31.864 25.4601 33.8629 25.103C33.9118 25.0943 33.9515 25.0695 33.9736 25.0455C33.9836 25.0347 33.9872 25.0271 33.9881 25.0248L33.9884 19.8881C33.9884 19.8881 33.9866 19.8857 33.9847 19.8839C33.9766 19.8764 33.965 19.8716 33.9514 19.8724C32.3143 19.9714 31.2526 19.796 30.4388 19.5191C30.0383 19.3828 29.7143 19.2273 29.4417 19.0931C29.4178 19.0813 29.3945 19.0699 29.3718 19.0587C29.1252 18.937 28.9413 18.8464 28.7443 18.7765C28.6334 18.7372 28.2989 18.6879 27.7164 18.6613C27.1709 18.6363 26.4968 18.6336 25.7774 18.6454C24.3403 18.6689 22.7596 18.7499 21.7441 18.8174L21.7198 18.819H21.6954C21.5836 18.819 21.5137 18.8331 21.4738 18.8457C21.4364 18.8576 21.4234 18.8687 21.4214 18.8704C21.4194 18.8721 21.4139 18.8769 21.4054 18.8931C21.3959 18.9115 21.3823 18.9454 21.371 19.0019C21.3151 19.2801 21.3757 19.6847 21.4615 20.1622C21.5554 20.6848 21.2907 21.1393 20.939 21.3724C20.3262 21.7785 20.3103 22.2703 20.3642 22.4363C20.464 22.7435 20.4996 23.1994 20.2405 23.6058C19.985 24.0068 19.9923 24.2637 20.0308 24.4219C20.0777 24.6146 20.2084 24.8052 20.3945 24.9874C20.8135 25.3976 20.8629 26.024 20.6185 26.4918C20.5147 26.6904 20.5151 26.8196 20.5302 26.9012C20.5478 26.9959 20.601 27.1044 20.7044 27.2203C20.8084 27.3369 20.9412 27.4354 21.064 27.5029C21.1218 27.5347 21.1686 27.5548 21.1988 27.5656H25.3553V30.2826C25.3553 32.67 25.906 33.5555 26.359 33.8886C26.8247 34.2311 27.4732 34.2137 28.2351 34.043ZM25.4795 35.151C24.4155 34.3686 23.8442 32.8181 23.8442 30.2826V29.1181H21.1441C20.9794 29.1181 20.8259 29.0748 20.7199 29.0381C20.5999 28.9965 20.4744 28.9397 20.3506 28.8716C20.1052 28.7365 19.8288 28.5365 19.5904 28.2693C19.3514 28.0014 19.1291 27.6408 19.0458 27.1918C18.9715 26.7909 19.0176 26.3696 19.1963 25.9492C18.9481 25.6737 18.6847 25.2909 18.5649 24.7986C18.4187 24.1979 18.5109 23.5387 18.9108 22.8621C18.6613 21.9924 18.9959 20.9207 19.9325 20.2015C19.8625 19.7901 19.7867 19.2081 19.891 18.6882C19.9598 18.3455 20.1177 17.9643 20.4566 17.6755C20.7905 17.3909 21.2119 17.271 21.6691 17.2666C22.7021 17.1983 24.2957 17.1169 25.7533 17.093C26.4866 17.081 27.1948 17.0834 27.7836 17.1103C28.3354 17.1355 28.8872 17.1849 29.2371 17.3089C29.5216 17.4098 29.7852 17.5401 30.0178 17.6551C30.0438 17.6679 30.0694 17.6806 30.0945 17.693C30.3554 17.8214 30.6085 17.9414 30.9139 18.0453C31.5118 18.2488 32.3768 18.4124 33.8625 18.3226C34.7177 18.2708 35.4995 18.9542 35.4995 19.8876V25.024C35.4995 25.9065 34.8162 26.5085 34.1218 26.6326C32.7255 26.882 31.0027 28.0223 29.7462 30.8652V34.051C29.7462 34.7463 29.2897 35.3932 28.5866 35.5532C27.7798 35.7368 26.5255 35.9203 25.4795 35.151Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.7649 17.9572V21.1375C68.7649 21.3521 68.7213 21.5694 68.6323 21.7711C67.2196 24.9712 65.136 26.5402 63.1371 26.8972C63.0882 26.906 63.0485 26.9308 63.0264 26.9547C63.0164 26.9656 63.0128 26.9732 63.0119 26.9754L63.0116 32.1122C63.0116 32.1122 63.0134 32.1145 63.0153 32.1164C63.0234 32.1239 63.035 32.1287 63.0486 32.1279C64.6857 32.0288 65.7474 32.2042 66.5612 32.4811C66.9617 32.6174 67.2857 32.773 67.5583 32.9072C67.5822 32.9189 67.6055 32.9304 67.6282 32.9416C67.8748 33.0632 68.0587 33.1539 68.2557 33.2237C68.3666 33.263 68.7011 33.3123 69.2836 33.339C69.8291 33.3639 70.5032 33.3667 71.2226 33.3549C72.6597 33.3313 74.2404 33.2504 75.2559 33.1829L75.2802 33.1813H75.3046C75.4164 33.1813 75.4863 33.1671 75.5262 33.1545C75.5636 33.1426 75.5766 33.1315 75.5786 33.1299C75.5806 33.1282 75.5861 33.1234 75.5946 33.1071C75.6041 33.0888 75.6177 33.0549 75.629 32.9984C75.6849 32.7201 75.6243 32.3156 75.5385 31.838C75.4446 31.3154 75.7093 30.861 76.061 30.6279C76.6738 30.2218 76.6897 29.73 76.6358 29.5639C76.536 29.2567 76.5004 28.8009 76.7595 28.3945C77.015 27.9934 77.0077 27.7366 76.9692 27.5783C76.9223 27.3856 76.7916 27.1951 76.6055 27.0129C76.1865 26.6027 76.1371 25.9763 76.3815 25.5085C76.4853 25.3098 76.4849 25.1807 76.4698 25.099C76.4522 25.0043 76.399 24.8958 76.2956 24.7799C76.1916 24.6634 76.0588 24.5649 75.936 24.4973C75.8782 24.4655 75.8314 24.4454 75.8012 24.4346H71.6447V21.7177C71.6447 19.3303 71.094 18.4448 70.641 18.1117C70.1753 17.7691 69.5268 17.7866 68.7649 17.9572ZM71.5205 16.8492C72.5845 17.6316 73.1558 19.1822 73.1558 21.7177V22.8821H75.8559C76.0206 22.8821 76.1741 22.9254 76.2801 22.9621C76.4001 23.0037 76.5256 23.0606 76.6494 23.1287C76.8948 23.2637 77.1712 23.4637 77.4096 23.731C77.6486 23.9989 77.8709 24.3594 77.9542 24.8084C78.0285 25.2094 77.9824 25.6307 77.8037 26.0511C78.0519 26.3265 78.3153 26.7094 78.4351 27.2017C78.5813 27.8023 78.4891 28.4615 78.0892 29.1381C78.3387 30.0079 78.0041 31.0795 77.0675 31.7988C77.1375 32.2101 77.2133 32.7922 77.109 33.312C77.0402 33.6548 76.8823 34.0359 76.5434 34.3247C76.2095 34.6093 75.7881 34.7293 75.3309 34.7337C74.2979 34.802 72.7043 34.8833 71.2467 34.9072C70.5134 34.9192 69.8052 34.9169 69.2164 34.89C68.6646 34.8647 68.1128 34.8154 67.7629 34.6913C67.4784 34.5905 67.2148 34.4602 66.9822 34.3451C66.9562 34.3323 66.9306 34.3197 66.9055 34.3073C66.6446 34.1789 66.3915 34.0589 66.0861 33.9549C65.4882 33.7514 64.6232 33.5878 63.1375 33.6777C62.2823 33.7294 61.5005 33.0461 61.5005 32.1127V26.9763C61.5005 26.0937 62.1838 25.4917 62.8782 25.3677C64.2745 25.1183 65.9973 23.9779 67.2538 21.1351V17.9492C67.2538 17.2539 67.7103 16.607 68.4134 16.447C69.2202 16.2634 70.4745 16.0799 71.5205 16.8492Z" fill="white"/>
+<g filter="url(#filter0_d_109_11012)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.765 19.9575V23.1378C107.765 23.3524 107.721 23.5696 107.632 23.7713C106.22 26.9715 104.136 28.5404 102.137 28.8975C102.088 28.9062 102.048 28.931 102.026 28.955C102.016 28.9658 102.013 28.9734 102.012 28.9756L102.012 34.1124C102.012 34.1124 102.013 34.1148 102.015 34.1166C102.023 34.1241 102.035 34.1289 102.049 34.1281C103.686 34.0291 104.747 34.2044 105.561 34.4814C105.962 34.6177 106.286 34.7732 106.558 34.9074C106.582 34.9191 106.605 34.9306 106.628 34.9418C106.875 35.0634 107.059 35.1541 107.256 35.224C107.367 35.2633 107.701 35.3126 108.284 35.3392C108.829 35.3642 109.503 35.3669 110.223 35.3551C111.66 35.3316 113.24 35.2506 114.256 35.1831L114.28 35.1815H114.305C114.416 35.1815 114.486 35.1674 114.526 35.1547C114.564 35.1429 114.577 35.1318 114.579 35.1301C114.581 35.1284 114.586 35.1236 114.595 35.1074C114.604 35.089 114.618 35.0551 114.629 34.9986C114.685 34.7204 114.624 34.3158 114.538 33.8383C114.445 33.3157 114.709 32.8612 115.061 32.6281C115.674 32.222 115.69 31.7302 115.636 31.5642C115.536 31.257 115.5 30.8011 115.759 30.3947C116.015 29.9937 116.008 29.7368 115.969 29.5786C115.922 29.3858 115.792 29.1953 115.605 29.0131C115.186 28.6029 115.137 27.9765 115.382 27.5087C115.485 27.3101 115.485 27.1809 115.47 27.0992C115.452 27.0046 115.399 26.8961 115.296 26.7802C115.192 26.6636 115.059 26.5651 114.936 26.4975C114.878 26.4658 114.831 26.4457 114.801 26.4349H110.645V23.7179C110.645 21.3305 110.094 20.445 109.641 20.1119C109.175 19.7694 108.527 19.7868 107.765 19.9575ZM110.521 18.8495C111.584 19.6318 112.156 21.1824 112.156 23.7179V24.8824H114.856C115.021 24.8824 115.174 24.9257 115.28 24.9624C115.4 25.0039 115.526 25.0608 115.649 25.1289C115.895 25.2639 116.171 25.464 116.41 25.7312C116.649 25.9991 116.871 26.3597 116.954 26.8087C117.029 27.2096 116.982 27.6309 116.804 28.0513C117.052 28.3268 117.315 28.7096 117.435 29.2019C117.581 29.8026 117.489 30.4618 117.089 31.1384C117.339 32.0081 117.004 33.0798 116.068 33.799C116.137 34.2104 116.213 34.7924 116.109 35.3122C116.04 35.655 115.882 36.0361 115.543 36.325C115.21 36.6096 114.788 36.7295 114.331 36.7339C113.298 36.8022 111.704 36.8836 110.247 36.9075C109.513 36.9195 108.805 36.9171 108.216 36.8902C107.665 36.865 107.113 36.8156 106.763 36.6916C106.478 36.5907 106.215 36.4604 105.982 36.3454C105.956 36.3326 105.931 36.3199 105.905 36.3075C105.645 36.1791 105.392 36.0591 105.086 35.9552C104.488 35.7517 103.623 35.5881 102.137 35.6779C101.282 35.7297 100.5 35.0463 100.5 34.1129V28.9765C100.5 28.0939 101.184 27.492 101.878 27.3679C103.274 27.1185 104.997 25.9782 106.254 23.1353V19.9495C106.254 19.2542 106.71 18.6073 107.413 18.4473C108.22 18.2637 109.474 18.0802 110.521 18.8495Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.765 13.9575V17.1378C113.765 17.3524 113.721 17.5696 113.632 17.7713C112.219 20.9715 111.086 22.9756 111.086 22.9756C111.037 22.9844 111.022 23.476 111 23.5C111.086 21.5087 112.254 25 111 24L111.982 25.5642C111.982 25.5642 113.63 24.9982 113.632 25C113.64 25.0075 113.256 25.5 113.256 25.5C114.893 25.401 113.687 25.2231 114.5 25.5C114.901 25.6363 115.228 25.3658 115.5 25.5C115.5 25.5 115.478 26.4888 115.5 26.5C115.747 26.6216 116.05 26.758 116.247 26.8278C116.357 26.8671 115.664 28.4734 116.247 28.5C116.792 28.525 115.503 29.3669 116.222 29.3551C117.66 29.3316 119.24 29.2506 120.256 29.1831L120.28 29.1815H120.305C120.416 29.1815 120.486 29.1674 120.526 29.1547C120.564 29.1429 120.577 29.1318 120.579 29.1301C120.581 29.1284 120.586 29.1236 120.595 29.1074C120.604 29.089 120.618 29.0551 120.629 28.9986C120.685 28.7204 120.624 28.3158 120.538 27.8383C120.444 27.3157 120.709 26.8612 121.061 26.6281C121.674 26.222 121.69 25.7302 121.636 25.5642C121.536 25.257 121.5 24.8011 121.759 24.3947C122.015 23.9937 122.008 23.7368 121.969 23.5786C121.922 23.3858 121.792 23.1953 121.605 23.0131C121.186 22.6029 121.137 21.9765 121.381 21.5087C121.485 21.3101 121.485 21.1809 121.47 21.0992C121.452 21.0046 121.399 20.8961 121.296 20.7802C121.192 20.6636 121.059 20.5651 120.936 20.4975C120.878 20.4658 120.831 20.4457 120.801 20.4349H116.645V17.7179C116.645 15.3305 116.094 14.445 115.641 14.1119C115.175 13.7694 114.527 13.7868 113.765 13.9575ZM116.52 12.8495C117.584 13.6318 118.156 15.1824 118.156 17.7179V18.8824H120.856C121.02 18.8824 121.174 18.9257 121.28 18.9624C121.4 19.0039 121.526 19.0608 121.649 19.1289C121.895 19.2639 122.171 19.464 122.41 19.7312C122.649 19.9991 122.871 20.3597 122.954 20.8087C123.028 21.2096 122.982 21.6309 122.804 22.0513C123.052 22.3268 123.315 22.7096 123.435 23.2019C123.581 23.8026 123.489 24.4618 123.089 25.1384C123.339 26.0081 123.004 27.0798 122.067 27.799C122.137 28.2104 122.213 28.7924 122.109 29.3122C122.04 29.655 121.882 30.0361 121.543 30.325C121.209 30.6096 120.788 30.7295 120.331 30.7339C119.298 30.8022 117.704 30.8836 116.247 30.9075C115.513 30.9195 116.811 29.3821 116.222 29.3551C115.671 29.3299 116.35 29.124 116 29C115.715 28.8991 116.233 28.115 116 28H115.5C115.239 27.8716 116.254 26.3812 115.949 26.2772C115.351 26.0737 114.486 25.9101 113 26C112.145 26.0517 111.363 25.3684 111.363 24.435L111.086 22.9756C111.086 22.0931 109.806 20.124 110.5 20C111.897 19.7506 111.086 20 112.254 17.1353V13.9495C112.254 13.2542 112.71 12.6073 113.413 12.4473C114.22 12.2637 115.474 12.0802 116.52 12.8495Z" fill="white"/>
+<defs>
+<filter id="filter0_d_109_11012" x="96" y="18.2861" width="25.5005" height="27.3422" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_109_11012"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_109_11012" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbsGroupHover.svg b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbsGroupHover.svg
new file mode 100644
index 0000000..0a3807e
--- /dev/null
+++ b/packages/design-system/src/assets/icons/movie-preview/MoviePreviewThumbsGroupHover.svg
@@ -0,0 +1,24 @@
+<svg width="140" height="52" viewBox="0 0 140 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="140" height="52" rx="26" fill="#232323"/>
+<circle cx="28" cy="26" r="17" fill="#363636" stroke="white" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.2351 34.0431V30.8628C28.2351 30.6482 28.2787 30.431 28.3677 30.2293C29.7804 27.0291 31.864 25.4602 33.8629 25.1031C33.9118 25.0944 33.9515 25.0696 33.9736 25.0456C33.9836 25.0348 33.9872 25.0272 33.9881 25.025L33.9884 19.8882C33.9884 19.8882 33.9866 19.8858 33.9847 19.884C33.9766 19.8765 33.965 19.8717 33.9514 19.8725C32.3143 19.9715 31.2526 19.7962 30.4388 19.5192C30.0383 19.3829 29.7143 19.2274 29.4417 19.0932C29.4178 19.0815 29.3945 19.07 29.3718 19.0588C29.1252 18.9372 28.9413 18.8465 28.7443 18.7767C28.6334 18.7374 28.2989 18.688 27.7164 18.6614C27.1709 18.6364 26.4968 18.6337 25.7774 18.6455C24.3403 18.669 22.7596 18.75 21.7441 18.8175L21.7198 18.8191H21.6954C21.5836 18.8191 21.5137 18.8332 21.4738 18.8459C21.4364 18.8577 21.4234 18.8688 21.4214 18.8705C21.4194 18.8722 21.4139 18.877 21.4054 18.8933C21.3959 18.9116 21.3823 18.9455 21.371 19.002C21.3151 19.2803 21.3757 19.6848 21.4615 20.1623C21.5554 20.6849 21.2907 21.1394 20.939 21.3725C20.3262 21.7786 20.3103 22.2704 20.3642 22.4364C20.464 22.7436 20.4996 23.1995 20.2405 23.6059C19.985 24.0069 19.9923 24.2638 20.0308 24.422C20.0777 24.6148 20.2084 24.8053 20.3945 24.9875C20.8135 25.3977 20.8629 26.0241 20.6185 26.4919C20.5147 26.6905 20.5151 26.8197 20.5302 26.9014C20.5478 26.996 20.601 27.1045 20.7044 27.2204C20.8084 27.337 20.9412 27.4355 21.064 27.5031C21.1218 27.5349 21.1686 27.555 21.1988 27.5657H25.3553V30.2827C25.3553 32.6701 25.906 33.5556 26.359 33.8887C26.8247 34.2312 27.4732 34.2138 28.2351 34.0431ZM25.4795 35.1512C24.4155 34.3688 23.8442 32.8182 23.8442 30.2827V29.1182H21.1441C20.9794 29.1182 20.8259 29.0749 20.7199 29.0382C20.5999 28.9967 20.4744 28.9398 20.3506 28.8717C20.1052 28.7367 19.8288 28.5366 19.5904 28.2694C19.3514 28.0015 19.1291 27.6409 19.0458 27.192C18.9715 26.791 19.0176 26.3697 19.1963 25.9493C18.9481 25.6739 18.6847 25.291 18.5649 24.7987C18.4187 24.198 18.5109 23.5388 18.9108 22.8622C18.6613 21.9925 18.9959 20.9208 19.9325 20.2016C19.8625 19.7902 19.7867 19.2082 19.891 18.6884C19.9598 18.3456 20.1177 17.9645 20.4566 17.6757C20.7905 17.3911 21.2119 17.2711 21.6691 17.2667C22.7021 17.1984 24.2957 17.1171 25.7533 17.0932C26.4866 17.0811 27.1948 17.0835 27.7836 17.1104C28.3354 17.1357 28.8872 17.185 29.2371 17.309C29.5216 17.4099 29.7852 17.5402 30.0178 17.6552C30.0438 17.6681 30.0694 17.6807 30.0945 17.6931C30.3554 17.8215 30.6085 17.9415 30.9139 18.0454C31.5118 18.2489 32.3768 18.4126 33.8625 18.3227C34.7177 18.2709 35.4995 18.9543 35.4995 19.8877V25.0241C35.4995 25.9067 34.8162 26.5087 34.1218 26.6327C32.7255 26.8821 31.0027 28.0224 29.7462 30.8653V34.0512C29.7462 34.7465 29.2897 35.3933 28.5866 35.5533C27.7798 35.7369 26.5255 35.9204 25.4795 35.1512Z" fill="white"/>
+<circle cx="70" cy="26" r="18" fill="#363636"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.7649 17.957V21.1373C68.7649 21.3519 68.7213 21.5691 68.6323 21.7708C67.2196 24.971 65.136 26.5399 63.1371 26.897C63.0882 26.9057 63.0485 26.9305 63.0264 26.9545C63.0164 26.9653 63.0128 26.9729 63.0119 26.9752L63.0116 32.1119C63.0116 32.1119 63.0134 32.1143 63.0153 32.1161C63.0234 32.1236 63.035 32.1284 63.0486 32.1276C64.6857 32.0286 65.7474 32.204 66.5612 32.4809C66.9617 32.6172 67.2857 32.7727 67.5583 32.9069C67.5822 32.9187 67.6055 32.9301 67.6282 32.9413C67.8748 33.063 68.0587 33.1536 68.2557 33.2235C68.3666 33.2628 68.7011 33.3121 69.2836 33.3387C69.8291 33.3637 70.5032 33.3664 71.2226 33.3546C72.6597 33.3311 74.2404 33.2501 75.2559 33.1826L75.2802 33.181H75.3046C75.4164 33.181 75.4863 33.1669 75.5262 33.1543C75.5636 33.1424 75.5766 33.1313 75.5786 33.1296C75.5806 33.1279 75.5861 33.1231 75.5946 33.1069C75.6041 33.0885 75.6177 33.0546 75.629 32.9981C75.6849 32.7199 75.6243 32.3153 75.5385 31.8378C75.4446 31.3152 75.7093 30.8607 76.061 30.6276C76.6738 30.2215 76.6897 29.7297 76.6358 29.5637C76.536 29.2565 76.5004 28.8006 76.7595 28.3942C77.015 27.9932 77.0077 27.7363 76.9692 27.5781C76.9223 27.3854 76.7916 27.1948 76.6055 27.0126C76.1865 26.6024 76.1371 25.976 76.3815 25.5082C76.4853 25.3096 76.4849 25.1804 76.4698 25.0988C76.4522 25.0041 76.399 24.8956 76.2956 24.7797C76.1916 24.6631 76.0588 24.5646 75.936 24.4971C75.8782 24.4653 75.8314 24.4452 75.8012 24.4344H71.6447V21.7174C71.6447 19.33 71.094 18.4445 70.641 18.1114C70.1753 17.7689 69.5268 17.7863 68.7649 17.957ZM71.5205 16.849C72.5845 17.6314 73.1558 19.1819 73.1558 21.7174V22.8819H75.8559C76.0206 22.8819 76.1741 22.9252 76.2801 22.9619C76.4001 23.0035 76.5256 23.0603 76.6494 23.1284C76.8948 23.2635 77.1712 23.4635 77.4096 23.7307C77.6486 23.9986 77.8709 24.3592 77.9542 24.8082C78.0285 25.2091 77.9824 25.6304 77.8037 26.0508C78.0519 26.3263 78.3153 26.7091 78.4351 27.2014C78.5813 27.8021 78.4891 28.4613 78.0892 29.1379C78.3387 30.0076 78.0041 31.0793 77.0675 31.7985C77.1375 32.2099 77.2133 32.7919 77.109 33.3118C77.0402 33.6545 76.8823 34.0357 76.5434 34.3245C76.2095 34.6091 75.7881 34.729 75.3309 34.7334C74.2979 34.8017 72.7043 34.8831 71.2467 34.907C70.5134 34.919 69.8052 34.9166 69.2164 34.8897C68.6646 34.8645 68.1128 34.8151 67.7629 34.6911C67.4784 34.5902 67.2148 34.4599 66.9822 34.3449C66.9562 34.3321 66.9306 34.3194 66.9055 34.307C66.6446 34.1786 66.3915 34.0586 66.0861 33.9547C65.4882 33.7512 64.6232 33.5876 63.1375 33.6774C62.2823 33.7292 61.5005 33.0458 61.5005 32.1124V26.976C61.5005 26.0935 62.1838 25.4915 62.8782 25.3674C64.2745 25.118 65.9973 23.9777 67.2538 21.1348V17.949C67.2538 17.2537 67.7103 16.6068 68.4134 16.4468C69.2202 16.2632 70.4745 16.0797 71.5205 16.849Z" fill="white"/>
+<circle cx="112" cy="26" r="18" fill="#363636"/>
+<g filter="url(#filter0_d_109_11013)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.765 19.9575V23.1378C107.765 23.3524 107.721 23.5696 107.632 23.7713C106.22 26.9715 104.136 28.5404 102.137 28.8975C102.088 28.9062 102.048 28.931 102.026 28.955C102.016 28.9658 102.013 28.9734 102.012 28.9756L102.012 34.1124C102.012 34.1124 102.013 34.1148 102.015 34.1166C102.023 34.1241 102.035 34.1289 102.049 34.1281C103.686 34.0291 104.747 34.2044 105.561 34.4814C105.962 34.6177 106.286 34.7732 106.558 34.9074C106.582 34.9191 106.605 34.9306 106.628 34.9418C106.875 35.0634 107.059 35.1541 107.256 35.224C107.367 35.2633 107.701 35.3126 108.284 35.3392C108.829 35.3642 109.503 35.3669 110.223 35.3551C111.66 35.3316 113.24 35.2506 114.256 35.1831L114.28 35.1815H114.305C114.416 35.1815 114.486 35.1674 114.526 35.1547C114.564 35.1429 114.577 35.1318 114.579 35.1301C114.581 35.1284 114.586 35.1236 114.595 35.1074C114.604 35.089 114.618 35.0551 114.629 34.9986C114.685 34.7204 114.624 34.3158 114.538 33.8383C114.445 33.3157 114.709 32.8612 115.061 32.6281C115.674 32.222 115.69 31.7302 115.636 31.5642C115.536 31.257 115.5 30.8011 115.759 30.3947C116.015 29.9937 116.008 29.7368 115.969 29.5786C115.922 29.3858 115.792 29.1953 115.605 29.0131C115.186 28.6029 115.137 27.9765 115.382 27.5087C115.485 27.3101 115.485 27.1809 115.47 27.0992C115.452 27.0046 115.399 26.8961 115.296 26.7802C115.192 26.6636 115.059 26.5651 114.936 26.4975C114.878 26.4658 114.831 26.4457 114.801 26.4349H110.645V23.7179C110.645 21.3305 110.094 20.445 109.641 20.1119C109.175 19.7694 108.527 19.7868 107.765 19.9575ZM110.521 18.8495C111.584 19.6318 112.156 21.1824 112.156 23.7179V24.8824H114.856C115.021 24.8824 115.174 24.9257 115.28 24.9624C115.4 25.0039 115.526 25.0608 115.649 25.1289C115.895 25.2639 116.171 25.464 116.41 25.7312C116.649 25.9991 116.871 26.3597 116.954 26.8087C117.029 27.2096 116.982 27.6309 116.804 28.0513C117.052 28.3268 117.315 28.7096 117.435 29.2019C117.581 29.8026 117.489 30.4618 117.089 31.1384C117.339 32.0081 117.004 33.0798 116.068 33.799C116.137 34.2104 116.213 34.7924 116.109 35.3122C116.04 35.655 115.882 36.0361 115.543 36.325C115.21 36.6096 114.788 36.7295 114.331 36.7339C113.298 36.8022 111.704 36.8836 110.247 36.9075C109.513 36.9195 108.805 36.9171 108.216 36.8902C107.665 36.865 107.113 36.8156 106.763 36.6916C106.478 36.5907 106.215 36.4604 105.982 36.3454C105.956 36.3326 105.931 36.3199 105.905 36.3075C105.645 36.1791 105.392 36.0591 105.086 35.9552C104.488 35.7517 103.623 35.5881 102.137 35.6779C101.282 35.7297 100.5 35.0463 100.5 34.1129V28.9765C100.5 28.0939 101.184 27.492 101.878 27.3679C103.274 27.1185 104.997 25.9782 106.254 23.1353V19.9495C106.254 19.2542 106.71 18.6073 107.413 18.4473C108.22 18.2637 109.474 18.0802 110.521 18.8495Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M113.765 13.9575V17.1378C113.765 17.3524 113.721 17.5696 113.632 17.7713C112.219 20.9715 111.086 22.9756 111.086 22.9756C111.037 22.9844 111.022 23.476 111 23.5C111.086 21.5087 112.254 25 111 24L111.982 25.5642C111.982 25.5642 113.63 24.9982 113.632 25C113.64 25.0075 113.256 25.5 113.256 25.5C114.893 25.401 113.687 25.2231 114.5 25.5C114.901 25.6363 115.228 25.3658 115.5 25.5C115.5 25.5 115.478 26.4888 115.5 26.5C115.747 26.6216 116.05 26.758 116.247 26.8278C116.357 26.8671 115.664 28.4734 116.247 28.5C116.792 28.525 115.503 29.3669 116.222 29.3551C117.66 29.3316 119.24 29.2506 120.256 29.1831L120.28 29.1815H120.305C120.416 29.1815 120.486 29.1674 120.526 29.1547C120.564 29.1429 120.577 29.1318 120.579 29.1301C120.581 29.1284 120.586 29.1236 120.595 29.1074C120.604 29.089 120.618 29.0551 120.629 28.9986C120.685 28.7204 120.624 28.3158 120.538 27.8383C120.444 27.3157 120.709 26.8612 121.061 26.6281C121.674 26.222 121.69 25.7302 121.636 25.5642C121.536 25.257 121.5 24.8011 121.759 24.3947C122.015 23.9937 122.008 23.7368 121.969 23.5786C121.922 23.3858 121.792 23.1953 121.605 23.0131C121.186 22.6029 121.137 21.9765 121.381 21.5087C121.485 21.3101 121.485 21.1809 121.47 21.0992C121.452 21.0046 121.399 20.8961 121.296 20.7802C121.192 20.6636 121.059 20.5651 120.936 20.4975C120.878 20.4658 120.831 20.4457 120.801 20.4349H116.645V17.7179C116.645 15.3305 116.094 14.445 115.641 14.1119C115.175 13.7694 114.527 13.7868 113.765 13.9575ZM116.52 12.8495C117.584 13.6318 118.156 15.1824 118.156 17.7179V18.8824H120.856C121.02 18.8824 121.174 18.9257 121.28 18.9624C121.4 19.0039 121.526 19.0608 121.649 19.1289C121.895 19.2639 122.171 19.464 122.41 19.7312C122.649 19.9991 122.871 20.3597 122.954 20.8087C123.028 21.2096 122.982 21.6309 122.804 22.0513C123.052 22.3268 123.315 22.7096 123.435 23.2019C123.581 23.8026 123.489 24.4618 123.089 25.1384C123.339 26.0081 123.004 27.0798 122.067 27.799C122.137 28.2104 122.213 28.7924 122.109 29.3122C122.04 29.655 121.882 30.0361 121.543 30.325C121.209 30.6096 120.788 30.7295 120.331 30.7339C119.298 30.8022 117.704 30.8836 116.247 30.9075C115.513 30.9195 116.811 29.3821 116.222 29.3551C115.671 29.3299 116.35 29.124 116 29C115.715 28.8991 116.233 28.115 116 28H115.5C115.239 27.8716 116.254 26.3812 115.949 26.2772C115.351 26.0737 114.486 25.9101 113 26C112.145 26.0517 111.363 25.3684 111.363 24.435L111.086 22.9756C111.086 22.0931 109.806 20.124 110.5 20C111.897 19.7506 111.086 20 112.254 17.1353V13.9495C112.254 13.2542 112.71 12.6073 113.413 12.4473C114.22 12.2637 115.474 12.0802 116.52 12.8495Z" fill="white"/>
+<defs>
+<filter id="filter0_d_109_11013" x="96" y="18.2861" width="25.5005" height="27.3422" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_109_11013"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_109_11013" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/packages/design-system/src/assets/icons/presets-labels/LeavingSoon.svg b/packages/design-system/src/assets/icons/presets-labels/LeavingSoon.svg
new file mode 100644
index 0000000..8fa3604
--- /dev/null
+++ b/packages/design-system/src/assets/icons/presets-labels/LeavingSoon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="76" height="17" fill="none" viewBox="0 0 76 17">
+  <path fill="#F50723" d="M0 2a2 2 0 0 1 2-2h72a2 2 0 0 1 2 2v15H0V2Z"/>
+  <path fill="#fff" d="M11.69 10.81V12h-4.9V5.04h1.36v5.77h3.54Zm3.305 1.34c-.53 0-.99-.11-1.37-.34a2.21 2.21 0 0 1-.89-.95c-.21-.41-.31-.9-.31-1.47 0-.51.1-.98.31-1.39.2-.41.49-.73.87-.97.38-.23.83-.35 1.36-.35.76 0 1.34.24 1.75.73.41.49.61 1.14.61 1.95v.46h-3.62c.11.86.54 1.29 1.3 1.29.25 0 .45-.04.62-.12.16-.08.27-.18.33-.31h1.28c-.13.45-.39.81-.78 1.07-.4.27-.89.4-1.46.4Zm-.04-4.43c-.35 0-.63.1-.84.3-.21.21-.35.5-.41.88h2.38c-.01-.35-.11-.64-.3-.86-.19-.21-.47-.32-.83-.32Zm4.854 4.43c-.54 0-.97-.15-1.29-.45-.33-.29-.49-.69-.49-1.18 0-.53.19-.95.58-1.25.39-.3.93-.45 1.62-.45h1.05v-.19c0-.32-.09-.55-.26-.7-.17-.14-.41-.21-.7-.21-.25 0-.46.05-.62.15-.16.1-.26.22-.3.35h-1.22c.09-.44.32-.81.7-1.1.38-.29.87-.44 1.48-.44.67 0 1.2.17 1.59.5.39.34.58.87.58 1.58V12h-1.17v-.64c-.17.27-.39.47-.67.6-.29.13-.58.19-.88.19Zm.32-1.02c.18 0 .36-.04.54-.12.17-.08.32-.2.44-.36.11-.15.17-.35.17-.59v-.33h-.99c-.33 0-.58.06-.75.18-.18.13-.27.3-.27.53 0 .23.08.4.24.51.16.12.37.18.62.18Zm6.225.87h-1.33l-2.01-5.17h1.45l1.27 3.72 1.27-3.72h1.37L26.354 12Zm3.407-5.77c-.21 0-.4-.08-.55-.23a.741.741 0 0 1-.24-.56c0-.22.08-.41.24-.56.15-.15.34-.23.55-.23.21 0 .4.08.56.23.15.15.23.34.23.56 0 .22-.08.41-.23.56-.16.15-.35.23-.56.23ZM29.12 12V6.83h1.27V12h-1.27Zm3.868-3.04V12h-1.27V6.83h1.22v.61c.37-.51.89-.76 1.56-.76.56 0 1 .19 1.33.58.33.39.49.9.49 1.53V12h-1.27V8.98c0-.35-.08-.64-.24-.85-.17-.21-.42-.31-.75-.31-.3 0-.55.1-.76.3-.21.21-.31.49-.31.84Zm6.589 3.02c-.45 0-.84-.11-1.18-.34-.35-.23-.62-.54-.81-.94-.19-.4-.29-.86-.29-1.37 0-.51.1-.97.29-1.37.19-.4.46-.71.81-.94.34-.23.73-.34 1.18-.34.35 0 .66.07.93.22s.49.35.67.6v-.67h1.22v4.97c0 .77-.22 1.36-.65 1.78-.44.41-1.04.62-1.8.62-.65 0-1.2-.15-1.64-.45-.44-.3-.71-.68-.82-1.15h1.32c.09.15.22.27.41.36.19.09.42.14.7.14.39 0 .69-.1.9-.29.21-.19.32-.5.32-.91v-.69c-.18.24-.4.43-.66.56-.27.14-.57.21-.9.21Zm.3-1.13c.39 0 .7-.14.95-.43.25-.28.37-.65.37-1.1 0-.45-.12-.82-.37-1.1-.25-.28-.56-.42-.95-.42-.37 0-.68.14-.92.42-.25.28-.37.65-.37 1.1 0 .45.12.82.37 1.1.24.29.55.43.92.43Zm8.698 1.31c-.81 0-1.47-.19-1.98-.56-.51-.37-.85-.89-1-1.56h1.36c.09.28.27.5.56.67.28.17.63.26 1.04.26.39 0 .72-.08.98-.23.25-.15.38-.36.38-.65 0-.17-.04-.31-.11-.44-.07-.12-.21-.23-.41-.32-.2-.09-.49-.16-.87-.22l-.78-.13c-.65-.11-1.13-.31-1.45-.62-.33-.31-.49-.75-.49-1.32 0-.44.12-.82.36-1.15.23-.32.55-.57.96-.75.4-.17.85-.26 1.35-.26.73 0 1.34.17 1.83.51.49.35.8.85.91 1.51h-1.36a.964.964 0 0 0-.46-.63c-.24-.13-.54-.2-.91-.2-.41 0-.73.07-.96.22-.23.15-.35.36-.35.63 0 .24.09.43.27.56.17.13.52.24 1.05.33l.75.12c1.37.22 2.05.9 2.05 2.03 0 .47-.12.86-.35 1.19-.23.33-.55.58-.96.75-.41.18-.88.26-1.41.26Zm6.077-.01c-.51 0-.95-.12-1.34-.35-.39-.23-.7-.56-.92-.97-.22-.41-.33-.88-.33-1.42 0-.54.11-1.02.33-1.43.22-.41.53-.73.92-.96.39-.23.83-.34 1.34-.34.51 0 .96.11 1.35.34.39.23.69.55.91.96.22.41.33.89.33 1.43 0 .54-.11 1.01-.33 1.42-.22.41-.52.74-.91.97-.39.23-.84.35-1.35.35Zm0-1.13c.39 0 .7-.15.94-.44.24-.29.36-.68.36-1.17 0-.49-.12-.88-.36-1.17-.24-.29-.55-.43-.94-.43-.39 0-.7.14-.94.43s-.36.68-.36 1.17c0 .49.12.88.36 1.17.24.29.55.44.94.44Zm5.899 1.13c-.51 0-.95-.12-1.34-.35-.39-.23-.7-.56-.92-.97-.22-.41-.33-.88-.33-1.42 0-.54.11-1.02.33-1.43.22-.41.53-.73.92-.96.39-.23.83-.34 1.34-.34.51 0 .96.11 1.35.34.39.23.69.55.91.96.22.41.33.89.33 1.43 0 .54-.11 1.01-.33 1.42-.22.41-.52.74-.91.97-.39.23-.84.35-1.35.35Zm0-1.13c.39 0 .7-.15.94-.44.24-.29.36-.68.36-1.17 0-.49-.12-.88-.36-1.17-.24-.29-.55-.43-.94-.43-.39 0-.7.14-.94.43s-.36.68-.36 1.17c0 .49.12.88.36 1.17.24.29.55.44.94.44Zm4.878-2.06V12h-1.27V6.83h1.22v.61c.37-.51.89-.76 1.56-.76.56 0 1 .19 1.33.58.33.39.49.9.49 1.53V12h-1.27V8.98c0-.35-.08-.64-.24-.85-.17-.21-.42-.31-.75-.31-.3 0-.55.1-.76.3-.21.21-.31.49-.31.84Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/presets-labels/NewSeason.svg b/packages/design-system/src/assets/icons/presets-labels/NewSeason.svg
new file mode 100644
index 0000000..146950c
--- /dev/null
+++ b/packages/design-system/src/assets/icons/presets-labels/NewSeason.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="70" height="17" fill="none" viewBox="0 0 70 17">
+  <path fill="#F50723" d="M0 2a2 2 0 0 1 2-2h66a2 2 0 0 1 2 2v15H0V2Z"/>
+  <path fill="#fff" d="M6.79 12V5.04h1.32l3.45 4.88V5.04h1.32V12h-1.32L8.11 7.12V12H6.79Zm9.806.15c-.53 0-.99-.11-1.37-.34a2.21 2.21 0 0 1-.89-.95c-.21-.41-.31-.9-.31-1.47 0-.51.1-.98.31-1.39.2-.41.49-.73.87-.97.38-.23.83-.35 1.36-.35.76 0 1.34.24 1.75.73.41.49.61 1.14.61 1.95v.46h-3.62c.11.86.54 1.29 1.3 1.29.25 0 .45-.04.62-.12.16-.08.27-.18.33-.31h1.28c-.13.45-.39.81-.78 1.07-.4.27-.89.4-1.46.4Zm-.04-4.43c-.35 0-.63.1-.84.3-.21.21-.35.5-.41.88h2.38c-.01-.35-.11-.64-.3-.86-.19-.21-.47-.32-.83-.32ZM21.09 12l-1.65-5.17h1.31l.96 3.35.93-3.34h1.14l.97 3.35.96-3.36h1.27L25.33 12h-1.11L23.2 8.5l-1 3.5h-1.11Zm11.54.16c-.81 0-1.47-.19-1.98-.56-.51-.37-.85-.89-1-1.56h1.36c.09.28.27.5.56.67.28.17.63.26 1.04.26.39 0 .72-.08.98-.23.25-.15.38-.36.38-.65 0-.17-.04-.31-.11-.44-.07-.12-.21-.23-.41-.32-.2-.09-.49-.16-.87-.22l-.78-.13c-.65-.11-1.13-.31-1.45-.62-.33-.31-.49-.75-.49-1.32 0-.44.12-.82.36-1.15.23-.32.55-.57.96-.75.4-.17.85-.26 1.35-.26.73 0 1.34.17 1.83.51.49.35.8.85.91 1.51h-1.36a.964.964 0 0 0-.46-.63c-.24-.13-.54-.2-.91-.2-.41 0-.73.07-.96.22-.23.15-.35.36-.35.63 0 .24.09.43.27.56.17.13.52.24 1.05.33l.75.12c1.37.22 2.05.9 2.05 2.03 0 .47-.12.86-.35 1.19-.23.33-.55.58-.96.75-.41.18-.88.26-1.41.26Zm6.056-.01c-.53 0-.99-.11-1.37-.34a2.21 2.21 0 0 1-.89-.95c-.21-.41-.31-.9-.31-1.47 0-.51.1-.98.31-1.39.2-.41.49-.73.87-.97.38-.23.83-.35 1.36-.35.76 0 1.34.24 1.75.73.41.49.61 1.14.61 1.95v.46h-3.62c.11.86.54 1.29 1.3 1.29.25 0 .45-.04.62-.12.16-.08.27-.18.33-.31h1.28c-.13.45-.39.81-.78 1.07-.4.27-.89.4-1.46.4Zm-.04-4.43c-.35 0-.63.1-.84.3-.21.21-.35.5-.41.88h2.38c-.01-.35-.11-.64-.3-.86-.19-.21-.47-.32-.83-.32Zm4.854 4.43c-.54 0-.97-.15-1.29-.45-.33-.29-.49-.69-.49-1.18 0-.53.19-.95.58-1.25.39-.3.93-.45 1.62-.45h1.05v-.19c0-.32-.09-.55-.26-.7-.17-.14-.41-.21-.7-.21-.25 0-.46.05-.62.15-.16.1-.26.22-.3.35h-1.22c.09-.44.32-.81.7-1.1.38-.29.87-.44 1.48-.44.67 0 1.2.17 1.59.5.39.34.58.87.58 1.58V12h-1.17v-.64c-.17.27-.39.47-.67.6-.29.13-.58.19-.88.19Zm.32-1.02c.18 0 .36-.04.54-.12.17-.08.32-.2.44-.36.11-.15.17-.35.17-.59v-.33h-.99c-.33 0-.58.06-.75.18-.18.13-.27.3-.27.53 0 .23.08.4.24.51.16.12.37.18.62.18Zm5.62 1.02c-.64 0-1.16-.15-1.56-.45-.41-.29-.64-.68-.71-1.16h1.22c.03.15.14.29.33.4.19.11.42.17.69.17.27 0 .48-.05.64-.16a.477.477 0 0 0 .05-.78c-.12-.1-.33-.17-.63-.21l-.75-.1c-.49-.07-.86-.23-1.1-.49-.24-.25-.36-.59-.36-1 0-.34.09-.64.27-.89.18-.25.43-.45.74-.59.31-.14.67-.21 1.06-.21.41 0 .76.07 1.06.21.3.14.54.33.72.56.18.24.29.5.34.78h-1.21a.664.664 0 0 0-.3-.38c-.16-.09-.36-.13-.59-.13-.25 0-.46.05-.61.16-.15.11-.23.25-.23.42 0 .15.06.26.18.33.12.08.32.14.6.18l.74.1c.5.07.88.25 1.13.54.25.29.38.63.38 1.04 0 .34-.09.63-.27.88-.19.25-.44.44-.75.57-.32.14-.68.21-1.08.21Zm5.38 0c-.51 0-.95-.12-1.34-.35-.39-.23-.7-.56-.92-.97-.22-.41-.33-.88-.33-1.42 0-.54.11-1.02.33-1.43.22-.41.53-.73.92-.96.39-.23.83-.34 1.34-.34.51 0 .96.11 1.35.34.39.23.69.55.91.96.22.41.33.89.33 1.43 0 .54-.11 1.01-.33 1.42-.22.41-.52.74-.91.97-.39.23-.84.35-1.35.35Zm0-1.13c.39 0 .7-.15.94-.44.24-.29.36-.68.36-1.17 0-.49-.12-.88-.36-1.17-.24-.29-.55-.43-.94-.43-.39 0-.7.14-.94.43s-.36.68-.36 1.17c0 .49.12.88.36 1.17.24.29.55.44.94.44Zm4.878-2.06V12h-1.27V6.83h1.22v.61c.37-.51.89-.76 1.56-.76.56 0 1 .19 1.33.58.33.39.49.9.49 1.53V12h-1.27V8.98c0-.35-.08-.64-.24-.85-.17-.21-.42-.31-.75-.31-.3 0-.55.1-.76.3-.21.21-.31.49-.31.84Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/presets-labels/RecentlyAdded.svg b/packages/design-system/src/assets/icons/presets-labels/RecentlyAdded.svg
new file mode 100644
index 0000000..b324309
--- /dev/null
+++ b/packages/design-system/src/assets/icons/presets-labels/RecentlyAdded.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="85" height="17" fill="none" viewBox="0 0 85 17">
+  <path fill="#F50723" d="M0 2a2 2 0 0 1 2-2h81a2 2 0 0 1 2 2v15H0V2Z"/>
+  <path fill="#fff" d="M6.79 12V5.04h2.84c.85 0 1.52.2 2 .61.47.41.71.96.71 1.65 0 .5-.13.93-.38 1.28-.26.35-.6.62-1.03.79L12.65 12h-1.58L9.54 9.59H8.15V12H6.79Zm1.36-3.59h1.3c.52 0 .9-.1 1.15-.29.24-.19.36-.46.36-.83 0-.37-.12-.64-.36-.81-.25-.17-.63-.26-1.15-.26h-1.3v2.19Zm7.43 3.74c-.53 0-.99-.11-1.37-.34a2.21 2.21 0 0 1-.89-.95c-.21-.41-.31-.9-.31-1.47 0-.51.1-.98.31-1.39.2-.41.49-.73.87-.97.38-.23.83-.35 1.36-.35.76 0 1.34.24 1.75.73.41.49.61 1.14.61 1.95v.46h-3.62c.11.86.54 1.29 1.3 1.29.25 0 .45-.04.62-.12.16-.08.27-.18.33-.31h1.28c-.13.45-.39.81-.78 1.07-.4.27-.89.4-1.46.4Zm-.04-4.43c-.35 0-.63.1-.84.3-.21.21-.35.5-.41.88h2.38c-.01-.35-.11-.64-.3-.86-.19-.21-.47-.32-.83-.32Zm5.665 4.43c-.51 0-.96-.12-1.34-.35-.39-.23-.68-.56-.89-.97-.21-.41-.32-.88-.32-1.42 0-.53.11-1 .32-1.41.21-.41.5-.74.89-.97.38-.23.83-.35 1.34-.35.43 0 .8.08 1.12.25.31.17.57.39.76.67.19.28.31.59.36.94h-1.3a.96.96 0 0 0-.29-.53c-.16-.13-.38-.2-.67-.2-.37 0-.66.14-.89.43-.23.29-.34.68-.34 1.17 0 .49.11.88.34 1.17.23.29.52.44.89.44.29 0 .51-.06.68-.19.16-.13.26-.3.3-.51h1.28c-.05.35-.17.66-.36.93-.19.27-.45.49-.76.65-.32.17-.69.25-1.12.25Zm5.489 0c-.53 0-.99-.11-1.37-.34a2.21 2.21 0 0 1-.89-.95c-.21-.41-.31-.9-.31-1.47 0-.51.1-.98.31-1.39.2-.41.49-.73.87-.97.38-.23.83-.35 1.36-.35.76 0 1.34.24 1.75.73.41.49.61 1.14.61 1.95v.46h-3.62c.11.86.54 1.29 1.3 1.29.25 0 .45-.04.62-.12.16-.08.27-.18.33-.31h1.28c-.13.45-.39.81-.78 1.07-.4.27-.89.4-1.46.4Zm-.04-4.43c-.35 0-.63.1-.84.3-.21.21-.35.5-.41.88h2.38c-.01-.35-.11-.64-.3-.86-.19-.21-.47-.32-.83-.32Zm4.684 1.24V12h-1.27V6.83h1.22v.61c.37-.51.89-.76 1.56-.76.56 0 1 .19 1.33.58.33.39.49.9.49 1.53V12h-1.27V8.98c0-.35-.08-.64-.24-.85-.17-.21-.42-.31-.75-.31-.3 0-.55.1-.76.3-.21.21-.31.49-.31.84Zm6.59 3.08c-.52 0-.92-.14-1.2-.43-.29-.28-.43-.69-.43-1.24V7.93h-.84v-1.1h.84V5.26c.44-.02.86-.09 1.27-.21v1.78h1.02v1.1h-1.02v2.3c0 .23.06.41.17.53.11.12.27.18.48.18h.37v1.1h-.66ZM39.59 12V4.75h1.27V12h-1.27Zm3.198 2.05.85-2.05-2.03-5.17h1.45l1.28 3.69 1.26-3.69h1.37l-2.82 7.22h-1.36ZM54.8 12l-.58-1.58h-2.81L50.84 12h-1.39l2.69-6.96h1.41L56.24 12H54.8Zm-2.96-2.76h1.96l-.98-2.69-.98 2.69Zm7.19 2.91c-.45 0-.84-.12-1.18-.35-.35-.23-.62-.56-.81-.97-.2-.41-.3-.88-.3-1.42 0-.54.1-1.02.3-1.43.19-.41.46-.73.81-.96.34-.23.73-.34 1.18-.34.33 0 .63.07.89.2.26.14.48.33.66.58V4.75h1.26V12h-1.22v-.68c-.17.26-.39.46-.66.61-.27.15-.58.22-.93.22Zm.3-1.13c.39 0 .7-.15.95-.44.24-.29.36-.68.36-1.17 0-.49-.12-.88-.36-1.17-.25-.29-.56-.43-.95-.43-.38 0-.69.14-.93.43-.25.29-.37.68-.37 1.17 0 .49.12.88.37 1.17.24.29.55.44.93.44Zm5.823 1.13c-.45 0-.84-.12-1.18-.35-.35-.23-.62-.56-.81-.97-.2-.41-.3-.88-.3-1.42 0-.54.1-1.02.3-1.43.19-.41.46-.73.81-.96.34-.23.73-.34 1.18-.34.33 0 .63.07.89.2.26.14.48.33.66.58V4.75h1.26V12h-1.22v-.68c-.17.26-.39.46-.66.61-.27.15-.58.22-.93.22Zm.3-1.13c.39 0 .7-.15.95-.44.24-.29.36-.68.36-1.17 0-.49-.12-.88-.36-1.17-.25-.29-.56-.43-.95-.43-.38 0-.69.14-.93.43-.25.29-.37.68-.37 1.17 0 .49.12.88.37 1.17.24.29.55.44.93.44Zm6.103 1.13c-.53 0-.99-.11-1.37-.34a2.21 2.21 0 0 1-.89-.95c-.21-.41-.31-.9-.31-1.47 0-.51.1-.98.31-1.39.2-.41.49-.73.87-.97.38-.23.83-.35 1.36-.35.76 0 1.34.24 1.75.73.41.49.61 1.14.61 1.95v.46h-3.62c.11.86.54 1.29 1.3 1.29.25 0 .45-.04.62-.12.16-.08.27-.18.33-.31h1.28c-.13.45-.39.81-.78 1.07-.4.27-.89.4-1.46.4Zm-.04-4.43c-.35 0-.63.1-.84.3-.21.21-.35.5-.41.88h2.38c-.01-.35-.11-.64-.3-.86-.19-.21-.47-.32-.83-.32Zm5.404 4.43c-.45 0-.84-.12-1.18-.35-.35-.23-.62-.56-.81-.97-.2-.41-.3-.88-.3-1.42 0-.54.1-1.02.3-1.43.19-.41.46-.73.81-.96.34-.23.73-.34 1.18-.34.33 0 .63.07.89.2.26.14.48.33.66.58V4.75h1.26V12h-1.22v-.68c-.17.26-.39.46-.66.61-.27.15-.58.22-.93.22Zm.3-1.13c.39 0 .7-.15.95-.44.24-.29.36-.68.36-1.17 0-.49-.12-.88-.36-1.17-.25-.29-.56-.43-.95-.43-.38 0-.69.14-.93.43-.25.29-.37.68-.37 1.17 0 .49.12.88.37 1.17.24.29.55.44.93.44Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/presets-labels/Top10.svg b/packages/design-system/src/assets/icons/presets-labels/Top10.svg
new file mode 100644
index 0000000..7b79160
--- /dev/null
+++ b/packages/design-system/src/assets/icons/presets-labels/Top10.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="29" fill="none" viewBox="0 0 20 29">
+  <g clip-path="url(#a)">
+    <path fill="#F50723" d="M0 0h20v29L0 25V0Z"/>
+    <path fill="#fff" d="M5.434 10H4.13V5.56H2.362V4.432h4.84V5.56H5.434V10Zm4.503.128c-.416 0-.8-.072-1.144-.216a2.54 2.54 0 0 1-.904-.608 2.672 2.672 0 0 1-.592-.928 3.026 3.026 0 0 1-.216-1.16c0-.424.072-.808.216-1.168.136-.352.336-.656.592-.92a2.54 2.54 0 0 1 .904-.608 2.944 2.944 0 0 1 1.144-.216c.424 0 .808.072 1.16.216.344.144.648.344.904.608s.456.568.6.92c.136.36.208.744.208 1.168 0 .424-.072.808-.208 1.16-.144.36-.344.664-.6.928s-.56.464-.904.608a3.026 3.026 0 0 1-1.16.216Zm0-1.152c.304 0 .576-.072.808-.224.232-.144.408-.352.544-.616.136-.264.2-.568.2-.92 0-.352-.064-.664-.2-.928a1.568 1.568 0 0 0-.544-.616 1.507 1.507 0 0 0-.808-.216c-.296 0-.56.072-.792.216a1.508 1.508 0 0 0-.544.616c-.136.264-.2.576-.2.928 0 .352.064.656.2.92a1.46 1.46 0 0 0 1.336.84ZM13.174 10V4.432h2.304c.456 0 .856.08 1.184.24.328.16.584.384.76.672.176.288.264.624.264 1.008s-.088.72-.264 1.008c-.176.296-.432.52-.76.68-.328.16-.728.24-1.184.24h-1V10h-1.304Zm1.304-2.824h.808c.376 0 .648-.072.824-.216.168-.136.256-.344.256-.608s-.088-.464-.256-.608c-.176-.136-.448-.208-.824-.208h-.808v1.64ZM5.563 20v-6.929l-2.067.572v-1.781l4.121-1.079V20H5.563Zm7.415.195c-.741 0-1.391-.195-1.95-.585-.559-.377-1.001-.923-1.3-1.638-.299-.702-.455-1.534-.455-2.496 0-.949.156-1.781.455-2.496.299-.715.741-1.261 1.3-1.651.559-.377 1.209-.572 1.95-.572.741 0 1.404.195 1.963.572.559.39.988.936 1.287 1.651.299.715.455 1.547.455 2.496 0 .962-.156 1.794-.455 2.496-.299.715-.728 1.261-1.287 1.638-.559.39-1.222.585-1.963.585Zm0-1.82c.507 0 .897-.26 1.183-.767.286-.507.429-1.209.429-2.132s-.143-1.638-.429-2.145c-.286-.507-.676-.754-1.183-.754s-.897.247-1.183.754c-.286.507-.429 1.222-.429 2.145s.143 1.625.429 2.132c.286.507.676.767 1.183.767Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path fill="#fff" d="M0 0h18a2 2 0 0 1 2 2v27H0V0Z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/packages/design-system/src/assets/icons/presets-labels/Top10Number.svg b/packages/design-system/src/assets/icons/presets-labels/Top10Number.svg
new file mode 100644
index 0000000..6af140d
--- /dev/null
+++ b/packages/design-system/src/assets/icons/presets-labels/Top10Number.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="245" height="30" fill="none" viewBox="0 0 245 30">
+  <rect width="27.809" height="27.809" y="1.096" fill="#F50723" rx="3.476"/>
+  <path fill="#fff" d="M7.727 13.703H6.168V8.398H4.056V7.05h5.783v1.348H7.727v5.305Zm5.543.153a3.52 3.52 0 0 1-1.367-.258 3.032 3.032 0 0 1-1.08-.727 3.192 3.192 0 0 1-.707-1.109 3.615 3.615 0 0 1-.259-1.386 3.7 3.7 0 0 1 .259-1.395c.162-.421.401-.784.707-1.1a3.04 3.04 0 0 1 1.08-.726 3.52 3.52 0 0 1 1.367-.258c.507 0 .966.086 1.386.258.411.172.774.41 1.08.726.306.316.545.679.717 1.1.163.43.249.889.249 1.395 0 .507-.086.966-.249 1.386-.172.43-.41.794-.717 1.11a3.21 3.21 0 0 1-1.08.726c-.42.172-.88.258-1.386.258Zm0-1.377c.363 0 .688-.086.966-.267a1.81 1.81 0 0 0 .65-.736c.162-.316.239-.68.239-1.1 0-.42-.077-.793-.24-1.109a1.873 1.873 0 0 0-.65-.736 1.8 1.8 0 0 0-.965-.258c-.354 0-.669.086-.946.258-.277.182-.497.42-.65.736-.163.316-.24.689-.24 1.11 0 .42.077.783.24 1.099a1.748 1.748 0 0 0 1.596 1.003Zm4.03 1.224V7.05h2.753c.545 0 1.023.095 1.415.286.392.192.698.46.908.803.21.345.316.746.316 1.205 0 .459-.105.86-.316 1.204-.21.354-.516.622-.908.813-.392.191-.87.287-1.415.287h-1.195v2.055H17.3Zm1.558-3.374h.966c.45 0 .774-.087.985-.259.2-.162.305-.41.305-.726s-.105-.555-.305-.727c-.21-.162-.536-.248-.985-.248h-.966v1.96ZM9.403 23.786v-7.411l-2.21.612v-1.905l4.407-1.154v9.858H9.403Zm8.131.208c-.792 0-1.487-.208-2.085-.625-.598-.404-1.071-.987-1.39-1.752-.32-.751-.487-1.64-.487-2.67 0-1.015.166-1.905.486-2.67.32-.764.793-1.348 1.39-1.765.599-.404 1.294-.612 2.086-.612.793 0 1.502.208 2.1.612.598.417 1.057 1 1.376 1.766.32.764.487 1.654.487 2.67 0 1.028-.167 1.918-.487 2.669-.32.765-.778 1.348-1.376 1.752-.598.417-1.307.625-2.1.625Zm0-1.946c.543 0 .96-.278 1.266-.82.305-.543.459-1.294.459-2.28 0-.988-.154-1.753-.46-2.295-.305-.542-.722-.806-1.265-.806-.542 0-.96.264-1.265.806-.306.542-.459 1.307-.459 2.294 0 .987.153 1.738.459 2.28.306.543.723.82 1.265.82Zm22.121.452.626-3.525h-1.46v-2.023h1.814l.605-3.358h-2.252v-2.023h2.607l.625-3.525h2.17l-.626 3.525h3.045l.626-3.525h2.148l-.626 3.525h1.46v2.023h-1.815l-.604 3.358h2.252v2.023h-2.607l-.626 3.525h-2.169l.626-3.525h-3.045l-.626 3.525h-2.148Zm3.15-5.548h3.044l.584-3.358h-3.045l-.584 3.358Zm8.831 5.548v-2.232l5.715-5.047c.73-.646 1.252-1.189 1.523-1.606.27-.417.396-.876.396-1.397 0-.584-.209-1.085-.647-1.481-.438-.396-1.022-.605-1.772-.605-.73 0-1.314.188-1.752.542-.46.355-.751.835-.855 1.398h-2.69c.124-.855.416-1.627.896-2.294a4.989 4.989 0 0 1 1.856-1.544c.772-.375 1.627-.563 2.607-.563 1.001 0 1.898.188 2.67.563.772.396 1.397.918 1.835 1.585.438.688.647 1.46.647 2.357 0 .939-.25 1.773-.751 2.482-.522.73-1.23 1.48-2.148 2.252l-3.692 3.17h6.737v2.42H51.636Zm18.255-12.034c-.438 0-.835-.167-1.148-.48a1.548 1.548 0 0 1-.5-1.168c0-.459.167-.855.5-1.168.313-.313.71-.48 1.148-.48.438 0 .834.167 1.167.48.313.313.48.71.48 1.168 0 .459-.167.855-.48 1.168-.333.313-.73.48-1.167.48ZM68.556 22.5V11.717h2.648V22.5h-2.648Zm7.632-6.34v6.34h-2.649V11.717h2.544v1.272c.772-1.063 1.857-1.585 3.254-1.585 1.168 0 2.086.397 2.774 1.21.688.813 1.022 1.877 1.022 3.191V22.5h-2.649v-6.299c0-.73-.167-1.335-.5-1.773-.355-.437-.876-.646-1.565-.646-.625 0-1.147.209-1.585.626-.438.438-.646 1.022-.646 1.752Zm20.519 6.34H93.87V10.466h-4.839V7.984h12.514v2.482h-4.838V22.5ZM116.27 7.984 110.701 22.5h-2.961l-5.569-14.516h3.087l4.025 11.095 4.004-11.095h2.983Zm10.929 14.85c-1.689 0-3.066-.397-4.13-1.168-1.063-.772-1.772-1.857-2.085-3.254h2.836c.188.584.563 1.043 1.168 1.398.584.354 1.314.542 2.169.542.814 0 1.502-.167 2.044-.48.522-.313.793-.75.793-1.356a1.87 1.87 0 0 0-.23-.917c-.146-.25-.438-.48-.855-.668-.417-.187-1.022-.333-1.814-.459l-1.627-.27c-1.356-.23-2.357-.647-3.024-1.294-.688-.646-1.022-1.564-1.022-2.753 0-.917.25-1.71.751-2.398.479-.668 1.147-1.19 2.002-1.565.834-.354 1.773-.542 2.816-.542 1.522 0 2.794.355 3.816 1.064 1.022.73 1.669 1.773 1.898 3.15h-2.836c-.146-.585-.459-1.023-.96-1.315-.5-.27-1.126-.417-1.898-.417-.855 0-1.522.146-2.002.459-.48.313-.73.75-.73 1.314 0 .5.188.897.563 1.168.355.271 1.085.5 2.19.688l1.564.25c2.858.46 4.276 1.878 4.276 4.234 0 .98-.25 1.794-.73 2.482-.48.689-1.147 1.21-2.002 1.564-.855.376-1.836.543-2.941.543Zm7.463-.334V7.38h2.649v5.526c.772-1.001 1.835-1.502 3.149-1.502 1.168 0 2.086.397 2.774 1.21.689.813 1.022 1.877 1.022 3.191V22.5h-2.648v-6.299c0-.73-.167-1.335-.501-1.773-.355-.437-.876-.646-1.564-.646-.626 0-1.147.209-1.585.626-.438.438-.647 1.022-.647 1.752v6.34h-2.649Zm16.603.313c-1.063 0-1.981-.25-2.795-.73a5.125 5.125 0 0 1-1.918-2.023c-.459-.855-.689-1.836-.689-2.962 0-1.126.23-2.127.689-2.982a5.069 5.069 0 0 1 1.918-2.002c.814-.48 1.732-.71 2.795-.71 1.064 0 2.002.23 2.816.71.813.48 1.439 1.147 1.898 2.002.459.855.688 1.856.688 2.982 0 1.126-.229 2.107-.688 2.962-.459.855-1.085 1.543-1.898 2.023-.814.48-1.752.73-2.816.73Zm0-2.357c.814 0 1.46-.313 1.961-.918.5-.605.751-1.418.751-2.44s-.251-1.835-.751-2.44c-.501-.605-1.147-.897-1.961-.897-.813 0-1.46.292-1.96.897-.501.605-.751 1.418-.751 2.44s.25 1.835.751 2.44c.5.605 1.147.918 1.96.918Zm9.224 2.044-3.441-10.783h2.732l2.002 6.987 1.94-6.966h2.377l2.023 6.987 2.003-7.008h2.648L169.332 22.5h-2.315l-2.127-7.3-2.086 7.3h-2.315Zm17.346.313c-1.335 0-2.42-.313-3.254-.939-.855-.604-1.335-1.418-1.481-2.419h2.545c.062.313.292.605.688.834.396.23.876.355 1.439.355.563 0 1.001-.104 1.335-.334.313-.208.48-.5.48-.855 0-.313-.125-.563-.376-.772-.25-.208-.688-.354-1.314-.438l-1.564-.208c-1.022-.146-1.794-.48-2.294-1.022-.501-.522-.751-1.23-.751-2.086 0-.709.188-1.335.563-1.856a3.79 3.79 0 0 1 1.543-1.23c.647-.293 1.398-.439 2.211-.439.855 0 1.585.146 2.211.438a4.053 4.053 0 0 1 1.502 1.168c.375.5.605 1.043.709 1.627h-2.524a1.386 1.386 0 0 0-.625-.792c-.334-.188-.751-.272-1.231-.272-.521 0-.959.105-1.272.334-.313.23-.48.521-.48.876 0 .313.125.542.375.688.251.167.668.292 1.252.376l1.543.208c1.043.146 1.836.522 2.357 1.127.521.604.793 1.314.793 2.169 0 .709-.188 1.314-.564 1.835a3.728 3.728 0 0 1-1.564 1.189c-.667.292-1.418.438-2.252.438Zm17.349-.313h-2.836V10.466h-4.839V7.984h12.514v2.482h-4.839V22.5Zm9.451.313c-1.063 0-1.981-.25-2.795-.73a5.125 5.125 0 0 1-1.918-2.023c-.459-.855-.689-1.836-.689-2.962 0-1.126.23-2.127.689-2.982a5.069 5.069 0 0 1 1.918-2.002c.814-.48 1.732-.71 2.795-.71 1.064 0 2.002.23 2.816.71.813.48 1.439 1.147 1.898 2.002.459.855.688 1.856.688 2.982 0 1.126-.229 2.107-.688 2.962-.459.855-1.085 1.543-1.898 2.023-.814.48-1.752.73-2.816.73Zm0-2.357c.814 0 1.46-.313 1.961-.918.5-.605.751-1.418.751-2.44s-.251-1.835-.751-2.44c-.501-.605-1.147-.897-1.961-.897-.813 0-1.46.292-1.96.897-.501.605-.751 1.418-.751 2.44s.25 1.835.751 2.44c.5.605 1.147.918 1.96.918Zm11.242 2.357c-.938 0-1.752-.25-2.461-.73-.73-.48-1.293-1.168-1.689-2.023-.417-.855-.626-1.836-.626-2.962 0-1.126.209-2.127.626-2.982.396-.855.959-1.523 1.689-2.002.709-.48 1.523-.71 2.461-.71a4.12 4.12 0 0 1 1.856.418 4.016 4.016 0 0 1 1.377 1.21V7.378h2.628V22.5h-2.545v-1.418a3.83 3.83 0 0 1-1.376 1.272c-.563.313-1.21.459-1.94.459Zm.626-2.357c.813 0 1.46-.313 1.981-.918.501-.605.751-1.418.751-2.44s-.25-1.835-.751-2.44c-.521-.605-1.168-.897-1.981-.897-.793 0-1.439.292-1.94.897-.521.605-.772 1.418-.772 2.44s.251 1.835.772 2.44c.501.605 1.147.918 1.94.918Zm10.563 2.357c-1.126 0-2.023-.313-2.69-.939-.689-.604-1.022-1.439-1.022-2.46 0-1.106.396-1.982 1.209-2.608.814-.626 1.94-.938 3.379-.938h2.19v-.397c0-.667-.188-1.147-.542-1.46-.355-.292-.855-.438-1.46-.438-.522 0-.96.105-1.293.313-.334.209-.543.46-.626.73h-2.545c.188-.917.668-1.69 1.46-2.294.793-.605 1.815-.918 3.087-.918 1.397 0 2.503.355 3.316 1.043.814.71 1.21 1.815 1.21 3.296V22.5h-2.44v-1.335c-.355.563-.814.98-1.398 1.252a4.406 4.406 0 0 1-1.835.396Zm.667-2.127a2.77 2.77 0 0 0 1.127-.25c.354-.168.667-.418.917-.752.23-.313.355-.73.355-1.23v-.688h-2.065c-.688 0-1.21.125-1.564.375-.376.271-.563.626-.563 1.105 0 .48.167.835.5 1.064.334.25.772.376 1.293.376Zm8.044 6.09 1.773-4.276-4.234-10.783h3.024l2.669 7.696 2.628-7.696h2.858l-5.882 15.059h-2.836Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayer10secBackDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secBackDefault.svg
new file mode 100644
index 0000000..aa3b865
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secBackDefault.svg
@@ -0,0 +1,5 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.0644 35.8091V26.152L17.2505 27.0331V25.0118L22.3018 23.5607V35.8091H20.0644Z" fill="white"/>
+<path d="M30.8162 36.0682C29.867 36.0682 29.0364 35.8148 28.3245 35.3081C27.6126 34.7898 27.0588 34.0642 26.6633 33.1314C26.2791 32.187 26.087 31.0756 26.087 29.7972C26.087 28.5303 26.2791 27.4246 26.6633 26.4802C27.0588 25.5358 27.6126 24.8103 28.3245 24.3035C29.0364 23.7852 29.867 23.5261 30.8162 23.5261C31.7655 23.5261 32.596 23.7852 33.308 24.3035C34.0199 24.8103 34.568 25.5358 34.9522 26.4802C35.3477 27.4246 35.5455 28.5303 35.5455 29.7972C35.5455 31.0756 35.3477 32.187 34.9522 33.1314C34.568 34.0642 34.0199 34.7898 33.308 35.3081C32.596 35.8148 31.7655 36.0682 30.8162 36.0682ZM30.8162 34.0297C31.5621 34.0297 32.1553 33.6554 32.596 32.9068C33.0481 32.1582 33.2741 31.1216 33.2741 29.7972C33.2741 28.4727 33.0481 27.4362 32.596 26.6876C32.1553 25.9389 31.5621 25.5646 30.8162 25.5646C30.0704 25.5646 29.4715 25.9389 29.0195 26.6876C28.5787 27.4362 28.3584 28.4727 28.3584 29.7972C28.3584 31.1216 28.5787 32.1582 29.0195 32.9068C29.4715 33.6554 30.0704 34.0297 30.8162 34.0297Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.3671 4.7734L27.5689 9.11171C29.1468 9.37378 30.824 9.78842 32.4417 10.3366C34.9692 11.1932 37.4714 12.4161 39.2291 13.996C42.5924 17.0191 44.8612 21.1065 45.6711 25.6018C46.481 30.0971 45.7851 34.7394 43.695 38.7831C41.605 42.8268 38.2422 46.0373 34.1466 47.899C30.051 49.7607 25.4604 50.1655 21.1119 49.0485C16.7635 47.9315 12.9095 45.3574 10.169 41.7397C7.42854 38.1219 5.96054 33.6705 6.0008 29.1002C6.00728 28.3647 6.59758 27.7738 7.31926 27.7804C8.04095 27.787 8.62074 28.3886 8.61426 29.1241C8.57926 33.0972 9.85542 36.9669 12.2378 40.1119C14.6201 43.2569 17.9705 45.4946 21.7507 46.4656C25.5309 47.4367 29.5217 47.0848 33.082 45.4663C36.6424 43.8479 39.5658 41.057 41.3827 37.5417C43.1996 34.0264 43.8046 29.9908 43.1005 26.0829C42.3964 22.175 40.4241 18.6218 37.5003 15.9937C36.1145 14.748 33.9833 13.6661 31.617 12.8642C30.4727 12.4764 29.3015 12.1636 28.1741 11.9316L31.3657 15.6642L29.3954 17.4142L23.9278 11.0199C23.4952 10.514 23.4996 9.75898 23.938 9.25822L29.417 3L31.3671 4.7734ZM23.7531 4.67737L19.4657 10.11L23.7596 15.1221L21.7909 16.874L16.7766 11.021C16.3599 10.5346 16.3456 9.81353 16.7427 9.31033L21.7165 3.00794L23.7531 4.67737Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayer10secBackHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secBackHover.svg
new file mode 100644
index 0000000..b3d7a1d
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secBackHover.svg
@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.7815 49.5818V36.2104L23.8854 37.4304V34.6317L30.8795 32.6224V49.5818H27.7815Z" fill="white"/>
+<path d="M42.6687 49.9406C41.3544 49.9406 40.2043 49.5897 39.2186 48.8881C38.2328 48.1705 37.4662 47.1658 36.9185 45.8742C36.3865 44.5665 36.1205 43.0277 36.1205 41.2576C36.1205 39.5034 36.3865 37.9725 36.9185 36.6649C37.4662 35.3573 38.2328 34.3526 39.2186 33.651C40.2043 32.9334 41.3544 32.5746 42.6687 32.5746C43.983 32.5746 45.1331 32.9334 46.1188 33.651C47.1045 34.3526 47.8634 35.3573 48.3954 36.6649C48.943 37.9725 49.2169 39.5034 49.2169 41.2576C49.2169 43.0277 48.943 44.5665 48.3954 45.8742C47.8634 47.1658 47.1045 48.1705 46.1188 48.8881C45.1331 49.5897 43.983 49.9406 42.6687 49.9406ZM42.6687 47.118C43.7014 47.118 44.5228 46.5997 45.1331 45.5632C45.7589 44.5267 46.0719 43.0914 46.0719 41.2576C46.0719 39.4237 45.7589 37.9885 45.1331 36.952C44.5228 35.9154 43.7014 35.3972 42.6687 35.3972C41.636 35.3972 40.8067 35.9154 40.1809 36.952C39.5706 37.9885 39.2655 39.4237 39.2655 41.2576C39.2655 43.0914 39.5706 44.5267 40.1809 45.5632C40.8067 46.5997 41.636 47.118 42.6687 47.118Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.4314 6.60929L38.1725 12.6162C40.3571 12.979 42.6794 13.5532 44.9193 14.3122C48.419 15.4982 51.8836 17.1914 54.3173 19.379C58.9741 23.5649 62.1155 29.2244 63.237 35.4486C64.3584 41.6729 63.3948 48.1007 60.5009 53.6997C57.607 59.2986 52.9508 63.744 47.28 66.3217C41.6092 68.8994 35.2529 69.4599 29.232 67.9133C23.211 66.3666 17.8748 62.8025 14.0803 57.7933C10.2857 52.7842 8.25314 46.6206 8.30888 40.2926C8.31785 39.2742 9.13519 38.456 10.1344 38.4651C11.1337 38.4743 11.9365 39.3073 11.9275 40.3257C11.8791 45.8268 13.646 51.1849 16.9447 55.5395C20.2434 59.8941 24.8823 62.9924 30.1164 64.337C35.3506 65.6815 40.8762 65.1942 45.806 62.9534C50.7357 60.7125 54.7835 56.8481 57.2992 51.9808C59.8149 47.1134 60.6526 41.5256 59.6777 36.1147C58.7028 30.7039 55.9719 25.7839 51.9236 22.145C50.0047 20.4202 47.0538 18.9223 43.7775 17.812C42.193 17.275 40.5714 16.8418 39.0104 16.5206L43.4296 21.6888L40.7014 24.1119L33.1309 15.2583C32.5319 14.5578 32.5379 13.5124 33.145 12.819L40.7313 4.15381L43.4314 6.60929ZM32.8889 6.47633L26.9526 13.9984L32.898 20.9383L30.172 23.364L23.2293 15.2598C22.6523 14.5863 22.6325 13.5879 23.1823 12.8912L30.0691 4.1648L32.8889 6.47633Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayer10secForwardDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secForwardDefault.svg
new file mode 100644
index 0000000..528e287
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secForwardDefault.svg
@@ -0,0 +1,5 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2684 35.8091V26.152L16.4545 27.0331V25.0118L21.5058 23.5607V35.8091H19.2684Z" fill="white"/>
+<path d="M30.0202 36.0682C29.071 36.0682 28.2404 35.8148 27.5285 35.3081C26.8166 34.7898 26.2628 34.0642 25.8673 33.1314C25.4831 32.187 25.291 31.0756 25.291 29.7972C25.291 28.5303 25.4831 27.4246 25.8673 26.4802C26.2628 25.5358 26.8166 24.8103 27.5285 24.3035C28.2404 23.7852 29.071 23.5261 30.0202 23.5261C30.9695 23.5261 31.8 23.7852 32.512 24.3035C33.2239 24.8103 33.772 25.5358 34.1562 26.4802C34.5517 27.4246 34.7495 28.5303 34.7495 29.7972C34.7495 31.0756 34.5517 32.187 34.1562 33.1314C33.772 34.0642 33.2239 34.7898 32.512 35.3081C31.8 35.8148 30.9695 36.0682 30.0202 36.0682ZM30.0202 34.0297C30.7661 34.0297 31.3593 33.6554 31.8 32.9068C32.2521 32.1582 32.4781 31.1216 32.4781 29.7972C32.4781 28.4727 32.2521 27.4362 31.8 26.6876C31.3593 25.9389 30.7661 25.5646 30.0202 25.5646C29.2744 25.5646 28.6755 25.9389 28.2235 26.6876C27.7827 27.4362 27.5624 28.4727 27.5624 29.7972C27.5624 31.1216 27.7827 32.1582 28.2235 32.9068C28.6755 33.6554 29.2744 34.0297 30.0202 34.0297Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.6329 4.7734L24.4311 9.11171C22.8532 9.37378 21.176 9.78842 19.5583 10.3366C17.0308 11.1932 14.5286 12.4161 12.7709 13.996C9.40763 17.0191 7.13885 21.1065 6.32892 25.6018C5.51899 30.0971 6.21493 34.7394 8.30495 38.7831C10.395 42.8268 13.7578 46.0373 17.8534 47.899C21.949 49.7607 26.5396 50.1655 30.8881 49.0485C35.2365 47.9315 39.0905 45.3574 41.831 41.7397C44.5715 38.1219 46.0395 33.6705 45.9992 29.1002C45.9927 28.3647 45.4024 27.7738 44.6807 27.7804C43.959 27.787 43.3793 28.3886 43.3857 29.1241C43.4207 33.0972 42.1446 36.9669 39.7622 40.1119C37.3799 43.2568 34.0295 45.4945 30.2493 46.4656C26.4691 47.4367 22.4783 47.0847 18.918 45.4663C15.3576 43.8479 12.4342 41.057 10.6173 37.5417C8.8004 34.0264 8.19541 29.9907 8.8995 26.0829C9.60359 22.175 11.5759 18.6217 14.4997 15.9937C15.8855 14.7479 18.0167 13.6661 20.383 12.8642C21.5273 12.4764 22.6985 12.1636 23.8259 11.9316L20.6343 15.6642L22.6046 17.4142L28.0722 11.0199C28.5048 10.514 28.5004 9.75898 28.062 9.25822L22.583 3L20.6329 4.7734ZM28.2469 4.67737L32.5343 10.11L28.2404 15.1221L30.2091 16.874L35.2234 11.021C35.6401 10.5346 35.6544 9.81352 35.2573 9.31033L30.2835 3.00794L28.2469 4.67737Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayer10secForwardHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secForwardHover.svg
new file mode 100644
index 0000000..af27270
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayer10secForwardHover.svg
@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.6792 49.5818V36.2104L22.7831 37.4304V34.6317L29.7772 32.6224V49.5818H26.6792Z" fill="white"/>
+<path d="M41.5664 49.9406C40.2521 49.9406 39.102 49.5897 38.1163 48.8881C37.1305 48.1705 36.3638 47.1658 35.8162 45.8742C35.2842 44.5665 35.0182 43.0277 35.0182 41.2576C35.0182 39.5034 35.2842 37.9725 35.8162 36.6649C36.3638 35.3573 37.1305 34.3526 38.1163 33.651C39.102 32.9334 40.2521 32.5746 41.5664 32.5746C42.8807 32.5746 44.0308 32.9334 45.0165 33.651C46.0022 34.3526 46.7611 35.3573 47.2931 36.6649C47.8407 37.9725 48.1146 39.5034 48.1146 41.2576C48.1146 43.0277 47.8407 44.5665 47.2931 45.8742C46.7611 47.1658 46.0022 48.1705 45.0165 48.8881C44.0308 49.5897 42.8807 49.9406 41.5664 49.9406ZM41.5664 47.118C42.5991 47.118 43.4205 46.5997 44.0308 45.5632C44.6566 44.5266 44.9696 43.0914 44.9696 41.2576C44.9696 39.4237 44.6566 37.9885 44.0308 36.952C43.4205 35.9154 42.5991 35.3971 41.5664 35.3971C40.5337 35.3971 39.7044 35.9154 39.0786 36.952C38.4683 37.9885 38.1632 39.4237 38.1632 41.2576C38.1632 43.0914 38.4683 44.5266 39.0786 45.5632C39.7044 46.5997 40.5337 47.118 41.5664 47.118Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5686 6.60929L33.8275 12.6162C31.6429 12.979 29.3206 13.5532 27.0807 14.3122C23.581 15.4982 20.1164 17.1914 17.6827 19.379C13.0259 23.5649 9.88448 29.2244 8.76305 35.4486C7.64161 41.6729 8.60521 48.1007 11.4991 53.6996C14.393 59.2986 19.0492 63.7439 24.72 66.3217C30.3908 68.8994 36.7471 69.4599 42.768 67.9133C48.789 66.3666 54.1252 62.8025 57.9197 57.7933C61.7143 52.7842 63.7469 46.6206 63.6911 40.2926C63.6821 39.2742 62.8648 38.456 61.8656 38.4651C60.8663 38.4743 60.0635 39.3073 60.0725 40.3257C60.121 45.8268 58.354 51.1849 55.0553 55.5395C51.7566 59.8941 47.1177 62.9924 41.8836 64.337C36.6494 65.6815 31.1238 65.1942 26.194 62.9534C21.2643 60.7125 17.2165 56.8481 14.7008 51.9808C12.1851 47.1134 11.3474 41.5256 12.3223 36.1147C13.2972 30.7039 16.0281 25.7839 20.0764 22.145C21.9953 20.4202 24.9462 18.9223 28.2225 17.812C29.807 17.275 31.4286 16.8418 32.9896 16.5206L28.5704 21.6888L31.2986 24.1119L38.8691 15.2583C39.4681 14.5578 39.4621 13.5124 38.855 12.819L31.2687 4.15381L28.5686 6.60929ZM39.1111 6.47633L45.0474 13.9984L39.102 20.9383L41.828 23.364L48.7707 15.2598C49.3477 14.5863 49.3675 13.5879 48.8177 12.8912L41.9309 4.1648L39.1111 6.47633Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerFullScreenDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerFullScreenDefault.svg
new file mode 100644
index 0000000..64bdd8d
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerFullScreenDefault.svg
@@ -0,0 +1,6 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.41039 21.3948L5.41107 13.3973C5.41116 12.2928 6.30656 11.3974 7.41107 11.3974L19.9121 11.3974" stroke="white" stroke-width="4"/>
+<path d="M45.5901 30.6933L45.5889 38.6908C45.5887 39.7953 44.6933 40.6906 43.5888 40.6905L31.0877 40.6897" stroke="white" stroke-width="4"/>
+<path d="M5.4099 29.6933L5.41111 37.6908C5.41128 38.7953 6.30674 39.6906 7.41124 39.6905L19.9123 39.6897" stroke="white" stroke-width="4"/>
+<path d="M45.5901 21.3951L45.5889 13.3976C45.5887 12.2931 44.6933 11.3978 43.5888 11.3979L31.0877 11.3987" stroke="white" stroke-width="4"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerFullScreenHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerFullScreenHover.svg
new file mode 100644
index 0000000..5cb32dc
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerFullScreenHover.svg
@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.49121 29.6239L7.49215 18.5503C7.49228 17.021 8.73207 15.7813 10.2614 15.7813L27.5705 15.7813" stroke="white" stroke-width="5.53846"/>
+<path d="M63.1247 42.4985L63.123 53.5721C63.1228 55.1014 61.8829 56.341 60.3536 56.3409L43.0445 56.3398" stroke="white" stroke-width="5.53846"/>
+<path d="M7.49054 41.114L7.49221 52.1876C7.49244 53.7169 8.73231 54.9565 10.2616 54.9564L27.5708 54.9552" stroke="white" stroke-width="5.53846"/>
+<path d="M63.1247 29.6243L63.123 18.5507C63.1228 17.0214 61.8829 15.7818 60.3536 15.7819L43.0445 15.783" stroke="white" stroke-width="5.53846"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerListOfEpisodesDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerListOfEpisodesDefault.svg
new file mode 100644
index 0000000..61cb7bb
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerListOfEpisodesDefault.svg
@@ -0,0 +1,15 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_135_4695)">
+<mask id="path-1-inside-1_135_4695" fill="white">
+<rect x="3.79688" y="24" width="30" height="19" rx="2"/>
+</mask>
+<rect x="3.79688" y="24" width="30" height="19" rx="2" stroke="white" stroke-width="8" mask="url(#path-1-inside-1_135_4695)"/>
+<path d="M11 18.5814L36.8643 18.5231C37.9793 18.5206 38.8811 19.4304 38.8687 20.5453L38.7128 34.5814" stroke="white" stroke-width="4"/>
+<path d="M18.7969 11.1244L44.6612 11.0661C45.7762 11.0636 46.6779 11.9734 46.6656 13.0883L46.5097 27.1244" stroke="white" stroke-width="4"/>
+</g>
+<defs>
+<clipPath id="clip0_135_4695">
+<rect width="52" height="52" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerListOfEpisodesHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerListOfEpisodesHover.svg
new file mode 100644
index 0000000..e43b946
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerListOfEpisodesHover.svg
@@ -0,0 +1,8 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_135_4807" fill="white">
+<rect x="5.25757" y="33.231" width="41.5385" height="26.3077" rx="2.76923"/>
+</mask>
+<rect x="5.25757" y="33.231" width="41.5385" height="26.3077" rx="2.76923" stroke="white" stroke-width="11.0769" mask="url(#path-1-inside-1_135_4807)"/>
+<path d="M15.2312 25.7282L51.0433 25.6476C52.5871 25.6441 53.8357 26.9038 53.8186 28.4476L53.6027 47.8821" stroke="white" stroke-width="5.53846"/>
+<path d="M26.0268 15.403L61.8389 15.3224C63.3828 15.3189 64.6314 16.5786 64.6142 18.1224L64.3984 37.5569" stroke="white" stroke-width="5.53846"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerMuteDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerMuteDefault.svg
new file mode 100644
index 0000000..4211bf8
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerMuteDefault.svg
@@ -0,0 +1,3 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.2305 10.1595C26.9155 10.0232 26.57 9.97293 26.2292 10.0138C25.8884 10.0547 25.5646 10.1853 25.2908 10.3922L16.0193 17.7241H8.93964C8.42522 17.7241 7.93186 17.9284 7.56811 18.2922C7.20435 18.6559 7 19.1493 7 19.6637V31.3015C7 31.816 7.20435 32.3093 7.56811 32.6731C7.93186 33.0368 8.42522 33.2412 8.93964 33.2412H16.0193L25.1938 40.573C25.5351 40.8468 25.9589 40.9972 26.3964 40.9998C26.6861 41.0045 26.9726 40.9379 27.2305 40.8058C27.5605 40.6486 27.8395 40.4013 28.0351 40.0924C28.2307 39.7836 28.335 39.4257 28.3361 39.0601V11.9051C28.335 11.5395 28.2307 11.1817 28.0351 10.8728C27.8395 10.564 27.5605 10.3167 27.2305 10.1595ZM24.4568 35.0257L17.9008 29.7886C17.5595 29.5148 17.1357 29.3644 16.6982 29.3619H10.8793V21.6033H16.6982C17.1357 21.6008 17.5595 21.4504 17.9008 21.1766L24.4568 15.9396V35.0257ZM41.739 25.4826L45.2303 22.0107C45.4112 21.8298 45.5546 21.6151 45.6525 21.3788C45.7504 21.1425 45.8008 20.8893 45.8008 20.6335C45.8008 20.3778 45.7504 20.1245 45.6525 19.8882C45.5546 19.6519 45.4112 19.4372 45.2303 19.2564C45.0495 19.0755 44.8348 18.9321 44.5985 18.8342C44.3622 18.7363 44.109 18.6859 43.8532 18.6859C43.5974 18.6859 43.3442 18.7363 43.1079 18.8342C42.8716 18.9321 42.6569 19.0755 42.4761 19.2564L39.0041 22.7477L35.5321 19.2564C35.1669 18.8911 34.6715 18.6859 34.155 18.6859C33.6385 18.6859 33.1431 18.8911 32.7778 19.2564C32.4126 19.6216 32.2074 20.117 32.2074 20.6335C32.2074 21.1501 32.4126 21.6454 32.7778 22.0107L36.2692 25.4826L32.7778 28.9546C32.596 29.1349 32.4517 29.3494 32.3533 29.5858C32.2548 29.8222 32.2041 30.0757 32.2041 30.3317C32.2041 30.5878 32.2548 30.8413 32.3533 31.0777C32.4517 31.314 32.596 31.5286 32.7778 31.7089C32.9582 31.8907 33.1727 32.035 33.409 32.1334C33.6454 32.2319 33.8989 32.2826 34.155 32.2826C34.411 32.2826 34.6646 32.2319 34.9009 32.1334C35.1373 32.035 35.3518 31.8907 35.5321 31.7089L39.0041 28.2175L42.4761 31.7089C42.6564 31.8907 42.8709 32.035 43.1073 32.1334C43.3436 32.2319 43.5971 32.2826 43.8532 32.2826C44.1093 32.2826 44.3628 32.2319 44.5991 32.1334C44.8355 32.035 45.05 31.8907 45.2303 31.7089C45.4121 31.5286 45.5564 31.314 45.6549 31.0777C45.7534 30.8413 45.8041 30.5878 45.8041 30.3317C45.8041 30.0757 45.7534 29.8222 45.6549 29.5858C45.5564 29.3494 45.4121 29.1349 45.2303 28.9546L41.739 25.4826Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerMuteHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerMuteHover.svg
new file mode 100644
index 0000000..32bdce7
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerMuteHover.svg
@@ -0,0 +1,3 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M37.0619 14.2207C36.6249 14.0317 36.1457 13.962 35.673 14.0187C35.2003 14.0754 34.7512 14.2565 34.3714 14.5436L21.5109 24.7135H11.6907C10.9772 24.7135 10.2928 24.997 9.78826 25.5015C9.2837 26.0061 9.00024 26.6904 9.00024 27.404V43.5468C9.00024 44.2604 9.2837 44.9447 9.78826 45.4493C10.2928 45.9538 10.9772 46.2373 11.6907 46.2373H21.5109L34.2369 56.4073C34.7102 56.7871 35.2981 56.9957 35.905 56.9992C36.3068 57.0058 36.7042 56.9134 37.0619 56.7301C37.5197 56.5121 37.9066 56.1691 38.1779 55.7406C38.4493 55.3122 38.594 54.8158 38.5954 54.3087V16.6421C38.594 16.135 38.4493 15.6386 38.1779 15.2102C37.9066 14.7818 37.5197 14.4388 37.0619 14.2207ZM33.2145 48.7125L24.1207 41.4483C23.6473 41.0685 23.0595 40.8599 22.4526 40.8564H14.3812V30.0945H22.4526C23.0595 30.091 23.6473 29.8824 24.1207 29.5026L33.2145 22.2383V48.7125ZM57.1866 35.4754L62.0294 30.6595C62.2803 30.4086 62.4793 30.1108 62.615 29.783C62.7508 29.4553 62.8207 29.104 62.8207 28.7492C62.8207 28.3945 62.7508 28.0432 62.615 27.7154C62.4793 27.3877 62.2803 27.0899 62.0294 26.839C61.7786 26.5881 61.4808 26.3892 61.153 26.2534C60.8252 26.1176 60.474 26.0478 60.1192 26.0478C59.7644 26.0478 59.4131 26.1176 59.0854 26.2534C58.7576 26.3892 58.4598 26.5881 58.209 26.839L53.393 31.6818L48.5771 26.839C48.0704 26.3324 47.3833 26.0478 46.6668 26.0478C45.9504 26.0478 45.2632 26.3324 44.7566 26.839C44.25 27.3456 43.9654 28.0328 43.9654 28.7492C43.9654 29.4657 44.25 30.1528 44.7566 30.6595L49.5994 35.4754L44.7566 40.2914C44.5044 40.5415 44.3043 40.839 44.1677 41.1669C44.0311 41.4948 43.9608 41.8464 43.9608 42.2016C43.9608 42.5568 44.0311 42.9084 44.1677 43.2363C44.3043 43.5641 44.5044 43.8617 44.7566 44.1118C45.0067 44.364 45.3043 44.5641 45.6321 44.7007C45.96 44.8373 46.3117 44.9077 46.6668 44.9077C47.022 44.9077 47.3737 44.8373 47.7015 44.7007C48.0294 44.5641 48.327 44.364 48.5771 44.1118L53.393 39.269L58.209 44.1118C58.4591 44.364 58.7566 44.5641 59.0845 44.7007C59.4124 44.8373 59.764 44.9077 60.1192 44.9077C60.4744 44.9077 60.826 44.8373 61.1539 44.7007C61.4817 44.5641 61.7793 44.364 62.0294 44.1118C62.2816 43.8617 62.4818 43.5641 62.6183 43.2363C62.7549 42.9084 62.8253 42.5568 62.8253 42.2016C62.8253 41.8464 62.7549 41.4948 62.6183 41.1669C62.4818 40.839 62.2816 40.5415 62.0294 40.2914L57.1866 35.4754Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerNextEpisodeDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerNextEpisodeDefault.svg
new file mode 100644
index 0000000..87f4a7a
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerNextEpisodeDefault.svg
@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 12.543C12 12.1138 12.4695 11.85 12.8359 12.0732L35.3301 25.7949C35.6842 26.0112 35.6804 26.5262 35.3232 26.7373L12.8291 40.0088C12.4626 40.2246 12.0002 39.9605 12 39.5352V12.543Z" stroke="white" stroke-width="4"/>
+<line x1="44" y1="10" x2="44" y2="42" stroke="white" stroke-width="4"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerNextEpisodeHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerNextEpisodeHover.svg
new file mode 100644
index 0000000..a2b8ecc
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerNextEpisodeHover.svg
@@ -0,0 +1,4 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.6162 17.3677C16.6162 16.7732 17.2669 16.4077 17.7744 16.7173L48.9189 35.7163C49.4097 36.0157 49.4043 36.7298 48.9092 37.022L17.7646 55.397C17.2571 55.6964 16.6165 55.3308 16.6162 54.7417V17.3677Z" stroke="white" stroke-width="5.53846"/>
+<line x1="60.9235" y1="13.8469" x2="60.9235" y2="58.1546" stroke="white" stroke-width="5.53846"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerPlayDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerPlayDefault.svg
new file mode 100644
index 0000000..e4600e9
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerPlayDefault.svg
@@ -0,0 +1,3 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5561 24.4165C41.1467 25.4272 41.1292 27.7546 39.5237 28.7413L12.8852 45.1123C11.1861 46.1565 9 44.934 9 42.9398L9 9.64164C9 7.63021 11.2199 6.41063 12.9176 7.4894L39.5561 24.4165Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerPlayHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerPlayHover.svg
new file mode 100644
index 0000000..132f7f0
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerPlayHover.svg
@@ -0,0 +1,3 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.7695 33.8082C56.9718 35.2077 56.9476 38.4301 54.7245 39.7964L17.8404 62.464C15.4879 63.9097 12.4609 62.2171 12.4609 59.4559L12.4609 13.3507C12.4609 10.5657 15.5347 8.87701 17.8853 10.3707L54.7695 33.8082Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerSoundDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerSoundDefault.svg
new file mode 100644
index 0000000..af2cab1
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerSoundDefault.svg
@@ -0,0 +1,6 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.2292 10.3911C24.9142 10.2549 24.5687 10.2046 24.228 10.2455C23.8872 10.2864 23.5634 10.417 23.2896 10.6239L14.0187 17.9552H6.93952C6.42512 17.9552 5.9318 18.1596 5.56807 18.5233C5.20434 18.887 5 19.3804 5 19.8948V31.5319C5 32.0462 5.20434 32.5396 5.56807 32.9033C5.9318 33.267 6.42512 33.4714 6.93952 33.4714H14.0187L23.1927 40.8027C23.5339 41.0765 23.9577 41.2269 24.3952 41.2294C24.6849 41.2342 24.9713 41.1676 25.2292 41.0355C25.5592 40.8783 25.8381 40.631 26.0337 40.3222C26.2293 40.0133 26.3336 39.6555 26.3347 39.2899V12.1367C26.3336 11.7711 26.2293 11.4133 26.0337 11.1044C25.8381 10.7956 25.5592 10.5483 25.2292 10.3911ZM22.4556 35.2557L15.9001 30.019C15.5588 29.7453 15.1351 29.5949 14.6976 29.5923H8.87903V21.8343H14.6976C15.1351 21.8317 15.5588 21.6814 15.9001 21.4076L22.4556 16.1709V35.2557Z" fill="white"/>
+<path d="M30.4677 41.1884C30.4677 41.7819 30.9495 42.2666 31.5417 42.2281C35.5342 41.9684 39.3115 40.2671 42.1578 37.4208C45.2582 34.3204 47 30.1154 47 25.7307C47 21.3461 45.2582 17.1411 42.1578 14.0407C39.3115 11.1944 35.5342 9.49313 31.5417 9.23338C30.9495 9.19485 30.4677 9.6796 30.4677 10.2731C30.4677 10.8666 30.9495 11.3435 31.5414 11.3878C34.9634 11.6438 38.195 13.1172 40.6381 15.5604C43.3355 18.2577 44.8508 21.9161 44.8508 25.7307C44.8508 29.5454 43.3355 33.2038 40.6381 35.9011C38.195 38.3443 34.9634 39.8177 31.5414 40.0737C30.9495 40.118 30.4677 40.5949 30.4677 41.1884Z" fill="white"/>
+<path d="M30.4663 32.9631C30.4663 33.5338 30.9307 34.003 31.4969 33.9319C33.3092 33.7042 35.0061 32.8805 36.3113 31.5753C37.8615 30.0251 38.7324 27.9226 38.7324 25.7302C38.7324 23.5379 37.8615 21.4354 36.3113 19.8852C35.0061 18.5799 33.3092 17.7563 31.4969 17.5286C30.9307 17.4574 30.4663 17.9267 30.4663 18.4974C30.4663 19.068 30.9321 19.5219 31.4948 19.6165C32.7575 19.829 33.9327 20.4291 34.8501 21.3465C36.0127 22.5091 36.6659 24.086 36.6659 25.7302C36.6659 27.3745 36.0127 28.9514 34.8501 30.114C33.9327 31.0314 32.7575 31.6315 31.4948 31.844C30.9321 31.9386 30.4663 32.3924 30.4663 32.9631Z" fill="white"/>
+<path d="M30.468 37.0777C30.468 37.6598 30.9408 38.1363 31.5208 38.0869C34.4235 37.8397 37.1597 36.5759 39.2355 34.5C41.5608 32.1747 42.8672 29.0209 42.8672 25.7324C42.8672 22.444 41.5608 19.2902 39.2355 16.9649C37.1597 14.889 34.4235 13.6252 31.5208 13.378C30.9408 13.3286 30.468 13.8051 30.468 14.3872C30.468 14.9693 30.9411 15.4355 31.5201 15.495C33.863 15.7357 36.0647 16.775 37.7451 18.4554C39.6751 20.3854 40.7593 23.003 40.7593 25.7324C40.7593 28.4619 39.6751 31.0795 37.7451 33.0095C36.0647 34.6899 33.863 35.7292 31.5201 35.9699C30.9411 36.0294 30.468 36.4956 30.468 37.0777Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerSoundHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerSoundHover.svg
new file mode 100644
index 0000000..e63554f
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerSoundHover.svg
@@ -0,0 +1,6 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.9329 14.3883C34.4968 14.1996 34.0185 14.13 33.5467 14.1866C33.0749 14.2432 32.6265 14.424 32.2475 14.7105L19.4108 24.8616H9.60882C8.89659 24.8616 8.21353 25.1446 7.7099 25.6482C7.20627 26.1518 6.92334 26.8349 6.92334 27.5471V43.66C6.92334 44.3723 7.20627 45.0553 7.7099 45.5589C8.21353 46.0626 8.89659 46.3455 9.60882 46.3455H19.4108L32.1132 56.4966C32.5857 56.8757 33.1724 57.0839 33.7782 57.0874C34.1793 57.0941 34.5759 57.0018 34.9329 56.8189C35.3899 56.6012 35.7761 56.2589 36.0469 55.8312C36.3178 55.4036 36.4622 54.9081 36.4637 54.402V16.8052C36.4622 16.299 36.3178 15.8035 36.0469 15.3759C35.7761 14.9483 35.3899 14.6059 34.9329 14.3883ZM31.0927 48.8161L22.0158 41.5653C21.5433 41.1863 20.9565 40.978 20.3508 40.9745H12.2943V30.2326H20.3508C20.9565 30.2291 21.5433 30.0209 22.0158 29.6418L31.0927 22.391V48.8161Z" fill="white"/>
+<path d="M42.1863 57.0306C42.1863 57.8523 42.8533 58.5235 43.6734 58.4701C49.2015 58.1105 54.4316 55.7549 58.3726 51.8139C62.6654 47.521 65.0771 41.6987 65.0771 35.6276C65.0771 29.5566 62.6654 23.7342 58.3726 19.4414C54.4316 15.5004 49.2015 13.1448 43.6734 12.7851C42.8534 12.7318 42.1863 13.403 42.1863 14.2247C42.1863 15.0465 42.8534 15.7068 43.6729 15.7681C48.411 16.1226 52.8855 18.1628 56.2684 21.5456C60.0032 25.2804 62.1013 30.3458 62.1013 35.6276C62.1013 40.9094 60.0032 45.9749 56.2684 49.7097C52.8855 53.0925 48.411 55.1326 43.6729 55.4871C42.8534 55.5484 42.1863 56.2088 42.1863 57.0306Z" fill="white"/>
+<path d="M42.1845 45.6403C42.1845 46.4305 42.8275 47.0802 43.6115 46.9817C46.1208 46.6665 48.4703 45.526 50.2776 43.7187C52.424 41.5723 53.6299 38.6611 53.6299 35.6256C53.6299 32.5901 52.424 29.6789 50.2776 27.5325C48.4703 25.7252 46.1208 24.5847 43.6115 24.2694C42.8275 24.1709 42.1845 24.8207 42.1845 25.6109C42.1845 26.401 42.8294 27.0294 43.6086 27.1605C45.357 27.4546 46.9842 28.2856 48.2543 29.5557C49.8641 31.1656 50.7685 33.349 50.7685 35.6256C50.7685 37.9022 49.8641 40.0856 48.2543 41.6954C46.9842 42.9656 45.357 43.7966 43.6086 44.0907C42.8294 44.2218 42.1845 44.8502 42.1845 45.6403Z" fill="white"/>
+<path d="M42.1864 51.3384C42.1864 52.1443 42.841 52.8041 43.644 52.7357C47.6633 52.3934 51.4518 50.6435 54.3261 47.7692C57.5457 44.5496 59.3545 40.1828 59.3545 35.6295C59.3545 31.0763 57.5457 26.7095 54.3261 23.4899C51.4518 20.6156 47.6633 18.8657 43.644 18.5234C42.841 18.455 42.1864 19.1148 42.1864 19.9207C42.1864 20.7267 42.8415 21.3723 43.6432 21.4546C46.8872 21.7879 49.9356 23.2269 52.2623 25.5536C54.9346 28.2259 56.4359 31.8503 56.4359 35.6295C56.4359 39.4088 54.9346 43.0332 52.2623 45.7055C49.9356 48.0322 46.8872 49.4712 43.6432 49.8045C42.8415 49.8868 42.1864 50.5324 42.1864 51.3384Z" fill="white"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerSpeedDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerSpeedDefault.svg
new file mode 100644
index 0000000..9809600
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerSpeedDefault.svg
@@ -0,0 +1,5 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.5058 45.2653C43.876 42.2488 46.2589 38.2866 47.3435 33.8956C48.4281 29.5045 48.1642 24.8885 46.5861 20.6497C45.008 16.4109 42.1891 12.7462 38.497 10.1335C34.8049 7.52079 30.4111 6.0815 25.8887 6.00336C21.3664 5.92522 16.9255 7.21186 13.1453 9.69544C9.36517 12.179 6.42129 15.7442 4.69771 19.926C2.97413 24.1077 2.55087 28.7118 3.48316 33.1377C4.41545 37.5636 6.65999 41.6058 9.92398 44.7369" stroke="white" stroke-width="4"/>
+<circle cx="25" cy="30" r="6" fill="white"/>
+<line x1="34.4142" y1="20.4142" x2="26.4142" y2="28.4142" stroke="white" stroke-width="4"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerSpeedHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerSpeedHover.svg
new file mode 100644
index 0000000..1114083
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerSpeedHover.svg
@@ -0,0 +1,5 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.0844 62.674C60.7509 58.4973 64.0502 53.0112 65.552 46.9313C67.0538 40.8514 66.6883 34.46 64.5033 28.5909C62.3183 22.7218 58.4151 17.6475 53.303 14.0299C48.1908 10.4124 42.1071 8.41949 35.8454 8.31129C29.5837 8.2031 23.4347 9.9846 18.2007 13.4234C12.9666 16.8622 8.89049 21.7986 6.50399 27.5887C4.1175 33.3788 3.53145 39.7538 4.82231 45.8819C6.11317 52.0101 9.221 57.6069 13.7404 61.9424" stroke="white" stroke-width="5.53846"/>
+<circle cx="34.6148" cy="41.5374" r="8.30769" fill="white"/>
+<line x1="47.65" y1="28.2648" x2="36.5731" y2="39.3417" stroke="white" stroke-width="5.53846"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerSubtitlesDefault.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerSubtitlesDefault.svg
new file mode 100644
index 0000000..154443f
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerSubtitlesDefault.svg
@@ -0,0 +1,7 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.1463 9H8.85366C7.82991 9 7 9.82991 7 10.8537V34.0244C7 35.0481 7.82991 35.878 8.85366 35.878H25.4478C25.8081 35.878 26.1606 35.9831 26.4622 36.1803L37.6903 43.5217C37.8444 43.6224 38.0488 43.5119 38.0488 43.3278V35.878H43.1463C44.1701 35.878 45 35.0481 45 34.0244V10.8537C45 9.82991 44.1701 9 43.1463 9Z" stroke="white" stroke-width="3.70732"/>
+<line x1="13" y1="18" x2="22" y2="18" stroke="white" stroke-width="4"/>
+<line x1="30" y1="26" x2="39" y2="26" stroke="white" stroke-width="4"/>
+<path d="M26 18H38.5" stroke="white" stroke-width="4"/>
+<path d="M13 26H25.5" stroke="white" stroke-width="4"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-player/VideoPlayerSubtitlesHover.svg b/packages/design-system/src/assets/icons/video-player/VideoPlayerSubtitlesHover.svg
new file mode 100644
index 0000000..2a735eb
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-player/VideoPlayerSubtitlesHover.svg
@@ -0,0 +1,7 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M59.7412 12.4619H12.259C10.8415 12.4619 9.69238 13.611 9.69238 15.0285V47.1111C9.69238 48.5286 10.8415 49.6777 12.259 49.6777H35.2355C35.7344 49.6777 36.2225 49.8231 36.64 50.0961L52.1866 60.2612C52.4 60.4007 52.683 60.2476 52.683 59.9926V49.6777H59.7412C61.1587 49.6777 62.3078 48.5286 62.3078 47.1111V15.0285C62.3078 13.611 61.1587 12.4619 59.7412 12.4619Z" stroke="white" stroke-width="5.13321"/>
+<line x1="18" y1="24.9236" x2="30.4615" y2="24.9236" stroke="white" stroke-width="5.53846"/>
+<line x1="41.5386" y1="36.0005" x2="54.0001" y2="36.0005" stroke="white" stroke-width="5.53846"/>
+<path d="M36 24.9236H53.3077" stroke="white" stroke-width="5.53846"/>
+<path d="M18 36.0005H35.3077" stroke="white" stroke-width="5.53846"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-quality/4K.svg b/packages/design-system/src/assets/icons/video-quality/4K.svg
new file mode 100644
index 0000000..86faf3b
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-quality/4K.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="27" height="16" fill="none" viewBox="0 0 27 16">
+  <rect width="26" height="15" x=".5" y=".5" stroke="gray" rx="3.5"/>
+  <path fill="#E5E5E5" d="M10.691 12v-1.892H6.819v-.781l3.927-4.983h.968v4.873h1.199v.891h-1.199V12h-1.023Zm-2.75-2.783h2.75V5.73l-2.75 3.487ZM14.225 12V4.344h1.045v3.289l3.575-3.289h1.342L16.15 8.029 20.374 12h-1.43L15.27 8.546V12h-1.045Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-quality/DolbyVision.svg b/packages/design-system/src/assets/icons/video-quality/DolbyVision.svg
new file mode 100644
index 0000000..cc0a4a9
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-quality/DolbyVision.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="74" height="12" fill="none" viewBox="0 0 74 12">
+  <path fill="#CBCBCB" fill-rule="evenodd" d="M15.428 0H0v12h15.428V0ZM2.572 10.286c-.293 0-.58-.03-.857-.086V1.8c.179-.036.361-.061.547-.075l.084-.004.065-.003a4.286 4.286 0 1 1 .162 8.568Zm10.286 0a4.071 4.071 0 0 0 .47-.025c.132-.015.26-.035.387-.061V1.8a4.35 4.35 0 0 0-.857-.086 4.286 4.286 0 0 0 0 8.572Z" clip-rule="evenodd"/>
+  <path fill="#CBCBCB" d="m29.64 1.015-4.119 10.738h-2.19L19.21 1.015h2.284l2.977 8.208 2.962-8.208h2.207Zm3.964 10.738h-2.098V1.015h2.098v10.738ZM40.28 12c-1.255 0-2.278-.288-3.07-.864-.782-.576-1.29-1.378-1.527-2.407h2.098c.134.432.416.782.849 1.05.442.256.982.385 1.62.385.606 0 1.105-.113 1.496-.34.401-.236.602-.575.602-1.018 0-.257-.057-.478-.17-.663-.113-.196-.324-.36-.633-.494-.308-.144-.756-.262-1.342-.355L39 7.094c-.998-.165-1.749-.484-2.253-.957-.493-.473-.74-1.152-.74-2.036 0-.68.18-1.266.54-1.76.37-.503.864-.889 1.48-1.156.628-.278 1.328-.417 2.1-.417 1.12 0 2.061.267 2.822.802.762.525 1.23 1.296 1.404 2.315h-2.098a1.418 1.418 0 0 0-.71-.957c-.37-.216-.838-.324-1.404-.324-.627 0-1.12.118-1.48.355-.36.226-.54.545-.54.956 0 .37.133.659.4.864.278.206.823.376 1.636.51l1.157.185c2.109.34 3.163 1.383 3.163 3.132 0 .72-.18 1.337-.54 1.851-.36.504-.859.89-1.497 1.157-.627.257-1.347.386-2.16.386Zm8.57-.247h-2.098V1.015h2.098v10.738Zm7.726.247a5.656 5.656 0 0 1-2.191-.417 5.083 5.083 0 0 1-1.713-1.172 5.383 5.383 0 0 1-1.126-1.774 6.175 6.175 0 0 1-.401-2.253c0-.813.133-1.558.4-2.237a5.346 5.346 0 0 1 1.127-1.79 5.083 5.083 0 0 1 1.713-1.172 5.656 5.656 0 0 1 2.19-.417c.793 0 1.518.139 2.176.417a5.045 5.045 0 0 1 1.728 1.172c.494.504.874 1.1 1.142 1.79.267.679.4 1.424.4 2.237 0 .813-.133 1.563-.4 2.253a5.26 5.26 0 0 1-1.142 1.774 5.045 5.045 0 0 1-1.728 1.172 5.542 5.542 0 0 1-2.175.417Zm0-1.882c.648 0 1.218-.155 1.712-.463a3.221 3.221 0 0 0 1.173-1.312c.288-.565.432-1.218.432-1.959 0-.74-.144-1.389-.432-1.944a3.096 3.096 0 0 0-1.173-1.311c-.493-.32-1.064-.479-1.712-.479-.638 0-1.209.16-1.713.479a3.219 3.219 0 0 0-1.172 1.311c-.278.555-.417 1.203-.417 1.944 0 .74.139 1.394.416 1.96.288.555.68.992 1.173 1.31a3.214 3.214 0 0 0 1.713.464Zm7.742 1.635V1.015h2.037l5.323 7.529v-7.53h2.036v10.74h-2.036l-5.323-7.53v7.53h-2.037Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-quality/HD.svg b/packages/design-system/src/assets/icons/video-quality/HD.svg
new file mode 100644
index 0000000..42f8783
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-quality/HD.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="16" fill="none" viewBox="0 0 30 16">
+  <rect width="29" height="15" x=".5" y=".5" stroke="gray" rx="3.5"/>
+  <path fill="#E5E5E5" d="M7.49 12V4.344h1.045v3.168h4.367V4.344h1.045V12h-1.045V8.447H8.535V12H7.49Zm8.433 0V4.344h2.76c.716 0 1.354.154 1.926.462a3.543 3.543 0 0 1 1.342 1.331c.33.583.495 1.254.495 2.035 0 .781-.165 1.452-.495 2.024a3.394 3.394 0 0 1-1.342 1.331c-.572.319-1.21.473-1.925.473h-2.761Zm1.045-.935h1.65c.506 0 .968-.11 1.386-.341a2.62 2.62 0 0 0 1-.99c.254-.429.375-.946.375-1.562 0-.616-.121-1.144-.374-1.573a2.591 2.591 0 0 0-1.001-.979 2.813 2.813 0 0 0-1.386-.341h-1.65v5.786Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-quality/HDR.svg b/packages/design-system/src/assets/icons/video-quality/HDR.svg
new file mode 100644
index 0000000..7cd0706
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-quality/HDR.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="37" height="16" fill="none" viewBox="0 0 37 16">
+  <rect width="36" height="15" x=".5" y=".5" stroke="gray" rx="3.5"/>
+  <path fill="#E5E5E5" d="M7.49 12V4.344h1.045v3.168h4.367V4.344h1.045V12h-1.045V8.447H8.535V12H7.49Zm8.433 0V4.344h2.76c.716 0 1.354.154 1.926.462a3.543 3.543 0 0 1 1.342 1.331c.33.583.495 1.254.495 2.035 0 .781-.165 1.452-.495 2.024a3.394 3.394 0 0 1-1.342 1.331c-.572.319-1.21.473-1.925.473h-2.761Zm1.045-.935h1.65c.506 0 .968-.11 1.386-.341a2.62 2.62 0 0 0 1-.99c.254-.429.375-.946.375-1.562 0-.616-.121-1.144-.374-1.573a2.591 2.591 0 0 0-1.001-.979 2.813 2.813 0 0 0-1.386-.341h-1.65v5.786Zm7.011.935V4.344h2.882c.98 0 1.716.209 2.222.627.495.418.748 1.001.748 1.738 0 .594-.154 1.078-.473 1.452a2.511 2.511 0 0 1-1.22.803L30.171 12H28.93l-1.903-2.871h-2.002V12H23.98Zm1.045-3.806h1.716c.693 0 1.2-.132 1.53-.396.33-.253.494-.627.494-1.1 0-.473-.165-.825-.495-1.067-.33-.231-.836-.352-1.529-.352h-1.716v2.915Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/icons/video-quality/UltraHD4K.svg b/packages/design-system/src/assets/icons/video-quality/UltraHD4K.svg
new file mode 100644
index 0000000..efb596f
--- /dev/null
+++ b/packages/design-system/src/assets/icons/video-quality/UltraHD4K.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="73" height="16" fill="none" viewBox="0 0 73 16">
+  <rect width="72" height="15" x=".5" y=".5" stroke="gray" rx="3.5"/>
+  <path fill="#E5E5E5" d="M10.581 12.165c-.693 0-1.287-.143-1.76-.429a2.633 2.633 0 0 1-1.078-1.188c-.242-.517-.363-1.122-.363-1.815V4.344h1.045v4.301c0 .781.176 1.408.528 1.87.341.462.891.693 1.628.693.737 0 1.287-.231 1.639-.693.341-.462.517-1.089.517-1.87V4.344h1.045v4.389c0 .693-.121 1.298-.363 1.815a2.633 2.633 0 0 1-1.078 1.188c-.473.286-1.067.429-1.76.429ZM15.489 12V4.025h.98V12h-.98Zm4.656.044c-.54 0-.946-.154-1.232-.451-.286-.297-.43-.726-.43-1.298V7.248h-1v-.88h1V4.575c.32-.022.65-.088.98-.187v1.98h1.232v.88h-1.232v2.959c0 .308.077.539.23.704.144.165.353.253.628.253h.374v.88h-.55Zm2.715-2.893V12h-.98V6.368h.958v1.001c.176-.33.407-.583.693-.77a1.79 1.79 0 0 1 .957-.264h.176v.946h-.198c-.286 0-.55.066-.792.209a1.489 1.489 0 0 0-.594.627c-.143.275-.22.627-.22 1.034Zm4.341 3.003c-.583 0-1.045-.154-1.397-.473-.352-.308-.528-.726-.528-1.265 0-.572.21-1.023.627-1.342.407-.319 1.001-.473 1.76-.473h1.331v-.242c0-.451-.11-.781-.34-.979-.232-.187-.55-.286-.958-.286-.34 0-.616.066-.836.198-.22.132-.352.297-.407.484h-.99a1.83 1.83 0 0 1 .748-1.133c.396-.286.891-.429 1.496-.429.693 0 1.254.176 1.661.539.407.363.605.924.605 1.683V12h-.924v-.847a1.817 1.817 0 0 1-.803.748 2.22 2.22 0 0 1-1.045.253Zm.22-.858c.242 0 .484-.055.726-.165.242-.11.44-.275.605-.495.165-.209.242-.484.242-.814v-.418H27.73c-.462 0-.825.077-1.078.242a.817.817 0 0 0-.385.726c0 .297.11.528.32.682.208.165.494.242.835.242Zm6.882.704V4.344h1.044v3.168h4.367V4.344h1.046V12h-1.045V8.447h-4.368V12h-1.044Zm8.432 0V4.344h2.761c.715 0 1.353.154 1.925.462a3.543 3.543 0 0 1 1.342 1.331c.33.583.495 1.254.495 2.035 0 .781-.165 1.452-.495 2.024a3.394 3.394 0 0 1-1.342 1.331c-.572.319-1.21.473-1.925.473h-2.76Zm1.045-.935h1.65c.506 0 .968-.11 1.386-.341a2.62 2.62 0 0 0 1.001-.99c.253-.429.374-.946.374-1.562 0-.616-.12-1.144-.374-1.573a2.591 2.591 0 0 0-1-.979 2.813 2.813 0 0 0-1.387-.341h-1.65v5.786ZM56.56 12v-1.892h-3.872v-.781l3.927-4.983h.968v4.873h1.2v.891h-1.2V12H56.56Zm-2.75-2.783h2.75V5.73l-2.75 3.487ZM60.094 12V4.344h1.045v3.289l3.575-3.289h1.343l-4.038 3.685L66.243 12h-1.43L61.14 8.546V12h-1.045Z"/>
+</svg>
diff --git a/packages/design-system/src/assets/index.ts b/packages/design-system/src/assets/index.ts
new file mode 100644
index 0000000..838008a
--- /dev/null
+++ b/packages/design-system/src/assets/index.ts
@@ -0,0 +1 @@
+export * from './icons';
diff --git a/packages/design-system/src/components/atoms/Badge.tsx b/packages/design-system/src/components/atoms/Badge.tsx
new file mode 100644
index 0000000..1d2d08d
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Badge.tsx
@@ -0,0 +1,37 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+type BadgeVariant = 'released' | 'locked' | 'expired' | 'neutral';
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  children: ReactNode;
+  variant?: BadgeVariant;
+};
+
+const variants: Record<BadgeVariant, CSSProperties> = {
+  released: { borderColor: 'var(--fx-color-success)', background: 'rgb(70 211 105 / 24%)' },
+  locked: { borderColor: 'var(--fx-color-border-default)', background: 'rgb(68 142 244 / 20%)' },
+  expired: { borderColor: 'var(--fx-color-error)', background: 'rgb(235 57 66 / 20%)' },
+  neutral: { borderColor: 'var(--fx-color-border-default)', background: 'var(--fx-color-bg-card)' },
+};
+
+export const Badge = ({ children, variant = 'neutral', style, ...props }: BadgeProps) => (
+  <span
+    style={{
+      display: 'inline-block',
+      borderRadius: 999,
+      border: '1px solid var(--fx-color-border-default)',
+      padding: '2px var(--fx-space-3)',
+      fontFamily: 'var(--fx-font-sans)',
+      fontSize: 'var(--fx-typo-regular-caption1-size)',
+      lineHeight: 'var(--fx-typo-regular-caption1-line)',
+      fontWeight: 'var(--fx-typo-regular-caption1-weight)',
+      letterSpacing: 'var(--fx-typo-regular-caption1-spacing)',
+      color: 'var(--fx-color-text-primary)',
+      ...variants[variant],
+      ...style,
+    }}
+    {...props}
+  >
+    {children}
+  </span>
+);
diff --git a/packages/design-system/src/components/atoms/Button.tsx b/packages/design-system/src/components/atoms/Button.tsx
new file mode 100644
index 0000000..864a6c7
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Button.tsx
@@ -0,0 +1,144 @@
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
+
+type ButtonVariant =
+  | 'primary'
+  | 'primaryPressed'
+  | 'secondary'
+  | 'secondaryPressed'
+  | 'ghost'
+  | 'danger'
+  | 'text'
+  | 'textMuted'
+  | 'play'
+  | 'moreInfo';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  children: ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  fullWidth?: boolean;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+};
+
+const variants: Record<ButtonVariant, CSSProperties> = {
+  primary: {
+    background: 'var(--fx-color-brand-primary)',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid var(--fx-color-brand-primary)',
+  },
+  secondary: {
+    background: 'var(--fx-color-bg-card)',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid var(--fx-color-border-default)',
+  },
+  secondaryPressed: {
+    background: 'var(--fx-color-bg-hover)',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid var(--fx-color-border-default)',
+  },
+  primaryPressed: {
+    background: 'var(--fx-color-brand-hover)',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid var(--fx-color-brand-hover)',
+  },
+  ghost: {
+    background: 'transparent',
+    color: 'var(--fx-color-text-secondary)',
+    border: '1px solid var(--fx-color-border-default)',
+  },
+  danger: {
+    background: 'var(--fx-color-error)',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid var(--fx-color-error)',
+  },
+  text: {
+    background: 'transparent',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid transparent',
+  },
+  textMuted: {
+    background: 'transparent',
+    color: 'var(--fx-color-text-tertiary)',
+    border: '1px solid transparent',
+  },
+  play: {
+    background: 'var(--fx-color-text-primary)',
+    color: 'var(--fx-color-bg-primary)',
+    border: '1px solid var(--fx-color-text-primary)',
+  },
+  moreInfo: {
+    background: 'var(--fx-color-bg-overlay-strong)',
+    color: 'var(--fx-color-text-primary)',
+    border: '1px solid transparent',
+  },
+};
+
+const sizes: Record<ButtonSize, CSSProperties> = {
+  sm: {
+    minHeight: 'var(--fx-size-button-height-sm)',
+    padding: '0 var(--fx-size-button-padding-x-sm)',
+    fontSize: 'var(--fx-typo-medium-body-size)',
+    lineHeight: 'var(--fx-typo-medium-body-line)',
+  },
+  md: {
+    minHeight: 'var(--fx-size-button-height-md)',
+    padding: '0 var(--fx-size-button-padding-x-md)',
+    fontSize: 'var(--fx-typo-medium-body-size)',
+    lineHeight: 'var(--fx-typo-medium-body-line)',
+  },
+  lg: {
+    minHeight: 'var(--fx-size-button-height-lg)',
+    padding: '0 var(--fx-size-button-padding-x-lg)',
+    fontSize: 'var(--fx-typo-medium-headline2-size)',
+    lineHeight: 'var(--fx-typo-medium-headline2-line)',
+  },
+};
+
+const base: CSSProperties = {
+  borderRadius: 'var(--fx-radius-button)',
+  fontFamily: 'var(--fx-font-sans)',
+  fontWeight: 'var(--fx-font-weight-medium)',
+  letterSpacing: 'var(--fx-typo-medium-body-spacing)',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'var(--fx-space-2)',
+  whiteSpace: 'nowrap',
+};
+
+const disabledStyle: CSSProperties = {
+  opacity: 'var(--fx-opacity-disabled)',
+  cursor: 'not-allowed',
+};
+
+export const Button = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  fullWidth = false,
+  leadingIcon,
+  trailingIcon,
+  disabled,
+  style,
+  ...props
+}: ButtonProps) => (
+  <button
+    style={{
+      ...base,
+      ...sizes[size],
+      ...variants[variant],
+      ...(fullWidth ? { width: '100%' } : null),
+      ...(disabled ? disabledStyle : null),
+      ...style,
+    }}
+    disabled={disabled}
+    {...props}
+  >
+    {leadingIcon}
+    {children}
+    {trailingIcon}
+  </button>
+);
diff --git a/packages/design-system/src/components/atoms/Card.tsx b/packages/design-system/src/components/atoms/Card.tsx
new file mode 100644
index 0000000..5edd8e2
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Card.tsx
@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+type CardProps = HTMLAttributes<HTMLDivElement> & {
+  children: ReactNode;
+};
+
+export const Card = ({ children, style, ...props }: CardProps) => (
+  <div
+    style={{
+      borderRadius: 'var(--fx-radius-xl)',
+      border: '1px solid var(--fx-color-border-default)',
+      background: 'var(--fx-color-bg-elevated)',
+      padding: 'var(--fx-space-4)',
+      ...style,
+    }}
+    {...props}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/design-system/src/components/atoms/Dropdown.tsx b/packages/design-system/src/components/atoms/Dropdown.tsx
new file mode 100644
index 0000000..1c6db51
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Dropdown.tsx
@@ -0,0 +1,320 @@
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent } from 'react';
+
+export type DropdownOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type DropdownSurface = 'black' | 'elevated';
+type DropdownVariant = 'compact' | 'browse';
+
+type DropdownProps = {
+  options: DropdownOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string, option: DropdownOption) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  surface?: DropdownSurface;
+  variant?: DropdownVariant;
+  width?: CSSProperties['width'];
+  maxMenuHeight?: number;
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+const triggerBase: CSSProperties = {
+  width: '100%',
+  borderRadius: '0',
+  border: '1px solid var(--fx-color-text-primary)',
+  color: 'var(--fx-color-text-primary)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-2)',
+  cursor: 'pointer',
+  outline: 'none',
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-typo-regular-headline2-size)',
+  lineHeight: 'var(--fx-typo-regular-headline2-line)',
+  fontWeight: 'var(--fx-typo-regular-headline2-weight)',
+  letterSpacing: 'var(--fx-typo-regular-headline2-spacing)',
+};
+
+const triggerVariants: Record<DropdownVariant, CSSProperties> = {
+  compact: {
+    height: '26px',
+    padding: '0 var(--fx-space-2)',
+  },
+  browse: {
+    height: '37px',
+    padding: '0 var(--fx-space-3)',
+  },
+};
+
+const triggerSurfaces: Record<DropdownSurface, CSSProperties> = {
+  black: {
+    background: 'var(--fx-color-bg-primary)',
+  },
+  elevated: {
+    background: 'var(--fx-color-bg-card)',
+  },
+};
+
+const menuStyle: CSSProperties = {
+  position: 'absolute',
+  top: 'calc(100% - 1px)',
+  left: 0,
+  right: 0,
+  border: '1px solid var(--fx-color-text-primary)',
+  background: 'var(--fx-color-bg-primary)',
+  zIndex: 50,
+  overflowY: 'auto',
+};
+
+const optionStyle: CSSProperties = {
+  width: '100%',
+  border: 0,
+  background: 'transparent',
+  color: 'var(--fx-color-text-primary)',
+  textAlign: 'left',
+  padding: '2px var(--fx-space-2)',
+  cursor: 'pointer',
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-typo-regular-headline2-size)',
+  lineHeight: 'var(--fx-typo-regular-headline2-line)',
+  fontWeight: 'var(--fx-typo-regular-headline2-weight)',
+  letterSpacing: 'var(--fx-typo-regular-headline2-spacing)',
+  display: 'block',
+};
+
+const getNextEnabledIndex = (options: DropdownOption[], start: number, direction: 1 | -1): number => {
+  let index = start;
+  for (let i = 0; i < options.length; i += 1) {
+    index = (index + direction + options.length) % options.length;
+    if (!options[index]?.disabled) {
+      return index;
+    }
+  }
+  return -1;
+};
+
+export const Dropdown = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Select an option',
+  disabled = false,
+  surface = 'black',
+  variant = 'compact',
+  width,
+  maxMenuHeight = 520,
+  ariaLabel,
+  className,
+  style,
+}: DropdownProps) => {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const selectedValue = isControlled ? value : internalValue;
+  const resolvedWidth = width ?? (variant === 'browse' ? 245 : 177);
+  const selectedIndex = useMemo(
+    () => options.findIndex((option) => option.value === selectedValue),
+    [options, selectedValue],
+  );
+  const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const onPointerDown = (event: MouseEvent | TouchEvent) => {
+      const node = rootRef.current;
+      if (node && !node.contains(event.target as Node)) {
+        setOpen(false);
+        setActiveIndex(-1);
+      }
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('touchstart', onPointerDown);
+    return () => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('touchstart', onPointerDown);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const initialIndex = selectedIndex >= 0 && !options[selectedIndex]?.disabled
+      ? selectedIndex
+      : getNextEnabledIndex(options, -1, 1);
+    setActiveIndex(initialIndex);
+  }, [open, selectedIndex, options]);
+
+  useEffect(() => {
+    if (!open || activeIndex < 0) {
+      return;
+    }
+    optionRefs.current[activeIndex]?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, open]);
+
+  const commitSelection = (index: number) => {
+    const option = options[index];
+    if (!option || option.disabled) {
+      return;
+    }
+    if (!isControlled) {
+      setInternalValue(option.value);
+    }
+    onChange?.(option.value, option);
+    setOpen(false);
+    setActiveIndex(index);
+  };
+
+  const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      return;
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setActiveIndex((current) => getNextEnabledIndex(options, current < 0 ? -1 : current, 1));
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setActiveIndex((current) => getNextEnabledIndex(options, current < 0 ? 0 : current, -1));
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+      } else if (activeIndex >= 0) {
+        commitSelection(activeIndex);
+      }
+      return;
+    }
+    if (event.key === 'Escape') {
+      setOpen(false);
+      setActiveIndex(-1);
+    }
+  };
+
+  const onListKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setActiveIndex((current) => getNextEnabledIndex(options, current < 0 ? -1 : current, 1));
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setActiveIndex((current) => getNextEnabledIndex(options, current < 0 ? 0 : current, -1));
+      return;
+    }
+    if (event.key === 'Home') {
+      event.preventDefault();
+      setActiveIndex(getNextEnabledIndex(options, -1, 1));
+      return;
+    }
+    if (event.key === 'End') {
+      event.preventDefault();
+      setActiveIndex(getNextEnabledIndex(options, 0, -1));
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (activeIndex >= 0) {
+        commitSelection(activeIndex);
+      }
+      return;
+    }
+    if (event.key === 'Escape' || event.key === 'Tab') {
+      setOpen(false);
+      setActiveIndex(-1);
+    }
+  };
+
+  return (
+    <div ref={rootRef} className={className} style={{ width: resolvedWidth, position: 'relative', ...style }}>
+      <button
+        type="button"
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        disabled={disabled}
+        onClick={() => {
+          if (!disabled) {
+            setOpen((current) => !current);
+          }
+        }}
+        onKeyDown={onTriggerKeyDown}
+        onFocus={() => setFocusVisible(true)}
+        onBlur={() => setFocusVisible(false)}
+        style={{
+          ...triggerBase,
+          ...triggerVariants[variant],
+          ...triggerSurfaces[surface],
+          opacity: disabled ? 0.6 : 1,
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          boxShadow: focusVisible ? '0 0 0 2px var(--fx-color-text-primary)' : 'none',
+        }}
+      >
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {selectedOption?.label ?? placeholder}
+        </span>
+        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" aria-hidden="true">
+          <path d="M0 0L5 6L10 0H0Z" fill="var(--fx-color-text-primary)" />
+        </svg>
+      </button>
+
+      {open ? (
+        <div role="listbox" aria-label={ariaLabel} tabIndex={-1} onKeyDown={onListKeyDown} style={{ ...menuStyle, maxHeight: maxMenuHeight }}>
+          {options.map((option, index) => {
+            const isSelected = option.value === selectedValue;
+            const isActive = index === activeIndex;
+            return (
+              <button
+                key={option.value}
+                ref={(node) => {
+                  optionRefs.current[index] = node;
+                }}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                disabled={option.disabled}
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => commitSelection(index)}
+                style={{
+                  ...optionStyle,
+                  background: isActive ? 'var(--fx-color-bg-card)' : 'transparent',
+                  opacity: option.disabled ? 0.5 : 1,
+                }}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+};
diff --git a/packages/design-system/src/components/atoms/FaqToggleIcon.tsx b/packages/design-system/src/components/atoms/FaqToggleIcon.tsx
new file mode 100644
index 0000000..3988226
--- /dev/null
+++ b/packages/design-system/src/components/atoms/FaqToggleIcon.tsx
@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react';
+
+type FaqToggleIconProps = {
+  expanded: boolean;
+  size?: number | string;
+  color?: string;
+  strokeWidth?: number;
+  style?: CSSProperties;
+};
+
+export const FaqToggleIcon = ({
+  expanded,
+  size = 'var(--fx-size-pattern-faq-icon-size)',
+  color = 'var(--fx-color-text-primary)',
+  strokeWidth = 2,
+  style,
+}: FaqToggleIconProps) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 30 30"
+    fill="none"
+    aria-hidden="true"
+    style={{ display: 'block', ...style }}
+  >
+    {expanded ? (
+      <>
+        <path d="M7 7L23 23" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+        <path d="M23 7L7 23" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+      </>
+    ) : (
+      <>
+        <path d="M4 15H26" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+        <path d="M15 4V26" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
+      </>
+    )}
+  </svg>
+);
diff --git a/packages/design-system/src/components/atoms/HeroBannerControlButton.tsx b/packages/design-system/src/components/atoms/HeroBannerControlButton.tsx
new file mode 100644
index 0000000..eec1e70
--- /dev/null
+++ b/packages/design-system/src/components/atoms/HeroBannerControlButton.tsx
@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, CSSProperties } from 'react';
+import { useState } from 'react';
+import { getHeroBannerPreviewIconSetAsset, type HeroBannerPreviewIconSetName } from '../../assets/icons';
+
+type HeroBannerControlButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+  iconSet: HeroBannerPreviewIconSetName;
+  label: string;
+  size?: number | string;
+};
+
+const buttonStyle: CSSProperties = {
+  border: 'var(--fx-size-border-default) solid var(--fx-color-hero-control-border)',
+  background: 'var(--fx-color-hero-control-background)',
+  color: 'var(--fx-color-text-primary)',
+  padding: 0,
+  width: 'var(--fx-size-pattern-hero-control-size)',
+  height: 'var(--fx-size-pattern-hero-control-size)',
+  borderRadius: '9999px',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+  flexShrink: 0,
+};
+
+const iconStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-header-action-icon-size)',
+  height: 'var(--fx-size-pattern-header-action-icon-size)',
+  objectFit: 'contain',
+};
+
+export const HeroBannerControlButton = ({ iconSet, label, size, style, ...props }: HeroBannerControlButtonProps) => {
+  const [hovered, setHovered] = useState(false);
+  const iconSrc = getHeroBannerPreviewIconSetAsset(iconSet, hovered ? 'hover' : 'default');
+
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{ ...buttonStyle, ...(size ? { width: size, height: size } : null), ...style }}
+      {...props}
+    >
+      <img src={iconSrc} alt="" aria-hidden="true" style={iconStyle} />
+    </button>
+  );
+};
diff --git a/packages/design-system/src/components/atoms/Icon.tsx b/packages/design-system/src/components/atoms/Icon.tsx
new file mode 100644
index 0000000..44422d5
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Icon.tsx
@@ -0,0 +1,28 @@
+import type { CSSProperties, ImgHTMLAttributes } from 'react';
+import { getIconAsset, type IconName } from '../../assets/icons';
+
+type IconProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt'> & {
+  name: IconName;
+  size?: number | string;
+  alt?: string;
+};
+
+const wrapperStyle: CSSProperties = {
+  display: 'inline-flex',
+  lineHeight: 0,
+  flexShrink: 0,
+};
+
+export const Icon = ({ name, size = 16, alt = '', style, ...props }: IconProps) => (
+  <span style={wrapperStyle}>
+    <img
+      src={getIconAsset(name)}
+      alt={alt}
+      aria-hidden={alt ? undefined : true}
+      width={size}
+      height={size}
+      style={{ width: size, height: size, objectFit: 'contain', ...style }}
+      {...props}
+    />
+  </span>
+);
diff --git a/packages/design-system/src/components/atoms/Input.tsx b/packages/design-system/src/components/atoms/Input.tsx
new file mode 100644
index 0000000..6417e1a
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Input.tsx
@@ -0,0 +1,108 @@
+import { useMemo, useState, type CSSProperties, type InputHTMLAttributes } from 'react';
+
+type InputState = 'default' | 'focused' | 'error';
+
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  state?: InputState;
+  errorMessage?: string;
+  helperText?: string;
+};
+
+const baseInputStyle: CSSProperties = {
+  width: '100%',
+  height: 'var(--fx-size-input-height)',
+  borderRadius: 'var(--fx-radius-input)',
+  border: 'var(--fx-size-border-default) solid var(--fx-color-border-strong)',
+  background: 'var(--fx-color-bg-input)',
+  color: 'var(--fx-color-text-primary)',
+  padding: '0 var(--fx-space-4)',
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-typo-regular-headline2-size)',
+  lineHeight: 'var(--fx-typo-regular-headline2-line)',
+  fontWeight: 'var(--fx-typo-regular-headline2-weight)',
+  letterSpacing: 'var(--fx-typo-regular-headline2-spacing)',
+  outline: 'none',
+  transition: 'box-shadow 150ms ease, border-color 150ms ease',
+};
+
+const helperStyle: CSSProperties = {
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-typo-medium-caption1-size)',
+  lineHeight: 'var(--fx-typo-medium-caption1-line)',
+  fontWeight: 'var(--fx-typo-medium-caption1-weight)',
+  letterSpacing: 'var(--fx-typo-medium-caption1-spacing)',
+  marginTop: 'var(--fx-space-1)',
+  display: 'inline-flex',
+  gap: 'var(--fx-space-1)',
+  alignItems: 'center',
+};
+
+const ErrorIcon = () => (
+  <svg
+    width="var(--fx-size-input-error-icon)"
+    height="var(--fx-size-input-error-icon)"
+    viewBox="0 0 16 16"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8 0.5C3.85775 0.5 0.5 3.85775 0.5 8C0.5 12.1422 3.85775 15.5 8 15.5C12.1422 15.5 15.5 12.1422 15.5 8C15.5 3.85775 12.1422 0.5 8 0.5ZM5.64645 5.64645C5.84171 5.45118 6.15829 5.45118 6.35355 5.64645L8 7.29289L9.64645 5.64645C9.84171 5.45118 10.1583 5.45118 10.3536 5.64645C10.5488 5.84171 10.5488 6.15829 10.3536 6.35355L8.70711 8L10.3536 9.64645C10.5488 9.84171 10.5488 10.1583 10.3536 10.3536C10.1583 10.5488 9.84171 10.5488 9.64645 10.3536L8 8.70711L6.35355 10.3536C6.15829 10.5488 5.84171 10.5488 5.64645 10.3536C5.45118 10.1583 5.45118 9.84171 5.64645 9.64645L7.29289 8L5.64645 6.35355C5.45118 6.15829 5.45118 5.84171 5.64645 5.64645Z"
+      fill="var(--fx-color-error)"
+    />
+  </svg>
+);
+
+export const Input = ({ state, errorMessage, helperText, style, onFocus, onBlur, ...props }: InputProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const { width, maxWidth, minWidth, ...styleOverrides } = style ?? {};
+
+  const resolvedState = useMemo<InputState>(() => {
+    if (state) {
+      return state;
+    }
+    if (errorMessage) {
+      return 'error';
+    }
+    if (isFocused) {
+      return 'focused';
+    }
+    return 'default';
+  }, [errorMessage, isFocused, state]);
+
+  const inputStyle: CSSProperties = {
+    ...baseInputStyle,
+    borderColor: resolvedState === 'error' ? 'var(--fx-color-error)' : 'var(--fx-color-border-strong)',
+    boxShadow: resolvedState === 'focused' ? '0 0 0 var(--fx-size-focus-ring) var(--fx-color-text-primary)' : 'none',
+    opacity: props.disabled ? 0.6 : 1,
+    ...styleOverrides,
+  };
+
+  return (
+    <div style={{ width: width ?? '100%', maxWidth, minWidth }}>
+      <input
+        {...props}
+        data-fx-input="true"
+        style={inputStyle}
+        onFocus={(event) => {
+          setIsFocused(true);
+          onFocus?.(event);
+        }}
+        onBlur={(event) => {
+          setIsFocused(false);
+          onBlur?.(event);
+        }}
+      />
+      {errorMessage ? (
+        <span style={{ ...helperStyle, color: 'var(--fx-color-error)' }}>
+          <ErrorIcon />
+          {errorMessage}
+        </span>
+      ) : null}
+      {!errorMessage && helperText ? (
+        <span style={{ ...helperStyle, color: 'var(--fx-color-text-secondary)' }}>{helperText}</span>
+      ) : null}
+    </div>
+  );
+};
diff --git a/packages/design-system/src/components/atoms/ProfileAvatar.tsx b/packages/design-system/src/components/atoms/ProfileAvatar.tsx
new file mode 100644
index 0000000..42f10bf
--- /dev/null
+++ b/packages/design-system/src/components/atoms/ProfileAvatar.tsx
@@ -0,0 +1,107 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IconName } from '../../assets/icons';
+import { Icon } from './Icon';
+
+export type ProfileAvatarSize = 'sm' | 'md' | 'lg';
+
+type ProfileAvatarProps = {
+  imageUrl?: string;
+  imageAlt?: string;
+  size?: ProfileAvatarSize;
+  selected?: boolean;
+  addState?: boolean;
+  addIconName?: IconName;
+  interactive?: boolean;
+  ariaLabel?: string;
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const sizeMap: Record<ProfileAvatarSize, string> = {
+  sm: 'var(--fx-size-pattern-profile-avatar-sm-size)',
+  md: 'var(--fx-size-pattern-profile-avatar-md-size)',
+  lg: 'var(--fx-size-pattern-profile-avatar-lg-size)',
+};
+
+const radiusMap: Record<ProfileAvatarSize, string> = {
+  sm: 'var(--fx-size-pattern-profile-avatar-sm-radius)',
+  md: 'var(--fx-size-pattern-profile-avatar-sm-radius)',
+  lg: 'var(--fx-size-pattern-profile-avatar-lg-radius)',
+};
+
+const baseStyle: CSSProperties = {
+  border: 0,
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  background: 'transparent',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+  overflow: 'hidden',
+};
+
+export const ProfileAvatar = ({
+  imageUrl,
+  imageAlt = '',
+  size = 'md',
+  selected = false,
+  addState = false,
+  addIconName = 'plusWide',
+  interactive = true,
+  ariaLabel,
+  onClick,
+  style,
+}: ProfileAvatarProps): ReactNode => {
+  const dimension = sizeMap[size];
+
+  const visual = imageUrl ? (
+    <img
+      src={imageUrl}
+      alt={imageAlt}
+      style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+    />
+  ) : (
+    <span
+      aria-hidden="true"
+      style={{
+        width: '100%',
+        height: '100%',
+        background: 'var(--fx-color-profile-avatar-add-background)',
+        color: 'var(--fx-color-profile-avatar-add-foreground)',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Icon name={addIconName} size={size === 'lg' ? 28 : 18} />
+    </span>
+  );
+
+  const sharedStyle: CSSProperties = {
+    ...baseStyle,
+    width: dimension,
+    height: dimension,
+    borderRadius: radiusMap[size],
+    outline: selected ? '3px solid var(--fx-color-profile-avatar-selection-border)' : 'none',
+    outlineOffset: selected ? '-3px' : '0',
+    background: addState ? 'var(--fx-color-profile-avatar-add-background)' : 'transparent',
+    cursor: interactive ? 'pointer' : 'default',
+    ...style,
+  };
+
+  if (!interactive) {
+    return (
+      <span aria-hidden="true" style={sharedStyle}>
+        {visual}
+      </span>
+    );
+  }
+
+  return (
+    <button type="button" onClick={onClick} aria-label={ariaLabel} style={sharedStyle}>
+      {visual}
+    </button>
+  );
+};
diff --git a/packages/design-system/src/components/atoms/Text.tsx b/packages/design-system/src/components/atoms/Text.tsx
new file mode 100644
index 0000000..6a8d631
--- /dev/null
+++ b/packages/design-system/src/components/atoms/Text.tsx
@@ -0,0 +1,301 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+type TextTone = 'primary' | 'secondary' | 'tertiary' | 'error';
+type TextVariant =
+  | 'regular-caption2'
+  | 'regular-caption1'
+  | 'regular-small-body'
+  | 'regular-small-body-normal'
+  | 'regular-body'
+  | 'regular-headline2'
+  | 'regular-headline1'
+  | 'regular-title4'
+  | 'regular-title3'
+  | 'regular-title2'
+  | 'regular-title1'
+  | 'regular-large-title'
+  | 'medium-caption2'
+  | 'medium-caption1'
+  | 'medium-small-body'
+  | 'medium-body'
+  | 'medium-body-condensed'
+  | 'medium-headline2'
+  | 'medium-headline1'
+  | 'medium-title4'
+  | 'medium-title3'
+  | 'medium-title3-condensed'
+  | 'medium-title2'
+  | 'medium-title1'
+  | 'medium-large-title'
+  | 'bold-title2'
+  | 'bold-title1'
+  | 'bold-large-title'
+  | 'display-small'
+  | 'display-medium'
+  | 'display-large'
+  | 'display-xlarge';
+
+type TextProps = HTMLAttributes<HTMLElement> & {
+  as?: 'p' | 'span' | 'strong' | 'h1' | 'h2' | 'h3' | 'h4';
+  children: ReactNode;
+  tone?: TextTone;
+  variant?: TextVariant;
+};
+
+const tones: Record<TextTone, string> = {
+  primary: 'var(--fx-color-text-primary)',
+  secondary: 'var(--fx-color-text-secondary)',
+  tertiary: 'var(--fx-color-text-tertiary)',
+  error: 'var(--fx-color-error)',
+};
+
+const variants: Record<TextVariant, CSSProperties> = {
+  'regular-caption2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-caption2-size)',
+    lineHeight: 'var(--fx-typo-regular-caption2-line)',
+    fontWeight: 'var(--fx-typo-regular-caption2-weight)',
+    letterSpacing: 'var(--fx-typo-regular-caption2-spacing)',
+  },
+  'regular-caption1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-caption1-size)',
+    lineHeight: 'var(--fx-typo-regular-caption1-line)',
+    fontWeight: 'var(--fx-typo-regular-caption1-weight)',
+    letterSpacing: 'var(--fx-typo-regular-caption1-spacing)',
+  },
+  'regular-small-body': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-small-body-size)',
+    lineHeight: 'var(--fx-typo-regular-small-body-line)',
+    fontWeight: 'var(--fx-typo-regular-small-body-weight)',
+    letterSpacing: 'var(--fx-typo-regular-small-body-spacing)',
+  },
+  'regular-small-body-normal': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-small-body-normal-size)',
+    lineHeight: 'var(--fx-typo-regular-small-body-normal-line)',
+    fontWeight: 'var(--fx-typo-regular-small-body-normal-weight)',
+    letterSpacing: 'var(--fx-typo-regular-small-body-normal-spacing)',
+  },
+  'regular-body': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-body-size)',
+    lineHeight: 'var(--fx-typo-regular-body-line)',
+    fontWeight: 'var(--fx-typo-regular-body-weight)',
+    letterSpacing: 'var(--fx-typo-regular-body-spacing)',
+  },
+  'regular-headline2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-headline2-size)',
+    lineHeight: 'var(--fx-typo-regular-headline2-line)',
+    fontWeight: 'var(--fx-typo-regular-headline2-weight)',
+    letterSpacing: 'var(--fx-typo-regular-headline2-spacing)',
+  },
+  'regular-headline1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-headline1-size)',
+    lineHeight: 'var(--fx-typo-regular-headline1-line)',
+    fontWeight: 'var(--fx-typo-regular-headline1-weight)',
+    letterSpacing: 'var(--fx-typo-regular-headline1-spacing)',
+  },
+  'regular-title4': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-title4-size)',
+    lineHeight: 'var(--fx-typo-regular-title4-line)',
+    fontWeight: 'var(--fx-typo-regular-title4-weight)',
+    letterSpacing: 'var(--fx-typo-regular-title4-spacing)',
+  },
+  'regular-title3': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-title3-size)',
+    lineHeight: 'var(--fx-typo-regular-title3-line)',
+    fontWeight: 'var(--fx-typo-regular-title3-weight)',
+    letterSpacing: 'var(--fx-typo-regular-title3-spacing)',
+  },
+  'regular-title2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-title2-size)',
+    lineHeight: 'var(--fx-typo-regular-title2-line)',
+    fontWeight: 'var(--fx-typo-regular-title2-weight)',
+    letterSpacing: 'var(--fx-typo-regular-title2-spacing)',
+  },
+  'regular-title1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-title1-size)',
+    lineHeight: 'var(--fx-typo-regular-title1-line)',
+    fontWeight: 'var(--fx-typo-regular-title1-weight)',
+    letterSpacing: 'var(--fx-typo-regular-title1-spacing)',
+  },
+  'regular-large-title': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-regular-large-title-size)',
+    lineHeight: 'var(--fx-typo-regular-large-title-line)',
+    fontWeight: 'var(--fx-typo-regular-large-title-weight)',
+    letterSpacing: 'var(--fx-typo-regular-large-title-spacing)',
+  },
+  'medium-caption2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-caption2-size)',
+    lineHeight: 'var(--fx-typo-medium-caption2-line)',
+    fontWeight: 'var(--fx-typo-medium-caption2-weight)',
+    letterSpacing: 'var(--fx-typo-medium-caption2-spacing)',
+  },
+  'medium-caption1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-caption1-size)',
+    lineHeight: 'var(--fx-typo-medium-caption1-line)',
+    fontWeight: 'var(--fx-typo-medium-caption1-weight)',
+    letterSpacing: 'var(--fx-typo-medium-caption1-spacing)',
+  },
+  'medium-small-body': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-small-body-size)',
+    lineHeight: 'var(--fx-typo-medium-small-body-line)',
+    fontWeight: 'var(--fx-typo-medium-small-body-weight)',
+    letterSpacing: 'var(--fx-typo-medium-small-body-spacing)',
+  },
+  'medium-body': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-body-size)',
+    lineHeight: 'var(--fx-typo-medium-body-line)',
+    fontWeight: 'var(--fx-typo-medium-body-weight)',
+    letterSpacing: 'var(--fx-typo-medium-body-spacing)',
+  },
+  'medium-body-condensed': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-body-condensed-size)',
+    lineHeight: 'var(--fx-typo-medium-body-condensed-line)',
+    fontWeight: 'var(--fx-typo-medium-body-condensed-weight)',
+    letterSpacing: 'var(--fx-typo-medium-body-condensed-spacing)',
+  },
+  'medium-headline2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-headline2-size)',
+    lineHeight: 'var(--fx-typo-medium-headline2-line)',
+    fontWeight: 'var(--fx-typo-medium-headline2-weight)',
+    letterSpacing: 'var(--fx-typo-medium-headline2-spacing)',
+  },
+  'medium-headline1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-headline1-size)',
+    lineHeight: 'var(--fx-typo-medium-headline1-line)',
+    fontWeight: 'var(--fx-typo-medium-headline1-weight)',
+    letterSpacing: 'var(--fx-typo-medium-headline1-spacing)',
+  },
+  'medium-title4': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-title4-size)',
+    lineHeight: 'var(--fx-typo-medium-title4-line)',
+    fontWeight: 'var(--fx-typo-medium-title4-weight)',
+    letterSpacing: 'var(--fx-typo-medium-title4-spacing)',
+  },
+  'medium-title3': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-title3-size)',
+    lineHeight: 'var(--fx-typo-medium-title3-line)',
+    fontWeight: 'var(--fx-typo-medium-title3-weight)',
+    letterSpacing: 'var(--fx-typo-medium-title3-spacing)',
+  },
+  'medium-title3-condensed': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-title3-condensed-size)',
+    lineHeight: 'var(--fx-typo-medium-title3-condensed-line)',
+    fontWeight: 'var(--fx-typo-medium-title3-condensed-weight)',
+    letterSpacing: 'var(--fx-typo-medium-title3-condensed-spacing)',
+  },
+  'medium-title2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-title2-size)',
+    lineHeight: 'var(--fx-typo-medium-title2-line)',
+    fontWeight: 'var(--fx-typo-medium-title2-weight)',
+    letterSpacing: 'var(--fx-typo-medium-title2-spacing)',
+  },
+  'medium-title1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-title1-size)',
+    lineHeight: 'var(--fx-typo-medium-title1-line)',
+    fontWeight: 'var(--fx-typo-medium-title1-weight)',
+    letterSpacing: 'var(--fx-typo-medium-title1-spacing)',
+  },
+  'medium-large-title': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-medium-large-title-size)',
+    lineHeight: 'var(--fx-typo-medium-large-title-line)',
+    fontWeight: 'var(--fx-typo-medium-large-title-weight)',
+    letterSpacing: 'var(--fx-typo-medium-large-title-spacing)',
+  },
+  'bold-title2': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-bold-title2-size)',
+    lineHeight: 'var(--fx-typo-bold-title2-line)',
+    fontWeight: 'var(--fx-typo-bold-title2-weight)',
+    letterSpacing: 'var(--fx-typo-bold-title2-spacing)',
+  },
+  'bold-title1': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-bold-title1-size)',
+    lineHeight: 'var(--fx-typo-bold-title1-line)',
+    fontWeight: 'var(--fx-typo-bold-title1-weight)',
+    letterSpacing: 'var(--fx-typo-bold-title1-spacing)',
+  },
+  'bold-large-title': {
+    fontFamily: 'var(--fx-font-sans)',
+    fontSize: 'var(--fx-typo-bold-large-title-size)',
+    lineHeight: 'var(--fx-typo-bold-large-title-line)',
+    fontWeight: 'var(--fx-typo-bold-large-title-weight)',
+    letterSpacing: 'var(--fx-typo-bold-large-title-spacing)',
+  },
+  'display-small': {
+    fontFamily: 'var(--fx-font-display)',
+    fontSize: 'var(--fx-typo-display-small-size)',
+    lineHeight: 'var(--fx-typo-display-small-line)',
+    fontWeight: 'var(--fx-typo-display-small-weight)',
+    letterSpacing: 'var(--fx-typo-display-small-spacing)',
+  },
+  'display-medium': {
+    fontFamily: 'var(--fx-font-display)',
+    fontSize: 'var(--fx-typo-display-medium-size)',
+    lineHeight: 'var(--fx-typo-display-medium-line)',
+    fontWeight: 'var(--fx-typo-display-medium-weight)',
+    letterSpacing: 'var(--fx-typo-display-medium-spacing)',
+  },
+  'display-large': {
+    fontFamily: 'var(--fx-font-display)',
+    fontSize: 'var(--fx-typo-display-large-size)',
+    lineHeight: 'var(--fx-typo-display-large-line)',
+    fontWeight: 'var(--fx-typo-display-large-weight)',
+    letterSpacing: 'var(--fx-typo-display-large-spacing)',
+  },
+  'display-xlarge': {
+    fontFamily: 'var(--fx-font-display)',
+    fontSize: 'var(--fx-typo-display-xlarge-size)',
+    lineHeight: 'var(--fx-typo-display-xlarge-line)',
+    fontWeight: 'var(--fx-typo-display-xlarge-weight)',
+    letterSpacing: 'var(--fx-typo-display-xlarge-spacing)',
+  },
+};
+
+export const Text = ({
+  as = 'p',
+  children,
+  tone = 'primary',
+  variant = 'regular-body',
+  style,
+  ...props
+}: TextProps) => {
+  const Comp = as;
+  return (
+    <Comp
+      style={{
+        margin: 0,
+        color: tones[tone],
+        ...variants[variant],
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+};
diff --git a/packages/design-system/src/components/atoms/VideoPlayerIconButton.tsx b/packages/design-system/src/components/atoms/VideoPlayerIconButton.tsx
new file mode 100644
index 0000000..bef94ff
--- /dev/null
+++ b/packages/design-system/src/components/atoms/VideoPlayerIconButton.tsx
@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { getVideoPlayerIconSetAsset, type VideoPlayerIconSetName } from '../../assets/icons';
+
+type VideoPlayerIconButtonProps = {
+  icon: VideoPlayerIconSetName;
+  state?: 'default' | 'hover';
+  size?: number | string;
+  ariaLabel: string;
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const buttonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  margin: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export const VideoPlayerIconButton = ({
+  icon,
+  state = 'default',
+  size = 'var(--fx-size-pattern-video-icon-control)',
+  ariaLabel,
+  onClick,
+  style,
+}: VideoPlayerIconButtonProps): ReactNode => (
+  <button type="button" aria-label={ariaLabel} onClick={onClick} style={{ ...buttonStyle, ...style }}>
+    <img
+      src={getVideoPlayerIconSetAsset(icon, state)}
+      alt=""
+      aria-hidden="true"
+      width={size}
+      height={size}
+      style={{ width: size, height: size, objectFit: 'contain' }}
+    />
+  </button>
+);
diff --git a/packages/design-system/src/components/atoms/index.ts b/packages/design-system/src/components/atoms/index.ts
new file mode 100644
index 0000000..23225e5
--- /dev/null
+++ b/packages/design-system/src/components/atoms/index.ts
@@ -0,0 +1,11 @@
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Dropdown';
+export * from './FaqToggleIcon';
+export * from './HeroBannerControlButton';
+export * from './Icon';
+export * from './Input';
+export * from './ProfileAvatar';
+export * from './Text';
+export * from './VideoPlayerIconButton';
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
new file mode 100644
index 0000000..5e1aa18
--- /dev/null
+++ b/packages/design-system/src/components/index.ts
@@ -0,0 +1,5 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';
+export * from './pages';
diff --git a/packages/design-system/src/components/molecules/AccessKeyForm.tsx b/packages/design-system/src/components/molecules/AccessKeyForm.tsx
new file mode 100644
index 0000000..07f0092
--- /dev/null
+++ b/packages/design-system/src/components/molecules/AccessKeyForm.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Input } from '../atoms/Input';
+
+type AccessKeyFormProps = {
+  value: string;
+  onChange: (next: string) => void;
+  onSubmit: () => void;
+  loading?: boolean;
+  submitLabel?: string;
+};
+
+export const AccessKeyForm = ({ value, onChange, onSubmit, loading, submitLabel = 'Load catalog' }: AccessKeyFormProps): ReactNode => (
+  <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 'var(--fx-space-2)' }}>
+    <Input
+      placeholder="Event access key (optional)"
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+    />
+    <Button type="button" onClick={onSubmit} disabled={loading}>
+      {loading ? 'Loading...' : submitLabel}
+    </Button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/BrowseLanguagePattern.tsx b/packages/design-system/src/components/molecules/BrowseLanguagePattern.tsx
new file mode 100644
index 0000000..6a5498c
--- /dev/null
+++ b/packages/design-system/src/components/molecules/BrowseLanguagePattern.tsx
@@ -0,0 +1,65 @@
+import type { CSSProperties } from 'react';
+import { Dropdown, type DropdownOption } from '../atoms/Dropdown';
+
+type BrowseLanguagePatternProps = {
+  originalLanguageOptions: DropdownOption[];
+  languageOptions: DropdownOption[];
+  suggestionOptions: DropdownOption[];
+  originalLanguageValue?: string;
+  languageValue?: string;
+  suggestionValue?: string;
+  onOriginalLanguageChange?: (value: string, option: DropdownOption) => void;
+  onLanguageChange?: (value: string, option: DropdownOption) => void;
+  onSuggestionChange?: (value: string, option: DropdownOption) => void;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+  flexWrap: 'wrap',
+};
+
+export const BrowseLanguagePattern = ({
+  originalLanguageOptions,
+  languageOptions,
+  suggestionOptions,
+  originalLanguageValue,
+  languageValue,
+  suggestionValue,
+  onOriginalLanguageChange,
+  onLanguageChange,
+  onSuggestionChange,
+  style,
+}: BrowseLanguagePatternProps) => (
+  <div style={{ ...rowStyle, ...style }}>
+    <Dropdown
+      ariaLabel="Original language"
+      variant="browse"
+      surface="black"
+      options={originalLanguageOptions}
+      value={originalLanguageValue}
+      onChange={onOriginalLanguageChange}
+      placeholder="Original Language"
+    />
+    <Dropdown
+      ariaLabel="Language"
+      variant="browse"
+      surface="black"
+      options={languageOptions}
+      value={languageValue}
+      onChange={onLanguageChange}
+      placeholder="English"
+    />
+    <Dropdown
+      ariaLabel="Suggestions"
+      variant="browse"
+      surface="black"
+      options={suggestionOptions}
+      value={suggestionValue}
+      onChange={onSuggestionChange}
+      placeholder="Suggestions For You"
+    />
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/ContinueWatchingCard.tsx b/packages/design-system/src/components/molecules/ContinueWatchingCard.tsx
new file mode 100644
index 0000000..8a78f60
--- /dev/null
+++ b/packages/design-system/src/components/molecules/ContinueWatchingCard.tsx
@@ -0,0 +1,92 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+
+type ContinueWatchingCardProps = {
+  imageUrl: string;
+  imageAlt?: string;
+  progress: number;
+  progressLabel?: string;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const cardStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-movie-card-standard-width)',
+  border: 0,
+  padding: 0,
+  background: 'transparent',
+  cursor: 'pointer',
+  display: 'grid',
+  gap: 'var(--fx-space-2)',
+  textAlign: 'left',
+};
+
+const imageWrapperStyle: CSSProperties = {
+  position: 'relative',
+  width: 'var(--fx-size-pattern-movie-card-standard-width)',
+  height: 'var(--fx-size-pattern-movie-card-standard-height)',
+  borderRadius: 'var(--fx-radius-sm)',
+  overflow: 'hidden',
+  background: 'var(--fx-color-bg-hover)',
+};
+
+const imageStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
+
+const progressTrackStyle: CSSProperties = {
+  position: 'relative',
+  width: 'var(--fx-size-pattern-movie-progress-track-width)',
+  height: 'var(--fx-size-pattern-movie-progress-track-height)',
+  background: 'var(--fx-color-movie-card-progress-track)',
+  borderRadius: '9999px',
+  overflow: 'hidden',
+};
+
+export const ContinueWatchingCard = ({
+  imageUrl,
+  imageAlt = '',
+  progress,
+  progressLabel,
+  presetIconName,
+  onClick,
+  style,
+}: ContinueWatchingCardProps): ReactNode => {
+  const safeProgress = Math.max(0, Math.min(100, progress));
+
+  return (
+    <button type="button" style={{ ...cardStyle, ...style }} onClick={onClick} aria-label={progressLabel ?? imageAlt}>
+      <div style={imageWrapperStyle}>
+        <img src={imageUrl} alt={imageAlt} style={imageStyle} />
+        {presetIconName ? (
+          <Icon
+            name={presetIconName}
+            size="var(--fx-size-pattern-movie-card-preset-width)"
+            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)',
+            }}
+          />
+        ) : null}
+      </div>
+
+      <div style={progressTrackStyle}>
+        <div
+          aria-hidden="true"
+          style={{
+            width: `${safeProgress}%`,
+            height: '100%',
+            background: 'var(--fx-color-brand-primary-active)',
+          }}
+        />
+      </div>
+    </button>
+  );
+};
diff --git a/packages/design-system/src/components/molecules/EmailGetStartedPattern.tsx b/packages/design-system/src/components/molecules/EmailGetStartedPattern.tsx
new file mode 100644
index 0000000..d2a9e6f
--- /dev/null
+++ b/packages/design-system/src/components/molecules/EmailGetStartedPattern.tsx
@@ -0,0 +1,82 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Input } from '../atoms/Input';
+
+type EmailGetStartedPatternProps = {
+  emailValue: string;
+  onEmailChange: (next: string) => void;
+  onSubmit: () => void;
+  emailPlaceholder?: string;
+  buttonLabel?: string;
+  disabled?: boolean;
+  showArrow?: boolean;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  gap: 'var(--fx-space-1)',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+};
+
+const inputStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-get-started-input-width)',
+  maxWidth: '100%',
+};
+
+const buttonStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-get-started-button-width)',
+  minHeight: 'var(--fx-size-pattern-get-started-button-height)',
+  borderRadius: 'var(--fx-radius-input)',
+  background: 'var(--fx-color-brand-primary)',
+  borderColor: 'var(--fx-color-brand-primary)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 'var(--fx-space-2)',
+  fontSize: 'var(--fx-typo-medium-headline2-size)',
+  lineHeight: 'var(--fx-typo-medium-headline2-line)',
+  fontWeight: 'var(--fx-typo-medium-headline2-weight)',
+  letterSpacing: 'var(--fx-typo-medium-headline2-spacing)',
+};
+
+export const EmailGetStartedPattern = ({
+  emailValue,
+  onEmailChange,
+  onSubmit,
+  emailPlaceholder = 'Email address',
+  buttonLabel = 'Get Started',
+  disabled,
+  showArrow = true,
+  style,
+}: EmailGetStartedPatternProps): ReactNode => (
+  <div style={{ ...rowStyle, ...style }}>
+    <Input
+      type="email"
+      value={emailValue}
+      placeholder={emailPlaceholder}
+      onChange={(event) => onEmailChange(event.target.value)}
+      style={inputStyle}
+    />
+    <Button type="button" onClick={onSubmit} disabled={disabled} style={buttonStyle}>
+      <span>{buttonLabel}</span>
+      {showArrow ? (
+        <svg
+          width="var(--fx-size-pattern-get-started-arrow-width)"
+          height="var(--fx-size-pattern-get-started-arrow-height)"
+          viewBox="0 0 9 16"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M1 1L8 8L1 15"
+            stroke="var(--fx-color-text-primary)"
+            strokeWidth="var(--fx-size-pattern-get-started-arrow-stroke)"
+            strokeLinecap="square"
+          />
+        </svg>
+      ) : null}
+    </Button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/EpisodeListItem.tsx b/packages/design-system/src/components/molecules/EpisodeListItem.tsx
new file mode 100644
index 0000000..7c48acb
--- /dev/null
+++ b/packages/design-system/src/components/molecules/EpisodeListItem.tsx
@@ -0,0 +1,86 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+
+type EpisodeListItemProps = {
+  itemAriaLabel?: string;
+  episodeNumber: number;
+  title: string;
+  durationLabel: string;
+  description: string;
+  imageUrl: string;
+  imageAlt?: string;
+  active?: boolean;
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const itemStyle: CSSProperties = {
+  width: '100%',
+  border: 0,
+  padding: 'var(--fx-space-4)',
+  margin: 0,
+  display: 'grid',
+  gridTemplateColumns: 'var(--fx-size-pattern-episode-thumb-width) auto',
+  gap: 'var(--fx-space-4)',
+  background: 'transparent',
+  textAlign: 'left',
+  cursor: 'pointer',
+  borderRadius: 'var(--fx-radius-sm)',
+};
+
+const thumbStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-episode-thumb-width)',
+  height: 'var(--fx-size-pattern-episode-thumb-height)',
+  borderRadius: 'var(--fx-radius-sm)',
+  objectFit: 'cover',
+  display: 'block',
+  background: 'var(--fx-color-bg-hover)',
+};
+
+const headerStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'baseline',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-3)',
+};
+
+export const EpisodeListItem = ({
+  itemAriaLabel,
+  episodeNumber,
+  title,
+  durationLabel,
+  description,
+  imageUrl,
+  imageAlt = '',
+  active = false,
+  onClick,
+  style,
+}: EpisodeListItemProps): ReactNode => (
+  <button
+    type="button"
+    style={{
+      ...itemStyle,
+      ...(active
+        ? {
+            background: 'var(--fx-color-movie-card-active-background)',
+            outline: 'var(--fx-size-border-default) solid var(--fx-color-border-default)',
+          }
+        : null),
+      ...style,
+    }}
+    onClick={onClick}
+    aria-label={itemAriaLabel ?? title}
+  >
+    <img src={imageUrl} alt={imageAlt} style={thumbStyle} />
+
+    <div style={{ display: 'grid', gap: 'var(--fx-space-2)' }}>
+      <div style={headerStyle}>
+        <Text as="span" variant="medium-body">{`${episodeNumber}. ${title}`}</Text>
+        <Text as="span" variant="regular-caption1" tone="secondary">{durationLabel}</Text>
+      </div>
+      <Text as="p" variant="regular-caption1" tone="secondary" style={{ margin: 0 }}>
+        {description}
+      </Text>
+    </div>
+  </button>
+);
diff --git a/packages/design-system/src/components/molecules/FaqAccordionItem.tsx b/packages/design-system/src/components/molecules/FaqAccordionItem.tsx
new file mode 100644
index 0000000..5ec9748
--- /dev/null
+++ b/packages/design-system/src/components/molecules/FaqAccordionItem.tsx
@@ -0,0 +1,108 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useState } from 'react';
+import { FaqToggleIcon } from '../atoms/FaqToggleIcon';
+import { Text } from '../atoms/Text';
+
+type FaqAnswerContent = ReactNode | string | string[];
+
+export type FaqAccordionItemProps = {
+  id: string;
+  question: string;
+  answer: FaqAnswerContent;
+  expanded: boolean;
+  onToggle: () => void;
+  style?: CSSProperties;
+};
+
+const itemStyle: CSSProperties = {
+  background: 'var(--fx-color-faq-item-background-default)',
+};
+
+const triggerStyle: CSSProperties = {
+  width: '100%',
+  minHeight: 'var(--fx-size-pattern-faq-item-min-height)',
+  padding: 'var(--fx-space-4) var(--fx-size-pattern-faq-item-padding-x)',
+  border: 0,
+  background: 'transparent',
+  color: 'var(--fx-color-text-primary)',
+  textAlign: 'left',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-4)',
+  cursor: 'pointer',
+};
+
+const answerStyle: CSSProperties = {
+  borderTop: 'var(--fx-size-border-default) solid var(--fx-color-faq-divider)',
+  background: 'var(--fx-color-faq-answer-background)',
+  padding: 'var(--fx-space-6) var(--fx-size-pattern-faq-item-padding-x)',
+  display: 'grid',
+  gap: 'var(--fx-size-pattern-faq-answer-gap)',
+};
+
+const textStyle: CSSProperties = {
+  margin: 0,
+  fontSize: 'var(--fx-size-pattern-faq-text-size)',
+  lineHeight: 'var(--fx-size-pattern-faq-text-line-height)',
+};
+
+const renderAnswer = (answer: FaqAnswerContent) => {
+  if (Array.isArray(answer)) {
+    return answer.map((paragraph, index) => (
+      <Text key={`${index}-${paragraph}`} as="p" variant="regular-title3" style={textStyle}>
+        {paragraph}
+      </Text>
+    ));
+  }
+
+  if (typeof answer === 'string') {
+    return (
+      <Text as="p" variant="regular-title3" style={textStyle}>
+        {answer}
+      </Text>
+    );
+  }
+
+  return answer;
+};
+
+export const FaqAccordionItem = ({ id, question, answer, expanded, onToggle, style }: FaqAccordionItemProps) => {
+  const [hovered, setHovered] = useState(false);
+  const triggerId = `faq-trigger-${id}`;
+  const panelId = `faq-panel-${id}`;
+
+  return (
+    <article
+      style={{
+        ...itemStyle,
+        background: hovered
+          ? 'var(--fx-color-faq-item-background-hover)'
+          : 'var(--fx-color-faq-item-background-default)',
+        ...style,
+      }}
+    >
+      <button
+        type="button"
+        id={triggerId}
+        aria-expanded={expanded}
+        aria-controls={panelId}
+        onClick={onToggle}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+        style={triggerStyle}
+      >
+        <Text as="span" variant="regular-title2" style={textStyle}>
+          {question}
+        </Text>
+        <FaqToggleIcon expanded={expanded} />
+      </button>
+
+      {expanded ? (
+        <div id={panelId} role="region" aria-labelledby={triggerId} style={answerStyle}>
+          {renderAnswer(answer)}
+        </div>
+      ) : null}
+    </article>
+  );
+};
diff --git a/packages/design-system/src/components/molecules/FormField.tsx b/packages/design-system/src/components/molecules/FormField.tsx
new file mode 100644
index 0000000..022fe0d
--- /dev/null
+++ b/packages/design-system/src/components/molecules/FormField.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { Input } from '../atoms/Input';
+import { Text } from '../atoms/Text';
+
+type FormFieldProps = {
+  label: string;
+  value: string;
+  onChange: (next: string) => void;
+  placeholder?: string;
+  type?: string;
+  required?: boolean;
+  hint?: string;
+};
+
+export const FormField = ({
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  required,
+  hint,
+}: FormFieldProps): ReactNode => (
+  <label style={{ display: 'grid', gap: 'var(--fx-space-2)' }}>
+    <Text as="span" tone="secondary" variant="regular-caption1">
+      {label}
+    </Text>
+    <Input
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      required={required}
+      onChange={(event) => onChange(event.target.value)}
+    />
+    {hint ? (
+      <Text as="span" tone="tertiary" variant="regular-caption1">
+        {hint}
+      </Text>
+    ) : null}
+  </label>
+);
diff --git a/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx b/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx
new file mode 100644
index 0000000..beb76b6
--- /dev/null
+++ b/packages/design-system/src/components/molecules/HeroBannerActionsPattern.tsx
@@ -0,0 +1,59 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Icon } from '../atoms/Icon';
+
+type HeroBannerActionsPatternProps = {
+  primaryLabel: string;
+  secondaryLabel: string;
+  onPrimaryClick?: () => void;
+  onSecondaryClick?: () => void;
+  primaryLeadingIconName?: 'videoPlayerPlayDefault' | 'play';
+  secondaryLeadingIconName?: 'info' | 'question';
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+  flexWrap: 'wrap',
+};
+
+export const HeroBannerActionsPattern = ({
+  primaryLabel,
+  secondaryLabel,
+  onPrimaryClick,
+  onSecondaryClick,
+  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>
+);
diff --git a/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx b/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx
new file mode 100644
index 0000000..ef193d6
--- /dev/null
+++ b/packages/design-system/src/components/molecules/HeroBannerRatingPattern.tsx
@@ -0,0 +1,40 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import { Text } from '../atoms/Text';
+
+type HeroBannerRatingPatternProps = {
+  ratingLabel: string;
+  leadingIconName?: 'heroBannerPreviewRepeatArrowDefault' | 'heroBannerPreviewRepeatArrowHover';
+  style?: CSSProperties;
+};
+
+const wrapperStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+};
+
+const ratingBoxStyle: CSSProperties = {
+  minWidth: 'var(--fx-size-pattern-video-rating-width)',
+  minHeight: 'var(--fx-size-pattern-video-rating-height)',
+  background: 'var(--fx-color-bg-hover)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  padding: '0 var(--fx-space-4)',
+  borderLeft: 'var(--fx-size-border-default) solid var(--fx-color-text-primary)',
+};
+
+export const HeroBannerRatingPattern = ({
+  ratingLabel,
+  leadingIconName = 'heroBannerPreviewRepeatArrowDefault',
+  style,
+}: HeroBannerRatingPatternProps): ReactNode => (
+  <div style={{ ...wrapperStyle, ...style }}>
+    <Icon name={leadingIconName} size="var(--fx-size-pattern-video-icon-control)" />
+    <div style={ratingBoxStyle}>
+      <Text as="span" variant="medium-headline2">
+        {ratingLabel}
+      </Text>
+    </div>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/HeroBannerUtilitiesPattern.tsx b/packages/design-system/src/components/molecules/HeroBannerUtilitiesPattern.tsx
new file mode 100644
index 0000000..503b041
--- /dev/null
+++ b/packages/design-system/src/components/molecules/HeroBannerUtilitiesPattern.tsx
@@ -0,0 +1,62 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { HeroBannerControlButton } from '../atoms/HeroBannerControlButton';
+import { Text } from '../atoms/Text';
+
+type HeroBannerUtilitiesPatternProps = {
+  ratingLabel: string;
+  muteControlLabel: string;
+  audioDescriptionControlLabel: string;
+  replayControlLabel: string;
+  onMuteToggle?: () => void;
+  onAudioDescriptionToggle?: () => void;
+  onReplayToggle?: () => void;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-4)',
+  flexWrap: 'wrap',
+};
+
+const controlsStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+};
+
+const ratingStyle: CSSProperties = {
+  minWidth: 'var(--fx-size-pattern-hero-rating-width)',
+  minHeight: 'var(--fx-size-pattern-hero-rating-height)',
+  padding: '0 var(--fx-space-4)',
+  borderLeft: 'var(--fx-size-border-default) solid var(--fx-color-text-primary)',
+  background: 'var(--fx-color-hero-rating-background)',
+  display: 'inline-flex',
+  alignItems: 'center',
+};
+
+export const HeroBannerUtilitiesPattern = ({
+  ratingLabel,
+  muteControlLabel,
+  audioDescriptionControlLabel,
+  replayControlLabel,
+  onMuteToggle,
+  onAudioDescriptionToggle,
+  onReplayToggle,
+  style,
+}: HeroBannerUtilitiesPatternProps): ReactNode => (
+  <div style={{ ...rowStyle, ...style }}>
+    <div style={controlsStyle}>
+      <HeroBannerControlButton iconSet="mute" label={muteControlLabel} onClick={onMuteToggle} />
+      <HeroBannerControlButton iconSet="sound" label={audioDescriptionControlLabel} onClick={onAudioDescriptionToggle} />
+      <HeroBannerControlButton iconSet="repeatArrow" label={replayControlLabel} onClick={onReplayToggle} />
+    </div>
+    <div style={ratingStyle}>
+      <Text as="span" variant="medium-headline2">
+        {ratingLabel}
+      </Text>
+    </div>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/LessonTile.tsx b/packages/design-system/src/components/molecules/LessonTile.tsx
new file mode 100644
index 0000000..5cecd23
--- /dev/null
+++ b/packages/design-system/src/components/molecules/LessonTile.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { Badge } from '../atoms/Badge';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+
+type LessonTileProps = {
+  title: string;
+  status: 'released' | 'locked' | 'expired';
+  action?: ReactNode;
+};
+
+export const LessonTile = ({ title, status, action }: LessonTileProps): ReactNode => (
+  <Card
+    style={{
+      minHeight: 160,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      gap: 'var(--fx-space-3)',
+      background: 'linear-gradient(180deg, rgb(0 0 0 / 30%) 0%, rgb(0 0 0 / 75%) 100%), var(--fx-color-bg-card)',
+    }}
+  >
+    <div>
+      <Text as="strong">{title}</Text>
+      <div style={{ marginTop: 'var(--fx-space-2)' }}>
+        <Badge variant={status}>{status}</Badge>
+      </div>
+    </div>
+    {action}
+  </Card>
+);
diff --git a/packages/design-system/src/components/molecules/MovieBlockCard.tsx b/packages/design-system/src/components/molecules/MovieBlockCard.tsx
new file mode 100644
index 0000000..411c53d
--- /dev/null
+++ b/packages/design-system/src/components/molecules/MovieBlockCard.tsx
@@ -0,0 +1,73 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+
+type MovieBlockCardSize = 'small' | 'standard' | 'medium';
+
+type MovieBlockCardProps = {
+  imageUrl: string;
+  imageAlt?: string;
+  size?: MovieBlockCardSize;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const sizeStyles: Record<MovieBlockCardSize, CSSProperties> = {
+  small: {
+    width: 'var(--fx-size-pattern-movie-card-small-width)',
+    height: 'var(--fx-size-pattern-movie-card-small-height)',
+  },
+  standard: {
+    width: 'var(--fx-size-pattern-movie-card-standard-width)',
+    height: 'var(--fx-size-pattern-movie-card-standard-height)',
+  },
+  medium: {
+    width: 'var(--fx-size-pattern-movie-card-medium-width)',
+    height: 'var(--fx-size-pattern-movie-card-medium-height)',
+  },
+};
+
+const cardBaseStyle: CSSProperties = {
+  border: 0,
+  margin: 0,
+  padding: 0,
+  borderRadius: 'var(--fx-radius-sm)',
+  overflow: 'hidden',
+  position: 'relative',
+  background: 'var(--fx-color-bg-hover)',
+  cursor: 'pointer',
+  display: 'inline-flex',
+};
+
+const imageStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
+
+export const MovieBlockCard = ({
+  imageUrl,
+  imageAlt = '',
+  size = 'standard',
+  presetIconName,
+  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)"
+        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)',
+        }}
+      />
+    ) : null}
+  </button>
+);
diff --git a/packages/design-system/src/components/molecules/MovieInfoPattern.tsx b/packages/design-system/src/components/molecules/MovieInfoPattern.tsx
new file mode 100644
index 0000000..2035090
--- /dev/null
+++ b/packages/design-system/src/components/molecules/MovieInfoPattern.tsx
@@ -0,0 +1,129 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import { Text } from '../atoms/Text';
+import type { IconName } from '../../assets/icons';
+
+type MovieInfoDetail = {
+  label: string;
+  value?: string;
+};
+
+type MovieInfoPatternProps = {
+  statusLabel?: string;
+  seasonsLabel?: string;
+  yearLabel?: string;
+  qualityIconName?: IconName;
+  qualityIconAlt?: string;
+  audioLabel?: string;
+  ratingIconName?: IconName;
+  ratingIconAlt?: string;
+  presetIconName?: IconName;
+  presetIconAlt?: string;
+  details?: MovieInfoDetail[];
+  style?: CSSProperties;
+};
+
+const layoutStyle: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start',
+  gap: 'var(--fx-space-12)',
+  flexWrap: 'wrap',
+};
+
+const leftColumnStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-3)',
+  minWidth: 'var(--fx-size-pattern-movie-info-left-min-width)',
+};
+
+const summaryRowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-3)',
+  flexWrap: 'wrap',
+};
+
+const rightColumnStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-8)',
+  minWidth: 'var(--fx-size-pattern-movie-info-right-min-width)',
+};
+
+const detailRowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: 'var(--fx-space-2)',
+  flexWrap: 'wrap',
+};
+
+const defaultDetails: MovieInfoDetail[] = [{ label: 'Cast:' }, { label: 'Genres:' }, { label: 'This show is:' }];
+
+export const MovieInfoPattern = ({
+  statusLabel = 'New',
+  seasonsLabel = '3 Seasons',
+  yearLabel = '2024',
+  qualityIconName = 'videoQualityHd',
+  qualityIconAlt = 'HD',
+  audioLabel = 'AD',
+  ratingIconName = 'ratingTvMa',
+  ratingIconAlt = 'TV-MA',
+  presetIconName = 'presetTop10',
+  presetIconAlt = 'Top 10',
+  details = defaultDetails,
+  style,
+}: MovieInfoPatternProps): ReactNode => (
+  <section style={{ ...layoutStyle, ...style }}>
+    <div style={leftColumnStyle}>
+      <div style={summaryRowStyle}>
+        <Text variant="medium-headline2" style={{ color: 'var(--fx-color-success)' }}>
+          {statusLabel}
+        </Text>
+        <Text variant="medium-headline2" tone="secondary">
+          {seasonsLabel}
+        </Text>
+        <Text variant="medium-headline2" tone="secondary">
+          {yearLabel}
+        </Text>
+        <Icon
+          name={qualityIconName}
+          alt={qualityIconAlt}
+          size="var(--fx-size-pattern-movie-info-quality-icon-width)"
+          style={{ height: 'var(--fx-size-pattern-movie-info-quality-icon-height)' }}
+        />
+        <Text variant="medium-headline2" tone="secondary">
+          {audioLabel}
+        </Text>
+      </div>
+
+      <Icon
+        name={ratingIconName}
+        alt={ratingIconAlt}
+        size="var(--fx-size-pattern-movie-info-rating-icon-width)"
+        style={{ height: 'var(--fx-size-pattern-movie-info-rating-icon-height)' }}
+      />
+
+      <Icon
+        name={presetIconName}
+        alt={presetIconAlt}
+        size="var(--fx-size-pattern-movie-info-preset-icon-width)"
+        style={{ height: 'var(--fx-size-pattern-movie-info-preset-icon-height)' }}
+      />
+    </div>
+
+    <div style={rightColumnStyle}>
+      {details.map((detail) => (
+        <div key={detail.label} style={detailRowStyle}>
+          <Text variant="medium-headline2" tone="secondary">
+            {detail.label}
+          </Text>
+          {detail.value ? (
+            <Text variant="regular-headline2" tone="secondary">
+              {detail.value}
+            </Text>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/molecules/MoviePreviewDetailsPattern.tsx b/packages/design-system/src/components/molecules/MoviePreviewDetailsPattern.tsx
new file mode 100644
index 0000000..11951cf
--- /dev/null
+++ b/packages/design-system/src/components/molecules/MoviePreviewDetailsPattern.tsx
@@ -0,0 +1,46 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import { Text } from '../atoms/Text';
+
+type MoviePreviewDetailsPatternProps = {
+  ratingIconName?: 'ratingTvMa' | 'ratingTv14' | 'ratingTvPg' | 'ratingTvG';
+  yearLabel?: string;
+  onAddClick?: () => void;
+  style?: CSSProperties;
+};
+
+const wrapperStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+  flexWrap: 'wrap',
+};
+
+const iconButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export const MoviePreviewDetailsPattern = ({
+  ratingIconName = 'ratingTvMa',
+  yearLabel = '2021',
+  onAddClick,
+  style,
+}: MoviePreviewDetailsPatternProps): ReactNode => (
+  <div style={{ ...wrapperStyle, ...style }}>
+    <Icon name={ratingIconName} size="var(--fx-size-pattern-video-rating-icon-width)" />
+    <Icon name="videoQualityHd" size="var(--fx-size-pattern-video-quality-icon-width)" />
+    <Text as="span" variant="medium-headline2" tone="secondary">
+      {yearLabel}
+    </Text>
+    <button type="button" onClick={onAddClick} style={iconButtonStyle} aria-label="Add to my list">
+      <Icon name="moviePreviewAddDefault" size="var(--fx-size-pattern-video-icon-control)" />
+    </button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/MoviePreviewPattern.tsx b/packages/design-system/src/components/molecules/MoviePreviewPattern.tsx
new file mode 100644
index 0000000..9739c4a
--- /dev/null
+++ b/packages/design-system/src/components/molecules/MoviePreviewPattern.tsx
@@ -0,0 +1,62 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+
+type MoviePreviewPatternProps = {
+  onPlayClick?: () => void;
+  onAddClick?: () => void;
+  onThumbUpClick?: () => void;
+  onExpandClick?: () => void;
+  style?: CSSProperties;
+};
+
+const wrapperStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-video-movie-preview-width)',
+  maxWidth: '100%',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: 'var(--fx-space-4)',
+};
+
+const controlsStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-1)',
+};
+
+const iconButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export const MoviePreviewPattern = ({
+  onPlayClick,
+  onAddClick,
+  onThumbUpClick,
+  onExpandClick,
+  style,
+}: MoviePreviewPatternProps): ReactNode => (
+  <div style={{ ...wrapperStyle, ...style }}>
+    <div style={controlsStyle}>
+      <button type="button" onClick={onPlayClick} style={iconButtonStyle} aria-label="Play">
+        <Icon name="moviePreviewPlayDefault" size="var(--fx-size-pattern-video-icon-control)" />
+      </button>
+      <button type="button" onClick={onAddClick} style={iconButtonStyle} aria-label="Add">
+        <Icon name="moviePreviewAddDefault" size="var(--fx-size-pattern-video-icon-control)" />
+      </button>
+      <button type="button" onClick={onThumbUpClick} style={iconButtonStyle} aria-label="Thumb up">
+        <Icon name="moviePreviewThumbUpDefault" size="var(--fx-size-pattern-video-icon-control)" />
+      </button>
+    </div>
+
+    <button type="button" onClick={onExpandClick} style={iconButtonStyle} aria-label="Expand preview">
+      <Icon name="moviePreviewArrowDownDefault" size="var(--fx-size-pattern-video-icon-control)" />
+    </button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/PlayAddThumbUpPattern.tsx b/packages/design-system/src/components/molecules/PlayAddThumbUpPattern.tsx
new file mode 100644
index 0000000..b695811
--- /dev/null
+++ b/packages/design-system/src/components/molecules/PlayAddThumbUpPattern.tsx
@@ -0,0 +1,63 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Icon } from '../atoms/Icon';
+
+type PlayAddThumbUpPatternProps = {
+  playLabel: string;
+  playControlLabel: string;
+  addControlLabel: string;
+  thumbUpControlLabel: string;
+  onPlayClick?: () => void;
+  onAddClick?: () => void;
+  onThumbUpClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+  flexWrap: 'wrap',
+};
+
+const iconButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export const PlayAddThumbUpPattern = ({
+  playLabel,
+  playControlLabel,
+  addControlLabel,
+  thumbUpControlLabel,
+  onPlayClick,
+  onAddClick,
+  onThumbUpClick,
+  style,
+}: PlayAddThumbUpPatternProps): ReactNode => (
+  <div style={{ ...rowStyle, ...style }}>
+    <Button
+      type="button"
+      variant="play"
+      size="sm"
+      onClick={onPlayClick}
+      aria-label={playControlLabel}
+      style={{ width: 'var(--fx-size-pattern-video-play-button-width)' }}
+      leadingIcon={<Icon name="videoPlayerPlayDefault" size="var(--fx-size-pattern-video-button-icon)" />}
+    >
+      {playLabel}
+    </Button>
+    <button type="button" onClick={onAddClick} style={iconButtonStyle} aria-label={addControlLabel}>
+      <Icon name="moviePreviewAddDefault" size="var(--fx-size-pattern-video-icon-control)" />
+    </button>
+    <button type="button" onClick={onThumbUpClick} style={iconButtonStyle} aria-label={thumbUpControlLabel}>
+      <Icon name="moviePreviewThumbUpDefault" size="var(--fx-size-pattern-video-icon-control)" />
+    </button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/PlayMoreInfoPattern.tsx b/packages/design-system/src/components/molecules/PlayMoreInfoPattern.tsx
new file mode 100644
index 0000000..aa2dc8c
--- /dev/null
+++ b/packages/design-system/src/components/molecules/PlayMoreInfoPattern.tsx
@@ -0,0 +1,41 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Icon } from '../atoms/Icon';
+
+type PlayMoreInfoPatternProps = {
+  onPlayClick?: () => void;
+  onMoreInfoClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-2)',
+  flexWrap: 'wrap',
+};
+
+export const PlayMoreInfoPattern = ({ onPlayClick, onMoreInfoClick, style }: PlayMoreInfoPatternProps): ReactNode => (
+  <div style={{ ...rowStyle, ...style }}>
+    <Button
+      type="button"
+      variant="play"
+      size="sm"
+      onClick={onPlayClick}
+      style={{ width: 'var(--fx-size-pattern-video-play-button-width)' }}
+      leadingIcon={<Icon name="videoPlayerPlayDefault" size="var(--fx-size-pattern-video-button-icon)" />}
+    >
+      Play
+    </Button>
+    <Button
+      type="button"
+      variant="moreInfo"
+      size="sm"
+      onClick={onMoreInfoClick}
+      style={{ width: 'var(--fx-size-pattern-video-more-info-button-width)' }}
+      leadingIcon={<Icon name="info" size="var(--fx-size-pattern-video-button-icon)" />}
+    >
+      More Info
+    </Button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/ProfileAvatarTrigger.tsx b/packages/design-system/src/components/molecules/ProfileAvatarTrigger.tsx
new file mode 100644
index 0000000..a2990f9
--- /dev/null
+++ b/packages/design-system/src/components/molecules/ProfileAvatarTrigger.tsx
@@ -0,0 +1,58 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import { ProfileAvatar } from '../atoms/ProfileAvatar';
+
+type ProfileAvatarTriggerProps = {
+  avatarImageUrl?: string;
+  avatarImageAlt?: string;
+  avatarAriaLabel: string;
+  showCaret?: boolean;
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-profile-compact-trigger-width)',
+  minHeight: 'var(--fx-size-pattern-profile-compact-trigger-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  border: '1px dashed var(--fx-color-brand-primary-active)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-8)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-6)',
+};
+
+const triggerStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  margin: 0,
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-6)',
+  cursor: 'pointer',
+  color: 'var(--fx-color-text-primary)',
+};
+
+export const ProfileAvatarTrigger = ({
+  avatarImageUrl,
+  avatarImageAlt = '',
+  avatarAriaLabel,
+  showCaret = true,
+  onClick,
+  style,
+}: ProfileAvatarTriggerProps): ReactNode => (
+  <div style={{ ...rootStyle, ...style }}>
+    <button type="button" onClick={onClick} aria-label={avatarAriaLabel} style={triggerStyle}>
+      <ProfileAvatar
+        imageUrl={avatarImageUrl}
+        imageAlt={avatarImageAlt}
+        size="sm"
+        interactive={false}
+      />
+      {showCaret ? <Icon name="arrowDown" size={10} /> : null}
+    </button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/ProfileMenuItem.tsx b/packages/design-system/src/components/molecules/ProfileMenuItem.tsx
new file mode 100644
index 0000000..c76f1d5
--- /dev/null
+++ b/packages/design-system/src/components/molecules/ProfileMenuItem.tsx
@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IconName } from '../../assets/icons';
+import { Icon } from '../atoms/Icon';
+
+type ProfileMenuItemProps = {
+  label: ReactNode;
+  iconName?: IconName;
+  muted?: boolean;
+  ariaLabel: string;
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const itemStyle: CSSProperties = {
+  width: '100%',
+  border: 0,
+  background: 'transparent',
+  color: 'var(--fx-color-text-primary)',
+  display: 'grid',
+  gridTemplateColumns: '20px auto',
+  alignItems: 'center',
+  gap: 'var(--fx-space-3)',
+  textAlign: 'left',
+  cursor: 'pointer',
+  padding: 0,
+  margin: 0,
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-typo-regular-small-body-normal-size)',
+  lineHeight: 'var(--fx-typo-regular-small-body-normal-line)',
+  letterSpacing: 'var(--fx-typo-regular-small-body-normal-spacing)',
+};
+
+export const ProfileMenuItem = ({ label, iconName, muted = false, ariaLabel, onClick, style }: ProfileMenuItemProps): ReactNode => (
+  <button
+    type="button"
+    aria-label={ariaLabel}
+    onClick={onClick}
+    style={{ ...itemStyle, color: muted ? 'var(--fx-color-profile-menu-text-muted)' : itemStyle.color, ...style }}
+  >
+    {iconName ? <Icon name={iconName} size={20} /> : <span aria-hidden="true" />}
+    <span>{label}</span>
+  </button>
+);
diff --git a/packages/design-system/src/components/molecules/SignInCompletePattern.tsx b/packages/design-system/src/components/molecules/SignInCompletePattern.tsx
new file mode 100644
index 0000000..3c2f324
--- /dev/null
+++ b/packages/design-system/src/components/molecules/SignInCompletePattern.tsx
@@ -0,0 +1,194 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Input } from '../atoms/Input';
+import { Text } from '../atoms/Text';
+
+type SignInCompletePatternProps = {
+  emailValue: string;
+  passwordValue: string;
+  rememberMe?: boolean;
+  onEmailChange: (next: string) => void;
+  onPasswordChange: (next: string) => void;
+  onSubmit: () => void;
+  onUseSignInCode?: () => void;
+  onForgotPassword?: () => void;
+  onRememberMeChange?: (checked: boolean) => void;
+  onSignUp?: () => void;
+  onLearnMore?: () => void;
+  title?: string;
+  submitLabel?: string;
+  useCodeLabel?: string;
+  forgotPasswordLabel?: string;
+  rememberMeLabel?: string;
+  signUpPrefix?: string;
+  signUpLabel?: string;
+  recaptchaCopy?: string;
+  learnMoreLabel?: string;
+  controlWidth?: CSSProperties['width'];
+  submitting?: boolean;
+  style?: CSSProperties;
+};
+
+const layoutStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+};
+
+const controlWidthStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-signin-control-width)',
+  maxWidth: '100%',
+};
+
+const linkButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  textAlign: 'left',
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-typo-regular-headline2-size)',
+  lineHeight: 'var(--fx-typo-regular-headline2-line)',
+  fontWeight: 'var(--fx-typo-regular-headline2-weight)',
+  letterSpacing: 'var(--fx-typo-regular-headline2-spacing)',
+};
+
+const checkboxButtonStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-signin-checkbox-size)',
+  height: 'var(--fx-size-pattern-signin-checkbox-size)',
+  borderRadius: 'var(--fx-radius-sm)',
+  border: 'var(--fx-size-border-default) solid var(--fx-color-border-strong)',
+  background: 'transparent',
+  padding: 0,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+};
+
+const rowStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-3)',
+};
+
+const footnoteStyle: CSSProperties = {
+  ...controlWidthStyle,
+  color: 'var(--fx-color-text-tertiary)',
+};
+
+export const SignInCompletePattern = ({
+  emailValue,
+  passwordValue,
+  rememberMe = false,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  onUseSignInCode,
+  onForgotPassword,
+  onRememberMeChange,
+  onSignUp,
+  onLearnMore,
+  title = 'Sign In',
+  submitLabel = 'Sign In',
+  useCodeLabel = 'Use a Sign-In Code',
+  forgotPasswordLabel = 'Forgot Password?',
+  rememberMeLabel = 'Remember me',
+  signUpPrefix = 'New to Flix?',
+  signUpLabel = 'Sign up now.',
+  recaptchaCopy = "This page is protected by Google reCAPTCHA to ensure you're not a bot.",
+  learnMoreLabel = 'Learn more.',
+  controlWidth = 'var(--fx-size-pattern-signin-control-width)',
+  submitting = false,
+  style,
+}: SignInCompletePatternProps): ReactNode => (
+  <section style={{ ...layoutStyle, ...style }}>
+    <Text as="h2" variant="medium-title1" style={{ marginBottom: 'var(--fx-space-6)' }}>
+      {title}
+    </Text>
+
+    <Input
+      type="email"
+      value={emailValue}
+      placeholder="Email or phone number"
+      onChange={(event) => onEmailChange(event.target.value)}
+      style={{ ...controlWidthStyle, width: controlWidth }}
+    />
+    <Input
+      type="password"
+      value={passwordValue}
+      placeholder="Password"
+      onChange={(event) => onPasswordChange(event.target.value)}
+      style={{ ...controlWidthStyle, width: controlWidth }}
+    />
+
+    <Button
+      type="button"
+      onClick={onSubmit}
+      disabled={submitting}
+      style={{ ...controlWidthStyle, width: controlWidth, minHeight: 'var(--fx-size-pattern-signin-button-height)' }}
+    >
+      {submitLabel}
+    </Button>
+
+    <Text as="span" variant="regular-headline1" style={{ ...controlWidthStyle, width: controlWidth, textAlign: 'center' }}>
+      OR
+    </Text>
+
+    <Button
+      type="button"
+      variant="secondaryPressed"
+      onClick={onUseSignInCode}
+      style={{ ...controlWidthStyle, width: controlWidth, minHeight: 'var(--fx-size-pattern-signin-button-height)' }}
+    >
+      {useCodeLabel}
+    </Button>
+
+    <button
+      type="button"
+      onClick={onForgotPassword}
+      style={{
+        ...linkButtonStyle,
+        ...controlWidthStyle,
+        width: controlWidth,
+        textAlign: 'center',
+        color: 'var(--fx-color-text-primary)',
+      }}
+    >
+      {forgotPasswordLabel}
+    </button>
+
+    <div style={{ ...rowStyle, marginTop: 'var(--fx-space-2)' }}>
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={rememberMe}
+        aria-label={rememberMeLabel}
+        onClick={() => onRememberMeChange?.(!rememberMe)}
+        style={checkboxButtonStyle}
+      >
+        {rememberMe ? (
+          <svg width="var(--fx-size-pattern-signin-checkbox-size)" height="var(--fx-size-pattern-signin-checkbox-size)" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+            <path d="M4 9.5L7.2 12.5L14 5.5" stroke="var(--fx-color-text-primary)" strokeWidth="var(--fx-size-border-default)" />
+          </svg>
+        ) : null}
+      </button>
+      <Text as="span" variant="regular-headline1">
+        {rememberMeLabel}
+      </Text>
+    </div>
+
+    <Text as="p" variant="regular-headline1" tone="secondary" style={controlWidthStyle}>
+      {signUpPrefix}{' '}
+      <button type="button" onClick={onSignUp} style={{ ...linkButtonStyle, color: 'var(--fx-color-text-primary)', fontWeight: 'var(--fx-font-weight-bold)' }}>
+        {signUpLabel}
+      </button>
+    </Text>
+
+    <Text as="p" variant="regular-small-body-normal" style={footnoteStyle}>
+      {recaptchaCopy}{' '}
+      <button type="button" onClick={onLearnMore} style={{ ...linkButtonStyle, color: 'var(--fx-color-link-primary)', fontSize: 'inherit', lineHeight: 'inherit', fontWeight: 'inherit' }}>
+        {learnMoreLabel}
+      </button>
+    </Text>
+  </section>
+);
diff --git a/packages/design-system/src/components/molecules/SignInEmailPasswordPattern.tsx b/packages/design-system/src/components/molecules/SignInEmailPasswordPattern.tsx
new file mode 100644
index 0000000..a0b1c06
--- /dev/null
+++ b/packages/design-system/src/components/molecules/SignInEmailPasswordPattern.tsx
@@ -0,0 +1,76 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Input } from '../atoms/Input';
+
+type SignInEmailPasswordPatternProps = {
+  emailValue: string;
+  passwordValue: string;
+  onEmailChange: (next: string) => void;
+  onPasswordChange: (next: string) => void;
+  onSubmit: () => void;
+  emailPlaceholder?: string;
+  passwordPlaceholder?: string;
+  buttonLabel?: string;
+  disabled?: boolean;
+  controlWidth?: CSSProperties['width'];
+  style?: CSSProperties;
+};
+
+const layoutStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+};
+
+const controlWidthStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-signin-control-width)',
+  maxWidth: '100%',
+};
+
+const submitStyle: CSSProperties = {
+  ...controlWidthStyle,
+  minHeight: 'var(--fx-size-pattern-signin-button-height)',
+  borderRadius: 'var(--fx-radius-input)',
+  background: 'var(--fx-color-brand-primary)',
+  borderColor: 'var(--fx-color-brand-primary)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: 'var(--fx-typo-medium-body-size)',
+  lineHeight: 'var(--fx-typo-medium-body-line)',
+  fontWeight: 'var(--fx-typo-medium-body-weight)',
+  letterSpacing: 'var(--fx-typo-medium-body-spacing)',
+};
+
+export const SignInEmailPasswordPattern = ({
+  emailValue,
+  passwordValue,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  emailPlaceholder = 'Email or phone number',
+  passwordPlaceholder = 'Password',
+  buttonLabel = 'Sign In',
+  disabled,
+  controlWidth = 'var(--fx-size-pattern-signin-control-width)',
+  style,
+}: SignInEmailPasswordPatternProps): ReactNode => (
+  <div style={{ ...layoutStyle, ...style }}>
+    <Input
+      type="email"
+      value={emailValue}
+      placeholder={emailPlaceholder}
+      onChange={(event) => onEmailChange(event.target.value)}
+      style={{ ...controlWidthStyle, width: controlWidth }}
+    />
+    <Input
+      type="password"
+      value={passwordValue}
+      placeholder={passwordPlaceholder}
+      onChange={(event) => onPasswordChange(event.target.value)}
+      style={{ ...controlWidthStyle, width: controlWidth }}
+    />
+    <Button type="button" onClick={onSubmit} disabled={disabled} style={{ ...submitStyle, width: controlWidth }}>
+      {buttonLabel}
+    </Button>
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/StatTile.tsx b/packages/design-system/src/components/molecules/StatTile.tsx
new file mode 100644
index 0000000..cde3362
--- /dev/null
+++ b/packages/design-system/src/components/molecules/StatTile.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+
+type StatTileProps = {
+  label: string;
+  value: string | number;
+};
+
+export const StatTile = ({ label, value }: StatTileProps): ReactNode => (
+  <Card>
+    <Text tone="secondary" variant="regular-caption1">
+      {label}
+    </Text>
+    <Text as="strong" variant="medium-title1" style={{ display: 'block', marginTop: 'var(--fx-space-2)' }}>
+      {value}
+    </Text>
+  </Card>
+);
diff --git a/packages/design-system/src/components/molecules/Top10EntryCard.tsx b/packages/design-system/src/components/molecules/Top10EntryCard.tsx
new file mode 100644
index 0000000..7611dd8
--- /dev/null
+++ b/packages/design-system/src/components/molecules/Top10EntryCard.tsx
@@ -0,0 +1,67 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import { Text } from '../atoms/Text';
+
+type Top10EntryCardProps = {
+  ariaLabel?: string;
+  rank: number;
+  imageUrl: string;
+  imageAlt?: string;
+  onClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  position: 'relative',
+  width: 'var(--fx-size-pattern-top10-card-width)',
+  height: 'var(--fx-size-pattern-top10-card-height)',
+  border: 0,
+  padding: 0,
+  margin: 0,
+  background: 'transparent',
+  cursor: 'pointer',
+  display: 'block',
+};
+
+const rankStyle: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  zIndex: 0,
+  fontSize: 'var(--fx-size-pattern-top10-rank-size)',
+  lineHeight: 0.9,
+  color: 'var(--fx-color-text-primary)',
+  opacity: 0.28,
+  fontWeight: 'var(--fx-font-weight-bold)',
+};
+
+const posterStyle: CSSProperties = {
+  position: 'absolute',
+  left: 'var(--fx-size-pattern-top10-poster-left)',
+  top: 0,
+  width: 'var(--fx-size-pattern-top10-poster-width)',
+  height: 'var(--fx-size-pattern-top10-poster-height)',
+  borderRadius: 'var(--fx-radius-sm)',
+  objectFit: 'cover',
+  zIndex: 1,
+  background: 'var(--fx-color-bg-hover)',
+};
+
+export const Top10EntryCard = ({ ariaLabel, rank, imageUrl, imageAlt = '', onClick, style }: Top10EntryCardProps): ReactNode => (
+  <button type="button" onClick={onClick} style={{ ...rootStyle, ...style }} aria-label={ariaLabel}>
+    <Text as="span" variant="bold-title1" style={rankStyle}>{rank}</Text>
+    <img src={imageUrl} alt={imageAlt} style={posterStyle} />
+    <Icon
+      name="presetTop10"
+      size="var(--fx-size-pattern-top10-badge-width)"
+      style={{
+        position: 'absolute',
+        zIndex: 2,
+        left: 'calc(var(--fx-size-pattern-top10-poster-left) + var(--fx-space-2))',
+        top: 'var(--fx-space-2)',
+        width: 'var(--fx-size-pattern-top10-badge-width)',
+        height: 'var(--fx-size-pattern-top10-badge-height)',
+      }}
+    />
+  </button>
+);
diff --git a/packages/design-system/src/components/molecules/VideoEpisodesPreview.tsx b/packages/design-system/src/components/molecules/VideoEpisodesPreview.tsx
new file mode 100644
index 0000000..250e7af
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoEpisodesPreview.tsx
@@ -0,0 +1,55 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoNextEpisodeCard } from './VideoNextEpisodeCard';
+
+export type VideoEpisodePreviewItem = {
+  id: string;
+  title: ReactNode;
+  episodeLabel: ReactNode;
+  description?: ReactNode;
+  artworkUrl?: string;
+  artworkAlt?: string;
+  playLabel: string;
+  onPlayClick?: () => void;
+};
+
+type VideoEpisodesPreviewProps = {
+  items: VideoEpisodePreviewItem[];
+  horizontal?: boolean;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+};
+
+export const VideoEpisodesPreview = ({ items, horizontal = false, style }: VideoEpisodesPreviewProps): ReactNode => (
+  <section
+    style={{
+      ...rootStyle,
+      ...(horizontal
+        ? {
+            display: 'flex',
+            gap: 'var(--fx-space-4)',
+            overflowX: 'auto',
+            paddingBottom: 'var(--fx-space-2)',
+          }
+        : null),
+      ...style,
+    }}
+  >
+    {items.map((item) => (
+      <VideoNextEpisodeCard
+        key={item.id}
+        title={item.title}
+        episodeLabel={item.episodeLabel}
+        description={item.description}
+        artworkUrl={item.artworkUrl}
+        artworkAlt={item.artworkAlt}
+        playLabel={item.playLabel}
+        onPlayClick={item.onPlayClick}
+        style={horizontal ? { flex: '0 0 auto', width: 430 } : undefined}
+      />
+    ))}
+  </section>
+);
diff --git a/packages/design-system/src/components/molecules/VideoNextEpisodeCard.tsx b/packages/design-system/src/components/molecules/VideoNextEpisodeCard.tsx
new file mode 100644
index 0000000..3d38d43
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoNextEpisodeCard.tsx
@@ -0,0 +1,56 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { VideoPlayerIconButton } from '../atoms/VideoPlayerIconButton';
+
+type VideoNextEpisodeCardProps = {
+  title: ReactNode;
+  episodeLabel: ReactNode;
+  description?: ReactNode;
+  artworkUrl?: string;
+  artworkAlt?: string;
+  playLabel: string;
+  onPlayClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'min(100%, var(--fx-size-pattern-player-next-episode-card-width))',
+  minHeight: 'var(--fx-size-pattern-player-next-episode-card-height)',
+  borderRadius: 'var(--fx-radius-sm)',
+  overflow: 'hidden',
+  background: 'var(--fx-color-player-surface)',
+  display: 'grid',
+  gridTemplateRows: '200px auto',
+};
+
+export const VideoNextEpisodeCard = ({
+  title,
+  episodeLabel,
+  description,
+  artworkUrl,
+  artworkAlt = '',
+  playLabel,
+  onPlayClick,
+  style,
+}: VideoNextEpisodeCardProps): ReactNode => (
+  <article style={{ ...rootStyle, ...style }}>
+    {artworkUrl ? (
+      <img src={artworkUrl} alt={artworkAlt} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+    ) : (
+      <div style={{ background: 'var(--fx-color-bg-secondary)' }} />
+    )}
+
+    <div style={{ padding: 'var(--fx-space-4)', display: 'grid', gap: 'var(--fx-space-2)' }}>
+      <Text as="p" variant="regular-caption1" tone="secondary" style={{ margin: 0 }}>{episodeLabel}</Text>
+      <Text as="h4" variant="medium-title3" style={{ margin: 0 }}>{title}</Text>
+      {description ? <Text as="p" variant="regular-small-body-normal" tone="secondary" style={{ margin: 0 }}>{description}</Text> : null}
+      <VideoPlayerIconButton
+        icon="play"
+        size="var(--fx-size-pattern-video-icon-play)"
+        ariaLabel={playLabel}
+        onClick={onPlayClick}
+        style={{ justifySelf: 'start' }}
+      />
+    </div>
+  </article>
+);
diff --git a/packages/design-system/src/components/molecules/VideoOptionMenu.tsx b/packages/design-system/src/components/molecules/VideoOptionMenu.tsx
new file mode 100644
index 0000000..1aac646
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoOptionMenu.tsx
@@ -0,0 +1,70 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+
+export type VideoOptionItem = {
+  id: string;
+  label: ReactNode;
+  description?: ReactNode;
+  selected?: boolean;
+  onSelect?: () => void;
+};
+
+type VideoOptionMenuProps = {
+  title: ReactNode;
+  options: VideoOptionItem[];
+  style?: CSSProperties;
+};
+
+const panelStyle: CSSProperties = {
+  width: 'min(100%, var(--fx-size-pattern-player-option-panel-width))',
+  maxHeight: 'var(--fx-size-pattern-player-option-panel-height)',
+  background: 'var(--fx-color-player-surface)',
+  borderRadius: 'var(--fx-radius-input)',
+  overflow: 'hidden',
+  display: 'grid',
+  alignContent: 'start',
+};
+
+const headingStyle: CSSProperties = {
+  padding: 'var(--fx-space-4) var(--fx-space-6)',
+  borderBottom: '1px solid var(--fx-color-player-panel-muted)',
+};
+
+const itemStyle: CSSProperties = {
+  width: '100%',
+  border: 0,
+  background: 'transparent',
+  color: 'var(--fx-color-text-primary)',
+  textAlign: 'left',
+  cursor: 'pointer',
+  padding: 'var(--fx-space-4) var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-1)',
+};
+
+export const VideoOptionMenu = ({ title, options, style }: VideoOptionMenuProps): ReactNode => (
+  <section style={{ ...panelStyle, ...style }}>
+    <div style={headingStyle}>
+      <Text as="h4" variant="medium-headline2" style={{ margin: 0 }}>{title}</Text>
+    </div>
+
+    <div style={{ overflow: 'auto' }}>
+      {options.map((option) => (
+        <button
+          key={option.id}
+          type="button"
+          onClick={option.onSelect}
+          style={{
+            ...itemStyle,
+            background: option.selected ? 'var(--fx-color-player-panel-soft)' : 'transparent',
+          }}
+        >
+          <Text as="span" variant="regular-body">{option.label}</Text>
+          {option.description ? (
+            <Text as="span" variant="regular-caption1" tone="secondary">{option.description}</Text>
+          ) : null}
+        </button>
+      ))}
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/molecules/VideoPlayerControlsPattern.tsx b/packages/design-system/src/components/molecules/VideoPlayerControlsPattern.tsx
new file mode 100644
index 0000000..a432e66
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoPlayerControlsPattern.tsx
@@ -0,0 +1,59 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerIconButton } from '../atoms/VideoPlayerIconButton';
+
+type VideoPlayerControlsPatternProps = {
+  labels: {
+    play: string;
+    back10: string;
+    forward10: string;
+    sound: string;
+  };
+  iconState?: 'default' | 'hover';
+  onPlayClick?: () => void;
+  onBackClick?: () => void;
+  onForwardClick?: () => void;
+  onSoundClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-4)',
+  flexWrap: 'wrap',
+};
+
+const iconButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export const VideoPlayerControlsPattern = ({
+  labels,
+  iconState = 'default',
+  onPlayClick,
+  onBackClick,
+  onForwardClick,
+  onSoundClick,
+  style,
+}: VideoPlayerControlsPatternProps): ReactNode => (
+  <div style={{ ...rowStyle, ...style }}>
+    <VideoPlayerIconButton
+      icon="play"
+      state={iconState}
+      size="var(--fx-size-pattern-video-icon-play)"
+      ariaLabel={labels.play}
+      onClick={onPlayClick}
+      style={iconButtonStyle}
+    />
+    <VideoPlayerIconButton icon="back10" state={iconState} ariaLabel={labels.back10} onClick={onBackClick} style={iconButtonStyle} />
+    <VideoPlayerIconButton icon="forward10" state={iconState} ariaLabel={labels.forward10} onClick={onForwardClick} style={iconButtonStyle} />
+    <VideoPlayerIconButton icon="sound" state={iconState} ariaLabel={labels.sound} onClick={onSoundClick} style={iconButtonStyle} />
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/VideoPlayerUtilitiesPattern.tsx b/packages/design-system/src/components/molecules/VideoPlayerUtilitiesPattern.tsx
new file mode 100644
index 0000000..6e71693
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoPlayerUtilitiesPattern.tsx
@@ -0,0 +1,80 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerIconButton } from '../atoms/VideoPlayerIconButton';
+
+type VideoPlayerUtilitiesPatternProps = {
+  labels: {
+    nextEpisode: string;
+    listOfEpisodes: string;
+    subtitles: string;
+    speed: string;
+    fullScreen: string;
+  };
+  iconState?: 'default' | 'hover';
+  onNextEpisodeClick?: () => void;
+  onListOfEpisodesClick?: () => void;
+  onSubtitlesClick?: () => void;
+  onSpeedClick?: () => void;
+  onFullScreenClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-4)',
+  flexWrap: 'wrap',
+};
+
+const iconButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+export const VideoPlayerUtilitiesPattern = ({
+  labels,
+  iconState = 'default',
+  onNextEpisodeClick,
+  onListOfEpisodesClick,
+  onSubtitlesClick,
+  onSpeedClick,
+  onFullScreenClick,
+  style,
+}: VideoPlayerUtilitiesPatternProps): ReactNode => (
+  <div style={{ ...rowStyle, ...style }}>
+    <VideoPlayerIconButton
+      icon="nextEpisode"
+      state={iconState}
+      ariaLabel={labels.nextEpisode}
+      onClick={onNextEpisodeClick}
+      style={iconButtonStyle}
+    />
+    <VideoPlayerIconButton
+      icon="listOfEpisodes"
+      state={iconState}
+      ariaLabel={labels.listOfEpisodes}
+      onClick={onListOfEpisodesClick}
+      style={iconButtonStyle}
+    />
+    <VideoPlayerIconButton
+      icon="subtitles"
+      state={iconState}
+      ariaLabel={labels.subtitles}
+      onClick={onSubtitlesClick}
+      style={iconButtonStyle}
+    />
+    <VideoPlayerIconButton icon="speed" state={iconState} ariaLabel={labels.speed} onClick={onSpeedClick} style={iconButtonStyle} />
+    <VideoPlayerIconButton
+      icon="fullScreen"
+      state={iconState}
+      ariaLabel={labels.fullScreen}
+      onClick={onFullScreenClick}
+      style={iconButtonStyle}
+    />
+  </div>
+);
diff --git a/packages/design-system/src/components/molecules/VideoProgressIndicator.tsx b/packages/design-system/src/components/molecules/VideoProgressIndicator.tsx
new file mode 100644
index 0000000..304b443
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoProgressIndicator.tsx
@@ -0,0 +1,87 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+
+type VideoProgressIndicatorProps = {
+  elapsedLabel: string;
+  remainingLabel: string;
+  progressPercent: number;
+  bufferPercent?: number;
+  markerPercent?: number;
+  dense?: boolean;
+  style?: CSSProperties;
+};
+
+const clamp = (value: number): number => Math.max(0, Math.min(100, value));
+
+const rootStyle: CSSProperties = {
+  width: '100%',
+  display: 'grid',
+  gap: 'var(--fx-space-2)',
+};
+
+const railStyle: CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  background: 'var(--fx-color-text-tertiary)',
+  borderRadius: '9999px',
+  overflow: 'hidden',
+};
+
+const labelsStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-4)',
+};
+
+export const VideoProgressIndicator = ({
+  elapsedLabel,
+  remainingLabel,
+  progressPercent,
+  bufferPercent = 0,
+  markerPercent,
+  dense = false,
+  style,
+}: VideoProgressIndicatorProps): ReactNode => {
+  const current = clamp(progressPercent);
+  const buffered = clamp(bufferPercent);
+  const marker = markerPercent === undefined ? undefined : clamp(markerPercent);
+
+  const trackHeight = dense ? 'var(--fx-size-pattern-movie-progress-track-height)' : 'var(--fx-size-pattern-player-progress-track-height)';
+  const thumbSize = dense ? 8 : 'var(--fx-size-pattern-player-progress-thumb-size)';
+
+  return (
+    <div style={{ ...rootStyle, ...style }}>
+      <div style={{ ...railStyle, height: trackHeight }}>
+        <span
+          aria-hidden="true"
+          style={{ position: 'absolute', inset: 0, width: `${buffered}%`, background: 'var(--fx-color-player-marker)' }}
+        />
+        <span
+          aria-hidden="true"
+          style={{ position: 'absolute', inset: 0, width: `${current}%`, background: 'var(--fx-color-brand-primary-active)' }}
+        />
+        {marker === undefined ? null : (
+          <span
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              left: `${marker}%`,
+              top: '50%',
+              transform: 'translate(-50%, -50%)',
+              width: thumbSize,
+              height: thumbSize,
+              borderRadius: '9999px',
+              background: 'var(--fx-color-brand-primary-active)',
+            }}
+          />
+        )}
+      </div>
+
+      <div style={labelsStyle}>
+        <Text as="span" variant="regular-caption1">{elapsedLabel}</Text>
+        <Text as="span" variant="regular-caption1">{remainingLabel}</Text>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/design-system/src/components/molecules/VideoVolumeSlider.tsx b/packages/design-system/src/components/molecules/VideoVolumeSlider.tsx
new file mode 100644
index 0000000..1ecabe2
--- /dev/null
+++ b/packages/design-system/src/components/molecules/VideoVolumeSlider.tsx
@@ -0,0 +1,83 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerIconButton } from '../atoms/VideoPlayerIconButton';
+
+type VideoVolumeSliderProps = {
+  volumePercent: number;
+  muted?: boolean;
+  iconLabel: string;
+  onIconClick?: () => void;
+  onChange?: (next: number) => void;
+  style?: CSSProperties;
+};
+
+const clamp = (value: number): number => Math.max(0, Math.min(100, value));
+
+const rootStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'flex-end',
+  gap: 'var(--fx-space-3)',
+};
+
+const railShellStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-player-volume-rail-width)',
+  height: 'var(--fx-size-pattern-player-volume-rail-height)',
+  borderRadius: 'var(--fx-radius-sm)',
+  background: 'var(--fx-color-player-surface)',
+  display: 'grid',
+  placeItems: 'center',
+};
+
+const railStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-player-volume-bar-width)',
+  height: '98px',
+  background: 'var(--fx-color-text-tertiary)',
+  position: 'relative',
+};
+
+export const VideoVolumeSlider = ({ volumePercent, muted = false, iconLabel, onIconClick, onChange, style }: VideoVolumeSliderProps): ReactNode => {
+  const effective = muted ? 0 : clamp(volumePercent);
+
+  return (
+    <div style={{ ...rootStyle, ...style }}>
+      <div style={railShellStyle}>
+        <button
+          type="button"
+          aria-label="Volume"
+          onClick={() => onChange?.(effective)}
+          style={{ ...railStyle, border: 0, padding: 0, cursor: 'pointer' }}
+        >
+          <span
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: `${effective}%`,
+              background: 'var(--fx-color-brand-primary-active)',
+            }}
+          />
+          <span
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              left: '50%',
+              bottom: `${effective}%`,
+              transform: 'translate(-50%, 50%)',
+              width: 24,
+              height: 24,
+              borderRadius: '9999px',
+              background: 'var(--fx-color-brand-primary-active)',
+            }}
+          />
+        </button>
+      </div>
+
+      <VideoPlayerIconButton
+        icon={muted ? 'mute' : 'sound'}
+        ariaLabel={iconLabel}
+        onClick={onIconClick}
+      />
+    </div>
+  );
+};
diff --git a/packages/design-system/src/components/molecules/index.ts b/packages/design-system/src/components/molecules/index.ts
new file mode 100644
index 0000000..d9655a3
--- /dev/null
+++ b/packages/design-system/src/components/molecules/index.ts
@@ -0,0 +1,30 @@
+export * from './AccessKeyForm';
+export * from './BrowseLanguagePattern';
+export * from './ContinueWatchingCard';
+export * from './EmailGetStartedPattern';
+export * from './EpisodeListItem';
+export * from './FaqAccordionItem';
+export * from './FormField';
+export * from './HeroBannerActionsPattern';
+export * from './HeroBannerRatingPattern';
+export * from './HeroBannerUtilitiesPattern';
+export * from './LessonTile';
+export * from './MovieInfoPattern';
+export * from './MovieBlockCard';
+export * from './MoviePreviewDetailsPattern';
+export * from './MoviePreviewPattern';
+export * from './PlayAddThumbUpPattern';
+export * from './PlayMoreInfoPattern';
+export * from './ProfileAvatarTrigger';
+export * from './ProfileMenuItem';
+export * from './SignInEmailPasswordPattern';
+export * from './SignInCompletePattern';
+export * from './StatTile';
+export * from './Top10EntryCard';
+export * from './VideoPlayerControlsPattern';
+export * from './VideoEpisodesPreview';
+export * from './VideoNextEpisodeCard';
+export * from './VideoOptionMenu';
+export * from './VideoProgressIndicator';
+export * from './VideoPlayerUtilitiesPattern';
+export * from './VideoVolumeSlider';
diff --git a/packages/design-system/src/components/organisms/AdminHeader.tsx b/packages/design-system/src/components/organisms/AdminHeader.tsx
new file mode 100644
index 0000000..1339e68
--- /dev/null
+++ b/packages/design-system/src/components/organisms/AdminHeader.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Text } from '../atoms/Text';
+
+type AdminHeaderProps = {
+  title: string;
+  subtitle: string;
+  onLogout: () => void;
+};
+
+export const AdminHeader = ({ title, subtitle, onLogout }: AdminHeaderProps): ReactNode => (
+  <header style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--fx-space-4)', alignItems: 'start' }}>
+    <div>
+      <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>
+    </div>
+    <Button variant="secondary" onClick={onLogout}>
+      Logout
+    </Button>
+  </header>
+);
diff --git a/packages/design-system/src/components/organisms/AppTopNav.tsx b/packages/design-system/src/components/organisms/AppTopNav.tsx
new file mode 100644
index 0000000..f37573c
--- /dev/null
+++ b/packages/design-system/src/components/organisms/AppTopNav.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+
+type NavItem = { label: string; href: string; active?: boolean };
+
+type AppTopNavProps = {
+  brand: string;
+  items: NavItem[];
+  rightSlot?: ReactNode;
+};
+
+export const AppTopNav = ({ brand, items, rightSlot }: AppTopNavProps) => (
+  <nav
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 'var(--fx-space-4)',
+      flexWrap: 'wrap',
+    }}
+  >
+    <Text as="strong" variant="display-small" style={{ textTransform: 'uppercase' }}>
+      {brand}
+    </Text>
+    <div style={{ display: 'flex', gap: 'var(--fx-space-2)', flexWrap: 'wrap' }}>
+      {items.map((item) => (
+        <a
+          key={item.href}
+          href={item.href}
+          style={{
+            color: item.active ? 'var(--fx-color-text-primary)' : 'var(--fx-color-text-secondary)',
+            textDecoration: 'none',
+          }}
+        >
+          {item.label}
+        </a>
+      ))}
+    </div>
+    {rightSlot}
+  </nav>
+);
diff --git a/packages/design-system/src/components/organisms/ContinueWatchingPattern.tsx b/packages/design-system/src/components/organisms/ContinueWatchingPattern.tsx
new file mode 100644
index 0000000..80d40d3
--- /dev/null
+++ b/packages/design-system/src/components/organisms/ContinueWatchingPattern.tsx
@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { ContinueWatchingCard } from '../molecules/ContinueWatchingCard';
+
+export type ContinueWatchingItem = {
+  id: string;
+  imageUrl: string;
+  imageAlt?: string;
+  progress: number;
+  progressLabel?: string;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
+};
+
+type ContinueWatchingPatternProps = {
+  title: string;
+  items: ContinueWatchingItem[];
+  style?: CSSProperties;
+};
+
+const panelStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-continue-watching-width)',
+  maxWidth: '100%',
+  minHeight: 'var(--fx-size-pattern-continue-watching-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-5)',
+};
+
+const listStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-5)',
+};
+
+export const ContinueWatchingPattern = ({ title, items, style }: ContinueWatchingPatternProps): ReactNode => (
+  <section style={{ ...panelStyle, ...style }}>
+    <Text as="h3" variant="medium-headline2">{title}</Text>
+    <div style={listStyle}>
+      {items.map((item) => (
+        <ContinueWatchingCard
+          key={item.id}
+          imageUrl={item.imageUrl}
+          imageAlt={item.imageAlt}
+          progress={item.progress}
+          progressLabel={item.progressLabel}
+          presetIconName={item.presetIconName}
+          onClick={item.onClick}
+        />
+      ))}
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/FaqQuestionsPattern.tsx b/packages/design-system/src/components/organisms/FaqQuestionsPattern.tsx
new file mode 100644
index 0000000..cdc4a6f
--- /dev/null
+++ b/packages/design-system/src/components/organisms/FaqQuestionsPattern.tsx
@@ -0,0 +1,77 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useMemo, useState } from 'react';
+import { FaqAccordionItem } from '../molecules/FaqAccordionItem';
+
+export type FaqQuestionItem = {
+  id: string;
+  question: string;
+  answer: ReactNode | string | string[];
+};
+
+type FaqQuestionsPatternProps = {
+  items: FaqQuestionItem[];
+  defaultExpandedId?: string | null;
+  expandedIds?: string[];
+  allowMultipleExpanded?: boolean;
+  onExpandedIdsChange?: (ids: string[]) => void;
+  style?: CSSProperties;
+};
+
+const layoutStyle: CSSProperties = {
+  width: '100%',
+  maxWidth: 'var(--fx-size-pattern-faq-max-width)',
+  margin: 0,
+  display: 'grid',
+  gap: 'var(--fx-size-pattern-faq-item-gap)',
+};
+
+export const FaqQuestionsPattern = ({
+  items,
+  defaultExpandedId = null,
+  expandedIds,
+  allowMultipleExpanded = false,
+  onExpandedIdsChange,
+  style,
+}: FaqQuestionsPatternProps) => {
+  const [internalExpandedIds, setInternalExpandedIds] = useState<string[]>(
+    defaultExpandedId ? [defaultExpandedId] : [],
+  );
+  const activeExpandedIds = expandedIds ?? internalExpandedIds;
+  const expandedSet = useMemo(() => new Set(activeExpandedIds), [activeExpandedIds]);
+
+  const updateExpandedIds = (nextIds: string[]) => {
+    if (!expandedIds) {
+      setInternalExpandedIds(nextIds);
+    }
+    onExpandedIdsChange?.(nextIds);
+  };
+
+  const toggleItem = (id: string) => {
+    if (expandedSet.has(id)) {
+      updateExpandedIds(activeExpandedIds.filter((currentId) => currentId !== id));
+      return;
+    }
+
+    if (allowMultipleExpanded) {
+      updateExpandedIds([...activeExpandedIds, id]);
+      return;
+    }
+
+    updateExpandedIds([id]);
+  };
+
+  return (
+    <section style={{ ...layoutStyle, ...style }}>
+      {items.map((item) => (
+        <FaqAccordionItem
+          key={item.id}
+          id={item.id}
+          question={item.question}
+          answer={item.answer}
+          expanded={expandedSet.has(item.id)}
+          onToggle={() => toggleItem(item.id)}
+        />
+      ))}
+    </section>
+  );
+};
diff --git a/packages/design-system/src/components/organisms/HeroBanner.tsx b/packages/design-system/src/components/organisms/HeroBanner.tsx
new file mode 100644
index 0000000..54c563b
--- /dev/null
+++ b/packages/design-system/src/components/organisms/HeroBanner.tsx
@@ -0,0 +1,237 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { HeroBannerActionsPattern } from '../molecules/HeroBannerActionsPattern';
+import { HeroBannerUtilitiesPattern } from '../molecules/HeroBannerUtilitiesPattern';
+import { Text } from '../atoms/Text';
+
+export type HeroBannerSize = 'large' | 'medium' | 'small1' | 'small2' | 'small3';
+
+type HeroBannerActionConfig = {
+  primaryLabel: string;
+  secondaryLabel: string;
+  onPrimaryClick?: () => void;
+  onSecondaryClick?: () => void;
+};
+
+type HeroBannerUtilityConfig = {
+  ratingLabel: string;
+  muteControlLabel: string;
+  audioDescriptionControlLabel: string;
+  replayControlLabel: string;
+  onMuteToggle?: () => void;
+  onAudioDescriptionToggle?: () => void;
+  onReplayToggle?: () => void;
+};
+
+type HeroBannerProps = {
+  size?: HeroBannerSize;
+  backgroundImageUrl?: string;
+  backgroundImageAlt?: string;
+  eyebrow?: string;
+  title?: string;
+  description?: string;
+  supportingText?: string;
+  badgeLabel?: string;
+  actions?: HeroBannerActionConfig;
+  utilities?: HeroBannerUtilityConfig;
+  style?: CSSProperties;
+};
+
+const variantDimensions: Record<HeroBannerSize, CSSProperties> = {
+  large: {
+    width: 'var(--fx-size-pattern-hero-large-width)',
+    minHeight: 'var(--fx-size-pattern-hero-large-height)',
+  },
+  medium: {
+    width: 'var(--fx-size-pattern-hero-medium-width)',
+    minHeight: 'var(--fx-size-pattern-hero-medium-height)',
+  },
+  small1: {
+    width: 'var(--fx-size-pattern-hero-small1-width)',
+    minHeight: 'var(--fx-size-pattern-hero-small1-height)',
+  },
+  small2: {
+    width: 'var(--fx-size-pattern-hero-small2-width)',
+    minHeight: 'var(--fx-size-pattern-hero-small2-height)',
+  },
+  small3: {
+    width: 'var(--fx-size-pattern-hero-small3-width)',
+    minHeight: 'var(--fx-size-pattern-hero-small3-height)',
+  },
+};
+
+const variantTypography: Record<HeroBannerSize, { titleSize: string; descriptionSize: string; contentGap: string }> = {
+  large: { titleSize: 'var(--fx-size-pattern-hero-title-size)', descriptionSize: 'var(--fx-size-pattern-hero-description-size)', contentGap: 'var(--fx-space-4)' },
+  medium: { titleSize: '28px', descriptionSize: '16px', contentGap: 'var(--fx-space-3)' },
+  small1: { titleSize: '24px', descriptionSize: '15px', contentGap: 'var(--fx-space-3)' },
+  small2: { titleSize: 'var(--fx-size-pattern-hero-title-size)', descriptionSize: 'var(--fx-size-pattern-hero-description-size)', contentGap: 'var(--fx-space-4)' },
+  small3: { titleSize: 'var(--fx-size-pattern-hero-title-size)', descriptionSize: 'var(--fx-size-pattern-hero-description-size)', contentGap: 'var(--fx-space-4)' },
+};
+
+const rootStyle: CSSProperties = {
+  maxWidth: '100%',
+  overflow: 'hidden',
+  background: 'var(--fx-color-bg-elevated)',
+};
+
+const mediaStyle: CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  height: 'var(--fx-size-pattern-hero-media-height)',
+  overflow: 'hidden',
+  background: 'var(--fx-color-bg-secondary)',
+};
+
+const imageStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
+
+const mediaOverlayStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  background:
+    'linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, var(--fx-color-hero-media-overlay-bottom) 100%), linear-gradient(90deg, var(--fx-color-hero-media-overlay-left) 0%, rgb(0 0 0 / 0%) 65%)',
+  pointerEvents: 'none',
+};
+
+const contentStyle: CSSProperties = {
+  padding: 'var(--fx-space-4) var(--fx-size-pattern-hero-content-padding-x) var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+  background: 'var(--fx-color-bg-elevated)',
+};
+
+const badgeStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: 'var(--fx-size-pattern-hero-badge-size)',
+  minHeight: 'var(--fx-size-pattern-hero-badge-size)',
+  padding: '0 var(--fx-space-2)',
+  borderRadius: 'var(--fx-radius-input)',
+  background: 'var(--fx-color-brand-primary-active)',
+};
+
+const titleStyle: CSSProperties = {
+  margin: 0,
+  fontSize: 'var(--fx-size-pattern-hero-title-size)',
+  lineHeight: 'var(--fx-size-pattern-hero-title-line-height)',
+};
+
+const descriptionStyle: CSSProperties = {
+  margin: 0,
+  maxWidth: 'var(--fx-size-pattern-hero-description-max-width)',
+  fontSize: 'var(--fx-size-pattern-hero-description-size)',
+  lineHeight: 'var(--fx-size-pattern-hero-description-line-height)',
+};
+
+const supportingTextStyle: CSSProperties = {
+  margin: 0,
+  maxWidth: 'var(--fx-size-pattern-hero-supporting-max-width)',
+  fontSize: 'var(--fx-size-pattern-hero-supporting-size)',
+  lineHeight: 'var(--fx-size-pattern-hero-supporting-line-height)',
+};
+
+const imageOnlyVariants = new Set<HeroBannerSize>(['small2', 'small3']);
+
+export const HeroBanner = ({
+  size = 'large',
+  backgroundImageUrl,
+  backgroundImageAlt = '',
+  eyebrow,
+  title,
+  description,
+  supportingText,
+  badgeLabel,
+  actions,
+  utilities,
+  style,
+}: HeroBannerProps): ReactNode => {
+  const showContent = !imageOnlyVariants.has(size);
+  const typeScale = variantTypography[size];
+
+  return (
+    <section
+      style={{
+        ...rootStyle,
+        ...variantDimensions[size],
+        ...(showContent ? { display: 'grid', gridTemplateRows: 'var(--fx-size-pattern-hero-media-height) 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>
+
+      {showContent ? (
+        <div style={{ ...contentStyle, gap: typeScale.contentGap }}>
+          {badgeLabel ? (
+            <span style={badgeStyle}>
+              <Text as="span" variant="medium-caption1">
+                {badgeLabel}
+              </Text>
+            </span>
+          ) : null}
+
+          {eyebrow ? (
+            <Text
+              as="p"
+              tone="secondary"
+              variant="regular-caption1"
+              style={{ margin: 0, textTransform: 'uppercase', letterSpacing: '0.08em' }}
+            >
+              {eyebrow}
+            </Text>
+          ) : null}
+
+          {title ? (
+            <Text as="h2" variant="bold-title2" style={{ ...titleStyle, fontSize: typeScale.titleSize }}>
+              {title}
+            </Text>
+          ) : null}
+
+          {description ? (
+            <Text as="p" variant="regular-title3" style={{ ...descriptionStyle, fontSize: typeScale.descriptionSize }}>
+              {description}
+            </Text>
+          ) : null}
+
+          {actions ? (
+            <HeroBannerActionsPattern
+              primaryLabel={actions.primaryLabel}
+              secondaryLabel={actions.secondaryLabel}
+              onPrimaryClick={actions.onPrimaryClick}
+              onSecondaryClick={actions.onSecondaryClick}
+            />
+          ) : null}
+
+          {utilities ? (
+            <HeroBannerUtilitiesPattern
+              ratingLabel={utilities.ratingLabel}
+              muteControlLabel={utilities.muteControlLabel}
+              audioDescriptionControlLabel={utilities.audioDescriptionControlLabel}
+              replayControlLabel={utilities.replayControlLabel}
+              onMuteToggle={utilities.onMuteToggle}
+              onAudioDescriptionToggle={utilities.onAudioDescriptionToggle}
+              onReplayToggle={utilities.onReplayToggle}
+            />
+          ) : null}
+
+          {supportingText ? (
+            <Text as="p" tone="secondary" variant="regular-headline2" style={supportingTextStyle}>
+              {supportingText}
+            </Text>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+};
diff --git a/packages/design-system/src/components/organisms/HeroMobile.tsx b/packages/design-system/src/components/organisms/HeroMobile.tsx
new file mode 100644
index 0000000..a4d5d31
--- /dev/null
+++ b/packages/design-system/src/components/organisms/HeroMobile.tsx
@@ -0,0 +1,190 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import { Text } from '../atoms/Text';
+import { PlayAddThumbUpPattern } from '../molecules/PlayAddThumbUpPattern';
+
+type HeroMobileProps = {
+  backgroundImageUrl: string;
+  backgroundImageAlt?: string;
+  previewImageUrl?: string;
+  previewImageAlt?: string;
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  titleAs?: 'h1' | 'h2' | 'h3';
+  playLabel: string;
+  playControlLabel: string;
+  addControlLabel: string;
+  thumbUpControlLabel: string;
+  muteControlLabel: string;
+  closeControlLabel: string;
+  onPlayClick?: () => void;
+  onAddClick?: () => void;
+  onThumbUpClick?: () => void;
+  onMuteClick?: () => void;
+  onCloseClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  minHeight: 'var(--fx-size-pattern-hero-mobile-height)',
+  overflow: 'hidden',
+  background: 'var(--fx-color-bg-secondary)',
+};
+
+const backgroundImageStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  minHeight: 'var(--fx-size-pattern-hero-mobile-height)',
+  objectFit: 'cover',
+  display: 'block',
+};
+
+const overlayStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  background:
+    'linear-gradient(180deg, rgb(24 24 24 / 0%) 48.5%, var(--fx-color-hero-mobile-overlay-bottom) 100%)',
+};
+
+const previewImageWrapperStyle: CSSProperties = {
+  position: 'absolute',
+  left: 'var(--fx-size-pattern-hero-mobile-content-left)',
+  top: 'var(--fx-size-pattern-hero-mobile-preview-top)',
+  width: 'var(--fx-size-pattern-hero-mobile-preview-width)',
+  height: 'var(--fx-size-pattern-hero-mobile-preview-height)',
+  overflow: 'hidden',
+};
+
+const previewImageStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
+
+const closeButtonStyle: CSSProperties = {
+  position: 'absolute',
+  top: 'var(--fx-size-pattern-hero-mobile-close-top)',
+  right: 'var(--fx-size-pattern-hero-mobile-close-right)',
+  width: 'var(--fx-size-pattern-hero-mobile-close-size)',
+  height: 'var(--fx-size-pattern-hero-mobile-close-size)',
+  border: 0,
+  borderRadius: '9999px',
+  background: 'var(--fx-color-hero-mobile-close-background)',
+  padding: 0,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  lineHeight: 0,
+  zIndex: 2,
+};
+
+const contentStyle: CSSProperties = {
+  position: 'absolute',
+  left: 'var(--fx-size-pattern-hero-mobile-content-left)',
+  right: 'var(--fx-size-pattern-hero-mobile-content-right)',
+  bottom: 'var(--fx-size-pattern-hero-mobile-content-bottom)',
+  zIndex: 1,
+  display: 'grid',
+  gap: 'var(--fx-size-pattern-hero-mobile-content-gap)',
+};
+
+const titleStyle: CSSProperties = {
+  margin: 0,
+  maxWidth: 'var(--fx-size-pattern-hero-mobile-title-max-width)',
+  fontSize: 'var(--fx-size-pattern-hero-mobile-title-size)',
+  lineHeight: 'var(--fx-size-pattern-hero-mobile-title-line-height)',
+  fontWeight: 'var(--fx-size-pattern-hero-mobile-title-weight)',
+  letterSpacing: 'var(--fx-size-pattern-hero-mobile-title-letter-spacing)',
+  textTransform: 'uppercase',
+};
+
+const actionsDockStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-4)',
+};
+
+const muteButtonStyle: CSSProperties = {
+  border: 0,
+  padding: 0,
+  background: 'transparent',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+  cursor: 'pointer',
+  width: 'var(--fx-size-pattern-hero-mobile-mute-size)',
+  height: 'var(--fx-size-pattern-hero-mobile-mute-size)',
+  flexShrink: 0,
+};
+
+export const HeroMobile = ({
+  backgroundImageUrl,
+  backgroundImageAlt = '',
+  previewImageUrl,
+  previewImageAlt = '',
+  eyebrow,
+  title,
+  titleAs = 'h1',
+  playLabel,
+  playControlLabel,
+  addControlLabel,
+  thumbUpControlLabel,
+  muteControlLabel,
+  closeControlLabel,
+  onPlayClick,
+  onAddClick,
+  onThumbUpClick,
+  onMuteClick,
+  onCloseClick,
+  style,
+}: HeroMobileProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    <img src={backgroundImageUrl} alt={backgroundImageAlt} style={backgroundImageStyle} />
+    <div aria-hidden="true" style={overlayStyle} />
+
+    {previewImageUrl ? (
+      <div style={previewImageWrapperStyle}>
+        <img src={previewImageUrl} alt={previewImageAlt} style={previewImageStyle} />
+      </div>
+    ) : null}
+
+    <button type="button" aria-label={closeControlLabel} onClick={onCloseClick} style={closeButtonStyle}>
+      <Icon name="cross" size="var(--fx-size-pattern-hero-mobile-close-icon-size)" />
+    </button>
+
+    <div style={contentStyle}>
+      {eyebrow ? (
+        <Text as="p" variant="medium-caption1" style={{ margin: 0, letterSpacing: '0.24em', textTransform: 'uppercase' }}>
+          {eyebrow}
+        </Text>
+      ) : null}
+
+      <Text as={titleAs} variant="display-medium" style={titleStyle}>
+        {title}
+      </Text>
+
+      <div style={actionsDockStyle}>
+        <PlayAddThumbUpPattern
+          playLabel={playLabel}
+          playControlLabel={playControlLabel}
+          addControlLabel={addControlLabel}
+          thumbUpControlLabel={thumbUpControlLabel}
+          onPlayClick={onPlayClick}
+          onAddClick={onAddClick}
+          onThumbUpClick={onThumbUpClick}
+        />
+
+        <button type="button" aria-label={muteControlLabel} onClick={onMuteClick} style={muteButtonStyle}>
+          <Icon name="moviePreviewMuteDefault" size="var(--fx-size-pattern-hero-mobile-mute-size)" />
+        </button>
+      </div>
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/HomeHero.tsx b/packages/design-system/src/components/organisms/HomeHero.tsx
new file mode 100644
index 0000000..ec51de6
--- /dev/null
+++ b/packages/design-system/src/components/organisms/HomeHero.tsx
@@ -0,0 +1,188 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { HomePageHeader, type HomeNavItem } from './HomePageHeader';
+import { HeroBannerActionsPattern } from '../molecules/HeroBannerActionsPattern';
+import { HeroBannerRatingPattern } from '../molecules/HeroBannerRatingPattern';
+import { Text } from '../atoms/Text';
+import type { IconName } from '../../assets/icons';
+
+type HomeHeroActions = {
+  primaryLabel: string;
+  secondaryLabel: string;
+  onPrimaryClick?: () => void;
+  onSecondaryClick?: () => void;
+};
+
+type HomeHeroRating = {
+  label: string;
+  repeatControlIconName?: 'heroBannerPreviewRepeatArrowDefault' | 'heroBannerPreviewRepeatArrowHover';
+};
+
+type HomeHeroProps = {
+  backgroundImageUrl: string;
+  backgroundImageAlt?: string;
+  headerItems: HomeNavItem[];
+  brandLabel: string;
+  title: ReactNode;
+  titleAs?: 'h1' | 'h2';
+  titleWidth?: CSSProperties['maxWidth'];
+  eyebrow?: ReactNode;
+  description?: ReactNode;
+  actions?: HomeHeroActions;
+  rating?: HomeHeroRating;
+  profileIconName?: IconName;
+  searchControlLabel: string;
+  notificationsControlLabel: string;
+  profileControlLabel: string;
+  onSearchClick?: () => void;
+  onNotificationsClick?: () => void;
+  onProfileClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  minHeight: 'var(--fx-size-pattern-home-hero-height)',
+  overflow: 'hidden',
+  background: 'var(--fx-color-bg-secondary)',
+};
+
+const backgroundMediaStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  zIndex: 0,
+};
+
+const backgroundImageStyle: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
+
+const overlaysStyle: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  pointerEvents: 'none',
+  background: [
+    'linear-gradient(180deg, var(--fx-color-home-hero-overlay-top) 0%, rgb(0 0 0 / 0%) 22%)',
+    'linear-gradient(90deg, var(--fx-color-home-hero-overlay-left) 0%, rgb(0 0 0 / 0%) 58%)',
+    'linear-gradient(180deg, rgb(20 20 20 / 0%) 58%, var(--fx-color-home-hero-overlay-bottom) 100%)',
+  ].join(', '),
+};
+
+const contentLayerStyle: CSSProperties = {
+  position: 'relative',
+  zIndex: 1,
+  minHeight: 'var(--fx-size-pattern-home-hero-height)',
+};
+
+const contentStyle: CSSProperties = {
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+  paddingTop: 'var(--fx-size-pattern-home-hero-content-top)',
+  paddingLeft: 'var(--fx-size-pattern-home-hero-content-left)',
+  maxWidth: 'var(--fx-size-pattern-home-hero-content-max-width)',
+};
+
+const titleStyle: CSSProperties = {
+  margin: 0,
+  fontSize: 'var(--fx-size-pattern-home-hero-title-size)',
+  lineHeight: 'var(--fx-size-pattern-home-hero-title-line-height)',
+  maxWidth: 'var(--fx-size-pattern-home-hero-content-max-width)',
+};
+
+const descriptionStyle: CSSProperties = {
+  margin: 0,
+  fontSize: 'var(--fx-size-pattern-home-hero-description-size)',
+  lineHeight: 'var(--fx-size-pattern-home-hero-description-line-height)',
+  maxWidth: 'var(--fx-size-pattern-home-hero-description-max-width)',
+};
+
+const ratingDockStyle: CSSProperties = {
+  position: 'absolute',
+  right: 'var(--fx-size-pattern-home-hero-rating-dock-right)',
+  bottom: 'var(--fx-size-pattern-home-hero-rating-dock-bottom)',
+  height: 'var(--fx-size-pattern-home-hero-rating-dock-height)',
+  paddingLeft: 'var(--fx-space-2)',
+  background: 'var(--fx-color-home-hero-utility-background)',
+  display: 'inline-flex',
+  alignItems: 'center',
+};
+
+export const HomeHero = ({
+  backgroundImageUrl,
+  backgroundImageAlt = '',
+  headerItems,
+  brandLabel,
+  title,
+  titleAs = 'h1',
+  titleWidth,
+  eyebrow,
+  description,
+  actions,
+  rating,
+  profileIconName,
+  searchControlLabel,
+  notificationsControlLabel,
+  profileControlLabel,
+  onSearchClick,
+  onNotificationsClick,
+  onProfileClick,
+  style,
+}: HomeHeroProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    <div style={backgroundMediaStyle}>
+      <img src={backgroundImageUrl} alt={backgroundImageAlt} style={backgroundImageStyle} />
+      <div aria-hidden="true" style={overlaysStyle} />
+    </div>
+
+    <div style={contentLayerStyle}>
+      <HomePageHeader
+        items={headerItems}
+        brandLabel={brandLabel}
+        profileIconName={profileIconName}
+        searchControlLabel={searchControlLabel}
+        notificationsControlLabel={notificationsControlLabel}
+        profileControlLabel={profileControlLabel}
+        onSearchClick={onSearchClick}
+        onNotificationsClick={onNotificationsClick}
+        onProfileClick={onProfileClick}
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 2 }}
+      />
+
+      <div style={contentStyle}>
+        {eyebrow ? (
+          <Text as="p" variant="medium-headline1" style={{ margin: 0 }}>
+            {eyebrow}
+          </Text>
+        ) : null}
+
+        <Text as={titleAs} variant="bold-title1" style={{ ...titleStyle, ...(titleWidth ? { maxWidth: titleWidth } : null) }}>
+          {title}
+        </Text>
+
+        {description ? (
+          <Text as="p" variant="medium-headline2" style={descriptionStyle}>
+            {description}
+          </Text>
+        ) : null}
+
+        {actions ? (
+          <HeroBannerActionsPattern
+            primaryLabel={actions.primaryLabel}
+            secondaryLabel={actions.secondaryLabel}
+            onPrimaryClick={actions.onPrimaryClick}
+            onSecondaryClick={actions.onSecondaryClick}
+          />
+        ) : null}
+      </div>
+
+      {rating ? (
+        <div style={ratingDockStyle}>
+          <HeroBannerRatingPattern ratingLabel={rating.label} leadingIconName={rating.repeatControlIconName} />
+        </div>
+      ) : null}
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/HomePageHeader.tsx b/packages/design-system/src/components/organisms/HomePageHeader.tsx
new file mode 100644
index 0000000..284c7cc
--- /dev/null
+++ b/packages/design-system/src/components/organisms/HomePageHeader.tsx
@@ -0,0 +1,130 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Icon } from '../atoms/Icon';
+import type { IconName } from '../../assets/icons';
+
+export type HomeNavItem = {
+  label: string;
+  href: string;
+  active?: boolean;
+};
+
+type HomePageHeaderProps = {
+  items: HomeNavItem[];
+  brandLabel: string;
+  profileIconName?: IconName;
+  searchControlLabel: string;
+  notificationsControlLabel: string;
+  profileControlLabel: string;
+  onSearchClick?: () => void;
+  onNotificationsClick?: () => void;
+  onProfileClick?: () => void;
+  style?: CSSProperties;
+};
+
+const headerStyle: CSSProperties = {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-6)',
+  padding: 'var(--fx-space-4) var(--fx-space-8)',
+  flexWrap: 'wrap',
+};
+
+const leftStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-8)',
+  flexWrap: 'wrap',
+};
+
+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)',
+  textTransform: 'uppercase',
+};
+
+const navStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-5)',
+  flexWrap: 'wrap',
+};
+
+const rightStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-4)',
+};
+
+const iconButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  lineHeight: 0,
+};
+
+const profileButtonStyle: CSSProperties = {
+  ...iconButtonStyle,
+  gap: 'var(--fx-space-2)',
+};
+
+export const HomePageHeader = ({
+  items,
+  brandLabel,
+  profileIconName = 'account',
+  searchControlLabel,
+  notificationsControlLabel,
+  profileControlLabel,
+  onSearchClick,
+  onNotificationsClick,
+  onProfileClick,
+  style,
+}: HomePageHeaderProps): ReactNode => (
+  <header style={{ ...headerStyle, ...style }}>
+    <div style={leftStyle}>
+      <h2 style={brandStyle}>{brandLabel}</h2>
+      <nav style={navStyle} aria-label="Primary">
+        {items.map((item) => (
+          <a
+            key={item.href}
+            href={item.href}
+            style={{
+              color: item.active ? 'var(--fx-color-text-primary)' : 'var(--fx-color-text-secondary)',
+              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)',
+            }}
+          >
+            {item.label}
+          </a>
+        ))}
+      </nav>
+    </div>
+
+    <div style={rightStyle}>
+      <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}>
+        <Icon name="notification" size="var(--fx-size-pattern-header-action-icon-size)" />
+      </button>
+      <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>
+    </div>
+  </header>
+);
diff --git a/packages/design-system/src/components/organisms/LandingPageHeader.tsx b/packages/design-system/src/components/organisms/LandingPageHeader.tsx
new file mode 100644
index 0000000..f61b6e1
--- /dev/null
+++ b/packages/design-system/src/components/organisms/LandingPageHeader.tsx
@@ -0,0 +1,78 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Button } from '../atoms/Button';
+import { Dropdown, type DropdownOption } from '../atoms/Dropdown';
+
+type LandingPageHeaderProps = {
+  languageOptions: DropdownOption[];
+  languageValue?: string;
+  onLanguageChange?: (value: string, option: DropdownOption) => void;
+  onSignInClick?: () => void;
+  signInLabel?: string;
+  brandLabel?: string;
+  style?: CSSProperties;
+};
+
+const headerStyle: CSSProperties = {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-6)',
+  padding: 'var(--fx-space-6) var(--fx-space-8)',
+  flexWrap: 'wrap',
+};
+
+const brandStyle: CSSProperties = {
+  margin: 0,
+  color: 'var(--fx-color-brand-primary)',
+  fontFamily: 'var(--fx-font-sans)',
+  fontSize: 'var(--fx-size-pattern-header-landing-logo-size)',
+  lineHeight: '1',
+  fontWeight: 'var(--fx-font-weight-bold)',
+  letterSpacing: 'var(--fx-size-pattern-header-logo-letter-spacing)',
+  textTransform: 'uppercase',
+};
+
+const actionsStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'var(--fx-space-4)',
+};
+
+const languageControlStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-header-language-width)',
+};
+
+const signInButtonStyle: CSSProperties = {
+  minWidth: 'var(--fx-size-pattern-header-signin-width)',
+  minHeight: 'var(--fx-size-pattern-header-signin-height)',
+  borderRadius: 'var(--fx-radius-input)',
+};
+
+export const LandingPageHeader = ({
+  languageOptions,
+  languageValue,
+  onLanguageChange,
+  onSignInClick,
+  signInLabel = 'Sign In',
+  brandLabel = 'NETFLIX',
+  style,
+}: LandingPageHeaderProps): ReactNode => (
+  <header style={{ ...headerStyle, ...style }}>
+    <h1 style={brandStyle}>{brandLabel}</h1>
+
+    <div style={actionsStyle}>
+      <Dropdown
+        ariaLabel="Language selector"
+        options={languageOptions}
+        value={languageValue}
+        onChange={onLanguageChange}
+        placeholder="English"
+        style={languageControlStyle}
+      />
+      <Button type="button" size="sm" onClick={onSignInClick} style={signInButtonStyle}>
+        {signInLabel}
+      </Button>
+    </div>
+  </header>
+);
diff --git a/packages/design-system/src/components/organisms/LessonRail.tsx b/packages/design-system/src/components/organisms/LessonRail.tsx
new file mode 100644
index 0000000..c0726a8
--- /dev/null
+++ b/packages/design-system/src/components/organisms/LessonRail.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { LessonTile } from '../molecules/LessonTile';
+
+type LessonRailItem = {
+  id: string;
+  title: string;
+  status: 'released' | 'locked' | 'expired';
+  action?: ReactNode;
+};
+
+type LessonRailProps = {
+  title: string;
+  items: LessonRailItem[];
+};
+
+export const LessonRail = ({ title, items }: LessonRailProps): ReactNode => (
+  <section>
+    <h3>{title}</h3>
+    <ul
+      style={{
+        margin: 0,
+        padding: 0,
+        listStyle: 'none',
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridAutoColumns: 'minmax(240px, 1fr)',
+        gap: 'var(--fx-space-3)',
+        overflowX: 'auto',
+      }}
+    >
+      {items.map((item) => (
+        <li key={item.id}>
+          <LessonTile title={item.title} status={item.status} action={item.action} />
+        </li>
+      ))}
+    </ul>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/ListOfEpisodesPattern.tsx b/packages/design-system/src/components/organisms/ListOfEpisodesPattern.tsx
new file mode 100644
index 0000000..a7a095f
--- /dev/null
+++ b/packages/design-system/src/components/organisms/ListOfEpisodesPattern.tsx
@@ -0,0 +1,64 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { EpisodeListItem } from '../molecules/EpisodeListItem';
+
+export type EpisodeListEntry = {
+  id: string;
+  itemAriaLabel?: string;
+  episodeNumber: number;
+  title: string;
+  durationLabel: string;
+  description: string;
+  imageUrl: string;
+  imageAlt?: string;
+  active?: boolean;
+  onClick?: () => void;
+};
+
+type ListOfEpisodesPatternProps = {
+  title: string;
+  items: EpisodeListEntry[];
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-list-of-episodes-width)',
+  maxWidth: '100%',
+  minHeight: 'var(--fx-size-pattern-list-of-episodes-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+};
+
+const rowDividerStyle: CSSProperties = {
+  height: 'var(--fx-size-border-default)',
+  width: '100%',
+  background: 'var(--fx-color-border-default)',
+};
+
+export const ListOfEpisodesPattern = ({ title, items, style }: ListOfEpisodesPatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    <Text as="h3" variant="medium-headline2">{title}</Text>
+
+    <div style={{ display: 'grid', gap: 'var(--fx-space-2)' }}>
+      {items.map((item, index) => (
+        <div key={item.id} style={{ display: 'grid', gap: 'var(--fx-space-2)' }}>
+          <EpisodeListItem
+            itemAriaLabel={item.itemAriaLabel}
+            episodeNumber={item.episodeNumber}
+            title={item.title}
+            durationLabel={item.durationLabel}
+            description={item.description}
+            imageUrl={item.imageUrl}
+            imageAlt={item.imageAlt}
+            active={item.active}
+            onClick={item.onClick}
+          />
+          {index < items.length - 1 ? <div aria-hidden="true" style={rowDividerStyle} /> : null}
+        </div>
+      ))}
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/MovieBlocksPattern.tsx b/packages/design-system/src/components/organisms/MovieBlocksPattern.tsx
new file mode 100644
index 0000000..4f9b714
--- /dev/null
+++ b/packages/design-system/src/components/organisms/MovieBlocksPattern.tsx
@@ -0,0 +1,62 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { MovieBlockCard } from '../molecules/MovieBlockCard';
+
+export type MovieBlockCardEntry = {
+  id: string;
+  imageUrl: string;
+  imageAlt?: string;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
+};
+
+export type MovieBlockSection = {
+  id: string;
+  title: string;
+  items: MovieBlockCardEntry[];
+};
+
+type MovieBlocksPatternProps = {
+  sections: MovieBlockSection[];
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-movie-blocks-width)',
+  maxWidth: '100%',
+  minHeight: 'var(--fx-size-pattern-movie-blocks-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-6)',
+};
+
+const railStyle: CSSProperties = {
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gridAutoColumns: 'var(--fx-size-pattern-movie-card-standard-width)',
+  gap: 'var(--fx-space-2)',
+  overflowX: 'auto',
+};
+
+export const MovieBlocksPattern = ({ sections, style }: MovieBlocksPatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    {sections.map((section) => (
+      <div key={section.id} style={{ display: 'grid', gap: 'var(--fx-space-3)' }}>
+        <Text as="h3" variant="medium-headline2">{section.title}</Text>
+        <div style={railStyle}>
+          {section.items.map((item) => (
+            <MovieBlockCard
+              key={item.id}
+              imageUrl={item.imageUrl}
+              imageAlt={item.imageAlt}
+              presetIconName={item.presetIconName}
+              onClick={item.onClick}
+            />
+          ))}
+        </div>
+      </div>
+    ))}
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/MoviePreviewDesktopPattern.tsx b/packages/design-system/src/components/organisms/MoviePreviewDesktopPattern.tsx
new file mode 100644
index 0000000..19c8e8d
--- /dev/null
+++ b/packages/design-system/src/components/organisms/MoviePreviewDesktopPattern.tsx
@@ -0,0 +1,114 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { EpisodeListItem } from '../molecules/EpisodeListItem';
+import { MoviePreviewPattern } from '../molecules/MoviePreviewPattern';
+import { MoviePreviewDetailsPattern } from '../molecules/MoviePreviewDetailsPattern';
+
+type EpisodeListEntry = {
+  id: string;
+  itemAriaLabel?: string;
+  episodeNumber: number;
+  title: string;
+  durationLabel: string;
+  description: string;
+  imageUrl: string;
+  imageAlt?: string;
+  active?: boolean;
+  onClick?: () => void;
+};
+
+type MoviePreviewDesktopPatternProps = {
+  heroImageUrl: string;
+  heroImageAlt?: string;
+  title: ReactNode;
+  description: ReactNode;
+  yearLabel: string;
+  ratingIconName?: 'ratingTvMa' | 'ratingTv14' | 'ratingTvPg' | 'ratingTvG';
+  sideTitle: string;
+  sideItem: EpisodeListEntry;
+  onPlayClick?: () => void;
+  onAddClick?: () => void;
+  onThumbUpClick?: () => void;
+  onExpandClick?: () => void;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-movie-preview-desktop-width)',
+  maxWidth: '100%',
+  minHeight: 'var(--fx-size-pattern-movie-preview-desktop-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-6)',
+  display: 'grid',
+  gridTemplateColumns: 'var(--fx-size-pattern-movie-preview-left-width) var(--fx-size-pattern-movie-preview-right-width)',
+  gap: 'var(--fx-space-10)',
+};
+
+const mediaStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-movie-preview-left-width)',
+  height: 'var(--fx-size-pattern-movie-preview-left-media-height)',
+  objectFit: 'cover',
+  display: 'block',
+  borderTopLeftRadius: 'var(--fx-radius-sm)',
+  borderTopRightRadius: 'var(--fx-radius-sm)',
+};
+
+export const MoviePreviewDesktopPattern = ({
+  heroImageUrl,
+  heroImageAlt = '',
+  title,
+  description,
+  yearLabel,
+  ratingIconName = 'ratingTv14',
+  sideTitle,
+  sideItem,
+  onPlayClick,
+  onAddClick,
+  onThumbUpClick,
+  onExpandClick,
+  style,
+}: MoviePreviewDesktopPatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    <div style={{ borderRadius: 'var(--fx-radius-sm)', overflow: 'hidden', background: 'var(--fx-color-bg-secondary)' }}>
+      <img src={heroImageUrl} alt={heroImageAlt} style={mediaStyle} />
+      <div style={{ padding: 'var(--fx-space-4)', display: 'grid', gap: 'var(--fx-space-4)' }}>
+        <Text as="h3" variant="medium-title3">{title}</Text>
+        <Text as="p" variant="regular-body" tone="secondary">{description}</Text>
+        <MoviePreviewPattern
+          onPlayClick={onPlayClick}
+          onAddClick={onAddClick}
+          onThumbUpClick={onThumbUpClick}
+          onExpandClick={onExpandClick}
+          style={{ width: '100%' }}
+        />
+        <MoviePreviewDetailsPattern ratingIconName={ratingIconName} yearLabel={yearLabel} onAddClick={onAddClick} />
+      </div>
+    </div>
+
+    <div
+      style={{
+        borderRadius: 'var(--fx-radius-input)',
+        background: 'var(--fx-color-movie-card-secondary-surface)',
+        padding: 'var(--fx-space-4)',
+        display: 'grid',
+        alignContent: 'start',
+        gap: 'var(--fx-space-3)',
+      }}
+    >
+      <Text as="h4" variant="medium-headline2">{sideTitle}</Text>
+      <EpisodeListItem
+        itemAriaLabel={sideItem.itemAriaLabel}
+        episodeNumber={sideItem.episodeNumber}
+        title={sideItem.title}
+        durationLabel={sideItem.durationLabel}
+        description={sideItem.description}
+        imageUrl={sideItem.imageUrl}
+        imageAlt={sideItem.imageAlt}
+        active={sideItem.active}
+        onClick={sideItem.onClick}
+        style={{ padding: 0, gridTemplateColumns: 'var(--fx-size-pattern-movie-preview-side-thumb-width) auto' }}
+      />
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/MoviesCardsPattern.tsx b/packages/design-system/src/components/organisms/MoviesCardsPattern.tsx
new file mode 100644
index 0000000..4c766fb
--- /dev/null
+++ b/packages/design-system/src/components/organisms/MoviesCardsPattern.tsx
@@ -0,0 +1,149 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { ContinueWatchingCard } from '../molecules/ContinueWatchingCard';
+import { MovieBlockCard } from '../molecules/MovieBlockCard';
+import { Top10EntryCard } from '../molecules/Top10EntryCard';
+
+type ContinueWatchingItem = {
+  id: string;
+  imageUrl: string;
+  imageAlt?: string;
+  progress: number;
+  progressLabel?: string;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
+};
+
+type MovieBlockCardEntry = {
+  id: string;
+  imageUrl: string;
+  imageAlt?: string;
+  presetIconName?: 'presetTop10' | 'presetRecentlyAdded' | 'presetLeavingSoon' | 'presetNewSeason';
+  onClick?: () => void;
+};
+
+type Top10Item = {
+  id: string;
+  rank: number;
+  ariaLabel?: string;
+  imageUrl: string;
+  imageAlt?: string;
+  onClick?: () => void;
+};
+
+type MoviesCardsPatternProps = {
+  title: string;
+  standardCards: MovieBlockCardEntry[];
+  mediumCards?: MovieBlockCardEntry[];
+  smallCards?: MovieBlockCardEntry[];
+  top10Cards?: Top10Item[];
+  continueWatchingCards?: ContinueWatchingItem[];
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-movies-cards-width)',
+  maxWidth: '100%',
+  minHeight: 'var(--fx-size-pattern-movies-cards-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-6)',
+};
+
+const rowStyle: CSSProperties = {
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gap: 'var(--fx-space-3)',
+  overflowX: 'auto',
+  alignItems: 'start',
+};
+
+export const MoviesCardsPattern = ({
+  title,
+  standardCards,
+  mediumCards,
+  smallCards,
+  top10Cards,
+  continueWatchingCards,
+  style,
+}: MoviesCardsPatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    <Text as="h3" variant="medium-headline2">{title}</Text>
+
+    <div style={rowStyle}>
+      {standardCards.map((item) => (
+        <MovieBlockCard
+          key={item.id}
+          size="standard"
+          imageUrl={item.imageUrl}
+          imageAlt={item.imageAlt}
+          presetIconName={item.presetIconName}
+          onClick={item.onClick}
+        />
+      ))}
+    </div>
+
+    {mediumCards?.length ? (
+      <div style={rowStyle}>
+        {mediumCards.map((item) => (
+          <MovieBlockCard
+            key={item.id}
+            size="medium"
+            imageUrl={item.imageUrl}
+            imageAlt={item.imageAlt}
+            presetIconName={item.presetIconName}
+            onClick={item.onClick}
+          />
+        ))}
+      </div>
+    ) : null}
+
+    {smallCards?.length ? (
+      <div style={rowStyle}>
+        {smallCards.map((item) => (
+          <MovieBlockCard
+            key={item.id}
+            size="small"
+            imageUrl={item.imageUrl}
+            imageAlt={item.imageAlt}
+            presetIconName={item.presetIconName}
+            onClick={item.onClick}
+          />
+        ))}
+      </div>
+    ) : null}
+
+    {top10Cards?.length ? (
+      <div style={rowStyle}>
+        {top10Cards.map((item) => (
+          <Top10EntryCard
+            key={item.id}
+            ariaLabel={item.ariaLabel}
+            rank={item.rank}
+            imageUrl={item.imageUrl}
+            imageAlt={item.imageAlt}
+            onClick={item.onClick}
+          />
+        ))}
+      </div>
+    ) : null}
+
+    {continueWatchingCards?.length ? (
+      <div style={rowStyle}>
+        {continueWatchingCards.map((item) => (
+          <ContinueWatchingCard
+            key={item.id}
+            imageUrl={item.imageUrl}
+            imageAlt={item.imageAlt}
+            progress={item.progress}
+            progressLabel={item.progressLabel}
+            presetIconName={item.presetIconName}
+            onClick={item.onClick}
+          />
+        ))}
+      </div>
+    ) : null}
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/PlaybackPanel.tsx b/packages/design-system/src/components/organisms/PlaybackPanel.tsx
new file mode 100644
index 0000000..d19e705
--- /dev/null
+++ b/packages/design-system/src/components/organisms/PlaybackPanel.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+
+type PlaybackPanelProps = {
+  title: string;
+  embedUrl: string;
+  provider: string;
+};
+
+export const PlaybackPanel = ({ title, embedUrl, provider }: PlaybackPanelProps): ReactNode => (
+  <Card>
+    <Text as="h2" variant="medium-title2" style={{ marginTop: 0 }}>
+      {title}
+    </Text>
+    <div
+      style={{
+        width: '100%',
+        aspectRatio: '16 / 9',
+        borderRadius: 'var(--fx-radius-xl)',
+        overflow: 'hidden',
+        border: '1px solid var(--fx-color-border-default)',
+        background: 'var(--fx-color-bg-secondary)',
+      }}
+    >
+      <iframe title={`${title} player`} src={embedUrl} allowFullScreen style={{ width: '100%', height: '100%', border: 0 }} />
+    </div>
+    <Text tone="secondary" variant="regular-body" style={{ marginTop: 'var(--fx-space-3)' }}>
+      Provider: {provider}
+    </Text>
+  </Card>
+);
diff --git a/packages/design-system/src/components/organisms/ProfileMenuPattern.tsx b/packages/design-system/src/components/organisms/ProfileMenuPattern.tsx
new file mode 100644
index 0000000..1761b8d
--- /dev/null
+++ b/packages/design-system/src/components/organisms/ProfileMenuPattern.tsx
@@ -0,0 +1,148 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IconName } from '../../assets/icons';
+import { Text } from '../atoms/Text';
+import { ProfileAvatar } from '../atoms/ProfileAvatar';
+import { ProfileMenuItem } from '../molecules/ProfileMenuItem';
+
+export type ProfileMenuAccount = {
+  id: string;
+  label: ReactNode;
+  imageUrl?: string;
+  imageAlt?: string;
+  ariaLabel: string;
+  onClick?: () => void;
+};
+
+export type ProfileMenuAction = {
+  id: string;
+  label: ReactNode;
+  ariaLabel: string;
+  iconName?: IconName;
+  muted?: boolean;
+  onClick?: () => void;
+};
+
+type ProfileMenuPatternProps = {
+  accounts: ProfileMenuAccount[];
+  actions: ProfileMenuAction[];
+  footerAction?: {
+    label: ReactNode;
+    ariaLabel: string;
+    onClick?: () => void;
+  };
+  showTopPointer?: boolean;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-profile-menu-width)',
+  minHeight: 'var(--fx-size-pattern-profile-menu-min-height)',
+  border: '1px solid var(--fx-color-profile-menu-border)',
+  background: 'var(--fx-color-profile-menu-background)',
+  display: 'grid',
+  gridTemplateRows: 'auto auto 1fr auto',
+};
+
+const sectionStyle: CSSProperties = {
+  padding: 'var(--fx-space-4) var(--fx-space-3)',
+  display: 'grid',
+  gap: 'var(--fx-space-3)',
+};
+
+const accountRowStyle: CSSProperties = {
+  width: '100%',
+  border: 0,
+  background: 'transparent',
+  color: 'var(--fx-color-text-primary)',
+  display: 'grid',
+  gridTemplateColumns: 'var(--fx-size-pattern-profile-avatar-sm-size) auto',
+  alignItems: 'center',
+  gap: 'var(--fx-space-3)',
+  textAlign: 'left',
+  cursor: 'pointer',
+  padding: 0,
+  margin: 0,
+};
+
+const dividerStyle: CSSProperties = {
+  width: '100%',
+  height: '1px',
+  background: 'var(--fx-color-profile-menu-border)',
+};
+
+const footerStyle: CSSProperties = {
+  minHeight: 'var(--fx-size-pattern-profile-menu-footer-height)',
+  borderTop: '1px solid var(--fx-color-profile-menu-border)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0 var(--fx-space-3)',
+};
+
+export const ProfileMenuPattern = ({
+  accounts,
+  actions,
+  footerAction,
+  showTopPointer = true,
+  style,
+}: ProfileMenuPatternProps): ReactNode => (
+  <aside style={{ ...rootStyle, ...style }}>
+    {showTopPointer ? (
+      <div style={{ padding: '0 var(--fx-space-8)', height: '6px', display: 'flex', justifyContent: 'flex-end' }}>
+        <span
+          aria-hidden="true"
+          style={{
+            width: 0,
+            height: 0,
+            borderLeft: '6px solid transparent',
+            borderRight: '6px solid transparent',
+            borderBottom: '6px solid var(--fx-color-profile-menu-border)',
+            transform: 'translateY(-6px)',
+          }}
+        />
+      </div>
+    ) : null}
+
+    <div style={sectionStyle}>
+      {accounts.map((account) => (
+        <button key={account.id} type="button" onClick={account.onClick} aria-label={account.ariaLabel} style={accountRowStyle}>
+          <ProfileAvatar
+            imageUrl={account.imageUrl}
+            imageAlt={account.imageAlt}
+            size="sm"
+            interactive={false}
+          />
+          <Text as="span" variant="regular-small-body-normal">{account.label}</Text>
+        </button>
+      ))}
+    </div>
+
+    <div style={dividerStyle} />
+
+    <div style={{ ...sectionStyle, alignContent: 'start' }}>
+      {actions.map((action) => (
+        <ProfileMenuItem
+          key={action.id}
+          label={action.label}
+          iconName={action.iconName}
+          muted={action.muted}
+          ariaLabel={action.ariaLabel}
+          onClick={action.onClick}
+        />
+      ))}
+    </div>
+
+    {footerAction ? (
+      <button
+        type="button"
+        onClick={footerAction.onClick}
+        aria-label={footerAction.ariaLabel}
+        style={{ ...footerStyle, padding: 0, margin: 0, background: 'transparent', width: '100%' }}
+      >
+        <Text as="span" variant="regular-small-body-normal">{footerAction.label}</Text>
+      </button>
+    ) : (
+      <div />
+    )}
+  </aside>
+);
diff --git a/packages/design-system/src/components/organisms/Top10Pattern.tsx b/packages/design-system/src/components/organisms/Top10Pattern.tsx
new file mode 100644
index 0000000..2102069
--- /dev/null
+++ b/packages/design-system/src/components/organisms/Top10Pattern.tsx
@@ -0,0 +1,55 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { Top10EntryCard } from '../molecules/Top10EntryCard';
+
+export type Top10Item = {
+  id: string;
+  rank: number;
+  ariaLabel?: string;
+  imageUrl: string;
+  imageAlt?: string;
+  onClick?: () => void;
+};
+
+type Top10PatternProps = {
+  title: string;
+  items: Top10Item[];
+  columns?: number;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: 'var(--fx-size-pattern-top10-width)',
+  maxWidth: '100%',
+  minHeight: 'var(--fx-size-pattern-top10-height)',
+  borderRadius: 'var(--fx-radius-lg)',
+  background: 'var(--fx-color-bg-elevated)',
+  padding: 'var(--fx-space-6)',
+  display: 'grid',
+  gap: 'var(--fx-space-5)',
+};
+
+export const Top10Pattern = ({ title, items, columns = 4, style }: Top10PatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    <Text as="h3" variant="medium-headline2">{title}</Text>
+
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${columns}, minmax(var(--fx-size-pattern-top10-card-width), 1fr))`,
+        gap: 'var(--fx-space-4)',
+      }}
+    >
+      {items.map((item) => (
+        <Top10EntryCard
+          key={item.id}
+          ariaLabel={item.ariaLabel}
+          rank={item.rank}
+          imageUrl={item.imageUrl}
+          imageAlt={item.imageAlt}
+          onClick={item.onClick}
+        />
+      ))}
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/UserProfilesPattern.tsx b/packages/design-system/src/components/organisms/UserProfilesPattern.tsx
new file mode 100644
index 0000000..1cfaea6
--- /dev/null
+++ b/packages/design-system/src/components/organisms/UserProfilesPattern.tsx
@@ -0,0 +1,70 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Text } from '../atoms/Text';
+import { ProfileAvatar } from '../atoms/ProfileAvatar';
+
+export type UserProfileEntry = {
+  id: string;
+  label: ReactNode;
+  imageUrl?: string;
+  imageAlt?: string;
+  selected?: boolean;
+  ariaLabel: string;
+  onClick?: () => void;
+};
+
+type UserProfilesPatternProps = {
+  profiles: UserProfileEntry[];
+  addProfile?: {
+    label: ReactNode;
+    ariaLabel: string;
+    onClick?: () => void;
+  };
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  width: '100%',
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 'var(--fx-space-8)',
+  alignItems: 'flex-start',
+};
+
+const cardButtonStyle: CSSProperties = {
+  border: 0,
+  background: 'transparent',
+  padding: 0,
+  margin: 0,
+  display: 'grid',
+  gap: 'var(--fx-space-4)',
+  justifyItems: 'center',
+  cursor: 'pointer',
+};
+
+export const UserProfilesPattern = ({ profiles, addProfile, style }: UserProfilesPatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    {profiles.map((profile) => (
+      <button key={profile.id} type="button" onClick={profile.onClick} aria-label={profile.ariaLabel} style={cardButtonStyle}>
+        <ProfileAvatar
+          imageUrl={profile.imageUrl}
+          imageAlt={profile.imageAlt}
+          size="lg"
+          selected={profile.selected}
+          interactive={false}
+        />
+        <Text as="span" variant="regular-headline2" tone={profile.selected ? 'primary' : 'tertiary'}>
+          {profile.label}
+        </Text>
+      </button>
+    ))}
+
+    {addProfile ? (
+      <button type="button" onClick={addProfile.onClick} aria-label={addProfile.ariaLabel} style={cardButtonStyle}>
+        <ProfileAvatar size="lg" addState ariaLabel={addProfile.ariaLabel} interactive={false} />
+        <Text as="span" variant="regular-headline2" tone="tertiary">
+          {addProfile.label}
+        </Text>
+      </button>
+    ) : null}
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerChangingSoundPattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerChangingSoundPattern.tsx
new file mode 100644
index 0000000..d6efb81
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerChangingSoundPattern.tsx
@@ -0,0 +1,39 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerPattern } from './VideoPlayerPattern';
+import { VideoVolumeSlider } from '../molecules/VideoVolumeSlider';
+
+type VideoPlayerChangingSoundPatternProps = {
+  playerProps: Omit<Parameters<typeof VideoPlayerPattern>[0], 'overlayContent'>;
+  volumePercent: number;
+  muted?: boolean;
+  volumeLabel: string;
+  onVolumeIconClick?: () => void;
+  onVolumeChange?: (next: number) => void;
+  style?: CSSProperties;
+};
+
+export const VideoPlayerChangingSoundPattern = ({
+  playerProps,
+  volumePercent,
+  muted = false,
+  volumeLabel,
+  onVolumeIconClick,
+  onVolumeChange,
+  style,
+}: VideoPlayerChangingSoundPatternProps): ReactNode => (
+  <VideoPlayerPattern
+    {...playerProps}
+    style={style}
+    overlayContent={(
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <VideoVolumeSlider
+          volumePercent={volumePercent}
+          muted={muted}
+          iconLabel={volumeLabel}
+          onIconClick={onVolumeIconClick}
+          onChange={onVolumeChange}
+        />
+      </div>
+    )}
+  />
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerEpisodesPreviewPattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerEpisodesPreviewPattern.tsx
new file mode 100644
index 0000000..5332223
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerEpisodesPreviewPattern.tsx
@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoEpisodesPreview, type VideoEpisodePreviewItem } from '../molecules/VideoEpisodesPreview';
+import { VideoPlayerPattern } from './VideoPlayerPattern';
+
+type VideoPlayerEpisodesPreviewPatternProps = {
+  playerProps: Omit<Parameters<typeof VideoPlayerPattern>[0], 'overlayContent'>;
+  title: ReactNode;
+  episodes: VideoEpisodePreviewItem[];
+  style?: CSSProperties;
+};
+
+export const VideoPlayerEpisodesPreviewPattern = ({
+  playerProps,
+  title,
+  episodes,
+  style,
+}: VideoPlayerEpisodesPreviewPatternProps): ReactNode => (
+  <section style={{ display: 'grid', gap: 'var(--fx-space-4)', ...style }}>
+    <VideoPlayerPattern {...playerProps} />
+
+    <div style={{ display: 'grid', gap: 'var(--fx-space-3)' }}>
+      <span style={{ fontFamily: 'var(--fx-font-sans)', fontSize: 'var(--fx-typo-medium-headline2-size)' }}>{title}</span>
+      <VideoEpisodesPreview items={episodes} />
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerNextEpisodePattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerNextEpisodePattern.tsx
new file mode 100644
index 0000000..a0fe9e1
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerNextEpisodePattern.tsx
@@ -0,0 +1,32 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoNextEpisodeCard } from '../molecules/VideoNextEpisodeCard';
+import { VideoPlayerPattern } from './VideoPlayerPattern';
+
+type VideoPlayerNextEpisodePatternProps = {
+  playerProps: Omit<Parameters<typeof VideoPlayerPattern>[0], 'overlayContent'>;
+  card: {
+    title: ReactNode;
+    episodeLabel: ReactNode;
+    description?: ReactNode;
+    artworkUrl?: string;
+    artworkAlt?: string;
+    playLabel: string;
+    onPlayClick?: () => void;
+  };
+  style?: CSSProperties;
+};
+
+export const VideoPlayerNextEpisodePattern = ({ playerProps, card, style }: VideoPlayerNextEpisodePatternProps): ReactNode => (
+  <section style={{ display: 'grid', gap: 'var(--fx-space-4)', ...style }}>
+    <VideoPlayerPattern {...playerProps} />
+    <VideoNextEpisodeCard
+      title={card.title}
+      episodeLabel={card.episodeLabel}
+      description={card.description}
+      artworkUrl={card.artworkUrl}
+      artworkAlt={card.artworkAlt}
+      playLabel={card.playLabel}
+      onPlayClick={card.onPlayClick}
+    />
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerPattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerPattern.tsx
new file mode 100644
index 0000000..1e5be79
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerPattern.tsx
@@ -0,0 +1,135 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerControlsPattern } from '../molecules/VideoPlayerControlsPattern';
+import { VideoPlayerUtilitiesPattern } from '../molecules/VideoPlayerUtilitiesPattern';
+import { VideoProgressIndicator } from '../molecules/VideoProgressIndicator';
+
+type VideoPlayerPatternProps = {
+  backdropImageUrl?: string;
+  backdropImageAlt?: string;
+  progress: {
+    elapsedLabel: string;
+    remainingLabel: string;
+    progressPercent: number;
+    bufferPercent?: number;
+    markerPercent?: number;
+  };
+  controlLabels: {
+    play: string;
+    back10: string;
+    forward10: string;
+    sound: string;
+    nextEpisode: string;
+    listOfEpisodes: string;
+    subtitles: string;
+    speed: string;
+    fullScreen: string;
+  };
+  controlsState?: 'default' | 'hover';
+  onPlayClick?: () => void;
+  onBackClick?: () => void;
+  onForwardClick?: () => void;
+  onSoundClick?: () => void;
+  onNextEpisodeClick?: () => void;
+  onListOfEpisodesClick?: () => void;
+  onSubtitlesClick?: () => void;
+  onSpeedClick?: () => void;
+  onFullScreenClick?: () => void;
+  overlayContent?: ReactNode;
+  style?: CSSProperties;
+};
+
+const rootStyle: CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  minHeight: '320px',
+  background: 'var(--fx-color-bg-secondary)',
+  overflow: 'hidden',
+};
+
+const overlayStyle: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  background: 'linear-gradient(180deg, rgb(20 20 20 / 0%) 0%, rgb(20 20 20 / 92%) 44%)',
+  padding: 'var(--fx-space-4) var(--fx-space-8) var(--fx-space-4)',
+  display: 'grid',
+  gap: 'var(--fx-space-3)',
+};
+
+const controlsRowStyle: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 'var(--fx-space-4)',
+  flexWrap: 'wrap',
+};
+
+export const VideoPlayerPattern = ({
+  backdropImageUrl,
+  backdropImageAlt = '',
+  progress,
+  controlLabels,
+  controlsState = 'default',
+  onPlayClick,
+  onBackClick,
+  onForwardClick,
+  onSoundClick,
+  onNextEpisodeClick,
+  onListOfEpisodesClick,
+  onSubtitlesClick,
+  onSpeedClick,
+  onFullScreenClick,
+  overlayContent,
+  style,
+}: VideoPlayerPatternProps): ReactNode => (
+  <section style={{ ...rootStyle, ...style }}>
+    {backdropImageUrl ? (
+      <img src={backdropImageUrl} alt={backdropImageAlt} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
+    ) : null}
+
+    <div style={overlayStyle}>
+      {overlayContent}
+
+      <VideoProgressIndicator
+        elapsedLabel={progress.elapsedLabel}
+        remainingLabel={progress.remainingLabel}
+        progressPercent={progress.progressPercent}
+        bufferPercent={progress.bufferPercent}
+        markerPercent={progress.markerPercent}
+      />
+
+      <div style={controlsRowStyle}>
+        <VideoPlayerControlsPattern
+          labels={{
+            play: controlLabels.play,
+            back10: controlLabels.back10,
+            forward10: controlLabels.forward10,
+            sound: controlLabels.sound,
+          }}
+          iconState={controlsState}
+          onPlayClick={onPlayClick}
+          onBackClick={onBackClick}
+          onForwardClick={onForwardClick}
+          onSoundClick={onSoundClick}
+        />
+
+        <VideoPlayerUtilitiesPattern
+          labels={{
+            nextEpisode: controlLabels.nextEpisode,
+            listOfEpisodes: controlLabels.listOfEpisodes,
+            subtitles: controlLabels.subtitles,
+            speed: controlLabels.speed,
+            fullScreen: controlLabels.fullScreen,
+          }}
+          iconState={controlsState}
+          onNextEpisodeClick={onNextEpisodeClick}
+          onListOfEpisodesClick={onListOfEpisodesClick}
+          onSubtitlesClick={onSubtitlesClick}
+          onSpeedClick={onSpeedClick}
+          onFullScreenClick={onFullScreenClick}
+        />
+      </div>
+    </div>
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerPlaybackSpeedPattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerPlaybackSpeedPattern.tsx
new file mode 100644
index 0000000..27f47e4
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerPlaybackSpeedPattern.tsx
@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerPattern } from './VideoPlayerPattern';
+import { VideoOptionMenu, type VideoOptionItem } from '../molecules/VideoOptionMenu';
+
+type VideoPlayerPlaybackSpeedPatternProps = {
+  playerProps: Omit<Parameters<typeof VideoPlayerPattern>[0], 'overlayContent'>;
+  title: ReactNode;
+  speeds: VideoOptionItem[];
+  style?: CSSProperties;
+};
+
+export const VideoPlayerPlaybackSpeedPattern = ({ playerProps, title, speeds, style }: VideoPlayerPlaybackSpeedPatternProps): ReactNode => (
+  <VideoPlayerPattern
+    {...playerProps}
+    style={style}
+    overlayContent={(
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <VideoOptionMenu title={title} options={speeds} style={{ width: 420, maxHeight: 380 }} />
+      </div>
+    )}
+  />
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerScrollPreviewPattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerScrollPreviewPattern.tsx
new file mode 100644
index 0000000..6d29917
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerScrollPreviewPattern.tsx
@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoEpisodesPreview, type VideoEpisodePreviewItem } from '../molecules/VideoEpisodesPreview';
+import { VideoPlayerPattern } from './VideoPlayerPattern';
+
+type VideoPlayerScrollPreviewPatternProps = {
+  playerProps: Omit<Parameters<typeof VideoPlayerPattern>[0], 'overlayContent'>;
+  items: VideoEpisodePreviewItem[];
+  style?: CSSProperties;
+};
+
+export const VideoPlayerScrollPreviewPattern = ({ playerProps, items, style }: VideoPlayerScrollPreviewPatternProps): ReactNode => (
+  <section style={{ display: 'grid', gap: 'var(--fx-space-4)', ...style }}>
+    <VideoPlayerPattern {...playerProps} />
+    <VideoEpisodesPreview items={items} horizontal />
+  </section>
+);
diff --git a/packages/design-system/src/components/organisms/VideoPlayerSubtitlesPattern.tsx b/packages/design-system/src/components/organisms/VideoPlayerSubtitlesPattern.tsx
new file mode 100644
index 0000000..003c062
--- /dev/null
+++ b/packages/design-system/src/components/organisms/VideoPlayerSubtitlesPattern.tsx
@@ -0,0 +1,22 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { VideoPlayerPattern } from './VideoPlayerPattern';
+import { VideoOptionMenu, type VideoOptionItem } from '../molecules/VideoOptionMenu';
+
+type VideoPlayerSubtitlesPatternProps = {
+  playerProps: Omit<Parameters<typeof VideoPlayerPattern>[0], 'overlayContent'>;
+  title: ReactNode;
+  options: VideoOptionItem[];
+  style?: CSSProperties;
+};
+
+export const VideoPlayerSubtitlesPattern = ({ playerProps, title, options, style }: VideoPlayerSubtitlesPatternProps): ReactNode => (
+  <VideoPlayerPattern
+    {...playerProps}
+    style={style}
+    overlayContent={(
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <VideoOptionMenu title={title} options={options} style={{ width: 430, maxHeight: 420 }} />
+      </div>
+    )}
+  />
+);
diff --git a/packages/design-system/src/components/organisms/index.ts b/packages/design-system/src/components/organisms/index.ts
new file mode 100644
index 0000000..77e8cdd
--- /dev/null
+++ b/packages/design-system/src/components/organisms/index.ts
@@ -0,0 +1,25 @@
+export * from './AdminHeader';
+export * from './AppTopNav';
+export * from './ContinueWatchingPattern';
+export * from './FaqQuestionsPattern';
+export * from './HeroBanner';
+export * from './HomeHero';
+export * from './HomePageHeader';
+export * from './LandingPageHeader';
+export * from './LessonRail';
+export * from './HeroMobile';
+export * from './ListOfEpisodesPattern';
+export * from './MovieBlocksPattern';
+export * from './MoviePreviewDesktopPattern';
+export * from './MoviesCardsPattern';
+export * from './PlaybackPanel';
+export * from './ProfileMenuPattern';
+export * from './Top10Pattern';
+export * from './UserProfilesPattern';
+export * from './VideoPlayerChangingSoundPattern';
+export * from './VideoPlayerEpisodesPreviewPattern';
+export * from './VideoPlayerNextEpisodePattern';
+export * from './VideoPlayerPattern';
+export * from './VideoPlayerPlaybackSpeedPattern';
+export * from './VideoPlayerScrollPreviewPattern';
+export * from './VideoPlayerSubtitlesPattern';
diff --git a/packages/design-system/src/components/pages/AdminDashboardPage.tsx b/packages/design-system/src/components/pages/AdminDashboardPage.tsx
new file mode 100644
index 0000000..f2d4179
--- /dev/null
+++ b/packages/design-system/src/components/pages/AdminDashboardPage.tsx
@@ -0,0 +1 @@
+export { AdminDashboardTemplate as AdminDashboardPage } from '../templates/AdminDashboardTemplate';
diff --git a/packages/design-system/src/components/pages/AdminEventsPage.tsx b/packages/design-system/src/components/pages/AdminEventsPage.tsx
new file mode 100644
index 0000000..056a17f
--- /dev/null
+++ b/packages/design-system/src/components/pages/AdminEventsPage.tsx
@@ -0,0 +1 @@
+export { AdminContentTemplate as AdminEventsPage } from '../templates/AdminContentTemplate';
diff --git a/packages/design-system/src/components/pages/AdminLessonsPage.tsx b/packages/design-system/src/components/pages/AdminLessonsPage.tsx
new file mode 100644
index 0000000..4daf8dc
--- /dev/null
+++ b/packages/design-system/src/components/pages/AdminLessonsPage.tsx
@@ -0,0 +1 @@
+export { AdminContentTemplate as AdminLessonsPage } from '../templates/AdminContentTemplate';
diff --git a/packages/design-system/src/components/pages/AdminQuizzesPage.tsx b/packages/design-system/src/components/pages/AdminQuizzesPage.tsx
new file mode 100644
index 0000000..a414df2
--- /dev/null
+++ b/packages/design-system/src/components/pages/AdminQuizzesPage.tsx
@@ -0,0 +1 @@
+export { AdminContentTemplate as AdminQuizzesPage } from '../templates/AdminContentTemplate';
diff --git a/packages/design-system/src/components/pages/LearnerCatalogPage.tsx b/packages/design-system/src/components/pages/LearnerCatalogPage.tsx
new file mode 100644
index 0000000..948ca27
--- /dev/null
+++ b/packages/design-system/src/components/pages/LearnerCatalogPage.tsx
@@ -0,0 +1 @@
+export { LearnerCatalogTemplate as LearnerCatalogPage } from '../templates/LearnerCatalogTemplate';
diff --git a/packages/design-system/src/components/pages/LearnerPlaybackPage.tsx b/packages/design-system/src/components/pages/LearnerPlaybackPage.tsx
new file mode 100644
index 0000000..0e0c78f
--- /dev/null
+++ b/packages/design-system/src/components/pages/LearnerPlaybackPage.tsx
@@ -0,0 +1 @@
+export { LearnerPlaybackTemplate as LearnerPlaybackPage } from '../templates/LearnerPlaybackTemplate';
diff --git a/packages/design-system/src/components/pages/index.ts b/packages/design-system/src/components/pages/index.ts
new file mode 100644
index 0000000..eb45bc9
--- /dev/null
+++ b/packages/design-system/src/components/pages/index.ts
@@ -0,0 +1,6 @@
+export * from './AdminDashboardPage';
+export * from './AdminEventsPage';
+export * from './AdminLessonsPage';
+export * from './AdminQuizzesPage';
+export * from './LearnerCatalogPage';
+export * from './LearnerPlaybackPage';
diff --git a/packages/design-system/src/components/templates/AdminContentTemplate.tsx b/packages/design-system/src/components/templates/AdminContentTemplate.tsx
new file mode 100644
index 0000000..cf6bfc8
--- /dev/null
+++ b/packages/design-system/src/components/templates/AdminContentTemplate.tsx
@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+
+type AdminContentTemplateProps = {
+  leftTitle: string;
+  rightTitle: string;
+  left: ReactNode;
+  right: ReactNode;
+};
+
+export const AdminContentTemplate = ({ leftTitle, rightTitle, left, right }: AdminContentTemplateProps) => (
+  <section style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'var(--fx-space-4)' }}>
+    <Card>
+      <Text as="h2" variant="medium-title2" style={{ marginTop: 0 }}>
+        {leftTitle}
+      </Text>
+      {left}
+    </Card>
+    <Card>
+      <Text as="h2" variant="medium-title2" style={{ marginTop: 0 }}>
+        {rightTitle}
+      </Text>
+      {right}
+    </Card>
+  </section>
+);
diff --git a/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx b/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx
new file mode 100644
index 0000000..e0292e5
--- /dev/null
+++ b/packages/design-system/src/components/templates/AdminDashboardTemplate.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { AdminHeader } from '../organisms/AdminHeader';
+import { AppTopNav } from '../organisms/AppTopNav';
+
+type AdminDashboardTemplateProps = {
+  title: string;
+  subtitle: string;
+  onLogout: () => void;
+  navItems: { label: string; href: string; active?: boolean }[];
+  children: ReactNode;
+};
+
+export const AdminDashboardTemplate = ({
+  title,
+  subtitle,
+  onLogout,
+  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>
+);
diff --git a/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx b/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx
new file mode 100644
index 0000000..1f880fb
--- /dev/null
+++ b/packages/design-system/src/components/templates/LearnerCatalogTemplate.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { AccessKeyForm } from '../molecules/AccessKeyForm';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+import { HeroBanner } from '../organisms/HeroBanner';
+import { LessonRail } from '../organisms/LessonRail';
+
+type LessonItem = {
+  id: string;
+  title: string;
+  status: 'released' | 'locked' | 'expired';
+  action?: ReactNode;
+};
+
+type LearnerCatalogTemplateProps = {
+  eventSlug: string;
+  accessKey: string;
+  onAccessKeyChange: (next: string) => void;
+  onLoad: () => void;
+  loading?: boolean;
+  heroTitle: string;
+  heroDescription?: string;
+  releasedItems: LessonItem[];
+  gatedItems: LessonItem[];
+};
+
+export const LearnerCatalogTemplate = ({
+  eventSlug,
+  accessKey,
+  onAccessKeyChange,
+  onLoad,
+  loading,
+  heroTitle,
+  heroDescription,
+  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>
+);
diff --git a/packages/design-system/src/components/templates/LearnerPlaybackTemplate.tsx b/packages/design-system/src/components/templates/LearnerPlaybackTemplate.tsx
new file mode 100644
index 0000000..82b2a91
--- /dev/null
+++ b/packages/design-system/src/components/templates/LearnerPlaybackTemplate.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { Card } from '../atoms/Card';
+import { Text } from '../atoms/Text';
+import { PlaybackPanel } from '../organisms/PlaybackPanel';
+
+type LearnerPlaybackTemplateProps = {
+  title: string;
+  embedUrl: string;
+  provider: string;
+  materials: ReactNode;
+  quiz: ReactNode;
+};
+
+export const LearnerPlaybackTemplate = ({ title, embedUrl, provider, materials, quiz }: LearnerPlaybackTemplateProps) => (
+  <main style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gap: 'var(--fx-space-4)', padding: 'var(--fx-space-6)' }}>
+    <PlaybackPanel title={title} embedUrl={embedUrl} provider={provider} />
+    <Card>
+      <Text as="h3" variant="medium-title3" style={{ marginTop: 0 }}>
+        Lesson Materials
+      </Text>
+      {materials}
+    </Card>
+    <Card>
+      <Text as="h3" variant="medium-title3" style={{ marginTop: 0 }}>
+        Lesson Quiz
+      </Text>
+      {quiz}
+    </Card>
+  </main>
+);
diff --git a/packages/design-system/src/components/templates/index.ts b/packages/design-system/src/components/templates/index.ts
new file mode 100644
index 0000000..4c1b9b8
--- /dev/null
+++ b/packages/design-system/src/components/templates/index.ts
@@ -0,0 +1,4 @@
+export * from './AdminContentTemplate';
+export * from './AdminDashboardTemplate';
+export * from './LearnerCatalogTemplate';
+export * from './LearnerPlaybackTemplate';
diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts
index e56053c..08be52b 100644
--- a/packages/design-system/src/index.ts
+++ b/packages/design-system/src/index.ts
@@ -1 +1,3 @@
 export * from './tokens';
+export * from './assets';
+export * from './components';
diff --git a/packages/design-system/src/tokens/colors.ts b/packages/design-system/src/tokens/colors.ts
index db297f1..765790b 100644
--- a/packages/design-system/src/tokens/colors.ts
+++ b/packages/design-system/src/tokens/colors.ts
@@ -89,17 +89,59 @@ export const colors = {
       active: '#b3b3b3',
       disabled: '#545454',
     },
+    hero: {
+      mediaOverlayLeft: 'rgba(0, 0, 0, 0.60)',
+      mediaOverlayBottom: 'rgba(0, 0, 0, 0.72)',
+      controlBackground: 'rgba(0, 0, 0, 0.30)',
+      controlBorder: 'rgba(255, 255, 255, 0.70)',
+      ratingBackground: '#6d6d6e',
+    },
+    homeHero: {
+      overlayTop: 'rgba(0, 0, 0, 0.70)',
+      overlayLeft: 'rgba(0, 0, 0, 0.60)',
+      overlayBottom: '#141414',
+      utilityBackground: 'rgba(51, 51, 51, 0.60)',
+    },
+    heroMobile: {
+      overlayBottom: '#181818',
+      closeBackground: '#181818',
+    },
+    profile: {
+      menuBackground: '#141414',
+      menuBorder: '#808080',
+      menuTextMuted: '#B3B3B3',
+      avatarSelectionBorder: '#E5E5E5',
+      avatarAddBackground: '#808080',
+      avatarAddForeground: '#141414',
+    },
+    movieCard: {
+      progressTrack: 'rgba(255, 255, 255, 0.35)',
+      activeBackground: '#232323',
+      secondarySurface: '#2f2f2f',
+    },
     status: {
       success: '#46d369',
       error: '#EB3942',
       warning: '#448EF4',
       info: '#0071EB',
     },
+    faq: {
+      itemBackgroundDefault: '#2D2D2D',
+      itemBackgroundHover: '#414141',
+      answerBackground: '#2A2A2A',
+      divider: '#181818',
+    },
     player: {
       controls: '#FFFFFF',
       controlsHover: 'rgba(255, 255, 255, 0.70)',
       progressBar: '#E50914',
       progressBackground: 'rgba(255, 255, 255, 0.30)',
+      surface: '#262626',
+      panel: '#181818',
+      panelMuted: '#545454',
+      panelSoft: '#3A3A3A',
+      marker: '#D2D2D2',
+      mutedText: '#B3B3B3',
     },
   },
 } as const;
diff --git a/packages/design-system/src/tokens/fonts/BebasNeue-Regular.ttf b/packages/design-system/src/tokens/fonts/BebasNeue-Regular.ttf
new file mode 100644
index 0000000..c328c6e
Binary files /dev/null and b/packages/design-system/src/tokens/fonts/BebasNeue-Regular.ttf differ
diff --git a/packages/design-system/src/tokens/fonts/NetflixSans-Bd.ttf b/packages/design-system/src/tokens/fonts/NetflixSans-Bd.ttf
new file mode 100644
index 0000000..6a8eb27
Binary files /dev/null and b/packages/design-system/src/tokens/fonts/NetflixSans-Bd.ttf differ
diff --git a/packages/design-system/src/tokens/fonts/NetflixSans-Md.ttf b/packages/design-system/src/tokens/fonts/NetflixSans-Md.ttf
new file mode 100644
index 0000000..8a87763
Binary files /dev/null and b/packages/design-system/src/tokens/fonts/NetflixSans-Md.ttf differ
diff --git a/packages/design-system/src/tokens/fonts/NetflixSans-Rg.ttf b/packages/design-system/src/tokens/fonts/NetflixSans-Rg.ttf
new file mode 100644
index 0000000..c730693
Binary files /dev/null and b/packages/design-system/src/tokens/fonts/NetflixSans-Rg.ttf differ
diff --git a/packages/design-system/src/tokens/foundations.ts b/packages/design-system/src/tokens/foundations.ts
index 1a9cafb..0ea7bf4 100644
--- a/packages/design-system/src/tokens/foundations.ts
+++ b/packages/design-system/src/tokens/foundations.ts
@@ -66,6 +66,100 @@ export const breakpoints = {
   '2xl': '1536px',
 } as const;
 
+export const componentSizes = {
+  faq: {
+    maxWidth: '1104px',
+    itemMinHeight: '84px',
+    itemPaddingX: '24px',
+    itemGap: '8px',
+    icon: '30px',
+    answerGap: '24px',
+    textSize: '40px',
+    textLineHeight: '1.15',
+  },
+  hero: {
+    large: { width: '518px', height: '406px' },
+    medium: { width: '518px', height: '360px' },
+    small1: { width: '518px', height: '289px' },
+    small2: { width: '518px', height: '207px' },
+    small3: { width: '340px', height: '136px' },
+    mediaHeight: '207px',
+    contentPaddingX: '24px',
+    actionHeight: '42px',
+    control: '36px',
+    ratingWidth: '111px',
+    ratingHeight: '36px',
+  },
+  homeHero: {
+    height: '810px',
+    contentTop: '118px',
+    contentLeft: '54px',
+    contentMaxWidth: '560px',
+    titleSize: '92px',
+    titleLineHeight: '0.88',
+    descriptionSize: '35px',
+    descriptionLineHeight: '1.2',
+    descriptionMaxWidth: '640px',
+    ratingDockRight: '0px',
+    ratingDockBottom: '322px',
+    ratingDockHeight: '42px',
+  },
+  heroMobile: {
+    height: '481px',
+    contentLeft: '48px',
+    contentRight: '48px',
+    contentBottom: '64px',
+    titleMaxWidth: '420px',
+    titleSize: '57px',
+    titleLineHeight: '0.9',
+    previewTop: '206px',
+    previewWidth: '340px',
+    previewHeight: '136px',
+    closeTop: '17px',
+    closeRight: '16px',
+    closeSize: '36px',
+    muteSize: '40px',
+  },
+  profile: {
+    menuWidth: '218px',
+    menuMinHeight: '350px',
+    avatarSmall: '32px',
+    avatarMedium: '56px',
+    avatarLarge: '144px',
+    compactTriggerWidth: '172px',
+    compactTriggerHeight: '96px',
+  },
+  videoPlayer: {
+    overlayHeight: '213px',
+    progressTrackWidth: '1330px',
+    progressTrackHeight: '8px',
+    progressThumbSize: '16px',
+    volumeRailWidth: '34px',
+    volumeRailHeight: '146px',
+    volumeBarWidth: '12px',
+    optionPanelWidth: '584px',
+    optionPanelHeight: '568px',
+    nextEpisodeCardWidth: '700px',
+    nextEpisodeCardHeight: '274px',
+  },
+  movieCard: {
+    small: { width: '128px', height: '72px' },
+    standard: { width: '218px', height: '123px' },
+    medium: { width: '236px', height: '132px' },
+    top10Poster: { width: '74px', height: '154px' },
+    progressTrackWidth: '132px',
+    progressTrackHeight: '3px',
+  },
+  movieLayouts: {
+    continueWatching: { width: '337px', height: '405px' },
+    listOfEpisodes: { width: '873px', height: '459px' },
+    top10: { width: '979px', height: '447px' },
+    movieBlocks: { width: '1559px', height: '1342px' },
+    moviesCards: { width: '631px', height: '1329px' },
+    moviePreviewDesktop: { width: '758px', height: '471px' },
+  },
+} as const;
+
 export const zIndex = {
   dropdown: 1000,
   modal: 1100,
diff --git a/packages/design-system/src/tokens/theme.css b/packages/design-system/src/tokens/theme.css
index 4f0a723..e03b261 100644
--- a/packages/design-system/src/tokens/theme.css
+++ b/packages/design-system/src/tokens/theme.css
@@ -1,21 +1,92 @@
+@font-face {
+  font-family: "Netflix Sans";
+  src: url("./fonts/NetflixSans-Rg.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Netflix Sans";
+  src: url("./fonts/NetflixSans-Md.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Netflix Sans";
+  src: url("./fonts/NetflixSans-Bd.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Bebas Neue";
+  src: url("./fonts/BebasNeue-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 :root {
   --fx-color-bg-primary: #000000;
   --fx-color-bg-secondary: #141414;
   --fx-color-bg-elevated: #181818;
   --fx-color-bg-card: #2a2a2a;
   --fx-color-bg-hover: #333333;
+  --fx-color-bg-input: rgb(0 0 0 / 50%);
   --fx-color-brand-primary: #e50914;
   --fx-color-brand-hover: #c11119;
+  --fx-color-brand-primary-active: #f50723;
   --fx-color-text-primary: #ffffff;
   --fx-color-text-secondary: #b3b3b3;
   --fx-color-text-tertiary: #808080;
+  --fx-color-text-placeholder: #bcbcbc;
+  --fx-color-link-primary: #0071eb;
+  --fx-color-bg-overlay-strong: rgb(109 109 110 / 70%);
   --fx-color-border-default: #333333;
   --fx-color-border-strong: #808080;
+  --fx-color-faq-item-background-default: #2d2d2d;
+  --fx-color-faq-item-background-hover: #414141;
+  --fx-color-faq-answer-background: #2a2a2a;
+  --fx-color-faq-divider: #181818;
+  --fx-color-hero-media-overlay-left: rgb(0 0 0 / 60%);
+  --fx-color-hero-media-overlay-bottom: rgb(0 0 0 / 72%);
+  --fx-color-hero-control-background: rgb(0 0 0 / 30%);
+  --fx-color-hero-control-border: rgb(255 255 255 / 70%);
+  --fx-color-hero-rating-background: #6d6d6e;
+  --fx-color-home-hero-overlay-top: rgb(0 0 0 / 70%);
+  --fx-color-home-hero-overlay-left: rgb(0 0 0 / 60%);
+  --fx-color-home-hero-overlay-bottom: #141414;
+  --fx-color-home-hero-utility-background: rgb(51 51 51 / 60%);
+  --fx-color-hero-mobile-overlay-bottom: #181818;
+  --fx-color-hero-mobile-close-background: #181818;
+  --fx-color-profile-menu-background: #141414;
+  --fx-color-profile-menu-border: #808080;
+  --fx-color-profile-menu-text-muted: #b3b3b3;
+  --fx-color-profile-avatar-selection-border: #e5e5e5;
+  --fx-color-profile-avatar-add-background: #808080;
+  --fx-color-profile-avatar-add-foreground: #141414;
+  --fx-color-player-surface: #262626;
+  --fx-color-player-panel: #181818;
+  --fx-color-player-panel-muted: #545454;
+  --fx-color-player-panel-soft: #3a3a3a;
+  --fx-color-player-marker: #d2d2d2;
+  --fx-color-player-muted-text: #b3b3b3;
+  --fx-color-movie-card-progress-track: rgb(255 255 255 / 35%);
+  --fx-color-movie-card-active-background: #232323;
+  --fx-color-movie-card-secondary-surface: #2f2f2f;
   --fx-color-success: #46d369;
   --fx-color-error: #eb3942;
+  --fx-opacity-disabled: 0.7;
 
   --fx-font-sans: 'Netflix Sans', 'Helvetica Neue', Arial, sans-serif;
   --fx-font-display: 'Bebas Neue', 'Arial Black', sans-serif;
+  --fx-font-weight-regular: 400;
+  --fx-font-weight-medium: 500;
+  --fx-font-weight-bold: 700;
 
   --fx-space-1: 4px;
   --fx-space-2: 8px;
@@ -28,17 +99,328 @@
   --fx-space-12: 48px;
 
   --fx-radius-sm: 2px;
+  --fx-radius-input: 4px;
+  --fx-radius-button: 4px;
   --fx-radius-md: 6px;
   --fx-radius-lg: 8px;
   --fx-radius-xl: 12px;
 
+  --fx-size-input-height: 55px;
+  --fx-size-button-height-sm: 40px;
+  --fx-size-button-height-md: 48px;
+  --fx-size-button-height-lg: 56px;
+  --fx-size-button-padding-x-sm: 14px;
+  --fx-size-button-padding-x-md: 16px;
+  --fx-size-button-padding-x-lg: 24px;
+  --fx-size-input-error-icon: 16px;
+  --fx-size-border-default: 1px;
+  --fx-size-focus-ring: 2px;
+  --fx-size-pattern-get-started-input-width: 367px;
+  --fx-size-pattern-get-started-button-width: 208px;
+  --fx-size-pattern-get-started-button-height: 56px;
+  --fx-size-pattern-get-started-arrow-width: 9px;
+  --fx-size-pattern-get-started-arrow-height: 16px;
+  --fx-size-pattern-get-started-arrow-stroke: 2px;
+  --fx-size-pattern-signin-control-width: 314px;
+  --fx-size-pattern-signin-button-height: 40px;
+  --fx-size-pattern-signin-checkbox-size: 18px;
+  --fx-size-pattern-movie-info-left-min-width: 320px;
+  --fx-size-pattern-movie-info-right-min-width: 240px;
+  --fx-size-pattern-movie-info-quality-icon-width: 37px;
+  --fx-size-pattern-movie-info-quality-icon-height: 18px;
+  --fx-size-pattern-movie-info-rating-icon-width: 48px;
+  --fx-size-pattern-movie-info-rating-icon-height: 24px;
+  --fx-size-pattern-movie-info-preset-icon-width: 24px;
+  --fx-size-pattern-movie-info-preset-icon-height: 36px;
+  --fx-size-pattern-video-icon-play: 36px;
+  --fx-size-pattern-video-icon-control: 40px;
+  --fx-size-pattern-video-button-icon: 21px;
+  --fx-size-pattern-video-play-button-width: 119px;
+  --fx-size-pattern-video-more-info-button-width: 161px;
+  --fx-size-pattern-video-rating-width: 111px;
+  --fx-size-pattern-video-rating-height: 36px;
+  --fx-size-pattern-video-movie-preview-width: 291px;
+  --fx-size-pattern-video-rating-icon-width: 70px;
+  --fx-size-pattern-video-quality-icon-width: 30px;
+  --fx-size-pattern-movie-card-small-width: 128px;
+  --fx-size-pattern-movie-card-small-height: 72px;
+  --fx-size-pattern-movie-card-standard-width: 218px;
+  --fx-size-pattern-movie-card-standard-height: 123px;
+  --fx-size-pattern-movie-card-medium-width: 236px;
+  --fx-size-pattern-movie-card-medium-height: 132px;
+  --fx-size-pattern-movie-card-preset-width: 20px;
+  --fx-size-pattern-movie-card-preset-height: 29px;
+  --fx-size-pattern-movie-progress-track-width: 132px;
+  --fx-size-pattern-movie-progress-track-height: 3px;
+  --fx-size-pattern-continue-watching-width: 337px;
+  --fx-size-pattern-continue-watching-height: 405px;
+  --fx-size-pattern-list-of-episodes-width: 873px;
+  --fx-size-pattern-list-of-episodes-height: 459px;
+  --fx-size-pattern-episode-thumb-width: 128px;
+  --fx-size-pattern-episode-thumb-height: 72px;
+  --fx-size-pattern-top10-width: 979px;
+  --fx-size-pattern-top10-height: 447px;
+  --fx-size-pattern-top10-card-width: 178px;
+  --fx-size-pattern-top10-card-height: 154px;
+  --fx-size-pattern-top10-rank-size: 154px;
+  --fx-size-pattern-top10-poster-left: 96px;
+  --fx-size-pattern-top10-poster-width: 74px;
+  --fx-size-pattern-top10-poster-height: 154px;
+  --fx-size-pattern-top10-badge-width: 20px;
+  --fx-size-pattern-top10-badge-height: 29px;
+  --fx-size-pattern-movie-blocks-width: 1559px;
+  --fx-size-pattern-movie-blocks-height: 1342px;
+  --fx-size-pattern-movies-cards-width: 631px;
+  --fx-size-pattern-movies-cards-height: 1329px;
+  --fx-size-pattern-movie-preview-desktop-width: 758px;
+  --fx-size-pattern-movie-preview-desktop-height: 471px;
+  --fx-size-pattern-movie-preview-left-width: 323px;
+  --fx-size-pattern-movie-preview-left-media-height: 181px;
+  --fx-size-pattern-movie-preview-right-width: 236px;
+  --fx-size-pattern-movie-preview-side-thumb-width: 128px;
+  --fx-size-pattern-hero-mobile-height: 481px;
+  --fx-size-pattern-hero-mobile-content-left: 48px;
+  --fx-size-pattern-hero-mobile-content-right: 48px;
+  --fx-size-pattern-hero-mobile-content-bottom: 64px;
+  --fx-size-pattern-hero-mobile-content-gap: 16px;
+  --fx-size-pattern-hero-mobile-title-max-width: 420px;
+  --fx-size-pattern-hero-mobile-title-size: 57px;
+  --fx-size-pattern-hero-mobile-title-line-height: 0.9;
+  --fx-size-pattern-hero-mobile-title-weight: 700;
+  --fx-size-pattern-hero-mobile-title-letter-spacing: -0.02em;
+  --fx-size-pattern-hero-mobile-preview-top: 206px;
+  --fx-size-pattern-hero-mobile-preview-width: 340px;
+  --fx-size-pattern-hero-mobile-preview-height: 136px;
+  --fx-size-pattern-hero-mobile-close-size: 36px;
+  --fx-size-pattern-hero-mobile-close-top: 17px;
+  --fx-size-pattern-hero-mobile-close-right: 16px;
+  --fx-size-pattern-hero-mobile-close-icon-size: 24px;
+  --fx-size-pattern-hero-mobile-mute-size: 40px;
+  --fx-size-pattern-profile-menu-width: 218px;
+  --fx-size-pattern-profile-menu-min-height: 350px;
+  --fx-size-pattern-profile-avatar-sm-size: 32px;
+  --fx-size-pattern-profile-avatar-md-size: 56px;
+  --fx-size-pattern-profile-avatar-lg-size: 144px;
+  --fx-size-pattern-profile-avatar-sm-radius: 2px;
+  --fx-size-pattern-profile-avatar-lg-radius: 4px;
+  --fx-size-pattern-profile-compact-trigger-width: 172px;
+  --fx-size-pattern-profile-compact-trigger-height: 96px;
+  --fx-size-pattern-profile-menu-footer-height: 48px;
+  --fx-size-pattern-player-overlay-height: 213px;
+  --fx-size-pattern-player-progress-track-width: 1330px;
+  --fx-size-pattern-player-progress-track-height: 8px;
+  --fx-size-pattern-player-progress-thumb-size: 16px;
+  --fx-size-pattern-player-volume-rail-width: 34px;
+  --fx-size-pattern-player-volume-rail-height: 146px;
+  --fx-size-pattern-player-volume-bar-width: 12px;
+  --fx-size-pattern-player-option-panel-width: 584px;
+  --fx-size-pattern-player-option-panel-height: 568px;
+  --fx-size-pattern-player-next-episode-card-width: 700px;
+  --fx-size-pattern-player-next-episode-card-height: 274px;
+  --fx-size-pattern-header-landing-logo-size: 56px;
+  --fx-size-pattern-header-home-logo-size: 38px;
+  --fx-size-pattern-header-logo-letter-spacing: 0.06em;
+  --fx-size-pattern-header-language-width: 177px;
+  --fx-size-pattern-header-signin-width: 76px;
+  --fx-size-pattern-header-signin-height: 36px;
+  --fx-size-pattern-header-action-icon-size: 24px;
+  --fx-size-pattern-header-avatar-size: 32px;
+  --fx-size-pattern-header-caret-size: 10px;
+  --fx-size-pattern-faq-max-width: 1104px;
+  --fx-size-pattern-faq-item-min-height: 84px;
+  --fx-size-pattern-faq-item-padding-x: 24px;
+  --fx-size-pattern-faq-item-gap: 8px;
+  --fx-size-pattern-faq-icon-size: 30px;
+  --fx-size-pattern-faq-answer-gap: 24px;
+  --fx-size-pattern-faq-text-size: 40px;
+  --fx-size-pattern-faq-text-line-height: 1.15;
+  --fx-size-pattern-hero-large-width: 518px;
+  --fx-size-pattern-hero-large-height: 406px;
+  --fx-size-pattern-hero-medium-width: 518px;
+  --fx-size-pattern-hero-medium-height: 360px;
+  --fx-size-pattern-hero-small1-width: 518px;
+  --fx-size-pattern-hero-small1-height: 289px;
+  --fx-size-pattern-hero-small2-width: 518px;
+  --fx-size-pattern-hero-small2-height: 207px;
+  --fx-size-pattern-hero-small3-width: 340px;
+  --fx-size-pattern-hero-small3-height: 136px;
+  --fx-size-pattern-hero-media-height: 207px;
+  --fx-size-pattern-hero-content-padding-x: 24px;
+  --fx-size-pattern-hero-action-height: 42px;
+  --fx-size-pattern-hero-control-size: 36px;
+  --fx-size-pattern-hero-rating-width: 111px;
+  --fx-size-pattern-hero-rating-height: 36px;
+  --fx-size-pattern-hero-badge-size: 32px;
+  --fx-size-pattern-hero-title-size: 32px;
+  --fx-size-pattern-hero-title-line-height: 1.1;
+  --fx-size-pattern-hero-description-size: 18px;
+  --fx-size-pattern-hero-description-line-height: 1.35;
+  --fx-size-pattern-hero-description-max-width: 470px;
+  --fx-size-pattern-hero-supporting-size: 14px;
+  --fx-size-pattern-hero-supporting-line-height: 1.4;
+  --fx-size-pattern-hero-supporting-max-width: 470px;
+  --fx-size-pattern-home-hero-height: 810px;
+  --fx-size-pattern-home-hero-content-top: 118px;
+  --fx-size-pattern-home-hero-content-left: 54px;
+  --fx-size-pattern-home-hero-content-max-width: 560px;
+  --fx-size-pattern-home-hero-title-size: 92px;
+  --fx-size-pattern-home-hero-title-line-height: 0.88;
+  --fx-size-pattern-home-hero-description-size: 35px;
+  --fx-size-pattern-home-hero-description-line-height: 1.2;
+  --fx-size-pattern-home-hero-description-max-width: 640px;
+  --fx-size-pattern-home-hero-rating-dock-right: 0px;
+  --fx-size-pattern-home-hero-rating-dock-bottom: 322px;
+  --fx-size-pattern-home-hero-rating-dock-height: 42px;
+
   --fx-breakpoint-sm: 640px;
   --fx-breakpoint-md: 768px;
   --fx-breakpoint-lg: 1024px;
 
+  /* Backward-compatible aliases */
   --fx-text-caption: 13px;
   --fx-text-body: 16px;
   --fx-text-headline: 21px;
   --fx-text-title: 30px;
   --fx-text-display: 48px;
+
+  /* Regular scale */
+  --fx-typo-regular-caption2-size: 11px;
+  --fx-typo-regular-caption2-line: 100%;
+  --fx-typo-regular-caption2-weight: 400;
+  --fx-typo-regular-caption2-spacing: 0;
+  --fx-typo-regular-caption1-size: 13px;
+  --fx-typo-regular-caption1-line: 16px;
+  --fx-typo-regular-caption1-weight: 400;
+  --fx-typo-regular-caption1-spacing: 0.25px;
+  --fx-typo-regular-small-body-size: 14px;
+  --fx-typo-regular-small-body-line: 100%;
+  --fx-typo-regular-small-body-weight: 400;
+  --fx-typo-regular-small-body-spacing: -0.2px;
+  --fx-typo-regular-small-body-normal-size: 14px;
+  --fx-typo-regular-small-body-normal-line: 20px;
+  --fx-typo-regular-small-body-normal-weight: 400;
+  --fx-typo-regular-small-body-normal-spacing: 0;
+  --fx-typo-regular-body-size: 16px;
+  --fx-typo-regular-body-line: 100%;
+  --fx-typo-regular-body-weight: 400;
+  --fx-typo-regular-body-spacing: 0;
+  --fx-typo-regular-headline2-size: 17px;
+  --fx-typo-regular-headline2-line: 100%;
+  --fx-typo-regular-headline2-weight: 400;
+  --fx-typo-regular-headline2-spacing: 0;
+  --fx-typo-regular-headline1-size: 18px;
+  --fx-typo-regular-headline1-line: 22px;
+  --fx-typo-regular-headline1-weight: 400;
+  --fx-typo-regular-headline1-spacing: 0;
+  --fx-typo-regular-title4-size: 20px;
+  --fx-typo-regular-title4-line: 30px;
+  --fx-typo-regular-title4-weight: 400;
+  --fx-typo-regular-title4-spacing: 0;
+  --fx-typo-regular-title3-size: 21px;
+  --fx-typo-regular-title3-line: 25px;
+  --fx-typo-regular-title3-weight: 400;
+  --fx-typo-regular-title3-spacing: 0;
+  --fx-typo-regular-title2-size: 24px;
+  --fx-typo-regular-title2-line: 30px;
+  --fx-typo-regular-title2-weight: 400;
+  --fx-typo-regular-title2-spacing: 0;
+  --fx-typo-regular-title1-size: 27px;
+  --fx-typo-regular-title1-line: 36px;
+  --fx-typo-regular-title1-weight: 400;
+  --fx-typo-regular-title1-spacing: 0;
+  --fx-typo-regular-large-title-size: 50px;
+  --fx-typo-regular-large-title-line: 100%;
+  --fx-typo-regular-large-title-weight: 400;
+  --fx-typo-regular-large-title-spacing: 0;
+
+  /* Medium scale */
+  --fx-typo-medium-caption2-size: 12px;
+  --fx-typo-medium-caption2-line: 100%;
+  --fx-typo-medium-caption2-weight: 500;
+  --fx-typo-medium-caption2-spacing: -0.25px;
+  --fx-typo-medium-caption1-size: 13px;
+  --fx-typo-medium-caption1-line: 100%;
+  --fx-typo-medium-caption1-weight: 500;
+  --fx-typo-medium-caption1-spacing: 0;
+  --fx-typo-medium-small-body-size: 14px;
+  --fx-typo-medium-small-body-line: 100%;
+  --fx-typo-medium-small-body-weight: 500;
+  --fx-typo-medium-small-body-spacing: 0;
+  --fx-typo-medium-body-size: 16px;
+  --fx-typo-medium-body-line: 24px;
+  --fx-typo-medium-body-weight: 500;
+  --fx-typo-medium-body-spacing: 0;
+  --fx-typo-medium-body-condensed-size: 16px;
+  --fx-typo-medium-body-condensed-line: 24px;
+  --fx-typo-medium-body-condensed-weight: 500;
+  --fx-typo-medium-body-condensed-spacing: 0.5px;
+  --fx-typo-medium-headline2-size: 20px;
+  --fx-typo-medium-headline2-line: 30px;
+  --fx-typo-medium-headline2-weight: 500;
+  --fx-typo-medium-headline2-spacing: 0;
+  --fx-typo-medium-headline1-size: 21px;
+  --fx-typo-medium-headline1-line: 25px;
+  --fx-typo-medium-headline1-weight: 500;
+  --fx-typo-medium-headline1-spacing: 0;
+  --fx-typo-medium-title4-size: 22px;
+  --fx-typo-medium-title4-line: 22px;
+  --fx-typo-medium-title4-weight: 500;
+  --fx-typo-medium-title4-spacing: 0;
+  --fx-typo-medium-title3-size: 24px;
+  --fx-typo-medium-title3-line: 100%;
+  --fx-typo-medium-title3-weight: 500;
+  --fx-typo-medium-title3-spacing: 0;
+  --fx-typo-medium-title3-condensed-size: 24px;
+  --fx-typo-medium-title3-condensed-line: 100%;
+  --fx-typo-medium-title3-condensed-weight: 500;
+  --fx-typo-medium-title3-condensed-spacing: -0.5px;
+  --fx-typo-medium-title2-size: 28px;
+  --fx-typo-medium-title2-line: 45px;
+  --fx-typo-medium-title2-weight: 500;
+  --fx-typo-medium-title2-spacing: 0;
+  --fx-typo-medium-title1-size: 30px;
+  --fx-typo-medium-title1-line: 45px;
+  --fx-typo-medium-title1-weight: 500;
+  --fx-typo-medium-title1-spacing: 0;
+  --fx-typo-medium-large-title-size: 33px;
+  --fx-typo-medium-large-title-line: 100%;
+  --fx-typo-medium-large-title-weight: 500;
+  --fx-typo-medium-large-title-spacing: 0;
+
+  /* Bold scale */
+  --fx-typo-bold-title2-size: 20px;
+  --fx-typo-bold-title2-line: 30px;
+  --fx-typo-bold-title2-weight: 700;
+  --fx-typo-bold-title2-spacing: 0;
+  --fx-typo-bold-title1-size: 48px;
+  --fx-typo-bold-title1-line: 62px;
+  --fx-typo-bold-title1-weight: 700;
+  --fx-typo-bold-title1-spacing: 0;
+  --fx-typo-bold-large-title-size: 55px;
+  --fx-typo-bold-large-title-line: 100%;
+  --fx-typo-bold-large-title-weight: 700;
+  --fx-typo-bold-large-title-spacing: -1px;
+
+  /* Display scale */
+  --fx-typo-display-small-size: 24px;
+  --fx-typo-display-small-line: 1;
+  --fx-typo-display-small-weight: 400;
+  --fx-typo-display-small-spacing: 0.5px;
+  --fx-typo-display-medium-size: 36px;
+  --fx-typo-display-medium-line: 1;
+  --fx-typo-display-medium-weight: 400;
+  --fx-typo-display-medium-spacing: 0.5px;
+  --fx-typo-display-large-size: 48px;
+  --fx-typo-display-large-line: 1;
+  --fx-typo-display-large-weight: 400;
+  --fx-typo-display-large-spacing: 0.5px;
+  --fx-typo-display-xlarge-size: 64px;
+  --fx-typo-display-xlarge-line: 1;
+  --fx-typo-display-xlarge-weight: 400;
+  --fx-typo-display-xlarge-spacing: 0.5px;
+}
+
+[data-fx-input='true']::placeholder {
+  color: var(--fx-color-text-placeholder);
+  opacity: 1;
 }
diff --git a/packages/design-system/src/tokens/typography.ts b/packages/design-system/src/tokens/typography.ts
index 84d9741..62d87fa 100644
--- a/packages/design-system/src/tokens/typography.ts
+++ b/packages/design-system/src/tokens/typography.ts
@@ -9,38 +9,38 @@ export const typography = {
     bold: '700',
   },
   scale: {
-    caption2: { fontSize: '11px', lineHeight: '1.3', fontWeight: '400', letterSpacing: '0' },
-    caption1: { fontSize: '13px', lineHeight: '1.3', fontWeight: '400', letterSpacing: '0.25px' },
-    smallBody: { fontSize: '14px', lineHeight: '1.4', fontWeight: '400', letterSpacing: '-0.25px' },
-    smallBodyNormal: { fontSize: '14px', lineHeight: '1.4', fontWeight: '400', letterSpacing: '0' },
-    body: { fontSize: '16px', lineHeight: '1.5', fontWeight: '400', letterSpacing: '0' },
-    headline2: { fontSize: '17px', lineHeight: '1.3', fontWeight: '400', letterSpacing: '0' },
-    headline1: { fontSize: '18px', lineHeight: '1.3', fontWeight: '400', letterSpacing: '0' },
-    title4: { fontSize: '20px', lineHeight: '1.3', fontWeight: '400', letterSpacing: '0' },
-    title3: { fontSize: '21px', lineHeight: '1.3', fontWeight: '400', letterSpacing: '0' },
-    title2: { fontSize: '24px', lineHeight: '1.2', fontWeight: '400', letterSpacing: '0' },
-    title1: { fontSize: '27px', lineHeight: '1.2', fontWeight: '400', letterSpacing: '0' },
-    largeTitle: { fontSize: '50px', lineHeight: '1.1', fontWeight: '400', letterSpacing: '0' },
+    caption2: { fontSize: '11px', lineHeight: '100%', fontWeight: '400', letterSpacing: '0' },
+    caption1: { fontSize: '13px', lineHeight: '16px', fontWeight: '400', letterSpacing: '0.25px' },
+    smallBody: { fontSize: '14px', lineHeight: '100%', fontWeight: '400', letterSpacing: '-0.2px' },
+    smallBodyNormal: { fontSize: '14px', lineHeight: '20px', fontWeight: '400', letterSpacing: '0' },
+    body: { fontSize: '16px', lineHeight: '100%', fontWeight: '400', letterSpacing: '0' },
+    headline2: { fontSize: '17px', lineHeight: '100%', fontWeight: '400', letterSpacing: '0' },
+    headline1: { fontSize: '18px', lineHeight: '22px', fontWeight: '400', letterSpacing: '0' },
+    title4: { fontSize: '20px', lineHeight: '30px', fontWeight: '400', letterSpacing: '0' },
+    title3: { fontSize: '21px', lineHeight: '25px', fontWeight: '400', letterSpacing: '0' },
+    title2: { fontSize: '24px', lineHeight: '30px', fontWeight: '400', letterSpacing: '0' },
+    title1: { fontSize: '27px', lineHeight: '36px', fontWeight: '400', letterSpacing: '0' },
+    largeTitle: { fontSize: '50px', lineHeight: '100%', fontWeight: '400', letterSpacing: '0' },
   },
   medium: {
-    caption2: { fontSize: '12px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '0' },
-    caption1: { fontSize: '13px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '0' },
-    smallBody: { fontSize: '14px', lineHeight: '1.4', fontWeight: '500', letterSpacing: '0' },
-    body: { fontSize: '16px', lineHeight: '1.5', fontWeight: '500', letterSpacing: '0' },
-    bodyCondensed: { fontSize: '16px', lineHeight: '1.5', fontWeight: '500', letterSpacing: '-0.5px' },
-    headline2: { fontSize: '20px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '0' },
-    headline1: { fontSize: '21px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '0' },
-    title4: { fontSize: '22px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '0' },
-    title3: { fontSize: '24px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '0' },
-    title3Condensed: { fontSize: '24px', lineHeight: '1.3', fontWeight: '500', letterSpacing: '-0.5px' },
-    title2: { fontSize: '28px', lineHeight: '1.2', fontWeight: '500', letterSpacing: '0' },
-    title1: { fontSize: '30px', lineHeight: '1.2', fontWeight: '500', letterSpacing: '0' },
-    largeTitle: { fontSize: '33px', lineHeight: '1.1', fontWeight: '500', letterSpacing: '0' },
+    caption2: { fontSize: '12px', lineHeight: '100%', fontWeight: '500', letterSpacing: '-0.25px' },
+    caption1: { fontSize: '13px', lineHeight: '100%', fontWeight: '500', letterSpacing: '0' },
+    smallBody: { fontSize: '14px', lineHeight: '100%', fontWeight: '500', letterSpacing: '0' },
+    body: { fontSize: '16px', lineHeight: '24px', fontWeight: '500', letterSpacing: '0' },
+    bodyCondensed: { fontSize: '16px', lineHeight: '24px', fontWeight: '500', letterSpacing: '0.5px' },
+    headline2: { fontSize: '20px', lineHeight: '30px', fontWeight: '500', letterSpacing: '0' },
+    headline1: { fontSize: '21px', lineHeight: '25px', fontWeight: '500', letterSpacing: '0' },
+    title4: { fontSize: '22px', lineHeight: '22px', fontWeight: '500', letterSpacing: '0' },
+    title3: { fontSize: '24px', lineHeight: '100%', fontWeight: '500', letterSpacing: '0' },
+    title3Condensed: { fontSize: '24px', lineHeight: '100%', fontWeight: '500', letterSpacing: '-0.5px' },
+    title2: { fontSize: '28px', lineHeight: '45px', fontWeight: '500', letterSpacing: '0' },
+    title1: { fontSize: '30px', lineHeight: '45px', fontWeight: '500', letterSpacing: '0' },
+    largeTitle: { fontSize: '33px', lineHeight: '100%', fontWeight: '500', letterSpacing: '0' },
   },
   bold: {
-    title2: { fontSize: '20px', lineHeight: '1.3', fontWeight: '700', letterSpacing: '0' },
-    title1: { fontSize: '48px', lineHeight: '1.1', fontWeight: '700', letterSpacing: '0' },
-    largeTitle: { fontSize: '55px', lineHeight: '1.0', fontWeight: '700', letterSpacing: '0' },
+    title2: { fontSize: '20px', lineHeight: '30px', fontWeight: '700', letterSpacing: '0' },
+    title1: { fontSize: '48px', lineHeight: '62px', fontWeight: '700', letterSpacing: '0' },
+    largeTitle: { fontSize: '55px', lineHeight: '100%', fontWeight: '700', letterSpacing: '-1px' },
   },
   display: {
     small: { fontFamily: 'Bebas Neue', fontSize: '24px', lineHeight: '1.0', fontWeight: '400', letterSpacing: '0.5px' },